组件编写3-----对象生成组件

来源：互联网发布：g76内螺纹编程实例编辑：程序博客网时间：2024/05/29 18:30

组件编写1—–使用JQ生成组件

组件编写2—–执行方法生成组件

这种编写方式比较普遍，通过new一个方法来获取一个对象，在这个方法里面，this.xxx的，则为共有方法，外部可以调用；不带this，则是私有方法，外部调用不了。

function Person(option){    var name = option;    this.getName = function(){        console.log("名字:" + name)    }    this.setName = function(n){        name = n;    }    var getColor = function(){        console.log("输出颜色")    }}var man = new Person("Jack");man.getName();  //输出Jackman.setName("Ben"); man.getName();  //输出BengetColor(); //getColor is not defined

或者可以使用prototype来添加新方法，这种写法的好处是把外面的方法变成自己的公有方法，一个方法各个对象都能使用，但这种写法别人阅读的时候没那么友好，找它初始化的方法不容易。

function Person(option){    var name = option;    this.getName = function(){        console.log("名字:" + name)    }    this.setName = function(n){        name = n;    }    var getColor = function(){        console.log("输出颜色")    }}//新添加的方法Person.prototype.explain = function(){    console.log("我是一个人类")}var man = new Person("Jack");man.getName();  //输出Jackman.setName("Ben"); man.getName();  //输出Benman.explain();  //输出我是一个人类

下面是一个轮播的demo，初始化后可以自动轮播，点击原点、左右按钮可以切换；并提供切换后的回调；生成对象后，还可以调用stop_going开始和continue_going禁止自动轮播。

<!DOCTYPE html><html lang="zh" ><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>组件开发3----对象生成组件</title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><style>*{margin:0;padding:0;}ul,li{list-style: none;}/* banners */.banners{position:relative;overflow: hidden;height:200px;}.banners .b-container{position: relative;left:0;font-size:0;white-space: nowrap;width:100%;height:100%;    transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;}.banners .b-container .power{background:pink;}.banners .b-container .power.power1{background:blue;}.banners .b-container .power.power2{background:gray;}.banners .b-container .power.power3{background:yellow;}.banners .b-container >li{position: absolute;left:0px;top:0px;width:100%;opacity:0;height:100%;font-size:18px;    transition: all 0.5s ease;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;}.banners .b-container >li.select{opacity:1;z-index:2;}.banners .banners .dotsArea{position:absolute;bottom:20px;left:50%;z-index:5;    -webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);transform: translateX(-50%);}.banners .dotsArea > li{display:inline-block;vertical-align:middle;width:12px;height:12px;margin-left:10px;cursor:pointer;}.banners .dotsArea > li:first-child{margin-left:0;}.banners .dotsArea .dot{width:100%;height:100%;background:#fff;border-radius: 100%;box-sizing:border-box;}.banners .dotsArea > li.select .dot{background:none;border: 1px solid #7389af;}.banners .dotsArea > li.select{cursor: initial;}.banners .direct{position: absolute;top:50%;background:#b13535;color:#fff;padding:5px;cursor: pointer;z-index:5;    -webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);transform: translateY(-50%);}.banners .direct.direct_left{left:0;}.banners .direct.direct_right{right:0;}</style><script>//bannerfunction myBanner(option){    var obj = this;    var o = {        box : null,        interval : 2000,        changeBack : null    }    var bigInter = null;    //自动执行    //移动的方法    var moving=function(obj,direct){        var thisWid=obj.width();    //每个页面的长度        var showNum=obj.children("li.select").index();  //获取当前显示域的索引        if(direct === 1 && (showNum+1)>=obj.children("li").length){ //下一个            return false;        }        if(direct === -1 && (showNum)<=0){  //上一个            return false;        }        if(direct === "moving"){    //自动循环            if((showNum+1)<obj.children("li").length){  //向右移动                moving(obj,+1);                return false;            }else{  //返回第一个                direct=0;                showNum=0;            }        }        o.changeBack && o.changeBack.call(o.box[0],(showNum+direct));   //执行回调        obj.children("li").eq(showNum+direct).addClass("select").siblings("li").removeClass("select");        obj.siblings(o.box.find(".dotsArea")).children("li").eq(showNum+direct).addClass("select").siblings("li").removeClass("select");    }    //初始化原点    function _init_dots(){        var str = '';        var len = o.box.find(".b-container li").length;        var select_num = o.box.find(".b-container li.select").index();        for(var i=0;i<len;i++){            if(i == select_num){                str += '<li class="select">'                        +'<div class="dot"></div>'                    +'</li>';            }else{                str += '<li>'                        +'<div class="dot"></div>'                    +'</li>';            }        }        o.box.find(".dotsArea").empty().append(str);    }    //banner的自动执行    function keep_going(){        bigInter=window.setInterval(function(){            moving(o.box.find(".b-container"),"moving");        },o.interval);    }    //关闭banner的自动执行    function close_going(){        window.clearInterval(bigInter);    }    this.stop_going = function(){        close_going();        bigInter = null;    }    this.continue_going = function(){        keep_going();    }    function _bind_event(){        //点击左按钮        o.box.find(".direct_left").on("click",function(){            moving(o.box.find(".b-container"),-1);        });        //点击右按钮        o.box.find(".direct_right").on("click",function(){            moving(o.box.find(".b-container"),+1);        });        //进入大图片区，禁止自动滚动        o.box.on("mouseenter",function(){            close_going();        });        //离开大图片区，开始自动滚动        o.box.on("mouseleave ",function(){            if(bigInter !== null){                keep_going();            }        });        //点击原点        o.box.find(".dotsArea").delegate("li","click",function(){            if($(this).hasClass("select")){                return false;            }            var showNum=$(this).index();            o.box.find(".b-container").children("li").eq(showNum).addClass("select").siblings("li").removeClass("select");            o.box.find(".b-container").siblings(o.box.find(".dotsArea")).children("li").eq(showNum).addClass("select").siblings("li").removeClass("select");        });    }    function _init(){        $.extend(o,option);    //初始化对象        _init_dots();   //初始化原点列表        _bind_event();  //绑定事件        keep_going();   //执行自动轮播    }    _init();}</script></head><body><!--大banner start--><div class="banners" id="topBanner">    <ul class="b-container">        <li class="power select">            banner0        </li>        <li class="power power1">            banner1        </li>        <li class="power power2">            banner2        </li>        <li class="power power3">            banner3        </li>    </ul>    <ul class="dotsArea"></ul>    <span class="direct direct_left">向左</span>    <span class="direct direct_right">向右</span></div><!--大banner end--><script>function callback(num){    console.log(num,this)}var data = {    box : $("#topBanner"),    interval : 2000,    changeBack : callback}var myDemo = new myBanner(data);    //banner//myDemo.stop_going();  //禁止自动轮播//myDemo.continue_going();`//开启自动轮播</script></body></html>

这里写图片描述

0 0