不知道為什么使用鏈式調(diào)用就報錯,第33~34行
使用鏈式調(diào)用就報錯,說 _bindContScroll 不是函數(shù),不用的話運行一切正常。
完整代碼:
(function(win,?doc,?$){ 'use?strict'; //?構(gòu)造函數(shù) function?CusScrollBar(options)?{ this._init(options); } $.extend(CusScrollBar.prototype,?{ _init?:?function(options)?{ let?self?=?this; self.options?=?{ scrollDir?????:?"y", contSelector??:?"", barSelector???:?"", sliderSelector:?"" }; $.extend(true,?self.options,?options?||?{}); self._initDomEvent(); return?self; }, //? _initDomEvent?:?function()?{ let?opts?????=?this.options; this.$cont???=?$(opts.contSelector); this.$slider?=?$(opts.sliderSelector); this.$bar????=?opts.barSelector???$(opts.barSelector)?:?self.$slider.parent(); this.$doc????=?$(doc); ???????????????????????? ????????????????????????//?就是這里報錯 this._initSilderDragEvent() this._bindContScroll(); }, //? _initSilderDragEvent?:?function()?{ let?slider?=?this.$slider; let?sliderEl?=?slider[0]; if?(sliderEl)?{ let?self?=?this; let?doc?=?self.$doc; let?dragStartPagePosition; let?dragStartScrollPosition; let?dragContBarRate; function?mousemoveHandler(e)?{ e.preventDefault(); console.log('mousemove') if?(dragStartPagePosition?==?null)?{ return; } self.scrollTo(dragStartScrollPosition?+?(e.pageY?-?dragStartPagePosition)?*?dragContBarRate); }; slider.on('mousedown',?function(e)?{ e.preventDefault(); console.log('mousedown') dragStartPagePosition?=?e.pageY; dragStartScrollPosition?=?self.$cont[0].scrollTop; dragContBarRate?=?self.getMaxScrollPosition()?/?self.getMaxSliderPosition(); console.log(dragContBarRate) //?命名空間 doc.on('mousemove.nnHoney',?mousemoveHandler).on('mouseup.nn',?function(event)?{ event.preventDefault(); console.log('mouseup') //?doc.off("mousemove?mouseup"); doc.off(".nn"); });; }); } return?self; }, getMaxScrollPosition?:?function()?{ let?self?=?this; //?內(nèi)容可以滾動的高度 //?self.$cont.height()?內(nèi)容可視區(qū)域的高度(文章未充滿頁面的情況) //?self.$cont[0].scrollHeight?內(nèi)容完整高度(文章超出頁面包括隱藏部分) return?Math.max(self.$cont.height(),?self.$cont[0].scrollHeight)?-?self.$cont.height(); }, getMaxSliderPosition?:?function()?{ let?self?=?this; return?self.$bar.height()?-?self.$slider.height(); }, scrollTo?:?function(postionVal)?{ let?self?=?this; self.$cont.scrollTop(postionVal) }, _bindContScroll?:?function()?{ let?self?=?this; self.$cont.on("scroll",?function(e)?{ e.preventDefault(); let?sliderEl?=?self.$slider?&&?self.$slider[0]; if?(sliderEl)?{ sliderEl.style.top?=?self.getSliderPosition()?+?'px'; } }); return?self; }, getSliderPosition?:?function()?{ let?self?=?this; let?maxSliderPosition?=?self.getMaxSliderPosition(); return?Math.min(maxSliderPosition,?maxSliderPosition?*?self.$cont[0].scrollTop?/ ????????????????self.getMaxScrollPosition()); } }); win.CusScrollBar?=?CusScrollBar; })(window,?document,?jQuery);
2017-06-22
自己排查出原因了。
排查過程,把_bindContScroll函數(shù)內(nèi)的內(nèi)容都屏蔽,只返回self,還是報錯,說明跟_bindContScroll函數(shù)沒關(guān)系。
那問題只可能出在前面,在 this._initSilderDragEvent() 函數(shù)中找,發(fā)現(xiàn)沒有在函數(shù)的一開始就將this交給self,而是在函數(shù)中間將this交給self,因作用域的原因?qū)е逻@個操作的效果打了折扣,最后return了一個錯誤的self,導(dǎo)致對象本身的屬性和函數(shù)傳遞不暢,以至于爆出_bindContScroll不是函數(shù)的錯誤。
另外,給老師提個意見,本身后半課程講的就比較粗糙,課程頁面切換有加了花里胡哨的效果,我看的時候更眼花繚亂了,希望老師以后的課程改進??傊€是感謝老師的。