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


本文转自 海角在眼前 博客园博客,原文链接:http://www.cnblogs.com/lovesong/p/5495177.html   ,如需转载请自行联系原作者


相关文章
|
数据可视化 IDE 安全
云巧-让开发更简单,更高效,更方便
近年来,快速迭代的新需求将引导企业改变其开发方式,进而转向使用支持快速、安全和高效的技术架构,组装式应用便成为了企业重要的战略技术趋势。组装式应用引入模块化的理念,使得各企业可以更敏捷、更有效地复用能力模块,提高商业的韧性和效率。云巧平台应运而生,能极大的改善开发环境,节省开发工作量,让开发更简单,更高效,更方便。
2331 0
|
NoSQL 物联网 存储
IoT+Tablestore快速构建智能售货机应用
### 一、 背景介绍         近年来,物联网(IoT)技术发生了巨大的变化。NB-IoT、LoRa等技术的产生解决了网络覆盖、设备功耗成本问题;尤其是最近5G技术的商用,意味着支持海量设备连接进行高质量数据通讯即将有坚实的基础设施支持。
|
移动开发 缓存 小程序
|
存储 Web App开发 消息中间件
IM开发干货分享:浅谈IM系统中离线消息、历史消息的最佳实践
本文将基于IM消息系统的技术实践,分享关于离线消息和历史消息的正确理解,以及具体的技术配合和实践,希望能为你的离线消息和历史消息技术设计带来最佳实践灵感。
1329 0
IM开发干货分享:浅谈IM系统中离线消息、历史消息的最佳实践
|
SQL NoSQL Oracle
Neo4J 介绍及安装|学习笔记
快速学习 Neo4J 介绍及安装
777 0
Neo4J 介绍及安装|学习笔记
|
Java Maven
基于springboot+vue前后端分离的二手【校园/社区/市场】交易市场
基于springboot+vue前后端分离的二手【校园/社区/市场】交易市场
439 0
基于springboot+vue前后端分离的二手【校园/社区/市场】交易市场
|
监控 jenkins Java
linux安装jenkins
Jenkins 是什么?Jenkins 是一个可扩展的持续集成引擎。主要用于:持续、自动地构建/测试软件项目。监控一些定时执行的任务。Jenkins 拥有的特性包括:易于安装-只要把jenkins.war部署到servlet容器,不需要数据库支持。易于配置-所有配置都是通过其提供的web界面实现。集成RSS/E-mail通过RSS发布构建结果或当构建完成时通过e-mail通知。生成JUnit/TestNG测试报告。
508 0
linux安装jenkins
|
数据管理 数据挖掘 数据库
数据管理DMS企业版-桌面软件化使用指南
背景 在日常开发测试、项目发布、数据分析等工作中,我们需要大量接触数据库查询数据、查看表结构、设计表结构、变更数据、变更结构、审批工单等,DMS企业版作为企业内统一的数据库操作入口,之前提供的是网页形式的服务。
3178 0
数据管理DMS企业版-桌面软件化使用指南
|
监控 5G 视频直播
C++ | 上传文件到百度云
程序实现上传百度云的方法。
626 0