一、模块化、组件化、工程化
(1)模块化:如果一个项目是用多个模块进行开发的就叫模块化项目。它是将一个大的 JS 文件根据相关规范(CommonJS,AMD,CMD,ES6)拆分成多个小的 JS,每个 JS 文件就对应一个模块。
模块化特点:
每个 JS 文件中的数据是私有的,相对来说比较安全。
不互相干扰避免变量污染,命名冲突的问题。
方便代码的复用以及维护
(2)组件化:一个项目是用多个组件进行开发的话就叫多组件项目。
组件是一个局部的功能界面,页面上每一个独立的交互区域就是一个组件,由 JS,HTML,CSS 甚至 img 等资源组成。
组件化将页面当做一个容器,页面中各个独立部分如:头部导航、中间轮播、侧边栏目、底部等都当做独立的组件共同来组成完整的页面。
每个组件对应一个文件目录,组件在这个目录下进行维护,当不需要某个组件或要替换组件时,可以将目录进行删除/替换
(3)工程化:就是要自成体系,用软件工程的思想对前端开发的流程、技术、经验进行规范和标准,提高效率降低成本。具体表现形式类似模块化和组件化。
总的来说这三种开发的核心思想或者说优点就是分而治之,方便开发和维护,提高代码的复用率。
二、JS模块化
2.1 模块化的理解
什么是模块?
- 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件),并进行组合在一起。
- 块的内部数据/实现是私有的,只是向外部暴露一些接口(方法)与外部其它模块通信。
一个模块的组成
- 数据 => 内部的属性。
- 操作数据的行为 => 内部的函数。
模块化
编码时是按照模块一个一个编码的,整个项目就是一个模块化的项目。
2.2 模块化的进化过程
全局 function 模式 :
- 编码: 全局变量/函数。
- 问题: 污染全局命名空间,容易引起命名冲突/数据不安全。
namespace 模式 :
- 编码: 将数据/行为封装到对象中。
- 解决: 命名冲突(减少了全局变量)。
- 问题: 数据不安全(外部可以直接修改模块内部的数据)。
IIFE 模式/增强
- IIFE : 立即调用函数表达式—>匿名函数自调用。
- 编码: 将数据和行为封装到一个函数内部,通过给window添加属性来向外暴露接口。
- 引入依赖: 通过函数形参来引入依赖模块。
(function(window, module2){ var data = 'atguigu.com' function foo() { module2.xxx() console.log('foo()'+data) } function bar() { console.log('bar()'+data) } window.module = {foo} })(window, module2)
- 问题: 引入的
script
标签之间的依赖先后顺序不能出错,需要发多次请求增加服务器负担。2.3 模块化规范
2.3.1 CommonJS
- Node.js: 服务器端
- Browserify: 浏览器端,也称为js的打包工具
- 基本语法:
- 定义暴露模块 : exports
exports.xxx = value
module.exports = value
引入模块 : require
var module = require(‘模块名/模块相对路径’)
- 定义暴露模块 : exports
- 引入模块发生在什么时候?
- AMD: 浏览器端
- require.js
- 基本语法
- 定义暴露模块: define([依赖模块名], function(){return 模块对象})
- 引入模块: require([‘模块1’, ‘模块2’, ‘模块3’], function(m1, m2){//使用模块对象})
- 配置:
require.config({
// 基本路径
baseUrl : ‘js/‘,
// 标识名称与路径的映射
paths : {
},'模块1' : 'modules/模块1', '模块2' : 'modules/模块2', 'angular' : 'libs/angular', 'angular-messages' : 'libs/angular-messages'
// 非AMD的模块
shim : {
}'angular' : { exports : 'angular' }, 'angular-messages' : { exports : 'angular-messages', deps : ['angular'] }
})2.3.3 CMD
- CMD: 浏览器端,好像阿里已经把该标准出售给国外了,应该不常用。
- sea.js
- 基本语法
- ES6内置了模块化的实现,语法简洁、推荐使用。
- 基本语法
- 定义暴露模块 : export
- 暴露一个对象:
export default 对象 - 暴露多个:
export var xxx = value1
export let yyy = value2var xxx = value1
let yyy = value2
export {xxx, yyy}
- 暴露一个对象:
- 引入使用模块 : import
- default模块:
import xxx from ‘模块路径/模块名’ - 其它模块
import {xxx, yyy} from ‘模块路径/模块名’
import * as module1 from ‘模块路径/模块名’
- default模块:
- 定义暴露模块 : export
- 问题: 所有浏览器还不能直接的识别ES6模块化的语法。
- 解决:
- 使用Babel将ES6—>ES5(使用了CommonJS) —-浏览器还不能直接支行。
- 使用Browserify—>打包处理—-浏览器可以运行。