RequireJS 模块化加载框架使用
RequireJS 是一个遵循 AMD 规范的模块化加载框架
与上文seajs一样，这里简单介绍其相关用法
同样的，首先是下载好 require.js --> http://requirejs.org/docs/download.html#requirejs
AMD规范是预加载，也就是说会马上将所有模块全加载。
写法跟seajs也类似，只不过 当需要包含模块时，一般会将模块名置入第一个参数。而不是直接require 详见
（新版本的也有CMD版require包含依赖的方式，但本质还是一样，下面会提到）
还是举个例子：
目录结构同级
index.html:
注意到这里script标签多了一个data-main属性(加不加后缀js都可以），它标识了引用主模块入口 main.js
（也可以不使用这种引用入口方式，下边会介绍另一种方式，注意啦~)
<!DOCTYPE html>
<html>
<head>
<title>require</title>
<style type="text/css">
</style>
</head>
<body> <script type="text/javascript" data-main='main' src="./require.js"></script> </script>
</body>
</html>
main.js:
将两个模块置入参数1，并以回调的方式传入使用
define(['main1','main2'],function(main1,main2){
console.log('module of main:');
main1.say();
main2.say();
});
main1.js:
define(function(require,exports,module){
console.log('module of main1:');
module.exports = {
say: function(){
console.log('main1--hello');
}
};
});
main2.js:
define(function(require,exports,module){
console.log('module of main2:');
return {
say: function(){
console.log('main2--hello');
}
};
});
浏览器打开index.html 可以发现结果：
顺序乱了是不是
其实这就是因为AMD规范预先加载的规则，预先把所有依赖都执行了（虽然我们还没用到）
而且这加载是并行的，（默认情况下）main1和main2不分先后。
假设 main.js文件因网络问题加载延迟后，就有可能出现以下结果
module of main2:
module of main1:
module of main:
...
不过，我们也可以为其什么依赖关系，比如main1依赖main2,则就能保证“所谓的顺序”-- 先有main2才有main1
比如将index.html修改成
<!DOCTYPE html>
<html>
<head>
<title>require</title>
<style type="text/css">
</style>
</head>
<body> <script type="text/javascript" src="./require.js"></script>
<script type="text/javascript">
require.config({
shim:{
'main1':{
deps: ['main2']
}
}
});
require(['main'],function(main){
console.log(main.num);
});
</script>
</script>
</body>
</html>
main.js:
define(['main1','main2'],function(main1,main2){
console.log('module of main:');
main1.say();
main2.say();
return {num:10};
});
这时的结果：
上面提到了requirejs也更新了遵循CMD规范的策略，但表面上遵循了，本质上还是AMD的
为什么这么说呢？ 引自：
所以要用requirejs就老老实实使用AMD的，如果想使用CMD的方式，就用seajs吧
RequireJS 模块化加载框架使用的更多相关文章
- SeaJS 模块化加载框架使用
SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS,CMD,AMD等规范后文会提到,这里主要先了解如何在代码中使用. 如果你有使用过nodejs ,那么理解起来就容易多了. 我们通 ...
- seajs模块化加载框架使用
seajs是模块化加载框架.seajs.org已经打不开了,seajs的github.seajs速查文档 <!--如果完成下面4步,则seajs掌握了80%js模块化1.引入seajs的库 :& ...
- RequireJS与SeaJS模块化加载示例
web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有 Package的Javascript语言变得难以管理, ...
- js模块化加载器实现
背景 自es6以前,JavaScript是天生模块化缺失的,即缺少类似后端语言的class, 作用域也只以函数作为区分.这与早期js的语言定位有关, 作为一个只需要在网页中嵌入几十上百行代码来实现一些 ...
- 一起写一个Android图片加载框架
本文会从内部原理到具体实现来详细介绍如何开发一个简洁而实用的Android图片加载缓存框架,并在内存占用与加载图片所需时间这两个方面与主流图片加载框架之一Universal Image Loader做 ...
- 该如何理解AMD ，CMD，CommonJS规范--javascript模块化加载学习总结
是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...
- 转: javascript模块加载框架seajs详解
javascript模块加载框架seajs详解 SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加 ...
- javascript模块加载框架seajs详解
SeaJS是一个遵循commonJS规范的javascript模块加载框架,可以实现javascript的模块化开发和模块化加载(模块可按需加载或全部加载).SeaJS可以和jQuery完美集成,使用 ...
- 【 js 模块加载 】深入学习模块化加载（node.js 模块源码）
一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须按照一定的格式编写.AMD,CMD,CommonJS 是目前最常用的三种模块化书写规范. 1.AMD(Asy ...
随机推荐
- Ques前端组件化体系
Ques是一套组件化系统,解决如何定义.嵌套.扩展.使用组件. 传统开发模式的痛点 无法方便的引用一个组件,需要分别引用其Javascript.Template.CSS文件 我们期望能以MV*的方式去 ...
- JMeter教程01-下载和安装
下载JMeter http://jmeter.apache.org/download_jmeter.cgi 以上是下载地址 更多课程 访问www.bamn.cn 北盟网校 下载后解压 apache-j ...
- 解读Gartner《2015年度新兴技术成熟度曲线报告》
详细见:http://www.360doc.com/content/16/0209/16/26186435_533443133.shtml 今年的报告评估了112个领域超过2000项新型技术的市场类型 ...
- Asp.net Core WebApi 全局异常类
通过全局异常类,所有程序中遇到的错误都会被拦截,并友好的返回结果. 1.自定义一个全局异常处理类中间件 using Microsoft.AspNetCore.Http; using Newtonsof ...
- iOS开发——项目实战总结&Block使用注意点浅析
Block使用注意点浅析 1.在使用block前需要对block指针做判空处理. 不判空直接使用,一旦指针为空直接产生崩溃. if (!self.isOnlyNet) { if (succBlock ...
- 多线程锁--怎么理解Condition
在java.util.concurrent包中,有两个很特殊的工具类,Condition和ReentrantLock,使用过的人都知道,ReentrantLock(重入锁)是jdk的concurren ...
- IIS7 php wordpress 中文url 标签tag中文URL404解决方法
新建重写规则: <rule name="ChineseURL" stopProcessing="true"> <match url=" ...
- Android SDK Manager无法显示可供下载的未安装SDK解决方案
FAQ: 问下的 我的ANDROID SDK MANAGER里原来下载了一些SDK,但是我现在想重新下载新的SDK,咋Packages列表没显示呢?该怎么办? Answer: 据说dl-ssl.goo ...
- There is no mode by that name loaded / mode not given 产生原因(个案)
使用jQM DateBox用于界面显示日期选择控件,结果发现之前是正常的.今天用就不行啦.提示There is no mode by that name loaded / mode not given ...
- Log4net介绍
一.Log4net介绍 log4net是一个功能著名的开源日志记录组件.利用log4net可以方便地将日志信息记录到文件.控制台.Windows事件日志和数据库(包括MS Server,Access, ...