js 自定義方法

 

js自定義封裝方法

CreateTime--2016年10月16日15:18:18
Author:Marydon

聲明：該文章主要是記錄了需要使用javascript實現對日常需要的方法進行封裝，封裝方法大部分都是百度解決的，（這里只是針對我用到的做個匯總），特此聲明！

使用方法：將需要的方法復制到<script>標簽體中，在下面直接調用對應的方法即可
一、自定義js的添加&移除類名方法
　　參考鏈接--http://www.cnblogs.com/kuikui/archive/2011/12/26/2302375.html

//自定義js的addClass()和removeClass()方法

<style type="text/css">
    .redColor {
        color: red;
    }
</style>

<script type="text/javascript">
    function hasClass(obj, cls) {
        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }

    function addClass(obj, cls) {
        if (!this.hasClass(obj, cls)) obj.className += " " + cls;
    }

    function removeClass(obj, cls) {
        if (hasClass(obj, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            obj.className = obj.className.replace(reg, ' ');
        }
    }
</script>

<!-- 進行調用 -->
<div onmouseover="addClass(this,'redColor')" onmouseout="removeClass(this,'redColor')">
    js自定義addClass()和removeClass()方法
</div>

 

UpdateTime--2017年1月15日14:49:15
三、js自定義window.onload方法

<script type="text/javascript">
    /**
     * 頁面中聲明一次window.onload事件，否則后面的會將前面的覆蓋
     * 解決辦法：
     * 使用window.onload同時執行多個函數
     * @param {Object} func
     */
    function addLoadEvent(func) {
        var oldonload = window.onload; //得到上一個onload事件的函數
        if(typeof oldonload != "function") { //判斷類型是否為function,注意TYPROF返回的是字符串
            window.onload = func;
        } else {
            window.onload = function() {
                oldonload(); //調用前覆蓋的onload事件的函數
                func(); //調用當前的函數
            }
        }
    }
    
    function testOnload() {
        alert(2);
    };
    function testOnload2() {
        alert(3);
    }
    用法：
        //直接把上面addLoadEvent()方法復制在所有代碼的前面，這樣后面就可以直接調用，相當於多個window.onload
        //頁面加載完畢想要執行的函數，調用addLoadEvent(入參函數)多次即可
        //頁面加載完畢，要運行的函數
    如：
        addLoadEvent(testOnload);//調用位置在函數上下都行
        addLoadEvent(testOnload2);
</script>

 

/**
 * addLoadEvent()函數的詳細說明    
 * 相當於對window.onload方法的進一步封裝
 * 當此函數addLoadEvent()只調用一次時，只執行if{}內容，執行完后，再執行func函數；
 * 當addLoadEvent()被調用2次時，執行順序：if{}內容-->else{oldonload()代表的是：第一次調用的函數-->執行oldonload()-->第二次調用的函數}
 * 當addLoadEvent()被調用3次時，執行順序：if{}內容-->else{oldonload()代表的是：前兩次的函數：window.onload = function() {第一次調用的函數及第二次調用的函數}-->第三次調用的函數}
 * 當addLoadEvent()被調用n次時，oldonload()代表的是：前n-1個函數，func()代表的是：最后一調用addLoadEvent()函數時的入參函數
 */ 

 六、自定義javascript的forEach()方法

　　作用：用於迭代數組，解決IE9以下不支持forEach()迭代數組的問題

原文鏈接：http://www.jb51.net/article/81955.htm

/**
 * 數組遍歷（從Array原型擴展forEach()方法）
 * @param {Array|NodeList}
 * @param {Function}  遍歷執行方法，執行方法中返回false值，則停止繼續遍歷
 * @param {Object} [scope] 執行方法的this指針
 */
if (!Array.prototype.forEach && typeof Array.prototype.forEach !== "function") {
    Array.prototype.forEach = function(callback, context) {
        // 遍歷數組,在每一項上調用回調函數，這里使用原生方法驗證數組。
        if (Object.prototype.toString.call(this) === "[object Array]") {
            var i, len;
            for (i = 0, len = this.length; i < len; i++) {
                if (typeof callback === "function"  && Object.prototype.hasOwnProperty.call(this, i)) {
                    if (callback.call(context, this[i], i, this) === false) {
                        break; // or return;
                    }
                }
            }
        }
     };
 }

　　用法：第一個參數：數組元素值；第二個參數：數組元素索引；第三個參數：數組（一般用不到）

　　舉例：

var array = new Array();
array.push("張三");
array.push("李四");
array.push("王五");
/**
 * 迭代數組
 */
array.forEach(function(value,index) {
    console.log(value, index);
});

UpdateTime--2017年7月20日09:07:07

七、js自定義trim()方法

　　定義：用於去除字符串前后空格（中間空格不能去除）

String.prototype.trim = function(){  
    return this.replace(/^\s+(.*?)\s+$/, "$1");
}

　　或者

String.prototype.trim=function() {
    return this.replace(/(^\s*)|(\s*$)/g, '');
}

 

　　具體用法請移步至文章：javascript string

八、js自定義contains()方法

　　定義：用於判斷指定元素內是否包含另一個元素，即：判斷另一個DOM元素是否是指定DOM元素的后代
　　返回值：Boolean類型，如果指定元素包含另一個元素，則返回true，否則返回false。

/**
 * 兼容火狐，增加contains方法。如果A元素包含B元素，則返回true，否則false
 * @param {Object} obj DOM元素
 * @memberOf {TypeName} 
 * @return {TypeName} true,false
 */
if (window.HTMLElement) {
    HTMLElement.prototype.contains = function(obj) {
        if (!obj) return false;
        if (obj == this)
            return true;
        while (obj = obj.parentNode)
            if (obj == this)
                return true;
        return false;
    }
}

　　舉例：

　　HTML部分

<div id="test">
    手術
    <input id="test2" type="text"/>
</div>

　　JAVASCRIPT部分

window.onload = function() {
    var divTag = document.getElementById('test');
    var inputTag = document.getElementById('test2');
    var inputTags = document.getElementsByTagName('input');
    console.log("使用封裝好的函數測試是否包含指定子元素：" +　divTag.contains(inputTag));
    console.log("contains方法測試div中是否包含不存在的input標簽：" +　divTag.contains(inputTags[2]));
    // 錯誤用法1
    console.log("contains方法測試div中是否包含指定的文本：" +　divTag.contains('手術'));
    // 錯誤用法2
    console.log("contains方法測試div中是否包含存在的input標簽：" +　divTag.contains(inputTags));
}

　　小結：

　　　　contains方法傳的參數只能是DOM元素(Element類型，不能是NodeList或其他對象)