本人是一枚喜歡探索黑科技的 web 前端，沒(méi)事喜歡研究研究框架，了解網(wǎng)絡(luò )技術(shù) / 工具等等。最近在研究 saas 和 paas 的時(shí)候在知乎專(zhuān)欄有大佬提到了一款在線(xiàn)頁(yè)面編輯系統—— ivx ?？吹竭@里在做的大佬估計表示不屑，不就是在線(xiàn)編排 h5 的工具網(wǎng)站嘛，這種東西國內不多得是：135 編輯器、秀米、易點(diǎn)，大同小異都是集成的富文本編輯器，允許你使用封裝好的事件觸發(fā)器、動(dòng)畫(huà)效果、自定義 css 樣式，感覺(jué)沒(méi)什么技術(shù)含量，都是公司的運營(yíng)人員在使用。當然，簡(jiǎn)單的系統根本引不起技術(shù)工作者的研究興趣，那么 ivx 的難度可以滿(mǎn)足你對“黑科技”的興趣。
調查了一下 ivx 的技術(shù)團隊，還真是來(lái)頭不小，是 ih5 團隊（國內非常知名的硬核 h5 編輯器）。ih5 在業(yè)內名氣著(zhù)實(shí)不小，尤其是在設計界，讓無(wú)數設計師不用再到處找前端程序員轉而自己開(kāi)發(fā)。ivx 正是在 ih5 基礎上進(jìn)行的大迭代，支持微信小程序、微信 h5、企業(yè)級網(wǎng)站的開(kāi)發(fā)。進(jìn)入官網(wǎng)，點(diǎn)擊使用，不用注冊直接跳轉到編輯器頁(yè)面…看來(lái)對自己的產(chǎn)品很有信息啊，編輯器頁(yè)面出現的時(shí)候，我的內心是奔潰的。
emmm…androidStudio 是你嗎??？沒(méi)事沒(méi)事，大概只是看著(zhù)多而已，隨便點(diǎn)一點(diǎn)，添加點(diǎn)元素進(jìn)去就好了。添加了，然后呢，怎么綁定事件，怎么讓元素動(dòng)起來(lái)，布局好不習慣啊，想用 flex。還好有視頻教程和文檔，點(diǎn)開(kāi)發(fā)現這視頻教程也太多了吧，86 個(gè)視頻，看日期貌似還在持續更新…這時(shí)候我發(fā)現有數據庫和微信登錄？！我有一個(gè)大膽的想法：用這個(gè)建站豈不是什么都可以自己做，不用再叫個(gè)后端和我分錢(qián)，嘻嘻。秉承著(zhù)格物致知（撈更多錢(qián)）的精神，我開(kāi)始了長(cháng)達 3h 的視頻學(xué)習，不學(xué)不知道，有很多的技術(shù)亮點(diǎn)，感覺(jué)看視頻學(xué)了個(gè)七七八八，開(kāi)始實(shí)踐。接下來(lái)用實(shí)例給大家介紹一下這個(gè)工具的一些基本操作。
首先是對于界面中各個(gè)部分的說(shuō)明，要寄出我的千年老 ps 技術(shù)了，各位看官請看下圖：
可視化部分，對象樹(shù)最終會(huì )渲染到這個(gè)部分，如果使用了循環(huán)組件（for）或條件組件（if）則預覽部分會(huì )與成品出現一定差異，這個(gè)案例由于是數據驅動(dòng)生成的，最終的瀏覽器效果見(jiàn)下圖，組件的具體使用方法下文再說(shuō)；
前后端對象樹(shù)。對于前臺而言，對象樹(shù)是頁(yè)面、dom、自定義方法 / 函數、系統（包含一部分 window 對象方法、封裝的路由方法等）、微信對象（用于配置微信分享鏈接縮略圖、獲取用戶(hù)位置等）；對于后臺而言，對象樹(shù)包括服務(wù)（類(lèi)似一套自定義的數據庫操作流程，可定義參數和返回值，供前臺調用）、數據庫（關(guān)系型數據庫表，每當有數據寫(xiě)入可以在表內查看、手動(dòng)修改、刪除）、用戶(hù)數據庫（平臺封裝好的一套用戶(hù)表，包括圖形驗證碼校驗，短信注冊，密碼哈希存儲）、商城數據庫（封裝好的商城功能套件，有購物車(chē)，具有完備信息的商品表，交互函數等）、微信紅包數據庫等；
變量，有文本、數值、布爾、數組、對象、二維數組、對象數組、時(shí)間。這里單獨提變量是因為這也是 web 開(kāi)發(fā)的基礎，貫穿于前后端；
可用組件，點(diǎn)一下就會(huì )在對象樹(shù)里添加組件；
舞臺控制，選擇舞臺設備型號及大??；
預覽及發(fā)布控件；
出問(wèn)題了就對著(zhù)客服小姐姐（貌似）喊救命，她會(huì )很耐心地教你如何使用。
選中前臺 -> 點(diǎn)擊頁(yè)面，可以看到右側對象樹(shù)中有了頁(yè)面，在頁(yè)面中添加元素就構成了我們常見(jiàn)的單頁(yè)效果。
頁(yè)面中的元素包括頁(yè)面本身可以綁定事件，如圖：
點(diǎn)擊這個(gè)嘆號，讓我們對它進(jìn)行編輯，這里要強調一下，這個(gè)便是低代碼編程的具體實(shí)現，用可視化組件代替代碼邏輯：
白色的點(diǎn)表示本行及內部是否啟用，相當于代碼中的 //；
鉤子 / 事件監聽(tīng)條件；
條件判斷組件，中間有封裝好的條件，可以添加并列的 && 以及||邏輯
有這個(gè)箭頭的地方可以選中右側對象樹(shù)中的組件或變量，并可做進(jìn)一步的操作，可以做到很復雜的邏輯：
從圖中可以看出可以嵌套 js 語(yǔ)法，結合起來(lái)開(kāi)發(fā)項目，速度簡(jiǎn)直要飛起來(lái)。不過(guò)當項目越來(lái)越大，迭代的功能越來(lái)越復雜，這些組件看起來(lái)可能就沒(méi)這么清晰了，還好 ivx 的團隊考慮到了這點(diǎn)，可以將動(dòng)作事件進(jìn)行封裝調用：
現在不管是三大前端框架還是微信小程序還是沒(méi)流行起來(lái)的渲染模板都有利用 for 和 if 渲染 dom 的功能，ivx 的 for 組件同樣可以對數組數據進(jìn)行渲染。組件所在位置如下圖，for 組件需要填寫(xiě)數據來(lái)源，通常為數組結構，渲染出的結果的次數也就是數組的長(cháng)度。if 組件需要選則條件，如果符合條件就會(huì )渲染 if 內的 dom 元素。for 組件中的每一個(gè) item 可以通過(guò)當前數據與 dom 的屬性相綁定：
各位同學(xué)重點(diǎn)來(lái)了，與傳統開(kāi)發(fā)的不同之處便在這里出現，如果你需要搭建數據庫存儲用戶(hù)的數據，那么你需要：買(mǎi)云服務(wù)器 /dns-> 搭建后臺 ->webpack 配置打包信息 / 插件 /api-> 打包發(fā)布。你就是再熟練，各種環(huán)境搭建，配置證書(shū)，下載工具或插件，參數配置，再來(lái)點(diǎn)針對類(lèi)似 canvas 圖片源請求的難受的需求配置，這一套下來(lái)你不用個(gè) 1 小時(shí)能搞定？那想必你找不到對象！
ivx 的數據庫基本封裝了前端同學(xué)能用到的全部功能，先來(lái)看一下表的基本結構：
自定義參數；
將參數與篩選條件選則對應的規則相綁定；
將結果返回給參數以方便獲取。
前臺的事件組里就可以直接使用這些服務(wù)來(lái)操作數據庫啦。
基于云服務(wù)的開(kāi)發(fā)系統，再也不用背著(zhù)電腦到處跑了，再也不用在家里的電腦里裝各種環(huán)境了，有瀏覽器就能滿(mǎn)足所有的開(kāi)發(fā)需求；全棧開(kāi)發(fā)省時(shí)省力，2 個(gè)人的工作一個(gè)人做且速度更快，并且除了使用提供的組件，還可以自己寫(xiě)組件，寫(xiě) js 函數，調用三方 api 接口，非常靈活；能構建全平臺系統，目前支持小程序和 web，下個(gè)版本貌似還支持 app；這套工具的技術(shù)采用 react+golang+k8s+docker 架構將組件生成代碼，其最終生成的代碼的健壯性不比一個(gè)老師傅弱，不服的可以自己再擼一套代碼版的跑一下比比性能；安全性，不論是接口還是數據庫，其安全策略都很完備。在預覽效果時(shí)看到回包的明文結構可能還在吐槽安全性，打包發(fā)布后再看看回包都是加密過(guò)的信息，收到回包后只有瀏覽器能解密并使用數據，不禁感嘆 https 下還做到這樣真的是“安全第一”；有類(lèi)似 git 的版本管理系統，支持多人開(kāi)發(fā)和分支管理，對可視化事件備注注釋方便閱讀，當然這個(gè)肯定沒(méi)有 vscode 里直接能看到差異那種強壯的功能，但在同類(lèi)產(chǎn)品里確實(shí)做的不錯；完善的學(xué)習資源，有詳細的開(kāi)發(fā)文檔，不輸 imooc 的視頻課程，在線(xiàn)客服和技術(shù)論壇。
勸退新手的學(xué)習難度，正所謂成也蕭何敗也蕭何，其功能的強大注定了使用的難度，在開(kāi)發(fā)者眼里的優(yōu)點(diǎn)就成了新手眼里的缺點(diǎn)。如果對于程序員來(lái)說(shuō)事半功倍，但對于沒(méi)什么基礎的新人沒(méi)個(gè)幾星期的學(xué)習和使用是無(wú)法構建大體量、多功能項目的；事件組多了會(huì )導致編輯頁(yè)面變卡，滾動(dòng)的時(shí)候尤其明顯，點(diǎn)擊選中組件也有一定的延遲，在流暢性方面用戶(hù)體驗并不是很好，希望以后可以改進(jìn)；不同種類(lèi)項目的代碼不能夠通用，比如小程序的組件無(wú)法復制粘貼到 web 項目，這可能和代碼的生成邏輯有關(guān)，小程序生成的是對應 wxml、wxss 文件。對比其他前端框架，復用性就被比了下去，比如各種前端框架的 native 版本（react-native/vue-native）和小程序版本（mpvue/melago），代碼基本可以通用。
我從 html->js->jq->node-> 框架 -> 框架衍生組件 -> 表驅動(dòng)編程 -> 黑科技 -> 頸椎病康復指南，前端的變化日新月異，這些知識是我們安生立命的資本，花費了我們大量的時(shí)間，結合我們的學(xué)歷和專(zhuān)業(yè)才讓我們在行業(yè)內無(wú)法被替代。apaas 產(chǎn)品會(huì )否是互聯(lián)網(wǎng)應用的下一個(gè)風(fēng)口，會(huì )否改變編程學(xué)習的方式是互聯(lián)網(wǎng)人需要考慮的。01 代碼被高級語(yǔ)言替代，可視化編程有可能替代高級語(yǔ)言，這并不使我害怕丟了飯碗，而是會(huì )鞭策我不斷學(xué)習，一方面了解這種新穎的技術(shù)理念另一方面讓我達到 apaas 所不能企及的高度，變得更加不可替代。
聯(lián)系客服
