JS 44 - 输入网址就能使用的 RSS 阅读器

大家好!

今天要实作能输入网址的 RSS 阅读器。
我们进入今天的主题吧!


程序码

Felix('form').on('submit', function (e) {
    e.preventDefault();

    Felix.xhr('GET', Felix('#url')[0].value, {
        load: function () {
            if (this.readyState !== 4 || this.status !== 200) return;
            Felix('body').insert(RSS2HTML(this.responseXML).documentElement);
        }
    });
});

function replace(str, oldEl) {
    const newEl = Felix.create(str, oldEl.innerHTML);
    oldEl.parentNode.replaceChild(newEl, oldEl);
    return newEl;
}

function RSS2HTML(rss) {
    const els = [].slice.call(rss.querySelectorAll('*')).reverse();
    els.forEach(function (el) {
        replace(`div.${el.tagName}`, el);
    });
    return rss;
}

实测

<body>
    <form>
        <input type="text" id="url" required>
        <button type="submit">Submit</button>
    </form>
</body>

范例连结制作中。


差不多也到尾声了。
如果对文章有任何疑问,也欢迎在下方提问和建议!
我是 Felix,我们明天再见!


<<:  课堂笔记 - 深度学习 Deep Learning (17)

>>:  企业资料通讯Week5 (4) |DNS (网域名称系统)[一]

# Day 11 Cache and TLB Flushing Under Linux (三)

废话不多说,我们直接看文件~XD 文件 文件原文:Cache and TLB Flushing Un...

OpenStack Neutron 介绍 — Linux Bridge Provider Networks

本系列文章同步发布於笔者网站 上篇介绍了 Neutron 的架构,再接下来几天会介绍 Neutron...

网路的小技巧-3

//兴趣记录一下~希望退休以後可以回味,各位别嫌弃,感谢各位!! /// //三家分公司互连 图(一...

Endpoint

我们用到的 API endpoint 只有一个,就是用来取得港铁机场快綫、东涌綫、屯马綫及将军澳綫最...

【Day9】AddInvitationFragment(上)

好的,接下来我们要新增邀约的Fragment,好让使用者可以上去PO出自己的邀约,以及让不同的使用...