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

Question

因此，我直到最近才开始使用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），将其置于videos属性中并为列表提供动力。 看起来像这样：

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与需要命中的单个端点分开。

我该怎么做才能解决此问题？ 谢谢。

Answer 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（可能包括全部编码）的一般规则是，如果您需要做多次以上操作，请编写一个函数来完成。