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。

 

 

1 2 3

import web   db = web.database(dbn='sqlite', db="todos.db")

很好理解，咱们导入了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

//定义对象 define({     color: "black",     size: "unisize" });

 

 

 

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

 

 

1 2 3 4 5 6 7 8

//part1.js define(function(){     return {         doSome: function(){             console.log('doSome')         }     } })

 

 

 

1 2 3 4 5 6 7 8

//part2.js define(function(){     return {         doOther: function(){             console.log('doOther')         }     } })

而后咱们在主文件里，好比index.html,main.js…调用 sth

 

 

1 2 3 4 5 6 7

require(['sth','check'],function(sth,check){     if(check.ok){         sth.f1()     }else{         sth.f2()     } })

咱们假设这里还有另一个check对象，若是check为真则执行sth.f1
,不然执行sth.f2 想一下，f1，f2实际上是在两个文件里面。

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

最后

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