「Modularising」 JavaScript文件

我有我的用戶的網站一行代碼，它要求一個腳本，從我的服務器：「Modularising」 JavaScript文件

<script src="myserver.com/getjs?user=1"></script>

和PHP提供了JS，在代碼中插入用戶的ID：

(function(){ 
    var userid = 1; //written out from $_GET['user'] 
    ...js code... 
})();

現在我想輸出不同的js取決於用戶的id是什麼。我不想有很多不同的js文件，我想要一種方式來「模塊化」根據用戶設置發送的代碼，因爲用戶不需要更改其網站上的代碼。我可以看到這樣做的唯一的辦法就是輸出js文件是這樣的：

...first PHP will get some user settings from the db based on their userid... 
...then the js is output... 

(function(){ 
    var userid = 1; //written out from $_GET['user'] 

    <?php if($userOption1){ ?> 
     function _option1(userid){ //func required if option1 true 
      ...func1 code... 
     } 
     _option1(userid); //ruin it in js 
    <?php } ?> 

    <?php if($userOption2){ ?> 
     function _option2(userid){ //func required if option2 true 
      ...func2 code... 
     } 
     _option2(userid); //run it in js 
    <?php } ?> 

    ...and so on... 

})();

但我敢肯定，必須有管理這個更有效的方式。這樣做的原因部分是爲了讓每個用戶的代碼儘可能小，但主要是因爲我正在構建一些用戶不想要的功能 - 它需要對每個人都是動態的。

感謝任何人誰可以幫助！

來源

2013-07-24 tripRev

首先，你爲什麼不在cookie中設置用戶ID？畢竟PHP可以寫入它，並且js可以讀取它。使用相同的名稱輸出不同的內容會導致緩存和代理的問題。如果你要防止緩存（註銷工作），保留文件縮小几乎不會有幫助 - 如果一個大文件只能請求一次並通過用戶瀏覽器緩存，那麼數據傳輸可以少得多。 –

@Mołot謝謝，但一切順利的方式請求和緩存js，我只是尋找一個更有效的解決方案，可以動態輸出不同的js爲每個用戶根據請求的url變量。 – tripRev

您可以使用Require.JS（website）。它根據需要異步加載腳本。加載庫，你可以使用：

<script data-main="js/loadScripts.php" src="libs/require.js"></script>

它主要是告訴Require.JS運行JavaScript文件時，裝完（是的，loadScripts.php需要返回JavaScript中的「loadScripts.php」，在那裏，你可以返回任何用戶的自定義庫）。

裏面loadScripts.php，你可以這樣做：

<?php 
// Generate en array of loading scripts, you'll probably want to dynamically 
// generate this array according to user access permissions or any other case 
$scriptsToLoad = array("script1", "script2", "script3"); 

$loadingList = "["; 
$argumentsList = ""; 

foreach ($scriptsToLoad AS $script) 
{ 
    $loadingList .= "\"{$script}\", "; 
    $argumentsList .= "{$script}, "; 
} 
$loadingList = substr($loadingList, 0, strlen($loadingList) - 2); 
$loadingList .= "]"; 

$argumentsList = substr($argumentsList, 0, strlen($argumentsList - 2); 

echo "require({$loadingList}, function({$argumentsList}) {});\n"; 
?>

我沒有測試過這一點，但你可以得到一個想法在閱讀其網站。請注意，腳本在不帶「.js」的情況下被調用，並且需要位於loadScripts的相同文件夾中（它們可以位於子文件夾內，調用subfoldername/scriptName來加載文件js/subfoldername/scriptName.js）。

argumentsList將定義將包含加載模塊的變量。這些模塊將被定義爲：

$(function() { 
    // Stuff... 
    var module = { 
     doSomething: function() { 
      // ....... 
     }, 

     anyValueYouWant: 5 
    }; 

    return module; 
});

當然，有很多方法來定義模塊，您需要閱讀API文檔。希望這有助於。

來源

2013-07-24 10:51:15

「Modularising」 JavaScript文件

回答

相關問題