2011 年 3月随笔档案 - JKisJK

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 阅读(636) 评论(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 阅读(699) 评论(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 阅读(696) 评论(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 阅读(1876) 评论(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 阅读(1211) 评论(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 阅读(2330) 评论(2) 推荐(1) 编辑

QWrap简介之：HelperH 针对helper的Helper

摘要：HelperH是针对helper的Helper。这个理解可能有点绕。如之前的介绍，Helper对象是满足“纯洁”“静态”“针对性”的对象，那么，针对“‘纯洁’‘静态’‘针对性’的对象”的一个“纯洁”“静态”“针对性”的对象，就是针对helper的Helper了。OK，理解了这个有点绕的概念之后，再来看下这个HelperH吧。众多helper满足Helper规范，那么，可以针对这些很规范的对象的所有方法，作一些移植或变换处理。因为处理是一致的，所以，我们把这些处理也抽象成方法，集成在HelperH中。或许，这个是QWrap里最费解的一个概念。它的代码也才一百行左右，不过要想理解透，似乎需要等要以阅读全文

posted @ 2011-03-23 17:02 JKisJK 阅读(593) 评论(0) 推荐(0) 编辑

QWrap简介之：FunctionH 针对function的Helper

摘要：正如《序》里所说，很多同学是由于对函数变换（泛函）感兴趣，从而来了解QWrap的，例如，从月影的博客三言两语说清QWrap核心模式精髓而来的。FunctionH的代码，也就那么几十行。不过，如果不理解思路，可能会因为“函数变换”的概念有点难于理解，而放弃对QWrap的围观。本文粗略的介绍一下FunctionH的思路。FuncitonH，就是什对function的Helper。javascript中，直观的感觉，Function有好几种，如：静态函数（Funciton）、类（Class）、方法（method），它们都是Function，他们最大的区别，可能就是this所指。而this是“一个函数阅读全文

posted @ 2011-03-23 16:37 JKisJK 阅读(924) 评论(1) 推荐(0) 编辑

QWrap简介之：Helper堆砌

摘要：有了Helper规范，我们就可以根据它来“堆砌”一个库了。QWrap里有哪些Helper或Util？列出一些主要的，如下表。ModuleHcore/module.h.js针对模块，用于模块管理StringHcore/string.h.js针对字符串ObjectHcore/object.h.js针对Json或任意类型的对象或值ArrayHcore/array.h.js针对数组DateHcore/date.h.js针对日期FunctionHcore/function.h.js针对函数ClassHcore/class.h.js针对Class（类）HelperHcore/helper.h.js针对He 阅读全文

posted @ 2011-03-22 18:04 JKisJK 阅读(641) 评论(0) 推荐(1) 编辑

QWrap简介之：Helper规范

摘要：Helper规范是一个很简单轻松的规范，这个在core/js/helper.h.js里有提到。一个Helper是指同时满足如下条件的一个对象： 1。Helper是一个不带有可枚举proto属性的简单对象（这意味着你可以用for...in...枚举一个Helper中的所有属性和方法） 2。Helper可以拥有属性和方法，但Helper对方法的定义必须满足如下条件： 2.1. Helper的方法必须是静态方法，即内部不能使用this。 2.2. 同一个Helper中的方法的第一个参数必须是相同类型或相同泛型。也可以分拆成三点来描述： 1。Helper是一个不带有可枚举proto属性的简单对象。 ( 阅读全文

posted @ 2011-03-21 19:09 JKisJK 阅读(1058) 评论(1) 推荐(1) 编辑

QWrap简介之：瘦主干

摘要：插叙一下QWrap的根命名空间。QWrap的根命名空间是“QW”，QWrap中的命名空间，采用的是大驼峰，QW是“QWrap”的两个驼峰，同时也是QWrap的前两个字符。关于QWrap的命名，也有不少同学问过“QWrap是什么意思？”Query and Wrap、Quick Wrap、 Cute Wrap？随便怎么理解吧。在最开始命名的时候，也犹豫过很多名字，不过最后还是采用了这个。它与这个库的思想与特点挂钩，并且是个新词，不会与别人重名，利于搜索。缺点是：作为根命名空间，“QW”两个字符输入不大方便，特别是对于习惯用左手小指按Shift键的同学，好在在实际应用中（例如，Youa版典型应用），阅读全文

posted @ 2011-03-21 15:17 JKisJK 阅读(569) 评论(0) 推荐(0) 编辑

QWrap简介之：设计主线

摘要：前文列了一推关于核心(core+dom)的需求，可是，我们如何来实现它。QWrap的前身，我们叫BBLib。BBLib实生时，也参考过很多框架，后来又经过一系列项目的锤炼，再后来我们不断检视BBLib发现有必要重构一个拥有自己特色与灵魂的全新产品。于是，我们抛开一切历史包袱，并带上更多的期望与使命，升华沉淀出一个新的框架，就是QWrap。QWrap的第一条设计主线，就是：Helper + Wrap + Retouch + AppsHelper规范----写码与应用分离，提供一套标准严谨的静态方法。Wrap模式----一种包装模式。让无法改写prototype的Element与Helper结合，阅读全文

posted @ 2011-03-19 19:39 JKisJK 阅读(804) 评论(0) 推荐(1) 编辑

QWrap简介之：梦想、使命、目标

摘要：市面上的库或框架很多，都值得认真学习与大力借鉴。例如：Prototype： MS最早成型的js库。贡献：多浏览器解决方案、Ajax、$、挖掘prototypeYUI2：贡献：Dom系列方法、系列组件、YUI Compressor、YUI Doc。YUI3：贡献：依赖管理与异步加载、沙箱安全机制。Jquery：贡献：selector、jquery链式调用、gsetter写法(采用get first/set all策略)以及其它简单写法与命名Dojo：贡献：dojo.require机制(后来被YUI3发扬光大)Mootools：贡献：面向对象，new Class(小写的class是保留字哦)都很成阅读全文

posted @ 2011-03-19 18:33 JKisJK 阅读(1868) 评论(1) 推荐(4) 编辑

QWrap简介之：序

摘要：前端之大，框架或框枷很多。QWrap的本意，只是服务于某个项目。但当它发展到相对成熟、QWrap团队就有了让它为行业作出更大贡献的想法。2010年下半年，QWrap上到github，方便与某些行内朋友交流；2011年元月份末，QWrap网站开通；至今也快两个月时间了。也陆续有很多同学反馈看法与意见，也有同学不惜笔墨慷慨评论，让我们很感动。作为新生儿，QWrap的介绍文档很少，这里有一个粗略的设计思路简介：http://dev.qwrap.com/resource/js/_docs/QWrap-Design.ppt，可能是没什么人看，也有可能是太过粗略不够清晰，反正现在的情形是：对QWrap感兴阅读全文

posted @ 2011-03-19 13:32 JKisJK 阅读(1094) 评论(2) 推荐(0) 编辑

关于“求余”运算的一些小感想

摘要：刚看到网友周XY的一篇随笔里讲到求余运算。http://www.cnblogs.com/zhouxiaoyi/archive/2011/03/19/1988641.html也忍不住发一点小感想。余数本来是自然数计算里面的一个概念：指除法中被除数未被除尽的部分。 7 / 3 = 2 余 1可以扩展到所有整数：7 / (-3) = -2 余 1(-7) / (-3) = 2 余 -1(-7) / 3 = -2 余 -1也可以扩展到所有实数：0.7 / 0.3 = 2 余 0.10.7 / (-0.3) = -2 余 0.1(-0.7) / (-0.3) = 2 余 -0.1(-0.7) / 0.3 阅读全文

posted @ 2011-03-19 12:20 JKisJK 阅读(1734) 评论(0) 推荐(0) 编辑

QWrap代码规范化经历

摘要：花了几天时间，对QWrap的代码，都努力按jslint的规范调整了下。规范化后，看起来还是挺爽的。因为子龙同学提供的自动格式化与规范检查的集成工具，这个工作顺利了好多。美中的足的也有一些问题，主要有：1。要想完全遵循规范，貌似难度很大，所以，只能放弃“0错误”的追求了。2。被认为是容易引起误解的用法：a && b || c ----》》》(a && b) || c 小评：加括号后看起来更清晰，让那些不明白&&与||优先级的同学也能轻松看懂。不过要多写一个括号，感觉有点可惜。var a = function(){}(); ----》》》var a 阅读全文

posted @ 2011-03-10 18:11 JKisJK 阅读(1738) 评论(2) 推荐(1) 编辑

QWrap的js单元测试工具

摘要：在QWrap的js/_tools下面，有几个工具，还是挺实用的。今天介绍一下单元测试工具。QWrap的单元测试（unittest）工具，是基于jsspec（http://jania.pe.kr/aw/moin.cgi/JSSpec）的语法来的。其css也是完全照搬jsspec。相对于jsspec，改变有：代码重构、弃用多次运行(仅对未通过的试例)策略、移去对原型的渲染、部分功能增删。如何使用qwrap的jsspec：<link rel="stylesheet" type="text/css" href="http://dev.qwrap. 阅读全文

posted @ 2011-03-07 16:16 JKisJK 阅读(1923) 评论(0) 推荐(0) 编辑

让JS函数懒惰执行---lazyApply

摘要：我只能说，这是一个很有用的函数。输入“1”试试：<input id="test1" value=""><script> /** * 懒惰执行某函数：一直到不得不执行的时候才执行。 * @method lazyApply * @static * @param {Function} fun 调用函数 * @param {Object} thisObj 相当于apply方法的thisObj参数 * @param {Array} argArray 相当于apply方法的argArray参数 * @param {int} ims inter 阅读全文

posted @ 2011-03-03 19:44 JKisJK 阅读(1715) 评论(2) 推荐(0) 编辑

JKisJK

03 2011 档案