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);