自定义滚动条笔记

Posted 2020-09-05 技术V类

可以为模板

 1 (function (win, doc, $) {
 2     function CusScrollBar(options) {
 3         this._init(options);// 初始
 4     }
 5      // 在原型上添加方法
 6     $.extend(CusScrollBar.prototype, {
 7         _init: function () {
 8             console.log("test1");
 9         }
10     })
11     //CusScrollBar.prototype._init = function () {
12     //    console.log("test");
13     //}
14    
15     win.CusScrollBar = CusScrollBar;
16 })(window, document, jQuery);
17 new CusScrollBar();

6、利用.extend()函数在原型上添加属性和方法  CusScrollBar.prototype为目标对象

7.传入一个对象 对象的属性值_init

   这样还回的结果就是在 CusScrollBar.prototype上添加_init方法

 1 (function (win, doc, $) {
 2     function CusScrollBar(options) {
 3         this._init(options);// 初始
 4     }
 5     $.extend(CusScrollBar.prototype, {
 6         _init: function (options) {
 7             var self = this; 
 8             self.options = {
 9                 contSelector: "",   // 滑动内容区选择器
10                 barSelector: "",    // 滑动条选择器
11                 sliderSelector: "", // 滑动块选择器
12                 tabItemSelector: "",// 标签选择器
13             };
14             $.extend(true, self.options, options || {});
15             console.log(self.options.barSelector);
16         }
17     })
18     win.CusScrollBar = CusScrollBar;
19 })(window, document, jQuery);
20 new CusScrollBar({
21     contSelector: ".scroll-cont",   // 滑动内容区选择器(必须)
22     barSelector: ".scroll-bar",    // 滑动条选择器（必须）
23     sliderSelector: ".scroll-slider", // 滑动快选择器
24     tabItemSelector: ".tab-item",      // 标签选择器（必须）
25 });

 

init函数里面初始化一些属性

7、this储存在self变量中 防止this混用

8、指定一些默认的属性 以自变量的形式储存在self options（self.options）属性中

9、此时self.options中的options不是this._init(options)