从网页获取数据的更好方法，而不是使用DOM和HTML元素

better way to get data from a web page instead of working on DOM and HTML Elements

本文关键字：DOM 元素 HTML 数据 获取 网页 更好 方法      更新时间：2024-06-25

我使用的是Backbone，在使用Jquery之前，在使用HTML元素属性作为变量设置数据之前，以及在需要该HTML元素中可访问的信息时。

例如：我有一个图像库，正如你所知，每个图像都应该有一个标题、Alt、src，这些最初来自HTML，但我添加了一个新属性，称为mk-author，mk是一个前缀，当用户单击该图像时，图像最大化，author的名称将显示在图像旁边。有时我会得到ID并在服务器端做一些事情，当然我会从服务器端验证它。

问题：

1-这是一个安全的好方法吗？

2-什么是更好的方法？

首先，添加自己的属性会给您带来一些不太像HTML的东西；它可能工作得很好，但你最好坚持标准（为了将来的验证、可移植性…）。此外，当标准提供了所有人都能理解的data-*属性时，就不需要它们了，jQuery甚至通过data函数对它们提供了特殊支持。

对于您的图片库示例，一种更惯用的主干方法是：

  1. 图库中每个图像的模型：

    var Image = Backbone.Model.extend({
    //...
});

    该模型的实例将包含图像的URL、大小、名称、作者。。。

  2. 保存图像的集合：

    var Images = Backbone.Collection.extend({
    model: Image,
    //...
});

  3. 每个图像的视图，这将为一个Image模型提供交互和显示：

    var ImageView = Backbone.View.extend({
    events: {
        'click': 'show_details',
    },
    render: function() {
        // Build the HTML for `this.model` (an `Image`)
        // and add it to `this.$el`...
        return this;
    },
    show_details: function() {
        // The clicked image model will be `this.model`
        // so do whatever you need to.
    }
});

  4. 一个管理整个集合的视图，这主要创建ImageView s:

    var ImagesView = Backbone.View.extend({
    render: function() {
        this.collection.each(function(image) {
            var v = new ImageView({ model: image });
            this.$el.append(v.render().el);
        }, this);
        return this;
    }
});

然后你会创建你的收藏，填充它，并说一些类似的话：

var v = new ImagesView({ collection: images_collection });
$(container).append(v.render().el);

演示：https://jsfiddle.net/ambiguous/6Lcwfh98/

现在花点时间学习主干教程和主干文档是个好主意。

相关文章：