前端开发——模块化(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(慕课网系列教程)
相关文章
|
17天前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
2月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
34 1
前端基础(十七)_HTML5新特性
|
18天前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
49 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
21天前
|
前端开发 JavaScript 开发者
深入解析前端开发中的模块化与组件化实践
【10月更文挑战第5天】深入解析前端开发中的模块化与组件化实践
21 1
|
28天前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
17 2
|
28天前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
25 1
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
89 1
|
2月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
55 19
|
2月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
45 13
|
2月前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。