Simple Blockly
通过删除文件，大家发现其实Blockly-master文件中很多文件并不是必不可少的，通过Simple Blockly案例，梳理Blockly的文件目录，实现精简版的Blockly。
1. 准备工作
（1）HTML知识准备
最小的HTML文档：
<!DOCTYPE> //定义文档的类型
<html> //定义一个 HTML 文档
<head> //定义关于文档的信息
<meta charset="utf-8"> //对于中文网页，声明编码，否则会出现乱码
<title>文档标题</title> //定义文档的标题
</head>
<body> //定义文档的主体
文档内容......
</body>
</html>
除了上述最小HTML文档中包含的内容，我们会用到还有：
Script标签，定义客户端脚本
<script src="helloworld.js"></script>
Link标签，链接样式表
<link rel="stylesheet" type="text/css" href="theme.css">
根据上述内容，完成下面的小案例，要求：
- 在最小HTML文档的基础上，显示HelloWorld；
- 通过内部js脚本控制弹框输出HelloWorld；
- 通过外部js脚本控制弹框输出HelloWorld；
/**示例代码**/
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
<!--<script>
alert("Hello World!");
</script>-->
<script src="alert_helloworld.js"></script>
</head>
<body>
Hello World!
</body>
</html>
（2）blockly-master文件准备
2. 动手实践
（1）新建文件目录
新建一个文件夹，重命名为SimpleBlockly，并在文件夹中新建css，js两个子文件夹，将blockly-master/Demos/Code中的index.html复制到SimpleBlockly根目录下，如下图：
（2）导入、调整文件
使用notepad++打开index.html文件，修改head部分的内容，并将head部分的涉及的内容，从blockly-master中复制添加到SimpleBlockly中的css和js文件夹中。
- 将title修改为Simple Blockly；
- 将blockly-master/demos/code文件中的style.css文件移至css文件夹中，并将href引号中对应的字符串改为”css/style.css”；
- storage.js直接删除即可，它和Google的Clound Storage有关，案例中用不会涉及这部分功能；
- 将blockly-mater文件中的blockly_compressed.js文件移至js文件夹中，并将src引号中对应的字符串改为”js/blockly_compressed.js”;
- 将blockly-mater文件中的blockls_compressed.js文件移至js文件夹中，并将src引号中对应的字符串改为”js/blockls_compressed.js”;
- 将blockly-mater文件中的javascript_compressed.js文件移至js文件夹中，并将src引号中对应的字符串改为”js/javascript_compressed.js”;
- 将blockly-mater文件中的Python_compressed.js文件移至js文件夹中，并将src引号中对应的字符串改为”js/Python_compressed.js”;
- 将blockly-mater文件中的php_compressed.js文件移至js文件夹中，并将src引号中对应的字符串改为”js/php_compressed.js”;
- 将blockly-mater文件中的lua_compressed.js文件移至js文件夹中，并将src引号中对应的字符串改为”js/lua_compressed.js”;
- 将blockly-mater文件中的dart_compressed.js文件移至js文件夹中，并将src引号中对应的字符串改为”js/dart_compressed.js”;
- 将blockly-master/demos/code文件中的code.js文件移至js文件夹中，并将src引号中对应的字符串改为”js/code.js”;
此步的目的是将Blockly相关文件的位置进行调整，并且修改html部分代码，让其能指向对应文件；找文件的一个技巧：”..”代表返回父文件目录，文件前没有内容的话，就表明和html文件在同一文件夹下。
上述操作完成之后，保存html文件，并在浏览器中打开：
如上图，比较直观的可以看出Toolbox并未显示出来。文件明明已经导入并调整好了，为什么还会出现这种情况？我们可以借助Chrome浏览器的“检查”功能，查看出现问题的原因：
在上图中，发现有几个错误，仔细看这些错误，发现除了media文件相关的错误之外，出现频率较高的就是msg相关的错误。
对比之前的“删除文件”案例，在删除media或msg文件夹之后的现象。
msg文件这么重要吗？它有什么功能？
对于msg文件，可分为2部分，一部分blocks的msg文件，负责blocks语言的转换；一部分是category的msg文件，负责category语言的转换；
如何解决这种情况？
a. 方案
分别导入blocks和category的en.js文件；（可分别添加，然后刷新两个文件对界面的影响）；界面转换成中文（两个zh-hans.js文件导入）。
b.方案
通过a.方案可以实现基本功能，达到预期的效果，不过语言转换功能就失效了；如果需要完整的功能，就要通过code.js文件修改，直接进行调整msg文件指向的路径；
/**在修改code之前，需要了解一个基础知识**/
document.write("test");
/**可以在demo2-1中进行测试，不过要区分与code.js中代码的细微区别**/
先将根目录下的msg文件和code目录下的msg文件，分别拷贝到SimpleBlockly/msg文件中，为方便区分，分别重命名为blocks-msg和category-msg，然后修改code.js中的代码指向这些文件。刷新网页，即可正常工作。
// Load the Code demo's language strings.
document.write('<script src="msg/category-msg/' + Code.LANG + '.js"></script>n');
// Load Blockly's language strings.
document.write('<script src="msg/blocks-msg/' + Code.LANG + '.js"></script>n');
（3）媒体文件的导入
通过查看Chrome的Console，发现media文件缺失，导致界面有裂图。所以将media文件拷贝到SimpleBlockly文件的目录中，然后修改html和code.js文件中的media对应路径即可。
code.js文件中的media文件对应第420行
至此，Simple Blockly就大功告成了！
作者：郅朋
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。