js常用工具类函数及问题汇总

移除某个元素

* @param {Node} element 需要移除的元素
* @param {Object} options 相关的逻辑配置
* @param {boolean} options.removeEventListeners 是否同时将所有注册在元素上的事件移除
*/
function removeElement(element, options) {
    element.parent.removeChild(element);
    if (options.removeEventListeners) {
        element.clearEventListeners();
    }
}

使用options好处(布尔类型)：
1.当对参数进行操作时，能够很清楚的明确该参数的用途
2.便于增加参数，只需判断是否存在即可

数组去重（包括NaN,undefined,对象）

var array = [1, 1, '1',3,5,7,3,3,5,2,1,1,/s/,/s/,NaN,2,3,6,7,7,NaN,4,3,3];
		function unique(array) {
		    var obj = {};
		    return array.filter(function(item, index, array){
		        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
		    })
		}
		console.log(unique(array));

APP开发中 IOS自动把数字识别为电话号码，在页面添加一下标签

    <meta name="format-detection" content="telephone=no" />
	<meta name="format-detection" content="email=no" />
	<meta name="format-detection" content="address=no" />
	<meta name="format-detection" content="date=no" />

若要开启电话格式

   <a href="tel:8602188888888">+86 021 88888888</a>

时间最快的循环方式（duff’s device）

var number = 100000;//array大小
var iteranum = 100;//迭代次数
var array = [];
for(let i=0;i<number;i++)
{
    array[i] = i+1;
}
var len = array.length;
console.time("device's device");
for(let k=0;k<iteranum;k++)
{
    let j = len % 8;
    let templen = len-1;
    while(j){
        j--;
        array[templen--]+1;
    }

    j = Math.floor(len / 8);

    while(j){
        j--;
        array[templen--]+1;
        array[templen--]+1;
        array[templen--]+1;
        array[templen--]+1;
        array[templen--]+1;
        array[templen--]+1;
        array[templen--]+1;
        array[templen--]+1;
    }
}
console.timeEnd("device's device");

友情提示 while里不要打印任何东西！！！

testarea 兼容性问题

<textarea rows="30" cols="50" maxlength="100" onchange="this.value=this.value.substring(0,100)"
onkeydown="this.value=this.value.substring(0,100)" onkeyup="this.value=this.value.substring(0,100)" >
</textarea>

table排序

var table=document.getElementById("myTable");
var table_th=table.getElementsByTagName("th");
var table_tbody=table.getElementsByTagName("tbody")[0];
var table_tr=table_tbody.getElementsByTagName("tr");
function bind_click(_i){
    table_th[_i].onclick=function(){
        var temp_arr=[];
        var temp_tr_arr=[];

        for(j=0;j<table_tr.length;j++){
            temp_arr.push(table_tr[j].getElementsByTagName("td")[_i].innerHTML);
            temp_tr_arr.push(table_tr[j].cloneNode(true));
        }
        var tr_length=table_tr.length;
        for(x=0;x<tr_length;x++){
            table_tbody.removeChild(table_tbody.getElementsByTagName("tr")[0]);
        }
        var temp=parseInt(temp_arr[0])||temp_arr[0];
        temp_arr.sort();
        for(k=0;k<temp_arr.length;k++){
            for(vv=0;vv<temp_tr_arr.length;vv++){
                if(temp_arr[k]==temp_tr_arr[vv].getElementsByTagName("td")[_i].innerHTML){
                    table_tbody.appendChild(temp_tr_arr[vv]);
                }
            }
        }
    }
}
for(let i=0;i<num;i++){ 
    bind_click(i);
}

自定义遮罩

.mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
}
.spinner {
    width: 150px;
    position: absolute;
    text-align: center;
    top: 500px;
    left: calc(50% - 75px);
}

.spinner > div {
    width: 30px;
    height: 30px;
    background-color: #c8c8c8;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
    0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 40% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
      }
}
<div class="mask">
    <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
    </div>
</div>

自定义滚动条

.chart_table{
    width: 100%;
    height: 200px;
    overflow: auto;
}
.chart_table::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.chart_table::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #EDEDED;
}
.chart_table::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #535353;
}

一个比较实用的前端模板 handlebars

下载地址handlebars.js (需要)
使用方式：

<script src="handlebars-v4.0.8.js"></script>
<script id="tpl" type="text/x-handlebars-template">
    {{#each this}}         //用于循环
      <div>{{init}}</div>
    {{/each}}
</script>
<script>
var myTemplate = Handlebars.compile($("#tpl").html());
var tableTempArr = [     //模板对象的数据
  {init:xxx},
  {init:xxx},
]；
$('#id').html(myTemplate(tableTempArr));
</script>