小编Int*_*lia的帖子

JS对象中的键(字符串)的长度是否有限制?

所以我们有一个案例,我们会有一些JSON,其中key是id(int),值是字符串.但是我们注意到大多数时候,我们根据字符串查找id,所以我们决定将其反转并将字符串作为键,值为id.因为这样而不是遍历每个项目并比较值,我们可以这样做var id = storage[text];.以下是我们所做的例子.

这是旧实现的示例:

var storage = {
  0 : null,
  1 : "Hello",
  2 : "world!",
  3 : "How are you?"
}
Run Code Online (Sandbox Code Playgroud)

以下是新实现的示例:

var storage = {
  "null" : 0,
  "Hello" : 1,
  "world!" : 2,
  "How are you?" : 3
}
Run Code Online (Sandbox Code Playgroud)

我知道现在字符串是键,并且可以为相同的字符串获取相同的id.但是从现在开始字符串可能非常巨大(机会很小,但每个字符串可能最大1KB),JS或Android webview是否存在长度限制对象键?

而且,这种实施有缺点吗?到目前为止我没有发现任何问题,但你永远都不知道.

javascript android javascript-objects android-webview

75
推荐指数
3
解决办法
5万
查看次数

角和微前端

我正在研究如何将巨大的单页整体分解为微前端架构.

想法:

  • 该页面由几个可自主运行的组件组成
  • 每个组件由一个开发团队管理
  • 每个团队都可以更改,更新和部署他们的组件,而不会破坏其他团队的组件
  • 每个团队都选择自己的工具堆栈

原因

要有效地开发大型应用程序,您需要让很多人参与其中.但是,每个应用程序/团队的开发人员数量不能很好地扩展.然而,独立团队并行开发多个独立应用程序可以任意缩放

考虑到这一点,团队必须选择自己的工具堆栈,特别是执行第三方库的独立版本升级(如角度,反应,jquery).如果不是这种情况,框架更新需要与每个组件兼容,然后才能将其部署到生产环境中.

这适用于Angular吗?

虽然需要进行独立的版本升级,但将团队限制在一些支持的框架(Angular,React,Vue,Polymer ......)是合理的,现在我尝试构建一个纯粹由Angular-Apps组成的演示.

然而,即使Angular 5被认为是支持大型多模块应用程序的平台框架,但在同一浏览器窗口中运行几个独立的角度应用程序几乎是不可能的.

我设法通过利用HTML-Imports在单个webapp上引导几个Angular-Apps(不同的版本,每个版本都在自己的服务器上托管).但是,有几个global依赖项需要在应用程序之间共享

  • zone.js只能启动一次
  • 路由需要URL更改
  • 浏览器 - 像cookies,sessionstorage等...

网上有几篇关于如何引导多个角度模块的文章,但它们都引用同一个核心应用程序中的多个模块,这反过来意味着它们都在相同的框架版本上运行,并且更新意味着你必须重建和部署整个巨石.

除了" iframes" 之外是否有任何解决方案可以在同一个页面上运行多个Angular(5)应用程序?

html javascript microservices angular

58
推荐指数
2
解决办法
1万
查看次数

如何从服务器推送通知到Android手机

我对推送通知一无所知.我在尝试学习.但我无法理解.我在服务器系统中有一个表mysql数据库.如果表中的任何更改意味着我想显示为Android手机的通知请给我建议给我

android push-notification

30
推荐指数
4
解决办法
5万
查看次数

如何在连接所有子自定义元素时使用'connectedCallback'

我正在使用Web Components v1.

假设有两个自定义元素:

家长element.html

<template id="parent-element">
    <child-element></child-element>
</template>
Run Code Online (Sandbox Code Playgroud)

儿童element.html

<template id="child-element">
<!-- some markup here -->
</template>
Run Code Online (Sandbox Code Playgroud)

我试图在连接时使用connectedCallbackin parent-element初始化整个父/子DOM结构,这需要与定义的方法进行交互child-element.

但是,似乎child-element没有正确定义当时connectedCallback被解雇customElement:

家长element.js

class parent_element extends HTMLElement {
    connectedCallback() {
        //shadow root created from template in constructor previously
        var el = this.shadow_root.querySelector("child-element");
        el.my_method();
    }
}
Run Code Online (Sandbox Code Playgroud)

这不起作用,因为它el是一个HTMLElement而不是child-element预期的.

parent-element的模板中的所有子自定义元素都已正确附加后,我需要回调.

这个问题的解决方案似乎不起作用; this.parentElementnull里面child-element connectedCallback().

ilmiont

html javascript web-component native-web-component

15
推荐指数
3
解决办法
1562
查看次数

CSS:如何在 Shadow DOM 根中定位 ::slotted 兄弟姐妹?

我知道规范目前只允许 ::slotted 的复合选择器,即::slotted(my-first + my-second)不允许,但这样的事情应该工作吗?

::slotted(x-first) + ::slotted(x-second) { /* css */ }
Run Code Online (Sandbox Code Playgroud)

有什么方法可以定位开槽的兄弟姐妹(除了使用全局 css)?如果没有,我会在哪里提交这样的请求?谢谢。

css web-component shadow-dom native-web-component

13
推荐指数
2
解决办法
7533
查看次数

Vue Custom Element无法在Dist中构建独立的JS文件

我按照说明在这里注册和使用自定义元素:

https://alligator.io/vuejs/custom-elements/

我正在使用Vue的标准Webpack模板.

我跑的时候

npm run build
Run Code Online (Sandbox Code Playgroud)

我希望在dist目录中获得一个名为element.js的打包Web组件文件.但是没有任何事情发生.有谁知道是否需要额外的步骤?文档没有说清楚.

这在我的项目中产生了以下文件:

<template>
  <div id="app">
    <example myProp="I can pass props!"></example>

  </div>
</template>

<script>
import Example from './components/example.Vue'

export default {
  name: 'app',
  components: {
    Example
  }
}
</script>

<style>
</style>
Run Code Online (Sandbox Code Playgroud)

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import vueCustomElement from 'vue-custom-element'

Vue.config.productionTip = false

Vue.use(vueCustomElement);
/* eslint-disable no-new …
Run Code Online (Sandbox Code Playgroud)

javascript webpack vue.js

10
推荐指数
1
解决办法
925
查看次数

MariaDB/MySql:在 CREATE 上设置 CURRENT_TIMESTAMP 并在 UPDATE 上更改注释

我已经有几年没有使用 MySQL 了,当我创建一个新表时,它做了一些我意想不到的事情。我正在使用MariaDB v5.5.60-MariaDB

我需要创建一个既有created列又有updated列的表。

created只需要在创建行时将列设置为 CURRENT_TIMESTAMP,然后除非我显式更改它,否则永远不会更改。

我需要updated在创建行和更改行时将列设置为 CURRENT_TIMESTAMP。

如果我执行以下操作:

CREATE TABLE user_prefs (
  id BIGINT UNSIGNED NOT NULL AUTO_INCREMENT UNIQUE,
  user VARCHAR(255) NOT NULL,
  provider VARCHAR(255) NOT NULL,
  pref VARCHAR(128) NOT NULL,
  jsondata LONGTEXT,
  created timestamp NOT NULL,
  modified timestamp NOT NULL,
  PRIMARY KEY (id),
  UNIQUE INDEX id_UNIQUE (id ASC));
Run Code Online (Sandbox Code Playgroud)

然后created将该列设置为:
DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP

并且该modified列设置为:
DEFAULT '0000-00-00 00:00:00'

如果我尝试这个:

CREATE TABLE user_prefs (
  id …
Run Code Online (Sandbox Code Playgroud)

mysql mariadb

10
推荐指数
1
解决办法
1万
查看次数

Mixins作为Polymer 2.0中的实用程序库

我正在使用Polymer 2.0制作的Web应用程序项目,所有Custom元素都扩展了一些Mixins.其中一些Mixins只是为自定义元素提供实用程序功能,就像Date Time Utility函数或任何与Math相关的函数一样.我的问题是是否使用mixins并将它们扩展到自定义元素或只是将它们包装在普通的java脚本文件中,并在index.html或应用程序的入口点加载该java脚本文件,并像我们使用lodashjs一样用作全局范围underscore.js.

我用Mixins找到的问题是它总是被应用到每个自定义元素类对象的原型链,所以我最终得到了与我的应用程序的每个自定义元素相同的实用程序方法.

请建议我在Polymer相关应用程序中使用Utilities的最佳方法.

javascript polymer polymer-2.x

7
推荐指数
1
解决办法
274
查看次数

是否可以将聚合物和砖一起使用?

Brick提供了一些很棒的组件,Polymer提供了其他组件.技术上可以一起使用它们吗?

html polymer mozilla-brick

6
推荐指数
1
解决办法
926
查看次数

覆盖Web组件中的外部定义的样式

我正在迈入Web组件的第一步,而未使用任何第三方库(例如Polymer)。主要卖点之一是Web组件样式与其他地方定义的样式分开,从而允许在类似于沙盒的环境中对组件的shadow-DOM进行样式设置。

我遇到的问题是样式如何通过插槽元素级联。由于带槽的元素不是影子DOM的一部分,因此只能用::slotted()组件模板中的选择器对其进行定位。这很棒,但是几乎不可能保证Web组件在所有上下文中都能正确显示,因为外部定义的样式还具有无可比拟的专一性*应用于空位元素。

*此外!important

这个问题可以归结为:

customElements.define("my-nav",
  class extends HTMLElement {
    constructor() {
      super();

      const template = document.querySelector("template#my-nav").content;
      this.attachShadow({ mode: "open" })
        .appendChild(template.cloneNode(true));
    }
  }
);
Run Code Online (Sandbox Code Playgroud)
a {
  color: red; /*  >:(  */
}
Run Code Online (Sandbox Code Playgroud)
<template id="my-nav">
  <style>
    .links-container ::slotted(a) {
      color: lime;
      font-weight: bold;
      margin-right: 20px;
    }
  </style>

  <div class="links-container">
    <slot name="links"></slot>
  </div>
</template>

<p>I want these links to be green:</p>
<my-nav>
  <a href="#" slot="links">Link 1</a>
  <a href="#" slot="links">Link 2</a>
  <a href="#" slot="links">Link 3</a>
</my-nav> …
Run Code Online (Sandbox Code Playgroud)

javascript html5 web-component shadow-dom native-web-component

6
推荐指数
1
解决办法
379
查看次数