浏览器做单页网站项目,微信公众号平台电话,昆明响应式网站制作,深圳网站建设联系方式JS模块化规范之ES6及总结 前言ES6模块化概念基本使用ES6实现 UMD(Universal Module Definition)总结 前言 ESM在模块之间的依赖关系是高度确定的#xff0c;与运行状态无关#xff0c;编译工具只需要对ESM模块做静态分析#xff0c;就可以从代码字面中推断出哪些模块值未曾被… JS模块化规范之ES6及总结 前言ES6模块化概念基本使用ES6实现 UMD(Universal Module Definition)总结 前言 ESM在模块之间的依赖关系是高度确定的与运行状态无关编译工具只需要对ESM模块做静态分析就可以从代码字面中推断出哪些模块值未曾被其它模块使用这是实现Tree Shaking技术的必要条件。 ES6模块化
概念 ES6模块的设计思想是尽量的静态化使得编译时就能确定模块的依赖关系以及输入和输出的变量。CommonJS和AMD模块都只能在运行时确定这些东西。比如CommonJS模块就是对象输入时必须查找对象属性。 基本使用
export命令用于规定模块的对接接口import命令用于输入其他模块提供的功能。
/** 定义模块 math.js /
var basicNum 0;
var add function(a,b){return a b;
};
export { basicNum,add };
*/
//引用模块
import { basicNum,add } from ./math;
function test(){ele.textContext add(99basicNum);
}如上例所示使用import命令的时候用户需要知道所要加载的变量名和或函数名否则无法加载。为了给用户提供方便让他们不用阅读文档就能加载模块就要用到export default命令为模块指定默认输出。
//export-default.js
export default function(){console.log(foo);
}
//import-default.js
import customName from ./export-default;
customName(); // foo模块默认输出其他模块加载该模块时import命令可以为该匿名函数指定任意名字。
ES6模块与CommonJS模块的差异
CommonJS模块输出的是一个值的拷贝ES6模块输出的是值的引用CommonJS模块是运行时加载ES6模块是编译时输出的接口
第二个差异是因为CommonJS加载的是一个对象即module.exports属性该对象只有在脚本运行完才会生成。而ES6模块不是对象他的对接接口只是一种静态定义在代码静态解析阶段就会生成。 下面重点解释第一个差异我们还是举上边这个CommonJS模块的加载机制例子
//lib.js
export let counter 3;
export function incCounter(){counter;
}
//main.js
import { counter,incCounter } from ./lib;
console.log(counter);//3
incCounter();
console.log(counter);//4ES6模块的运行机制与CommonJS不一样。ES6模块是动态引用并且不会缓存值模块里面的变量绑定其所在的模块。
ES6实现
简单来说就一句话使用Babel将ES6编译为ES5代码使用Browserify编译打包js。
定义package.json文件
{name:es6-balel-browserify,version:1.0.0
}按装babel-cli,babel-perset-es2015和browserify
npm install babel-cli browserify -g
npm install babel-perset-es2015 --save-dev定义.babelrc文件
{presets:[es2015]
}定义模块代码
//module1.js文件
//分别暴露
export function foo(){console.log(foo() module1)
}
export function bar(){console.log(bar() module1)
}
//module2.js文件
function fun1(){console.log(fun1() module2)
}
function fun2(){console.log(fun2() module2)
}
export { fun1,fun2 }//module3.js文件
// 默认暴露 可以暴露任意数据类型暴露什么数据接收到就是什么数据
export default(){console.log(默认暴露)
}
//app.js文件
import { foo,bar } from ./module1
import { fun1,fun2 } from ./module2
import module3 from ./module3
foo()
bar()
fun1()
fun2()
module3()编译并在index.html引入 使用Babel将ES6编译为ES5代码但包含CommonJS语法babel js/src -d js/lib使用Browserify编译js:browserify js/lib/app.js -o js/lib/bundle.js然后在index.html文件中引入
script typetext/javascript srcjs/lib/bundle.js/script最后得到如下结果
foo() module1
bar() module1
fun1() module2
fun2() module2
默认暴露引入第三方库 首先安装依赖npm install jquery1
//app.js
import { foo bar } from ./module1
import { fun1,fun2 } from ./module2
import module3 from ./module3
import $ from jqueryfoo()
bar()
fun1()
fun2()
module3()
$(body).css(background,green)UMD(Universal Module Definition)
是一种JavaScript通用模块定义规范让你的模块能在JavaScript所有运行环境中发挥作用。 意味着要同时满足CommonJSAMDCMD的标准一下为实现
(function (root,factory){if(typeof module object typeof module.exports object){console.log(是CommonJS模块规范nodejs环境);module.exports factory();}else if(typeof define function define.amd){console.log(是AMD模块规范如require.js)define(factory)}else if(typeof define function define.cmd){console.log(是CMD模块规范如sea.js)define(function(require,exports,module){module.exports factory()})}else{console.log(没有模块环境直接挂载在全局对象上)root.umdModule factory();}
}(this,function(){return {name:我是一个UMD模块}
}))总结 CommonJS规范主要用于服务端编程加载模块是同步的这并不适合在浏览器环境因为同步意味着阻塞加载浏览器资源是异步加载的因此有了AMD CMD解决方案AMD规范是在浏览器环境中异步加载模块而且可以并行加载多个模块。不过AMD规范开发成本高代码的阅读和书写比较困难模块定义方式的语义不顺畅CMD规范与AMD规范很相似用于浏览器编程依赖就近延迟执行可以很容易在Node.js中运行ES6在语言标准的层面上实现了模块功能而且实现的相当简单完全可以取代CommonJS和AMD规范成为浏览器和服务器通用的模块解决方案UMD为同时满足CommonJS、AMD、CMD标准的实现 好啦~JS模块化规范就说完啦欢迎友友们留言讨论哟
