jQuery

一、jQuery中的extend()

通常我们使用jQuery的extend时，大都是为了实现默认字段的覆盖，即若传入某个字段的值，则使用传入值，否则使用默认值。

function getOpt(option){
    var _default = {
        name : 'wenzi',
        age : '25',
        sex : 'male'
    }
    $.extend(_default, option);
    return _default;
}
getOpt();  // {name: "wenzi", age: "25", sex: "male"}
getOpt({name:'bing'}); // {name: "bing", age: "25", sex: "male"}
getOpt({name:'bing', age:36, sex:'female'});  // {name: "bing", age: 36, sex: "female"}

extend是将两个或者更多对象的内容合并到第一个对象上，此时第一个对象的原内容发生改变。

对于$.extend(_default,option)来说，_dafault的结构已经发生了改变，并且相同属性的值会被option给替换掉。所以如果不想第一个参数_default的结构发生改变的话，可以这样做：

var res={};
$.extend(res,_default, option);//将_default和option对象上的内容合并到res上，并且_default和option的内容不会发生改变

 

jQuery的extend可以进行深浅拷贝吗 ？

使用extend()默认是浅拷贝

var obj={
    name:'xi',
    score:80
}
var obj1={
    name:'xi',
    score:{
        english:90,
        math1:100
    }
}
$.extend(obj,obj1);
obj.score.english=60;
console.log(obj.score.english);//60
console.log(obj1.score.english);//60

当然$.extend()也提供了深拷贝的方法：$.extend([deep],obj1,obj2)，若第一个参数是布尔值，并且值为True，那么就会把第二个参数作为目标参数进行合并。

$.extend(true,obj,obj1);
obj.score.english=60;
console.log(obj.score.english);//60
console.log(obj1.score.english);//90

 

栗子：

var obj={
    name:['a','b']
}
var obj1=$.extend({},obj);//浅拷贝
var obj2=$.extend(true,{},obj);//深拷贝
                
obj.name[0]='aaaa';
console.log(obj1);//{name:['aaa','b']}
console.log(obj2);//{name:['a','b']}

 

二、jQuery框架与Vue框架的区别

（1）数据和视图的分离（解耦）

　　jQuery的数据和视图混在一起，没有视图和数据分离。不利于复用。

　　vue中找数据和dom是非常方便的，数据和视图是分离的，数据就是data。

（2）以数据驱动视图

　　jQuery需要直接操作dom修改，而vue是以数据驱动视图，只关心数据的变化，dom操作被封装。

 

动态给ul添加li标签

jQuery:
var ul=document.getElementById('ul');
var str='';
for(var i=0;i<arr.length;i++){
    str+='<li>'+arr[i]+'</li>';
}
ul.appendChild(str);

vue:
<ul v-for='item in arrList'>
    <li>{{item}}</li>
</ul>

data:{
    arrList:[];
}