首页 / JAVA / javasdript的模块化
javasdript的模块化
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javasdript的模块化，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2551字，纯文字阅读大概需要4分钟。
内容图文
一、什么是模块、模块化
一个封装的函数功能可以看成一个模块
一个js文件看成一个模块；比如使用script标签引入指定的js文件（插件或自定义）
将几个程序功能（js文件），依据一定的规范进行组合，并形成一个依赖关系，就形成了一个模块化开发
二、模块化的好处
避免命名冲突（减少命名空间污染）
更好的分离，按需加载
更高复用性
高可维护性
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
内容总结
以上是互联网集市为您收集整理的javasdript的模块化全部内容，希望文章能够帮你解决javasdript的模块化所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。