require模块开发(一)
1.require下载和加载
1.1 下载
工欲善其事必先利其器,先下载require.js下载地址, 然后添加 require.js 到 scripts 目录
1.2 加载
然后加载require
<script data-main="js/app" src="js/require.js"></script>
data-main属性的作用是,指定网页程序的主模块
注意,这里写的是app而不是app.js。RequireJS默认假定所有的依赖资源都是js脚本,因此无需在module ID上再加".js"后缀,RequireJS在进行module ID到path的解析时会自动补上后缀.
1.3 baseUrl、path配置
在上面的app.js里的模块代码有
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
// some code here
});
默认情况'jquery', 'underscore', 'backbone'是和app.js在同一目录下。如果这些文件不和app.js在同一目录怎么办,比如js/lib目录下。
两种办法:
第一种办法:改变paths
require.config({
paths: {
"jquery": "lib/jquery.min",
"underscore": "lib/underscore.min",
"backbone": "lib/backbone.min"
}
});
第二种办法:改变baseurl
baseUrl :所有模块的查找根路径。如未显式设置baseUrl,则默认值是加载require.js的HTML所处的位置。如果用了data-main属性,则该路径就变成baseUrl。
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
1.4加载非规范的模块
有些模块并不是规范的AMD,如果已存在的jquery等控件。这样的文件如果 加载
require.config({
shim: { 'jquery':{
exports: $'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
2.定义模块
一个磁盘文件应该只定义 1 个模块。多个模块可以使用内置优化工具将其组织打包。
2.1简单的值对
define({
color: "black",
size: "unisize"
});
2.2函数式定义
如果一个模块没有任何依赖,但需要一个做setup工作的函数,则在define()中定义该函数,并将其传给define():
define(function () {
//Do setup work here return {
color: "black",
size: "unisize"
}
});
2.3存在依赖的函数式定义
第一个参数是依赖的名称数组;第二个参数是函数,在模块的所有依赖加载完毕后,该函数会被调用来定义该模块,因此该模块应该返回一个定义了本模块的object。
define(["./cart", "./inventory"], function(cart, inventory) {
//return an object to define the "my/shirt" module.
return {
color: "blue",
size: "large",
addToCart: function() {
inventory.decrement(this);
cart.add(this);
}
}
}
);
2.4定义一个命名模块
//Explicitly defines the "foo/title" module:
define("foo/title",
["my/cart", "my/inventory"],
function(cart, inventory) {
//Define foo/title object in here.
}
);
显式指定模块名称,但这使模块更不具备移植性
2.5循环依赖
如果你定义了一个循环依赖(a依赖b,b同时依赖a),则在这种情形下当b的模块函数被调用的时候,它会得到一个undefined的a.解决办法
//Inside b.js:
define(function(require, exports, module) {
//If "a" has used exports, then we have a real
//object reference here. However, we cannot use
//any of a's properties until after b returns a value.
var a = require("a"); exports.foo = function () {
return a.bar();
};
});
2.6 两类模块需要使用不同版本的"foo"
该手段对于某些大型项目很重要:如有两类模块需要使用不同版本的"foo",但它们之间仍需要一定的协同
map示例:
requirejs.config({
map: {
'some/newmodule': {
'foo': 'foo1.2'
},
'some/oldmodule': {
'foo': 'foo1.0'
}
}
});
如果各模块在磁盘上分布如下:
- foo1.0.js
- foo1.2.js
- some/
- newmodule.js
- oldmodule.js
当“some/newmodule”调用了“require('foo')”,它将获取到foo1.2.js文件;而当“some/oldmod
requirejs.config({
config: {
'bar': {
size: 'large'
},
'baz': {
color: 'blue'
}
}
}); //bar.js, which uses simplified CJS wrapping:
//http://requirejs.org/docs/whyamd.html#sugar
define(function (require, exports, module) {
//Will be the value 'large'
var size = module.config().size;
}); //baz.js which uses a dependency array,
//it asks for the special module ID, 'module':
//https://github.com/jrburke/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#wiki-magic
define(['module'], function (module) {
//Will be the value 'blue'
var color = module.config().color;
});
若要将config传给包,将目标设置为包的主模块而不是包ID:
ule”调用“`require('foo')”时它将获取到foo1.0.js。
2.7配置信息
config:常常需要将配置信息传给一个模块,并调用module.config()。
requirejs.config({
//Pass an API key for use in the pixie package's
//main module.
config: {
'pixie/index': {
apiKey: 'XJKDLNS'
}
},
//Set up config for the "pixie" package, whose main
//module is the index.js file in the pixie folder.
packages: [
{
name: 'pixie',
main: 'index'
}
]
});
一个常见的应用场景是先用库的一个CDN版本,如果其加载出错,则切换到本地版本:
requirejs.config({
enforceDefine: true,
paths: {
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min'
}
}); //Later
require(['jquery'], function ($) {
//Do something with $ here
}, function (err) {
//The errback, error callback
//The error has a list of modules that failed
var failedId = err.requireModules && err.requireModules[];
if (failedId === 'jquery') {
//undef is function only on the global requirejs object.
//Use it to clear internal knowledge of jQuery. Any modules
//that were dependent on jQuery and in the middle of loading
//will not be loaded yet, they will wait until a valid jQuery
//does load.
requirejs.undef(failedId); //Set the path to jQuery to local path
requirejs.config({
paths: {
jquery: 'local/jquery'
}
}); //Try again. Note that the above require callback
//with the "Do something with $ here" comment will
//be called if this new attempt to load jQuery succeeds.
require(['jquery'], function () {});
} else {
//Some other error. Maybe show message to the user.
}
});
注意: errback仅适用于回调风格的require调用,而不是define()调用。define()仅用于声明模块。
更简单办法
requirejs.config({
//To get timely, correct error triggers in IE, force a define/shim exports check.
enforceDefine: true,
paths: {
jquery: [
'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min',
//If the CDN location fails, load from this location
'lib/jquery'
]
}
}); //Later
require(['jquery'], function ($) {
});
全局 requirejs.onError
requirejs.onError = function (err) {
console.log(err.requireType);
if (err.requireType === 'timeout') {
console.log('modules: ' + err.requireModules);
} throw err;
};
页面加载事件及DOM Ready
domReady模块实现了一个跨浏览器的方法来判定何时DOM已经ready。下载并在你的项目中如此用它:
require(['domready!'], function (doc){
// called once the DOM is ready
});
require模块开发(一)的更多相关文章
- seajs实现JavaScript 的 模块开发及按模块加载
seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...
- js 模块开发之一(模块开发价值)
首先引用我们的今天的主角 ----<前端模块化开发的价值> 1,前端开发最常见的两个问题 ---命名冲突和文件依赖 2,对于命名冲突的基本解决办法就是学习其他语言的习惯,添加命名空间 va ...
- wuzhicms 模块开发
首先,模块开发需要了解五指cms的目录结构: 然后,我们需要新增加一个模块目录: 再app下面创建 如:content 下面包含文件: 前台文件的创建: 看下 index.php 的内容: <? ...
- TP5多模块开发
一般的thinkphp框架一般都是单模块开发的,但有时候我们可能需要进行多模块开发,例如添加个后台管理的模块.这次给人讲课,在Tp多模块开发的配置上翻车,感觉很有必要总结下,话不多说,直接上干货. 总 ...
- Openresty最佳案例 | 第7篇: 模块开发、OpenResty连接Redis
转载请标明出处: http://blog.csdn.net/forezp/article/details/78616714 本文出自方志朋的博客 Lua模块开发 在实际的开发过程中,不可能把所有的lu ...
- 高并发 Nginx+Lua OpenResty系列(4)——Lua 模块开发
在实际开发中,不可能把所有代码写到一个大而全的lua文件中,需要进行分模块开发:而且模块化是高性能Lua应用的关键.使用require第一次导入模块后,所有Nginx 进程全局共享模块的数据和代码,每 ...
- 使用requirejs+vue 打造 无需编译发布便捷修改调整的模块开发方案 (一)
前言 不知道大家有没有这种感觉,现在流行的很多前端技术,基本上都基于webpack编译,当然不是说这种方案不好,在标准的开发流程运行中,这种方式其实也挺不错,管理方便,代码统一. 痛点:项目不是单独针 ...
- angular之模块开发一
模块化开发 概述 什么是模块化开发 将软件产品看作为一系列功能模块的组合 通过特定的方式实现软件所需模块的划分.管理.加载 为什么使用模块化开发 https://github.com/seajs/se ...
- 4 ~ express ~ 划分模块开发
一,根据功能进行模块划分 1,前台模块 2,后台管理模块 3,API模块 二,使用 app.use() 进行模块划分 1,app.use('/',require('./router/main')) 1 ...
随机推荐
- vue 简单留言本
代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- Codeforces 839D Winter is here
链接:CF839D 题目大意 给定一个数组大小为\(n(1\leq n\leq 200000)\)的数组\(a\),满足\(1\leq a_i \leq 1000000\). 选择其中任意\(len\ ...
- cdq分治(偏序)
偏序问题: https://www.luogu.org/blog/Owencodeisking/post-xue-xi-bi-ji-cdq-fen-zhi-hu-zheng-ti-er-fen 优质题 ...
- Jmeter 录制脚本【转】
Jmeter 录制脚本[转] Jmeter中有2种方法可以录制脚本. 不过我个人非常不推荐录制脚本,录制的脚本混乱,需要再次加工才能使用. 像我这么精通HTTP协议的人. 一直都是使用Fiddler ...
- LUOGU P2476 [SCOI2008]着色方案
传送门 解题思路 毒瘤题,,刚开始写了个奇奇怪怪的哈希,结果T了5个点..后来深(kan)入(le)思(ti)考(jie),发现c的范围很小,设$f[a][b][c][d][e][pre]$表示还能 ...
- springboot与任务(定时任务)
描述: 项目开发中经常需要执行一些定时任务,比如需要在每天凌晨时候,分析一次前一天的日志信息.Spring为我们提供了异步执行任务调度的方式,提供TaskExecutor .TaskScheduler ...
- php中$_REQUEST、 $_GET、 $_POST、 $_COOKIE 的关系和区别
看到REQUEST可以通吃GET .POST .COOKIE 后 感觉这个$_REQUEST太强大了是不是其他的几个超级变量就没有用了,下面对他们整体做个比较: 1.安全性 post>get 2 ...
- linux 编译安装php选项
PHP安装 ./configure --prefix=/usr/local/php --with-config-file-path=/usr/local/php/etc --with-mysql=/u ...
- android Serializable 和 Parcelable 区别
android 中自定义的对象序列化的问题有两个选择一个是Parcelable,另外一个是Serializable. 一 序列化原因: 1.永久性保存对象,保存对象的字节序列到本地文件中:2.通过 ...
- 为什么说 Python 是数据科学的发动机(一)发展历程(附视频中字)
为什么说 Python 是数据科学的发动机(一)发展历程(附视频中字) 在PyData Seattle 2017中,Jake Vanderplas介绍了Python的发展历程以及最新动态.在这里我们把 ...