JavaScript 模块简史

你是否是 JavaScript 新手?并且对模块,模块加载器和模块打包器感到困惑吗?或者你已经编写了一段时间的 JavaScript ,但是没法掌握模块的一些术语?你是否听过 CommonJS、AMD、Browserify、SystemJS、Webpack、JSPM 等等术语,但是不理解我们为什么需要它们?

我会试着解释他们是什么,他们试图解决什么问题,以及他们如何解决这个问题。 继续阅读

2017年值得关注的3个JavaScript库

唷,2016结束了! 这一年对于世界和JavaScript领域来说都是疯狂的一年。 无数新的令人印象深刻的库和框架涌现,你可能不需要 JavaScript 展示了一些模式,提出了使用 JavaScript 的一些问题,和一张Nolan Lawson谈前端的幻灯片引起了业内牛人的一些骚动和响应,像 Jeremy Keith 和 Christian Heilmann ,NoLan总把这些讨论结成了一篇文章。我开始认为用”疯狂”用来描述这一年有点儿低调了,2016是发神经了。

这一年也包括JavaScript疲劳。许多开发人员正在经历JavaScript的生态系统疲劳,因为需要大量的工具和配置来设置一个“现代化”的JavaScript项目。关于这一点,许多开发人员分享了他们的想法,更多”JavaScript很累很累”类似的文章出现。

为了帮助你和我能在晚上睡个安稳觉,我整理了一个前端开发列表,包含的3个有前途的通用库/框架。

Vue.js

如果到目前为止你还没有关注到Vue.js,那现在你要注意了。Vue.js是一个轻量级的JavaScript框架。 继续阅读

ECMAScript 6 Modules(模块)系统及语法详解

在2014年7月底,TC39 [1]又召开了一次会议,在此期间ECMAScript 6(ES6)模块语法的最后细节被最终确定。这篇博客文章概述了完整的 ES6 模块系统。 继续阅读

兼容多种模块规范(AMD,CMD,Node)的代码

在JavaScript模块化开发中,为了让同一个模块可以运行在前后端,以及兼容多种模块规范(AMD,CMD,Node),类库开发者需要将类库代码包装在一个闭包内。

1b4f2d19-ca78-4189-a20c-236e786a1659

很早写的有兴趣可以看看,如何封装Node.js和前端通用的模块:http://www.css88.com/archives/4478

AMD规范

AMD,即“异步模块定义”。主要实现比如: RequireJS。

其模块引用方式如下:

define(id?,dependencies?,factory);

其中,id及依赖是可选的。其与CommonJS方式相似的地方在于factory的内容就是实际代码的内容,下面是一个简单的例子:

define(function(){
  var exports = {};
  exports.say = function(){
    alert('hello');
  };
  return exports;
});

CMD规范

CMD规范,与AMD类似,区别主要在于定义模块和依赖引入的地方。主要实现比如: SeaJS。

主要区别是:AMD需要在声明模块时指定所有的依赖,通过形参传递依赖到模块内容中。 继续阅读

jQuery 对AMD的支持(Require.js中如何使用jQuery)

AMD 模块

AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案。

AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载。它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合。目前它已经被很多项目所接纳,包括jQuery(1.7)。

RequireJS

RequireJS是一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范

jQuery 对AMD的支持

jQuery 1.7 开始支持将 jQuery 注册为一个AMD异步模块。有很多兼容的脚本加载器(包括 RequireJS 和 curl)都可以用一个异步模块格式来加载模块,这也就表示不需要太多 hack 就能让一切运行起来。可以看看jQuery 1.7 中的源码:

// Expose jQuery as an AMD module, but only for AMD loaders that
// understand the issues with loading multiple versions of jQuery
// in a page that all might call define(). The loader will indicate
// they have special allowances for multiple jQuery versions by
// specifying define.amd.jQuery = true. Register as a named module,
// since jQuery can be concatenated with other files that may use define,
// but not use a proper concatenation script that understands anonymous
// AMD modules. A named AMD is safest and most robust way to register.
// Lowercase jquery is used because AMD module names are derived from
// file names, and jQuery is normally delivered in a lowercase file name.
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
	define( "jquery", [], function () { return jQuery; } );
}

其工作的原理是,所使用的脚本加载器通过指定一个属性,即 define.amd.jQuery 为 true,来标明自己可以支持多个 jQuery 版本。如果有兴趣了解特定的实现细节的话,我们可以将 jQuery 注册为一个具名模块,因为可能会有这样的风险,即它可能被与其它使用了 AMD 的 define() 方法的文件拼合在一起,而没有使用一个合适的、理解匿名 AMD 模块定义的拼合脚本。 继续阅读