customElements 是 Web Components 規(guī)范下的新 API,可以用來(lái)實(shí)現(xiàn)組件化開(kāi)發(fā)。 如果你的應(yīng)用只用兼容最新的 Chrome 瀏覽器,那么用它來(lái)替代 React 或者 Vue 是一個(gè)不錯(cuò)的選擇。 基本用法 組件聲明在一個(gè) HTML 文件中。組件包括樣式（ Style ）,節(jié)點(diǎn)（ DOM ）和交互邏輯（ Script ）。一個(gè)組件文件的基本結(jié)構(gòu)如下：
DOM 節(jié)點(diǎn)
其中 template 節(jié)點(diǎn)下包含樣式（ Style ）和節(jié)點(diǎn)（ DOM ）。交互邏輯在 script 標(biāo)簽中。 組件文件通過(guò) 的方式引入 HTML 文件中。在 HTML 文件中使用組件的方式就是直接寫(xiě)組件標(biāo)簽。比如： HTML
前端目前比較主流的框架有 react,vuejs,angular 等。 我們通常去搭建組件庫(kù)的時(shí)候都是基于某一種框架去搭建,比如 ant-design 是基于 react 搭建的 UI 組件庫(kù),而 elementUI 則是基于 vuejs 搭建的組件庫(kù)。 雖然目前社區(qū)有相關(guān)工具,提供框架之間的轉(zhuǎn)化服務(wù),比如講 vuejs 組件轉(zhuǎn)化為 react 組件。但是畢竟是不同的框架,有不同的標(biāo)準(zhǔn)。因此框架 api 發(fā)生變動(dòng),那么你就需要重寫(xiě)轉(zhuǎn)化邏輯,顯然是不靈活的,因此我們暫不討論這種情況。作為公司而言,就需要為不同的框架寫(xiě)不同的組件庫(kù),盡管邏輯都是一樣的。 另外如果框架升級(jí),比如從 1.x 升級(jí)到 2.x,那么對(duì)應(yīng)組件庫(kù)就需要升級(jí),如果公司的組件庫(kù)有很多（ vuejs,react,angular 等）,那么這種升級(jí)的概率就會(huì)更大。 什么是 web-component ？ 那么有沒(méi)有更好的方案,一次編寫(xiě),到處使用呢？ 答案就是借助 web component。 Web Components 是一系列加入 w3c 的 HTML 和 DOM 的特性,使得開(kāi)發(fā)者可以創(chuàng)建可復(fù)用的組件。 由于 web components 是由 w3c 組織去推動(dòng)的,因此它很有可能在不久的將來(lái)成為瀏覽器的一個(gè)標(biāo)配。 Web Components 主要由以下四個(gè)部分組成： Custom Elements – 定義新 html 元素的 api Shadow DOM – Encapsulated DOM and styling, with composition HTML Imports – Declarative methods of importing HTML documents into other documents HTML Templates – The element, which allows documents to contain inert chunks of DOM web-component 有什么優(yōu)點(diǎn) 使用 web components 搭建組件庫(kù)能夠帶來(lái)什么好處呢？ 前面說(shuō)了,web components 是 w3c 推動(dòng)的一系列的規(guī)范,它是一個(gè)標(biāo)準(zhǔn)。 如果我們使用 web components 的 api 開(kāi)發(fā)一個(gè)組件,這個(gè)組件是脫離框架存在的,也就是說(shuō) 你可以在任何框架中使用它,當(dāng)然也可以直接在原生 js 中使用。 我們無(wú)須為不同的框架編寫(xiě)不同的組件庫(kù)。 使用 web components 編寫(xiě)的組件庫(kù)的基本使用方法大概是這樣的： 毫不夸張地說(shuō), web components 就是未來(lái)。 但是 web components 的 api 還是相對(duì)復(fù)雜的,因此用原生的 api 開(kāi)發(fā) web components 還是 相對(duì)比較復(fù)雜的,就好像你直接用原生 canvas api 去開(kāi)發(fā)游戲一樣。 下面我們介紹下用于簡(jiǎn)化 web components 開(kāi)發(fā)的庫(kù)。 polymer polymer 是我接觸的第一個(gè) web componment 開(kāi)發(fā)庫(kù),那已經(jīng)是很多年前的往事了。 Build modern apps using web components 更多介紹 polymer stencil stencil 是在 polymer 之后出現(xiàn)的一個(gè)庫(kù)。 第一次接觸時(shí)在 Polymer Summit 2017 的分享上,這里貼下地址 Using Web Components in Ionic - Polymer Summit 2017 。 Stencil is a tool developers use to create Web Components with some powerful features baked in, but it gets out of the way at runtime. 那么 powerful features 具體指的是什么？ Virtual DOM Async rendering (inspired by React Fiber) Reactive data-binding TypeScript JSX 它也是一個(gè)用于生成 web compoennt 的 tool。 不同的是她提供了更多的特性(Reactive data-binding,TypeScript,JSX, virtual dom)以及更強(qiáng)的性能(virtual dom, Async rendering). 細(xì)心的人可能已經(jīng)發(fā)現(xiàn)了,我將 Virtual DOM 既歸為特性,又歸為性能,沒(méi)錯(cuò)！ Virtual DOM 提供了一種到真實(shí) dom 的映射,使得開(kāi)發(fā)者不必關(guān)心真實(shí) dom,從這個(gè)層面講它是特性。 從虛擬 dom 之間的 diff,并將 diff info patch 到 real dom （調(diào)和）的過(guò)程來(lái)看,它是性能。 用 stencil 開(kāi)發(fā) web components 體驗(yàn)大概是這樣的： import { Component, Prop, State } from '@stencil/core'; @Component({ tag: 'my-component', styleUrl: 'my-component.scss' }) export class MyComponent { // Indicate that name should be a property on our new component @Prop() first: string; @Prop() last: string; @State() isVisible: boolean = true; render() { return (
安裝了新的 edge 之后打開(kāi) pdf 默認(rèn)就進(jìn)入 extension://xxxxxxxxxxxx/pdf/viewer.html?fiel=xxx.pdf 這個(gè)擴(kuò)展頁(yè)面(應(yīng)該是整合 Chromium 帶來(lái)的?),原先的 pdf 批注功能都沒(méi)有了,想使用原來(lái)的 pdf 閱讀功能(直接打開(kāi) pdf 文件的形式,不使用擴(kuò)展).
CSS 已經(jīng)寫(xiě)了 p 標(biāo)簽的樣式： .items p { margin: 15px auto }; 需要把 li 標(biāo)簽 里的 p 標(biāo)簽 margin 修改,卻發(fā)現(xiàn)覆蓋不了 ( .items p { margin: 15px auto } ) ： li > p { margin: 10px auto } 請(qǐng)教,有什么方式用 CSS 選擇器,再選中 li 標(biāo)簽下面的 P 標(biāo)簽,并覆蓋 P 標(biāo)簽的 .items p { margin: 15px auto }; 樣式嗎？ (li 下面的標(biāo)簽 p 沒(méi)有 id 可選）
OS X 10.11.3 node 4.3.1 npm 2.14.12 $ sudo npm install -g ionic /usr/local/bin/ionic -> /usr/local/lib/node_modules/ionic/bin/ionic > [email?protected] install /usr/local/lib/node_modules/ionic/node_modules/node-sass > node scripts/install.js shell-init: error retrieving current directory: getcwd: cannot access parent directories: Permission denied path.js:424 var path = (i >= 0) ? arguments[i] : process.cwd(); ^ Error: EACCES: permission denied, uv_cwd at Error (native) at Object.posix.resolve (path.js:424:50) at startup (node.js:91:32) at node.js:962:3 npm ERR! Darwin 15.3.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "ionic" npm ERR! node v4.3.1 npm ERR! npm v2.14.12 npm ERR! code ELIFECYCLE npm ERR! [email?protected] install: `node scripts/install.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email?protected] install script 'node scripts/install.js'. npm ERR! This is most likely a problem with the node-sass package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! node scripts/install.js npm ERR! You can get their info via: npm ERR! npm owner ls node-sass npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! /Users/elviscai/npm-debug.log
分享自己錄制的關(guān)于 Swift 的內(nèi)容 剛剛開(kāi)始錄制,很多地方做的不夠好,制作不好的地方請(qǐng)多多包涵 觀看后可以多多提出建議 以下是目前錄制的內(nèi)容 Swift Parser 3 Swift Parser 2 Swift Parser 1 Swift Parser 0
.png)
大數(shù)據(jù)引擎.png)
大數(shù)據(jù)應(yīng)用.png)
大數(shù)據(jù)底層技術(shù).png)
ForeSpider軟件
.png)
采集服務(wù).png)
軟件學(xué)習(xí).png)
智能分析.png)
特征提取.png)
智能計(jì)算.png)
數(shù)據(jù)可視化.png)
數(shù)據(jù)分析應(yīng)用.png)
系統(tǒng)集成服務(wù).png)
代碼工具.png)
金融方案.png)
制造業(yè)&物流.png)
企業(yè)數(shù)字化.png)
醫(yī)療方案.png)
政務(wù)方案.png)
實(shí)時(shí)監(jiān)測(cè).png)
智能分析.png)
數(shù)據(jù)智能挖掘.png)
全網(wǎng)自動(dòng)采集.png)
場(chǎng)景智慧采集.png)
主題識(shí)別采集
注冊(cè)即送：30天知析標(biāo)訊會(huì)員權(quán)益
022-2345 2937
185 2247 0110
business@forenose.com
客服微信
訂閱號(hào)
服務(wù)號(hào)
022-2345 2937
185 2247 0110（同微信）
business@forenose.com
2779623375
前嗅大數(shù)據(jù)
津公網(wǎng)安備12010102001008號(hào)