Konvensional JavaScript Kod Təşkilatı Təlimatları

JQuery kimi JavaScript çərçivələri müştəri veb tətbiqlərini daha zəngin və funksional hala gətirdikdən sonra bir problemi görməyə başladı ...

Dünyada necə dəstək verirsiniz?

  • Bütün işləyicilərinizi bir yerə qoyun və bütün hadisələr üçün funksiyalar yazmaq?
  • Bütün funksiyalarınızı bağlamaq üçün funksiya / dərslər yaradın?
  • Çılpaq kimi yazın və sadəcə ən yaxşısı üçün çalışır.
  • Özünüzü verin və yeni bir kariyer əldə edin?

Mən jQuery-dən danışıram, amma bu, həqiqətən, hər hansı bir JavaScript kodu. Çətinlər üzərində yığılmağa başlandığından, script fayllarını idarə etmək və aradığınız şeyi tapmaq çətindir. Mümkündür ki, mən gördüyüm ən böyük təhriflər, eyni şeyi etmək üçün çox yolları qəbul edən ən yaxşı təcrübənin hansı olduğunu başa düşmək çətindir.

Sizin .js fayllarınızı tətbiqinizin qalan hissəsi kimi yaxşı və səliqəli saxlamağa dair ümumi qaydalar varmı? Yoxsa yalnız bir IDE sorusu var? Orada daha yaxşı bir seçim varmı?


CHANGE

Bu sual, fayl təşkilatı deyil, kodun təşkili haqqında daha çox olmalıdır. Faylları birləşdirmək və ətrafdakı məzmunu paylaşmaq üçün həqiqətən yaxşı nümunələr var idi.

Mənim sualım: faktiki kodunuzu təşkil etmək üçün ümumi qəbul edilən ən yaxşı təcrübə nədir? Yolunuz nədir və ya səhifə elementləri ilə qarşılıqlı əlaqə qurmaq və bir-biri ilə zidd olmayan yenidən istifadə kodunu yaratmaq üçün nə təklif edirsiniz?

Bəzi insanlar adları göstərmişlər ki , bu da yaxşı bir fikirdir. Sayfada elementlərə daha xüsusi olaraq aid olan və kodu və düzgünlüyünü qoruyan digər yollar hansılardır?

525
29 окт. Hugoware 29 oct tərəfindən təyin . 2008-10-29 18:19 '08 at 18:19 2008-10-29 18:19
@ 28 cavab

İsmarıclar javascriptə yerləşdirildikdə daha gözəl olardı, amma mən Dustin Diaz kimi şeylərin təşkilini mənə çox kömək edir,

 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 } }; })(); 

Fərqli "ad boşluqları" və bəzən ayrı-ayrı fayllarda ayrı-ayrı siniflər qoyduq. Mən adətən bir fayl ilə başlayır və sinif və ya ad sahəsi bunu təmin etmək üçün kifayət qədər böyük olarsa, mən onu öz dosyanıma bölün. Bütün fayllarınızı istehsal üçün birləşdirmək üçün alətdən istifadə etmək böyük bir fikirdir.

169
29 окт. Cavab 29 okta polarbear verilir . 2008-10-29 19:09 '08 at 7:09 pm 2008-10-29 19:09

HTML-də javascriptdən qaçmaqdan çəkinirəm. Bütün kodlar siniflərə daxil edilir və hər bir sinif öz faylında. İnkişaf etmək üçün hər bir js faylını daxil etmək üçün ayrı bir <script> etiketim var, ancaq HTTP isteklerinin üstünü azaltmaq üçün bir daha böyük istehsal paketinə birləşdirilir.

Bir qayda olaraq, hər bir ərizə üçün bir "əsas" js dosyam var. Beləliklə, sorğu ərizəsini yazdığımda, "survey.js" adlı bir js faylı var. Bu jQuery kodunun giriş nöqtəsini ehtiva edir. Məsələn, yaradılması zamanı jQuery istinadları yaradır və sonra parametrlər kimi obyektlərimə ötürürlər. Bu, javascript dərsləri "təmiz "dir və CSS identifikatorlarına və ya sinif adlarına istinad göstərmir.

 // 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(); }); 

Mən də adlandırma konvensiyasının okunabilirlik üçün vacib olduğuna inanıram. Məsələn: Bütün jQuery nümunələrinə "j" əlavə edirəm.

border=0

Yuxarıdakı nümunədə DimScreen adlı bir sinif var. (Bu ekranı fades etsin və bir xəbərdarlıq pəncərəsi açılır deyə düşünsəniz). O, ekranı bağlamaq üçün zənginləşdirə biləcəyi bir div elementinə ehtiyac duyur və sonra bir xəbərdarlıq pəncərəsi əlavə edir, mən də jQuery obyektini keçirirəm. jQuery bir plug-in konsepsiyasına malikdir, lakin real artım olmadan məhdud görünür (məsələn, hallar daimi deyildir və əldə edilə bilməz). Beləliklə, DimScreen sinfi jQuery istifadə edən standart javascript sinif olacaq.

 // 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>'); //... }; 

Bu yanaşma ilə bir çox kompleks tətbiqlərdən istifadə etdim.

83
12 нояб. Cavab Jason Moore tərəfindən 12 Noyabrda verilir 2008-11-12 20:36 '08 at 20:36 pm 2008-11-12 20:36

Komutlarınızı ayrı-ayrı inkişaf fayllarına böldükdə, sonra da hər şeyi bir yerdə qoyaraq YUI Compressor və ya buna bənzər bir şeylə məşğul olan "azad" versiyasını yarada bilərsiniz.

37
29 окт. Greg 29 oct tərəfindən verilən cavab . 2008-10-29 18:22 '08 saat 06:22 'da 2008-10-29 18:22

Daha əvvəlki mesajlardan ilham alaraq, WysiHat (dəyişiklik jurnalında qeyd olunan RTE) istifadə edərək Rakefile dizinleri və təchizatçılarının bir nüsxəsini hazırladım və JSLint kodunu yoxlamaqKompressor YUI ilə minifikasiya etməklə bir neçə dəyişiklik etdi.

Fikir, bir neçə JavaScripts bir fayl daxil birləşdirmək üçün Sprockets (WysiHat dən) istifadə, JSLint ilə birləşdirilmiş fayl sintaksis yoxlamaq və dağıtmadan əvvəl bir YUI kompressor istifadə edərək, minimuma endirməkdir.

Ön şərtlər

  • Java işləmə müddəti
  • ruby və rake stone
  • ClassPath-da JAR-ın necə yerləşdirilməsini bilmək lazımdır

İndi

İndi JavaScript layihəsinin kök kataloqunda "Rakefile" adlı bir fayl yaradın və aşağıdakı məzmunu əlavə edin:

 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 

Hər şeyi doğru etdinizsə, konsolda aşağıdakı əmrləri istifadə edə bilərsiniz:

  • rake merge - bir-birinə müxtəlif javascript faylları birləşdirin
  • rake check - kodun sözdizimini yoxlayın (bu , default vəzifədir, belə ki, yalnız rake yazın)
  • rake minify - JS kodunuzun mini versiyasını hazırlayın

Mənbə füzyonunda

Sprockets, bir JavaScript əvvəlcədən prosessor istifadə edərək, digər JavaScript faylları daxil edə bilərsiniz (və ya require edə bilər). Başqa faylları mənbə faylından əlavə etmək üçün aşağıdakı sözdizimini istifadə edin ("main.js" adlandırdıq, ancaq bunu Rakefile-də dəyişə bilərsiniz):

 (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 })(); 

Və sonra ...

Cihazın avtomatik sınaqdan keçirilməsi üçün WysiHat ilə təchiz olunmuş Rakefile-ə baxın. Yaxşı şeylər :)

Və indi cavab üçün

Bu, orijinal sualına çox yaxşı cavab vermir. Mən bilirəm və təəssüf edirəm, amma burda yerləşdirdim, çünki kimsə ümid edirəm ki, kimsə bir qarışıqlıq təşkil etməlidir.

Problemə mənim yanaşma mümkün qədər çox obyekt yönümlü modelləşdirmə etmək və tətbiqləri müxtəlif fayllara ayırmaqdır. Sonra işləyicilər mümkün qədər qısa olmalıdır. List singleton ilə nümunə də yaxşıdır.

Və ad boşluqları ... yaxşı, daha dərin bir obyekt quruluşu ilə təqlid edilə bilər.

 if (typeof org === 'undefined') { var org = {}; } if (!org.hasOwnProperty('example')) { org.example = {}; } org.example.AnotherObject = function () { // constructor body }; 

Mən imitasiyaların böyük bir pərəstişkarı deyiləm, ancaq qlobal sahədən çıxmaq istəyən bir çox obyektiniz varsa faydalı ola bilər.

24
30 окт. Damir Zekiç tərəfindən verilmiş cavab 30 oktyabr 2008-10-30 03:51 '08 at 3:51 am 2008-10-30 03:51

Kod təşkilatı standartların və sənədlərin qəbul edilməsini tələb edir:
1. Fiziki fayl üçün ad sahəsi kodu;

 Exc = {}; 


2. Bu javascript adları qruplarında dərslər;
3. Real dünya obyektlərini təmsil etmək üçün prototipləri və ya əlaqəli funksiyaları və ya sinifləri quraşdırın;

 Exc = {}; Exc.ui = {}; Exc.ui.maskedInput = function (mask) { this.mask = mask; ... }; Exc.ui.domTips = function (dom, tips) { this.dom = gift; this.tips = tips; ... }; 


4. Kodu inkişaf etdirmək üçün konvensiyalar yaradın. Məsələn, bütün daxili funksiyalarınızı və ya üsullarınızı obyekt sinifinizin xüsusiyyətlərinə bölün.

 Exc.ui.domTips = function (dom, tips) { this.dom = gift; this.tips = tips; this.internal = { widthEstimates: function (tips) { ... } formatTips: function () { ... } }; ... }; 


5. Ad boşluqlarını, siniflərini, metodlarını və dəyişənlərini sənədləşdirin. Lazım olsa, bəzi kodları da müzakirə (bəzi FI və Fors, adətən kodun mühüm məntiqini tətbiq edirlər).

  Exc = {};  Exc.ui = {};  Exc.ui.maskedInput = function (mask) { this.mask = mask; ... };  Exc.ui.domTips = function (id, tips) { this.domID = id; this.tips = tips; ... }; 


Bunlar yalnız bir neçə ipucudır, ancaq kodun təşkili ilə həqiqətən də kömək edir. Müvəffəqiyyət üçün intizamınız olmalı olduğunu unutmayın!

18
02 окт. Cavab Nery Jr 02 oktyabr verilir. 2011-10-02 15:26 '11 at 15:26 2011-10-02 15:26

Yaxşı OO dizayn prinsiplərini və dizayn nümunələrini izləməklə kodunuzu anlamaq və başa düşmək üçün asan bir yola çıxacaqsınız. Amma son zamanlarda kəşf etdiyim ən yaxşı şeylərdən biri, yazı yaza biləcəyiniz siqnallar və slotlardır. Sadə jQuery tətbiqi üçün http://markdotmeyer.blogspot.com/2008/09/jquery-publish-subscribe.html səhifəsinə baxın.

Bu fikir qrafik interfeysi inkişaf etdirmək üçün digər dillərdə yaxşı istifadə olunur. Kodunuzda əhəmiyyətli bir şey olarsa, başqa metodların digər obyektlərə abunə oluna biləcəyi bir qlobal sintetik hadisə yayımlayırsınız. Bu, obyektlərin əla ayrılmasına imkan verir.

Düşünürəm ki, Dojo (və Prototip?) Bu texnikanın daxili versiyasına malikdir.

Həmçinin siqnallar və slaydlar nədir?

13
23 дек. Cavab məni 23 dekabrda verilir. 2008-12-23 00:16 '08 at 0:16 2008-12-23 00:16

Şablonları müvəffəqiyyətlə tətbiq edə bildim

12
07 нояб. Cavab Alan 07 noyabrda verilir. 2008-11-07 01:51 '08 at 01:51 2008-11-07 01:51

Dojo bir gündən modul bir sistemə sahib idi. Əslində, bu, Dojonun təməl daşlığı sayılır, bir yerdə tutan yapışdırıcı:

Dojo modullarını istifadə edərək, aşağıdakı hədəfləri əldə edir:

  • Dojo kodunun və istifadəçi kodunun ( dojo.declare() ) dojo.declare() - qlobal sahəni ləkələmir, digər kitabxanalar və istifadəçi kodları ilə birgə - Dojo.
  • Sinxron və ya dojo.require() olaraq modulları yükləmə ( dojo.require() ).
  • İstifadəçi iclaslar, modul bağımlılıklarını analiz edən bir fayl və ya bir-birinə bağlı fayllar qrupu (katmanlar adlandırılır) yaratmaq üçün yalnız veb tətbiqinizin ehtiyaclarını daxildir. Xüsusi quruluşlar Dojo modullarını və müştərilərlə təchiz edilmiş modulları ehtiva edə bilər.
  • Dojo və istifadəçi koduna CDN-based şəffaf giriş. Həm AOL həm də Google bu şəkildə Dojo daşıyır, lakin bəzi müştərilər də bunu xüsusi web applications üçün edirlər.
11
23 дек. Cavab 23 dekabrda Eugene Lazutkin tərəfindən verilir. 2008-12-23 01:40 '08 at 1:40 2008-12-23 01:40

Mən MVC çərçivəsini heç kimə təəccübləndirmirəm. Backbone.js kodunu kodlaşdırmaq və ayırmaq üçün istifadə etdim və qiymətsiz idi.

Belə bir çox struktur var və onların çoxu da çox kiçikdir. Mənim şəxsi fikrimcə, jQuery-nin həssas UI-lər üçün bir neçə xətadan daha çoxunu yazmağı planlaşdırırsınızsa və ya zəngin Ajax tətbiqindən istifadə etmək istəyirsinizsə, MVC quruluşu sizin həyatınızı çox asanlaşdırır.

9
19 апр. Cavab Chetan 19 Aprel verildi. 2011-04-19 22:47 '11 saat 10:47 'da 2011-04-19 22:47

Mənim müdirim hələ də modul kodu (C dil) yazmaqdan və bu günlərdə necə crap kodunu yazdığından bəhs edir! Proqramçılar hər hansı bir çərçivədə bir məclis yaza biləcəklərini söyləyirlər. Kod təşkilatının aradan qaldırılması üçün həmişə bir strategiya var. Əsas problem java scriptini oyuncaq kimi qiymətləndirən və bunu öyrənməyə çalışmayan uşaqlar üçündür.

Mənim vəziyyətimdə, istifadəçi interfeysi və ya proqramın müvafiq ekranında müvafiq init_screen () ilə js faylları yazıram. Düzgün adlandırma konvensiyasından istifadə edərək mən əminəm ki, kök element səviyyəsində heç bir ad çatışmazlığı yoxdur. Unobstrusive window.load (), üst səviyyə idə əsaslanan şeyi bağlayıram.

Bütün xüsusi metodları gizlətmək üçün ciddi bir şəkildə java skript kapanışlarını və şablonlarını istifadə edirəm. Bundan sonra biz xüsusiyyətləri / funksiyaları / dəyişənləri ilə ziddiyyətli anlayışlar problemi ilə heç vaxt qarşılaşmışıq. Ancaq komanda ilə işləyərkən eyni çətinliklərə nail olmaq çox vaxt çətindir.

9
29 окт. Cavab 29 oktyabr tarixində verilir . 2008-10-29 18:48 '08 at 18:48 2008-10-29 18:48

JavasciptMVC-ni yoxlayın.

Siz edə bilərsiniz:

  • Kodunuzu model, görünüş və nəzarətçi səviyyələrinə bölün.

  • bütün kodları bir istehsal faylına kompres edin

  • avtomatik olaraq yaradılmış kod

  • vahid testləri yaratmaq və idarə etmək

  • və daha çox ...

Hamısı yaxşıdır, jQuery istifadə edir, belə ki, digər jQuery pluginlərindən istifadə edə bilərsiniz.

9
01 нояб. cavab cari ilin 01-də verilir . 2009-11-01 19:53 '09 da 19:53 'da 2009-11-01 19:53

"Çılpaq kimi yazın və sadəcə yaxşı işləməyə ümid edirəm?" Mən yalnız iki inkişafçı tərəfindən hazırlanmış və dəstəklənən bir layihə gördüm - çoxlu javascript kodlu böyük bir proqram. Bundan əlavə, düşünmək mümkün olan hər bir jquery funksiyası üçün müxtəlif qısa yollar var idi. Kodu jquery sinifinə, moduluna, ad boşluğuna və bütün kainata bərabər olduğundan kodu plugins kimi təşkil etmə təklifini irəli sürmüşəm. Amma şeylər daha da pisləşdi, indi onlar layihədə istifadə olunan üç satırlıq kodun hər bir kombinasiyasının əvəzinə plitələr yazmağa başladılar. Kişisel olaraq düşünürəm ki, jQuery bir şeytandır və bir çox javascriptli layihələrdə istifadə edilməməlidir, çünki bu, tənbəl olmağa təşviq edir və kodu təşkil etməyi düşünmür. Mən jQuery ilə əlaqəli funksiyaları olan bir satırdan 100 satır javascript oxumağı üstün tuturdum (şaka etməyin). Möhtərəm inancın əksinə, javascript kodunu ad boşluqları və siniflərin ekvivalentlərində təşkil etmək çox asandır. YUI və Dojo nə edir. Istədiyiniz halda özünüzü asanlıqla çevirə bilərsiniz. YUI yanaşmasının daha yaxşı və daha səmərəli olduğunu görürəm. Ancaq faydalı bir şey yazmaq istəyirsinizsə, adətən YUI adlandırma konvensiyalarını kompensasiya etmək üçün yaxşı bir bölünməz redaktor lazımdır.

8
23 дек. Cavab Vasil 23 dekabrda verilir. 2008-12-23 14:45 '08 saat 02:45 'da 2008-12-23 14:45

Ekranda bir neçə dəfə, hər şey üçün dərslər yaratmaq lazım deyil ki, hər bir şey üçün birincilər yaratıram. Və hamısı eyni faylda eyni ad daxildir. Hər şey UML dövlət diaqramları ilə şərh və tərtib olunur. Javascript kodu html-dən təmizlənir, belə ki, daxili javascript yoxdur və cross-browser ilə problemləri minimuma endirmək üçün jquery istifadə edirlər.

7
30 окт. Nikola Stjelja tərəfindən verilmiş cavab 30 oktyabr 2008-10-30 01:29 '08 at 01:29 2008-10-30 01:29

Yaxşı bir OO + MVC meneceri mütləq kompleks bir javascript tətbiqi idarə etmək üçün uzun bir yola çıxacaq.

Əsasən mənim ərizə və javascripti növbəti tanış dizayn üçün təşkil edəcəyəm (mənim proqramlaşdırma günlərimdən Web 2.0-a qədər)

2019

6
ответ дан momo 20 авг. '11 в 6:10 2011-08-20 06:10

Организация кода в JQuery Centric 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> 

Bu kömək edir.

6
ответ дан Darryl 16 апр. '09 в 17:03 2009-04-16 17:03

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

5
ответ дан Justin Johnson 24 июля '09 в 3:33 2009-07-24 03:33

В моем последнем проекте -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, я знаю, что должны быть лучшие способы управления этим, но до сих пор он отлично работает для нас.

5
ответ дан Danita 23 дек. '08 в 14:27 2008-12-23 14:27

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

 $(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. } }; 
3
ответ дан Dmitri Farkov 14 мая '09 в 6:58 2009-05-14 06:58

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

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

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

3
ответ дан changelog 29 окт. '08 в 18:29 2008-10-29 18:29

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

  • Папка для всех ваших javascript
  • Уровень страницы javascript получает свой собственный файл с тем же именем страницы. ProductDetail.aspx будет ProductDetail.js
  • В папке javascript для файлов библиотеки у меня есть папка lib
  • Поместите связанные библиотечные функции в папку lib, которую вы хотите использовать во всем приложении.
  • Ajax - единственный javascript, который я перемещаю вне папки javascript и получает его собственную папку. Затем я добавляю два подпапки клиента и сервера
  • Клиентская папка получает все .js файлы, в то время как папка сервера получает все файлы на стороне сервера.
2
ответ дан Jason Too Cool Webs 07 янв. '10 в 0:33 2010-01-07 00:33

Я думаю, что это связано, возможно, с DDD (Domain-Driven Design). Приложение, над которым я работаю, хотя и не имеет формального 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'); 
2
ответ дан ken 30 марта '09 в 11:39 2009-03-30 11:39

Я использую эту маленькую вещь. Он дает вам директиву include для шаблонов JS и HTML. Он полностью уничтожает беспорядок.

https://github.com/gaperton/include.js/

 $.include({ html: "my_template.html" // include template from file... }) .define( function( _ ){ // define module... _.exports = function widget( $this, a_data, a_events ){ // exporting function... _.html.renderTo( $this, a_data ); // which expands template inside of $this. $this.find( "#ok").click( a_events.on_click ); // throw event up to the caller... $this.find( "#refresh").click( function(){ widget( $this, a_data, a_events ); // ...and update ourself. Yep, in that easy way. }); } }); 
2
ответ дан gaperton 14 нояб. '10 в 23:11 2010-11-14 23:11

Вы можете использовать jquery mx (используемый в javascriptMVC), который представляет собой набор скриптов, который позволяет использовать модели, представления и контроллеры. Я использовал его в проекте и помог мне создать структурированный javascript с минимальными размерами script из-за сжатия. Это пример контроллера:

 $.Controller.extend('Todos',{ ".todo mouseover" : function( el, ev ) { el.css("backgroundColor","red") }, ".todo mouseout" : function( el, ev ) { el.css("backgroundColor","") }, ".create click" : function() { this.find("ol").append("<li class='todo'>New Todo</li>"); } }) new Todos($('#todos')); 

Вы также можете использовать только сторону контроллера jquerymx, если вас не интересуют детали представления и модели.

2
ответ дан rolnn 20 июля '11 в 9:25 2011-07-20 09:25

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

Конечным результатом был небольшой (около 1 КБ) фреймворк, который переводит объектные литералы в jQuery. Синтаксис визуально легче сканировать, и если ваш js становится очень большим, вы можете писать повторно используемые запросы, чтобы найти такие вещи, как используемые селектора, загруженные файлы, зависимые функции и т.д.

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

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

FireFox рекомендуется, так как он поддерживает toSource() для примера запроса объекта.

Hooray!

Адам

1
ответ дан Adam 02 апр. '11 в 7:38 2011-04-02 07:38

Я использую пользовательский script, вдохновленный поведением Бена Нолана (я не могу найти текущую ссылку на это больше, к сожалению), чтобы хранить большинство моих обработчиков событий. Например, эти обработчики событий запускаются элементами className или Id. Məsələn:

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

Мне нравится включать большинство моих Javascript-библиотек "на лету", кроме тех, которые содержат глобальное поведение. Я использую Zend Framework headScript() помощник заполнителя для этого, но вы также можете используйте javascript для загрузки других скриптов на лету , например Ajile .

0
ответ дан Aron Rotteveel 29 окт. '08 в 18:29 2008-10-29 18:29

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

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

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

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

0
ответ дан staticsan 30 окт. '08 в 2:19 2008-10-30 02:19

Lazy Загрузите код, который вам нужен по запросу. Google делает что-то подобное с помощью google.loader

0
ответ дан Brig Lamoreaux 23 дек. '08 в 1:43 2008-12-23 01:43

Другие вопросы по меткам или Задайте вопрос