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应用,它是一个复合文件,它由以下文件组成:
在实际中,如果要用到按需异步加载,还需要再加上一个模块配置文件(详情参见《QWrap简介之:apps果实篇之:种子》),
复合文件在发布上线时会将分文件合并成起来,名件名还是不变。合并后的内容为:apps/core_retouched.combo.js
我们以这一个例子来看jquery + core_retouched的应用。
上面的例子中,我们需要用到一个日期的格式化,但是这个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
本应用会对原生类进行扩展,方便用户操作原生对象,例如: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