原生JS封裝常用的函數

pingink 發布于2019-08-21 17:44 / 3217人閱讀

摘要：原生封裝發送異步，同步實現圖片懶加載存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷

1.原生JS封裝Jsonp

function createScript(src,callback) {
    let script = document.createElement("script");
    script.src = src+"callback";
    document.appendChild(script)
}

function callback(json) {
    console.log(json)
}

2.JS發送Ajax

let xhr = new XMLHttpRequest();
xhr.open("GET", "url",false)//false異步，true同步
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText)
        }
    }
}
xhr.send(null)

3.JS實現圖片懶加載

var aImg = document.querySelectorAll("img");
        var len = aImg.length;
        var n = 0;//存儲圖片加載到的位置，避免每次都從第一張圖片開始遍歷
        window.onscroll = function() {
            var seeHeight = document.documentElement.clientHeight;
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            for (var i = n; i < len; i++) {
                if (aImg[i].offsetTop < seeHeight + scrollTop) {
                    if (aImg[i].getAttribute("src") == "") {
                        aImg[i].src = aImg[i].getAttribute("data-src");
                    }
                    n = i + 1;
                    console.log("n = " + n);
                }
            }
        };

GPU云服務器云服務器原生js封裝ajax php中常用js函數 php常用的變量函數 php的常用函數庫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89949.html

大前端2018現在上車還還得及么

摘要：面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅動，事件發射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎：Js基礎教程、js內置對...

stormgens 2019-08-01 18:25 評論0 收藏0
大前端2018現在上車還還得及么

摘要：面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅動，事件發射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎：Js基礎教程、js內置對...

mylxsw 2019-08-22 13:49 評論0 收藏0
KOA2框架原理解析和實現

摘要：實現的四大模塊上文簡述了源碼的大體框架結構，接下來我們來實現一個的框架，筆者認為理解和實現一個框架需要實現四個大模塊，分別是封裝創建類構造函數構造對象中間件機制和剝洋蔥模型的實現錯誤捕獲和錯誤處理下面我們就逐一分析和實現。什么是koa框架？ ? ? ? ?koa是一個基于node實現的一個新的web框架，它是由express框架的原班人馬打造的。它的特點是優雅、簡潔、表達力強、自由度...

tracymac7 2019-08-26 13:37 評論0 收藏0
KOA2框架原理解析和實現

摘要：實現的四大模塊上文簡述了源碼的大體框架結構，接下來我們來實現一個的框架，筆者認為理解和實現一個框架需要實現四個大模塊，分別是封裝創建類構造函數構造對象中間件機制和剝洋蔥模型的實現錯誤捕獲和錯誤處理下面我們就逐一分析和實現。什么是koa框架？ ? ? ? ?koa是一個基于node實現的一個新的web框架，它是由express框架的原班人馬打造的。它的特點是優雅、簡潔、表達力強、自由度...

liangzai_cool 2019-08-02 14:29 評論0 收藏0