10分钟精通require.js
require.js的诞生,就是为了解决这两个问题:
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。
一、require.js的加载文件
<script src="js/require.js" data-main="src/main.js"></script>
由于require.js默认的文件后缀名是js,所以可以把main.js简写成main。
二、主模块的写法
main.js,我把它称为"主模块",所有代码都从这儿开始运行。
require(['模块依赖'],, function (回调函数){});
实例:
require(['jquery'], function ($){ })
三、config配置
require.config({
baseUrl: '路径',
paths: {
'标识':'路径'
} });
四、AMD模块的写法
define(function (){ });
如果模块存在依赖,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。
define(['lib'], function(myLib){ });
当require()函数加载上面这个模块的时候,就会先加载依赖文件lib.js。
五、require.js插件
require.js还提供一系列插件,实现一些特定的功能。 插件下载地址:
https://github.com/jrburke/requirejs/wiki/Plugins
实际开发应用
文件:
require.js
jquery.js
main.html
main.js
one.js
three.js
two.js
文件代码:
init.html
<script src="js/require.js" data-main="src/main" type="text/javascript"></script>
main.js
require.config({
//baseUrl: ".",
paths: {
"jquery": "/script/jquery"
}
}); //main.js 调用依赖模板,次处为入口程序main()
require(['one', 'two', 'three'], function (one, two, three) {
document.write(one.add(1, 2));
document.write('</br>');
document.write(two.add(3, 4));
document.write('</br>');
document.write(three);
});
one.js
//定义非依赖模板
define(function () {
var add = function (x, y) {
return "one.js模板,实现x+y=" + x + y;
};
return {
add: add
};
});
two.js
//定义依赖模板
define(['one'], function (one) {
var add = function (x, y) {
return "two.js模板,依赖one.js模板,x+y=" + one.add(x, y);
};
return {
add: add
};
});
three.js
define(['jquery'], function ($) {
return "three.js模板,实现调用jquery.js类库:" + $.trim('jquery trim');
});
10分钟精通require.js的更多相关文章
- 10分钟精通SharePoint-搜索
大势所趋随着企业内容和文档数量的骤增,快速定位到所需材料和内容已经迫不及待,这也是所有企业所面临的共同的挑战,应这个大的趋势,"搜索"闪亮登上了企业协作(SharePoint)舞台 ...
- 10分钟精通SharePoint - SharePoint升级
类型: b2b(安装更新)和v2v(跨版本升级) 内容:二进制文件和数据库 过程: 升级前检查 - 检查场内数据,配置和自定义等等 升级准备和计划 - 根据需要和升级检查制定相应计划和准备工作 ...
- 10分钟精通SharePoint - SharePoint安装
简介 接触SharePoint就避免不了要接触SharePoint安装,无论你是对SharePoint进行开发还是管理(终端用户除外).SharePoint的安装涉及到两部分:预装.安装和配置,这主要 ...
- 10分钟精通SharePoint - SharePoint拓扑结构
SharePoint服务器角色:前端,应用程序和数据库服务器 应用程序服务:搜索.Office文档.User Profile和App等应用服务器 数据库类型:内容数据库.应用程序数据库和配置数据库 规 ...
- Node.js躬行记(21)——花10分钟入门Node.js
Node.js 不是一门语言,而是一个基于 V8 引擎的运行时环境,下图是一张架构图. 由图可知,Node.js 底层除了 JavaScript 代码之外,还有大量的 C/C++ 代码. 常说 Nod ...
- 10分钟精通SharePoint - SharePoint发展历程
SharePoint 2001: SharePoint Team Service(STS) SharePoint Portal Server(SPS) SharePoint 2003: Windows ...
- 10分钟精通SharePoint - SharePoint定位
平台 – "一栋楼房的框架结构" 扩展 – "用户可以根据自己需要随意装修房间"集成 – "插拔式的系统集成能力"业务– "既是全 ...
- ASP.NET MVC应用require.js实践
这里有更好的阅读体验和及时的更新:http://pchou.info/javascript/asp.net/2013/11/10/527f6ec41d6ad.html Require.js是一个支持j ...
- require.js实践
ASP.NET MVC应用require.js实践 这里有更好的阅读体验和及时的更新:http://pchou.info/javascript/asp.net/2013/11/10/527f6ec41 ...
随机推荐
- Excel部署配置DCOM
对 Excel进行编程,实际上就是通过 .Net Framework去调用 Excel的 COM组件,所有要在 Web环境下调用 COM组件的时候,都需要对其进行相应的配置. 很多朋友都反映在 Win ...
- 连接ORACLE数据库,是不是必须要安装oracle客户端的运行时
大神给的回答: net连接oracle使用的是oci接口,必须安装oracle客户端,并配置本地网络服务名 tnsnames.ora.不过oracle网站有精简版的客户端软件,不到30M吧,解压,并编 ...
- iOS非ARC内存管理摘要 - 实践型
关于ios内存管理.在开发过程中,内存管理很重要,我简单说明一下. 1.正确用法 UIView *v = [[UIView alloc] init]; //分配后引用计数为1 [self.view a ...
- DroidGap
import com.phonegap.DroidGap; import android.app.Activity; import android.os.Bundle; p ...
- Linux学习11-CentOS如何设置java环境变量
前言 之前用yum安装的java,现在想添加环境变量,yum安装的java路径在哪呢?如何找到安装的路径,把jdk添加到环境变量. 本篇详细讲解linux系统设置java环境变量 找到jdk路径 之前 ...
- Java中使用正则表达式获取网页中所有图片的路径
public static List<String> getImageSrc(String htmlCode) { List<String> imageSrcList = ne ...
- docker 日志清理与设置
清空 cat /dev/null >json.log docker-compose nginx: image: nginx:1.12.1 restart: always logging: dri ...
- Android反编译工具的用法
Android的APK文件时可以反编译的,通过反编译我们就能查看到大体的代码,帮助学习.反编译仅仅提供的是学习的方式,禁止使用该技术进行非法活动. 其实就是两个命令: 1:运行(WIN+R)-> ...
- 操作Wifi的工具类
有时候需要打开关闭wifi,或者是坚持状态什么的,这里我写了个工具类来完成各种操作,今后还会添加其他的功能.比如链接某个加密/不加密的wifi WifiAdmin.java package com.e ...
- 在 Linux 下用 CMAKE 编译安装 OpenCV 3.2.0
[安装相关软件和库] 1.安装CMAKE:这里使用apt-get来安装; CMAKE 是一个跨平台编译工具,能够输出各种makefile,和project 文件,指导编译器编译,对CMAKE具体的可以 ...