require.js学习笔记(内容属于转载总结)
<script data-main="src/app" src="src/lib/require.js"></script>
backbone插件中,需要通过script标签引入require.js。
data-main属性的作用是,指定网页程序的主模块,即网页的主模块是src下的app.js
require.js
1、网页主模块是app.js,主模块依赖于其他的模块,这样就会用到require()和require.config()
当需要依赖的模块和主模块在同一目录下时,使用require()或require.config()
当需要依赖的模块和主模块不在同一目录下时,使用require.config()
2、require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
// some code here
});
require()中有两个参数,第一个参数是数组,内容主模块要依赖的模块,例子中表示主模块
依赖于jquery.js、underscore.js、backbone.js
第二个参数是个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参
数形式传入该函数,从而在回调函数内部就可以使用这些模块。
3、当主模块app.js和三个需要依赖的模块jquery.js、underscore.js、backbone.js不在同一个目录
下的时候,可以使用require.config()
require.config()中参数paths是个对象,paths属性指定各个模块的加载路径。baseUrl表示的是改变基目录,如下(2)所示
(1) require.config({
paths: {
"jquery": "lib/jquery.min",
"underscore": "lib/underscore.min",
"backbone": "lib/backbone.min"
}
});
(2) require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min",
"underscore": "underscore.min",
"backbone": "backbone.min"
}
});
(3)如果某个模块在另一台主机上,也可以直接指定它的网址,比如:
require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});
4、按照AMD规范,模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。
例: 假定现在有一个math.js文件,它定义了一个math模块。那么math.js就要这样写:
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
加载方法如下:
// main.js
require(['math'], function (math){
alert(math.add(1,1));
});
如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。
5、加载非规范的模块
这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。
例:underscore和backbone这两个库,都没有采用AMD规范编写。如果要加载它们的话,必须先定义它们的特征。
require.config({
shim: {
//shim是用来配置不兼容的模块。具体来说,每个模块要定义exports值(输出的变量名),表明这个模块外部调用时的名称
'underscore':{
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
//deps数组,表明该模块的依赖性。即backbone.js依赖于underscore.js和jquery.js
exports: 'Backbone'
}
}
});
参考网址:http://www.cnblogs.com/duanhuajian/archive/2013/01/04/2844151.html
require.js学习笔记(内容属于转载总结)的更多相关文章
- 【转】require.js学习笔记(二)
require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <scrip ...
- require.js学习笔记
使用require.js的好处? 1 有效的防止命名冲突(可以将变量封装在模块内,通过暴露出的接口解决命名冲突) 2 解决不同JS文件中的依赖 3 可以让我们的代码以模块化的方式组织 官方网站http ...
- 【转】require.js学习笔记(一)
一.立即执行函数 立即执行函数可以有效避免临时变量污染全局空间.可以在页面初始化时,在立即执行函数内实现一次执行变量的定义及使用. for (var i = 0; i < elems.lengt ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- Node.js学习笔记(2):基本模块
Node.js学习笔记(2):基本模块 模块 引入模块 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式.在No ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- 2019-4-29 js学习笔记
js学习笔记一:js数据类型 1:基本数据类型 number类型(整数,小数) String类型 boolean类型 NaN类型其实是一个nu ...
随机推荐
- MySQL基础(四)——索引
MySQL基础(四)--索引
- 高通平台 lcd driver 调试小结
一.概述 1.1 简介 本文档主要包括LCD模块的驱动流程分析.Framebuffer相关知识.Gralloc等相关内容,以及LCD调试的一些经验和相关bug的分析和讲解. 1.2 开发环境 And ...
- C#语法基础用法Dictionary排序
Dictionary排序 1.先看效果图: 2.核心逻辑如下: Dictionary<int, string> list = new Dictionary<int, string&g ...
- [HDOJ5943]Kingdom of Obsession(最大匹配,思路)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5943 题意:n个人编号为[s+1,s+n],有n个座位编号为[1,n],编号为i的人只能坐到编号为它的 ...
- 设置三思LED的IP地址跟端口号
出厂设置是:202.11.11.01 初始端口号是:2929 设置虚拟机的ip跟LED的ip在一个网段上,在虚拟机上telnet命令,登陆到LED上面. 在/etc/init.d/rcS文件中, #! ...
- STORM_0008_Structure-of-the-codebase_Storm的代码库的结构
http://storm.apache.org/releases/1.0.1/Structure-of-the-codebase.html Structure of the codebase 源码分成 ...
- iOS - UIGestureRecognizer
前言 NS_CLASS_AVAILABLE_IOS(3_2) @interface UIGestureRecognizer : NSObject @available(iOS 3.2, *) publ ...
- Linux_服务
1.服务启动顺序 http://bbs.chinaunix.net/thread-1970916-1-1.html http://bbs.csdn.net/topics/240060477 2.Lin ...
- [转载] tmux的使用tips
原文: http://tangosource.com/blog/a-tmux-crash-course-tips-and-tweaks/
- linux 通过 ulimit 改善系统性能
https://www.ibm.com/developerworks/cn/linux/l-cn-ulimit/ 概述 系统性能一直是一个受关注的话题,如何通过最简单的设置来实现最有效的性能调优,如何 ...