pencil code的一些解释

马黑黑 · 发表于 2023-1-10 11:27

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

一、为何要写pencil code

有一天整理 onedrive ，顺带找一个特定文档，发现小文档实在太多，一时半会还真找不出所需的东东，Everything 也帮不上忙。分析原因，有很多，其中一个是，平时测试个函数什么的命名太过随意，这习惯一直改不了，另一个是要测试的实在太多，每一个测试都会保留一个文档，久而久之文档满天飞。于是有一个解决第二个问题的想法，可以让文档不那么碎片化存在。pencil code 就这样出来了，它可以完成我要做的测试，测试后来，我可以把代码复制到一个笔记文档，这个文档将碎片化的测试代码集中在一起，找文档和按关键字找代码都会很容易。

二、pencil code 是什么意思

如果知道鼎鼎有名的 Pen Code ，就能猜出我的用意。我的只能是铅笔，自个儿玩玩，玩完了可以用橡皮擦轻松擦掉。

三、pencil code 真的可以这么简单吗

当然可以。实际上，如果我只需要核心功能的话，最初版本的几行JS代码就可以满意了。核心功能，就是它能实现这么一个机制：实时将我输入的代码变成代码所描绘的效果，包括三件套的东东，即CSS、HTML、JS。不过，我们使用任何工具，都会希望它功能全面和强大一些、交互友好一些、界面好看一些……，所以几行代码是解决不了问题的，pencil code 的第二个版本就发福了一不少。第三个版本正在根据前面版本的使用体验进行全新开发，现在基本能用了，还需要杀青，它会更胖一点。

极简风格仍然会得到保留，脚本也不会无限膨胀。

四、pencil code 的工作原理是什么

具体来说，就是将代码分成两部分打包，一部分是 CSS+HTML，另一部分是 JS。在页面中运行 CSS+HTML 很简单，令展示效果的盒子的 innerHTML 等于打包的 CSS+HTML 代码即可；运行JS代码也不复杂，我采用的方法是将打包好的 JS代码封装成函数，然后在效果盒子里运行这个函数。

至于实时效果的展示，那也简单，监测代码编辑框的输入，实时打包代码并在效果区域运行。

整个实现机制简单到无以复加，没有什么黑科技，仅是一些思路的具体落实。