IT培训网 - IT职场人学IT技术上IT培训网
WEB前端高效开发小技巧你学会了几个
时间:2021-01-23 21:49:50 来源:web前端网 作者:IT培训网 已有:名学员访问该课程
WEB前端高效开发小技巧你学会了几个,怎么样才能掌握前端开发技术?
序言
18天完成 某中台客服+后台系统 的开发到上线
21天完成 某数据标准化系统 的开发到提测
1个月完成 某数据处理系统 的开发到上线
1个月完成 某银行押品可视化系统 的开发到上线
以上时间都是总时,非工时。从需求评审开始计时,到提测或者上线。除第一个是敏捷开发模式,其他都是常规开发。页面都不多,但都是五脏俱全。
过去的一年半完成的一些高强度项目开发,除了收获如何花式加班,更多的还是如何提高开发效率。
文章部分习惯指向 Mac电脑 + WebStorm编码器 + vue,但习惯是通用的。
项目启动篇
从已经参与过的项目中提取通用的部分,累积一份属于自己的项目模板。当然很多公司有自己的专属项目模板或者专属的架构师,但这也并不妨碍我们积累一份属于自己的项目模板。
有了自己的项目模板我们做新的项目时,就不用在项目启动时花费过多的时间了。但对于任何一个项目来说架构部分都是非常重要的,好的项目架构能大大的提升后期的开发效率,同时对产品的体验、性能等都产决定性的影响。
模板构建基本流程:
用自己熟悉的框架(vue,react,angular)搭建一个基本模板
引入框架周边的基本配置(vue为例:vuex,vue-router)
引入适应框架及客服端的ui框架(element-ui,ant-design,mint-ui...)
配置习惯的es/ts配置
配置习惯且良好的目录配置
引入常用的插件(axios,lodash,less,sass,qs,vuex-persistedstate,mockjs...)
常用通用函数引入
webpack优化配置等
配置自动化测试(没做过...)
具体的项目流程不细说(会有部分的介绍),自己本身做的不够好,当然你也可以网上找合适的模板,同时模板需要不断的优化积累。
把模板保存到自己的git库中,需要的使用随时调用。 下面是使用模板新开项目的方法 :
编辑篇
常用的文件模板
webstorm为例
右键任意项目文件 --> New --> Edit File Templates:
在这里我们可以添加自己的文件模板,在创建新的页面文件时可以节省非常多的时间。
常用代码模板
打开编码器设置 --> Editor --> Live Templates:
在右侧栏中选择任意一个合适的类,在点击右侧侧边“+”即可添加自己的代码模板。
在Abbreviation中输入触发代码块的指定,Description中输入指令描述,以简单的console.log()为例:
编辑完成后点击Define,选择生效的文件,然后点击Apply即完成了一个代码模板的编辑。这样在你选择的生效文件中就可以用 代码指令 + tab的方式来快捷输入你的代码模板。
效果如下:
不管你使用的是哪个编辑器,一定要学会使用自定义代码模块,这可以极大的提高你的开发效率!!
常用快捷
只列举一些开发时使用频率非常高的快捷。
⌘command;⇧shift;⌥option
chrome快捷键:
⌘ + T :快速打开一个新的浏览器窗口
⌘ + W :关闭当前浏览器窗口
⌘ + E :打开开发者工具(通过电脑设置自定义的)
webstorm快捷键:
⌘ + W :快速关闭当前编辑文件
⌘ + delete:删除光标所在行整行(非常实用)
⌘ + D:快速复制当前行,或者选中的多行,在下一行插入(非常实用)
⌘ + return:与直接使用换行相比,该方式光标位置不变
⇧ + return: 不管光标在当前行什么位置,下行插入空行,并将光标切过去(非常实用)。
⌘ (+ ⇧) + F:当前文件内(全局)搜索
⌘ (+ ⇧) + G:匹配下(上)一个搜索
⌘ (+ ⇧) + R:当前文件内(全局)替换
⌘ + ⇧ + O:按文件名查找
⌘ + ⌥ + L: 文件格式化(点击项目文件夹,可以对整个文件夹内格式化)
⌘ + L:定位到对应的行列
⌘ (+ ⇧) + Z:(反)撤销
⌘ + ⇧ + V:唤出粘贴板,可从栈中选择历史的复制内容粘贴
⌘ + ⇧ + C:复制文件路径(点击项目目录可以复制对应路径)
命令行输入: open .(空格与点都属于指令,可快速打开命令行当前位置文件)
编辑器npm功能:
编辑器可以让我们在编辑器的npm模块中直接运行package中保存的脚本,从这里运行相比自行输入指令运行来说,可以更方便的重启停止脚本。同时我们可以考虑添加自动打包压缩指令,甚至代码提交指令等。
积累篇
项目
axios:包括请求、响应拦截配置,qs对数据处理,常见状态码返回提示信息处理等。
ui组件:根据项目需求对ui组件进行二次组件化封装。
css:一套自己习惯的less/sass公共方法封装,一套公用的reset方法(重置原始样式)。
store:一套自己习惯的状态管理器骨架,保证项目启动后只需要添加数据。
router:路由再封装,包括循环添加路由,路由拦截等的处理
image:svg图标或者字体图标库的引入
components:通用的项目组件
tools:通用的项目工具,以及自己积累的好用得js函数
这些不做详细介绍,网上会有很完善的方案。除最后三项都可以添加到你的中。其中最后两项建议分别单独开项目来积累。
其他
给自己的浏览器配置一个常用工具类的书签文件夹(用来保存一些实用或常用到的网上工具):
TinyPNG(图片压缩)
草料二维码(二维码生成)
BEJSON(JSON在线格式化)
微信公众平台
地图选择器(地图拾点)
echarts社区
...
推荐两款能提高效率的mac软件(自行找合适的地址下载):
CheatSheet(可长按⌘查看当前使用软件的快捷)
BetterTouchTool(可以添加各种触控板命令)
数据篇
快速复制接口数据
浏览器打开Network,选择你要获取数据的接口,右键点击'Store as global variable'
切换到Console,可以看到生成了一个temp1变量(数字会根据你复制次数递增),控制台输入copy(temp1)后就已经把需要的数据添加到了剪切板,使用粘贴功能即可复制需要的数据。
数据处理
适当刷刷前端的题库( 力扣 ),提升自己的数据处理能力。
mock数据
紧急项目开发,前端页面一定走在后端接口的前面,所以预留接口联调就成了必然,怎么保证后续联调花费最少的时间呢?mock数据值得拥有。
配置一套你自己的mock引入方案,然后可以加入到你的中,添加项目mock启动环境。
安装
yarn add mockjs -D
引入
添加mock目录,并在入口判断是否mock环境来引入mockjs,其中@sys是自定义路劲别名。
mock配置
像下面这样,我们就可以对'common/login'的请求进行拦截,并返回我们自定义的mock虚拟数据
api配置
像这样配置的话,我们自己开发页面配置好了mock数据,联调的时候只需要把后端接口链接添加到realUrl,然后在数据处理中做对应的映射处理就完成了联调。
api统一抛出
api建议做一个统一的抛出,这样引入的时候就会非常方便,当然我这里目录文件与抛出的api变量名没有对应起来,没有做到位,应该要调整,这样找接口的时候可以直接定位对应的文件夹。
尾言
好的习惯刚开始可能会不适应,但是养成后,带来的收益却是非常可观的。
习惯使用模板开发
习惯使用快捷方式
习惯积累实用工具
每期开班座位有限.0元试听抢座开始!
温馨提示 : 请保持手机畅通,咨询老师为您
提供专属一对一报名服务。