重学前端(二)

1,css sprite,如何使用

为了节省图片资源加载,将多张图片整合到到一张图片上,利用background属性进行添加,background: #000 url("")  no-repeate fix 50% 50%

2,封装事件监听

function addEventHandle(target,type,fn) {

  if(target.addEventListener) {

    target.addEventLister(type, fn)

  } else {

    target.addEvent("on"+type,  fn)

  }

}

3,移除监听事件

function removeEventHandle(target,type,fn) {

  if(target.addEventListener) {

    target.removeEventLister(type, fn)

  } else {

    target.detachEvent("on"+type,  fn)

  }

}

4,事件委托(提高性能,减少内存占用)

document.onclick = function(event) {

  event = event || window.even;

       var target = event.target || event.srcElement; 

  if(target.id === "saveBtn") {

    alert("把子元素的click事件委托给docment去执行")

  }

}

5,事件绑定的防范

html中绑定;dom.onclick();利用时间监听绑定时间

6,js中的定时器有哪些?

 setTimeOut() 只执行一次  -----clearTimeOut()

setInterval()会一直重复执行 --- clearInterval()

var t = setTimeOut(fn,1000)

clearTimeOut(t);

7,数据存储

cookie:存储小;设置有效期限内不会被自动删除;和服务器之间可以互相传输数据。

localStorage: 有限制,比cookie大;除非手动,浏览器关闭不丢数据;只是通过api本地存储数据。

sessionStorage:有限制,比cookie大;浏览器关闭,数据丢失;只是本地数据存储。

8,计算数组元素的和

function add (arr){arr.reduce(function(a,y){return x+y})}

9,性能优化

 页面级别优化

(1)     减少http请求数(从设计层面减少请求,设置缓存减少请求,资源合并压缩,

(2)     框架只引入核心模块

(3)     将外部脚本在页面加载完成之后进行引入

(4)     Css放在head中

 代码级别优化

(1)减少dom操作

(2)避免使用eval

(3)减少作用链查找,局部变量全局化

(4)字符串拼接使用join,not “+”

(5)图片压缩

10,实现链式继承

function Super() {

  this.a = 0;

  this.b = 0;

}

Super.prototype.add = function(a,b){

  this.a +=  a;

  this.b += b;

}

 function Sub () {super.call(this)} // call supre constuctor

Sub.prototype = Object.create(Supre.prototype);

Sub.prototype.constructor = Sub;

猜你喜欢

转载自www.cnblogs.com/angel1254/p/10720813.html