Código de estructura Javascript -- javascript campo con beginner camp codereview Relacionados El problema

Structure JavaScript code


9
vote

problema

Español

Soy nuevo en el desarrollo de Javascript, por lo que busco ayuda en las directrices sobre cómo puedo organizar mejor mi código de una manera mejor. Esto es lo que tengo para una aplicación pequeña, estoy trabajando en:

  body * {   box-sizing: border-box; }  .container {   max-width: 1200px;   margin: 0 auto; }  .slider {   width: 100%;   height: 300px;   position: relative;   overflow: hidden; }  .slider .slider-nav {   text-align: center;   position: absolute;   padding: 0;   margin: 0;   left: 10px;   right: 10px;   bottom: 2px;   z-index: 10; }  .slider .slider-nav li {   display: inline-block;   width: 20px;   height: 4px;   margin: 0 1px;   text-indent: -9999px;   overflow: hidden;   background-color: rgba(255, 255, 255, .5); }  .slider .slider-nav a {   display: block;   height: 4px;   line-height: 4px; }  .slider .slider-nav li.activeSlide {   background: #fff; }  .slider .slider-nav li.activeSlide a {   display: none; }  .slider .slider-container {   width: 100%;   text-align: center; }  .slider .slides-container a {   height: 300px;   display: block;   position: absolute;   top: 0;   left: 0;   right: 0; }  .slider .slides-container img {   transform: translateX(-50%);   margin-left: 50%; }5  
  1. ¿Es lo suficientemente bueno como para que esté dividiendo mis funciones y luego agregándolas a un solo objeto global? Cualquier mejor manera?

  2. Estoy usando algunos llamadas nativas body * { box-sizing: border-box; } .container { max-width: 1200px; margin: 0 auto; } .slider { width: 100%; height: 300px; position: relative; overflow: hidden; } .slider .slider-nav { text-align: center; position: absolute; padding: 0; margin: 0; left: 10px; right: 10px; bottom: 2px; z-index: 10; } .slider .slider-nav li { display: inline-block; width: 20px; height: 4px; margin: 0 1px; text-indent: -9999px; overflow: hidden; background-color: rgba(255, 255, 255, .5); } .slider .slider-nav a { display: block; height: 4px; line-height: 4px; } .slider .slider-nav li.activeSlide { background: #fff; } .slider .slider-nav li.activeSlide a { display: none; } .slider .slider-container { width: 100%; text-align: center; } .slider .slides-container a { height: 300px; display: block; position: absolute; top: 0; left: 0; right: 0; } .slider .slides-container img { transform: translateX(-50%); margin-left: 50%; }6 . ¿Está bien mantener el código nativo, incluso cuando tiene una biblioteca cargada en la página, solo para la ganancia de rendimiento? ¿O depende del tamaño de la base de código? ¿Está bien, por lo suficientemente pequeño y probablemente se mueve en un grande?

  3. Cómo comienza toda la ejecución, como la función ZEPO KICKSTARTS body * { box-sizing: border-box; } .container { max-width: 1200px; margin: 0 auto; } .slider { width: 100%; height: 300px; position: relative; overflow: hidden; } .slider .slider-nav { text-align: center; position: absolute; padding: 0; margin: 0; left: 10px; right: 10px; bottom: 2px; z-index: 10; } .slider .slider-nav li { display: inline-block; width: 20px; height: 4px; margin: 0 1px; text-indent: -9999px; overflow: hidden; background-color: rgba(255, 255, 255, .5); } .slider .slider-nav a { display: block; height: 4px; line-height: 4px; } .slider .slider-nav li.activeSlide { background: #fff; } .slider .slider-nav li.activeSlide a { display: none; } .slider .slider-container { width: 100%; text-align: center; } .slider .slides-container a { height: 300px; display: block; position: absolute; top: 0; left: 0; right: 0; } .slider .slides-container img { transform: translateX(-50%); margin-left: 50%; }7 en el evento Listo para el documento y luego lo tomo de allí, ¿es así como debería estar haciendolo o hay una mejor manera? ?

¡Cualquier otra sugerencia bienvenida!

Original en ingles

I am new to JavaScript development, so I'm seeking help in guidelines on how I can better organize my code in a better way. This is what I have for a small app I am working on:

var app = app || {};  app.p = function(){ ... }; app.q = function(){ ... }; app.r = function(){ ... };  app.init = function(){ ... }; app.onload = function(){     if (window.applicationCache) {         window.applicationCache.addEventListener('updateready', function() {             // do stuff         });     } };  window.addEventListener('load', app.onload); window.addEventListener('online',app.p);  Zepto(function($){     app.init();     app.p();      $('#aaaa').change(function(){         app.q();         app.r();     });  }); 
  1. Is it good enough that I am splitting my functions and then adding them to a single global object? Any better way?

  2. I am using some native window.addEventListener() calls. Is it ok to keep native code, even when you have a library loaded on the page, just for the performance gain? Or does it depend on the size of codebase? Is it ok for small enough and probably moving in a large one?

  3. How the whole execution begins, like Zepto kickstarts init() function on document ready event and then I take it from there, is this how I should be doing it or is there a better way?

Any other suggestions welcome!

     

Lista de respuestas

10
 
vote
vote
La mejor respuesta
 

Pacientes de nombres

1) ¿Es lo suficientemente bueno como para que esté dividiendo mis funciones y luego agregándolas a un solo objeto global? Cualquier manera mejor?

Sí, es una buena y Popular enfoque. Es simple y funciona.

Puede considerar usar cierres para crear app.p , app.q1 y app.r . Creo que esto se conoce como usando IIFES (expresiones de función invocadas inmediatamente) [ Detalles ]. En este momento, app.p3 , app.q4 y app.r No tiene un alcance privado persistente. El único alcance privado que tendrán es lo que suceda dentro de la función, en sí misma. Si necesitaban hacer un seguimiento de algo, deberán usar una variable en el alcance global porque es el único alcance fuera de la función. El uso de una 'IIIA' permitiría que haya algún estado persistente y privado para cada función:

  app.p = (function() {     var someCounter = 0;     return function(){          someCounter++;         // do stuff     } })();   

Ahora, app.p7 puede acceder al someCounter variable pero nada más puede. Algunas personas no les importa esto , pero yo ' m un fan.

Para proyectos más grandes, el var app = app || {}; podría ser difícil de manejar. Algo que he estado trabajando con un poco que permite un poco más de flexibilidad está en la parte inferior de esta página:

http://elegantcode.com/2011/ 01/26 / Basic-JavaScript-Part-8-Namesfaces /

  app.q0  

Usando este enfoque, para definir algo en un espacio de nombres (modificado de la misma página):

  app.q1  

y, para usar algo de un espacio de nombres:

  app.q2  

Un tema relacionado es AMD (definiciones de módulos asíncronos) y la inyección de dependencia (que es más bien un subcono de lo que las AMD se propone hacer, creo). Algunas opciones son exignetjs , yepnope , y angularjs (que implica cometer el proyecto al marco angularjs). Estoy seguro de que hay muchos otros, simplemente no los conozco.

AddeventListener nativo

2) Estoy usando algunas ventanas nativas.AddeventListener () Llamadas ...

Históricamente, cuando evito usar una biblioteca es porque no quiero cargarlo. Dicho esto, la diferencia de rendimiento es impresionante. La mayoría de las cosas que escribo son impulsadas de los eventos de la UI, que generalmente son raros (¿con qué frecuencia está haciendo clic?), Y la diferencia de rendimiento entre los dos no importa. Yo diría que ni siquiera importa si la base de código es grande. Parece que lo principal sería si estás manejando los eventos que se producen de manera super frecuente o no.

También vale la pena señalar que crear una dependencia de una biblioteca puede dificultar la reutilización de lo que esté escribiendo.

Proceso de inicio

3) Cómo comienza toda la ejecución, como la función Zepto Kickstarts init ()

Si está utilizando los oyentes de los eventos nativos, entonces no tiene la opción, no puede ir en el Zepto Init. Si está utilizando el proceso de Zepto Init, simplemente lo pondría en el app.q3 si a) nada más necesita una referencia a ella y b) No lo necesita antes, de todos modos. < / p>

 

Namespacing

1) Is it good enough that I am splitting my functions and then adding them to a single global object? Any better way?

Yes, it's a good and popular approach. It's simple and it works.

You might consider using closures to create app.p, app.q and app.r. I think this is referred to as using IIFEs (immediately invoked function expressions) [details]. Right now, app.p, app.q and app.r have no persistent private scope. The only private scope they will have is whatever happens within the function, itself. If they needed to keep track of something, they will need to use a variable in the global scope because it is the only scope outside of the function. Using an 'IIFE' would allow there to be some persistent and private state for each function:

app.p = (function() {     var someCounter = 0;     return function(){          someCounter++;         // do stuff     } })(); 

Now, app.p can access the someCounter variable but nothing else can. Some people don't care for this, but I'm a fan.

For larger projects, the var app = app || {}; might become unwieldy. Something I've been working with a bit that allows a little more flexibility is at the bottom of this page:

http://elegantcode.com/2011/01/26/basic-javascript-part-8-namespaces/

function namespace(namespaceString) {     var parts = namespaceString.split('.'),         parent = window,         currentPart = '';          for(var i = 0, length = parts.length; i < length; i++) {         currentPart = parts[i];         parent[currentPart] = parent[currentPart] || {};         parent = parent[currentPart];     }      return parent; } 

Using this approach, to define something in a namespace (modified from the same page):

// using an immediately invoked function expression (IIFE) // keeps things private to the function and prevents spillage // of variables into this outer scope (function() {     // retrieve what exists or make a new definition     var examples = namespace('io.examples');      // add something to it (another IIFE)     examples.log = (function() {         // can have private variables         var numMsgs = 0,             // for this, the api is an invokable function: api(), but             // we will also add more functions to it: api.subFunction()             // these will all have access to the numMsgs private variable             api = function() {                 numMsgs++;                 console.log.apply(console, arguments);             };         api.getMsgCount = function() {             return numMsgs;         }         // returning api sets io.examples.log to the api function         return api;     })(); })(); 

And, to use something from a namespace:

// retrieve what exists (we already made something,  // so it will not create an empty place-holder) var log = namespace('io.examples.log');  // the api was a function, so we can call it // or access the sub-function we attached to it log('hello'); var numSoFar = log.getMsgCount(); 

A related topic is AMDs (asynchronous module definitions) and dependency-injection (which is rather a sub-set of what AMDs set out to do, I think). Some options are requireJS, yepnope, and angularjs (which entails committing the project to the angularjs framework). I'm sure there are a lot of others, I just don't know them.

native addEventListener

2) I am using some native window.addEventListener() calls...

Historically, when I avoid using a library it's because I don't want to either load it. That being said, the performance difference is impressive. Most things I write are driven from UI events, which are generally rare (how often are you clicking?), and the performance difference between the two doesn't matter. I would say it doesn't even matter if the code base is large. Seems like the main thing would be whether you are handling events that occur super-frequently or not.

It's also worth noting that creating a dependency on a library can hinder the reusability of whatever you're writing.

init process

3) How the whole execution begins, like Zepto kickstarts init() function

If you're using native event listeners, then you don't have a choice, it can't go in the Zepto init. If you're using the Zepto init process, I would just put it in the Zepto(...) if a) nothing else needs a reference to it and b) you don't need it before then, anyway.

 
 
 
 

Relacionados problema

1  Script por lotes para descargar y extraer nodos.js y paquetes NPM  ( Batch script to download and extract node js and npm packages ) 
El siguiente es mi primer intento real de Scripting por lotes, y lo soy nuevo, así que no estoy seguro de si lo que he hecho es practicar mejor. El código fun...

2  Formulario básico de comentarios de PHP  ( Basic php comment form ) 
Soy un novato de programación. He escrito este simple script PHP para ejecutar un formulario de comentarios muy básico y apreciaría cualquier comentario, espe...

2  Pequeño bot de Twitter hecho en Python  ( Small twitter bot made in python ) 
Acabo de empezar a jugar con Python y he decidido crear un pequeño script que publique Tweets cada hora (Cronjob en Ubuntu) diciendo qué hora es. ¿No estoy ...

5  Colector de archivos M3U  ( M3u file collector ) 
Soy nuevo en Python y escribió este código para recopilar todos los archivos en un archivo M3U (Lista de reproducción) y copiándolos en un directorio. impo...

6  Palindrome más largo en una matriz  ( Longest palindrome in an array ) 
Soy nuevo en la programación, y creo que este código podría mejorarse. ¿Alguna sugerencia? 'done'0 ...

12  Autenticación simple en ASP.NET MVC 5  ( Simple authentication in asp net mvc 5 ) 
Estoy construyendo una aplicación ASP.NET MVC 5 y, por razones que son irrelevantes en este punto, estoy intentando construir mi propio medio para autenticar ...

2  Devuelve verdadero si los elementos de una matriz no contienen uno u otro  ( Return true if the elements of an array do not contain one or the other ) 
Estoy completando gradualmente los ejercicios de codificación para Java. Aquí está el uno acabo de hacer: Dada una matriz de INTS, devuelva verdadera si ...

3  Aplanar para obtener todos los controles infantiles de cierto tipo en una UIView  ( Flatten to get all child controls of certain type in a uiview ) 
extension Array { func flatten<TResult>(transform: (T) -> TResult?, childArray: (T) -> [T]) -> [TResult] { var result = [TResult]() for ...

1  ¿Cómo hacer que esta clase de lector de TLV se vea mejor y funciona más suave?  ( How to make this tlv reader class look nicer and work smoother ) 
Soy bastante nuevo para Java y estaba tratando de mejorar un poco mis habilidades haciendo un lector de archivos binarios. El elegido fue el tlv formato. He...

1  Actualización de una página web de DRUPAL con contenido basado en texto ingresado  ( Updating a drupal web page with content based on inputted text ) 
La intención es actualizar una página web de drupal existente con contenido basado en texto ingresado en un cuadro de texto. La página existente muestra dat...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos