const div = document.createElement('div');
  
  
  
  
div.className = "a";
  
  
  
  

  
  
  
  
const img = document.createElement('img');
  
  
  
  
img.src="./b.jpg"
  
  
  
  

  
  
  
  
div.appendChild(img);
 
 
 
 

兩者并沒有區(qū)別。

所以，html 并沒有增加功能，它只是簡化了 dom 操作，這種明顯就是一種門面模式，不過是通過 DSL 的方式。

DSL 是指領(lǐng)域特定語言，設計一種語法來簡化邏輯的描述，然后通過解析該語言來專程描述的目標。瀏覽器就是通過解析 html 來構(gòu)建 dom 樹的。

簡化樣式描述的門面：css

css 同樣也是一種 dsl，為了簡化樣式信息的描述。

比如直接給 dom 添加樣式會比較麻煩：

 
 
 
 

  
  
  
  
const div = document.querySelector('.a');
  
  
  
  
div.style.backgroundColor = 'blue';
  
  
  
  

  
  
  
  
const img = div.querySelector('img');
  
  
  
  
img.style.border = '2px';
 
 
 
 

而通過 css 來添加就簡單很多：

 
 
 
 

  
  
  
  
.a {
  
  
  
  
    background-color: blue;
  
  
  
  
}
  
  
  
  
.a img {
  
  
  
  
    border: 2px;
  
  
  
  
}
 
 
 
 

css 有增加新功能么?沒有，它只是使得樣式描述更簡單，同樣，css 這種 dsl 也是由瀏覽器來解析的。

vue 的 template

我們知道操作視圖基于 dom api 就足夠了，前端框架就是把數(shù)據(jù)映射到視圖，而映射的目標也是 dom api(當然，中間有了一層虛擬 dom，那么 api 也是先創(chuàng)建虛擬 dom)，但是 dsl 就沒必要選擇用 html 了，完全可以用其他的更適合自己特點的方式來描述。

vue 選擇了 template:

如果直接用 api 描述視圖，不夠直觀：

 
 
 
 

  
  
  
  
render: function (createElement) {
  
  
  
  
  return createElement('h1', this.blogTitle)
  
  
  
  
}
 
 
 
 

vue 選擇了 template 的方式，類似 html：

 
 
 
 

  
  
  
  
{{ blogTitle }}
 
 
 
 

這樣并沒有增加功能，只是讓開發(fā)者使用框架描述視圖的時候更簡單，而且 vue 還支持過濾器、指令、插值語法等功能。

但是引入了 template 的 dsl，也就需要編譯了，不像 html 是瀏覽器解析的，這個自定義 dsl 需要用自己的編譯器來解析，所以 vue 內(nèi)部有一個 template compiler 來把模版轉(zhuǎn)為 render 函數(shù)。

react 的 jsx

react 同樣也是要把對視圖的描述映射成真正的 dom(中間有層虛擬 dom)，首先會提供 api 的方式，但是為了簡化使用，會提供了描述視圖的方式：jsx。

直接用 api 的方式比較麻煩：

 
 
 
 

  
  
  
  
const title = React.createElement("h1", {className: "main"}, "Hello React");
 
 
 
 

jsx 的方式就簡單很多：

 
 
 
 

  
  
  
  
const title = (
  
  
  
  
  
Hello React
  
  
  
  
);
 
 
 
 

vue 和 react 選擇了不同的 dsl。我們知道 dsl 是需要編譯成具體的 api 調(diào)用的，vue 是在框架內(nèi)部實現(xiàn)的，而 react 的 jsx 則是 babel 實現(xiàn)(因為是 js 語法的擴充)。

可以看到不管是 vue 的 template，還是 react 的 jsx 都沒有增加新的功能，增加這樣一層 dsl 只是為了簡化開發(fā)者對視圖的描述，和 html 的設計目的一致，都是門面模式的思想。

babel 的 preset

babel 是做代碼轉(zhuǎn)換的，把 es next 的語法，轉(zhuǎn)成目標環(huán)境支持的 js 語法，具體完成轉(zhuǎn)換的是一個個插件。但是如果開發(fā)者直接去指定插件太過麻煩，比如 es2015 就有一系列插件，而 es2016 又有一堆，如果由開發(fā)者去指定，那使用起來太過復雜。所以 babel 設計出了 preset。

babel6 的 preset 有 preset-es2015、 preset-es2016 等，他們內(nèi)部就是一系列插件。而 babel7 進一步簡化成了 preset-env，只要通過 targets 指定目標環(huán)境，那么就會自動選出一系列插件來使用。

preset 有實現(xiàn)什么新功能么?沒有，最終轉(zhuǎn)換還是由插件來做的。但是 preset 簡化了開發(fā)者使用 babel 的成本，所以這也是一種典型的門面模式。

總結(jié)

門面模式是軟件領(lǐng)域特別常見的一種模式，就是當暴露給客戶端的子系統(tǒng)特別復雜的時候，通過增加一層門面，由他去和具體的子系統(tǒng)打交道，隔離復雜度，讓軟件的使用變得簡單。通過隔離復雜度，讓復雜度得到很好的治理，不然的話可能會隨著迭代而使用起來越來越復雜。

前端領(lǐng)域常見的 html、css、還有 vue 的 tempalte 以及 react 的 jsx 都是 dsl，dsl 的目的就是為了簡化調(diào)用，是門面模式的典型實現(xiàn)。(template 和 jsx 要由自己做編譯，而 html、css 是瀏覽器做的編譯)。

此外，babel 和 eslint 等的 preset 也是為了簡化使用成本而引入的，不然用戶就要直接面對各種復雜的插件配置。

門面模式并沒有引入新的功能實現(xiàn)，只是為了簡化系統(tǒng)使用成本而引入的一個入口。如果遇到系統(tǒng)使用特別復雜的時候，不妨通過引入一個門面(封裝成 api 或者 dsl 的形式)來簡化吧。