JQueryの原理解析 - 手書き簡易版JQuery

最初のものを知ってから、二番目のものを知ってください。

なぜJQueryが必要なのか

以前に書いたJSコードでは、要素オブジェクトを取得するためにdocument.getElementById等が頻繁に出てきますが、大量の要素オブジェクトを取得する必要がある場合には、同様のコードを繰り返し書くことになります。コードを書く量、JavaScript 開発の効率を向上させるために、偉人が jQuery を書きました。

jQueryの概念:

jQuery は、JavaScript プログラミングを簡素化し、多くの便利な機能を提供する人気のある JavaScript ライブラリです。簡潔な構文を使用し、複雑な操作をカプセル化することで、Web 開発における HTML ドキュメントのトラバーサルとイベント処理、アニメーション効果、AJAX などの処理が容易になります。

jQuery は、効率的な JavaScript コードを簡単に作成できるクロスブラウザ API を Web 開発者に提供します。HTML に jQuery ファイルを導入し、jQuery API を使用してページ要素の選択と操作、イベントの処理、Ajax リクエストの送信、アニメーション効果の作成などを行うことができます。jQuery は、DOM 操作、イベント処理、AJAX、アニメーションなどの一般的なタスクを簡素化し、Web 開発をより迅速かつ便利にします。

jQuery は、学習と使用が簡単、強力な拡張性、優れた互換性という利点により、最も人気のある JavaScript ライブラリの 1 つとなり、さまざまな種類の Web サイトや Web アプリケーションで広く使用されています。

jQuery の利点:

ネイティブ JavaScript を使用して複雑な DOM 操作およびイベント処理コードを記述するのは、面倒で時間がかかる場合があります。また、jQuery は使いやすい API を提供することで、開発者がこれらの操作をより迅速かつ効率的に完了できるようにします。

偉い人が書いた JQuery URL: これを使用したい場合は、コードに次のコードを追加するだけです。

<script type="text/javascript" src=".././jQuery/jquery-3.6.0.min.js"></script>

Ajax を使用して動的ページ更新効果を実現する前に作成されたコードは次のとおりです。

window.onload=function () {
        document.getElementById("btn1").onclick=function () {
            //1.创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("div1").innerText=this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            let value = document.getElementById("ipt1").value;
            xhr.open("get","/ajax/ajaxrequest1?value="+value,true)
            xhr.send()
        }
        document.getElementById("btn2").onclick=function () {
            //1.创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function (){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("div2").innerText=this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            xhr.open("post","/ajax/ajaxrequest1",true)
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            let value1 = document.getElementById("ipt1").value;
            xhr.send("username="+value1)
        }
    }

コードが非常に複雑で、同じものが何度も出現することがわかります。

jQuery を使用して上記の機能を実現します。

$(function () {
        $("#btn").click(function () {
            $.ajax({
                methodType: "post",
                url: "/ajax/ajaxrequest3",
                date: "username=zhangsan",
                asuyc: true,
                success: function (jsonst) {
                    $("#div").html(jsonst.username)
                }
            })
        })
    })

このことから、JQuery の威力がわかります。JQuery の原理を学ぶために、理解を深めるために簡単なバージョンの JQuery を手動で作成しました。

その前に、JavaScript オブジェクトの知識を確認してください。

自分で書いた簡単な JQuery:

    function JQuery(selector) {
        if (typeof selector == "string") {
            if (selector.charAt(0) == "#") {
                // var doc = document.getElementById(selector.substring(1))
//去掉var 使得doc升级为全局变量
                doc = document.getElementById(selector.substring(1))
//在没将doc升级为全局变量之前是无法调用封装进来的函数的，因为函数只能被对象调用，所以出现以下代码
                return new JQuery()
            }
        }
        if (typeof selector == "function") {
            window.onload = selector
        }
        this.html = function (htmlstr) {
            //定义全局变量doc
            doc.innerHTML = htmlstr
        }
        this.click = function (fun) {
            doc.onclick = fun
        }
        this.getvalue = function () {
            return doc.value
        }
//将Ajax封装成静态函数；
        JQuery.ajax = function (jsonstr) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        var jsonobj = JSON.parse(this.responseText);
                        jsonstr.success(jsonobj)
                    } else {
                        alert(this.status)
                    }
                }
            }
            // var jsonstr = JSON.parse(jsonstr);错误代码，
            if (jsonstr.methodType.toUpperCase() == "POST") {
                xhr.open("post", jsonstr.url, jsonstr.async)
                xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
                xhr.send(jsonstr.date)
            }
            if (jsonstr.methodType.toUpperCase() == "GET") {
                xhr.open("get", jsonstr.url + "?" + jsonstr.date, jsonstr.async)
                xhr.send()
            }

        }
    }
    $ = JQuery
//如果没有以下代码，在调用Ajax时会报错，因为在此之前并没有在执行开始的return new JQuery()，
//所以并没有创建对象，所以无法调用
    new JQuery()