現(xiàn)代前端開發(fā)理念及技術

1、現(xiàn)代前端開發(fā)理念及技術主講人：魯存軍前言當前Html頁面開發(fā)面臨的挑戰(zhàn)是頁面的復雜程度越來越高，而開發(fā)周越來越短。開發(fā)需要人員越來越多。在這種情況下需要有一種開發(fā)理念來組織項目開發(fā)，管理團隊。項目組的每個人分工明確。避免重復勞動。軟件工程表明，高度的抽象化、組件化能最大限度的復用現(xiàn)有成果，降低耦合性，避免重復開發(fā)。html本身支持模塊化、組件式開發(fā)比較弱。為了解決這些問題。目前出現(xiàn)了以react，vue， angular為代表的第三方框架。這些框架都存在學習時間長，需要預編譯，和現(xiàn)有html語義不一致。開發(fā)、應用不友好等問題。前言W3C,google等組織在HTML5

2、規(guī)范上提出一系列支持HTML Web組件化開發(fā)的技術。主要包括 html import,html template, custom html elements, shadow dom。這些技術學習成本低、不用預編譯、瀏覽器原生支持，和html現(xiàn)有語義高度一致，使用簡單直接，是現(xiàn)代web compent 開發(fā)的基礎。根本上解決了html代碼難組件化、難于復用的問題。n html import（html導入）n html template（html模板）n custom html elements（自定義html元素）n shadow dom（影子dom）html import（html導入)n

3、iframen ajax$.ajax(“sample.html”,function(rs) $(#id).html=rs.html;n html import html import（html導入)n 零代碼，直接使用 link 標簽，瀏覽器原生支持，容易理解n 可以導入所有html內容，包括 css，script，html element 和其 他引用的內容。導入的css，script能立刻被執(zhí)行。n 配合html template，custom html elements，shadow dom技 術能夠簡單快速完成web組件方式開發(fā)。n 對瀏覽器友好，能對link的內容進行緩存、延時加載等

4、優(yōu)化。html template（html模板）n template是html5新元素，是一個全新定義的瀏覽器可以直接 識別的html標簽n template是一個沒有可視屬性的html標簽。在瀏覽器層次上 和display為none的html元素表現(xiàn)一致。n template是構建可復用的web組件基礎。 使用template技術包 裝公共的html片段、樣式，腳本以達到復用目的。n 通常把template封裝在一個單獨的頁面上，通過l來導入html template（html模板）n template的定義 . . html template（html模板）n template的使用 /取

5、出模板內容var templt_content = document.querySelector(#sample).content; /把模板內容放在需要的地方document.querySelector(#container).appendChild( document.importNode(content, true);custom html elements（自定義html元素）n html5允許我們自定義新的html元素（標簽）。這些新定義的 標簽能直接插入到html文檔上，被瀏覽器直接識別。n 通過自定義html5標簽，我們可以擴充現(xiàn)有html標簽。 組件以標簽的方式來提供。方便重復

6、利用。n 自定義元素可以使用template的方式進行封裝。可以把一個或 多個template內容組合在一起成為新的html元素。custom html elements（自定義html元素）n 定義新html元素/定義新元素，var proto = Object.create(HTMLEtotype);/直接定義元素內容 proto.createdCallback = function() this.innerHTML = . ; /通過模板定義元素proto.createdCallback = function() var templt_content = docume

7、nt.querySelector(#sample).content; this.appendChild(document.importNode(content, true); /注冊元素到document上。document.registerElement(sample, prototype: proto);custom html elements（自定義html元素）n 直接在html文檔上使用 n Jquery等框架上使用$(body).html=“”;$(sample).attr();shadow dom（影子dom）n shadow dom是一種在影子邊界上保護主文檔不受 shadow

8、 DOM 樣式侵襲的技術，也就是說在shadow root上的樣式 不會對外部造成干擾。n 使用shadow dom技術，可以很容易的對不同的組件定義不同 的樣式，樣式完全隔離。組件樣式只針對組件本身，不會影 響其它任何部分。shadow dom（影子dom）n shadow dom定義1、要定義shadow dom首先要定義shadow root2、通過createShadowRoot方法定義shadow root3、shadow root上的內容即shadow dom。 var proto2 = Object.create(HTMLEtotype); proto2.createdCallback = funct