JavaScript常用函數庫詳解

來源:互聯網
上載者:User

在WEB開發中,javascript提供了許多函數供開發人員使用,這些函數在Ajax流行前足夠了,但要構建一個互動性強些的應用恐怕就麻煩
了,為此,收集了自己平時常用到一些JavaScript函數,它們在其它的JS庫也常見,現在整理並附上注釋,方便查閱,希望對大家有所協助。

注:假設以下所有函數都放在一個CC對象中,方便引用。

//這個方法相信是最常用的了,<br /> //它雖然沒有選取器那麼強大,但也有個小增強版,可查指定結點下ID所在的子項目<br /> function $(id, p) {<br /> //id是否是字串,還是一個HTML結點<br /> var iss = id instanceof String || typeof id == "string";<br /> if (iss && !p)<br /> return document.getElementById(id);<br /> //如果是結點的話就直接返回該結點<br /> if(!iss)<br /> return id;<br /> //如果id與p是同一個元素,直接返回<br /> if(p.id == id)<br /> return p;<br /> //往父結點搜尋<br /> var child = p.firstChild;<br /> while (child) {<br /> if (child.id == id)<br /> return child;<br /> //遞迴搜尋<br /> var v = this.$(id, child);<br /> if (v)<br /> return v;<br /> child = child.nextSibling;<br /> }<br /> //的確找不到就返回null<br /> return null;<br />}

each: function(object, callback, args) {</p><p> if (!object) {<br /> return object;<br /> }</p><p> if (args) {<br /> if (object.length === undefined) {<br /> for (var name in object)<br /> if (callback.apply(object[name], args) === false) break;<br /> } else for (var i = 0, length = object.length; i < length; i++)<br /> if (callback.apply(object[i], args) === false) break;<br /> } else {<br /> if (object.length == undefined) {<br /> for (var name in object)<br /> if (callback.call(object[name], name, object[name]) === false) break;<br /> } else for (var i = 0, length = object.length, value = object[0];<br /> i < length && callback.call(value, i, value) !== false;<br /> value = object[++i]) {}<br /> }</p><p> return object;<br />}

//數組<br />function isArray(obj) {<br /> return (typeof obj === "array" || obj instanceof Array);<br />},<br />//字串<br />function isString(obj) {<br /> return (typeof obj === "string" || obj instanceof String);<br />},<br />//函數<br />function isFunction(obj) {<br /> return (typeof obj === "function" || obj instanceof Function);<br />},<br />//數字類型<br />function isNumber(ob) {<br /> return (typeof ob === "number" || ob instanceof Number );<br />}

// 返回表單可提交元素的提交字串.<br />// 例如<br />// <form><br />// <input type="text" name="user" value="rock" /><br />// <input type="text" name="password" value="123" /><br />// </form><br />// 調用後就返回 user=rock&password=123<br />// 這些資料已經過encodeURIComponent處理,對非英文字元友好.<br />// form元素中如果沒有name,則以id作為提供字元名.<br />function formQuery(f){<br /> // f,一個Form表單.<br /> var formData = "", elem = "", f = CC.$(f);<br /> var elements = f.elements;<br /> var length = elements.length;<br /> for (var s = 0; s < length; ++s) {<br /> elem = elements[s];<br /> if (elem.tagName == 'INPUT') {<br /> if ( (elem.type == 'radio' || elem.type == 'checkbox') && !elem.checked) {<br /> continue;<br /> }<br /> }<br /> if (formData != "") {<br /> formData += "&";<br /> }<br /> formData += encodeURIComponent(elem.name||elem.id) + "="<br /> + encodeURIComponent(elem.value);<br /> }<br /> return formData;<br /> }

/**<br /> * 移除數組指定元素.<br /> * 參數既可傳遞一個整形下標,也可傳遞一個數組資料.<br /> */<br />Array.prototype.remove = (function(p) {<br /> //參數為下標<br /> if (CC.isNumber(p)) {<br /> if (p < 0 || p >= this.length) {<br /> throw "Index Of Bounds:" + this.length + "," + p;<br /> }<br /> this.splice(p, 1)[0];<br /> return this.length;<br /> }<br /> //參數為數組資料,最終要找到下標來操作<br /> if (this.length > 0 && this[this.length - 1] == p) {<br /> this.pop();<br /> } else {<br /> var pos = this.indexOf(p);<br /> if (pos != -1) {<br /> this.splice(pos, 1)[0];<br /> }<br /> }<br /> return this.length;<br />});

Array.prototype.indexOf = (function(obj) {<br /> for (var i = 0, length = this.length; i < length; i++) {<br /> if (this[i] == obj) return i;<br /> }<br /> return - 1;<br />});

/**<br /> * 萬能而簡單的表單驗證函式,這個函數利用了JS動態語言特性,看上去很神秘,<br /> * 實際是很形象的,查看個例子就清楚了.<br /> */<br />validate: function() {<br /> var args = CC.$A(arguments),<br /> form = null;<br /> //form如果不為空白元素,應置於第一個參數中.<br /> if (!CC.isArray(args[0])) {<br /> form = CC.$(args[0]);<br /> args.remove(0);<br /> }<br /> //如果存在設定項,應置於最後一個參數中.<br /> //cfg.queryString = true|false;<br /> //cfg.callback = function<br /> //cfg.ignoreNull<br /> //nofocus:true|false<br /> var b = CC.isArray(b) ? {}: args.pop(),<br /> d;<br /> var queryStr = b.queryString,<br /> ignoreNull = b.ignoreNull,<br /> cb = b.callback;<br /> var result = queryStr ? '': {};<br /> CC.each(args,<br /> function(i, v) {<br /> //如果在fomr中不存在該name元素,就當id來獲得<br /> var obj = v[0].tagName ? v[0] : form ? form[v[0]] : CC.$(v[0]);<br /> //console.debug('checking field:',v, 'current value:'+obj.value);<br /> var value = obj.value,<br /> msg = v[1],<br /> d = CC.isFunction(v[2]) ? v[3] : v[2];<br /> //選項<br /> if (!d || typeof d != 'object') d = b;</p><p> //是否忽略空<br /> if (!d.ignoreNull && (value == '' || value == null)) {<br /> //如果不存在回呼函數,就調用alert來顯示錯誤資訊<br /> if (!d.callback) CC.alert(msg, obj, form);<br /> //如果存在回調,注意傳遞的三個參數<br /> //msg:訊息,obj:該結點,form:對應的表單,如果存在的話<br /> else d.callback(msg, obj, form);<br /> //出錯後是否聚集<br /> if (!d.nofocus) obj.focus();<br /> result = false;<br /> return false;<br /> }<br /> //自訂驗證方法<br /> if (CC.isFunction(v[2])) {<br /> var ret = v[2](value, obj, form);<br /> var pass = (ret !== false);<br /> if (CC.isString(ret)) {<br /> msg = ret;<br /> pass = false;<br /> }</p><p> if (!pass) {<br /> if (!d.callback) CC.alert(msg, obj, form);<br /> //同上<br /> else d.callback(msg, obj, form);</p><p> if (!d.nofocus) obj.focus();<br /> result = false;<br /> return false;<br /> }<br /> }<br /> //如果不設定queryString並通過驗證,不存在form,就返回一個對象,<br /> //該對象包含形如{elementName|elementId:value}的資料.<br /> if (queryStr && !form) {<br /> result += (result == '') ?<br /> ((typeof obj.name == 'undefined' || obj.name == '') ? obj.id: obj.name) +<br /> '=' + value: '&' + v[0] + '=' + value;<br /> } else if (!form) {<br /> result[v[0]] = value;<br /> }<br /> });<br /> //如果設定的queryString:true並通過驗證,就返回form的提交字串.<br /> if (result !== false && form && queryStr) result = CC.formQuery(form);<br /> return result;<br />}

/**<br /> * 應用對象替換模板內容<br /> * templ({name:'Rock'},'<html><title>{name}</title></html>');<br /> * st:0,1:未找到屬性是是否保留<br /> */<br />templ: function(obj, str, st) {<br /> return str.replace(/\{([\w_$]+)\}/g, function(c, $1) {<br /> var a = obj[$1];<br /> if (a === undefined || a === null) {<br /> if (st === undefined) return '';<br /> switch (st) {<br /> case 0:<br /> return '';<br /> case 1:<br /> return $1;<br /> default:<br /> return c;<br /> }<br /> }<br /> return a;<br /> });<br />}

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.