提供YUI2一样的静态方法库,同时又用所谓的Helper规范来做到真正的绝对静态,让组件开发者可以发布出无依赖的组件。
其中,组件无依赖化,也就是核心库定制这个特性,在某些场景下还是非常有用的。QWrap提供了相应的工具来实现,JK这篇文章有详细说明。只是这个工具藏得很深没多少人知道,好酒也怕巷子深~ 最近我在这个工具的基础上增加了代码选取的功能,一起再给大家介绍下。
首先,访问代码选取小工具页面。
第一步,选择要用到的方法。这 一步比较好理解,例如要用到数组迭代就选中ArrayH下的forEach,需要格式化日期功能就选择DateH下的format,依此类推。特别 的,Browser(浏览器UA相关)、Selector、CustEvent(自定义事件)这三个模块目前是不能拆分的,只能按模块选择,并不能细化到 每个方法。
第二步,选择Retouch配置。了解过QWrap设计的同学应该知道,QWrap是通过不同Retouch配置来决定是否污染原型的。默认的Core Retouch,会执行以下操作:
mix(
Object
,
QW
.ObjectH);
//给Object增加静态方法
mix(
QW
.ArrayH,
QW
.HashsetH);
//将HashsetH合并到ArrayH
mix(
Array
,
QW
.ArrayH);
//给Array增加静态方法
mix(
Array
.
prototype
, methodize(
QW
.ArrayH));
//给Array增加原型方法
mix(
QW
.FunctionH,
QW
.ClassH);
//将ClassH合并到FunctionH
mix(
Function
,
QW
.FunctionH);
//给Function增加静态方法
mix(
Date
,
QW
.DateH);
//给Date增加静态方法
mix(
Date
.
prototype
, methodize(
QW
.DateH));
//给Date增加原型方法
mix(
String
,
QW
.StringH);
//给String增加静态方法
mix(
String
.
prototype
, methodize(
QW
.StringH));
//给String增加原型方法
|
在这一步,如果选中了Core Retouch,最终代码会根据你选择的模块,选择性的把上面那些Retouch添加到最后。
第三步,提取方法。这一步也很简单,点击按钮就会根据第一步的选择、第二步的配置生成方法list。这个list是给第四步抽取代码用的,也可以存起来以后再用。
第四步,获取最终代码。这一步更简单了,点一下按钮就大功告成,自己体验下吧~
到这里,QWrap的无依赖化定制就完成了。通过简单的四步,就能得到独一无二的QWrap核心库。
特别的,如果基于QWrap开发组件,且全部使用QWrap的静态方法,那这个组件也可以方便的Solo了——把组件用到的所有静态方法贴到第三步的文本框里,获取基于这个组件的定制化核心库,搞定!