前端学习：封装一个简单的jQuery

/**
 * Created by YuKi on 2020/5/19.
 */
(function () {
    window.xiDe = window.$ = function (xuanZheQi) {
        //获取元素
        let element = document.querySelectorAll(xuanZheQi);
        //添加on事件
        function _onEvent(eventype,fn) {
            for(let i = 0;i<element.length;i++){
                element<i>.addEventListener(eventype,fn);
            }
        }
        //添加class
        function _addClass(className) {
            for(let i = 0;i<element.length;i++){
                element<i>.classList.add(className)
            }
        }
        //移除class
        function _removeClass(className) {
            for(let i = 0;i<element.length;i++){
                element<i>.classList.remove(className)
            }
        }
        //ajax
        //ajax数据格式化
        function geShiHua(data) {
            let arr = [];
            for(let name in data){
                arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
            }
            return arr.join("&");
        }
        //type == 请求类型
        //data == 发送数据
        //url == 请求地址
        //success == 回调函数
        function _ajax(reqMsg) {
            reqMsg = reqMsg || {};
            reqMsg.type = (reqMsg.type || "GET").toUpperCase();
            let params = geShiHua(reqMsg.data);
            let xmlHttp;
            if(window.XMLHttpRequest){
                xmlHttp = new XMLHttpRequest();
            }
            else if(window.ActiveXObject){
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlHttp.onreadystatechange = function () {
                if(xmlHttp.status==200 && xmlHttp.readyState == 4){
                    let backData = JSON.parse(xmlHttp.responseText);
                    reqMsg.success && reqMsg.success(backData);
                }
                else {
                    console.log("request is err")
                }
            };
            if(reqMsg.type == "GET"){
                if(params){
                    xmlHttp.open("GET",reqMsg.url+"?"+params,true);
                    xhr.send(null);
                }
                else {
                    xmlHttp.open("GET",reqMsg.url,true);
                    xhr.send(null);
                }
            }
            else if(reqMsg.type == "POST"){
                xmlHttp.open("POST",reqMsg.url,true);
                xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xmlHttp.send(params);
            }
        }
        //post请求ajax
        function _post(url,data,success) {
            _ajax({
                type:"post",
                data:data,
                url:url,
                success:success
            })
        }
        //get请求ajax
        function _get(url,data,success) {
            _ajax({
                type:"get",
                data:data,
                url:url,
                success:success
            })
        }
        //改变text
        function _text(textValue) {
            element[0].innerText = textValue
        }
        //改变html
        function _html(htmlValue) {
            element[0].innerHTML = htmlValue
        }
        //改变text
        function _addText(textValue) {
            element[0].innerText += textValue
        }
        //改变html
        function _addTtml(htmlValue) {
            element[0].innerHTML += htmlValue
        }
        //设置属性
        function _attr() {
            if(arguments.length == 1){
                return element[0].getAttribute(arguments[0]);
            }
            else if(arguments.length == 2){
                for(let i = 0 ;i < element.length;i++){
                    element<i>.setAttribute(arguments[0], arguments[1]);
                }
            }
        }
        //暴露
        return {
            //返回元素
            element:element,
            //添加事件
            on:_onEvent,
            //添加class
            addClass:_addClass,
            //移除class
            removeClass:_removeClass,
            //ajax请求
            ajax:_ajax,
            //post方式请求ajax
            post:_post,
            //get方式请求ajax
            get:_get,
            //改变元素text
            text:_text,
            //改变元素html
            html:_html,
            //增加元素text
            addText:_addText,
            //增加元素html节点
            addHtml:_addTtml,
            //修改/获取属性
            attr:_attr
        }
    };
})();