Общепринятые лучшие практики организации кода в JavaScript [закрыто]

Ленивая Загрузка код Вам нужно по требованию. Google делает что-то вроде этого с их google.loader

Вы не упоминаете, каков Ваш язык серверной стороны. Или, более уместно, какую платформу Вы используете - если любой - на серверной стороне.

IME, я организую вещи на серверной стороне и позволяю всему этому вытряхнуть на веб-страницу. Платформе дают задачу организации не только JS, который каждая страница должна загрузить, но также и фрагменты JS, которые работают со сгенерированной разметкой. Такие фрагменты, которые Вы обычно не хотите испускаемый несколько раз - который является, почему они абстрагированы в платформу для того кода для заботы о той проблеме.:-)

Для страниц конца, которые должны испустить их собственный JS, я обычно, находят, что существует логическая структура в сгенерированной разметке. Такой локализованный JS может часто собираться в запуске и/или конце такой структуры.

Примечание, что ни одно из этого не освобождает Вас от записи эффективного JavaScript!:-)

Я использую пользовательский сценарий, вдохновленный поведением Ben Nolan (я не могу найти текущую ссылку на это больше, печально) сохранить большинство моих обработчиков событий. Эти обработчики событий инициированы именем класса элементов или идентификатором, например. Пример:

Behaviour.register({ 
    'a.delete-post': function(element) {
        element.observe('click', function(event) { ... });
    },

    'a.anotherlink': function(element) {
        element.observe('click', function(event) { ... });
    }

});

мне нравится включать большинство моих библиотек Javascript на лету, кроме тех, которые содержат глобальное поведение. Я использую headScript Платформы Зенда () помощник заполнителя для этого, но Вы можете также использование JavaScript для загрузки других сценариев на лету с Ajile, например.

Несколько дней назад парни в 37Signals выпустили управление RTE со скручиванием. Они сделали библиотеку, которая связывает файлы JavaScript с помощью своего рода команд препроцессора.

я использовал его, так как для разделения моих файлов JS и затем в конце объединяют их как один. Тем путем я могу разделить проблемы и, в конце, иметь только один файл, который проходит канал (gzipped, нет меньше).

В Ваших шаблонах, проверьте, находитесь ли Вы в режиме разработки и включаете отдельные файлы, и если в производстве, включайте заключительное (который необходимо будет "создать" сами).

Можно разбить сценарии в отдельные файлы для разработки, затем создать версию "выпуска", где Вы переполняете их всех вместе и работаете Компрессор YUI или что-то подобное на ней.

Я смог успешно подать заявку Шаблон Модуля JavaScript к Расширению приложение JS в моем предыдущем задании. Это обеспечило простой способ создать приятно инкапсулировавший код.

Я создаю одиночные элементы для каждой вещи, которой я действительно не должен несколько раз инстанцировать на экране, классы для всего остального. И все они помещаются в то же пространство имен в том же файле. Все прокомментировано и разработано с UML, диаграммами состояний. Код JavaScript свободен от HTML так никакой встроенный JavaScript, и я склонен использовать jQuery для уменьшения перекрестных проблем браузера.

Было бы намного более хорошо, если бы JavaScript встроили пространства имен, но я нахожу, что организация вещей как Dustin Diaz описывает здесь , помогает мне много.

var DED = (function() {

    var private_var;

    function private_method()
    {
        // do stuff here
    }

    return {
        method_1 : function()
            {
                // do stuff here
            },
        method_2 : function()
            {
                // do stuff here
            }
    };
})();

я поместил различные "пространства имен" и иногда отдельные классы в отдельных файлах. Обычно я запускаю с одного файла и как класс, или пространство имен становится достаточно большим для гарантирования его, я выделяю его в его собственный файл. Используя инструмент для объединения всего Вы файлы для производства являетесь превосходной идеей также.

После хороших принципалов дизайна OO и шаблонов разработки имеет большое значение для создания Вашего кода, легкого поддержать и понять. Но одной из лучших вещей, которые я обнаружил недавно, являются сигналы, и слоты иначе публикуют/подписывают. Взгляните на http://markdotmeyer.blogspot.com/2008/09/jquery-publish-subscribe.html для простой реализации jQuery.

идея хорошо используется на других языках для разработки GUI. Когда что-то значительное происходит где-нибудь в Вашем коде, Вы публикуете глобальное синтетическое событие, на которое могут подписаться другие методы в других объектах. Это дает превосходное разделение объектов.

я думаю Dojo (и Прототип?) имеют созданный в версии этой техники.

видят также , Что такое сигналы и слоты?

Dojo имел систему модуля со дня один. На самом деле это считается краеугольным камнем Dojo, связующее звено, которое скрепляет все это:

• dojo.require — официальный документ .
• , Понимая dojo.declare, dojo.require, и dojo.provide.
• Dojo Представления.

Используя Dojo модулей достигает следующих целей:

• Пространства имен для кода Dojo и пользовательского кода (dojo.declare()) — не загрязняйте глобальное пространство, сосуществуйте с другими библиотеками и кодом non-Dojo-aware пользователя.
• Загружающиеся модули синхронно или асинхронно по имени (dojo.require()).
• Пользовательские сборки путем анализа зависимостей от модуля для создания единственного файла или группы взаимозависимых файлов (так называемые слои) для включения только, в чем нужно веб-приложение. Пользовательские сборки могут включать модули Dojo и предоставленные клиентами модули также.
• Прозрачный основанный на CDN доступ к Dojo и коду пользователя. И AOL и Google несут Dojo в этом виде, но некоторые клиенты делают это для своих пользовательских веб-приложений также.

Вдохновленный более ранними сообщениями я сделал копию Rakefile и поставщик каталоги распределенный с WysiHat (RTE упомянутый журналом изменений) и сделал несколько модификаций для включения сверения кода JSLint и минификация с [1 111] Компрессор YUI .

идея состоит в том, чтобы использовать Звездочки (от WysiHat), чтобы объединить несколько JavaScripts в один файл, проверить синтаксис объединенного файла с JSLint и уменьшить его с Компрессором YUI перед распределением.

Предпосылки

• Среда выполнения Java
• рубин и драгоценный камень граблей
• необходимо знать, как поместить JAR в [1 113], Путь к классу

1. Загрузка Носорог и помещает JAR ("js.jar") в путь к классу
2. Загрузка Компрессор YUI и помещает JAR (build/yuicompressor-xyz.jar) в путь к классу
3. Загрузка WysiHat и копирует каталог "поставщика" в корень проекта
4. JavaScript Загрузка JSLint для Носорога и помещает его в каталоге

"поставщика", Теперь создают файл по имени "Rakefile" в корневом каталоге проекта JavaScript и добавляют следующее содержание к нему:

require 'rake'

ROOT            = File.expand_path(File.dirname(__FILE__))
OUTPUT_MERGED   = "final.js"
OUTPUT_MINIFIED = "final.min.js"

task :default => :check

desc "Merges the JavaScript sources."
task :merge do
  require File.join(ROOT, "vendor", "sprockets")

  environment  = Sprockets::Environment.new(".")
  preprocessor = Sprockets::Preprocessor.new(environment)

  %w(main.js).each do |filename|
    pathname = environment.find(filename)
    preprocessor.require(pathname.source_file)
  end

  output = preprocessor.output_file
  File.open(File.join(ROOT, OUTPUT_MERGED), 'w') { |f| f.write(output) }
end

desc "Check the JavaScript source with JSLint."
task :check => [:merge] do
  jslint_path = File.join(ROOT, "vendor", "jslint.js")

  sh 'java', 'org.mozilla.javascript.tools.shell.Main',
    jslint_path, OUTPUT_MERGED
end

desc "Minifies the JavaScript source."
task :minify => [:merge] do
  sh 'java', 'com.yahoo.platform.yui.compressor.Bootstrap', '-v',
    OUTPUT_MERGED, '-o', OUTPUT_MINIFIED
end

, Если Вы сделанный все правильно, необходимо быть в состоянии использовать следующие команды в консоли:

• rake merge - для слияния различных файлов JavaScript в один
• rake check - для проверки синтаксиса кода (это значение по умолчанию задача, таким образом, Вы можете просто тип rake)
• rake minify - для подготовки уменьшенной версии кода JS

На источнике, объединяющемся

Используя Звездочки препроцессор JavaScript, можно включать (или require) другие файлы JavaScript. Используйте следующий синтаксис для включения других сценариев из начального файла (названный "main.js", но можно изменить это в Rakefile):

(function() {
//= require "subdir/jsfile.js"
//= require "anotherfile.js"

    // some code that depends on included files
    // note that all included files can be in the same private scope
})();

И затем...

Смотрят на Rakefile, которому предоставляют WysiHat для установки автоматизированного поблочного тестирования. Хороший материал:)

И теперь для ответа

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

Мой подход к проблеме должен сделать столько же объектно-ориентированного моделирования, я могу и разделять реализации на различные файлы. Тогда обработчики должны быть максимально короткими. Примером с List одиночный элемент является также хороший.

И пространства имен... хорошо им может подражать более глубокая структура объекта.

if (typeof org === 'undefined') {
    var org = {};
}

if (!org.hasOwnProperty('example')) {
    org.example = {};
}

org.example.AnotherObject = function () {
    // constructor body
};

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

Мой босс все еще говорит о временах, когда они записали модульный код (язык C) и жалуются на то, насколько дрянной код в наше время! Сказано, что программисты могут записать блок в любой платформе. Всегда существует стратегия преодолеть организацию кода. Основная проблема с парнями, которые рассматривают сценарий Java как игрушку и никогда не пытаются изучить его.

В моем случае, я пишу js файлы на теме UI или основании экрана приложения с надлежащим init_screen (). Используя надлежащее идентификационное соглашение о присвоении имен, я удостоверяюсь, что нет никаких конфликтов пространства имен на корневом уровне элемента. В unobstrusive window.load (), я связываю вещи на основе высокоуровневого идентификатора.

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

Я стараюсь избегать включая любой JavaScript с HTML. Весь код инкапсулируется в классы, и каждый класс находится в своем собственном файле. Для разработки у меня есть отдельный < script> теги для включения каждого js файла но они объединяются в единственный больший пакет для производства для сокращения издержек Запросов HTTP.

Как правило, у меня будет единственный 'основной' js файл для каждого приложения. Так, если бы я писал приложение "обзора", у меня был бы js файл названным "survey.js". Это содержало бы точку входа в код jQuery. Я создаю ссылки jQuery во время инстанцирования и затем передаю их в мои объекты как параметры. Это означает, что классы JavaScript 'чисты' и не содержат ссылок на идентификаторы CSS или имена классов.

// file: survey.js
$(document).ready(function() {
  var jS = $('#surveycontainer');
  var jB = $('#dimscreencontainer');
  var d = new DimScreen({container: jB});
  var s = new Survey({container: jS, DimScreen: d});
  s.show();
});

я также нахожу соглашение о присвоении имен быть важным для удобочитаемости. Например: Я предварительно ожидаю 'j' ко всем экземплярам jQuery.

В вышеупомянутом примере, существует класс под названием DimScreen. (Предположите, что это потускнело экран и открывается окно предупреждений.) Этому нужен элемент отделения, который это может увеличить для покрытия экрана, и затем добавить окно предупреждений, таким образом, я передаю в объекте jQuery. jQuery имеет сменное понятие, но это казалось ограничением (например, экземпляры не являются персистентными и не могут быть получены доступ) без реального позитивного аспекта. Таким образом, класс DimScreen был бы стандартным классом JavaScript, который просто, оказывается, использует jQuery.

// file: dimscreen.js
function DimScreen(opts) { 
   this.jB = opts.container;
   // ...
}; // need the semi-colon for minimizing!


DimScreen.prototype.draw = function(msg) {
  var me = this;
  me.jB.addClass('fullscreen').append('<div>'+msg+'</div>');
  //...
};

я создал некоторый довольно сложный appliations, использующий этот подход.

В моем последнем -Viajeros.com проекта - я использовал комбинацию нескольких методов. Я не знал бы, как организовать веб-приложение - Viajeros является сайтом социальной сети для путешественников с четко определенными разделами, таким образом, довольно легко разделить код для каждой области.

я использую моделирование пространства имен и ленивую загрузку модулей согласно разделу сайта. На каждой загрузке страницы я объявляю объект "vjr", и всегда загружаю ряд общих функций в него (vjr.base.js). Тогда каждая страница HTML решает, в котором модули нуждаются с простым:

vjr.Required = ["vjr.gallery", "vjr.comments", "vjr.favorites"];

Vjr.base.js получает каждый gzipped от сервера и выполняет их.

vjr.include(vjr.Required);
vjr.include = function(moduleList) {
  if (!moduleList) return false;
  for (var i = 0; i < moduleList.length; i++) {
    if (moduleList[i]) {
      $.ajax({
        type: "GET", url: vjr.module2fileName(moduleList[i]), dataType: "script"
      });
    }
  }
};

Каждый "модуль" имеет эту структуру:

vjr.comments = {}

vjr.comments.submitComment = function() { // do stuff }
vjr.comments.validateComment = function() { // do stuff }

// Handlers
vjr.comments.setUpUI = function() {
    // Assign handlers to screen elements
}

vjr.comments.init = function () {
  // initialize stuff
    vjr.comments.setUpUI();
}

$(document).ready(vjr.comments.init);

, Учитывая мое ограниченное знание JavaScript, я знаю, что должны быть лучшие способы управлять этим, но до сих пор оно работает отлично для нас.

"Запишите как сумасшедший и просто надейтесь, что это удается для лучшего?", я видел проект как это, которое разрабатывалось и сохранялось всего 2 разработчиками, огромным приложением с большим количеством кода JavaScript. К тому же были различные ярлыки для каждой возможной функции jQuery, о которой можно думать. Я предложил, чтобы они организовали код как плагины, поскольку это - jQuery, эквивалентный из класса, модуля, пространство имен... и целая вселенная. Но вещи стали намного хуже, теперь они начали писать плагины, заменяющие каждую комбинацию 3 строк кода, используемого в проекте. Personaly я думаю jQuery, является дьяволом, и это не должно использоваться на проектах с большим количеством JavaScript, потому что это поощряет Вас быть ленивыми и не думать об организации кода всегда. Я скорее считал 100 строк JavaScript, чем одну строку с 40 цепочечными функциями jQuery (я не шучу). Вопреки широко распространенному мнению очень легко организовать код JavaScript в эквивалентах пространствам имен и классам. Это - то, что делают YUI и Dojo. Вы можете легко самокрутка, если Вам нравится. Я нахожу подход YUI намного лучше и эффективный. Но Вам обычно нужен хороший редактор с поддержкой отрывков для компенсации соглашений о присвоении имен YUI, если Вы хотите записать что-либо полезное.

Я думаю, что это набрасывается, возможно, на DDD (Управляемый Доменом Дизайн). Приложение я продолжаю работать, хотя испытывая недостаток в формальном API, действительно дает подсказки такого посредством серверного кода (класс/имена файлов, и т.д.). Вооруженный этим, я создал объект верхнего уровня как контейнер для всей проблемной области; затем, я включил пространства имен при необходимости:

var App;
(function()
{
    App = new Domain( 'test' );

    function Domain( id )
    {
        this.id = id;
        this.echo = function echo( s )
        {
            alert( s );
        }
        return this;
    }
})();

// separate file
(function(Domain)
{
    Domain.Console = new Console();

    function Console()
    {
        this.Log = function Log( s )
        {
            console.log( s );
        }
        return this;
    }
})(App);

// implementation
App.Console.Log('foo');

Организация вашего код в JQuery-ориентированном виде NameSpace может выглядеть следующим образом ... и не будет конфликтовать с другими Javascript API, такими как Prototype, Ext.

<script src="jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

var AcmeJQ = jQuery.noConflict(true);
var Acme = {fn: function(){}};

(function($){

    Acme.sayHi = function()
    {
        console.log('Hello');
    };

    Acme.sayBye = function()
    {
        console.log('Good Bye');
    };
})(AcmeJQ);

// Usage
//          Acme.sayHi();
// or
// <a href="#" onclick="Acme.sayHi();">Say Hello</a>


</script>

Надеюсь, это поможет.

Create fake classes, and make sure that anything that can be thrown into a separate function that makes sense is done so. Also make sure to comment a lot, and not to write spagghetti code, rather keeping it all in sections. For example, some nonsense code depicting my ideals. Obviously in real life I also write many libraries that basically encompass their functionality.

$(function(){
    //Preload header images
    $('a.rollover').preload();

    //Create new datagrid
    var dGrid = datagrid.init({width: 5, url: 'datalist.txt', style: 'aero'});
});

var datagrid = {
    init: function(w, url, style){
        //Rendering code goes here for style / width
        //code etc

        //Fetch data in
        $.get(url, {}, function(data){
            data = data.split('\n');
            for(var i=0; i < data.length; i++){
                //fetching data
            }
        })
    },
    refresh: function(deep){
        //more functions etc.
    }
};

Я использую управление пакетами Dojo ( dojo.require и dojo.provide ) и систему классов ( dojo .declare , который также допускает простое множественное наследование), чтобы разделить все мои классы / виджеты на отдельные файлы. Это не только позволяет упорядочить ваш код, но также позволяет выполнять отложенную / своевременную загрузку классов / виджетов.

Ознакомьтесь с JavasciptMVC .

Вы можете:

• разбить код на уровни модели, представления и контроллера.

• сжать весь код в один производственный файл

• автоматически генерировать код

• создавать и запускать модульные тесты

• и многое другое ...

Лучше всего то, что он использует jQuery, поэтому вы также можете использовать преимущества других плагинов jQuery.

Для организации JavaScript используется следующая

1. Папка для всех ваших javascript
2. Уровень страницы javascript получает свой собственный файл с таким же именем страницы. ProductDetail.aspx будет ProductDetail.js
3. Внутри папки javascript для библиотечных файлов у меня есть lib папка
4. Поместите связанные библиотечные функции в lib папку, которую вы хотите использовать во всем вашем приложении.
5. Ajax - единственный javascript, который я перемещаю за пределы папки javascript и получаю свою собственную папку. Затем я добавляю две вложенные папки: клиент и сервер
6. Папка клиента получает все .js файлы, в то время как папка сервера получает все файлы на стороне сервера.