diff array

转为string然后比较

  1. _.difference()没看懂到底是什么操作
    2 .先检查传入的数值是否是数组
    3 .然后计算他们的长度是否相等
    4 .no-转为字符串比较的话,如果之前数组里面的一个数是字符串的话,那么转化之前和之后先当于没变,那就意味着,本来他们连数据类型都不一致,最后给出的结果是相同的。

5 .严格比较,那就是比较的时候要按照数组的特点来比价,甚至要比较数据在数组中的顺序。
6 .非严格比较,那就是单纯的比较里面的数据是否一致。
7 .includes()方法是否可以支持一些特殊字符的比较,仅仅是可以检测NaN,会检查两个数据的类型是否一致
9 .如果两个数组内部有对象的话,这个怎么比较。
10 .先检查数据的类型如果是对象的话,或者函数的话,就先不比较。
11 .map是不能跳出循环的,所以遍历的时候还是用for

特殊类型

1 .typeof NaN:number

判断传入数据的数据类型

function return_object_type(){
    let re={}
    "Boolean Number String Function Array Date RegExp Object Error".split(" ").forEach(function(e,i){
        re[ "[object " + e + "]" ] = e.toLowerCase();
    })
    return re;
}

function _typeof(obj){
    let object_type=return_object_type();
    if(obj==null){
        return String(obj)
    }
    
    if(typeof(obj)=='object'||typeof(obj)=='function'){
       return object_type[Object.prototype.toString.call(obj)] ||'Object'
    }else{
        console.log('2')
        if(isNaN(obj)){
            return 'NaN'
        }
        return typeof(obj)
    }

}


function diffArray(x,y,isTrue=false){
    if(_typeof(x)=='array'&&_typeof(y)=="array"){
        console.log('ok')
        let la=x.length
        let lb=y.length
        if(la!==lb){
            // 先检查数组数量是否一致
            return false
        }else{
            // a->b
            let diff=['string','number','Boolean','Data']
            // 目前支持的比较对象->array,object需要扩展
            if(isTrue){
                // 进行严格比较
                let num=0
                for(let i=0;i<la;i++){
                    console.log(!!(_typeof(x[i])==_typeof(y[i]) && x[i]===y[i]))
                    if(_typeof(x[i])==_typeof(y[i]) && x[i]===y[i]){
                       num+=1
                       //做个标志位,最后比较相同的数标志和数组的长度是否一致。                      
                    }else{
                        return false;                       
                    }   
                }

                if(num=la){
                    console.log(num)
                    return true;
                }

            }else{
                // 非严格比较
                for(let i=0;i<la;i++){
                    if(diff.includes(_typeof(x[i]))){
                        if(!y.includes(x[i])){
                            console.log('错误')
                            return `经过比较,y数据里面不包含x里面的${x[i]}`
                            // 直接返回不合格的数据
                        }else{
                            return true;
                        }
                    }else{
                        console.log('不在比较的范畴')
                    }
                }
                return false;

            }

        }

    }else{
        console.log(_typeof(x))
        console.log('传入错误的数据类型')
    }
}

整理下思路

1 .新的数据有添加
2 .新的数据有减少
3 .新的数据没有变化,只是调整了下顺序
4 .最后的比较结果是xx增加

1 .之前是观察数据,发现数据变化,进行渲染。有一些确认肯定是修改的操作,可不可以跳过前俩个阶段,直接让他去渲染。比如一些明显的合并操作,或者是切割操作,又或者是打乱顺序操作,又或者是排序操作。其实我每一次想要获得前后比较结果就是这些对应操作的操作参数。所以我就可以根据这些数据的变动操作来最大化的减少页面dom的更新操作
2 .关键就是怎么在这个数据上打个标记,来知道这个数组进行了那些操作。好像需要一些ast语法树的知识(但是这个需要静态分析代码,有一个更加简单的方法,就是自定义一些可能需要的函数),然后直接判断数据的操作情况,当发现这个数组使用了这个操作,那么就肯定是使用了这个方法,并且数组一定是发生了变化,然后在这个里面加一个钩子,直接触发页面变化。而且这些函数是需要框架本身自带的,这样才能保证是正确的,可能唯一变化的就是框架代码量可能变大。而节省的就是省去监察者模式,省去diff虚拟dom的时间
3 .所以可能根本就不需要监察者模式,就是下面这个东西

const observable = obj => new Proxy(obj, {set});

function set(target, key, value, receiver) {
  Reflect.set(target, key, value, receiver)
  print()
  //触发函数,需要改变数据了。。。   
}

const person = observable({
    name: '张三',
    age: 20
});
  
function print() {
    console.log(`${person.name}, ${person.age}`)
}
  
person.name='asdf'
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容