summary

js模式及应用：

1.代理模式

  代理和本体接口的一致性

  用虚拟代理合并HTTP请求

  缓存代理用于ajax异步请求数据

  缓存代理惰性加载

 

  例子：图片惰性加载的例子

 

2.发布订阅模式

  先订阅再发布：listen与trigger理解

  先发布再订阅：例子，qq离线消息的应用

 

  模块间的通信

 

  例子：用户登陆后，更新UI等一系列操作

 

3.策略模式

 

  例子：form表单验证

 

4.装饰者模式

   

  在不改变A模块的条件下，给A模块添加功能，

  

  例子：各种链式操作。（可为A模块提供before,after链式调用）

 

5.适配器模式

   

  当A和B模块的接口不一致时，提供一个中间件用于转换

 

 

浏览器渲染：

 

1.浏览器渲染: Nodes --> LayoutObject --> PaintLayer --> GraphicsLayer

 

  每一个LayoutObject都有对应的渲染层(PaintLayer)

  

  所谓开启硬件加速(translate3D,will-change属性)，就是将渲染层提升为合成层，而合成层有单独的GraphicsLayer,由GPU来渲染

 

2.开闭原则

 

其他：

1.二进制 

  

 -7 << 2 结果为 -28 （-7*4）

 -7 >> 2 结果为 -2   （(-7-1)/4）

 

2.判断li属于第几个ul

<ul>

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li οnclick="test(this)">4</li>

  <li>5</li>

</ul>

<script>

  function test(elem){

    var loc = [].indexOf.call(elem.parentNode.children, elem)

    console.log(loc)

  }

</script>

 

3.前端压缩图片可用canvas实现

  canvas获取到的图片数据，每4组是一个像素的数据，分别表示rgba（三个色值及透明度）