ChatGPT
的出现,彻底改变的很多代码开发的方式,特别是通用型的代码,使用它来帮助我们,很大程度上可以提升我们写代码的效率和质量。
本博主工作中主要进行前端方向的项目开发,本文将直接聚焦在代码编写相关的具体场景上。通过日常工作实践中发现的能够使用
ChatGPT
辅助我们编码的示例,一一列举了大概10种编码总做中可能出现的情形。大家有兴趣的可以了解一下,在条件合适的情况下,通过
ChatGPT
来提升写代码的速度,节省下摸鱼的时间,一举多得的好事。
1、技术搜索
这个场景是 ChatGPT
最常用的,也是为什么很多人鼓吹 ChatGPT
会干掉搜索引擎的原因之一。
在开发工作中,通过它来搜索各种技术知识,也是目前在开发者中较流行的运用了,这里就简单举个例子,比如我想知道GIF格式的压缩算法:
还有,打打嘴仗,问它 Vue和React,哪个更好?
看上去,在我这里的回答,是 Vue
更好一些,可能与我之前问过一些 Vue
的问题有关吧…
2、生成常用工具函数
在 ChatGPT
中生成前端代码,是相对方便的事情,比如我们工作中常用的一些工具函数,对于初学者还是非常有用的。
如下图所示,生成一个图片读取的函数:
这段代码使用 FileReader
来读取文件信息,生成图像的 Base64
字符串,然后通过 Image
对象加载。
接下来改造这段代码,因为 Base64
字符串的缺点,我们不要使用 base64
,就会换一种方式:
上图,可以看到这里就换成了 BlobURL
的方式来转换图片。
当前前端开发中,使用 TypeScript
越来越流行,那我们也能给 ChatGPT
提要求,使用 TypeScript
:
如上所示,在定义函数时,增加了类型。
3、帮助解读代码
工作中,如果我们对于某段代码不是很理解,也可以借助 ChatGPT
的帮助,通过它对代码的解读,我们也能更快的理解代码。
如下图所示,我截取了 fabric.js
库中开头的一段代码,发送到 ChatGPT
对话框,得到它的解读:
几乎对代码逐行进行了解读。
下面再看一个例子,一段 Vue
中的 HTML
代码:
也能每一步都解读出来,并且也指出了事一个Vue的单文件组件。
4、添加注释
ChatGPT
对代码的理解已经很牛了,添加注释肯定也是小菜一碟,特别是那些通用的注释,如下图,给上面的 fabric.js
代码添加注释:
几乎每行代码都加了注释,真的已经很完善了。
当然,对于那些偏业务性的代码,注释还是得自己好好写。
5、优化代码
对代码进行重构优化,是我们项目开发中经常要做的事情,通过 ChatGPT
仍然可以在一定程度上改善我们的代码。
如下代码,用于获取当天的月日年字符串:
export function getTodayString () {
const dt = new Date()
const day = dt.getDate()
const month = dt.getMonth() + 1
const year = dt.getFullYear()
return `${month > 9 ? month : '0' + month}.${day > 9 ? day : '0' + day}.${year}`
}
接下来,让 ChatGPT
帮我们优化一下代码,直接问它怎么优化,会输出结果:
除了给出代码,还列出了具体的优化建议,使用什么方法,起到什么作用,非常详细,不管是优化代码还是学习技术知识,都能带来好处。
6、Vue2 转 Vue3
对代码进行修改,如将一段 Vue2
代码转为 Vue3
的写法,只需要输入 帮我把这段代码转为Vue3
,然后贴出代码,就可以自动转换出来:
这里
Vue
代码,并没有高亮,可能还不支持Vue
的语法高亮,而JavaScript
、TypeScript
等则都支持代码高亮。
除了代码转换以外,还会针对贴出的代码,简要描述在 Vue3
中的差异:
需要注意的是:
1. Vue3 中没有了 inject 和 $bus,改为了 inject 和 eventBus。
2. 由于 Vue3 引入了 Composition API,所以 computed 和 methods 都被改为了 setup() 中的函数。同时,changeBrush() 中不再需要 $event 参数。
3. 在 Vue3 中,minV 属性改为了 min-v。
除此外,我们还可以将Vue代码转为纯Javascript实现:
给出提示语,就能将当前的 Vue
单文件组件,转成一个html文件,使用纯 JavaScript
。
当然,对于代码中的一些业务性质、或者 Vue
复杂指令的一些代码,则需要自动手动添加了。
7、Vue 转 React
上面的示例是将 Vue
从2转为3或纯JS实现的,下面我们如果是转成另一个框架,如 React
,看看效果如何:
很快就完成了我们的需求,但在这里 ChatGPT
直接使用了老版本的组件方式 Component
,更进一步的话,让它使用最新版本的重新生成,结果如下所示:
代码中使用 useState
、useEffect
和函数组件的方式还是比较快速的,不过最新的 React
版本已经到了 18.2.0
,这里存在大概一年多的时间差。
8、补充 TypeScript 类型
上面介绍工具函数的时候,已经尝试过给代码增加 TypeScript
类型,而添加TS类型的实际用处还是很大的,对于不想写类型声明的同学来说,完全可以全部交给 ChatGPT
来完成。
如我们需要将上文的 React
组件增加TS类型,很快就能输出:
更多复杂的代码,都可以在 ChatGPT
中自动补齐TS类型声明,对于不会或懒得写的人来说,在这里自动生成也不错。
在给代码添加TS类型以外,也能较好的修改已有的TS类型,如代码如果使用了很多any,可以进行校正。
如下代码所示,一段简单的前端 WebSocket
的操作代码,对于其中几个参数,都是用 any
类型:
export const connectPromise = (socketUrl: string, info?: any, data?: any) => {
return new Promise((resolve, reject) => {
const singleWS: any = new WebSocket(socketUrl)
singleWS.binaryType = 'arraybuffer'
singleWS.onopen = () => {
if (info) {
singleWS.send(info)
data && singleWS.send(data)
}
}
singleWS.onmessage = (message: any) => {
if (message && message.data) {
resolve(message.data)
} else {
reject('empty')
}
}
singleWS.onerror = (err: any) => {
reject(err)
singleWS.close()
}
})
}
这在正式开发中显然是不太合适的,一般都会避免使用 any
类型,把它发给 ChatGPT
,就能够帮我们修正:
export const connectPromise = (socketUrl: string, info?: string | ArrayBuffer, data?: string | ArrayBuffer): Promise<ArrayBuffer> => {
return new Promise((resolve, reject) => {
const singleWS: WebSocket = new WebSocket(socketUrl)
singleWS.binaryType = 'arraybuffer'
singleWS.onopen = () => {
if (info) {
singleWS.send(info)
data && singleWS.send(data)
}
}
singleWS.onmessage = (message: MessageEvent) => {
if (message && message.data) {
resolve(message.data)
} else {
reject('empty')
}
}
singleWS.onerror = (err: Event) => {
reject(err)
singleWS.close()
}
})
}
以上代码,就是 ChatGPT
修改后的,将 any
类型全部替换,并且可以直接在项目中运行。
当然,ChatGPT在类型补充上也不是每次都完全正确,对于一些复杂的或非通用型的类型,也会存在问题,需要进行手动调整纠正。
9、生成文档
技术文档也是开发中不可少的一环,通过使用 ChatGPT
可以为我们创建各种不同的文档模板,如项目的 README.md
说明文档、RESTful API
接口文档等等。
除了各种文档模板,也可以直接给它一段代码,帮助生成相应的文档,如果接口代码的文档:
当然,图中可看出文档比较粗糙,需要二次加工。
10、工具配置
在前端开发中,设置构建、部署相关的配置文件,也是经常碰到的,很多人也都储备了一套自己的工具配置文件模板,但对于初学者或者没有储备的同学,也可以尝试在 ChatGPT
中生成。
如下,配置 tsconfig
文件:
再比如,nginx
配置:
如果给 ChatGPT
足够多的提示指令,还是能够比较方便和有效的生成我们想要的内容的。文章来源:https://www.toymoban.com/news/detail-418904.html
总结
以上只是平时可能会用到的一些场景,也许还有很多其他各种使用方式,用来帮助我们更好的编写代码,完全可以把 ChatGPT
当做编码助手,帮助我们更高效的完成任务。
不过,我们也需要注意,ChatGPT
虽然可以比较正确的结果————很多代码能直接运行,但多数时候我们需要进行一定的审核和验证,切忌盲目复制粘贴,尽量确保不会出现问题。
让它成为助手,而不是完全依赖它。文章来源地址https://www.toymoban.com/news/detail-418904.html
到了这里,关于使用ChatGPT帮助我们编码的10种场景的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!