ChatGPT 真的是编程好帮手，看我如何几步就实现一个功能

现在竟然还有人怀疑 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('<?php echo wpjam_json_encode($tinymce); ?>');

  // 使用 $.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('<?php echo wpjam_json_encode($tinymce); ?>');

  // 使用 $.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 帮忙写一些功能非常明确的代码是非常好用的，针对迷惑的地方还可以进一步提问，顺便完善我们的编程知识和提供代码能力。😁