如何包含包含coldfusion代碼的外部javascript文件？

Question

我有一些使用相同的javascript代碼的coldfusion文件。 我想將javascript分成一個.js文件並將其包含在每個文件中，這樣我就不必多次重復所有內容。 所以，我將javascript代碼分成了一個名為“myPage.js”的文件，而在“myPage.cfm”中我添加了一個腳本標記 -

<script language="javascript" src="myPage.js"></script>

問題是，在使用<cfoutput>等注入值的javascript中有一些coldfusion代碼傳播，並且不再正確翻譯，可能是因為它試圖將其作為純javascript讀取。 有沒有辦法我可以有一個外部的js文件，但表明我希望它使用coldfusion來解釋它？

我找到的一個解決方法是將javascript放入coldfusion文件而不是javascript文件，稱為“myPageJavascript.cfm”，將<script type="text/javascript">標記中的所有javascript代碼包圍，然后使用cfinclude在所有頁面中包含該javascript。 這樣可以正常工作，但在我看來並不像包含js文件一樣直觀......對於這樣的情況，標准做法是什么？ 有沒有辦法將其作為外部js文件實現，還是應該堅持我的coldfusion模板文件？

Answer 1

其他答案更優雅，更有效，但簡單的方法是將文件擴展名從.js更改為.cfm ，如下所示：

<script language="javascript" src="myPage.cfm?id=#createUuid()#"></script>

createUuid()用於防止緩存，假設文件輸出不同，很可能基於session范圍中的變量。 客戶端將其加載為JavaScript，而服務器將其作為ColdFusion進行處理。 你也可以用樣式表做同樣的事情。

現在，如果您的JavaScript依賴於來自調用頁面的值，您可以在URL上傳遞它們：

<script language="javascript" src="myPage.cfm?name1=value1&name2=value2"></script>

在這種情況下，當傳遞相同的URL參數時，您實際上可以利用緩存。

總的來說，這種方法比重構代碼以保持.js文件“純粹”要少得多，同時輸出預先依賴於<script/>塊的變量。

Answer 2

我建議你在js include之前創建一個腳本塊，其中包含要在js文件中使用的所有變量。 在您的情況下，將放在js文件中的cfoutput變量移動到主文件中

    <script type='text/javascript'>
    var sourceName = <cfoutput>#Application.name#</cfoutput>
    </script>

    <script src="js/myPage.js" type="text/javascript"/>

在myPage.js文件中，您可以使用變量sourceName，它具有來自coldfusion變量的實際值。 從而幫助您分離coldfusion代碼和js代碼。

如果要移出很多變量，請考慮創建對象類型變量並在其中添加所有這些變量。

注意：使用腳本標記添加js將有助於緩存並提高頁面性能。 所以不要將js文件加載為cfm文件

Answer 3

如果您將ColdFusion代碼移回到您從中獲取它的位置，您將使用它來設置一些JavaScript變量，並且只留下純JavaScript然后在外部JavaScript文件中使用這些變量，那么效率會更高。 這將是最簡單的解決方案。 更高級的是在外部JavaScript文件中定義函數，這些函數將從ColdFusion生成的HTML中的腳本標記中調用。

Answer 4

我最初喜歡@ Orangepips對@ Anooj的回答是，每次在CFM中包含<script> ，都需要單獨的Javascript塊，以便於日后維護。

然而，經過幾分鍾的思考后，通過結合兩個答案可以很容易地消除這種情況。 這為您提供了模塊化，便於您今天的開發和未來的維護 - PLUS作為一種最佳實踐，可以隔離和緩存靜態Javascript，以降低您的CF頁面請求大小和響應速度。

基本上，您應該創建一個基於CF的外觀，您將在每次需要Javascript功能時包含或調用它。 在我的例子中，我使Facade成為一個可調用的函數，你可以將JS參數傳遞給（如@Orangepips所暗示的那樣），以便嚴格控制傳遞給JS的vars。

（順便說一句，作為一種最佳實踐，我傾向於將所有內聯JS放入變量中，然后將其填充到CFHEADER中，以確保它位於頁眉中。）

dosomething.js

<script type='text/javascript'>
    <!-- assert vars were passed in -->
    if ( source == undefined )
         alert("Developer error: source not defined.");
         return;
    }
    if ( urlpath == undefined )
         alert("Developer error: urlpath not defined.");
         return;
    }

    <!-- do some js stuff --->
    alert('source: ' + source + ", urlpath: " + urlpath );
</script>

udf.cfm：

<cffunction name="doSomething" output="true" returntype="void">
    <cfargument name="source" required="true" /> 
    <cfargument name="urlpath" required="true" /> 

    <cfsavecontent variable="header">
    <script type="text/javascript">
        <!-- var init -->
        <cfoutput>
            var source = '#arguments.source#';
            var urlpath = '#arguments.urlpath#';
        </cfoutput>
    </script>
    <script language="JavaScript" type="text/javascript" src="dosomething.js"></script>
    </cfsavecontent>
    <cfhtmlhead text="#header#">
</cffunction>

application.cfm

<cfinclude template="udf.cfm">

view1.cfm：

<cfoutput>#doSomething("view 1", "http://myurl/view1")#</cfoutput>

view2.cfm：

<cfoutput>#doSomething("view 2", "http://myurl/view2")#</cfoutput>

將代碼分離出來后，任何未來的更改都會變得更加容易（JS與JS-var定義的外觀分離，與調用它的各個視圖是分開的）。 例如，在添加變量時，您可以使其向后兼容，以便所有現有視圖繼續工作。

udf.cfm更改：

<cfargument name="newVar" required="false" default="" /> 
<cfif len(arguments.newVar)>
var newVar = "#arguments.newVar#";
</cfif>

dosomething.js更改：

// keep JS backwards compatible
if ( newVar != undefined) {
    // new var was passed in, do something with it
}
// else, not passed in 

Answer 5

要識別來自服務器的內容，並使CF函數toScript正確呈現變量，包括結構和數組，我使用此方法：

<script>
    var cf = {};
    <cfscript>
        writeOutput(toScript(application.applicationname,'cf.app'));
        writeOutput(toScript(cgi.remote_addr,'cf.url'));
    </cfscript>
</script>

呈現給：

<script>
    var cf = {};
    cf.app="Lucee";cf.url="149.79.80.135";
</script>

現在在你的外部.js你只需使用cf.app，cf.url ......等等。

有時在帖子上的get或FORM結構上傳遞URL結構非常方便。