• 交互与前端17 CodeMirror 实践1


    说明

    对于我来说,代码的编辑量是比较大的。传统方式是使用文件方式:创建文件夹,创建文件,然后使用VSCode之类的编辑器来编辑代码。

    传统方式最大的好处是简单,任何人都可以使用。缺点在于很笨重,而且没法用算法加持。在项目之间有时候还会重复拷贝很多份代码,看起来是比较眼花缭乱的。

    我没仔细统计一天写多少代码,但是平均的估计下来也不会少于1000条吧,各种大大小小的项目应该有数百。在这个量级的累积下,基本就没办法很好的利用、回溯以前的成果了。

    所以,我想借助现有的全栈基础,再加上前端,彻底改变文件方式。通过数据库和算法来进行全局的整合。

    内容

    1 期望

    维护场景

    • 1 我希望未来的项目,全部在前端可以看见,可以很快地切换到对应的项目中
    • 2 项目是按照APIFunc的方式组织的,我可以看见项目的结构图
    • 3 可编辑的单元是链,当我点击图中的某个节点,会帮我切换到对应链的页面
    • 4 对应链的页面以表单的方式,呈现出来(链是基本调用单元)
    • 5 我可以修改链的配置,甚至代码来修改功能。代码是可以折叠展开,即写即试的。
    • 6 我也可以单独创建新的链,或者是函数。

    新项目

    • 1 通过表单,我可以创建新项目,此时没有链
    • 2 或者在创建项目的时候指定拷贝某个项目下的结构
    • 3 定义好项目的数据样本后,我可以通过搜索的方式去选择已有的链嵌入
    • 4 对于一些具有高度相关度或者相似性的链,我会得到信息提示,或者是推荐
    • 5 在页面上调试是基本的
    • 6 我也可以创建新的链插入

    2 设计

    链是核心单元,链会被复用,链具有版本和哈希。链之下即为规则函数,规则函数是更底层的单元

    链的表是一个日志表。

    链主键 ChainPkey 链名称 ChainName 规则函数 RuleFunc 规则函数版本 RuleFuncVer 基础函数 BaseFunc 链版本 ChainVer 链哈希 ChainHash
    ChanName+ ChanVer 某个文本 某个文本 数值 文本 数值 链的各函数联合在一起的哈希

    作为基本复用单元,我允许链具有多个版本,链的变化将全部被保存。可以想象,以人·年的单位来计算,数据记录应当以百万的级别增长,所以… 总体还行。

    在链表里记录的只是普通文本,最终的代码还是要落在库里所以有具体的函数库。规则函数(RuleFunc)是基础函数(BaseFunc)按照规范加工而来的,我们第一步只考虑BaseFunc。

    而这里也用一个日志表来记录函数的变化历史。

    明确一下,应当存在哪里?

    mymeta: 我的元数据集群。因为函数从某种程度上算元数据,而且它应该可以被其他主机轻易的访问(当然,授权是以后也要考虑的事)

    具体的分类是Knowledge.BaseFunc,就这么愉快的决定了。

    这个表可以被直接访问吗?

    不,这个表应当是由程序进行交互的,这样才能确保长期的规范、一致,避免因为手工错误而导致的意外。

    需要灾备吗?

    是的,虽然已经是副本集群,但是我仍然担心这些函数收到破坏,所以会有另外的程序会定时的将新的变化永久性的保留在某(几)个地方,存储的介质是机械硬盘。

    因此,要求BaseFunc还具有一个辅助表, BaseFunc_oprlog,这个表记录每一次的变更,是真正的日志。而BaseFunc严格意义只是日志型的存储表,本质上是Master表。

    **原则:开发者的时间是宝贵的,函数就是资产,这些资产应当给以完善的保护。不会因为一台机器,甚至整个网络的机器出现问题而产生损毁,或者无法恢复的问题。**围绕保护的机制后续还会开辟专题进行讨论,这里不展开了,但是重视/尊重开发者的时间,这个意识应该放到第一位。

    OK,关于存储的部分就讨论到这里,接下来就是看前端怎么产生(日志)数据味过去了。

    3 前端代码编辑

    用户使用前端编辑代码,所有的变化将秒级的存储在服务端的缓存数据库中(Redis),当完成了一次成功的测试,就会将成功的版本存入队列(Redis Stream), 然后前端的任务就完成了。这些动作后台通过ajax轮询,前端提供一个类似交通灯的按钮就可以让开发者知道状态。

    基本上,我只会考虑让代码编辑器写python的程序。回顾一下现在vscode能做的东西(我常用的功能):

    • 1 一个黑黑的界面
    • 2 语法高亮
    • 3 自动补全
    • 4 批量的选中与编辑(CMD +D)
    • 5 修改缩进
    • 6 *分屏比较代码差异
    • 7 括号匹配

    我用的功能的确是不多,甚至连分屏也没用。

    光是编辑也不足够,通常我会马上开一个终端,使用ipython或者jupyter调试。虽然vscode也能帮你开一个终端,但一来很局促(界面很小),另外我的终端很多时候是依赖容器打开的,所以就更不太用vscode。

    所以我的前端需要再结合一个界面,来提交测试以及看到反馈。有一个小设计是,一旦测试成功了,那么版本会自动录入oprlog,然后进行增/改。同时还有一个比对功能,比对的是上一个,或上n个版本的比对。

    开始实验,我参考了这篇文章

    后来,我找到了一个完美的作业, 项目代码在这里

    以下是页面的代码,我发现完美的作业还是有瑕疵的,在使用sublime风格快捷键的时候,还需要引入 search.jssearchcursor.js,不然像“寻找下一个同样单元”的功能就会失败。另外考虑到搜索和替换,要引入dialog.css/.js。

    DOCTYPE html>
    
    <html>
    
    <link rel="stylesheet" href="/static/vendor/codemirror-5.65.9/lib/codemirror.css">
    <link rel="stylesheet" href="/static/vendor/codemirror-5.65.9/addon/fold/foldgutter.css" />
    <link rel="stylesheet" href="/static/vendor/codemirror-5.65.9/addon/hint/show-hint.css">
    <link rel="stylesheet" href="/static/vendor/codemirror-5.65.9/addon/lint/lint.css">
    <link rel="stylesheet" href="/static/vendor/c
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
  • 相关阅读:
    陈志泊主编《数据库原理及应用教程第4版微课版》的实验题目参考答案实验4
    ValueError: Index contains duplicate entries,cannot reshape
    PyTorch 深度学习之逻辑斯蒂回归Logistic Regression(五)
    Python实现基于交换机转发实验
    在工业设计在线应用中,这些词你知道吗?
    Spring之IoC
    利用IPV6随时访问家中影音Jellyfin
    使用 Python 构建自动播客视频,将音频转为视频
    10.本项目的简单介绍及所用工具
    c++八股文:c++面向对象
  • 原文地址:https://blog.csdn.net/yukai08008/article/details/128051473