zoukankan      html  css  js  c++  java
  • QWrap简介之:youa_retouch 项目个性

    如果说js/core/core_retouch.js是为prototype用户作的个性化定制、js/dom/dom_retouch.js是为jquery用户与yui用户所作的个性化定制,那么,我可不可以还为我自己的项目做一些个性化定制。
    可以的。我们以youa这个用户为例,看下他又有哪些个性化定制。
    /*
    * 防重复点击
    */
    (
    function() {
    var F = function(e, handler) {
    var element = this,
    ban
    = element.nodeType != 9 ? element.getAttribute('data--ban') : null;

    if (ban && !isNaN(ban)) {
    if (element.__BAN_TIMER) {
    QW.EventH.preventDefault(e);
    return;
    }

    element.__BAN_TIMER
    = setTimeout(function() {
    element.__BAN_TIMER
    = 0;
    }, ban);
    }

    handler.call(element, e);
    };
    QW.EventTargetH.typedef(
    'click', 'click', F);
    QW.EventTargetH.typedef(
    'dblclick', 'dblclick', F);
    QW.EventTargetH.typedef(
    'submit', 'submit', F);
    }());

    /*
    * 增加别名
    */
    QW.g
    = QW.NodeH.g;
    QW.W
    = QW.NodeW;

    /*
    * 将直属于QW的方法与命名空间上提一层到window
    */
    QW.ObjectH.mix(window, QW);

    /*
    * 增加provide的产出
    */
    QW.ModuleH.provideDomains.push(window);

    可以看到,他代码里做了几件事:
    1。为了防页面重复点击导致多次提交,增加了一个自定义属性来设置重复点击时间。
    2。增加简短的别名。
    3。将QW的方法或属性mix到window上去。
    4。增加provide的产出。
    当然,它还可以做理多事的。我们先分析一下这四件事吧。

    1。为了防页面重复点击导致多次提交,增加了一个自定义属性来设置重复点击时间。
    防重复点击是一个很常见的需求,为什么浏览器没做、js框架没做,而得让项目者来做?
    ----想让他们做,他们也很为难啊!因为“防重复”太笼统,用户不好表达:“防哪些事件、防到什么程度、防的效果是什么……”
    浏览器或框架现在也没法给一个完美的方案,所以,还不如先搁置不做。
    可是,对于我们做业务的项目,又的的确确的需要。那只好辛苦做项目的同学了。
    项目同学没得推的,只好猥琐的来实现一个勉强通用的----当然,这个勉强,需要项目的需求方来接受。

    2。增加简短的别名。
    简短别名,也是很个性化的,A认为简短的,B有可能认为不简短,C有可能认为不美观,D有可能认为易冲突,E认为命名太多让人无所适从,等等等等。
    js框架不会强制有很多简短命名,最多只能是推荐简短命名,至于具体的,还是得项目同学来决定。
    youa_retouch.js是YOUA项目中所使用的。这里面的简短命名也代表着这个项目里的推荐用法。

    3。将QW的方法或属性mix到window上去。
    有同学会质疑:这样做也太冒进了吧。
    不错,是有点冒进,但是我们看一下冒进有哪些风险:产生很多全局变量、有可能全局变量冲突、增加了与其它库产生冲突的机会……
    但是它又有哪些好处呢:写代码时可以少写“QW.”三个字符。
    为什么那么多风险,竟然被“节省三个字符”压了下去?----因为我们很懒啊,我们做的是项目,“避开那些风险”的成本,小于“多敲几个字符”的成本。
    “产生很多全局变量”----没啥可怕的啊,
    “有可能全局变量冲突”----也没碰到,况且mix时没有overide,
    “增加了与其它库产生冲突的机会”----qwrap在命名风格上,与其它库好像没啥冲突。
    省了三个字符之后,我们就可以放心的用“use('Drag',function(){....})”,而不必在use的前面加上“QW.”。

    4。增加provide的产出。
    QW.provide来源于QW.ModuleH.provide,它是QWrap组件输出的建议方式。
    例如,我们通过这一句来为QW添加一个Ajax组件:QW.provide('Ajax',Ajax);默认为产出一个QW.Ajax。
    因为在youa_retouch.js里增加了provide的产出地,所以,就算后来再引入ajax.js组件代码。页面的js也可以用Ajax.post(....),而不必用在Ajax的前面加上“QW.”。
    关于provideDomains的功能,可以参见:js/core/module.h.js

    youa_retouch是一个按项目来个性化js库的典型代表。在youa项目中,同时进行了三种retouch:core_retouch、dom_retouch、youa_retouch。
    retouch后使用文档在这里可以看到:http://dev.qwrap.com/resource/js/_docs/_jk/
    可以看到,在youa项目中,既可以像jquery一样用来进行dom操作,也可以像prototype一样进行原型操作,还可以像YUI3一样用use。
    事实上,还可以像YUI2一样用Dom,不过,YUI2风格,好像已经只是历史的产物,不再被推荐,所以文档根本没有提到。

    重复一遍,youa_retouch只是一个按项目来个性化js库的典型代表,对于理解了QWrap的人,可以在自己的项目中作更多的个性化。

    附: QWrap网址:http://www.qwrap.com

  • 相关阅读:
    python脚本 pyqt 打包成windows可执行exe文件 pyinstaller
    标示符、保留字、注释
    全局变量
    Chunk
    工具类
    CCParallaxNode
    添加多个CCArmature
    Cowboy实例
    lua笔记二 赋值语句
    RenderTexture动态创建纹理
  • 原文地址:https://www.cnblogs.com/jkisjk/p/qwrap_youa_retouch.html
Copyright © 2011-2022 走看看