幸运飞艇停吗

ASP源碼.NET源碼PHP源碼JSP源碼JAVA源碼DELPHI源碼PB源碼VC源碼VB源碼Android源碼
當前位置:首頁 >> 網頁制作 >> Javascript教程 >> Atag - Web Components 最佳實踐

Atag - Web Components 最佳實踐(1/12)

來源:網絡整理     時間:2018-11-02     關鍵詞:

幸运飞艇停吗 BENPIANWENZHANGZHUYAOJIESHAOLE" Atag - Web Components ZUIJIASHIJIAN",ZHUYAOSHEJIDAOFANGMIANDENEIRONG,DUIYUJavascriptJIAOCHENGGANXINGQUDETONGXUEKEYICANKAOYIXIA: YINZISHANGYICISHEQUZHONGTANLUNQI Web Components YIJINGKEYIZHUISUDAOSANSINIANQIANLE,BISHI Web Components RENGCHUYUBUWENDINGDECAOANJIEDUAN,Polymer DECHU...

 Atag - Web Components 最佳實踐

YINZI

SHANGYICISHEQUZHONGTANLUNQI Web Components YIJINGKEYIZHUISUDAOSANSINIANQIANLE,BISHI Web Components RENGCHUYUBUWENDINGDECAOANJIEDUAN,Polymer DECHUSHISHIDAJIASIHUKANDAOLEXINYIDAIDEQIANDUANJISHU,DANZHIDAOJINTIAN,ZAIJINNIANWUYUE Google I/O FABU Polymer 3 ZHIHOU, Web Components DEGUIMOHUAYINGYONGCAIKANSICHENGWEILEKENENG。

GUOQUYIDUANSHIJIAN,WOYIZHIZAISHIYONG Web Components GOUJIANTAOBAOXIAOCHENGXUDE JICHUZUJIAN Atag。MDN SHANGDUI Web Components ZHEGEMINGCIDEJIESHISHI

幸运飞艇停吗Web ComponentsSHIYITAOBUTONGDEJISHU,YUNXUNINCHUANGJIANKEZHONGYONGDEDINGZHIYUANSU(TAMENDEGONGNENGFENGZHUANGZAININDEDAIMAZHIWAI)BINGQIEZAININDEwebYINGYONGZHONGSHIYONGTAMEN。

我們從中提取幾個關鍵字:可重用定制元素封裝

這些特性剛好能滿足可復用組件的需求,更重要的是,這是由 W3C 標準提供的,面向標準編程不需要再考慮我使用的技術在未來幾年內會不會過時。目前社區中的框架大都具有傳染性,什么是傳染性?如果你希望使用一個 React 組件,大概率你的整個用戶界面都會使用 React 來開發。而 Custom Elements 不是這樣,因為它替代的是 div,能使用 div 的地方就能使用它,它即插即用:引入一個 js 文件就可以了,直接操作 DOM 使它的性能更高,它并不跟社區主流的框架相克,這樣看來它更適合用來開發底層的基礎組件。

HUIDAOZHENGTI,ZHEPIANWENZHANGDEMUDE,SHIXIWANGZONGJIEZAI Atag KAIFAJIEDUANZHONGSHIYONG Web Components DEJINGYAN,BIMIANDAJIACAIKENG。

JICHUSHESHI

webcomponentsjs

Github DIZHI

幸运飞艇停吗ZHESHIYIXILIE Web Components GUIFANDE polyfill JIHE,RUGUONIDEMUBIAOYONGHUBUSHIZUIXINDEXIANDAILIULANQI,QIANGLIEJIANYIYINRUZHEGEKU。

YINYONGFANGSHI :

幸运飞艇停吗JIANYIZAI html ZHONGSHIYONG script BIAOQIANYINRUTA,ERBUSHITONGGUO npm YINRU,ZHEYANGLIULANQIKEYISHIYONGHUANCUNBANGZHUNIJIANSHAOERCIJIAZAIDEXIAOHAO。

(YIXIAYINRUFANGSHIERXUANYI)

  1. 使用 bundle 整包引入,這樣會引入整個庫中包含的所有 polyfills。
    • 如果你需要按需引入 bundle,這個庫的 bundles 目錄下有一系列預打包好的 bundle 文件,用后綴標明了它包含的功能:ce 表示 custom-elements,sd 表示 shadow-dom,pf 表示環境的 polyfills。
  2. [推薦] 使用 loader 按需引入,引入 webcomponents-loader.js 后,它會根據瀏覽器中的特征按需加載。

幸运飞艇停吗ZHELIYOUBIYAODUIYIXIEMINGCIZUOYIXIEJIESHI:

  • ShadyDOM 這是 Shadow DOM 的 polyfill 的官方名稱,它通過劫持 HTMLElement 的原型方法來實現一些 Shadow DOM 節點擁有的功能,實際上它的原理是把節點添加到了真實(light) DOM 節點之上。
  • ShadyCSS 跟上面一樣,這也是 polyfill 的名稱,它提供了一些 Shadow DOM 節點內樣式的封裝,使得可以在真實 DOM 中模擬 scoped style 的效果。它的原理是通過解析和重寫 style 節點內部的樣式規則來實現的。

XUYAOZHUYIDESHI,ZAIYINRU polyfill DETONGSHI,YOUYIXIEGONGNENGSHIWUFABEIMONIDE,XUYAOWOMENZAISHIYONGDESHIHOUBIKAI,ZAIXIAWENZHONGHUIJIESHAODAO。

NOTE: ZHEGEKUDE 2.1.x BANBENDUI Symbol DE polyfill YOUYIXIEWENTI,ZAIGUANFANGXIUFUZHIQIANJIANYISHIYONG 2.0.4 DEWENDINGBANBEN。

ZHELITIGONGYIFEN alicdn DE bundle URL:

相關圖片

相關文章