面向對象實例--常用組件

1.面向對象:

1. 易維護: 採用面向對象思想設計的結構，可讀性高，由於繼承的存在，即使改變需求，那麼維護也只是在局部模塊，所以維護起來是非常方便和較低成本的。
2. 質量高: 在設計時，可重用現有的，在以前的項目的領域中已被測試過的類使系統滿足業務需求並具有較高的質量。
3. 效率高: 在軟體開發時，根據設計的需要對現實世界的事物進行抽象，產生類。使用這樣的方法解決問題，接近於日常生活和自然的思考方式，勢必提高軟體開發的效率和質量。
4. 易擴展: 由於繼承、封裝、多態的特性，自然設計出高內聚、低耦合的系統結構，使得系統更靈活、更容易擴展，而且成本較低。

2.Tab組件

用jquery實現tab效果並不難，來看下主要代碼:

$(.ct>li).on(click,function(){n var $this =$(this)n var index = $(this).index();//被點中的下標 .index()jquery方法；n console.log(index);n $this.siblings().removeClass(active);n $this.addClass(active) nn $this.parents(.wrap).find(.panel).removeClass(active)n $this.parents(.wrap).find(.panel).eq(index).addClass(active)nnn })n

如何用面向對象寫成組件?

function Tab(ct){ //寫一個構造函數；n this.ct = ct;n this.init();//init()初始化n this.bind();//bind()//綁定事件處理；n }n Tab.prototype.init = function (){ //給原型上幫定初始化函數；n this.tabLis = this.ct.querySelectorAll(.ct>li)//選中所有的lin this.panels = this.ct.querySelectorAll(.panel)//選中所有的panelnn }nTab.prototype.bind = function (){n var _this =this ;//保存this指向 n this.tabLis.forEach(function(tabli){//循環所有的的li，n tabli.onclick = function(e){//當點擊時n var target = e.target;//被點中的的目標li;n var index = [].indexOf.call(_this.tabLis,target)//借用數組方法；獲取被點中的li下標；n _this.tabLis.forEach(function(li){//循環所有的的li，n li.classList.remove(active);//循環所有的的li，去掉activen })nn![20170424_000601.gif](http://upload-images.jianshu.io/upload_images/3407000-940252b56661b894.gif?imageMogr2/auto-orient/strip)n target.classList.add(active);//給點中的li加上 activen _this.panels.forEach(function(panel){//循環所有的的panel，n panel.classList.remove(active)//循環所有的的panel，去掉activen })n _this.panels[index].classList.add(active)//給對應li小標的panel加上activenn }n })n }n new Tab(document.querySelectorAll(.wrap)[0])n new Tab(document.querySelectorAll(.wrap)[1])n new Tab(document.querySelectorAll(.wrap)[2])n//完成後只需new出構造函數的對象就可以了；n

3.輪播組件

用jquery實現輪播效果，來看下主要代碼:

var $imgCt =$(.img-ct),n $preBtn = $(.btn-pre),n $nextBtn = $(.btn-next),n $bullet = $(.bullet);nnnn var $firstImg = $imgCt.find(li).first(),n $lastImg = $imgCt.find(li).last();nn var pageIndex = 0; //第幾個頁的變數；n var imgLength =$imgCt.children().length; //獲取在克隆前有多少張圖片 n var isAnimate = false;//防止重複點擊nn $imgCt.prepend($lastImg.clone())//把最後一個圖clone一次添加到第一張的前面；n $imgCt.append($firstImg.clone())//把最前一個圖clone一次添加到最後一張的後面； nn $imgCt.width($firstImg.width()*$imgCt.children().length) //設定ul的寬度 n $imgCt.css({left:-+$firstImg.width()+px})//把第一張圖放入可視區域nn auto()n $preBtn.on(click,function(e){n e.preventDefault()//阻止頁面刷新n playPre()n })nn $nextBtn.on(click,function(e){n e.preventDefault()n playNext()n })nn $bullet.find(li).on(click,function(e){n e.preventDefault()n var idx = $(this).index();n if(idx>pageIndex){n playNext(idx-pageIndex)n }else if(idx<pageIndex){n playPre(pageIndex-idx)n }nn })nn//以上是輪播的實現思想，下面完成效果的幾個函數nnn function playNext(idx){n var idx = idx ||1n if(isAnimate) returnn isAnimate = true;n $imgCt.animate({n left:-=+($firstImg.width()*idx)n },function(){n pageIndex= pageIndex+idx;n if(pageIndex === imgLength){//如果頁數=圖片的最後一個，就讓圖片回到第一張；即data-index=0;n $imgCt.css({left:-+$firstImg.width()+px})n pageIndex = 0;n }n isAnimate =false;n setBullet()n })nn }nnn function playPre(idx){n var idx = idx ||1n if(isAnimate) returnn isAnimate = true;n $imgCt.animate({n left:+=+$firstImg.width()*idxn },function(){n pageIndex=pageIndex-idx;n if(pageIndex < 0 ){n $imgCt.css({left:-+imgLength*$firstImg.width()+px})n pageIndex = imgLength - 1;n }n isAnimate =false;n setBullet()n })n }nnnn function setBullet(){//小圖標函數n $bullet.children()n .removeClass(active)n .eq(pageIndex)n .addClass(active)n }nnn function auto(){n var lock = setInterval(function(){n playNext()n },3000)n }n

如何用面向對象寫成組件?

function Carousel($ct){n this.$ct = $ct;n this.init();//初始化n this.bind();//事件處理n this.auto();//自動播放函數n }//與Tab原理一樣寫一個構造函數nn Carousel.prototype.init = function(){//給原型上幫定初始化函數nn var $imgCt =this.$imgCt = this.$ct.find(.img-ct),n $preBtn =this.$preBtn = this.$ct.find(.btn-pre),n $nextBtn =this.$nextBtn=this.$ct.find(.btn-next),n $bullet = this.$bullet= this.$ct.find(.bullet);nn var $firstImg =this.$firstImg= $imgCt.find(li).first(),n $lastImg =this.$lastImg= $imgCt.find(li).last();nn//這裡注意下 其他函數要用的變數要用this.nn this.pageIndex = 0; //第幾個頁的變數；n this.imgLength =$imgCt.children().length; //獲取在克隆前有多少張圖片 n this.isAnimate = false;//防止重複點擊nnnn $imgCt.prepend($lastImg.clone())//把最後一個圖clone一次添加到第一張的前面；n $imgCt.append($firstImg.clone())//把最前一個圖clone一次添加到最後一張的後面； nn $imgCt.width($firstImg.width()*$imgCt.children().length) //設定ul的寬度 n $imgCt.css({left:-+$firstImg.width()+px})//把第一張圖放入可視區域nn }nnCarousel.prototype.bind = function(){n var _this = this;//保存this;n this.$preBtn.on(click,function(e){n e.preventDefault()//阻止頁面刷新n _this.playPre()//this指定的是按鈕所以要用保存起來的_this;下面的一樣n })nn this.$nextBtn.on(click,function(e){n e.preventDefault()n _this.playNext()n })n this.$bullet.find(li).on(click,function(e){n e.preventDefault()n var idx = $(this).index();n if(idx> _this.pageIndex){n _this.playNext(idx- _this.pageIndex)n }else if(idx< _this.pageIndex){n _this.playPre( _this.pageIndex-idx)n }nn })nn }nn下面四個函數都綁定到原型上，實現效果 注意this的指向；與上面一樣；nn Carousel.prototype.playNext = function(idx){n var _this = this;n var idx = idx ||1n if(this.isAnimate) returnn this.isAnimate = true;n this.$imgCt.animate({n left:-=+(this.$firstImg.width()*idx)n },function(){n _this.pageIndex= _this.pageIndex+idx;n if(_this.pageIndex === _this.imgLength){//如果頁數=圖片的最後一個，就讓圖片回到第一張；即data-index=0;n _this.$imgCt.css({left:-+_this.$firstImg.width()+px})n _this.pageIndex = 0;n }n _this.isAnimate =false;n _this.setBullet()n })nn }n Carousel.prototype.playPre = function(idx){n var _this = this;n var idx = idx ||1n if(this.isAnimate) returnn this.isAnimate = true;n this.$imgCt.animate({n left:+=+this.$firstImg.width()*idxn },function(){n _this.pageIndex=_this.pageIndex-idx;n if(_this.pageIndex < 0 ){n _this.$imgCt.css({left:-+_this.imgLength*_this.$firstImg.width()+px})n _this.pageIndex = _this.imgLength - 1;n }n _this.isAnimate =false;n _this.setBullet()n })nn }n Carousel.prototype.setBullet = function (){n this.$bullet.children()n .removeClass(active)n .eq(this.pageIndex)n .addClass(active)nnn }n Carousel.prototype.auto = function(){n var _this = this;n var lock = setInterval(function(){n _this.playNext()n },3000)nn//最後根據需要new出構造函數的對象就可以了n new Carousel($(.carousel).eq(0));n new Carousel($(.carousel).eq(1));n new Carousel($(.carousel).eq(2));n

4. 輪播的二次封裝

代碼基本沒變化；nvar Carouse = (function(){nn return {n Toinit:function($ct){n $ct.each(function(index,node){n new _Carousel($(node));n })nn }n }n})() //寫一個立刻執行函數，返回Toinit函數new出對象；把上面的代碼放入這個立刻執行函數，注意名字不用起重複；nn var Carousel = (function(){n function _Carousel($ct){//構造函數n this.$ct = $ct;n this.init();n this.bind();n this.auto();n }n _Carousel.prototype.init = function(){nn var $imgCt =this.$imgCt = this.$ct.find(.img-ct),n $preBtn =this.$preBtn = this.$ct.find(.btn-pre),n $nextBtn =this.$nextBtn=this.$ct.find(.btn-next),n $bullet = this.$bullet= this.$ct.find(.bullet);nn var $firstImg =this.$firstImg= $imgCt.find(li).first(),n $lastImg =this.$lastImg= $imgCt.find(li).last();nn this.pageIndex = 0; //第幾個頁的變數；n this.imgLength =$imgCt.children().length; //獲取在克隆前有多少張圖片 n this.isAnimate = false;//防止重複點擊nnnn $imgCt.prepend($lastImg.clone())//把最後一個圖clone一次添加到第一張的前面；n $imgCt.append($firstImg.clone())//把最前一個圖clone一次添加到最後一張的後面； nn $imgCt.width($firstImg.width()*$imgCt.children().length) //設定ul的寬度 n $imgCt.css({left:-+$firstImg.width()+px})//把第一張圖放入可視區域nn }n _Carousel.prototype.bind = function(){n var _this = this;n this.$preBtn.on(click,function(e){n e.preventDefault()//阻止頁面刷新n _this.playPre()n })nn this.$nextBtn.on(click,function(e){n e.preventDefault()n _this.playNext()n })n this.$bullet.find(li).on(click,function(e){n e.preventDefault()n var idx = $(this).index();n if(idx> _this.pageIndex){n _this.playNext(idx- _this.pageIndex)n }else if(idx< _this.pageIndex){n _this.playPre( _this.pageIndex-idx)n }nn })nn }n _Carousel.prototype.playNext = function(idx){n var _this = this;n var idx = idx ||1n if(this.isAnimate) returnn this.isAnimate = true;n this.$imgCt.animate({n left:-=+(this.$firstImg.width()*idx)n },function(){n _this.pageIndex= _this.pageIndex+idx;n if(_this.pageIndex === _this.imgLength){//如果頁數=圖片的最後一個，就讓圖片回到第一張；即data-index=0;n _this.$imgCt.css({left:-+_this.$firstImg.width()+px})n _this.pageIndex = 0;n }n _this.isAnimate =false;n _this.setBullet()n })nn }n _Carousel.prototype.playPre = function(idx){n var _this = this;n var idx = idx ||1n if(this.isAnimate) returnn this.isAnimate = true;n this.$imgCt.animate({n left:+=+this.$firstImg.width()*idxn },function(){n _this.pageIndex=_this.pageIndex-idx;n if(_this.pageIndex < 0 ){n _this.$imgCt.css({left:-+_this.imgLength*_this.$firstImg.width()+px})n _this.pageIndex = _this.imgLength - 1;n }n _this.isAnimate =false;n _this.setBullet()n })nn }n _Carousel.prototype.setBullet = function (){n this.$bullet.children()n .removeClass(active)n .eq(this.pageIndex)n .addClass(active)nnn }n _Carousel.prototype.auto = function(){n var _this = this;n var lock = setInterval(function(){n _this.playNext()n },3000)n }nnn return {n Toinit:function($ct){n $ct.each(function(index,node){n new _Carousel($(node));n })nn }n }n })()nn Carousel.Toinit($(.carousel)); //new出頁面所有class= carousel的對象；n//與上面的第一種效果是一樣~n

5. 曝光組件-懶載入

用jquery實現tab效果並不難，來看下主要代碼:

check();//先載入出在可數去里的圖片n $(window).on(scroll, check)//當窗口滾動載入圖片nn function check(){n $(.container img).not(.load).each(function(){n if(isShow($(this))){n show($(this))n }n })n } nnnn function show($imgs){//改變src的值；n $imgs.each(function(){n var imgUrl = $(this).attr(data-src);n $(this).attr(src,imgUrl);n $(this).addClass(load)n })n }nnn function isShow($node){//判斷圖片是否出現在可視區里n var windowHeight = $(window).height(),n scrollTop = $(window).scrollTop(),n offsetTop = $node.offset().top,n nodeHeight = $node.height();n if(windowHeight+scrollTop>offsetTop && scrollTop< offsetTop+nodeHeight){n return true;n }else{n return false;n } //scrollTop< offsetTop+nodeHeight瀏覽器上邊緣n //windowHeight+scrollTop>offsetTop瀏覽器下邊緣n }n

如何用面向對象寫成組件?

var Lazy =(function(){ //寫一個立即執行函數n function Exposure($target,callback,isOnce){//構造函數n this.$target = $target;n this.callback = callback;n this.isOnce = isOnce;n this.hasShow = false; //用於判斷是否繼續執行n this.bind();//事件綁定n this.check();nn }nn Exposure.prototype.showImg = function($node){nn var imgUrl = $node.attr(data-src);n $node.attr(src,imgUrl);nn }n Exposure.prototype.bind = function(){n var _this = this;n $(window).on(scroll, function(){n _this.check();n })nn }n Exposure.prototype.check = function(){nn if(this.isOnce){// 如果傳入第3個參數就執行；n if(this.isShow() && !this.hasShow){//如果兩個條件都成立執行；n this.callback(this.$target)n this.hasShow = true;n//這裡是為了構造的對象的callback函數執行一次還是多次n }n }else {// 如果沒有傳入第3個參數就執行；n if(this.isShow()){n this.callback(this.$target)nn }nn }nn }n Exposure.prototype.isShow = function(){nn var windowHeight = $(window).height(),n scrollTop = $(window).scrollTop(),n offsetTop = this.$target.offset().top,n nodeHeight = this.$target.height();n if(windowHeight+scrollTop>offsetTop && scrollTop< offsetTop+nodeHeight){n return true;n }else{n return false;n } n } nnn return {n init :function($targets,callback){//多次執行callback;n $targets.each(function(idx,target){n new Exposure($(target),callback)n })nn },n one:function($target,callback){//執行一次callback;n $target.each(function(idx,target){n new Exposure($(target),callback,true)n })n }n }n})()nn Lazy.one($(#hello),function($node){n $node.text($node.text()+只加一次);n })n Lazy.init($(#world),function($node){n $node.text($node.text()+加多次);n })nLazy.one($(.container img),function($node){n this.showImg($node);n})n

6. Modal 組件

如何用面向對象寫成組件? 看下主要的代碼：

// 用模塊定義的方式創建一個對象，把new Modal 的過程封裝到模塊里，這樣用這就可以直接通過Dialog.open()的方法調用n var Dialog =(function(){n function Modal(){n this.createDialog();n this.bind();n }nn Modal.prototype = {n defaults:{//設置初始參數n title:,n message:,n ShowCloseBtn:true,n ShowConfirmBtn:false,n onClose:function(){},n onConfirm:function(){}n },n open:function(opts){//當點擊按鈕時傳入參數；n this.setOpts(opts);//設置參數；n console.log(this.opts);n this.setDialog();//設置Dialogn this.showDialog()//顯示Dialogn },n createDialog:function(){//創建Dialogn var tpl = <div class="ct">n + <div class="cover"></div>n + <div class="dialog">n + <div class="dialog-head"><h3></h3><span class="btn-close">X</span></div> n + <div class="dialog-content"></div> n + <div class="dialog-footer"><a href="#" class="btn btn-close">取消</a> <a href="#" class="btn btn-confirm">確定</a></div> n + </div>n +</div> ;n this.$ct = $(tpl); n $(body).append(this.$ct); n },n bind:function(){n var _this = this;n _this.$ct.find(.btn-close).on(click,function(e){//當點擊.btn-close時n e.preventDefault();//阻止默認事件；n _this.opts.onClose()n _this.hideDialog()n });n _this.$ct.find(.btn-confirm).on(click,function(e){n e.preventDefault();n _this.opts.onConfirm()n _this.hideDialog()n });n },nn setOpts:function(opts){n if(typeof opts === string){//如果為字元串；參數值變為n this.opts = $.extend({},this.defaults,{message:opts})//參數值變為一個新的對象n }else if (typeof opts === object){//如果為對象n this.opts = $.extend({},this.defaults,opts);//參數值變為一個新的對象n }n },nn setDialog:function(){//設置Dialog的樣式n var $ct = this.$ct;n if(!this.opts.title){n $ct.find(.dialog-head).hide()n }else{n $ct.find(.dialog-head).show()n }n if(!this.opts.ShowCloseBtn){n $ct.find(.dialog-footer .btn-close).hide();n }else{n $ct.find(.dialog-footer .btn-close).show();n }n if(!this.opts.ShowConfirmBtn){n $ct.find(.dialog-footer .btn-confirm).hide();n }else{n $ct.find(.dialog-footer .btn-confirm).show();n }n $ct.find(.dialog-head h3).text(this.opts.title);n $ct.find(.dialog-content).html(this.opts.message);nn },n showDialog:function(){n this.$ct.show()//Dialog顯示n },n hideDialog:function(){n this.$ct.hide()//Dialog隱藏n }n };n return new Modal();n })()nn//通過傳入不同的參數；來改變dialog的樣式n $(.open1).on(click,function(){n Dialog.open(Welcome to the world of IT);n })nn $(.open2).on(click,function(){n Dialog.open(<a href="#">+百度+</a>);n })nn $(.open3).on(click,function(){n Dialog.open({n title:World,n message:Welcome to the world of IT,n ShowCloseBtn:true,n ShowConfirmBtn:true,n onClose:function(){n alert(close)n },n onConfirm:function(){n alert(確定)n }n });n })nnn $(.open4).on(click,function(){n var tpl = <ul><li>+列表1+</li><li>+列表2+</li><li>+列表3+</li></ul> n Dialog.open({n title:World,n message:tpl,n ShowCloseBtn:true,n ShowConfirmBtn:true,n onClose:function(){n alert(close)n },n onConfirm:function(){n alert(確定)n }n });n })nn $(.open5).on(click,function(){ n Dialog.open({n title:World,n message:Welcome to the world of IT,n ShowCloseBtn:false,n ShowConfirmBtn:false,n onClose:function(){n alert(close)n }nn });n })n

7.GoTop組件

如何用面向對象寫成組件? 看下主要的代碼：

var GoTop = function(ct,target){n this.ct = ct;n this.target = $(<div class="goTop">回到頂部</div>)n this.target.css({n position:fixed,n right:100px,n bottom:50px,n display:none,n padding:8px,n cursor:pointer,n border:1px solid,n borderRadius:4pxn })nn }n GoTop.prototype.creatNode = function(){n this.ct.append(this.target);n }nn GoTop.prototype.bindEvent = function(){n var _this = this;n var $window = $(window);nn $window.on(scroll,function(){n var $top = $window.scrollTop()n if($top>100){n _this.target.css(display,block)n }else{n _this.target.css(display,none)n }n })n this.target.on(click,function(){n _this.ct.animate({n scrollTop : 0n })n })n }nn var Gotop =new GoTop($(body))n Gotop.creatNode();n Gotop.bindEvent();n

8. 日曆組件

如何用面向對象寫成組件? 看下主要的代碼：

function DatePicker($target) {n //初始化當前日期n this.init($target);nn //渲染日曆模板n this.render();nn //設置模板裡面的數據n this.setData();nn //綁定事件n this.bind();n }nn DatePicker.prototype = {nn init: function($target) {n this.$target = $target;n if (this.isValidDate($target.attr(date-init))) {n this.date = new Date($target.attr(date-init)); //當前日期或者指定的要展示的日期n this.watchDate = new Date($target.attr(date-init)); //用戶在切換月份時所看到的日期,初始為當前日期n } else {n this.date = new Date();n this.watchDate = new Date();n }nn },nn render: function() {n var tpl = <div class="ui-date-picker" stylex="display:none">n + <div class="header"><span class="pre caret-left"></span><span class="cur header-date"></span><span class="next caret-right"></span></div>n + <table class="panel">n + <thead> <tr> <th>日</th> <th>一</th> <th>二</th> <th>三</th> <th>四</th> <th>五</th> <th>六</th> </tr> </thead>n + <tbody></tbody>n + </div>;n this.$datepicker = $(tpl);n this.$datepicker.insertAfter(this.$target)n .css({n position: absolute,n left: this.$target.offset().left,n top: this.$target.offset().top + this.$target.height(true)n });n },nnn setData: function() {n this.$datepicker.find(tbody).html();nn var firstDay = this.getFirstDay(this.watchDate),n lastDay = this.getLastDay(this.watchDate);nn var dateArr = [];nn for(var i = firstDay.getDay(); i>0; i--){n var d = new Date( firstDay.getTime() - i*24*60*60*1000 );n dateArr.push( {type:pre, date:d} );n }nn for(var j = 0; j< lastDay.getDate() - firstDay.getDate() + 1; j++){n var d = new Date( firstDay.getTime() + j*24*60*60*1000 );n dateArr.push( {type:cur, date: d} );n }nn for(var k = 1; k < 7 - lastDay.getDay(); k++ ){n var d = new Date( lastDay.getTime() + k*24*60*60*1000 );n dateArr.push( {type:next, date: d} )n }nn this.$datepicker.find(.header-date).text(this.watchDate.getFullYear()+年+(this.watchDate.getMonth()+1)+月);nn var tpl = ;n for(var i=0;i<dateArr.length;i++){n if(i%7 === 0){n tpl = <tr> + tpl;n }nn tpl += <td class=";nn if(dateArr[i].type === pre){n tpl += pre-month;n }else if(dateArr[i].type === cur){n tpl += cur-month;n }else{n tpl += next-monthn }nn if(this.getYYMMDD(this.date) === this.getYYMMDD(dateArr[i].date)){n tpl += cur-date;n }n tpl += ";nn tpl += data-date="+ this.getYYMMDD(dateArr[i].date) + ">;n tpl += this.toFixed( dateArr[i].date.getDate()) + </td>;nnn if(i%7===6){n tpl = tpl + </tr>n }n }nn this.$datepicker.find(tbody).html(tpl);n },nn bind: function() {n var self = this;n this.$datepicker.find(.pre).on(click, function(){n self.watchDate = self.getPreMonth(self.watchDate);n self.setData();n });n this.$datepicker.find(.next).on(click, function(){n self.watchDate = self.getNextMonth(self.watchDate);n self.setData();n });n this.$datepicker.on(click, .cur-month, function(){n self.$target.val($(this).attr(data-date))n self.$datepicker.hide();n });nn this.$target.on(click, function(e){n e.stopPropagation();n self.$datepicker.show();n });nn //下面設置點擊頁面其他部分隱藏 datepickern this.$datepicker.on(click, function(e){n e.stopPropagation();n });n $(window).on(click, function(e){n self.$datepicker.hide();n })n },nn isValidDate: function(dateStr) {n return new Date(dateStr).toString() !== Invalid Date;n },nn //獲取 date 所在月份的第一天的時間對象n getFirstDay: function(date) {n var year = date.getFullYear(),n month = date.getMonth();nn return newDate = new Date(year, month, 1);n },nnn //獲取 date 所在月份最後一天的時間對象n getLastDay: function(date) {n var year = date.getFullYear(),n month = date.getMonth();n month++;nn if (month > 11) {n month = 0;n year++;n }n var newDate = new Date(year, month, 1);n return new Date(newDate.getTime() - 1000 * 60 * 60 * 24);n },nnn //獲取date 上月1號時間對象n getPreMonth: function(date){n var year = date.getFullYear(),n month = date.getMonth();nn month--;n if (month < 0) {n month = 11;n year--;n }n return new Date(year, month, 1);n },nn //獲取date 下月1號時間對象n getNextMonth: function(date){n var year = date.getFullYear(),n month = date.getMonth();nn month++;n if (month > 11) {n month = 0;n year++;n }n return new Date(year, month, 1);n },nnn getYYMMDD: function(date){n var yy = date.getFullYear(),n mm = date.getMonth()+1n return date.getFullYear() + "/" + this.toFixed(date.getMonth() + 1) + "/" + this.toFixed(date.getDate());n },nn //eg: 1 -> "01" 11 -> "11"n toFixed: function(n){n return (n+).length === 1 ? (0+ n+) : (n+);n }nnn }nnnn // 創建對象的方式n // $(.date-ipt).each(function(){n // new DatePicker($(this));n // })nnnnn //變成 jquery 插件n $.fn.datePicker = function() {n this.each(function(){n new DatePicker($(this));n });n };nn $(.date-ipt).datePicker();n

希望對各位朋友有所幫助~~~

關注飢人谷學員精選 - 知乎專欄，持續發布適合新手的原創前端文章。