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 ...
随机推荐
- HDU-1501-Zipper-字符串的dfs
Given three strings, you are to determine whether the third string can be formed by combining the ch ...
- python基础语法(变量与数据类型)
python基础语法(变量与数据类型) 一.python变量 python中的变量不需要声明.每个变量在使用钱都需要赋值,变量赋值以后,该变量才会被创建 在python中,变量就是变量,它没有类型,我 ...
- java_JDK8中新增的时间API
java.time 包含值对象的基础包 java.time.chrono 提供对不同的日历系统的访问 java.time.format 格式化和解析时间的日期 java.time.temporal 包 ...
- java笔试之完全数计算
完全数(Perfect number),又称完美数或完备数,是一些特殊的自然数. 它所有的真因子(即除了自身以外的约数)的和(即因子函数),恰好等于它本身. 例如:28,它有约数1.2.4.7.14. ...
- sparkStreaming入门
1.环境 jdk : 1.8 scala : 2.11.7 hadoop:2.7 spark : 2.2.0 2. 开发工具 idea 2017.2 3.maven的pom文件 <depende ...
- SQLServer 2008 还原数据库备份版本不兼容的问题
我们准备还原一个数据库备份的时候,经常会弹出这样的错误:System.Data.SqlClient.SqlError: 该数据库是在运行版本 10.50.1600 的服务器上备份的.该版本与此服务器( ...
- Qt下QMainWindow内部QTableView不能自适应大小
中央窗体设置的是一个QWidget 一直排查不到原因 最后发现为 因为布局中为QTableView设置了对齐方式 取消即可!
- 深入理解Java虚拟机(程序编译与代码优化)
文章首发于微信公众号:BaronTalk,欢迎关注! 对于性能和效率的追求一直是程序开发中永恒不变的宗旨,除了我们自己在编码过程中要充分考虑代码的性能和效率,虚拟机在编译阶段也会对代码进行优化.本文就 ...
- 2016.8.18上午纪中初中部NOIP普及组比赛
2016.8.18上午纪中初中部NOIP普及组比赛 链接:https://jzoj.net/junior/#contest/home/1336 翻!车!啦!好吧,那是因为大神归来. 进度: 比赛:AC ...
- ThinkPHP 数据更新
ThinkPHP的数据更新操作包括更新数据和更新字段方法. 直线电机厂家 更新数据 更新数据使用save方法,例如: $User = M("User"); // 实例化User对象 ...