Question

我进行了广泛搜索并检查了各种建议，但没有为我的问题找到合理的解决方案：如何检查CDN版本是否已正确加载？这应包括检查css，例如

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />

有关如何检查正确加载的css文件的任何建议吗？

设置：Node.js在本地和heroku上运行。

我的测试文件（工作不正常）：

<!DOCTYPE html> 
<html> <head>
<meta charset="utf-8">
<title>template.html</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!--<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>-->
<script>
  if(typeof jQuery == 'undefined') {
    document.write('<link rel="stylesheet" href="/jqm/jquery.mobile-1.3.2.min.css" \/>')
    document.write('<script src="/jq/jquery-1.10.2.min.js"><\/script>')
    document.write('<script src="/jq/jquery-migrate-1.2.1.min.js"><\/script>')
  }
  if($.mobile == undefined) {document.write('<script src="/jqm/jquery.mobile-1.3.2.min.js"><\/script>')}
</script>
</head>
<body> 

<div data-role="page">
    <div data-role="header">
        <h1>data-role="header"</h1>
    </div>

    <div data-role="content">   
        <p>data-role="content"</p>
    </div>

    <div data-role="footer" data-position="fixed">
        <h4>data-role="footer" data-position="fixed"</h4>
    </div>
</div>
</body>    </html>

我的测试'hello-world'web.js位于下方（本地作为node s/web.js运行，s用于服务器目录）：

var express = require("express");
var path = require('path');//http://stackoverflow.com/questions/10434001/static-files-with-express-js
var app = express();

process.env.PWD = process.cwd();//http://stackoverflow.com/questions/17212624/deploy-nodejs-on-heroku-fails-serving-static-files-located-in-subfolders

app.use(express.logger());
app.use(express.static(path.join(process.env.PWD, 'html'))); //http://stackoverflow.com/questions/14576644/whats-the-simplest-way-to-serve-static-files-using-node-js
app.use(express.static(path.join(process.env.PWD, 'jq')));
app.use(express.static(path.join(process.env.PWD, 'jqm')));

//app.get('/', function(request, response) {
//    response.send('Hello jc138691');
//});

var port = process.env.PORT || 3000;
app.listen(port, function() {
    console.log("Listening on " + port);
});

这也不能在Windows上本地工作：process.env.PWD = process.cwd()不会返回正确的目录。

所以简而言之，有没有人有一个合理的设置示例：node-backend和任何类型的前端（例如jquery mobile）？包括灵活的目录结构（即不是一个目录中的所有内容）。

Answer 1

以下在heroku中运行并通过webstorm在本地运行。有没有“更好”的设置，请评论？ c_xxx用于客户端代码;服务器代码的s_xxx;

enter image description here

template_130906.html：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>template_130906.html</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<!--<script src="loadJQ_1_10_2_JQM_1_3_2.js"></script>-->

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<script>
  if (typeof jQuery == 'undefined') {
    document.write('<link rel="stylesheet" href="jquery.mobile-1.3.2.min.css" \/>');
    document.write('<script src="jquery-1.10.2.min.js"><\/script>');
    document.write('<script src="jquery-migrate-1.2.1.min.js"><\/script>');
  }
  if (typeof $ == 'undefined'  ||  $.mobile == undefined) {
    document.write('<script src="jquery.mobile-1.3.2.min.js"><\/script>');
  }
</script>
</head>
<body> 

<div data-role="page">
    <div data-role="header">
        <h1>data-role="header"</h1>
    </div>

    <div data-role="content">   
        <p>data-role="content"</p>
    </div>

    <div data-role="footer" data-position="fixed">
        <h4>data-role="footer" data-position="fixed"</h4>
    </div>
</div>
</body>  </html>

还没有正确加载检查css的解决方案吗？！？！

web_130906.js：

// webstorm setup:
//http://blog.jetbrains.com/webide/2010/11/working-with-javascript-libraries-in-phpstorm-webstorm/

var express = require("express");
var path = require('path');//http://stackoverflow.com/questions/10434001/static-files-with-express-js
var app = express();

process.env.PWD = process.cwd();//http://stackoverflow.com/questions/17212624/deploy-nodejs-on-heroku-fails-serving-static-files-located-in-subfolders

app.use(express.logger());
app.use(express.static(path.join(process.env.PWD, 'c_html'))); //http://stackoverflow.com/questions/14576644/whats-the-simplest-way-to-serve-static-files-using-node-js
app.use(express.static(path.join(process.env.PWD, 'c_js')));
app.use(express.static(path.join(process.env.PWD, 'jq')));
app.use(express.static(path.join(process.env.PWD, 'jquery.mobile-1.3.2')));

//app.get('/', function(request, response) {
//    response.send('Hello jc138691');
//});

var port = process.env.PORT || 3000;
app.listen(port, function() {
    console.log("Listening on " + port);
});

的package.json：

{
    "name": "jqm130824",
    "version": "2013.08.27",
    "description": "jqm130824",
    "dependencies": {
      "express": "3.3.5",
      "path": "0.4.9"
    },
    "engines": {
        "node": "0.10.15",
        "npm": "1.3.5"
    }
}

对于heroku，Procfile：

web: node s_js/web_130906.js

入口点index.html：

<!DOCTYPE html>
<html>
<head>
    <title> title </title>
</head>
<body>
     <h1> index.html boby </h1>
     <a href="template_130906.html">template_130906.html </a>
</body>
</html>

Answer 2

这是我的混合物：

if (typeof jQuery == 'undefined') {

    var jqueryins = document.createElement('script');
    jqueryins.type = 'text/javascript';
    jqueryins.async = true;
    jqueryins.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
    var s = document.getElementsByTagName('jqueryins')[0];
    s.parentNode.insertBefore(jquery-ins, s);

受到googleAnalytics脚本插入的启发

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-146052-10']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

如何检查CDN版本是否已加载，如果没有加载本地版本的jquery，jquery-mobile，

2 个答案: