當一個軟件為了達到一定的業務擴展性時（產品上線后限定范圍內的用戶需求無需變更代碼，通過簡單的配置可滿足用戶的要求），必然要求軟件是可配置的。
筆者過去開發過很多配置型的管理軟件，從可配置的表單設計（Form Designer)，報表設計(Report Designer)，到工作流設計(Workflow Designer)，不管技術如何日新月異，需求總是不變的在那里，不增、不減：一個支持設計時和運行時可視化組件設計的輕量級開放平台，這里有幾個關鍵概念：可視化、運行時、設計時、輕量級，以及最重要的特征：基於web。因為隨着移動化的發展，輕應用，重前端逐步成為趨勢，下載安裝應用的成本越來越高，而且不能跨平台，所以應用場景從過去本地可執行應用c/s形式變為了網頁端的b/s方式。可視化組件設計器的應用場景還是很廣泛的：辦公管理或生產管理類軟件的工作流設計（圖1），流程設計，電子電路設計，物聯網數據采集和監控的組態設計等圖形化設計（圖2）。
工作流設計（圖1,圖片來源網絡）
數據采集與監控組態設計(圖2，圖片來源網絡)
我希望將過去所做過的一些項目和技術組合起來，將實現過程寫成一系列的技術文章，通過從零起步，實現一個Web可視化組件設計器，並允許開發者進行二次開發，擴展設計時和運行時的組件。同時在這個過程中介紹一些基礎的知識，技巧，模式與實踐，也希望整個實現過程的思路和分析能夠對有需要同學有所借鑒的意義，不論是學習的新手還是程序猿都能從獲益。對我自已而言，也是一個回顧和總結的機會。每篇文章的未尾都會附上源碼（不過自已敲代碼更加提升印象)，對初學者來說需要提前掌握的技術有html\javascript\jquery的基礎。
技術分析：
隨着互聯網技術和應用的不斷發展，應用軟件從單機或客戶（Client）/服務器(Server)逐步往瀏覽器Browser/Server服務器的模式發展，筆者自身一直工作在微軟系的開發技術棧上，從vb、c++到c# winform再到asp.net web開發不斷轉型的過程。近年來Web前端的技術發展很快，雖然出現了許多優秀的web前端應用框架，但可視化組件設計器技術往往還是停留在基於偏客戶端的獨立exe應用，或是早些年前偏客戶端的web應用如：activeX/flex/Silverlight/WPF等，隨着html5技術的快速發展，純js、跨平台的組件設計被提出，在運行時組件可視圖可兼容不同的瀏覽器顯示，無需安裝任何插件（想想都很激動，筆者就曾經被ActiveX的瀏覽器安全，flex和silverlight的插件安裝煩到爆）。基於canvas和svg的第三方圖形化js庫有很多，如：GraphicsJS、Raphaejs、PaperJS、glfx.JS等等。后續將選擇paperjs庫作為本項目的第三方圖形api庫，用來在瀏覽器渲染圖片、文字和動畫。
初步設想本項目最終的輸出的成果只有一個js文件和css樣式文件，初步命名為visualDesigner.js和visualDesigner.css吧，並定義成jquery插件的形式，方便大家使用。
用戶場景：
一.設計時（實施時管理員設計好）
1.用戶初始化設計器（組件拖動、選擇、組件封裝、繼承等）
2.用戶擴展組件（自定義組件，比如在圖2組態設計中各種組件的展現形式和運行狀態都是不同的，用戶可自已增加）
3.用戶擴展設置組件狀態（比如圖中某一個電器的待機、運行、暫停、關機等狀態）
4.用戶擴展組件的事件（比如依賴輸入的參數來確定后續動作（也可是調用接口））
5.用戶設置組件的狀態變化訂閱接口（如組態的某一元件狀態的讀取接口）
5.用戶擴展設器的保存（通常設計為回調函數，用戶將回調的設計器布局、元素、事件設置等保存起來）
二.運行時
1.用戶初始化運行時設計器
2.用戶從本地加載保存的設計文件，打開。
3.用戶設置各組件的狀態，
4.設計圖更新組件狀態（可定時以周期訂閱的形式刷新）
目錄：
1.概述
2.JS組件概念
6.設計器元素管理
13.界面美化
15.組件的運行時支持
16.小結：類圖
17.組件文本編輯和顯示
18.拖動時的輔助對齊線
19.屬性設置
（目錄中帶鏈接的是已經完成的，黑色字體的只是做了個開發計划）
。。。（待續）
（本系列文字和代碼均為原創，如需轉載或項目使用請注明出處）