恰恰虎的博客

一、

一、

一、

一、前言前一章我们搭建了reactjs的标准工程，本章节我们基于标准工程的demo应用，了解react的 渲染和JSX语法。二、渲染1、在标准工程的public/index.html下<div id="root"></div>该div是我们整个应用的根节点，所有的DOM节点都挂载在该节点下，可以看成web容器。2、再看src/index.js代码...

一、前言 前期对vue的使用以及源码做了一些介绍和分析，vue由于其易用易学，性能高等特点，吸引越来越多的前端开发者在使用。作为前端框架的三剑客之一的Reactjs，得到了facebook社区大力支持，有着丰富的UI框架组件，用户群也大大多余vue，ng，算是老牌的前端框架。vue和reactjs的异同特性，网上也总结了非常多，但大部分都是概念性的泛泛而谈，本系列博客在学习Reactj...

一、总述上一篇我们讲到在编译时挂载过程中，会将template编译成render表达式，为后面的形成vnode做准备。我们来总览下编译的过程。整个过程分为三个阶段：1、parse，将templat转成AST模型树。2、optimize，标注静态节点。3、generate，生成render表达式。我们也将分成三个章节进行介绍，本章节重点介绍第一个阶段。二、入口...

一、总述 如果说前面的几部分都是准备工作，那么从挂载开始，就进入了正式的渲染工作，直到页面呈现出来。在开始分析代码前，我们可以思考下应该要做哪些工作。1、将template中的各变量，表达式等替换成实际的值。比如： <div id="app"> <ul> <li v-for="item in items"> {{item...

一、目的 前端技术的发展，现在以vue，react，angular为代表的MVVM模式以成为主流，这三个框架大有三分天下之势。react和angular有facebook与谷歌背书，而vue是以一己之力抗衡，说明了vue确有其精妙之处，主要体现在轻巧，高性能，组件化，容易上手等方面。 在实际项目中，只知道怎么用这些API，对一些原理性的东西一知半解，长此以往，如鲠在喉，所以决定...

一、第三部分：初始化相关功能我们继续上一章，第三部分是对各类功能的初始化。这个章节内容较多，大家还需有耐心。 /** *第三部分，初始化相关功能 */ /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { initProxy(vm) } e...

一、总述 经过前面的两步，将template转成了AST的模型树，接下来再将AST模型树转成render表达式。在第六章节我们讲过，执行render表达式后，生成了vnode。我们用前面的例子看下生成的render表达式的格式。with(this){ return _c('div',{ attrs:{"id":"app"} }, ...

一、总述上一章节我们讲到通过解析将template转成AST模型树，接下来继续对模型树优化，进行静态标注。那么问题来了，什么是静态标注？为什么要静态标注。在源码的注释中我们找到了下面这段话：/** * Goal of the optimizer: walk the generated template AST tree * and detect sub-trees that ar...

一、总述 vue实现了响应式的双向绑定，相对于传统的dom操作，我们仅需要关心model的逻辑处理，vue将帮助我们完成view端的映射和渲染，这种模式大大提高了编程的效率。接下来的两个章节我们将一起了解下vue响应式的实现，在学习源码前，建议先阅读VUE探索第一篇--双向绑定原理了解响应式的原理。 vue的响应式采用的是观察者+发布订阅相结合的模式来实现。模型的示意图如下：...

一、总述 前一章节，通过对prop，data所定义的属性建立观察类和发布器，但此时的发布类Dep中sub空空如也，如何实现watcher的注册，并在属性发生变化时，实现更新。本章节将继续介绍订阅Watcher。在介绍前，我们先思考下，用户定义的prop，data在哪些方法或者表达式是需要实现响应式变化的？首先用户自定义的watch，computed是需要的，另外我们的视图也会用...

一、总述 前面章节介绍了响应式的原理，当监听的属性值发生变化，会触发其相关的订阅watcher对象更新。如果在模板中使用了该属性，则会触发render wacher的更新，最终实现dom的更新。dom更新的有两种实现方式，一种是"全量"的全局更新，一种是"增量"的局部更新，很显然，后一种的效率会更高。VUE就是采用的一种，会先对新旧的vdom进行比较，形成patch，从而实现dom的局部...

一、总述前一章节，我们讲解了diff算法的原理，本章节一起看下vue如何通过该算法实现patch过程。还记得在第六篇我们在讲到vm._update时，它负责将Vnode转化为真实的dom，包含两个分支过程，dom的首次渲染，以及后续的dom的更新。 Vue.prototype._update = function (vnode: VNode, hydrating?: boolean)...

一、总体分析当我们写下这段简单new Vue()代码，vue框架做了什么呢?var vm = new Vue({ el:"#app", data:{ msg:'tttt' }})会调用src/core/instance/index.js的Vue构造方法function Vue (options) { if (process.en...

一、目录结构首先来"一览众山小"，看下整体的的目录结构。 |— benchmarks 基准测试，与其他竞品做比较|— dist 打包之后文件所在位置，包括完整版本，运行时版本版本，主要关注下vue.js|— examples 部分示例|— flow 因为Vue使用flow来进行静态类型检查，这里定义了声明了一些静态类型|— packag...

一、什么是Generator 函数先看下面的Generator函数，function* helloGenerator() { console.log("this is generator");}这个函数与普通的函数区别是在定义的时候有个*,我们来执行下这个函数。function* helloGenerator() { console.log("th...

一、什么是for-of  对于如下一个数组，遍历其中的值方法有哪些？var arr = ['a', 'b', 'c'];首先想到的可能就是如下这种，这也是js最原始的遍历方法。 var arr = ['a', 'b', 'c']; for (var i=0;i&lt;arr.length;i++) { console.log(arr[i]); }如果你了解ES5，还可以写出for-i...

一、什么是async    async其实是ES7的才有的关键字，放在这里说，其实是和我们前面所说的Promise，Generator有很大关联的。async的意思是"异步"，顾名思义是有关异步操作有关的关键字。下面我们就来构造一个async方法。async function helloAsync(){  return "helloAsync";  }  console.log...

一、ES5的类实现由于js并不是真正面向对象的语言,所以在ES6规范之前，一直没有"类"的概念，但是可以用变通的方式实现。最常用的就是利用构造函数。function Person(name,age) { this.name = name; this.age = age; this.sayName = function(){ ...

一、extends关键字ES6中提供了extends关键字实现类的继承，相比较ES5的原型继承，更方便易懂，对于学过java的道友们来说，阅读无障碍，下面我们看下如果实现继承。class Person { constructor(name, age) { this.name = name; this.age = age; ...

一、什么是箭头函数

一、设计思路 MVVM框架相对传统的dom操作模式，最大的优点就是数据的双向绑定。它借鉴了桌面应用程序MVC的设计思想，Model与View之间通过ViewMode关联，ViewModel负责将Model数据的变化显示到View上，通过将View的改变反馈到Model上这就是我们常说的双向绑定数据机制。那如何设计MVVM模型模型呢。需要解决两个关键问题：1、如何知道数据更新。...

一、module模式       对于一个大型，复杂的项目，我们需要根据功能或类别，将程序拆成一个个独立的模块文件，然后依据每个模块之间的依赖和关联，组装成一个完整的可运行的程序，这种模式有利于开发人员的相互协助，以及清晰的架构设计，这种模式称之为module(模块)体系，java的import，Ruby的require等。     很遗憾，在ES6前，js官方是没有这样的标准的。我们只能通过&l...

一、为什么需要手脚架对于新手来说，建议先不要用手脚架搭建环境，特别是对nodejs不熟悉的，可以先忽略这个章节，采用引入本地vue库的方式。&lt;script src="v2.2.2/vue.min.js"&gt;&lt;/script&gt;当我们熟悉vue后，就会发现依赖的库越来越多，依靠开发人员维护容易出错，特别是团队协作时，成本非常高，此时就需要一种工具能帮我们解决这个问题...

一、vue router介绍Vue Router是Vue.js官方的路由器，页面间的跳转(比如A-&gt;B-&gt;C)是一组路由，而Vue Router是管理这些路由的集成器。Vue Router主要有以下功能：1、模块化的配置2、路由的参数传递，传递3、通过各种钩子实现导航的控制4、视图间的过渡动画下面我们将用实例介绍这些功能。参考百度的"最新大片"搜索结果，实现如下...

一、什么是VUEX    组件化是VUE的核心功能，组件间的数据共享是我们开发过程中经常遇到的情况，在组件较少的情况下，可以通用公共变量等解决，一旦应用中组件数量大，且组件间相关嵌套，关系复杂，想要维护好这些公共变量，将是一件非常痛苦的事。   了解spring的同学会熟悉IOC的概念，初始化时，为相关的类创建全局唯一的单例对象，通过注入的方式，统一管理，处处使用。VUEX要做的事如spr...

一、什么是组件    组件就是将一些通用功能剥离出来，通过重构，封装形成模块，供外部业务调用。组件化开发有利于团队的分工协作，提高开发效率，所以目前流行的三大前端框架，都是以组件为核心。     前端组件化从方向上可以分为javascript component和web component，前者是需要框架提供能力，而后者则需要浏览器支持，虽然w3c规范中也有了组件的标准，怎奈各个浏览器差异...

一、什么是指令     上一篇我们讲到组件，组件是为了实现代码复用，将业务逻辑，UI模板封装成一个自定义的"标签"供外部使用，但有些时候我们用普通的dom也能实现相关的功能，但需要对功能进行一些"改造",使我们的实现更简洁，此时就会用到我们的指令。二、内置指令vue提供大量的内置的指令，先来总览下这些指令：v-bind:动态的绑定一个或者多个特性值。v-on:绑定监听事件，用户...

一、第一部分：属性设置第一部分比较简单，主要设置vm的两个属性。vm._uid = uid++定义了vm唯一标识_uid属性，每次new Vue都会递增。 // a flag to avoid this being observed vm._isVue = true定义vm的_isVue属性为true，这个属性从注释看是为了vm对象避免被observed，大家可以先认为和...

一、为什么要用Promise     在实际项目中，有下面应用场景，在手机上浏览电影网站，其中有个海报墙页面，里面有海量的电影节目，如下图所示。考虑到性能和用户体验，启动后，我们需要串行的加载10页数据(每页9张海报)，即第一页加载完成后，启动第二页的加载，以此类推。于是不假思索的写下了下面的代码：$(document).ready(function(){      //获取第...