什么是sizzle? sizzle何用?
Sizzle 是一套前端用智能来处理模块和组件依赖关系的框架。 它遵循 CommonJS 的运行规范来完成对各个模块的动态加载。而且可以同时包含其他库而不产生冲突。 Sizzle的使用很简单,其下共有 5 个常用的方法, 只需要学习这 5 个方法便能将 Sizzle 框架驾驭完美。它们分别是 config() config.map() config.log() define() require()。具体的方法介绍请往下看。 其他我想说的是, Sizzle 经过了4个版本的修改,现在已经形成了稳定版本,大家可以放心使用。 如果在使用过程中还发现了什么问题,请及时联系我。具体联系方式请查找本站联系我。Sizzle 框架将被使用在 PJBlog4 新版本中,让我们的后台更加代码逻辑化和模块化。 那么,如何加载它呢,看代码:
<script language="javascript" src="http://assets.sizzle.cc/assets/system/javascript/sizzle.js"></script>把这个加到网站内即可,一般加载在 head 里。
config 方法介绍
config 方法是对sizzle框架的设置。它的语法是: config(key, value)。 key:设置属性的键名;value:设置属性的值。 如果当 value 值不存在的时候,config 便可以 return 这个 Key 的值。config 可以设置以下的值:
config("debug", true); // 设置框架为调试模式。
config("base", "http://assets.sizzle.cc"); // 设置框架的基址(用来简化标识路径)。
config("charset", "UTF-8"); // 设置框架的编码。
目前暂时就这么几个设置。设置很简单和容易,这里我就不多说明了。
config.log 方法介绍
显而易见,这个方法就是 console.log 的封装,用来打印数据。不过只有当debug模式开启时,这个方法才有用。
config.map 方法介绍
config.map 方法是添加和获取映射对的。什么意思呢? 就是如果当我们把 jQuery.1.7.2.js 映射成 jQuery 这样一个字符的时候,我们可以在调用的时候只输入 jQuery 就可以完成对模块的调用。我们来看几个例子:
config.map("manery", "http://xx.cn/public/manery.js"); // 我们将 http://xx.cn/public/manery.js 映射成了 manery 这样一个标识。
require("manery"); // 当我们调用 manery 这个模块的时候,客户端自动会加载 http://xx.cn/public/manery.js 这个文件。
看了实例应该可以明白了吧。
define 方法介绍
define 顾名思义就是定义的意思,那么它是定义什么的呢,当然,它定义模块。当我们创建一个模块的时候,就用到这个方法了。这个方法有 2 个参数, 一个是deps,另一个是factory。 deps 就是依赖关系数组,factory就是模块函数原型。你也可以省略deps参数而直接写入factory方法原型。请看实例:
define(["public/custom", "private/kately"], function(require, exports, module){
return {
value : "evio",
name : "name"
}
})当然,上面的例子没有任何意义,我只是举例。这个说明了,我们定义了这个模块,它依赖于 public/custom 和 private/kately 这2个模块。所以,当调用这个模块的时候,系统会有限载入依赖的其他2个模块,然后运行这个模块。 我们再来看一个实例。
define(function(require, exports, module){
var a = require("a"),
b = require("b");
exports.arr = [a, b];
})我们看到,这次没有任何的依赖关系,但是我们发现function内部的require方法。只要在这个function内存在require方法,那么,这个require的地址将自动被转化成依赖关系,所以,这个模块加载钱也加载了 a 和 b 模块。我们来看3个参数:
require, // function 类型,会获取一个模块,这个请看下一个说明文案。 exports, // 将向外部提供接口API。 module // 函数包裹原型。这3个参数是CommonJS规范的关键所在。你们不了解可以参阅CommonJS的说明。这里我就不多说了。
require 方法介绍
动态加载模块的底层函数方法。这个在整个框架中占据极为重要的位置。require有2个参数,第一个是ARR:模块队列,数组格式;另一个是FUNCTION:加载完毕后执行的方法。FUNCTION的参数个数依ARR的个数和顺序而定,内容为前面模块返回的对象或者值。我们来看一个实例:
require(["public/custom", "private/kately"], function(custom, kately){
[custom, kately].each(function(){
// do something...
});
}) require能确保模块加载完成后运行它自身的方法,而且不会重复加载。所以你可以很方便的来管理你的代码模块,实现按需加载,去除多余加载。更多的是代码开发者对模块的把控更加随意了。Sizzle 标识选择器
标识选择器是以路径为基础的。它包括以下内容:
/ 这个符号表示网站根目录选取。
: 这个符号表示从本机选取
http:// 表示从互联网选取
require("/a/b/c");
require(":a/b/c");
require("http://sizzle.cc/a/b/c");这个选择器如果定义了base 那么它就是基于base 的地址。 如果base不是互联网地址,那么它是本网址下的base标识为base的标识。呵呵,很拗口不理解吧,慢慢体会。结尾
招募Sizzle开发人员和PJBlog4开发人员。 本人联系方式: QQ(8802430) Email(evio@vip.qq.com) QQ群(7267790)。