【shadow dom入UI】web components思想如何應用於實際專案

回顧

經過昨天的優化處理（【前端優化之拆分CSS】前端三劍客的分分合合），我們在UI一塊做了幾個關鍵動作：

① CSS入UI

② CSS作為元件的一個節點而存在，並且會被“格式化”，即選擇器帶id字首，形成的元件如圖所示：

這樣做基本可以規避css汙染的問題，解決絕大多數問題，但是更優的方案總是存在，比如web components中的shadow dom！

javascript的元件基本是不可重用的，幾個核心原因是：

① 元件例項與例項之間的html、css、Javascript很容易互相汙染（id汙染、class汙染、js變數汙染......）
② 一個元件依賴於HTML、CSS、Javascript，而三者之間是分離的，而元件內部控制於js，更改後外部可能出問題
通過昨天的處理，我們將一個元件所用到的全部合到了一起，卻又分離成了三個檔案：

① ui.js
② ui.html
③ ui.css

這種處理一方面透露著解耦的思想，另一方面體現著解依賴的想法，在這個基礎上想引入shadow dom技術，變得非常輕易。

什麼是shadow dom

shadow dom是一種瀏覽器行為，他允許在document文件中渲染時插入一個獨立的dom子樹，但這個dom樹與主dom樹完全分離的，不會互相影響。
從一張圖來看：

shadow dom事實上也是一個文件碎片，我們甚至可以將之作為jQuery包裝物件處理：

存在在shadow dom中的元素是不可被選擇器找到的，比如這種做法會徒勞無功：

$('沙箱中的一個元素') => []

另一個比較重要的差別是，外部為元件定義的事件，比如click事件的e.target便只能是元件div了，也就是這個元件事實上只有一層，一個標籤，內部的結構不會被暴露！

引入框架

原來我們的元件是這樣的結構：

<div id="ui-view-16" style="">
  <div class="cm-num-adjust">
    <div class="cm-num-adjust">
      <span class="cm-adjust-minus js_num_minus disabled "></span><span class="cm-adjust-view js_cur_num "
        contenteditable="true">1個</span> <span class="cm-adjust-plus js_num_plus "></span>
    </div>
  </div>
</div>

框架會主動建立一個包裹層，包裹層內才是元件dom，經過昨天的處理，元件變成了這樣：

<!--元件生成的包裹層-->
<div id="wrapper" >
  <!--元件格式化後的樣式-->
  <style>
  #wrapper { ......}
  </style>

  <!--元件真實的dom結構-->
  <div></div>
<div>

如果這裡我們使用shadow dom技術的話，整個結構會變成這樣：

<div id="wrapper">
  #shadow-root
  <style></style>
  <div>
  </div>
<div>

元件自動建立的dom包裹層，裡面神馬都沒有了，因為事件代理是進不去的，所以開啟shadow dom方式的元件需要將事件繫結至shadow節點

當然，並不是所有瀏覽器都支援shadow dom技術，當此之時，也不是所有的shadow dom都合適；所以UI基類需要做一個開關，最大限度的避免生產風險，而又能引入新的技術

//與模板對應的css檔案，預設不存在，需要各個元件複寫
  this.uiStyle = null;

  //儲存樣式格式化結束的字串
  //      this.formateStyle = null;

  //儲存shadow dom的引用，用於事件代理
 8   this.shadowDom = null;
 9   this.shadowStyle = null;
10   this.shadowRoot = null;
11 
12   //框架統一開關，是否開啟shadow dom
13   this.openShadowDom = true;

//      this.openShadowDom = false;

  //不支援建立介面便關閉，也許有其它因素導致，這個後期已介面放出
  if (!this.wrapper[0].createShadowRoot) {
    this.openShadowDom = false;
  }

基類會多出幾個屬性處理，shadow邏輯，然後在建立UI dom節點時候需要進行特殊處理

createRoot: function (html) {

  this.$el = $('<div class="view" style="display: none; " id="' + this.id + '"></div>');
  var style = this.getInlineStyle();

  //如果存在shadow dom介面，並且框架開啟了shadow dom
  if (this.openShadowDom) {
    //在框架建立的子元素層面建立沙箱
    this.shadowRoot = $(this.$el[0].createShadowRoot());

    this.shadowDom = $('<div class="js_shadow_root">' + html + '</div>');
    this.shadowStyle = $(style);

    //開啟shadow dom情況下，元件需要被包裹起來
    this.shadowRoot.append(this.shadowStyle);
    this.shadowRoot.append(this.shadowDom);

  } else {

    this.$el.html(style + html);
  }
},

在開啟shadow dom功能的情況下，便會為根節點建立shadow root，將style節點與html節點裝載進去，這個時候UI結構基本出來了，事件便繫結至shadow root即可，這裡是全部程式碼：

define([], function () {

  var getBiggerzIndex = (function () {
    var index = 3000;
    return function (level) {
      return level + (++index);
    };
  })();

  return _.inherit({
    propertys: function () {
      //模板狀態
      this.wrapper = $('body');
      this.id = _.uniqueId('ui-view-');

      this.template = '';

      //與模板對應的css檔案，預設不存在，需要各個元件複寫
      this.uiStyle = null;

      //儲存樣式格式化結束的字串
      //      this.formateStyle = null;

      //儲存shadow dom的引用，用於事件代理
      this.shadowDom = null;
      this.shadowStyle = null;
      this.shadowRoot = null;

      //框架統一開關，是否開啟shadow dom
      this.openShadowDom = true;

//      this.openShadowDom = false;

      //不支援建立介面便關閉，也許有其它因素導致，這個後期已介面放出
      if (!this.wrapper[0].createShadowRoot) {
        this.openShadowDom = false;
      }

      this.datamodel = {};
      this.events = {};

      //自定義事件
      //此處需要注意mask 繫結事件前後問題，考慮scroll.radio外掛型別的mask應用，考慮元件通訊
      this.eventArr = {};

      //初始狀態為例項化
      this.status = 'init';

      this.animateShowAction = null;
      this.animateHideAction = null;

      //      this.availableFn = function () { }

    },

    on: function (type, fn, insert) {
      if (!this.eventArr[type]) this.eventArr[type] = [];

      //頭部插入
      if (insert) {
        this.eventArr[type].splice(0, 0, fn);
      } else {
        this.eventArr[type].push(fn);
      }
    },

    off: function (type, fn) {
      if (!this.eventArr[type]) return;
      if (fn) {
        this.eventArr[type] = _.without(this.eventArr[type], fn);
      } else {
        this.eventArr[type] = [];
      }
    },

    trigger: function (type) {
      var _slice = Array.prototype.slice;
      var args = _slice.call(arguments, 1);
      var events = this.eventArr;
      var results = [], i, l;

      if (events[type]) {
        for (i = 0, l = events[type].length; i < l; i++) {
          results[results.length] = events[type][i].apply(this, args);
        }
      }
      return results;
    },

    bindEvents: function () {
      var events = this.events;
      var el = this.$el;
      if (this.openShadowDom) el = this.shadowRoot;

      if (!(events || (events = _.result(this, 'events')))) return this;
      this.unBindEvents();

      // 解析event引數的正則
      var delegateEventSplitter = /^(\S+)\s*(.*)$/;
      var key, method, match, eventName, selector;

      // 做簡單的字串資料解析
      for (key in events) {
        method = events[key];
        if (!_.isFunction(method)) method = this[events[key]];
        if (!method) continue;

        match = key.match(delegateEventSplitter);
        eventName = match[1], selector = match[2];
        method = _.bind(method, this);
        eventName += '.delegateUIEvents' + this.id;

        if (selector === '') {
          el.on(eventName, method);
        } else {
          el.on(eventName, selector, method);
        }
      }

      return this;
    },

    unBindEvents: function () {
      var el = this.$el;
      if (this.openShadowDom) el = this.shadowRoot;

      el.off('.delegateUIEvents' + this.id);
      return this;
    },

    createRoot: function (html) {

      this.$el = $('<div class="view" style="display: none; " id="' + this.id + '"></div>');
      var style = this.getInlineStyle();

      //如果存在shadow dom介面，並且框架開啟了shadow dom
      if (this.openShadowDom) {
        //在框架建立的子元素層面建立沙箱
        this.shadowRoot = $(this.$el[0].createShadowRoot());

        this.shadowDom = $('<div class="js_shadow_root">' + html + '</div>');
        this.shadowStyle = $(style);

        //開啟shadow dom情況下，元件需要被包裹起來
        this.shadowRoot.append(this.shadowStyle);
        this.shadowRoot.append(this.shadowDom);

      } else {

        this.$el.html(style + html);
      }
    },

    getInlineStyle: function () {
      //如果不存在便不予理睬
      if (!_.isString(this.uiStyle)) return null;
      var style = this.uiStyle, uid = this.id;

      //在此處理shadow dom的樣式，直接返回處理結束後的html字串
      if (!this.openShadowDom) {
        //建立定製化的style字串，會模擬一個沙箱，該元件樣式不會對外影響，實現原理便是加上#id 字首
        style = style.replace(/(\s*)([^\{\}]+)\{/g, function (a, b, c) {
          return b + c.replace(/([^,]+)/g, '#' + uid + ' $1') + '{';
        });
      }

      style = '<style >' + style + '</style>';
      this.formateStyle = style;
      return style;
    },

    render: function (callback) {
      var data = this.getViewModel() || {};

      var html = this.template;
      if (!this.template) return '';
      if (data) {
        html = _.template(this.template)(data);
      }

      typeof callback == 'function' && callback.call(this);
      return html;
    },

    //重新整理根據傳入引數判斷是否走onCreate事件
    //這裡原來的dom會被移除，事件會全部丟失 需要修復*****************************
    refresh: function (needEvent) {
      var html = '';
      this.resetPropery();
      //如果開啟了沙箱便只能重新渲染了
      if (needEvent) {
        this.create();
      } else {
        html = this.render();
        if (this.openShadowDom) {
          //將解析後的style與html字串裝載進沙箱
          //*************
          this.shadowDom.html(html);
        } else {
          this.$el.html(this.formateStyle + html);
        }
      }
      this.initElement();
      if (this.status != 'hide') this.show();
      this.trigger('onRefresh');
    },

    _isAddEvent: function (key) {
      if (key == 'onCreate' || key == 'onPreShow' || key == 'onShow' || key == 'onRefresh' || key == 'onHide')
        return true;
      return false;
    },

    setOption: function (options) {
      //這裡可以寫成switch，開始沒有想到有這麼多分支
      for (var k in options) {
        if (k == 'datamodel' || k == 'events') {
          _.extend(this[k], options[k]);
          continue;
        } else if (this._isAddEvent(k)) {
          this.on(k, options[k])
          continue;
        }
        this[k] = options[k];
      }
      //      _.extend(this, options);
    },

    initialize: function (opts) {
      this.propertys();
      this.setOption(opts);
      this.resetPropery();
      //新增系統級別事件
      this.addEvent();
      //開始建立dom
      this.create();
      this.addSysEvents();

      this.initElement();

    },

    //內部重置event，加入全域性控制類事件
    addSysEvents: function () {
      if (typeof this.availableFn != 'function') return;
      this.removeSysEvents();
      this.$el.on('click.system' + this.id, $.proxy(function (e) {
        if (!this.availableFn()) {
          e.preventDefault();
          e.stopImmediatePropagation && e.stopImmediatePropagation();
        }
      }, this));
    },

    removeSysEvents: function () {
      this.$el.off('.system' + this.id);
    },

    $: function (selector) {
      return this.openShadowDom ? this.shadowDom.find(selector) : this.$el.find(selector);
    },

    //提供屬性重置功能，對屬性做檢查
    resetPropery: function () {
    },

    //各事件註冊點，用於被繼承
    addEvent: function () {
    },

    create: function () {
      this.trigger('onPreCreate');
      this.createRoot(this.render());

      this.status = 'create';
      this.trigger('onCreate');
    },

    //例項化需要用到到dom元素
    initElement: function () { },

    show: function () {
      if (!this.wrapper[0] || !this.$el[0]) return;
      //如果包含就不要亂搞了
      if (!$.contains(this.wrapper[0], this.$el[0])) {
        this.wrapper.append(this.$el);
      }

      this.trigger('onPreShow');

      if (typeof this.animateShowAction == 'function')
        this.animateShowAction.call(this, this.$el);
      else
        this.$el.show();

      this.status = 'show';
      this.bindEvents();
      this.trigger('onShow');
    },

    hide: function () {
      if (!this.$el || this.status !== 'show') return;

      this.trigger('onPreHide');

      if (typeof this.animateHideAction == 'function')
        this.animateHideAction.call(this, this.$el);
      else
        this.$el.hide();

      this.status = 'hide';
      this.unBindEvents();
      this.removeSysEvents();
      this.trigger('onHide');
    },

    destroy: function () {
      this.status = 'destroy';
      this.unBindEvents();
      this.removeSysEvents();
      this.$el.remove();
      this.trigger('onDestroy');
      delete this;
    },

    getViewModel: function () {
      return this.datamodel;
    },

    setzIndexTop: function (el, level) {
      if (!el) el = this.$el;
      if (!level || level > 10) level = 0;
      level = level * 1000;
      el.css('z-index', getBiggerzIndex(level));
    }

  });

});

基類程式碼改動結束，一旦開啟shadow dom開關，每個元件便會走shadow邏輯，否則走原邏輯：

關閉介面的話，又變成了這個樣子了：

引入shadow dom的意義

web components的提出，旨在解決UI重用的問題、解決相同功能介面各異的問題，大規模的用於生產似乎不太接地氣，但是shadow dom技術對於webapp卻是個好東西。

上文還只是在UI層面上應用shadow dom技術，webapp中每個view頁面片如果可以應用shadow dom技術的話，各個View將不必考慮id重複汙染、css樣式汙染、javascript變數汙染，並且效率還比原來高多了，因為對於頁面來說，他就僅僅是一個標籤而已，如此一來，大規模的webapp的網站可能真的會到來了！

demo地址：http://yexiaochai.github.io/cssui/demo/debug.html#num

程式碼地址：https://github.com/yexiaochai/cssui/tree/gh-pages

博主正在學習web components技術，並且嘗試將之用於專案，文中有誤或者有不妥的地方請您提出