前端框架擼起來——概述
- 2021 年 11 月 23 日
- 筆記
- 04 Web技術, 13 HTML5, 16 Javascript
前言
如今前端框架有很多，各式各樣，學習使用成本也高，二次開發也非易事。如果自己設計一套前端框架，按照自己的想法和思路去寫，做到使用方便，代碼簡潔，並非是一件難事。
下面我帶大家一起擼一個中後台的前端框架，本系列主要是寫擼框架的思路和主要代碼，一些具體的實現，由於代碼太長，文章中就省略一帶而過。具體的代碼可以移步gitee或github進行下載，感興趣的請star支持。
本框架對於熟悉jQuery的同學來說，是一個不錯的選擇，既對jQuery有進一步的認識，又對JavaScript有更深的了解。
框架名稱
小孩出生要取名字，一個新的框架也是如此，本框架名字取作「KUI」，沒啥別的意思，K是取自Known的首字母。
框架地址
- Gitee://gitee.com/known/kui
- Github://github.com/known/kui
技術要求
實現本框架需要有如下技術背景：
- 要熟悉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
├── 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);//呈現頁面，由路由組件調用
}
}
下一章將帶大家如何實現框架的組件和路由。
