前端框架 - kylin-qin/Blog GitHub Wiki
从事件驱动到数据驱动，将交互的逻辑从DOM的操作转化为对数据的处理，提高开发效率。
1.事件驱动，经典作Jquery(关注点在DOM上)
<div id="main">你好世界</div>
$('#main').on('click', function () {
$(this).html('你好朋友')
})
2. 数据驱动，例如Vue（关注点在数据上）
<div id="main"><div v-on:click="hello">{{message}}</div></div>
var app = new Vue({
el: '#main',
data: {
message: '你好世界'
},
methods: {
hello: function () {
this.message= '你好朋友'
}
}
})
React 是一个采用声明式，高效而且灵活的用来构建用户界面的框架。 并不能算完整的MVC框架，只是View。
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// 通过这种标签语法来使用我们上面声明的组件: <ShoppingList name="Mark" />
特点：
- JSX语法，为函数式的 UI 编程方式打开了大门。
- 组件化& Props & State。
- 高效，虚拟DOM和Diff算法, 最小化页面重绘。
虚拟DOM：
React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率。
为什么用虚拟dom，当dom反生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大。
Diff算法：
当你使用React的时候，在某个时间点 render() 函数创建了一棵React元素树。
在下一个state或者props更新的时候，render() 函数将创建一棵新的React元素树。
React将对比这两棵树的不同之处，计算出如何高效的更新UI（只更新变化的地方）。
React下的React-Native
React-Native 看起来很像 React，只不过其基础组件是原生组件而非 web 组件。
React-Native 框架分析：
-
Java层：该层主要提供了Android的UI渲染器UIManager（将JavaScript映射成Android Widget）以及一些其他的功能组件（例如：Fresco、Okhttp）等，在java层均封装为Module，java层核心jar包是react-native.jar，封装了众多上层的interface，如Module，Registry，bridge等。
-
C++层：主要处理Java与JavaScript的通信以及执行JavaScript代码工作，该层封装了JavaScriptCore，执行对js的解析。基于JavaScriptCore，Web开发者可以尽情使用ES6的新特性，如class、箭头操作符等，而且 React Native运行在JavaScriptCore中的，完全不存在浏览器兼容的情况。Bridge桥接了java ， js 通信的核心接口。JSLoader主要是将来自assets目录的或本地file加载javascriptCore，再通过JSCExectutor解析js文件。
-
Js层：该层提供了各种供开发者使用的组件以及一些工具库。 Component：Js层通js/jsx编写的Virtual Dom来构建Component或Module，Virtual DOM是DOM在内存中的一种轻量级表达方式，可以通过不同的渲染引擎生成不同平台下的UI。component的使用在 React 里极为重要, 因为component的存在让计算 DOM diff 更高效。 ReactReconciler : 用于管理顶层组件或子组件的挂载、卸载、重绘。
公寓锁B端APP项目：
AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
一个完整的前端解决方案
在构建WEB应用的前端时，Angular提供的不是一个部分解决方案，而是一个完整的解决方案。它能够处理所有你写过的混杂了DOM和AJAX的代码，并能够将它们组织的结构良好。这使得Angular在决定应该怎样构建一个CRUD应用时显得甚至有些“偏执（opinionated）”，但是尽管它“偏执”，它也尝试确保使用它构建的应用能够灵活的适应变化。
下面是Angular的一些出众之处：
构建一个CRUD应用时可能用到的所有技术：数据绑定、基本模板指令、表单验证、路由、深度链接、组件重用、依赖注入。
可测试性：单元测试、端到端测试、模拟对象（mocks）、测试工具。
拥有一定目录结构和测试脚本的种子应用。
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
特点：
- 小而简单
- 双向绑定
- 组件化-模块化
Vue和React很相似，只是写法不一样。
各框架的对比：
-
纯模板引擎：最少的就是纯模板引擎，只管状态到界面的映射。
-
React和Vue：其实这两者都是非常专注的只做状态到界面映射，以及组件。
-
Backbone：它会给你多一些架构上指导，比如它会让你分层。
-
Angular：它做的事情就更多，它有自己的路由，这些都会包含在里面。
-
Ember：相比Angular，Ember做得就更加彻底，Ember信奉的是约定优于配置，它会将一切都帮你设计好打包好，你就开箱用就可以了。
-
Meteor：Meteor只是一个极端，它是从前到后全都包含，从前端到数据层到数据库，全都帮你打包好。
通过简单的分析，我们可以感受到， 做得少的框架不一定就不如做得多的框架，这体现出一种取舍 。也就是说，做得少的框架可以给你更多的灵活性，但你需要做更多的选择；做得多的框架有更强的侵入性，学习成本更高，灵活性更低。一旦选择了一个侵入性强的框架，那么一些小的部分你就没有机会去切换成其他你更想用的方案。
所以，React和Vue有一个共同特点，它们都有各自的配套工具，核心虽然只解决一个很小的问题，但它们有生态圈及配套的可选工具，当你把他们一个一个加进来的时候，就可以组合成非常强大的栈，就可以涵盖其他的这些更完整的框架所涵盖的问题。
公寓锁Vue项目技术方案：
- Vue框架
- Element-ui UI组件库
- vue-router 路由
- vue-i18n 国际化
- vuex 状态管理
- axios 接口请求
- 等等
- D3.js
- char.js
- Echar.js
- thress.js
- ionic
- jQuery-File-Upload
- gulp
- babel
- hammer.js
- layer.js
- Swiper.js