摘要:寫一個事件偵聽器函數相當于封裝一個兼容主流瀏覽器和根據情況分別使用方式來添加事件根據情況分別獲取或者中的事件對象,事件目標,阻止事件的默認行為根據情況分別使用方式來刪除事件根據情況分別取消或者中事件冒泡如何書寫高性能代碼怎樣用實現千位分隔符
寫一個事件偵聽器函數?
(相當于封裝一個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(; iJavaScript中如何對一個對象進行深度clone255) bytes++; } return bytes; }
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]; } }求數組中出現次數最多的元素和次數 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+"
" 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}) // }) }網頁是如何渲染出來的
用戶輸入url到頁面顯示這個過程中發生了什么呢?
1、輸入url發送請求
2、瀏覽器拿到服務器返回的HTML
3、瀏覽器開始解析HTML生產DOM樹、css生產css樹,兩個樹合在一起生成渲染數
4、瀏覽器根據渲染樹來繪制頁面
注意:重繪和重排兩個關鍵字
1)重繪:dom節點不發生位置的變化,例如改變background,不影響周邊的節點
2)重排:dom發生節點變化,涉及到的周邊節點也會發生重排,因此消耗性能較大,例如操作節點,修改樣式的寬高,偽類的操作等
3)js的執行會影響dom樹和css樹的渲染
4)瀏覽器遇到這個標簽 不會停下來,而是繼續下來,等圖片請求下來再返回去重排
總結:一些動畫類的操作節點盡量使用absolute或者fixed,避免影響周邊節點
最近刷博客看到的,window.perforance.timing這個方法下面有很多的屬性可以獲取
DNS查詢耗時 = domainLookupEnd - domainLookupStart TCP鏈接耗時 = connectEnd - connectStart request請求耗時 = responseEnd - responseStart 解析dom樹耗時 = domComplete - domInteractive 白屏時間 = domloadng - fetchStart domready時間 = domContentLoadedEventEnd - fetchStart onload時間 = loadEventEnd - fetchStart
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93510.html
摘要:哈哈,寫到這個話題想要先扯點別的,說實話我是比較自虐的人,大學時候本專業從來不好好上,一直覬覦著別人的專業,因為自己文科生,總覺得沒有項技術在身出門找工作都沒有底氣,然后看什么炫學什么,簡直沒有目的和節操,覺得平面設計美就去狂記色號當然不是 哈哈,寫到這個話題想要先扯點別的,說實話我是比較自虐的人,大學時候本專業從來不好好上,一直覬覦著別人的專業,因為自己文科生,總覺得沒有項技術在身出...
閱讀 2662·2021-11-25 09:43
閱讀 2472·2021-09-22 15:29
閱讀 984·2021-09-22 15:17
閱讀 3628·2021-09-03 10:36
閱讀 2223·2019-08-30 13:54
閱讀 1740·2019-08-30 11:23
閱讀 1163·2019-08-29 16:58
閱讀 1290·2019-08-29 16:14