對W3C標准,對表現與數據分離、Web語義化等有深刻理解


看了好多微博總結了一下概念,首先先介紹一下W3C

啥是W3C不是wc,這個建立於 1994 年的組織,其宗旨是通過促進通用協議的發展並確保其通用型,以激發 web 世界的全部潛能,

萬維網聯盟(World Wide Web Consortium)一個很牛x的組織。

代碼標准 w3c官網也可以借鑒w3school對W3C的理解

W3C的標准不是某一個標准,而是一系列標准的集合。

因為網頁主要由三部分組成:結構(Structure)、表現(Presentation)和行為(Behavior)

所以W3C對應的標准也分三方面結構化標准語言主要包括XHTMLXML表現標准語言主要包括CSS行為標准主要包括對象模型(如W3C DOM)、ECMAScript等。

下面是w3c官網詳細的介紹:讓你更通俗易懂的了解w3c的標准

 

結構標准語言

1.標簽的書寫,需要開始和結束。單便簽除外;
2.塊級元素不能放在p標簽里面。li內可以包含div標簽;
3.塊元素里面可以放在塊和內聯,特殊的 p和 h1—h6里面不要放塊元素,li和div可以放很多。因為這兩個標簽,本身就有容器的屬性;
4.內聯里面要放內聯,不要放塊;
5.結構與表現分離;
6.命名一定要規范;

表現標准語言

css的書寫,首先要盡可能使用外部引入的方式,因為結構層盡可能的減少表現層的代碼過多出現。達到分離的目的。css的選擇器有哪些,那些屬性可以繼承,那些不可以繼承。他們之間的優先級是怎么樣的。怎么用最簡潔的css代碼表達設計者的想法,而不只是實現設計者的想法就沒事了。我們要的是代碼簡潔,代碼過多,反而讓瀏覽器解析很多,浪費時間。

行為標准

主要是javascript中的知識。比如DOM、ECMAScript。使用javascript中的標准,即可。一般對於用戶的行為,或者說頁面上的動態效果的一些特殊實現,我們可以會考慮到使用javascript來進行書寫,但是代碼的可復用性,模塊化。變量,作用域。

 

表現與數據分離:

表現:顧名思義,就是表達出來的現象,在前端來看,就是html+css,就是平常所看到的的網頁的架子; 
數據:一般是從后端數據庫或從哪爬過來的數據,然后在前台顯示出來,即是網頁中各個結構上的內容;

說到這,你會有疑問了,其實就是MVC。0.0

實現表現與數據分離的好處與代價是什么? 
好處:模塊化 –> 容易測試 –> 降低bug頻率; 
壞處:程序結構復雜,比較耗時,上手有學習曲線;

什么樣的情況下需要用到這種思想? 
需要:項目具有明顯的數據需求,比如要與很多Service交互,業務流程復雜,表單很多; 
不需要:項目是典型的靜態信息展示型頁面,或是微型的內部app,或是產品idea驗證時期的MVP;

如何有效的實踐這種思想? 
學習開發 –> 學習測試 –> 學習“測試驅動開發” –> 學習真正的開發; 
不會測試而誇誇其談表現與數據分離的人,你離他們要遠一點,哪天項目搞砸了,別連累到你;

  

web語義化

在廣義方面
對於當前的 Web 而言,HTML 是聯系大多數 Web 資源的紐帶,也是內容的載體。在 Web 被剛剛設計出來的時候,Tim Berners-Lee 可能不會想到它現在會達到的規模以及深入到我們生活的那么多方面。也許起初的想法很簡單:用來發布 Web 內容和資源的索引,方便人們查看。

但是隨着 Web 規模的不斷擴大,信息量之大已經不在人肉處理的范圍之內了。這個時候人們開始用機器來處理 Web 上發布的各種內容,搜索引擎就誕生了。再后來,人們又設計了各種智能程序來對索引好的內容作各種處理和挖掘。所以讓機器能夠更好地讀懂 Web 上發布的各種內容就變得越來越重要。

其實 HTML 在剛開始設計出來的時候就是帶有一定的「語義」的,包括段落、表格、圖片、標題等等,但這些更多地只是方便瀏覽器等 UA 對它們作合適的處理。但逐漸地,機器也要借助 HTML 提供的語義以及自然語言處理的手段來「讀懂」它們從網上獲取的 HTML 文檔,但它們無法讀懂例如「紅色的文字」或者是深度嵌套的表格布局中內容的含義,因為太多已有的內容都是專門為了可視化的瀏覽器設計的。面對這種情況,出現了兩種觀點:

1.我們可以讓機器的理解能力越來越接近人類,人能看懂、聽懂的東西,機器也能理解; 
2.我們應該在發布內容的時候,就用機器可讀的、被廣泛認可的語義信息來描述內容,來降低機器處理 Web 內容的難度(HTML 本身就已經是朝這個方向邁出的一小步了)。

在代碼編譯方面
最初的HTML中如h1~h6、thead、ul、ol等標簽,通過標簽的語義,最初設計的想法,來達到語義化的要求。如標題、表頭、無序、有序列表,搜索引擎很好的利用了這些語義化標簽抓取內容

后來,最初定義的HTML語義化標簽,不足以實現對Web頁面各個部分的功能或位置描述,所以Web前端人員利用HTML標簽的id和class屬性,進一步對HTML標簽進行描述,如對頁腳HTML標簽添加如id=”footer”或者class=”footer”的屬性(值),以“無聲”的方式在不同的前端程序員或者前后端程序員間實現交流。

制定HTML5的W3C組織采用了諸如header、footer、section等語義化標簽,來進行頁面布局的設計想法,彌補了采用id=”header”或者class=”section”等。

更深層次的語義化,是自己在團隊合作的過程中,對於需要聲明的變量和class,id。盡可能使用彼此能理解的英文。這樣減少合作的成本,加快合作的效率。

實現表現與數據分離的優點和缺點:
       優點是: 模塊化 --> 容易測試 --> 降低bug頻率
       缺點是:程序結構復雜,比較耗時,上手有學習曲線
應用場景:
       項目具有明顯的數據需求,比如要與很多Service交互,業務流程復雜,表單很多
非應用場景:
      項目是典型的靜態信息展示型頁面,或是微型的內部app,或是產品idea驗證時期的MVP。

大概就總結這些,稍微了解就好,祝願各位大牛早日財務自由


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM