RequireJS学习笔记

你是否正在寻找关于requirejs的内容？让我把最吸引人的东西奉献给你：

前言

进入移动前端是很不错的选择，这块也是我希望的道路，但是不熟悉啊。。。

现在项目用的是require+backbone，整个框架被封装了一次，今天看了代码搞不清楚，觉得应该先从源头抓起，所以再看看require了。

上午是到处搜集的资料，下午我们来看原生的API吧：

PS：我英语很烂，各位将就着看吧，看到红色就说明老夫拿不准......

加载javascript文件

RequireJS采用不同的方法来加载脚本，他鼓励模块化编程，使用requirejs编程不但可以模块化编程而且他依旧可以运行的很快。

requirejs鼓励使用模块ID，而不是像原来那样使用script标签使用url引入。

requirejs加载代码时候，其相对路径为baseUrl，baseUrl通常被设置为data-main指定文件的目录：

BaseUrl也可以通过设置进行手动配置（通过RequireJS 的 config进行配置），若是没在config中进行配置，并且script标签没有指定data-main的话，那么默认目录为引入requirejs的HTML页面目录。

默认情况下不要在模块id上加上.js后缀，requirejs会在运行时自己加上。

通过设置config中的paths（对象字面量）属性，你能设置一组脚本的位置，如此便能减少我们的js总体配置。

这里我们来举个例子，且看我们的文档目录：

我们index代码：

app.js为入口函数，其代码为：

requirejs.config({ //默认情况下模块所在目录为js/lib baseUrl: 'js/lib', //当模块id前缀为app时，他便由js/app加载模块文件
//这里设置的路径是相对与baseUrl的，不要包含.js paths: { app: '../app' } }); // 开始逻辑. requirejs(['jquery', 'canvas', 'app/sub'], function ($, canvas, sub) { });

各位请注意，这里的jquery并没有在他们的文件名上加上其版本号，这里推荐加上。

PS：原因我就不说了，说也不一定说得清楚......

理想情况下我们加载的脚步都会通过define()函数定义，但是我们有些脚步会依赖与当前版本不同的版本，你能使用shim配置，来表达其依赖。

PS：这里有点模糊，我们再来看看snandy道友是怎么说的：

shim参数解决了使用非AMD方式定义的模块（如jQuery插件）及其载入顺序。 使用shim参数来取代1.0版本的order插件。其实在1.0版本中就曾经有人开发过use和wrap插件来解决此类问题。 考虑到很多开发者有此类需求（比如某些JS模块是较早时候其他人开发的，非AMD方式）此次2.0版本直接将其内置其中。

这里是一个使用jQuery插件形式配置的参数，我们知道jQuery插件本质是将命名空间挂在全局jQuery或jQuery.fn上，而非使用define定义的模块。

jQuery插件皆依赖于jQuery，即在require插件时得保证jQuery先下载：

1 require.config({ 2 shim: { 3 'jquery-slide': ['jquery'] 4 } 5 }); 6 require(['jquery-slide']);

这里便会保证先加载jquery再加载插件。

PS：对照着园友的解释看看吧，应该会清晰一点，这块后面还会有我们等下再看。

模块定义

requirejs定义模块与传统一个很大的不同是他可以保证其定义的变量处于某个范围内，从而避免了全局命名污染。

他能明确的罗列出其依赖，并且在那些依赖上找到处理办法，而不是必须对那些依赖指定全局变量。

requirejs的模块扩展不需要全局变量与其他模块产生依赖（理解的狗屁不通啊）

PS：文字读不懂，来一个简单的键值对例子吧：

define({ color: "black", size: "unisize" });

若是这个模块没有任何依赖，并且他仅仅是一组键值对，那么就传递一个对象就好。

定义函数

//my/shirt.js now does setup work //before returning its module definition. define(function () { { color: "black", size: "unisize" } });

若是模块没有依赖，但是需要用一个函数做一些初始化工作，然后定义自己通过define的匿名函数。

有依赖的模块

//my/shirt.js now has some dependencies, a cart and inventory //module in the same directory as shirt.js define(["./cart", "./inventory"], function(cart, inventory) { { color: "blue", size: "large", addToCart: function() { inventory.decrement(this); cart.add(this); } } } );

若是模块具有依赖关系，第一个参数应该是一个数组，其项目为依赖名字，第二个参数是匿名函数

匿名函数在依赖项加载结束后会立即加载，函数会返回一个对象用以定义这个模块。

前面的依赖项将以参数的形式传递给函数，顺序与之前一致。

再看我们的例子，一个球衣模块被创建了（我们返回的是一个衣服模块）

PS：这里文件命名为shirt.js，所以返回的就是衣服模块了

最后我们得到的结构式这样的：

参数调用时的参数与前面依赖项一一对应，

定义函数模块

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shenmilingyu/article-1777-1.html