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

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

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

(像谷歌分析那样想)。

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

  • 创build另一个网站(跨站点)的JavaScript时,规则是不同的发展?
  • 有没有解释这些差异的网站?

我会尽力:

  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

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

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

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