Vue.js 源码学习笔记 -- 分析前准备2 -- Object.defineProperty

解析神奇的 Object.defineProperty 几行代码看他怎么用 var a= {} Object.defineProperty( a, "b", { value:123 }); console.log(a.b); 很简单,它接受三个参数,而且都是必填的等价于 var a= {} Object.defineProperty(a,"b",{ value:123, writable:false, enumerable:false, configu…

Vue.js 源码学习笔记 -- 分析前准备1 -- vue三大利器

主体实例方法归类: 先看个作者推荐, 清晰易懂的 23232 简易编译器重点: 最简单的订阅者模式 // Observer class Observer { constructor (data) { this.walk(data) } walk (data) { // 遍历 let keys = Object.keys(data) for(let i = 0; i < keys.length; i++){ defineReactive(data, keys[i], data[key…

Vue.js 源码学习笔记

最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序结构梳理 Vue.js 是一个非常典型的 MVVM 的程序结构,整个程序从最上层大概分为全局设计:包括全局接口.默认选项等 vm 实例设计:包括接口设计 (vm 原型).实例初始化过程设计 (vm 构造函数) 这里面大部分内容可以直接跟 Vue.js 的官方 API 参考文档对应起来,但文档里面没…

Vue.js 源码学习笔记 - 细节

1. this._eventsCount = { } 这是为了避免不必要的深度遍历: 在有广播事件到来时,如果当前 vm 的 _eventsCount 为 0, 则不必向其子 vm 继续传播该事件. 2. 数据更新的diff机制视图更新效率的焦点问题: 大列表的更新和深层数据更新而大列表较为常见 repeat.js 首先diff(data, oldVms) 大概是先比较新旧两个列表的vm的数据状态, 然后差量更新DOM 步骤: 1.遍历新列表里的每一项, 如果该项的v…

Underscore.js 源码学习笔记（下）

上接 Underscore.js 源码学习笔记(上) === 756 行开始函数部分. var executeBound = function(sourceFunc, boundFunc, context, callingContext, args) { if (!(callingContext instanceof boundFunc)) return sourceFunc.apply(context, args); var self = baseCreate(sourceFunc.prot…

Underscore.js 源码学习笔记（上）

版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}()); 这样的东西,我们应该知道这是一个 IIFE(立即执行函数). var root = typeof self == 'object' && self.self === self && self || typeof global == 'object' && global.global === global &…

vue.js源码学习分享（一）

今天看了vue.js源码发现非常不错,想一边看一遍写博客和大家分享 /** * Convert a value to a string that is actually rendered. *转换一个值为字符串 */ function _toString (val) { return val == null? '': typeof val === 'object'? JSON.stringify(val, null, 2): String(val)//如果该值是null则返回空字符串,如果该…

AlloyTouch.js 源码学习笔记及原理说明

alloyTouch这个库其实可以做很多事的, 比较抽象, 需要我们用户好好的思考作者提供的实例属性和一些回调方法(touchStart, change, touchMove, pressMove, tap, touchEnd, touchCancel, reboundEnd, animationEnd, correctionEnd). 哇, 提供了这么多回调啊, 因为我也刚玩,用到的不多. change回调很常用(比如上拉,下拉刷新要用到),配合touchStart, animationEnd…

AlloyFinger.js 源码学习笔记及原理说明

此手势库利用了手机端touchstart, touchmove, touchend, touchcancel原生事件模拟出了 rotate touchStart multipointStart multipointEnd pinch swipe tap doubleTap longTap singleTap pressMove touchMove touchEnd touchCancel这14个事件回调给用户去使用.下面会讲述几个常用的手势原理实现. 先来看一下我对源码…

move.js 源码学习笔记

源码笔记: /* move.js * @author:flfwzgl https://github.com/flfwzgl * @copyright: MIT license * Sorrow.X --- 添加注释,注释纯属个人理解(源码有稍微改动,方便阅读) * */ ! function() { var PI = Math.PI, sin = Math.sin, cos = Math.cos, pow = Math.pow, abs = Math.abs, sqrt = Math.sqrt;…

lazy-load-img.js 源码学习笔记及原理说明

lazy-load-img.js? 1. 什么鬼? 一个轻量级的图片懒加载,我个人很是喜欢. 2. 有什么优势? 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形完美解决移动端开发中,用户上传图片宽高不一致而导致的图片变形的问题. 3. 使用姿势,如下: // 生成li var ul = document.querySelector('#list…

observe.js 源码学习笔记

/** * observejs --- By dnt http://kmdjs.github.io/ * Github: https://github.com/kmdjs/observejs * MIT Licensed. * Sorrow.X --- 添加注释,注释纯属个人理解 */ ; (function(win) { var observe = function(target, arr, callback) { var _observe = function(target, arr, ca…

vue.js源码学习分享(九)

/* */ var arrayKeys = Object.getOwnPropertyNames(arrayMethods);//获取arrayMethods的属性名称 /** * By default, when a reactive property is set, the new value is//默认情况下,当一个响应的属性被设置,新的值也转换成响应的.然而当经过向下支撑时,我们不想促使转换,因为这值也许是一个嵌套值在一个冻结的数据结构,转换它时将会失去最优化 * also conve…

vue.js源码学习分享（七）

var _Set; /* istanbul ignore if */ if (typeof Set !== 'undefined' && isNative(Set)) { // use native Set when available.//当本地set有效时使用set _Set = Set; } else { // a non-standard Set polyfill that only works with primitive keys.//一个不标准的set只会和一些简单的键工作…

vue.js源码学习分享（六）

/* */ /* globals MutationObserver *///全局变化观察者 // can we use __proto__?//我们能用__proto__吗? var hasProto = '__proto__' in {}; // Browser environment sniffing//浏览器环境嗅探 var inBrowser = typeof window !== 'undefined';//是不是在浏览器中 var UA = inBrowser && windo…

vue.js源码学习分享（八）

/* */ var uid$1 = 0; /** * A dep is an observable that can have multiple * directives subscribing() to it.//一个dep 是一个可观察到的,dep能有多样的订阅指示 */ var Dep = function Dep () { this.id = uid$1++; this.subs = []; }; Dep.prototype.addSub = function addSub (sub)…

vue.js源码学习分享（五）

//配置项var config = { /** * Option merge strategies (used in core/util/options)//选项合并策略 */ optionMergeStrategies: Object.create(null), /** * Whether to suppress warnings.//是否抑制警告 */ silent: false, /** * Show production mode//生产模式 tip message on boot?//…

vue.js源码学习分享（四）

/** * Generate a static keys string from compiler modules.//从编译器生成一个静态键字符串模块. */ function genStaticKeys (modules) { return modules.reduce(function (keys, m) { return keys.concat(m.staticKeys || []) }, []).join(',') } /** * Check if two values are loo…

vue.js源码学习分享（三）

/** * Mix properties into target object.//把多个属性插入目标的对象 */ function extend (to, _from) { for (var key in _from) { to[key] = _from[key]; } return to } /** * Quick object check - this is primarily used to tell * Objects from primitive values when we kno…

vue.js源码学习分享（二）

/** * Check if value is primitive//检查该值是否是个原始值 */ function isPrimitive (value) { return typeof value === 'string' || typeof value === 'number' } /** * Create a cached version of a pure function.//创建一个纯粹的函数的缓存版本 */ function cached (fn) { var cache = O…

Qt Creator 源码学习笔记04，多插件实现原理分析

阅读本文大概需要 8 分钟插件听上去很高大上,实际上就是一个个动态库,动态库在不同平台下后缀名不一样,比如在 Windows下以.dll结尾,Linux 下以.so结尾开发插件其实就是开发一个动态库,该动态库能够很好的加载进主程序.访问主程序资源.和主程序之间进行通信本篇文章一起学习下 Qt Creator当中是如何实现插件的开发.加载.解析.管理以及互相通信的,方便我们开发自定义插件打下基础简介 Qt Creator 插件理解起来其实很简单,定义一个接口类作为基类,其他插件需要继承该类…

Vue.js 源码分析(一) 代码结构

关于Vue vue是一个兴起的前端js库,是一个精简的MVVM.MVVM模式是由经典的软件架构MVC衍生来的,当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然,View和ViewModel之间通过双向绑定(data-binding)建立联系. 前言花了一个月时间撸了vue2.0的源码,最近空了一点,今天开始记录一下学习心得,按照自己理解的代码的结构,分为三部分来讲基础篇 ;比如全局配置.模板渲染.data.method.computed.watch.生命周期.…

vue源码分析—Vue.js 源码构建

Vue.js 源码是基于 Rollup 构建的,它的构建相关配置都在 scripts 目录下.(Rollup 中文网和英文网) 构建脚本通常一个基于 NPM 托管的项目都会有一个 package.json 文件,它是对项目的描述文件,它的内容实际上是一个标准的 JSON 对象. 我们通常会配置 script 字段作为 NPM 的执行脚本,Vue.js 源码构建的脚本如下: { "script": { "build": "node scripts/buil…

vue.js源码精析

MVVM大比拼之vue.js源码精析 VUE 源码分析简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多来自knockout.angularjs等大牌框架影响,但作者相信 vue 在性能.易用性方面是有优势.同时也自己做了和其它框架的性能对比,在这里.今天以版本 0.10.4 为准入口 Vue 的入口也很直白: 1 var demo = new Vue({ el: '#demo', data: {…

从template到DOM(Vue.js源码角度看内部运行机制)

写在前面这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些产出也会对同样想要学习Vue.js源码的小伙伴有所帮助.之前这篇文章同样在我司(大搜车)的技术博客中发表过,欢迎大家关注我司的技术博客,给个传送门https://blog.souche.com/. 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vu…

Hadoop源码学习笔记(6)——从ls命令一路解剖

Hadoop源码学习笔记(6) ——从ls命令一路解剖 Hadoop几个模块的程序我们大致有了点了解,现在我们得细看一下这个程序是如何处理命令的. 我们就从原头开始,然后一步步追查. 我们先选中ls命令,这是一个列出分面式文件系统中的目录结构.传入一个查阅地址,如果没有则是根目录.启动NameNode和DataNode服务.然后在命令行中输入ls : 换成程序,如果写呢,我们新建一个ClientEnter类.之前章节中,我们就知道,在命令行中输入的dfs命令,指向到org.apache.hado…