前端开发——模块化（html模块化开发）

web从进入2.0时代后，web开发人员更加注重模块化思想的运用，特别是有了SPA之后。

SPA——组件化

进入了spa时代的我们对于模块化有了新的称呼‘组件化’，spa既是我们所熟知的单页面应用。

spa 框架

1.vue.js（推荐1）
2.angularjs（推荐2）
3.reactjs（推荐3）
4.ember.js
5.Aurelia.js
6.backbone.js

html组件化开发（推荐使用）vue.js

随着各大浏览器运营商对es6的支持力度的加深，MVVM和组件化开发模式的流行，而目前最友好的支持他们的是vue.js和angular.js,出于个人感情我推荐vue.js,因为这个框架是国人开发的。

vue.js的组件化

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件是自定义元素，Vue.js 的编译器为它添加了特殊的功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

1.创建和注册组件：

用Vue.extend()创建一个组件构造器：

var MyComponent = Vue.extend({
    template : '
这是一自定义组件!
'
})

用Vue.component(tag, constructor)注册这个组件构造器(这个注册是全局的)：

//全局注册组件，tag 为 my-component
Vue.component('my-component',  MyComponent)

初始化根实例化组件：

渲染结果：

    
这是一自定义组件!

vuejs组成
1.指令
2.路由
3.状态
4.生命周期
5.方法
6.选项
7.属性
vue.js的详解请参考官网文档：（https://cn.vuejs.org/）https://cn.vuejs.org/

HTML组件化的优势

1.html代码的重用，减轻前端工程师的工作量
2.简化代码，增强web应用的性能
3.易于团队之间的协作开发
4.交互性能更有
5.便于维护

MVVM开发模式的优势

1.前后端的分离
2.交互性能更好（减少了浏览器到服务器的请求）
3.缩短开发周期
4.数据驱动代替DOM驱动的前端思想更优
5.状态管理

angularjs组件化

demo：
http://blog.csdn.net/lemon_zhao/article/details/52370079
webuiangular组件库:
http://www.wisoft.com.cn:8120/WebUI4Angular/docs/index_demo.html

参考资料

组件化开发前世今生
https://my.oschina.net/huangcongcong/blog/546001
vue.js
https://juejin.im/user/580327ee0e3dd900570cf3ab（文档，这几篇文章讲的很详细）
https://vuefe.cn/v2/guide/（文档）
https://github.com/lvzhenbang/my-blog（案例）
https://github.com/lvzhenbang/shopping（案例）
https://juejin.im/post/58e83e42570c350057cbac4d（案例）
https://segmentfault.com/a/1190000008370588（案例）
angular.js
http://www.imooc.com/course/list?c=angularjs（慕课网系列教程）