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

简介: 如何实现项目上的快速开发(前端为主)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代码结构不正确造成的报错。

相关文章
|
6天前
|
人工智能 API 内存技术
刚刚 DeepSeek V4.1 Flash 开启内测,1 分钟教你用上!
刚刚 DeepSeek 内测群发布了 DeepSeek V4.1 Flash 中间版本内测的消息,这次的模型采用了新的结构,原生支持多模态、能力更强、速度更快、且成本更低。
1755 9
|
10天前
|
人工智能 运维 BI
阿里云千问办公QwenWork深度解析:基于Qwen3.8,六大核心能力重构企业全自动化工作流与计费选型指南
传统AI办公工具大多停留在对话问答、文档摘要、简单文案生成层面,只能完成单点碎片化任务,无法自主拆解复杂业务流程,很难串联多工具、多文档、外部业务系统完成端到端完整工作交付。很多企业在落地AI办公的时候,需要组合多款不同工具,来回切换界面,手动复制粘贴中间结果,智能化改造落地门槛居高不下。千问办公QwenWork是整合多款智能体产品能力打造的一体化企业办公智能体平台,底层基座依托Qwen3.8大模型,打通桌面端Agent、云端Agent、企业协同Agent三种运行形态,不再局限简单问答,接收业务目标之后自主拆解任务步骤,调用各类工具,处理文档、表格、浏览器自动化、数据查询,直接输出可交付的办公
1638 2
|
11天前
|
网络协议 Linux iOS开发
【2026实测】Wireshark下载+安装+汉化+使用教程(图文版,巨详细)
Wireshark 是一款免费开源的网络协议分析工具,可实时捕获、解析并可视化数据包,助你诊断网络故障、分析通信协议(如HTTP、DNS、TCP等)。支持Windows/macOS/Linux,含中文界面,新手入门便捷。(239字)
|
7天前
|
SQL 人工智能 前端开发
QoderWake 1.0 正式发布:从桌面里的 Agent,到工作现场的数字员工
QoderWake v1.0正式发布:企业级数字员工团队平台。支持“一句话建岗”,预置10类特训岗位;Waker常驻钉钉/飞书群,@即响应、自动协作、跨任务记忆;具备定时/事件/API多触发方式与统一任务看板;已沉淀27.6万条记忆、12.3万项技能,助力组织实现人机协同增效。
770 2
|
5天前
|
缓存 测试技术 API
DeepSeek V4.1 Flash 内测接入:改个模型名即可调用(附代码)
DeepSeek V4.1 Flash 内测不用申请,base_url 不变、改个模型名就能调,9/10 到期。本文讲清接入、计费限流与多模态注意点。
770 0
DeepSeek V4.1 Flash 内测接入:改个模型名即可调用(附代码)
|
19天前
|
人工智能 自然语言处理 安全
阿里云千问办公、Qoder Teams、Qoder CN区别与选择指南:模型能力、适用场景与最新活动参考
本文聚焦阿里云2026年推出的三款自研AI办公产品,清晰拆解千问办公、Qoder Teams、Qoder CN的差异化定位与能力边界:千问办公主打职场全场景提效,支持自然语言指令一键完成PPT生成、数据分析等高频办公任务;Qoder Teams面向程序员团队,深度整合AI代码生成、团队协同与企业知识库能力;Qoder CN则专为金融、政务等强合规场景打造,实现数据不出境与VPC私有化部署。文章同步给出分场景选型指南与最新活动定价,帮助不同类型的企业按需组合产品,实现业务岗、研发岗与强合规场景的AI能力全覆盖。
3936 5
阿里云千问办公、Qoder Teams、Qoder CN区别与选择指南:模型能力、适用场景与最新活动参考
|
10天前
|
人工智能 自然语言处理 安全
阿里云AI数智鉴密:AI 生成内容如何拿到一张"防篡改的身份证"
隐形水印 + C2PA签名:让AI生成内容“持证上岗”。
1152 0
|
12天前
|
缓存 数据可视化 开发工具
DeepSeek Harness 怎么更新?dsh 更新完整指南:更新本体(npx、npm、源码)与更新插件两种方式
DeepSeek Harness 的更新分两层:本体更新(npx 自动最新、npm update -g、源码 git pull)与插件更新(插件市场点更新、命令行覆盖安装)。本文按「准备 → 更新本体 → 更新插件 → 更新后检查」四步走,覆盖新手常见疑问。
1409 1
DeepSeek Harness 怎么更新?dsh 更新完整指南:更新本体(npx、npm、源码)与更新插件两种方式