Photo byrawpixelonUnsplash
Github上看到一个工程,实现了一个CSS/HTML/JavaScript在线编辑器,代码大小 为400 bytes,没错,只有400字节,400个字母&空格符就实现了一个编辑器。那么神奇?我们先看源代码:
That is all,上图就是全部代码量了。如果你怀疑,可以将代码复制到电脑浏览器的地址栏,回车执行:
data:text/html,
代码运行效果为(下图写入了HTML、CSS、JS):
编辑器里的HTML、CSS、JS三栏代码自动执行运行,功能齐全。类似jsbin,codepen.io等在线代码编辑器效果。重点就是代码量只有400bytes,下面简单介绍一下代码原理:
是不是很简单?也很神奇?作者通过用简单代码来实现一个编辑器,这是一个想法问题,很多人不知道如何实现只是没想到而已,并不是没能力写这些代码,因为这些代码是前端初学入门级别的代码。说这些干什么呢,意思就是为了提醒大家,编程开发就是要多想多写,做一些有趣的东西,慢慢得,就会理解更多,或者更深入了。一个不动手,没有自己作品的程序员,如果他说他热爱编程,喜欢写软件给别人用,我是不会相信的。而且也会怀疑他的能力,需要考量才能相信。如果你说你所做的东西都是公司产品、项目,那表示你也只有在工作的时候才真正做开发?也许你认为编程只是一份工作而已,这也没有错,我在工作的时候才学习,才使用。那祝你珍惜,因为可能你未来在技术方向上没有几年的工作了。(可以了解一下知乎:《为什么很多公司都不招大龄码农?》)
扯偏了,本文最小编辑器Github工程源码:
https://github.com/umpox/TinyEditor
PS:代码图片生成我用的是 carbon-now-cli ,想用Github搜就行了。
领取专属 10元无门槛券
私享最新 技术干货