了解在 AngularJS 或 JavaScript 中创建小部件的最佳方法

Question

我刚看到一个很酷的网站 tawk, which provides some really great features. In this page，他们通过添加几行 JS 代码解释了一种集成小部件的简单方法：

<!--Start of Tawk.to Script-->
 <script type="text/javascript">
   var Tawk_API=Tawk_API||{}, 
       Tawk_LoadStart=new Date();
   (function(){
     var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
     s1.async=true;
     s1.src='https://embed.tawk.to/58d90960f97dd14875f5a534/default';
     s1.charset='UTF-8';
     s1.setAttribute('crossorigin','*');
     s0.parentNode.insertBefore(s1,s0);
   })();
 </script>
<!--End of Tawk.to Script-->

我 googled 与 AngularJS 或 JavaScript 相同，但没有得到任何东西来创建类似的可用性小部件。有人可以提供任何好的现场示例/教程吗

Answer 1

让我们制作一个非常简单的小部件，以最简单的方式将其包含在您的页面中。

首先创建一个html文件：

<html>
<head>
    <title>Widget Demo</title>
</head>
<body>
    <h1>Widget Demo</h1>
    <p>A clock widget will be inserted next:</p>
    <script src="clock.js"></script>
    <p>And a new one here:</p>
    <script src="clock.js"></script>
</body>
</html>

我们将创建一个时钟小部件，包含它的方法是在您希望它出现的位置添加 <script src="clock.js"></script>。

现在让我们编写小部件代码部分，创建clock.js:

new class {

    constructor() {
        document.write("<div class='Clock'></div>");
        const clocks = document.querySelectorAll(".Clock");
        this.element = clocks[clocks.length - 1];

        this.element.style.width = "200px";
        this.element.style.lineHeight = "80px";
        this.element.style.textAlign = "center";
        this.element.style.fontFamily = "sans-serif";
        this.element.style.fontSize = "35px";
        this.element.style.background = "#ddd";
        this.element.style.borderRadius = "15px";

        this.draw();
        setInterval(this.draw.bind(this), 1000);
    }

    draw() {
        this.element.innerText = new Date().toLocaleTimeString()
    }

}

让我们逐部分检查一下：

new class { <- 每次执行 clock.js 都会创建以下 class 的新对象。

现在，我们需要为我们的小部件创建一个元素并将其放置在页面中：

document.write("<div class='Clock'></div>");
const clocks = document.querySelectorAll(".Clock");
this.element = clocks[clocks.length - 1];

有多种方法可以做到这一点，我只是选择了最短的一种。因此，document.write 将在当前正在执行的脚本标记之后立即插入 html 代码。因此，我要插入将创建 div 元素的文本。为了能够 select 它并从 Javascript 继续使用它，我向它添加了一个 .Clock class，这样我就可以 select 使用 querySelectorAll 的所有时钟.最后，我存储了其中的最后一个，即我刚刚创建的作为我的新对象元素的那个。

这是这个过程中唯一有点棘手的部分，除此之外，没有什么特别的，但让我们继续检查：

    this.element.style.width = "200px";
    this.element.style.lineHeight = "80px";
    this.element.style.textAlign = "center";
    this.element.style.fontFamily = "sans-serif";
    this.element.style.fontSize = "35px";
    this.element.style.background = "#ddd";
    this.element.style.borderRadius = "15px";

只是元素的样式。我们没有 css 文件或 html 文件，因此我们使用 javascript.

创建所有内容

    this.draw();
    setInterval(this.draw.bind(this), 1000);

我将第一次调用绘图函数，然后每秒用当前时间更新时钟的文本：

draw () {
    this.element.innerText = new Date().toLocaleTimeString()
}

而且...就是这样！你不应该加载 css 文件，因为它们会导致 css 与加载它的页面发生冲突，但如果你觉得你真的需要加载 css，你可以通过插入javascript 将一个元素添加到文档中，它将加载。如果你想拥有多个 javascript 文件，你应该将它们捆绑到一个服务器端，但如果你真的需要在客户端做，你可以像你的代码一样做发布：创建一个脚本文件并将其添加到 DOM。还有其他方法，但该方法是最简单的。如果你想从其他文件中包含 html 的某些部分，这也是可能的，但最好还是将所有内容嵌入到一个 .js 中，它会紧凑且加载速度快。

Answer 2

适用于旧版浏览器的 clock.js 版本：

if (!Clock) {
    function Clock() {
        document.write("<div class='Clock'></div>");
        const clocks = document.querySelectorAll(".Clock");
        this.element = clocks[clocks.length - 1];

        this.element.style.width = "200px";
        this.element.style.lineHeight = "80px";
        this.element.style.textAlign = "center";
        this.element.style.fontFamily = "sans-serif";
        this.element.style.fontSize = "35px";
        this.element.style.background = "#ddd";
        this.element.style.borderRadius = "15px";

        this.draw();
        setInterval(this.draw.bind(this), 1000);
    }
    Clock.prototype.draw = function () {
        this.element.innerText = new Date().toLocaleTimeString();
    }
}
new Clock();

添加到这里而不是编辑以前的答案，因为我在尝试编辑时遇到错误。也许 post 太长了？

了解在 AngularJS 或 JavaScript 中创建小部件的最佳方法

Understanding the best approach to create a widget in AngularJS or JavaScript

javascript

widget

angularjs