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) // 点击完成移除元素