QWrap入门之Youa版应用

开发 前端
就像是一棵树有很多果实一样,QWrap也有很多apps,本文讲解"QWrap的Youa版应用",即apps/core_dom_youa.js。

就像是一棵树有很多果实一样,QWrap也有很多apps,本文讲解"QWrap的Youa版应用",即apps/core_dom_youa.js。

Youa是QWrap的***个真正全面使用QWrap的项目,apps/core_dom_youa.js中同时包含core、dom、youa三种retouch,在介绍Retouch机制时已经对他们分别作过介绍,他们同时起作用的结果就是:我们只引入一个js,就可以 :

像prototype一样这样写:

  1. new Date().format(); 

像jQuery一样,这样写:

  1. W('#aaa a.aaa').click(fun).css('color','red');  
  2. W('body').css('color','black').query('>h1').color('red'); 

还可以像YUI3一样这样写:

  1. use('Drag,Valid',function(){alert([Drag,Valid]);}); 

当然,也可以像YUI2一样用静态方法(当然,我们不推荐YUI2这种用法):

  1. Dom.setStyle(el,'color','red'); 

前面讲的两个应用一样,apps/core_dom_youa.js也是一个复合文件,它含以下文件:

  1. document.write('<script type="text/javascript" src="' + srcPath + 'core/core_base.js"><\/script>');  
  2.    document.write('<script type="text/javascript" src="' + srcPath + 'core/module.h.js"><\/script>');  
  3.    document.write('<script type="text/javascript" src="' + srcPath + 'core/browser.js"><\/script>');  
  4.    document.write('<script type="text/javascript" src="' + srcPath + 'core/string.h.js"><\/script>');  
  5.    document.write('<script type="text/javascript" src="' + srcPath + 'core/object.h.js"><\/script>');  
  6.    document.write('<script type="text/javascript" src="' + srcPath + 'core/array.h.js"><\/script>');  
  7.    document.write('<script type="text/javascript" src="' + srcPath + 'core/hashset.h.js"><\/script>');  
  8.    document.write('<script type="text/javascript" src="' + srcPath + 'core/date.h.js"><\/script>');  
  9.    document.write('<script type="text/javascript" src="' + srcPath + 'core/function.h.js"><\/script>');  
  10.    document.write('<script type="text/javascript" src="' + srcPath + 'core/class.h.js"><\/script>');  
  11.    document.write('<script type="text/javascript" src="' + srcPath + 'core/helper.h.js"><\/script>');  
  12.    document.write('<script type="text/javascript" src="' + srcPath + 'core/custevent.h.js"><\/script>');  
  13.    document.write('<script type="text/javascript" src="' + srcPath + 'core/custevent_retouch.js"><\/script>');  
  14.  
  15.    document.write('<script type="text/javascript" src="' + srcPath + 'dom/selector.js"><\/script>');  
  16.    document.write('<script type="text/javascript" src="' + srcPath + 'dom/dom.u.js"><\/script>');  
  17.    document.write('<script type="text/javascript" src="' + srcPath + 'dom/node.h.js"><\/script>');  
  18.    document.write('<script type="text/javascript" src="' + srcPath + 'dom/node.w.js"><\/script>');  
  19.    document.write('<script type="text/javascript" src="' + srcPath + 'dom/event.h.js"><\/script>');  
  20.    document.write('<script type="text/javascript" src="' + srcPath + 'dom/event.w.js"><\/script>');  
  21.    document.write('<script type="text/javascript" src="' + srcPath + 'dom/eventtarget.h.js"><\/script>');  
  22.    document.write('<script type="text/javascript" src="' + srcPath + 'dom/jss.js"><\/script>');  
  23.    document.write('<script type="text/javascript" src="' + srcPath + 'dom/node.c.js"><\/script>');  
  24.  
  25.    document.write('<script type="text/javascript" src="' + srcPath + 'core/core_retouch.js"><\/script>');  
  26.    document.write('<script type="text/javascript" src="' + srcPath + 'dom/dom_retouch.js"><\/script>');  
  27.    document.write('<script type="text/javascript" src="' + srcPath + 'apps/youa_retouch.js"><\/script>'); 

事实上,还包括apps/youa_modules_config.js,不过由于组件这一块还没有放出来,所以先忽略掉。。。

发布时会将各个分文件合并起来,内容如:apps/core_dom_youa.js(http://dev.qwrap.com/resource/js/_docs/_jk/js/apps/core_dom_youa.js)

这个文件经YUI压缩后大小为48K,gzip后大小为17K。可以独立使用。

在有啊的项目开发中,只需要使用一个QWrap库就可以了,之前由注释生成的文档主要只是Helper方法的基本用法,那些并不是页面编码的同学希望使用的。所以,制作一个真正给页面编码同学使用的文档,一直是一个迫切的需求。关于这个文档,一直觉得是体力活,一直寄望有新同学或外包给别人来写,拖延了很久,最终还是认为自己动手来写更切实际。2010年底,培培同学帮忙写好css与html结构,2010年十二月到2011年一月,花了一个月左右的时间,来完成这个体力活(还有好奇参与),虽说有很多不足,好在几乎能够满足同学们的需求了。----整理文档时,也趁机人肉测试了很多单元测试中未出现的case,也找到了不少足子,还是挺值得的,庆幸没有外包给别人来写文档。

正如曾在retouch小结里所讲过的,retouch后的QWrap的用法很多,只能列出一些推荐的用法,免得列得太多反而让人混淆。这份文档在这里可以看到:

http://dev.qwrap.com/resource/js/_docs/_jk/

因为做得不够专业,所以临时还是以“_jk”为目录名,等专业版本出来后再改名吧。

有了这份文档,就不用详细介绍各种用法了,看一下就明白。

有几点需要说明一下:

1. 各种Helper,在实际中并不使用。使用的都是经过变换的方法,那些变换的方法即是retouch的产物。

2. 每一个方法的使用文档里,都会有说明是它经过什么变换得来的,例如,w.addClass是"本方法是由QW.NodeH.addClass经“mul”、“methodize”变换得到",点击一下就可以看到原方法。

3. 所有方法都是QWrap的方法,与其它库的方法参数有可能不一致,大部分有QWrap自己的考量,如果同学觉得不合理可以反馈一下,方便我们改进。

4. 有啊项目之所以能只用QWrap而不用其它框架,还有一个原因是:QWrap有自己的一系列常用组件。。。这个将会在以后介绍组件时讲到。

5. 为什么没有Ajax与动画?----因为它们被降级到组件级别了。

原文:http://www.cnblogs.com/jkisjk/archive/2011/04/22/qwrap_apps_core_dom_youa.html

【编辑推荐】

  1. QWrap入门之apps果实扩展JS原生类
  2. QWrap入门之apps种子应用
  3. QWrap选择器的一个bug:tagName的大小写
  4. QWrap入门指南
责任编辑:陈贻新 来源: JKisJK
相关推荐

2011-08-09 13:29:06

2011-08-09 15:59:51

QWrap

2011-11-29 16:38:58

Knockout

2024-01-03 15:31:16

网格布局ArkTSGrid

2009-04-12 09:25:12

Symbian诺基亚移动OS

2023-01-31 15:17:44

copyMapStruct

2011-09-27 13:16:15

iptables

2011-11-28 10:44:46

Office 2010下载

2012-02-29 00:49:06

Linux学习

2011-08-08 13:15:35

QWrap

2011-07-04 14:57:56

PHP

2011-07-21 10:07:58

JavaScript

2011-08-10 17:04:43

JavaScript

2009-06-10 15:14:00

2022-11-04 14:58:59

应用开发鸿蒙

2013-09-13 13:16:05

2022-03-15 08:00:00

Flutter开发工具

2012-03-21 09:47:48

2010-05-27 17:41:09

2011-07-11 09:29:32

PHP面向对象编程
点赞
收藏

51CTO技术栈公众号