JS实现继承和组件
prototype实现组件:
View Code
1 (function () { 2 var sss = function (param) { 3 this._init.call(this, param); 4 }; 5 sss.prototype = { 6 _init: function (param) { alert(param.id); this._param = param; this.callback = param.fncall; }, 7 play: function () { this.callback(); } 8 }; 9 window.sss = sss; 10 })() 11 $(document).ready(function () { 12 var rrr = new sss({ id: "222", fncall: callback }); 13 rrr.play(); 14 }); 15 function callback() 16 { 17 alert("callback"); 18 }
而jQuery.widget实现如下：
View Code
1 (function ($) {
2 $.person=
3 {
4 2B:"2B青年",
5
6 普通:"普通青年",
7
8 文艺:"文艺青年"
9 };
10 $.widget("person.2B", {
11 options:
12 {
13 id:0,
14 ****
15 },
16 //Jq自带init函数，初始化时自动调用
17 _init: function () {
18 2B也是需要初始化的。
19
20 },
21 _2B领域对象所有操作。
22 2B对外开放的方法。
23 //自己看着办
24 callback:function(param){}
25 });
26 })(jQuery);
实现2B之后突然有点后悔，想通过实现青年的继承来实现2B。
重新设计后实现如下：
基类
View Code
1 //普通boy
2 (function($){
3 $.person=
4 {
5 2B:"2Bboy",
6 普通:"普通boy",
7 文艺:"文艺boy"
8 };
9 $.widget("boy",
10 {
11 //以下俩玩意是自带的，其实还有...
12 option:
13 {
14 haveGirlFriend:false,
15 skill:null,
16 ...
17 },
18 init:function(){
19
20 },
21 _泡妞:function(){
22 各种技能展示;
23 成功，
24 更新option，
25 提交服务器保存各种泡妞经验值
26 },
27 被泡:function(){
28 被人泡了之后更新各种状态。
29 }
30 各种接口如上;
31 });
32 })(jQuery);
调用方式：
View Code
1 $(function () {
2 //初始化
3 $("#sss").boy({
4 haveGirlFriend:false,
5 skill:"秒杀"
6 });
7 $("#eeee").click($.proxy(eeeClick,this));
8
9 function eeeClick(){
10 alert($("#sss").boy("被泡"));
11 };
12 });
2Bboy:
View Code
1 //2Bboy :集成自boy组件
2 $.boy.2B = $.boy.extend({
3 //2B特有特别初始化
4 _init:function(){
5 //先初始化boy共有的操作
6 this.base();
7 //2B特有的
8 //...
9 },
10 //各种2B操作
11 });
1 (function($){
2 $.person=
3 {
4 2B:"2Bboy",
5 普通:"普通boy",
6 文艺:"文艺boy"
7 };
8 $.widget("boy",
9 {
10 //以下俩玩意是自带的，其实还有...
11 option:
12 {
13 haveGirlFriend:false,
14 skill:null,
15 ...
16 },
17 init:function(){
18
19 },
20 _泡妞:function(){
21 各种技能展示;
22 成功，
23 更新option，
24 提交服务器保存各种泡妞经验值
25 },
26 被泡:function(){
27 被人泡了之后更新各种状态。
28 返回被泡成功后的提示
29 }
30 各种接口如上;
31 });
32 })(jQuery);
