Json 視圖化編輯工具

時間  2019-11-16
標籤 json 視圖 編輯 工具 欄目 JavaScript 简体版
原文   原文鏈接

demo地址git

pod 導入: pod 'PYJsonViewManager'github

簡介

描述

BaseJsonViewController是一個用OC編寫的提供了搜索、插入、編輯、查看路徑、複製json/value等功能的Json可視化編輯工具。objective-c

因爲網絡數據請求下來後，APP端對json原數據的展現並不明朗。 修改網絡數據只能經過Charles等抓包工具實現，受到的限制太多，因此誕生了在APP端直接對json進行查看、修改的Json視圖工具:BaseJsonViewController。json

後續會對BaseJsonViewController進行持續的更新優化，歡迎使用。數組

主要功能

json結構展現：

  1. 一鍵壓縮/展開 ： 點擊👀all 展開所有，點擊🦆…壓縮所有（須要注意的是，若是進行了壓縮，處在插入狀態的cell，將被刪除）。
  2. 添加了層級的背景色、縮進等。默認最大展現6個層級，若是超過6個層級則跳轉到新的頁面，進行展現。
  3. 對類型的區分：分爲Dictionary Array String Number。
  4. 支持展開與收起功能，若是有子節點，則單擊能夠展開\收起。
  5. value的展現：一行cell 的 value默認最多展現兩行。若是超過兩行則壓縮，並在底部展現。

搜索功能：

點擊放大鏡能夠進入搜索頁面緩存

在源碼中的位置：BaseJsonViewController->BaseJsonViewMainView->BaseJsonHeaderView->BaseJsonViewSearchView網絡

  1. 搜索關鍵詞：輸入關鍵詞，而且會自動進行搜索。iphone

  2. 精準搜索：若是選中精準搜索，搜索策略將從containsString 變成 isEqualToString。工具

注意：無論是否爲精準搜索，都區分大小寫。優化

  1. 搜索Editing：若是選中【搜Editing】按鈕，則會搜索整個json中處在Editing狀態並符合關鍵詞搜索的數據。

注意：若是有處在插入狀態的數據，這時候會自動被刪除。

  1. 上一個\下一個：當搜索完成後，點擊【上一個】、【下一個】自動跳轉到相應的行。

  2. 查看總覽：跳轉到一個搜索結果總覽控制器，顯示了搜索結果的路徑及`value

  3. 展現路徑/搜索數量：當沒有搜索條件(即：沒有搜索詞 、且搜Editing處於非選中狀態)時，顯示的是本控制器節點的路徑。不然顯示的是搜索結果數量。

  4. 展現路徑/報錯信息：具備滾動、放大功能，最大放大倍數爲1倍

  5. 當搜索條件報錯時，展現的是紅色的報錯信息。

  6. 當有搜索內容時，展現的是當前選中的搜索結果的節點路徑，

刪除功能

側滑cell，出現刪除功能(注意，由於側滑功能比較多，因此在iphone5上面會致使刪除功能被遮擋)

複製功能

複製功能分爲兩種：

  1. 若是側滑cell對應的節點爲Array 或Dictionary 則會只能複製 json
  2. 若是側滑cell 對應的節點爲String或Number則能夠複製json與value

編輯功能

側滑cell，並點擊編輯按鈕開啓編輯功能(下面把被編輯的節點稱爲Model,把Model的父節點稱爲SuperModel)。

  1. SuperModel類型對Model的key 的影響：

  2. SuperModel點爲Array類型：Model的key必須爲空。

  3. SuperModel爲Dictionary類型：Model的key必須有值。

  4. 點擊取消按鈕：取消全部修改。

  5. 點擊完成按鈕：

  6. 選中Number按鈕，轉成Numbser類型，輸入的值必須爲數字，不然會報錯，並在報錯位置進行顯示。

  7. 選中String按鈕，轉成String類型，會有個默認值，默認值爲""。

  8. 選中json按鈕：

    1. 若是Model爲Array類型，則會把jons解析出來做爲Model的子節點數據
    2. 若是Model爲Dictionary類型，則會直接解析Json，若是json內包含一個對象則該對象做Model的數據，把對象的Key做爲Model的key。

  9. 選中Dictionary按鈕：

    1. 若是Model爲Dictionary類型，則不會產生任何效果，不然Model清空子節點數據，並把Model轉成Dictionary類型。

  10. 選中Array按鈕：

    若是Model爲Array類型，則不會產生任何效果，不然Model清空子節點數據，並把Model轉成Array類型。

插入功能

側滑cell，並點擊插入按鈕開啓編輯功能

注意：若是在插入的節點沒有點擊完成的狀況下，對節點的父節點執行收起操做,會自動刪除剛剛插入的節點

注意：若是插入節點的父節點爲Dictionary類型,插入的節點在父節點中的順序不固定

把被編輯的節點稱爲Model。

把Model的父節點稱爲SuperModel。

把Model插入的子節點稱爲SubModel。

把SuperModel插入的子節點稱爲SuperSubModel)。

  1. 若是Model爲Dictionary則能夠【插入子節點】或【插入父節點】。
    1. 【插入子節點】：
      1. 若是Model爲關閉狀態，則自動展開Model，並在Model字節點的第一行插入一個新的節點SubModel，這時候，SubModel處於被編輯狀態。
      2. 注意：此時插入的SubModel在父節點Model無序
    2. 【插入父節點】：在Model的後面插入爲SuperSubModel插入SuperSubModel
  2. 若是Model爲Array類型，則能夠【插入子節點】或【插入父節點】。
    1. 【插入子節點】：
      1. 若是Model爲展開狀態，則自動壓縮Model，並在Model字節點的第一行插入一個新的節點SubModel，這時候，SubModel處於被編輯狀態。
      2. 注意：此時插入的SubModel在父節點Model有序。
    2. 【插入父節點】：在Model的後面插入爲SuperSubModel插入SuperSubModel
  3. 若是Model爲String或Number類型，則能夠【插入父節點】。在Model的後面插入爲SuperSubModel插入SuperSubModel

實現思路

  1. 對json的解析
    1. 爲了不形成沒必要要的開銷，對json解析的時機作了調整：
      1. 當節點A被打開時候，纔會解析A的子節點數據。
      2. 在解析節點A數據時，優先獲取緩存的A子節點數據。
      3. 在對A進行編輯 或插入時，對A的的子節點數據進行更新。
  2. 對視圖的展現
    1. 對與無限層級縮放的視圖來講，咱們有必要把數據展平。
    2. 數據中建立一個用於標記層級的變量。來作一個無限縮放層級的假象。

實現細節

對於節點Model的定義

Model就表明了一個節點，因此Model的結構相當重要。

主要的屬性：
  1. level：所處層級,在進行初始化時，根據父節點的level進行賦值。
@property (nonatomic,assign) NSInteger level;
複製代碼
  1. count：字節點的個數
@property (nonatomic,assign) NSInteger count;
複製代碼
  1. isOpen是否爲打開狀態
@property (nonatomic,assign) BOOL isOpen;
複製代碼
  1. originData：全部子節點的原始數據(可能爲nil、Array、Dictionary、Number、String)
@property (nonatomic,strong) id originData;
複製代碼
  1. key：若是originData爲字典，則key就是originData的key，不然爲nil
@property (nonatomic,strong) NSString *key;
複製代碼
  1. data： originData 轉化成的數據(可能爲：nil、NSString、 NSArray、BaseJsonViewStepModel)
@property (nonatomic,strong) id data;
複製代碼
  1. originData：父節點( 在父節點建立子節點時，進行的賦值)
@property (nonatomic,weak) BaseJsonViewStepModel *superPoint;
複製代碼
  1. type：當前節點的類型
typedef enum : NSUInteger {
    BaseJsonViewStepModelType_Dictionary,
    BaseJsonViewStepModelType_Array,
    BaseJsonViewStepModelType_Number,
    BaseJsonViewStepModelType_String,
} BaseJsonViewStepModelType;

@property (nonatomic,assign) BaseJsonViewStepModelType type;
複製代碼
  1. 所處的狀態
typedef enum : NSUInteger {
    BaseJsonViewStepCellStatus_Normal,
    BaseJsonViewStepCellStatus_EditingSelf,
    BaseJsonViewStepCellStatus_InsertItem,
} BaseJsonViewStepCellStatus;

@property (nonatomic,assign) BaseJsonViewStepCellStatus status;
複製代碼
對model的建立
  1. + (BaseJsonViewStepModel *) createStepModelWithOriginData: (id) data andKey: (NSString *)key
/**
 建立 一個model

 @param data 原始的子節點數據
 @param key 建立出的model對應的key
 @return model
 */
+ (BaseJsonViewStepModel *) createStepModelWithOriginData: (id) data andKey: (NSString *)key{
    BaseJsonViewStepModel *model = [BaseJsonViewStepModel new];
    model.originData = data;
    model.key = key;
    return model;
}	
複製代碼
  1. + (BaseJsonViewStepModel *(^)(id)) createWithID

類方法，返回一個block，block 傳入的是id類型的數據。數據能夠是

  1. BaseJsonViewStepModel: 直接返回這個data。再也不建立
  2. NSString：先轉成字典，而後建立model

使用方法 BaseJsonViewStepModel.createWithId(data);

+ (BaseJsonViewStepModel *(^)(id)) createWithID {
    return ^(id data) {
        BaseJsonViewStepModel *model;
        if ([data isKindOfClass:BaseJsonViewStepModel.class]) {
            model = data;
        }
        if ([data isKindOfClass:NSString.class]) {
            NSDictionary *dic = BaseJsonViewManager.convertToDicWithJson(data);
            if (dic) {
                model = BaseJsonViewManager.convertToStepModelWithDic(dic);
            }
        }
        if (!model) {
            model = [BaseJsonViewStepModel createStepModelWithOriginData:data andKey:@""];
        }
        return model;
    };
}
複製代碼
搜索功能

搜索功能將會搜索出 全部的符合條件的model，並返回一個數組

isSearchEditing的篩選策略

  1. isSearchEditing：若是爲true。
    1. 若是key爲nil，則搜索所有處在編輯狀態的model。
    2. 若是key有值
      1. 若是isAccurateSearch爲true：搜索全部key或value isEqualToString key的正在編輯狀態的model
      2. 若是isAccurateSearch爲true：搜索全部key或value containsString key的正在編輯狀態的model
/**
 搜索

 @param key 搜索 關鍵字
 @param isAccurateSearch 是否爲精準搜索（若是選中精準搜索，搜索策略將從`containsString` 變成 `isEqualToString`。無論是否爲精準搜索，都區分大小寫）
 @param isSearchEditing 是否搜索正在編輯狀態的model
 @return 搜索結果
 */
- (NSMutableArray <BaseJsonViewStepModel *>*) searchWithKey:(NSString *)key andIsAccurateSearch: (BOOL) isAccurateSearch andIsSearchEditing:(BOOL) isSearchEditing {
    SBaseJsonViewStepSearchModelConfig config;
    config.isSearchEditing = isSearchEditing;
    config.isAccurateSearch = isAccurateSearch;
    config.key = key;
    config.model = self;
    return BaseJsonViewStepSearchModel.getResultWithSearchConfig(config);
}
複製代碼
刪除功能

從父節點移除本節點

這個功能主要是找到originData中相同的元素，進行刪除。

- (void) removeFromeSuper {
  
    if ([self.superPoint.originData isKindOfClass:NSArray.class]) {
        NSArray *array = self.superPoint.originData;
        NSMutableArray *arrayM = [[NSMutableArray alloc]initWithArray:array];
        [arrayM removeObject:self.originData];
        self.superPoint.originData = arrayM;
    }
    if ([self.superPoint.originData isKindOfClass:NSDictionary.class]) {
        NSDictionary *dic = self.superPoint.originData;
        NSMutableDictionary *dicM = [[NSMutableDictionary alloc]initWithDictionary:dic];
        NSString *key = self.key;
        if (key.length > 0) {
            dicM[self.key] = nil;
        }
        self.superPoint.originData = dicM;
    }
    
    [self.superPoint reloadDataWitOriginDataProperty];
}
複製代碼
插入節點

根據原始數據插入節點，並返回BaseJsonViewStepErrorModel。

BaseJsonViewStepErrorModel 記錄了插入時的錯誤信息

/**
 插入一個節點

 @param key 節點的key
 @param originData 節點的原始子節點y數據
 @param index 插入的位置
 @return 插入報錯的model
 */
- (BaseJsonViewStepErrorModel *) insertWithKey: (NSString *)key
         andOriginData: (id) originData
              andIndex:(NSInteger) index;
複製代碼

根據model插入節點，並返回BaseJsonViewStepErrorModel。

BaseJsonViewStepErrorModel 記錄了插入時的錯誤信息

/**
 插入一個Model

 @param model 準備插入的 節點 model
 @param index 插入的位置
 @return 錯誤信息
 */
- (BaseJsonViewStepErrorModel *) insertWithModel: (BaseJsonViewStepModel *) model
                                        andIndex:(NSInteger) index;

複製代碼

最後

截圖：

彩蛋：點擊title會複製當前Controller展現的json數據呦~

工具剛剛成型，不少須要修改的地方，但願你們敢於提bug 謝謝~

demo地址

pod 導入: pod 'PYJsonViewManager'

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程