js模块化
一、模块化的理解
- 模块化的理解
- 什么是模块?
- 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
- 块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信
- 一个模块的组成
- 数据—>内部的属性
- 操作数据的行为—>内部的函数
- 模块化
- 编码时是按照模块一个一个编码的, 整个项目就是一个模块化的项目
- 为什么需要模块化
- 当项目功能越来越多,代码量便也会越来越多,后期的维护难度会增大,此时在JS方面就会考虑使用模块化规范去管理。
二、模块化进化历史
(一)全局function模式
/**
* 全局函数模式: 将不同的功能封装成不同的全局函数
* 问题: Global被污染了, 很容易引起命名冲突
*/
(二)namespace模式
/**
* namespace模式: 简单对象封装
* 作用: 减少了全局变量
* 问题: 不安全(数据不是私有的, 外部可以直接修改)
*/
(三)IIFE模式
/**
* IIFE模式: 匿名函数自调用(闭包)
* IIFE : immediately-invoked function expression(立即调用函数表达式)
* 作用: 数据是私有的, 外部只能通过暴露的方法操作
* 问题: 如果当前这个模块依赖另一个模块怎么办?
*/
(四)IIFE模式增强
/**
* IIFE模式增强 : 引入依赖
* 这就是现代模块实现的基石
*/
(五)页面加载多个js的问题
二、commonjs模块化
(一)commonjs模块化的理解
-
Node.js
: 服务器端 -
Browserify
: 浏览器端 也称为js的打包工具 -
引入模块发生在什么时候?
- 在服务器端(
node.js
): 模块的加载是运行时同步加载的 - 在浏览器端(
Browserify
)):在运行前对模块进行编译/转译/打包的处理(已经将依赖的模块包含进来了), 运行的是打包生成的js, 运行时不存在需要再从远程引入依赖模块
- 在服务器端(
-
模板定义
- 模块引用:
(二)commonjs模块化实操
-
创建项目结构
|-js |-dist //打包生成文件的目录 |-src //源码所在的目录 |-module1.js |-module2.js |-module3.js |-app.js //应用主源文件 |-index.html
-
创建包描述文件
-
模块化编码
-
安装工具
npm install browserify --save-dev
- 打包
-
页面引入
三、ES6模块化
(一)ES6模块化的理解
-
ES6内置了模块化的实现
-
问题: 所有浏览器还不能直接识别ES6模块化的语法
-
解决
-
使用Babel将ES6—>ES5(使用了CommonJS) ----浏览器还不能直接运行
-
使用Browserify—>打包处理----浏览器可以运行
-
模块定义
-
模块引入
(二)E6模块化实操
- 创建文件目录
- 创建包描述文件
-
模块化编码
-
安装工具
npm install babel-cli babel-preset-env browserify --save-dev
-
编译
使用Babel将ES6编译为ES5代码(但包含CommonJS语法)
npx babel js/src -d js/dist --presets=babel-preset-env
-
打包
使用Browserify打包js
npx browserify js/dist/app.js -o js/dist/bundle.js
-
页面引入
-
继续编写