Javascript静态类数组与框架基本实现
- 博客分类:
- javascript
先来讲讲静态类数组(类数组): JavaScript是一个弱类型的语言,但是我们可以通过不同的方式来侧面的实现类的创建,不管是工厂函数、函数原型还是静态类,均可实现模拟类,每一种都有它的特点。 静态类数组即是建立在静态类的基础上实现的数组模型。 var class = { name : "object", color : "red" } 以上是创建了一个静态类class,我们知道,调用类的成员有两种方式 点号形式:class.name 索引形式:class["name"] 其中索引形式与数组的形式非常相像,我们不妨设计一个如下样式的静态类: var LikeArray = { 0 : "A", 1 : "B", 2 : "C" } 如果现在我用索引的形式来调用类的成员属性0,1,2,即LikeArray[0]、LikeArray[1],这样便与数组对象十分相似,唯一的区别就是没有length属性(我们可以通过添加length成员来模拟length属性)。 注:只有静态类的成员名才能以纯数字来命名,调用成员若为纯数字命名则可以省略双引号。 我们先把上面讲的放一放,来看一个别的函数——apply: apply是一个特殊又十分有用的东西,它的作用是可以改变当前作用对象的方法内this指针指向另一个对象。 语法为:[对象.]方法.apply(另一个对象[,参数数组]); 如: var one = function(){ this.arr = ["a","b","c"]; this.show = function(){ alert(this.arr); } } var two = function(){ this.arr = ["d","e","f"]; } var obj = new one(); obj.show.apply(new two()); //使用one对象的show方法但其内部this却指向了two对象,因此会弹出d,e,f 以上也可以说明,apply使two对象继承了one对象的成员属性或方法并立即使用。 下面,我们结合静态类和apply动态生成静态类数组: var obj = { length : 0 //① } var arr = ["a","b","c","d","e"]; //定义数组并初始化 [].push.apply(obj,arr); // ② alert(obj[1]); //Debug,弹出b ①这里仿照数组,模拟设置了一个length属性(必须,后面介绍) ② []表示数组对象,等同于new Array(),通过apply使obj类继承Array类的push方法并使用,同时给push方法传入参数arr。整体效果即为,将数组arr强行压入obj类,使它成为类似于如下的形式: var obj = { length : 0, 0 : "a", 1: "b", 2: "c", …… } 注:由于push方法有一个关联属性——length,push每一个数组元素,length都会自动加一,因此length不可缺少,我们为静态类obj特意加上length属性,这样[].push.apply(obj,arr);才能正常运行。 这样,整个静态类数组(类数组)简单的实现就完成了,用处不是很多,基本是用在Javascript框架(库)中去,其中jQuery库也牵扯到此内容。下面,我们就制作一个简单Js框架(类似于Jquery),功能虽简单,只要大家勤动手动脑,为这个小小的框架扩展,就可以完成一个属于自己的js库。 /* Your JavaScript Framework */ var fw = $ = window.$ = window.fw = function(selector){ return new fw.fn.init(selector); //fw对象以静态类数组形式存在,生成的实际是init的实例 } fw.fn = { //新的命名空间名fw.fn setArray : function(arr){ //生成fw对象的类数组 this.length = 0; // 模拟length属性初始化 [].push.apply( this, arr ); // 继承数组对象push方法 }, init : function(selector){ var d=[]; //定义一个临时的DOM数组,用来存储DOM对象 if(selector.indexOf("#")== 0){ //获取一个ID元素 d[0]=document.getElementById(selector.substr(1)); // 唯一性的ID元素赋予d[0]即可 } else if(selector.indexOf(".")== 0){ //获取指定Class元素集合 var j=0; var A = document.getElementsByTagName('*'); // 以下均为获取class算法 for (var i=0; i< A.length; i++ ) { if (A.className == selector.substr(1) ) { d[j++] = A; } } } else{ //获取标签元素集合 d=document.getElementsByTagName(selector); // 标签是一个集合,因此可以直接赋予临时数组d保存 } var arr = []; // 定义空数组 for(var i=0; i<d .length; i++){ //遍历临时数组d arr.push(d); //将d中的DOM元素依次压入数组arr中 } d = null; //释放临时DOM数组 return this.setArray(arr); // 返回类数组对象 }, html : function(value){ if(typeof(value)=="undefined"){ //如果参数为空,则说明是读取内容 return this[0].innerHTML; // this[0]的目的是将fw对象转换成DOM对象,以便使用innerHTML方法 } else{ this[0].innerHTML=value; //关于对象转换将在以后的文章中介绍,如果这篇原理了解了相信大家会自己明白 } return this; //返回fw对象,可以实现连写 } } fw.fn.init.prototype = fw.fn; // 将fw.fn内的所有成员复制给init,这样new出来的init对象才能使用自己框架的方法 现在我们开始调试: <div id="a">Hello </div> <p class="b"> My </p> <span> Framework<span> <script language="javascript"> var s = $("#a").html() + $(".b").html() + $("span").html(); // fw框架选择器,调用我们的html方法 alert(s); $("#a").html("Welcome "); // 有参数的html方法可以修改内容 </script>
发表评论
-
javascript中的this到底指什么?
2011-09-19 18:35 679JavaScript:this 是什么? 定义:this ... -
JavaScript 常见对象类创建代码与优缺点分析
2011-09-19 17:32 684在Javascript中构建一个类有好几种方法: 1.Fa ... -
不错的JavaScript面向对象的简单入门介绍
2011-09-19 17:22 6981) 如何创建对象: 1. 使用constructor,例如: ... -
javascript实现面向对象类的功能书写技巧
2011-09-19 17:02 650学过java,c#,vb的都知道类的概念,而类具有继承、封装、 ... -
javascript来定义类的规范小结
2011-09-19 16:45 598javascript来定义类的规范小结使用javascript ... -
详解new function(){}和function(){}() 区别分析
2011-09-19 16:37 650情景一: var yx01 = new function() ... -
JS 面向对象的5钟写法
2011-09-19 16:23 618Java代码 复制代码 代码如下: //第1种写法 ... -
JavaScript 三种创建对象的方法
2011-09-19 15:32 592JavaScript中对象的创建有以下几种方式: (1)使 ... -
Javascript面向对象编程(三) 非构造函数的继承
2011-09-19 15:28 513这个系列的第一部分介绍了"封装",第二部分 ... -
Javascript面向对象编程(二) 构造函数的继承
2011-09-19 15:27 739这个系列的第一部分,主要介绍了如何"封装" ... -
JavaScript定义类或函数的几种方式小结
2011-09-19 10:14 556js中不论是定义类或者 ... -
Js构造函数&工厂函数
2011-09-19 09:58 1034//1,工厂函数&构造函数 //例1。 / ... -
js 实例化对像的各种写法
2011-09-19 09:48 1321/* 各种方式new实例化对象的测试比较 */ ... -
JS的构造函数
2011-09-19 09:05 8711 //构造函数 2 //使自 ... -
评论这张
2011-09-08 18:00 581JavaScript兼容性一直是Web ... -
javascript浏览器兼容的实现
2011-09-08 17:54 337javascript部分 1. document.form. ...
相关推荐
14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...
14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...
5.6.1 静态类的调用 77 5.6.2 实例类型的判断方法instanceof 78 5.6.3 对象的克隆 78 5.7 一些设计观念 80 5.7.1 策略模式(Strategy Pattern) 81 5.7.2 单例模式(Singleton Pattern) 81 5.7.3 工厂模式(Factory...
静态方法、类方法、属性方法 课堂扯淡 深入讲解类的特殊成员方法__init__等 深入讲解类的特殊成员方法__new__等 反射详解 异常处理TryExcept 网络编程Socket介绍 Socket通信案例消息发送与接收 第8周 上节回顾 ...
JavaScript中的数组 532 实例 535 文档对象功能及其作用 538 document中三个主要的对象 539 文档对象的基本元素 541 窗口及输入输出 544 输出流及文档对象 546 简单的输入、输出例子 547 内容总结 551 独立实践 552 ...
• sample01.htm 将JavaScript代码插入在标签与标签之间 • sample02.htm 将JavaScript代码放在了标签与标签之间 • sample03.htm JavaScript与HTML混合执行 • sample04.htm 在同...
9.1 层的创建与基本操作 169 9.2 层的属性设置 171 9.2.1 选择层 171 9.2.2 层属性面板的使用 172 9.3 层的其他操作 173 9.3.1 吸附层到网格 173 9.3.2 层和表格的转换 174 9.3.3 嵌套层 175 9.3.4 在层中...
123、JSP中动态INCLUDE与静态INCLUDE的区别? 31 124、两种跳转方式分别是什么?有什么区别? 31 125、如何执行一个线程安全的JSP? 31 126、JSP如何处理HTML FORM中的数据? 31 127、在JSP如何包含一个静态文件? 32 ...
123、JSP中动态INCLUDE与静态INCLUDE的区别? 31 124、两种跳转方式分别是什么?有什么区别? 31 125、如何执行一个线程安全的JSP? 31 126、JSP如何处理HTML FORM中的数据? 31 127、在JSP如何包含一个静态文件? 32 128...
401高级Javascript 课程大纲 本课程分为8个模块,分为2个部分。 课程的前半部分(“后端部分”)由4个模块组成: REST API 认证与授权 实时(套接字,消息,排队) 无服务器应用 本课程的后半部分(“前端部分”...
9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程回顾 9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的...
9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程回顾 9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的...
9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程回顾 9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的...
流行的框架与新技术 117 1、谈谈你对Struts的理解。 117 2、谈谈你对Hibernate的理解。 118 3、AOP的作用。 118 4、你对Spring的理解。 118 5、谈谈Struts中的Action servlet。 120 6、Struts优缺点 优点: 1. 实现...
类标准和箭头功能数组和对象的循环,迭代和遍历递归JSDoc文档最佳实践了解核心数据结构每个结构最合适的时间每种结构在现实世界中的应用循环,迭代,遍历堆栈和队列链表树木图表哈希表Express Web服务器的创建和操作...
9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程回顾 9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的...
9-28 6 javascript类与对象 9-28 7 给对象指定成员函数 自定义工厂方法 9-30 1 课程回顾 9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的...
流行的框架与新技术 117 1、谈谈你对Struts的理解。 117 2、谈谈你对Hibernate的理解。 118 3、AOP的作用。 118 4、你对Spring的理解。 118 5、谈谈Struts中的Action servlet。 120 6、Struts优缺点 优点: 1. 实现...
05 函数闭包装饰器基本实现 06 函数闭包加上返回值 07 函数闭包加上参数 08 函数闭包补充:解压序列 09 函数闭包为函数加上认证功能 10 函数闭包模拟session 11 函数闭包装饰器运行流程 12 函数闭包带参数装饰器 第...
JavaScript 基础知识对象、工厂、类标准和箭头函数数组和对象的循环、迭代、遍历递归JSDoc 文档最佳实践了解核心数据结构每种结构什么时候最合适每种结构的实际应用循环、迭代、遍历堆栈和队列链表树木图表哈希表...