RequireJs入门
来源:互联网 发布:php面试宝典 编辑:程序博客网 时间:2024/06/06 06:50
随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。
RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。
requirejs能带来什么好处
RequireJs已经流行很久了,我们在项目中也打算使用它。它提供了以下功能:
1、声明不同js文件之间的依赖
2、可以按需、并行、延时载入js库
3、可以让我们的代码以模块化的方式组织
在html中引入requirejs
<script src="/path/to/require.js" data-main="/path/to/app/config.js"></script>
通常使用requirejs的话,我们只需要导入requirejs即可,不需要显式导入其它的js库,因为这个工作会交给requirejs来做。
属性 data-main 是告诉requirejs:你下载完以后,马上去载入真正的入口文件。它一般用来对requirejs进行配置,并且载入真正的程序模块。
在config.js中配置requirejs
config.js 中通常用来做两件事:
- 配置requirejs 比如项目中用到哪些模块,文件路径是什么
- 载入程序主模块
requirejs.config({ baseUrl: '/public/js', paths: { app: 'app' }});requirejs(['app'], function(app) { app.hello();});
在 paths 中,我们声明了一个名为 app 的模块,以及它对应的js文件地址。在最理想的情况下, app.js 的内容,应该使用requirejs的方式来定义模块:
define([], function() { return { hello: function() { alert("hello, app~"); } }});
这里的 define 是requirejs提供的函数。requirejs一共提供了两个全局变量:
- requirejs/require: 用来配置requirejs及载入入口模块。如果其中一个命名被其它库使用了,我们可以用另一个
- define: 定义一个模块
define(["require"], function(require) { var cssUrl = require.toUrl("./style.css");});
依赖一个不使用requirejs方式的库
前面的代码是理想的情况,即依赖的js文件,里面用了 define(…) 这样的方式来组织代码的。如果没用这种方式,会出现什么情况?
比如这个 hello.js :
function hello() { alert("hello, world~");}
它就按最普通的方式定义了一个函数,我们能在requirejs里使用它吗?
先看下面不能正确工作的代码:
requirejs.config({ baseUrl: '/public/js', paths: { hello: 'hello' }});requirejs(['hello'], function(hello) { hello();});
这段代码会报错,原因是最后调用 hello() 的时候,这个 hello 是个 undefined。 这说明,虽然我们依赖了一个js库(它会被载入),但requirejs无法从中拿到代表它的对象注入进来供我们使用。
在这种情况下,我们要使用 shim ,将某个依赖中的某个全局变量暴露给requirejs,当作这个模块本身的引用。
requirejs.config({ baseUrl: '/public/js', paths: { hello: 'hello' }, shim: { hello: { exports: 'hello' } }});requirejs(['hello'], function(hello) { hello();});
面代码 exports: ‘hello’ 中的 hello ,是我们在 hello.js 中定义的 hello 函数。当我们使用 function hello() {} 的方式定义一个函数的时候,它就是全局可用的。如果我们选择了把它 export 给requirejs,那当我们的代码依赖于 hello 模块的时候,就可以拿到这个 hello 函数的引用了。
所以: exports 可以把某个非requirejs方式的代码中的某一个全局变量暴露出去,当作该模块以引用。
暴露多个变量:init
但如果我要同时暴露多个全局变量呢?比如, hello.js 的定义其实是这样的:
function hello() { alert("hello, world~");}function hello2() { alert("hello, world, again~");}
它定义了两个函数,而我两个都想要。
这时就不能再用 exports 了,必须换成 init 函数:
requirejs.config({ baseUrl: '/public/js', paths: { hello: 'hello' }, shim: { hello: { init: function() { return { hello: hello, hello2: hello2 } } } }});
无主的与有主的模块
有主的模块
经研究,发现原来在jquery中已经定义了:
define('jquery', [], function() { ... });
它这里的 define 跟我们前面看到的 app.js 不同,在于它多了第一个参数 ‘jquery’ ,表示给当前这个模块起了名字 jquery ,它已经是有主的了,只能属于 jquery 。
所以当我们使用另一个名字:myjquery: 'lib/jquery/jquery'
去引用这个库的时候,它会发现,在 jquery.js 里声明的模块名 jquery 与我自己使用的模块名 myjquery 不同,便不会把它赋给 myjquery ,所以 myjquery 的值是 undefined 。
所以我们在使用一个第三方的时候,一定要注意它是否声明了一个确定的模块名。
无主的模块
如果我们不指明模块名,就像这样:
define([...], function() { ...});
那么它就是无主的模块。我们可以在 requirejs.config 里,使用任意一个模块名来引用它。这样的话,就让我们的命名非常自由,大部分的模块就是无主的。
- [ requireJs ] requireJs入门!
- RequireJS入门
- requirejs入门
- RequireJs入门
- RequireJs入门
- requirejs入门
- RequireJS 快速入门
- RequireJS入门(一)
- requireJS简单入门学习
- RequireJS入门(一)
- RequireJS入门(三)
- [RequireJS]入门API
- RequireJS入门(一)
- RequireJS入门(一)
- RequireJS入门(二)
- RequireJS入门(三)
- RequireJS 快速入门
- RequireJS入门(一)
- PHP实现对象属性按数组方式访问
- jieba
- VMWARE安装Ubuntu linux
- 异常ConcurrentModificationException
- 《kubernetes 权威指南》第一章 demo 纠正
- RequireJs入门
- Java8初体验(一)lambda表达式语法
- 分类器组合方法Bootstrap, Boosting, Bagging, 随机森林(二)
- ExtJS4与JQuery比较器比较
- 枚举类型的使用
- JSON.stringify 语法实例讲解
- FTP帮助类
- 一个人做饭有哪些推荐?
- Unity3d爬坑记—Image Effects (Pro Only)/CameraMotionBlur.js脚本报错