1

我正在做一个项目，我需要动态构建来自不同来源（相同域）的 Web 内容。所有主要库和 css 都集中管理，但根据配置，我必须将页面（html 和嵌入式 JavaScript）添加为“选项卡内容”。

我的第一种方法是使用 iframe，除了我有一些重复代码（尤其是标题）的烦恼之外，它运行良好。我在框架尺寸方面也遇到了一些问题，但最终我可以处理。

当然，现在我读到 iframe 是邪恶的，但我发现的几乎所有替代方案都是使用 php 或其他服务器端的。不幸的是，我的网络服务器没有提供类似的东西，所以我遇到了 jQuery 的加载功能。我的第一次尝试是令人满意的，但现在让我感到不安的是管理（全局）变量（和函数）。因为 jQuery.load() 只是将代码插入到 DOM 中，所以在这里命名时我总是需要非常小心。例如，我通常有一个名为 init() 的函数，它包含在 onload-Event 的主体中。但是每个其他页面也需要其中一个。

该项目很可能会增长（也许在某些时候甚至外部开发人员也会参与其中）。我现在处于必须决定走哪条路的地步，我很伤心。

所以我的问题：即使 iframe 是邪恶的，我的经验是它比通过 jQuery 插入代码（在这种特殊情况下）更容易和安全。哦，那不是问题……问题是：有没有办法将变量和函数封装到我用 jQuery 加载的内容中？或者在这种情况下可能有更好的方法来处理变量/函数。

我很感激任何建议。

4

2 回答 2

2

没有大型应用程序的后端，许多开发人员听起来就像地狱。有时东西最好安装在服务器端，例如 php 的include.

无论哪种方式，我都会使用 MVC 解决方案。

我有骨干和下划线的经验，所以我将举一个例子，但还有许多其他 MVC 解决方案。

如果您需要做的只是加载一些数据，您可以使用非常轻量级的下划线模板

您可以执行以下操作：

在模型中：

 sum: function() {
      Sum certain properties of your objects. 
    }

在 index.html 中

 <script type="text/template" id="sum-template">
      sum: <%    print(sum) %>
  </script

在视图中

 sumTemplate: _.template($('#sum-template').html()),
 this.$el.find('#sum').html(this.sumTemplate({sum:Expenses.sum()}));

如您所见，您可以从不同的地方获取数据并将它们加载到某些 HTML 元素中。从长远来看，它很容易管理。

为了持久化数据，您可以免费和付费托管数据库，通过简单的谷歌搜索

redis 托管，mongodb 托管等......所以你不依赖于你当前的服务器。

于 2013-08-30T12:32:32.367 回答
2

我不想建议这样做，但是因为您想知道如何做到这一点，这里有一些代码来说明如何做到这一点（仅经过初步测试，未经进一步测试不应使用）。

虽然我不确定您是否可以（并且我认为您不应该）以这种方式构建您的项目，但我希望它有助于解决您的问题。

您页面的主要代码：

var app = {};
(function() {
    var nextId = 1;
    var elementById = {};

     app.registerContent = function( id, initFunction ) {
        try {
            initFunction(elementById[id]);
        } catch( e ) {
            //if an error happend in the init script catch it so that the script will not break
            console.error(e);
        }
        //remove the jquery element from the list
        delete elementById[id];
     }


     //custom loader to handle init script
     jQuery.fn.customLoader = function(url) {
         var elm = $(this);
         var id = nextId++;
         //store the element where the data is loaded to in a list
         elementById[id] = elm;
         $.get(url,function(data) {
             //replace the id in the script so that the element the data is loaded into 
             // can be passed to the init script later.
             data = data.replace("%%unique-id%%",id);
             elm.html(data); //append the data to the element
         });
     }

     //a sample how you would load the content
     $(function() {
         $(".dest").customLoader("content.html");
     });

})();

您请求的数据中的代码：

<div>some content</div>

<!-- the script that correspons to that part -->
<script>
//create a scope using a function that is executed directly
(function() {
    //using var to make the variables only visible to this place
    var uniqueId = %%unique-id%%; //this will be replaced by the loader to identify the element where the data is loaded to
    var someVar = 1;

    app.registerContent(uniqueId, initFunctionForTheContent)


    function initFunctionForTheContent(element) {
        element.css("background-color", "red")
    }

})();
</script>
于 2013-08-30T13:19:36.440 回答