首页 > 其他分享 >【BIM】BIMFACE基础开发流程

【BIM】BIMFACE基础开发流程

时间:2022-11-11 14:46:37浏览次数:75  
标签:BIM min viewer max 流程 BIMFACE elev boundingBox 模型

1.相关概念

access tokenbimface后端接口访问凭证,通过appkeyappsecret获取,其有效期为一周

view tokenbimface模型临时访问凭证,其有效期为12小时

fileId:单个revit或其他模型上传后产生的唯一的ID

integrateId:多个模型集成在一起时产生的唯一的ID

componentId:构件ID,构件是模型操作的做小单元,单模型和集成模型的构件ID组成不同

elementId:图元,是原始模型文件的最小单元

2.数据来源

所有数据来自模型(revitfbx3dsskp)文件上传

3.模型交互

模型载入成功后,默认会支持平移、缩放、旋转等操作,无需额外编写代码,以下是相对常用的模型交互的方法,被封装在Viewer3D对象中。

  • 模型交互高频方法
    • 显示 showComponentsById showComponentsByObjectData
    • 隐藏 showComponentsById showComponentsByObjectData
    • 着色 overrideComponentsColorById overrideComponentsColorByObjectData
    • 透明 transparentComponentsById transparentComponentsByObjectData
    • 隔离 isolateComponentsById isolateComponentsByObjectData
    • 视角 getCameraStatus setCameraStatus
    • 定位 zoomToSelectedComponents
    • 筛选

4.筛选维度

由于建筑模型构件数量较多,不可能一个一个操作构件,一方面开发复杂,容易出错,另方面也会影响整体性能。所以bimface提供了批量操作构件的方法。构件筛选的6个维度:分类、族、族类型、楼层、专业、系统类型,与下方对象属性一一对应。

{
  "categoryId": "-2000035",
  "family": "基本屋顶",
  "familyType": "常规ROOF - 400mm",
  "levelName": "ROOF",
  "specialty": "",
  "systemType":""
}

各个维度可以互相组合使用,筛选条件支持两种组合形式

  • 交集:既满足条件A,又满足条件B,A∩B;
  • 并集:满足条件A,或者满足条件B,A∪B。
// 交集
[
  {
    "categoryId": -2001340,
    "levelName": "F01"
  }
]
// 并集
[
  {
    "categoryId":-2001340,
    "levelName":"F01"
  },
  {
    "levelName":"F02"
  }
]

* 简单理解,筛选条件在一个对象内取交集部分,对象之间取并集。

条件如何获取

1.通过构件ID获取

2.通过构件树获取

3.通过接口获取

5.程序结构

程序结构框架如下,可根据使用的前端框架(VUEREACT)的生命周期进行调整:

/**
 * @author:xuhongbo
 * @function:bimface程序结构
 */
import { WebUtils } from '../package/WebUtils.js'
import { ModelHelper } from '../package/ModelHelper.js'

var app, viewer, drawableContainer;
const INTEGRATE_FILE = 2;
var BimfaceLoaderConfig = new BimfaceSDKLoaderConfig();
var webUtils = new WebUtils();

// 请求后端接口获取模型viewToken
webUtils.getViewtoken(2507720716406624, INTEGRATE_FILE).then((token) => {
    BimfaceLoaderConfig.viewToken = token;
    BimfaceSDKLoader.load(BimfaceLoaderConfig, onSDKLoadSucceeded, onSDKLoadFailed);
});

// SDK加载成功回调
function onSDKLoadSucceeded(viewMetaData) {
    
    // 指示当前viewToken是图纸还是模型
    if (viewMetaData.viewType == "3DView") {
        
        // 承载模型的DOM元素
        var view = document.getElementById('view');
        var config = new Glodon.Bimface.Application.WebApplication3DConfig();
        
        // 设置背景色,多个色值会产生渐变效果
        config.backgroundColor = [{
                color: new Glodon.Web.Graphics.Color(25, 28, 33, 1),
                stop: "0%"
            }, {
                color: new Glodon.Web.Graphics.Color(37, 76, 101, 1),
                stop: "50%"
            }
        ];
        
        // 模型配置
        config.enableExplosion = true;
        config.enableWireframe = false;
        config.domElement = view;
        app = new Glodon.Bimface.Application.WebApplication3D(config);
        viewer = app.getViewer();
        viewer.setCameraAnimation(true);
        viewer.setBorderLineEnabled(false);

        // 装载模型
        app.addView(BimfaceLoaderConfig.viewToken);

        // viewer挂在window对象下便于前端调试
        window.viewer = viewer;
        let modelHelper = new ModelHelper(viewer);
        // 模型加载成功回调,自动触发
        viewer.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {

            /** start 模型加载完成后的逻辑代码在此区域编写 start **/
            
            // 1.构件着色
            viewer.overrideComponentsColorById([components],new Glodon.Web.Graphics.Color(255,255,0,1));
            
            // 2.限制旋转范围
            viewer.lockAxis(Glodon.Bimface.Viewer.AxisOption.Z, [Math.PI / 6, Math.PI / 3]);

            // 3.楼层展开
            floorExplosive();
                       
            // 4.创建3D标签
            addMarker();
            
            // 5.相机视角
            setCamera(viewer, floorExplosive);
            
            // 6.模型筛选
            filterComponentsByObjectData();
            
            // 手动渲染模型
            viewer.render();

            // 模型单击事件,其他事件类似
            viewer.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, function (e) {
                //TODO:click logic
            });
            
            viewer.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseDoubleClicked, function (e) {
                // TODO: double click logic
                // 双击进入模型下一层级
            });
            
            viewer.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.Hover, function (e) {
                // TODO: hover logic
                // 鼠标hover显示模型轮廓
            });
            
            // ... ... 其他事件
            
            /** end 模型加载完成后的逻辑代码在此区域编写 end **/
        });
    }
};

// SDK加载失败回调
function onSDKLoadFailed(error) {
    console.log("Failed to load SDK!");
};

6.模型事件

事件名称 事件描述 参数
ViewAdded 3D模型加载完毕
ContextMenu 鼠标右键点击事件 参数
Hover 悬停事件,返回hover的构件、轴网、房间等信息。不建议开启,频繁渲染影响性能 参数
MouseClicked 鼠标点击事件,包含左键右键 参数
MouseDoubleClicked 鼠标双击构件事件 参数
FloorExplosion 楼层爆炸事件 参数
SelectionChanged 构件选中状态变化 ['10000767206443.721555']

7.相关代码

  • 设置相机位
// 设置相机位
function setCamera(viewer, callback) {
    let start = {
        "name": "persp",
        "position": {
            "x": -252038.4862944593,
            "y": -165483.85836714864,
            "z": 283364.4827180268
        },
        "target": {
            "x": 23666.9982062731,
            "y": 110222.64164917718,
            "z": 7659.99941964464
        },
        "up": {
            "x": 0,
            "y": -0.0000036732050033678383,
            "z": 0.9999999999932537
        },
        "fov": 45,
        "zoom": 1,
        "version": 1,
        "coordinateSystem": "world"
    };

    let target = {
        "name": "persp",
        "position": {
            "x": -137822.99232434228,
            "y": -98499.27984101845,
            "z": 178256.635617329
        },
        "target": {
            "x": 172703.70907606668,
            "y": 212028.13458493465,
            "z": -9323.86190933627
        },
        "up": {
            "x": 0.2777597223080557,
            "y": 0.27775636583090557,
            "z": 0.9196199964679759
        },
        "fov": 45,
        "zoom": 1,
        "version": 1,
        "coordinateSystem": "world"
    };
    
    // 方式一:直接切换到目标视角
    viewer.setCameraStatus(start);

    // 方式二:多个视角切换过渡到最终视角
    viewer.setCameraStatus(start, () => {
        setTimeout(() => {
            viewer.setCameraStatus(target, () => {
                if (callback) {
                    callback();
                };
                viewer.recordCustomedHomeview(target);
            })
        }, 800);
    });
}
  • 楼层展开
// 楼层展开
var floorList = [];
if (floorList.length == 0) {
viewer.getFloors(function (data) {
    if (!data) {
        console.log('No floor data.');
        return;
    }
    for (var i = 0; i < data.length; i++) {
        floorList.push(data[i].id);
    }
    viewer.setFloorExplosion(3, floorList);
    
});
} else {
  viewer.setFloorExplosion(3, floorList);
}
viewer.render();
  • 构造三维标签
/** 构造三维标签 **/

// 构造三维标签容器配置markerContainerConfig
let markerContainerConfig = new Glodon.Bimface.Plugins.Marker3D.Marker3DContainerConfig();
// 设置markerContainerConfig匹配的viewer对象
markerContainerConfig.viewer = viewer3D;

// 构造三维标签容器markerContainer
let markerContainer = new Glodon.Bimface.Plugins.Marker3D.Marker3DContainer(markerContainerConfig);

let markerConfig = new Glodon.Bimface.Plugins.Marker3D.Marker3DConfig();

// 为标签指定图片路径
markerConfig.src = "http://static.bimface.com/resources/3DMarker/warner/warner_red.png";

// 构造点位,并指定为标签的插入点
let markerPos = {"x": -5743.838548165086, "y": -1667.12605781937, "z": 12923.137945446013};
markerConfig.worldPosition = markerPos;

// 指定标签大小
markerConfig.size = 60;

// 构造三维标签
let marker = new Glodon.Bimface.Plugins.Marker3D.Marker3D(markerConfig);

// 将三维标签添加至容器内
markerContainer.addItem(marker);
  • 构件筛选
let showCondition = [];
let hideCondition = [];
viewer.hideAllComponents();

// 结构框架
showCondition.push({
    "categoryId": "-2001320",
    "levelName": "B01"
}); 

// 机械设备
showCondition.push({
    "categoryId": "-2001140",
    "levelName": "B01"
}); 

viewer.showComponentsByObjectData(showCondition);

// B01的消火栓连体箱
hideCondition.push({
    "familyType": "消火栓连体箱",
    "levelName": "B01"
});

// B01的砼梁梯
hideCondition.push({
    "family": "砼梁梯",
    "levelName": "B01"
});

viewer.hideComponentsByObjectData(hideCondition);
  • 单击构件回调参数
// 单击构件回调参数
{
    "objectId": "10000767206443.789365",
    "modelId": "2507720716406624",
    "fileId": "10000767206443",
    "elementId": "789365",
    "boundingBox": {
        "min": {
            "x": -20777.58471634735,
            "y": -75142.02446050556,
            "z": 42130.94916095727
        },
        "max": {
            "x": -19477.5725093161,
            "y": -75042.0576014699,
            "z": 47030.94916095725
        }
    },
    "click": 1,
    "screenPosition": {
        "x": 629,
        "y": 492
    },
    "worldPosition": {
        "x": -20017.871542798395,
        "y": -75142.02424631975,
        "z": 45669.27538004671
    },
    "clientPosition": {
        "x": 629,
        "y": 492
    },
    "eventType": "Click",
    "objectType": "Component",
    "integrateId": 2507720716406624,
    "normal": {
        "x": 0,
        "y": -1,
        "z": 0,
        "isVector3": true
    }
}
  • 双击构件回调参数
// 双击构件回调参数
{
    "objectId": "10000767206443.721625",
    "modelId": "2507720716406624",
    "fileId": "10000767206443",
    "elementId": "721625",
    "boundingBox": {
        "min": {
            "x": -1003.1328125,
            "y": -55292.324223558244,
            "z": 46820.94927978515
        },
        "max": {
            "x": 33073.6875,
            "y": -20485.59765144175,
            "z": 46930.94927978515
        }
    },
    "click": 2,
    "screenPosition": {
        "x": 1305,
        "y": 824
    },
    "worldPosition": {
        "x": 17087.942217018455,
        "y": -26620.573852772166,
        "z": 46930.890625
    },
    "clientPosition": {
        "x": 1305,
        "y": 824
    },
    "eventType": "DoubleClick",
    "objectType": "Component",
    "integrateId": 2507720716406624
}
  • 悬停构件回调参数
// 悬停构件回调参数
{
    "objectId": "10000767206443.794110",
    "modelId": "2507720716406624",
    "fileId": "10000767206443",
    "elementId": "794110",
    "boundingBox": {
        "min": {
            "x": 25518.130555121203,
            "y": -26051.748749039743,
            "z": 42130.94916095727
        },
        "max": {
            "x": 26511.60720984237,
            "y": -25058.27166594696,
            "z": 47030.94916095725
        }
    },
    "screenPosition": {
        "x": 1482,
        "y": 596
    },
    "worldPosition": {
        "x": 26379.882462450314,
        "y": -25990.71072846681,
        "z": 46945.58098111459
    },
    "clientPosition": {
        "x": 1482,
        "y": 596
    },
    "eventType": "Hover",
    "objectType": "Component",
    "integrateId": 2507720716406624
}
  • 楼层展开回调参数
// 楼层爆炸参数
{
    "type": 47,
    "floorInfos": [
        {
            "id": "11",
            "name": "F08",
            "elevation": 0,
            "arch_elev": "0",
            "stru_elev": "0",
            "boundingBox": {
                "min": {
                    "x": -87767.1953125,
                    "y": -75132.40625,
                    "z": 26950
                },
                "max": {
                    "x": 33273.6953125,
                    "y": -20316.9765625,
                    "z": 32900
                }
            },
            "explodedHeight": 0,
            "preExplodedHeight": 0,
            "preExplodedTranslation": {
                "x": 0,
                "y": 0,
                "z": 0
            },
            "explodedDirection": {
                "x": 0,
                "y": 0,
                "z": 1
            }
        },
        {
            "id": "0",
            "name": "RF",
            "elevation": 0,
            "arch_elev": "0",
            "stru_elev": "0",
            "boundingBox": {
                "min": {
                    "x": -82874.5,
                    "y": -70242.0546875,
                    "z": 48900
                },
                "max": {
                    "x": 31573.69140625,
                    "y": -32817.9921875,
                    "z": 54000
                }
            },
            "explodedHeight": 21065.474639892578,
            "preExplodedHeight": 0,
            "preExplodedTranslation": {
                "x": 0,
                "y": 0,
                "z": 21065.474639892578
            },
            "explodedDirection": {
                "x": 0,
                "y": 0,
                "z": 1
            }
        },
        {
            "id": "8",
            "name": "F01",
            "elevation": 0,
            "arch_elev": "0",
            "stru_elev": "0",
            "boundingBox": {
                "min": {
                    "x": -85835.59375,
                    "y": -75742.015625,
                    "z": -2450
                },
                "max": {
                    "x": 33342.50390625,
                    "y": 7632.06103515625,
                    "z": 7350
                }
            },
            "explodedHeight": 42130.949279785156,
            "preExplodedHeight": 0,
            "preExplodedTranslation": {
                "x": 0,
                "y": 0,
                "z": 42130.949279785156
            },
            "explodedDirection": {
                "x": 0,
                "y": 0,
                "z": 1
            }
        },
        {
            "id": "6",
            "name": "F09",
            "elevation": 0,
            "arch_elev": "0",
            "stru_elev": "0",
            "boundingBox": {
                "min": {
                    "x": -87836,
                    "y": -75135.8984375,
                    "z": -24.999998092651367
                },
                "max": {
                    "x": 33268.28515625,
                    "y": 167.50009155273438,
                    "z": 36840
                }
            },
            "explodedHeight": 63196.423919677734,
            "preExplodedHeight": 0,
            "preExplodedTranslation": {
                "x": 0,
                "y": 0,
                "z": 63196.423919677734
            },
            "explodedDirection": {
                "x": 0,
                "y": 0,
                "z": 1
            }
        },
        {
            "id": "1",
            "name": "F12",
            "elevation": 0,
            "arch_elev": "0",
            "stru_elev": "0",
            "boundingBox": {
                "min": {
                    "x": -83328.2734375,
                    "y": -70980.03125,
                    "z": 43477.71484375
                },
                "max": {
                    "x": 31573.69140625,
                    "y": -28494.833984375,
                    "z": 49342.28515625
                }
            },
            "explodedHeight": 84261.89855957031,
            "preExplodedHeight": 0,
            "preExplodedTranslation": {
                "x": 0,
                "y": 0,
                "z": 84261.89855957031
            },
            "explodedDirection": {
                "x": 0,
                "y": 0,
                "z": 1
            }
        },
        {
            "id": "2",
            "name": "F10",
            "elevation": 0,
            "arch_elev": "0",
            "stru_elev": "0",
            "boundingBox": {
                "min": {
                    "x": -86951.46875,
                    "y": -74392.0546875,
                    "z": -24.999998092651367
                },
                "max": {
                    "x": 32574.99609375,
                    "y": 3208.73681640625,
                    "z": 40850
                }
            },
            "explodedHeight": 105327.37319946289,
            "preExplodedHeight": 0,
            "preExplodedTranslation": {
                "x": 0,
                "y": 0,
                "z": 105327.37319946289
            },
            "explodedDirection": {
                "x": 0,
                "y": 0,
                "z": 1
            }
        },
        {
            "id": "3",
            "name": "F04",
            "elevation": 0,
            "arch_elev": "0",
            "stru_elev": "0",
            "boundingBox": {
                "min": {
                    "x": -87728.0703125,
                    "y": -75146.1015625,
                    "z": -25.00021743774414
                },
                "max": {
                    "x": 33297.515625,
                    "y": 599.3110961914062,
                    "z": 18585
                }
            },
            "explodedHeight": 126392.84783935547,
            "preExplodedHeight": 0,
            "preExplodedTranslation": {
                "x": 0,
                "y": 0,
                "z": 126392.84783935547
            },
            "explodedDirection": {
                "x": 0,
                "y": 0,
                "z": 1
            }
        },
        {
            "id": "4",
            "name": "F05",
            "elevation": 0,
            "arch_elev": "0",
            "stru_elev": "0",
            "boundingBox": {
                "min": {
                    "x": -87728.0703125,
                    "y": -75520.078125,
                    "z": 14955
                },
                "max": {
                    "x": 33297.515625,
                    "y": -20319.087890625,
                    "z": 20840
                }
            },
            "explodedHeight": 147458.32247924805,
            "preExplodedHeight": 0,
            "preExplodedTranslation": {
                "x": 0,
                "y": 0,
                "z": 147458.32247924805
            },
            "explodedDirection": {
                "x": 0,
                "y": 0,
                "z": 1
            }
        },
        {
            "id": "5",
            "name": "F07",
            "elevation": 0,
            "arch_elev": "0",
            "stru_elev": "0",
            "boundingBox": {
                "min": {
                    "x": -87728.0703125,
                    "y": -75520.078125,
                    "z": 23000
                },
                "max": {
                    "x": 33297.515625,
                    "y": -20319.087890625,
                    "z": 28900.001953125
                }
            },
            "explodedHeight": 168523.79711914062,
            "preExplodedHeight": 0,
            "preExplodedTranslation": {
                "x": 0,
                "y": 0,
                "z": 168523.79711914062
            },
            "explodedDirection": {
                "x": 0,
                "y": 0,
                "z": 1
            }
        },
        {
            "id": "7",
            "name": "F02",
            "elevation": 0,
            "arch_elev": "0",
            "stru_elev": "0",
            "boundingBox": {
                "min": {
                    "x": -87551.1953125,
                    "y": -75222.5703125,
                    "z": -1300
                },
                "max": {
                    "x": 33402.984375,
                    "y": 7900.3955078125,
                    "z": 10750
                }
            },
            "explodedHeight": 189589.2717590332,
            "preExplodedHeight": 0,
            "preExplodedTranslation": {
                "x": 0,
                "y": 0,
                "z": 189589.2717590332
            },
            "explodedDirection": {
                "x": 0,
                "y": 0,
                "z": 1
            }
        },
        {
            "id": "9",
            "name": "F06",
            "elevation": 0,
            "arch_elev": "0",
            "stru_elev": "0",
            "boundingBox": {
                "min": {
                    "x": -87728.0703125,
                    "y": -75520.078125,
                    "z": 19005
                },
                "max": {
                    "x": 33297.515625,
                    "y": -20319.087890625,
                    "z": 24850
                }
            },
            "explodedHeight": 210654.74639892578,
            "preExplodedHeight": 0,
            "preExplodedTranslation": {
                "x": 0,
                "y": 0,
                "z": 210654.74639892578
            },
            "explodedDirection": {
                "x": 0,
                "y": 0,
                "z": 1
            }
        },
        {
            "id": "10",
            "name": "F11",
            "elevation": 0,
            "arch_elev": "0",
            "stru_elev": "0",
            "boundingBox": {
                "min": {
                    "x": -86958.171875,
                    "y": -74392.0625,
                    "z": 39050
                },
                "max": {
                    "x": 32574.99609375,
                    "y": -21031.103515625,
                    "z": 45900
                }
            },
            "explodedHeight": 231720.22103881836,
            "preExplodedHeight": 0,
            "preExplodedTranslation": {
                "x": 0,
                "y": 0,
                "z": 231720.22103881836
            },
            "explodedDirection": {
                "x": 0,
                "y": 0,
                "z": 1
            }
        },
        {
            "id": "12",
            "name": "F03",
            "elevation": 0,
            "arch_elev": "0",
            "stru_elev": "0",
            "boundingBox": {
                "min": {
                    "x": -87728.0703125,
                    "y": -75520.078125,
                    "z": 6900
                },
                "max": {
                    "x": 33297.515625,
                    "y": -20319.087890625,
                    "z": 12850
                }
            },
            "explodedHeight": 252785.69567871094,
            "preExplodedHeight": 0,
            "preExplodedTranslation": {
                "x": 0,
                "y": 0,
                "z": 252785.69567871094
            },
            "explodedDirection": {
                "x": 0,
                "y": 0,
                "z": 1
            }
        }
    ],
    "modelId": "2507720716406624",
    "target": null
}
  • 右键菜单
// ContextMenu
{
    "clientPosition": {
        "x": 483,
        "y": 724
    },
    "containerBox": {
        "width": 1920,
        "height": 969
    },
    "objectType": "Component"
}

标签:BIM,min,viewer,max,流程,BIMFACE,elev,boundingBox,模型
From: https://www.cnblogs.com/xhb-bky-blog/p/16880332.html

相关文章

  • .net erp(办公oa)开发平台架构之流程服务概要介绍
    .neterp(办公oa)开发平台架构之流程服务(流程引擎)概要介绍背景搭建一个适合公司erp业务的开发平台。架构概要图: 流程引擎开发平台: 包含流程引擎......
  • iOS上架流程详细版本
     苹果上架审核周期长一直是困扰用户的一大问题,这次把我自己上架的经历分享给大家,避免大家入坑。上架总流程:创建开发者账号借助辅助工具appuploader创建证书,......
  • 前端项目开发流程
    项目完整流程需求分析1、了解背景为什么做这个事情2、质疑需求是否合理这个需求为什么要做,是否符合我们的产品,开发也是用户3、需求是否闭环需求是否考虑全面,分析功......
  • 通信协议:Modbus协议原理和通信流程演示
    1、Modbus简介Modbus是由Modicon(现为施耐德电气公司的一个品牌)在1979年发明的,是全球第一个真正用于工业现场的总线协议。ModBus网络是一个工业通信系统,由带智能终端的......
  • Spring MVC工作 执行流程详解
    SpringMVC执行流程用户点击某个请求路径,发起一个HTTPrequest请求,该请求会被提交到DispatcherServlet(前端控制器)由DispatcherServlet请求一个或多个HandlerMapping(......
  • Day07.2:Java流程控制详解
    Java流程控制用户交互Scanner我们可以通过Scanner类来获取用户的输入,电脑通过我们的输入,执行输入语,实现程序的输入输出基本语法Scannername=newScanner(System.in)......
  • webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全
    webpack的运行流程是一个串行的流程,从启动到结束会依次执行以下步骤;1.初始化参数:在配置文件,读取并合并参数,得到最终的参数;2.开始编译:拿着上一步的参数初始......
  • MindStudio模型训练场景精度比对全流程和结果分析
    摘要:MindStudio是一套基于华为昇腾AI处理器开发的AI全栈开发平台本文分享自华为云社区《​​MindStudio模型训练场景精度比对全流程和结果分析​​》,作者:yd_247302088。一......
  • 手机充电放电架构与工作流程原理讲解
    一、概述电池充放电电路是手机中最关键的电路之一,是手机一切功能的源头,如果该电路出现问题会使得整个手机工作不稳定,甚至无法开机。手机的电是从电池来的,电池电......
  • 每日一题之请描述Vue组件渲染流程
    组件化是Vue,React等这些框架的一个核心思想,通过把页面拆成一个个高内聚、低耦合的组件,可以极大程度提高我们的代码复用度,同时也使得项目更加易于维护。所以,本文就来分......