前端框架撸起来——概述

2021年11月26日 阅读数:11
这篇文章主要向大家介绍前端框架撸起来——概述,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

前言

现在前端框架有不少,各式各样,学习使用成本也高,二次开发也非易事。若是本身设计一套前端框架,按照本身的想法和思路去写,作到使用方便,代码简洁,并不是是一件难事。javascript

下面我带你们一块儿撸一个中后台的前端框架,本系列主要是写撸框架的思路和主要代码,一些具体的实现,因为代码太长,文章中就省略一带而过。具体的代码能够移步giteegithub进行下载,感兴趣的请star支持。css

本框架对于熟悉jQuery的同窗来讲,是一个不错的选择,既对jQuery有进一步的认识,又对JavaScript有更深的了解。html

框架名称

小孩出生要取名字,一个新的框架也是如此,本框架名字取做“KUI”,没啥别的意思,K是取自Known的首字母。前端

框架地址

技术要求

实现本框架须要有以下技术背景:java

  • 要熟悉css样式表
  • 要熟悉JavaScript脚本语言
  • 要熟悉jQuery框架

框架目标

本框架的目标是依赖最少的第三方组件,使用最少的代码,约定大于配置。应知足如下功能: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,这个文件的代码很简单,以下所示:git

<!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>

使用示例

框架建成后,易于使用和代码简洁是第一要求,咱们指望的一个增删改查页面的代码应该是下面这样的:github

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);//呈现页面,由路由组件调用
    }
}

下一章将带你们如何实现框架的组件和路由。web