寫一個事件偵聽器函式?
(相當於封裝一個util相容主流瀏覽器和IE)
var EventUtil = {
//根據情況分別使用dom2 || IE || dom0方式 來新增事件
addHandler: function(element,type,handler) {
if(element.addEventListener) {
element.addEventListener(type,handler,false);
} else if(element.attachEvent) {
element.attachEvent("on" + type,handler);
} else {
element["on" + type] = handler;
}
},
//根據情況分別獲取DOM或者IE中的事件物件,事件目標,阻止事件的預設行為
getEvent: function(event) {
return event ? event: window.event;
},
getTarget: function(event) {
return event.target || event.srcElement;
},
preventDefault: function(event) {
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
//根據情況分別使用dom2 || IE || dom0方式 來刪除事件
removeHandler: function(element,type,handler){
if(element.removeHandler) {
element.removeEventListener(type,handler,false);
} else if(element.detachEvent) {
element.detachEvent("on" + type,handler);
} else {
element["on" + type] = null;
}
}
//根據情況分別取消DOM或者IE中事件冒泡
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}
var btn = document.getElementById("myBtn"),
handler = function () {
alert("Clicked");
};
EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);
如何書寫高效能程式碼
http://developer.51cto.com/ar…
怎樣用js實現千位分隔符
function format (num) {
var reg=/d{1,3}(?=(d{3})+$)/g;
return (num + ``).replace(reg, `$&,`);
}
``
function format(num){
num=num+``;//數字轉字串
var str="";//字串累加
for(var i=num.length- 1,j=1;i>=0;i--,j++){
if(j%3==0 && i!=0){//每隔三位加逗號,過濾正好在第一個數字的情況
str+=num[i]+",";//加千分位逗號
continue;
}
str+=num[i];//倒著累加數字
}
return str.split(``).reverse().join("");//字串=>陣列=>反轉=>字串
}
發現一個更好的方法補充一下
let arr = [];
function three(num){
if(num<1){
return num
}
arr.unshift(parseInt(num%1000))
three(num/1000);
}
three(1234567)
console.log(arr.join(`,`))
編寫一個方法 求一個字串的位元組長度
function getByte(str){
var len = str.length,
bytes = len,
i = 0;
for(; i<len; i++){
if (str.charCodeAt(i) > 255) bytes++;
}
return bytes;
}
JavaScript中如何對一個物件進行深度clone
function clone(obj) {
if (!obj && typeof obj !== `object`) {
return;
}
var copy = (obj instanceof Array)?[]:{};
for(var o in obj) {
if (typeof obj[o] === `object`) {
copy[o] = clone(obj[o]);
} else {
copy[o] = obj[o];
}
}
return copy;
}
var obj = {
name: `zhangsan`,
age: 33,
child:{
name:`zhangxiao`,
age:9,
eat:[1,{el:2}]
},
hobby:undefined,
eat:[1,2,3,4]
}
var a=clone(obj)
obj.child.name = `lis`;
console.log(a);
以下程式碼執行結果
function say() {
var num = 888;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
var sayAlert = say();
sayAlert();//889
剛呼叫say()函式的時候sayAlert不會執行,因為沒有啊sayAlert()這樣呼叫
如何實現Array.prototype.forEach?
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(fn){
for ( var i = 0; i < this.length; i++ ) {
fn( this[i], i, this );
}
};
}
js怎麼獲取非行內樣式
function getStyle(obj, attr){
if(obj.currentStyle) {
obj.currentStyle[attr]
} else {
getComputedStyle(obj, null)[attr];
}
}
求陣列中出現次數最多的元素和次數
<script>
var arr = [1,1,1,4,5,4];
var obj = {};
for(var ar in arr){
if(obj[arr[ar]]){
obj[arr[ar]]++;
} else {
obj[arr[ar]] = 1;
}
}
console.log(obj);
1.//獲取出現最多的元素 次數
var res = [];
for(var o in obj) {
res.push({el: o,val:obj[o]});
}
res.sort(function(a,b){
return -(a.val-b.val);
})
console.log(res[0])
2.
let maxone = 0;
for(var o in obj){
if(obj[o]>maxone){
maxone = obj[o]
}
}
console.log(maxone)
</script>
apply call bind
/*
apply call bind
this 千變萬化
都是改變this的智享
前兩者:相當於返回是立即執行函式 fn.call(obj) 相當於obj的prototype上面有一個 fn()函式 obj就能順著原型鏈網上找 this指向obj
bind:返回的是一個函式不會立即執行
*/
var a = 1;
var obj = {
a:2,
fn:function(){
console.log(this.a)
}
}
obj.fn.call(obj) //2
var fn2=obj.fn.bind(obj)
var fn3 = obj.fn.bind()
console.log(fn2) //fn(){console.log(this.a)}
fn2() //2
fn3() //1
用js建立10個標籤,點選的時候彈出來對應的序號
let aa = document.getElementById(`aa`)
for(var i=0;i<5;i++){
(function(i){
let el_a = document.createElement(`a`);
el_a.innerHTML = i+`<br/>`
el_a.addEventListener(`click`,function(e){
e.preventDefault()
console.log(i)
},)
aa.appendChild(el_a)
})(i)
}
也可以把for的var改成let
閉包
// 閉包 1.能呼叫其他函式內部變數(給變數新增了快取 但要注意在適當的時候清除快取) 2.匿名執行函式(防止全域性變數汙染)
function f1(){
var a = 1;
return function(){
console.log(a)
}
}
let a = f1();
function f2(f){
var a =2;
f()
}
f2(a)
回撥函式在工作中的應用
/寫回撥函式:通常axios請求的函式是封裝起來的(便於維護) 發起請求的頁面是分開的/
let params = {
a:1,
b:1,
callback:function({datas}){
console.log(`hhhh`)
console.log(datas)
}
}
apiAxios(params)
// 封裝到一個js裡面
function apiAxios(params){
// axios.get(`url`).then((resp)=>{
let datas = [1,2,3,4]
params.callback({datas:datas})
// })
}