js/jQuery使用過程當中常見問題/已踩過的坑大雜燴

時間 2019-11-10

標籤 jquery 使用過程當中常見問題大雜燴欄目 JavaScript 简体版

原文原文鏈接

1、jQuery選擇器選擇選中的或者disabled的選擇框時attr函數無效
2、jQuery each函數的break/continue
3、jQuery 獲取元素的left會值/left數值
4、js 監聽元素觸摸/劃屏動做
5、沒設置致使$(window).height()不許確問題
6、jQuery獲取/設置/監聽下拉選擇select的值
7、jQuery獲取/設置/監聽輸入框input的值
8、js拼接html字符串時要注意先把單引號及雙引號轉義，否則可能會出現頁面錯誤
9、綁定在scroll裏面的方法在手機裏面常常會等滾動完後再執行，有必定的延時，如何能縮短響應速度？
10、許多li間的drag and drop拖放的實現
11、順序執行時,用js控制刪除transition css3效果後再新加transition，舊的transition還生效
12、返回頂部
十3、完美支持全部端的[複製到剪貼板]js插件－clipboard.js
十4、H5經過WebViewJavascriptBridge與APP進行交互時，H5獲取APP的數據的異步時間不肯定的問題。
十5、返回底部
十6、獲取當前網站根域
十7、Url編碼轉義
十8、JSON與字符串互轉
十9、jQuery樣式選擇器及樣式名中最好不要出現大寫字母，不然可能在webview裏面執行不成功
二10、使用fastclick.js時若是用label包住checkbox或者radio按鈕裏面同時出現其餘如span或者i元素時，在ios裏會出現點擊不了的狀況
二11、slice與splice的使用
二12、刪除頁面上全部的img和iframe
二十3、js能過userAgent判斷各類設備終端
二十4、document.body.scrollTop 一直都是 0 的問題
二十5、原生js獲取元素寬高
二十6、jQuery獲取元素位置、寬高
二十7、js動態加載腳本
二十8、javascript 操做符（~、&、|、^、<<、>>）(操做數是32整數範圍內）
二十9、audio標籤聲音文件如何重播？replay?
三10、js中如何使用FormData或者Ajax方式上傳文件
三11、js中的call、apply、bind的使用方法
三12、加載js用async和defer的區別
三十3、非cookie狀況下，前端實現訪問終端的惟一標識:Fingerprintjs2
三十4、Debounce和Throttle的區別
三十5、原生js作上拉到底部加載
三十6、js正則過濾emoji表情輸入
三十7、WPS2013形成的HTML5 file.type值異常
三十8、js如何判斷網絡是否正常
三十9、在QQ/微信瀏覽器裏面使用el.scrollTo(0, 0)無效的問題
四10、js如何實現input=file對要上傳的圖片進行預覽
四11、如何建立一個乾淨的對象
四12、0 == '' // => true的坑
四十3、ios8的坑。Dom類數組，要先轉爲數組纔可使用forEach進行遍歷
四十4、爲何要用sessionStorage?
四十5、js操做視頻相關用法
四十6、ios/ie11中new Date('2017-08-11 12:00:00')設置日期不成功問題
四十7、canvas圖片繪製後轉圖片url跨域問題Tainted canvases may not be exported
四十8、建立一個a連接使用a.click()模擬點擊,主流瀏覽器能夠，可是在ie10如下不能生效

本文同步發佈到 http://www.kt5.cn/fe/2019/11/04/js-jquery/javascript

1、jQuery選擇器選擇選中的或者disabled的選擇框時attr函數無效

jQuery代碼以下：css

if (!$obj.prop("disabled")){//用prop選擇或者設置對象值
     $obj.prop("checked", This.prop("checked"));
}

或者html

$obj.is(":checked");

2、jQuery each函數中如何實現break/continue

jQuery代碼以下：前端

return false;//break
return true;//continue

3、jQuery 獲取元素的left會值/left數值

$obj.position().left;//獲取數值
$obj.css("left");//獲取值-如1px

4、js 監聽元素觸摸/劃屏動做

                var el=document.getElementById("example"),
                    startPos = { x: 0, y: 0 },
                    currentPos = { x: 0, y: 0 };
                el.addEventListener('touchstart', function (event) {
                    startPos = { x: event.changedTouches[0].pageX, y: event.changedTouches[0].pageY };
                }, false);
                el.addEventListener('touchmove', function (event) {
                    event.preventDefault();//阻止默認的觸屏滾動動做
                    currentPos = { x: event.changedTouches[0].pageX, y: event.changedTouches[0].pageY };
                }, false);
                el.addEventListener('touchend', function (event) {
                    currentPos = { x: event.changedTouches[0].pageX, y: event.changedTouches[0].pageY };
                    if (currentPos.x != startPos.x){
                        //你左右划動
                    }
                    if (currentPos.y != startPos.y){
                         //你上下划動
                    }
                    startPos = { x: 0, y: 0 },
                    currentPos = { x: 0, y: 0 };
                }, false);

5、沒設置致使$(window).height()不許確問題

只要在頁面頂部加上就能夠java

<!DOCTYPE html>

6、jQuery獲取/設置下拉選擇select的值

$(obj).val();//獲取
$(obj).val(val);//設置

$(obj).change(function(){
    //監聽選擇修改
});

7、jQuery獲取/設置/監聽輸入框input的值

$(obj).on("input propertychange",function(){//監聽
    var val=$(this).val(),//獲取
        $(obj2).val(val);//設置 
});

8、js拼接html字符串時要注意先把單引號及雙引號轉義，否則可能會出現頁面錯誤

htmlStr = htmlStr .replace("'","&apos;").replace('"','&quot;');//"是雙引號轉義，'是單引號轉義

9、綁定在scroll裏面的方法在手機裏面常常會等滾動完後再執行，有必定的延時，如何能縮短響應速度？

/**
 * 簡易的事件添加方法
 * http://www.zhangxinxu.com/wordpress/2013/04/js-mousewheel-dommousescroll-event/
 * 
 * @param {Element} el
 * @param {String} type
 * @param {Function} fn
 * @param {Boolean} capture
 */
window.addEvent = (function (window, undefined) {
    var _eventCompat = function (event) {
        var type = event.type;
        if (type == 'DOMMouseScroll' || type == 'mousewheel') {
            event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
        }
        if (event.srcElement && !event.target) {
            event.target = event.srcElement;
        }
        if (!event.preventDefault && event.returnValue !== undefined) {
            event.preventDefault = function () {
                event.returnValue = false;
            };
        }
        /* 
           ......其餘一些兼容性處理 */
        return event;
    };
    if (window.addEventListener) {
        return function (el, type, fn, capture) {
            if (type === "mousewheel" && document.mozHidden !== undefined) {
                type = "DOMMouseScroll";
            }
            el.addEventListener(type, function (event) {
                fn.call(this, _eventCompat(event));
            }, capture || false);
        }
    } else if (window.attachEvent) {
        return function (el, type, fn, capture) {
            el.attachEvent("on" + type, function (event) {
                event = event || window.event;
                fn.call(el, _eventCompat(event));
            });
        }
    }
    return function () { };
})(window);

// 主要是用touch代替scroll來監聽
addEvent(document.body, 'touchstart', function (event) {
    startY = event.changedTouches[0].pageY;
}, false);
addEvent(document.body, 'touchmove', function (event) {
    currentY = event.changedTouches[0].pageY;
    Y = currentY - startY;
    if (Y > 10) {
        // 向上滾動執行
    } else if (Y < -10) {
        // 向下滾動執行
    }
}, false);

查看代碼

固然直接用addEventListener代替addEvent也能夠。react

10、許多li間的drag and drop拖放的實現

html代碼以下：jquery

           <ul>

                <li draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)" ondragstart="drag(event)">
                    <div class="goods-thumb"><img title="480" src="http://dummyimage.com/480/FF8604/fff"></div>
                </li>
                <li draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)" ondragstart="drag(event)">
                    <div class="goods-thumb"><img title="480" src="http://dummyimage.com/480/FF8704/fff"></div>
                </li>
                <li draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)" ondragstart="drag(event)">
                    <div class="goods-thumb"><img title="480" src="http://dummyimage.com/480/FF8702/fff"></div>
                </li>
                <li draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)" ondragstart="drag(event)">
                    <div class="goods-thumb"><img title="480" src="http://dummyimage.com/480/FC8604/fff"></div>
                </li>
                <li draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)" ondragstart="drag(event)">
                    <div class="goods-thumb"><img title="480" src="http://dummyimage.com/480/FE8704/fff"></div>
                </li>
                <li draggable="true" ondrop="drop(event)" ondragover="allowDrop(event)" ondragstart="drag(event)">
                    <div class="goods-thumb"><img title="480" src="http://dummyimage.com/480/FA8702/fff"></div>
                </li>
            </ul>

JS代碼以下：android

  //　拖放效果　內加防止img或div被拖效果
  var liEl = undefined;
  function drag(ev) {
    ev.stopPropagation();
    liEl = ev.target;
    if (ev.target.tagName != 'LI'){
      liEl = $(ev.target).parents('li').get(0);
    }  
  }

  function drop(ev) {
    var tempEl = ev.target;
    if (ev.target.tagName != 'LI'){
      tempEl = $(ev.target).parents('li').get(0);
    }     
    $(tempEl).before(liEl);
    liEl = undefined;
    ev.preventDefault();
  }
  function allowDrop(ev) {
    ev.preventDefault();
  }

11、順序執行時,用js控制刪除transition css3效果後再新加transition，舊的transition還生效

解決方式：加上個setTimeout去新增新的transition就能夠生效ios

12、返回頂部

window.scrollTo(0,0); // 純js

$('html,body').animate({scrollTop: '0px'}, 800); // jQuery

十3、完美支持全部端的[複製到剪貼板]js插件－clipboard.js

    <script src="//cdn.bootcss.com/clipboard.js/1.6.1/clipboard.min.js"></script>
    <script>
        var clipboard = new Clipboard('#copy');

        clipboard.on('success', function (e) {
            e.clearSelection();
            alert('複製成功！');
        });

        clipboard.on('error', function (e) {
            alert('複製失敗，手機不支持哦，請長按ID進行復制吧');
        });
    </script>

十4、H5經過WebViewJavascriptBridge與APP進行交互時，H5獲取APP的數據的異步時間不肯定的問題。

js代碼以下（這段代碼通常是放在head頭部來執行）：css3

		var reqDataUid;
		var reqDataToken;
		var sendToApp;
		//判斷是否爲Android
		function _IsAndroid() {
		    var ua = navigator.userAgent.toLowerCase();
		    if (ua.match(/Android/i) == "android") {
		        return true;
		    } else {
		        return false;
		    }
		}
		//接口樣式
		function setupWebViewJavascriptBridge(callback) {
	        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
	        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
	        window.WVJBCallbacks = [callback];
	        var WVJBIframe = document.createElement('iframe');
	        WVJBIframe.style.display = 'none';
	        if(_IsAndroid()){
	        	WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
	        }else{
	        	WVJBIframe.src = 'https://__bridge_loaded__';
	        }
	        //WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';//'https://__bridge_loaded__';
	        document.documentElement.appendChild(WVJBIframe);
	        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
	    }
		setupWebViewJavascriptBridge(function(bridge) {
			bridge.registerHandler('RequestUserData', function(data, responseCallback) {// APP端定義好的供js調用的用戶數據請求接口
		        reqDataUid = (_IsAndroid() ? JSON.parse(data).uid : data.uid);
		        reqDataToken = (_IsAndroid() ? JSON.parse(data).token : data.token);
// 這裏可使用得到的數據，setupWebViewJavascriptBridge這函數實際上是異步執行的，所以執行時間不肯定，能夠有技巧的來使用，若是要輸出dom節點能夠自定義一個domready的函數，而後ready之後經過拼接html的方式輸出到相應的dom節點

		        responseCallback('XXXX'); // 回調
			});
			// H5主動給APP發送信息
			sendToApp = function (type,val){
				bridge.callHandler('SendDataToApp', {'type': type,'value':val}, function(response) {
					//log('JS got response', response);
				})
			}
		});

解決方案：

方案１、可讓ＡＰＰ端在webview打開以前先把信息寫到cookie裏面先；

方案２、能夠相似微信的wx.ready同樣，在wx對象裏面封裝好一個wx.ready(function(wx){})的callback函數來執行，這裏咱們能夠定義一個appReady的函數

// 針對上面的狀況能夠用監聽的方式來實現
        var appReady = function(callback){
                var _getIdTimer = setInterval(function(){
                if(reqDataUid != undefined && reqDataToken != undefined){
                    callback();
                    clearInterval(_getIdTimer);
                }
            },10);
        };

十5、返回底部

            var h = $(document).height()-$(window).height();
            $(document).scrollTop(h);

或者

                        var h = document.documentElement.scrollHeight || document.body.scrollHeight;
                        window.scrollTo(h, h);

十6、獲取當前網站根域

 if (!window.location.origin) {
        window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
 }

十7、Url編碼轉義

encodeURIComponent(URIstring); // 經常使用做URL編碼其中的某些字符（好比 ：;/?:@&=+$,# 這些用於分隔 URI 組件的標點符號）將被十六進制的轉義序列進行替換

encodeURI(URIstring); // 該方法的目的是對 URI 進行完整的編碼，所以對如下在 URI 中具備特殊含義的 ASCII 標點符號，encodeURI() 函數是不會進行轉義的：;/?:@&=+$,#

escape(string); // 不會對 ASCII 字母和數字進行編碼，也不會對下面這些 ASCII 標點符號進行編碼： - _ . ! ~ * ' ( ) 。其餘全部的字符都會被轉義序列替換。

十8、JSON與字符串互轉

JSON.parse(string); // STRING -> JSON, string沒有用引號引發來，使用JSON.parse全部瀏覽器中均拋異常

JSON.stringify(value [, replacer] [, space]); // JSON -> STRING, replacer可選，用於過濾沒必要要的key，能夠是數組也能夠是函數

十9、jQuery樣式選擇器及樣式名中最好不要出現大寫字母，不然可能在webview裏面執行不成功

 $('#obj').on('click','.myElement',function(e){ // 相似樣式名出現大寫字母的寫法可能在APP的webview裏面不執行
     // ...
});

二10、使用fastclick.js時若是用label包住checkbox或者radio按鈕裏面同時出現其餘如span或者i元素時，在ios裏會出現點擊不了的狀況

解決方案：

給label裏面的span或者i元素添加樣式　pointer-events: none;　就能夠了

二11、slice與splice的使用

slice方法：從已有的數組中返回選定的元素。

Array.slice(start,end)
// start    必需。規定從何處開始選取。若是是負數，那麼它規定從數組尾部開始算起的位置。也就是說，-1 指最後一個元素，-2 指倒數第二個元素，以此類推。
// end    可選。規定從何處結束選取。該參數是數組片段結束處的數組下標。若是沒有指定該參數，那麼切分的數組包含從 start 到數組結束的全部元素。若是這個參數是負數，那麼它規定的是從數組尾部開始算起的元素。

splice方法：向/從數組中添加/刪除項目，而後返回被刪除的項目。該方法會改變原始數組。

Array.splice(index,howmany,item1,.....,itemX) 
// index    必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。
// howmany    必需。要刪除的項目數量。若是設置爲 0，則不會刪除項目。
// item1, ..., itemX    可選。向數組添加的新項目。

二12、刪除頁面上全部的img和iframe

    var imgs = document.querySelectorAll('img');
    var iframes = document.querySelectorAll('iframe');
    imgs.forEach(function (img) {
        var oldNode = img;
        oldNode.parentNode.removeChild(oldNode);
    });
    iframes.forEach(function (img) {
        var oldNode = img;
        oldNode.parentNode.removeChild(oldNode);
    });

二十3、js能過userAgent判斷各類設備終端

        var isMobile = {
            UCBrowser: function () {
                return navigator.userAgent.match(/UCBrowser/i);
            },
            QQ: function () {
                return navigator.userAgent.match(/QQ\//i);
            },          
            MicroMessenger: function () {
                return navigator.userAgent.match(/MicroMessenger/i);
            },
            Android: function () {
                return navigator.userAgent.match(/Android/i);
            },
            BlackBerry: function () {
                return navigator.userAgent.match(/BlackBerry/i);
            },
            iPad: function () {
                return navigator.userAgent.match(/iPad/i);
            },
            iPhone: function () {
                return navigator.userAgent.match(/iPhone/i);
            },
            iOS: function () {
                return navigator.userAgent.match(/iPhone|iPod|iPad/i);
            },
            Opera: function () {
                return navigator.userAgent.match(/Opera Mini/i);
            },
            Windows: function () {
                return navigator.userAgent.match(/IEMobile/i);
            },
            any: function () {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows())
            }
        };

二十4、document.body.scrollTop 一直都是 0 的問題

頁面具備 DTD（或者說指定了 DOCTYPE）時，使用 document.documentElement，兼容寫法以下：

var currentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

二十5、原生js獲取元素寬高及對應位置

標籤元素的寬高值獲取
//絕對寬度
Obj.offsetWidth
//絕對高度
Obj.offsetHeight

/*如下是獲取窗口對象的寬高值。
clientHeight   獲取對象的高度，不計算任何邊距、邊框、滾動條，但包括該對象的補白。
clientLeft   獲取   offsetLeft   屬性和客戶區域的實際左邊之間的距離。
clientTop   獲取   offsetTop   屬性和客戶區域的實際頂端之間的距離。
clientWidth   獲取對象的寬度，不計算任何邊距、邊框、滾動條，但包括該對象的補白。
clientX   設置或獲取鼠標指針位置相對於窗口客戶區域的   x   座標，其中客戶區域不包括窗口自身的控件和滾動條。 
clientY   設置或獲取鼠標指針位置相對於窗口客戶區域的   y   座標，其中客戶區域不包括窗口自身的控件和滾動條。
clip   設置或獲取定位對象的哪一個部分可見。
clipBottom   獲取對象剪裁區域的底邊座標。
clipLeft   獲取對象剪裁區域的左邊座標。
clipRight   獲取對象剪裁區域的右邊座標。
clipTop   獲取對象剪裁區域的頂邊座標。*/

二十6、jQuery獲取元素位置、寬高

$(window).height(); //是文檔窗口高度 
$("div").offset().top; //是標籤距離頂部高度
$("div").offset().left; //是標籤距離右邊高度
$(document).scrollTop(); //是滾動條高度
$("div").height(); //是標籤高 
$("div").width(); //是標籤寬 
$("div").outerHeight(); //是標籤總高 
$("div").outerWidth(); //是標籤總寬 
$("div").offset().top-$(document).scrollTop(); //元素相對屏幕高度位置

二十7、js動態加載腳本

    function loadScript(url, callback) {
        var script = document.createElement("script")
        script.type = "text/javascript";
        if (script.readyState) { //IE
            script.onreadystatechange = function () {
                if (script.readyState == "loaded" || script.readyState == "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else { //Others
            script.onload = function () {
                callback();
            };
        }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }

二十8、javascript 操做符（~、&、|、^、<<、>>）(操做數是32整數範圍內）

        //一、按位非~
        var num1=25;//
        var num2=~num1;// -26
        //說明:相信你們也已經看出來了按位~（NOT）的實現原理：
        //以num一、num2爲講解對象
        //第一步：先把num1轉換成二進制
        //第二步：取得num1二進制的反碼賦值給num2
        //第三步：在把num2換算成十進制數字
        //簡單說明：就是把操做數的數值的負數減1
        //二、按位與 &（AND）
        var result=25 & 3;
        alert(result);//1
        //說明，就是把兩數轉換成二進制數字，按照必定的規則:
        //第一個數值的位       第二個數值的位     結果
        //  1                       1           1
        //  1                       0           0
        //  0                       1           0
        //  0                       0           0
        //簡而言之，按位操做符的相對應的位都是1時則返回1，任何一位是0則返回0.
        //而後在獲得的二進制轉換成十進制數字
      //  25=0000 0000 0000 0000 0000 0000 0001 1001
      //  3= 0000 0000 0000 0000 0000 0000 0000 0011
      //  ------------------------------------------
      // AND=0000 0000 0000 0000 0000 0000 0000 0001
        //三、按位或 |（OR）
        var result=25 | 3;
        alert(result);//27
        //說明，就是把兩數轉換成二進制數字，按照必定的規則:
        //第一個數值的位       第二個數值的位     結果
        //  1                       1           1
        //  1                       0           1
        //  0                       1           1
        //  0                       0           0
        //簡而言之，按位操做符的相對應的位有一位是1就返回1，而只有在兩個位都是0的狀況下才返回0.
        //而後在獲得的二進制轉換成十進制數字
        //  25=0000 0000 0000 0000 0000 0000 0001 1001
        //  3= 0000 0000 0000 0000 0000 0000 0000 0011
        //  ------------------------------------------
        //  OR=0000 0000 0000 0000 0000 0000 0001 1011
        //四、按位異或 ^（XOR）
        var result= 25 ^ 3;
        alert(result);//26
        //說明，就是把兩數轉換成二進制數字，按照必定的規則:
        //第一個數值的位       第二個數值的位     結果
        //  1                       1           0
        //  1                       0           1
        //  0                       1           1
        //  0                       0           0
        //簡而言之，這個操做符（^）在兩個數值對應位上只有一個1時才返回1，不然返回0.
        //而後在獲得的二進制轉換成十進制數字
        //  25=0000 0000 0000 0000 0000 0000 0001 1001
        //  3= 0000 0000 0000 0000 0000 0000 0000 0011
        //  ------------------------------------------
        // XOR=0000 0000 0000 0000 0000 0000 0001 1010
        //五、左移（<<）
        var oldNum=2;
        var newNum=oldNum << 5;
        alert(newNum)
        //說明,將2（二進制數碼10）向左移5位結果就是1000000（二進制）等於64
        //注意，左移不會影響操做符的符號位，例如將-2左移5位就是-64
        //2=0000 0000 0000 0000 0000 0000 0000 0010
       //64=0000 0000 0000 0000 0000 0000 010 00000
        //六、有符號右移（>>）
        var oldNum=64;
        var newNum=oldNum >> 5;
       //64=0000 0000 0000 0000 0000 0000 010 00000
        //2=0000 0000 0000 0000 0000 0000 0000 0010
        alert(newNum)

二十9、audio標籤聲音文件如何重播？replay?

audioElement.currentTime=0;
audioElement.play();

三10、js中如何使用FormData或者Ajax方式上傳文件

可參考：

FormData 對象的使用

Using XMLHttpRequest

Sending and Receiving Binary Data

三11、js中的call、apply、bind的使用方法

在JavaScript中，call、apply和bind是Function對象自帶的三個方法，這三個方法的主要做用是改變函數中的this指向。
bind 是返回對應函數，便於稍後調用；apply 、call 則是當即調用。

以下代碼：call 須要把參數按順序傳遞進去，而 apply 則是把參數放數組裏。

function class1(args1,args2){       
  this.name=function(){      
   console.log(args1,args2);      
  }     
}     
function class2(){    
  var args1="1";
  var args2="2";
  class1.call(this,args1,args2);  
  /*或*/
  class1.apply(this,[args1,args2]);
}

var c=new class2();   
c.name(); // => 1 2

在JavaScript 中，某個函數的參數數量是不固定的，所以要說適用條件的話，當你的參數是明確知道數量時用 call ；而不肯定的時候用 apply，而後把參數 push 進數組傳遞進去。當參數數量不肯定時，函數內部也能夠經過 arguments 這個數組來遍歷全部的參數。

MDN的解釋是：bind()方法會建立一個新函數，稱爲綁定函數，當調用這個綁定函數時，綁定函數會以建立它時傳入 bind()方法的第一個參數做爲 this，傳入 bind() 方法的第二個以及之後的參數加上綁定函數運行時自己的參數按照順序做爲原函數的參數來調用原函數。

var bar=function(){   
  console.log(this.x);   
}
var foo={ 
     x:3   
} 
bar();  // => undefined
bar.bind(foo)(); // => 3
/*或*/ 
var func=bar.bind(foo);   
func(); // => 3

在react中也常常要用到把this綁回(bind)到自帶函數中供調用。

三12、加載js用async和defer的區別

都是異步加載，但執行時機不同，async是加載後立刻執行，defer是等到DOMContentLoaded後才執行，相似jQuery的$(document).ready(function(){});

三十3、非cookie狀況下，前端實現訪問終端的惟一標識:Fingerprintjs2

https://github.com/Valve/fingerprintjs2

三十4、Debounce和Throttle的區別

Debounce是把多個連續的事件組合成一個執行，而Throttle是約束事件執行的頻率及能夠設一個最小間隔

// Debounce把200毫秒內的事件組合
$(window).on('scroll', _.debounce(doSomething, 200));

// Throttle事件執行的間隔最少爲200毫秒
$(window).on('scroll', _.throttle(doSomething, 200));

三十5、原生js作上拉到底部加載

    window.onscroll = debounce(function () {
      var dH = document.documentElement.scrollHeight || document.body.scrollHeight;
      var sT = document.documentElement.scrollTop || document.body.scrollTop;
      var wH = document.documentElement.clientHeight || document.body.clientHeight;

      if (wH + sT >= dH - 80) {
        loadmore();
      }
    }, 200);

三十6、js正則過濾emoji表情輸入

      const emojiReg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g
      str = str.replace(/\s+/g, '').replace(emojiReg, '') // 過濾空格及emoji

三十7、WPS2013形成的HTML5 file.type值異常

若是裝了wps2013，在網頁中使用file組件時，office文件的file.type會變爲空值，能夠經過file.name進行文件類型的判斷

三十8、js如何判斷網絡是否正常

if (navigator && navigator.onLine === false) {
  alert("沒法鏈接網絡")
} else {
 alert("正常上網")
}

三十9、在QQ/微信瀏覽器裏面使用el.scrollTo(0, 0)無效的問題

解決方法以下（但部分榮耀手機設置scrollLeft卻無效……，能夠兼容地來使用）：

el.scrollLeft = 0 // 可以使用scrollLeft或者scrollTop動態設置

四10、js如何實現input=file對要上傳的圖片進行預覽

// 方式一　使用FileReader
        var reads= new FileReader();
        f=document.getElementById('file').files[0];
        reads.readAsDataURL(f);
        reads.onload=function (e) {
            document.getElementById('show').src=this.result;
        };

// 方式二　使用window.URL.createObjectURL
        var url = null ;
        // 下面函數執行的效果是同樣的，只是須要針對不一樣的瀏覽器執行不一樣的 js 函數而已
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }

// 參考引用： https://blog.csdn.net/weixin_38023551/article/details/78318532

四11、如何建立一個乾淨的對象

var emptyObj = Object.create(null) // => {}No properties，乾淨的，沒有任務的屬性
var obj = {} // => {}__proto__: Object 不乾淨的，繼承了Object對象的全部屬性

四12、0 == '' // => true的坑

要如何解決0==''的坑？使用全===吧，0==='' // => false

四十3、ios8的坑。Dom類數組，要先轉爲數組纔可使用forEach進行遍歷

const els = [...document.querySelectorAll('.el')]

四十4、爲何要用sessionStorage?

sessionStorage 與 localStorage 的接口相似，但保存數據的生命週期與 localStorage 不一樣。作事後端開發的同窗應該知道 Session 這個詞的意思，直譯過來是「會話」。而 sessionStorage 是一個前端的概念，它只是能夠將一部分數據在當前會話中保存下來，刷新頁面數據依舊存在。但當頁面關閉後，sessionStorage 中的數據就會被清空。

四十5、js操做視頻相關用法

https://github.com/webrtc/samples

http://www.javashuo.com/article/p-eocynrma-bn.html

http://www.javashuo.com/article/p-kwbvkdmi-bz.html

四十6、ios中new Date('2017-08-11 12:00:00')設置日期不成功問題

new Date("2017-08-11 12:00:00".replace(/-/g, '/')) // 需寫成這樣

四十7、canvas圖片繪製後轉圖片url跨域問題Tainted canvases may not be exported

先後端一塊兒改，前端請求圖片時增長 img.crossOrigin = 'anonymous'，後端要設置容許跨域請求

function preLoadCrossOriginImage (url, callback) { // fixed Chrome 圖片load不出來問題
    let img = new Image() //建立一個Image對象，實現圖片的預下載  
    img.crossOrigin = 'anonymous'
    img.src = url
  
    if (img.complete) { // 若是圖片已經存在於瀏覽器緩存，直接調用回調函數  
      callback && callback.call(img)
      return // 直接返回，不用再處理onload事件  
    }
  
    img.onload = function () { //圖片下載完畢時異步調用callback函數。  
      callback && callback.call(img) //將回調函數的this替換爲Image對象  
    }
  }

response.setHeader("Access-Control-Allow-Origin", "https://www.xxxx.com") // 後端

四十8、建立一個a連接使用a.click()模擬點擊,主流瀏覽器能夠，可是在ie10如下不能生效

ie10如下，createElement建立的是一個對象，須要把他添加到一個元素後面

        const a = document.createElement('a')
        downloadElement.href = 'http://www.xxx.com'
        document.body.appendChild(a)
        downloadElement.click() // 點擊
        document.body.removeChild(a) // 點擊完成移除元素