您现在的位置是:首页 > 文章详情

JS模块化

日期:2018-10-24点击:376

一、理解

1、什么是模块、模块化? 将一个复杂的程序依据一定的规范封装成几个文件,并进行组合在一起

2、为什么要模块化? 降低复杂度,提高解耦性,部署方便

3、模块化的好处 避免命名冲突(减少命名空间污染) 更好的分离,按需加载 更高复用性 高可维护性 4、页面引入加载script 模块的使用 举例来说:前端框架layui 的js部分就是采用模块化(用的自己定义的模块化方法)

layui.use就是引入模块 layui,define就是定义模块

二、模块化规范

1、CommonJS(node根据该规范编写) 说明: 每一个文件都可以当做一个模块

在服务器端:模块的加载 是运行时同步加载的

在浏览器端:模块需要提前编译打包处理

基本语法: 模块引入:require(xxx)

第三方模块:xxx为模块名

自定义模块:xxx为模块文件路径

暴露模块:exports.xxx = value 和 module.exports = value

暴露的模块 本质是 exports 对象

exports本身是一个空对象 exports.xxx = value是给exports对象添加属性或方法

module.exports = value 是直接用value新对象来覆盖原来的空对象

实现: 服务器端实现:Node.js

浏览器端实现:Browserify (CommonJS的浏览器端的打包工具)

下载安装browserify

全局:npm install browserify -g

局部:npm install browserify --save-dev

定义模块代码(js文件代码 并暴露相应内容)

引入模块 在app.js 中用require引入模块 但是浏览器不认识require方法,需要打包处理js

在根目录下 终端输入 browserify js/src/app.js -o js/dist/bundle.js (js/src/app.js源文件 js/dist/bundle.js 是打包输出的文件)

页面使用引入:

<script type="text/javascript" src="js/dist/bundle.js"></script> (浏览器真正跑的是打包生成的文件) 

2、AMD 说明: 专门用于浏览器端的模块化规范,模块的加载是异步的

基本语法: 定义暴露模块:

 //定义没有依赖的模块: define(function(){ return 模块 }) //定义有依赖的模块: define(['module1','module2'],function(m1,m2){ return 模块 }) 引入使用模块: require(['module1','module2'],function(m1,m2){ 使用m1/m2 }) 

实现(浏览器端): Require.js

3、CMD(了解) 说明:专门用于浏览器端,模块的加载是异步的,模块使用时才会加载执行 基本语法: 定义暴露模块:

 //定义没有依赖的模块: define(function(require,exports,module){ exports.xxx = value module.exports = value }) //定义有依赖的模块: define(function(require,exports,module){ //引入依赖模块(同步) var module2 = require("./module2") //引入依赖模块(异步) require.async("./module3",function(m3){ }) //暴露模块 exports.xxx = value }) 

引入使用模块:

 require(function(require){ var m1 = require('./module1') var m4 = require('./module4') m1.show() m4.show() }) 

实现(浏览器端):Sea.js 4、ES6 说明:依赖模块需要编译打包处理 语法: 导出模块:export xxx

引入模块:import xxx from "url"

页面引入

实现(浏览器端): 使用Babel将ES6编译为ES5代码

使用Browserify编译打包js

原文链接:https://my.oschina.net/u/3970421/blog/2252062
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章