jQuery + Module Pattern: Когда объявлять/запрашивать элементы?

Как правило, вы не начинаете запрашивать DOM до $(document).ready().
В обоих вариантах ниже виджет объявляется (и элементы запрашиваются) за пределами $(document).ready().
В порядке? Могу ли я инициализировать элементы jQuery (пока я ничего не манипулирую), OUTSIDE готового обработчика?
Было бы лучше поставить все это определение виджета внутри $(document).ready()?
Должен ли я ждать, пока Widget.init() запросит элементы?
Примечание: Я новенькая JS шаблонов проектирования, поэтому, пожалуйста, обратите внимание, если я что-то отсутствует

ОПЦИЯ1jQuery + Module Pattern: Когда объявлять/запрашивать элементы?

Widget = { 
    ele : $('#ele'), 
    init : function(){ ... } 
}; 

$(document).ready(function(){ 
    Widget.init(); 
});

option2

Widget = (function(){ 
    var privateEle = $('#privateEle'); 
    return { 
     publicEle: $('#publicEle'), 
     init: function(){ ... } 
    }; 
}()); 

$(document).ready(function(){ 
    Widget.init(); 
});

источник

2013-03-27 Mike Lewis

Ни вариант будет работать, если код не до тела тега закрытия из-за элемент еще не существует. Подождите, пока init не будет вызван для выбора элементов. –

Что бы я сделал:

var Widget = (function(){ 
    var ele; 

    function init(_ele){ 
     ele = _ele; 
    }; 

    return { 
     init: init 
    }; 
})(); 

$(function(){ 
    Widget.init($('#foo')); 
});

Если загружен сценарий, прежде чем JQuery, вы не увидите сообщение об ошибке «не определено не является функцией». Но, если выполнить запрос перед domReady, вы можете получить неожиданный результат, Эль = []

EDIT: кстати .. положить <script> тегов перед тем </body> НЕ в <head></head>

источник

2013-03-27 19:33:07 neiker

Это не сработает, потому что в то время en вы запрашиваете элемент, элемент еще не существует, поэтому ваш запрос вернет пустой выбор jQuery. Вы можете запрашивать только те элементы, когда DOM готов.

, что будет работать, хотя это одно из следующих действий:

создать элемент вне $(document).ready(). обратите внимание, что вы должны предоставить полный html или работать с $(..).attr(x,y) и подобными.

Widget = { 
    ele : $("<div id='ele'>"), 
    .... 
}

или вы можете запросить элемент при инициализации виджета.

Widget = { 
    ele : "#ele", 
    init : function(){ 
     this.ele = $(this.ele); 
     ... 
    } 
}

источник

2013-03-27 19:07:54 lordvlad

Вы можете включить скрипт просто перед тем телом конец бирка.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Demo</title> 
</head> 
<body> 
    <!-- my HTML --> 

    <script src="../js/vendor/jquery-1.9.1.js"></script> 
    <script src="../js/vendor/jquery-migrate-1.1.1.js"></script> 
    <script src="../js/custom.js"></script> 
</body> 
</html>

DOM готов (нет необходимости в $ (документ) .ready):

/*custom.js */ 
    var Widget = (function($){ 
     var _$element; 

     return { 
      init: function(){ 
        _$element = $('#myElementId'); 
        // TODO - element is available from now on 
      }; 
     }; 
    }(jQuery)); 

    Widget.init();

источник

2013-03-27 19:36:43 kayz1

jQuery + Module Pattern: Когда объявлять/запрашивать элементы?

ответ

Смежные вопросы