这段时间正好公司项目须要,须要改动fullcalendar日历插件,有机会深入插件源代码。正好利用这个机会,我也大致学习了下面JS的面向对象编程,感觉收获还是比較多的。
所以写了以下这篇文章希望跟大家探讨探讨JS的面向对象,本人资历尚浅,还望各位大神多多不吝赐教。
总述:
$(selector).each(function(index,element)) 或 $.each(selector,function(index,element))
var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i); //输出: 0,1,2
alert(val); //输出:aaa,bbb,ccc
}); 參数selector能够是dom元素($("input:hidden")),json({ one:1, two:2, three:3})等等
function (object, callback, args) {
//该方法有三个參数:进行操作的对象obj,进行操作的函数fn,函数的參数args
var 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 href="http://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.html">http://www.cnblogs.com/xiaojinhe2/archive/2011/10/12/2208740.html</a>function segmentElementEach(segments, callback) { // TODO: use in AgendaView?
for (var i=0; i<segments.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 utilities
segmentElementEach(segments, function(segment, element) {
reportEventElement(segment.event, element);
});
// attach mouse handlers
//attachHandlers(segments, modifiedEventId);
// call `eventAfterRender` callback for each event
segmentElementEach(segments, function(segment, element) {
trigger('eventAfterRender', segment.event, segment.event, element);
});
// the container where the initial HTML will be rendered.
// If `doAppend`==true, uses a temporary container.
var renderContainer = doAppend ? $("<div/>") : finalContainer;
| 数据类型 | 转为true的值 | 转为false的值 |
| Boolean | true | false |
| String | 不论什么非空字符串 | “”空字符串 |
| Number | 不论什么非零数值 | 0和NaN |
| Object | 不论什么对象 | null |
| Undefined | n/a | undefined |
<script type="text/javascript">var name = "The Window";var object = {name : "My Object",getNameFunc : function(){return function(){return this.name;};}};alert(object.getNameFunc()()); //"The Window"</script>
//一个简单的用来发送消息的函数
function sendMessage( msg, obj ) {
//假设同一时候提供了一个消息和一个对象
if ( arguments.length == 2 )
//就将消息发给该对象
obj.handleMsg( msg );else //否则,刚假定仅仅有消息被提供 //于是显示该消息 alert( msg ); }
//用来延迟显示消息的通用函数
function delayedAlert( msg, time ) {
//初始化一个被封套的函数
setTimeout(function(){
//此函数使用了来自封套它的函数的变量msg
alert( msg );
}, time );
}其实本人感觉,这好像并没体现出闭包的什么特点,倒反而像是简单的封装
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);
var single = (function(){var unique;function Construct(){// ... 生成单例的构造函数的代码}unique = new Constuct();return unique;})();来源: <http://blog.chinaunix.net/uid-26672038-id-3886959.html>
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
//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 );
};
})();
}
- function Person(){
- //都是私有的
- var name;
- function move(){
- }
- }
function Person(name){var name;function moveUp(){alert(name+" move");}this.moveUp = moveUp;}var jack = new Person("jack");jack.moveUp();
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 高级程序设计》
function Person(name){var name;function moveUp(){alert(name+" move");}this.moveUp = moveUp;}var jack = new Person("jack");jack.moveUp();
function SuperType(){this.property = true;}SuperType.prototype.getSuperValue = function(){return this.property;};function SubType(){this.subproperty = false;}//inherit from SuperTypeSubType.prototype = new SuperType();SubType.prototype.getSubValue = function (){return this.subproperty;};var instance = new SubType();alert(instance.getSuperValue()); //true
//下面是fullcalendar插件中穿件日历基础对象时继承事件处理类型EventManager的过程,t是用来存储this变量的,防止- //切换对结果的影响this
// Imports// -----------------------------------------------------------------------------------EventManager.call(t, options);var isFetchNeeded = t.isFetchNeeded;var fetchEvents = t.fetchEvents;
Javascript面向对象研究心得,布布扣,bubuko.com
原文:http://www.cnblogs.com/mengfanrong/p/3868798.html