Перемещение за пределы простого написания документов в документе document.ready()

Question

При создании сайта, в качестве личного предпочтения, мне нравится создавать основной файл javascript, который имеет window.load и window.ready прямо в верхней части файла.

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

По большей части я чувствую, что это чище, чем сбрасывать все непосредственно в функции загрузки/готовности, но по мере того, как мои навыки javascript увеличиваются, и я начинаю писать больше анонимных функций, и мой код начинает немного выглядеть путаницы, так как часть готового документа начинает увеличиваться.

Для целей этого вопроса я хотел бы знать:

1. Есть ли лучший способ только запустить функцию/код для проверки длины пути я?
2. Есть ли лучший способ включить вышеупомянутую проверку в способ написания моих плагинов?
3. Первичный вопрос: Как перейти от написания одиночных сценариев, основанных на jQuery, как средство улучшения моих навыков работы с JavaScript.

Я привел пример того, как выглядят мои файлы.

$(window).load(function() { 
    if ($('#el-1').length !== 0) { $('#el-1').addClass('add'); } 
}); 

$(document).ready(function() { 
    if ($('#el-2').length !== 0) { new my_plugin('#el-2'); } 
    if ($('#el-3').length !== 0) { simple_function(); } 
    /* This starts to get messy when there's multiple checks, 
    // longer function names, and different libraries etc. 
    */ 
}); 

var simple_function = function() { 
    //do the short thing 
}; 

;(function(window, $) { 
    'use strict'; 
    function my_plugin(el, options) { 
    this.el = $(el); 
    this.options = $.extend(this.defaults, options); 
    this._init(); 
    } 
    my_plugin.prototype = { 
    defaults : { 
     something: 'something' 
    }, 
    _init : function() { 
     // do the things 
    } 
    _internalFunction: function() { 
     // do the things 
    }, 
    externalFunction: function() { 
     // do the things 
    } 
    } 
    window.my_plugin = my_plugin; 
})(window , jQuery); 

Answer 1

Ваш подход уже является технически правильным. Все остальное зависит от структуры, технологий & методов загрузки и т. Д., Которые вы используете. В противном случае речь идет о мнении и конвенции. Если вы работаете в компании, которая устанавливает очень строгие правила написания кода, тогда вам все равно придется придерживаться этих правил.

Когда дело доходит до разделения кода на несколько файлов, вы можете использовать формат/шаблон определения модуля, например requirejs или commonjs, чтобы лучше управлять вашими зависимостями и модулями.

Если говорить о лучших методах и шаблонах проектирования для яваскрипта и JQuery, то следующие ресурсы могут помочь:

JQuery Boilerplate: Этого сайта показывает много примеров и объясняет, как и почему они считаются лучшими практиками. (Мне очень помог)

Learning JavaScript Design Patterns: Это бесплатная онлайн книга, написанная Addy Osmani инженер Google, который также является одним из разработчиков на jqueryboilerplate.com

Edit: Книга шаблонов проектирования особенно полезно, если вы хотите лучше структурировать свой код.