资讯专栏INFORMATION COLUMN

RequireJS:一款优秀的AMD模块加载器

syoya / 575人阅读

摘要:概述是一款遵循规范协议的模块加载器,不但能在浏览器端充分利用,同样能在其他的运行时环境,比如和。使用像这样的模块加载器能提高代码的质量和开发速度。一般放在页面的入口出,用来加载其他的模块。

RequireJS概述

RequireJS是一款遵循AMD规范协议的JavaScript模块加载器,
不但能在浏览器端充分利用,同样能在其他的JavaScript运行时环境,
比如RhinoNodeJS。使用像RequireJS这样的模块加载器能提高代码的质量和开发速度。

RequireJS的兼容性
    IE 6+ .......... compatible ✔
    Firefox 2+ ..... compatible ✔
    Safari 3.2+ .... compatible ✔
    Chrome 3+ ...... compatible ✔
    Opera 10+ ...... compatible ✔
模块化核心之定义模块

在RequireJS中,通过向全局变量注册define函数来声明一个模块。在定义模块时,我们要遵循一下的规范:

一个JavaScrip文件即为一个模块,即一个JavaScrip文件只能定义一个define函数。

RequireJS最佳实践推荐,定义模块时不要指定模块标识。这样方便后期压缩。

RequireJS最佳实践推荐推行尽量将代码封装到define函数里面。尽量不要使用shim配置项。

以下代码为定义一个模块的简单示例:

define(["jquery"],function($){

    //你的封装的代码

 });

上面的代码应该封装到一个JavaScrip文件中,其作用是定义一个模块,而且这个模块依赖于其他的模块,这里是指依赖jquery模块,这个模块在配置里已经被定义,如果没被定义,则有一套默认的查找机制,(ps:后期会专门写一篇相关文章),第二个参数为依赖模块执行后注入的参数,这样在你的代码中就可以肆无忌惮的使用美元($)啦。

模块化核心之加载模块

同定义模块一样,RequireJS提供require这个函数用来加载模块,同样有些规范需要我们遵守,

一个JavaScrip文件最好只定义一个require模块入口。

require一般放在页面的入口出,用来加载其他的模块。

以下代码是require的简单利用:

require(["jquery"],function($){

    // todo

});

这个示例代码的作用是加载指定jquery模块,并且在回调函数中注入$。(题外话,我一般把一个业务模块为一个入口模块。)

模块化核心之配置文件

RequireJS强大的灵活性是通过配置文件来实现的,通过配置文件你可以简化模块的完整路径,可以切换同一个脚本的多个版本,统一管理脚本,也可以为非模块化的脚本指定shim操作等等。(详细请见http://www.requirejs.org/docs/api.html#config)

RequireJS简单示例

下面我们通过一个简短的例子来窥探一下RequireJS的基本运行流程,并同时加深一下前面理论基础的理解。项目示例的目录结构如下图所示:

每个文件的代码分别如下所示:

project.html



    
        
        RequireJS简单示例
    
    
        
    

main.js

require(["helper/util"], function(util) {
    // todo
});

util.js

define(function(){
    alert("Hello RequireJS!!");
});

project.html中,在script标签中指定了一个data-main属性,那么这个属性是干什么用的呢?它用来指定页面脚本的入口,简单来说就是告诉页面,你在找脚本嘛,沿着这个入口进去就知道了。

通过data-main我们就知道入口脚本的位置,通过这个位置我们就知道了示例中的入口脚本文件所处位置为scripts/main.js,在这个页面中require只调用了一次,和上面说的一样,这个函数的作用是加载指定的依赖模块。

main.js中,指定了页面加载的模块为helper/util,然后RequireJS就会得出具体的模块路径地址,示例中该模块的地址为:scripts/helper/util.js。然后我们进入到这个页面,发现内部的代码都是通过define函数来包裹的,这也符合上面说的,模块的定义最好是通过define函数包裹起来。

找到这个模块后,加载并调用,然后在页面就会弹出一个Hello RequireJS!!警告框。

帮助文档

RequireJS官网:http://requirejs.org/
RequireJS中文站:http://www.requirejs.cn/ (不太稳定)

拓展阅读

链接:http://justineo.github.io/singles/writing-modular-js/
链接:http://efe.baidu.com/blog/dissecting-amd-what/
链接:http://www.udpwork.com/item/3978.html
链接:http://justineo.github.io/singles/writing-modular-js/
链接:http://cyj.me/why-seajs/requirejs/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85388.html

相关文章

  • 前端webpack workflow(一)——Webpack入门

    摘要:开发这样一款加载器最大原因,就是为了代码分离以及静态资源模块化无缝接合。异步方式,将依赖分割成多个节点,然后每个节点形成一个新的文件块。会处理最常见的模块标准和。通过声明依赖,可以选择一个本地的版本,而不需要使用全局声明的版本。 作者:Jogis 原文链接:https://github.com/yesvods/Blog/issues/2 转载请注明原文链接以及作者信息 模块加载器...

    DevWiki 评论0 收藏0
  • 前端webpack workflow(一)——Webpack入门

    摘要:开发这样一款加载器最大原因,就是为了代码分离以及静态资源模块化无缝接合。异步方式,将依赖分割成多个节点,然后每个节点形成一个新的文件块。会处理最常见的模块标准和。通过声明依赖,可以选择一个本地的版本,而不需要使用全局声明的版本。 作者:Jogis 原文链接:https://github.com/yesvods/Blog/issues/2 转载请注明原文链接以及作者信息 模块加载器...

    khs1994 评论0 收藏0
  • 前端webpack workflow(一)——Webpack入门

    摘要:开发这样一款加载器最大原因,就是为了代码分离以及静态资源模块化无缝接合。异步方式,将依赖分割成多个节点,然后每个节点形成一个新的文件块。会处理最常见的模块标准和。通过声明依赖,可以选择一个本地的版本,而不需要使用全局声明的版本。 作者:Jogis 原文链接:https://github.com/yesvods/Blog/issues/2 转载请注明原文链接以及作者信息 模块加载器...

    hiYoHoo 评论0 收藏0
  • 【前端构建】RequireJS及其优化工具

    摘要:介绍一款模块加载工具的入门,并且重点介绍其优化工具。发布目录项目源代码工具目录,例如构建工具等。另外,前端代码发布前都会进行压缩,使文件足够小。原来是因为里了,所以优化工具把也合并进来了。而优化工具要用好,要多尝试他们的配置选项。 前端变化太快,如今RequireJS已经无法吸引眼球了。介绍一款模块加载工具:RequireJS的入门,并且重点介绍其优化工具。 一、RequireJS简介...

    Loong_T 评论0 收藏0

发表评论

0条评论

syoya

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<