es6 --- 模块

function foo(){var something = 'cool';var another = [1, 2, 3];function doSomething() {console.log( something );}function doAnother() {console.log( another.join( " ! " ) );}
}
// 是一个不明显的闭包,doSomething()和doAnother()保持了foo的内部作用域

接下来考虑以下的代码:

function CoolModule() {var something = "cool";var another = [1, 2, 3];function doSomething() {console.log( something );}function doAnother() {console.log( another.join( " ! " ) );}return {doSomething: doSomething,doAnother: doAnother};
}var foo = CoolModule();foo.doSomething(); // "cool"
foo.doAnthor(); // 1!2!3
// 上述通过 return 将doSomething和doAnother暴露出来,在js中被称为模块.

从上面可以抽象出模块模式所必须的两个必要条件:
1.必须有外部的封闭函数,该函数必须至少被调用一次(每次调用都会创建一个新的模块实例)
2.封闭函数必须返回至少一个内部函数,这样内部函数才能在私有作用域中形成闭包,并且可以访问或者修改私有的状态.

下面看一个单例模式:

var foo = (function CoolModule() {var something = 'cool';var another = [1, 2, 3,];function doSomething() {console.log( something );}function doAnother() {console.log( another.join( " ! " ) );}return {doSomething: doSomething,doAnother: doAnother}
})();
foo.doSomething(); // cool
foo.doAnother(); // 1!2!3// 注:上述的CoolModule在执行一次后便释放掉了.

接受参数的模块:

functioin CoolModule(id) {function identify() {console.log( id );}return {identify: identify}
}var foo1 = CoolModule( "foo 1" );
var foo2 = CoolModule( "foo 2" );
foo1.identify(); // "foo 1"
foo2.identify(); // "foo 2"// 没啥好说的...

现代的模块机制

var MyModules = (function Manager() {var modules = {};function define(name, deps, impl) {for (var i=0; i < deps.length; i++) {deps[i] = modules[deps[i]];}modules[name] = impl.apply( impl, deps );}function get(name) {return modules[name];}return {define: define,get: get};
})();// 上述定义了一个模块依赖加载器/管理器,下面使用上述的函数来定义模块
MyModules.define( " bar" , [], function() {function hello(who){return "Let me introduce: " + who;}return {hello: hello}
});
MyModules.define( " foo ", ["bar"], function(bar) {var hungry = "hippo";function awesome() {console.log( bar.hello( hungry ).toUpperCase() );}return {awesome: awesome};
});
var bar = MyModules.get( "bar" );
var foo = MyModules.get( "foo" );console.log(bar.hello( "hippo" )
);  // Let me introduce: hippofoo.awesome(); // LET ME INTRODUCE: HIPPO

ES6中的模块

// bar.js
function hello(who) {return "Let me introduce: " + who;
}
export hello;// foo.js
import hello from "bar";var hungry = "hippo";function awesome() {console.log(hello( hungry ).toUpperCase());
}
export awesome;// baz.js
import foo from "foo";  // 书上是module foo from "foo"
import bar from "bar";console.log(bar.hellow( "rhino" )
);    // Let me introduce: rhinofoo.awesome();  // LET ME INTRODUCE: HIPPO

ES6模块和CommonJS模块的差异:
https://blog.csdn.net/piano9425/article/details/89946163

参考《你不知道的JavaScript》(上卷)P53~P56

es6 --- 模块相关推荐

ES6 模块加载export 、import、export default 、import() 语法与区别，笔记总结
ES6模块加载export .import.export default .import() 语法与区别在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种. ...
es6 混合commjs_详谈commonjs模块与es6模块的区别
到目前为止,已经实习了3个月的时间了.最近在面试,在面试题里面有题目涉及到模块循环加载的知识.趁着这个机会,将commonjs模块与es6模块之间一些重要的的区别做个总结.语法上有什么区别就不具体说了 ...
javascript --- ES6模块与CommonJS模块的差异
CommonJS模块是运行时加载,ES6模块是编译时输出接口是因为CommonJS加载的是一个对象(module.exports属性),该对象只有在脚本运行结束时才会生成.而ES6模块不是对象,它的 ...
ES6模块与commonJS模块的差异
参考: 前端模块化 ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,旨在成为浏览器和服务器通用的模块解决方案. 其模块功能主要由两个命令构成:export和import.export命 ...
ES6模块的import和export用法总结
ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载 ...
ES6模块之export和import详解
ES6模块之export和import详解 ES6中的模块即使一个包含JS代码的文件,在这个模块中所有的变量都是对其他模块不可见的,除非我们导出它.ES6的模块系统大致分为导出(export)和导入( ...
es6 循环加载ES6模块
循环加载ES6模块 "循环加载"(circular dependency)指的是,a脚本的执行依赖b脚本,而b脚本的执行又依赖a脚本. // a.js var b = requir ...
es6 模块的整体加载
模块的整体加载除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面. 下面是一个circle.js文件,它输出两个方法area和circumfere ...
es6 模块的语法严格模式
严格模式 ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict";. 严格模式主要有以下限制. 变量必须声明后再使用函数的参数不能有同名属性,否则报错 ...

es6 --- 模块

es6 --- 模块相关推荐

最新文章

热门文章