第二次聊一聊 JS require.js 模块化工具的基础知识,本文为大家 JS require.js 模块化工具的最基本知识点,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
前一篇:JS 模块化工具我们以非常简单的方式引入了 requirejs:{aa0aa},这一篇将讲述一下 requirejs 中的一些基本知识,包括 API 使用方式等
基本 API
require 会定义三个变量:define,require,requirejs,其中 require === requirejs,一般使用 require 更简短
define 从名字就可以看出这个 api 是用来定义一个模块
require 加载依赖模块,并执行加载完后的回调函数
前一篇中的 a.js:
- define(function(){
- function fun1(){
- alert("it works");
- }
- fun1();
- })
通过 define 函数定义了一个模块,然后再页面中使用:
require(["js/a"]);
来加载该模块 (注意 require 中的依赖是一个数组,即使只有一个依赖,你也必须使用数组来定义),requir API 的第二个参数是 callback,一个 function,是用来处理加载完毕后的逻辑,如:
- require(["js/a"],
- function() {
- alert("load finished");
- })
加载文件
之前的例子中加载模块都是本地 js,但是大部分情况下网页需要加载的 JS 可能来自本地服务器、其他网站或 CDN,这样就不能通过这种方式来加载了,我们以加载一个 jquery 库为例:
- require.config({
- paths : {
- "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]
- }
- })
- require(["jquery","js/a"],function($){
- $(function(){
- alert("load finished");
- })
- })
这边涉及了 require.config,require.config 是用来配置模块加载位置,简单点说就是给模块起一个更短更好记的名字,比如将百度的 jquery 库地址标记为 jquery,这样在 require 时只需要写 ["jquery"] 就可以加载该 js,本地的 js 我们也可以这样配置:
- require.config({
- paths : {
- "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"],
- "a" : "js/a"
- }
- })
- require(["jquery","a"],function($){
- $(function(){
- alert("load finished");
- })
- })
通过 paths 的配置会使我们的模块名字更精炼,paths 还有一个重要的功能,就是可以配置多个路径,如果远程 cdn 库没有加载成功,可以加载本地的库,如:
- require.config({
- paths : {
- "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
- "a" : "js/a"
- }
- })
- require(["jquery","a"],function($){
- $(function(){
- alert("load finished");
- })
- })
这样配置后,当百度的 jquery 没有加载成功后,会加载本地 js 目录下的 jquery
在使用 requirejs 时,加载模块时不用写. js 后缀的,当然也是不能写后缀
上面例子中的 callback 函数中发现有 $ 参数,这个就是依赖的 jquery 模块的输出变量,如果你依赖多个模块,可以依次写入多个参数来使用:
- require(["jquery","underscore"],function($, _){
- $(function(){
- _.each([1,2,3],alert);
- })
- })
如果某个模块不输出变量值,则没有,所以尽量将输出的模块写在前面,防止位置错乱引发误解
全局配置
上面的例子中重复出现了 require.config 配置,如果每个页面中都加入配置,必然显得十分不雅,requirejs 提供了一种叫 "主数据" 的功能,我们首先创建一个 main.js:
- require.config({
- paths : {
- "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
- "a" : "js/a"
- }
- })
然后再页面中使用下面的方式来使用 requirejs:
data-main 还有一个重要的功能,当 script 标签指定 data-main 属性时,require 会默认的将 data-main 指定的 js 为根路径,是什么意思呢?如上面的 data-main="js/main" 设定后,我们在使用 require(['jquery']) 后 (不配置 jquery 的 paths),require 会自动加载 js/jquery.js 这个文件,而不是 jquery.js,相当于默认配置了:
- require.config({
- baseUrl : "js"
- })
第三方模块
通过 require 加载的模块一般都需要符合 AMD 规范即使用 define 来申明模块,但是部分时候需要加载非 AMD 规范的 js,这时候就需要用到另一个功能:shim,shim 解释起来也比较难理解,shim 直接翻译为 "垫",其实也是有这层意思的,目前我主要用在两个地方
1. 非 AMD 模块输出,将非标准的 AMD 模块 "垫" 成可用的模块,例如:在老版本的 jquery 中,是没有继承 AMD 规范的,所以不能直接 require["jquery"], 这时候就需要 shim,比如我要是用 underscore 类库,但是他并没有实现 AMD 规范,那我们可以这样配置
- require.config({
- shim: {
- "underscore" : {
- exports : "_";
- }
- }
- })
这样配置后,我们就可以在其他模块中引用 underscore 模块:
- require(["underscore"], function(_){
- _.each([1,2,3], alert);
- })
插件形式的非 AMD 模块,我们经常会用到 jquery 插件,而且这些插件基本都不符合 AMD 规范,比如 jquery.form 插件,这时候就需要将 form 插件 "垫" 到 jquery 中:
- require.config({
- shim: {
- "underscore" : {
- exports : "_";
- },
- "jquery.form" : {
- deps : ["jquery"]
- }
- }
- })
也可以简写为:
- require.config({
- shim: {
- "underscore" : {
- exports : "_";
- },
- "jquery.form" : ["jquery"]
- }
- })
这样配置之后我们就可以使用加载插件后的 jquery 了
- require.config(["jquery", "jquery.form"],
- function($) {
- $(function() {
- $("#form").ajaxSubmit({...
- });
- })
- })
好了,requirejs 的基本配置大致就是这么多,还有一些扩展的功能会在之后的篇幅中提到,大家不要错过呀!
来源: http://www.phperz.com/article/17/0217/266280.html