實現checkbox組件化(Component)

以前我寫了一篇自定義checkbox的文章，經過css3實現自定義的checkbox，並無使用當今流行的Reactjs, 或者Vuejs之類的進行組件化。可是很顯然，這樣封裝的checkbox組件複用的時候很是麻煩。若是在新項目中使用的話，可能須要同時拷貝css和html文件進行整合。從html語義角度上講，代碼的易讀性也不是很強，顯然這樣的組件顯然不利於維護。

其實Web Component是前端界一直很是熱衷的一個領域，由於原生的HTML在維護複雜網頁應用時，實在是太差了。因此纔出現了諸如Google的Ploymer、Facebook的Reactjs等等。並且不少MVVM的框架也自帶組件化的方案,例如Angularjs的指令，但貌似ng的這個用起來太複雜。用第三方組件化的框架去實現的話，你須要依賴框架自己不少東西，不少時候咱們只是簡單的幾個組件，不是很大，也不是不少，因此爲了保證組件的輕量，簡單,其實這個時候咱們並不想採用第三方的框架。接下來我會介紹使用Shadow DOM和registerElement的方式去實現組件化。

先看看實現後的調用方式：

<div class="line"> <label>checkbox1 </label> <check-box class="mycheck" checked="true" id="ComCheckbox"></check-box> </div> <div class="line"> <label>checkbox2 </label> <check-box class="mycheck" checked="false" id="ComCheckbox1" value="2"></check-box> </div>

看起來是否是很簡潔，調用自定義的checkbox組件不須要那麼多擾亂閱讀的元素，只須要一個明確的check-box標籤，既能夠表示checkbox組件。效果以下：

 

 

好了看了效果，咱們來看看具體怎麼實現的吧。在線demo查看

組件的組成

一般狀況下，咱們一個組件通常是由html模板，css樣式，js腳本邏輯三部分組成的。他們的做用我就很少廢話了。至於當前組件的css樣式自定義方法請看我上一篇文章CSS3實現自定義checkbox，這裏我就不重複這部分了。

• 在項目工做區新建一個component-checkbox.html文件， 這個文件會被當作整個組件，在咱們須要引用的頁面中經過link標記動態的引入。 component-checkbox.html文件即包含了HTML模板，CSS樣式，JS三個部分，他們在組件文件中的分佈以下：

<template> <style>// 放CSS樣式定義</style> // 放HTML標記 </template> <script type="text/javascript"> // JS腳本邏輯 </script>

具體HTML/CSS定義

<template id="CheckBox"> <style> .slide-checkbox { position: relative; width: 120px; height: 40px; line-height: 40px; border-radius: 30px; background: #4fbe79; } .slide-checkbox input[type=checkbox] { visibility: hidden; } .slide-checkbox label { position: absolute; height: 30px; width: 30px; left: 5px; top: 5px; background: #FFFFFF; border-radius: 50% 50%; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; -ms-transition: all .4s ease; transition: all .4s ease; } .slide-checkbox input[type=checkbox]:checked + label { left: 85px; } </style> <div class="slide-checkbox"> <input type="checkbox" name="checkbox" id="SlideCheck" /> <label for="SlideCheck"></label> </div> </template>

JS的實現

這種組件實現發方法，重點地方就在JS腳本這個部分，因此請看下面的詳細描述。

1. Shadow DOM說明

Shadow DOM提供了一種獨立封裝`html', 'css', 'js'到組件文件的一種方法，這樣Shadow DOM內部的樣式文件及js等等都與引用頁面處於隔離狀態，互相獨立，因此沒必要擔憂他們之間會不會出現樣式，js相互亂引用的狀況出現。固然調用頁面與Shadow DOM的通訊則須要經過js來完成。

2. registerElement說明

能夠在瀏覽器中實現自定義element, 固然會有人想到說'document.createElement()'方法也能夠建立不一樣的元素，可是很顯然registerElement更強大些，具體就不展開了。

3. 詳細JS代碼

// Whether registerElement is supported function isCustomElementSupported() { return 'registerElement' in document; } (function() { "use strict"; if (isCustomElementSupported()) { var objectPrototype = Object.create(HTMLElement.prototype); var selfDoc = document.currentScript.ownerDocument; Object.defineProperty(objectPrototype, 'value', { get: function() { return this.getAttribute("value") || null; }, set: function(value) { this.setAttribute("value", value); } }); Object.defineProperty(objectPrototype, 'checked', { get: function() { return this.getAttribute("checked") || false; }, set: function(isChecked) { shadowChecked(this, isChecked); this.setAttribute("checked", isChecked); } }); objectPrototype.createdCallback = function() { var self = this; var rootElement = self.createShadowRoot(); var templateContent = selfDoc.querySelector("#CheckBox").content; var nodes = document.importNode(templateContent, true); // Add template content to shadowRoot element rootElement.appendChild(nodes); var checkbox = rootElement.querySelector("#SlideCheck"); // init checked value if (self.checked == "true") { checkbox.checked = true; } // Add change event to checkbox checkbox.addEventListener('change', function() { self.checked = this.checked; }); }; var checkbox = document.registerElement('check-box', { prototype: objectPrototype }); } // update shadow root function shadowChecked(self, isChecked) { var shadowCheck = self.shadowRoot.querySelector("#SlideCheck"); shadowCheck.checked = isChecked; } })();

4. 代碼描述

該代碼片斷先定義了一個registerElement支持狀況的檢測方法。在匿名函數中先通過支持檢測後，經過Object對象建立了有一個HTMLElement的原型對象，用於註冊checkbox繼承HTMLElement時使用。 同時咱們在原型對象上定義了checked和value對象，方便調用組件時使用。經過get,set方法咱們與其相對應的checked和value屬性（attribute)產生聯繫，便於數據通訊。

createdCallback方法在組件被建立後執行。首先將獲取到template裏的內容添加到rootElement中， 添加完後咱們即可以進行一些初始化組件的操做。例如初始化checked的狀態值， 模板內置的checkbox添加change的事件綁定，便於實時更新組件當前的checked值。

組件的使用

1. 引用組件

首先咱們須要在要使用該組件的HTMl頁面中引入組件文件。
注：因爲該文件是用過HTTP讀取過來的，因此靜態項目可能沒法獲取組件文件，須要把這些文件放到服務器目錄下去訪問。 引入方式：

<link rel="import" href="com-checkbox.html">

2. 使用

在須要使用該組件的位置放入組件標籤便可：

<check-box class="mycheck" checked="true" value="1" id="ComCheckbox"></check-box>

注：class爲樣式類名，checked爲初始化狀態, value爲checkbox值。

固然你也能夠屢次引用組件，例如同時使用4個，實際情況中可能會更多：

<div class="line"> <label>checkbox1 </label> <check-box class="mycheck" checked="true" value="1" id="ComCheckbox"></check-box> </div> <div class="line"> <label>checkbox2 </label> <check-box class="mycheck" checked="false" value="2" id="ComCheckbox1" value="2"></check-box> </div> <div class="line"> <label>checkbox3 </label> <check-box class="mycheck" value="3" checked=false id="ComCheckbox2" value="3"></check-box> </div> <div class="line"> <label>checkbox4 </label> <check-box class="mycheck" value="4" checked="true" id="ComCheckbox3" value="4"></check-box> </div>

3. 獲取check-box的狀態和值

var checkbox = document.querySelector("#ComCheckbox"); console.log(checkbox.checked); // output: true console.log(checkbox.value); // output: 1

根據ID獲取元素，可經過checked和value對象直接訪問。

4. 實現checkbox全選和取消

var checkboxs = document.querySelectorAll("check-box"); function selectAll() { for (i = 0; i < checkboxs.length; i++) { checkboxs[i].checked = true; } } function cancleSelectAll() { for (i = 0; i < checkboxs.length; i++) { checkboxs[i].checked = false; } }

獲取因此的checkbox列表， 而後遍歷改變checked的狀態。其餘複雜操做或者狀況能夠再組件定義時進行擴展。

總結

以上即是整個組件定義的具體方法。固然今天咱們自定義的是checkbox組件，咱們固然能夠經過該方法去實現其餘的組件，例如radio,select等等。

原文地址：http://imziv.com/blog/article/read.htm?id=72