一、最早的靈感

最早的靈感來自sprider / 網絡爬蟲 / 爬蟲配置，在爬蟲爬取網站文章時候，會輸入給爬蟲一個配置文件，里邊的內容是一個json對象。里邊包含了所有想要抓取的頁面的信息。爬蟲通過這個配置就可以抓取目標網站的數據。其實本文要引出的配置就類似爬蟲的配置，一模一樣。只是我們把配置輸入給了前端的組件，數據從接口直接獲取。本質上是一模一樣的。相比較爬蟲配置我們會定義的更加細致而已，以滿足需求。

爬蟲配置

{"url": "https://example.com",  // 目標網頁的URL"headers": {"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"},title: 'js代碼獲取title', // 這里就類似本文的組件content: 'js代碼獲取content', // 這里就類似本文的組件......"timeout": 10,  // 請求超時時間（秒）"max_retries": 3  // 最大重試次數
}

爬蟲通過配置爬取到數據后，會把數據輸入到模板頁面，模板頁面會承載所有的數據，前端會以富文本的形式得到模板頁面，在頁面展示出來。
或者以接口的形式給到前端也是同理的。

這里的重點是一個配置文件，驅動爬蟲抓取了目標頁面的所有信息。
我們的配置從某種意義上和爬蟲配置是一樣的。

本文的重點是類似爬蟲配置一樣，給前端組件輸入一個配置從而形成一個基礎的頁面。

二、配置工程師的玩笑

有一個玩笑的話，前端開發工程師是配置工程師。我作為前端開發工程師可以這么玩笑的說，別人不能對我這么說，因為我們定義配置是對業務和技術的升華形成了配置。別人對我這么說我認為你只看到了前端努力后簡潔明快的結果，沒有看到努力的過程，我會不高興，剛過元旦，我只能祝你元旦快樂，洗洗睡吧。

三、理解配置驅動開發

很長時間在團隊里強調，業務開發與組件開發分離。為什么？因為業務開發往往比較緊急，往往在代碼邏輯上不夠細致，在UI上也不夠完美，規范性難以保證，多方人員的情緒接踵而來。所以我強調業務開發與組件分離。

我這么強調和引導，并不是想要開發組件成為少數人所謂在團隊中的專利和壁壘，我在倡導業務開發與組件開發分離的同時我積極引導團隊每一個成員開發組件，給予機會，并引導幫助迭代。

那么組件化之后會帶來哪些變化，為什么組件化是前端工程化的重要組成，簡單講就是，“輸入配置，輸出結果”。大大提升了生產力。甚至一套配置驅動多端（pc端/小程序端/等，再有其他端也是同理），這里就引出的本文的主題“配置”。

隨著我團隊組件化的豐富，基本做到了配置驅動開發。由業務和技術我們定義配置，由配置驅動開發。采用這種方式后，團隊成員開發效率和積極性有明顯提高。技術水平在開發組件過程中也得到提升。在定義配置的過程中/伴隨對業務的研究-業務水平也得到提升。

我一直相信要有開放包容的心態，積極努力的過程中帶動一幫人，這樣的努力更有意義，獨學而無友，則孤陋而寡聞，這也是我博客的初衷。

四、配置驅動開發的前提

組件化、模塊化，以此產生了配置，以配置的規范性/統一性來驅動多端

五、展示表單頁面

如圖展示的內容均可輕易通過配置的方式輕松實現

六、定義配置

// 字段命名要顯性命名，不能產生歧義
// 每一個對象是一個模塊
// 再有更多的模塊類型也是同理，再有更多的表單類型也是同理
// 涉及到從接口獲取數據的/比如select-remote，輸入接口即可，若輸入數據，那么配置小的變化就需要全量的處理
// 本文第五條展示的內容，按照合理的配置都可以輸出頁面骨架
export const config = {id: 'contract',title: 'contract',type: 'add', // add 新增 / edit 編輯 / details 詳情 / delete 刪除 / approval 審批list: [{id: '',type: 'buttons',title: '',list: [{type: 'add',id: '1',name: '新增',code: '001',event: () => {},disabled:false,more: {}},{type: 'edit',id: '2',name: '編輯',code: '002',event: () => {},disabled:false,more: {}},{type: 'details',id: '3',name: '詳情',code: '003',event: () => {},disabled:false,more: {}},// ...],more: {}},{id: '',type: 'form',title: '',list: [ // form配置項{type: 'title'label: "title",},{type: 'input'label: "姓名",fieldName: '',fieldValue: '', // 可能沒有disabled:false,},{type: "select",label: "收貨地址",fieldName: "",fieldValue: '',required: true,disabled:false,attrs: {placeholder: "請選擇收貨地址",disabled:false,options: [{label:'北京', value: 1},{label:'上海', value: 2},],},more: {}},{type: "select-remote",label: "負責人",fieldName: "personInChargeName",fieldValue: "personInChargeId",required: true,url: '/m-a-center/api/v1/a/pageList',method: 'get',res: ['res', 'payload', 'content'],map: [{key: 'label',target: 'userName',},{key: 'value',target: 'id',},],params: {query: 'keyword',default:{companyId: uni.getStorageSync('company-id'),page: 1,pageSize: 20,},},attrs: {placeholder: "請選擇負責人",disabled:false,options: [],},more: {}},// ...],values: {}, // 數據event: () => {},more: {}},{id: '',type: 'table',title: '',list: [[ // table配置項{type: 'title'label: "title",},{type: 'input'label: "姓名",fieldName: '',fieldValue: '', // 可能沒有disabled:false,},{type: "select",label: "收貨地址",fieldName: "",fieldValue: '',required: true,disabled:false,attrs: {placeholder: "請選擇收貨地址",disabled:false,options: [{label:'北京', value: 1},{label:'上海', value: 2},],},more: {}},{type: "select-remote",label: "負責人",fieldName: "personInChargeName",fieldValue: "personInChargeId",required: true,url: '/m-a-center/api/v1/a/pageList',method: 'get',res: ['res', 'payload', 'content'],map: [{key: 'label',target: 'userName',},{key: 'value',target: 'id',},],params: {query: 'keyword',default:{companyId: uni.getStorageSync('company-id'),page: 1,pageSize: 20,},},attrs: {placeholder: "請選擇負責人",disabled:false,options: [],},more: {}},// ...]],values: [{}, {}], // table 數據buttons: [{type: 'add',id: '1',name: '新增',code: '001',event: () => {},more: {}},{type: 'edit',id: '2',name: '編輯',code: '002',event: () => {},more: {}},{type: 'details',id: '3',name: '詳情',code: '003',event: () => {},more: {}},// ...]event: () => {},more: {}}],more: {}
}

七、表單項

// input類型的可能沒有fieldValue，輸入什么就是什么，因為沒有options，加上options就變成了select類型
list: [ // form配置項{type: 'title'label: "title",},{type: 'input'label: "姓名",fieldName: '',fieldValue: '', // 可能沒有disabled:false,},{type: "amount",fieldName: "price",fieldValue: '',label: "單價（元）",attrs: {placeholder: "銷售單價（元）",},disabled:false,},{type: "phone",label: "電話",fieldName: "price",fieldValue: '',required: true,attrs: {placeholder: "請輸入電話",},disabled:false,},{type: 'postalcode'label: "郵政編碼",fieldName: '',fieldValue: '', // 可能沒有disabled:false,},{type: "images",label: "圖片",fieldName: "price",fieldValue: '',attrs: {placeholder: "圖片",},},{type: "file",label: "上傳",fieldName: "price",fieldValue: '',valueType: "string", // string | string[] | object[]group:{moduleCode:'1', // 區分是哪一個字段上傳的附件},model:null,visible: false,attrs:{fileKey:'url',nameKey:'name',disabled:false, fileMediatype: 'image',},},{type: "select",label: "收貨地址",fieldName: "",fieldValue: '',required: true,disabled:false,attrs: {placeholder: "請選擇收貨地址",disabled:false,options: [{label:'北京', value: 1},{label:'上海', value: 2},],},more: {}},{type: "select-remote",label: "負責人",fieldName: "personInChargeName",fieldValue: "personInChargeId",required: true,url: '/m-a-center/api/v1/a/pageList',method: 'get',res: ['res', 'payload', 'content'],map: [{key: 'label',target: 'userName',},{key: 'value',target: 'id',},],params: {query: 'keyword',default:{companyId: uni.getStorageSync('company-id'),page: 1,pageSize: 20,},},attrs: {placeholder: "請選擇負責人",disabled:false,options: [],},more: {}},// ...
],

八、一套配置實現多端開發

核心思想：組件和配置結合起來驅動開發、讓組件有秩序

九、定義規范配置模板

前端工程化：plop自動生成文件（快速開發，創建模板文件）_前端自動化生成文件-CSDN博客

十、配置文件得到業務文件的this

vue：.js 文件獲取到 .vue 文件中的 this_vue.js 獲取vue-CSDN博客

十一、寫在最后

我們首先明白一個事實 就是 總體的工作量是不會減少，是守恒的，一部分少做了工作，一定是另一部分多做了。就好像一句話“風雨安好，一定是有人在替你負重前行”。
定義配置這份工作我們是想1實現減少重復的工作，2讓擅長的人做擅長的事，以提高開發效率。
并不是以所謂配置為名，進行工作轉移，比如把前端工作轉移給后端，這樣違背了分工的意義/專業的人做專業的事情。
如果配置走的極端一點，通過url的參數識別業務，在頁面請求接口，接口返回左右的頁面結構和數據以及交互規則，那么這樣前端無需做任何工作，即可實現，那么這是提高效率了嗎，并沒有，反而很大程度增加了工作量，降低了效率，為什么，因為這個過程中工作量沒有減少，只是進行了轉移，把前端的工作全部轉移給了后端去做，讓不擅長的人做不擅長的工作，這個與初衷是違背的。并且失去了靈活性，不利開發。

十二、歡迎交流指正