前端開發——子產品化（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 : '<div>這是一自定義元件!</div>'
})
           

用Vue.component(tag, constructor)注冊這個元件構造器(這個注冊是全局的)：

//全局注冊元件，tag 為 my-component
Vue.component('my-component',  MyComponent)
           

初始化根執行個體化元件：

<div id="example">
    <my-component></my-component>
</div>
           

渲染結果：

<div id="example">
    <div>這是一自定義元件!</div>
</div>
           

vuejs組成

1.指令

2.路由

3.狀态

4.生命周期

5.方法

6.選項

7.屬性

vue.js的詳解請參考官網文檔：（

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（慕課網系列教程）