为其他网站创建一个javascript小部件

Question

我希望创建一个可以托管在其他网站上的JavaScript"小部件".例如.我想在我的网站上托管javascript代码:

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

(可以把它想象成谷歌分析).

基本上我想通过这个javascript分发数据.但我不确定的是:

• 在为其他站点(跨站点)创建javascript时,规则是否与开发不同
• 是否有任何网站可以解释这些差异？

Answer 1

我会尝试:

1. 使其可配置

   • 加载外部样式表？
   • 我在哪里可以找到我需要的资源？(图片,样式表)
   • 我应该有什么样的布局/尺寸？

   通过这样做,您可以让用户决定他是否希望您的小部件自动加载样式表,或者他是否想要自己托管样式表.如果他这样做,他还可以更新样式以更好地适应窗口小部件所在的页面.

2. 提供一个向导,用于生成要包含在页面上的代码片段
   • 确保即使是技术熟练的用户也可以使用您的小部件
3. 使它重量轻
   • 服务于缩小和压缩的一切
   • 提供缓存标题,电子标记,最后修改以及您可以想到的所有其他有用标题.这既可以减轻服务器的负担,也可以使您的小部件更具响应性.
   • 尽量避免对库的依赖,或者在加载它们之前检查它们是否在使用窗口小部件的页面上加载
4. 警惕冲突
   • Prototype使用$,jQuery也是如此.如果您的小部件依赖于Prototype,并且它托管的页面使用jQuery而没有noConflict-mode,则会出现问题
   • 不要破坏全局命名空间!
     • 如果您不希望任何人与您的窗口小部件进行交互,请将其放在闭包中的自执行函数中,并且根本不创建任何全局变量
     • 如果您希望用户能够与您的窗口小部件进行交互,比如添加事件侦听器等,请声明一个全局变量,让我们将ExampleComWidget称为对象文字并将您的方法放在那里.然后,用户可以进行以下互动:ExampleComWidget.addListener('update', callback);

5. 使用聪明的标记

   • 请务必在类和ID上使用作用域,以尽可能避免冲突

     即如果您公司的名称是example.com,您可以使用以下类: com-ex-widget-newsItem

   • 验证您的标记!您不想破坏用户的网站
   • 语义标记很好,但你可能想要避免<h1>-tags,因为它们在SEO中排名特别高.你可能会使用<h4>和更少.这个子弹可能有点过时了.如果有疑问,使用语义标记比使用语义标记要好得多.
6. 通过插入脚本元素从您的站点获取数据
   • 这是一种确保您绕过同源限制的万无一失的方法.
   • 将onload-listener附加到script元素以了解数据何时就绪,或使用jsonp

Answer 2

您的脚本不应干扰页面的其余部分.

• 保持全局变量的数量最少(一个名称空间对象应该足够)
• 不要无缘无故地向内置对象添加属性
• 不要指望是唯一一个监听window.onload等事件的脚本
• 如果您正在使用for..in循环,请记住其他脚本可能已向Array.prototype添加了内容
• 考虑样式表.HTML元素的默认样式可能已更改.
• 不要无理由地更新脚本,因为您可能会破坏很多站点.