我是QinDong-优快云博客

原创 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 226

原创实现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 297

原创重写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 401 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 328 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 454

原创重写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 625

原创 Javascript面向对象之观察者模式

先看个例子，当我们在例子中输入a时，包含a区块会高亮显示，输入b时，b包含b的区块会高亮显示。代码：比如，现在我们有个需求，添加一个包含数字的区块让它高亮显示，如果实现也是以同样的方法，就需要在原有的代码上进行修改,每次的需求都要在源代码上进行修改，这是无休止的修改。这就违背了面向对象的开闭原则，对扩展开放，对修改关闭，因为对新需求的增加不应该在源代码的基础上进行修改，应该通过扩展类的方式进行扩展，具体实现如下所示。 <!DOCTYPE html> <html> <h

2021-01-17 00:14:52 328 5

原创深入理解并消除行内间隙的问题

例子：如上图可以看到我们代码中每个span元素间都会存在默认的空格，有时候就需要进行消除，我们有两种消除的方法。第一种：可以设置p元素的font-size为0px，span元素的font-size为20px。此时，我们需要深入理解为什么为span元素间会存在间隔呢，我们将p元素下的所有节点打印出来。因为每个span节点都被text节点包裹着，而每个text节点默认占4个像素的宽度，此时我们又可以得到另外一种方法。第二种： ...

2021-01-15 22:12:57 261

原创 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 declared 2. 在非严格模式下的全局作用域。解释：在非严格模式下，通过var定义的变量会在全局作用域下绑定

2021-01-15 17:07:00 306

qq_44738564的博客