[原创作品] RequireJs入门进阶教程

　　最近我发现RSS采集数据是个很好玩的东西，就是可以直接把别人的数据放在自己的网站上。如果网友们在其他地方发现这篇文章，还是来博客园看吧（http://zhutty.cnblogs.com）。这样代码比较整洁。另外，欢迎来群里交流，164858883。

好了，这次随笔主要讲一个web优化功能的框架。RequireJs.

    官方的介绍是这样的：RequireJS is a JavaScript file and module loader.对，就一句话就够了。它的功能就是加载模块。

    这涉及到Web优化的问题，如果都把js写在页面上，或者多个文件上，直接引入，都会使页面非常卡顿。在低配置计算机或手机浏览起来，简直无法直视。所以，it工程师们就想到了把说有的js合在一个文件里面，单从软件工程的角度来讲，这无法维护。严重违反低耦合这个基本要求。好了，就这样，Require就出现了。

　　Require不仅可以在浏览器中使用，而且还可以使用其他javascript，比如，nodejs. 顺便说一下，nodejs也遵循commonjs规范，底层为c++实现，所以执行效率比较高。当然，它是运行在服务器端。

      好了，现在说一下这个demo的web目录的基本结构。

      www

　　|-App

　　　　|-Controller

　　　　|-Model

　　　　|-main.js

　　|-Lib

　　　　|-Require.js

　　　　|-jquery.js

      |-index.html

　　|-config.js

　　|-main.js

 

好，先来讲述一下怎么个运行机制。在页面中引入requirejs。

index.html

1 <script main-data="main" src="Lib/Require.js"></script>

main-data是入口文件，因为require说操作的文件都是以js文件，所以不需要写后缀。这里对应的是根目录的main.js。

www/main.js

1 /**
2  * Created by Steven on 2015/07/21.
3  * This is the page main entrance
4  */
5 requirejs(['./config'],function(){
6     requirejs(['app/main']);
7 
8 });

一般这个入口都是加载配置，和引入应用的入口。OK,看看配置 config.js

/**
 * Created by Steven on 2015/07/21.
 * @email [email protected]
 * This is a config file
 */

requirejs.config({
    baseUrl: 'lib',
    paths: {
        app: '../app'
    },
    shim:{
        backbone : {
            deps : ['underscore'],
            exports : 'backbone'
        },
        localstorage:{
            deps : ['backbone'],
            exports : 'backbone.localStorage'
        }
    }
});

配置项的baseUrl确定库的文件，也就是优先加载，这里和require()有一定的联系，待会再说。看下应用的主要文件。

/**
 * Created by Steven on 2015/07/21
 * @email [email protected]
 * This is the main of the app
 */
define(function (require) {

    require(['jquery', 'underscore', 'backbone', 'backbone.localStorage'], function ($, _, Backbone, __) {

     //U can do something here with jquery, backbone

    });

});

参照以上代码，做一丢丢总结：

1、定义模块：define(foo);

2、引入模块require()和requirejs()两者的区别是：前者从配置的路径中加载，后者根据文件路径加载。

 

OK, 这就介绍到这，原创作品，转载请注明出处：http://zhutty.cnblogs.com