js中组件的开发实例

最新推荐文章于 2024-10-01 18:51:18 发布

weixin_30861797

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量51

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/stoneox/p/4779020.html

版权

一个组件开发的例子：

来源：http://www.cnblogs.com/uedqd/archive/2013/02/23/2923099.html

先上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.tabs input.active{ background:red; }
.tabs div{ width:200px; height:200px; border:1px #000 solid; display:none;}
</style>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script>

$(function(){
    var t1 = new CreateTab();
    t1.init({
        id : 'div1'
    });
    var t2 = new CreateTab();
    t2.init({
        id : 'div2',
        events : 'mouseover'
    });
    var t3 = new CreateTab();
    t3.init({
        id : 'div3',
        events : 'mouseover',
        delay : 300
    });
    
    $('#input1').click(function(){
        t3.select(2);
        alert( t3.currentContent() );
    });
    
    var t4 = new CreateTab();
    t4.init({
        id : 'div4',
        events : 'click'
    });
    $(t4).on('toBeforeChange',function(){       //使用on绑定事件，jquery1.8之后使用on绑定事件，来替代bind等方法，解除事件使用off
        alert( t4.currentContent() );
    });
    $(t4).on('toChange',function(){
        //alert( t4.currentContent() );
        alert( t4.currentTitle() );
    });
    
    $.extend(CreateTab.prototype,{   //插件扩展
        currentTitle : function(){
            return $(this.id).find('input').eq( this.iNow ).val();
        }
    });
    
    
    
});

function CreateTab(){  //组件开发
    this.id = null;             //构造函数设置属性
    this.aInput = null;
    this.aDiv = null;
    this.iNow = 0;
    this.defaults = {
        events : 'click',
        delay : 0
    };
}
CreateTab.prototype = {             //原型方法定义可以继承的方法
    init : function(options){
        var This = this;                //将当前作用域的this(实例对象t1,t2...)赋予This，下面调用时在另一个函数内，this的值改变
        options = $.extend(this.defaults,options);      //extend使options对象的内容覆盖this.defaults的内容，events与delay有初始值
         //console.log(this);           输出id为null的对象t1,t2...
        this.id = '#' + options.id;
          //console.log(this);          id为对应的值
        $(this.id).find('input').on(options.events,function(){
            var obj = this;                                         //指代input元素
            if(options.events=='mouseover' && options.delay){       //event事件为mouseover且有delay时
                obj.timer = setTimeout(function(){
                    This.change(obj);                   //相当于t1.change,t2.change....下面的change方法实现选项卡功能
                },options.delay);
                
                $(obj).mouseout(function(){
                    clearTimeout(obj.timer);
                });
            }
            else{
                This.change(obj);
            }
            
        });
    },
    change : function(obj){
        
        $(this).trigger('toBeforeChange');              //触发上面使用on绑定的event
        //console.log(this);            输出id有值
        $(this.id).find('input').attr('class','');
        $(this.id).find('div').css('display','none');
        
        $(obj).attr('class','active');
        $(this.id).find('div').eq( $(obj).index() ).css('display','block');    //index()返回dom或jqeury元素的序号
        
        this.iNow = $(obj).index();                 
        
        $(this).trigger('toChange');
        
    },
    select : function(index){
        $(this.id).find('input').attr('class','');
        $(this.id).find('div').css('display','none');
        
        $(this.id).find('input').eq(index).attr('class','active');
        $(this.id).find('div').eq(index).css('display','block');    
        
        this.iNow = index;
        
    },
    currentContent : function(){
        return $(this.id).find('div').eq( this.iNow ).html();
    }
};
</script>
</head>

<body>
<div id="div1" class="tabs">
    <input class="active" type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display:block">111</div>
    <div>222</div>
    <div>333</div>
</div>
<div id="div2" class="tabs">
    <input class="active" type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display:block">111</div>
    <div>222</div>
    <div>333</div>
</div>
<div id="div3" class="tabs">
    <input class="active" type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display:block">111</div>
    <div>222</div>
    <div>333</div>
</div>

<input type="button" id="input1" value="方法测试" />

<div id="div4" class="tabs">
    <input class="active" type="button" value="1" />
    <input type="button" value="2" />
    <input type="button" value="3" />
    <div style="display:block">111</div>
    <div>222</div>
    <div>333</div>
</div>

</body>
</html>

有几个部分：

 1  init : function(options){
 2         var This = this;                //将当前作用域的this(实例对象t1,t2...)赋予This，下面调用时在另一个函数内，this的值改变
 3         options = $.extend(this.defaults,options);      //extend使options对象的内容覆盖this.defaults的内容，events与delay有初始值
 4          //console.log(this);           输出id为null的对象t1,t2...
 5         this.id = '#' + options.id;
 6           //console.log(this);          id为对应的值
 7         $(this.id).find('input').on(options.events,function(){
 8             var obj = this;                                         //指代input元素
 9             if(options.events=='mouseover' && options.delay){       //event事件为mouseover且有delay时
10                 obj.timer = setTimeout(function(){
11                     This.change(obj);                   //相当于t1.change,t2.change....下面的change方法实现选项卡功能
12                 },options.delay);

init方法传递参数给对象

1、第2行中，将this的值赋予This，防止下面的函数中this的值改变，通过在该行添加console.log观察this的值，可知：

第5行给没有id的对象赋值，重新打印出结果，发现id不为null：

2、第8行，this的值为input元素，因为作用域的问题，This仍可以在其子函数中使用，且这里的This id不为空，调用方法change

1 change : function(obj){
2         
3         $(this).trigger('toBeforeChange');              //触发上面使用on绑定的event
4         //console.log(this);            输出id有值
5         $(this.id).find('input').attr('class','');
6         $(this.id).find('div').css('display','none');

change方法中的this指向对象的实例，t1,t2....，init方法已经传递参数给对象，方法取得对象都是有id值的：

 $.extend(CreateTab.prototype,{   //插件扩展
        currentTitle : function(){
            return $(this.id).find('input').eq( this.iNow ).val();
        }
    });
    /*CreateTab.prototype.currentTitle= function(){
        return $(this.id).find("input").eq(this.iNow).val();
    }*/

插件扩展部分例子中采用了jquery的方法，也可以使用注释中的源生js添加原型方法

转载于:https://www.cnblogs.com/stoneox/p/4779020.html