QWrap简介之:瘦主干
2011-03-21 15:17
176 查看
插叙一下QWrap的根命名空间。
QWrap的根命名空间是“QW”,QWrap中的命名空间,采用的是大驼峰,QW是“QWrap”的两个驼峰,同时也是QWrap的前两个字符。
关于QWrap的命名,也有不少同学问过“QWrap是什么意思?”
Query and Wrap、Quick Wrap、 Cute Wrap?随便怎么理解吧。
在最开始命名的时候,也犹豫过很多名字,不过最后还是采用了这个。它与这个库的思想与特点挂钩,并且是个新词,不会与别人重名,利于搜索。缺点是:作为根命名空间,“QW”两个字符输入不大方便,特别是对于习惯用左手小指按Shift键的同学,好在在实际应用中(例如,Youa版典型应用),QW并不需要经常输入,就像是jquery的用户,几乎不用输入“jquery”这个词一样。
QWrap的根命名空间在js/core/core_base.js里。这是整个qwrap的第一个js。内容如下:
看一下里面的内容:
View Code
这个文件的主要作用,是产生QWrap的命名空间,并且定义了几基础的属性与方法:
它的代码简化成如下:
(function() {
var _previousQW = window.QW;//记录旧QW变量
var QW = {
VERSION: "$version$", //string 脚本库的版本号
RELEASE: "$release$", //string 脚本库的发布号(小版本)
PATH: (function() {}()), //string 脚本库的运行路径
namespace: function(sSpace, root) {}, //获得一个命名空间
noConflict: function() {}, //QW无冲突化,还原可能被抢用的window.QW变量
loadJs: function(url, onsuccess, options) {}, //异步加载脚本
loadCss: function(url) {}, //加载css样式表
error: function(obj, type) {} //抛出异常
};
/*
QW.Wrap=function(core) {this.core=core;}; //这个被注释掉了,相当于是Wrap的建议写法。
*/
window.QW = QW; //输出根命名空间
}());
或许有同学会质疑“楼主的标题是‘瘦主干’,可是这个主干有点胖啊!”
是的,根命名空间,精瘦版应该是“var QW={};”。
不过,QWrap并不追求“一步到位的瘦”,那样过于形式化。而是追求“可瘦”。
例如这个core_base.js,它处于“可瘦状态”。
“可瘦”是QWrap的一个重要风格,这意味着,QWrap可以按需变瘦。即,理论上,可以用工具将QWrap中未用到的功能,当作赘肉砍掉。
一个典型的应用就是:组件无依赖化。
核心可拆/可组/可瘦/可无依赖/可变换渲染,所有的“可”,都是能用低成本实现的,而不是要花很大成本的“可”。
这种飘逸的灵活性,一直是QWrap的主体风格。
是什么让QWrap有了这种飘逸?第一个,我们归功于Helper规范吧,下一篇文章会详细介绍它。
QWrap的根命名空间是“QW”,QWrap中的命名空间,采用的是大驼峰,QW是“QWrap”的两个驼峰,同时也是QWrap的前两个字符。
关于QWrap的命名,也有不少同学问过“QWrap是什么意思?”
Query and Wrap、Quick Wrap、 Cute Wrap?随便怎么理解吧。
在最开始命名的时候,也犹豫过很多名字,不过最后还是采用了这个。它与这个库的思想与特点挂钩,并且是个新词,不会与别人重名,利于搜索。缺点是:作为根命名空间,“QW”两个字符输入不大方便,特别是对于习惯用左手小指按Shift键的同学,好在在实际应用中(例如,Youa版典型应用),QW并不需要经常输入,就像是jquery的用户,几乎不用输入“jquery”这个词一样。
QWrap的根命名空间在js/core/core_base.js里。这是整个qwrap的第一个js。内容如下:
看一下里面的内容:
View Code
/** * @singleton * @class QW QW是QWrap的默认域,所有的核心Class都应定义在QW的域下 */ (function() { var _previousQW = window.QW; var QW = { /** * @property {string} VERSION 脚本库的版本号 * @default $version$ */ VERSION: "$version$", /** * @property {string} RELEASE 脚本库的发布号(小版本) * @default $release$ */ RELEASE: "$release$", /** * @property {string} PATH 脚本库的运行路径 * @type string */ PATH: (function() { var sTags = document.getElementsByTagName("script"); return sTags[sTags.length - 1].src.replace(/\/[^\/]+\/[^\/]+$/, "/"); }()), /** * 获得一个命名空间 * @method namespace * @static * @param { String } sSpace 命名空间符符串。如果命名空间不存在,则自动创建。 * @param { Object } root (Optional) 命名空间的起点。当没传root时:如果sSpace以“.”打头,则是默认为QW为根,否则默认为window。 * @return {any} 返回命名空间对应的对象 */ namespace: function(sSpace, root) { var arr = sSpace.split('.'), i = 0, nameI; if (sSpace.indexOf('.') == 0) { i = 1; root = root || QW; } root = root || window; for (; nameI = arr[i++];) { if (!root[nameI]) { root[nameI] = {}; } root = root[nameI]; } return root; }, /** * QW无冲突化,还原可能被抢用的window.QW变量 * @method noConflict * @static * @return {json} 返回QW的命名空间 */ noConflict: function() { window.QW = _previousQW; return QW; }, /** * 异步加载脚本 * @method loadJs * @static * @param { String } url Javascript文件路径 * @param { Function } onsuccess (Optional) Javascript加载后的回调函数 * @param { Option } options (Optional) 配置选项,例如charset */ loadJs: function(url, onsuccess, options) { options = options || {}; var head = document.getElementsByTagName('head')[0] || document.documentElement, script = document.createElement('script'), done = false; script.src = url; if (options.charset) { script.charset = options.charset; } script.onerror = script.onload = script.onreadystatechange = function() { if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) { done = true; if (onsuccess) { onsuccess(); } script.onerror = script.onload = script.onreadystatechange = null; head.removeChild(script); } }; head.insertBefore(script, head.firstChild); }, /** * 加载css样式表 * @method loadCss * @static * @param { String } url Css文件路径 */ loadCss: function(url) { var head = document.getElementsByTagName('head')[0] || document.documentElement, css = document.createElement('link'); css.rel = 'stylesheet'; css.type = 'text/css'; css.href = url; head.insertBefore(css, head.firstChild); }, /** * 抛出异常 * @method error * @static * @param { obj } 异常对象 * @param { type } Error (Optional) 错误类型,默认为Error */ error: function(obj, type) { type = type || Error; throw new type(obj); } }; /* * @class Wrap Wrap包装器。在对象的外面加一个外皮 * @namespace QW * @param {any} core 被包装对象 * @return {Wrap} */ /* QW.Wrap=function(core) { this.core=core; }; */ window.QW = QW; }());
这个文件的主要作用,是产生QWrap的命名空间,并且定义了几基础的属性与方法:
它的代码简化成如下:
(function() {
var _previousQW = window.QW;//记录旧QW变量
var QW = {
VERSION: "$version$", //string 脚本库的版本号
RELEASE: "$release$", //string 脚本库的发布号(小版本)
PATH: (function() {}()), //string 脚本库的运行路径
namespace: function(sSpace, root) {}, //获得一个命名空间
noConflict: function() {}, //QW无冲突化,还原可能被抢用的window.QW变量
loadJs: function(url, onsuccess, options) {}, //异步加载脚本
loadCss: function(url) {}, //加载css样式表
error: function(obj, type) {} //抛出异常
};
/*
QW.Wrap=function(core) {this.core=core;}; //这个被注释掉了,相当于是Wrap的建议写法。
*/
window.QW = QW; //输出根命名空间
}());
或许有同学会质疑“楼主的标题是‘瘦主干’,可是这个主干有点胖啊!”
是的,根命名空间,精瘦版应该是“var QW={};”。
不过,QWrap并不追求“一步到位的瘦”,那样过于形式化。而是追求“可瘦”。
例如这个core_base.js,它处于“可瘦状态”。
“可瘦”是QWrap的一个重要风格,这意味着,QWrap可以按需变瘦。即,理论上,可以用工具将QWrap中未用到的功能,当作赘肉砍掉。
一个典型的应用就是:组件无依赖化。
核心可拆/可组/可瘦/可无依赖/可变换渲染,所有的“可”,都是能用低成本实现的,而不是要花很大成本的“可”。
这种飘逸的灵活性,一直是QWrap的主体风格。
是什么让QWrap有了这种飘逸?第一个,我们归功于Helper规范吧,下一篇文章会详细介绍它。
相关文章推荐
- QWrap简介之:FunctionH 针对function的Helper
- QWrap简介之:EventW ---Event包装
- QWrap简介之组件编写
- QWrap简介之:HelperH 针对helper的Helper
- QWrap简介之:Helper堆砌
- QWrap简介之:Retouch ---润饰、渲染
- QWrap简介之:apps果实篇之:扩展JS原生类
- QWrap简介之:core_retouch ---渲染原生类
- QWrap简介之:Apps 应用--- 收获果实
- QWrap简介之:结语
- QWrap简介之:序
- QWrap简介之:apps果实篇之:纯净core+dom
- QWrap简介之:apps果实篇之:定制
- QWrap简介之:梦想、使命、目标
- QWrap简介之:Helper规范
- QWrap简介之:NodeW ---Node包装
- QWrap简介之:apps果实篇之:种子
- QWrap简介之:设计主线
- QWrap简介之:dom_retouch --- NodeW 勇士装甲
- QWrap简介之:youa_retouch --- 项目个性