Google Closure связывает / решает проблемы с этим ключевым словом - PullRequest
Новая
       31

Google Closure связывает / решает проблемы с этим ключевым словом

4 голосов
/ 30 июня 2011

Что такое решение Google Closure для решения проблем с ключевым словом this в функциях обратного вызова JavaScript. Это было бы очень полезно в стиле программирования OO .

Существуют ли соглашения или стиль для ООП в Google Closure ???

обновление Как я могу получить доступ к this.darklayer в обработчике ViewportSizeMonitor ??? 

    goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.math.Size');
goog.require('goog.style');

goog.require('goog.dom.ViewportSizeMonitor');

goog.provide('ehsun7b.ajax.AjaxBox');

ehsun7b.ajax.AjaxBox = function (url, containerClass) {
  try {
    this.url = url;
    this.containerClass = containerClass;

    var viwportSize = goog.dom.getViewportSize();
    this.darklayer = goog.dom.createDom("div", {
      "style": "width: " + viwportSize.width + "px;" + "height: " + 
      viwportSize.height + "px;" +
      "background-image: url('css/img/50black.png');" +
      "z-index: 1000;" +
      "position: absolute;" +
      "left: 0px; top: 0px;"
    });

    var vsm = new goog.dom.ViewportSizeMonitor();
    goog.events.listen(vsm, goog.events.EventType.RESIZE, function(e) {
      console.log("this: " + this.darklayer);
    });

    this.container = goog.dom.createDom("div", {
      "class": this.containerClass
    });    
    goog.dom.appendChild(this.darklayer, this.container);
    goog.dom.setTextContent(this.container, "hello ajax box");    

    this.show = function() {
      goog.dom.appendChild(document.body, this.darklayer);
    },

    this.hide = function() {    
      goog.dom.removeNode(this.darklayer);
    }
  } catch (e) {
    console.log("error: " + e);
  }
};

Я изменил свой класс в соответствии со стилем замыкания следующим образом: 

goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.math.Size');
goog.require('goog.style');

goog.require('goog.dom.ViewportSizeMonitor');

goog.provide('ehsun7b.ajax.AjaxBox');

ehsun7b.ajax.AjaxBox = function (url, containerClass) {
  try {
    this.url = url;
    this.containerClass = containerClass;

    var viwportSize = goog.dom.getViewportSize();
    this.darklayer = goog.dom.createDom("div", {
      "style": "width: " + viwportSize.width + "px;" + "height: " + 
      viwportSize.height + "px;" +
      "background-image: url('css/img/50black.png');" +
      "z-index: 1000;" +
      "position: absolute;" +
      "left: 0px; top: 0px;"
    });

    var vsm = new goog.dom.ViewportSizeMonitor();
    goog.events.listen(vsm, goog.events.EventType.RESIZE, function(e) {
      console.log("this: " + this.darklayer);
    });

    this.container = goog.dom.createDom("div", {
      "class": this.containerClass
    });    
    goog.dom.appendChild(this.darklayer, this.container);
    goog.dom.setTextContent(this.container, "hello ajax box");                   
  } catch (e) {
    console.log("error: " + e);
  }
};

ehsun7b.ajax.AjaxBox.prototype.show = function() {
  goog.dom.appendChild(document.body, this.darklayer);
}

ehsun7b.ajax.AjaxBox.prototype.hide = function() {    
  goog.dom.removeNode(this.darklayer);
}

1 Ответ

5 голосов
/ 30 июня 2011

goog.bind - решение общего назначения. Например: 

goog.bind(this.someFunction, this);
goog.bind(this.someFunction, this, arg1);
goog.bind(this.someFunction, this, arg1, arg2);

Фреймворк, как правило, спроектирован так, что этого можно избежать, поэтому обычно не требуется явно вызывать goog.bind.

Например, goog.events.EventHandler автоматически связывает обратные вызовы с обработчиком, который вы установили в его конструкторе. 

var handler = new goog.events.EventHandler(this);
handler.listen(something, 'something', this.someFunction); // no need to bind

Функции массива также поддерживают аргумент обработчика. 

goog.array.forEach(elements, this.someFunction, this);
var items = goog.array.map(elements, this.someFunction, this);

И так далее. В большинстве частей фреймворка это довольно легко сделать, он очень хорошо спроектирован для «псевдоклассического» наследования.

Подробнее см. http://www.bolinfest.com/javascript/inheritance.php

...