为其他网站创建 javascript 小部件答案

【问题标题】：Creating a javascript widget for other sites为其他网站创建 javascript 小部件
【发布时间】：2019-09-24 03:20:29
【问题描述】：

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

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

（把它想象成谷歌分析）。

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

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

【问题讨论】：

标签： javascript

【解决方案1】：

我会尝试：

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

【讨论】：

嗨 PatrikAkerstrand 感谢您的文章，我希望真的能帮助到这个
你能分享任何例子吗

【解决方案2】：

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

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

【讨论】：

【解决方案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");
    }
});

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

你会得到什么：

非常有趣的文章；
sn-ps 的代码和示例；
准备好使用...原版 JS 中的框架，用于创建您自己的小部件；

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

【讨论】：