现在竟然还有人怀疑 chatgpt 能不能真正帮忙写代码,写的代码会不会 bug 百出,网上就一张流传很广的搞笑图:
哈哈,这只是一个梗图,主要问题上面也说了「5分钟出代码」,如果无脑让 chatgpt 帮忙写代码,自然效果不会太好,如果针对写代码时候碰到一些特定的问题,则绝对比搜索引擎好用,因为 chatgpt 大语言模型更加理解程序员的需求,并且它还有上下文场景。
今天我碰到一个 jquery 的问题,我想在 wordpress 的后台弹窗中显示编辑器,编辑器可以显示,但是编辑器的按钮只显示几个简单的:
我经过查看源代码,发现 wordpress 在渲染 tinymce 的按钮时候提供了 trigger,我可以在此做一些文章:
$( document ).trigger( 'wp-before-tinymce-init', init );
window.tinymce.init( init );
直接问 chatgpt
作为 php 程序员,对 jquery 不是那么熟悉,我就让 chatgpt 帮我写这个功能了:
$( document ).trigger( 'wp-before-tinymce-init', init );
大哥,这里的 init 是对象,可以定义一个 callback 函数改变它的值吗?
下面是 chatgpt 也很干脆,直接来:
是的,您可以在触发 wp-before-tinymce-init
事件之前,定义一个回调函数来修改 init
对象的值。下面是一个示例:
// 定义一个回调函数,用于修改 init 对象的值
function modifyinitobject(event, init) {
// 检查 init 对象是否存在
if (init) {
// 修改 init 对象的某个属性或添加新属性
init.yourproperty = 'yourvalue';
// 如果需要修改现有属性,请确保在修改前检查属性是否存在
if (init.existingproperty) {
init.existingproperty = 'new value';
}
}
}
// 在触发 'wp-before-tinymce-init' 事件之前,绑定回调函数
$(document).on('wp-before-tinymce-init', modifyinitobject);
// 触发 'wp-before-tinymce-init' 事件
$(document).trigger('wp-before-tinymce-init', init);
在这个示例中,我们首先定义了一个名为 modifyinitobject
的回调函数,该函数接受事件和 init
对象作为参数。在回调函数中,我们可以修改 init
对象的属性或添加新属性。然后,我们使用 $(document).on()
绑定回调函数,确保在触发 wp-before-tinymce-init
事件时调用该函数。最后,我们触发事件并传递 init
对象。
这样,当事件被触发时,回调函数将会修改 init
对象的值。
把代码发给 chatgpt
我根据 chatgpt 的答案,结合自己的业务写好了回调函数,但是发现并不生效,,懒得自己深究了,直接把代码发给 chatgpt:
我这样写,貌似不生效,请问大哥有什么问题吗?
jquery(function($){
$(document).on('wp-before-tinymce-init', function(e, init){
init = $.extend(init, <?php echo wpjam_json_encode($tinymce); ?>);
});
});
chatgpt 觉的是我 php 输出的不是 javascript 对象造成的问题:
根据您提供的代码,似乎您试图在回调函数中使用 $.extend()
来合并两个对象。您可能希望在 init
对象中添加 tinymce
对象中的属性和值。但是,代码中的问题是,您要合并的对象是直接从 php 输出的 json 对象,而不是 javascript 的对象。
为了解决此问题,您需要在输出 php json 对象之前,将其解码为 javascript 对象。这是一个修改后的例子:
$(document).on('wp-before-tinymce-init', function(e, init) {
// 解码从 php 输出的 json 对象
var tinymceobj = json.parse('');
// 使用 $.extend() 合并 init 和 tinymceobj 对象
init = $.extend({}, init, tinymceobj);
});
在这个修改后的示例中,我们首先使用 json.parse()
将从 php 输出的 json 字符串解码为 javascript 对象。然后,我们使用 $.extend()
将 init
和 tinymceobj
对象合并。这样,init
对象应该包含 tinymce
对象中的属性和值。
请注意,这段代码需要在已经加载 jquery 的环境中运行。如果您仍然遇到问题,请确保您的页面已经加载了 jquery,并且没有其他 javascript 错误。
不生效提问 chatgpt
我按照他的要求改了,但是还不生效,就继续问:
大哥,我修改之后还是不生效,可能是什么问题吗?
chatgpt 给出了可能出现问题的地方,让我自己尝试去排除:
如果修改后的代码仍然不生效,那么可能存在其他问题。请尝试以下步骤来诊断和解决问题:
1. 确保 jquery 已加载:请确保在执行此代码之前已经加载了 jquery。您可以在浏览器的控制台输入 jquery
,如果返回一个函数,则说明 jquery 已加载。
2. 检查其他 javascript 错误:在浏览器的控制台查看是否存在其他 javascript 错误。其他错误可能会影响您的代码的执行。
3. 确保 wp-before-tinymce-init
事件被触发:如果事件没有被触发,回调函数将不会执行。尝试在事件绑定之后立即触发事件,以确认代码正在执行:
如果您看到控制台输出,那么事件已成功触发并执行了回调函数。
$(document).on('wp-before-tinymce-init', function(e, init) {
// ...您的代码...
});
// 触发事件以测试回调函数是否执行
$(document).trigger('wp-before-tinymce-init', init);
4. 检查 init
对象是否正确传递:确保传递给回调函数的 init
对象正确包含您期望的属性和值。在回调函数中输出 init
对象以进行检查。
5. 确保 php 变量 $tinymce
的值正确:在 php 代码中检查 $tinymce
变量的值,确保它包含正确的数据。如果可能,请将其值输出到控制台以进行检查。
6. 代码执行时机问题:确保在 wp-before-tinymce-init
事件触发之前绑定回调函数。如果在事件触发之后绑定回调函数,那么回调函数将不会执行。将代码放在 $(document).ready()
函数中,确保 dom 完全加载后再执行代码:
$(document).on('wp-before-tinymce-init', function(e, init) {
// ...您的代码...
});
// 触发事件以测试回调函数是否执行
$(document).trigger('wp-before-tinymce-init', init);
尝试以上步骤以诊断和解决问题。如果问题仍然存在,请提供更多关于问题的详细信息,以便我们能够更好地帮助您。
将上下文代码发给 chatgpt
我认真看了 chatgpt 的建议,感觉不是 php 输出 javascript 对象的问题,我觉得可能是我是 trigger 上下文代码给得太少了,它没理解,所以再把上下文代码发给 chatgpt:
大哥,trigger 那边的代码是这样写的:
$( document ).trigger( 'wp-before-tinymce-init', init );
window.tinymce.init( init );
果然,这时候 chatgpt 发现我的代码问题所在了:
了解了,这样的话,您需要确保您的代码在 $( document ).trigger( 'wp-before-tinymce-init', init );
之前执行。
首先,您需要将您的回调函数绑定到 wp-before-tinymce-init
事件。然后,当 $( document ).trigger( 'wp-before-tinymce-init', init );
代码执行时,您的回调函数将被调用,并且可以修改 init
对象。
此外,在您的回调函数中,您需要直接修改传入的 init
对象,而不是创建一个新的对象。这是因为 init
对象是通过引用传递的,所以您需要直接在原始对象上进行修改,以便在后续的 window.tinymce.init(init);
调用中使用修改后的值。
以下是修改后的代码示例:
// 将回调函数绑定到 'wp-before-tinymce-init' 事件
$(document).on('wp-before-tinymce-init', function(e, init) {
// 解码从 php 输出的 json 对象
var tinymceobj = json.parse('');
// 使用 $.extend() 合并 init 和 tinymceobj 对象
$.extend(init, tinymceobj); // 注意:这里直接修改 init 对象,而不是创建一个新的对象
});
// 在这里触发 'wp-before-tinymce-init' 事件
$( document ).trigger( 'wp-before-tinymce-init', init );
window.tinymce.init( init );
请确保将此代码放在 $( document ).trigger( 'wp-before-tinymce-init', init );
之前,以便在触发事件时正确调用回调函数。这样,回调函数将修改 init
对象,然后 window.tinymce.init(init);
调用将使用修改后的 init
对象。
总结
所以不要害怕,尝试去问 chatgpt,它就会尝试给你答案,然后循序渐进缩小范围或者给出具体例子接着去提问,chatgpt 会结合上下文就能帮你找到真正的问题所在,然后帮你解决。
如果通过搜索引擎,即使我写出了上面第二步的代码,也很难找到答案,因为搜索引擎是基于关键字的,这里首先我在不知道问题在哪里的时候就很难去定义正确的关键字,可能需要不停的重试,并且搜索引擎没有上下文,所以不管你尝试多少次,都不会对你下一次的搜索有帮助。😓 而 chatgpt 就可以根据你的上下文定义出你的问题,给你精准的答案。
其实我这次问题其实是一个很小的问题,就是 $.extend()
返回的是一个新对象,对于我们这类 php 程序员可能要很久才能发现问题所在。那么如果我去搜索引擎搜索的话,因为我根本不知道问题在哪里,我都一开始可能都不知道搜索什么,可能尝试搜索 $.extend()
,只有在有人和我发生过同样的问题,并且记录出来,我才会找到答案,这就是搜索引擎长尾关键字的痛苦,搜索的人首先要知道自己搜索什么,而很多人只是有问题,而且是无从下手的问题。
此外 chatgpt 提供的代码都有相应的注释,非常利于理解,而且还提供了相关的解释,我好几次使用 chatgpt 解决问题的时候,顺便还把自己知识的一些盲点都补全了,还修正了一些误区,比如以后我就知道 $.extend()
返回的是一个新对象,如果要修改的是参数,就不能用返回的对象了。
所以使用 chatgpt 帮忙写一些功能非常明确的代码是非常好用的,针对迷惑的地方还可以进一步提问,顺便完善我们的编程知识和提供代码能力。😁