據說每個大牛、小牛都應該有自己的庫——JavaScript原生對象拓展


據說每個大牛、小牛都應該有自己的庫——框架篇中我揚言要做個小牛,沒想到一天沒更新,小伙兒伴們就戲謔的問我,油哥是不是要太監了?其實事情是這個樣子的,這不是太監的節奏,一是,關於寫個自己的庫的想法由來已久,但只是周末才下決心要寫,本來覺得會有很多以前的總結要寫出來的,可是一下筆才知道有多難,零零散散的東西誰都能夠寫出來,可怎么把這些東西寫的有條理、效率高、可用性強之前從來沒有想過,二是最近幾天和未來的日子公司會比較忙,下班回來的時間有限,沒太多時間去想,所以拖沓了,不過不會太監。

JavaScript原生對象

言歸正傳要想對JavaScript原生對象進行拓展,首先得了解JavaScript究竟有哪些原生對象,《JavaScript語言精髓與編程實踐》上有一張廣為流傳的圖片

image

內置(Build-in)對象與原生(Naitve)對象的區別在於:前者總是在引擎初始化階段就被創建好的對象,是后者的一個子集;而后者包括了一些在運行過程中動態創建的對象。宿主對象不是引擎的原生對象,而是由宿主框架通過某種機制注冊到JavaScript引擎中的對象。

這么多原生對象,並不是每個都要拓展,只是拓展一下在其它語言中存在的,用起來很方便的方法,至於拓展方式也很簡單,無非是向prototype里面注冊。

兩個原則

在反復寫了很多通用函數后我總是在試圖解決使用者可能的疏忽,比如在為某個元素綁定click事件處理程序的時候,我要先判斷用戶傳的元素是否為空,是的話直接返回false;判斷click是不是寫成了onclick;判斷欲綁定的函數是不是個函數。。。,這樣的工作確實使庫函數更加好使,但帶來了幾個顯著的弊端

1.層層判斷,效率低下,相信這點兒不用多說明

2.為了使函數不報錯而返回false,自己處理了異常,沒有把錯誤顯示返回給用戶,難以發現錯誤及調試

3.縱容了使用的的不良行為

權衡了一下,在自己的庫函數中不會幫助使用者處理參數及使用錯誤,如果出現錯誤不處理,直接返回給使用者。

但是很多函數並不要求用戶傳入所有參數,比如jQuery的ajax函數,可以傳入部分參數,不傳入部分按默認值處理,這是合理的,庫函數中也會遵守這一原則。

String

對String對象的拓展主要有

  • ltrim:去除string左邊空白符
  • rtrim:去除string右邊空白符
  • trim:去除string首尾空白符
  • htmlEncode:把html字符串encode成普通字符串
  • htmlDecode:把字符串decode為html字符串
  • isStartsWith:判斷字符串是否以參數開始
  • isEndWith:判斷字符串是否以參數結束
if(typeof String.prototype.ltrim=='undefined'){
                    String.prototype.ltrim = function(){
                        var s = this;
                        s = s.replace(/^\s*/g, '');
                        return s;
                    }
                }
                
                if(typeof String.prototype.rtrim=='undefined'){
                    String.prototype.rtrim = function(){
                        var s = this;
                        s = s.replace(/\s*$/g, '');
                        return s;
                    }
                }
                
                if(typeof String.prototype.trim=='undefined'){
                    String.prototype.trim = function(){
                        return this.ltrim().rtrim();
                    }
                }
                
                if(typeof String.prototype.htmlEncode=='undefined'){
                    String.prototype.htmlEncode = function(encodeNewLine){//encodeNewLine:是否encode換行符
                        var s = this;
                        s = s.replace(/&/g, '&');
                        s = s.replace(/</g, '&lt;');
                        s = s.replace(/>/g, '&gt;');
                        s = s.replace(/'/g, '&quot;');
                        if(encodeNewLine){
                            s = s.replace(/\r\n/g, '<br />');
                            s = s.replace(/\r/g, '<br />');
                            s = s.replace(/\n/g, '<br />');
                        }
                        return s;
                    }
                }
                
                if(typeof String.prototype.htmlDecode=='undefined'){
                    String.prototype.htmlDecode = function(decodeNewLine){//decodeNewLine:是否decode換行符
                        var s = this;
                        if(decodeNewLine)
                        {
                            s = s.replace(/<br\s*\/?>/gi, '\r\n');
                        }
                        s = s.replace(/&quot;/g, '\'');
                        s = s.replace(/&gt;/g, '>');
                        s = s.replace(/&lt;/g, '<');
                        s = s.replace(/&amp;/g, '&');
                        return s;
                    }
                }
                
                if(typeof String.prototype.startsWith=='undefined'){
                    String.prototype.startsWith = function(start, ignoreCase){//start:欲判斷字符, ignoreCase:是否忽略大小寫
                        var s = this;
                        if(ignoreCase)
                        {
                            s = s.toLowerCase();
                            end = end.toLowerCase();
                        }
                        if(s.substr(0, start.length) == start)
                            return true;
                        return false;
                    }
                }
                
                if(typeof String.prototype.endsWith=='undefined'){
                    String.prototype.endsWith = function(end, ignoreCase){//end:欲判斷字符, ignoreCase:是否忽略大小寫
                        var s = this;
                        if(ignoreCase)
                        {
                            s = s.toLowerCase();
                            end = end.toLowerCase();
                        }
                        if(s.substr(s.length - end.length) == end)
                            return true;
                        return false;
                    }
                }

Array

對Array對象的拓展有

  • indexOf:返回參數在數組中index,不存在返回-1
if(typeof Array.prototype.indexOf=='undefined'){
                    Array.prototype.indexOf=function(item,strict){//strict:是否嚴格相等(===)
                        var index=-1;
                        var strict=strict=='undefined'? true || strict;
                        var length=this.length;
                        if(strict){
                            for(var i=0;i<length;i++){
                                if(this[i]===item){
                                    index=i;
                                    break;
                                }
                            }
                        }else{
                            for(var i=0;i<length;i++){
                                if(this[i]==item){
                                    index=i;
                                    break;
                                }
                            }
                        }
                    }
                }

Date

Date對象的拓展

format:格式化日期(網上找的,據說是個老外寫的,但是找不到作者)

getDaysInMonth:獲取某月有多少天

Date.getDaysInMonth = function (year, month) {
            var days = 0;
            switch (month) {
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                case 12:
                    days = 31
                    break;
                case 4:
                case 6:
                case 9:
                case 11:
                    days = 30;
                    break;
                case 2:
                    if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0))
                        days = 29;
                    else
                        days = 28;
                    break;
            }
            return days;
        }

        if (typeof Date.prototype.format == 'undefined') {
            Date.prototype.format = function (mask) {

                var d = this;

                var zeroize = function (value, length) {

                    if (!length) length = 2;

                    value = String(value);

                    for (var i = 0, zeros = ''; i < (length - value.length); i++) {

                        zeros += '0';

                    }

                    return zeros + value;

                };

                return mask.replace(/"[^"]*"|'[^']*'|\b(?:d{1,4}|m{1,4}|yy(?:yy)?|([hHMstT])\1?|[lLZ])\b/g, function ($0) {

                    switch ($0) {

                        case 'd': return d.getDate();

                        case 'dd': return zeroize(d.getDate());

                        case 'ddd': return ['Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat'][d.getDay()];

                        case 'dddd': return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][d.getDay()];

                        case 'M': return d.getMonth() + 1;

                        case 'MM': return zeroize(d.getMonth() + 1);

                        case 'MMM': return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'][d.getMonth()];

                        case 'MMMM': return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'][d.getMonth()];

                        case 'yy': return String(d.getFullYear()).substr(2);

                        case 'yyyy': return d.getFullYear();

                        case 'h': return d.getHours() % 12 || 12;

                        case 'hh': return zeroize(d.getHours() % 12 || 12);

                        case 'H': return d.getHours();

                        case 'HH': return zeroize(d.getHours());

                        case 'm': return d.getMinutes();

                        case 'mm': return zeroize(d.getMinutes());

                        case 's': return d.getSeconds();

                        case 'ss': return zeroize(d.getSeconds());

                        case 'l': return zeroize(d.getMilliseconds(), 3);

                        case 'L': var m = d.getMilliseconds();

                            if (m > 99) m = Math.round(m / 10);

                            return zeroize(m);

                        case 'tt': return d.getHours() < 12 ? 'am' : 'pm';

                        case 'TT': return d.getHours() < 12 ? 'AM' : 'PM';

                        case 'Z': return d.toUTCString().match(/[A-Z]+$/);

                            // Return quoted strings with the surrounding quotes removed     

                        default: return $0.substr(1, $0.length - 2);

                    }

                });

            };
        }

 

 

最后

開始時會以為要寫很多,篩選了一下,常用並且通用還需要自己拓展的無非就這幾個,很沒有成就感的樣子,不過還好總算沒太監不是,以后想到再補充吧,這兩天要好好想想關於Event處理的函數了。

最近聽取了一下朋友的意見,對JavaScript原生對象進行拓展確實是個很雞肋的事情,決定把JavaScript原生對象部分單獨拿出來成一個文件,想使用的話需要引用的頁面,不再庫函數中默認包含。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM