个人中心
gpt4 book ai didi

javascript - Coldfusion 结合链接的 JavaScript 文件

转载 作者：行者123 更新时间：2023-11-30 08:27:01 24 4
gpt4 key购买 nike

我的任务是将所有外部 JavaScript 文件合并到一个调用中。这似乎有点傻，但这是我被赋予的任务。

虽然我认为这很容易，只需使用像 https://github.com/zefer/Combine 这样的插件看来他们正在以一种奇怪的方式链接文件。

他们使用 cfset 来定义这些文件的位置。无论如何，我可以在一个电话中将这些放在一起或使用上面的插件。我一直在努力想出解决方案，但我的大脑正式空了。

<cfset Application.globalObj.addJsFile(jsfile="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js",location="footer",priority=1) />

最佳答案

好的，首先，这不是一个愚蠢的要求。您可以加载 5 个 JS 文件来加载 jQuery 和 4 个插件，或者您可以将所有代码加载到一个压缩文件中。这将加快您的页面加载速度，并可以将浏览器中与 JS 库代码相关的内容量从 25% 减少到 70%。

我们有一个类似的 ColdFusion 对象，它允许我们指定特定页面正常工作所需的 JS 文件。文件列表在服务器上收集，然后在 <head> 中呈现到页面。或低于<body> (请求 JS 文件的地方也会影响页面加载速度)。

他们要求你做的是收集他们的标准 JS 库(和相关的 CSS 文件)并创建一个 build ，这将生成一对 JS 和 CSS 文件，可以在一个请求中加载而不是多个。

这不是您应该使用 ColdFusion 做的事情。

我的意思是，您不会在生产中即时创建编译文件，您将提前创建它们并将它们部署到您的服务器，应用程序将在服务器上请求它们而不是单独的 JS 库文件。

您需要使用像 Grunt 这样的构建工具或 Gulp , 这需要 Node .如果您以前从未使用过 Node，那么您将需要一两天的时间来完成所有这些并通过构建运行。网上有大量示例，但我将为您提供一个我们为仍然使用 Adob​​e Spry 库的遗留应用程序构建的示例。

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var cssmin = require('gulp-cssmin');
var compileDest = 'dist/compiled';
var jsSrc = [];
var cssSrc = [];

jsSrc.push('app/spry/1.6.1/widgets/SpryAccordion.js');
jsSrc.push('app/spry/1.6.1/widgets/SpryHTMLPanel.js');
jsSrc.push('app/spry/1.6.1/SpryData.js');
jsSrc.push('app/spry/1.6.1/SpryHTMLDataSet.js');
jsSrc.push('app/spry/1.6.1/SpryJSONDataSet.js');
jsSrc.push('app/spry/1.6.1/SpryNestedXMLDataSet.js');
jsSrc.push('app/spry/1.6.1/xpath.js');
jsSrc.push('app/spry/1.6.1/SpryPagedView.js');
cssSrc.push('app/spry/1.6.1/widgets/SpryAccordion.css');
cssSrc.push('app/spry/1.6.1/widgets/SpryHTMLPanel.css');

gulp.task('compileScripts',function(){
    //JS
    gulp.src(jsSrc)         
        .pipe(concat('equator-spry.1.6.1.js'))
        .pipe(uglify())
        .pipe(rename('equator-spry.1.6.1.min.js'))
        .pipe(gulp.dest(compileDest));
    //CSS
    gulp.src(cssSrc)
        .pipe(concat('equator-spry.1.6.1.css'))
        .pipe(cssmin())
        .pipe(rename('equator-spry.1.6.1.min.css'))
        .pipe(gulp.dest(compileDest));
});
  • 我们加载 1 个而不是 8 个 JS 文件:equator-spry.1.6.1.min.js
  • 我们加载 1 个而不是 2 个 CSS 文件:equator-spry.1.6.1.min.css

    • 然后您的 CF 代码将仅引用
    <cfset Application.globalObj.addJsFile(jsfile="/js/equator-spry.1.6.1.js",location="footer",priority=1) />
    您还需要更新 addJsFile()忽略对单个 JS 文件的请求，以避免重构现有代码，并避免在最终更新构建时库版本中的潜在冲突，因为底层库得到更新。

    您将失去从公共(public) CDN 加载的能力，但您会因用户从浏览器缓存中检索您网站的新编译文件而降低页面加载速度。

    编辑

    This is a ten+ year old project and has over 100 pages and a custom cms system. Previous developers have tried and failed miserably. That was why I was trying to use a simpler solution and not bring a new tech into this stack that is already a complete mish mash.



    您没有向 ColdFusion 应用程序本身引入任何新技术。

    您要做的是引入一个新的过程来生成 CF 应用程序将使用的 JS 和 CSS 文件。

    就我而言，有一个全局布局文件。我刚刚添加了一行来将新编译的 JS 和 CSS 文件加载到该布局中。 
    <cfset rc.oResourceService.addHeadContent(type='js', src='/resource/compiled/spry/1.6.1/equator-spry.1.6.1.min.js')  />
    <cfset rc.oResourceService.addHeadContent(type='css', src='/resource/compiled/spry/1.6.1/equator-spry.1.6.1.min.css')  />

    现在它们可用于每个屏幕。

    然后我会找到定义 Application.globalObj 的对象, 定位函数 addJsFile()并更新它以忽略现有单个 JS 文件名的列表。 
    <!--- ResourceService, function addHeadContent() --->
    var ignoreList = [
        'jquery\.js'
        , 'SpryAccordion\.css'
        , 'SpryHTMLPanel\.css'
        , 'SpryAccordion\.js'
        , 'SpryHTMLPanel\.js'
        , 'SpryData\.js'
        , 'SpryHTMLDataSet\.js'
        , 'SpryJSONDataSet\.js'
        , 'SpryNestedXMLDataSet\.js'
        , 'xpath\.js'
        , 'SpryPagedView\.js'
    ];

    现在，只要请求该列表中的文件，它就会被忽略，并且没有 <script>标签被渲染。 
    <cfset rc.oResourceService.addHeadContent(type='js', src='/includes/spry/includes/SpryData.js') />
    <cfset rc.oResourceService.addHeadContent(type='js', src='/includes/spry/includes/xpath.js') />
    <cfset rc.oResourceService.addHeadContent(type='js', src='/includes/spry/includes/SpryPagedView.js') />
    <cfset rc.oResourceService.addHeadContent(type='js', src='/includes/spry/includes/SpryJSONDataSet.js') />
    <cfset rc.oResourceService.addHeadContent(type='js', src='/includes/spry/widgets/htmlpanel/SpryHTMLPanel.js') />

    这意味着不必更新数千个(是的，在我的情况下为数千个)CFM 文件以删除对那些现在已删除文件的各个引用。

    你绝对可以做到这一点!

    由于您以前使用过这些构建工具，因此您已经领先于游戏。你知道你需要生产什么以及你想要完成什么。您只需要弄清楚需要在现有 CF 代码中进行哪些小的更改才能实现它。我已经概述了我必须做的事情，它似乎与您正在处理的事情非常相似。

    不要采取“恰巧起作用”的不当方法，并使其成为新事物。使当前的技术成为新事物。

    现在，当您需要在现有 CF 逻辑之上实现 NodeJS API 或必须在遗留 CF 代码之上集成 Angular JS 应用程序时，请给我一个大喊大叫，我们也可以谈谈我们正在做什么。 :)

    关于javascript - Coldfusion 结合链接的 JavaScript 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44005299/

    24 4 0
    文章推荐： javascript - 拿一把 key :Object pair and append to another object in javascript
    文章推荐： java - 从现有的 maven 项目生成 war 文件
    文章推荐： java - Spring 上下文 :property-placeholder for a boolean value
    文章推荐： javascript - 如何在 javascript 数组元素中显示正确的值？
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com