js组件化开发

2016-12-04 本文已影响0人 GQ1994

如果不了解js的继承的写法，可以先去看看我之前写的js的子类继承父类文章
http://www.jianshu.com/p/61b17c62c9fa

js的继承在写好后，我们会发现构造器传参，当参数多的情况下会出现，参数先后问题，和参数数量不对应的问题，而且直接js会报错

要解决这个问题其实很简单，首先传参的先后顺序只需要一个是不是就解决问题了？可是要传很多东西呢，又要放在一个变量里，对，就是json，将变量放在一个json对象中。再来就是参数个数问题，当在调用的时候，传过来的参叫配置参数，我们可以在父类里预先设定好默认参数，在配置参数来了之后将其复制给默认参数，没有的参数将会使用默认的，有的用配置参数就搞定了参数个数问题了。

下面直接上demo（对之前做的div拖动进行组件化的加工）

  <!DOCTYPE HTML>
  <html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>无标题文档</title>
      <style>
          #div1 {
              width: 100px;
              height: 100px;
              background: red;
              position: absolute;
          }
  
          #div2 {
              width: 100px;
              height: 100px;
              background: yellow;
              position: absolute;
              left: 100px;
          }
  
          #div3 {
              width: 100px;
              height: 100px;
              background: blue;
              position: absolute;
              left: 200px;
          }
  
          #div4 {
              width: 100px;
              height: 100px;
              background: green;
              position: absolute;
              left: 300px;
          }
      </style>
      <script>
  
          //组件开发 : 多组对象，像兄弟之间的关系( 代码复用的一种形式 )
  
          window.onload = function () {
  
              var d1 = new Drag();
              d1.init({    //配置参数
                  id: 'div1'
              });
  
              var d2 = new Drag();
              d2.init({   //配置参数
                  id: 'div2',
                  toDown: function () {
                      document.title = 'hello';
                      document.body.style.background = 'black';
                  }
              });
  
              var d3 = new Drag();
              d3.init({    //配置参数
                  id: 'div3',
                  toDown: function () {
                      document.title = '妙味';
                  },
                  toUp: function () {
                      document.title = '课堂';
                  }
              });
  
              var d4 = new Drag();
              d4.init({    //配置参数
                  id: 'div4',
                  toUp: function () {
                      document.title = 'beybye';
                  }
              });
  
          };
  
          function Drag() {
              this.obj = null;
              this.disX = 0;
              this.disY = 0;
  
              this.settings = {   //默认参数
                  toDown: function () {
                  },
                  toUp: function () {
                  }
              };
  
          }
          Drag.prototype.init = function (opt) {
  
              var This = this;
  
              this.obj = document.getElementById(opt.id);
  
              extend(this.settings, opt);
  
              this.obj.onmousedown = function (ev) {
                  var ev = ev || window.event;
                  This.fnDown(ev);
  
                  This.settings.toDown();
  
                  document.onmousemove = function (ev) {
                      var ev = ev || window.event;
                      This.fnMove(ev);
                  };
                  document.onmouseup = function () {
                      This.fnUp();
  
                      This.settings.toUp();
  
                  };
                  return false;
              };
  
          };
  
          Drag.prototype.fnDown = function (ev) {
              this.disX = ev.clientX - this.obj.offsetLeft;
              this.disY = ev.clientY - this.obj.offsetTop;
          };
          Drag.prototype.fnMove = function (ev) {
              this.obj.style.left = ev.clientX - this.disX + 'px';
              this.obj.style.top = ev.clientY - this.disY + 'px';
          };
          Drag.prototype.fnUp = function () {
              document.onmousemove = null;
              document.onmouseup = null;
          };
  
          function extend(obj1, obj2) {
              for (var attr in obj2) {
                  obj1[attr] = obj2[attr];
              }
          }
      </script>
  </head>
  
  <body>
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
  <div id="div4"></div>
  </body>
  </html>

如果是一个人开发，这个组件化开发的形式基本够用

但是为了后期易于维护，更有利于团队开发，要使用将类里面的配置参数，方法，事件进行分离，编写自定义事件进行开发，后续自定义事件开发我也会写相关文档

可以先看看这个demo（基于之前的div拖动事件修改的自定义事件）：
http://www.jianshu.com/p/4f2a951cb41a

js组件化开发

猜你喜欢

热点阅读