popup封装之学习记录

一、重点理解：call、继承
1、call:在特定的作用域调用函数(本例中是调用ol.Overlay)，实际上等于设置函数体内的this对象的值。call接受两个参数：(1)、 this:运行函数的作用域(2)、任意多个参数，它们会作为参数传递给调用函数(本例是将options参数传递给ol.Overlay)
2、openlayers继承方式：寄生组合式继承

/**
 * Inherit the prototype methods from one constructor into another.
 *
 * Usage:
 *
 *     function ParentClass(a, b) { }
 *     ParentClass.prototype.foo = function(a) {
 *         console.log(a);
 *     }
 *
 *     function ChildClass(a, b, c) {
 *       // Call parent constructor
 *       ParentClass.call(this, a, b);
 *     }
 *     ol.inherits(ChildClass, ParentClass);
 *
 *     var child = new ChildClass('a', 'b', 'see');
 *     child.foo('hello! javascript!'); // 打印：hello! javascript!
 *
 */
ol.inherits = function(childCtor, parentCtor) {
  childCtor.prototype = Object.create(parentCtor.prototype);
  childCtor.prototype.constructor = childCtor;
};

3、popup模块

    ol.Overlay.Popup = function(opt_options) {
  
        var options = opt_options || {};

        this.container = document.createElement('div');
        this.container.className = 'ol-popup';

        this.closer = document.createElement('a');
        this.closer.className = 'ol-popup-closer';
        this.closer.href = '#';
        this.container.appendChild(this.closer);

        var that = this;
        this.closer.addEventListener('click', function(evt) {
            that.container.style.display = 'none';
            that.closer.blur();
            evt.preventDefault();
        }, false);

        this.content = document.createElement('div');
        this.content.className = 'ol-popup-content';
        this.container.appendChild(this.content);

       // options.element = this.container;
       // ol.Overlay.call(this, options);
   
       ol.Overlay.call(this, {
                element: options,
                stopEvent: true
       });

    };

    ol.inherits(ol.Overlay.Popup, ol.Overlay);

    ol.Overlay.Popup.prototype.show = function(coord, html) {
        if (html instanceof HTMLElement) {
            this.content.innerHTML = "";
            this.content.appendChild(html);
        } else {
            this.content.innerHTML = html;
        }
        this.container.style.display = 'block';
        this.content.scrollTop = 0;
        this.setPosition(coord);
        return this;
    };

    ol.Overlay.Popup.prototype.hide = function() {
        this.container.style.display = 'none';
        return this;
    };

    ol.Overlay.Popup.prototype.isOpened = function() {
        return this.container.style.display == 'block';
    };

    var popup = ol.Overlay.Popup;

export {popup}

二、利用rollup将popup模块代码编译成UMD格式
1、文件目录

flie.png

2、最简单的配置

rollup.config.png
package.json.png

3、开始编译：rollup -c

rollup.png

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = global || self, factory(global.tmap = {}));
}(this, function (exports) { 'use strict';

  ol.Overlay.Popup = function(opt_options) {
    
          var options = opt_options || {};

          this.container = document.createElement('div');
          this.container.className = 'ol-popup';

          this.closer = document.createElement('a');
          this.closer.className = 'ol-popup-closer';
          this.closer.href = '#';
          this.container.appendChild(this.closer);

          var that = this;
          this.closer.addEventListener('click', function(evt) {
              that.container.style.display = 'none';
              that.closer.blur();
              evt.preventDefault();
          }, false);

          this.content = document.createElement('div');
          this.content.className = 'ol-popup-content';
          this.container.appendChild(this.content);

        //  options.element = this.container;
        //   ol.Overlay.call(this, options);
   
        ol.Overlay.call(this, {
            element: this.container,
            stopEvent: true
        });

      };

      ol.inherits(ol.Overlay.Popup, ol.Overlay);

      ol.Overlay.Popup.prototype.show = function(coord, html) {
          if (html instanceof HTMLElement) {
              this.content.innerHTML = "";
              this.content.appendChild(html);
          } else {
              this.content.innerHTML = html;
          }
          this.container.style.display = 'block';
          this.content.scrollTop = 0;
          this.setPosition(coord);
          return this;
      };

      ol.Overlay.Popup.prototype.hide = function() {
          this.container.style.display = 'none';
          return this;
      };

      ol.Overlay.Popup.prototype.isOpened = function() {
          return this.container.style.display == 'block';
      };

      var popup = ol.Overlay.Popup;

  exports.popup = popup;

  Object.defineProperty(exports, '__esModule', { value: true });

}));

三、测试：

    var popup = new tmap.popup();
    map.addOverlay(popup);

    map.on('click', function (evt) {
        var evtCoordinates = evt.coordinate;
        var content ="hello! 弹出框！"
        popup.show(evtCoordinates,content);
    });

popups.png