fe / YOHOBUYWAP · Commits

Go to a project

Authored by weiqingting
Commit 1cf3ebe40a5e6d6929f30fd7a2f8f75fc9cf0cfe 1 parent d6598687

代码审查

Inline Side-by-side
Showing 2 changed files with 136 additions and 93 deletions
  1 +
1 var $ = require('jquery'); 2 var $ = require('jquery');
2 3
3 4
4 -function infiniteLoad(options){  
5 - var defaults={  
6 - index:0,  
7 - isload:true,//是否正在加载  
8 - isrun:true,//判断是否执行  
9 - offset:{  
10 - height:new Function(),  
11 - width:new Function()  
12 - }  
13 - };  
14 - this.registerEvent = {  
15 - before: [], 5 +function infiniteLoad(options) {
  6 + var defaults = {
  7 + index: 0,
  8 + isload: true,//是否正在加载
  9 + isrun: true,//判断是否执行
  10 + offset: {
  11 + height: null,
  12 + width: null
  13 + }
  14 + };
  15 +
  16 + this.registerEvent = {
  17 + before: [],
16 change: [], 18 change: [],
17 after: [] 19 after: []
18 - };  
19 - this.options = $.extend(true, {}, defaults, options);  
20 - return this;  
21 -};  
22 - infiniteLoad.prototype.on = function (name, callback) { 20 + };
  21 +
  22 + this.options = $.extend(true, {}, defaults, options);
  23 +
  24 + return this;
  25 +}
  26 +
  27 +infiniteLoad.prototype.on = function(name, callback) {
23 var g = this; 28 var g = this;
24 var _e = g.registerEvent[name]; 29 var _e = g.registerEvent[name];
  30 +
25 if (_e) { 31 if (_e) {
26 _e.push(callback); 32 _e.push(callback);
27 } 33 }
28 return _e; 34 return _e;
29 }; 35 };
30 -infiniteLoad.prototype.off = function (name, callback) { 36 +
  37 +infiniteLoad.prototype.off = function(name, callback) {
31 var g = this; 38 var g = this;
32 var _e = g.registerEvent[name]; 39 var _e = g.registerEvent[name];
33 var e = []; 40 var e = [];
34 - $.each(_e, function (name, _callback) { 41 +
  42 + $.each(_e, function(name, _callback) {
35 if (_callback === callback) { 43 if (_callback === callback) {
36 e.push(name); 44 e.push(name);
37 } 45 }
38 }); 46 });
39 - $.each(e.reverse(), function (name, _callback) { 47 +
  48 + $.each(e.reverse(), function(name, _callback) {
40 _e.splice(_callback, 1); 49 _e.splice(_callback, 1);
41 }); 50 });
42 }; 51 };
43 -infiniteLoad.prototype.exect=function(key,params){  
44 - var g=this,p=this.options;  
45 - if (g.registerEvent[key]&&g.registerEvent[key].length > 0) {  
46 - for (_e in g.registerEvent[key]) {  
47 - g.registerEvent[key][_e](params); 52 +
  53 +infiniteLoad.prototype.exect = function(key, params) {
  54 + var g = this;
  55 + var e;
  56 +
  57 + if (g.registerEvent[key] && g.registerEvent[key].length > 0) {
  58 + for (e in g.registerEvent[key]) {
  59 + if (g.registerEvent[key].hasOwnProperty(e)) {
  60 + g.registerEvent[key][e](params);
  61 + }
48 } 62 }
49 } 63 }
50 }; 64 };
  65 +
51 infiniteLoad.prototype.init = function() { 66 infiniteLoad.prototype.init = function() {
52 - var g=this,p=this.options;  
53 - function __loadMore(){  
54 - if(p.isload&&g.__directionCalculation()){  
55 - p.isload=false;  
56 - p.index++;  
57 - g.exect("after",p);  
58 - }  
59 - g.exect("change",p);  
60 - }  
61 - g.exect("before",p);  
62 - $(window).scroll(__loadMore); 67 + var g = this;
  68 + var p = this.options;
  69 +
  70 + function __loadMore() {
  71 +
  72 + if (p.isload && g.__directionCalculation()) {
  73 + p.isload = false;
  74 + p.index++;
  75 + g.exect('after', p);
  76 + }
  77 +
  78 + g.exect('change', p);
  79 + }
  80 +
  81 + g.exect('before', p);
  82 +
  83 + $(window).scroll(__loadMore);
63 }; 84 };
64 -infiniteLoad.prototype.emit=function(){  
65 - var g=this,p=this.options;  
66 - p.isload=true; 85 +
  86 +infiniteLoad.prototype.emit = function() {
  87 + var p = this.options;
  88 +
  89 + p.isload = true;
67 }; 90 };
68 -infiniteLoad.prototype.__directionCalculation=function(){  
69 - var g=this,p=this.options;  
70 - if(p.offset.height()>0&&$(window).scrollTop() + $(window).height() >= p.offset.height()){  
71 - return true;  
72 - }  
73 - if(p.offset.width()>0&&$(window).scrollLeft() + $(window).width() >= p.offset.width()){  
74 - return true;  
75 - }  
76 - return false;  
77 -}  
78 -module.exports =infiniteLoad; 91 +
  92 +infiniteLoad.prototype.__directionCalculation = function() {
  93 + var p = this.options;
  94 +
  95 + if (p.offset.height() > 0 && $(window).scrollTop() + $(window).height() >= p.offset.height()) {
  96 + return true;
  97 + }
  98 +
  99 + if (p.offset.width() > 0 && $(window).scrollLeft() + $(window).width() >= p.offset.width()) {
  100 + return true;
  101 + }
  102 + return false;
  103 +};
  104 +
  105 +module.exports = infiniteLoad;
1 var $ = require('jquery'); 1 var $ = require('jquery');
2 -var Lazyload = require('yoho.lazyload');  
3 -var Handlebars=require('yoho.handlebars');  
4 -var infiniteLoad=require('../common/infiniteLoad'); 2 +
  3 +//var Lazyload = require('yoho.lazyload');
  4 +var Handlebars = require('yoho.handlebars');
  5 +var InfiniteLoad = require('../common/infiniteLoad');
  6 +
5 (function($) { 7 (function($) {
6 - var $container=$("div.commodity ul");  
7 - var $load=$(".loading");  
8 - var load=new infiniteLoad({  
9 - offset:{  
10 - height:function(){return parseFloat($container.offset().top)+parseFloat($container.height())}  
11 - }  
12 - });  
13 - load.on("after",function(p){  
14 - var options={ 8 + var $container = $('div.commodity ul');
  9 + var $load = $('.loading');
  10 + var load = new InfiniteLoad({
  11 + offset: {
  12 + height: function() {
  13 + return parseFloat($container.offset().top) + parseFloat($container.height());
  14 + }
  15 + }
  16 + });
  17 +
  18 + load.on('after', function(p) {
  19 + var options = {
15 type: 'POST', 20 type: 'POST',
16 url: '/boys/commodity', 21 url: '/boys/commodity',
17 data: { 22 data: {
18 pageIndex: p.index, 23 pageIndex: p.index,
19 - pageCount:10,  
20 - flag:'boy' 24 + pageCount: 10,
  25 + flag: 'boy'
21 }, 26 },
22 success: function(data) { 27 success: function(data) {
23 var code = data.code; 28 var code = data.code;
  29 + var myTemplate;
24 30
25 if (code === 200) { 31 if (code === 200) {
26 - var myTemplate = Handlebars.compile(load.tpl);  
27 - $container.append(myTemplate(data.commodity));  
28 - //懒加载插件貌似有点问题,图片先直接展示  
29 - //Lazyload($container.find('img.lazy'));  
30 - load.emit();  
31 - }else{  
32 - $load.html('END'); 32 +
  33 + myTemplate = Handlebars.compile(load.tpl);
  34 +
  35 + $container.append(myTemplate(data.commodity));
  36 +
  37 + //懒加载插件貌似有点问题,图片先直接展示
  38 + //Lazyload($container.find('img.lazy'));
  39 +
  40 + load.emit();
  41 + } else {
  42 +
  43 + $load.html('END');
33 } 44 }
34 }, 45 },
35 error: function() { 46 error: function() {
  47 +
36 $load.html('网络断开连接了~'); 48 $load.html('网络断开连接了~');
37 } 49 }
38 }; 50 };
  51 +
39 $.ajax(options); 52 $.ajax(options);
40 - //请求数据  
41 -  
42 -  
43 - });  
44 - load.on("before",function(){  
45 - //请求模板  
46 - load.tpl='{{#each this}}'  
47 - +'<li>'  
48 - +' {{# state}}'  
49 - +' <i class="commodity-tag{{.}}"></i>'  
50 - +' {{/ state}}'  
51 - +' <a href="{{url}}"><div class="commodity-img"><img class="lazy" data-original="{{img}}" src="{{img}}"/></div>'  
52 - +' <p class="commodity-name">{{name}}</p>'  
53 - +' <p class="commodity-price"><span>¥{{price}}</span></p>'  
54 - +' </a>'  
55 - +'</li>'  
56 - +'{{/each}}';  
57 -  
58 - load.emit();  
59 - })  
60 - load.init();  
61 -}($));  
  53 + });
  54 +
  55 + load.on('before', function() {
  56 +
  57 + //请求模板
  58 + load.tpl = '{{#each this}}';
  59 + load.tpl += '<li>';
  60 + load.tpl += ' {{# state}}';
  61 + load.tpl += ' <i class="commodity-tag{{.}}"></i>';
  62 + load.tpl += ' {{/ state}}';
  63 + load.tpl += ' <a href="{{url}}"><div class="commodity-img">';
  64 + load.tpl += ' <img class="lazy" data-original="{{img}}" src="{{img}}"/></div>';
  65 + load.tpl += ' <p class="commodity-name">{{name}}</p>';
  66 + load.tpl += ' <p class="commodity-price"><span>¥{{price}}</span></p>';
  67 + load.tpl += ' </a>';
  68 + load.tpl += '</li>';
  69 + load.tpl += '{{/each}}';
  70 +
  71 + load.emit();
  72 + });
  73 +
  74 + load.init();
  75 +}($));
  76 +
  77 +