RequireJS实例分析

  随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用。恰逢Node的流行,JS在web开发中占有越来越重要的地位。由于JS代码庞大,文件数目多,传统的使用<script src=""></script>会带来很多性能的问题,因此requirejs可以为我们提供两种解决思路:   1 模块化组织JS   2 异步加载JS文件   有了这两种解决办法,能有效的帮助我们解决前端代码库的组织难题。   本文下面就模拟一个小例子,由于并没有应用实践,因此命名很戳,还请见谅。   关于Require.js在多页面应用的实践,可以参考:multipage

层次组织

/public

|------require.js、config.js、index.html

  |-------lib/

    |-------a.js、b.js

  |-------orthers/

    |-------c.js

文件功能

require.js:

  其中requirejs的核心代码就是require.js文件,可以从官方网站上下载:

config.js:

  用于配置requirejs的相关内容,可以设置文件目录,加载模块命名匹配,以及一些依赖关系等等。

index.html:

  我们的测试页面或者网址首页。

/lib/a.js和/lib/b.js 以及 /others/c.js

  是测试的模块js文件。

代码详情

index.html

<doctype html>
<html>
    <meta http-quiv="Content-Type" content="text/html;charset=UTF-8">
    <script data-main="config" src="require.js"></script>
</html>
<body>
    <h1>This is test for RequireJS</h1>
    <script type="text/javascript">
        alert("index");
    </script>
</body>

  其中,data-main指定主要的配置文件;src为requirejs的文件。

config.js

require.config({
    // baseUrl:'/',
    paths:{
        "a":"lib/a",
        "b":"lib/b",
        "c":"others/c"
    }
    });
require(['a','b','c'],function(a,b,c){
    a.hello();
    b.hello();
    c.hello();
});

  baseUrl指定所有文件的主要目录,paths配置模块名字以及其匹配的加载路径。

  当有需要使用某些模块时,就可以通过require([xxx],function(xxx){xxx});的方式使用。

a.js

define([], function() {
  return {
    hello: function() {
      alert("hello, a");
    }
  }
});

b.js

define([], function() {
  return {
    hello: function() {
      alert("hello, b");
    }
  }
});

c.js

define([], function() {
  return {
    hello: function() {
      alert("hello, c");
    }
  }
});

  模块化文件,一般是一个功能是一个文件。文件的名字,就是上面requireconfig中配置的模块名字。require加载文件时,会自动加上.js后缀。

  当某些模块依赖其他模块时,可以通过define([xxx],function(xxx){yyy});的方式添加依赖关系,require会在异步加载后,自动调整次序。

  当访问index.html时,会先加载require.js然后把需要加载的文件都通过appendChild的方式,添加到index.html的底部。

  因此会先弹出index对话框,当执行config.js的后半部分代码时,会依次使用a.js b.js c.js,因此也会依次弹出三个对话框。

  这就是简单的模块化组织架构,如果需要参考实例项目,可以学习测试样例的源码,它主要为elasticsearch提供前端UI。

参考

【1】阮一峰requirejs:http://www.ruanyifeng.com/blog/2012/11/require_js.html

【2】requirejs中文文档:http://www.requirejs.cn/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

微信小程序云开发 初学者入门教程二

如何操作数据库,作为一名前端,如果对数据的知识不够熟悉也没关系,从现在开始好好学习就行,数据库的操作内容差不多涉及增删改查四大模块,花一些业余的时间在上面,也必...

1.2K1
来自专栏云计算教程系列

如何在CentOS 7上使用Nginx的地图模块

为网站配置服务器时,可能需要执行一些常见的条件操作。例如,某些文件可能会被用户的浏览器缓存比其他文件更长,或者网站的某些部分应该只允许通过安全连接(例如需要用户...

1320
来自专栏ShaoYL

GitHub 使用手册 - 基础篇

4398
来自专栏IT技术精选文摘

为最佳性能调优 Nginx

通常来说,一个优化良好的 Linux 服务器可以达到 500,000 – 600,000 次/秒 的请求处理性能,然而我的 Nginx 服务器可以稳定地达到 9...

5695
来自专栏*坤的Blog

Word文件乱码XML

2572
来自专栏计算机编程

Ionic2 坑の补充

<h5>写在前面的话:</h5> <b>最近把玩了微信小程序过后,由于对它专属的IDE使用不当,导致在退出关闭计算机的时候没有及时清理缓存,造成缓存碎片留藏在硬...

1572
来自专栏Youngxj

Emlog插件:右下角添加不同时段问候语

2013
来自专栏编程

Linux常用网络工具总结(一)

本文整理了在实践过程中使用的Linux网络工具,这些工具提供的功能非常强大,我们平时使用的只是冰山一角,比如、、、等。 本文不会深入研究这些命令的强大用法,因为...

2987
来自专栏令仔很忙

静态网页VS动态网页

在做《牛腩新闻发布系统》的时候,建立的网页有.html的,还有.aspx,刚开始接触,还以为这些东西是一样的呢,当看ASP.NET视频的时候,听见里面讲课的老...

1811
来自专栏张戈的专栏

shell脚本实现整站缓存和预缓存,进一步提升网站整体加载速度

在 Linux 中,shell 脚本结合系统任务计划 crontab,非常简单就能实现一些复杂程序才能完成的工作,开发成本低,且简单易学。 张戈博客之前也分享过...

4369

扫码关注云+社区

领取腾讯云代金券