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'
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,928评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,192评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,468评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,186评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,295评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,374评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,403评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,186评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,610评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,906评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,075评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,755评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,393评论 3 320
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,079评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,313评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,934评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,963评论 2 351

推荐阅读更多精彩内容