js组件化开发

什么是组件？

• 对面向对象的深入应用（UI组件，功能组件）
• 将 配置参数、方法、事件 三者分离

创建自定义事件

• 有利于多人协作代码开发
• 如何去挂载自定义事件与事件函数

关于编写组件配置参数：

  var a = { //配置参数
  }
  var b = { //默认参数
    name: '小明'
  }
  extend(a,b);
  console.log(a.name); //小明
  function extend(obj1,obj2){
    for (var attr in obj2) {
      obj1[attr] = obj2[attr];
    }
  }

关于创建自定义事件：

// <div id="div1" style="width:100px;height:70px;border:1px solid #ccc;"></div>
// <span id="span1">文字</span>
  window.onload = function(){
  var oDiv = document.getElementById('div1'),
      oSpan = document.getElementById('span1');
  bindEvent(oDiv,'click',function(){
    console.log(1);
  });
  bindEvent(oDiv,'click',function(){
    console.log(2);
  });

  bindEvent(oSpan,'show',function(){
    console.log(3);
  });
  bindEvent(oSpan,'show',function(){
    console.log(4);
  });
  fireEvent(oSpan,'show'); //控制台打出3和4
}
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 {
    obj.attachEvent('on'+events,fn);
  }
}
function fireEvent(obj,events){ //主动触发自定义事件
  for (var i = 0; i < obj.listeners[events].length; i++) {
    obj.listeners[events][i]();
  }
}

彩蛋

弹窗组件
仿淘宝查看商品细节图
仿mac菜单
拖拽图片补位
其中，拖拽图片补位，里面涉及到一个东西：

onmousemove和onmouseout受子集影响，解决方法：

• js onmouseenter onmouseleave（子集不会影响到父级）
• css （不成为父子关系）