QWrap入門之a(chǎn)pps果實擴展JS原生類
就像是一棵樹有很多果實一樣，QWrap也有很多apps，本文講解"擴展JS原生類"的應(yīng)用，即apps/core_retouched.js（http://dev.qwrap.com/resource/js/apps/core_retouched.js）應(yīng)用。本應(yīng)用會對原生類進行擴展，方便用戶操作原生對象，例如：String、Array、Function等。
本應(yīng)用的典型應(yīng)用場景：jquery專注于dom，所以欠缺原生對象的操作，以及模塊加載機制等。本庫恰好能提供，并且與jquery無沖突存在。
前面已有文章講過core/core_retouch.js，它是一個retouch文件。
而本文講的apps/core_retouched.js應(yīng)用，它是一個復合文件，它由以下文件組成：
- 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入門之a(chǎn)pps種子應(yīng)用》 ，
復合文件在發(fā)布上線時會將分文件合并成起來，名件名還是不變。合并后的內(nèi)容為：apps/core_retouched.combo.js
我們以這一個例子來看jquery + core_retouched的應(yīng)用。
- <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框架，已經(jīng)習慣了類似于“new Date().format()”、“str.trim()”這樣的原型用法，后來轉(zhuǎn)而使用jquery時，就覺得少了很多方法。
而QWrap的core_retouched應(yīng)用，恰恰是"擴展JS原生類"，專門就是提供這類應(yīng)用的。
好的，我們看一下，core_retouched提供了哪些便利：
字符串相關(guān)
s.byteLen() //獲取字節(jié)長度
s.camelize() //駝峰化
s.contains(subStr) //判斷一個字符串是否包含另一個字符串
s.dbc2sbc() //全角轉(zhuǎn)半角
s.decamelize() //反駝峰化
s.decode4Html() //為html作轉(zhuǎn)碼
s.encode4Html() //為html作解碼
s.encode4HtmlValue() //為htmlValue作轉(zhuǎn)碼
s.encode4Http() //為http作轉(zhuǎn)碼
s.encode4Js() //為js作轉(zhuǎn)碼
s.evalExp(opts) //eval一個表達式
s.evalJs(opts) //eval語句
s.format(arg0) //字符串格式化 //一個常用的功能
s.mulReplace(arr) //多重update
s.stripTags() //去除tag內(nèi)容
s.subByte(len, tail) //按字節(jié)長度截取 //這個在前端截取字符串時很有用，所有的洋框架都沒提供這個方法。
s.tmpl(opts) //字符串模板 //字符串模板是一個很實用的功能，后來jquery也加上了。
s.trim() //去兩端空格
數(shù)組相關(guān)：
Array.toArray(arr) //將一個ArrayLike對象轉(zhuǎn)化成Array對象
arr.clear() //清空一個數(shù)組
arr.contains(obj) //判斷數(shù)組中是否包含某對象
arr.every(callback, pThis) //按標準擴展
arr.expand() //將一個深層數(shù)組展開一層
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) //從數(shù)組中移除某元素
arr.some(callback, pThis) //按標準擴展
arr.unique() //數(shù)組元素除重
arr.union(arr2) //數(shù)組求并集
arr.intersect(arr2) //數(shù)組求交集
日期相關(guān)
d.format(pattern) //日期格式化
函數(shù)相關(guān)
Function.bind(func, thisObj) //按標準擴展
Function.methodize(func, attr) //靜態(tài)函數(shù)方法化
Function.mul(func, opt) //讓方法的第一個參數(shù)可以是數(shù)組
Function.createInstance(class) //按標準擴展
Function.extend(class, p) //類繼承 //各個庫實現(xiàn)的類繼承千差萬別，本實現(xiàn)由月影與好奇提供。
對象相關(guān)
Object.isArray(obj) //判斷對象是否是數(shù)組
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，實現(xiàn)Object的map
Object.mix(des, src, override) //mixin
Object.set(obj, prop, value) //強set
Object.stringify(obj) //序列化 //stringify向JSON.stringify靠齊，不過不支持第二個參數(shù)
Object.values() //獲取values
上面選了幾個有點特色的功能加上了鏈接，不妨花兩分鐘時間看一眼。----每一個都很有意義，篇幅有限，無法詳細介紹，可以自行圍觀。
具體的功能，參見上面的鏈接，這里不用一一贅述。
另，與apps/core_retouched.js對應(yīng)的幫助文件，參見有啊版幫助文件中左側(cè)目錄樹的"JS原生對象擴展"這個節(jié)點下的內(nèi)容。
apps/core_retouched.js經(jīng)YUI壓縮后大小為17K。可以獨立放心使用。
附：QWrap博客地址：http://www.qwrap.com
原文：http://www.cnblogs.com/jkisjk/archive/2011/04/21/qwrap_apps_core_retouched.html
【編輯推薦】
