前端JqueryDemo

这是一篇关于前端JqueryDemo的思维导图，主要内容包括：focus-center调用，lazyLoad模块，move模块，sliderShow模块，focus-商品分类，调用搜索框，搜索框，showHide模块，站点导航，dropdown模块。

前端JqueryDemo

• showHide模块
  • 暴露接口showHide: 1-初始化 mode = showHide($this, options)) 2-调用 mode[option]($this) 方法 内部细节: (1)defaults = {css3: true, js: false, animation: 'fade'}; fade slideUpDown slideLeftRight fadeSlideUpDown fadeSlideLeftRight (2)showHide($elem, options): 根据options 确定初始化的 mode 初始化的类型(silent/css3/js) 并执行 mode.init方法 返回对象 { show:mode.show, hide:mode.hide } (3)show方法: 显示当前元素 + 触发show和shown事件 (4)hide方法: 隐藏当前元素 + 触发shide和hidden事件
    • common
      • _common_init($elem, callback): if ($elem.is(':hidden')) $elem.data('status', 'hidden') else $elem.data('status', 'shown') if (typeof callback === 'function') callback()
      • _common_show($elem, callback): if ($elem.data('status') === 'show' || $elem.data('status')==='shown') return; $elem.data('status', 'show').trigger('show'); //触发show事件 if (typeof callback === 'function') callback();
      • _common_hide($elem, callback): if ($elem.data('status') === 'hide' || $elem.data('status') === 'hidden') return; $elem.data('status', 'hide').trigger('hide'); //触发hide事件 if (typeof callback === 'function') callback();
    • 1-silent
      • init: _common_init show: _common_show($elem,showCallback) hide: _common_hide($elem, hideCallback) showCallback: $elem.show(); $elem.data('status', 'shown').trigger('shown'); //触发shown事件 hideCallback: $elem.hide(); $elem.data('status', 'hidden').trigger('hidden'); //触发hidden事件
    • 2-css3(基于Jquery)
      • common
        • _css3_common_init($elem, className): $elem.addClass('transition'); _common_init($elem, InitCallBack); InitCallBack: $elem.addClass(className);
        • _css3_common_show($elem, className): _common_show($elem, callback); callback: $elem.off(transition.end) .one(transition.end,function() { $elem.data('status', 'shown').trigger('shown');}); $elem.show(); setTimeout( function() {$elem.removeClass(className);}, 20);
        • _css3_common_hide($elem, className): _common_hide($elem, callback) callback: $elem.off(transition.end).one(transition.end, function() { $elem.hide(); $elem.data('status', 'hidden').trigger('hidden'); }); $elem.addClass(className);
      • fade(淡入淡出)
        • init: css3._css3_common_init($elem, 'fadeOut') show: css3._css3_common_show($elem, 'fadeOut'); hide: css3._css3_common_hide($elem, 'fadeOut');
      • slideUpDown(上下滚动)
        • init: $elem.height($elem.height()); css3._css3_common_init($elem, 'slideUpDownCollapse'); show: css3._css3_common_show($elem, 'slideUpDownCollapse'); hide: css3._css3_common_hide($elem, 'slideUpDownCollapse');
      • slideLeftRight(左右滚动)
        • init: $elem.width($elem.width()); css3._css3_common_init($elem, 'slideLeftRightCollapse'); show: css3._css3_common_show($elem, 'slideLeftRightCollapse'); hide: css3._css3_common_hide($elem, 'slideLeftRightCollapse');
      • fadeSlideUpDown(淡入淡出的上下滚动)
        • init: $elem.height($elem.height()); css3._css3_common_init($elem, 'fadeOut slideUpDownCollapse'); show: css3._css3_common_show($elem, 'fadeOut slideUpDownCollapse'); hide: css3._css3_common_hide($elem, 'fadeOut slideUpDownCollapse');
      • fadeSlideLeftRight(淡入淡出的左右滚动)
        • init: $elem.width($elem.width()); css3._css3_common_init($elem, 'fadeOut slideLeftRightCollapse'); show: css3._css3_common_show($elem, 'fadeOut slideLeftRightCollapse'); hide: css3._css3_common_hide($elem, 'fadeOut slideLeftRightCollapse');
    • 3-js
      • common
        • 1- _js_common_init($elem, callback) $elem.removeClass('transition'); _common_init($elem, callback);
        • 2- _js_common_show($elem, mode) _common_show($elem,callback)
          • callback: $elem.stop()[mode]( function() { $elem.data('status', 'shown').trigger('shown');} );
        • 3- _js_common_hide($elem, mode) _common_hide($elem, callback)
          • callback: $elem.stop()[mode]( function() {$elem.data('status', 'hidden').trigger('hidden');} );
        • 4- _js_customInit($elem, options) let styles = {}; for (let p in options) { styles[p] = $elem.css(p); } $elem.data('styles', styles); js._js_common_init($elem,callback);
          • callback: $elem.css(options);
        • 5- _js_customShow($elem) _js_common_show($elem,mode)
          • mode: $elem.show(); $elem.stop() .animate($elem.data('styles'), function() { $elem.data('status', 'shown').trigger('shown');} );
        • 6- _js_customHide($elem, options) _js_common_hide($elem, mode)
          • mode: $elem.stop() .animate(options, function() { $elem.hide(); $elem.data('status', 'hidden').trigger('hidden'); } );
      • fade
        • init: _js_common_init($elem) show: _js_common_show($elem, 'fadeIn') hide: _js_common_hide($elem, 'fadeOut')
      • slideUpDown
        • init: _js_common_init($elem) show: _js_common_show($elem, 'slideDown') hide: _js_common_hide($elem, 'slideUp')
      • slideLeftRight
        • init: _js_customInit($elem, {'width': 0, 'padding-left': 0, 'padding-right': 0}); show: _js_customShow($elem) hide: _js_customHide($elem, {'width': 0, 'padding-left': 0, 'padding-right': 0});
      • fadeSlideUpDown
        • init: _js_customInit($elem, {'opacity': 0, 'height': 0, 'padding-top': 0, 'padding-bottom': 0}); show: _js_customShow($elem); hide: _js_customHide($elem, {'opacity': 0, 'height': 0, 'padding-top': 0, 'padding-bottom': 0});
      • fadeSlideLeftRight
        • init: _js_customInit($elem, {'opacity': 0, 'width': 0, 'padding-left': 0, 'padding-right': 0}); show: _js_customShow($elem); hide: _js_customHide($elem, {'opacity': 0, 'width': 0, 'padding-left': 0, 'padding-right': 0});
• dropdown模块
  • 暴露接口 dropdown function Dropdown($elem, options) { this.$elem = $elem; this.options = options; this.$layer = $elem.find('.dropdown-layer'); //dropdown的下拉框元素 //下拉框激活的样式 xx-active; 默认是 dropdown ; this.activeClass = ($elem.data('active') || options.active) + '-active'; this._init(); } 参数 {delay: 100, active: 'menu'}
  • 1-init方法: (1)$layer.showHide();//使下拉框元素具备show/hide能力 (2)监听 $layer show事件: 触发 $elem 的 xx_load 事件; xx=$elem.data('load_menu') 各个模块需要自行定义自己的load函数 (3)$elem.hover( this.show,this.hide) //鼠标移入移出触发自己的show/hide事件 2-show方法: 2-1：$elem.addClass(self.activeClass); 2-2：$layer.showHide('show'); //调用函数 3-hide方法: 3-1：$elem.removeClass(self.activeClass); 3-2：$layer.showHide('hide'); //调用函数
• 站点导航
  • 1- 使所有的下拉框元素,具备dropdown功能 2- 绑定 nav_site_load 事件, 延迟加载下拉框子项 加载 this.data-load 路径的文件
• 搜索框
  • 暴露接口 search function Search($elem, options) { this.$elem = $elem;//当前的search框 this.options = options; this.$form = this.$elem.find('.search-form');//表单 this.$input = this.$elem.find('.search-input-box');//表单输入框 this.$layer = this.$elem.find('.search-layer');//下拉列表 this.loaded = false;//数据加载标识 this.$elem.on('click', '.search-btn', $.proxy(this.submit, this));//代理按钮的点击事件,更新上下文 if (this.options.autocomplete) this.autocomplete();//开启自动填写 }
  • 1-submit方法: 表单提交 2-autocomplete方法: 2-1 绑定$input的input事件,触发 getData() 2-2 绑定$input的focus事件，触发showLayer() 2-3 绑定$input的click事件， return false 2-4 执行$layer.showHide(), 使得 $layer 具备showHide功能 2-5 $(document)绑定click事件,触发 hideLayer() 3-getData方法：根据$input是否有值(缓存+ajax)触发 $elem 的'search-noData' 或 'search-getData'事件 4-showLayer方法： 执行 $layer.showHide('show') 显示元素 5-hideLayer方法： 执行 $layer.showHide('hide') 隐藏元素 6-getInputVal方法： 获取$input的值(剔除左右空格) 7-setInputVal(val)方法： 设置$input的值(剔除标签符号) 8-appendLayer(html)方法：执行 --->> this.$layer.html(html); this.loaded = !!html;//转化为boolean值
• 调用搜索框
  • 1-选中搜索框： $headerSearch = $('#header-search'); 3-绑定 'search-getData'事件： 组装下拉框的html,调用 $this.search('appendLayer', html); 函数 然后根据html是否有值调用 $this.search('showLayer') 或 $this.search('hideLayer') 4-绑定'search-noData'事件： $(this).search('hideLayer').search('appendLayer', '');// 没获得数据处理 5-代理子元素 .search-layer-item(下拉框的li) 的click事件： $headerSearch.search('setInputVal', $(this).html()); $headerSearch.search('submit'); 6-执行 $headerSearch.search({autocomplete: true, getDataInterval: 0});//初始化Search
• focus-商品分类
  • 1-选中所有下拉框元素: $('#focus-category').find('.dropdown') 1-1 调用 dropdown() // 使其具备下拉框功能, 1-2 绑定'focus_category_load' 事件；调用 loadOnce($(this), createCategoryDetails) 2-loadOnce($elem, success)方法：加载$elem元素data-load属性对应的文件；调用 success() 3-createCategoryDetails($elem, data)方法： 生成并替换$elem的下拉框(.dropdown-layer)的html
• move模块
  • 暴露接口move let move = function ($elem, options) { //$elem图片的父级div let mode = null; if (options.css3 && transition.isSupport) mode = new Css3($elem); // css3 transition else if (options.js) mode = new Js($elem);// js animation else mode = new Silent($elem); return {to: $.proxy(mode.to, mode), x: $.proxy(mode.x, mode), y: $.proxy(mode.y, mode) }; }; 返回包含 to x y 方法的对象
  • 1-init = function ($elem) 设置当前坐标: this.curX this.curY 为当前图片父元素div的left top 2-to = function (x, y, callback) x,y 是目的坐标 this.curX，this.curY 是当前坐标; 如果目的坐标==当前坐标 return 触发move 事件: this.$elem.trigger('move', [this.$elem]); 执行回调函数: callback(); 更新图片当前坐标为: this.curX = x; this.curY = y; 3-css3 3-1 初始化：$elem.addClass('transition'); 3-2 css3.to方法： to.call(this, x, y,callback) //this是当前图片父元素div 调用to方法； 回调函数: 1-关闭动画过渡完成事件,重新绑定一次性动画过渡完成事件； 触发 moved事件； self.$elem.trigger('moved', [self.$elem]); 2-更新当前图片的坐标：self.$elem.css({left: x, top: y}); 4-js 4-1 初始化：init.call(this, $elem); this.$elem.removeClass('transition'); 4-2 js.to方法： to.call(this, x, y，callback) //this是当前图片父元素div 回调函数：关闭之前的动画，重新执行动画，触发 moved事件 self.$elem.stop().animate( {left: x, top: y}, function () {self.$elem.trigger('moved', [self.$elem]);} ); 5-Silent 5-1 初始化： init.call(this, $elem); this.$elem.removeClass('transition'); 5-2 Silent.to方法： to.call(this, x, y,callback) 回调函数： 更新元素的left top; 触发 moved 事件 self.$elem.css({left: x, top: y}); self.$elem.trigger('moved', [self.$elem]);
• lazyLoad模块
  • 暴露接口: loadUntil 和 loadImages loadUntil: function (options) { let items = {}, loadedItemNum = 0, $elem = options.$container, //轮播图父元素 id = options.id, //focus loadItemFn = 函数 $elem.on(options.triggerEvent, loadItemFn); $elem.on(id + '-itemsLoaded', function () { $elem.off(options.triggerEvent, loadItemFn); }); } 概括描述: 1) 为$container元素绑定 slider-show 事件; 对应函数: loadItemFn() loadItemFn(e, index, elem) index:当前激活的索引 elem:当前激活的元素 如果当前index还没有加载过; 触发 focus-loadItem(e, index, elem, success)函数 success = function () { items[index] = 'loaded'; loadedItemNum++; //如果已经全部加载,触发 focus-itemsLoaded()事件 if (loadedItemNum === options.totalItemNum) $elem.trigger(id+'-itemsLoaded'); } 2) 为$container元素绑定 focus-itemsLoaded 事件 (表示数据已经全部加载完毕) 移除$container 的 slider-show 事件
    • loadItemFn = function (e, index, elem) { if (items[index] === 'loaded') return;//标识第index 是否已经加载过 $elem.trigger(id + '-loadItem', [index, elem, function () { items[index] = 'loaded'; loadedItemNum++; if (loadedItemNum === options.totalItemNum) $elem.trigger(id + '-itemsLoaded'); } ] ); }
  • 1-loadImages($images, success, fail) $images.each(function (_, el) {//el每张图片 let $image = $(el), url = $image.data('src'); 调用loadImage(url,imgLoaded, imgFailed) 参数: imgLoaded= function (url) { $image.attr('src', url); success(); } imgFailed = function (url) { fail(); }// 加载备用图片 2-loadImage(url, imgLoaded, imgFailed)： let image = new Image(); image.onerror = function () { //监听图片加载发生异常事件 if (typeof imgFailed === 'function') imgFailed(url); } image.onload = function () { //监听图片加载成功 if (typeof imgLoaded === 'function') imgLoaded(url); }; image.src = url;
• sliderShow模块
  • 暴露接口slideshow function SliderShow($elem, options) { this.$elem = $elem;//轮播图 this.options = options; this.$items = this.$elem.find('.slider-item');//图片 this.$indicators = this.$elem.find('.slider-indicator');//下标 this.$controls = this.$elem.find('.slider-control');//箭头 this.itemNum = this.$items.length; this.curIndex = this._getCorrectIndex(this.options.activeIndex); this._init(); } {css3: false, js: false, animation: 'fade', activeIndex: 0, interval: 0}
  • 1-init方法： 1-1 触发$elem 'slider-show'事件, (curIndex,curImage) 1-2 使curIndex对应的下标处于激活状态 1-3 初始化 this.to方法:轮播图的实现方式(有两种) 1-4 $elem事件绑定 鼠标移入移出 显示隐藏箭头 代理左右箭头 click事件: self.to(self._getCorrectIndex(self.curIndex - 1), 1); //左箭头 self.to(self._getCorrectIndex(self.curIndex + 1), -1); //右箭头 代理下标click事件： self.to(self._getCorrectIndex(self.$indicators.index(this))); 1-5 如果options.interval 大于0 this.$elem.hover($.proxy(this.pause, this), $.proxy(this.auto, this)); this.auto(); 2-_getCorrectIndex(index)方法: 返回一个合理的 index 3-_activateIndicators(index): 激活当前index对应的下标 4-_fade(index)： if (this.curIndex === index) return; this.$items.eq(this.curIndex).showHide('hide');//隐藏当前图片 触发$elem的'slider-show' (index, $items[index])事件； 加载目标图片,目标图片可能还没加载 this.$items.eq(index).showHide('show');//显示目标图片 this._activateIndicators(index);//更新激活的下标 this.curIndex = index;//更新当前激活的index 5-_slide(index, direction): if (this.curIndex === index) return; let self = this; 确定滑入滑出的方向(向左or向右) 设置指定滑入幻灯片的初始位置(index对应的图片) self.$items.eq(self.curIndex).move('x', direction * self.itemWidth); self.$items.eq(index).addClass(self.transitionClass).move('x', 0); self.curIndex = index; this._activateIndicators(index);//激活index对应的下标 6-auto 定时执行 this.to(curIndex + 1,-1) 方法 7-pause 移除定时器
    • 1-3 初始化 this.to （1）slide $elem.addClass('slider-slide') 使当前激活的图片 left=0 $items绑定 'move moved' 事件； let index = self.$items.index(this); move事件： index === self.curIndex; -->> self.$elem.trigger('slider-hide', [index, this]); index !== self.curIndex; -->> self.$elem.trigger('slider-show', [index, this]); moved事件： index === self.curIndex; -->> self.$elem.trigger('slider-shown', [index, this]); index !== self.curIndex; -->> self.$elem.trigger('slider-hidden', [index, this]); this.$items.move(this.options); //使其具备move功能 this.to = this._slide; this.itemWidth = this.$items.eq(0).width(); this.transitionClass = this.$items.eq(0).hasClass('transition') ? 'transition' : ''; （2）fade this.$elem.addClass('slider-fade'); this.$items.eq(this.curIndex).show(); //显示元素 绑定$items的show事件==>>触发 $elem的 'slider-show'事件; 参数是:图片索引,图片 this.$items.showHide(this.options);//使其具备showhide功能 this.to = this._fade;
• focus-center调用
  • 1-轮播图 (1-1) $focusSlider = $('#focus-slider');// 轮播图 $focusSlider.on('focus-loadItem',function (e, index, elem, success) { let $image = $(elem).find('.slider-img'); //elem是div $image.loadImages($image, success, function () { $image.attr('src', 'image/focus-slider/placeholder.png'); } ); } (1-2) $focusSlider.loadUntil({ $container: $focusSlider, totalItemNum: $focusSlider.find('.slider-img').length, triggerEvent: 'slider-show', id: 'focus' }); (1-3) $focusSlider.slideshow( {css3: true, js: false, animation: 'slide', activeIndex: 0, interval: 0} ); 2-今日推荐 (2-1) let $todaySlider = $('#today-slider'); $todaySlider.on('today-loadItem', function (e, index, elem, success) { let $image = $(elem).find('.slider-img');//elem是div $image.loadImages($image, success, function () { $image.attr('src', 'image/today-slider/placeholder.png'); } ); } ); (2-2) $todaySlider.loadUntil( { $container: $todaySlider, totalItemNum: $todaySlider.find('.slider-img').length, triggerEvent: 'slider-show', id: 'today' }); (2-3) $todaySlider.slideshow( {css3: true, js: false, animation: 'fade', activeIndex: 0, interval: 0} );