我的 Vue.js 代码中有很多重复，我该如何解决？答案

【问题标题】：I have a lot of repetition in my Vue.js code, how could I fix that?我的 Vue.js 代码中有很多重复，我该如何解决？
【发布时间】：2015-10-26 03:45:43
【问题描述】：

所以我最近才开始接触 Vue 或 React 的概念，这些 JS 库是应用程序的视图层。现在我开始用 Vue 构建一个很小的测试应用程序，它有视频列表，它们只是视频列表。但是，每个视频列表的来源都与我自己的 JSON API 不同，因此一个列表可能会请求“api/v/1/related”（ID 为 1 的视频的相关视频），一个可能是一般的“api/v/popular” " 获取最受欢迎的视频。

现在所有这些列表都有相同的 HTML 标记，看起来像这样：

<ul class="video-list" id="uniqueIdentifier-video-list">
    <li v-repeat="videos" class="row">
        <a href="#" class="image-wrapper">
            <div style="background: url('{{ thumbnail }}') center; background-size: cover;"></div>
        </a>
        <div class="info-wrapper">
            <h4>
                <a href="#">{{ title }}</a>
                <small>{{ length }}</small>
            </h4>
            <p class="video-description">{{ desc }}</p>
        </div>
    </li>
</ul>

你可以看到我用重复实现 Vue，视频是从后端动态传来的。你可以看到我在抓取缩略图、标题、长度和描述。我创建了一堆由 API 返回的虚拟视频，示例视频响应在 JSON 中如下所示：

{
  "title": "Cool example video",
  "desc": "This video is about very interesting things and such",
  "length": "0:25",
  "thumbnail": "https://unsplash.it/1280/720?image=50"
}

每个页面上的 HTML 标记都是相同的，所以这是一个重复点/代码重复点，但更重要的是 Vue 实例。

因此，对于这些列表中的每一个，我的行为基本相同，该列表是一个绑定到唯一 ID 的 Vue 实例，它获取视频（使用 vue-resource），将它们放在视频属性中名单。它看起来像这样：

var uniqueVideoList = new Vue({
    el: '#uniqueIdentifier-video-list',

    data: {
        videos: []
    },

    ready: function() {
        this.fetchVideos();
    },

    methods: {
        fetchVideos: function() {
            this.$http.get('/api/v/popular', function(videos) {
                this.videos = videos;
            });
        }
    }
})

我已经为网站上的每个视频列表复制了几乎完全相同的代码，即 Vue 实例。所以我为每个实例复制了 HTML 标记和 JavaScript，HTML 完全相同，JS 与它需要命中的单个端点分开。

我能做些什么来解决这个问题？谢谢。

【问题讨论】：

面向对象编程可以解决这个问题:)
请详细说明。
创建一个执行最后一点代码的方法，但使用参数/默认值替换所有唯一名词（css 选择器、vid 基本 url 等）以将其减少为每个列表一个函数调用，而不是一堆代码。或者考虑使用特殊的类而不是特定的 id，将基本 url 移动到数据属性，然后扫描 onload 以查找正确的类，循环遍历结果，并通过从元素中读取配置对每个列表执行 vue 操作本身;声明性的。
我在想 Vue 组件可能会起作用，但我不太明白。

标签： javascript jquery html vue.js

【解决方案1】：

var VueCreator = function (id, endPoint) {
    var myVue = new Vue({
        el: id,

        data: {
            videos: []
        },

        ready: function() {
            this.fetchVideos();
        },

        methods: {
            fetchVideos: function() {
                this.$http.get(endPoint, function(videos) {
                    this.videos = videos;
                });
            }
        }
    });

    return myVue;
}

//pseudo code, assumes videoList is an object that has each unique list with an id and an endpoint
var lists = [];
forEach(videoList, function(obj) {
    var tempList = new VueCreate(obj.id, obj.endPoint);
    lists.push(tempList);
})

js（也许是所有编码）的一般规则是，如果您需要多次执行某项操作，请编写一个函数来执行。

【讨论】：