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

Question

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

---

我想创建一个基于HTML/CSS/JS的基本移动应用程序,大约有十几个HTML/CSS/JS文件.我想在我最喜欢的在线JavaScript IDE JSfiddle上开发它.但JSfiddle.net虽然是一个测试项目的简洁方法,但仍限于:

• 1个html文件(个人)
• 1个CSS文件(个人)
• 1个JS文件(个人)
• 几个外部资源(CSS,JS库,数据),它们要求您进行另一个虚拟主机.

建议Github托管 1HTML/1JS/1CSS/someDataFiles 的官方文档并不令人满意.我希望所有关于JSFiddle,以及我项目中的更多文件.

Answer 1

您可以在 jsFiddle 中完成此操作，但有一些限制，并且您可能不会对此感到满意。

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

   例如，这是我帮助该小组时的 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事件一样。