掘金插件

掘金插件 - 赞文章分类功能
Wrap lines
// ==UserScript==
// @name         掘金插件
// @namespace    https://github.com/zhukunpenglinyutong/Juejin-Plugin
// @version      1.0
// @description  掘金插件 - 赞文章分类功能
// @author       朱昆鹏
// @match        *://juejin.im/user/*
// @require https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js
// @grant        none
// ==/UserScript==

let globalData = null; // 全局数据

// 实现一个简单的路由监听（监听跳转是否是主页）
window.addEventListener('load', function (e) {
    var reg = /https:\/\/juejin.im\/user/;
    if (reg.test(e.target.URL)) init(); // 如果进入主页，触发
})


// ============================================================================================
// ===================== 初始化部分：创建 点赞文章分类，等待点击事件触发 ==============================
// ============================================================================================

function init() {
    //（异步是因为有时候掘金网站加载太慢）
    setTimeout(() => {
        createMoreItem(); // 创建 点赞文章分类 div
        eventBus(); // 点击事件监听（并执行拿取数据 和 创建展示DOM的方法）
    }, 500)
}

// 创建 点赞文章分类 div
function createMoreItem() {
    let selectItems = document.querySelectorAll('.nav-item.not-in-scroll-mode .more-panel .more-item')
    let newA = selectItems[1].cloneNode() // 赋值节点
    newA.attributes.removeNamedItem('href') // 删除掉href跳转，因为就当个触发器使用
    newA.id = 'jSort'
    newA.innerText = '文章分类'
    selectItems[1].parentNode.appendChild(newA)
}

// 管理事件的函数
function eventBus() {
    let jSort = document.getElementById('jSort')
    jSort.addEventListener('click', async event => {
        let dialogId = document.getElementById('dialogId')

        if (dialogId) { // 已经点击过分类查看了，只是隐藏到了，这里避免重复拿取，浪费性能
          dialogId.style.display = 'inline';
        } else {
          let dataReq = new DataReq()
          let userId = location.pathname.match(/\w{24}/)[0]
          let res = await dataReq.getData(userId) // 获取数据
          createDOM(res) // 创建展示数据的DOM层
        }

    })
}



// ============================================================================================
// =================== 数据处理部分：逻辑处理部分（请求数据 && 处理数据） =============================
// ============================================================================================

// axios配置
let instance = axios.create({
    baseURL: 'https://user-like-wrapper-ms.juejin.im/v1/user/',
    timeout: 30000,
    headers: { "X-Juejin-Src": "web" }
});

// 数据请求类
class DataReq {

    constructor () {
    }

    /**
     * 请求数据（对外开放）
     * @param {String} userId
     */
    getData(userId) {

        console.log('userID', userId)

        return new Promise (async (resolve, reject) => {
            // 因为现成的掘金接口，一次只能拿到30个数据，如果点赞很多文章的话，我们需要拼接很多次请求才行
            // 思考一：等一个请求返回后，再把page的值增加，直到返回数组为空，不再进行请求，这样是个串行的
            // ✅ 思考二：在发送请求之前，先发送一个 page=0&pageSize=0 这时会返回你有多少点赞的文章数量，根据数量这个就能获取到需要发送的次数，这个是并行的

            let that = this

            // 根据返回的数组，建立对应数量的axios请求
            let totalArr = await this.getTotal(userId)
            let aixosArr = totalArr.map(item => instance.get(item))


            axios.all(aixosArr)
                .then(axios.spread( function () {
                let arr = []
                for (let i = 0; i < arguments.length; i++) {
                    arr.push(arguments[i].data.d.entryList)
                }
                let resData = that.dataHandle(arr.flat())
                resolve(resData) // 经过处理类处理后的数据
            }));
        })

    }


    /**
     * 请求page=0&pageSize=0 结果用于生成多次axios请求（原因是掘金接口一次拿不到全部点赞数据，上限是30）
     * （内部使用）
     * @param { String } 用户ID
     * @return { Array } ['请求地址一', '', ...]
     */
    getTotal(userId) {
        return new Promise((resolve, reject) => {

            instance.get(`${userId}/like/entry?page=0&pageSize=0`)
                .then(res => {

                let len = Math.ceil(res.data.d.total/30),
                    arr = [];

                for (let i = 0; i < len; i++) {
                    arr.push(`${userId}/like/entry?page=${i}&pageSize=30`)
                }

                resolve(arr)
            })
                .catch(e => {
                reject(e)
            })

        })
    }


    /**
     * 数据处理函数（内部使用）(此处代码写的不好qwq)
     */
    dataHandle (data) {
        let countedNames = data
        .map( item => item.tags.map(jtem => jtem.title ) )
        .flat(Infinity)
        .reduce((allNames, name) => {
            if (name in allNames) {
                allNames[name]++;
            } else {
                allNames[name] = 1;
            }
            return allNames;
        }, {})
        // ['Vue.js', 'Vue.js', '...', ...] ===> [ { name: 'Vue.js', num: 6}, {'Jquery': 4}, {} ]

        let resArr = []
        for (let prop in countedNames) {
            resArr.push({
                name: prop,
                num: countedNames[prop],
                data: []
            })
        }

        resArr.sort((a, b) =>  b.num - a.num); // 按照数量排序

        // 第二部分：
        // 获取 所有值
        let aaa = data.map( item => {
            return {
                title: item.title,
                originalUrl: item.originalUrl,
                username: item.user.username,
                objectId: `https://juejin.im/user/${item.user.objectId}`,
                tags: item.tags.map( j => j.title )
            }
        })


        // 整成想要的格式
        resArr.forEach( item => {
            aaa.forEach( jtem => {
                jtem.tags.some( j => j === item.name) ? item.data.push(jtem) : ''
            })
        })

        return resArr
    }

}



// ============================================================================================
// ========================= DOM生成层，根据数据生成对应的弹出层和交互  =============================
// ============================================================================================

const createDOM = (res) => {
    globalData = res

    // 响应式监听属性，响应点击标签时候的视图切换
    let observeData = {
        select: '' // 当前选中的分类名称
    }

    renderBasic() // 渲染弹出框基本结构
    defineReactive(observeData, 'select', observeData.select) // 监听响应式
    observeData.select = res[0].name // 初始化，渲染第一个分类中的数据
    createDOMEventBus(observeData) // 启动事件监听
}

// 渲染弹出框基本结构
function renderBasic() {

    let dialogMianItem = '' // 根据数据，生成底部导航栏结构
    globalData.forEach( item => {
      dialogMianItem += `<div class="dialog-mian-item" style="position: relative;margin-right: 25px;">
                <button class="dialogBtn" style="padding: 9px 15px;font-size: 12px;border-radius: 3px;min-width: 100px;">${item.name}</button>
                <sup style="position: absolute;top: 0;right: 10px;transform: translateY(-50%) translateX(100%);background-color: #f56c6c;border-radius: 10px;color: #fff;display: inline-block;font-size: 12px;height: 18px;line-height: 18px;padding: 0 6px;text-align: center;white-space: nowrap;">
                  ${item.num}
                </sup>
              </div>`
    })


    // 创建弹出层
    let div = document.createElement('div')
    div.id = 'dialogId'
    // 模板中展示的内容
    div.innerHTML = `
      <div class="dialog"
        style="margin: 15vh auto 50px;width: 60vw;height: 600px;background: #fff;opacity: 1;border-radius: 2px;box-shadow: 0 1px 3px rgba(0,0,0,.3);box-sizing: border-box;">
        <div class="dialog-header" style="padding: 20px 20px 10px;line-height: 24px;font-size: 18px;color: #303133;margin-bottom: 15px;display: flex;justify-content: space-between;">
          <div>文章分类 <input style="margin-left: 10px;" disabled value="搜索功能8.1日开放" /> </div>
          <div id="dialog-close" style="cursor: pointer;">X</div>
        </div>
        <div class="dialog-mian">
          <div class="dialog-mian" style="padding: 0 22px;">
            <div class="dialog-mian-lang" style="display: flex;justify-content: space-between;padding-top: 12px;overflow-y: auto;">${dialogMianItem}</div>
            <div class="dialog-content" style="margin-top: 10px;height: 430px;overflow-y: auto;">

            </div>
          </div>
        </div>
      </div>
    `
    let body = document.querySelector('body')
    div.style = `position: fixed;height: 100vh;width: 100vw;top: 0;left: 0;z-index: 1000;`
    body.appendChild(div)
}

// 生成详细文章列表
function createDialogContent(selectName) {

  let randerData = globalData.filter( item => item.name === selectName)[0].data
  let dialogContent = document.querySelector('.dialog-content')

  let dialogContentText = ''; // 具体一行行内容
  // 当前点击展示的内容
  randerData.forEach(item => {
      let aStr = ''
      item.tags.forEach( tag => {
        aStr += `<a href="javascript:;">${tag} · </a>`
      })
      dialogContentText += `
                <div class="dialog-content_item" style="margin: 18px 0px;border-bottom: 1px solid rgba(178,186,194,.15);">
                   <div class="meta-row">
                      <a href="${item.objectId}">${item.username}</a> · ${aStr}
                   </div>
                   <div class="title" style="margin-top: 6px;"><a href="${item.originalUrl}" style="font-size: 16px;color: #2E3135;">${item.title}</a></div>
                </div>`
  })

  dialogContent.innerHTML = dialogContentText
}

// 事件总线
function createDOMEventBus (observeData) {
    // 点击切换事件（采用事件冒泡，进行捕获）
    let btns = document.querySelector('.dialog-mian-lang')
    btns.addEventListener('click', function (e) {
      console.log(e)
      if (e.target.nodeName === 'BUTTON') observeData.select = e.target.textContent;
    })

    // 点击关闭按钮
    let dialogClose = document.getElementById('dialog-close')
    let dialogId = document.getElementById('dialogId')
    dialogClose.addEventListener('click', function () {
        console.log('触发')
       dialogId.style.display = 'none'
    })
}


// ============================================================================================
// ========================== 实现简单数据监听，用来简化DOM操作（朱昆鹏）  ===========================
// ============================================================================================

// 数据劫持
function defineReactive (obj, key, value) {
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,

        get () {
           return value
        },

        set (newValue) {
           value = newValue
           createDialogContent(value) // 更新视图 (生成详细文章列表)
        }
    })
}
欢迎访问Greasy Fork镜像
