MVC && MVVM
前端框架前端 MV*框架的意义
被误会的MVC和被神化的MVVM
Vue.js新手入门指南
单页运用SPA的路由
单页面运用的路由题目
本文是在本身总结时，看了许多篇文章有了些体味，然后把我以为有意义的摘抄下来，文中很大部份摘录以上参考的文章，再连系一点点本身的看法，总的来说这篇文章是一个汇总文。
MV框架又是为何鼓起的呢？
在前端搞 MV有什么意义？也有人提出如许的疑问：以 AngularJS，Knockout，BackBone 为代表的 MV*框架，它跟 jQuery 如许的框架有什么区分？我 jQuery 用得好好的，有什么必要再引入这类框架？
库和框架是有一些区分的：库是一种东西，我供应了，你可以没必要，纵然你用了，也没影响你自 己的代码构造。框架则是面向一个范畴，供应一套处理方案，假如你用我，就得依据我的体式格局做事。
jQuery 的头脑体式格局是：以 DOM 操纵为中间
MV*框架的头脑体式格局是：以模子为中间，DOM 操纵只是附加
由于前端功用的加强、代码的膨胀，致使不得不做“前端的架构”这个事变了。
为何须要MV＊框架
所以回到那个题目上，jQuery 满足了你的营业须要，你另有什么必要引入 MV*框架？
这个是要看产物范例的，假如是页面型产物，多半确切不太须要它，由于页面中的 JavaScript 代码，处置惩罚交互的相对远远凌驾处置惩罚模子的，然则假如是运用软件类产物，这就太须要了。
MV框架的理念是把前端依据职责分层，每一层都相对比较自力，有本身的代价，也有各自发挥的余地。
这类逻辑的长处在于，营业逻辑与用户界面星散以后，后期关于界面的改版以及关于用户交互的处置惩罚变化，仅仅须要修正View层即可，不在须要对营业逻辑层举行多大的修正。后期的保护本钱会削减许多。
将开辟重心从DOM操纵，转移到数据操纵，将DOM操纵与程序逻辑解耦。
希冀提拔开辟效力、单元时刻产出、后期代码扩展性，下降保护本钱
MVC
Model 数据模子
View 用户界面
Controller 营业逻辑
差别的框架对Model、View的数据同步有差别的处置惩罚
MVC开辟形式的准绳：我们来看看 MVC 这类架构的特征。实在设想形式许多时刻是为了 Don’t repeat yourself 准绳来做的，该准绳要求可以复用的代码要只管复用，来保证重用。在 MVC 这类设想形式中，我们发明 View 和 Model 都是相符这类准绳的。在Controller层只管写不可以复用的。
什么是MVVM
开辟人员只需斟酌和处置惩罚Model(数据模子)的变化即可，没必要斟酌Model和View之间的数据绑定同步，更没必要花精神用大批的代码猎取DOM元素转变DOM元素的值来完成界面数据的变化。一切事情交给VM(View-Model)来处置惩罚。
MVVM并没有营业逻辑的控制器，它经由历程数据双向绑定，及时更新View和Model层，当数据模子发作变化的时刻，用户界面(DOM)的内容会马上更新。反之假如用户操纵致使某些DOM内容变化(如input)，ViewModel也会马上的将Model数据模子更新。
数据双向绑定，开辟人员没必要再把精神放在DOM的修正和更新，只需经由历程模板引擎将数据模子和用户界面绑定，框架会及时同步两边数据的变化。减轻了开辟人员的累赘，也削减了DOM操纵逻辑致使营业逻辑杂沓的能够性。
backbonejs
挪用 Backbone.history.start() 最先监控 hashchange 事宜并分派路由
View:视图
Model:数据
Router:路由，由于Controller层主要担任了路由，而营业逻辑都在View中写了。
backbone事宜：定阅宣布者形式
vue.js
什么是vue
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架差别的是，Vue 采纳自底向上增量开辟的设想。Vue 的中心库只关注视图层，而且非常轻易进修，非常轻易与别的库或已有项目整合。另一方面，Vue 完整有才能驱动采纳单文件组件和 Vue 生态系统支撑的库开辟的庞杂单页运用。
Vue.js 的目的是经由历程只管简朴的 API 完成响应的数据绑定和组合的视图组件。
Vue.js就是一个用于搭建类似于网页版知乎这类表单项繁多，且内容须要依据用户的操纵举行修正的网页版运用。
vue支撑
vue 不支撑IE8以下浏览器的缘由？由于 Vue.js 运用了 IE8 不能模仿的 ECMAScript 5 特征
Virtual DOM（这个也没有写好）
经由历程js对象。。。。。。。。。
生命周期
beforeCreate
observe Data / init Events
组件实例被竖立，组件属性盘算之前
运用：beforeCreate 给个loading加载界面
created
1.组件实例竖立完成，属性已绑定，但DOM还未天生，$el属性还不存在
2.在实例竖立以后同步挪用。此时实例已完毕理会选项，这意味着已竖立：数据绑定，盘算属性，要领，watcher/事宜回调。
3.然则还没有最先 DOM 编译，$el 还不存在,然则实例存在,即this.a存在,可打印出来 。
运用：created阶段做一些初始化，完成函数自实行，比方：created打消loading
el / template
beforeMounted
模板编译、挂载之前
replace el
mounted
1.模板编译、挂载以后不保证组件已在document中
2.在编译完毕后挪用。此时一切的指令已见效，因而数据的变化将触发 DOM 更新。然则不包管 $el 已插进去文档。
运用：mounted阶段做ajax，或许合营路由钩子做一些事变;此时DOM已猎取到，可以对DOM举行操纵
data changed
beforeUpdated
1.数据更新时挪用，发作在假造 DOM 从新衬着和打补丁之前。
2.你可以在这个钩子中进一步地更改状况，这不会触发附加的重衬着历程。
3.该钩子在服务器端衬着时期不被挪用。
virtual dom re-render / patch
updated
由于数据更改致使的假造 DOM 从新衬着和打补丁，在这以后会挪用该钩子。当这个钩子被挪用时，组件 DOM 已更新，所以你如今可以实行依靠于 DOM 的操纵。
但是在大多半情况下，你应当防止在此时期更改状况，由于这能够会致使更新无穷轮回。
vm.$destroyed
beforeDestroy
dsetroyed
vue模块化(本身没有还没有写好)
双向绑定的完成
还好宣布搜检了一次，发明本身把本身杂乱无章说的都写进来了。
这篇文章我觉还不错，随着本身写一遍，就会比较了解了。一切才有我的杂乱无章之说。本身明白最主要。
1.实例MVVM对象时，会天生视察者observe去视察实例中的data的每一个属性。
2.observe对象会遍历每一个key、value。假如value也是对象，也会经由历程observe来视察个中的key、value。
3.在每一个observe对象中会竖立一个定阅者，然后再设置属性的内置get、set函数。
4.经由历程内置get函数：在里面会给data的属性增添定阅者。
5.经由历程内置set函数：会将value值更改，而且假如新的value值是object，那末则竖立一个observe视察者视察它。末了会关照定阅者。
6.compile主要做的事变是理会模板指令，将模板中的变量替换成数据，然后初始化衬着页面视图，并将每一个指令对应的节点绑定更新函数，增添监听数据的定阅者，一旦数据有更改，收到关照，更新视图。
7.视察者Watcher是observe与compile的桥梁，在理会vue的自定义指令时，会为每一个指令竖立一个Watcher视察者对象。watcher会将每一个指令的当前状况设定，并增添到每一个data的定阅者数组中，当data的数值发作转变时，会关照其绑定的定阅者，触发每一个定阅者更新函数。
vue的瑕玷
第一点：数据绑定使得 Bug 很难被调试。你看到界面非常了，有多是你 View 的代码有 Bug，也多是 Model 的代码有题目。数据绑定使得一个位置的 Bug 被疾速通报到别的位置，要定位原始出题目的处所就变得不那末轻易了。
第二点：关于过大的项目，数据绑定须要消费更多的内存。
vue的盘算属性－computed
我们可以将统一函数定义为一个 method 而不是一个盘算属性。关于终究的效果，两种体式格局确切是雷同的。但是，差别的是盘算属性是基于它们的依靠举行缓存的。盘算属性只要在它的相干依靠发作转变时才会从新求值。这就意味着只需 message 还没有发作转变，屡次接见 reversedMessage 盘算属性会马上返回之前的盘算效果，而没必要再次实行函数。
watch
仅是视察变量的变化可以没必要watch，直接用盘算属性
然则，当在数据发作变化时，你愿望实行开支较大的操纵时，用watch比较有效。
watch可以限定我们实行的频次，在终究效果前，可以设置中间状况。盘算属性没法做到。
vuex
state:驱动运用的数据源
view:以声明体式格局将state映射到视图
action:响应在view上的用户输入致使的状况变化。
当我们的运用碰到多个组件同享状况时，单向数据流的简洁性很轻易被损坏：
多个视图依靠于统一状况。
来自差别视图的行动须要变动统一状况。
关于题目一，传参的要领关于多层嵌套的组件将会非常烦琐，而且关于兄弟组件间的状况通报无计可施。关于题目二，我们经常会采纳父子组件直接援用或许经由历程事宜来变动和同步状况的多份拷贝。以上的这些形式非常软弱，通常会致使没法保护的代码。
把组件的同享状况抽取出来，以一个全局单例形式治理。
Vuex 是一个专为Vue.js运用程序开辟的状况治理形式。它采纳集合式存储治理运用的一切组件的状况，并以响应的划定规矩保证状况以一种可展望的体式格局发作变化。
由于 Vuex 的状况存储是响应式的，从 store 实例中读取状况最简朴的要领就是在盘算属性中返回某个状况
State:状况
Getters：从State中派生出来的一些状况
Mutations：更改 Vuex 的 store 中的状况的唯一要领是提交 mutation,不能直接挪用，须要触发store.commit(type,[payload])。mutation必需时同步函数。异步函数不能捕捉到转变的状况
Actions：
Action 提交的是 mutation，而不是直接变动状况
Action 可以包括恣意异步操纵。
Action 函数接收一个与 store 实例具有雷同要领和属性的 context 对象。
Action 经由历程 store.dispatch 要领触发：store.dispatch(‘increment’)
store.dispatch 可以处置惩罚被触发的action的回调函数返回的Promise，而且store.dispatch依旧返回Promise
Modules
由于运用单一状况树，运用的一切状况会集合到一个比较大的对象。当运用变得非常庞杂时，store 对象就有能够变得相称痴肥。
为了处理以上题目，Vuex 许可我们将 store 支解成模块（module）。每一个模块具有本身的 state、mutation、action、getter、以至是嵌套子模块——从上至下举行一样体式格局的支解
SPA
单页面运用（Single Page Application）简称SPA，运用SPA构建的运用长处有效户体验好、速度快，内容的转变不须要从新加载全部页面，防止了没必要要的跳转和重复衬着，从而相对减轻了服务器压力，SPA在WEB挪动端运用非常普遍。
单页运用路由
HTML5在History里增添了pushState要领，这个要领会将当前的url增添到历史记录中，然后修正当前url为新url。固然这个要领只会修正地址栏的Url显现，但并不会发出任何要求。因而我们可以应用这个要领连系ajax完成单页面运用SPA，就是PushState+Ajax，人称Pjax。
location.hash更改了，页面也不会变化 hashchange hash值的转变也会到场历史记录中
总的来说，基于Hash的路由，兼容性更好；基于History API的路由，越发直观和正式。然则，有一点很大的区分是，基于Hash的路由不须要对服务器做修正，基于History API的路由须要对服务器做一些革新。
pushstate的运用要领：
history.pushState(state, title, url)state: 可以放恣意你想放的数据，它将附加到新url上，作为该页面信息的一个补充。 该对象可在onpopstate事宜中猎取，也可在history对象中猎取。
title: 望文生义，就是document.title。
url: 新url，也就是你要显现在地址栏上的url。
history.replaceState(state, title, url)replaceState要领与pushState迥然差别，区分只在于pushState会将当前url增添到历史记录，以后再修正url，而replaceState只是修正url，不增添历史记录。
window.onpopstate一般来说，每当url更改时，popstate事宜都邑被触发。因而，我们可以把它用作浏览器的行进退却事宜。该事宜有一个参数，就是上文pushState要领的第一个参数state。
Pjax能做什么
Pjax是一个优异的处理方案，它可以做：
可以在页面切换间腻滑过渡，增添Loading动画。
可以在各个页面间通报数据，不依靠URL。
可以选择性的保存状况，如音乐网站，切换页面时不会住手播放歌曲。
一切的标签都可以用来跳转，不仅仅是a标签。
防止了大众JS的重复实行，削减了要求体积，节约流量，加速页面响应速度。
对SEO也不会有影响，关于不支撑HTML5的浏览器以及搜索引擎爬虫，则可以跳转实在的页面。
支撑浏览器行进和退却按钮。
Pjax
ajax要求，经由历程html5pushState来修正历史记录，假如不支撑html5则
重写url
每次修正location的属性（hash除外），页面都邑以新URL从新加载
