CSS Grid 布局入門實戰-模仿Windows

CSS Grid 布局入門實戰-模仿Windows 11 快速布局窗口

i，朋友，您來啦。帶上小板凳，我們一起聊一聊今天的話題。

首先，使用過Windows 11的朋友，可能使用過窗口布局功能。那么，如何通過Grid布局實現此功能呢？

網格布局容器

采用網格布局的區域，一般稱為“容器”。在容器內部通過網格定位的子元素，一般稱為“項目”。

display: grid | inline-grid;

HTML

<div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>

CSS

.grid{display: grid;}

CSS

.grid{display: inline-grid;}

定義列寬與行高

在指定容器為網格布局以后，采用 grid-template-columns 定義每一列的列寬，采用 grid-template-rows 定義每一行的行高。

grid-template-columns: <length> | minmax(min, max) | auto | repeat | ...
grid-template-rows: <length> | minmax(min, max) | auto | repeat | ...

HTML

<!-- 定義一個4列、多行的界面。 -->
<div>
    <div class="grid">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>
<div>
    <div class="grid grid-repeat">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>

<div>
    <div class="grid grid-fr">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>

CSS（多種寫法，效果基本一致。）

.grid{
    display: inline-grid;
    background-color: #212121;
    padding:5px;
    /*寫法1*/
    grid-template-columns: 10px 30px 10px 30px;
    grid-template-rows: 15px 30px;
    grid-gap:10px;
}

.grid-repeat{
    background-color: rgb(140, 139, 139);
    /*寫法2*/
    grid-template-columns: repeat(2, 10px 30px);
    grid-template-rows: repeat(2, 15px 30px);
}

.grid-fr{
    background-color: rgb(193, 193, 193);
    /*寫法3 取決于容器寬度*/
    grid-template-columns: 1fr 3fr 1fr 3fr;
    /*取決于容器高度*/
    grid-template-rows: 1fr 2fr;
}

.grid-item{
    background-color: #ddd;
    min-width: 10px;
    min-height:15px;
}

行間距、列間距

grid-gap: row col | row-col | 20px 20px | 20px; 分別定義行列或同時定義行列間距；
grid-row-gap: 20px; 單獨定義行間距
grid-column-gap: 20px; 單獨定義列間距

網格區域

grid-template-areas: <string>+

Windows11 窗口布局功能模擬

CSS

.window-layout-select{
  position: absolute;right:0;z-index: 1009;padding:5px;
  background-color: #212121;border-radius: 4px;
  grid-template-columns: repeat(2, 20px) 0 repeat(6, 6.6667px) 0 repeat(12, 3.3333px);
  grid-template-rows: 30px 0 15px 15px;
  grid-gap:2px;
  grid-template-areas: 
    "a b . c c c c d d . e e e e f f f f g g g g"
    ". . . . . . . . . . . . . . . . . . . . . ."
    "h i . j j j k k k . l l l m m m m m m n n n"
    "h o . p p p q q q . l l l m m m m m m n n n";
  display: none;
}
.window-layout-select>div{background-color: #ddd;cursor: pointer;}
.window-layout-select>div:hover{background-color:aqua;}
.radius.top.left{border-top-left-radius:4px;}
.radius.top.right{border-top-right-radius:4px;}
.radius.bottom.left{border-bottom-left-radius:4px;}
.radius.bottom.right{border-bottom-right-radius:4px;}

.item-a {grid-area: a;}
.item-b {grid-area: b;}
.item-c {grid-area: c;}
.item-d {grid-area: d;}
.item-e {grid-area: e;}
.item-f {grid-area: f;}
.item-g {grid-area: g;}
.item-h {grid-row: 3 / 5;}
.item-i {grid-area: i;}
.item-j {grid-area: j;}
.item-k {grid-area: k;}
.item-l {grid-area: l;}
.item-m {grid-area: m;}
.item-n {grid-area: n;}
.item-o {grid-area: o;}
.item-p {grid-area: p;}
.item-q {grid-area: q;}

/*demo*/
.demo{
    display: grid;right:40%;top:25%;
}

關注作者：關注有趣的網頁布局。

希望本文能夠對您有所幫助，感謝您的閱讀！

人人為我，我為人人，謝謝您的瀏覽，讓我們一起加油吧。

家好，我是Echa。

又到周五啦，提前祝大家周末愉快！今天來分享一些實用的前端工具！

1. Small Dev tools

Small Dev Tools 是一個前端工具網站，包含了很多實用的功能，比如JSON解碼器、JSON格式化程序、UTF8編碼、Base64編碼、Base64解碼、CSS格式化程序、CSS壓縮器等。

官網：https://smalldev.tools/

2. Carbon

Carbon 是一個在線工具，可以生成漂亮的不同風格的代碼圖片。

官網：https://carbon.now.sh/

3. UI Design Daily

UI 設計日報，提供免費優質的 UI 資源。

官網：https://www.uidesigndaily.com/

4. Color Hunt

ColorHunt，即顏色獵人，是一個在線設計配色的網站，其最大的特點就是使用飽和度調配配色方案。每天會根據瀏覽量進行更新排版，并可以直接使用。

官網：https://colorhunt.co/

5. SCHEME COLOR

SCHEME COLOR 是一個在線的配色工具網站，可以根據顏色、類型等查找合適的配色方案。

官網：https://www.schemecolor.com/

6. Keyframes

Keyframes 可以用來創建動畫、陰影和使用顏色，幫助我們編寫更好的CSS。

官網：https://keyframes.app/

7. Design Resources

Design Resources 是一個設計資源的集合。

官網：https://www.designresourc.es/

8. Omatsuri

Omatsuri 是一個開源項目，包含12個實用的前端工具。

官網：https://omatsuri.app/

9. UI Snippets

UI Snippets 是一個前端動畫合集，可以通過右鍵點擊想要的動畫直接復制對應的 CSS 或 SCSS 代碼。

官網：https://ui-snippets.dev/

10. Pattern CSS

Pattern CSS 可以用漂亮的圖案填充空白背景。

官網：https://bansal.io/pattern-css

11. Can I use

Can I use 可以用來查詢 HTML5、CSS、JS、SVG 在各種流行瀏覽器中的特性和兼容性。

官網：https://caniuse.com/

12. CSS Gradient

CSS Gradient 是一個用來快速方便的創建 CSS 漸變的網站。

官網：https://cssgradient.io/

13.CSS matic

CSS matic 是一個 CSS 工具，目前包含4個很有用的工具，分別是：支持各種顏色和透明度的漸變工具，使用漸變工具，可以創建漸變平滑的色彩變化效果和微妙的透明膠片；邊框圓角工具可以幫助你方便的實現需要的圓角效果；噪聲紋理可以幫助你創造奇妙的背景圖案，能夠實時預覽結果；盒陰影工具可以控制模糊半徑的變化，顏色變化，陰影大小，可以實現你想要的任何效果。

官網：https://www.cssmatic.com/

14.Am I Responsive

Am I Responsive 用來測試響應式網頁。輸入鏈接即可生成預覽，Am I Responsive 能幫我們測試出頁面在手機、平板電腦、筆記本電腦和桌面端設備上的瀏覽體驗。

官網：http://ami.responsivedesign.is/

15. CSS Generator

這是一個實用的 CSS 生成器，可以實時查看調試效果。

官網：https://html-css-js.com/css/generator/

16. My Brand New Logo

My Brand New Logo 是一個CSS 調色板生成器，用來創建一致的調色板方案。

官網：https://mybrandnewlogo.com/color-palette-generator

17. 裁剪路徑生成器

CSS cli-path 功能能夠構建復雜的形狀，該工具讓我們可以輕松地以交互方式構建該多邊形。

官網：https://bennettfeely.com/clippy/

18. CSS Grid Generator

CSS Grid Generator 是一個 Grid 布局生成器，通過這個工具可以快速創建自定義CSS Grid布局。

官網：https://cssgrid-generator.netlify.app/

19. CSS Layout Generator

CSS Layout Generator 布局生成器可以為布局組件創建 CSS 和 HTML 的工具。

官網：https://layout.bradwoods.io/

20. Fluid-responsive font-size calculator

Fluid-responsive font-size calculator 即響應式字體計算器，可以輕松創建流暢的排版體驗。它有更廣泛的支持，可以用幾行 CSS 來實現。

官網：https://websemantics.uk/tools/responsive-font-calculator/

21. regex101

Regex101是學習、測試正則表達式的工具網站。

官網：https://regex101.com/

22. Regex-Vis

Regex-Vis 是一個正則表達式可視化器和編輯器。

官網：https://regex-vis.com/

23. Loupe

Loupe 是一個可視化工具，可幫助我們了解 JavaScript 的調用堆棧/事件循環/回調隊列是如何執行的。

官網：http://latentflip.com/loupe/

24. RunJS

RunJS 是一個桌面應用程序，可幫助我們編寫專門的 Javascript 和 Typescript 代碼。它的一些優勢是可以快速測試代碼，輕松導入和測試庫代碼，并且能夠修改界面、主題和字體以適應偏好。

官網：https://runjs.dev/

25. Wrap SVG Online

Wrap SVG Online 通過拖放從計算機上傳圖像，可以輕松地編輯網頁的 SVG 圖像。

官網：https://pavellaptev.github.io/warp-svg/

26. SVG Path Visualizer

SVG Path Visualizer 可以幫助我們通過輸入 SVG 路徑數據來快速直觀地查看 SVG 圖像。此外，該工具還提供了詳細的說明，以便了解如何創建基本的 SVG 形狀，如直線、曲線、三角形等。

官網：https://svg-path-visualizer.netlify.app/

27. BGJar

BGJar 是一個在線工具，可以輕松快速地為網站創建 SVG 背景。只需編輯必要的信息，它將自動導出圖像或代碼供我們應用到網站。

官網：https://bgjar.com/

28. Wavesnippets

Wavesnippets 可以將代碼分步設置為動畫、視頻或 GIF。

官網：https://www.wavesnippets.com/

29. Generate SVG Waves

Generate SVG Waves 可以用來創建 SVG 波形背景。

官網：https://svgwave.in/

30. CodeSandbox

CodeSandbox 是一個為 Web 應用程序開發而構建的在線編輯器，支持多種主流框架。

官網：https://codesandbox.io/

31. Openbase

Openbase 幫助開發人員在數以百萬計的開源軟件包中進行選擇和使用。

官網：https://openbase.com/

32. CodePen

CodePen 是一個在線的前端代碼編輯工具，可用于制作測試頁面、代碼調試，所見即所得。

官網：https://codepen.io/

33. JSONLint

JSONLint 是一個 JSON 調試工具，如果遺漏了語法中的某些內容，它會進行檢查。JSONLint 是處理大型 JSON 格式的絕佳工具，而且很容易上手。

官網：https://jsonlint.com/

34. Minify

Minifier 可以對 JavaScript 和 CSS 代碼進行壓縮，通過縮小可以提高網站加載速度。Minifier 通過刪除 .js 和 .css 文件中的空白并重新格式化它們以減小大小。

官網：https://www.minifier.org/

35. Unminify

Unminify 和 Minifier 恰恰相反。使用 Unminify 可以使 .js 或 .css 文件可讀。這兩種工具都非常容易使用。

官網：https://unminify.com/

36. CRADIENT.ART

CRADIENT.ART 是一個高級 CSS 漸變編輯器，使用帶有分層、設計工具和免費云存儲的功能豐富的編輯器設計插圖、圖案、圖標等。

官網：https://gra.dient.art/

37. 3DPop

3DPop 可以使用 CSS 生成很棒的 3D 文本效果。

官網：https://textpop3d.web.app/

38. CSS Photo Filters

CSS Photo Filters 是一個CSS圖片濾鏡工具，提供了 36 個 CSS 過濾器供我們使用。

官網：https://baseline.is/tools/css-photo-filters/

ttps://gitee.com/shxch1205/webrose(開源地址)

www.webrose.net.cn(官網,有在線Demo與API文檔)

在前端頁面布局方面，WebRose有著與其他框架完全不同、獨一無二的創新簡潔新方法，最終實現一行代碼就解決一個問題，更完美詮釋了“低代碼”理念。下面詳細逐步說明設計初衷。

與Vue代碼比較

下面就是一段典型的Vue語法實現多頁簽與分割條布局嵌套組合的代碼：

<el-tabs v-model="tabName">
  <el-tab-pane label="機構" name="tab_1">
     <el-row :gutter="24">
      <el-col :span="5">
        左邊的內容,寬度占比5/24
      </el-col>
    
      <el-col :span="19">
        右邊的內容,寬度占比19/24
      </el-col>
    </el-row>
  </el-tab-pane>
  
  <el-tab-pane label="人員" name="tab_2">
     第二個頁簽內容
  </el-tab-pane>
  
  <el-tab-pane label="角色" name="tab_3">
    <el-tabs v-model="tabName">
      <el-tab-pane label="常用角色" name="tab_1">
         常用角色內容
      </el-tab-pane>
      
      <el-tab-pane label="特殊角色" name="tab_2">
         特殊角色內容
      </el-tab-pane>
    </el-tabs>
  </el-tab-pane>
</el-tabs>

這個界面就是第一層是三個頁簽，然后第一個頁簽中又是左右分割，第3個頁簽創建兩個子頁簽。上面這段代碼要25行左右。

WebRose實現上面同樣效果只需要下面3行代碼：

WRS.createTabb("d1", ["機構","人員","角色"]);  //創建多頁簽
WRS.createSplit("d1_1", "左右", "5/24");  //第1個頁簽左右分割,
WRS.createTabb("d1_3", ["常用角色","特殊角色",]);  //第3個頁簽再創建兩個子頁簽

從上面這段例子代碼可以看出，WebRose框架的設計思想與特點是：

一個JS文件，一行JS代碼就創建一個布局，不需要Html或其他文件與第二行代碼，一行代碼就夠了。

2.沒有嵌套結構，是扁平化的從上往下的順序結構，代碼結構非常簡潔，沒有“回調地獄”式那種縮進層次非常深的結構。

3.通過id的命名規則巧妙實現了父子關系綁定。比如創建多頁簽時，就會以父親組件的id為前輟，以_1,_2,_3為后輟創建子組件，比如父組件id是d1,則子組件id為d1_1、d1_2、d1_3。分割器則是以_A與_B為后輟，比如父組件id為d1，則子組件(左右與上下分割都一樣)的id 為d1_A(左邊或上邊)，d1_B(右邊或下邊)。

根據這個設計思想與嵌套思路，理論上就可以實現無限任意嵌套層次的布局，我們稱之為自由布局，而且無論多少層次，代碼都是扁平化結構，非常簡潔。

換句話說就是，通過幾個簡單的API就可以自由實現任意嵌套層次的復雜布局，我們稱之為“自由布局”設計。

然后繼續在上面3行代碼后面添加如下代碼，創建表格、表單、樹...等數據組件，比如：

WRS.createBillList("","d1_1_A","CRM_USER"); //在第1個頁簽的分割器左邊創建人員表格

WRS.createBillCard("","d1_1_A","CRM_USER"); //在第1個頁簽的分割器右邊創建人員表單

WRS.createBillList("","d1_3_1","CRM_ROLE"); //在第3個頁簽的第1個子頁簽中創建角色表格

WRS.createBillTree("","d1_3_2","CRM_CORP"); //在第3個頁簽的第2個子頁簽中創建機構樹

即六七行代碼就完成了一個功能界面邏輯。系統在線典型Demo以及系統自帶的管理中心控制臺所有功能都是這樣的代碼，這證明是實際可行的，完全行得通的。

常用API(總共就5種)

常見的創建自由布局的API函數如下：

WRS.createSplit("d1", "左右", 300);	左右分割,左邊固定寬300像素,右邊有多大撐多大會同時創建d1_A與d1_B兩個子div
WRS.createSplit("d1", "左右", "25%");	左右分割,左邊寬25%，右邊寬75%，自適應父親窗口大小
WRS.createSplit("d1", "右左", 300);	左右分割,但是右邊固定寬300像素,左邊有多大撐多大,與第一種相反
WRS.createSplit("d1", "上下", 300);	上下分割,上邊高300像素,下邊撐大!會占滿父容器100%高度，不會撐開父窗口。與左右分割一樣，也是支持百分比與“下上”反過來的
WRS.createTabb("d1", ["人員","機構","icon12/角色"]);	創建多頁簽，分別叫人員、機構、角色，角色頁簽還有個圖標
WRS.createVFlow("d1", ["用戶/300", "機構/325", "460", "400"]);	縱向平鋪布局,從上往下平鋪下去，會撐開整個父容器，在父容器中生成滾動條
WRS.createLeftMenu("d1_A",[ "客戶信息.基本信息", "客戶信息.學習經歷", "客戶信息.工作經歷", "客戶信息.其他信息.健康情況", "客戶信息.其他信息.保險記錄", ], myClickMenu);	創建菜單導航條，會根據小數點分割，生成樹型結構.
WRS.createHtml("d1_A","<div style='float:left;width:60%'>左邊內容</div><div style='float:left;width:40%'>右邊內容</div>");	直接在分割器右邊再使用純Html創建新頁面

其中的WRS.createHtml(_divid, _html)有點特殊，即可以直接創建一段完全個性化的標準html，然后與分割器、多頁簽任意嵌套組合！

即可以先創建分割器，然后在里面創建個性化html，也可先創建個性化Html，然后在里面創建多頁簽。

因為一般來說大部分需求場景使用其他幾個函數就可以搞定，使用WRS.createHtml()函數個性化界面的情況并不多，或者說即使有也并不會太復雜，完全可以接受，又能絕對保證可以搞定任何個性化需求，因為直接寫Html在理論上無所不能，有點像個終極武器。

另外，值得提示的是WRS.createSplit()創建分割條這個函數可以通過反復嵌套，實現左中右、上中下、東西南北中、縱向多列、橫向多行、表格矩陣、任意矩陣的各種效果。

比如下面這幾行代碼就可以實現從左到右有6列，每列寬度100像素、高度是撐滿父容器。

WRS.createSplit("d1","左右",100);
WRS.createSplit("d1_B","左右",100);
WRS.createSplit("d1_B_B","左右",100);
WRS.createSplit("d1_B_B_B","左右",100);
WRS.createSplit("d1_B_B_B_B","左右",100);

仿照此例，也可以搞“上下”分割，把頁面行分成6行，然后每行再分多列，既可以按絕對像素分，也可以按比例分，依次類推可以很容易把整個頁面分割出任意自由行與列的矩陣出來。

即WebRose核心設計理念就是：使用分割條(createSplit)、多頁簽(createTabb)、縱向平鋪(createVFlow)三種布局組件，再加上“導航菜單條(createLeftMenu)”與CreateHtml()函數，總共就這五個對象與方法，然后任意組合與嵌套，就可以解決所有常見布局問題。

然后在布局后的區域內部再創建表單(CreateBillCard)、表格(CreateBillList)、樹(CreateBillTree)、查詢框(CreateBillQuery)、報表(CreateReport)、圖表(CreateChart)、工作流(CreateWorkFlow)等各種數據組件，這種函數也就七八個左右。即總共只要學習不到15個函數就可以上手開發絕大部分功能頁面。

其中建表單(CreateBillCard)比較特殊，并不是封裝成一個個的控件(比如文本框、下拉框、日期等)，而是就一行代碼只要送入一個模板編碼參數，然后在線配置模板即可，這也是為了在需求變更要增加表單字段時，可以在線配置立即生效，實現PaaS在線開發效果，而不是要改代碼重新發布。這個功能另有專門文章詳細講解。

即一行代碼搞定一件事，一個功能點最多也就幾行代碼，即非常有"低代碼"的味道。

下面是一個實際相當復雜界面的代碼例子截圖(多層嵌套疊加)：

復雜功能前端界面代碼

曾使用ElementUI驗證實現上面這個同樣功能需要上百行代碼。

需要特別指出的是，這種低代碼語法與開發模式并不是100%萬能的，他更適用于管理軟件界面，比如ERP等管理軟件中各種表格/表單/樹/多頁簽疊加，即都是各種“數據組件”拼裝，根據經驗管理軟件中約70%~90%的功能屬于這種類型，而對于類似互聯網首頁(比如淘寶/網易)，或一些領導駕駛艙報表展現界面，并不適合使用這種開發模式，而應該使用靜態Html或使用Vue模式。

這種情況只要在配置菜單時把菜單類型更改一下，即不采用WRS低代碼模式，而直接使用Vue模式寫界面即可(在線Demo中有類似例子)，即WebRose平臺可以兼容WRS低代碼模式與其他模式，根據實際情況合理選擇不同模式，而低代碼模式如果能把70%~90%左右的功能點的開發難度大幅度降低已經很有價值了，所以要辯證的看待這個事情，千萬不能抬杠。

設計理念剖析

這種通過JS函數來創建布局，一行代碼創建一個容器布局，從上往下，逐層創建，還有以下幾點好處：

1.非常符合設計界面時,從頂層設計往細節設計的自然習慣，就好比造房子，先畫出總體布局與架構，再逐步設計各個局部與細節。比如一個界面先分成左右布局，然后右邊是多頁簽，第一個頁簽中又是上下布局，上面是表格，下面是個卡片。。設計界面時就是這樣的自然順序，是一步步來的。每一步就是一行代碼。

這個順序其實也是瀏覽器解析整個Html的計算邏輯順序，即瀏覽器也是從上往下、從外往里，從整體到局部來解析渲染繪制Html頁面的，所以這種設計理念是完全科學的。

2.把創建布局容器與創建數據組件進行拆分解耦，即先創建布局（我們稱為“布局容器組件”），最后創建表單、卡片、表格，這也非常像造房子，先造好房間，最后是擺放家具，家具就好比表格/表單/樹這些我們稱之為“數據組件”，這種設計理念也是科學與自然的。

3.一行JS代碼同時干了好幾件事，使開發大大簡潔了，這幾件事包括：

A.通過入命名,使本組件與父組件形成父子嵌套關系綁定。

B.同時創建了自己的子組件，比如創建分割條時，會生成以_A，_B為后輟的新的子組件。多頁簽是_1、_2、_3為后輟...

C.變相變現了“路由跳轉”功能，Web中局部刷新也叫“路由跳轉”，即指定某個區域是另一個url，那個url中有邏輯創建新的界面，在快速平臺中，這一行js就是刷新了那塊區域(假如原來有界面會自動覆蓋)，并同時立即創建了新的組件，刷新url與url中構造新界面合成一步，等價于路由，而且會嚴格控制內存釋放的問題。

D.同時創建了JS對象，這也是最關鍵的，即這一行代碼WRS.createBillList("","d1_1_A","CRM_USER");同時在瀏覽器當前window中也創建了一個名為d1_1_A_BillList的JS對象，這是一個高內聚封裝的對象，里面有屬性、方法，數據，也是雙向數據綁定，也是MVVM思想，這與Vue的組件對象的思想是完全相同的。

這也是我們一直強調是汲取了Vue先進的MVVM思想然后使用原生JS封裝的思路。后續代碼直接操作這個對象名來執行其方法，比如d1_1_A_BillList.queryDataByCondition("sex='男'")；就直接查詢出性別為男的所有人員。

說白了這相當于自創了一種與Angular/React/Vue思想一致的第四種MVVM前端框架，只不過在低代碼方面追求更極致，就想一行JS代碼解決問題，而無論是Vue還是Angular等，底層本質上也是用JS來解決問題，因為瀏覽器只認識JS語言，即使像TypeScript這種表面上是另一種語言其實也是對JS的封裝而已，即所有一切最終其實都是JS代碼，原理都是一回事，并不存在另類奇葩得不可接受的問題。

換句話說，也正是因為一行代碼同時搞定幾件事，簡化與省略了大量代碼，最后變成了一行代碼就OK了，這其實也是該設計的關鍵奧妙所在。

動態創建布局

有人應該已經看出，平臺創建前端頁面與組件都是使用JS函數來創建，甚至創建一段靜態html也是使用函數WRS.createHtml來創建，即沒有.html文件，也沒有.Vue文件，只有一個JS文件。

這種JS程序動態創建界面與Vue等“申明式標簽”的思路區別是，一種是靜態申明式標簽，一種是動態程序創建。

兩者更大的區別在于根據某個條件繪制出完全不同的界面時，解決思路不同。Vue解決思路是肯定要先把所有頁面都寫好，然后根據一個條件，用v-if=“條件關系”，與v-else屬性來處理，舉個例子，比如根據登錄人員的編號，如果是admin(管理員)，則使用左右布局（左邊機構右邊人員），如果不是admin用戶，則使用多頁簽布局，也可比較一下兩種語法：

<div v-if="LoginUser.code=='admin'">
  <el-row>
  <el-col :span="10">
    <el-billList>部門表</el-billList>
  </el-col>
  <el-col :span="14">
    <el-billList>人員表</el-billList>
  </el-col>
  </el-row>
</div>
<div v-else>  <!--如果不是admin則輸出這個div-->
<el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="部門" name="first"><el-billList>部門表</el-billList></el-tab-pane>
      <el-tab-pane label="人員" name="second"><el-billList>人員表</el-billList></el-tab-pane>
</el-tabs>
</div>

WebRose平臺JS代碼機制如下:

if(LoginUser.code=='admin'){
   WRS.createSplit("d1", "左右", "40%");
   myDeptTable=WRS.createBillList("","d1_A", "部門模板編碼");
   myUserTable=WRS.createBillList("","d1_B", "人員模板編碼");
} else {
  WRS.createTabb("d1", ["部門", "人員"]);
  myDeptTable=WRS.createBillList("","d1_1", "部門模板編碼");
  myUserTable=WRS.createBillList("","d1_2", "人員模板編碼");
}

JS代碼動態創建的邏輯可讀性比靜態頁面配置條件屬性更好些，更符合人的正向思維習慣（v-if/v-else有人覺得生澀,好象是要反來過思考），尤其是邏輯有多層if/else嵌套時，靜態條件屬性思路還需要把復雜條件先折算成一個變量進行配置，因為無法像JS代碼那樣自由靈活的搞出多層if/else，而一切都使用JS代碼動態創建頁面則沒有這些問題，非常靈活、自由、自然。所以這兩種思路也是各有利弊，也是換個思路嘗試，要辯證看待。

在互聯網業務場景中，一般都是靜態頁面更多，所以Vue這種標簽申明式更適合，而在管理軟件中，經常會根據復雜的權限計算，然后動態生成布局。比如一個多頁簽，可能是根據登錄人員的角色與機構來動態生成，比如：如果是總行的管理員，則是某幾個頁簽，如果是分行的普通員工，則又是另幾個頁簽,會多一個頁簽。

即動態頁面更適合直接使用JS函數來創建。

總結

WebRose低代碼平臺“自由布局”設計，是一種全新的創新設計新思路，一行代碼解決一件事，一件事一行代碼就夠了，一個功能點只要幾行或十幾行代碼就夠了，非常適用于管理軟件，能解決大部分功能的需求場景，可大幅度降低代碼量，平臺又同時兼容其他框架與模式。

在線咨詢

上一篇：js入門三部曲「第二部」ep10 讓坤坤變大 #cs
下一篇：ChatGPT實戰搭建Express與Vue3網頁版

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商