12/1/2016

LamejormaneradeorganizarjQuery/JavaScriptde|javascript

TogglenavigationIteramos
3voto
5voto
7voto
53voto
58votos
Regstrate
Login
Inicio
Preguntas
Recientes
Msvotadas
Msvisitadas
Msrespondidas
PreguntasTraducidas
Recientes
Msvotadas
Msvisitadas
Msrespondidas
Revisadasmanualmente
Sinresponder
Sinresponder
Abiertas
Etiquetas
HumorDev
Preguntar

LamejormaneradeorganizarjQuery/JavaScriptdecdigo(2013)
javascriptjqueryjqueryuibackbone.jsrequirejs
BuscarPregunta

Iteramosesunacomunidaddepreguntasyrespuestasparaprofesionalesyentusiastasdelaprogramacin.Es
totalmentegratuito.
Empiezaendosminutos
javascript
jquery
jqueryui
backbone.js
requirejs

LamejormaneradeorganizarjQuery/JavaScriptdecdigo(2013)
Preguntadoel24deMayo,2013
Cuandosehizolapregunta
12425visitas
Cuantasvisitashatenidolapregunta
5Respuestas
Cuantasrespuestashatenidolapregunta
Cerrada
Estadoactualdelapregunta

ElProblema
http://www.iteramos.com/pregunta/29021/lamejormaneradeorganizarjqueryjavascriptdecodigo2013

1/13

12/1/2016

LamejormaneradeorganizarjQuery/JavaScriptde|javascript

Estarespuestahasidocontestadoantesperosonviejosynohastalafecha.Tengomsde2000lneasdecdigo
enunarchivonico,ycomotodossabemos,estaesunamalaprctica,sobretodocuandoestoymirandoatravs
decdigoolaadicindenuevascaractersticas.Quieroorganizarmejormicdigo,paraahorayparaelfuturo.
Debomencionarqueyosoylaconstruccindeunaherramienta(nounasimplepginaweb)conunmontnde
botones,elementosdeinterfazdeusuario,arrastre,gotas,laaccindelosoyentes/controladoresyfuncinenel
mbitoglobal,dondevariosoyentespuedenusarlamismafuncin.

Ejemplodecdigo
$('#button1').on('click',function(e){
//Determinedaction.
update_html();
});
...//Around75moreofthis
functionupdate_html(){....}
...

Msejemplodecdigo

Conclusin
Realmentenecesitoparaorganizarestecdigoparaelmejorusoynoarepetirammismoysercapazdeaadir
nuevascaractersticasyactualizacindelosantiguos.Voyaestartrabajandoenestopormmismo.Algunos
selectorespuedenserde100lneasdecdigoqueotrosson1.Hemiradounpocoenrequire.jsypareciun
pocorepetitivo,yrealmenteescribirmscdigoqueseanecesario.Estoyabiertaacualquierposiblesolucinque
seajustanaestecriterioyenlacearecursos/ejemplossonsiempreunplus.
Gracias.
Preguntadoel24deMayo,2013porCezarisLT
VerlapreguntaoriginalStackOverflowMejorarTraduccin

Twittear

Megusta

Compartir

Utilizaloscomentariosparapedirmasinformacin
ohacersugerencias.

Comentar Comentar
10%dedescuentoconelcdigoITERAMOS

5Respuestas
Demasiadosanuncios?

SbastienRenauldPuntos8624
Voyarepasaralgunascosassimplesquepuede,onopuede,ayudar.Algunospuedenserevidentes,algunos
podranserextremadamentearcano.

Paso1:Compartimentarsucdigo
http://www.iteramos.com/pregunta/29021/lamejormaneradeorganizarjqueryjavascriptdecodigo2013

2/13

12/1/2016

LamejormaneradeorganizarjQuery/JavaScriptde|javascript

Separarelcdigoenmltiplesunidadesmodularesesunmuybuenprimerpaso.Rondadeloquefunciona
"juntos"ylospusoensupropiopequeoencerradounidad.notepreocupesporelformato,porahora,mantener
enlnea.Laestructuraesunpuntoposterior.
As,supongamosqueustedtieneunapginacomoesta:

Tendrasentidoparacompartimentar,demodoquetodoelencabezadorelacionadosconcontroladoresde
eventos/clasificadoresestnah,parafacilitarelmantenimiento(ynotenerquetamizaratravsde1000lneas).
Luego,puedeutilizarunaherramientacomoelGruidodereconstruirsusJSlaespaldaaunasolaunidad.

Paso1a:gestindelaDependencia
ElusodeunabibliotecacomoRequireJSoCommonJSaimplementaralgoquesellamaAMD.Asincrnicodela
CargadelMdulolepermiteexplcitamenteelestadodeloquesucdigodepende,quepermiteladescargadela
bibliotecallamandoalcdigo.Ustedslopuedeliteralmentedicen"EstonecesitajQuery"yelAMDsecarga,y
ejecutarsucdigocuandojQueryestdisponible.
Estotambintieneunajoyaescondida:lacargadelabibliotecaseharlasegundaelDOMestlisto,noantes.
Estonodetienelacargadetupgina!

Paso2:Modularizar
Verlamalladealambre?Tengodosbloquesdeanuncios.Quelomsprobableesquehancompartidolos
detectoresdeeventos.
Sutareaenestepasoesidentificarlospuntosderepeticinenelcdigoyaintentarsintetizartodoestoen
mdulos.Mdulos,ahoramismo,todoloabarcan.Vamosadividirlascosasamedidaqueavanzamos.
Laideadeestepasoesirdesdeelpaso1yeliminaratodoslacopiadepastas,parasustituirlasporunidadesque
estndbilmenteacoplados.As,enlugardetener:
ad_unit1.js
$("#au1").click(function(){...});
ad_unit2.js
http://www.iteramos.com/pregunta/29021/lamejormaneradeorganizarjqueryjavascriptdecodigo2013

3/13

12/1/2016

LamejormaneradeorganizarjQuery/JavaScriptde|javascript

$("#au2").click(function(){...});

Voyatener:
ad_unit.js:
varAdUnit=function(elem){
this.element=elem||newjQuery();
}
AdUnit.prototype.bindEvents=function(){
...Eventsgohere
}
page.js:
varAUs=newAdUnit($("#au1,#au2"));
AUs.bindEvents();

Quepermiterepartirentretuseventosysumarcadoademsdedeshacersedelarepeticin.Esteesunbuenpaso
yvamosaextendermsenellomstarde.

Paso3:elijaunmarco!
Siquieresmodularizaryreducirlasrepeticionesanms,hayunmontndeimpresionantesmarcosalrededorque
implementarMVC(ModeloVistaControlador)enfoques.Mifavoritoeselpilar/Columnavertebral,sin
embargo,tambinhayAngular,Yii,...yLalistacontina.
UnModelorepresentalosdatos.
UnaVistaquerepresentasumarcaytodosloseventosasociadosaella
UnControladorrepresentalalgicadenegocioenotraspalabras,elcontroladorledicealapginadeloque
lasvistasdelacarga,yloquelosmodelosautilizar.
Esteserunaprendizajesignificativoapaso,peroelpremioselomerece:favorecelimpia,modularcdigo
espagueti.
Hayunmontndeotrascosasqueustedpuedehacer,esossonsolopautaseideas.

Cdigocambiosespecficosde
Aquestnalgunasmejorasespecficasparaelcdigo:
$('.new_layer').click(function(){
dialog("Createnewlayer","Enteryourlayername","_input",{
'OK':function(){
varreply=$('.dialog_input').val();
if(reply!=null&&reply!=""){
varname="ln_"+reply.split('').join('_');
varparent="";
if(selected_folder!=""){
parent=selected_folder+".content";
}
$R.find(".layer").clone()
http://www.iteramos.com/pregunta/29021/lamejormaneradeorganizarjqueryjavascriptdecodigo2013

4/13

12/1/2016

LamejormaneradeorganizarjQuery/JavaScriptde|javascript

.addClass(name).html(reply)
.appendTo("#layer_groups"+parent);
$R.find(".layers_group").clone()
.addClass(name).appendTo('#canvas'+selected_folder);
}
}
});
});

Estoesmejorescribircomo:

$("body").on("click",".new_layer",function(){
dialog("Createnewlayer","Enteryourlayername","_input",{
OK:function(){
//Theremustbeawaytogettheinputfromhereusingthis,ifitisastandardlibrary.Ifyo

//Thisiswheretheviewcomesintoplay.Insteadofcloning,bindtherenderingintoaJSprot
varnewLayer=newLayer();
newLayer
.setName(name)
.bindToGroup(parent);
}
});
});

Anteriormenteenelcdigo:
window.Layer=function(){
this.instance=$("<div>");
//Markupgeneratedhere
};
window.Layer.prototype={
setName:function(newName){
},
bindToGroup:function(parentNode){
}
}

Derepente,ustedtieneunamaneradecrearunacapaestndardesdecualquierlugarenelcdigo,sincopiar
pegar.Ustedesthaciendoestoencincolugaresdiferentes.Slomehesalvadodecincocopiapega.
Unoms:
//Conjuntodereglasdecontenedorparalasacciones
varPageElements=function(ruleSet){
ruleSet=ruleSet||[];
this.rules=[];
for(vari=0;i<ruleSet.length;i++){
if(ruleSet[i].target&&ruleSet[i].action){
this.rules.push(ruleSet[i]);
}
}
}
PageElements.prototype.run=function(elem){
for(vari=0;i<this.rules.length;i++){
this.rules[i].action.apply(elem.find(this.rules.target));
}
}
varGlobalRules=newPageElements([
{
http://www.iteramos.com/pregunta/29021/lamejormaneradeorganizarjqueryjavascriptdecodigo2013

5/13

12/1/2016

LamejormaneradeorganizarjQuery/JavaScriptde|javascript

"target":".draggable",
"action":function(){this.draggable({
cancel:"div#scrolling,.content",
containment:"document"
});
}
},
{
"target":".resizable",
"action":function(){
this.resizable({
handles:"all",
zIndex:0,
containment:"document"
});
}
}
]);
GlobalRules.run($("body"));
//Ifyouneedtoaddelementslateron,youcanjustcallGlobalRules.run(yourNewElement);

Estaesunamaneramuypotentepararegistrarlasreglassiustedtieneeventosquenosonestndar,olacreacin
deeventos.Estotambinesenseriokickasscuandosecombinaconunpub/subsistemadenotificacinycuando
seuneauneventodefuegoquecadavezquesecreaelementos.Fuegon''forgetmodulardeenlacedeevento!
Respondidoel26deMayo,2013porSbastienRenauld(8624puntos)
MejorarTraduccin Twittear Megusta Compartir 0
Utilizaloscomentariosparapedirmasinformacin
ohacersugerencias.

Comentar Comentar
10%dedescuentoconelcdigoITERAMOS

LynHeadleyPuntos3884
Aquestunamanerasimplededividirsuactualbasedecdigoenvariosarchivos,elusoderequire.js.Yote
mostrarcmodividirelcdigoendosarchivos.Agregarmsarchivosserfcildespusdeeso.
Paso1)Enlapartesuperiordesucdigo,crearunobjetodeAplicacin(ocualquiernombrequeprefiera,como
MyGame):
varApp={}

Paso2)ConvertirtodoslosdesunivelsuperiordevariablesyfuncionesquepertenecenalobjetodeAplicacin.
Enlugarde:
varselected_layer="";

Usteddesea:
App.selected_layer="";
http://www.iteramos.com/pregunta/29021/lamejormaneradeorganizarjqueryjavascriptdecodigo2013

6/13

12/1/2016

LamejormaneradeorganizarjQuery/JavaScriptde|javascript

Enlugarde:
functiongetModified(){
...
}

Usteddesea:
App.getModified=function(){
}

Tengaencuentaqueenestepuntoelcdigonofuncionarhastaquetermineelsiguientepaso.
Paso3)ConvertirtodosvariableglobalylafuncindelasreferenciasairatravsdelaAplicacin.
Cambiocosascomo:
selected_layer="."+classes[1];

a:
App.selected_layer="."+classes[1];

y:
getModified()

a:
App.GetModified()

Paso4)Probarelcdigoenestemomentotodoeltrabajo.Ustedprobablementevaaobtenerunpardeerroresal
principioporqueteperdistealgo,asquearreglarantesdepasar.
Paso5)Establecerrequirejs.Supongoqueustedtieneunapginaweb,quesesirvedeunservidorweb,cuyo
cdigoes:
www/page.html

yjquery
www/js/jquery.js

Siestasrutasnosonexactamentecomoestaladeabajonofuncionarytendrsquemodificarlasrutasde
acceso.
Descargarrequirejsyponerrequire.jsensuwww/jsdirectorio.
ensupage.html,eliminartodaslasetiquetasdesecuenciadecomandoseinsertarunaetiquetadesecuenciade
comandoscomo:
<scriptdatamain="js/main"src="js/require.js"></script>

crearwww/js/main.jsconcontenido:
require.config({
http://www.iteramos.com/pregunta/29021/lamejormaneradeorganizarjqueryjavascriptdecodigo2013

7/13

12/1/2016

LamejormaneradeorganizarjQuery/JavaScriptde|javascript

"shim":{
'jquery':{exports:'$'}
}
})
require(['jquery','app']);

acontinuacin,ponertodoelcdigoqueacabadearreglarenlosPasos13(cuyanicavariableglobaldebeser
App)en:
www/js/app.js

Enlapartesuperiordeesearchivo,poner:
require(['jquery'],function($){

Enlaparteinferior:
})

Luegodelacargapage.htmlensunavegador.Suaplicacindeberafuncionar!
Paso6)Crearotroarchivo
Aquesdondesutrabajovalelapena,ustedpuedehacerestounayotravez.
Sacaralgodecdigodewww/js/app.jsquehacereferenciaadlaresyAplicacin.
porejemplo,
$('a').click(function(){App.foo()}

Ponerloenwww/js/foo.js
Enlapartesuperiordeesearchivo,poner:
require(['jquery','app'],function($,App){

Enlaparteinferior:
})

Acontinuacin,cambiarlaltimalneadewww/js/main.jsa:
require(['jquery','app','foo']);

10voto
Esoestodo!Hacerestocadavezquequieroponerelcdigoensupropioarchivo!
Respondidoel28deMayo,2013porLynHeadley(3884puntos)
MejorarTraduccin Twittear Megusta Compartir 0
Utilizaloscomentariosparapedirmasinformacin
ohacersugerencias.

Comentar Comentar
10%dedescuentoconelcdigoITERAMOS

http://www.iteramos.com/pregunta/29021/lamejormaneradeorganizarjqueryjavascriptdecodigo2013

8/13

12/1/2016

LamejormaneradeorganizarjQuery/JavaScriptde|javascript

JessCarreraPuntos980
Porsupreguntaycomentariosvoyaasumirquenoestndispuestosapuertoelcdigoenunmarcocomola
columnavertebral,oelusodeungestordebibliotecacomoRequieren.Loquedeseaesunamejormanerade
orgainzeelcdigoqueyatienes,enlaformamssencillaposible.
Entiendoqueesmolestoparadesplazarseatravsdemsde2000lneasdecdigoparaencontrarlaseccinque
deseatrabajar.Lasolucinesdividirelcdigoenarchivosdiferentes,unoparacadafuncionalidad.Porejemplo
sidebar.js,canvas.jsetc.EntoncesustedpuedeunirseaellosparalaproduccinusandoGrunt,juntocon
Useminpuedeteneralgocomoesto:
Enelhtml:
<!build:jsscripts/app.js>
<scriptsrc="scripts/sidebar.js"></script>
<scriptsrc="scripts/canvas.js"></script>
<!endbuild>

EnsuGruntfile:
useminPrepare:{
html:'app/index.html',
options:{
dest:'dist'
}
},
usemin:{
html:['dist/{,*/}*.html'],
css:['dist/styles/{,*/}*.css'],
options:{
Estawebutilizacookiespropiasydeterceros.
dirs:['dist']
}
}

vermas

Cerrarmensaje

SideseautilizarYeomanseledaruncdigoreutilizableparatodoesto.
Acontinuacin,paracadaarchivo,ustednecesitaparaasegurarsedequesiguenlasmejoresprcticasyquetodo
elcdigoyvariablessontodosenesearchivo,ynodependendeotrosarchivos.Estonosignificaqueustedno
puedellamaralasfuncionesdeunarchivodeotro,elpuntoestenervariablesyfuncionesencapsuladas.Algo
similaranamespacing.VoyaasumirqueustednoquiereapuertotodoslosquetucdigoseaOrientadoa
Objetos,perosinoteimportarefactorizacinunpoco,selorecomiendoaagregaralgoequivalentealoquese
llamaunmodelodeMdulo.Sevealgocomoesto:
sidebar.js
varSidebar=(function(){
//functionsandvarshereareprivate
varinit=function(){
$("#sidebar#sortable").sortable({
forceHelperSize:true,
forcePlaceholderSize:true,
revert:true,
revert:150,
placeholder:"highlightpanel",
axis:"y",
http://www.iteramos.com/pregunta/29021/lamejormaneradeorganizarjqueryjavascriptdecodigo2013

9/13

12/1/2016

LamejormaneradeorganizarjQuery/JavaScriptde|javascript

tolerance:"pointer",
cancel:".content"
}).disableSelection();
}
return{
//hereyourcanputyour"public"functions
init:init
}
})();

Acontinuacin,puedecargarestetrozodecdigocomoeste:
$(document).ready(function(){
Sidebar.init();
...

Estolepermitirtenerunamuchomsmanteniblecdigoynorequierequeustedvuelvaaescribirsucdigo
demasiado.
Respondidoel28deMayo,2013porJessCarrera(980puntos)
MejorarTraduccin Twittear Megusta Compartir 0
Utilizaloscomentariosparapedirmasinformacin
ohacersugerencias.

Comentar Comentar
10%dedescuentoconelcdigoITERAMOS

RohitTailorPuntos86
ElusodejavascriptMVCFrameworkconelfindeorganizarelcdigojavascriptdeunamaneraestndar.
MejorJavaScriptframeworksMVCdisponiblesson:
Columnavertebral
Angular
CanJS
Ember
LaseleccindeunJavaScriptMVCframeworkrequieretantosfactoresaconsiderar.Leaelsiguienteartculode
comparacinqueleayudaraseleccionarelmejormarcodereferenciabasadoenlosfactoresimportantesparasu
proyecto:http://sporto.github.io/blog/2013/04/12/comparisonangularbackbonecanember/
TambinpuedeutilizarRequireJSconelmarcoparaapoyarAsynchrounousarchivojsyelmdulodecarga.
MiraelsiguienteparaempezaratrabajarenJSMdulodecarga:
http://www.sitepoint.com/understandingrequirejsforeffectivejavascriptmoduleloading/
Respondidoel29deMayo,2013porRohitTailor(86puntos)
MejorarTraduccin Twittear Megusta Compartir 0
Utilizaloscomentariosparapedirmasinformacin
ohacersugerencias.

Comentar Comentar
10%dedescuentoconelcdigoITERAMOS
http://www.iteramos.com/pregunta/29021/lamejormaneradeorganizarjqueryjavascriptdecodigo2013

10/13

12/1/2016

LamejormaneradeorganizarjQuery/JavaScriptde|javascript

FazleRabbiPuntos624
Yosugerira:
1. publicador/suscriptorpatrnparalagestindeeventos.
2. laorientacinaobjetos
3. namespacing
EnelcasodeJessica,dividirlainterfazenpginasopantallas.Pginasopantallaspuedenserdelosobjetosyde
algunasclasesparalospadres.Gestionarlasinteraccionesentrelaspginasconunpagemanagertambinincludo
clase.
Respondidoel26deMayo,2013porFazleRabbi(624puntos)
MejorarTraduccin

Twittear

Megusta

Compartir

Utilizaloscomentariosparapedirmasinformacin
ohacersugerencias.

Comentar Comentar
10%dedescuentoconelcdigoITERAMOS

Preguntasrelacionadas
CmolograrlacargadiferidaconRequireJS?
Backbone.jscapazdehacerelrestoylocalstorage?
LamejormaneradeencontrarunelementoenunarraydeJavaScript?
CuleslamejormaneraparaaadiropcionesaseleccionarapartirdeunarrayconjQuery?
LamejormaneradeutilizarGooglehostedjQuery,perovuelvenacaerenmialojadoenlabibliotecade
Googlefallar
LamejormaneradeeliminaruncontroladordeeventosenjQuery?
CuleslamejormaneradedefinirunaclaseenJavaScript?

Buscastrabajo?
ProgramadorFront,HTML5,CSS3,Angular
CASTRAINING
Salamancayotras
JAVASCRIPTHTML5CSS3JQUERY
SoftwareEngineerInternet
EpicLabs
Madrid
JavaScriptJavaC/C++TypeScript
DesarrolladorJavaExpert
Sferea
SinProvincia.
http://www.iteramos.com/pregunta/29021/lamejormaneradeorganizarjqueryjavascriptdecodigo2013

11/13

12/1/2016

LamejormaneradeorganizarjQuery/JavaScriptde|javascript

JavaScriptDesarrolloWeb:HTML5CSS3jQuery
SeniorDeveloperJavascript/D3
HRCS
Mlagayotras
JavascriptReactAngularBackbone
Desarrolladorweb
Imaginamos
Cundinamarca
JavascriptPHPMVCCSS
VermsOfertasdeEmpleo

GifsparaprogramadoresVermas
Cuandoenvezdeunpequeoscriptmeobliganausarunpatrndediseo

@authormatov
Twittear

Seguir

Preguntassinresponder
1Votos
removeritemsdeinputfilemultiple
javascript
jquery
php
0Votos
SabersentidodeunarutaenGoogleMaps
googlemaps
php
javascript
jquery
1Votos
problemaconelusode'with'oconelvalordelobservable(Knockoutjs)
javascript
knockoutjs
0Votos
http://www.iteramos.com/pregunta/29021/lamejormaneradeorganizarjqueryjavascriptdecodigo2013

12/13

12/1/2016

LamejormaneradeorganizarjQuery/JavaScriptde|javascript

Jqueryaadirelementos
jquery
javascript
1Votos
estudiodepotenciaconRcomander
r
0Votos
comoinvalidarenc++
java.uo
1Votos
Comoevitarmostrarblankpageconunvideoensuinteriorusandowebview?
android
webview
video

Etiquetasmasusadas
c#
java
javascript
android
python
c++
.net
jquery
iphone
php

Iteramos.com
Iteramosesunacomunidaddedesarrolladoresquebuscaexpandirelconocimientodelaprogramacinmasall
delingls.
ParaellotraducimoslaspreguntasmaspopularesdeStackOverflowaespaolytambinpuedeshacertuspropias
preguntasoresolverlasdelosdems.

Poweredby:

Yandex
AvisoLegalPolticadePrivacidadContacto
2015Iteramos.com
http://www.iteramos.com/pregunta/29021/lamejormaneradeorganizarjqueryjavascriptdecodigo2013

13/13