zoukankan      html  css  js  c++  java
  • requireJS的使用

    原文:http://www.360doc.com/content/15/0424/17/21412_465723215.shtml

    requireJS的使用:

    RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升。

    一般情况下,我们加载js都是直接写在页面body里面,这样会造成页面阻塞,使用require不仅能解决这个问题,还能为大规模web开发提供规范,版本管理等。

    例如一个经典的加载js是这样:

    <!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript" src="a.js"></script>
            <script type="text/javascript" src="b.js"></script>
            <script type="text/javascript" src="c.js"></script>
            <script type="text/javascript" src="d.js"></script>
        </head>
        <body>
          <span>body</span>
        </body>
    </html>

    而使用了require之后,页面变成了:

    <!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript" src="require.js"></script>
            <script type="text/javascript">
                require(["a","b","c","d"]);
            </script>
        </head>
        <body>
          <span>body</span>
        </body>
    </html>
    

      当然,我们可以使用 data-main把逻辑放到main.js文件里面

    <script data-main="js/main.js" type="text/javascript" src="libs/require.js" ></script>
    

      是不是很简单呢?


    那require怎么用呢?下面先了解一下require的基本api:
    require会定义三个变量:
    define,require,requirejs,其中require === requirejs,一般使用require更简短
    define 用来定义一个模块
    require 加载依赖模块,并执行加载完后的回调函数

    比较经典的写法是:

    require(["module"],function(module){ 
       module.function();
    })
    

      第一个参数是一个模块数组,第二个参数是回调函数,通常回调函数会有模块提供的接口,这样就实现了依赖注入,减少了全局变量污染。注意参数注入的顺序要与模块数组顺序一致,名字并不重要,顺序一致代表把对象传给这个变量。
    这是require的基本写法,那这些文件在哪找呢?
    require提供了很智能的找法,如果index.html页面加入了data-main标签,则这个目录将会成为基目录,即baseUrl,如果没有的话,index.html所在的目录将成为基目录,require默认的文件就是js文件,所以,我们在使用require的时候,可以连.js都不用写,直接require([‘a’]); 相当于加载了a.js文件

    如果文件不在这个相对路径下,我们还可以通过配置来找文件,使用require.config()的path参数;

    require.config({
        paths : {
            // 其他目录下的文件
            "a" : "../libs/zepto",
            // 绝对路径 
            "b" : "/libs/handlebars",
            // 加载cdn文件
            "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   
        }
    })
    

      path映射那些不直接放置于baseUrl下的模块名(这相当于跟冗长的模块名取个简介的名字)。设置path时起始位置是相对于baseUrl的,除非该path设置以”/”开头或含有URL协议(如http:).

    另外,通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,例如一些旧的库,或者jquery的插件库等,这时候就需要用到另一个功能:shim

    require.config({
        shim: {
            "underscore" : {
                exports : "_";
            },
            "jquery.form" : {
                deps : ["jquery"]
            }
        }
    })
    

      这里jquery.form依赖于jquery,所以我们需要添加deps参数。还可以更简单点,对作为jQuery或Backbone的插件存在而不导出任何模块变量的”模块”们, shim配置可简单设置为依赖数组

    requirejs.config({
        shim: {
            'jquery.colorize': ['jquery'],
            'jquery.scroll': ['jquery'],
            'backbone.layoutmanager': ['backbone']
        }
    });
    

      基本用法就这些,更深入的学习请参考requirejs官方文档:http://requirejs.org/
    中文版的可以再看一下这个:http://javascript.ruanyifeng.com/tool/requirejs.html

  • 相关阅读:
    【转载】总结一下Android中主题(Theme)的正确玩法
    Android获唯一标识
    AS问题解决系列3—iCCP: Not recognizing known sRGB profile
    AS问题解决系列1—Unable to execute DX错误
    Android Studio Error2
    Android Error
    NAT简单介绍
    redis缓存工具Jedis进行跨jvm加锁(分布式应用)--不幸暂弃用--能够做第三方锁使用
    工作总结1.怎样高效跟客户确定需求?
    Sqoop处理Clob与Blob字段
  • 原文地址:https://www.cnblogs.com/ghw0501/p/4796906.html
Copyright © 2011-2022 走看看