如何从Javascript初始化Web组件

How to Initialize a Web Component From Javascript?

本文关键字：Web 组件 初始化 Javascript      更新时间：2023-09-26

假设我有以下web组件：

<link rel="import" href="my-dialog.htm">
<my-dialog id='mydialog1' heading="A Dialog">Lorem ipsum</my-dialog>

请参阅此处了解更多信息：http://cbateman.com/blog/a-no-nonsense-guide-to-web-components-part-1-the-specs/

在这里：http://www.revillweb.com/tutorials/web-component-tutorial/

然而，除了属性之外，有时我想用一些具有一系列属性的对象来初始化它，例如：

var obj = { heading: 'hello there', data1: 123, name: 'blabla' };
//^^ this can be any type of data.. think some kind of data model here, and maybe I get this model from the server.

因此，我无法通过属性在我的html中发送上述对象，因为我可能有很多设置和/或稍后可能会从服务器获得它，所以我需要用javascript来完成。

所以我一直在做的是，我只是在对象创建后拍摄它：

// initialize is a function I have inside my web component
$('#mydialog1').get(0).initialize(obj);

^^这是可行的，initialize（..）是我的web组件中的一个函数。。但是：

问题#1我想知道这是否是初始化web组件的正确方法，因为它看起来有点乱

此外，如果在代码中实例化web组件：

$('body').append("<my-dialog id='bla'></my-dialog>");
$('#bla').get(0).initialize(obj);

问题#2我能在第二行假设"bla"是用它的所有方法创建的吗（很有趣，这很有效，但我认为最好等待某种事件或组件准备好的东西）

因为append具有同步（与异步相反）行为，所以它总是可以工作的。

不要用不必要的安全网（事件、轮询…）丢弃你的代码库。

简而言之，执行.append后，元素就出现在DOM上，您可以使用选择器查询它，并对它执行任何您想做的操作。

与几乎所有的JavaScript方法一样，HTML附加是同步的，这意味着当函数返回时，您可以期望构建正确的DOM元素-如果不是这样，函数将接受回调或返回Promise或类似内容。因此，你可以相信这个东西已经创建并初始化它。以这种方式初始化它可能是最好的做法（尽管可能有一种方法可以在一行中完成所有操作）

如果你觉得有必要说服自己，给定的导入方法（任何查阅外部文件的方法）是同步的，而不是异步的，你可以在*nix系统上执行以下操作：

  1. 创建一个命名管道，并为其管道yes。（$ yes >pipe1）
  2. 创建一个适当的HTML（或JS或其他）头，使yes（后面跟着换行符的无限系列y）的输出在语法上适合您的情况
  3. 创建另一个命名管道，然后用管道将头和第一个命名管道（使用cat）连接到它。（$ cat header.htm pipe1 >pipe2.htm）
  4. 使用第二个命名管道的名称运行导入方法。（<link rel="import" href="pipe2.htm">或var x = require("pipe2.js")）

你的UI挂起了吗？如果是，那么它是同步的。它还在继续吗？然后它是异步的。

为什么要通过对象设置属性？我会设置，然后通过这种方式：

document.getElementById("someID").style.width = widthVar; 
document.getElementById("someID").name = nameVar; 
document.getElementById("someID").style.color = colorVar;

而不是在html:中创建

$('body').append("<my-dialog id='bla'></my-dialog>");
$('#bla').get(0).initialize(obj);

你也可以做一些类似的事情：

var myDialog = document.createElement('my-dialog');
myDialog.initialize(obj);
$('body').append(myDialog);

Web组件被设计为通过其属性进行交互，这样它们就可以保持真正的互操作性。

如果您在将组件添加到DOM后获得数据，那么您仍然可以通过以下属性与web组件交互：

假设您的对话框组件已经添加到DOM:中

<my-dialog id='mydialog1' heading="A Dialog">Lorem ipsum</my-dialog>

因此，您可以在以后使用JavaScript:轻松更新此DOM元素属性

document.querySelector('#mydialog1').setAttribute('init-data', JSON.stringify(obj));

然后在web组件中，您可以对属性更改做出如下反应：

//Called when one of this components attributes change
    proto.attributeChangedCallback = function(attrName, oldVal, newVal)     {
        switch (attrName) {
            case "init-data":
                //DO SOMETHING WITH newVal
                var dataObj = JSON.parse(newVal);
                break;
        }
    };

这应该能给你所需要的一切。我强烈建议您使用ES2015编写web组件。代码要干净得多，请参阅本教程：http://www.revillweb.com/tutorials/web-components-with-es2015-es6/

希望这能有所帮助！

相关文章：