JS面向对象及组件开发学习笔记(3)

发表于 | 分类于 ， ， | 阅读次数:

组件开发

对象的多种表现形式
提高对象的复用性
如何配置参数和默认参数
例子：拖拽
例子：弹窗

例子：拖拽的组件开发
例子：弹窗的组件开发

复杂组件开发之自定义事件

组件
对面向对象的深入应用（UI组件，功能组件）
将配置参数、方法、事件，三者进行分离
创建自定义事件
有利于多人协作开发代码
如何去挂载自定义事件与事件函数

自定义事件：让函数能够具备事件的某些特性（绑定事件互相不会覆盖）

1
2
3
4
5
6
7
8
9
10
11
window.addEventListener('show',function(){
  alert(1);
},false);
window.addEventListener('show',function(){
  alert(2);
},false);
window.addEventListener('show',function(){
  alert(3);
},false);

show(); //主动触发自定义事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<div id="div1"></div>
<span id="span1"></span>
<script>
  window.onload = function(){
    var oDiv = document.getElementById('div1');
    var oSpan = document.getElementById('span1');

    bindEvent(oDiv, 'click', function(){
      alert(1);
    });

    bindEvent(oDiv, 'click', function(){
      alert(2);
    });

    bindEvent(oSpan, 'show', function(){
      alert(3);
    });

    bindEvent(oSpan, 'show', function(){
      alert(4);
    });

    bindEvent(oSpan, 'hide', function(){
      alert(5);
    });

    fireEvent(oSpan, 'show'); //执行结果 3

    function bindEvent(obj, events, fn){
      // obj : 楼层
      // events : 书架
      // fn : 一本书

      obj.listeners = obj.listeners || {};
      obj.listeners[events] = obj.listeners[events] || [];
      obj.listeners[events].push(fn);

      if (obj.addEventListener) {
        obj.addEventListener(events, fn, false);
      } else { //兼容IE
        obj.attachEvent('on'+events, fn);
      }
    }
    function fireEvent(obj, events){ //主动触发自定义事件
      for (var i = 0; i < obj.listeners[events].length; i++) {
        obj.listeners[events][i]();
      }
    }
  };
</script>

EventTarget.addEventListener()

JS综合应用

1
2
3
4
5
6
7
8
<div id="div1">
  <div id="div2"></div>
</div>
<script>
  var oDiv = document.getElementById('div1');
  oDiv.onmouseover = function(){};
  oDiv.onmouseout = function(){};
</script>

子集影响父级的bug（在IE下使用onmouseover和onmouseout时）
解决方案：
1.js：onmouseenter onmouseleave（子集不会影响父级）（最早IE支持，可能会有兼容性问题，做兼容非常麻烦）

1
2
3
function elContains(a, b){ //判断两个元素是否是嵌套关系
  return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}

2.css：加一个层

例子：图片放大镜效果
例子：苹果菜单