QWrap简介之核心库定制

1638次阅读  |  发布于5年以前

围观过QWrap的同学可能会注意到其官方的特性介绍里有这么一条:

提供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了---- 把组件用到的所有静态方法贴到第三步的文本框里,获取基于这个组件的定制化核心库,搞定!

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8