React 模仿大眾點評 webapp-----筆記

1.前言

??大家好,有一段時間沒有寫博客了,主要是最近在學習慕課網-React 模仿大眾點評 webapp,這是一個很不錯的教學視頻,喜歡的朋友可以去看看。再次我把學習過程中遇到的難點也和大家分享一下,幫自己理解。

(1)localstorage.setItem(key,value)的坑;

??大家因該知道這是js中的經典回話存儲,可以將一些數據保存到瀏覽器中,方便在任何界面可以獲取改數據,在移動端和PC端會經常用到,但是他也有個巨坑。如果是在ios safari 無痕模式下,直接使用 localStorage.setItem 會報錯,會發現在這種模式下localStorage.setItem出錯了,拿不到,但是在瀏覽中打開開發者模式時發現有值,但是拿不到。解決辦法很簡單,關閉無痕模式即可,如何關閉大家可以去查查。在js代碼中我要給出提示:

if (typeof localStorage === 'object') {
    try {
        localStorage.setItem('localStorage', 1);
        localStorage.removeItem('localStorage');
    } catch (e) {
        Storage.prototype._setItem = Storage.prototype.setItem;
        Storage.prototype.setItem = function() {};
        alert('您處于無痕瀏覽,無法為您保存');
    }
}

記住一定要用try...catch方法。

(2)移動端上滑滾動加載優化方案

const loadMoreFn = this.props.loadMoreFn;
        const wrapper = this.refs.wrapper
        /* 節流 */
        let timeoutId;
        function callback(){
            const top = wrapper.getBoundingClientRect().top;
            const windowHeight = window.screen.height
            if(top && top < windowHeight){
                loadMoreFn();
            }
        }
        window.addEventListener("scroll",function(){
            if(this.props.isLoadingMore){
                return
            }
            /* 性能最優,滑動流暢 */
            if(timeoutId){
                clearTimeout(timeoutId)
            }
            timeoutId = setTimeout(callback,50)
        }.bind(this),false)

(3)文章外的知識點擴充——精準獲取url中參數值

??這一個知識點和整體的文章沒有太大關系,讀者可以自行越過。這只是本人方便記憶,另外做的筆記。

在編寫純原生的前端代碼時,我們可能要使用url中的具體的某一參數值,這時你可能會使用js中的indexOf或者substr一段一段的去截取,這樣做的話,你會發現很麻煩,不利于往后的參數擴展,今天來給大家推薦一個使用正則表達式的方法,準確獲取到相應的參數值,代碼如下:

/* 獲取指定參數值 */
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg); // window.location.search獲取URL中的參數
        if (r != null) return unescape(r[2]); return null;
    }

/* 調用該方法 */
var id = GetQueryString("id");   //傳入你想要得到的參數值的key鍵即可
console.log(id)

結尾

??今天先分享到這兒,后續胡持續更新,謝謝!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,829評論 25 708
  • 常見試題 行內元素:會在水平方向排列,不能包含塊級元素,設置width無效,height無效(可以設置line-h...
    他大舅啊閱讀 2,467評論 1 5
  • 作者: 人民小學 四(4)班 劉易林 今天老師讓我們看螞蟻搬食物的視頻,我迫不及待...
    L劉易林閱讀 730評論 0 0
  • 家有一個寶貝,六歲了還不會說話。 我知道,她不愿長大! 她愿意在簡單的世界里自娛自樂,哪怕是一根小木棍,她都能玩出...
    程建輝閱讀 606評論 2 0
  • 1投射今天涵寶貝快樂開心的生活,可以學著幫姑姑做點什么,投射她在學校認真學習,做作業認真仔細。 2投射今天工作特別...
    唐春娥_中閱讀 209評論 0 2