Skip to content

Latest commit

 

History

History
202 lines (138 loc) · 6.98 KB

api.md

File metadata and controls

202 lines (138 loc) · 6.98 KB

#lodJS lodJS会占用全局命名空间lodjs,是一个对象,有如下属性:

  • version {String} 版本号
  • use {Function} 使用已定义的模块
  • loadjs {Funtion} 加载js文件
  • config {Function} 配置参数
  • define {Function} 定义模块
  • require {Function} 请求已加载的模块

下面是这些属性的详细解释。

##define lodJS会占用全局变量define,作为定义模块的接口,定义模块的代码如下:

define(id?, deps?, module);
  • [id] {String} 定义模块的id,可省略,若省略此参数,为匿名函数,其id为js的文件名。
  • [deps] {Array} 模块的依赖数组,可省略,若省略此参数则为独立模块。
  • module {*} 任意值
  • return {*} 任意值 模块的输出

下面是定义模块的一些例子:

###定义简单值 lodJS可定义任何值,包括null,下面是定义字符串的例子:

//my/shirt.js
define("black");

###简单值对 如果一个模块仅含值对,没有任何依赖,则在define()中定义这些值对就好了:

//my/shirt.js:
define({
    color: "black",
    size: "unisize"
});

###函数式定义 如果一个模块没有任何依赖,但需要一个做setup工作的函数,则在define()中定义该函数,并将其传给define():

//my/shirt.js
define(function () {
    //做一些初始化工作

    return {
        color: "black",
        size: "unisize"
    }
});

###存在依赖的函数式定义 如果模块存在依赖:则第一个参数是依赖的名称数组;第二个参数是函数,在模块的所有依赖加载完毕后,该函数会被调用来定义该模块,因此该模块应该返回一个定义了本模块的object。依赖关系会以参数的形式注入到该函数上,参数列表与依赖名称列表一一对应。

//my/shirt.js 依赖cart和和inventory
//依赖当前路径下的模块
define(["./cart", "./inventory"], function(cart, inventory) {
        //返回shirt模块的输出
        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                inventory.decrement(this);
                cart.add(this);
            }
        }
    }
);

本示例创建了一个my/shirt模块,它依赖于my/cart及my/inventory。磁盘上各文件分布如下:

  • my/cart.js
  • my/inventory.js
  • my/shirt.js

模块函数以参数"cart"及"inventory"使用这两个以"./cart"及"./inventory"名称指定的模块。在这两个模块加载完毕之前,模块函数不会被调用。 严重不鼓励模块定义全局变量。遵循此处的定义模式,可以使得同一模块的不同版本并存于同一个页面上(参见 高级用法 )。另外,函参的顺序应与依赖顺序保存一致。 返回的object定义了"my/shirt"模块。这种定义模式下,"my/shirt"不作为一个全局变量而存在。

###commonjs支持 如果你现有一些以CommonJS模块格式编写的代码,而这些代码难于使用上述依赖名称数组参数的形式来重构,你可以考虑直接将这些依赖对应到一些本地变量中进行使用。你可以使用一个CommonJS的简单包装来实现:

define(function(require, exports, module) {
    var a = require('a'),
        b = require('b');

    //Return the module value
    return function () {};
});

该包装方法依靠Function.prototype.toString()将函数内容赋予一个有意义的字串值,但在一些设备如PS3及一些老的Opera手机浏览器中不起作用。

###定义一个命名模块 你可能会看到一些define()中包含了一个模块名称作为首个参数:

//显示定义 "foo/title" 模块:
define("foo/title", function() {
    //模块内容
});

可以显式指定模块名称,但这使模块更不具备移植性——就是说若你将文件移动到其他目录下,你就得重命名。一般最好避免对模块硬编码。

###其他注意事项 一个文件一个模块: 每个Javascript文件应该只定义一个模块,这是模块名-至-文件名查找机制的自然要求。

###define.amd AMD规范规定define函数要有一个amd属性用来标记期遵循AMD规范,lodJS的amd属性所示:

{
	from: 'lodjs';
}

lodJS扩展了自定义的from属性,用来标记来自lodJS。

###lodjs.define

lodJS在lodjs中保留了一份对define函数的引用,可以用来在define冲突时备用。

lodjs.define = define;

##lodjs.use

use是使用模块的方法,定义好了模块,下一步就是使用模块,use有两个参数如下:

  • deps {String|Array} 使用的模块
  • callback {Function} 回调函数

其会将使用的模块作为参数传入回调函数中。

###使用单个模块

当只用一个模块时,可作为字符串传入,use中的模块可以是绝对路径,或相对路径,相对路径是相对于baseUrl。

lodjs.use('my/shirt', function (shirt) {
	console.log(shirt);
});

###使用多个模块

若想同时使用多个模块,可使用数组方式:

lodjs.use(['my/shirt', 'my/shirt2'], function (shirt, shirt2) {
	console.log(shirt, shirt2);
});

##lodjs.config 可用来自定义lodJS的配置选项,来自定义功能。可像下面这样使用:

lodjs.config({});

config会返回当前配置信息的一份深拷贝,可用来查看当前的配置信息(调试很好用)。

其支持如下参数:

###baseUrl 配置当前的根目录,主要用于定义模块的依赖和使用模块时路径的解析,默认是lodjs.js所在的目录,可配置为其他目录,如下,配置当前路径下的js路径为本目录:

lodjs.config({
	baseUrl: 'js'
})

###path path是一个非常强大的功能,对于程序的可移植性非常有用,想象一下我们有一个lib目录,如果有一天期路径改变了,我们要去更改所有引用里面模块的js,那将是灾难,解决这个可以配置一个path,并在路径更改是改变path即可:

lodjs.config({
	path: {'lib': 'js/lib'}
});

当lib的路径改变了,我们只需改下配置即可,应用的代码如下所示,lodjs内部会对lib做替换:

define(['lib/jquery'], function($){});

**注意:**path中配置的相对路径是基于baseUrl。

##lodjs.loadjs

可用来载入一个js文件,有如下参数:

  • src {String} js的路径
  • success {Function} js载入成功后的回调函数
  • error {Function} js载入失败后的回调函数
  • option {Object} 一些自定义参数

典型的使用方式如下:

lodjs.loadjs('my.js', function () {}, function () {});

option可支持如下属性:

  • charest 默认的字符集是文档的字符集,一般不需要手动设置,除非你想实验一下
  • cache 此属性默认为false,设置为true后,会自定给请求的js添加时间戳,开发时有用

##lodjs.require 可用来请求一个已经加载完成的模块,这个方法对于在控制台调试非常有用,对于尚未加载的模块不会加载模块。

lodjs.require('my/shirt');

注意:此处的相对路径相对于baseUrl。

##lodjs.version 用来表示lodjs的版本。