摘要:写一个事件侦听器函数相当于封装一个兼容主流浏览器和根据情况分别使用方式来添加事件根据情况分别获取或者中的事件对象,事件目标,阻止事件的默认行为根据情况分别使用方式来删除事件根据情况分别取消或者中事件冒泡如何书写高性能代码怎样用实现千位分隔符
写一个事件侦听器函数?
(相当于封装一个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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/93510.html
摘要:哈哈,写到这个话题想要先扯点别的,说实话我是比较自虐的人,大学时候本专业从来不好好上,一直觊觎着别人的专业,因为自己文科生,总觉得没有项技术在身出门找工作都没有底气,然后看什么炫学什么,简直没有目的和节操,觉得平面设计美就去狂记色号当然不是 哈哈,写到这个话题想要先扯点别的,说实话我是比较自虐的人,大学时候本专业从来不好好上,一直觊觎着别人的专业,因为自己文科生,总觉得没有项技术在身出...
阅读 2643·2021-11-25 09:43
阅读 2432·2021-09-22 15:29
阅读 963·2021-09-22 15:17
阅读 3586·2021-09-03 10:36
阅读 2201·2019-08-30 13:54
阅读 1721·2019-08-30 11:23
阅读 1145·2019-08-29 16:58
阅读 1272·2019-08-29 16:14