QWrap入门之apps果实扩展JS原生类-果实软件

就像是一棵树有很多果实一样，QWrap也有很多apps，本文讲解"扩展JS原生类"的应用，即apps/core_retouched.js（http://dev.qwrap.com/resource/js/apps/core_retouched.js）应用。本应用会对原生类进行扩展，方便用户操作原生对象，例如：String、Array、Function等。

本应用的典型应用场景：jquery专注于dom，所以欠缺原生对象的操作，以及模块加载机制等。本库恰好能提供，并且与jquery无冲突存在。

前面已有文章讲过core/core_retouch.js，它是一个retouch文件。

而本文讲的apps/core_retouched.js应用，它是一个复合文件，它由以下文件组成：

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的应用。

<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

原文：http://www.cnblogs.com/jkisjk/archive/2011/04/21/qwrap_apps_core_retouched.html

【编辑推荐】