JKisJK - 博客园

QWrap简介之：Apps 应用--- 收获果实

摘要： “Helper + Wrap + Retouch + Apps主线”之Apps。QWrap的根本使命，是：被应用、为项目开发或组件开发的同学提供易用好用的库。Jquery与Prototype库，最后给用户使用的，都是一个js，没有多种应用的概念。如果用户想要定制一个满足自身需要的特别版本，需要自己思考个性化的途径。就算是自己想办法，这两个库也是很刚性的库，改、拆、插入功能都很有困难，最多只能在外面包一层。前文已讲过Helper规范、Wrap模式、Retouch机制，它们都是QWrap的实现方式，是技术层面的内容。这些实现方式造就了QWrap能屈能伸、刚柔并济，这让QWrap有多种应用变得自然而阅读全文

posted @ 2011-04-13 19:38 JKisJK 阅读(1541) 评论(0) 推荐(1)

QWrap简介之：retouch机制小结

摘要：前面已有四篇文章介绍retouch：QWrap简介之：Retouch ---润饰、渲染 QWrap简介之：core_retouch ---渲染原生类QWrap简介之：dom_retouch --- NodeW 勇士装甲QWrap简介之：youa_retouch --- 项目个性还是回到retouch的意思上来：润饰、渲染。纯洁、静态、针对性的Helper规范，以及清筋健骨的Wrap模式，让retouch变得简单自然。而灵活自由的retouch，又让严谨生硬的Helper与精瘦的Wrap结合，产出丰满健壮个性还简单的用户产品。但是，retouch也有一些自身的问题：1.因为用户使用的，是经过变换阅读全文

posted @ 2011-04-10 15:34 JKisJK 阅读(719) 评论(0) 推荐(0)

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') : 阅读全文

posted @ 2011-04-10 13:59 JKisJK 阅读(1673) 评论(0) 推荐(0)

QWrap简介之：dom_retouch --- NodeW 勇士装甲

摘要：在《QWrap简介之：NodeW ---Node包装》一文中已介绍过NodeW，不过，那是他没配装备的样子。NodeW是一个勇士的坯子，需要装甲以后才能成为真正的勇士。QWrap已经有很多"甲"，包括：NodeH、EventTargetH、JssTargetH、ArrayH。可以这么说：由Helper堆砌起来的QWrap只是一个工具集，与是YUI2类似。我们用工具也可以来做事，不过显得有些生硬。我们还可以请一个勇士来，让勇士来使用这些工具，而我们来指挥勇士。js/dom/dom_retouch.js的一个主要任务，就是为NodeW这个勇士装甲。好的，我们明白了这些，那我们就阅读全文

posted @ 2011-04-10 12:23 JKisJK 阅读(1625) 评论(1) 推荐(0)

QWrap简介之：core_retouch ---渲染原生类

摘要： Prototype框架最开始挖掘了javascript的prototype，不过原型渲染是有代价的，例如：IE下为Array.prototype添加forEach后，会导致对数组作for in循环时，多出一些不希望看到的东西。这是因为我们添加的方法，在某些浏览器下，无法进行设置enumerable为false，导致它会被for in出来。但是易于使用又诱惑我们那样做，我们需要有所取舍。这里推荐的core_retouch是将风格调成与prototpye框架一致，所以也会有prototype所拥有的缺点：1。如果渲染的方法与标准有差异，会给某些用户留下坑坑。2。同时存在多个JS框架时，如果都想渲染阅读全文

posted @ 2011-03-26 19:36 JKisJK 阅读(646) 评论(0) 推荐(0)

QWrap简介之：Retouch ---润饰、渲染

摘要： “Helper + Wrap + Retouch + Apps主线”之Retouch。下面两行代码，比较一下，有什么区别：QW.NodeW('div').show();W('div').show();前者，看起来很清晰准确，可是，会有点不爽：“‘QW.NodeW’，能不能给个简短的命名？”。后者，写起来很简单，可是，会有点不放心：“这个W从何而来？它会不会与已有的全局变量产生冲突？”各有优劣，如何选择？站在QWrap开发者的角度看：我们“应该提供”一个只有一个全局变量的库，这样才不会与别人产生冲突。站在QWrap使用者的角度看：我们“要用”一个简单易用的东西，我阅读全文

posted @ 2011-03-26 17:51 JKisJK 阅读(731) 评论(2) 推荐(1)

QWrap简介之：EventW ---Event包装

摘要：事件在dom操作中，也有着重要的意义。不过，对于项目程序员同学，只需知道怎么用就可以了。如果在看本文之前，还没有理解清楚标准的dom event，那么请忽略本文，免得产生更多的纠结。事件对象与节点对象一样，无法通过渲染原生dom的Event的原型来达到扩展与兼容的效果，所以，也采用Wrap模型来解决这个问题。EventW就是针对Event的包装。它的核是原生的event。前面介绍NodeW是按进化的思路由浅入深的介绍，反个方向，从最终用法来反观EventW的实现。event在事件监控中会用到。为元素添加事件，通常的用法应该是这样的：//<div class="mydiv&quo 阅读全文

posted @ 2011-03-26 14:51 JKisJK 阅读(723) 评论(2) 推荐(0)

QWrap简介之：NodeW ---Node包装

摘要：专注于dom的jquery广受欢迎，说明了dom的节点操作在js应用中的沉重份量。节点操作需求多样，如果只局限于节点原型扩展，会阻碍重重束手束脚。针对节点的包装“NodeW”的出现，把节点的操作带到了一个没有边际的新天地。前文也提到，jquery的实质，就是一个nodelist的包装。我们先假设有一个针对Node的Helper：var NodeH = { setStyle: function(el, attribute, value) { el.style[attribute] = value; }, getStyle: function(el, attribute) { return el. 阅读全文

posted @ 2011-03-25 21:14 JKisJK 阅读(1893) 评论(4) 推荐(2)

js组件的css加载方案

摘要：组件开发时，通常会有配有一个css文件资源。但是在实用时，为了减少请求数，这个css有可能被合并在页面的css中。那么，写组件时是否需加要载这个css呢？应对策略：组件的css前加一个.js_xcomponent_css_loaded的规则，来标识该组件对应的css是否已加载。而在组件的js里，作一个判断，如果css未预加载（包括独立预加载、或被包含在其它的css文件中一起预加载），则进行加载。典型代码如下：<html><head><link hrefffff="dddd/panel.css" rel="stylesheet" 阅读全文

posted @ 2011-03-24 15:59 JKisJK 阅读(1219) 评论(0) 推荐(0)

QWrap简介之：Wrap模式

摘要：前面已讲了不少Helper的内容了，下面再介绍一下“Helper + Wrap + Retouch + Apps主线”中的Wrap。Wrap是什么？Wrap就是在一个核(core)的外面包的一层皮。可以为Wrap加很多针对它的core的方法。这样理解：Wrap是一个剃须刀包装盒，core是被包装的剃须刀，现在包装盒子上有很多说明，并不是在说这个盒子，而是在说被包装的剃须刀。-----有了这个盒子后，剃须刀还是原封不动的，但是剃须刀却有了“说明书”的功能。对于习惯了prototype方式的js同学来说，可能有点绕。通常，我们希望某个对象（例如dom里的Element元素）拥有某些功能，最直接的想阅读全文

posted @ 2011-03-24 13:40 JKisJK 阅读(2381) 评论(2) 推荐(1)