QWrap简介之核心库定制

发表于 5年以前 | 总阅读数：1656 次

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