请选择 进入手机版 | 继续访问电脑版

[相关技巧] 分析 scratch3.0二次开辟 之scratch-blocks免编译修改题目

[复制链接]
查看83 | 回复8 | 2021-9-13 09:18:04 | 显示全部楼层 |阅读模式

scratch-blocks编译的时间 会出现的标题 :scratch-gui依靠 的scratch-blocks模块在安装的时间 编译会报错。

分析

scratch3.0二次开辟
之scratch-blocks免编译修改题目

缘故原由 :scratch-blocks编译时要调用的build.py文件运行时发生错误。windowst体系 下,代码压缩的过程是build.py通过一个closure-library的插件处理后,发送到谷歌的服务器举行 压缩,返回的效果 会天生 blocks_compressed.js,blocks_compressed_horizontal.js,blocks_compressed_vertical.js这几个文件。(linux体系 下,有网友反映会编译成功的。)build.py运行时,由于 window体系 在574行处要处理大量的信息流,以是 导致错误发生。但即便成功,由于 之后要把代码发送到国内常常 访问不到的谷歌服务器,以是 也会常常 编译失败。这种方法每修改一次代码就要编译一次,服从 比较低,比较耗时。

有没有种方法不用编译,就能修改scratch-blocks代码,而且能即时见效 呢?答案是,有的。

scratch3.0是怎么引进scratch-blocks的呢?在scratch-gui的源文件src\containers\blocks.jsx中,引入了scratch-blocks,

  1. import VMScratchBlocks from '../lib/blocks';
复制代码

嗯…这是颠末 修改后的blocks,我们再顺着调用的路径,打开文件src\lib\blocks.js,这文件的作用是修改对应的脚色 (target)块的菜单项。

第一步,引入scratch-blocks,这是已经编译好的文件

  1. import ScratchBlocks from 'scratch-blocks';
复制代码

第二步,根据vm的数据修改blocks的菜单项。比如looks_costume块的修改代码如下:

  1. ScratchBlocks.Blocks.looks_costume.init = function () {
  2. const json = jsonForMenuBlock('COSTUME', costumesMenu, looksColors, []);
  3. this.jsonInit(json);
  4. };
复制代码

在修改之前,looks_costume块的菜单项如许 子的:

分析

scratch3.0二次开辟
之scratch-blocks免编译修改题目

菜单项是原来在scratch-blocks里定义的,没有变化。

修改后是如许 子的:

分析

scratch3.0二次开辟
之scratch-blocks免编译修改题目

看到没?菜单项的数据和vm接洽 起来了。

再举个例子吧,比如修改workspace界面在block上右键弹出菜单项,我要保留'添加解释 ',然后把其他两项去掉,修改前,右键弹出菜单是如许 子的:

分析

scratch3.0二次开辟
之scratch-blocks免编译修改题目

在src\lib下创建scratch-blocks-modify文件夹,文件夹里创建了blocks_svg.js文件,从scratch-blocks的core文件夹中找到blocks_svg.js,把此中 必要 修改的函数代码复制过来。
修改的blocks_svg.js文件代码如下 :

  1. export default function(Blockly){
  2. Blockly.BlockSvg.prototype.showContextMenu_ = function(e) {
  3. if (this.workspace.options.readOnly || !this.contextMenu) {
  4. return;
  5. }
  6. // Save the current block in a variable for use in closures.
  7. var block = this;
  8. var menuOptions = [];
  9. if (this.isDeletable() && this.isMovable() && !block.isInFlyout) {
  10. //menuOptions.push(
  11. // Blockly.ContextMenu.blockDuplicateOption(block, e)); 这是注释掉的代码
  12. if (this.isEditable() && this.workspace.options.comments) {
  13. menuOptions.push(Blockly.ContextMenu.blockCommentOption(block));
  14. }
  15. //menuOptions.push(Blockly.ContextMenu.blockDeleteOption(block));这是注释掉的代码
  16. } else if (this.parentBlock_ && this.isShadow_) {
  17. this.parentBlock_.showContextMenu_(e);
  18. return;
  19. }
  20. // Allow the block to add or modify menuOptions.
  21. if (this.customContextMenu) {
  22. this.customContextMenu(menuOptions);
  23. }
  24. Blockly.ContextMenu.show(e, menuOptions, this.RTL);
  25. Blockly.ContextMenu.currentBlock = this;
  26. };
  27. }
复制代码

注意 :现在 可以利用 es6来编写代码了。

然后在src\lib\blocks.js文件引入 :

分析

scratch3.0二次开辟
之scratch-blocks免编译修改题目

blockSvgModify是导入的函数变量。

末了 革新 下界面,修改见效 :

分析

scratch3.0二次开辟
之scratch-blocks免编译修改题目

方法:知道要修改的scratch-blocks的代码,然后把代码复制到一个js文件中修改,作为一个函数导出来,再把ScratchBlock作为参数传进去,函数返回的就是改过后的scratch-block文件了。

小结:我们可以通过引入scratch-block到一个文件中,在这个文件中修改我们想要修改的scratch-block函数、属性和方法,再导出来,实现我们想要的效果 。而且这种方法是热修改。和修改react一样,每次修改会引起gui界面相应的变化,避免反复编译源文件繁琐的过程。

到此这篇关于scratch3.0二次开发 之scratch-blocks的免编译修改方法的文章就先容 到这了,更多干系 scratch blocks的免编译内容请搜索 脚本之家从前 的文章或继续欣赏 下面的干系 文章渴望 大家以后多多支持脚本之家!


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

avatar 123457648 | 2021-9-18 08:10:41 | 显示全部楼层
顶顶更健康!
回复

使用道具 举报

avatar 梦的衣裳323 | 2021-9-19 06:36:43 | 显示全部楼层
楼上的说的很好!
回复

使用道具 举报

avatar 明绍宗朱聿键鼻 | 2021-9-25 03:42:44 | 显示全部楼层
论坛的人气越来越旺了!
回复

使用道具 举报

avatar 右脸破相gl | 2021-9-28 00:20:18 | 显示全部楼层
今天的心情很不错啊
回复

使用道具 举报

avatar 彩云彩2017 | 2021-10-1 03:37:57 | 显示全部楼层
好东西,学习学习!
回复

使用道具 举报

avatar 海上灵光Y8 | 2021-10-3 06:06:27 | 显示全部楼层
没人理我,好伤心啊!
回复

使用道具 举报

记得吃药!
回复

使用道具 举报

终于看完了,很不错!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则