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>
    <head> <meta http-quiv="Content-Type" content="text/html;charset=UTF-8"> <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>
     

      其中,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/

  • 相关阅读:
    2021冬季学期有感与评价
    Scala变量和数据类型
    Scala运算符
    pytorch基本使用
    Vue组件
    Scala函数式编程
    Python中的运算符
    Scala流程控制
    Scala环境搭建
    用于测试GRPC服务的UI工具BloomRpc
  • 原文地址:https://www.cnblogs.com/wyaocn/p/5762262.html
Copyright © 2011-2022 走看看