如何进行静态页面中的部分区域的处理

Question

gulp-file-include

gulp-file-include 打包静态页面时，关于页面中的部分重复并且可变的区域，该如何处理？
例如登录按钮区域的处理，具体是登录前后的区别，在静态页面中该采用什么样的方式进行？
有啥优点和缺点？

想了以下几个处理方式，欢迎推荐下。

• 生成不同页面
• 动态更新获取页面部分区域（例如通过Ajax等动态获取相关区域的样式）
• 动态修改调整页面部分区域显示状态（例如JavaScript控制显示状态）
• 其他更好的方式（请推荐）

Answer 1

使用现代前端的组件化技术来开发，在这种可复用的区域定义你自己的组件，即可直接解决你的这个疑问，代表性的即：

• vue
• react
• angular

Answer 2

现在前端组件化，模块化技术完全可以替代gulpfile.js了，组件化开发的 然后使用构建工具对项目进行构建，例如登录组件 就可以写一个通用的组件，并接收一些可定制的参数（登录之后的执行函数，需要展示的控件，等等），具体的可以了解下楼上所说的 目前国内前端三个比较主流的框架，或者未来必会火的 svelte https://svelte.dev/examples#h... 也可以了解下，看多了 点自然成线成面了

Answer 3

如果没有用框架的话，建议单独分开写页面，各个页面直接展示不同内容，通过ajax, js动态切换咬合面状态即可，这样后期方便调整，也能省略页面内的 if else.
使用框架的话，开发成组件即可。