Question

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

现在所有这些列表都具有相同的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

THE

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

我的Vue.js代码中有很多重复，我该如何修复它？

1 个答案: