JSfiddle：如何创建多 JS/CSS/HTML 文件项目？

Question

有没有办法在 JSfiddle.net 上创建一个包含多个 HTML、CSS、JS 文件的严肃的 HTML/CSS/JS 项目？ 如果是，怎么做？

---

我想创建一个基于 HTML/CSS/JS 的基本移动应用程序，大约有十几个 HTML/CSS/JS 文件。我想在 JSfiddle 上开发它，我最喜欢的 Online JavaScript IDE。但是 JSfiddle.net 虽然测试项目的干净方式仍然限于：

• 1 个 html 文件（个人）
• 1 个 CSS 文件（个人）
• 1 个 JS 文件（个人）
• 一些外部资源（CSS、JS 库、数据）要求您进行另一个虚拟主机。

1HTML/1JS/1CSS/someDataFiles 的官方文档suggesting Github hosting 并不令人满意。我希望 JSFiddle 上的所有内容，以及我的项目中的更多文件。

Answer 1

您可以在 jsFiddle 中完成此操作，但限制很少，您可能不会对此感到满意。

1. 您只能测试 1 个 HTML 多页模板。但如果是 jQuery Mobile 框架，这就足够了，因为您可以在 1 个 html 文件中放置大量 jQM 页面。

   例如，这是我帮助这个小组时的 jsFiddle 模板：http://jsfiddle.net/Gajotres/yWTG2/

2. 您不能使用正常的表单提交。相反，您应该使用 ajax 来汇总表单数据。

   在我的另一个答案中，您可以找到 ajax 表单提交以及如何在页面转换期间发送参数的解决方案：jQuery Mobile: Sending data from one page to the another

   如果您想与远程主机通信：

   var ajax = {
       sendRequest:function(save_data){
           $.ajax({url: 'http://localhost/JSONP_Tutorial/json.php',
               data: save_data,
               async: true,
               beforeSend: function() {
                   // This callback function will trigger before data is sent
                   $.mobile.showPageLoadingMsg(true); // This will show ajax spinner
               },
               complete: function() {
                   // This callback function will trigger on data sent/received complete
                   $.mobile.hidePageLoadingMsg(); // This will hide ajax spinner
               },
               success: function (result) {
                   if(result == "true") {
                       $.mobile.changePage( "#index", { transition: "slide"} ); // In case result is true change page to Index
                   } else {
                       alert('Login unsuccessful, please try again!'); // In case result is false throw an error
                   }
                   // This callback function will trigger on successful action
               },
               error: function (request,error) {
                   // This callback function will trigger on unsuccessful action                
                   alert('Network error has occurred please try again!');
               }
           });
       }
   }
   

3. jsFiddle 有一个愚蠢的策略，他们希望阻止使用完整的 HTML 文件。他们正试图在 HTML 内容部分通过愚蠢的错误警告来强制执行此操作。你需要有类似 Firefox 或 Chrome 的 firebug 插件来消除这种愚蠢。或者你甚至可以使用 Grease Monkey 插件来实现。

4. 如果您想使用本示例中的完整 HTML 模板：http://jsfiddle.net/Gajotres/yWTG2/，您需要使用处于 onDomready 状态的 JavaScript 代码。

5. 某些功能无法使用。比如 window.orientationchange 事件。