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 ...
随机推荐
- 【Java】Float计算不准确
大家可能都遇到过,float在计算某些值时,会有不准确的情况. 比如如下情况: > 计算不准确 package com.nicchagil.study.java.demo.No10float计算 ...
- javascript实现二分查找
今天做了道笔试题,要求是实现二分查找,当然不难,想了一下,因为没有要求语言就用javascript实现了.当然,期间还是出来了一点问题. ok,上代码 /* * 稳定二分查找 * 作者:吴伟欣 * * ...
- VirtualBox中安装CentOS-6.6虚拟机(转载)
1. 下载 可以到官网下载,http://mirror.centos.org/centos/ 如果下载速度太慢的话,也可以到163镜像下载: http://mirrors.163.com/centos ...
- Listview的闪烁问题
在更新Listview数据时会出现闪烁,主要原因是没有开启双缓冲属性,在C#中可以通过重载Listview的方式开启,代码如下: using System.Windows.Forms; public ...
- uTenux——HelloWord
由以上几节的学习,我们从这一节开始真正的以实例讲解uTenux\AT91SAM3S4C开发套件的应用.如其他的软件程序开发一样,uTenux\AT91SAM3S的学习我们也要从第一个程序代码-Hell ...
- uTenux——软件底层驱动组织结构介绍
经过第一节对uTenux初步认识和第二节对uTenux\AT91SAM3S4C开发板的硬件结构的介绍,这一节我们将要学习的是uTenux\AT91SAM3S4C的软件底层驱动. 在悠龙公司的官网或者u ...
- js对cookie的操作,包括增,取,删
在其他人都开会到时间里,我偷偷摸哦的试了一下cookie,唉,从来没有用过cookie,慢慢的知识忘光了,还好这次偷偷摸摸的做出来了,虚,大家都别出声啊 <!DOCTYPE html> & ...
- Changing Icon File Of Push Button At Runtime In Oracle Forms 6i
Set Icon_File property in When-Mouse-Enter trigger Suppose you are creating icon based menu system i ...
- 【转+自己研究】新姿势之Docker Remote API未授权访问漏洞分析和利用
0x00 概述 最近提交了一些关于 docker remote api 未授权访问导致代码泄露.获取服务器root权限的漏洞,造成的影响都比较严重,比如 新姿势之获取果壳全站代码和多台机器root权限 ...
- eclipse下添加viplugin插件的方法
http://www.viplugin.com/ 在eclipse根目录下建立文件:viplugin2.lic,然后在里面添加以下字符串: nd4UFjUMBADcUSeSW8ocLKoGP3lpbW ...