植入式Web前端开发方法

上一篇，我讲述了植入式Web前端开发的基本情况，本篇就来探究其开发方法。以下假定CMS只能植入前端代码，并且需求规模是任意大小的。

代码形式

HTML代码是直接植入的毫无疑问，但除非植入的代码非常简短、功能独立，且植入点数量不多，否则将CSS和JavaScript代码直接嵌入在HTML代码中是不明智的（有的CMS可直接植入CSS和JavaScript代码，其本质也是将这些代码直接嵌入在HTML中），主要有以下弊端：

降低性能：CSS和JavaScript代码不会被浏览器缓存。
不方便调试：每次代码修改都要重新提交到系统中；代码量比较大时，混杂在一起难以书写。
不方便管理：植入点比较多时，尤其是有公共代码时，难以清晰地管理。

更好的办法是，将CSS和JavaScript做成单独的文件，在植入的HTML代码中通过<link rel="stylesheet">和<script>标签引用之。

通常，CMS会提供资源文件上传的功能。可以先在本地开发好CSS和JavaScript文件，再上传到CMS中，然后使用上传后CMS提供的文件URL。如果CMS不提供这种功能，也有其他各种办法，只要使得CSS和JavaScript文件能被公网访问即可。

开发环境

通常，在CMS上提交代码是立即生效的，所以不能直接在用户使用的页面（即生产页面）上一点点地开发和提交。一个可行的办法是，专门设立一个用户不会访问的、仅供开发用的页面，在此页面上开发，待代码稳定之后，再提交到生产页面上。

通常，开发时HTML代码部分是改动比较少的，更频繁改动的是CSS和JavaScript代码。在使用独立文件时，必须保证页面引用的CSS和JavaScript文件始终是最新的。如果它们在远程主机上，这种保证比较麻烦，一般要频繁上传文件。更好的办法是，在本地建立一个Web服务器来提供这些CSS和JavaScript文件。

在本地机器上建立一个Web服务器，让正在开发的CSS和JavaScript文件能够通过这个服务器访问到。然后在开发页面的植入代码中引用本地服务器上URL（可以在URL末尾加一个?，让浏览器不缓存）。这样，只需要刷新一下页面，无需重新提交，最新的CSS和JavaScript代码就立即生效了。

当代码稳定时，再将文件一次性上传到生产环境中，然后修改HTML中的引用的URL为生产环境中的URL（末尾无?），提交到生产页面即可。

在HTML代码不需要修改的情况下，甚至可以直接在生产页面上做开发。

在hosts中将生产环境提供CSS和JavaScript文件的主机域名指向到本机，然后在本地Web服务器中绑定该域名，并使得文件的访问路径与生产环境完全一致，最好再设置CSS和JavaScript文件不缓存。如果是HTTPS访问，则还需要做一个自签名证书，并在浏览器中忽略证书问题继续访问。如此，在本机，生产页面中获取文件时实际上会从本地获取，而用户的访问仍然正常基于生产环境。

到这里，已经可以看到，除了代码部署方式有些特殊，其他方面实际上跟正常的前端开发没什么区别。因此，各种前端开发技术、工具实际上都可以使用，如多文件开发然后编译成单文件、代码压缩、Git版本控制等等。

如果规模比较大，还可以专门开发一个自动部署机制来做植入代码的持续集成。