template - Crear un widget javascript para otros sitios

github backbone

Question

Estoy buscando crear un "widget" de javascript que pueda hospedarse en otros sitios. Por ejemplo. Quiero alojar el código de JavaScript en mi sitio:

http://scripts.mysite.com/mywidget.js

(Piense en ello como Google Analytics).

Básicamente quiero distribuir datos a través de este javascript. Pero de lo que no estoy seguro es:

• ¿Son las reglas diferentes para el desarrollo cuando se crea un javascript para otro sitio (sitio cruzado)?
• ¿Hay sitios web que expliquen estas diferencias?

Answer 1

Su secuencia de comandos no debe interferir con el resto de la página.

• Mantenga el número de globales al mínimo (un objeto de espacio de nombres debería ser suficiente)
• No agregue propiedades a los objetos incorporados sin ninguna razón
• No espere ser el único script que escucha eventos como window.onload
• Si usa bucles for..in, tenga en cuenta que otros scripts pueden haber agregado cosas a Array.prototype
• Toma las hojas de estilo en consideración. El estilo predeterminado de los elementos HTML puede haber cambiado.
• No actualice su secuencia de comandos sin una razón, ya que corre el riesgo de romper muchos sitios.

Answer 2

Yo trataría de:

1. Hazlo configurable

   • Cargue hojas de estilo externas?
   • ¿Dónde encuentro los recursos que necesito? (imágenes, hojas de estilo)
   • ¿Qué diseño / tamaño debería tener?

   Al hacer esto, deja que el usuario decida si quiere que su widget cargue automáticamente la hoja de estilo, o si él mismo desea albergarla. Si lo hace, también puede actualizar los estilos para que se ajusten mejor a la página en la que reside el widget.

2. Proporcione un asistente para generar un fragmento de código para incluir en la página
   • Asegura que incluso los usuarios moderadamente técnicos pueden utilizar su widget
3. Hazlo liviano
   • Sirva todo minimizado y comprimido
   • Sirve con encabezados de caché, etiquetas electrónicas, últimos modificados y todos los demás encabezados útiles que se te ocurran. Esto reducirá la carga en sus servidores y hará que su widget sea más receptivo.
   • Intente evitar dependencias en las bibliotecas, o verifique si están cargadas en la página donde se usa el widget antes de cargarlas
4. Tenga cuidado con los conflictos
   • El prototipo usa $, y también lo hace jQuery. Si su widget depende de Prototype, y la página en la que se aloja usa jQuery sin noConflict-mode , surgirán problemas
   • No critiques el espacio de nombres global!
     • Si no desea que nadie interactúe con su widget, colóquelo en una función autoejecutable en un cierre y no cree ninguna variable global en absoluto.
     • Si desea que los usuarios puedan interactuar con su widget, digamos para agregar oyentes de eventos y tal, reclamar una única variable global, digamos ExampleComWidget como un literal de objeto y poner allí sus métodos. El usuario podría interactuar como: ExampleComWidget.addListener(''update'', callback);

5. Use marcado inteligente

   • Asegúrese de usar el alcance en sus clases e ID, para evitar conflictos tanto como sea posible

     Es decir, si el nombre de su compañía es example.com, podría usar clases como: com-ex-widget-newsItem

   • ¡Valida tu marcado! No quieres romper el sitio de un usuario
   • El marcado semántico está bien, pero es posible que desee evitar las etiquetas <h1> , ya que tienen una clasificación especialmente alta en SEO. Probablemente podrías salir <h4> con el uso de <h4> y menos. Esta bala puede estar un poco apagada. En caso de duda, es mucho mejor utilizar el marcado semántico que no.
6. Obtenga datos de su sitio insertando elementos de script
   • Esta es una forma infalible de garantizar que se salven las mismas restricciones de origen.
   • Adjunte un onload-listener al elemento script para saber cuándo están listos los datos, o use jsonp