第九节_我的日记本开发手记（9）——开发自己的JavaScript插件

各位朋友大家好，这小结我们主要实现一个自己的JavaScript插件myth.js。我们从零开始搭建。该插件对常用的操作进行了封装，本章节主要把该文件的框架搭建出来，随着开发的深入，会不断的完善这个js插件，最后它会成为一个丰富的插件，以便以后用。

一、JavaScript框架基础

; var myth = (function(selector) {
'use strict';
	var _myth = function(selector) {		
	};
	_myth.version = 'myth 1.0';	
	return _myth;
})(document);

将上述代码拆分解释一下

1. 第一行分号的作用

JavaScript 具有弱语法的特点,如果前面刚好有个函数没有以";"结尾,那么可能会有语法错误。第一行的分号，就是为了避免这种错误的发生，可以解决插件与其它js合并时，别的代码可能会产生的错误问题。

2. 立即执行行数

“()()”这个结构表示立即执行第一个小括号内的函数；第二个小括号中的“document”作为参数传递给第一个小括号内的函数。

3. use strict

第三行’use strict’;表示该插件代码运行要使用严格模式，顾名思义，严格模式就是使得 Javascript 在更严格的条件下运行，有助于更规范的开发。如果在语法检测时发现语法问题，则整个代码块失效，并导致一个语法异常。如果在运行期出现了违反严格模式的代码，则抛出执行异常。

二、补充完善代码

这是最基本的代码，现对上述代码进行扩展和完善，对一些基本的JavaScript功能进行了封装，具体代码如下：

; //JavaScript 弱语法的特点,如果前面刚好有个函数没有以";"结尾,那么可能会有语法错误
var myth = (function(selector) {
	'use strict';
	var _myth = function(selector) {
		//如果默认参数不设置，自动赋值document
		if (!selector) {
			selector = document;
		}
		//获取selector数据类型，代码后面序号1有详细用法解释
		var selectorType = typeof(selector);
		//根据selector数据类型，进行同操作,代码后面序号2有详细用法解释
		switch (selectorType) {
			case 'string': //如果是字符串类型，使用querySelectorAll获取selector对象，结果记录到reObj内
				var doms = document.querySelectorAll(selector); //通过该方法查找HMTL中select对象，代码后面序号2有详细用法解释
				//reObj是个数据对象，目前设置了两个属性：dom是Javascript数据对象，length表示doms对象数量
				var reObj = {
					dom: doms,
					length: doms.length
				};
				break;
			case 'object': //如果是object类型，结果直接记录到reObj内
				var reObj = {
					dom: [selector],
					length: 1
				};
				break;
			default: //除了上述两种类型外，其它返回null对象
				return null;
		}
		reObj.__proto__ = mythExtends;
		//__proto__：表示一个对象拥有的内置属性，是JS内部使用寻找原型链的属性。可以理解为它是一个指针，用于指向创建它的函数对象的原型对象prototype（即构造函数的prototype），简单理解为“为reObj添加了一些扩展属性，myth(selector)选择对象后，可以进一步执行mythExtends中的方法。
		return reObj;
	};
	//myth(selector)对象的扩展方法
	var mythExtends = {
		/* dom 元素遍历 */
		each: function(callBack) {
			if (!callBack) {
				return;
			}
			for (var i = 0; i < this.length; i++) {
				this.dom[i].index = i;
				callBack(this.dom[i]); //返回每一个dom对象
			}
		},
		// 设置或读取html
		html: function(html) {
			if (this.length < 1) {
				return this;
			}
			//设置HTML
			if (typeof(html) != 'undefined') {
				for (var i = 0; i < this.length; i++) {
					this.dom[i].innerHTML = html;
				}
				return this;
			}
			//读取HTML
			try {
				return this.dom[0].innerHTML;
			} catch (e) {
				return null;
			}
		},
		/*读取或设置属性开始*/
		attr: function(attrName, val) {
			if (val) {
				this.setAttr(attrName, val);
			} else {
				return this.getAttr(attrName);
			}
		},
		getAttr: function(attrName) {
			try {
				return this.dom[0].getAttribute(attrName);
			} catch (e) {
				console.log(_lang.domEmpty);
				return null;
			}
		},
		setAttr: function(attrName, val) {
			for (var i = 0; i < this.length; i++) {
				this.dom[i].setAttribute(attrName, val);
			}
			return this;
		},
		/*读取或设置属性结束*/
		/* 样式操作开始 */
		css: function(csses) {
			for (var i = 0; i < this.length; i++) {
				var styles = this.dom[i].style;
				for (var k in csses) {
					styles[k] = csses[k];
				}
			}
			return this;
		},
		hasClass: function(cls) {
			if (this.length != 1) {
				return false;
			}
			return this.dom[0].className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
		},
		addClass: function(cls) {
			for (var i = 0; i < this.length; i++) {
				if (!this.dom[i].className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))) {
					this.dom[i].className += " " + cls;
				}
			}
			return this;
		},
		removeClass: function(cls) {
			var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
			for (var i = 0; i < this.length; i++) {
				this.dom[i].className = this.dom[i].className.replace(reg, ' ');
			}
			return this;
		},
		/* 样式操作结束 */
		// 隐藏元素。isAnimate为真，动画方式隐藏元素
		hide: function(isAnimate) {
			for (var i = 0; i < this.length; i++) {
				if (isAnimate) {
					var ctdom = myth(this.dom[i]);
					ctdom.addClass('myth-fade-out');
					setTimeout(function() {
						ctdom.dom[0].style.display = 'none';
						ctdom.removeClass('myth-fade-out');
					}, 300);
				} else {
					this.dom[i].style.display = 'none';
				}
			}
			return this;
		},
		// 显示元素 isAnimate为真，动画方式显示元素
		show: function(isAnimate) {
			for (var i = 0; i < this.length; i++) {
				if (isAnimate) {
					var ctdom = _myth(this.dom[i]);
					ctdom.addClass('myth-fade-in');
					setTimeout(function() {
						ctdom.dom[0].style.display = 'block';
						ctdom.removeClass('myth-fade-in');
					}, 300);
				} else {
					this.dom[i].style.display = 'block';
				}
			}
			return this;
		},
		// 单击事件
		click: function(callBack) {
			for (var i = 0; i < this.length; i++) {
				if (callBack == undefined) {
					_myth(this.dom[i]).trigger('click');
				}
				this.dom[i].addEventListener('click', callBack);
			}
		},
		setWidth: function(swidth) { //设置myth(selector)对象宽度
			this.dom[0].style.width = swidth;
		},
		getWidth: function() { //获取myth(selector)对象宽度
			return this.dom[0].offsetWidth;
		},
		setHeight: function(sheight) { //设置myth(selector)对象高度
			this.dom[0].style.height = sheight;
		},
		getHeight: function() { //获取myth(selector)对象高度
			return this.dom[0].offsetHeight;
		}
	}
	_myth.version = 'myth 1.0'; //设置版本
	return _myth;
})(document);

下面主要解释一下上述代码中关键函数的意义：

1.Typeof用法详解

typeof是一个运算符，typeof(表达式)表示对表达式做运算，情况如下所示。

序号	返回值	说明
1	‘undefined’	未定义的变量或值
2	‘boolean’	布尔类型的变量或值
3	‘string’	字符串类型的变量或值
4	‘number’	数字类型的变量或值
5	‘object’	对象类型的变量或值，或者null(这个是js历史遗留问题，将null作为object类型处理)
6	‘function’	函数类型的变量或值

2.switch用法详解

switch 语句用于基于不同条件执行不同动作。语法结构如下：

switch(表达式n) {
     case 1:
        代码块
        break;
     case 2:
        代码块
        break;
     default:
        默认代码块
} 

**工作原理：**首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行，其它不执行， break直接跳出switch。

三、插件代码的使用

插件代码基本完成，使用非常简单，下面是一个调用示例，代码如下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="bt">ee</div>
		<script src="myth.js"></script>
		<script>
			myth("#bt").html("HELLO MYTH");
		</script>
	</body>
</html>

三、插件的功能

目前这个插件代码主要实现了以下功能：

序号	函数名称	功能
1	each	遍历dom 对象。例如：myth(“#myid”).each(function(i){alert(‘i’)});
2	html	设置或读取对象中html内容。例如：myth(“#myid”).html(“欢迎您使用Myth.JS”);
3	attr	设置或读取元对象素属性。例如：myth(“#myid”).attr(“id”);
4	css	设置元素styles。例如：myth(“#myid”).css(“height:100px;width:30px;”);
5	hasClass	判断元素是否存在某种样式Class。例如：myth(“#myid”).hasClass(“colorred”);
6	addClass	给元素添加样式class。例如：myth(“#myid”).addClass(“colorred”);
7	removeClass	移除元素制定样式，一个参数表示要去除参数的名称。例如：th(“#myid”).removeClass(“colorred”);
8	hide	隐藏元素。有一个可选参数，当为真时以动画方式隐藏元素。例如：myth(“#myid”).hide(true);
9	show	显示元素。有一个可选参数，当为真时以动画方式显示元素。例如：myth(“#myid”).show(true);
10	click	单击事件。例如：myth(“#myid”).click(function(){alert(this.innerHTML)});
11	setWidth	设置元素宽度。一个参数，表示需要设置的宽度。例如：myth(“#myid”).setWidth(100);
12	getWidth	获取对象宽度。例如：myth(“#myid”).getWidth();
13	setHeight	设置对象高度。一个参数，表示需要设置的高度。例如：myth(“#myid”).setHeight(100);
14	getHeight	获取对象高度。例如：myth(“#myid”).getHeight();

我的日记开发系列手记目录

1.我的日记本开发手记——概述
2.我的日记本开发手记（2）——配色
3.我的日记本开发手记（3）—— 布局
4.我的日记本开发手记（4）—— UI效果图
5.我的日记本开发手记（5）—— 效果图转HTML
6.我的日记本开发手记（6）——Winform运行HTML
7.第七节_我的日记本开发手记（7）——Javascript与c#交互
8.第八节_我的日记本开发手记（8）——sqlite数据库与c#