为其他网站创build一个JavaScript小部件

我正在寻找创build一个可以在其他网站上托pipe的JavaScript“小部件”。 例如。 我想在我的网站上托pipeJavaScript代码：

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

（像谷歌分析那样想）。

基本上我想通过这个JavaScript分发数据。 但是我不确定的是：

• 创build另一个网站（跨站点）的JavaScript时，规则是不同的发展？
• 有没有解释这些差异的网站？

Answer 1

我会尽力：

1. 使其可configuration

   • 加载外部样式表？
   • 我在哪里可以find我需要的资源？ （图像，样式表）
   • 我应该有什么布局/大小？

   通过这样做，您可以让用户决定是否希望您的小部件自动加载样式表，或者如果他想自己托pipe它。 如果他这样做，他也可以更新样式，以更好地适应小部件所在的页面。

2. 提供一个向导，用于生成包含在页面上的代码片段
   • 确保即使是中等技术的用户也可以使用您的小部件
3. 使其轻便
   • 把所有的东西缩小和压缩
   • 提供caching标头，电子标签，最后修改和所有其他有用的标题，你可以想到的。 这将减less您的服务器的负载，并使您的小部件更加敏感。
   • 尽量避免依赖于库，或者在加载它们之前检查它们是否被加载到使用该小部件的页面上
4. 警惕冲突
   • Prototype使用$，jQuery也使用$。 如果您的小部件依赖于Prototype，并且其托pipe的页面使用jQuery，而不使用noConflict模式 ， 则会出现问题
   • 不要打破全球命名空间！
     • 如果你不想让任何人与你的widget交互，把它放在一个自动执行的函数中，并且根本不要创build任何全局variables
     • 如果您希望用户能够与您的小部件进行交互，请添加事件侦听器等，声明一个单一的全局variables，让我们说ExampleComWidget作为一个对象字面值，并将您的方法放在那里。 用户可以然后进行交互，如： ExampleComWidget.addListener('update', callback);

5. 使用聪明的标记

   • 请确保在您的类和ID上使用范围，以尽可能避免冲突

     也就是说，如果你的公司的名字是example.com，你可以使用像com-ex-widget-newsItem

   • validation您的标记！ 你不想破坏用户的网站
   • 语义标记是好的，但是你可能想要避免<h1>标记，因为它们在SEO中排名特别高。 你可以通过使用<h4>和更less。 这个子弹可能有点closures。 如果有疑问，使用语义标记要好得多。
6. 通过插入脚本元素从您的网站获取数据
   • 这是确保您避开相同原点限制的简单方法。
   • 将onload-listener附加到脚本元素以知道数据何时准备就绪，或者使用jsonp

Answer 2

我认为这是一个如何实现embedded脚本的优秀写作。 http://alexmarandon.com/articles/web_widget_jquery/

Answer 3

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

• 保持全局数量最less（一个命名空间对象应该足够了）
• 不要无故添加属性到内build对象
• 不要指望成为唯一一个监听诸如window.onload之类的事件的脚本
• 如果您使用for..in循环，请记住其他脚本可能已添加到Array.prototype的东西
• 考虑样式表。 HTML元素的默认样式可能已被更改。
• 不要无缘无故更新您的脚本，因为您冒险破坏了大量网站。