为该插件创建和引用markup....cloning等高效系统

Question

我正在从youtube上提取多个提要，其中有一个回调功能，该功能从每个提要中生成标记。他们将标记添加到存储在var数据中的documentFragment中。当所有提要都提供了它们应该提供的内容时，就会运行最后的回调。每个提要都可以处理自己的缩略图和页面菜单，因此在不等待所有提要的情况下启动它是有意义的。有些标记要求完成所有的标记，所以我在最后的回调中这样做。更复杂的是，标记需要按照用户指定的顺序追加，如果请求，可能需要克隆一些标记集。这使得用户可以在他们认为合适的情况下轻松构建插件。这是一个选择。

build:['listsMenu', 'listTitle', 'listDesc', 'player', 'pageMenu', 'thumbnails']

或者像这样的另一个possibility...something：

build:['player', 'listsMenu', 'pageMenu', 'thumbnails', 'pageMenu']

到目前为止，这是我能想到的最好的解决办法。如有任何建议，敬请谅解！

//in the function that makes the ajax calls -
    data = {};

namespace.thumbs.prototype.feedCallback = function(context, options, data, optList, listNum, feed) {
    if (options.build.indexOf('pageMenu') !== -1 || options.build.indexOf('thumbnails') !== -1) {
        var feedVideosInPages = this.return_feedVideosInPages(options.thumbCount, options.thumbsPerPage, feed.videos);
        var pagesMenu = this.return_PagesMenu(options, listNum, feedVideosInPages);
        var thumbnails = this.return_thumbsMarkup(options, optList, listNum, feedVideosInPages);
        data.pagesMenus = data.pagesMenus || document.createDocumentFragment();
        data.thumbnails = data.thumbnails || document.createDocumentFragment();
        if (pagesMenu) { data.pagesMenus.appendChild(pagesMenu); }
        data.thumbnails.appendChild(thumbnails);
    }

    data.each = data.each || [];
    data.each.push({'feed':feed, 'optList':optList, 'listNum':listNum});

    if (data.each.length === options.lists.length) { this.allFeedsReady(context, options, data); }
};
namespace.thumbs.prototype.allFeedsReady = function(context, options, data) {
    this.sort_dataEach(data);

    elems = document.createDocumentFragment();
    addedElemNames = [];
    clonedElems = {};
    toAdd = options.build.slice();
    var buildLength = options.build.length;
    for (var i=0; i<buildLength; ++i) {
        var name = options.build[i];
        if (addedElemNames.indexOf(name) === -1) { //this is the first time the element has been added.
            switch (name) {
                case 'pageMenu': elem = data.pagesMenus; break;
                case 'thumbnails': elem = data.thumbnails; break;
                case 'player': elem = this.return_playerDiv(context); break;
                case 'listMenu': elem = this.return_listsMenuMarkup(data.each); break;
                //case 'listTitle': elem = allData.markup.listsTitles[0]; break;
                case 'listDesc': elem = this.return_listsDescsMarkup(data.each); break;
                case 'videoTitle': elem = this.return_videoTitleMarkup(data.each); break;
                    default: elem = false;
            }
            addedElemNames.push(name);
        }
        else {
            elem = clonedElems[name];
        }
        toAdd.splice(toAdd.indexOf(name), 1); //remove this item from array of things to be added
        if (elem) { 
            if (toAdd.indexOf(name) !== -1) { clonedElems[name] = elem.cloneNode(true); }//the build will contain another copy, so clone it
            elems.appendChild(elem); 
        }
    }
    context.appendChild(elems);
}

Answer 1

从一次又一次：

• data应该用var声明，许多其他变量也应该声明。请将您的代码粘贴到JSHint.com站点并查看
• 它被认为更好的形式有一个逗号分隔的var语句: var feedVideosInPages = options.thumbsPerPage，feed.videos)，pagesMenu = this.return_PagesMenu(options，listNum，feedVideosInPages)，缩略图= this.return_thumbsMarkup(options，optList，listNum，feedVideosInPages)；
• return_feedVideosInPages是个糟糕的名字，我想你选择它是因为feedVideosInPages已经被录取了；)我想要更短的东西: var feedVideos = this.getFeedVideosInPages(options.thumbCount，options.thumbsPerPage，feed.videos)，它仍然是水平挑战的，因为您只调用该函数一次，而且由于thumbCount和thumbsPerPage位于相同的方便的options对象中，所以可以进一步改进: var feedVideos = this.getFeedVideos(options，feed.videos)，最后，如果考虑一下，既然从提要中获得了视频，请getFeedVidoes决定/担心feed的哪个属性包含视频: var feedVideos =this.getFeedVideos(选项、提要)，
• Bad (TMI)：if (toAdd.indexOf(name) !== -1) { clonedElems名字 =elem.cloneNode(真)；}//构建将包含另一个副本，因此更好地克隆它(顶部的注释)：//构建将包含另一个副本，所以如果(toAdd.indexOf(名称) !== -1) { clonedElems名字 =elem.cloneNode(真)；}更好的是(永远不要删除换行符，但您可以删除can！)//构建将包含另一个副本，因此如果(toAdd.indexOf(名称) !== -1) clonedElems名字 =elem.cloneNode(真)；~运算符( Bitwise )对于与-1相比非常适合: if (！~toAdd.indexOf(名称)) clonedElems名字 =elem.cloneNode(真)；