JavaScript进阶3-学习笔记

文章目录

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可以访问aconsole.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(){  //闭包  匿名函数赋给an++;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)
//     }
// }

JavaScript进阶3-学习笔记相关推荐

7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式本文的 ...
JavaScript 权威指南-学习笔记（一）
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! JavaScript 权威指南-学习笔记 ...
JavaScript进阶5-学习笔记
文章目录 JavaScript进阶5-学习笔记例子 JavaScript进阶5-学习笔记参考理解:https://blog.csdn.net/hhhmonkey/article/details/1 ...
JavaScript进阶4-学习笔记
文章目录 JavaScript进阶4-学习笔记递归 JavaScript进阶4-学习笔记前端: 根据Ui写页面,使用vuecli+vue---测试功能---需要数据(json,array,字符串) ...
JavaScript进阶2-学习笔记
文章目录 JavaScript进阶2-学习笔记 this指针如何改变this指向事件委托.事件冒泡 JavaScript进阶2-学习笔记 this指针 This是什么? this是Javascri ...
JavaScript高级程序设计学习笔记（三）
分享一下第五章(引用类型)的笔记,内容比较多,我拆成了两部分,今天这部分是关于Object.Array.Date和RegExp类型的. 以下的笔记是书上一些我以前学习的时候,没有太重视的js基础知识, ...
vn.py全实战进阶课程学习笔记（零）
目录写在前面 MySQL数据库配置安装mysq 创建数据库 vnpy数据库配置 rqdata数据服务配置申请rqdata试用权限 vnpy参数配置 simnow仿真环境配置准备账号接口登录 ...
36篇博文带你学完opencv :python+opencv进阶版学习笔记目录
基础版学习笔记传送门 36篇博文带你学完opencv :python3+opencv学习笔记汇总目录(基础版) 进阶版笔记项目 opencv进阶学习笔记1: 调用摄像头用法大全(打开摄像头,打开摄像 ...
javascript高程3 学习笔记(二)
ECMAScript function的理解 ECMAScript 函数与其他语言函数最大的不同在于,其不介意传入多少参数以及参数的类型比如函数的形参有两个,但是调用函数传入的参数可以写一个,三个或 ...

JavaScript进阶3-学习笔记

文章目录

JavaScript进阶3-学习笔记

闭包

JavaScript进阶3-学习笔记相关推荐

最新文章

热门文章