HTML如何分模塊設計並include？

01-22

比如導航條、頁腳等，一動就要全部頁面都動的東西，如何用類似php include的方法，把它包含進來，以達到每次改動只要改一次就好？
（不使用iframe）

你可以試試 jade

謝邀如果用gulp 可以搜索相關模塊 npm 里有很多 gulp include

如果自己做也很簡單拿fs模塊讀本地文件再逐行匹配include標記再查找依賴替換字元就行了。

最後和你項目中其他gulp task一起跑或者開watch實時開發也行。

webpack也有相關功能 grunt也是。

以上是純前端部分的常見解決方案也不需要php什麼的。。

我們前端寫demo的時候，開始都用jade，然後有一個環境可以自動編譯jade，jade的好處是可以在html里耦合進邏輯，然後也可以include，bulabula。

後來用了gulp管理項目之後，選擇就更多了，甚至你自己實現個插件，用特殊標籤實現include的功能也都很簡單。

後來用了react，vue什麼的，你就發現，都木有頁面的概念了。。。

gulp 這種 replace 腳本蠻多的。

嘗鮮的話可以用 HTML Import，作為 Web Component 的一部分，其使命就是 web 的 include。兼容性的話 polyfill 也還夠用。

多個鏈接產生的性能問題正好提供了個機會試試 http2 嘛…

使用gulp的gulp-file-include可以實現這個功能，還可以實現傳參的功能

具體文章：GitHub - mqyqingfeng/introduction-for-lnv-mobile-base: 教程

參考文件配置：

lnv-mobile-base/gulpfile.js at master · mqyqingfeng/lnv-mobile-base · GitHub

這個一般是後台處理的多，比如php include，好處是只用一次請求，稍微節約一些，而且對搜索引擎友好，開發上是通用模式，利於團隊協作。

一定要前端處理，簡單的就是將html封成js的字元串，然後引用這個js再document.write到合適的位置。html到js字元串要另外找工具手動處理或自己寫一個自動處理的角本。這初次訪問會多一次http連接請求，以後的頁面瀏覽器緩存應當會生效，比後台合併的節約流量，可能會對搜索引擎有點困擾，當然現在的搜索引擎很先進，可以模擬執行js的。個人開發問題不明顯，團隊協作的話，因為js封裝的html閱讀有點困難，所以最好是html文件獨立，由程序自動進行轉換。

複雜點的可以使用ajax二次載入。好處是不用處理html到js字元串的轉換，缺點是多次請求而且對搜索引擎友好稍差。

前端構建，至於模板用哪一種，隨便，但實名反對jade，感覺jade就是後端思路解決前端問題不接地氣的典型代表

如果是 C# 的話，可以試試前後端一體 WEB 視圖框架 - C# 高性能自動化服務端框架 - 凹凸架構（同時支持字元串傳參）

如果是用apache，可以讓apache支持include功能，到時html裡面直接include另一個html就好

可使用ssi開發環境中可以結合使用的構建工具使用相應的插件

生產上，利用ngnix幫你在服務端動態添加公用模塊