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(慕課網系列教程)