完成品:我的新番清單
因為先前用 jQuery 寫出來版本不能跟朋友討論最近新番。連結在這:201507新番表
我想實作可以類似可以討論作品，就做出這個玩意。
小記這版特點
- 使用 Github Action 更新清單
- 右鍵可以做動畫排名(中圖想到功能)
- 這邊看到功能有兩大項，一個是本季月番，另一個是總月番顯示內容
這個是我朋友開的 Issue，因為我朋友說不能跨季排名，這個非常不方便。這邊我原本煩惱要怎麼做比較好，原本想說多那個功能需要花七天時間，後來再想有沒有更好的做法，後來想到可以用模組化，大大減少我程式撰寫，花了三天時間完成(下班時間，一天大概2~3小時)。源碼:vue-myanimelist/MyAnimeList.vue at master · malagege/vue-myanimelist
- 可以用網址分享
- 可存檔功能，這也是我朋友開的 issue 。因為他覺得要紀錄網址太麻煩了。我原本也不太能確定有時間時作，因為要用這個特別做這個功能要額外花時間太麻煩了(身為上班族下班時間可是非常寶貴)，我在想有沒有更簡單的作法。後來想到共用方法可以寫元件，想說值得嘗試。源碼vue-myanimelist/SettingManager.vue at master · malagege/vue-myanimelist
上面3和5真的讓我寫這個非常有成就，我覺得如何寫出共用元件可以讓下一個專案使用，減少我們後續製作程式的成本這個非常重要。
最後我其實是後端工程師，久久寫 Vue，不知道下次寫我還記得 Vue 有多少…
可改進:
- url 那一段載入很亂，因為有 bug 之下，寫到有點暈，所以就暴力寫出來了
- SettingManager 讀取有 bug ，因為要點兩下
- 當下同網頁貼別人網址無法載入清單
參考項目/連結:
做了一個自動補新番工具
dmhy_newban_downloader/NewBanCrawler.js at 51662aba9e0caf3c7b76fdc24484db36c59fc76a · a9650615/dmhy_newban_downloader
ACGNTaiwan/Anime-List: 展示新番的清單
YuC’s AnimeList
全网最全的动漫新番放送表情报信息网站推荐 - Go 2 Think
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
(function(){
let res = Array(document.querySelectorAll('.title_cn').length).fill({
"name": "",
"date": "",
"time": "",
"carrier": "",
"season": 1,
"originalName": "",
"img": "",
"official": "",
"description": "",
"staff":"",
})
res = JSON.parse(JSON.stringify(res))
document.querySelectorAll('.title_cn').forEach((el, i) => {
res[i].name = el.textContent.replace(/第(.+)期/, '')
res[i].season = parseInt(el.textContent.match(/第(.+)期/) ? el.textContent.match(/第(.+)期/)[1] : 1)
});
document.querySelectorAll('.title_jp').forEach((el, i) => {
res[i].originalName = el.textContent.replace(/第(.+)期/, '')
});
document.querySelectorAll('.link_a').forEach((el, i) => {
let qsA = el.querySelector('a')
if (qsA) res[i].official = qsA.href
});
document.querySelectorAll(`td[class^="type"]:nth-child(even)`).forEach((el, i) => {
res[i].carrier = { a: "Original", b: "Comic", c: "Novel", d: "Game" }[el.className.replace(`type_`, '')] || "Original"
});
document.querySelectorAll('img[width="180px"]').forEach((el, i) => {
if (el) res[i].img = el.src
});
document.querySelectorAll('.staff').forEach((el, i) => {
if (el) res[i].staff = el.textContent
});
})();
|
1
2
3
4
5
6
7
8
9
|
urls = $('.links-of-blogroll-item a').get().map(el => el.href)
listname = $('.links-of-blogroll-item a').get()
.map(el=> el.innerHTML)
.filter(str => str.indexOf('新番') > 0)
.map(str=>{
const regex = /(\d+年\d+月新番)/gm;
m = regex.exec(str)
return m[0]
})
|