现代模块机制:
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 }; })();
首先是匿名函数立即运行,返回一个对象,对象包含2个方法,一个定义模块,一个get获取模块
定义模块: name :定义的模块名,字符串 deps:依赖的列表 impl 模块的实现
apply将deps导入到impl 并返回模块对象存入 modules[name]实际例子: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: hippo foo.awesome(); // LET ME INTRODUCE: HIPPO
未来模块机制
通过模块系统进行加载时,ES6 会将文件当作独立的模块来处理。每个模块都可以导入其他模块或特定的API 成员,同样也可以导出自己的API 成员。
基于函数的API:并不是一个能被稳定识别的模式(编译器无法识别),它们的API 语义只有在运行时才会被考虑进来。因此可以在运行时修改一个模块
的APIES6 模块API :更加稳定,编译期就会检查模块是否存在,ES6没有行内格式,一个文件一个模块 ,引擎有默认的模块加载器,可以导入模块的时候
异步的加载模块文件
bar.js function hello(who) { return "Let me introduce: " + who; } export hello; foo.js // 仅从"bar" 模块导入hello() import hello from "bar"; var hungry = "hippo"; function awesome() { console.log( hello( hungry ).toUpperCase() ); } export awesome; baz.js module foo from "foo"; module bar from "bar"; console.log( bar.hello( "rhino" ) ); // Let me introduce: rhino foo.awesome(); // LET ME INTRODUCE: HIPPOmodule 整个导入到当前作用域
import 是导入一个或多个API
模块文件中的内容会被当作好像包含在作用域闭包中一样来处理,就和前面介绍的函数闭包模块一样。
模块有两个主要特征:(1)为创建内部作用域而调用了一个包装函数;(2)包装函数的返回值必须至少包括一个对内部函数的引用,这样就会创建涵盖整个包装函数内部作用域的闭包
《你不知道的javascript》