[原创作品] 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 zhuttymore@126.com
 * 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 zhuttymore@126.com
 * 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

原文地址:https://www.cnblogs.com/zhutty/p/4664086.html