ThinkPHP 使用 U 方法動態輸出 JavaScript 文件的技巧

ThinkPHP 使用 U 方法動態輸出 JavaScript 文件的技巧

ThinkPHP 的 U() 方法主要用於生成 URL，但結合動態輸出技巧，可實現「透過控制器動作輸出 JS 內容」的需求，適用於需根據權限、語言動態生成腳本的場景。

實作步驟

1. 建立 JS 專用控制器

<?php
class JsAction extends Action {
    public function nav() {
        // 直接渲染模板文件，不使用佈局
        $this->display('Index:js:nav'); // 對應 Tpl/Index/js/nav.html
    }
}
?>

2. 準備 JS 模板文件

將原本的 nav.js 改名為 nav.html（或 nav.tpl），內容可包含模板變數：

// Tpl/Index/js/nav.html
var siteUrl = '{$siteUrl}';
var userId = {$userId};
function initNav() { console.log('Dynamic JS loaded'); }

3. 在視圖中引入動態 JS

<script type="text/javascript" src="{:U('Js/nav')}"></script>

進階應用

• 合併壓縮：在 nav() 方法中讀取多個 JS 文件、壓縮後統一輸出，減少 HTTP 請求。
• 權限控制：根據登入狀態輸出不同的 API 基礎路徑或功能開關。
• 快取策略：在 Action 中設定 header('Cache-Control: max-age=3600') 並配合 ETag 實現瀏覽器快取。

注意事項

1. 輸出前務必設定正確 Content-Type：header('Content-Type: application/javascript; charset=utf-8');
2. 模板文件建議放在 Tpl/模塊/js/ 目錄，便於管理。
3. 若專案使用 ThinkPHP 3.2+，請改用 Controller 基類與命名空間寫法。

此技巧讓 JS 從靜態資源變為動態可控的應用層組件，極大提升前端靈活度。