需要实现类似下图的一个效果，达到导航图片的目的。
可以使用jquery去实现，但容易陷入怎么做的思维中，如果自己手写的话，就可以先思考做什么，然后再思考怎么做。（当然这里做什么指原型已确定的）
第一步：做什么[分析]？
我们要做一个图片导航，一屏显示5张图片，用户能点“上一张”/“下一张”按钮，实现移动切换图片，如果往前没有图片了则“上一张”是无效状态，如果往后没有图片了则“下一张”是无效状态。
对应到我们的问题域则需要几个对象来完成相应的职责:
1、应该有一个movePanel类，状态：它应该知道总共有多少张图片，一屏显示多少张，当前显示的是哪些，还能不能向前或向后移动了；行为：它有last()和next()方法，分别表示向前或向后移动图片的功能。
function movePanel(totalCount,showNum){
var curStep=0;
this.getCanLast=function(){};
this.getCanNext=function(){};
this.last=function(){};
this.next=function(){};
}但是有一个问题，没有通知“上一张”/“下一张”按钮的状态切换，所以movePanel还一个通知外界自己状态改变的方法
function notify(){}还有原型未列出，但出于性能考虑，需要图片预加载
function loadImg(){}
2、原型要求点击按钮后，需要移动的切换图片，即是一个动画效果，我们需要一个做移动类mover，状态：它知道自己所处的坐标；行为：以某种速度移动到另一个坐标；回调函数：当它移动时每一帧的坐标通知给外界，以及到达指定坐标后通知外界。我们通过回调方式，让外界知道当前的状态，而不是直接修改页面元素的坐标，达到解耦目的。
function mover(posX, posY) {
this.moveTo = function (posX, posY, speed, frequencyfn, endfn) { };
}明确了问题域和相应的职责，即确定了要做什么？接下来是怎么做了。
第二步：怎么做[设计]？
1、实现movePanel类
先实现它的getCanLast和getCanNext两个状态，根据当前位置curStep和总长度totalCount去计算得到相应的状态
this.getCanLast=function(){
if(curStep==0) return false;
return true;
};
this.getCanNext=function(){
if(curStep+showNum>=totalCount) return false;
return true;
};
显然movePanel类中的last()/next()方法是依赖于mover类的，而mover类目前还有没实现，所以我们先用todo占个位。
this.last=function(){
if(!this.getCanLast()) return;
//…todo向前移动的代码
curStep--;
};
this.next=function(){
if(!this.getCanNext()) return;
//…todo向后移动的代码
curStep++;
}
关于通知外界的notify()，我们很自然的想到observer模式，需要一个注册方法和一个观察者队列
var subscriberArray=[];
var me=this;
this.register=function(fn){
subscriberArray.push(fn);
}
function _notify(){
for(var i in subscriberArray){
subscriberArray[i](me);
}
}
由于notify并不会被外界调用，把它设计成私有的，还需要将notify放在last()/next()方法体的最后。
由于register()必须在构建movePanel的实例后才得调用，所以必须增加一个类似初始化显示图片的方法show()，在register()调用后再执行，而不能直接放在movePanel构造函数内。
this.show = function () {
for (var i = 0; i < showNum; i++) {
_loadImg();
}
_notify();
}
假设我们一个加载图片的私有方法loadImg()，关于预加载图片，开始时预加载一张，并在执行next()后，根据情况再进行预加载。所以需要修改show()方法和next()/last()方法，并用一个变量bufferImgCount来跟踪缓存中的图片数量
var bufferImgCount = 0;
this.last = function(){
if (!this.getCanLast()) return;
//…todo向前移动的代码
bufferImgCount++;
curStep--;
};
this.next = function(){
if(!this.getCanNext()) return;
//…todo向后移动的代码
bufferImgCount--;
if (bufferImgCount == 0 && _loadImg())
bufferImgCount++;
curStep++;
}
this.show = function () {
for (var i = 0; i <= showNum; i++) { //include one buffer img
_loadImg();
}
bufferImgCount = 1;
_notify();
}
接下来就要实现 loadImg()方法，这个方法要根据当前已加载的情况，去加载下一个的图片，所以我们需要在movePanel类中增加一个alreadyCreateCount的变量，等等，这个变量其他方法会用到吗，好像不会，那么干嘛不设计成一个闭包，让变量存在闭包中，不去污染movePanel的空间
var _loadImg = (function () {
var alreadyCreateCount = 0;
return function () {// closure function
if (alreadyCreateCount == totalCount) return false;
_createImgByIndexfn(alreadyCreateCount);
alreadyCreateCount++;
return true;
}
})();
其中createImgByIndexfn是回调函数，用于调用具体创建图片的方法，这也跟页面相关，所以不放在这个问题域中。
至此，我们的代码成这样
function movePanel(totalCount, showNum) {
var subscriberArray=[];
var me=this;
var bufferImgCount = 0;
this.getCanLast=function(){
if(curStep==0) return false;
return true;
};
this.getCanNext=function(){
if(curStep+showNum>=totalCount) return false;
return true;
};
this.register=function(fn){
subscriberArray.push(fn);
}
this.last = function(){
if (!this.getCanLast()) return;
//…todo向前移动的代码
bufferImgCount++;
curStep--;
_notify();
};
this.next = function(){
if(!this.getCanNext()) return;
//…todo向后移动的代码
bufferImgCount--;
if (bufferImgCount == 0 && _loadImg())
bufferImgCount++;
curStep++;
_notify();
}
this.show = function (createImgByIndexfn) {
_createImgByIndexfn = createImgByIndexfn;
for (var i = 0; i <= showNum; i++) { //include one buffer img
_loadImg();
}
bufferImgCount = 1;
_notify();
}
var _createImgByIndexfn = function (index) { }; //callback
var _loadImg = (function () {
var alreadyCreateCount = 0;
return function () {// closure function
if (alreadyCreateCount == totalCount) return false;
_createImgByIndexfn(alreadyCreateCount);
alreadyCreateCount++;
return true;
}
})();
function _notify(){
for(var i in subscriberArray){
subscriberArray[i](me);
}
}
}
2、实现mover类
mover类就一个moveTo()方法，要实现它有动画效果，在一定时间内持续移动一定的距离，我们需要一点动画的知识，当连续变化的影像为每秒25次的速度就能给人流畅的感觉，我们就以25/1000为基准，去调节动画移动的快慢，需要借助setTimeout()方法，在适当的时候去执行坐标的变化。如果考虑可用性，我们可以给移动速度一些默认选项（快/中/慢）。
function mover(posX, posY) {
this.posX = posX;
this.posY = posY;
this.speedCfg = { 'slow': 2000, 'normal': 1000, 'fast': 500 };
this.frequency = 25.0 / 1000; //25 frames per second
var me = this;
this.moveTo = function (posX, posY, speed, frequencyfn, endfn) {
if (typeof (speed) == 'string') {
if (!speed in this.speedCfg) { speed = 'normal'; }
speed = this.speedCfg[speed];
}
var steps = speed * this.frequency;
var distanceX = (posX - this.posX) / steps;
var distanceY = (posY - this.posY) / steps;
for (var i = 0; i < steps - 1; i++) {
setTimeout(function () {
me.posX += distanceX;
me.posY += distanceY;
frequencyfn(me.posX, me.posY);
}, (1 / this.frequency) * (i + 1));
}
setTimeout(function () {
this.posX = posX;
this.posY = posY;
endfn(this.posX, this.posY);
}, (1 / this.frequency) * steps);
};
}
我们可以看到，代码中只是纯计算，并不依赖其他页面元素或其他第三方框架，这样是方便测试的，我们只需填上合适的值，就可以看到是否是期望的结果。
<html> <body> <div id='begin'> begin: </div> <div id='frame'> frame: </div> <div id='end'> end: </div> </body> </html> <script> function mover(posX, posY) { this.posX = posX; this.posY = posY; this.speedCfg = { 'slow': 2000, 'normal': 1000, 'fast': 500 }; this.frequency = 25.0 / 1000; var me = this; this.moveTo = function (posX, posY, speed, frequencyfn, endfn) { if (typeof (speed) == 'string') { if (!speed in this.speedCfg) { speed = 'normal'; } speed = this.speedCfg[speed]; } var steps = speed * this.frequency; var distanceX = (posX - this.posX) / steps; var distanceY = (posY - this.posY) / steps; for (var i = 0; i < steps - 1; i++) { setTimeout(function () { me.posX += distanceX; me.posY += distanceY; frequencyfn(me.posX, me.posY); }, (1 / this.frequency) * (i + 1)); } setTimeout(function () { this.posX = posX; this.posY = posY; endfn(this.posX, this.posY); }, (1 / this.frequency) * steps); }; } var dt=new Date(); document.getElementById('begin').innerHTML += '<br/>(X:' + 10 + ' Y:' + 20 + ') @ '+ dt.getSeconds()+"."+dt.getMilliseconds(); new mover(10,20).moveTo( 60, 80, 'normal', function (x, y) { var dt=new Date(); document.getElementById('frame').innerHTML += '<br/>(X:' + x + ' Y:' + y + ') @ '+ dt.getSeconds()+"."+dt.getMilliseconds(); }, function (x, y) { var dt=new Date(); document.getElementById('end').innerHTML += '<br/>(X:' + x + ' Y:' + y + ') @ '+ dt.getSeconds()+"."+dt.getMilliseconds(); } ); </script>
3、使用mover去实现movePanel中的相关方法
我们使用mover实例来具体实现movePanel中的last()/next()方法，由于动画是异步的，所以原先在last()/next()中的todo后面代码需要放在动画结束的回调函数中。
而mover.moveTo所需的相关回调函数，movePanel拦截后，并作为last()/next()方法的参数，供调用方定制。
mover需要当前坐标才能初始化，所以movePanel需要维持当前坐标的变量curPos，curPos的初始化由movePanel参数提供。
具体实现如下
var curPos = { 'x': curLeft, 'y': curTop };
this.last = function (speed, frequencyfn, endfn) {
if (!this.getCanLast()) return;
new mover(curPos.x, curPos.y).moveTo(
_getLastPos().x, _getLastPos().y, speed, frequencyfn,
function (x, y) {
endfn(x, y);
curPos.x = x;
curPos.y = y;
bufferImgCount++;
curStep--;
_notify();
}
);
};
this.next = function (speed, frequencyfn, endfn) {
if (!this.getCanNext()) return;
new mover(curPos.x, curPos.y).moveTo(
_getNextPos().x, _getNextPos().y, speed, frequencyfn,
function (x, y) {
endfn(x, y);
curPos.x = x;
curPos.y = y;
bufferImgCount--;
if (bufferImgCount == 0 && _loadImg())
bufferImgCount++;
curStep++;
_notify();
}
);
};
这里_getLastPos()/_getNextPos()方法是取得上一坐标/下一坐标的私有方法，mover是支持任意坐标间的移动的，但在我们movePanle只需支持横向和纵向就可以，我们需要确定 方向 与 步长 即可计算出下一坐标的值了。这里采用了表驱动的做法，利于减少不必要的if/else，另外如果需要增加新的方向，只需在directCfg增加一个配置即可。
var directCfg = { 'horizontal': [1, 0, -1, 0], 'vertical': [0, 1, 0, -1] }; //table-driven
function _getLastPos() {
return { 'x': curPos.x + directCfg[direct][0] * stepLen,
'y': curPos.y + directCfg[direct][1] * stepLen
};
}
function _getNextPos() {
return { 'x': curPos.x + directCfg[direct][2] * stepLen,
'y': curPos.y + directCfg[direct][3] * stepLen
};
}
第三步：怎么用[调用]？
可以看出movePanel/mover没有依赖页面元素，但最终页面图片的创建是需要依赖这些的。所以需要在调用时将这些依赖通过回调的方式传进去。以下是调用一个示例
var imgList = [//初始化图片列表
{ title: 'A',
src: 'http://img3.douban.com/icon/u1386103-5.jpg'
},
{ title: 'B',
src: 'http://img3.douban.com/icon/u4134736-7.jpg'
},
{ title: 'C',
src: 'http://img3.douban.com/icon/u1364691-1.jpg'
},
{ title: 'D',
src: 'http://img3.douban.com/icon/u4616093-4.jpg'
},
{ title: 'E',
src: 'http://img3.douban.com/icon/u43504680-2.jpg'
},
{ title: 'F',
src: 'http://img3.douban.com/icon/u4523892-23.jpg'
},
{ title: 'G',
src: 'http://img3.douban.com/icon/u1901783-16.jpg'
},
{ title: 'H',
src: 'http://img3.douban.com/icon/u1332495-14.jpg'
},
{ title: 'I',
src: 'http://img3.douban.com/icon/u3919874-2.jpg'
},
{ title: 'J',
src: 'http://img3.douban.com/icon/u31834465-48.jpg'
}
];
//初始化panel，确定起始坐标，方向，步长，图片数量，显示数量
var panel = new movePanel(0, 5, 'horizontal', 39, imgList.length, 4);
panel.register(function (p) {//侦听并更新按钮状态
if (p.getCanLast())
document.getElementById('btnLast').disabled = false;
else
document.getElementById('btnLast').disabled = true;
});
panel.register(function (p) {
if (p.getCanNext())
document.getElementById('btnNext').disabled = false;
else
document.getElementById('btnNext').disabled = true;
});
panel.show(function (index) {//显示，并传入创建图片的回调函数
var img = document.createElement('IMG');
img.src = imgList[index].src;
img.title = imgList[index].title;
document.getElementById('imgs').appendChild(img);
});
document.getElementById('btnLast').onclick = function () {
panel.last('fast', function (x, y) {//响应每一帧的变化
document.getElementById('imgs').style.left = x + 'px';
}, function (x, y) {
document.getElementById('imgs').style.left = x + 'px';
});
};
document.getElementById('btnNext').onclick = function () {
panel.next('fast', function (x, y) {
document.getElementById('imgs').style.left = x + 'px';
}, function (x, y) {
document.getElementById('imgs').style.left = x + 'px';
});
};
这一部份是比较容易变化的区域，比如想用A标签来代替现在的button，创建图片的过程中会加入其他事件等等，如果在这里觉得改变按纽状态，或创建图片比较复杂时，可以考虑使用jquery或者第三方的库（但不能一开始分析问题域时就使用第三方的库）。
完整的代码与示例：
<html> <head> <style> div#content1 {position:relative; width:158px; height:50px; overflow:hidden; padding:0; } div#imgs1 {position:absolute; top:5px; width:1000px; height:40px; padding:0; } div#imgs1 img {margin:2px; width:35px; height:35px; display:block; float:left; } div#content2 {position:relative; width:50px; height:182px; overflow:hidden; padding:0; } div#imgs2 {position:absolute; left:5px; width:40px; height:1000px; padding:0; } div#imgs2 img {margin:2px; width:35px; height:35px; display:block; } </style> </head> <body> <div id='content1'> <div id='imgs1'></div> </div> <input type='button' id='btnLast1' value="last" /> <input type='button' id='btnNext1' value="next" /> <br/> <br/> <div id='content2'> <div id='imgs2'></div> </div> <br/> <input type='button' id='btnLast2' value="last" /> <input type='button' id='btnNext2' value="next" /> </body> </html> <script> /*API Begin*/ function mover(posX, posY) { this.posX = posX; this.posY = posY; this.speedCfg = { 'slow': 1500, 'normal': 1000, 'fast': 500 }; this.frequency = 25.0 / 1000; var me = this; this.moveTo = function (posX, posY, speed, frequencyfn, endfn) { if (typeof (speed) == 'string') { if (!speed in this.speedCfg) { speed = 'normal'; } speed = this.speedCfg[speed]; } var steps = speed * this.frequency; var distanceX = (posX - this.posX) / steps; var distanceY = (posY - this.posY) / steps; for (var i = 0; i < steps - 1; i++) { setTimeout(function () { me.posX += distanceX; me.posY += distanceY; frequencyfn(me.posX, me.posY); }, (1 / this.frequency) * (i + 1)); } setTimeout(function () { this.posX = posX; this.posY = posY; endfn(this.posX, this.posY); }, (1 / this.frequency) * steps); }; } function movePanel(curLeft, curTop, direct, stepLen, totalCount, showNum) { var me = this; var curPos = { 'x': curLeft, 'y': curTop }; var directCfg = { 'horizontal': [1, 0, -1, 0], 'vertical': [0, 1, 0, -1] }; //table-driven var subsciberArray = []; var curStep = 0; var bufferImgCount = 0; var isMoving = false; this.register = function (fn) { subsciberArray.push(fn); }; this.getCanLast = function () { if (curStep == 0) return false; return true; }; this.getCanNext = function () { if (curStep + showNum >= totalCount) return false; return true; }; this.last = function (speed, frequencyfn, endfn) { if (!this.getCanLast()) return; if (isMoving) return; isMoving = true; new mover(curPos.x, curPos.y).moveTo( _getLastPos().x, _getLastPos().y, speed, frequencyfn, function (x, y) { endfn(x, y); curPos.x = x; curPos.y = y; bufferImgCount++; curStep--; _notify(); isMoving = false; } ); }; this.next = function (speed, frequencyfn, endfn) { if (!this.getCanNext()) return; if (isMoving) return; isMoving = true; new mover(curPos.x, curPos.y).moveTo( _getNextPos().x, _getNextPos().y, speed, frequencyfn, function (x, y) { endfn(x, y); curPos.x = x; curPos.y = y; bufferImgCount--; if (bufferImgCount == 0 && _loadImg()) bufferImgCount++; curStep++; _notify(); isMoving = false; } ); }; this.show = function (createImgByIndexfn) { _createImgByIndexfn = createImgByIndexfn; for (var i = 0; i <= showNum; i++) { _loadImg(); } bufferImgCount = 1; _notify(); } var _createImgByIndexfn = function (index) { }; var _loadImg = (function () { var alreadyCreateCount = 0; return function () { if (alreadyCreateCount == totalCount) return false; _createImgByIndexfn(alreadyCreateCount); alreadyCreateCount++; return true; } })(); function _notify() { for (var i in subsciberArray) subsciberArray[i](me); } function _getLastPos() { return { 'x': curPos.x + directCfg[direct][0] * stepLen, 'y': curPos.y + directCfg[direct][1] * stepLen }; } function _getNextPos() { return { 'x': curPos.x + directCfg[direct][2] * stepLen, 'y': curPos.y + directCfg[direct][3] * stepLen }; } } /*API end*/ var imgList = [ { title: 'A', src: 'http://img3.douban.com/icon/u1386103-5.jpg' }, { title: 'B', src: 'http://img3.douban.com/icon/u4134736-7.jpg' }, { title: 'C', src: 'http://img3.douban.com/icon/u1364691-1.jpg' }, { title: 'D', src: 'http://img3.douban.com/icon/u4616093-4.jpg' }, { title: 'E', src: 'http://img3.douban.com/icon/u43504680-2.jpg' }, { title: 'F', src: 'http://img3.douban.com/icon/u4523892-23.jpg' }, { title: 'G', src: 'http://img3.douban.com/icon/u1901783-16.jpg' }, { title: 'H', src: 'http://img3.douban.com/icon/u1332495-14.jpg' }, { title: 'I', src: 'http://img3.douban.com/icon/u3919874-2.jpg' }, { title: 'J', src: 'http://img3.douban.com/icon/u31834465-48.jpg' } ]; /*sample 1 begin*/ var panel1 = new movePanel(0, 5, 'horizontal', 39, imgList.length, 4); panel1.register(function (p) { if (p.getCanLast()) document.getElementById('btnLast1').disabled = false; else document.getElementById('btnLast1').disabled = true; }); panel1.register(function (p) { if (p.getCanNext()) document.getElementById('btnNext1').disabled = false; else document.getElementById('btnNext1').disabled = true; }); panel1.show(function (index) { var img = document.createElement('IMG'); img.src = imgList[index].src; img.title = imgList[index].title; document.getElementById('imgs1').appendChild(img); }); document.getElementById('btnLast1').onclick = function () { panel1.last(200, function (x, y) { document.getElementById('imgs1').style.left = x + 'px'; document.getElementById('btnNext1').disabled = true; document.getElementById('btnLast1').disabled = true; }, function (x, y) { document.getElementById('imgs1').style.left = x + 'px'; document.getElementById('btnNext1').disabled = false; document.getElementById('btnLast1').disabled = false; }); }; document.getElementById('btnNext1').onclick = function () { panel1.next(200, function (x, y) { document.getElementById('imgs1').style.left = x + 'px'; document.getElementById('btnNext1').disabled = true; document.getElementById('btnLast1').disabled = true; }, function (x, y) { document.getElementById('imgs1').style.left = x + 'px'; document.getElementById('btnNext1').disabled = false; document.getElementById('btnLast1').disabled = false; }); }; /*sample 1 end*/ /*sample 2 begin*/ var panel2 = new movePanel(5, 0, 'vertical', 37, imgList.length, 5); panel2.register(function (p) { if (p.getCanLast()) document.getElementById('btnLast2').disabled = false; else document.getElementById('btnLast2').disabled = true; }); panel2.register(function (p) { if (p.getCanNext()) document.getElementById('btnNext2').disabled = false; else document.getElementById('btnNext2').disabled = true; }); panel2.show(function (index) { var img = document.createElement('IMG'); img.src = imgList[index].src; img.title = imgList[index].title; document.getElementById('imgs2').appendChild(img); }); document.getElementById('btnLast2').onclick = function () { panel2.last(200, function (x, y) { document.getElementById('imgs2').style.top = y + 'px'; document.getElementById('btnNext2').disabled = true; document.getElementById('btnLast2').disabled = true; }, function (x, y) { document.getElementById('imgs2').style.top = y + 'px'; document.getElementById('btnNext2').disabled = false; document.getElementById('btnLast2').disabled = false; }); }; document.getElementById('btnNext2').onclick = function () { panel2.next(200, function (x, y) { document.getElementById('imgs2').style.top = y + 'px'; document.getElementById('btnNext2').disabled = true; document.getElementById('btnLast2').disabled = true; }, function (x, y) { document.getElementById('imgs2').style.top = y + 'px'; document.getElementById('btnNext2').disabled = false; document.getElementById('btnLast2').disabled = false; }); }; /*sample 2 end*/ </script>
结论：
“做什么”，根据需求，建立问题域，分析相应的职责与协作，这其实是面向对象分析的范畴（问题域其实与具体实现语言的关联性并不大）。
“怎么做”，根据建立的问题域，利用一些设计手法，尽可能无依赖（第三方库/框架/浏览器特性/页面元素等）的实现相应的类或函数，将易变的部分解耦（javascript的编程既可使用面向对象的技术来解依赖，如例子中的observer，也有它自己的一些方式，如闭包，回调，表驱动等），并适当考虑更好的复用。这部分属于API设计与实现范畴。
“怎么用”，根据已实现API，进行调用，既依赖于API，也可能依赖于第三方库，包括结合CSS和HTML达到想要的效果，处于易变区域。属于实现与配置范畴。
扫一扫
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
