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

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

相关文章
|
存储 关系型数据库 MySQL
|
2月前
|
人工智能 自然语言处理 API
Token Plan是什么?阿里云百炼AI大模型的省钱订阅方案,最低39元1个月
阿里云百炼Token Plan是面向开发者与团队的AI大模型订阅服务,以Credits统一计费,支持Qwen、DeepSeek、Kimi等多模态模型及Claude Code、Cursor等主流AI工具,个人版低至39元/月,团队版150元起,兼顾性价比与企业级管理能力。
|
缓存 图形学
Unity 之 关于UnityHub无法打开项目的问题(弹出Unity启动界面有退回到Hub选择工程界面)
弹出Unity启动界面有退回到Hub选择工程界面方案一:万能的重启大法;方案二:未开启许可证;方案三:终极奥义 -- 弃用Hub
4615 0
Unity 之 关于UnityHub无法打开项目的问题(弹出Unity启动界面有退回到Hub选择工程界面)
|
4月前
|
数据采集 机器学习/深度学习 监控
跨境选品秘籍:API如何帮你分析全球价格差?
本文探讨如何利用API技术实现全球商品价格差的自动化分析,助力跨境电商精准选品。通过实时抓取多国平台价格数据,结合汇率、税费与库存等维度,识别利润蓝海、优化定价与供应链,并支持动态预警与可视化决策。数据驱动,让选品从“凭经验”迈向“看趋势”。(239字)
|
11月前
|
机器学习/深度学习 数据采集 自然语言处理
基于深度学习+NLP豆瓣电影数据爬虫可视化推荐系统
本研究构建基于深度学习与NLP的豆瓣电影数据系统,融合LSTM、BERT与CNN技术,实现高效爬取、情感分析、个性化推荐与动态可视化,提升影视数据分析效率与推荐精准度,推动产业智能化升级。
|
6月前
|
人工智能 自然语言处理 BI
用办公Agent接管Excel苦力活:跨表匹配、格式清洗、自动图表生成
本文揭秘如何用AI办公Agent自动化处理Excel月度报表:15分钟搞定跨表匹配(模糊+精确双策略)、智能清洗(日期/数字/空白全覆盖)、自动绘图(配色+标题+标签)。告别VLOOKUP、分列、手动调图,让重复劳动归零——真正的效率革命,始于教会机器做脏活。
812 4
|
5月前
|
SQL 监控 关系型数据库
MySQL连接数管理最佳实践:从Too many connections应急到长期治理
本文详解MySQL“Too many connections”故障的应急排查与根治方案:30秒快速评估、杀Sleep连接止血、动态调参救急;深入分析慢查询、连接泄漏、短连接冲击、配置过小四大根因;附诊断脚本、监控告警规则及连接池最佳实践,助你从容应对生产危机。
|
7月前
|
JSON Java fastjson
SpringBoot对接黄金白银期货数据API
该API提供黄金、白银等期货实时行情与K线数据,支持JSON格式。需传入API Key认证,通过/market获取产品ID(PID),再调用/queryFutures或/kline接口获取详情或指定周期K线(如PT1M、P1D)。附OkHttp Java示例及关键字段说明。
|
存储 人工智能 移动开发
HTML5 游戏开发实战 | 五子棋
五子棋是一种家喻户晓的棋类游戏,它的多变吸引了无数的玩家。本章首先实现单机五子棋游戏(两人轮流下),而后改进为人机对战版。整个游戏棋盘格数为 15×15,单击鼠标落子,黑子先落。在每次下棋子前,程序先判断该处有无棋子,有则不能落子,超出边界不能落子。任何一方有横向、竖向、斜向、反斜向连到 5 个棋子则胜利。
24525 8
HTML5 游戏开发实战 | 五子棋
|
搜索推荐
vue2 el-select 改造成下拉树,支持数据回显
下拉树 就是一个下拉框里面的options里面换成一棵树的形状。本人业务需要一个这样的组件,我也懒得去发布一个组件到npm库,毕竟现在vue3出来了,这个组件只适合vue2 并且是element ui的基础,限制条件有点多。所以在这里做个笔记,有需要的自己copy 代码到自己本地,就行。
vue2 el-select 改造成下拉树,支持数据回显

热门文章

最新文章