JS模块化

模块化的好处：1.避免命名冲突

                          2.更好的分离，按需加载

                          3.更高的复用性

                          4.高可维护性

 ???<script type="text/javascript" src="module1.js"></script> ???<script type="text/javascript" src="module2.js"></script> ???<script type="text/javascript" src="module3.js"></script> ???<script type="text/javascript" src="module4.js"></script>

问题：               1.引入文件过多

                          2.依赖模糊

                          3.难以维护

1.闭包IIFE模式

var loadingRender = (function (window,$) {
var a = 1; ???return { ???????init: function () { ???????} ???}})(window,jQuery)loadingRender.init()

好处：模块内变量不受外界干扰；外面无法修改内部变量；只暴漏一个初始化的接口

2.服务器端commonJS使用方法

## Node.js模块化教程生成webpack文件 npm init
1. 下载安装node.js
2. 创建项目结构
 ?```
 ?|-modules
 ???|-module1.js
 ???|-module2.js
 ???|-module3.js
 ?|-app.js
 ?|-package.json
 ???{
 ?????"name": "commonJS-node", //姓名不能中文，和大写
 ?????"version": "1.0.0"
 ???}
 ?```
3. 下载第三方模块
 ?* npm install uniq --save
4. 模块化编码

/*暴露一个对象*/module.exports = { ???msg:‘module‘, ???foo(){ ???????console.log(this.msg) ???}};

/*暴露一个函数*/module.exports = function () { ?console.log(‘module2‘)}

/*exports对象暴露出去*/exports.foo = function () { ?console.log(‘module3‘)}exports.arr = [1,2,3,4,5,6,1,2,3,1,2];

调用

/*第三方模块引用*/let uniq = require(‘uniq‘);/*自定义模块引用*/let module1 = require(‘./modules/module‘);let module2 = require(‘./modules/module2‘);let module3 = require(‘./modules/module3‘);/*执行方法*/module1.foo();module2();module3.foo();let ary = uniq(module3.arr);console.log(ary)

5. 通过node运行app.js
 ?* 命令: node app.js
 ?* 工具: 右键-->运行

3.在浏览器中使用commonjs## Browserify模块化使用教程1. 创建项目结构

 ?```
 ?|-js
 ???|-dist //打包生成文件的目录
 ???|-src //源码所在的目录
 ?????|-module1.js
 ?????|-module2.js
 ?????|-module3.js
 ?????|-app.js //应用主源文件
 ?|-index.html
 ?|-package.json
 ???{
 ?????"name": "browserify-test",
 ?????"version": "1.0.0"
 ???}
 ?```
2. 下载browserify
 ?* 全局: npm install browserify -g
 ?* 局部: npm install browserify --save-dev ?dev开发环境依赖 ?save注入依赖
3. 定义模块代码
 ?* module1.js
 ???```
 ???module.exports = {
 ?????foo() {
 ???????console.log(‘moudle1 foo()‘)
 ?????}
 ???}
 ???```
 ?* module2.js
 ???```
 ???module.exports = function () {
 ?????console.log(‘module2()‘)
 ???}
 ???```
 ?* module3.js
 ???```
 ???exports.foo = function () {
 ?????console.log(‘module3 foo()‘)
 ???}
 ???
 ???exports.bar = function () {
 ?????console.log(‘module3 bar()‘)
 ???}
 ???```
 ?* app.js (应用的主js)
 ???```
 ???//引用模块
 ???let module1 = require(‘./module1‘)
 ???let module2 = require(‘./module2‘)
 ???let module3 = require(‘./module3‘)
 ???
 ???let uniq = require(‘uniq‘)
 ???
 ???//使用模块
 ???module1.foo()
 ???module2()
 ???module3.foo()
 ???module3.bar()
 ???
 ???console.log(uniq([1, 3, 1, 4, 3]))
 ???```
* 打包处理js:
 ?* browserify js/src/app.js -o js/dist/bundle.js
* 页面使用引入:
 ?<script type="text/javascript" src="js/dist/bundle.js"></script> ；


4.ES6模块

JS模块化

原文地址：https://www.cnblogs.com/liangfc/p/9353883.html