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 ...
随机推荐
- [erlang] mnesia
原文地址: http://www.cnblogs.com/bluefrog/archive/2012/05/16/2504625.html 本来是项目合作的,可是你却一而再再而三的使用这招,我处理愤怒 ...
- uitextfield 设置为密码框显示
uitextfield 设置为密码框显示: 在xib中,将文本secure的复选框选中即可.
- C语言之基本算法24—黄金切割法求方程近似根
//黄金切割法! /* ================================================================ 题目:用黄金切割法求解3*x*x*x-2*x* ...
- Android之仿iphone抖动效果
转自:http://blog.csdn.net/long33long/article/details/7693671 布局文件: <?xml version="1.0" en ...
- SQL文件的BOM问题导致的invalid character错误及解决
最近在做数据的搬运工,将Oracle中的数据搬运到ES中,方案很成熟了,使用Logstash的jdbc-input执行SQL,然后将结果输出到ES中.这么简单的问题,在测试环境中测试也一帆风顺,可一上 ...
- C# 获取文件的MIME类型
在C#中获取文件的MIME类型(Content Type)的方法如下 一.使用MimeMapping类 在System.Web程序集中,当前为静态类,就一个获取 // // 摘要: // 映射文档扩展 ...
- HTML5 本地文件操作之FileSystemAPI实例(一)
文件操作实例整理一 1.请求系统配额类型 console.info(window.TEMPORARY); //0 临时 console.info(window.PERSISTENT); //1 持久 ...
- HTML 5 <script> async 属性简单设置代码异步执行
HTML5中 script标签支持脚本的异步执行async.脚本将会异步运行: <script type="text/javascript" src="demo_a ...
- Java工程师成神之路~(2018修订版)
针对本文,博主最近在写<成神之路系列文章> ,分章分节介绍所有知识点.欢迎关注. 主要版本 更新时间 备注 v1.0 2015-08-01 首次发布 v1.1 2018-03-12 增加新 ...
- protobuf中的编码规则
protobuf中的编码规则 (1)序列化和反序列化: 在开始本部分的内容之前,首先有必要介绍两个基本概念,一个是序列化,一个是反序列化.这两个概念的定义在网上搜一下都很多的,但大多都讲得比较晦涩,不 ...