Question

我希望创建一个可以托管在其他网站上的javascript“小部件”。例如。我想在我的网站上托管javascript代码：

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

（想象一下Google Analytics）。

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

为其他网站（跨网站）创建javascript时，规则是否与开发不同
是否有任何网站可以解释这些差异？

Answer 1

我会尝试：

使其可配置
- 加载外部样式表？
- 我在哪里可以找到我需要的资源？（图片，样式表）
- 我应该有什么布局/尺寸？
通过这样做，您可以让用户决定他是否希望您的小部件自动加载样式表，或者他是否想要自己托管样式表。如果他这样做，他还可以更新样式以更好地适应窗口小部件所在的页面。
提供向导，用于生成要包含在网页上的代码段
- 确保即使是技术熟练的用户也可以使用您的小部件
使其重量轻
- 服务于缩小和压缩的所有内容
- 提供缓存标题，电子标记，最后修改以及您可以想到的所有其他有用标题。这既可以减轻服务器的负担，也可以使您的小部件更具响应性。
- 尝试避免对库的依赖，或在加载它们之前检查它们是否在使用该窗口小部件的页面上加载
警惕冲突
- Prototype使用$，jQuery也是如此。如果您的小部件依赖于Prototype，并且它托管的页面使用不带noConflict-mode的jQuery，则会出现问题
- 不要破坏全局命名空间！
  - 如果您不希望任何人与您的窗口小部件进行交互，请将其置于闭包中的自执行函数中，并且不要创建任何全局变量
  - 如果您希望用户能够与您的窗口小部件进行交互，比如添加事件侦听器等，请声明一个全局变量，让我们说ExampleComWidget作为对象文字并将您的方法放在那里。然后，用户可以像：ExampleComWidget.addListener('update', callback);
使用聪明的标记
- 请务必在类和ID上使用作用域，以尽可能避免冲突
  
  即。如果您公司的名称是example.com，则可以使用以下类：com-ex-widget-newsItem
- 验证您的加价！您不想破坏用户的网站
- 语义标记很好，但您可能希望避免<h1> - 标记，因为它们在SEO中的排名特别高。你可能会使用<h4>而不是更少。这个子弹可能有点过时了。如果有疑问，使用语义标记要好得多。
通过插入脚本元素从您的网站获取数据
- 这是一种确保您绕过同源限制的万无一失的方法。
- 将onload-listener附加到script元素以了解数据何时就绪，或使用jsonp

Answer 2

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

将全局数保持为a minimum（一个 namespace 对象应该够了）
不要向内置添加属性无缘无故的对象
不要指望是唯一的剧本听取window.onload等事件。
如果您正在使用for ..in循环，请记住其他脚本可能已添加东西到Array.prototype
考虑样式表。 HTML元素的默认样式可能已更改。
不要无理由地更新您的脚本，因为您可能会破坏很多网站。

Answer 3

PatrikAkerstrand所说的完全是100％正确的。

我想在此处添加的是Vanilla JS中的框架，可以在考虑，完善和测试所有内容的同时，节省您大量的时间和精力来实现它。剩下的就是定义自己的小部件并使用它们。

这是一个看起来像的例子。

小部件代码

// inside a js file of a widget class
(function () {
    var Module_Path = ["WidgetsLib", "a1", "Button"];
    var curr = this;
    Module_Path.forEach(function(i){if (curr[i] == null) {addChildToTree(curr, i, {})} curr = curr[i]});

    specialize_with(curr, {
        CSS_Literal: `
            .{{WIDGET_CLASS_ID}}_Something {
                color: hsl(0, 0%, 20%);
            }
        `,
        HTML_Literal: `
            <div onclick="{{WIDGET_INSTANCE}}.onclick(event)"
                class="{{WIDGET_CLASS_ID}}_Something"
            >
            SOME SUPER COOL WIDGET
            </div>
        `,
        new: typical_widget_new,
    });
})();

HTML：

<div id="w1" style="background-color: hsl(200, 50%, 50%);"></div>

<script src="WidgetsLib/a1/Button/js"></script>

用户JavaScript代码：

var b1 = WidgetsLib.a1.Button.new("w1", {
    onclick: function(ev) {
        ev.target.style.color = "#ffff00";
        console.log("====== HERE");
    }
});

请下载并在https://github.com/latitov/JS_HTML_Widgets浏览器中打开Widget_v2.md.html。

您会得到什么：

关于此的非常有趣的文章；
代码片段和示例；
准备好使用...在香草JS中的框架，以创建自己的小部件；

并享受轻松地创建自己任意复杂的可重用小部件！

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

3 个答案: