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


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/365695.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WildFly上具有AngularJS的Java EE 7和Java WebSocket API(JSR 356)

这篇博客文章描述了用于WebSocket协议的Java API(JSR 356) (这是Java EE 7平台的四个最新JSR之一),并提供了部署在WildFly 8上并可以在OpenShift上在线获得的具体应用程序。 [FR]版本的法语( HTML或PDF &a…

日期加减加1天_2小时整理了13个时间日期函数,动图演示简单易学,收藏备用吧...

Hello,大家好,今天跟大家整理汇总了13个工作中经常用到的日期与时间函数的使用方法,学会它们几乎可以解决所有工作中遇到的,关于日期与时间提取与转换的问题。话不多说,让我们直接开始吧一、了解时间与日期的本质工作中…

点云数据显示_vispy 显示 kitti 点云数据

国内博客找了一圈,居然没有发现有用 vispy 做可视化的代码,这里做一个简单的示例,代码大部分来自官方。import numpy as np import vispy.scene from vispy.scene import visuals import sys# Make a canvas and add simple view canvas vis…

Webpack 常用命令总结以及常用打包压缩方法

前言:Webpack是一款基于node的前端打包工具,它可以将很多静态文件打包起来,自动处理依赖关系后,生成一个.js文件,然后让html来引用,不仅可以做到按需加载,而且可以减少HTTP请求,节约…

CSS3 Filter详解(改变模糊度 亮度 透明度等方法)

文章目录 1.模糊2.灰度3.亮度4.对比度5.饱和度6.色相旋转7.反色8.阴影9.透明度10.褐色CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。 -webkit-filter是css3的一个属性,…

laravel中使用offsetSet

首先不用offsetSet方法,使用laravel的硬添加属性如下: 下边使用offsetSet 转载于:https://www.cnblogs.com/qaing123/p/9672241.html

转3d视图快捷键_最全Solidworks快捷键,值得收藏!

SOLIDWORKS软件提供了很多实用的快捷键,如果我们熟练掌握这些快捷键无疑可以减轻工作强度和提高工作效率。当然我们也可以点击【工具】-【自定义】-【键盘】,自己定义一些快捷键。本文为大家整理一些常用的快捷键,多使用快捷键可以帮助我们节…

构建前端自动化工作流环境

目标:建一个自动化工作流环境 自动编译 自动合并 自动刷新 自动部署 工作流: 1 全局安装webpack 执行命令: npm install webpack webpack-cli -g 其中webpack-cil 是命令接口工具 2 初始化当前项目:npm init 然后一路回车…

大型布线:Java云应用程序缺少的技术

您是否曾经想过,为什么大多数Java框架中的依赖项注入仅用于本地进程内服务而不是分布式服务? 我最近在2013年EMC世界大会上遇到了Paul Maritz的主题演讲 (跳至第32分钟),这使我在云平台的背景下思考了这个问题。 主题…

java cpu过高排查_涨薪秘籍:JAVA项目排查cpu负载过高

背景我负责的其中一个项目在空负载的情况下,CPU占用率依然保持着100%左右,线上、测试、开发的服务都一样;是什么导致的呢?在开发环境我查看了请求流量,这个流量可以忽略但CPU占用率一直在60%-100%之间浮动。分析问题流…

巧用css的border属性完成对图片编辑功能的性能优化

一、需求场景: 最近闲来无事,boss提出了一个要求,研究相关代码并完成一个关于编辑图片功能的性能优化,该功能的主要界面展示如下: 通过了几分钟的短暂试用,发现就是一个简单的裁剪并保存用户选择并上传的图…

求数的绝对值一定是正数_人教版初中数学七年级上册绝对值公开课优质课课件教案视频...

绝对值(习题课)导学案(教师版)【教学目标】1、能利用绝对值的性质求值。 2、通过复习绝对值,让学生对绝对值的理解更加深透。 3、通过复习,让学生掌握利用绝对值的代数和几何意义,并学会灵活运用…

使用Java EE安全性和JBoss AS 7.x保护JSF应用程序的安全

企业应用程序的常见要求是在登录页面后面保护所有JSF页面。 有时,您甚至希望在应用程序内部具有保护区,只有拥有特定角色的用户才能访问这些保护区。 Java EE标准附带实现受某些安全性约束保护的Web应用程序所需的所有方法。 在此博客文章中,…

java 十六进制转十进制_JAVA知识-分析JAVA中的重点和难点

Java中有很多内容在开发项目的过程中并不常用,但是却是很重要的部分,为了避免忘记,今天重新温习了一遍Java中的重点和难点,借此机会记录一下方便以后查找。本文主要分为以下几个部分:1.进制的相互转换2.Java中位运算符…

java运算符知识整理

赋值运算符: int a 0;a 2;System.out.println("a0"""".."a);int b 0;b2;System.out.println("b0""b2"".."b);int c 0;c-2;System.out.println("c0""c-2"".."c);int d 1;d*2;S…

开放才能进步!Angular和Wijmo一起走过的日子

Angular 已成为广受欢迎的前端框架。去年9月份,期待已久的 Angular2 的正式版发布之后,Angular 又迎来了新一轮热潮。伴随着 Angular 这一路走来,Wijmo 一直都是第一个全面支持各种版本 Angular 的JS控件库,为 Angular 用户提供着…

windows 检查cuda安装_Windows云主机GPU驱动-CUDA安装使用

IE安全相关配置如果打开浏览器无法正常下载,则需要设置Internet Explorer增强的安全配置。设置如下:打开"服务器管理器";点击"本地服务器";"IE增强的安全配置";选择"关闭"; 之…

镜像镜像–使用反射在运行时查看JVM内部

开发人员:Takipi会告诉您何时新代码在生产中中断– 了解更多 我们都习惯于在我们的日常工作中直接或通过利用反射的框架来运用反射。 它是Java和Scala编程的主要方面,它使我们使用的库可以与我们的代码进行交互,而无需对其进行硬编码的知识。…

UnicodeMath数学公式编码_翻译(Unicode Nearly Plain - Text Encoding of Mathematics Version 3)

目录 完整目录1. 简介2. 编码简单数学表达式2.1 分数2.2 上标和下标2.3 空白(空格)字符使用3. 编码其他数学表达式3.1 分隔符强烈推荐本文简明版UnicodeMath编码教程 本文为UnicodeMath官方文档的翻译,原文看这。翻译如有不准还请谅解&#x…

antd 表格树如何展开_如何分析工作,找出规律,使用excel大幅度提高工作效率...

在职场中,掌握一定的excel知识,有时候可以极大的提高工作效率,减少加班次数。但是有的人可能不知道如何去做,下面我使用一个我前几天遇到的工作场景,一步一步的来给大家展示一下,如何使用excel提高工作效率…