每日精选-秒杀代码分享
线上效果图
分享目录
- 代码解析
- 遇到的问题及解决方法
- 知识点总结
第一版JS
缺点：
1、代码都在一个函数下
2、代码耦合性太高
3、没有错误处理机制
代码模块化
模块是任何大型应用程序架构中不可缺少的一部分，模块可以使我们清晰地分离和组织项目中的代码单元。在项目开发中，通过移除依赖，松耦合可以使应用程序的可维护性更强。与其他传统编程语言不同，在当前JavaScript里，并没有提供原生的、有组织性的引入模块方式。目前的常见模块化解决方案有：
函数封装
function fn1(){
statement
}
function fn2(){
statement
}我们在讲函数的时候提到，函数一个功能就是实现特定逻辑的一组语句打包，而且JavaScript的作用域就是基于函数的，所以把函数作为模块化的第一步是很自然的事情，在一个文件里面编写几个相关函数就是最开始的模块了
这种做法的缺点很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没什么关系。
对象
var myModule = {
var1: 1,
var2: 2,
fn1: function(){
},
fn2: function(){
}
}
myModule.fn2();var myModule = (function(){
var var1 = 1;
var var2 = 2;
function fn1(){
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();使用"立即执行函数"，可以达到不暴露私有成员的目的。
$(function(){
var goodsList = [];
var gid = '';
var timesGroup = [];
var currDisplay = '';
var nextDisplay = '';
var goodsSkus = [];
var comments = [];
var num = 5;
var clock;
//缓存DOM
var doTimes = $('.h-do-times');
var doingTimes = $('.h-doing-times');
var $countDown = $('#countdown');
//倒计时
function timecount () {
}
//渲染页面
function renderUl(goodsList) {
}
//获取评论
function getComments(skuIds) {
}
//获取商品列表
function init () {
}
init();
});本次项目使用的是函数封装方法，基本结构如下：
线上代码讲解
遇到的问题及对应的解决方案
- 超级秒杀抢空——通过字段过滤抢空商品
- 整点切换场次——定时器里判断，整点刷新页面
- 托底数据——备用接口
知识点总结
这个项目主要就是接口的调用，然后拿到数据做对应的处理，我在项目里总结了几点需要注意的：
1、变量的命名，JS里面变量使用驼峰式命名；
2、代码分模块，做好注释，以方便后期维护；
3、jsonp的一个小技巧，jQuery jsonp无法捕获404、500状态错误，只要加上timeout参数即可；
Thank you!
每日精选-秒杀
By Phoebe Li
