RequireJS示例

由于JS代码庞大,文件数目多,传统的使用<script src=""></script>会带来很多性能的问题,因此requirejs可以为我们提供两种解决思路:

  1 模块化组织JS

  2 异步加载JS文件

有了这两种解决办法,能有效的帮助我们解决前端代码库的组织难题。

本文下面就模拟一个小例子,由于并没有应用实践,因此命名很戳,还请见谅。


文件功能:

require.js:

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

config.js:

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

index.html:

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

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

  是测试的模块js文件。


RequireJS一个小示例

1、首页我们在官网下载RequireJS应用,下载地址:http://requirejs.org/
2、新建一个测试目录rjs,结构如下:

     

3.require.js是下载的文件,放在public下面

4.添加静态页面index.html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script data-main="config" src="require.js"></script>
</head>
<body>
    <h1>This is test for RequireJS</h1>
    <script type="text/javascript">
        alert("index");
    </script>
</body>
</html>

5.在lib文件夹下放入a.js和b.js文件

a.js

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


b.js

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

6.在others文件夹下放入c.js文件

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

7.接下来配置config.js文件

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

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

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();
});

8.OK,项目完成,运行看看


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

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


模块化文件,一般是一个功能是一个文件。文件的名字,就是上面requireconfig中配置的模块名字。require加载文件时,会自动加上.js后缀。当某些模块依赖其他模块时,可以通过define([xxx],function(xxx){yyy});的方式添加依赖关系,require会在异步加载后,自动调整次序。

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




  

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值