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

  • 相关阅读:
    了解 NoSQL 的必读资料
    关于什么时候用assert(断言)的思考
    这次见到了一些大侠
    NetBeans 时事通讯(刊号 # 87 Jan 12, 2010)
    动态链接库dll,静态链接库lib, 导入库lib
    新女性十得 写得了代码,查得出异常
    记录系统乱谈
    新女性十得 写得了代码,查得出异常
    fullpage.js禁止滚动
    RunningMapReduceExampleTFIDF hadoopclusternet This document describes how to run the TFIDF MapReduce example against ascii books. This project is for those who wants to experiment hadoop as a skunkworks in a small cluster (110 nodes) Google Pro
  • 原文地址:https://www.cnblogs.com/ghw0501/p/4796906.html
Copyright © 2011-2022 走看看