第九节
各位朋友大家好,这小结我们主要实现一个自己的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(表达式)表示对表达式做运算,情况如下所示。
序号 | 返回值 | 说明 |
---|---|---|
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#
更多推荐
第九节
发布评论