zoukankan      html  css  js  c++  java
  • 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/

  • 相关阅读:
    asp.net大文本保存 framework4.0
    temp文件夹权限对ASP网站以及ASP.NET网站的影响【转载】
    将access数据转移到sql server
    MVC图片上传、剪辑、缩略、水印
    魔兽War3按键精灵Ⅱ(201294)
    PHP中应用CKEditor和CKFinder上传图片读取图片
    C#中get和set个人理解
    asp.net验证码实现
    转三篇文章关于php中session机制
    ORM组件 ELinq (五)映射配置之XML
  • 原文地址:https://www.cnblogs.com/xing901022/p/4658548.html
Copyright © 2011-2022 走看看