В javascript есть ли более простой способ сопоставления входящих тегов rss для вывода тегов rss? - PullRequest
Новая
       7

В javascript есть ли более простой способ сопоставления входящих тегов rss для вывода тегов rss?

0 голосов
/ 06 декабря 2018

Я обходился с этой проблемой Javascript в течение четырех дней и, наконец, сумел заставить ее работать.Но я уверен, что должно быть гораздо лучшее решение, включающее в себя меньшее количество «переводов», которое будет меньше напрягать браузер.

Мне кажется, я должен быть в состоянии прочитать XML-ленту, сделатьнебольшое переопределение тегов во входящем фиде на теги в исходящем.Могу я?Должен ли я придерживаться решения, которое у меня работает:

В двух словах, через http-запрос я получаю RSS-канал с некоторыми тегами мультимедиа.Он «приходит» как XML-структура dom, которая копирует канал.Затем мне нужно восстановить элементы фида (с небольшим переназначением) из этого dom, чтобы они могли быть возвращены в вызывающую подпрограмму (через глобальную переменную).

Я рассмотрел все возможные варианты:jQuery.get, json и другие, но все примеры, которые я мог найти в Интернете, похоже, игнорируют элементы мультимедиа во входящем фиде - по крайней мере, я не смог найти их при попытке прочитать фид.

Это записьв RSS-канале, используемом в качестве источника: 

<item>
    <guid isPermaLink="false">https://www.zazzle.com/create_your_own_photostamp_by_stamps_com-172639479866885637?rf=238582202591969585&amp;tc=_041218</guid>
    <pubDate>Mon, 19 Nov 2018 23:49:28 GMT</pubDate>
    <title>
        <![CDATA[Create Your Own PhotoStamp by Stamps.com]]>
    </title>
    <link>https://www.zazzle.com/create_your_own_photostamp_by_stamps_com-172639479866885637?rf=238582202591969585&amp;tc=_041218&amp;pm=</link>
    <author>
        <name>zazzle_templates</name>
    </author>
    <description>
        <![CDATA[]]>
    </description>
    <price>$myItem->price</price>
    <media:title>
        <![CDATA[Create Your Own PhotoStamp by Stamps.com]]>
    </media:title>
    <media:description>
        <![CDATA[Upload your own photo or design to create your set of custom photo postage stamps by Stamps.com!]]>
    </media:description>
    <media:price>$22.95</media:price>
    <media:thumbnail url="https://rlv.zcache.com/create_your_own_photostamp_by_stamps_com-r0453bb627c114b9da57442d3dd284e6a_byxt0_8byvr_152.jpg" />
    <media:content url="https://rlv.zcache.com/create_your_own_photostamp_by_stamps_com-r0453bb627c114b9da57442d3dd284e6a_byxt0_8byvr_500.jpg" />
    <media:keywords>
        <![CDATA[create your own, upload your own, template, postage stamp, mailing stamp, wedding, save the date, anniversary, birthday, occasion]]>
    </media:keywords>
    <media:rating scheme="urn:mpaa">g</media:rating>
</item>

Это код, который я использую (нет, я не кодер. Я в основном пишу код, распознавая шаблоны в примерах и понимая эквивалентность одногодело с другим) 

(function ($) {
    'use strict';
    $.fn.rssfeed = function (url, options, fn) {
        return this.each(function (i, e) {
            if (!$(e).hasClass('rssFeed')) { $(e).addClass('rssFeed'); }
            if (url === null) { return false; }
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        process(this);
        if ($.isFunction(fn)) { fn.call(this, $(e)); }    }
            };
            xmlhttp.open("GET", url , true);
            xmlhttp.send();
        });
    };
    var process = function (xml) {
        var i, xmlDoc, table;
        xmlDoc = xml.responseXML;
        var myItemAsAnObject = [];
        feedLength = xmlDoc.getElementsByTagName("item").length;
        console.log("feed length: " + feedLength);
        if (feedLength == 0) { return false; }
        var x = xmlDoc.getElementsByTagName("item");
        for (var i = 0; i < x.length; i++) {
            myItemAsAnObject[i] = {
    pubDate: x[i].getElementsByTagName("pubDate")[0].firstChild.nodeValue,
    link: x[i].getElementsByTagName("link")[0].firstChild.nodeValue,
    keywords: x[i].getElementsByTagName("media:keywords")[0].childNodes[0].data,
    author: {name: x[i].getElementsByTagName("author")[0].childNodes[0].childNodes[0].nodeValue},
    content: {url: x[i].getElementsByTagName("media:content")[0].attributes[0].nodeValue},
    description: [
        x[i].getElementsByTagName("description")[0].childNodes[0].data,
        x[i].getElementsByTagName("media:description")[0].childNodes[0].data
    ],
    guid: {isPermaLink: "false", content: x[i].getElementsByTagName("guid")[0].childNodes[0].nodeValue},
    price: [
        "$myItem->price",
        x[i].getElementsByTagName("media:price")[0].firstChild.nodeValue
    ],
    thumbnail: {url: x[i].getElementsByTagName("media:thumbnail")[0].attributes[0].nodeValue},
    rating: {
        scheme: x[i].getElementsByTagName("media:rating")[0].attributes[0].nodeValue,
        content: x[i].getElementsByTagName("media:rating")[0].childNodes[0].nodeValue
    },
    title: [
        x[i].getElementsByTagName("title")[0].firstChild.nodeValue,
        x[i].getElementsByTagName("media:title")[0].childNodes[0].data
    ]
            };
        }
        feedContent = myItemAsAnObject;
    };
})(jQuery);

1 Ответ

0 голосов
/ 06 декабря 2018

Что ж, анализ на самом деле довольно прост, если вы делаете это только в браузере.Следующее не будет работать напрямую в узле, но вы можете использовать js-dom (но, честно говоря, в этом случае лучше использовать парсеры xml.)

https://codepen.io/anon/pen/yQdjyo?editors=0010

const rss = `
<item>
    <guid isPermaLink="false">https://www.zazzle.com/create_your_own_photostamp_by_stamps_com-172639479866885637?rf=238582202591969585&amp;tc=_041218</guid>
    <pubDate>Mon, 19 Nov 2018 23:49:28 GMT</pubDate>
    <title>
        <![CDATA[Create Your Own PhotoStamp by Stamps.com]]>
    </title>
    <link>https://www.zazzle.com/create_your_own_photostamp_by_stamps_com-172639479866885637?rf=238582202591969585&amp;tc=_041218&amp;pm=</link>
    <author>
        <name>zazzle_templates</name>
    </author>
    <description>
        <![CDATA[]]>
    </description>
    <price>$myItem->price</price>
    <media:title>
        <![CDATA[Create Your Own PhotoStamp by Stamps.com]]>
    </media:title>
    <media:description>
        <![CDATA[Upload your own photo or design to create your set of custom photo postage stamps by Stamps.com!]]>
    </media:description>
    <media:price>$22.95</media:price>
    <media:thumbnail url="https://rlv.zcache.com/create_your_own_photostamp_by_stamps_com-r0453bb627c114b9da57442d3dd284e6a_byxt0_8byvr_152.jpg" />
    <media:content url="https://rlv.zcache.com/create_your_own_photostamp_by_stamps_com-r0453bb627c114b9da57442d3dd284e6a_byxt0_8byvr_500.jpg" />
    <media:keywords>
        <![CDATA[create your own, upload your own, template, postage stamp, mailing stamp, wedding, save the date, anniversary, birthday, occasion]]>
    </media:keywords>
    <media:rating scheme="urn:mpaa">g</media:rating>
</item>
`;

const doc = document.createDocumentFragment();
const root = document.createElement('div');
root.innerHTML = rss;

doc.appendChild(root);

// const getValue = (selector) => root.querySelectorAll(selector).innerHTML;

// const obj = {
//   pubDate: getValue('pubDate'),
//   link: getValue('link'),
//   keywords: getValue('media:keywords'),
//   author: {name: ''},
//   content: {url: ''},
//   description: [

//   ],
//   guid: '',
//   thumbnail: '',
//   rating: {
//     scheme: '',
//     content: ''
//   },
//   title: [

//   ]
// };

// console.log(obj);

Этопреобразует строку XML в фрагмент документа, и вы можете выполнять запросы к нему.querySelector и querySelectorAll работают нормально, пока узлы xml не содержат :.Например, <media:price> не разбирается с помощью querySelector.

Это должно, по крайней мере, упростить часть вашего кода.

...