之前我写了一篇自定义checkbox的文章,通过css3实现自定义的checkbox,并没有使用当今流行的Reactjs, 或者Vuejs之类的进行组件化。但是很显然,这样封装的checkbox组件复用的时候非常麻烦。如果在新项目中使用的话,可能需要同时拷贝css和html文件进行整合。从html语义角度上讲,代码的易读性也不是很强,显然这样的组件显然不利于维护。

其实Web Component是前端界一直非常热衷的一个领域,因为原生的HTML在维护复杂网页应用时,实在是太差了。所以才出现了诸如Google的Ploymer、Facebook的Reactjs等等。而且很多MVVM的框架也自带组件化的方案,例如Angularjs的指令,但貌似ng的这个用起来太复杂。用第三方组件化的框架去实现的话,你需要依赖框架本身很多东西,很多时候我们只是简单的几个组件,不是很大,也不是很多,所以为了保证组件的轻量,简单,其实这个时候我们并不想采用第三方的框架。接下来我会介绍使用Shadow DOMregisterElement的方式去实现组件化。

先看看实现后的调用方式:

<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时使用。 同时我们在原型对象上定义了checkedvalue对象,方便调用组件时使用。通过get,set方法我们与其相对应的checkedvalue属性(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获取元素,可通过checkedvalue对象直接访问。

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

实现checkbox组件化(Component)的更多相关文章

  1. 【vue-03】组件化开发 component

    vue组件化思想 组件化是vue的一个重要思想 它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构建我们的应用. 任何的应用都会被抽象成一颗组件树. 注册组件 组件的使用分成三个步骤:创建 ...

  2. 【转】组件化的Web王国

    本文由 埃姆杰 翻译.未经许可,禁止转载!英文出处:Future Insights. 内容提要 使用许多独立组件构建应用程序的想法并不新鲜.Web Component的出现,是重新回顾基于组件的应用程 ...

  3. 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  4. 漫谈Nuclear Web组件化入门篇

    目前来看,团队内部前端项目已全面实施组件化开发.组件化的好处太多,如:按需加载.可复用.易维护.可扩展.少挖坑.不改组件代码直接切成服务器端渲染(如Nuclear组件化可以做到,大家叫同构)... 怎 ...

  5. React Native 之 组件化开发

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  6. Vue.js:轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  7. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  8. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  9. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

随机推荐

  1. 编写一个Java项目,定义包,在包下定义包含main方法的类,在main方法中声明8种基本数据类型的变量并赋值,练习数据类型转换。

  2. java控制台输入

    一.java控制台输入 java控制台输入有如下几个方法 1.JDK 1.4 及以下版本读取的方法 JDK 1.4 及以下的版本中要想从控制台中输入数据只有一种办法,即使用System.in获得系统的 ...

  3. Centos 下oracle 11g 安装部署及手动建库过程

    Oracle 11g 手动建库,在虚拟环境中,不使用DBCA工具进行创建数据库 1.Linux环境的基本配置 2.ip  10.11.30.60 3.Oracle 11g安装过程 ---------- ...

  4. 修改mysql默认字符集的方案

    mysql默认字符集能否进行修改呢?答案是肯定的,下面就将教您两种修改mysql默认字符集的方法,希望对您学习mysql默认字符集方面能有所启迪. (1) 最简单的修改方法,就是修改mysql的my. ...

  5. jQuery事件绑定on、off 和one,取代bind, live, delegate

    jQuery最新版建议:最好用on来代替以前的bind, live, delegate,其中live是最不建议使用的. on和off的格式 on $(elements).on(events[, sel ...

  6. html,datepicker,datetimepicker时间控件使用

    1.My97DatePicker 传送门:点击打开链接 ps:My97DatePicker貌似对chrom不兼容 2.jquery日期选择/日历 http://www.oschina.net/proj ...

  7. Varchar2 size how to decide?

    When you execute a complicate store procedure, maybe it will execute a long time, maybe you want to ...

  8. JavaScript“尽快失败”的原则

    我第一次听说编码原则中有"尽快失败"这一条时,觉得很奇怪,为什么代码要失败?应该成功才对呀.但事实上,当代码在遇到错误的时候应该尽快的终止.为了检测各种状态,我们需要频繁的创建if ...

  9. 对于大学4年的反思(续),记我的ThoughtWorks面试

    之前我写了一篇对于大学四年的反思,时隔一个月,为什么我这么快就要来写这篇续章呢?主要有两个原因,第一是感谢静子姐姐,记得知乎上有个回答里面说过人生需要有贵人的帮助,遇到贵人是一件很幸运的事情.我想,静 ...

  10. 匈牙利算法 codevs 2776 寻找代表元

    codevs 2776 寻找代表元  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题目描述 Description 广州二中苏元实验学校一共有n个社团,分别用 ...