おもしろ雑学集

jQueryを脱退したJavaScript化へ

日付
編集
分類
画像1枚
PV日0 月455 年2723
71.43%

ES6でJavaScriptが楽しい時期になってきました。コードを簡略、省略化に暇を弄んでいます

es6.jpg
1/1
2

これは見ての通り記事の画像をクリックしたら下のエレメントまでページをスクロールします。$(this)がクリックされた画像を差し、next()が3つあるのは、画像の次の要素に1/18 △3のDIV要素、改行BR要素、そして次の画像要素という形になっています。そのOffset(画像が存在する縦の位置の数値を取り、そこにscrollTop:2203pxのような形で100(アニメーションスクロールの速度ミリ秒)スクロールしるというコードです。見やすいように、変更を加えられやすいようにするなら上記のままで良いですがもう変更する余地はないので簡略化することもできます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
    $("#article-content img").click(function() {
        const t = $(this).next().next().next().offset();
        if(t) {
            $("body, html").animate({scrollTop:t}, 100);
        } else {
            return false;
        }
    });
});
</script>

アロー演算子=>はfunction()を省略することができ、上記ではfunction(t)t => に変えています。その後、中括弧{}がありませんが、関数内で一つしか処理しない場合はif文やfor文みたく省くことができます。引数tはJSのthisを表すので、変数初期化を省いて、そこからjQueryを使わずにJSだけで攻めていきます。jQueryのnextはJSだとnextElementSiblingと長ったらしくなってしまうので、次の要素ではなく現在の画像の高さと下の要素の高さ分をスクロールするという形にしています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
    $("article-content img").click(t => {
        $("body,html").animate({scrollTop:a.target.offsetTop + a.target.height + 68}, 100)
    });
});
</script>

↓jQueryを除き、JavaScriptのみに構成することで一語一語長いですがライブラリを読み込まなくて済むのでとても早くなります。当然その場合jQueryを一切使わないよう、再構築しなければなりません。

<script>
const imgs = Array.from(document.getElementById("article-content").getElementsByTagName("img"));
imgs.forEach(i=>
    i.addEventListener("click", t =>
        t.target.offsetTop + t.target.height + 68));
</script>

↓画像タグにidを振って<img id="img01">、aタグで囲んでhrefを次の画像img02にすればJavaScriptさえいらなくなります。これが人類最速のスクロールJavaScriptだ!

そんなわけにはいかないので、jQueryの脱退に着手しました。

const a = document .getElementById`article`
, b = a &&document .getElementById`article-content`.nextSibling.getAttribute`id`
, c = a &&Array.from(a.getElementsByTagName`img`)
, d = a &&Array.from(a.getElementsByClassName`rate`)
, e = a &&Array.from(a.getElementsByClassName`i`)
, f = new XMLHttpRequest()
, g = document .getElementById`comments`
, h = g &&Array.from(g.getElementsByClassName`cvs`)
, i = document .getElementById`gettags`
, j = document .getElementById`commentoptionshow`
, m = document .getElementsByClassName`beatbuttonshow`;
a &&c.forEach (z=>z.addEventListener("click", x=>{
    let y = x.target.offsetTop + x.target.height + 67;
    scrollTo(0, y)
}
));
a &&d.forEach (z=>z.addEventListener("click", x=>{
    const v = x.target.classList.contains`bad`? "bad":"good";
    f.onreadystatechange = function () {
        f.readyState === 4 &&f.status == 200 &&(x.target.style.backgroundColor = "#2196f3",
        x.target.style.color = "white",
        x.target.children[1].textContent = ""+ x.target.children[1].textContent - -1,
        x.target.parentNode.children[0].setAttribute("disabled", true),
        x.target.parentNode.children[1].setAttribute("disabled", true));
    }
    ;
    f.open("POST", "https://erozine.jp/vote", true);
    f.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    f.send(`box=${x.target.parentNode.id}&vote=${x.target.classList.contains("bad") ? "bad":"good"}`);
}
));
a &&e.forEach (z=>z.addEventListener("click", x=>{
    x.target.style.pointerEvents = "none",
    x.target.style.fontSize = "20px";
    f.onreadystatechange = ()=>{
        f.readyState === 4 &&f.status == 200 &&((x.target.style.fontSize = "10px"),
        x.target.classList.add("id"),
        x.target.textContent = (x.target.textContent - -1))
    }
    ;
    f.open("POST", "https://erozine.jp/imgvote", true);
    f.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    f.send(`src=${x.target.parentNode.previousSibling.getAttribute("src")}&box=${b}`);
}
));
g &&h.forEach (z=>z.addEventListener("click", x=>{
    x.target.parentNode.children[0].style.pointerEvents = "none",
    x.target.parentNode.children[1].style.pointerEvents = "none",
    x.target.style.fontSize = "18px";
    f.onreadystatechange = ()=>{
        f.readyState === 4 &&f.status == 200 &&((x.target.style.fontSize = "10px"),
        x.target.classList.add("cid"),
        x.target.textContent = (x.target.textContent - -1))
    }
    ;
    f.open("POST", "https://erozine.jp/commentvote", true);
    f.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    f.send(`cid=${x.target.parentNode.parentNode.getAttribute("id")}&v=${x.target.classList.contains("cg") ? "g":"b"}`);
}
));
i.addEventListener("click", x=>{
    f.onreadystatechange = function () {
        if (f.readyState === 4 &&f.status === 200) {
            const u = document .createElement("ul")
            , o = JSON.parse(f.responseText);
            u.setAttribute("id", "tag-list");
            u.classList.add("flex");
            u.innerHTML = "";
            Object.keys(o).forEach (k=>u.innerHTML += `<li><a href="/tag/${k}"rel="tag">${k}<br><span>${o[k]}</span></a></li>`);
            document .getElementById("topnavi").parentNode.insertBefore(u, document .getElementById("topnavi").nextSibling);
        }
    }
    ;
    f.open("GET", "https://erozine.jp/gettags.json", true);
    f.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    f.send(null);
}
);
j &&j.addEventListener("click", x=>{
    f.onreadystatechange = function () {
        if (f.readyState === 4 &&f.status === 200) {
            x.target.remove();
            document .getElementById`commentoption`.innerHTML = f.responseText;
        }
    }
    ;
    f.open("GET", "https://erozine.jp/commentoption.html", true);
    f.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    f.send(null);
}
);
g &&document .getElementById`commentbutton`.addEventListener("click", x=>{
    const birthday = document .getElementsByName("birthday")[0].value
    , na = document .getElementById`name`.value || ""
    , body = document .getElementById`commentbody`.value;
    let seieki;
    if (seieki = document .getElementById`seieki`) {
        seieki = seieki.value || null;
    }
    if (body) {
        const cf = document .getElementById`commentform`;
        f.onreadystatechange = ()=>{
            if (f.readyState === 4 &&f.status == 200) {
                cf.remove();
                document .getElementById`comments`.nextSibling.innerHTML = `<article class="comment"><div class="commentmeta"><span class="commentcurrent">YOU</span>${name} 1秒前 ID:0x000000</div><div class="commentbody">${body}</div></article><div class="caution">コメントは投稿されました。リアルタイムで確認するには<a href="/beat">コメント掲示板</a>をご覧くださいませ。</div>`;
            }
        }
        ;
        f.open("POST", "https://erozine.jp/pushcomment", true);
        f.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        f.send(`birthday=${birthday}&name=${name}&body=${body}&seieki=${seieki}`);
    }
}
);
m &&Array.from(m).forEach (z=>z.addEventListener("click", x=>{
    const cf = document .getElementById`commentform`;
    x.target.parentNode.appendChild(cf);
    document .getElementById`lion`.value = cf.parentNode.getAttribute`id`;
    cf.parentNode.parentNode.setAttribute("id", "comments");
    document .getElementById`commentbody`.focus();
    x.target.remove();
}
));
  • 🥰抜けました
    12
  • 🥹感動しました
    2
  • 😆笑いました
    1
  • 🤔意味わからんです
    3
  • 😡胸糞悪かったです
    1
  • 😣萎えてしまいました
    2
  • 投票する
この記事をブックマーク
    日付
    編集
    分類
    画像1枚
    PV日0 月455 年2723
    71.43%
    お読み頂きありがとうございました!
    Thanks Good Read again!
    コメントを書き込め
    本文必須 最低2字 最大400字 名前空欄可 最大20字
    コメント一覧
    1
    4e8729b6

    セクシー・・・エロいっ!

    1
    2
    返信
    2
    2597ba

    jQueryは今や時代遅れだよな。凝ったことやるにしてもTypeScript+polyfillの方がいいし

    1
    1
    返信
    3
    オホーツクの賢者

    こんなので抜いてしまうとは…不覚であった

    性別:ホモ
    1
    2
    返信
    4
    a3d55c

    ee

    0
    0
    返信
    5
    da7ede

    ee

    0
    0
    返信
    6
    da7ede

    ee

    0
    0
    返信
    7
    a7b45e

    I'm hoping that someone will help me out since I'm in need. f1nd me on janehartsell_mooo_com change _ to dot

    0
    0
    返信
    関連記事
    無意識に保存していた132枚の最大1677万色を表現できるJPGファイルを公開のサムネイル画像
    無意識に保存していた132枚の最大1677万色を表現できるJPGファイルを公開
    日0 月308 年7.38k
    106
    26

    ee24件

    2020年3月27日(金)脇毛もふらずに保存した伝説の画像集136枚のサムネイル画像
    2020年3月27日(金)脇毛もふらずに保存した伝説の画像集136枚
    日0 年1.09k
    76
    7

    クリョックはあかんだろw25件

    2020年4月9日(木)削除し忘れていた劣等画像集122枚のサムネイル画像
    2020年4月9日(木)削除し忘れていた劣等画像集122枚
    日0 月427 年1.67k
    84
    10

    ee24件

    三年目の次の日の朝のサムネイル画像
    三年目の次の日の朝
    日0 月490 年5.56k
    28
    16

    ee2件

    千年に一度だけ保存しておいた画像を掲載する記事のサムネイル画像
    千年に一度だけ保存しておいた画像を掲載する記事
    日0 月525 年4.06k
    18
    13

    ee3件

    【ギャルの無修正オナラ動画】とその日保存した普通の画像を表示する記事のサムネイル画像
    【ギャルの無修正オナラ動画】とその日保存した普通の画像を表示する記事
    日0 月2.57k 年3.26k
    21
    18

    ee3件

    2015年度日本のAV女優ランキングトップ10【Japanese PornStar Top20】のサムネイル画像
    2015年度日本のAV女優ランキングトップ10【Japanese PornStar Top20】
    日0 月1.73k 年9.37k
    15
    7

    ee5件

    【エロ動画像】AV女優紗倉まなの描いた絵と、裸体とSE○X動画が芸術的な件のサムネイル画像
    【エロ動画像】AV女優紗倉まなの描いた絵と、裸体とSE○X動画が芸術的な件
    日0 月1.01k 年6.57k
    13
    9

    ee3件

    UmobileのLTE無制限プランSIMフリーを契約してみた結果wwwwのサムネイル画像
    UmobileのLTE無制限プランSIMフリーを契約してみた結果wwww
    日0 月378 年1.82k
    32
    7

    ee4件

    iPhone13が保存される瞬間に発売した142枚の画像集のサムネイル画像
    iPhone13が保存される瞬間に発売した142枚の画像集
    日0 年4.47k
    63
    13

    ee30件

    広告