Snap Build Your Own Block自我修炼方法:
1、所有的面向对象,其实是对面向过程的抽象过程而已;

2、面对别人的开源项目时,需要找准源头(即项目运行的起点,当然有的是没有的哈,没有起点时,
则按照使用开源项目时,其使用流程,然后一步一步的学习研究);

//+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
在Snap Build Your Own Block中添加自定类别所需要修改的JS文件如下:
JS文件:gui.js、objects.js
Snap Build Your Own Block项目的源头:

snap.html中第28行
-->gui.js 203行,该文件中第207行是IDE_Morph的初始化的工作
应用的常用设置(用户偏好设置)在第214行this.applySavedSettings();中修改

-->gui.js 264行中方法中包含有IDE_Morph建立是一些初始化块的工作,主要代码在
gui.js第282行this.buildPanes();的方法中(gui.js文件第504行);

-->跳转到 this.buildPanes()方法中,包含所有的其他初始化工作,代码如下:
{
this.createLogo();
this.createControlBar();
this.createCategories(); //在gui.js文件中的第939行
this.createPalette();
this.createStage();
this.createSpriteBar();
this.createSpriteEditor();
this.createCorralBar();
this.createCorral();
}

-->gui.js文件中的第939行代码中包含两个内部函数function addCategoryButton、
function fixCategoriesLayout;如果只是添加自定类别则只需关心addCategoryButton;
然后gui.js文件中的第939行代码中找到addCategoryButton被调用的地方(第1031行)

-->在gui.js文件中1031行代码上下解读,跳转到SpriteMorph所在JS文件:objects.js文件中的第1318行

-->在objects.js文件中用字符"categories"查找定位到SpriteMorph.prototype.categories(第6581)再次找到第117行
即可查看到Snap Build Your Own Block固定带有的类别,在这个数组中添加自定义类别,自定义类别的添加,需要
添加在'other'之前,因为在gui.js第1030行的代码可以看出,其是以'other'类作为数组的结束判断标志的;
以下是这一步所涉及到的objects.js文件中的JS代码:
{
SpriteMorph.prototype.categories = //在objects.js文件中第117行
[
'motion',
'control',
'looks',
'sensing',
'sound',
'operators',
'pen',
'variables',
'lists',
'优唯思',
'other' //###好像是作为一个判断数组遍历结束的标志
];

SpriteMorph.prototype.blockColor = { //在objects.js文件中第132行
motion : new Color(74, 108, 212),
looks : new Color(143, 86, 227),
sound : new Color(207, 74, 217),
pen : new Color(0, 161, 120),
control : new Color(230, 168, 34),
sensing : new Color(4, 148, 220),
operators : new Color(98, 194, 19),
variables : new Color(243, 118, 29),
lists : new Color(217, 77, 17),
优唯思 : new Color(217, 117, 17),
other: new Color(150, 150, 150)
};
}

-->在上一步修改完成之后,在objects.js文件第132中,添加同样的字段配置新添加的自定义类别的颜色
这一步是必须的,不要之后代码会运行不成功的,会出现下一下错误:
{
Uncaught TypeError: Cannot read property 'lighter' of undefined
at ToggleButtonMorph.drawEdges (file:///D:/mylearn/t_sourceinsight/snap/widgets.js:761:49)
at ToggleButtonMorph.createBackgrounds (file:///D:/mylearn/t_sourceinsight/snap/widgets.js:694:10)
at ToggleButtonMorph.TriggerMorph.drawNew (file:///D:/mylearn/t_sourceinsight/snap/morphic.js:9182:10)
at ToggleButtonMorph.init (file:///D:/mylearn/t_sourceinsight/snap/widgets.js:557:10)
at new ToggleButtonMorph (file:///D:/mylearn/t_sourceinsight/snap/widgets.js:502:10)
at addCategoryButton (file:///D:/mylearn/t_sourceinsight/snap/gui.js:963:18)
at file:///D:/mylearn/t_sourceinsight/snap/gui.js:1031:13
at Array.forEach (native)
at IDE_Morph.createCategories (file:///D:/mylearn/t_sourceinsight/snap/gui.js:1029:38)
at IDE_Morph.buildPanes (file:///D:/mylearn/t_sourceinsight/snap/gui.js:507:10)
}
最后的效果图:

提示1:
在gui.js文件中第224行代码处this.currentCategory = '优唯思';可以修改打开Snap时默认的选中的类别;

提示2:
如果要为自定类别添加一些默认的子块,其主要涉及修改的也是objects.js文件。

希望看官们,提供点学习别人开源框架的经验,万分感激

我QQ邮箱:1609059186@qq.com;可以相互交流

Snap Build Your Own Block修炼之道-添加自定义类别的更多相关文章

  1. 《编写高质量代码:Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  2. 《JS修炼之道》—— 读后总结

    本篇是基于<JS修炼之道>的记录性与总结性的文章,这本书从多种框架的角度,讲述了JS开发中的一些实用技巧. 比如Prototype,JQuery,Mootools,YUI,Dojo,Ext ...

  3. [读书笔记] Web 前端开发修炼之道

    原创地址:http://www.cnblogs.com/bnbqian/p/3735565.html 转载请注明出处 今天我们要读的书是Web 前端开发修炼之道 第1章 从网站重构说起 1.1 糟糕的 ...

  4. ELK修炼之道

    看了ELK大半年了,现在就慢慢的总结一下对ELK的理解 参考资料 ELK stack中文指南 Elasticsearch权威指南 官方文档 Elasticsearch基础篇 此篇用于介绍Elastic ...

  5. Java程序员修炼之道 之 Logging(1/3) - Logback 配置(转)

    转自紫风乱写:http://www.blogjava.net/justfly/archive/2014/08/10/416768.html,建议大家去原处学习 写在前面的话: 作为<Java程序 ...

  6. java程序员修炼之道

    今天在论坛里看到了一位工作10年的java大牛总结的java程序员修炼之道,看完后给出的评价是:字字玑珠,深入人心,猛回头,自己一无是处··· 大牛告诉我们应该好好学习与修炼以下知识与技能 Java语 ...

  7. 《编写高质量代码--Web前端开发修炼之道》读书笔记

    前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...

  8. 《程序员修炼之道:从小工到专家》【PDF】下载

    <程序员修炼之道:从小工到专家>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196340 内容简介 <程序员修炼之道> ...

  9. 福利,一张图看懂IT售前工程师修炼之道

    职场中的新人如何自我定位? 如何深刻理解IT售前这个职位? 如何从IT售前菜鸟成长为IT售前专家? 推荐这本书<IT售前工程师修炼之道> 本书精华内容 售前的重要性 售前要有逻辑能力 售前 ...

随机推荐

  1. pandas dataframe 时间字段 diff 函数

    pandas pandas 是数据处理的利器,非常方便进行表格数据处理,用过的人应该都很清楚,没接触的可以自行查阅pandas 官网. 需求介绍 最近在使用 pandas 的过程中碰到一个问题,需要计 ...

  2. 惊呆了!Spring Boot 还能开启远程调试?

    持续原创输出,点击上方蓝字关注我 目录 前言 什么是远程调试? 为什么要远程调试? 什么是JPDA? 如何开启调试? transport server suspend address onthrow ...

  3. mysql分组函数与查询

    Ⅰ.分组函数的分类: max():最大值 min():最小值 sum():和 avg():平均值 count():计算非空的个数 这些都是通用的,sqlserver.oracle.mysql都是一样的 ...

  4. echarts legend 图例文字闪烁显示

    最近同事小夏遇到一个需求:客户要求echarts图表上指定的图例文字闪烁显示. 先放一张图: 客户要求:待处理字样要闪动显示. 小夏一番百度之后,求助于我:快来看看,怎么有客户提这种百度都百度不到答案 ...

  5. [Luogu P3986] 斐波那契数列 (逆元)

    题面 传送门:https://www.luogu.org/problemnew/show/P3986 Solution 这是一道很有意思的数论题. 首先,我们可以发现直接枚举a和b会T的起飞. 接下来 ...

  6. NOIP 2013 P1967 货车运输

    倍增求LCA+最大生成树 题目给出的是一张图,在图上有很多算法无法实现,所以要将其转化为树 题中可以发现货车的最后的载重量是由权值最小的一条边决定的,所以我们求最大生成树 求完最大生成树后我们得到一个 ...

  7. Vue的生命周期--代码片段

    Vue 实例有一个完整的生命周期,也就是从开始创建. 初始化数据. 编译模板. 挂载 Dom. 渲染→更新→渲染. 销毁等一系列过程,我们称这是 Vue 的生命周期.通俗说就是 Vue 实例从创建到销 ...

  8. Android NurReaderView 阅读器 (字符串-.txt文件)

    有些地方还没配置好.2/3天后在更新.... 功能 支持字符串和<.txt>文件 文字自动分各个页面 支持从右到左-(从右边开始的语言.比如维吾尔语哈扎克语...外国的阿拉伯语等) 支持自 ...

  9. Python - Git仓库忽略提交规则 & .gitignore配置

    Git 忽略文件提交的方法 有三种方法可以实现忽略Git中不想提交的文件. 在Git项目中定义 .gitignore 文件 这种方式通过在项目的某个文件夹下定义  .gitignore 文件,在该文件 ...

  10. mybatis print sql config

    log4j.rootLogger=DEBUG, Console #Console log4j.appender.Console=org.apache.log4j.ConsoleAppender log ...