如何实现项目上的快速开发

简介: 如何实现项目上的快速开发(前端为主)1.熟悉电脑的组合键操作和性能2.熟悉编辑器的组合键操作3.良好的项目结构和面向对象(数据抽象和数据封装)

如何实现项目上的快速开发

  本篇文章主要是展示一些提高开发效率的方法,以前端为主,对后端开发也有一定的参考价值。
  工欲善其事必先利其器,对于程序员的工作而言,电脑和编辑器就是工具,了解清楚其性能非常重要。下面就来介绍如何打造一件趁手的工具

熟悉电脑的组合键操作和性能

下面是几个常用且重要的快捷操作

1.alt+tab(mac系统下是❀+tab),连按tab用于快速切换当前窗口,在没有第二屏幕的时候非常实用。当然,如果有条件的话外接一个屏幕效果会更好
image.png
2.ctrl+c,ctrl+v(mac系统下是❀+c,❀+v),程序员必备SSS级技能,复制粘贴。可能是用的最多的快捷键。

3.ctrl+z,ctrl+y(mac系统下是❀+z,❀+y),系统的前进后退按钮,不仅写代码改代码的时候非常实用,而且误删文件的时候在文件资源管理器也可以使用。

4.window下的一键返回桌面按钮,在开了一堆窗口的时候一键最小化,还你清晰的思路。
image.png

5.rmdir /s/q [文件夹路径],在window下,删除大量的文件,系统还要做大量的校验工作,可能删一个node_modules文件夹需要几十分钟,非常缓慢。在CMD下直接运行次命令能快速删除文件,适合前端删除依赖,但要注意要用管理员身份运行,并且删除后无法回复。

image.png

熟悉编辑器的组合键操作

以vscode为例子
1.在设置里打开自动保存,省去ctrl+s的操作,防止电脑突然断电
image.png

2.shift+alt+f,快速格式化当前文件,对理清代码结构非常有帮助

image.png

3.ctrl+shift+d,行或者选中的内容直接向下复制,比ctrl+c,ctrl+v效率更高,继承自Sublime的快捷键,使用前需要去配置看看有没有冲突

image.png

4.使用Settings Sync插件,一键同步你的VSCODE配置到github帐户上,在切换个人电脑,公司电脑,阿里电脑的时候非常方便,同步一下就把编辑器配置配好了!

image.png

5.使用主题我推荐的是image.png怎么好像绝版了,One Dark Pro也是一个不错的选择,颜色非常的鲜艳,能清楚的区分JS的数据类型,同时也让使用者心情愉悦。
image.png

良好的项目结构和面向对象

良好的项目结构,合理的封装不仅仅是代码变得更加合理易懂,还能大大减小修改和维护的工作量

无论是函数的抽象还是类的封装,建议在有两个或以上的地方复用的时候进行,盲目的抽象和封装会造成阅读困难,缺少抽象和封装会造成代码冗余,两者都会造成代码维护困难

1.前端项目结构,以下是一个示例,展示在umi框架下复用的组件和工具函数是怎么跟页面抽离出来的。
image.png

2.减少或者不使用modal进行传参和状态管理,使用umi久了就会陷入一个误区,觉得使用modal传参很爽,很方便。但大量使用modal会造成代码盘根错节,耦合度降低。在做了一段时间原始的微应用框架的业务后,我觉得modal是完全没必要在单独页面使用的一个东西。在用户信息等全局的场景使用才是更合理的用法。
原生的fetch或者单独的servers文件能替代它的网络请求功能,state能替代其状态管理功能,props,createContext和url能代替他的传参功能,所以,为什么要用modal呢?

3.正确看待ESlint,在养成良好的写代码习惯之前,把ESlint校验打开是利大于弊的。但是同时也应该知道,它帮助你屏蔽掉了一些会造成变量提升之类的写法,如果失去了ESlint,应该特别注意JS代码结构不正确造成的报错。

相关文章
|
前端开发 Java 应用服务中间件
java从入门到精通二十二(web服务器tomcat)
tomcat目录说明 直接去官网下载即可,下载安装的话没啥好说的。我们需要知道的就是它是Apache一个开源免费的web服务器。而且比较轻量。 我们下载解压好后就可以看这样的目录结构 首先是bin目录,这个目录里面主要用来存放一些tomcat的命令。一类是以.sh结尾的(linux命令),另一类是以.bat结尾的(windows命令)。
242 0
java从入门到精通二十二(web服务器tomcat)
|
18天前
|
人工智能 自然语言处理 文字识别
阿里云百炼Qwen3.7-Max简介:能力、优势、支持订阅计划参考
Qwen3.7-Max是阿里云百炼面向智能体时代推出的新一代旗舰模型,对标GPT-5.5、Claude Opus 4.7等闭源旗舰。该模型支持百万级token上下文窗口,具备顶级推理能力、多模态搜索与视觉理解增强、流式输出低延迟响应等核心优势,覆盖编程、办公、长周期自主执行等复杂场景。同时支持OpenAI接口兼容,便于系统快速迁移。用户可通过Token Plan团队或节省计划等订阅方式灵活调用,适合企业级高要求场景使用。
6837 30
阿里云百炼Qwen3.7-Max简介:能力、优势、支持订阅计划参考
|
3天前
|
数据采集 人工智能 前端开发
让 Coding Agent 从黑盒到透明:阿里云 Agent 观测审计数据采集实践
AI Agent 规模化落地带来执行黑盒、行为难追溯、成本难度量三大难题。阿里云基于 OTel 标准,面向 Coding Agent、个人通用助理和框架型 Agent,推出 LoongSuite Pilot、插件及探针等无侵入采集方案,让 Agent 实现可看见、可分析、可审计、可治理。
605 138
|
3天前
|
人工智能 弹性计算 运维
阿里云发布堡垒机智能运维Agent,运维交互进入自然语言新时代
支持自然语言运维,提升效率与安全双保障。
1145 0
|
10天前
|
人工智能 安全 定位技术
CodeGraph深度解析 让Claude Code工具调用直降七成的核心原理与实操教程
如今以Claude Code为代表的AI编程智能体已经成为开发者日常编码、项目重构、漏洞修复的必备工具。但在长期使用过程中,几乎所有开发者都会遇到同一个明显痛点:AI虽然具备强大的代码生成与分析能力,却常常陷入盲目探索的循环中。
1173 1
|
13天前
|
存储 定位技术 数据库
CodeGraph 如何让 Claude Code减少 7 成工具调用?
CodeGraph 为 Coding Agent 提供本地代码知识图谱,把函数、类、调用链和框架路由提前整理成“项目地图”,减少盲目搜索和文件读取。它不是新 Agent,而是上下文基础设施,让 Agent 更快找到正确代码路径,平均减少 7 成工具调用。
1273 3
|
11天前
|
人工智能 弹性计算 安全
阿里云618活动时间、活动入口、优惠活动详细解读
2026年阿里云618创新加速季已全面开启,作为年度力度最大的云产品促销活动,本次大促覆盖轻量应用服务器、ECS云服务器、GPU云服务器、数据库、AI算力、安全服务、CDN等全品类产品,推出5亿元算力补贴、新用户限时秒杀、普惠满减、企业专享、免费试用、云大使返佣等多重福利,个人开发者、中小企业、AI团队均可享受专属低价。本文将系统梳理2026年阿里云618活动的完整时间节点、官方参与入口、各类优惠细则、使用规则、热门产品推荐及实操代码,帮助用户精准参与、高效省钱,以最低成本完成上云部署。
982 5
|
9天前
|
人工智能 自然语言处理 安全
Vibe Coding 实战:别盲目跟风,先分清 vibe coding 适合什么场景
本文系统总结vibe coding实战经验:明确其适用场景(原型、小工具、标准化模块),剖析5步落地流程(场景判定→结构化提示词→目录初始化→分模块生成→自动化校验),指出四大常见误区,并推荐适配工具Trae。强调“场景匹配+规则前置”是提效关键,避免盲目套用。
806 1