我的Vue.js代码中有很多重复，我该怎么解决呢

I have a lot of repetition in my Vue.js code, how could I fix that?

本文关键字：解决 代码 js Vue 我的      更新时间：2023-09-26

所以我最近才开始了解Vue或React的概念，JS库是应用程序的视图层。现在我开始用Vue构建一个小小的测试应用程序，它有视频列表，它们只是视频列表。然而，每个视频列表都有不同于我自己的JSON API的来源，因此一个列表可能请求"API/v/1/related"(ID为1的视频的相关视频(，而一个列表则可能是最受欢迎的视频的通用"API/v/流行"。

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

你可以看到我用repeat实现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资源(，将它们放在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与它需要到达的单个端点不同。

我该怎么办才能解决这个问题？谢谢

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中的一条一般规则(可能还有所有的编码(是，如果你需要做一次以上的事情，那么就写一个函数来做

相关文章：