分类：Javascript

2021
05-25

怎样用JavaScript实现原型模式

概述原型模式是指原型实例指向创建对象的种类，并通过拷贝这些原型创建新的对象，是一种用来创建对象的模式，也就是创建一个对象作为另一个对象的prototype属性；prototype警告：学习了解原型模式前需先学习原型、原型链、prototype、__proto__、constructor等知识；实现原型模式ES5中的API：Object.create(prototype,optionalDescriptorObjects)Object.create()方法接收两个参数：第一个参数是__proto__对象，第二个是prototiesO... 继续阅读 >
2021
05-25

怎样用JavaScript实现观察者模式

概述观察者模式又被称为发布-订阅模式，是设计模式中的一种行为型模式；定义：观察者模式定义了一种一对多的对象依赖关系，当被依赖的对象的状态发生了改变，所有依赖它的对象都会得到通知；白话解释：假如你去苹果专卖店买最新款的iphone11，因为iphone11刚出来不久，正处旺季，供货不足；当你去专卖店的时候，店员告诉你暂时没货了，但是你可以留下你的联系方式，如果货到了，会第一时间通知；当然你肯定不会每天都去专卖店问iph... 继续阅读 >
2021
05-25

怎样用Javascript实现策略模式

概述策略模式是JavaScript设计模式中行为型的设计模式；定义：定义一系列算法，并将这些算法各自封装成策略类（方法），然后将不变的部分和变化的部分分离开来，并且这些算法可以相互替换白话解释：实际上所谓的策略模式就是指根据不同的策略来执行不同的方法，是不是很类似与if-else分支判断；但是策略模式是用来解决多重条件判断语句的；代码实现需求：年终将至，某公司决定提前发年终奖，但是年终奖的计算是有一定的规则的，年... 继续阅读 >
2021
05-25

JavaScript设计模式学习之适配器模式

概述适配器模式是设计模式行为型模式中的一种模式；定义：适配器用来解决两个已有接口之间不匹配的问题，它并不需要考虑接口是如何实现，也不用考虑将来该如何修改；适配器不需要修改已有接口，就可以使他们协同工作；白话解释：你买了某种电器产品，准备带回家好好感受该款产品的魅力；结果带回家之后准备通电使用的时候，发现该产品仅支持两孔插座，而你家里的电源插座都是三孔插座；这个时候你总不能又跑去电器专卖店退货吧；突... 继续阅读 >
2021
05-25

JavaScript设计模式学习之代理模式

概述代理模式属于设计模式中结构型的设计模式；定义：顾名思义就是为一个对象提供一个代用品或占位符，以便控制对它的访问！白话解释：很多明星都是有经纪人的，如果要联系明显进行商演或者开演唱会之类的商业活动通过是需要先跟经纪人取得联系的，跟经纪人谈好了合作事宜之后经纪人再转达给某明星，然后某明星才会去参加活动；同样租房也是一个同样的道理，我们不管是租房还是买房，第一反应肯定是找链家这类的平台，因为我们只需... 继续阅读 >
2021
05-25

JavaScript设计模式之职责链模式

概述职责链模式是设计模式中行为型的一种设计模式；定义：使多个对象都有机会处理请求，从而避免请求的发送者与接收者之间的耦合关系，将这些处理请求的对象形成一个链，并沿着这个链传递请求，直到有一个对象处理它为止；白话解释：作者坐标武汉，1000+万人口的新一线城市；以早高峰公交为例，早上早高峰的时候通常都是公交车前门拥堵，以至于没办法刷卡乘车；但是后门相对来说会空一些，这时我们选择后门上车，但是我们后门上车... 继续阅读 >
2021
05-25

JavaScript设计模式之命令模式

命令模式是JavaScript设计模式中行为型的一种设计模式；定义：向某些对象发送请求，但是并不知道被请求的操作具体是什么，所以我们希望以一种松耦合的方式来设计程序，使得请求发送者和接收者之间能够消除彼此之间的耦合关系；而我们的这种松耦合的方式就是命令模式；白话解释：假如你是你们公司研发部门团队leader，这时你们领导分布给你一个任务，你粗略的看了一下，很简单的需求比较容易实现；而你作为团队leader，每天肯定会有... 继续阅读 >
2021
05-25

搞懂什么是Node.js原来这么简单

Node.js的官方介绍在Node.js的官方网站的首页中，有这样一句话来描述Node.js：Node.js®isaJavaScriptruntimebuiltonChrome'sV8JavaScriptengine.Node.jsusesanevent-driven,non-blockingI/Omodelthatmakesitlightweightandefficient.翻译过来的意思就是：Node.js是基于Chrome的V8JavaScript引擎的JavaScript运行时。Node.js采用事件驱动、非堵塞I/O模型，使其轻量化和高效。上面这句话... 继续阅读 >
2021
05-23

JavaScript 实现页面滚动动画

在做前端UI效果时，让元素根据滚动位置实现动画效果是一个非常流行的设计，通常我们会使用第三方插件或库来实现。在本教程中，我将教大家使用纯JavaScript和CSS来实现。先预览一下实现的效果：我们使用CSS来实现动画，用JavaScript来处理触发所需的样式。我们先来创建布局。创建布局我们先使用HTML创建页面布局，然后为需要实现动画的元素分配一个通用类名，后面的JavaScript通过此类名定位这些元素。这里我们给需要... 继续阅读 >
2021
05-23

详解JavaScript错误捕获

一、基本使用与逻辑使用try{//code....}catch(err){//errorhandling}finally{//nomatterwhathappensinthetry/catch(errorornoerror),thiscodeinthefinallystatementshouldrun.}逻辑二、特性try...catch仅适用于运行时错误，解释阶段错误无法正常工作try{{{{{{{{}catch(err){console.error(err)}//引擎在‘parse-time'出错，导致无法理解代码，因此无法捕捉try...catch只能同步工作try{... 继续阅读 >
2021
05-23

JavaScript 实现生命游戏

概念介绍元胞自动机（CellularAutomata），是20世纪50年代初由计算机之父冯·诺依曼（JohnvonNeumann）为了模拟生命系统所具有的自复制功能而提出来的。生命游戏（GameofLife），或者叫它的全称JohnConway'sGameofLife，是英国数学家约翰·康威在1970年代所发明的一种元胞自动机。逻辑规则在二维平面方格里，每个细胞有两种状态：存活或死亡，而下一时刻的状态完全受它周围8个细胞的状态而定。这个世界有三条演... 继续阅读 >
2021
05-23

分享几个JavaScript运算符的使用技巧

ECMAScript发展进程中，会有很多功能的更新，比如销毁，箭头功能，模块，它们极大的改变JavaScript编写方式，可能有些人喜欢，有些人不喜欢，但像每个新功能一样，我们最终会习惯它们。新版本的ECMAScript引入了三个新的逻辑赋值运算符：空运算符，AND和OR运算符，这些运算符的出现，也是希望让我们的代码更干净简洁，下面分享几个优雅的JavaScript运算符使用技巧一、可选链接运算符【？.】可选链接运算符（OptionalChainingOper... 继续阅读 >
2021
05-23

JavaScript 防篡改对象的用法示例

javascript防篡改对象这个东西吧，用到的很少，个人感觉用处不大，但是，可以作为装逼的利器，哈哈，开搞。。1、不可扩展对象默认情况下对象都是可以扩展的，也就是说，任何时候都可以向对象中添加属性和方法。现在使用Object.preventExtensions(object)方法可以改变这个行为，让你不能再给对象添加属性和方法。例如：varperson={name:'jack'};Object.preventExtensions(person);person.age=13;console.log(person.age);///unde... 继续阅读 >
2021
05-02

JavaScript逐点突破系列之this是什么

JavaScript逐点突破系列之this是什么 了解this也许你在其他面向对象的编程语言曾经看过this，也知道它会指向某个构造器(constructor)所建立的对象。但事实上在JavaScript里面，this所代表的不仅仅是那个被建立的对象。先来看看ECMAScript标准规范对this的定义：「ThethiskeywordevaluatestothevalueoftheThisBindingofthecurrentexecutioncontext.」「this这个关键字代表的值为当前执行上下文的ThisBinding。」然后再来看看MDN对this的定义：「Inm... 继续阅读 >
2021
03-24

详解JavaScript中哪一种循环最快呢

了解哪一种for循环或迭代器适合我们的需求，防止我们犯下一些影响应用性能的低级错误。JavaScript是Web开发领域的“常青树”。无论是JavaScript框架（如Node.js、React、Angular、Vue等），还是原生JavaScript，都拥有非常庞大的粉丝基础。我们来谈谈现代JavaScript吧。循环一直是大多数编程语言的重要组成部分，而现代JavaScript为我们提供了许多迭代或循环值的方法。但问题在于，我们是否真的知道哪种循环或迭代最... 继续阅读 >
2021
03-22

JavaScript实现页面动态验证码的实现示例

JavaScript实现页面动态验证码的实现示例 引言：现在很多在用户登陆或注册的时候为了防止程序攻击，加入了动态验证的技术，一般是让用户输入随即生成的验证码来实现。我自己写了一个没有跟后台交互的，就在前端验证，发出来给大家看看。效果图： 实现思路：把数字和字母放到一个数组中，通过随机的方式取得数组下标，总共取4个组成验证码；把验证码渲染出来（一个一个的渲染）；绘制一定数量的干扰线，随机颜色；输入验证码，输入4位以后去验证，正确显示钩，... 继续阅读 >