查看单张相片的前端设计

查看单张照片的前端设计

?

?

先来图：

?

这张图是查看单张照片的界面。

现在的问题是，如何设计和实现这张页面。

大家注意到，随着图片的改变，页面是不刷新的，也就是说你查看另外一张图片时，页面中的很多信息需要同步修改，如下图:

还有一块很重要的信息，那就是图片的评论，也需要随之改变。

我们的要求是，实现这个功能的代码需要清楚，模块化，容易维护，扩展容易。

现在我们的难题似乎是图片改变的同时，其他的信息用一种什么方式随之改变，我们这里定义了一个接口：

?

?

this.photosHolder = new PhotosHolder(photos);this.croperHandler = new CroperHandler(this.photosHolder);    //照片圈人this.carouselHandler = new CarouselHandler(this.photosHolder);    //照片导航this.photoDeleter = new PhotoDeleter(this.photosHolder);    //删除照片的工具类this.pageSetter = new PageSetter(this.photosHolder);    //设置为封面的工具类this.originalPhotoView = new OriginalPhotoView(this.photosHolder);    //原图查看的工具类this.descEditObserver = new DescEditObserver(this.loginUserId,this.photosHolder);//描述信息修改this.photoInfoObserver = new PhotoInfoObserver(this.photosHolder);//照片浏览评论等信息显示this.exifInfoObserver = new ExifInfoObserver(this.photosHolder);//exif信息显示this.photoComment = new PhotoComment(this.photosHolder,this.loginUserId,this.loginUserHead);//照片评论this.photoNumObserver = new CurrentPhotoNumObserver(this.photosHolder);//当前照片序号显示this.hitsIncreaseObserver = new HitsIncreaseObserver(this.photosHolder);//浏览数递增的观察器this.statObserver = new StatObserver(this.photosHolder);//页面浏览统计的观察器this.photosHolder.setCurrentPhoto(this.photoId);

?

如果哪一部分需要改变，只需要定位到该部分做修改；如果我们需要增加新的逻辑，只要增加一个类就行。