个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
25
4
我正在尝试在自定义元素中使用继承。
那是我的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<base-element></base-element>
<language-drop-down></language-drop-down>
<script type="module" src="./custom-elements/BaseHTMLElement.js"></script>
<script type="module" src="./custom-elements/language-drop-down/js/LanguageDropDown.js"></script>
</body>
</html>
基本自定义元素
export default class BaseHTMLElement extends HTMLElement {
get currentDocument() { return document.currentScript.ownerDocument };
constructor(params) {
super();
this.params = params;
this.attachShadow({ mode: 'open' });
debugger
// Select the template and clone it. Finally attach the cloned node to the shadowDOM's root.
// Current document needs to be defined to get DOM access to imported HTML
if(this.params && this.params.templateName){
this.template = this.currentDocument.querySelector(this.params.templateName);
this.instance = this.template.content.cloneNode(true);
this.shadowRoot.appendChild(this.instance);
}else{
let div = document.createElement("DIV");
div.innerHTML = "element without template";
this.shadowRoot.appendChild(div);
}
}
connectedCallback() {
this.loadLocalStrings();
}
childrenChangedCallback() {
}
disconnectedCallback() {
}
attributeChangedCallback(attrName, oldVal, newVal) {
}
loadLocalStrings() {
}
}
window.customElements.define('base-element', BaseHTMLElement);
和语言下拉自定义元素
import * as BaseHTMLElement from '../../BaseHTMLElement.js';
class LanguageDropDown extends BaseHTMLElement {
constructor() {
super({
templateName: '#language-drop-down-template'
});
}
connectedCallback() {
let dropdown = this.shadowRoot.querySelectorAll('.dropdown');
$(dropdown).dropdown();
}
childrenChangedCallback() {
}
disconnectedCallback() {
}
attributeChangedCallback(attrName, oldVal, newVal) {
}
};
window.customElements.define('language-drop-down', LanguageDropDown);
及其模板部分
<template id="language-drop-down-template">
<link href="./custom-elements/language-drop-down/css/languageDropDown.css" rel="stylesheet" />
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</template>
<script type="module" src="../BaseHTMLElement.mjs"></script>
<script type="module" src="./js/languageDropDown.mjs"></script>
现在，在 chrome 最新版本中它应该可以在不编译/使用 polyfill 的情况下工作，对吗？我的问题是控制台中的这条消息
未捕获的类型错误:类扩展值 [object Module] 不是构造函数或 null
我不明白我哪里错了...有人有想法吗？
所有这些都是因为我想避免使用 HTML 导入，因为它已被弃用并将在 M73 中删除。
如果我用
<script src="./custom-elements/BaseHTMLElement.js"></script>
<link rel="import" href="./custom-elements/language-drop-down/LanguageDropDown.html">
并删除 导出默认的 BaseHTMLElement ... import * as BaseHTMLElement from '../../BaseHTMLElement.js';
它工作正常!
最佳答案
你的线路
import * as BaseHTMLElement from '../../BaseHTMLElement.js';
错了。该脚本将该类导出为其默认导出。您在此处将所有 导出作为模块 namespace 对象导入 - 当尝试像 class extends 子句中的类一样使用它时，您会得到“ [object Module] 不是构造函数或为 null”。
你应该使用
import {default as BaseHTMLElement} from '../../BaseHTMLElement.js';
或
import BaseHTMLElement from '../../BaseHTMLElement.js';
关于javascript - ES6 自定义元素继承，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53610411/
25
4
0
在 settings.py LANGUAGE_CODE = 'es-mx'或 LANGUAGE_CODE = 'es-ar'不起作用，但是 LANGUAGE_CODE = 'es'或 LANGUAGE
我想知道OpenGL ES 2.0和OpenGL ES 3.0之间有什么区别。 OpenGL ES 3.0的主要优点是什么？ 最佳答案 总体而言，这些变化通过更大的缓冲区、更多的格式、更多的统一等提高
这是我为此端点使用 Postman localhost:9201/response_v2_862875ee3a88a6d09c95bdbda029ce2b/_search 的请求正文 { "_sour
OpenGL ES 2.0 没有 ES 1.0 那样的 GL_POINT_SMOOTH 定义。这意味着我用来绘制圆圈的代码不再有效: glEnable(GL_POINT_SMOOTH); glPoin
我尝试编译这个着色器: varying vec2 TexCoords; varying vec4 color; uniform sampler2D text; uniform vec3 textCol
我是 OpenGL ES 的新手，我使用的是 OpenGL ES 2.0 版本。我可以在片段着色器中使用按位操作(右移、左移)吗？ 最佳答案 OpenGL ES 2.0 没有按位运算符。 ES 3.0
有没有办法只用线画一个三角形？ 我认为GL_TRIANGLES选项可使三角形充满颜色。 最佳答案 使用glPolygonMode(face, model)设置填充模式: glPolygonMode(G
我想用一个包含 yuv 数据的采样器在 opengl es 着色器中将 yuv 转换为 rgb。我的代码如下: 1)我将 yuv 数据发送到纹理: GLES20.glTexImage2D(GLES20
我正在使用这样的域: http://www.domain.com/es/blabla.html 我想更改 .es 的/es 部分并将 URLS 转换为类似以下内容: http://www.domain
有谁知道OpenGL ES是否支持GL_TEXTURE_RECTANGLE？我计划将它用于 2D 图形以支持非二次幂图像。我当前的实现使用 alpha=0 填充的 POT 纹理，对于拉伸(stretc
我需要在具有 PowerVR SGX 硬件的 ARM 设备上实现离屏纹理渲染。 一切都完成了(使用了像素缓冲区和 OpenGL ES 2.0 API)。唯一 Unresolved 问题是速度很慢glR
这是一个奇怪的事情。我有一个片段着色器，据我所知只能返回黑色或红色，但它将像素渲染为白色。如果我删除一根特定的线，它会返回我期望的颜色。它适用于 WebGL，但不适用于 Raspberry Pi 上的
我正在考虑将一些 OpenGL 代码移植到 OpenGL ES 并且想知道这段代码到底做了什么: glPushClientAttrib(GL_CLIENT_VERTEX_ARRAY_BIT) 因为 g
我正在考虑将一些 OpenGL 代码移植到 OpenGL ES 并且想知道这段代码到底做了什么: glPushClientAttrib(GL_CLIENT_VERTEX_ARRAY_BIT) 因为 g
GLSL ES最多可以编译多少个程序？所以假设我创建了 100 个片段着色器，每个都有不同的效果。所以在运行时我编译所有这些并动态地我用 glUseProgram 交换它们。我假设每次我编译一个新的
我正在尝试使用顶点缓冲区对象来绘制圆，并在 iPhone 上的 OpenGL ES 2.0 中启用 GL_POINT_SMOOTH 来绘制点。 我使用以下 ES 1.0 渲染代码在 iPhone 4
为什么在 OpenGL ES 1.x 中缩放(均匀)对象会导致对象变轻？ 更有意义的是它会更暗，因为法线被缩小是否也会使对象更暗？但由于某种原因，物体变轻了。当我放大时，对象变得更暗。在我看来，这应该
我正在尝试通过移植 some code 在 iOS 上的 OpenGL ES 2.0 中获得一些阴影效果。来自标准 GL。部分示例涉及将深度缓冲区复制到纹理: glBindTexture(GL_TEX
所以我正在使用 2D 骨骼动画系统。 有 X 个骨骼，每个骨骼至少有 1 个部分(一个四边形，两个三角形)。平均而言，我可能有 20 块骨头和 30 个部分。大多数骨骼都依赖于父骨骼，骨骼会每帧移动。
我在使用 ES 着色器时遇到了一些晦涩难懂的问题，而且我现在几乎没有想法了。 这是一些代码: .. precision mediump float; .. #define STEP (1f/6f) 5
我是一名优秀的程序员,十分优秀！