- 博客(9)
- 收藏
- 关注
原创 Javascript面向对象之策略模式
我们先看个简单的例子,再根据需求扩展。现在有个需求,三个按钮中选择了两个之后就不能先择第三个了,我们怎么实现呢,代码实现如下:class Client { constructor(nodes) { this.nodes = [...nodes]; this.initEvent(); } initEvent() { this.nodes.forEach((item) => { item.addEventListener('click', (e) => {
2021-01-23 20:40:23 160
原创 实现new方法
先看看构造函数new之后对象的样子我们可以看到对象中有三个属性:a、b、__ proto__,现在用代码去模拟new方法。function Test(a, b){ this.a = a; this.b = b;}Test.prototype.add = function(){}function myNew(){ //获取第一个参数 var constructor = [].shift.call(arguments), _this = {}; //给_this添加__p
2021-01-22 23:46:34 216
原创 重写bind()方法
Function.prototype.myBind = function(ctx){ var ctx = ctx ? Object(ctx) : window, originFn = this, args = [].slice.call(arguments, 1), //从第二个参数开始获取 //原型传递中介函数 _tempFn = function(){}; var newFn = function(){ //返回新函数的参数列表 var newArgs =
2021-01-21 16:06:52 279 2
原创 Javascript面向对象之适配器模式
先看例子:代码:可以看到我们,我们的图形是不适配的,这时候我们可以添加适配器类进行适配,代码实现如下:代码:class element { constructor(el) { this.el = el; } startMove(num){ this.el.style.left = `${num}px`; }} class adapter { constructor(element) { this.element = element; this.cr
2021-01-19 22:52:46 225 3
原创 重写apply()方法
var obj = { a: 'xiao', b: 'hong' } function test(){ console.log(this, arguments);} Function.prototype.myApply = function(ctx, args){ var ctx = ctx ? Object(ctx) : window; ctx.originFn = this; //如果不是object && fn , 证明时原始值抛出异常 if
2021-01-18 23:42:26 373
原创 重写call()方法
Function.prototype.myCall = function(ctx){ var ctx = ctx ? Object(ctx) : window; //originFn & test -> 一个内存地址 ctx.originFn = this; //引用 var args = []; //拿到myCall的第二个参数从开始到结束的所有实参列表 for(var i = 1; i < arguments.length; i++){ //args + 字符
2021-01-18 17:37:50 555
原创 Javascript面向对象之观察者模式
先看个例子,当我们在例子中输入a时,包含a区块会高亮显示,输入b时,b包含b的区块会高亮显示。代码:比如,现在我们有个需求,添加一个包含数字的区块让它高亮显示,如果实现也是以同样的方法,就需要在原有的代码上进行修改,每次的需求都要在源代码上进行修改,这是无休止的修改。这就违背了面向对象的开闭原则,对扩展开放,对修改关闭,因为对新需求的增加不应该在源代码的基础上进行修改,应该通过扩展类的方式进行扩展,具体实现如下所示。<!DOCTYPE html><html> <h
2021-01-17 00:14:52 273 5
原创 深入理解并消除行内间隙的问题
例子:如上图可以看到我们代码中每个span元素间都会存在默认的空格,有时候就需要进行消除,我们有两种消除的方法。第一种:可以设置p元素的font-size为0px,span元素的font-size为20px。此时,我们需要深入理解为什么为span元素间会存在间隔呢,我们将p元素下的所有节点打印出来。因为每个span节点都被text节点包裹着,而每个text节点默认占4个像素的宽度,此时我们又可以得到另外一种方法。第二种:...
2021-01-15 22:12:57 173
原创 Javascript中var和let的区别。
1. var定义的变量可以被重复声明,let不能。// var定义变量var v = 1;var v = 100;console.log(v); //100// let 定义的变量let m = 200;let m = 600;consloe.log(m); //Uncaught SyntaxError: Identifier 'm' has already been declared2. 在非严格模式下的全局作用域。解释:在非严格模式下,通过var定义的变量会在全局作用域下绑定
2021-01-15 17:07:00 245
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人