[Think more, Code less]无招胜有招 - 忘记规范,代码更规范

本文提倡""Think more, code less""的理念,介绍了GESSS(通用、平衡、简短、简单)原则来优化代码,通过实例阐述如何写出更规范、更易于维护的代码,强调代码的美感、对称性和简洁性,鼓励开发者忘记形式化的规范,将原则内化于心。" 110862647,7502869,嵌入式音频开发:波波音排查与硬件软件解决方案,"['嵌入式开发', '音频开发', '硬件故障', '软件故障', '功放']

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在这里插入图片描述系统越大,维护成本越高,这几乎是放之四海而皆准的真理。
其中一个原因:代码质量参差不齐。
持续优化代码、提高代码质量,是提供系统生命力的一个有效手段之一。

Think more, code less(思考越多,编码越少)

本文总结了

  • General:通用
  • Equal:平衡
  • Short\Small:简短
  • Simple:简单

GESSS原则

书面的表述: 短小精悍,平衡通用
李连杰演的神教教主,张三丰教他太极剑,太极拳。
天下武功:唯快不破,还有一个叫 无招胜有招

于是写代码,变成了美感审查。
何为美,大道至简、看着顺眼,即对称、平衡、简洁

  • 看起来,一段一段Step 1、Step 2、Step 3
  • 看起来,差不多,差不多的级别,差不多的大小
  • 看到什么就是什么
  • 看不到多余的
  • 逻辑简洁。只看到1 + 1 = 2,不会看到1 + 1 != 3

用现成的可靠的 - 通用:G
  • 通用工具函数,逻辑考虑周全,稳定性好
  • 所及即所得,可读性强。

案例一:用现成的util,好用不费劲、还稳定
不建议写法:

theStr == null || theStr.equals("")

建议写法:

TextUtils.isEmpty(theStr)

看起来都差不多 - 平衡:E
  • 函数块级 一般大小
  • 判断语句,有排比句之势。

案例一:有一处拖沓了,紧一下

public void doFishing() {
     //撒饵料,坐好
     prepare();
     //拉线
     surduce();
     //收网
     // 很多很多代码
}

很显然,收网这部分的代码,是不一个层级的。看起来,突兀了。
放到一个函数里头去

public void doFishing() {
     //撒饵料,坐好
     prepare();
     //拉线
     suduce();
     //收网
     pullOut();
}
private void pullOut() {
    // 收网  很多很多代码
}

案例二:人家都是method,我也要是

if ((mStr1 == null || mStr1.equals("")) || isPrepared(mStatus) || hasFishes()){
    //doSomething
}

看起来,第一部分,应该收拢一下,放method中去。这样大家都是函数调用了。

if (TextUtils.isEmpty(mStr1) || isPrepared(mStatus) || hasFishes()){
    //doSomething
}

长了看着累 - 简短:Short

在AS中,我用了ali-lint,规定函数超过80行后,就属于超大函数,需要进行拆分。
案例一:method内的逻辑有多个step,分批处理

public void doFishing() {
     //撒饵料,坐好
     //prepare几十行代码
     
     //拉线
     //surduce几十行代码
     
     //收网
     //pullOut几十行代码
}

改成

public void doFishing() {
     //撒饵料,坐好
     prepare()
     //拉线
     surduce();
     //收网
     pullOut();
}
private void prepare() {
    // 撒饵料,坐好  很多很多代码
}
private void surduce() {
    // 拉线  很多很多代码
}
private void pullOut() {
    // 收网  很多很多代码
}

范例二:if else内的逻辑收拢

public void doFishing() {
     //撒饵料,坐好
     if (!hasFishHooked()) {
          收线的代码       ------》整理成一个函数
     } else {
         继续放饵料,勾引       ------》整理成一个函数
     }
}

范例三:判断条件 收拢

if ((判断1好几个) ||  (判断2好几个)  || (判断3好几个)) {}

改进一下

if (判断1() ||  判断2()  || 判断3()) {}

范例四:method的入参有多余的,删掉

private void updateStatus(String status1, int statu2, int statusUnused) {
    //更新状态
}

删掉多余的参数

private void updateStatus(String status1, int statu2) {
    //更新状态
}

范例四:method的入参太多了

private void updateStatus(String status1, int statu2, int status3, int statu4, int statu5, int status6) {
    //更新状态
}

太多了,看着累,并成一个bean

private void updateStatus(StatusBean bean) {
    //更新状态
}
private class StatusBean {
    private String status1, int statu2, int status3, int statu4, int statu5, int status6;
    StatusBean(String status1, int statu2, int status3, int statu4, int statu5, int status6) {
        //对Bean进行赋值,初始化
    }
}

不要复杂,不要重复 - Simple:简单

案例一:删除不必要的if

public boolean isPassed(Double passRate) {
    if (一堆判断 {
        return true;
    }
    return false;
}

显然,不用这个if

public boolean isPassed(Double passRate) {
    return 一堆判断;
}

案例二:删除不必要的else

public boolean isIllegal(int status) {
    if (一堆判断 {
        return 结果1;
    } else {
        return 结果2;
    }
}

显然,不用这个else,可以减少一行代码

public boolean isIllegal(int status) {
    if (一堆判断 {
        return 结果1;
    }
    return 结果2;
}

案例三:删除不必要的变量

public boolean isIllegal(int status) {
    Result res = doSomething(status);
    List beans = res.toArray();
    return beans;
}

单纯过渡一下,再砍掉一个,可以减少一行代码

public boolean isIllegal(int status) {
    Result res = doSomething(status);
    return res.toArray();
}

案例四:不要重复的

public  void illegalize(int status) {
    //根据status 做变换 step1 几十行
    //根据status 做变换 step2 几十行
    //根据status 做变换 step3 几十行
}
public  void makePopular(int status) {
    //根据status 做变换 step1 几十行
    //根据status 做变换 step2 几十行
    //根据结果,做最终变化 10行
}

step1、step2是一样的。或者类似的

public  void illegalize(int status) {
    changeStep1();
    changeStep2();
    //根据status 做变换 step3 几十行
}
public  void makePopular(int status) {
    changeStep1();
    changeStep2();
    //根据结果,做最终变化 10行
}
private void changeStep1() {
    //根据status 做变换 step1 几十行
}
private void changeStep2() {
    //根据status 做变换 step2 几十行
}

案例五:不要揉成一团

public int illegalize(int status) {
    if (judge1()) {
        if (judge2()) {
            return newStatus;
        }
    }
    return null;
}

逻辑揉在一起,显然不合理

public int illegalize(int status) {
    if (!judge1()) {
        return null;
    }
    if (!judge2()) {
        return null;
    }
    return newStatus;
}

案例六:null是地雷

public List getUsers(int status) {
    if (!isLegal(status)) {
        return null;
    }
    //doSomething
    return result;
}

能不返回null,就别返回null了。

public List getUsers(int status) {
    if (!isLegal(status)) {
        return new List(0);
    }
    //doSomething
    return result;
}

总结来说

网上也有很多这样,那样的代码规范。很多人不是不知道,而是一下子想不起来。

忘记了这些有形的招式,才能融汇到自身。

无招 胜 有招
<think>好的,我现在需要帮助用户解决在Vue3中使用CodeMirror编辑器实现代码格式化功能的问题。首先,我得回顾一下用户的具体需求。用户提到想了解如何在CodeMirror Editor Vue3中实现代码格式化,可能他们正在开发一个需要代码编辑功能的Vue3应用,并且希望集成代码格式化功能,比如自动缩进、语法美化等。 首先,我需要确认CodeMirror在Vue3中的基本集成方法。根据用户提供的引用[1],CodeMirror是一个用JavaScript实现的浏览器端文本编辑器,专为代码编辑设计,支持多种语言模式和插件。在Vue3中集成CodeMirror,可能需要使用现有的Vue组件库或直接使用CodeMirror的官方包。 接下来,用户需要的是代码格式化功能。CodeMirror本身是否支持代码格式化?可能需要额外的插件或扩展。例如,可能需要使用@codemirror/commands包中的格式化命令,或者使用类似prettier的第三方库来处理代码的格式化逻辑,然后将其集成到CodeMirror中。 然后,我需要考虑Vue3中的具体实现步骤。可能包括安装必要的依赖项,如@codemirror/commands、@codemirror/lang-html(或其他语言支持),以及可能的prettier库。接着,在Vue组件中引入这些模块,配置CodeMirror的扩展功能,包括语言支持、快捷键绑定等。 另外,用户可能需要绑定格式化操作到一个按钮或快捷键。例如,在Vue组件中添加一个按钮,点击时触发格式化函数,该函数调用CodeMirror的格式化命令或者使用prettier进行代码处理,然后新编辑器的内容。 还需要考虑代码格式化的具体实现方式。例如,使用CodeMirror自带的格式化命令,如indentMore或autoIndent,或者复杂的格式化工具如prettier。如果使用prettier,需要处理异步的格式化过程,将格式化后的代码设置回编辑器。 还需要注意Vue3的响应式系统,确保编辑器实例正确地在组件生命周期中初始化和销毁,避免内存泄漏。可能需要使用onMounted和onBeforeUnmount钩子来管理编辑器的挂载和清理。 此外,用户可能对代码格式化有特定的配置需求,比如缩进大小、换行符处理等,这需要在格式化函数中进行相应的配置。 最后,我需要验证这些步骤是否正确,是否有遗漏的依赖或配置,以及代码示例是否能在Vue3环境中正常运行。同时,需要检查是否有引用相关的文档或资源,如CodeMirror官方文档、Vue集成示例等,以增强回答的可信度。</think>在Vue3中实现CodeMirror的代码格式化功能需要结合官方扩展和第三方工具。以下是具体实现步骤: ### 一、基础环境搭建 1. 安装核心依赖: ```bash npm install @codemirror/view @codemirror/state @codemirror/commands @codemirror/lang-html ``` 2. 创建基础编辑器组件: ```vue <script setup> import { onMounted, ref } from 'vue' import { EditorView } from '@codemirror/view' import { EditorState } from '@codemirror/state' import { html } from '@codemirror/lang-html' const editorEl = ref(null) onMounted(() => { new EditorView({ state: EditorState.create({ extensions: [html()] }), parent: editorEl.value }) }) </script> <template> <div ref="editorEl"></div> </template> ``` ### 二、实现格式化功能 1. 使用Prettier集成: ```bash npm install prettier @prettier/plugin-html ``` 2. 创建格式化工具函数: ```javascript import { format } from './formatter.js' const formatCode = (editor) => { const code = editor.state.doc.toString() const formatted = format(code) editor.dispatch({ changes: { from: 0, to: code.length, insert: formatted } }) } ``` 3. 绑定快捷键(需添加@codemirror/keymap): ```javascript import { keymap } from '@codemirror/view' const formatKeyBinding = [ { key: "Ctrl-Alt-l", run: formatCode } ] ``` ### 三、完整组件实现 ```vue <script setup> import { onMounted, ref } from 'vue' import { EditorView, keymap } from '@codemirror/view' import { EditorState } from '@codemirror/state' import { html } from '@codemirror/lang-html' import { format } from './formatter' const editorEl = ref(null) let editorView = null const formatAction = () => { const code = editorView.state.doc.toString() const formatted = format(code) editorView.dispatch({ changes: { from: 0, to: code.length, insert: formatted } }) } onMounted(() => { editorView = new EditorView({ state: EditorState.create({ extensions: [ html(), keymap.of([ { key: "Ctrl-Alt-l", run: () => { formatAction() return true } } ]) ] }), parent: editorEl.value }) }) </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值