Выполнение функций JQuery на DOM готово ... из модуля?

Question

У меня есть экспериментальная проверка ввода Javascript:

$(function(){
  var check_stuff = function(elem){
    //...code to check stuff
  };

  // grab every input element with a checkable class
  $('input.checkable').each(function(i) {
    $(this).click(function(){
      if check_stuff(elem) {
        $(this).submit();   // submit if passes checks
      }
    };
  });
});

, который работает.Тем не менее, я обеспокоен тем, что это загрязняет мировое пространство.Так что, если функция 'check_stuff' определена где-то в jQuery или другим модулем, совместно использующим $, я фактически просто переопределил это.Это правильно?

Если я удалю $ в первой строке:

(function(){

Тогда я считаю, что создаю стандартную анонимную функцию javascript, которая эффективно изолирует check_stuff.Однако:

$(this).click(function(){

... больше не выполняется в DOM ready (поскольку выполняется сразу после его оценки).Я пытался обернуть его в jQuery (документ) .ready безрезультатно.

Как правильно создать модуль, который выполняет готовый блок кода на готовом?

Answer 1

посмотрите по этой ссылке http://www.yuiblog.com/blog/2007/06/12/module-pattern/

myModule = (function(){
     //functions/variables here does not pollute global namespace
})();

вы можете вызвать функцию инициализации myModule, например, для вашего документа готов

Answer 2

Вы можете заключить код в self-executing anonymous function. Этот код будет выполняться, и все переменные, включенные в эту функцию, будут существовать только в локальной области действия этой функции. () после определения функции немедленно выполнит функцию.

Формат:

(function(){

})();

Поместите это в дом, готово, и вам будет хорошо.

$(function(){

    (function(){
        //your code for the module
    })();

});

Пример: http://jsfiddle.net/VZ2ay/2/

Answer 3

Возможно, я полон этого ответа, но что-то вроде этого должно работать:

$(function(){
  (function(){
   var check_stuff = function(elem){
     //...code to check stuff
   };

   // grab every input element with a checkable class
   $('input.checkable').each(function(i) {
     $(this).click(function(){
       if check_stuff(elem) {
         $(this).submit();   // submit if passes checks
       }
     };
   });
  )
});

Вы все еще создаете анонимную функцию, которая будет запускаться после события готовности DOM.

Answer 4

[обновлено после просмотра комментария]

Я все еще не думаю, что вы загрязняете глобальное пространство имен своим исходным кодом.

var foo = "I am outside!";
var bar = "I am outside!";

$(function() {
    var foo = "I am in jQuery!";
    bar = "I am in jQuery!";
});

setTimeout(function() {
    alert('foo says: '+foo);
    alert('bar says: '+bar);
}, 5000);

foo и bar находятся в глобальном пространстве имен.В функции готовности документа добавление 'var' до того, как foo пометит его как локальную переменную.Показано, что это правда, потому что глобальная версия 'foo' не обновляется.Опуская 'var' на панели, мы неявно используем глобальное пространство имен, поэтому существующая переменная обновляется.

Answer 5

Я не знаю, если это «правильный путь», но почему бы не сделать что-то вроде:

(function($){
    // ...
    $(function(){
        // code that you want to run when the dom finishes loading
    });
    // ...
}(jQuery));

---

Редактировать (для объяснения) : Что этоОн создает замыкание в js, которое передает jQuery в качестве параметра, так что вы можете продолжать использовать $ внутри замыкания для ссылки на jQuery, как вы привыкли.В замыкании вы можете создавать переменные, которые нужны вашему модулю.Они не будут доступны за пределами замыкания, поэтому вы не загрязняете глобальное пространство имен.

Внутри этого находится функция готовности jQuery, к которой вы привыкли.Здесь вы можете вызвать код, который хотите запустить после того, как dom завершил загрузку.

Обновление : посмотрите http://jsfiddle.net/D6Hax/, чтобы увидеть это в действии.

Answer 6

$(func) - это сокращение от jQuery(document).ready(func).Если вы опустите конструктор jQuery, $, будет создана обычная функция.Чтобы вызвать эту функцию, добавьте скобки после функции, чтобы вызвать ее:

(function(){
  ....
})(); //Parentheses to invoke the function

//Another option
(function(){...}())

//Illegal method (error):
function(){...}()