前端程序設計組件化方案簡述

程序設計組件化方案

拋出觀點

* View層 : 分層設計 組件化開發


Model層: 讓數據來做視圖掌控者</code></pre> 
組建化你的視圖(View)
 
視圖是前端開發最直觀的展示，涉及到頁面方方面面，聊天，列表，圖片，網頁等,我們自定義聊天頁面，
定義商品展示頁面，定義圖片展示頁面，瀑布展示頁面，后來才發現原來我們做的頁面都是一次性工作，
版本升級，頁面改版，之前所有的工作都是枉然了。
 
那么如何去組件化設計你的前端頁面呢？
 
首先來看兩個有代表性的前端頁面，最近雙11，小編截圖了天貓雙11首頁設計圖(由于不便于區分模塊，小編把頁面調成了黑白)。簡單分析下。
 
 
我們可以察覺其實天貓前端頁面其實有N多個模塊組成,例如
 
* 模塊1是熱銷商品展示頁面,這個頁面可能有運營添加部分在天貓付費推廣的商品

模塊2是商品分類 
模塊3是雙11會場商品精選 
模塊4是雙11商品推薦 可能針對用戶畫像推薦的商品
模塊5是雙11底部tabbar 雙11節日圖片icon</code></pre> 
整個天貓雙11頁面,直觀感受都是由不同的模塊開發，開發者在開發天貓首頁的過程當中，沒必要關注整個頁面是什么樣子的，任務按模塊分案發給不同的開發者。整個雙11首頁可能一共有100個模塊，天貓首頁只能顯示20個頁面，然后由運營來統籌管理這20個頁面，例如在雙11前15天的時候，開始宣傳雙11節日，這時候首頁主要放一些雙11介紹大圖，在進入11月的時候，運營更新搶紅包頁面，這樣子模塊化視圖開發，不單單利于頁面布局，而且利于運營推廣來做活動的分發和管理。
 
簡單舉一個反例，假如雙11之前沒有活動，頁面寫死。首頁banner圖 + 推薦的店鋪 + 推薦的商品 + 熱門商品，然后雙11前15天，開始開發雙11的版本，然后月底蘋果審核突然由于某個原因拒絕上架，這時候，雙11活動沒了，剁手黨們腫么辦？
 
同時組建化開發視圖利于功能的維護和拓展
 
這個說辭比較適合的方案是QQ的聊天的方案：可以先看下QQ聊天界面視圖
 
 
* 模塊1 系統消息view (系統時間)

模塊2 一個空白的view
模塊3 gif動態表情的view
模塊4 文字內容的view
模塊5 語音聊天View
其他未展示出來的模塊 小視頻模塊 紅包模塊 等</code></pre> 
看到如上的功能簡單模擬一個開發場景
 
《第一個月》

產品經理說 :"我想要一個聊天功能，只要有文字聊天就可以了"

程序員說："好"    


《第二個月》

產品經理說 "別的公司都有語音了，我們也加一個發語音功能吧"

程序員皺皺眉頭還是答應了
《第三個月》

產品經理跪下說："大爺，我們加一個發圖片的功能吧"

程序員想，好歹都跪了，干吧。
《第四個月》

產品經理來到程序員面前。還未開口

程序員："滾"</code></pre> 
  
在開發者開發項目過程當中，隨著項目的開發，項目功能的拓展似乎是必然的是，因為原先的需求不足以支撐現在的服務，而在原來的業務和代碼邏輯到底能不能支撐功能拓展呢。這是一個值得商榷的問題。
 
  
例如QQ的聊天頁面，可能隨著功能的開發，慢慢增加了圖片，表情，語音，視頻，紅包等功能。如何能夠去設計一個拓展性強的視圖呢。
 
  
答：組件化開發
 
  
首先大家都能看到這個頁面可以用TableView來做，每一條信息都是一個cell，那么我們可以針對不同的消息類型創建不同的cell。
 
  
* 普通文本消息 - 純文本cell   NormalTextCell


語音消息    - 語音消息cell  AudioCell
視頻消息    - 視頻消息cell  VideoCell
圖片消息    - 圖片消息cell  PictureCell
GIF表情消息 - GIF消息cell  GifCell
紅包消息    - 紅包消息cell  RedWalletCell
系統消息    - 系統消息cell  SystemMessageCell
空白消息    - 空白圖cell    BlankCell</code></pre> 
針對不同的消息類型，在當前視圖當中追加上響應的cell即可，每個模塊相互隔離，不相互關聯，同時響應模塊視圖進行更改的時候，找到對應的模塊也是很簡單的。怎么樣，是不是很爽。部分代碼如下。
 
- (UITableViewCell )tableView:(UITableView )tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

id obj = self.models[indexPath.row];
if ([obj isMemberOfClass:[ChatMessageCellModel class]]) {

  HRChatMessageCell *cell = [tableView dequeueReusableCellWithIdentifier:[ChatMessageCellModel identifier] forIndexPath:indexPath];
  [cell setBackgroundColor:[UIColor clearColor]];
  cell.model = obj;

  return cell;


}
if ([obj isMemberOfClass:[HRBaseTableViewCellModel class]]) {

  HRBaseTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:[HRBaseTableViewCellModel identifier] forIndexPath:indexPath];
  [cell setBackgroundColor:[UIColor clearColor]];

  return cell;

}
if ([obj isMemberOfClass:[HRCenterSystemMessageCellModel class]]) {

  HRCenterSystemMessageCell *cell = [tableView dequeueReusableCellWithIdentifier:[HRCenterSystemMessageCellModel identifier] forIndexPath:indexPath];
  cell.model = obj;
  [cell setBackgroundColor:[UIColor clearColor]];
  return cell;

}
if ([obj isMemberOfClass:[HRRemoteSpecialCellModel class]]) {

  HRRemoteSpecialCell *cell = [tableView dequeueReusableCellWithIdentifier:[HRRemoteSpecialCellModel identifier] forIndexPath:indexPath];
  cell.model = obj;
  [cell setBackgroundColor:[UIColor clearColor]];
  return cell;

}
return nil;
}</code></pre> 
根據獲取到不同的消息Model去返回不同的cell.
 
Web組件化開發
 
例如天貓雙11的圖用web組建化開發可以展示為
 
* 首頁Banner圖


banner 圖
多個可以水滾動的 banner
為你推薦 (其實也是一個banner圖)
底部tabbar</code></pre> 
如何來做這樣一個網站呢。基于模塊開發。每個模塊獨立成一個主體，以后在添加或者刪除響應的模塊的時候，相對會簡單很多。部分代碼可以展示如下
 
{{extentd("sloution://base/")}}


{{#block("bidy")}}
{{use ("muli://headbanner/",$data.modules[1])}}
{{use ("muli://banner/",$data.modules[2])}}
{{use ("muli://multi-banner/",$data.modules[3])}}
{{use ("muli://recommendbanner/",$data.modules[1])}}
{{use ("muli://floor/",$data.modules[4])}}
{{use ("muli://bottomTabbar/",$data.modules[5])}}</code></pre> 
  
讓數據來做視圖掌控者
 
  
數據是一個APP的靈魂，既然是靈魂就應該充當起靈魂的責任，就要負責起整個前端頁面的整個飲食起居，不然前端怎么知道我收到的數據是普通文本消息而不是一個視頻消息呢。所以視圖要和數據綁定。還是上代碼
 
  
數據和視圖綁定
 
  
@interface ChatMessageCellModel : HRBaseTableViewCellModel

@property(nonatomic,strong) HRMessageModel  *messageModel;
@property(nonatomic,copy) void(^tapImageHandle)(HRMessageModel model,UIImageView imageView);
@property(nonatomic,copy) void(^tapUserImageHandle)(HRMessageModel *model);
@end
@interface HRChatMessageCell : HRBaseTableViewCell
@property(nonatomic,strong) ChatMessageCellModel  *model;
+(CGFloat)cellHeightWithTableView:(UITableView )tableView cellModel:(ChatMessageCellModel )cellModel;
@end</code></pre> 
  
ChatMessageCellModel和HRChatMessageCell進行綁定，
 
  
 
   
 
    
 
     
模型
 
     
數據
 
    
 
   
 
   
 
    
 
     
ChatMessageCellModel
 
     
HRChatMessageCell
 
    
 
    
 
     
NormalTextCellModel
 
     
NormalTextCell
 
    
 
    
 
     
AudioCellModel
 
     
AudioCell
 
    
 
    
 
     
...
 
     
...
 
    
 
   
 
  
 
  
這樣當進入到一個聊天頁面時候，從網絡或者本地load了50條聊天記錄，轉化為對應的模型時，在 cellForRowAtIndexPath 里針對對應的model展示響應的cell視圖
 
  
數據控制前端視圖展示
 
  
類似天貓首頁的活動頁面通過運營的控制可以實現靈活的熱更新，在不用APP上架更新的情況下，動態更新首頁視圖。類似如下。
 
  
非雙11首頁展示數據
 
  
{
    data:{
        //首頁banner圖
        banner:{
            ...
        },
        //首頁菜單
        menu:{
            ...
        },
        //推薦店鋪
        recommendShop:{
            ...
        },
        //推薦商品
        recommendCommodity:{
            ...
        },
        //熱門店鋪
        hotShop:{
            ...
        },


},
code:1

}</code></pre> 
  
雙11首頁展示數據
 
  
{
    data:{
        // 雙11搶紅包模塊
        shuang11RedWallet:{
            ...
        },
        //雙11 熱店
        shuang11HotShop:{
            ...
        },
        //雙11 熱購商品
        shuang11HotCommodity:{
            ...
        },
        //雙11精選
        shuang11JingXuan:{
            ...
        },
        //雙11幫你挑
        shuang11HelpUChoose:{
            ...
        },
        //雙11 個人推薦
        shuang11Recommend:{
            ...
        },
        //雙11 tabbar icon圖標
        shuang11Icon:{


    }
},
code:1

}</code></pre> 
  
根據這些相應的數據，前端可以根據相應的邏輯構建響應的視圖界面效果，對前端進行模塊化更新。
 
  
 
 
  
來自：https://github.com/mgoofyy/module/blob/master/README.md