javascript - 如何从我的 HTML CSS 和 JS 文件创建可重用的 javascript 网络应用程序

Question

我有一个包含 CSS 和 JS 文件的工作 HTML 文件，我想用它创建一个网络应用程序。

我没有任何经验或想法如何根据我所拥有的创建网络应用程序。

我的代码不需要与服务器进行任何交互。

我从 this site 找到了这份指南

    (function() {

// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else {
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() { 
    jQuery(document).ready(function($) { 
        /******* Load CSS *******/
        var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "style.css" 
        });
        css_link.appendTo('head');          

        /******* Load HTML *******/
        var jsonp_url = "http://al.smeuh.org/cgi-bin/webwidget_tutorial.py?callback=?";
        $.getJSON(jsonp_url, function(data) {
          $('#example-widget-container').html("This data comes from another server: " + data.html);
        });
    });
}

})(); // We call our anonymous function immediately

1.) 我理解直到加载 CSS，但我不明白加载 HTML 文件的代码是做什么的。

2.) 是否有可能用我所拥有的以及如何......做一个网络应用程序？

3.) 我知道 css html js jq.........了解 ajax 或其他任何创建网络应用程序很重要。

谢谢。

Answer 1

我不确定我是否理解你的问题，但如果我试着描述一下这个脚本的作用，也许它会对你有所帮助？

基本上，这个脚本(IMO 有点笨拙)首先加载 jQuery，然后加载样式表 style.css，最后从 http://al.smeuh.org/检索数据cgi-bin/webwidget_tutorial.py?callback=?。它假定您有一个 id 为 "example-widget-container" 的文档元素，它将在其中注入(inject)从 JSON 调用接收到的 html。

如果您澄清了您的具体问题，那么也许我或其他人可以为您提供更多帮助。