atitit.atiHtmlUi web組件化方案與規範v1

atitit.atiHtmlUi web組件化方案與規範v1

 

 

1. 如何在現有html 標籤基礎上定義本身的組件1

2. 組件的構成與定義1

3. 組件的加載1

4. 組件css的加載2

5. 操做組件getVal,SetVal2

6. 組件化的本質目的並不必定是要爲了可複用，而是提高可維護性。 不具備複用性的組件」3

 

 

 

將來的WEB開發，將會效仿今天桌面軟件的開發路子，那就是「組件化」。

目前組件化最好的就是React  angular了。。

React  的最大問題是以js爲核心，嵌入html

兒anrular最大問題是囉嗦，繁瑣。

 

1. 如何在現有html 標籤基礎上定義本身的組件

推薦像bootstrap哪些使用oocss的方式，在class屬性上增長一個特殊的classname來代表組件的類型....

也可使用擴展屬性

 

 

2. 組件的構成與定義

Html css構成組件的外觀,js添加act..

 

做者::  ★(attilax)>>>   綽號:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿爾 拉帕努伊 ） 漢字名：艾龍，  EMAIL:1466519819@qq.com

轉載請註明來源： http://blog.csdn.net/attilax

 

 

3. 組件的加載

使用html文件做爲組件，小型組件可使用ajax讀取載入，這樣組件能夠方便dw的設計。。大型組件可使用ajax載入，也能夠iframe方式載入。。

 

4. 組件css的加載

 

5. 操做組件getVal,SetVal

須要當html dom當主要的...

comboxUtil(「#id」).getVal();   相同當特別的的jq,,專門化的jq

 

 

這致使了界面可視化設計極差。。應該以html dom爲基礎，在html的基礎上內嵌js。。Js自己就是代碼，可視化要求相對較低。。Dom 標籤使用經常使用的class 增長一個特色的oocss class來代表一個組件的類型，以及複合組件，或者可增長一個擴展屬性。。

2.3.組件的屬性以js爲主
這帶來查看屬性值的調試的問題，若是能夠在html標籤上擴展屬性，就方便調試，畢竟瀏覽器查看工具能夠一目瞭然的查看屬性的值

 

 

 

Web Components提供了一種組件化的推薦方式，具體來講，就是：

· 經過shadow DOM封裝組件的內部結構

· 經過Custom Element對外提供組件的標籤

· 經過Template Element定義組件的HTML模板

· 經過HTML imports控制組件的依賴加載

這幾種東西，會對現有的各類前端框架/庫產生很巨大的影響：

· 因爲shadow DOM的出現，組件的內部實現隱藏性更好了，每一個組件更加獨立，可是這使得CSS變得很破碎，LESS和SASS這樣的樣式框架面臨重大挑戰。

· 由於組件的隔離，每一個組件內部的DOM複雜度下降了，因此選擇器大多數狀況下能夠限制在組件內部了，常規選擇器的複雜度下降，這會致使人們對jQuery的依賴降低。

· 又由於組件的隔離性增強，致力於創建前端組件化開發方式的各類框架/庫（除Polymer外），在本身的組件實現方式與標準Web Components的結合，組件之間數據模型的同步等問題上，都遇到了不一樣尋常的挑戰。

· HTML imports和新的組件封裝方式的使用，會致使以前經常使用的以JavaScript爲主體的各種組件定義方式處境尷尬，它們的依賴、加載，都面臨了新的挑戰，而因爲全局做用域的弱化，請求的合併變得困可貴多。

 

 

6. 組件化的本質目的並不必定是要爲了可複用，而是提高可維護性。 不具備複用性的組件」

 

 

7.  參考

 

組件化的Web王國 - 博客 - 伯樂在線.htm

 

用JavaScript動態加載CSS和JS文件 - 小炒花生米 - 博客園.html