android - JSfiddle : how to create multi-JS/CSS/HTML files project?

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 库、数据)需要您另一个网站托管。

官方文档suggesting Github hosting对于 1HTML/1JS/1CSS/someDataFiles 并不令人满意。我希望 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 事件。