前端框架擼起來——概述

known發表於2021-11-23
前端框架

前言

如今前端框架有很多，各式各樣，學習使用成本也高，二次開發也非易事。如果自己設計一套前端框架，按照自己的想法和思路去寫，做到使用方便，程式碼簡潔，並非是一件難事。

下面我帶大家一起擼一箇中後臺的前端框架，本系列主要是寫擼框架的思路和主要程式碼，一些具體的實現，由於程式碼太長，文章中就省略一帶而過。具體的程式碼可以移步gitee或github進行下載，感興趣的請star支援。

本框架對於熟悉jQuery的同學來說，是一個不錯的選擇，既對jQuery有進一步的認識，又對JavaScript有更深的瞭解。

框架名稱

小孩出生要取名字，一個新的框架也是如此，本框架名字取作“KUI”，沒啥別的意思，K是取自Known的首字母。

框架地址

技術要求

實現本框架需要有如下技術背景：

  • 要熟悉css樣式表
  • 要熟悉JavaScript指令碼語言
  • 要熟悉jQuery框架

框架目標

本框架的目標是依賴最少的第三方元件，使用最少的程式碼，約定大於配置。應滿足以下功能：

  • 支援單頁和多標籤iframe頁
  • 支援多語言、路由、元件和模組化
  • 支援文字框、下拉框、日期框、單選框、核取方塊、文字域、富文字框、彈窗選擇框等
  • 支援彈出層、標籤頁、圖表、樹、列表、表單、表格、可編輯表格等
  • 內建登入頁、後臺框架頁、通用增刪改查頁等

目錄結構

KUI
├── static
│   ├── fonts
│   ├── img
│   ├── libs
│   │   ├── ztree
│   │   ├── datepicker
│   │   ├── echarts.min.js
│   │   └── wangEditor.min.js
│   ├── css
│   │   ├── font-awesome.css
│   │   └── kui.min.css
│   └── js
│       ├── jquery.min.js
│       └── kui.min.js
├── src
│   ├── components
│   │   ├── Form.js
│   │   ├── ...
│   │   └── Router.js
│   ├── langs
│   │   ├── en.js
│   │   └── zhCN.js
│   ├── kui.css
│   ├── kui.js
│   └── app.js
├── bundleconfig.json
└── index.html

目錄中只有一個html檔案，其他的都是js和css檔案。單頁應用只有一個html檔案，即index.html，這個檔案的程式碼很簡單，如下所示：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>KUI</title>
    <base href="/">
    <link rel="stylesheet" href="/static/css/font-awesome.css">
    <link rel="stylesheet" href="/static/css/kui.min.css">
</head>
<body>
    <div id="app"></div>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/lang/zh-CN.min.js"></script>
    <script src="/static/js/kui.min.js"></script>
</body>
</html>

使用示例

框架建成後，易於使用和程式碼簡潔是第一要求，我們期望的一個增刪改查頁面的程式碼應該是下面這樣的：

function DemoPage() {
    var url = {
        QueryModels: baseUrl + '/Demo/QueryDemos',
        DeleteModels: baseUrl + '/Demo/DeleteDemos',
        SaveModel: baseUrl + '/Demo/SaveDemo'
    };
    var codes = ['選項一', '選項二'];
    //定義一個CRUD頁面物件，欄位，按鈕等
    var view = new View('Demo', {
        url: url,
        columns: [
            { field: 'Id', type: 'hidden' },
            { title: '文字', field: 'Text', type: 'text', required: true, query: true },
            { title: '日期', field: 'Date', type: 'date' },
            { title: '下拉框', field: 'Select', type: 'select', code: codes },
            { title: '核取方塊', field: 'Check', type: 'checkbox', code: codes },
            { title: '單選框', field: 'Radio', type: 'radio', code: codes }
        ],
        formOption: {},//表單選項
        gridOption: {  //表格選項
            toolButtons: ['add', 'edit', 'remove']
        }
    });
    
    this.render = function (dom) {
        view.render(dom);//呈現頁面，由路由元件呼叫
    }
}

下一章將帶大家如何實現框架的元件和路由。

相關文章