JavaScript的封裝與鏈式呼叫
阿新 • • 發佈：2018-12-26
原生的JavaScript操作,不僅僅程式碼長,而且還不容易記憶和使用,採用對原生的JavaScript程式碼進行封裝,採用程式設計中主流的面向物件的思維,即在方法中儘量採用屬性式的操作(get/set操作),這樣我們不僅僅可以簡化程式碼操作量,更加容易記憶,同時也就更加的利於使用,同時我們還可以很輕鬆的使用我們封裝的相關程式碼採用鏈式呼叫來處理各種繁雜的操作.
程式碼如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>第一個web專案</title> </head> <style type="text/css"> .hide{ display: none; } </style> <body> <div id="anchor" name="divName" value="divValue" class="" >這裡是div中顯示的內容zhangsan zhangsan lisi</div> </body> <script type="text/javascript"> window.$=function(id){ return new _$(id); } _$=function(id){ this.element=document.getElementById(id); } _$.prototype={ constructor:_$, setHtml:setHtml, getHtml:getHtml, setName:setName, getName:getName, setValue:setValue, getValue:getValue, addClass:addClass, removeClass:removeClass, getClass:getClass } /** * 設定html文字內容 * @param obj * @returns {setHtml} */ function setHtml(obj){ this.element.innerHTML=obj; return this; } /** * 獲取html文字內容 * @returns {string} */ function getHtml(){ return this.element.innerHTML; } /** * 設定name屬性 * @param obj * @returns {setName} */ function setName(obj){ this.element.setAttribute('name',obj); return this; } /** * 獲取name屬性 * @returns {string} */ function getName(){ return this.element.getAttribute('name'); } /** * 設定value屬性 * @param obj * @returns {setValue} */ function setValue(obj){ this.element.setAttribute('value',obj); return this; } /** * 獲取value屬性 * @returns {string} */ function getValue(){ return this.element.getAttribute('value'); } /** * 新增class樣式 * @param obj * @returns {addClass} */ function addClass(obj){ var className=this.element.className; //如果不存在，則設定 if(className==''||className==undefined||className==null){ this.element.className+=obj; return this; }else if(className==' '){ //如果裡面有空格，則將空格刪掉,然後再新增 this.element.className=''; this.element.className+=obj; return this; }else{ //這裡是進行字串拼接 this.element.className+=' '+obj; return this; } } /** * 移除class樣式 * @param obj * @returns {removeClass} */ function removeClass(obj){ //正則表示式字串拼接 eval('var aa=/\x20?'+obj+'\x20?/;'); this.element.className=this.element.className.replace(aa,''); return this; } /** * 獲取class樣式 * @returns {string} */ function getClass(){ return this.element.getAttribute('class'); } </script> </html>
獲取html文字
$('anchor').getHtml();
"這裡是div中顯示的內容zhangsan zhangsan lisi"設定html文字
$('anchor').setHtml('wangwu').getHtml();
"wangwu"$('anchor').getName();
"divName"$('anchor').setName('aa').getName();
"aa"獲取value屬性
$('anchor').getValue();
"divValue"設定value屬性
$('anchor').setValue('aaValue').getValue(); "aaValue"
獲取class屬性
$('anchor').getClass();
""新增class屬性
$('anchor').addClass('hide').getClass();
"hide"$('anchor').addClass('on').addClass('on2').removeClass('hide').getClass();
"on on2"在此過程中,我們可以明顯的看到頁面中顯示內容的變化,無論是div文字內容的替換還是class樣式的新增與移除操作,在此我就不一一上圖了.
通過上面的操作,我們發現我們所封裝的程式碼像極了jQuery,其實jQuery的程式設計主要的就是採用這種方式,而其程式設計思想,我們就用jQuery的原話來說吧,那就是:"write less do more",翻譯過來就是寫得更少,做得更多.這也就是為什麼jQuery反倒比JavaScript更加流行,用途更加廣泛.