我是RxJ的新手。我有一个从ajax获取数据的响应流。另外，我还有另一个按钮可以排序。我可以毫无问题地进行排序。我的问题是我是否可以正确排序和更新？实际上，我正在做的只是清空子节点并追加新结果。
(function($, _) {
var fetchRepoButton = $('.fetch');
var sortByButton = $('.sort-by');
var fetchRepoClickStream = Rx.Observable.fromEvent(fetchRepoButton, 'click');
var sortByClickStream = Rx.Observable.fromEvent(sortByButton, 'click');
var requestStream = fetchRepoClickStream.map(function() {
return '/api';
});
var responseStream = requestStream.flatMap(function (requestUrl) {
return Rx.Observable.fromPromise($.getJSON(requestUrl));
});
responseStream.subscribe(function (es) {
var repositories = $('.container');
repositories.empty();
var names = es.map(function (e) {
return {name: e.name};
}).forEach(function (e) {
var rep = $('<div>');
rep.html(e.name);
repositories.append(rep);
});
});
var sortByStream = sortByClickStream.combineLatest(responseStream, function (click, es) {
return _.sortBy(es, function(e) {
return e.count;
}).reverse().map(function (e) {
return {name: e.name, count: e.count};
});
});
sortByStream.subscribe(function(es) {
var repositories = $('.container');
repositories.empty();
var names = es.map(function (e) {
return {name: e.name};
}).forEach(function (e) {
var rep = $('<div>');
rep.html(e.name);
repositories.append(e);
});
});
})($, _);
我正在玩代码。因此，可能会有重复。
您的代码没有什么不妥，RxJS的用法看起来也不错，尽管您的DOM用法没有得到尽可能优化的优化。创建/删除所有这些DOM元素是一个相对昂贵的过程，因此理想情况下，您希望在可能的情况下恢复元素。您的排序代码似乎已经成熟，可以在这方面进行优化。
对列表进行排序时，您会知道每个元素都已经存在DOM元素。与其删除所有detach()元素，然后以正确的顺序重新创建它们，我将使用从页面中删除该元素并返回它，然后再使用container.append(element)以正确的顺序添加它们。
如果要实现它，我会做类似rep.data('listCount', e.count)最初创建该元素时的操作，因此我们可以直接对jQuery元素进行排序，然后对列表进行排序：
sortByClickStream.subscribe(function() {
var container = $('.container');
// `.children()` returns raw DOM elements, so wrap each in jQuery
_.map(container.children(), function(el) { return $(el); })
.sortBy(function(item) { return item.data('listCount'); })
.reverse()
.forEach(function(item) {
item.detach();
container.append(item);
});
});
可以对响应流列表执行类似的操作，但是需要做更多的工作，因为您不能保证最新列表中的每个元素都已经有一个元素。
总体而言，您所拥有的将可以正常工作，并且对于中小型列表应该足够快。如果您的预期列表大小似乎不那么理想，那么我将开始优化DOM代码。诸如Angular之类的框架具有专用于“ DOM差异”的整个库，以找出为更新内容而修改DOM所需的最少更改。如果您要进行大量此类内容更新，那么我会考虑使用内置此功能的库/框架。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句