Сайт Игоря Кононученко   Статьи

Bind-функция для jQuery

12 марта 2009

Как разработчик, привыкший к использованию библиотеки prototype.js, я не смог понять причину отсутствия в библиотеке jQuery отсутсвия метода bind, который позволяет в обработчик передать контекст (scope). А я часто пишу слабо связанные классы, которые взаимодействуют посредством событий. Поэтому, взяв за основу код из prototype.js, я его адаптировал к полной независимости от библиотек.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
Function.prototype.bind = function() {
    if (arguments.length < 1 && typeof arguments[0] != "undefined") return this;
    var __method = this, args = [];
    for(var i=0;i<arguments.length;i++){ args.push(arguments[i]);}
    
    var object = args.shift();
    return function() {
      var args_to_apply = []
      
      for(var i=0;i<args.length;i++){ args_to_apply.push(args[i]);}
      for(var i=0;i<arguments.length;i++){ args_to_apply.push(arguments[i]);}
      return __method.apply(object, args_to_apply);
    }
};

Теперь можно так обрабатывать события (ну или коллбеки, кто как назовет):

1
tree1.getAsyncData = this.getAsyncData.bind(this, 1);

В отличие от распространенной практики в jQuery:

1
2
var _this = this;
tree1.getAsyncData = function(arg) { _this.getAsyncData(arg, 1); };

Еще сторонники jQuery часто пишут код обработчика прямо в анонимной функции. Замечу, что постоянно вижу у jQuery-разработчиков очень грязный код, в котором одна функция может быть на весь экран и более. Следует всегда в независимости от принятых подходов в фреймворке оформлять код руководствуясь книгой «Рефакторинг» Фаулера. Мне лично нравится продуманность и чистота кода библиотеки Ext.js

Анализируя JavaScript код
Алгоритм эффективного выполнения любого задания
Ctrl
Про создание этого сайта
Движок презентации в браузере