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)

结尾

  今天先分享到这儿，后续胡持续更新，谢谢！