慎用django模板include 与extend标签

别做django html组件化开发的梦

django模板include 与extend标签最好只是在很简单，如只有html代码，无css，js情况下使用，这两个标签只能让你减少一些简单的重复的HTML代码的编写。

千万不要做用这俩完成像Vue一样的组件化开发的美梦(当然可能只有我会这么傻)。我个人认为除非要复写的html代码十分简单且复写次数多才使用include 或extend标签进行html代码的复用，否则还是不用吧。

原因

一.css，js难以抽取成静态文件

由于如果使用include 与extend标签，你一个完整的html文件是由几个html文件组合而成，如果想将几个html文件碎片中css，js代码(css，js代码中需无django传入的变量才可抽取成静态文件)整合抽取成一个静态文件很麻烦的事情。

那为什么要抽取成静态文件呢，一个很重要的作用就是做缓存，并且便于压缩，丑化（js）代码进行优化。

二.css，js代码混乱

include 与extend标签本质上和优化过，符合html格式的复制粘贴。你抽取的组件并不是像Vue这样真正为组件化开发一样的独立组件，它只是把你的几个组件整合了一下代码，几个组件中的js，css代码是共存的，会互相影响的，不是像Vue一样每个组件有自己的独立标识不至于影响其他组件或被其他组件影响。当然，css可以通过style标签的scoped属性解决共存问题。但js代码冲突怎么办呢，我是没什么好办法。

踩坑日常

至于为什么要写本文，很容易能想到，我被自己这个奇特愚蠢的想法坑到了。在django html模板编写中我经常会用Vue代替jq使用，有天在开发页头的时候一想，反正后面几个页面都会用到，那要不抽取成一个组件吧，想当然地就用上include 与extend标签了。那你想想啊现在地页头哪TM只有html代码的，写这个页头我甚至都用上element-ui了。写完还感觉良好啊，一个组件一个Vue实例，在后面就愉快地用起来了。由于页头这组件啊，和其他组件并无嵌套关系，用着并无大碍。

然而，后面需求变了，有页头和其他组件有嵌套关系了，那Vue实例就冲突了呀，可愁掉头发咯。我想到的方法有俩，都好麻烦。

• 将几个Vue实例抽取成一个。代价就是几个html文件的代码由一个html代码中的Vue实例接管，编写代码要来回切换，想想都头大。
• 重写吧，放弃include 与extend标签，自己手动复制粘贴把碎片都整合在一起。代价也是头大，不过有点是方便抽取静态文件。

我选择了第二种，花了2个小时整合代码，整合的时候越想越气，就有了本文。

总结

只有html代码，无css，js情况下使用include 与extend标签。
想前端组件化开发就直接用Vue全家桶之类的，传统的模板渲染页面咱就别搞些啥花里胡哨的，代码抽取复用虽好，但也要用对地方啊。
如有纰漏，欢迎斧正