RequireJS

RequireJS入门（一）

RequireJS由James Burke创建，他也是AMD规范的创始人。

RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件，以及不用通过script标签顺序去管理依赖关系。

当然也不会有阻塞（blocking）的情况发生。好，以一个简单示例开始。

新建一个目录，结构如下

目录r1下有index.html、jquery-1.7.2.js、main.js、require.js。require.js和jquery-1.7.2.js去各自官网下载即可。

index.html如下

<!doctype html>
<html>
    <head>
        <title>requirejs入门（一）</title>
        <meta charset="utf-8">
        <script data-main="main" src="require.js"></script>
    </head>
    <body>
     
    </body>
</html>

使用requirejs很简单，只需要在head中通过script标签引入它（实际上除了require.js，其它文件模块都不再使用script标签引入）。

细心的同学会发现script标签上了多了一个自定义属性：data-main="main"，等号右边的main指的main.js。当然可以使用任意的名称。这个main指主模块或入口模块，好比c或java的主函数main。

main.js如下

require.config({
    paths: {
        jquery: 'jquery-1.7.2'
    }
});
 
require(['jquery'], function($) {
    alert($().jquery);
});

main.js中就两个函数调用require.config和require。

require.config用来配置一些参数，它将影响到requirejs库的一些行为。

require.config的参数是一个JS对象，常用的配置有baseUrl，paths等。

这里配置了paths参数，使用模块名“jquery”，其实际文件路径jquery-1.7.2.js（后缀.js可以省略）。

我们知道jQuery从1.7后开始支持AMD规范，即如果jQuery作为一个AMD模块运行时，它的模块名是“jquery”。注意“jquery”是固定的，不能写“jQuery”或其它。

注：如果文件名“jquery-1.7.2.js”改为“jquery.js”就不必配置paths参数了。

jQuery中的支持AMD代码如下

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
    define( "jquery", [], function () { return jQuery; } );
}

我们知道jQuery最终向外暴露的是全局的jQuery和 $。如下

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

如果将jQuery应用在模块化开发时，其实可以不使用全局的，即可以不暴露出来。需要用到jQuery时使用require函数即可，

这里require函数的第一个参数是数组，数组中存放的是模块名（字符串类型），数组中的模块与回调函数的参数一一对应。这里的例子则只有一个模块“jquery”。

把目录r1放到apache或其它web服务器上，访问index.html。

网络请求如下

我们看到除了require.js外main.js和jquery-1.7.2.js也请求下来了。而它们正是通过requirejs请求的。

页面上会弹出jQuery的版本

这是一个很简单的示例，使用requirejs动态加载jquery。使用到了以下知识点

1、data-main属性

2、require.config方法

3、require函数

r1.zip

Modular JS

摘要: 软件复用的好处有很多一、提高工作效率这条自不必说，比如在项目A中你写一个Ajax模块，A完工后启动了项目B，在B中就可以直接复用项目A的模块了。一个可复用的软件可以为将来节省费用，被服用的频率越高，组件的初始开发成本就越低。二、提高软件质量可复用的软件总比不能复用的有更多的质量保障。因为可复用的软件在不断的复用过程中把一些bug，缺陷都很快的排除了。因此可复用的软件一定是利于系统的可维护性的。按抽象程度的高低，可以划分为如下的复用级别：代码的剪贴复制利用编辑器（IDE）可以很方便的做到减少抄写代码的人力成本。这可能是入门级程序员习惯的，自发的复用软件的形式。把一个写好的工具函数自发的拷贝到另一阅读全文

posted @ 2013-07-30 06:53 snandy 阅读(723) | 评论 (0) 编辑

软件的模块化开发

摘要: 什么是模块化模块化这个词最早出现在研究工程设计中的《Design Rules》，这本探路性质的书中。其后模块化原则还只是作为计算机科学的理论，尚不是工程实践。此时硬件的模块化一直是工程技术的基石之一。如标准螺纹、汽车组件、计算机硬件组件等。软件模块化的原则也是随着软件的复杂性诞生的。从开始的机器码、子程序划分、库、框架、再到分布在成千上万公里的互联网上主机上的程序库。模块化是解决软件复杂性的重要方法之一。模块化以分治法为依据，但是否意味着我们把软件无限制的细分下去。事实上当分割过细，模块总数增多，每个模块的成本确实减少了，但模块接口所需代价随之增加。要确保模块的合理分割则须了解信息隐藏，内聚度阅读全文

posted @ 2013-07-29 08:28 snandy 阅读(1905) | 评论 (0) 编辑

基于CommonJS Modules/2.0的实现：BravoJS

摘要: 今天看见一个基于CommonJS Modules/2.0的实现：BravoJS。Modules/2.0目前还不是CommonJS的当前规范（Current Specifications），甚至连建议或开发中的标准（Proposals and standards in development）也都不是。Modules/2.0的模块写法大概如下1，定义模块用module标识符，它有一个方法declare2，declare接受一个dependency(可选)和factory3，dependency为数组类型，数组值为字符串或js对象4，factory为函数类型，factory有三个参数require阅读全文

posted @ 2012-06-10 14:40 snandy 阅读(2126) | 评论 (1) 编辑

RequireJS和Backbone的集成

摘要: 有朋友留言RequireJS如何与Backbone集合使用。这两个轻量级的库合起来使用确实能够方便的构建大型应用程序。RequireJS填补了前端模块化开发的空缺，Backbone采用MVC的分层结构很好的将程序各个部分解耦。Backbone目前不支持AMD（曾经支持过），那么它只能作为普通的JS文件使用。它全局的标示符是Backbone，它还依赖于underscore，underscore的全局标示是下划线（_）。因此，当我们使用AMD方式写的模块中使用Backbone时，得确保underscore和Backbone已经载入了。RequireJS 2.0后提供了一个shim参数很好的解决了该阅读全文

posted @ 2012-06-08 15:26 snandy 阅读(5580) | 评论 (6) 编辑

RequireJS进阶（三）

摘要: 进阶的前面两篇讲述了r.js如何通过命令行把所有的模块压缩为一个js文件或把所有的css压缩为一个css文件。其中包括一些压缩配置参数的使用。但以上两种方式有几个问题1、通过命令手动配置压缩选项显得很呆板2、都仅合并为一个文件对于最后只生成一个文件的库来说，这种方式并无不妥。比如jQuery，它的工程中小文件有20多个，打包后只有一个jquery-1.x.x.js。对于多数实际应用项目来说，可能打包后需要生成多个js文件。有些是页面打开时就要用到的，有些是用户点击或输入时按需加载的。r.js有另外一种方式来合并压缩，即通过一个配置文件（如build.js）。配置文件内部采用前端工程师非常熟悉J阅读全文

posted @ 2012-06-08 11:56 snandy 阅读(3542) | 评论 (1) 编辑

RequireJS进阶（二）

摘要: 这一篇来认识下打包工具的paths参数，在入门一中就介绍了require.config方法的paths参数。用来配置jquery模块的文件名（jQuery作为AMD模块时id为“jquery”，但文件名可通过paths配置可以不必是“jquery.js”，而是带有版本的如“jquery-1.7.2.js”）。在入门一中，jquery-1.7.2.js和main.js都在一个域中，即把jquery-1.7.2.js下载到本地了。但有时可能一些JS资源不在同一个域。比如直接使用Google CDN上的jquery 1.7.2版本。而这时应该如何使用打包工具r.js呢？r.js自然不会去载入非本地资阅读全文

posted @ 2012-06-07 07:48 snandy 阅读(4831) | 评论 (3) 编辑

RequireJS进阶（一）

摘要: 为了应对日益复杂，大规模的JavaScript开发。我们化整为零，化繁为简。将复杂的逻辑划分一个个小单元，各个击破。这时一个项目可能会有几十个甚至上百个JS文件，每个文件为一个模块单元。如果上线时都是这些小文件，那将对性能造成一定影响。RequireJS提供了一个打包压缩工具r.js来对模块进行合并压缩。r.js非常强大，不但可以压缩js，css，甚至可以对整个项目进行打包。r.js的压缩工具使用UglifyJS或Closure Compiler。默认使用UglifyJS（jQuery也是使用它压缩）。此外r.js需要node.js环境，当然它也可以运行在Java环境中如Rhino。这篇以一个阅读全文

posted @ 2012-06-06 08:15 snandy 阅读(5967) | 评论 (4) 编辑

RequireJS 2.0 正式发布

摘要: 就在前天晚上RequireJS发布了一个大版本，直接从version1.0.8升级到了2.0。随后的几小时James Burke又迅速的将版本调整为2.0.1，当然其配套的打包压缩工具r.js也同时升级到了2.0.1。此次变化较大，代码也进行了重构，层次更清晰可读。功能上主要变化如下：1，延迟模块的执行。这是一个很大变化，以前模块加载后factory立马执行。性能上肯定有一些损耗。2.0修改实现，再没人诟病AMD的模块是立即执行的。现在也可以等到require的时候才执行。2，config增加了shim，map，module，enforceDefine。shim参数解决了使用非AMD方式定义的阅读全文

posted @ 2012-06-04 07:58 snandy 阅读(9496) | 评论 (9) 编辑

RequireJS入门（三）

摘要: 这篇来写一个具有依赖的事件模块event。event提供三个方法bind、unbind、trigger来管理DOM元素事件。event依赖于cache模块，cache模块类似于jQuery的$.data方法。提供了set、get、remove等方法用来管理存放在DOM元素上的数据。示例实现功能：为页面上所有的段落P元素添加一个点击事件，响应函数会弹出P元素的innerHTML。创建的目录如下为了获取元素，用到了上一篇写的selector.js。不在贴其代码。index.html 如下 requirejs入门（三） p1p2p3p4p5 cache.js 如下defi...阅读全文

posted @ 2012-05-24 07:30 snandy 阅读(6095) | 评论 (10) 编辑

RequireJS入门（二）

摘要: 上一篇是把整个jQuery库作为一个模块。这篇来写一个自己的模块：选择器。为演示方便这里仅实现常用的三种选择器id，className，attribute。RequireJS使用define来定义模块。新建目录结构如下这次新建了一个子目录js，把main.js和selctor.js放入其中，require.js仍然和index.html在同一级目录。HTML 如下 requirejs入门（二）这次把script标签放到了div的后面，因为要用选择器去获取页面dom元素，而这要等到dom ready后。因为把main.js放到js目录中，这里data-main...阅读全文

posted @ 2012-05-23 09:41 snandy 阅读(7873) | 评论 (4) 编辑

RequireJS入门（一）

摘要: RequireJS由James Burke创建，他也是AMD规范的创始人。RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件，以及不用通过script标签顺序去管理依赖关系。当然也不会有阻塞（blocking）的情况发生。好，以一个简单示例开始。新建一个目录，结构如下目录r1下有index.html、jquery-1.7.2.js、main.js、require.js。require.js和jquery-1.7.2.js去各自官网下载即可。index.html如下 requirejs入门（一）使...阅读全文

posted @ 2012-05-22 18:17 snandy 阅读(22332) | 评论 (10) 编辑

JavaScript模块化开发库之SeaJS

摘要: SeaJS由国内的牛人lifesinger开发。目前版本是1.1.1，源码不到1500行，压缩后才4k，质量极高。这篇会讲述SeaJS的一些基本用法，不会面面俱到，但会就个人的理解讲述官方文档没有提到的一些细节。一、SeaJS的全局接口SeaJS向全局公开了两个标识符： seajs 和 define。如果你的项目中已经用了标识符seajs，又不想改。这时SeaJS可以让出全局的seajs。如var boot = seajs.noConflict(); 这时boot就相当于先前的seajs。如果你的项目中连标识符define也用到了，也不想改。SeaJS是很宽容的，它的define也可以让出。.阅读全文

posted @ 2012-03-30 08:03 snandy 阅读(10432) | 评论 (10) 编辑

UMD和ECMAScript模块

摘要: 一、UMD：AMD 和CommonJS的糅合前面花了很长的篇幅介绍了两大类模块规范，CommonJS(Modules/Modules/Wrappings)及AMD。我们知道Modules/Wrappings是出于对Node.js模块格式的偏好而包装下使其在浏览器中得以实现。而Modules/Wrappings的格式通过某些工具（如r.js）也能运行在Node.js中。事实上，这两种格式同时有效且都被广泛使用。AMD以浏览器为第一（browser-first）的原则发展，选择异步加载模块。它的模块支持对象（objects）、函数（functions）、构造器（constructors）、字符串（阅读全文

posted @ 2012-03-19 20:38 snandy 阅读(1365) | 评论 (1) 编辑

AMD：浏览器中的模块规范

摘要: 前面提到，为实现与Node.js相同方式的模块写法，大牛们做了很多努力。但浏览器环境不同于服务器端，它的模块有一个HTTP请求过程(而Node.js的模块文件就在本地)，这个请求过程多数使用script tag，script 默认的异步性导致很难实现与Node.js一模一样的模块格式。Modules/Wrappings使得实现变为现实。虽然和Node.js的模块写法不完全一致，但也有很多相似之处，使得熟悉Node.js的程序员有一些亲切感。但Node.js终究是服务器端的JavaScript，没有必要把这些条条框框放到浏览器JavaScript环境中。这时AMD诞生了，它的全称为异步模块定义。阅读全文

posted @ 2012-03-12 07:59 snandy 阅读(6124) | 评论 (5) 编辑

Node.js模块风格在浏览器中的尝试

摘要: 前面提到Node.js有一套简洁的格式写模块，它遵循的就是 Moudles。浏览器里的JavaScript呢？尽管语言本身暂不支持模块（ES6打算支持），但可以用现有的API包装一个写法出来。毫无疑问，首先想到的是Node.js的Modules格式，它是最好的效仿对象。因为前后端有一个统一的方式写JS模块岂不乐哉！但一开始就碰到一些难题1，服务器端JS模块文件就在本地，浏览器端则需要通过网络请求。2，服务器端可以很容易的实现同步或异步请求模块，浏览器端则问题多多。如下var event = require("event");event.bind(el, 'clic阅读全文

posted @ 2012-03-09 07:30 snandy 阅读(2755) | 评论 (3) 编辑

JavaScript中模块“写法”

摘要: 在JavaScript模块到底是什么，能用代码具体展现一下吗？其实上一篇已经写了一段事件模块代码event = function() { // do more return { bind: function() {}, unbind: function() {}, trigger: function() {} }; }();这能代表“模块”吗？这就是一个JS对象啊，以为有多么深奥。是的，JavaScript中模块多数时候被实现为一个对象。这么看来，多数时候我们都写过“模块”（但没有在整个项目中应用模块化思想）。或许每个人写模块的方式（风格）还不同。比如上面的事件模块是一个匿名函数执行，匿...阅读全文

posted @ 2012-03-08 07:42 snandy 阅读(3087) | 评论 (0) 编辑

拥抱模块化的JavaScript

摘要: 我们再一次被计算机的名词，概念笼罩。backbone、emberjs、spinejs、batmanjs等MVC框架侵袭而来。CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs 等模块化的JavaScript概念及库扑面而来。模块化JavaScript的概念尤为突出，似乎有赶超07年Ajax风潮之趋势。一、写函数（过程式）2005年以前，JavaScript没人重视，只作为表单验证等少量应用。那时一个网页上写不了几行JS代码，1000行算很复杂了。这时组织代码的方式是过程时，几十行的代码甚至连一个函数都不用写。稍多的需要提取抽象出一个函数，更复杂一些则需要更多函阅读全文

posted @ 2012-03-07 07:27 snandy 阅读(4929) | 评论 (3) 编辑

分类: Modular JS

RequireJS

RequireJS入门（一）

Snandy

Modular JS

软件复用的几种方式

软件的模块化开发

基于CommonJS Modules/2.0的实现：BravoJS

RequireJS和Backbone的集成

RequireJS进阶（三）

RequireJS进阶（二）

RequireJS进阶（一）

RequireJS 2.0 正式发布

RequireJS入门（三）

RequireJS入门（二）

RequireJS入门（一）

JavaScript模块化开发库之SeaJS

UMD和ECMAScript模块

AMD：浏览器中的模块规范

Node.js模块风格在浏览器中的尝试

JavaScript中模块“写法”

拥抱模块化的JavaScript