QWrap简介之:apps果实篇之:扩展JS原生类

就像是一棵树有很多果实一样,QWrap也有很多apps,本文讲解"扩展JS原生类"的应用,即apps/core_retouched.js应用。
本应用会对原生类进行扩展,方便用户操作原生对象,例如:String、Array、Function等。
本应用的典型应用场景:jquery专注于dom,所以欠缺原生对象的操作,以及模块加载机制等。本库恰好能提供,并且与jquery无冲突存在。

前面已有文章讲过core/core_retouch.js,它是一个retouch文件。
而本文讲的apps/core_retouched.js应用,它是一个复合文件,它由以下文件组成:
View Code
document.write('<script type="text/javascript" src="' + srcPath + 'core/core_base.js"><\/script>');
document.write(
'<script type="text/javascript" src="' + srcPath + 'core/module.h.js"><\/script>');
document.write(
'<script type="text/javascript" src="' + srcPath + 'core/browser.js"><\/script>');
document.write(
'<script type="text/javascript" src="' + srcPath + 'core/string.h.js"><\/script>');
document.write(
'<script type="text/javascript" src="' + srcPath + 'core/object.h.js"><\/script>');
document.write(
'<script type="text/javascript" src="' + srcPath + 'core/array.h.js"><\/script>');
document.write(
'<script type="text/javascript" src="' + srcPath + 'core/hashset.h.js"><\/script>');
document.write(
'<script type="text/javascript" src="' + srcPath + 'core/date.h.js"><\/script>');
document.write(
'<script type="text/javascript" src="' + srcPath + 'core/function.h.js"><\/script>');
document.write(
'<script type="text/javascript" src="' + srcPath + 'core/class.h.js"><\/script>');
document.write(
'<script type="text/javascript" src="' + srcPath + 'core/helper.h.js"><\/script>');
document.write(
'<script type="text/javascript" src="' + srcPath + 'core/custevent.h.js"><\/script>');
document.write(
'<script type="text/javascript" src="' + srcPath + 'core/custevent_retouch.js"><\/script>');

document.write(
'<script type="text/javascript" src="' + srcPath + 'core/core_retouch.js"><\/script>');

在实际中,如果要用到按需异步加载,还需要再加上一个模块配置文件(详情参见《QWrap简介之:apps果实篇之:种子》),
复合文件在发布上线时会将分文件合并成起来,名件名还是不变。合并后的内容为:apps/core_retouched.combo.js

我们以这一个例子来看jquery + core_retouched的应用。
View Code
<HTML><HEAD><TITLE>QWrap---FunctionH.mul</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script src="http://dev.qwrap.com/resource/js/apps/core_retouched.js" type="text/javascript"></script>
</HEAD>
<body>
<div id="id1">日期是?</div>
<div id="id2">时间是?</div>
<input type=button value="显示" onclick="test()"/>
</body>
<script type="text/javascript">
function test(){
$(
'#id1').html('日期是'+new Date().format());
$(
'#id2').html('日期是'+new Date().format('hh:mm:ss'));
}
</script>
</HTML>


上面的例子中,我们需要用到一个日期的格式化,但是这个jquery不会提供,因为jquery专注于dom,没有提供日期格式化的意图。
而有的同学使用过prototype.js框架,已经习惯了类似于“new Date().format()”、“str.trim()”这样的原型用法,后来转而使用jquery时,就觉得少了很多方法。
而QWrap的core_retouched应用,恰恰是"扩展JS原生类",专门就是提供这类应用的。

好的,我们看一下,core_retouched提供了哪些便利:

字符串相关
    s.byteLen()    //获取字节长度
    s.camelize()    //驼峰化
    s.contains(subStr)    //判断一个字符串是否包含另一个字符串
    s.dbc2sbc()    //全角转半角
    s.decamelize()    //反驼峰化
    s.decode4Html()    //为html作转码
    s.encode4Html()    //为html作解码
    s.encode4HtmlValue()    //为htmlValue作转码
    s.encode4Http()    //为http作转码
    s.encode4Js()    //为js作转码
    s.evalExp(opts)    //eval一个表达式
    s.evalJs(opts)    //eval语句
    s.format(arg0)    //字符串格式化 //一个常用的功能
    s.mulReplace(arr)    //多重update
    s.stripTags()    //去除tag内容
    s.subByte(len, tail)    //按字节长度截取 //这个在前端截取字符串时很有用,所有的洋框架都没提供这个方法。
    s.tmpl(opts)    //字符串模板 //字符串模板是一个很实用的功能,后来jquery也加上了。
    s.trim()    //去两端空格

数组相关
    Array.toArray(arr) //将一个ArrayLike对象转化成Array对象
    arr.clear()    //清空一个数组
    arr.contains(obj)    //判断数组中是否包含某对象
    arr.every(callback, pThis)    //按标准扩展
    arr.expand()    //将一个深层数组展开一层
    arr.filter(callback, pThis)    //按标准扩展
    arr.forEach(callback, pThis)    //按标准扩展 //有不少库都提供类似的功能,QWrap提供的与标准基本兼容
    arr.indexOf(obj, fromIdx)    //按标准扩展
    arr.lastIndexOf(obj, fromIdx)    //按标准扩展
    arr.map(callback, pThis)    //按标准扩展
    arr.reduce(callback, initial)    //按标准扩展
    arr.reduceRight(callback, initial)    //按标准扩展
    arr.remove(obj)    //从数组中移除某元素
    arr.some(callback, pThis)    //按标准扩展
    arr.unique()    //数组元素除重
    arr.union(arr2)    //数组求并集
    arr.intersect(arr2)    //数组求交集

日期相关
    d.format(pattern)    //日期格式化

函数相关
    Function.bind(func, thisObj)    //按标准扩展
    Function.methodize(func, attr)    //静态函数方法化
    Function.mul(func, opt)    //让方法的第一个参数可以是数组
    Function.createInstance(class)    //按标准扩展
    Function.extend(class, p)    //类继承   //各个库实现的类继承千差万别,本实现由月影与好奇提供。

对象相关
    Object.isArray(obj)    //判断对象是否是数组
    Object.isArrayLike(obj)    //判断对象是否是ArrayLike
    Object.isElement(obj)    //判断对象是否是html元素
    Object.isFunction(obj)    //。。。
    Object.isObject(obj)    //。。。
    Object.isPlainObject(obj)    //。。。
    Object.isString(obj)    //。。。
    Object.dump(obj, props)    //输出指定属性
    Object.fromArray(obj, keys, values)    //按keys与values来扩充对象
    Object.get(obj, prop, nullSensitive)    //强get //某些情况下,可以用ObjectH.get(obj,'a.b.c.d')来代替obj.a && obj.a.b && obj.a.b.c && obj.a.b.c.d
    Object.keys(obj)    //获取keys
    Object.map(obj, fn, thisObj)    //参考array的map,实现Object的map
    Object.mix(des, src, override)    //mixin
    Object.set(obj, prop, value)    //强set
    Object.stringify(obj)    //序列化 //stringify向JSON.stringify靠齐,不过不支持第二个参数
    Object.values()    //获取values

上面选了几个有点特色的功能加上了链接,不妨花两分钟时间看一眼。----每一个都很有意义,篇幅有限,无法详细介绍,可以自行围观。
具体的功能,参见上面的链接,这里不用一一赘述。

另,与apps/core_retouched.js对应的帮助文件,参见有啊版帮助文件中左侧目录树的"JS原生对象扩展"这个节点下的内容。
apps/core_retouched.js经YUI压缩后大小为17K。可以独立放心使用。
附:QWrap博客地址:http://www.qwrap.com


posted on 2011-04-21 17:46  JKisJK  阅读(2118)  评论(1编辑  收藏  举报

导航