回去赶紧再看看《javascript设计模式》

#设计模式可以被分成几个不同的种类。在这个部分我们将分为三类：创建型设计模式、结构设计模式、行为设计模式

创建型设计模式

创建型设计模式关注于对象创建的机制方法，通过该方法,对象以适应工作环境的方式被创建。基本的对象创建方法可能会给项目增加额外的复杂性，而这些模式的目的就是为了通过控制创建过程解决这个问题。
属于这一类的一些模式是：构造器模式（Constructor）,工厂模式（Factory）,抽象工厂模式（Abstract）,原型模式（Prototype）,单例模式（Singleton）以及 建造者模式（Builder）。

结构模式

结构模式关注于对象组成和通常识别的方式实现不同对象之间的关系。该模式有助于在系统的某一部分发生改变的时候，整个系统结构不需要改变。该模式同样有助于对系统中某部分没有达到某一目的的部分进行重组。
在该分类下的模式有：装饰模式，外观模式，享元模式，适配器模式和代理模式。

行为设计模式

行为模式关注改善或精简在系统中不同对象间通信。
行为模式包括：迭代模式，中介者模式，观察者模式和访问者模式。

JavaScript中的设计模式

• JavaScript中的常见的创建型设计模式有：
  构造器模式、模块模式、揭示模块模式、单例模式
• 常见的结构型设计模式有：
  外观模式
• 常见也最重要的行为设计模式有：
  观察者模式（发布/订阅模式）

注：观察者模式的目的是促进低耦合，所有浏览器事件都是观察者模式

> $ npm run start

XSS：javascript代码注入
CSRF：跨站请求伪造

https://segmentfault.com/a/1190000006672214?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly#articleHeader14

职责范围

angular为大而全的MV*框架，react、vue将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库，而react、vue只负责核心的view层，react需要配套全家桶redux，react-router使用，vue也需要配套vuex，vue-router使用。

大小

angularjs>angular>react>vue

javaSript代码编写

angularjs使用ES5，angular2使用es6、typeScript，react使用es6、jsx，vue使用es6

学习成本

react<vue<angular2<angular1

核心概念

React核心概念：props、state、setState、render函数，componentDidMount
Vue核心概念：data、computed、methods、template、与angular相似的模板语法，v-bind: href=’…’，v-on:click=’…’,生命周期。
Angular2核心概念：module、component、template、metadata、directive、依赖注入
Angularjs核心概念：模块、控制器、scope、双向绑定、服务、指令（scope的三种绑定@=&）、依赖注入

拓展

react可以使用node进行服务端渲染，并且react native 进行原生跨平台app开发
vue可以使用node进行服务端渲染，同时联合阿里的Weex也可以就行原生跨平台app开发

是否有模板语法

angularjs: ng-model，ng-click，ng-bind，ng-repeat，
angular2: *ngFor，*ngIf，[ngStyle]，(click)，[ngClass]，[(ngModel)]
vue: v-bind，v-on，v-for，v-if
react: 纯jsx，map方法遍历

使用场景

Angular 本身的复杂度是因为它的设计目标就是只针对大型的复杂应用；
Angular 的学习曲线是非常陡峭的 —— 作为一个框架，它的 API 面积比起 Vue 要大得多，你也因此需要理解更多的概念才能开始有效率地工作。

gulp

gulp强调的是前端开发的工作流程， Task Runner，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。

简单说就一个Task Runner

webpack

webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。

webpack is a module bundle

两者区别

虽然都是前端自动化构建工具，但看他们的定位就知道不是对等的。
gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。
webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。

总结

gulp与webpack上是互补的，还是可替换的，取决于你项目的需求。如果只是个vue或react的单页应用，webpack也就够用；如果webpack某些功能使用起来麻烦甚至没有（雪碧图就没有），那就可以结合gulp一起用。

历史

Gulp 的定位是 Task Runner, 就是用来跑一个一个任务的。
放在以前比如我想用sass写css, coffee写js, 我必须手动的用相应的compiler去编译各自的文件，然后各自minify。这时候designer给你了两张新图片，好嘞，接着用自己的小工具手动去压缩图片。
后来前端人不能忍了，搞出个自动化这个流程的 Grunt/Gulp, 比如你写完代码后要想发布production版本，用一句 gulp build 就可以

rm 掉 dist文件夹中以前的旧文件
自动把sass编译成css, coffee编译成js
压缩各自的文件，压缩图片，生成图片sprite
拷贝minified/uglified 文件到 dist 文件夹
但是它没发解决的是 js module 的问题，是你写代码时候如何组织代码结构的问题.

之前大家可以用 require.js, sea.js 来 require dependency, 后来出了一个 webpack 说 我们能不能把所有的文件(css, image, js) 都用 js 来 生成依赖，最后生成一个bundle呢？ 所以webpack 也叫做file bundler.

同时 webpack 为了解决可以 require 不同文件的需求引入了loader, 比如面对sass文件有
1、sass-loader, 把sass 转换成 css
2、css-loader, 让 webpack 能识别处理 css
3、style-loader, 把识别后的 css 插入到 html style中，类似的识别es6 有babel-loader
本来这就是 webpack 的初衷，require everything, bundle everything. 一开始 webpack 刚出来的时候大家都是把它结合着 gulp 一起用的， gulp 里面有个 gulp-webpack，就是让 webpack 专门去做module dependency的事情, 生成一个bundle.js文件，然后再用 gulp 去做一些其他杂七杂八minify, uglify的事情。 后来人们发现 webpack 有个plugins的选项， 可以用来进一步处理经过loader 生成的bundle.js，于是有人写了对应的插件， 所以minify/uglify, 生成hash的工作也可以转移到webpack本身了，挤掉了gulp这部分的市场份额。 再后来大家有发现 npm/package.json 里面的scripts 原来好好用啊，调用任务的时候就直接写一个简单的命令，因为 gulp 也不就是各种插件命令的组合呀，大部分情况下越来越不需要 gulp/grunt 之类的了 ref. 所以你现在看到的很多新项目都是package.json里面scripts 写了一堆，外部只需要一个webpack就够了。

打个不恰当的比方，webpack就像微信一样，本来就是做聊天(module dependency)的，后来生生搞出一个微信小程序(processing files)，大家面对简单的需求发现这个比原生app方便使用啊，于是开发原生的人越来越少一样。

所以 LZ 一开始就模仿其他项目用 npm scripts + webpack 就好了，当你发现有哪些任务你没法用 webpack 或者npm scripts 解决起来麻烦， 这个时候再引入task runner 也不迟

四种方法:
bind、live、deligate、on
区别：
1.bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；
2.bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以用来代替live()函数，live()函数在1.9版本已经删除；
3.live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些
4.bind()支持Jquery所有版本；live()支持jquery1.8-；delegate()支持jquery1.4.2+；on()支持jquery1.7+；