言川的博客

目的前端技术日新月异，几个月不学就会发现落后了好多。而且各种前端框架一年一个花样，简直眼花缭乱。这篇博客是希望对最近两年流行的前端框架做一个基本的介绍，不求深入理解其实现细节，只是为了对他们的主要特点有一个整体认识，理解其思想，而不是死记硬背API。具体要用的时候，还是需要再仔细看文档。所以如果你对其中某些框架已经很熟练了，完全不用再看对应的章节了。哪几种其实并没有想好是哪七种，目前计划是这几个：

Directive看上去虽然和Angular中的定义类似，Directive 都是对DOM功能的一种拓展，但是 Vue 的 Directive 要弱的多。因为 Vue Component 其实本来就会包含对DOM的操作，所以大多数时候我们写一个通用组件都是一个Component 而不是一个 Directive，而 在 Angular 我们写一个通用的组件一般都是一个 Directive 。 所以我

基本是按照官网的 Guide 全部梳理了一遍：http://vuejs.org/guide/index.html这里我们以一个 Todo List 应用为例来把相关的只是都串起来，这篇里面的全部代码都在github上 https://github.com/lihongxun945/vue-todolistVue 实例一个 Vue 应用是由一个 root vue instance 引导启动的，而 V

关于 VueVue 从去年开始火的不行，如果你觉得 Angular1 又旧又太庞杂不好用，而Angular2又显得磨磨唧唧一直不出正式版，那么 Vue 可能是一个很好地选择。另外 Vue 的作者是一个国人大牛。看 Vue 第一眼的感觉就是 麻雀虽小五脏俱全，该有的 data bind, component, directive 都有，API 简洁清晰，而且 directive 和 component

webpack 既不是前端框架也不属于react，写在这里只是貌似他是因为 react-hot-loader 火起来的，而且和react结合也很好用。webpack的定位很多人一开始会认为他是一个构建工具，和 grunt/gulp 类似。其实用了之后才会发现 webpack 只是一个 module bundle，翻译过来就是模块打包工具。它所说的模块其实就是 js & css & image 三种资

Angular 简介虽然最近出了 Angular2，但是Angular1作为之前最火的前端框架依然有大量人在使用。Angular 的特点：双向数据绑定，主打卖点MVVM 模型，把视图和逻辑分开依赖注入个人感觉，在Angular中，视图对应 HTML 模板，视图逻辑对应directive 和 controller。模块Angular 中通过模块来管理命名空间，可以通过不同的模块来隔离不同页面的

TypeScript 是什么有了拥抱ES6的TypeScript 果断可以抛弃 CoffeeScript 和 Babel了。TypeScript 是ES6的一个超集，也就是完整包含了全部ES6特性，并且还引入了强类型和注解。TypeScript = ES6 + 强类型 + Annotation不要用 CoffeeScript 了，因为他的语法大部分都和ES6是不一样，并不符合JS的发展方向。不要被标

巨大变化在 Angular1 中最重要的两个概念：directive 拓展DOM功能，封装DOM操作，并且是可复用的组件controller 创建新的 $scope 作用域，封装和DOM无关的业务逻辑Angular2 是一次彻底的重写，完全删掉了 Controller 和 $scope，增加了一个重要的功能叫 @Component，Component 是Angular2的核心，相当于Angul

React的思想React 的三个特点：单向数据流（而不是双向数据绑定）只关心MVC 中的View，所以组织大规模应用还需要 flux 之类的框架Virtual DOM，对DOM的一层抽象React 的特点就是简单，Simple。所以它只关心View，而整个MVC的架构需要借助其他框架实现。因为没有双向数据绑定，所以React的组件状态非常容易保持，只要确定了 state 和 props ，

真正的模块化前端模块化很早就开始了，无论是 require.js，browserify 进行模块化打包， 还是 Angular 进行依赖注入，我们都可以把JS代码分成一个个小的模块并组装起来。然后我们还会通过 less 或者 sass 来把CSS文件也拆成一个个小的模块来写，甚至我们在CSS代码中感受到了 封装，继承，多态 等面向对象的特性。然而，在 webpack 出来之前，我们所谓的模块化根本不