Viver-Li
Viver-Li

8.最俗学习之-Vue源码学习-数据篇(下)

源码地址

new Watcher(vm, expOrFn, cb, options)，对于这个对应的文件在src/observer/watcher.js
关于这个也看了很多的文章，自己也有写了学习的笔记，不过最后还是决定引用一篇文章，因为大概
的思路也就是这样子，然后再Vue的实现里面还有很多复杂的东西，我也没怎么看懂，但是那些都是一
些辅助的东西，并不是主要的核心功能，看完下面这篇文章即可明白dep和watch和observer的关系

看这里

看这里

看这里

深入浅出Vue基于“依赖收集”的响应式原理

之前还有几个问题剩下的，今天把它看一下

Vue.set = set // 涉及到Vue的数据响应式系统，先保留

Vue.delete = del // 涉及到Vue的数据响应式系统，先保留



<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue.set和Vue.deletetitle>
head>
<body>
  <div id="app">
    <h2>{{msg}}h2>
    <p v-for="v in list">{{v}}p>
    <button v-text="'click me'" @click="changeList()">button>
    <button v-text="'click me'" @click="deleteList()">button>
  div>
body>
<script type="text/javascript" src="vue.js">script>
<script>

/**
 * Set a property on an object. Adds the new property and
 * triggers change notification if the property doesn't
 * already exist.
 */
function set$1 (obj, key, val) {
  if (Array.isArray(obj)) {  // 如果是数组，则使用splice方法，简单粗暴
    obj.length = Math.max(obj.length, key);
    obj.splice(key, 1, val);
    return val
  }
  if (hasOwn(obj, key)) {  // 如果是obj并且有这个key，直接赋值
    obj[key] = val;
    return
  }
  var ob = obj.__ob__;  // 获取这个obj的__ob__对象，这个也就是之前说的，经过observer之后会有这个东东挂载在上面
  if (obj._isVue || (ob && ob.vmCount)) {  // 一些操作上的判断
    "development" !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    );
    return
  }
  if (!ob) {  // 如果有这个ob，那么则是被observer过的，直接赋值
    obj[key] = val;
    return
  }
  defineReactive$$1(ob.value, key, val);  // 对这个值进行observer
  ob.dep.notify();   // 触发dep的notify方法，就是对应的计算属性和watch的数据更新
  return val
}

/**
 * Delete a property and trigger change if necessary.
 */
function del (obj, key) {
  var ob = obj.__ob__;
  if (obj._isVue || (ob && ob.vmCount)) {
    "development" !== 'production' && warn(
      'Avoid deleting properties on a Vue instance or its root $data ' +
      '- just set it to null.'
    );
    return
  }
  if (!hasOwn(obj, key)) {  // 如果没有则返回
    return
  }
  delete obj[key];  // 删除这个key
  if (!ob) {  // 没有ob过的则返回，不需要下面的notify了
    return
  }
  ob.dep.notify();
}


// ------------上面是这两个方法对应的源码，这里用的是构建后的源码---------------

/*

vm.$set( target, key, value )

参数：

{Object | Array} target
{string | number} key
{any} value
返回值：设置的值。

用法：

这是全局 Vue.set 的别名。

参考：Vue.set

vm.$delete( target, key )

参数：

{Object | Array} target
{string | number} key
用法：

这是全局 Vue.delete 的别名。

*/

// -----------------上面是官方文档的api的使用说明----------------------------


var vm = new Vue({
  el: '#app',
  data () {
    return {
      msg: 'hello Vue',
      list: [1,2,3,4,5]
    }
  },
  created () {

  },
  methods: {
    changeList () {
      // this.list[2] = 999;    // 用这种方法是不会更新视图的
      Vue.set(this.list, 2, 999)    // 用这种方法ok
    },
    deleteList () {
      // this.list[2] = null;    // 用这种方法是不会更新视图的
      Vue.delete(this.list, 2)    // 用这种方法ok
    }
    // 在2.1.7版本的Vue中，这两个方法会有一个bug，不过经过测试，在最新版本(2.5.13)中
    // 已经修复了，这里就不说出来咯，对应的方法在上面
  }
})
script>
html>

然后到了这个问题：initExtend(Vue)，对应的源码在src/core/global-api/extend.js


// 这里我们用官网的例子来说


"en">

  "UTF-8">
  Vue.extend


  
"mount-point">

  







// --------------下面是方法对应的源码-----------------------------------


export function initExtend (Vue: GlobalAPI) {
  /**
   * Each instance constructor, including Vue, has a unique
   * cid. This enables us to create wrapped "child
   * constructors" for prototypal inheritance and cache them.
   */
  Vue.cid = 0
  let cid = 1

  /**
   * Class inheritance
   */
  Vue.extend = function (extendOptions: Object): Function {
    extendOptions = extendOptions || {}
    const Super = this  // 重点，这个this是Vue的构造函数
    const SuperId = Super.cid  // 一个编号
    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})  // 缓存的值
    if (cachedCtors[SuperId]) {  // 是否有缓存过的
      return cachedCtors[SuperId]
    }
    const name = extendOptions.name || Super.options.name  // 获取name，不是重点
    if (process.env.NODE_ENV !== 'production') {  // 一些操作的判断和提示
      if (!/^[a-zA-Z][\w-]*$/.test(name)) {
        warn(
          'Invalid component name: "' + name + '". Component names ' +
          'can only contain alphanumeric characters and the hyphen, ' +
          'and must start with a letter.'
        )
      }
    }
    const Sub = function VueComponent (options) {  // 这个Sub就是最后返回的方法
      this._init(options)  // 就是我们初始化的Vue的步骤，很熟悉的东西
    }
    Sub.prototype = Object.create(Super.prototype)  // 以Vue的构造函数为原型的原型
    Sub.prototype.constructor = Sub  // 自身的constructor
    Sub.cid = cid++  // 静态属性cid，一个编号
    Sub.options = mergeOptions(  // 合并，很熟悉的东西，就是我们最开始new Vue的时候数据合并的步骤
      Super.options,
      extendOptions
    )
    Sub['super'] = Super  // 获取Super上面的东西
    // allow further extension/mixin/plugin usage
    Sub.extend = Super.extend  // 同理，获取Super上面的东西
    Sub.mixin = Super.mixin  // 同理，获取Super上面的东西
    Sub.use = Super.use  // 同理，获取Super上面的东西
    // create asset registers, so extended classes
    // can have their private assets too.
    config._assetTypes.forEach(function (type) {  // 这个也很熟悉，组件注册，过滤器，自定义指令的赋值
      Sub[type] = Super[type]
    })
    // enable recursive self-lookup
    if (name) {
      Sub.options.components[name] = Sub
    }
    // keep a reference to the super options at extension time.
    // later at instantiation we can check if Super's options have
    // been updated.
    Sub.superOptions = Super.options  获取各自的options
    Sub.extendOptions = extendOptions  获取各自的options
    // cache constructor
    cachedCtors[SuperId] = Sub  缓存下来
    return Sub  // 返回这个构造函数
  }
}

// 看到了这里，有种感觉就是这个东西把Vue上面的东西都继承下来了，最后返回它，然后new它又
// 调用了Vue的init方法初始化，好吧，懵逼，鉴于官方文档也没说的太详细，这个暂时就只能这么
// 理解了，不过这个应该还有更大的用处的

到了这里大概就剩下渲染的事情了，也就是initRender方法


initLifecycle(vm)
initEvents(vm)
callHook(vm, 'beforeCreate')
initState(vm)
callHook(vm, 'created')
initRender(vm)


主要就是执行vm.$mount方法，这里大概涉及的有：

模板的编译，
生成ast，
生成render，
生成Virtual DOM，
通过snabbdom的方法实现优化，

等等，就是Vue的渲染的操作了

剩下的几个问题


Vue.nextTick = util.nextTick        // 水平有限，看不懂 - -#，dom的异步更新的问题

extend(Vue.options.directives, platformDirectives)  // 水平有限，看不懂 - -#，内置的指令directives，v-bind，v-model，v-show
extend(Vue.options.components, platformComponents)  // 水平有限，看不懂 - -#，内置的组件，transition组件
Vue.prototype.__patch__                             // 水平有限，看不懂 - -#，渲染的方法
compileToFunctions                                  // 水平有限，看不懂 - -#，模板编译的方法


const extendsFrom = child.extends                   // 水平有限，看不懂 - -#

initProxy(vm)                                       // 水平有限，看不懂 - -#

你可能感兴趣的:(vue)

  • Vue 3 事件总线详解：构建组件间高效通信的桥梁 love729234ming vue.js前端javascript
    Vue3事件总线详解：构建组件间高效通信的桥梁为什么需要事件总线？使用mitt实现事件总线1.安装mitt2.创建事件总线3.在组件中使用事件总线发送端组件（例如ComponentA.vue）接收端组件（例如ComponentB.vue）自定义实现事件总线总结在复杂的前端应用中，组件之间的通信往往需要一种灵活且解耦的方式。传统的Vue2中，我们常使用全局事件总线来实现这种通信，但在Vue3中，由于
  • Vue 3 事件总线详解：构建组件间高效通信的桥梁 QQ828929QQ vue.js前端javascript
    Vue3事件总线详解：构建组件间高效通信的桥梁为什么需要事件总线？使用mitt实现事件总线1.安装mitt2.创建事件总线3.在组件中使用事件总线发送端组件（例如ComponentA.vue）接收端组件（例如ComponentB.vue）自定义实现事件总线总结在复杂的前端应用中，组件之间的通信往往需要一种灵活且解耦的方式。传统的Vue2中，我们常使用全局事件总线来实现这种通信，但在Vue3中，由于
  • Vue Markdown 编辑器全攻略：轻松集成 MD 编辑器到前端项目 软件工匠师 前端vue.js编辑器
    VueMarkdown编辑器全攻略：轻松集成MD编辑器到前端项目1.为什么选择Markdown编辑器？2.安装v-md-editor3.全局配置与集成4.在组件中使用Markdown编辑器5.高级配置与自定义功能6.总结在现代前端开发中，Markdown编辑器被广泛应用于博客、内容管理系统、在线文档等场景。本文将以Vue3为例，详细介绍如何使用v-md-editor库在项目中集成Markdown编
  • 【Vuex：在带命名空间的模块内访问全局内容】 武帝为此 前后端vue.jsjavascript前端
    文章目录一、命名空间与全局内容的关系1.什么是命名空间？✅开启命名空间二、在命名空间模块内访问全局内容1.访问全局state2.访问全局getters3.调用全局mutations4.调用全局actions三、示例：模块间访问与全局状态共享1.定义模块2.注册模块3.测试调用四、常见问题与注意事项1.如何在组件中访问其他模块的state？2.模块命名冲突问题五、总结一、命名空间与全局内容的关系1.
  • 前端大文件上传（分片上传）与下载 束尘 前端
    文章目录一、问题二、思路1、选择文件2、校验文件是否符合规范3、文件切片上传4、分片上传注意点5、大文件下载一、问题日常业务中难免出现前端需要向后端传输大型文件的情况，这时单次的请求不能满足传输大文件的需求，就需要用到分片上传业务需求为：用户可以上传小于20G的镜像文件，并进显示当前上传进度前端：vue3.x+ElementPlus组件+axios二、思路解决思路简单为前端选择文件后读取到文件的基
  • 使用axios实现实时获取文件上传/下载进度。实现文件上传，下载进度条显示 三年模拟五年烧烤 javascriptjavascript前端
    下载文件实现进度条显示利用axios封装的原生onDownloadProgress属性，该属性为一个回调方法，当axios请求将文件从服务器下载时会进行回调。接收一个回调参数，该回调参数中包含总下载进度，当前下载进度。不多比比直接上代码下载下载进度:{{downLoadProgress}}import{ref}from'@vue/reactivity';importaxiosfrom'axios'
  • VUE动态路由 qq_41164527 vuevue.js前端javascript
    在Vue.js中，路由是实现单页应用（SPA）的核心功能之一。Vue提供了vue-router库来管理路由。以下是Vue路由的几种常见方式：1.声明式路由导航（使用）是VueRouter提供的组件，用于声明式导航。它会被渲染成一个标签，点击后会跳转到指定的路由。HomeAboutto属性指定目标路由的路径。默认会渲染为标签，点击后不会刷新页面，而是通过VueRouter进行路由切换。2.编程式路由
  • Vue 过滤器深度解析与应用实践 二川bro 前端vue.js前端javascript
    文章目录1.过滤器概述1.1核心概念1.2过滤器生命周期2.过滤器基础2.1过滤器定义2.2过滤器使用3.过滤器高级用法3.1链式调用3.2参数传递3.3动态过滤器4.过滤器应用场景4.1文本格式化4.2数字处理4.3数据过滤5.性能优化与调试5.1性能优化策略5.2调试技巧6.最佳实践建议6.1命名规范6.2代码组织7.常见问题与解决方案7.1问题列表7.2调试技巧8.扩展阅读1.过滤器概述1.
  • ChatGPT + Vue3：如何打造 AI 智能助手？ Js_x chatgpt人工智能
    引言人工智能（AI）正快速渗透到前端开发领域，越来越多的开发者希望将ChatGPT集成到自己的应用中，为用户提供智能对话、自动回复、辅助决策等功能。本文将介绍如何使用Vue3+OpenAIAPI搭建一个AI智能助手，让你的应用拥有强大的AI交互能力。1.项目准备1.1技术栈选择本项目将使用以下技术：Vue3-现代化的前端框架，响应式强，适合构建交互式应用。Vite-高效的Vue3项目构建工具，提升
  • vue对接openai_实现ChatGPT 开心小老虎 vue3知识点+组件chatgpt
    一、openai密钥使用API密钥才能连接到OpenAIAPI，去OpenAI网站注册一个账户（目前国内访问openai受限制，需要其他方式进行访问），单击个人资料图片和“查看API密钥”，创建一个新的密钥。openai官网https://openai.com/二、使用openai包发送请求获得数据1.下载openai包npmiopenai--save2.使用openai包发送请求importOp
  • 【Django】【vue】设计一个评论模块 患得患失949 后端系统功能面试考题专栏（前后端）django知识djangovue.js数据库
    Django评论模块（前后端分离+点赞+收藏+评论计数）一、功能概述基于Django+DRF设计的评论模块，包含以下功能：基本评论功能（用户可以对文章进行评论，并支持多级回复）评论点赞（支持点赞/取消点赞）评论收藏（支持收藏/取消收藏）评论计数（统计文章的评论数量）嵌套评论（支持多级评论显示）二、后端设计（一）数据库模型（Models）fromdjango.dbimportmodelsfromdj
  • 详细的讲一下Vite 在 Vue3 项目中最常用和最重要的配置项 asecretman! vue.jsjavascript前端
    Vite在Vue3中的配置详解基础配置结构首先让我们看一个基础的Vite配置文件结构：import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'importpathfrom'path'exportdefaultdefineConfig({//配置项})详细配置项解析1.基础路径配置(base)exportdefaultdefine
  • 在前后端分离项目中实现验证码功能 不高兴的富贵儿 javaspringboot前端
    目录原理导入验证码依赖Redis工具类RedisUtils配置类CaptchaConfig验证码的文本生成器在SpringBoot里面配置RedisTemplate后端返回验证码接口登录验证(在登录方法之前执行)Login.vue原理通过工具类生成一条算术的验证规则，类似于这样的：1+1=2，其中1+1就是算术规则，2是算术结果。算术规则我们会通过图片流的形式返回给前端显示出来，让用户看到这个算术
  • 前端框架革命：React与Vue对比与解析 WHCIS Web开发技术前端框架react.jsvue.js
    一、框架设计哲学的本质差异1.1React：以JavaScript为核心的函数式哲学React的核心思想可以概括为**“UI即函数”**，其设计遵循以下原则：React核心声明式编程组件即函数单向数据流JSX描述UI函数组件+Hook状态提升模式声明式编程：开发者只需描述界面应该呈现的最终状态，无需关心具体DOM操作细节不可变数据流：通过setState触发组件树更新，保持数据流向的可预测性虚拟D
  • Vue3项目中可以尝试封装那些组件 shaoin_2 前端零碎vue.js前端javascript
    在Vue3项目中，组件的封装可以根据功能、复用性和业务需求进行划分。以下是一些常见的组件类型，适合封装为独立组件：1.基础UI组件按钮(Button)封装不同样式、大小、状态的按钮。支持disabled、loading等状态。输入框(Input)封装文本输入、密码输入、数字输入等。支持v-model双向绑定、校验规则。下拉选择框(Select)封装单选、多选、搜索等功能。开关(Switch)封装开
  • Vue源码深度解析：从2.x到3.x的架构演进与核心原理剖析 旧味清欢| Vuevue.js架构前端
    Vue源码深度解析：从2.x到3.x的架构演进与核心原理剖析一、框架演变：从Vue2到Vue3的跨越1.1革命性升级Vue3的发布标志着前端框架进入新纪元，其核心改进体现在三个方面：性能飞跃：包体积减少41%，初始渲染提速55%，更新性能提升133%开发体验：CompositionAPI带来更好的逻辑复用能力未来兼容：完善的TypeScript支持与渐进式升级策略1.2兼容性设计通过@vue/co
  • 基于Spring Boot+vue技术的导游系统设计与实现 除了菜一无所有！ springbootvue.js后端
    论文下载【免费】基于SpringBoot+vue技术的导游系统设计与实现资源-CSDN文库摘要本研究背景主要聚焦于当前旅游业信息化、智能化的发展趋势。随着移动互联网的普及和人们出行方式的多样化，导游系统作为旅游服务的重要组成部分，亟需进行技术革新以提升用户体验和服务效率。本研究旨在利用SpringBoot后端框架与Vue前端框架，构建一个功能丰富、交互友好的导游系统。研究内容主要包括系统需求分析、
  • Vue2与Vue3：深入比较与迁移指南 布兰妮甜 #Vuevue2vue3迁移指南
    文章目录前言一、响应式系统的进化二、组合式API的引入三、生命周期钩子的变化四、新特性与优化五、迁移指南六、实际案例结语前言Vue.js自从2014年首次发布以来，凭借其简洁的语法、灵活的组件化架构以及高效的性能，迅速成为了最受欢迎的前端框架之一。随着技术的不断进步，Vue.js也在不断地迭代和优化，Vue3就是在这样的背景下诞生的。Vue3不仅带来了许多新特性和性能优化，还在API设计和开发者体
  • 1.1Vue 3 核心优势与架构革新 北辰alk vue.js架构前端
    文章目录**1.1Vue3核心优势与架构革新****一、设计哲学演进****二、响应式系统革命****三、组合式API范式****四、编译器架构升级****五、类型系统集成****六、生态融合能力****七、性能基准对比****八、架构升级路线****本章深度总结**1.1Vue3核心优势与架构革新一、设计哲学演进渐进式框架的终极形态模块化架构：通过@vue/reactivity、@vue/run
  • axios在前后端分离的仓储管理系统中的作用 PLJJ685 前后端分离的仓库管理系统前端vue.js
    在前后端分离的仓储管理系统中，axios是一个非常重要的工具，用于在前端（通常是Vue.js、React等框架）和后端（通常是SpringBoot、Node.js、Django等框架）之间进行HTTP通信。以下是axios在仓储管理系统中的作用和具体应用场景：1.前后端分离架构在前后端分离的架构中：前端：负责页面的渲染和用户交互。后端：负责数据处理、业务逻辑和数据库操作。通信方式：前后端通过HTT
  • 基于 Vue.js 和 Element UI 实现九宫格按钮拖拽排序功能 | 详细教程与代码实现 小杰~ vue.jsjavascriptvuedraggableCSSGrid
    在Vue.js项目中使用vue-element-template（基于ElementUI）实现按钮的九宫格拖拽排序功能，可以通过以下步骤实现。我们将使用vuedraggable库来实现拖拽排序功能。1.安装依赖首先，确保你已经安装了vuedraggable库：npminstallvuedraggable2.创建组件接下来，创建一个Vue组件来实现九宫格拖拽排序功能。{{button.label}}
  • Vue和React的区别 酒江 vue.jsreact.jsjavascript
    1.设计理念Vue：Vue是一个渐进式框架，意味着你可以从简单的部分开始使用它，并逐步引入更多的功能。它专注于模板驱动的开发，提供更清晰和直观的API。Vue也试图在易用性与功能性之间找到平衡。React：React是一个UI库，专注于构建用户界面的组件。它不包含像Vue那样的框架级别的功能，而是提供一个非常灵活的工具集，允许开发者自由选择其他库和工具来构建应用。2.学习曲线Vue：Vue的学习曲
  • 云贝餐饮独立连锁版v3源码 扫码点餐毕业设计参考好选择 可二开 DeepinThinks 源码分享课程设计php小程序
    云贝V3最新版，采用PHP语言和Laravel9框架，前端使用VUE3和小程序uniapp开发。️云贝V3特点：全开源：提供完整的源代码，无版权纠纷。免授权：无需支付额外授权费用。可二开：支持二次开发，满足个性化需求。技术支持：提供开发者技术支持，确保项目顺利进行。最新版本号：V1.7.9新增会员价显示会员价开关(设置-订单设置-商品设置)新增异地外卖下单开关(门店-业务设置-外送设置)新增套餐固
  • 最新计算机专业毕设论文选题大全基于BeautifulSoup的毕业设计详细题目100套优质毕设项目分享(源码+论文)✅ 会写代码的羊 毕设选题课程设计beautifulsoup毕业设计毕业设计题目毕设题目python网络爬虫
    文章目录前言最新毕设选题（建议收藏起来）基于BeautifulSoup的毕业设计选题毕设作品推荐前言2025全新毕业设计项目博主介绍：✌全网粉丝10W+,CSDN全栈领域优质创作者，博客之星、掘金/华为云/阿里云等平台优质作者。技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、大数据、机器学习等设计与开发。主要内容：免费
  • 芯片制造、汽车制造行业网站，如何用插件增强富文本编辑器的WORD粘贴功能？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • 金融行业网页编辑器对WORD图文混排有哪些特殊需求？ 全武凌(荆门泽优) 金融编辑器wordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • HTML编辑器CKEDITOR支持哪些格式的WORD内容导入？ 2501_90699640 html编辑器wordckeditor粘贴wordckeditor导入wordckeditor导入pdfckeditor导入ppt
    要求：开源，免费，技术支持编辑器：ckeditor前端：vue2,vue3.vue-cli后端：asp,java,jsp,springboot,php,asp.net,.netcore功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,Ubuntu,CentO
  • 金融行业Vue应用如何利用wangEditor实现WORD文档高效上传？ 2501_90699640 金融vue.jswordumeditor粘贴wordueditor粘贴wordueditor复制wordueditor上传word图片
    要求：开源，免费，技术支持编辑器：百度ueditor前端：vue2,vue3,vue-cli,react,html5用户体验：Ctrl+V快捷键操作功能：导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台：Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,
  • vue3修改el-tree样式 不想上班只想要钱 前端vuevue.jsjavascriptelementui
    vue3修改el-tree样式:deep(.el-tree){width:100%;.el-tree-node{.el-tree-node__content{height:32px;.hightlight{color:#189cf1;}.el-tree-node__expand-icon{//transform:rotate(0);transform-origin:center;backgroun
  • Node.js和webpack入门-个人学习笔记 ksmswq node.jswebpack学习
    Node.js-入门Node.js基础概念Node.js是一个跨平台JavaScript运行环境，是开发者可以搭建服务器端的JavaStript应用程序。作用1.编写服务端程序2.编写数据接口，提供网页浏览资源等等3.实现“前端工程化”，为Vue和React等框架做铺垫前端工程化-概念开发项目直到上线，过程中集成的所有工具和技术。（Node.js是前端工程化的基础（因为Node.js可以主动读取前
  • ztree异步加载 3213213333332132 JavaScriptAjaxjsonWebztree
    相信新手用ztree的时候,对异步加载会有些困惑，我开始的时候也是看了API花了些时间才搞定了异步加载，在这里分享给大家。 我后台代码生成的是json格式的数据，数据大家按各自的需求生成，这里只给出前端的代码。 设置setting，这里只关注async属性的配置 var setting = { //异步加载配置
  • thirft rpc 具体调用流程 BlueSkator 中间件rpcthrift
    Thrift调用过程中，Thrift客户端和服务器之间主要用到传输层类、协议层类和处理类三个主要的核心类，这三个类的相互协作共同完成rpc的整个调用过程。在调用过程中将按照以下顺序进行协同工作：         （1）     将客户端程序调用的函数名和参数传递给协议层（TProtocol），协议
  • 异或运算推导, 交换数据 dcj3sjt126com PHP异或^
    /* * 5 0101 * 9 1010 * * 5 ^ 5 * 0101 * 0101 * ----- * 0000 * 得出第一个规律: 相同的数进行异或, 结果是0 * * 9 ^ 5 ^ 6 * 1010 * 0101 * ---- * 1111 * * 1111 * 0110 * ---- * 1001
  • 事件源对象 周华华 JavaScript
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • MySql配置及相关命令 g21121 mysql
            MySQL安装完毕后我们需要对它进行一些设置及性能优化，主要包括字符集设置，启动设置，连接优化，表优化，分区优化等等。           一 修改MySQL密码及用户      
  • [简单]poi删除excel 2007超链接 53873039oycg Excel
          采用解析sheet.xml方式删除超链接，缺点是要打开文件2次,代码如下:      public void removeExcel2007AllHyperLink(String filePath) throws Exception { OPCPackage ocPkg = OPCPac
  • Struts2添加 open flash chart 云端月影
    准备以下开源项目： 1. Struts 2.1.6 2. Open Flash Chart 2 Version 2 Lug Wyrm Charmer (28th, July 2009) 3. jofc2，这东西不知道是没做好还是什么意思，好像和ofc2不怎么匹配，最好下源码，有什么问题直接改。 4. log4j 用eclipse新建动态网站，取名OFC2Demo，将Struts2 l
  • spring包详解 aijuans spring
    下载的spring包中文件及各种包众多，在项目中往往只有部分是我们必须的，如果不清楚什么时候需要什么包的话，看看下面就知道了。 aspectj目录下是在Spring框架下使用aspectj的源代码和测试程序文件。Aspectj是java最早的提供AOP的应用框架。 dist 目录下是Spring 的发布包，关于发布包下面会详细进行说明。 docs&nb
  • 网站推广之seo概念 antonyup_2006 算法Web应用服务器搜索引擎Google
       持续开发一年多的b2c网站终于在08年10月23日上线了。作为开发人员的我在修改bug的同时，准备了解下网站的推广分析策略。     所谓网站推广，目的在于让尽可能多的潜在用户了解并访问网站，通过网站获得有关产品和服务等信息，为最终形成购买决策提供支持。     网站推广策略有很多，seo，email，adv
  • 单例模式,sql注入,序列 百合不是茶 单例模式序列sql注入预编译
      序列在前面写过有关的博客,也有过总结,但是今天在做一个JDBC操作数据库的相关内容时 需要使用序列创建一个自增长的字段  居然不会了,所以将序列写在本篇的前面    1,序列是一个保存数据连续的增长的一种方式; 序列的创建; CREATE SEQUENCE seq_pro 2 INCREMENT BY 1 -- 每次加几个 3
  • Mockito单元测试实例 bijian1013 单元测试mockito
    Mockito单元测试实例： public class SettingServiceTest { private List<PersonDTO> personList = new ArrayList<PersonDTO>(); @InjectMocks private SettingPojoService settin
  • 精通Oracle10编程SQL(9)使用游标 bijian1013 oracle数据库plsql
    /* *使用游标 */ --显示游标 --在显式游标中使用FETCH...INTO语句 DECLARE CURSOR emp_cursor is select ename,sal from emp where deptno=1; v_ename emp.ename%TYPE; v_sal emp.sal%TYPE; begin ope
  • 【Java语言】动态代理 bit1129 java语言
      JDK接口动态代理 JDK自带的动态代理通过动态的根据接口生成字节码(实现接口的一个具体类)的方式，为接口的实现类提供代理。被代理的对象和代理对象通过InvocationHandler建立关联   package com.tom; import com.tom.model.User; import com.tom.service.IUserService;
  • Java通信之URL通信基础 白糖_ javajdkwebservice网络协议ITeye
    java对网络通信以及提供了比较全面的jdk支持，java.net包能让程序员直接在程序中实现网络通信。 在技术日新月异的现在，我们能通过很多方式实现数据通信，比如webservice、url通信、socket通信等等，今天简单介绍下URL通信。 学习准备：建议首先学习java的IO基础知识   URL是统一资源定位器的简写，URL可以访问Internet和www，可以通过url
  • 博弈Java讲义 - Java线程同步 (1) boyitech java多线程同步锁
      在并发编程中经常会碰到多个执行线程共享资源的问题。例如多个线程同时读写文件，共用数据库连接，全局的计数器等。如果不处理好多线程之间的同步问题很容易引起状态不一致或者其他的错误。    同步不仅可以阻止一个线程看到对象处于不一致的状态，它还可以保证进入同步方法或者块的每个线程，都看到由同一锁保护的之前所有的修改结果。处理同步的关键就是要正确的识别临界条件（cri
  • java-给定字符串，删除开始和结尾处的空格，并将中间的多个连续的空格合并成一个。 bylijinnan java
    public class DeleteExtraSpace { /** * 题目：给定字符串，删除开始和结尾处的空格，并将中间的多个连续的空格合并成一个。 * 方法1.用已有的String类的trim和replaceAll方法 * 方法2.全部用正则表达式，这个我不熟 * 方法3.“重新发明轮子”，从头遍历一次 */ public static v
  • An error has occurred.See the log file错误解决！ Kai_Ge MyEclipse
    今天早上打开MyEclipse时，自动关闭！弹出An error has occurred.See the log file错误提示！ 很郁闷昨天启动和关闭还好着！！！打开几次依然报此错误，确定不是眼花了！ 打开日志文件！找到当日错误文件内容： --------------------------------------------------------------------------
  • [矿业与工业]修建一个空间矿床开采站要多少钱? comsci
           地球上的钛金属矿藏已经接近枯竭...........        我们在冥王星的一颗卫星上面发现一些具有开采价值的矿床.....        那么,现在要编制一个预算,提交给财政部门..
  • 解析Google Map Routes dai_lm google api
    为了获得从A点到B点的路劲，经常会使用Google提供的API，例如 [url] http://maps.googleapis.com/maps/api/directions/json?origin=40.7144,-74.0060&destination=47.6063,-122.3204&sensor=false [/url] 从返回的结果上，大致可以了解应该怎么走，但
  • SQL还有多少“理所应当”？ datamachine sql
    转贴存档，原帖地址：http://blog.chinaunix.net/uid-29242841-id-3968998.html、http://blog.chinaunix.net/uid-29242841-id-3971046.html！ ------------------------------------华丽的分割线--------------------------------
  • Yii使用Ajax验证时，如何设置某些字段不需要验证 dcj3sjt126com Ajaxyii
    经常像你注册页面,你可能非常希望只需要Ajax去验证用户名和Email,而不需要使用Ajax再去验证密码,默认如果你使用Yii 内置的ajax验证Form,例如: $form=$this->beginWidget('CActiveForm', array(        'id'=>'usuario-form',&
  • 使用git同步网站代码 dcj3sjt126com crontabgit
    转自:http://ued.ctrip.com/blog/?p=3646?tn=gongxinjun.com   管理一网站，最开始使用的虚拟空间，采用提供商支持的ftp上传网站文件，后换用vps，vps可以自己搭建ftp的，但是懒得搞，直接使用scp传输文件到服务器，现在需要更新文件到服务器，使用scp真的很烦。发现本人就职的公司，采用的git+rsync的方式来管理、同步代码，遂
  • sql基本操作 蕃薯耀 sqlsql基本操作sql常用操作
    sql基本操作 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月1日 17:30:33 星期一     &
  • Spring4+Hibernate4+Atomikos3.3多数据源事务管理 hanqunfeng Hibernate4
    Spring3+后不再对JTOM提供支持，所以可以改用Atomikos管理多数据源事务。Spring2.5+Hibernate3+JTOM参考：http://hanqunfeng.iteye.com/blog/1554251Atomikos官网网站：http://www.atomikos.com/   一.pom.xml <dependency> <
  • jquery中两个值得注意的方法one()和trigger()方法 jackyrong trigger
      在jquery中，有两个值得注意但容易忽视的方法，分别是one()方法和trigger()方法,这是从国内作者<<jquery权威指南》一书中看到不错的介绍 1） one方法     one方法的功能是让所选定的元素绑定一个仅触发一次的处理函数，格式为    one(type,${data},fn) &nb
  • 拿工资不仅仅是让你写代码的 lampcy 工作面试咨询
    这是我对团队每个新进员工说的第一件事情。这句话的意思是，我并不关心你是如何快速完成任务的，哪怕代码很差，只要它像救生艇通气门一样管用就行。这句话也是我最喜欢的座右铭之一。 这个说法其实很合理：我们的工作是思考客户提出的问题，然后制定解决方案。思考第一，代码第二，公司请我们的最终目的不是写代码，而是想出解决方案。 话粗理不粗。 付你薪水不是让你来思考的，也不是让你来写代码的，你的目的是交付产品
  • 架构师之对象操作----------对象的效率复制和判断是否全为空 nannan408 架构师
    1.前言。   如题。 2.代码。 (1)对象的复制，比spring的beanCopier在大并发下效率要高，利用net.sf.cglib.beans.BeanCopier Src src=new Src(); BeanCopier beanCopier = BeanCopier.create(Src.class, Des.class, false);
  • ajax 被缓存的解决方案 Rainbow702 JavaScriptjqueryAjaxcache缓存
    使用jquery的ajax来发送请求进行局部刷新画面，各位可能都做过。 今天碰到一个奇怪的现象，就是，同一个ajax请求，在chrome中，不论发送多少次，都可以发送至服务器端，而不会被缓存。但是，换成在IE下的时候，发现，同一个ajax请求，会发生被缓存的情况，只有第一次才会被发送至服务器端，之后的不会再被发送。郁闷。 解决方法如下： ① 直接使用 JQuery提供的 “cache”参数，
  • 修改date.toLocaleString()的警告 tntxia String
      我们在写程序的时候，经常要查看时间，所以我们经常会用到date.toLocaleString()，但是date.toLocaleString()是一个过时 的API，代替的方法如下：   package com.tntxia.htmlmaker.util; import java.text.SimpleDateFormat; import java.util.
  • 项目完成后的小总结 xiaomiya js总结项目
    项目完成了，突然想做个总结但是有点无从下手了。 做之前对于客户端给的接口很模式。然而定义好了格式要求就如此的愉快了。 先说说项目主要实现的功能吧 1，按键精灵 2，获取行情数据 3，各种input输入条件判断 4，发送数据（有json格式和string格式） 5，获取预警条件列表和预警结果列表， 6，排序， 7，预警结果分页获取 8，导出文件（excel，text等） 9，修
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他