在博客园、凡科建站和其他一些CMS系统中,提供了允许管理者在网页中插入自定义HTML代码的功能,我将其称之为“植入式”的Web前端代码。管理者不能修改系统本身的代码,但通过这种方式,也可以实现一些自定义功能,即二次开发。
因为CSS和JavaScript可以通过嵌入或外部文件的形式写在HTML中,所以允许植入自定义的HTML代码,其实就是允许使用任何前端资源,在结构层(HTML)、表现层(CSS)和行为层(JS)上都获得了控制能力。不同系统对于植入代码,一般都会允许HTML和CSS,但不一定会允许JS(过滤掉<script>)。如果允许JS,则植入代码能做的事情范围会极大地扩展,因为JS是通用编程语言。
在允许植入并运行JS的情况下,几乎只要是在前端范畴内能做的事,就都可以实现。除了常见的在局部用JS优化页面原有功能、添加新功能之外,理论上,甚至完全可以把整个DOM树替换掉,换成与原页面内容完全不同的全新页面内容表现。比如现在这篇文章的页面,我完全可以通过植入代码,令其最后展现给读者的是一个Web游戏程序。
当然,这种模式也并非随心所欲,它也有着诸多限制,比如性能(原页面的所有资源仍然要加载)、SEO(原页面的HTML结构仍然都在)、兼容性(库冲突)等等,限制的主要原因在于,原页面代码始终都在,植入代码只能在页面载入一段时间之后才能开始起作用。植入代码只是对于前端,在某个范围内可以做到一些灵活性,获得一些控制权,对于后端,没有任何影响。
所以可见,本质上,植入代码的能力不过是正常的前端能力的子集,虽然它确实能在某个范畴内玩出花来,但除非真的必要,否则绝不会是首选方案——显然应该先考虑修改页面本身的代码。
因此,这种模式基本上仅用于在必要时,做页面局部的调整、优化或新增功能。比如凡科商城这种在线的CMS平台,管理员对系统本身的页面代码没有控制权,系统提供的常规定制选项又无法满足需求,那就必须通过这种手段来做二次开发了。
不过,虽然在服务端这种模式的应用有限,但在用户端这种模式却是应用广泛,这就是大名鼎鼎的油猴脚本。
继续阅读:植入式Web前端开发方法。