前端开发——模块化(html模块化开发)

  1. 云栖社区>
  2. 博客>
  3. 正文

前端开发——模块化(html模块化开发)

缘自世界 2017-04-23 17:10:00 浏览454
展开阅读全文

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/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(慕课网系列教程)

网友评论

登录后评论
0/500
评论
缘自世界
+ 关注