javascript面向对象，实现的几种方式
1:直接使用JSON对象
var o1={
"a":1,
"b":2,
"c":function() {
}
}
2：把函数作为对象
function HandleOne() {
var test = 0;
this.setFlag = function() {
test = 1;
}
this.displayFlag = function() {
console.log("这是逻辑1中的变量值：" + test);
}
return this;
}
var H1 = HandleOne();
H1.displayFlag(); //逻辑1输出自己的变量
3：匿名函数的方式
//匿名函数的方式
var H1 = (function() {
var test = 0;
this.setFlag = function() {
test = 1;
}
this.displayFlag = function() {
console.log("这是逻辑1中的变量值：" + test);
}
//返回this对象，以访问module里定义的函数
return this;
} ()); H1.displayFlag(); //逻辑1输出自己的变量
4: 只暴漏对象中的特定元素
var person = function () {
// Private
var name = "Robert";
return {
getName: function () {
return name;
},
setName: function (newName) {
name = newName;
}
};
} ();
alert(person.name); // Undefined
alert(person.getName()); // "Robert"
person.setName("Robert Nyman");
alert(person.getName()); // "Robert Nyman"
jquery extend 函数使用方法
$(function(){
//测试extend的基本用法
//后面的对象可以覆盖前面的对象，有的元素可以覆盖，没有的元素可以补充
var e1=$.extend({"a":1,"b":2},{"d":3,"b":22});
console.log(e1);
//result : {a: 1, b: 22, d: 3}
//测试向jquery全局对象中添加元素（可以是函数） 插件原理！！！！！
$.extend({"a":function() {
alert("33333");
}});
$.a();
//result :弹出 33333对话框
//测试向jquery对象中扩展元素的方法 插件原理！！！！！
//以及this转换成jquery对象的方法
//以及jquery对象和dom对象之间的转换
$.fn.extend({"a":function() {
console.log($(this).attr("name"));
console.log($(this)[0].name);
}});
$("#tt1").a();
//html中的内容：<a href="#" id="tt1" name="sdfsdf">ssss</a>
//result:sdfsdf sdfsdf
//测试extend深度拷贝和浅拷贝的不同
//面度嵌套对象，如果是浅度拷贝，只是用上一个去替换上一个；如果是深度拷贝，会对嵌套的对象进行复杂的extend操作
var e2=$.extend(true,{"a":1,"b":2,"c":{"a":1,"b":2}},{"d":3,"b":22,"c":{"d":1,"b":22}});
console.log(e2);
var e3=$.extend(false,{"a":1,"b":2,"c":{"a":1,"b":2}},{"d":3,"b":22,"c":{"d":1,"b":22}});
console.log(e3);
/**
深度拷贝result:
Object {a: 1, b: 22, c: Object, d: 3}
a: 1
b: 22
c: Object
a: 1
b: 22
d: 1
__proto__: Object
d: 3
浅度拷贝result
__proto__: Object
extend.html:46
Object {a: 1, b: 22, c: Object, d: 3}
a: 1
b: 22
c: Object
b: 22
d: 1
__proto__: Object
d: 3
__proto__: Object
**/
});
Javascript 插件式开发
- 设置默认值
- 支持jquery选择器
- 支持jquery的链式调用
- 插件里的方法
(function ($) {
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
var showLink = function (obj) {
$(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
}
$.fn.easySlider = function (options) {
var options = $.extend(defaults, options);
return this.each(function () {
showLink(this);
});
}
})(jQuery);