深圳網(wǎng)站建設(shè)公司創(chuàng)建統(tǒng)一的渲染引擎經(jīng)驗(yàn)分享。網(wǎng)站建設(shè)公司提醒Drupal（一個(gè)基于 PHP 的內(nèi)容管理系統(tǒng)）的前端開(kāi)發(fā)者面臨的最大麻煩之一是，無(wú)法在不依賴(lài) Drupal 自身的情況下重寫(xiě) Drupal 日益復(fù)雜的渲染流程，Drupal 就是通過(guò)該流程創(chuàng)建 HTML 標(biāo)記的。我們要么被迫編寫(xiě)靜態(tài)的 HTML 標(biāo)記，在最終執(zhí)行時(shí)卻被忽略；要么直接使用 Drupal 創(chuàng)建的 HTML 標(biāo)記，并在開(kāi)始寫(xiě)樣式前就要先在 CMS 中創(chuàng)建內(nèi)容。
然而把模式庫(kù)和樣式文檔分拆之后，很多網(wǎng)站建設(shè)公司設(shè)計(jì)師發(fā)現(xiàn)自己其實(shí)創(chuàng)建了一個(gè)全新的基于 Twig 的渲染引擎，該引擎可以用于 Drupal 和我們自己的樣式文檔。向 Twig 渲染函數(shù)傳遞同樣的 JSON 數(shù)據(jù)集和標(biāo)記即服務(wù)（或者設(shè)計(jì) API），會(huì)一直返回同樣的結(jié)果。現(xiàn)在，我們的模式庫(kù)可以安裝到任何支持編譯 Twig 的系統(tǒng)中了。如果 JSON 數(shù)據(jù)的收集和格式化是正常的，那么渲染出來(lái)的 HTML 也是完全一致的，無(wú)論 JSON 數(shù)據(jù)是通過(guò)靜態(tài)文件還是復(fù)雜的 CMS 系統(tǒng)傳遞的。
當(dāng)然，我們的挑戰(zhàn)在于，要知道正確格式化的數(shù)據(jù)是什么樣的。每個(gè)模板接受哪些屬性？這些屬性的類(lèi)型是字符串、數(shù)字還是布爾值？哪些屬性是必需的？有沒(méi)有屬性對(duì)接受的參數(shù)值有限制？如何確保傳遞給 Twig 函數(shù)的參數(shù)是有效的，并且能夠生成正確的 HTML？對(duì)這些問(wèn)題的嘗試解答將我們引至最偉大的發(fā)現(xiàn)之一： 網(wǎng)站建設(shè)公司創(chuàng)建統(tǒng)一的渲染引擎經(jīng)驗(yàn)JSON 模式。
JSON模式
簡(jiǎn)而言之，JSON 模式描述了一個(gè)數(shù)據(jù)集。具體而言，在我們的模式庫(kù)中，JSON 模式描述了正確地渲染一個(gè)模板所需要的數(shù)據(jù)。它列出模板的所有變量、哪些變量是必需的、變量的數(shù)據(jù)類(lèi)型，以及對(duì)變量的值的所有限制。如果我們的卡片布局有一個(gè) theme 變量，那么對(duì)應(yīng)的 JSON 模式會(huì)提示我們 theme 變量是必需的，而且取值只能是 dark 或 light 這兩個(gè)字符串之一。如果我們?cè)噲D忽略 theme，或者給模板遞字符串 gray，那么卡片布局就會(huì)返回驗(yàn)證錯(cuò)誤提示。我們可以使用 JSON 模式提示卡片布局可以包括一系列不同的組件，而且還可以通過(guò)它來(lái)驗(yàn)證用于渲染某個(gè)頁(yè)面區(qū)域的復(fù)雜 JSON 數(shù)組，所有的驗(yàn)證只需要運(yùn)行一次。深圳網(wǎng)站建設(shè)公司設(shè)計(jì)師下面的代碼可能包含一個(gè)有效的卡片布局，但是其中的 CTA 組件卻是無(wú)效的，因?yàn)槠渲?type 的值不能是 tertiary：
{
"template"："band.twig"，
"theme"："dark"，
"components"：[
{
"template"："cta.twig"，
"type"："tertiary"
}
]
}
JSON 模式允許我們通過(guò)引用來(lái)描述可以放到卡片布局、組布局和特定內(nèi)容塊里面的 CTA 組件，因此無(wú)需復(fù)制 JSON 模式文件。而且和 Twig 一樣，我們只使用單一的規(guī)范的數(shù)據(jù)源。因此，通過(guò)給不同的組件（小到按鈕、大到布局）創(chuàng)建 JSON 模式，我們得到了非常復(fù)雜且全面的 JSON 模式文件，通過(guò)它就能夠驗(yàn)證所有想要渲染的內(nèi)容塊。有了這些 JSON 模式作為武裝，任何模板所需的數(shù)據(jù)，開(kāi)發(fā)者一看便知，而且他們也可以在數(shù)據(jù)發(fā)送到共享 Twig 模板引擎之前，驗(yàn)證自己收集到的數(shù)據(jù)的有效性。這是對(duì)舊版本系統(tǒng)的一個(gè)重大提升，因?yàn)樵僖膊挥眯⌒囊硪淼匦薷妮敵龅?HTML 標(biāo)記，直到它完全符合樣式文檔了。他們可以自信地說(shuō)，只要數(shù)據(jù)是有效的，渲染引擎就會(huì)輸出正確的 HTML 標(biāo)記。不幸的是，這種方案還有一個(gè)問(wèn)題。
網(wǎng)站建設(shè)開(kāi)發(fā)者仍然肩負(fù)重?fù)?dān)，他們要在 CMS 中為頁(yè)面里的標(biāo)題、圖片和文本段落創(chuàng)建幾十個(gè)所需的輸入框。就算所有的輸入框都創(chuàng)建完成，他們還要在渲染之前吃力地將這些標(biāo)題、圖片和文本段落映射到 JSON 數(shù)組。他們也無(wú)法重用這些輸入框去收集每個(gè)模板文件的數(shù)據(jù)。每當(dāng)需要收集文本、鏈接和 CTA 按鈕所需的數(shù)據(jù)時(shí)，他們都要在 CMS 系統(tǒng)中創(chuàng)建更多的輸入框，而且相應(yīng)地也需要更多的數(shù)據(jù)庫(kù)條目。但我們還是很幸運(yùn)的，因?yàn)?JSON 模式還有幾招沒(méi)有使用。好了，深圳網(wǎng)站建設(shè)公司本文關(guān)于“創(chuàng)建統(tǒng)一的渲染引擎經(jīng)驗(yàn)分享”就到這里。如果您需要聯(lián)系
深圳網(wǎng)站建設(shè)公司定制高端門(mén)戶(hù)網(wǎng)站，請(qǐng)撥打我們網(wǎng)站建站技術(shù)客服電話(huà)或者在線(xiàn)客服。免費(fèi)為您提供高端網(wǎng)站建設(shè)的搭建解決方案。謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
