查看单张照片的前端设计

 

 

先来图：

 

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

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

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

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

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

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

 

 

/**
 * 改变照片的事件监听器
 */
var PhotoChangeListener = Class.create({
    initialize:function(){},
   
    /**
     * 当改变照片时，该方法被调用
     * @param newPhotoId 改变的新的照片id
     * @param isNext boolean 是否是查看下一张图片
     */
    handlePhotoChange:function(newPhotoId,isNext){
       
    }
});

用js来定义接口实在是小题大作，不过，这样定义感觉上会更清楚明白一些。

这个监听器处理的代码是在handlePhotoChange里完成。

为此，我们还设计了一个所有照片的持有类，美其名曰：“封装”

/**
 * 照片集合的持有类
 * 当调用setCurrentPhoto时，会依次调用photoChangeListeners中的照片改变的事件监听器里的handlePhotoChange方法
 */
var PhotosHolder = Class.create({
    /**
     * @param photos 照片对象的列表
     */
    initialize:function(photos){
      
    },
   
    getPhotoNumber:function(){
      
    },
   
    /**
     * 得到某个photoId的photo对象
     * 如果不存在该photoId的photo，则返回null
     */
    getPhoto:function(photoId){
      
    },
   
    indexOfPhoto:function(photoId){
       
    },
   
    /**
     * 增加一个照片改变的监听器
     */
    addPhotoChangeListener:function(photoChangeListener){
       
    },
   
    /**
     * 设置某照片为当前的照片
     */
    setCurrentPhoto:function(photoId,isNext){
       
    },
   
    /**
     * 得到下一张照片，如果没有下一张照片，返回null
     */
    nextPhoto:function(){
       
    },
   
    /**
     * 得到上一张照片，如果没有上一张照片，返回null
     */
    previousPhoto:function(){
      
    },
   
    /**
     * 得到当前页面上显示的照片
     */
    getCurrentPhoto:function(){
     
    },
   
    /**
     * 得到第一张图片
     */
    getFirstPhoto:function(){
       
    },
   
    /**
     * 得到最后一张图片
     */
    getLastPhoto:function(){
       
    },
   
   
    /**
     * 增加一个照片标记信息
     * @param photoMentionInfo 标记信息对象
     */
    addPhotoMention:function(photoMentionInfo){
       
    },
   
    /**
     * 增加某张照片的一批标记信息
     */
    addPhotoMentions:function(photoId,mentions){
      
    },
   
    /**
     * 删除一个照片标记信息
     */
    removePhotoMention:function(mentionInfoId){
       
    },
   
    /**
     * 得到某照片的标记信息，如果不存在，则返回null
     */
    getPhotoMentions:function(photoId){
       
    }
});

 

 

 

这里给出了接口定义，具体的实现也不是很困难，我们重点注意这两个方 法：addPhotoChangeListener，setCurrentPhoto。方法addPhotoChangeListener用于将图片改变 的监听器注册到图片的持有者中，setCurrentPhoto方法用于客户端设置显示某一张图片，在setCurrentPhoto方法中，如果设置的 图片不是当前显示的图片，就会调用注册到该类的所有图片监听器的handlePhotoChange，剩下的工作就交给各个监听器处理了。

 

这里的设计思想是，解耦。我们可以将图片改变的动作和处理该图片改变的处理分开，往往处理逻辑需要很多，我们只需要增加一个PhotoChangeListener，然后注册到photosHolder就行了。

这里作为demo，给出照片信息显示的实现：

 

 

/**
 * 照片信息的显示类
 */
var PhotoInfoObserver = Class.create(PhotoChangeListener,{
    initialize:function($super,photosHolder){
        $super();
       
        this.createTime = $('createTime');    //上传时间
        this.hits = $('hits');    //浏览次数
        this.comments = $('comments');    //评论次数

        if(!this.createTime||!this.hits||!this.comments)    return;
       
        this.photosHolder = photosHolder;
        this.photosHolder.addPhotoChangeListener(this);
    },
   
    handlePhotoChange:function(newPhotoId){
        this.createTime.update('上传于：'+this.photosHolder.getCurrentPhoto().createTimeStr);
        this.hits.update('浏览('+this.photosHolder.getCurrentPhoto().hits+')');
        this.comments.update('评论('+this.photosHolder.getCurrentPhoto().comments+')');
    }
});

 

 

 

最终，我们将会实例化所有的处理类：

 

 

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);

 

 

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