Question

我有一些使用完全相同的javascript代码的coldfusion文件。我想将javascript分成一个.js文件并将其包含在每个文件中，这样我就不必多次重复所有内容。所以，我将javascript代码分成了一个名为“myPage.js”的文件，而在“myPage.cfm”中我添加了一个脚本标记 -

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

问题是在javascript之间传播了一些使用<cfoutput>等注入值的冷却代码，并且不再正确翻译，可能是因为它试图将其作为纯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页面请求大小＆amp;反应速度。

基本上你应该创建一个基于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上传递URL结构或在帖子上传递FORM结构可能非常方便。

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

5 个答案: