第九节

第九节

各位朋友大家好，这小结我们主要实现一个自己的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) {//如果默认参数不设置，自动赋值documentif (!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对象}},// 设置或读取htmlhtml: function(html) {if (this.length < 1) {return this;}//设置HTMLif (typeof(html) != 'undefined') {for (var i = 0; i < this.length; i++) {this.dom[i].innerHTML = html;}return this;}//读取HTMLtry {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(表达式)表示对表达式做运算，情况如下所示。

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