Day12

Day12

---

---

1-var str = “hgDzGHjhcxghvcgxzhjzcgjhxzgcjhgsduyfuys”将字符串中出现次数最多的字母弹框输 出

2-举例实现对象的深拷贝

3-举例实现对象方法的继承

4-写一个左中右布满全屏，其中左右固定宽度 200px，中间部分自适应，要求先加载中间部 分，写出结构和样式

5-封装一个 jqery 的插件

 

 

 

1-var str = “hgDzGHjhcxghvcgxzhjzcgjhxzgcjhgsduyfuys”将字符串中出现次数最多的字母弹框输出

数组+对象

 <script>
        var str = "hgDzGHjhcxghvcgxzhjzcgjhxzgcjhgsduyfuys";
        var obj = {};
        var arr = [];
        var letter;
        for (var i = 0, len = str.length; i < len; i++) {
            letter = str[i];
            if (!obj[letter]) { // 第一次放进去
                obj[letter] = 1;
            } else {
                obj[letter]++;
            }
        }
        var max_key, max_num = 0;
        for (key in obj) {
            if (max_num < obj[key]) {
                max_num = obj[key];
                max_key = key;
            }
        }
        alert('字母：' + max_key + '　次数：' + max_num);
    </script>

 

 方法补充

 

 

2-举例实现对象的深拷贝

 

var json1={"name":"小白","age":18,"arr1":[1,2,3,4,5],"arr3":[{"name1":"小白"},{"job":"前端开发"}]};
var json2={};
function copy(obj1,obj2){
  var obj2=obj2||{}; //最初的时候给它一个初始值=它自己或者是一个json
  for(var name in obj1){
    if(typeof obj1[name] === "object"){ //先判断一下obj1[name]是不是一个对象
      obj2[name]= (obj1[name].constructor===Array)?[]:{}; //我们让要复制的对象的name项=数组或者是json
      copy(obj1[name],obj2[name]); //然后来无限调用函数自己 递归思想
    }else{
      obj2[name]=obj1[name];  //如果不是对象，直接等于即可，不会发生引用。
    }
  }
  return obj2; //然后在把复制好的对象给return出去
}
json2=copy(json1,json2)
json1.arr1.push(6);
alert(json1.arr1);  //123456
alert(json2.arr1);  //123456

拷贝总结

 使用JSON.parse（）和JSON.stringify（）对对象进行深拷贝

3-举例实现对象方法的继承

类式继承（使用子类的原型对象继承）

 

function SuperClass(){
    this.books = ['js','html','css'];
}

//子类
function Child() {
    
}
//为子类添加公共方法
Child.prototype.getSubVal = function () {
    return this.subVal;
};
//继承父类
Child.prototype = new SuperClass();

var instance1 = new Child();
var instance2 = new Child();

console.log(instance1.books);

instance1.books.push("设计模式");
console.log(instance1.books);

 

继承认知

继承方法总结

 

 

4-写一个左中右布满全屏，其中左右固定宽度 200px，中间部分自适应，要求先加载中间部分，写出结构和样式

 

<div id="left">我是左边</div>
    <div id="center">我是中间</div>
<div id="right">我是右边</div>
所以有了以下代码：

css样式默认加载顺序

样式表的元素选择器选择越精确，则其中的样式优先级越高：
id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式

对于相同类型选择器制定的样式，在样式表文件中，越靠后的优先级越高
所以把类选择器center写在后面就可以了。

当然也写了另一种方法：
html,body{ margin: 0px;width: 100%; } 
#left,#right{width: 200px;height: 200px;background-color: aqua;
    position: absolute;}
    #left{left: 0;top:0;}
    #right{right: 0;top:0;}
    #center{margin: 0 200px;background-color: blue;height: 200px;}

<div id="left">我是左边</div>
    <div id="center">我是中间</div>
<div id="right">我是右边</div>

 

 

 

5-封装一个 jqery 的插件

 

(function ( $, window, document) {
  //....封装组件逻辑
})(jQuery, window, document);

认识jquery插件

 

简述对jquery封装效果