RequireJS使用注意地方

使用RequireJS做异步模块加载,有几点值得注意的地方:

1.模块定义两种写法

1. 存在依赖的函数式定义

如果模块存在依赖:则第一个参数是依赖的名称数组;第二个参数是函数,在模块的所有依赖加载完毕后,该函数会被调用来定义该模块,因此该模块应该返回一个定义了本模块的object。依赖关系会以参数的形式注入到该函数上,参数列表与依赖名称列表一一对应。

define([‘a‘], function(aJ) {
     var hello = function(){
          aJ.hello(‘i am c.js‘);
     }

    return {
          hello : hello
     }
});

PS: 对模块的返回值类型并没有强制为一定是个object,任何函数的返回值都是允许的。

2. CommonJS模块格式定义

require : 用来引入依赖其他模块方法。

exports : 导出模块变量或方法的对象。

module :包含该模块的信息。

require.config({
    baseUrl: "",
    config: {
        ‘b‘: {
            size: ‘large‘
        }
    },
     paths: {
          a : ‘base/a‘,
          b : ‘base/b‘,
          c : ‘base/c‘
     }
});
define(function(require, exports, module) {
     var aJ = require("a");

     var hello = function(){
          aJ.hello(‘i am b.js‘);
     }
     var hello2 = function(){
          aJ.hello(‘i am b.js22‘);
     }
     exports.hello = hello;
     console.log("b.js : exports",  exports);
     console.log("b.js : module", module);
     console.log("b.js : config", module.config());
     //不能一起用,return会覆盖调前面的exports
     /*return {
          hello : hello2
     }*/
});

PS:return 对象和exports不能一起用,return会覆盖调前面的exports。

下面是调用后打印的信息:

exports:可以看出exports是module的一个属性。

module :里面包括了该模块的别名、uri、导出对象、config信息方法。

config :我们常常需要将配置信息传给一个模块。这些配置往往是application级别的信息,需要一个手段将它们向下传递给模块。

在RequireJS中,基于requirejs.config()的config配置项来实现。

2. 警惕单例变量

警惕单例里变量,因为RequireJS在require一次后,之后的require都是使用之前的缓存。所以当模块里面定义了一个变量后,只要在此require改变后,其他require也是保持一致的。

define(function() {

     var index = 0;
     var hello = function(msg){
          console.log(msg);
     }

     var addIndex = function(){
          index++;
     }
     var getIndex = function(){
          return index;
     }
     return {
          hello : hello,
          addIndex : addIndex,
          getIndex : getIndex
     }
});

调用:

require([‘a‘,], function (A) {
     require([‘a‘], function (A) {
          console.log(A.getIndex());
          A.addIndex();
          A.addIndex();
     });
     require([‘a‘], function (A) {
          console.log(A.getIndex());
     });
});

上面分别打印的是:

0
2

这例子可以看出这几个require都是共用一个index变量。

3. 清除缓存

因为RequireJS有缓存的功能,但是在开发的时候我们不希望它缓存,就可以在require.config设置urlArgs。

urlArgs:RequireJS获取资源时附加在URL后面的额外的query参数。

示例:

urlArgs: "bust=" +  (new Date()).getTime()

在开发中这很有用,但记得在部署到生成环境之前移除它。

4. 从其他包中加载模块

RequireJS支持从CommonJS包结构中加载模块,但需要一些额外的配置。

package config可为特定的包指定下述属性:

1. name : 包名(用于模块名/前缀映射)。

2. location : 磁盘上的位置。位置是相对于配置中的baseUrl值,除非它们包含协议或以“/”开头。

3. main : 当以“包名”发起require调用后,所应用的一个包内的模块。

默认为“main”,除非在此处做了另外设定。

该值是相对于包目录的。

例子:

main.js

require.config({
     baseUrl: "",
     packages: [{
          name: "student",
          location: "package-stu"
     },{
          name: "teacher",
          location: "package-tea"
     }],
     urlArgs: "bust=" +  (new Date()).getTime()
});
require(["student/store", "teacher/tea"], function (Sto, Tea) {
     Sto.hello();
     Tea.hello();
});

tea.js:

define(function(require, exports, module) {
     exports.hello = function(){
          console.log(‘i am a teacher.‘);
     }
});

stu.js:

define(function(require, exports, module) {
     exports.name = ‘海角‘;
});

store.js:

define(function(require, exports, module) {
     var stu = require("student/stu");
     exports.hello = function(){
          console.log(‘i am ‘ + stu.name);
     }
});

这种从其他包加载模块的方式,我感觉有两个怪异地方(我不是很明白,例子虽然调通):

1. 其他包里面的模块引用其他模块的写法,使用者反而影响模块的写法?

2. 其他包里面的main.js好像没有用了,没内容都没问题。

参考文献

1. RequireJS 中文网

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/5495177.html

时间: 2024-11-09 05:15:31

RequireJS使用注意地方的相关文章

requireJS

1.用于ADM(基于模块的异步加载JavaScript代码的机制)js模块开发 2.下载requireJS 3.好处: 1)有效防止命名冲突(js多时可能很多全局变量容易重复) 2)声明不同的js文件之间的依赖 3)模块化的开发 4.常用方法: requirejs.config:为模块指定别名 requirejs:将写好的模块引入并编写主代码 define:编写模块,在相应地方来引用 5.例子: 1)引入模块入口data-main是入口;<script data-main="js/main

浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)——requirejs + angular + angular-route>探讨了angular+requirejs的一个简单架构,这一篇继续来看看backbone如何跟requirejs结合. 相同地,项目架构好与坏不是说用了多少牛逼的框架,而是怎么合理利用框架,让项目开发更流畅,代码更容易管理.那么带着这个目的,我们来继续探讨backbone. 首

快速理解RequireJs

RequireJs已经流行很久了,我们在项目中也打算使用它.它提供了以下功能: 声明不同js文件之间的依赖 可以按需.并行.延时载入js库 可以让我们的代码以模块化的方式组织 初看起来并不复杂. 在html中引入requirejs 在HTML中,添加这样的 <script> 标签: <script src="/path/to/require.js" data-main="/path/to/app/config.js"></script&

JS模块化工具requirejs教程(二):基本知识

前一篇:JS模块化工具requirejs教程(一):初识requirejs我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等 基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块 require 加载依赖模块,并执行加载完后的回调函数 前一篇中的a.js:

模块化利器: 一篇文章掌握RequireJS常用知识

通过本文,你可以对模块化开发和AMD规范有一个较直观的认识,并详细地学习RequireJS这个模块化开发工具的常见用法.本文采取循序渐进的方式,从理论到实践,从RequireJS官方API文档中,总结出在使用RequireJS过程中最常用的一些用法,并对文档中不够清晰具体的内容,加以例证和分析,希望本文的内容对你的能力提升有实质性的帮助. 1. 模块化 相信每个前端开发人员在刚开始接触js编程时,都写过类似下面这样风格的代码: <script type="text/javascript&q

基于requirejs+bluebird,50行代码实现轻巧实用的前端CMD加载器

首先是github地址,可以用git克隆命令也可以直接在git页面下载 https://github.com/kazetotori/js-requireAsync 下载下来后目录结构是这样的 -package.json -index.js -node_modules --bluebird --jquery --requirejs requireAsync函数 requireAsync函数是index.js里定义的一个全局函数,该函数接受无限多个字符串参数,参数为需要加载的模块名或模块路径,路径不

gulp解决RequireJS

gulp解决RequireJS项目前端缓存问题(二) 前言 这一节,我们主要解决在上一节<使用gulp解决RequireJSs项目前端缓存问题(一)>末尾提到的几个问题: 对通过require-config.js引入的js文件修改后,没有更新到 每次gulp运行完后都会生成新的文件,开发环境是做了清除dist目录处理,但对于一般公司服务器而言,发布到生产环境上,不可能每次发布都对dist做清空处理,文件只会越积越多 先睹为快,猛戳链接下载Demo :http://pan.baidu.com/s

requireJS的基本用法

引言 目前项目中的前端架构采用的是RequireJS+AngularJS,小编在工作之余对这个前端框架比较感兴趣,在开始的 时候对这个框架不是很懂,因为里面有很多平台自己封装的东西,所以在理解起来不是很容易,经过这一段时间在项 目中的运用有了一定的理解,下面先来总结总结一下其中的一个技术点--RequireJS的基本用法. 基本介绍 RequireJS是一个JavaScript文件或者模块的加载器.它可以提高JavaScript文件的加载速度,避免不必要的 堵塞.它针对于在浏览器环境中使用做过专

requirejs实验002. r.js合并文件. 初体验.

requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrburke/r.js/blob/master/build/example.build.js 这里罗列了所有的优化参数. 我是在win7上使用r.js的. 安装使用的是npm ->  npm install -g requirejs  安装在全局,更合适,方便在任何地方使用. windows上使用r.js