require.js 简洁入门-阿里云开发者社区

require.js 简洁入门

2015-06-28 805

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 原文地址：http://blog.sae.sina.com.cn/archives/4382前言提到require.js大多数人会说提到模块化开发，AMD等等，其实require.js并没有这么多复杂的概念，这里我就希望排除这些概念，从实用的角度来简单说一下require.js是干什么的，我们要怎么用它。

原文地址：http://blog.sae.sina.com.cn/archives/4382

前言

提到require.js大多数人会说提到模块化开发，AMD等等，其实require.js并没有这么多复杂的概念，这里我就希望排除这些概念，从实用的角度来简单说一下require.js是干什么的，我们要怎么用它。

1.为什么要用require.js

大多数前端开发者都用过jquery，那么用jquery之前我们首先要把jquery加载进页面，然后在之后的js之中才可以使用$,这里面我们知道了两个道理，一个是我们不能把所有js代码都放到一个文件里，有些东西可以单独提出来成为一个模块，比如jquery。另外一个道理，一部分js是依赖另一部分js的，比如$依赖jquery文件的载入。其实require.js主要做的事情就是这两点。

当你的js项目足够大，足够复杂，依赖的库足够多，你完全需要这样一种工具去做这些js的管理，否则你的项目扩展性很差，结构很糟糕，要找到想修改的地方会很困难。

其实其他很多编程语言都已经在代码里实现了类似的功能，比如这段python。

很好理解，我们导入了web对象，然后就可以在接下来的代码里使用web.database

2.怎么用require.js？

首先页面要载入require.js，这个没办法用它自己依赖

  
        1
       
        <script 
        data-main
        =
        "js/app.js"
         
        src
        =
        "js/require.js"
        >
        </script>

既然使用require这种模式的目的是把文件分割成可理解的小块，那么我们的js文件也要分割成一个一个部分，称之为模块，官方api实例中的目录结构是这样的：

www/
- index.html
- js/
  - app/
    - sub.js
  - lib/
    - jquery.js
    - canvas.js
  - app.js

这里是一个app应用，但是普通页面开发也可以借鉴的是这个概念，就是把js根据功能和目的分开放，库文件放到一起，子模块放到一起，入口js再来选择性载入。
这里注意一下，模块化开发的目的是方便开发者理解和提高效率，如果读者认为没有必要完全则不需要硬去这么做，为了使用什么概念或者方法反而增加了开发成本的事情不要做。

定义模块

jquery这类的库文件先不提，我们说自己怎么定义一个模块，就是sub.js文件里

  
        1
       
        2
       
        3
       
        4
       
        5
       
        6
       
        7
       
        8
       
        9
       
        //定义方法
       
        define
        (
        function
         
        (
        )
         
        { 
       
        //Do setup work here 
       
        return
         
        { 
       
        color
        :
         
        "black"
        , 
       
        size
        :
         
        "unisize" 
       
        } 
       
        }
        )
        ;

如果我们定义的东西里面有依赖，比如用到jquery，我们可以这样

  
        1
       
        2
       
        3
       
        4
       
        5
       
        6
       
        7
       
        8
       
        9
       
        10
       
        11
       
        define
        (
        [
        "../lib/jquery"
        ]
        ,
         
        function
        (
        $
        )
         
        { 
       
        return
         
        { 
       
        color
        :
         
        "blue"
        , 
       
        size
        :
         
        "large"
        , 
       
        addToCart
        :
         
        function
        (
        )
         
        { 
       
        $
        (
        '.cart-color'
        )
        .
        append
        (
        color
        ) 
       
        } 
       
        } 
       
        } 
       
        )
        ;

思考一下，这里的概念是这样的，第一个参数，数组里的东西是我接下来要依赖的模块，后面的回调函数的参数，依次就是前面数组里的对象的传递。

调用模块

还记得上面那个目录结构吗，我们依然摘取官网的实例, app.js是项目的入口，内容如下

  
        1
       
        2
       
        3
       
        4
       
        5
       
        6
       
        7
       
        8
       
        9
       
        10
       
        11
       
        12
       
        13
       
        14
       
        15
       
        16
       
        17
       
        18
       
        19
       
        require
        .
        config
        (
        { 
       
        //By default load any module IDs from js/lib 
       
        baseUrl
        :
         
        'js/lib'
        , 
       
        //except, if the module ID starts with "app", 
       
        //load it from the js/app directory. paths 
       
        //config is relative to the baseUrl, and 
       
        //never includes a ".js" extension since 
       
        //the paths config could be for a directory. 
       
        paths
        :
         
        { 
       
        app
        :
         
        '../app' 
       
        } 
       
        }
        )
        ; 
       
        // Start the main app logic.
       
        require
        (
        [
        'jquery'
        ,
         
        'canvas'
        ,
         
        'app/sub'
        ]
        , 
       
        function
           
        (
        $
        ,
                
        canvas
        ,
           
        sub
        )
         
        { 
       
        //jQuery, canvas and the app/sub module are all 
       
        //loaded and can be used here now. 
       
        }
        )
        ;

require.config 配置文件，这里定义了baseUrl等

接下来我们require调用，注意这里是调用，上面是定义define，不过看到代码发现和之前类似，同样是第一个参数是依赖对象的数组，回调里会执行，参数是之前依赖的对象。

3.举个栗子

实践是检验真理的唯一标准，光看别人实践也没用，自己动手做一遍胜读十年书。我自己写了一个简单的例子，读者如果感兴趣也可以自己写一个

我有一个中间模块，我把他叫做sth，这个模块放在 sth.js 里面，如下

  
        1
       
        2
       
        3
       
        4
       
        5
       
        6
       
        7
       
        8
       
        define
        (
        function
        (
        require
        )
        { 
       
        var
         
        p1
         
        =
         
        require
        (
        'part/part1'
        )
        ; 
       
        var
         
        p2
         
        =
         
        require
        (
        'part/part2'
        )
        ; 
       
        return
         
        { 
       
        f1
        :
         
        p1
        .
        doSome
        , 
       
        f2
        :
         
        p2
        .
        doOther 
       
        } 
       
        }
        )

这里面require了另外两个子模块，part1和part2，并把他们的方法拿出来放到中间块里面并且返回
我们来看下part1，part2长啥样，首先他们都是part1.js 和part2.js文件，require.js里认为你载入的都是js脚本文件，所以统一省略.js

然后我们在主文件里，比如index.html,main.js…调用 sth

我们假设这里还有另外一个check对象，如果check为真则执行sth.f1
,否则执行sth.f2 想一下，f1，f2其实是在两个文件里面。

这里只是我虚构一个假的例子，实际应用中要根据自己的实际需求去设计构思自己的项目，再次提醒，不要为了用而用。

最后

好了骚年们，对require.js感兴趣了吗，那就去这里疯狂的看吧
http://requirejs.org/

require.js 简洁入门

前言

1.为什么要用require.js

2.怎么用require.js？

定义模块

调用模块

3.举个栗子

最后

热门文章

最新文章

相关课程

相关电子书

相关实验场景