JavaScript进阶3-学习笔记

JavaScript进阶3-学习笔记

//组件封装
什么是封装？
将冗余的代码精简化
例如：写代码：a页面有一个函数，b页面也需要这个函数，很多人就是直接copy

为什么要封装？
提高代码复用率

怎么封装？
没有标准答案，每个人封装方式不同，难易程度不同
目的：提高复用率，简化代码

例子：https://blog.csdn.net/hhhmonkey/article/details/118385077
封装方式一：使用div定义一个按钮，根据id渲染按钮
如何写多个样式？
封装方式二：样式可以使用：字符串、数组
封装问题：
必须定义div，必须明确调用$(id)，要显示写样式名

改进一：
可以使用自定义<btn>，实际上是用button标签去替换btn
一、找到btn的上级
二、创建button
三、删除btn

改进二：
将样式写入html，不需要在js中引用
指定一个标识样式，即不是真实的样式，只为选择器使用$(".btn")
需要自定义属性，type，text用来指定需要参数
1.找到所有的.btn的button
2.将type，text中的信息取出
3.动态整合button，不依赖于显示的样式名

封装方式二common.js：

//公共的方法  样式不同  标题不同  
/**
 * @param {*} title 标题
 * @param {*} style 样式
 */
function Btn(title,style){
    this.title = title;
    this.style = style;
};
Btn.prototype.toHtml = function(){
    if (typeof this.style === 'string') {
        return '<button class="btn '+this.style+'">'+this.title+'</button>'
    }else{// ["xxx",'yyyy']
        return '<button class="btn '+this.style.join(" ")+'">'+this.title+'</button>'
    }
};

改进一截图：


改进二截图：

闭包

//闭包 可以很简单，很复杂
//知道对象实例化？

//闭包： 一个函数引用函数外部局部变量

//闭包一
function f1(){
    var a = 10;  //相对于f2外部局部变量
    function f2() { //f2可以访问a
        console.log(a)
    }
    f2();
}
f1();

//闭包二
function a(){
    var n = 0;  //外部局部变量
    this.add = function(){//函数引用外部局部变量
        n++;
        console.log(n)
    }
}
var c = new a();
console.log(c.n)  //因为n是局部
c.add();
c.add();

//闭包三
function a(){
    var n = 0;  //外部局部变量
    function add(){//函数引用外部局部变量
        n++;
        console.log(n)
    }
    return add;
}
a()()    //柯里化格式  a()()()()()
//1. a()-->add  2. add() 继续加()让返回的函数执行
// var aa = a();
// aa()
// aa()

// function a(){
//     return function(){
//         return function(){
//             return function(){
//                 //
//             }
//         }
//     }
// }
// a()()()()

//闭包四   可以多次执行
var a = function(){
    var n = 0;
    return function(){  //闭包  匿名函数赋给a
        n++;
        console.log(n);
    }
};
var b = a();  //b---闭包
var c = a();  //c---闭包
b();  //1
c();  //1

//闭包有什么用
//对象封装  能够将name缓存起来，避免污染
var Person = function(){
    var name = "张三";  //get set 相当于对这个属性的操作
    return {
        getName: function(){//匿名函数 闭包
            return name;
        },
        setName: function(newName) {//匿名函数 闭包
            name = newName;
        }
    }
}(); //加上这个括号表示立即执行  Person == {.....}
console.log(Person.getName())
Person.setName("xxxxx");
console.log(Person.getName())

//继承  人-----白人 黑人
var Person = function(){
    var name = "张三";  //get set 相当于对这个属性的操作
    return {
        getName: function(){//匿名函数 闭包
            return name;
        },
        setName: function(newName) {//匿名函数 闭包
            name = newName;
        }
    }
};
var BlackPerson = function (){}
BlackPerson.prototype = Person(); //为什么不需要new() 因为已经是一个实例对象(字面量对象)
var p = new BlackPerson();  //p是一个对象，对象中有getName函数，函数引用name形成闭包
p.setName("yyyy");
console.log(p.getName())


//闭包  难----变化太多 有很多种用法   不难----一个函数引用函数外部局部变量
//原型  在你身上找不到---去原型上找----继续去原型的原型上找

//什么场景  需要维护一个函数的一些信息不变， 可以一直存在 被缓存
//可以多层嵌套  看你怎么使用

//缺点：  忽略
//不易理解， 占用内存

//优点：
//可以缓存数据， 封装， 柯里化， 很灵活

//dom在闭包中又引用自己 ie678
// var obj = document.querySelectorAll("button");
// for(var i=0; i<obj.length; i++) {
//     obj[i].onclick = function(){
//         alert(obj.getName)
//     }
// }