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

简介: web从进入2.0时代后,web开发人员更加注重模块化思想的运用,特别是有了SPA之后。SPA——组件化进入了spa时代的我们对于模块化有了新的称呼‘组件化’,spa既是我们所熟知的单页面应用。

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(慕课网系列教程)
相关文章
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
36 0
|
1月前
|
资源调度 前端开发 JavaScript
构建高效前端项目:现代包管理器与模块化的深度解析
【2月更文挑战第21天】 在当今快速演变的前端开发领域,高效的项目管理和代码组织已成为成功交付复杂Web应用的关键。本文将深入探讨现代前端包管理器如npm, yarn和pnpm的工作原理,以及它们如何与模块化编程实践(例如CommonJS、ES6模块)协同工作以优化开发流程。我们将剖析这些工具的内部机制,了解它们如何解决依赖冲突,提高安装速度,并保证项目的健壮性。同时,本文还将介绍模块化编程的最佳实践,包括代码拆分、重用和版本控制,帮助开发者构建可维护且性能卓越的前端项目。
|
11天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
18天前
|
前端开发 JavaScript 安全
前端模块化发展
前端模块化发展
|
24天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
48 3
Web前端全栈HTML5通向大神之路
|
1月前
|
前端开发 JavaScript 测试技术
构建高效前端项目:模块化与组件化策略
【2月更文挑战第25天】 在现代网页开发中,随着用户对于网页性能和交互体验的期待不断提升,前端项目的复杂性也随之增加。为了应对这种复杂性并提高开发效率,本文将探讨模块化与组件化在前端项目中的应用策略。通过分析这两种方法的优势与适用场景,我们将揭示如何利用它们来优化项目结构,提升代码复用率,以及加快开发流程。
31 4
|
1月前
|
前端开发 JavaScript 开发者
前端的HTML使用
前端的HTML使用
17 3
|
1月前
|
前端开发
web前端-HTML-div语法
web前端-HTML-div语法