其实Web Component是前端界一直很是热衷的一个领域,由于原生的HTML在维护复杂网页应用时,实在是太差了。因此才出现了诸如Google的Ploymer
、Facebook的Reactjs
等等。并且不少MVVM
的框架也自带组件化的方案,例如Angularjs
的指令,但貌似ng
的这个用起来太复杂。用第三方组件化的框架去实现的话,你须要依赖框架自己不少东西,不少时候咱们只是简单的几个组件,不是很大,也不是不少,因此为了保证组件的轻量,简单
,其实这个时候咱们并不想采用第三方的框架。接下来我会介绍使用Shadow DOM和registerElement
的方式去实现组件化。javascript
先看看实现后的调用方式:css
<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
组件。效果以下:html
好了看了效果,咱们来看看具体怎么实现的吧。在线demo查看前端
一般状况下,咱们一个组件通常是由html
模板,css
样式,js
脚本逻辑三部分组成的。他们的做用我就很少废话了。至于当前组件的css样式自定义方法请看我上一篇文章CSS3实现自定义checkbox,这里我就不重复这部分了。java
component-checkbox.html
文件, 这个文件会被当作整个组件,在咱们须要引用的页面中经过link
标记动态的引入。 component-checkbox.html
文件即包含了HTML模板,CSS样式,JS三个部分,他们在组件文件中的分布以下:<template> <style>// 放CSS样式定义</style> // 放HTML标记 </template> <script type="text/javascript"> // JS脚本逻辑 </script>
<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脚本这个部分,因此请看下面的详细描述。node
Shadow DOM提供了一种独立封装`html', 'css', 'js'到组件文件的一种方法,这样Shadow DOM内部的样式文件及js等等都与引用页面处于隔离状态,互相独立,因此没必要担忧他们之间会不会出现样式,js相互乱引用的状况出现。固然调用页面与Shadow DOM的通讯则须要经过js来完成。css3
能够在浏览器中实现自定义element, 固然会有人想到说'document.createElement()'方法也能够建立不一样的元素,可是很显然registerElement
更强大些,具体就不展开了。git
// 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; } })(