做一份完整的网站规划书,欧美动物人物ppt免费模板下载网站,企业网站设计方案,wordpress连接微博专业版v4.1这段时间正好公司项目须要#xff0c;须要改动fullcalendar日历插件#xff0c;有机会深入插件源代码。正好利用这个机会#xff0c;我也大致学习了下面JS的面向对象编程#xff0c;感觉收获还是比較多的。 所以写了以下这篇文章希望跟大家探讨探讨JS的面向对象#xff0c… 这段时间正好公司项目须要须要改动fullcalendar日历插件有机会深入插件源代码。正好利用这个机会我也大致学习了下面JS的面向对象编程感觉收获还是比較多的。 所以写了以下这篇文章希望跟大家探讨探讨JS的面向对象本人资历尚浅还望各位大神多多不吝赐教。总述 如今的发展趋势是JS越来越面向对象化。而JS本身并未像JavaC#等语言实现了明显的继承封装等我们须要通过JS本身的方式来模拟这些面向对象的方式。 Jquery的一些东西 1.each方法 这是在js面向对象编程中十分经常使用的一种方式each方法使dom结构循环变得简洁它能够遍历数组对象json等 $(selector).each(function(index,element)) 或 $.each(selector,function(index,element)) 调用样例 var arr1 [ aaa, bbb, ccc ]; $.each(arr1, function(i,val){ alert(i); //输出 012alert(val); //输出aaabbbccc}); 參数selector能够是dom元素$(input:hidden)json{ one:1, two:2, three:3}等等 当參数是json格式时传入函数的index就变为了json元素的key 看下jQuery中的each实现网络摘抄 function (object, callback, args) {
//该方法有三个參数:进行操作的对象obj进行操作的函数fn函数的參数argsvar name, i 0,length object.length;if (args) {if (length undefined) {for (name in object) {if (callback.apply(object[name], args) false) {break;}}} else {for (; i length;) {if (callback.apply(object[i], args) false) {break;}}}} else {if (length undefined) {for (name in object) {if (callback.call(object[name], name, object[name]) false) {break;}}} else {for (var value object[0]; i length ! false; value object[i]) {}/*object[0]取得jQuery对象中的第一个DOM元素通过for循环得到遍历整个jQuery对象中相应的每一个DOM元素通过 callback.call( value,i,value);将callback的this对象指向value对象而且传递两个參数,i表示索引值value表示DOM元素当中callback是相似于 function(index, elem) { ... } 的方法。所以就得到 $(...).each(function(index, elem){ ... });*/}}return object;}来源 a target_blank hrefhttp://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.htmlhttp://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.html/a 上述中回调函数callback作为參数传入callback.call(value, i, value)这部分实际上限制了callback传入时仅仅会使用ivalue两个參数。 在把callback作为參数的函数中会定义callback实际的參数列表外部定义callback时需遵循此參数列表最经常使用的样例就是jqueryAJAX中调用成功返回的success函数或error函数。 JS高级特性 1. 运算符 || 运算符 2.函数作为值进行參数传递 jquery的AJAX是函数作为值传递的好样例 js中的函数传递都是按值进行传递的函数名就是对象的引用它使得函数能够向不论什么对象一样作为參数进行传递由于这一特性JS有了更大的灵活性。 我们能够定义带有函数參数的函数限定传入函数的參数而不限定对于參数的实现callback的原理 下图为研究fullcalendar插件时的插件定义了对日历元素的遍历函数对每一个元素的操作则作为callback函数传入这样我们能够对不同元素操做的遍历进行复用 function segmentElementEach(segments, callback) { // TODO: use in AgendaView?for (var i0; isegments.length; i) {var segment segments[i];var element segment.element;if (element) {callback(segment, element, i);}}
} 注意以下这样的时尚大气的使用方法有点像接口但更开放 // report the elements to the View, for general drag/resize utilitiessegmentElementEach(segments, function(segment, element) {reportEventElement(segment.event, element);});// attach mouse handlers//attachHandlers(segments, modifiedEventId);// call eventAfterRender callback for each eventsegmentElementEach(segments, function(segment, element) {trigger(eventAfterRender, segment.event, segment.event, element);}); 4.JS boolean 在JS编程中尤其是面向对象编程常常会向一些推断语句传入一些对象如fullcalendar插件中截取 // the container where the initial HTML will be rendered.// If doAppendtrue, uses a temporary container.var renderContainer doAppend ? $(div/) : finalContainer; 在JS中推断语句会将传入值转换成Boolean后推断 转换规则 数据类型 转为true的值 转为false的值 Boolean true false String 不论什么非空字符串 “”空字符串 Number 不论什么非零数值 0和NaN Object 不论什么对象 null Undefined n/a undefinedJS面向对象 1.argument对象 在JavaScript的每个函数里存在一个上下文相关的名为arguments的变量它的行为类似于一个伪数组包括了传给函数的所有參数这个对象存在于每个函数的上下文中。 argument[0]表示函数调用时传入的第一个參数argument[1]表示第二个參数由此类推 若改动argument的值则相应的出入參数也跟着改动。 argument对象在JS模拟函数重载时有非常大的用处 2.this 在不论什么语言中包含操作系统上下文这个概念总是不可获取我们能够把上下文理解成当前程序运行的环境。 在JS中这个上下文通过this来实现this总是指向当前工作的上下文对象。在全局环境中this指向window对象。 在函数调用时能够通过call和apply方法来改变函数运行的上下文对象this就会指向新的对象。这在兴许的继承中也会提及。 关于this的訪问 在这个样例中在getNameFunc函数内部取到的this不是object对象的this而是window全局对象由于object.getNameFunc()实际返回函数名getNameFunc这时调用函数的环境变为了全局环境this因此变成了window。 JS中每一个函数调用时都会自己主动取得this和arguments两个特殊变量。 script typetext/javascript var name The Window; var object { name : My Object, getNameFunc : function(){ return function(){ return this.name; }; } }; alert(object.getNameFunc()()); //The Window /script 3.函数重载 JS与javac#的面向对象语言不同函数没有重载的概念相同的函数名后面的会覆盖前面的JS函数名就是个引用。 而JS的重载则能够通过argument对象来实现例如以下是从《Javascript 面向对象编程》一书中截取。 能够通过argument的length属性推断函数调用时的參数列表结合typeof类型推断能够实现函数的重载 //一个简单的用来发送消息的函数
function sendMessage( msg, obj ) {
//假设同一时候提供了一个消息和一个对象
if ( arguments.length 2 )
//就将消息发给该对象
obj.handleMsg( msg );else //否则刚假定仅仅有消息被提供//于是显示该消息
alert( msg );
} 4.JS作用域 JS作用域以函数为界限而没有块约束forifwhile等所以在for中定义的var变量实际上在for循环外部依旧起作用。 注意在函数内部未使用varkeyword产生的变量可在全局訪问 5.闭包 简单的说闭包就是内层函数引用外层变量的手段,而外层则无法訪问内层的变量是否闭包是对外层变量的封装函数是否作为隔离之用在函数的生命周期内外层无法影响变量 结合《Javascript 面向对象编程》和 网上找的各种资料我总结了闭包的下面几种使用方法。 1简单的封装函数把实现业务的代码和參数分开避免混乱的代码调用方式。 下面为演示样例代码取自《Javascript 面向对象编程》 //用来延迟显示消息的通用函数
function delayedAlert( msg, time ) {
//初始化一个被封套的函数
setTimeout(function(){
//此函数使用了来自封套它的函数的变量msg
alert( msg );
}, time );
}其实本人感觉这好像并没体现出闭包的什么特点倒反而像是简单的封装 2匿名自运行函数 在JS编写过程中经常会在全局存放非常多变量包含非常多暂时变量这经常会对其它的函数造成影响使用闭包能够解决这一问题。 下面样例来自 http://blog.csdn.net/sunlylorn/article/details/6534610 var datamodel { table : [], tree : {} }; (function(dm){ for(var i 0; i dm.table.rows; i){ var row dm.table.rows[i]; for(var j 0; j row.cells; i){ drawCell(i, j); } } //build dm.tree })(datamodel); 我们无需去维护函数中的变量运行结束后内部变量会被释放而不会影响到全局避免污染 3设计模式中的单例模式 在single以外是无法訪问unique的而且採用匿名函数仅仅能初始化一次 var single (function(){ var unique; function Construct(){ // ... 生成单例的构造函数的代码 } unique new Constuct(); return unique;})();来源 http://blog.chinaunix.net/uid-26672038-id-3886959.html 4模拟面向对象类模板 function Person(){ var name default; return { getName : function(){ return name; }, setName : function(newName){ name newName; } } }; var john Person(); print(john.getName()); john.setName(john); print(john.getName()); var jack Person(); print(jack.getName()); jack.setName(jack); print(jack.getName()); 执行结果例如以下 defaultjohndefaultjack来源http://blog.csdn.net/sunlylorn/article/details/6534610 (5)提供引用变量的创建值而非其它变化后的值 //id为main的一个元素
var obj document.getElementById(main);
//用来绑定的items数组
var items [ click, keypress ];
//遍历items中的每一项
for ( var i 0; i items.length; i ) {
//用自运行的匿名函数来激发作用域(function(){
//在些作用域内存储值var item items[i];
//为obj元素绑定函数obj[ on item ] function() {
//item引用一个父级的变量
//该变量在此for循环的上文中已被成功地scoped(?)alert( Thanks for your item );};})();
} 4.JS中方法訪问范围 1共同拥有方法 介绍之前先说下prototype的概念。 prototype是全部JS对象共同拥有的构造对象。prototype本身也是对象能够给其附加方法属性prototype加入的方法属性全部主对象的实例共享。 2私有方法 全部函数内部定义的属性方法未绑定到this上下文对象的在函数外部是无法訪问到的样例例如以下 function Person(){ //都是私有的 var name; function move(){ }} 3成员方法本人类比javac#等语言姑且叫他成员方法 function Person(name){ var name; function moveUp(){ alert(name move); } this.moveUp moveUp; } var jack new Person(jack); jack.moveUp(); (4)通过成员方法訪问变量如上例訪问name (5)静态方法 静态方法类似于java等语言能够直接通过累訪问。 JS中的静态方法实际能够看做函数对象的属性而不是通过函数对象创建出的对象的属性。所以无法通过事实上例訪问函数对象。 5.构造重要 在JS中创建对象有多种方式相比java等语言比較灵活。 JS中能够先创建Object的实例再为其加入属性和方法不展演示样例子比較简单或通过字面量的方式大括号包裹属性和方法。 可是用上述的基本方式创建对象会产生大量反复代码。下面几种方式是比較推荐的方式。 (1)工厂模式 作为最经常使用的设计模式之中的一个在JS中相同能够模拟这样的方式。工厂模式用函数封装创建对象的细节仅仅须要通过接口来创建对象。 function createPerson(name, age, job){ var o new Object(); o.name name; o.age age; o.job job; o.sayName function(){ alert(this.name); }; return o; } var person1 createPerson(Nicholas, 29, Software Engineer); var person2 createPerson(Greg, 27, Doctor); person1.sayName(); //Nicholas person2.sayName(); //Greg来源《Javascript 高级程序设计》 2构造函数 在javac#等面向对象语言中这是非经常见的。 function Person(name){ var name; function moveUp(){ alert(name move); } this.moveUp moveUp; } var jack new Person(jack); jack.moveUp(); 3原型Prototype模式 我们创建的每一个函数都有一个Prototype属性该属性是个指针指向一个用于包括特定类型全部实例共享属性和方法的对象。 每一个构造函数都会有一个原型对象指向原型对象的指针而通过构造函数构造出的对象相同有指向相同原型对象的指针这也是后面可以通过原型链实现继承的基础 (4)静态方法创建 静态方法类似于java等语言能够直接通过累訪问。 JS中的静态方法实际能够看做函数对象的属性而不是通过函数对象创建出的对象的属性。所以无法通过事实上例訪问函数对象。 6.继承重要 这里我仅仅介绍最主要的几种集成方式一些基于设计模式的扩展这里就不做赘述了。 1原型链法 通过子类的原型对象引用父类的实例对象该实例对象将引用父类原型对象从而实现了原型链。 原型链的最上一级一定是Object对象。 原型链搜索机制读取时从实例对象開始顺着原型链一直向上搜索若找不到属性或方法则会在最后一步停止。 function SuperType(){ this.property true; } SuperType.prototype.getSuperValue function(){ return this.property; }; function SubType(){ this.subproperty false; } //inherit from SuperType SubType.prototype new SuperType(); SubType.prototype.getSubValue function (){ return this.subproperty; }; var instance new SubType(); alert(instance.getSuperValue()); //true 对于原型链法我有一点疑问为何子类指向父类原型实例而非原型本身希望能有高人给与指点 2借用构造函数 这是我所见过的最经常使用的方式其思想是在子类中调用超类的构造函数主要通过借助apply和call方法即用子类的this环境去调用超类的构造函数实现将超类的属性方法拷贝到子类的过程。这在fullcalendar插件中大量使用。 //下面是fullcalendar插件中穿件日历基础对象时继承事件处理类型EventManager的过程t是用来存储this变量的防止 //切换对结果的影响this // Imports // ----------------------------------------------------------------------------------- EventManager.call(t, options); var isFetchNeeded t.isFetchNeeded; var fetchEvents t.fetchEvents; 兴许有心的东西还会有所补充 转载于:https://www.cnblogs.com/mengfanrong/p/3868798.html
