JavaScript ES5面向对象实现一个todolist

• todo-list
  • 前言
  • 遵守
  • 开始
    • 布局
    • 设计对象
    • 对象的属性
    • 事件绑定
    • 业务逻辑单元的操作
    • 实例化对象
  • 参考

todo-list

前言

最近阅读了JavaScript设计模式的面向对象篇，但是又苦于实践，便想到了写一个简单的todo-list来巩固自己JavaScript面向对象设计的思想。希望对和我一样的小白有帮助。本文代码使用的是ES5，并非ES6。

要求：了解原型链。

遵守

怕文中有人不明白为什么要这么写，所以这里先说一下一些地方为什么要这么写。

来自《编写可维护的JavaScript》

• 将一些常量和不变的数据，放在配置文件里。
• CSS和JavaScript分离。
• 事件处理和业务逻辑单元分离。

// 如:
var config = {
	classShow: 'show',
	classHide: 'hide'
};

开始

布局

首先，先将HTML框架搭好，这里，就没有特别的做美化了。

<div>
	<input type="text" data-input="work">
	<ul data-list="work">
	</ul>
</div>

设计对象

这个地方，倒是花了我一部分事件，不知道到底该如何设计，因为自己之前写过Java，Java里封装类的思想是尽可能单一功能，和组件的思想很像。

而最开始，我就陷入了深深的思考中，因为我想将这个简单的todo-list封装成一个对象，如果按单一功能的思想的话，就得将input封装为一个对象，li封装为一个对象，ul封装为一个对象，显然，这是不可能的。

于是，我转变思想，将它们整个封装一个对象。

对象的属性

对象的属性有：input, ul, list。为了实例化多个对象，将name传入函数里。因此, 代码如下：

var TodoList = function(name) {
	this.list = document.querySelector('[data-list="' + name + '"]');
	this.childs = this.list.querySelectorAll('li');
	this.input = document.querySelector('[data-input="' + name + '"]');
}

事件绑定

仔细思考，其实就是一个增加、删除、查找的操作, 并且为了将事件处理和逻辑处理单元分隔开，所以事件绑定仅仅处理的是绑定事件。因此，代码如下：

var TodoList = function(name) {
	this.list = document.querySelector('[data-list="' + name + '"]');
	this.childs = this.list.querySelectorAll('li');
	this.input = document.querySelector('[data-input="' + name + '"]');

	// 绑定事件
	this.init = function() {

		// input按下enter键
		this.input.addEventListener('keyup', function(event) {
			this.handleKeyup(event);
		}.bind(this));

		// 事件委托，点击list
		this.list.addEventListener('click', function(event) {
			this.handleListClick(event);
		}.bind(this));

		// input的值改变时
		this.input.addEventListener('input', function(event) {
			this.handleInputChange(event);
		}.bind(this));
	};
};

/**
 *
 * 事件与应用单元分离
 * handleKeyup
 *
 * {param} object event
 *
 */
TodoList.prototype.handleKeyup = function(event) {
	event.preventDefault();
	event.stopPropagation();
	this.addItem(event.keyCode, event.target);
}

/**
 * 事件和应用单元分离
 * 点击list，事件冒泡阶段处理, 委托事件
 *
 * {param} object event
 */
TodoList.prototype.handleListClick = function(event) {
	event.preventDefault();
	event.stopPropagation();
	this.removeItem(event.target);
}

/**
 * 事件和应用单元分离
 * input内容改变，则模糊查找, 调用findItem()函数
 *
 * {param} object event
 */
TodoList.prototype.handleInputChange = function(event) {
	var value = event.target.value;
	event.preventDefault();
	event.stopPropagation();
	this.findItem(value);
}

在上面，你可能不知道为什么要绑定this，你需要了解一下bind函数的用处。

而调用事件对象的两个API是为了阻止事件的默认行为 以及 防止事件对象传播。

业务逻辑单元的操作

对事件绑定结束后，就需要对

事件绑定成功后，就将进行逻辑单元的代码编写。

看下面的代码：

/**
 *
 * 增加一个todo-item
 * 注意，这里要绑定this
 *
 * {param} number event.keyCode
 * {param} object event.target
 *
 */
TodoList.prototype.addItem = function(keyCode, target) {

	if(event.keyCode == 13 && event.target.value.trim().length > 0) {
		this.append();
		this.clearInput();
		this.childs = this.list.querySelectorAll('li');
	}
}

/**
 * 删除一个todo-item
 *
 * {param} object event.target
 */
TodoList.prototype.removeItem = function(target) {

	// 初始化执行的时候，不存在target
	if(target) {
		if(target.nodeName == 'BUTTON') {
			target.parentNode.parentNode.removeChild(target.parentNode);
			this.childs = this.list.querySelectorAll('li');
		}
	}
};

/**
 *
 * 查找输入字符串是否存在
 * 如果不存在，就显示所有的list
 * 如果存在，就显示存在的
 *
 */
TodoList.prototype.findItem = function(value) {

	var find = false;

	// 隐藏所有
	for(var i = 0;i < this.childs.length;i++) {
		this.childs[i].className = config.classHide;
	}

	// 如果存在就显示
	for(var i = 0;i < this.childs.length;i++) {
		var nowEl = this.childs[i];

		if(nowEl.firstChild.innerText.indexOf(value) != -1) {
			nowEl.className = config.classShow;
			find  = true;
		}
	}

	// 如果都没有就全部显示
	if(!find) {
		for(var i = 0;i < this.childs.length;i++) {
			this.childs[i].className = config.classShow;
		}
	}
}

/**
 *
 * 清空输入框
 *
 */
TodoList.prototype.clearInput = function() {
	this.input.value = '';
}

/**
 *
 * 为totolist append一个li标签
 *
 */
TodoList.prototype.append = function() {
	var oLi = document.createElement('li');
	var oBtn = document.createElement('button');
	var oSpan = document.createElement('span');
	oSpan.innerHTML = this.input.value.trim();
	oBtn.innerHTML = 'delete';
	oLi.appendChild(oSpan);
	oLi.appendChild(oBtn);
	this.list.appendChild(oLi);
};

实例化对象

var todo = new TodoList('work');
todo.init();

如果你想要查看这个简单的todo-list所有的代码，请点击这里

参考

• 《编写可维护的JavaScript》
• 《JavaScript设计模式》