![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 63
wust_cyl
在非洲,瞪羚每天早上醒来时,他知道自己必须跑的比最快的狮子还快,否则就会被吃掉.狮子每天早上醒来时,他知道自己必须追上跑得最慢的瞪羚,否则就会被饿死.不管你是狮子还是瞪羚,当太阳升起时,你最好开始奔跑
展开
-
JavaScript -- 设计模式 行为型设计模式-状态模式
状态模式:当一个对象里面有状态变化,而且当状态发生改变时,会触发一个逻辑(或者行为)。特别当状态比较多时,那么就需要状态模式,不能总是写if else 来控制。生活中,红绿灯就是一个很好的状态模式的例子。我们先来看一下简化版状态模式的类图。我们以红绿灯为例,来写一下代码。class State { constructor(color) { this.c...原创 2019-06-26 22:57:06 · 228 阅读 · 1 评论 -
NodeJS -- 浏览器缓存机制
浏览器缓存机制上面是浏览器的缓存机制,如果不清楚的小伙伴可以去瞧瞧。我们来简单用代码试试。协商缓存我们先试一下协商缓存的last-modified我们简单的使用http协议创建一个服务器,然后在public目录下面存放一些资源(一个html,一个css)。我们访问html文件。我们使用Last-modified属性,保存的是html文件最后的修改的时间.toUTCStri...原创 2019-05-19 13:49:40 · 1719 阅读 · 0 评论 -
NodeJS -- 简单实现一个可写流
实现node.js里面的可写流主要在于俩个点1:有一个缓冲区,用于对没有来得及写入的数据进行缓存2:有一个字段用来标记当前是否为写入状态。在代码体现为, this.buffer一个数组用来保存缓冲区里面的值,this.writing表示当前是否为写入状态true表示正在写入思路,我们调用write方法,读入数据时对当前状态进行判断,如果writing为false,那么置为true ...原创 2019-04-25 00:22:27 · 735 阅读 · 0 评论 -
NodeJS -- 设计一个行读取器
使用nodeJS编写一个行读器,函数接受一个路径,然后我们可以监听newLine事件,当读取到一行时,就会向外发送newLine事件,并把读取的值全部返回,当读取结束的时候,向外发送end事件。关键点1:如何实现一个一个字节的读取文件,这个就需要利用流了,我们创建一个可读流,并且是paused模式。关键2:如何判断是否换行了,在不同的操作系统下面这个是不一样的,在window下面是/n/r...原创 2019-04-23 19:44:34 · 207 阅读 · 0 评论 -
NodeJS -- 实现一个可读流(流动模式)
上一节,我们实现了一个可写流可写流那么我们这一节实现一个可读流的(流动模式)。nodeJs有俩种模式的可读流,一种是暂停模式,一种是流动模式。什么是流动模式了?监听data事件,调用resume()方法,使用Pipe()都是流动模式,流动模式就是说数据是不会经过缓冲区的,像水流一样,只要打开就不停的往下面流。暂停模式就像你用吸管吸一样,你像要多少数据,你就吸多少。流动模式的实现比较简单...原创 2019-04-27 15:21:46 · 795 阅读 · 0 评论 -
JavaScript -- 简单理解同步与异步 阻塞与非阻塞
用最简单的话表示同步和异步,阻塞和非阻塞。同步和异步关注的是消息的通知机制阻塞和非阻塞关注的是等待消息的状态同步异步关注的是被调用者,阻塞和非阻塞关注的是调用者场景:我给我的女神表白,调用者:我,被调用者:女神同步阻塞:我打电话给我电话给女神表白,我一直紧张的等着女神回话,什么都没有干(阻塞),女神想了一下(同步)直接把我拒绝了。同步非阻塞:我打电话给我电话给女神表白...原创 2019-04-17 21:08:47 · 191 阅读 · 0 评论 -
JavaScript -- 搜索引擎的关键字提示功能(字典树)
如上图,类似Google,百度这样的搜索引擎的关键字提示功能,你知道是怎么实现的吗?虽然它们可能实现的比较复杂,考虑到情况比较多,但是归根结底就是一种数据结构Trie树,又称字典树。首先我们先大体认识一下,知道它是一棵树。如下图:现在当然看不出什么东西,最直观的感觉就是一棵多叉树而已,那么上面那棵树是如何形成的了?这是输入hello hi her how see so这些单...原创 2019-04-14 15:51:35 · 1423 阅读 · 0 评论 -
NodeJS -- 异步删除一个文件夹
我们借助fs模块,promise可以很容易办到这一点。我们对当前路径的文件进行判断是文件还是文件夹,如果是文件夹那么递归调用,如果是文件,那么就是要unlink删除。为什么要是有promise了,因为我们需要在子代文件夹和文件全部删除后,删除本文件夹,因为删除子文件也是异步的,所有正好可以使用promise.all,来删除本文件夹。//异步删除一个文件夹const fs = r...原创 2019-04-21 16:47:20 · 1300 阅读 · 0 评论 -
JavaScript -- 前端错误监控
错误分类1:运行错误(代码错误)2:资源加载错误对应上面的俩种错误类型,分别有几种错误捕获方式。运行错误捕获方式1:try...catch 组合 2:window.onerror(或者window.addEventListener("error", function (e) {} ) )资源加载错误1:object.onerror 2: performance.get...原创 2019-01-23 13:31:10 · 360 阅读 · 0 评论 -
JavaScript -- 提示页面性能
前端面试经常碰到提示页面性能的问题,换句话说也就是如何让页面打开的更快,更流畅,不卡顿。大致可以总结为几点。1:资源压缩合并,减少HTTP请求HTTP请求基于TCP/IP协议,三次握手四次分手想必大家都知道吧。频繁的HTTP请求势必将造成性能消耗,合理的资源压缩合并,有效的减少HTTP请求次数可以优化性能。2:非核心代码异步加载 (defer async)JS是单线程...原创 2019-01-21 22:11:13 · 187 阅读 · 0 评论 -
JavaScript -- ES6中类的等价写法
尽管类与自定义类型之间有相似性,但仍然要记住一些重要的区别:1. 类声明不会被提升,这与函数定义不同。类声明的行为与 let 相似,因此在程序的执行到达声明处之前,类会存在于暂时性死区内。2. 类声明中的所有代码会自动运行在严格模式下,并且也无法退出严格模式。3. 类的所有方法都是不可枚举的,这是对于自定义类型的显著变化,后者必须用Object.defineProperty() 才能...原创 2019-01-25 16:54:34 · 426 阅读 · 0 评论 -
JavaScript -- new 运算符
开门见山,new 运算符的操作步骤当代码 new Foo(...) 执行时,会发生以下事情:一个继承自 Foo.prototype 的新对象被创建。 使用指定的参数调用构造函数 Foo ,并将 this 绑定到新创建的对象。new Foo 等同于 new Foo(),也就是没有指定参数列表,Foo 不带任何参数调用的情况。 由构造函数返回的对象就是 new 表达式的结果。如果构造函数没...原创 2019-01-17 14:39:57 · 243 阅读 · 1 评论 -
JavaScript -- 寄生组合式继承
组合继承上文我们写了关于组合继承,这个继承模式已经非常优秀了,但是还是有一点不足。function SuperType(name){ this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function(){ //方法可以通过原型链继承...原创 2018-12-16 17:05:26 · 184 阅读 · 0 评论 -
JavaScript -- 组合继承
使用原型链来实现继承,看如下代码function SuperType(){ this.colors = ["red", "blue", "green"]; } function SubType() {}SubType.prototype = new SuperType();const s1 = new SubType();const s2 = new SubTyp...原创 2018-12-16 15:50:43 · 214 阅读 · 0 评论 -
JavaScript - JavaScript设计模式:工厂模式
转载博主:文章深入浅出1 什么是工厂模式?工厂模式是用来创建对象的一种最常用的设计模式。我们不暴露创建对象的具体逻辑,而是将将逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂。工厂模式根据抽象程度的不同可以分为:简单工厂,工厂方法和抽象工厂。如果只接触过JavaScript这门语言的的人可能会对抽象这个词的概念有点模糊,因为JavaScript一直将abstract作为保留字而没...转载 2018-11-16 22:18:48 · 135 阅读 · 0 评论 -
NodeJS -- 实现一个简易版的express框架
我们仅仅实现express框架的路由和中间件功能。我们先来看一下效果咋样。const express = require("../express");const app = express();app.get("/getName", function (req, res, next) { res.end("hello world"); next();})app...原创 2019-05-24 16:30:16 · 333 阅读 · 0 评论 -
Node.js 使用node的net模块 实现一个聊天室
net模块创建的是tcp服务,我们可以下载一个putty来连接服务器。putty原理非常简单,我们使用net.createServer创建一个服务,回调函数里面的socket是一个可读可写流。我们可以监听data来事件来读,同样也可以调用write方法来写。我们简单的使用客户端的ip+port来标识用户。具体详情可以看一下代码,非常简单吧。//使用net 模块 创建一个...原创 2019-05-11 18:04:30 · 879 阅读 · 0 评论 -
JavaScript -- 设计模式 行为型设计模式-迭代器模式
迭代器模式:提供一种方法顺序一个聚合对象中各个元素,而又不暴露该对象内部表示。迭代器模式的特点在于顺序访问一个集合,使用者无需知道内部结构。在现实生活中好像例子不多,但是熟悉ES6的工程师应该知道es6中有iterator。我们先不看这个,先写一个小的demo代码来熟悉迭代器。我们先看一下迭代器的UML类图class Iterator { constructor(c...原创 2019-06-23 16:32:56 · 182 阅读 · 0 评论 -
JavaScript -- 设计模式 行为型设计模式-观察者模式
观察者模式的重要性无容置疑,作为一名前端工程师假如你只学一个设计模式的话,那么毫无疑问应该是观察者模式。观察者模式:也被称为发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。早些时候,我们订阅报纸,订阅牛奶等,只要我们交了钱,每天早上小哥骑着自...原创 2019-06-22 19:54:17 · 172 阅读 · 0 评论 -
JavaScript -- 设计模式 结构性设计模式-外观模式
外观模式:指提供一个统一的接口去访问多个子系统的多个不同的接口,为子系统中的一组接口提供统一的高层接口。其中Facade就一个提供统一接口的高层接口。上层用户不用考虑差异,只需要请求Facade接口,Facade会帮助你解决。实际生活中,餐厅服务员就是一个Facade接口,无论你点餐,问什么时候上餐,洗手间在哪,还是结账都是通过和服务员打交道的。外观模式的类图代码如下...原创 2019-06-22 15:25:15 · 187 阅读 · 1 评论 -
JavaScript -- 设计模式 结构性设计模式-代理模式
代理模式,顾名思义就是为其他对象提供一种代理以控制对这个对象的访问。现实生活中有很多这样的例子,比如演员的经纪人,代理服务器等。当我们想要访问某些网站,需要借助代理服务器。传统用JAVA讲的代理模式比较复杂,结合JS的特点我们简化代理模式的UML类图(我们以加载图片为例子)客户端没有办法直接使用Img,需要借助ProxyImg对象class Img { con...原创 2019-06-22 13:21:41 · 192 阅读 · 0 评论 -
JavaScript -- 设计模式 结构性设计模式-装饰器模式
装饰器模式:有时我们希望给某个对象而不是整个类添加一些功能,对对象进行添加新功能,而且不改变原有的结构和功能,这个时候我们就应该想到装饰器模式。先看一个例子我们可以穿各种各样的衣服,而且进行各种组合,假如要你设计一下这个模式,你会如何设计了。我们来看一下使用装饰器模式的UML类图吧。这个类图是比较复杂的,我们先来解释一下。最顶层的一个类,appearance是所有类的父...原创 2019-06-21 23:57:16 · 312 阅读 · 0 评论 -
JavaScript -- 设计模式 结构型设计模式-适配器模式
适配器模式:是将一个类的接口(方法或属性)转化成客户希望的另外一个接口(方法或属性),适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。适配器模式在生活中应用非常广泛,比如插座转换头,小米手机的耳机转换头,包括翻译工具都是一种适配器。在前端开发过程中,我可以使用的适配器模式,先来看一下适配器的类图。我们举个例子ajax({ url: "", ...原创 2019-06-21 16:46:23 · 214 阅读 · 0 评论 -
JavaScript -- 设计模式 创建型设计模式-单例模式
单例模式:确保一个类仅有一个实例,并提供一个访问它的全局访问点。比如购物车,登录框,redux和vuex的store 等这些都是单例模式,我下来看一下单例模式的UML类图。一个私有化属性instance用来保存唯一实例,私有化构造函数防止其他对象可以通过new运算符来生成新对象,一个共有的函数提供全局访问点,其他对象想要使用Singleton实例 必须调用它才行。很遗憾的是,JS没...原创 2019-06-20 22:41:56 · 197 阅读 · 0 评论 -
JavaScript -- 设计模式 创建型设计模式-工厂模式
也许你在网上看到有关工厂模式的其他教程(包括我在内,我在学校学习工厂模式时,老师用的c#),那些并不适合前端(JS)。在前端中,当你考虑使用new运算符来创建对象的时候,就可以考虑使用工厂模式了。工厂模式的类图可以是这样的我不直接使用Product来生成实例,而是通过使用Creator.create方法来实现这个功能。class Product { construct...原创 2019-06-20 20:14:16 · 180 阅读 · 0 评论 -
JavaScript -- 设计模式 设计原则
设计模式有很多,这些设计模式的出现是由准则或者说有根据的,不是平白无故出现的,下面我们就来认识一下这些设计原则。在此以前,我想说一下,看这篇文章的读者应该都是前端工程师或者使用JS编程语言的程序员,为了结合JS语言的特性(弱类型,无接口等)有一些原则只是简单的说一下,在JS中基本不会使用,只需要你了解。如果想要全面学习设计原则以及23种设计模式,应该选择Java而不是JS。我们只针对JS语...原创 2019-06-20 15:05:23 · 338 阅读 · 0 评论 -
JavaScript -- 设计模式 UML类图
这一节我们主要讲解基础的UML类图,这个东西非常重要,是我们用来表述,认识,理解模式的关键方法,在实际工作中与其他工程师交流也可以使用UML类图。UML类图的作用是描述程序中类的信息及各个类之间的关系。面向对象的设计语言都离不开类这个概念,如何设计类以及如何处理类和类之间的关系是重点内容。UML类图就是一种可以帮助我们解决这方面的工具。在UML类图中,我们通过一个矩形来表示一个类...原创 2019-06-20 12:15:56 · 1236 阅读 · 0 评论 -
JavaScript -- 设计模式 面向对象三要素
在开始面向对象设计模式之前,我们必须了解一下什么是面向对象,什么是面向对象三要素。面向对象:面向对象编程(Object Oriented Programming),所以也叫做OOP,这与我们早期的面向过程很不一样。早期计算机处理的问题都不是很复杂,所以一个算法,一个数据结构就能够很好的解决当时的问题。但是随着计算机技术的发展,要处理的计算机问题越来越复杂。为了更好的解决这样的问题,就出现了一切...原创 2019-06-19 23:23:24 · 973 阅读 · 0 评论 -
JavaScript -- 设计模式 环境搭建
从现在开始,我们就正式开始学习设计模式,具体可以看左边目录。所有和设计模式相关的JS代码,全部采用es6语法,以后可能还会使用ts代码,所以我们先使用webpack搭建一个环境。注意这不是重点,不搞也行!这不是重点,看不懂下面操作,可以跳过,直接进入下一节!项目目录如下:其中dist目录为输出文件夹,src/index.js为测试js, src/index.html为模板html...原创 2019-06-19 13:26:46 · 203 阅读 · 0 评论 -
NodeJS -- 简单的实现一个登录功能
实现目标:默认起始页面时登录页面,输入账号密码,如果没有此账号那么跳到注册页面,注册成功后进入个人页面。登录时,如果账号密码不匹配,那么跳到错误页面,三秒后跳到登录页面。我们还需要保证如果用户没有登录,那么就不能进入个人页面(通过url)。简单使用express mongoDB.实现效果图:此时数据库里面没有任何数据,那么就不会匹配成功,会跳转到注册页面。点击注册,那么...原创 2019-06-03 00:11:41 · 13283 阅读 · 3 评论 -
NodeJS -- 一个简单的静态资源服务器
我们的目标是创建一个静态服务器,我们可以指定主机,端口,和根目录,如果访问的是文件夹,那么就显示文件目录,如果是文件,那么就显示出来。思路:我们使用http模块创建一个服务器,我们从req.url获取pathname,然后和根目录合成文件路径,通过fs.stat模块来判断文件是文件夹还是文件。如果是文件夹,那么通过fs.readdir读取所有文件的文件名,通过handlebars模板htm...原创 2019-05-17 23:16:40 · 2423 阅读 · 0 评论 -
Node.js -- 代理服务器与虚拟主机
代理,也称网络代理,是一种特殊的网络服务,允许一个网络终端(一般为客户端)通过这个服务与另一个网络终端(一般为服务器)进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全,防止攻击。正向代理:简单说就是客户端知道它要访问的IP地址,但是它不能直接去访问,交给一个代理服务器,然后代理服务器代替它去访问。比如公司的内部网,你想要访问外网必须...原创 2019-05-22 10:24:04 · 788 阅读 · 0 评论 -
JavaScript -- 二叉查找树的JavaScript的描述
我首先看一下什么是树。树是计算机科学中经常用到的一种数据结构。树是一种非线性的数据结构,以分层的方式存储数据。树被用来存储具有层级关系的数据,比如文件系统中的文件;这是一颗普通的树。二叉树是一种特殊的树,它的子节点个数不超过两个。二叉树有许多优秀的性质。二叉排序树(Binary Sort Tree),又称二叉查找树(Binary Search Tree),亦称二叉搜索树。二...原创 2018-11-11 20:38:06 · 210 阅读 · 0 评论 -
JavaScript -- 几种常见的内部排序算法的JavaScript描述
对计算机中存储的数据执行的两种最常见操作是排序和检索,自从计算机产业伊始便是如此。这也意味着排序和检索在计算机科学中是被研究得最多的操作。在面试当中,排序算法也是问的比较多的一方面。无论你是前端还是后台,学习算法知识,是IT工程师是必修课,苦行课。我们要做探索者,不能只会用黑盒子(sort()函数),就像国家一直想做出国产芯片一样,自己明白原理是最好的。提示:以下排序算法均按照从小到大...原创 2018-11-13 20:54:52 · 177 阅读 · 0 评论 -
JavaScript -- 散列表(Hash table,也叫哈希表)的JavaScript的描述
散列是一种常用的数据存储技术,散列后的数据可以快速地插入或取用。散列使用的数据结构叫做散列表。我们的散列表是基于数组进行设计的。数组的长度是预先设定的,如有需要,可以随时增加。所有元素根据和该元素对应的键,保存在数组的特定位置,该键和我们前面讲到的字典中的键是类似的概念。使用散列表存储数据时,通过一个散列函数将键映射为一个数字,这个数字的范围是 0 到散列表的长度。对数组大小常见的限制是:...原创 2018-11-11 12:13:29 · 471 阅读 · 0 评论 -
JavaSript-正则表达式
RegExp(正则表达式):匹配特殊的字符或者有特效搭配原则的字符的最佳选择。JavaScript RegExp对象俩种创建RegExp对象的方法。1:直接量语法: var reg=/abc/; var str='abcsdcs';reg表示我们制定了这样的规则,检查字符串是否连续出现abc。后面可以加上三个属性i g m(下面说)2:创建RegExp对象 new R...原创 2018-04-30 22:51:51 · 280 阅读 · 0 评论 -
JavaScript-ES5严格标准
转载博主:点击打开链接现如今JavaScript早已不仅仅是网页特效脚本了,更多是用来构建大规模的Web应用,所以语言规范的制定者们也逐渐意识到要对JS进行语法方面的规范,并且有意地引导开发者编程习惯,消除一些不规范和不安全的语法,进而更好的满足以后大规模开发的要求,ES5规范中的严格模式就是其中重要的一环,今天我们就来详细介绍一下严格模式的使用以及它对语法的种种限制和规范。启用严格模式只需使用'...转载 2018-04-12 21:57:40 · 435 阅读 · 0 评论 -
JavaScript-对象,包装类
对象在JavaScript中是没有类的概念的,只有对象。无论是字符串,数值,数组还是函数,其本质都是对象。对象的创建方法:1:var obj={} plainObject 对象字面量/对象直接量2:构造函数 1)系统自带的构造函数 Object( ) 2) 自定义的构造函数 1对象字面量/对象直接量通过一段代码来认识一下这个过程. ...原创 2018-04-05 23:10:57 · 205 阅读 · 0 评论 -
JavaScript-dom的基本操作
介绍了dom的选择器主要是介绍了dom的查。1:增元素节点的生成 document.createElement(); var div=document.createElement('div');这个操作只是生成了一个div对象,但是没有放在body里面。但是的确生成了,还么用而已,我们只是需要插入到页面而已。文本节点的生成 document.createTextNode(); ...原创 2018-04-17 22:40:53 · 166 阅读 · 0 评论 -
JavaScript-dom继承树
DOM document object mobleDOM 定义了表示和修改文档所定义的方法。DOM对象即宿主对象,由浏览器厂家商定义,用来操作HTML和XML功能的集合。也有人称dom为html和xml的接口。友情提示:因为所学知识有限,部分内容没有说明(比如XML),以后会补充说明。1 document HTMLDocument Document的关系看如下操作:情况很明显了。documen...原创 2018-04-17 21:20:12 · 1131 阅读 · 0 评论