RequireJS -Javascript模块化(一、简介)
1、认识RequireJS
RequireJs官网(http://requirejs.org/)的描述:
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
RequireJS是一个用来加载模块的js文件,它是在浏览器端的一个优化设计,同时它能够在其他js环境下使用,比如Rhino和Node,使用类似于RequireJS的js模块加载器能够提升您的代码执行速度和质量
2、使用RequireJS
(1)平时我们引用js的方式
index.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/my/dr.js"></script>
<title></title>
</head> <body>
<p>this is index.html</p>
<script>
console.log("dr.version: "+dr.version);
</script>
</body> </html>
js/my/dr.js
! function(window) {
var dr = {};
dr.version = "v1.0";
window.dr = dr; }(window);
控制台输出
dr.version: v1.0
(2)引用requirejs的方式
一个简单的例子:
目录结构:
index.html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/require.js" data-main="js/main"></script>
<title></title>
</head> <body>
<p>this is index.html</p>
</body> </html>
js/my/dr.js
! function(window) {
var dr = {};
dr.version = "v1.0"; window.dr = dr; define(function() {
return dr;
}); }(window);
js/main.js
require.config({
baseUrl: "js",
paths: {
dr: "my/dr"
}
}) require(["dr"], function(dr) {
if (dr) {
console.log("dr.js is ready!");
console.log("dr.version: " + dr.version);
}
})
测试,控制台输出:
dr.js is ready!
dr.version: v1.0
1、看下index.html。
在<head>标签中引入了require的js文件,并指明属性 data-main="js/main.js",这个属性相当于指明了RequireJs的入口,与java中的mian方法相似(这个属性的值可以直接写成"js/main",require会自动去找js下的main.js文件)。
2、看下RequireJs的“入口”main.js。
require.config():配置require的基本信息。
baseUrl如果不指定的话,那默认为main.js的文件夹路径,即"js",我们的代码中写不写baseUrl属性都无所谓,因为我们与main的文件夹路径是一致的;
path:我们要引用的js文件和路径,如果要引用多个js文件,追加即可,但是这里我们引用的js文件中必须符合AMD规范(异步模块加载机制)才可以,简单的说就是必须有define()方法。
require():两个参数,第一个是数组,里面存放我们要引用的js文件的名称,与上面config方法中的paths中的名称对应,第二个是引用完成后的回调函数,在这个函数中有个参数,这个参数值就是js文件中define()方法的返回值。
3、看下dr.js
! function(window) {
var dr = {};
dr.version = "v1.0"; window.dr = dr; define(function() {
return dr;
}); }(window);
这个跟之前(1)平时我们引用js的方式相比,多了一个define函数(斜体部分),这个函数返回了dr对象。这样才符合AMD规范,我们在main.js的require()的回调函数中才能得到dr.version的值。
简单的总结下:
1、在我们需要引用的js文件中定义define()方法,返回某个对象。
2、编写main.js方法(当然名字写成什么都可以,只要在index引用RequireJs文件的时候指明属性data-main的值为对应的main.js即可)。编写配置文件(指定baseUrl,paths里面存放我们要引用的js文件,这里js文件都是作为module的方式被require异步加载)
3、在index.html中引入requirejs文件,指明require入口,在页面中使用即可。
下面是我加载两个模块的例子(dr.js和jquery.js),很简单,各位一眼就能看懂的。
目录结构:
(配图有误,后面测试的时候将jquery文件夹修改为了jq)
按照步骤来:
1、在dr.js和jquery.js中编写define()方法。dr.js我们刚刚已经写过了,这里不改动;jquery呢?看下jquery源码:
// Expose jQuery as an AMD module, but only for AMD loaders that
// understand the issues with loading multiple versions of jQuery
// in a page that all might call define(). The loader will indicate
// they have special allowances for multiple jQuery versions by
// specifying define.amd.jQuery = true. Register as a named module,
// since jQuery can be concatenated with other files that may use define,
// but not use a proper concatenation script that understands anonymous
// AMD modules. A named AMD is safest and most robust way to register.
// Lowercase jquery is used because AMD module names are derived from
// file names, and jQuery is normally delivered in a lowercase file name.
// Do this after creating the global so that if an AMD module wants to call
// noConflict to hide this version of jQuery, it will work.
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
define( "jquery", [], function () { return jQuery; } );
}
已经看到jquery已经写好了,将jQuery做一个异步加载的module实现。
2、编写main.js,在paths中添加jquery的配置,名称为“jquery”,路径是“jq/jquery”,代表着引入"js/jq/"下的jquery.js文件,注意:这里的路径不能写后缀".js";在require中添加jquery的模块。
require.config({
baseUrl: "js",
paths: {
jquery: "jq/jquery",
dr: "my/dr"
}
}) require(["jquery", "dr"], function($, dr) {
if ($) {
console.info("jquery is ready!");
console.log("jquery version: "+$().jquery);
}
if (dr) {
console.info("dr.js is ready!");
console.log("dr.version: " + dr.version)
}
})
3、index.html,增加一个按钮,用于测试jquery和dr是否正确引入
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/require.js" data-main="js/main.js" async="async" defer="defer"></script>
<title></title>
</head> <body>
<p>this is index.html</p>
<button onclick="getVersion();">获取版本</button>
<script>
function getVersion() {
console.log("index-->jquery version: " + $().jquery);
console.log("index-->dr version: " + dr.version);
}
</script>
</body> </html>
测试:
jquery is ready!
jquery version: 1.9.1
dr.js is ready!
dr.version: v1.0
//点击button按钮时候控制台输出
index-->jquery version: 1.9.1
index-->dr version: v1.0
这里存在一个问题,很大的问题:如果我们把getVersion()的function包装去掉,直接在script中写
console.log("index-->jquery version: " + $().jquery);
或者
console.log("index-->dr version: " + dr.version);
会发生什么呢?
Uncaught ReferenceError: $ is not defined
jquery is ready!
jquery version: 1.9.1
dr.js is ready!
dr.version: v1.0
或者
Uncaught ReferenceError: dr is not defined
jquery is ready!
jquery version: 1.9.1
dr.js is ready!
dr.version: v1.0
问题的根源在于,在requirejs异步加载jquery和dr的时候,index.html的文档流已经读完了,所以发生了错误,之后又异步获取到了require加载jquery和dr完成的回调函数。
最新文章
- solr&;lucene3.6.0源码解析(四)
- 在一周内学会使用 AUTO CAD
- 深度神经网络结构以及Pre-Training的理解
- 11.安装KVM虚拟机
- 如何正确做 Web端压力测试?
- 【转】在web 项目使用了ReportViewer时出错
- 《Cortex-M0权威指南》之体系结构---栈空间操作
- 并查集 poj1611&;poj2492
- [转]NHibernate之旅(8):巧用组件之依赖对象
- excel内容转成xml
- Chart.js | HTML5 Charts for your website.
- linux---finger命令
- 编写程序输入一个5x5的矩阵,将最大元素与中心元素交换,并按行列对齐输出。
- 使用webpack、babel、react、antdesign配置单页面应用开发环境
- 前端页面间传值之cookie传值和url传值
- dummy_backend_queue.go
- asp.net core的DI框架思考以及服务实例的获取方式总结
- windows chocolatey 修改默认安装软件默认安装路径
- 在线HTML编辑器KindEditor
- Linux-lvm逻辑卷管理和提示丢失pv物理卷
热门文章
- ROS Learning-029 (提高篇-007 A Mobile Base-05) 控制移动平台 --- (Python编程)控制虚拟机器人的移动(精确的制定目标位置)
- 读取txt文件将文本行组合成特定格式
- php获取数据库结果集
- KMS激活工具
- SLAM(Linux版)
- 读paper笔记[Learning to rank]
- winFrom程序更新自动安装
- 如何选择SSL 证书服务
- UWP&;WP8.1 基础控件——Border
- Vue.js 的几点总结Watchers/router key/render