|
研發(fā)同學(xué)在端內(nèi)既追求 h5 的靈活性，也要追求性能趨近于原生。 面對入口擴(kuò)張，主端、獨(dú)立端、微信小程序、支付寶小程序、百度小程序、Android 廠商聯(lián)盟快應(yīng)用，單一功能在各平臺都要重復(fù)實(shí)現(xiàn)，開發(fā)和維護(hù)成本成倍增加。迫切需要維護(hù)一套代碼可以構(gòu)建多入口的解決方案，歷經(jīng)近 20 個月打磨，滴滴跨端解決方案 Chameleon 終于發(fā)布，真正專注于讓一套代碼運(yùn)行多端。 軟件架構(gòu)設(shè)計(jì)里面最基礎(chǔ)的概念“拆分”和“合并”，拆分的意義是“分而治之”，將復(fù)雜問題拆分成單一問題解決，比如后端業(yè)務(wù)系統(tǒng)的”微服務(wù)化“設(shè)計(jì)；“合并”的意義是將同樣的業(yè)務(wù)需求抽象收斂到一塊，達(dá)成高效率高質(zhì)量的目的，例如后端業(yè)務(wù)系統(tǒng)中的“中臺服務(wù)”設(shè)計(jì)。 而 Chameleon 屬于后者，通過定義統(tǒng)一的語言框架 + 統(tǒng)一多態(tài)協(xié)議，從多端（對應(yīng)多個獨(dú)立服務(wù)）業(yè)務(wù)中抽離出自成體系、連續(xù)性強(qiáng)、可維護(hù)強(qiáng)的“前端中臺服務(wù)”。 雖然不同各端環(huán)境千變?nèi)f化，但萬變不離其宗的是 MVVM 架構(gòu)思想，Chameleon 目標(biāo)是讓 MVVM 跨端環(huán)境大統(tǒng)一。 從事過網(wǎng)頁編程的人知道，網(wǎng)頁編程采用的是 HTML + CSS + JS 這樣的組合，同樣道理，chameleon 中采用的是 CML + CMSS + JS。 JS 語法用于處理頁面的邏輯層，與普通網(wǎng)頁編程相比，本項(xiàng)目目標(biāo)定義標(biāo)準(zhǔn) MVVM 框架，擁有完整的生命周期，watch，computed，數(shù)據(jù)雙向綁定等優(yōu)秀的特性，能夠快速提高開發(fā)速度、降低維護(hù)成本。 CML（Chameleon Markup Language）用于描述頁面的結(jié)構(gòu)，我們知道 HTML 是有一套標(biāo)準(zhǔn)的語義化標(biāo)簽，例如文本是<span> 按鈕是<button>。CML 同樣具有一套標(biāo)準(zhǔn)的標(biāo)簽，我們將標(biāo)簽定義為組件，CML 為用戶提供了一系列組件。同時(shí) CML 中還支持模板語法，例如條件渲染、列表渲染，數(shù)據(jù)綁定等等。同時(shí)，CML 支持使用類 VUE 語法，讓你更快入手。 CMSS(Chameleon Style Sheets) 用于描述 CML 頁面結(jié)構(gòu)的樣式語言，其具有大部分 CSS 的特性，并且還可以支持各種 css 的預(yù)處語言 less stylus。 通過以上對于開發(fā)語言的介紹，相信你看到只要是有過網(wǎng)頁編程知識的人都可以快速的上手 chameleon 的開發(fā)。 在用 CML 寫頁面時(shí)，chameleon 提供了豐富的組件供開發(fā)者使用，內(nèi)置的有 button switch radio checkbox 等組件，擴(kuò)展的有 c-picker c-dialog c-loading 等等，覆蓋了開發(fā)工作中常用的組件。 詳情請查看： https://cml./doc/component/component.html 為了方便開發(fā)者的高效開發(fā)，chameleon 提供了豐富的 API 庫，發(fā)布為 npm 包 chameleon-api，里面包括了網(wǎng)絡(luò)請求、數(shù)據(jù)存儲、地理位置、系統(tǒng)信息、動畫等方法。 詳情請查看： https://cml./doc/api/api.html 基于強(qiáng)大的多態(tài)協(xié)議，可自由擴(kuò)展任意 API 和組件，不強(qiáng)依賴框架的更新。各端原始項(xiàng)目中已積累大量組件，也能直接引入到跨端項(xiàng)目中使用。 代碼規(guī)范校驗(yàn)，當(dāng)出現(xiàn)不符合規(guī)范要求的代碼時(shí)，編輯器會展示智能提示，不用挨個調(diào)試各端代碼，同時(shí)命令行啟動窗口也會提示代碼的錯誤位置。 詳情請查看： https://cml./doc/framework/linter.html 很多人已經(jīng)開發(fā)小程序了，又不愿意大多闊斧重新改造，也希望使用 CML？當(dāng)然可以，2 種方式使用 CML： Chameleon 不僅僅是跨端解決方案?；趦?yōu)秀的前端打包工具 Webpack，吸收了業(yè)內(nèi)多年來積累的最有用的工程化設(shè)計(jì)，提供了前端基礎(chǔ)開發(fā)腳手架命令工具，幫助端開發(fā)者從開發(fā)、聯(lián)調(diào)、測試、上線等全流程高效的完成業(yè)務(wù)開發(fā)。 Chameleon 不僅僅是跨端解決方案，讓開發(fā)者高效、低成本開發(fā)多端原生應(yīng)用?；趦?yōu)秀的前端打包工具 Webpack，吸收了業(yè)內(nèi)多年來積累的最有用的工程化設(shè)計(jì)，提供了前端基礎(chǔ)開發(fā)腳手架命令工具，幫助端開發(fā)者從開發(fā)、聯(lián)調(diào)、測試、上線等全流程高效的完成業(yè)務(wù)開發(fā)。 框架提供了自己的視圖層描述語言 CML 和 CMSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯。 基于 node 開發(fā)的腳手架工具，提供簡潔的命令，進(jìn)行初始化與構(gòu)建項(xiàng)目。 提供規(guī)范化的項(xiàng)目結(jié)構(gòu)，適合于企業(yè)級大型應(yīng)用的開發(fā)，CML 單文件組件的開發(fā)模式更有利于提高開發(fā)效率與優(yōu)化文件組織結(jié)構(gòu)。 視圖層由 CML 與 CMSS 編寫，邏輯層由 JS 編寫，chameleon 的核心是一個標(biāo)準(zhǔn)響應(yīng)式數(shù)據(jù)驅(qū)動視圖更新的 MVVM 框架。 提供了跨端時(shí)各端底層組件與接口統(tǒng)一的解決方案，使開發(fā)者可以自由擴(kuò)展原生 api 與組件。 為了提高開發(fā)的效率與代碼的可維護(hù)性，chameleon 提供了全面的代碼規(guī)范與校驗(yàn)，幫助開發(fā)者能夠得到更好的開發(fā)體驗(yàn)。 有關(guān)安裝、使用過程以及常見問題解答，請查看以下鏈接：
|
|
|
