- 博客(318)
- 收藏
- 关注
RSS订阅原创 TypeScript -- ts的类
TS的类在传统的JavaScript中，我们使用构造函数来实现类的概念，通过原型链的方式来实现继承。值得庆祝的是，终于我们等来了ES6，迎来了class关键字。熟悉ES6的前端工程师肯定对此关键字不陌生，在TS中，对此部分进行了扩展，增加了许多新东西。类的定义我们使用class关键字来定义一个类，我们可以给类添加属性和方法。class Person { name: string ...
2019-08-13 18:20:54
382
原创 TypeScript -- ts接口
上一节，我们简单的介绍ts的基础数据类型，那么接下来我们来介绍ts的接口。TS的接口接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。JS中是没有接口的概念的，在 TypeScript 中，我们使用接口interface来定义对象的类型。在ts中，接口是一个非常灵活的概念，除了...
2019-08-05 23:29:46
1074
原创 TypeScript -- 初始TS
因为最近的项目开始使用TS，感觉有必要来学习一波咯，撸起袖子学起来吧！TS介绍TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格，C#的首席架构师，已工作于TypeScript的开发。 [2-5]TypeScript扩展了JavaScript的语法，所以任何现有的...
2019-08-04 17:07:53
714
原创 Git -- git的一些基础命令
注意本篇博客只是罗列的一些命令，不适合初学者git 本地配置用户（如果不配置用户那么无法提交代码）git config --list 用于查看配置的属性配置姓名和邮箱git config --global user.name "你的名字"git config --global user.email "邮箱"初始化git一个项目只能初始化一次 不能嵌套初始化git init...
2019-06-30 18:05:29
279
原创 JavaScript -- 设计模式 行为型设计模式-状态模式
状态模式：当一个对象里面有状态变化，而且当状态发生改变时，会触发一个逻辑（或者行为）。特别当状态比较多时，那么就需要状态模式，不能总是写if else 来控制。生活中，红绿灯就是一个很好的状态模式的例子。我们先来看一下简化版状态模式的类图。我们以红绿灯为例，来写一下代码。class State { constructor(color) { this.c...
2019-06-26 22:57:06
216
1
原创 JavaScript -- 设计模式 行为型设计模式-迭代器模式
迭代器模式：提供一种方法顺序一个聚合对象中各个元素，而又不暴露该对象内部表示。迭代器模式的特点在于顺序访问一个集合，使用者无需知道内部结构。在现实生活中好像例子不多，但是熟悉ES6的工程师应该知道es6中有iterator。我们先不看这个，先写一个小的demo代码来熟悉迭代器。我们先看一下迭代器的UML类图class Iterator { constructor(c...
2019-06-23 16:32:56
165
原创 JavaScript -- 设计模式 行为型设计模式-观察者模式
观察者模式的重要性无容置疑，作为一名前端工程师假如你只学一个设计模式的话，那么毫无疑问应该是观察者模式。观察者模式：也被称为发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。早些时候，我们订阅报纸，订阅牛奶等，只要我们交了钱，每天早上小哥骑着自...
2019-06-22 19:54:17
157
原创 JavaScript -- 设计模式 结构性设计模式-外观模式
外观模式：指提供一个统一的接口去访问多个子系统的多个不同的接口，为子系统中的一组接口提供统一的高层接口。其中Facade就一个提供统一接口的高层接口。上层用户不用考虑差异，只需要请求Facade接口，Facade会帮助你解决。实际生活中，餐厅服务员就是一个Facade接口，无论你点餐，问什么时候上餐，洗手间在哪，还是结账都是通过和服务员打交道的。外观模式的类图代码如下...
2019-06-22 15:25:15
168
1
原创 JavaScript -- 设计模式 结构性设计模式-代理模式
代理模式，顾名思义就是为其他对象提供一种代理以控制对这个对象的访问。现实生活中有很多这样的例子，比如演员的经纪人，代理服务器等。当我们想要访问某些网站，需要借助代理服务器。传统用JAVA讲的代理模式比较复杂，结合JS的特点我们简化代理模式的UML类图（我们以加载图片为例子）客户端没有办法直接使用Img，需要借助ProxyImg对象class Img { con...
2019-06-22 13:21:41
178
原创 JavaScript -- 设计模式 结构性设计模式-装饰器模式
装饰器模式：有时我们希望给某个对象而不是整个类添加一些功能，对对象进行添加新功能，而且不改变原有的结构和功能，这个时候我们就应该想到装饰器模式。先看一个例子我们可以穿各种各样的衣服，而且进行各种组合，假如要你设计一下这个模式，你会如何设计了。我们来看一下使用装饰器模式的UML类图吧。这个类图是比较复杂的，我们先来解释一下。最顶层的一个类，appearance是所有类的父...
2019-06-21 23:57:16
233
原创 JavaScript -- 设计模式 结构型设计模式-适配器模式
适配器模式：是将一个类的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。适配器模式在生活中应用非常广泛，比如插座转换头，小米手机的耳机转换头，包括翻译工具都是一种适配器。在前端开发过程中，我可以使用的适配器模式，先来看一下适配器的类图。我们举个例子ajax({ url: "", ...
2019-06-21 16:46:23
197
原创 JavaScript -- 设计模式 创建型设计模式-单例模式
单例模式：确保一个类仅有一个实例，并提供一个访问它的全局访问点。比如购物车，登录框，redux和vuex的store 等这些都是单例模式，我下来看一下单例模式的UML类图。一个私有化属性instance用来保存唯一实例，私有化构造函数防止其他对象可以通过new运算符来生成新对象，一个共有的函数提供全局访问点，其他对象想要使用Singleton实例 必须调用它才行。很遗憾的是，JS没...
2019-06-20 22:41:56
177
原创 JavaScript -- 设计模式 创建型设计模式-工厂模式
也许你在网上看到有关工厂模式的其他教程（包括我在内,我在学校学习工厂模式时,老师用的c#),那些并不适合前端（JS)。在前端中，当你考虑使用new运算符来创建对象的时候，就可以考虑使用工厂模式了。工厂模式的类图可以是这样的我不直接使用Product来生成实例，而是通过使用Creator.create方法来实现这个功能。class Product { construct...
2019-06-20 20:14:16
169
原创 JavaScript -- 设计模式 设计原则
设计模式有很多，这些设计模式的出现是由准则或者说有根据的，不是平白无故出现的，下面我们就来认识一下这些设计原则。在此以前，我想说一下，看这篇文章的读者应该都是前端工程师或者使用JS编程语言的程序员，为了结合JS语言的特性（弱类型，无接口等）有一些原则只是简单的说一下，在JS中基本不会使用，只需要你了解。如果想要全面学习设计原则以及23种设计模式，应该选择Java而不是JS。我们只针对JS语...
2019-06-20 15:05:23
320
原创 JavaScript -- 设计模式 UML类图
这一节我们主要讲解基础的UML类图，这个东西非常重要，是我们用来表述，认识，理解模式的关键方法，在实际工作中与其他工程师交流也可以使用UML类图。UML类图的作用是描述程序中类的信息及各个类之间的关系。面向对象的设计语言都离不开类这个概念，如何设计类以及如何处理类和类之间的关系是重点内容。UML类图就是一种可以帮助我们解决这方面的工具。在UML类图中，我们通过一个矩形来表示一个类...
2019-06-20 12:15:56
1180
原创 JavaScript -- 设计模式 面向对象三要素
在开始面向对象设计模式之前，我们必须了解一下什么是面向对象，什么是面向对象三要素。面向对象：面向对象编程（Object Oriented Programming），所以也叫做OOP，这与我们早期的面向过程很不一样。早期计算机处理的问题都不是很复杂，所以一个算法，一个数据结构就能够很好的解决当时的问题。但是随着计算机技术的发展，要处理的计算机问题越来越复杂。为了更好的解决这样的问题，就出现了一切...
2019-06-19 23:23:24
925
原创 JavaScript -- 设计模式 环境搭建
从现在开始，我们就正式开始学习设计模式，具体可以看左边目录。所有和设计模式相关的JS代码，全部采用es6语法，以后可能还会使用ts代码，所以我们先使用webpack搭建一个环境。注意这不是重点，不搞也行！这不是重点，看不懂下面操作，可以跳过，直接进入下一节！项目目录如下：其中dist目录为输出文件夹，src/index.js为测试js, src/index.html为模板html...
2019-06-19 13:26:46
189
原创 JavaScript -- 设计模式
这个学期选修了一门设计模式，学到了许多东西，感觉以前写了很多**代码，接下来一段时间里面，我会总结我学到东西并且使用JS语言来实现一些面向对象设计模式。详情请看目录！...
2019-06-19 09:49:28
122
原创 VueJS -- 使用vue+webpack搭建一个vue简单工程项目
创建VUE工程项目，我们可以使用vue-cli这款脚手架，但是这里面得一些细节被屏蔽了，如果你不清楚原生使用wepack配置的话，那么项目如果需要对vue-cli配置进行修改，可能你会无从下手。我们先来看一下项目目录。app里面放的是项目资源，index.js是入口文件 index.css是全局样式表 index.vue是最外面的父组件components是一些组件dist文件...
2019-06-06 13:42:54
1409
原创 NodeJS -- 简单的实现一个登录功能
实现目标：默认起始页面时登录页面，输入账号密码，如果没有此账号那么跳到注册页面，注册成功后进入个人页面。登录时，如果账号密码不匹配，那么跳到错误页面，三秒后跳到登录页面。我们还需要保证如果用户没有登录，那么就不能进入个人页面（通过url)。简单使用express mongoDB.实现效果图：此时数据库里面没有任何数据，那么就不会匹配成功，会跳转到注册页面。点击注册，那么...
2019-06-03 00:11:41
13081
3
原创 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
327
原创 Node.js -- 代理服务器与虚拟主机
代理，也称网络代理，是一种特殊的网络服务，允许一个网络终端（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。一般认为代理服务有利于保障网络终端的隐私或安全，防止攻击。正向代理：简单说就是客户端知道它要访问的IP地址，但是它不能直接去访问，交给一个代理服务器，然后代理服务器代替它去访问。比如公司的内部网，你想要访问外网必须...
2019-05-22 10:24:04
748
原创 NodeJS -- 浏览器缓存机制
浏览器缓存机制上面是浏览器的缓存机制，如果不清楚的小伙伴可以去瞧瞧。我们来简单用代码试试。协商缓存我们先试一下协商缓存的last-modified我们简单的使用http协议创建一个服务器，然后在public目录下面存放一些资源（一个html,一个css)。我们访问html文件。我们使用Last-modified属性，保存的是html文件最后的修改的时间.toUTCStri...
2019-05-19 13:49:40
1683
原创 NodeJS -- 一个简单的静态资源服务器
我们的目标是创建一个静态服务器，我们可以指定主机，端口，和根目录，如果访问的是文件夹，那么就显示文件目录，如果是文件，那么就显示出来。思路：我们使用http模块创建一个服务器，我们从req.url获取pathname,然后和根目录合成文件路径，通过fs.stat模块来判断文件是文件夹还是文件。如果是文件夹，那么通过fs.readdir读取所有文件的文件名，通过handlebars模板htm...
2019-05-17 23:16:40
2402
转载 MarkDown语法
详情可以参考这个这个链接MarkDown语法原博文链接【README.md】Markdown语言常用语法（1）标题 标题使用不同数量的"#"来标识是什么层级，可以对应于HTML里面的H1-H6，下面是示例代码和效果 “========”风格的也可以，但是我不喜欢，赶不上"#"的好用（2）图片 我们可以使用下面的语法，添加一个图片...
2019-05-14 19:56:09
155
原创 Node.js 使用node的net模块 实现一个聊天室
net模块创建的是tcp服务，我们可以下载一个putty来连接服务器。putty原理非常简单，我们使用net.createServer创建一个服务，回调函数里面的socket是一个可读可写流。我们可以监听data来事件来读，同样也可以调用write方法来写。我们简单的使用客户端的ip+port来标识用户。具体详情可以看一下代码，非常简单吧。//使用net 模块 创建一个...
2019-05-11 18:04:30
866
原创 NodeJS -- 实现一个可读流（流动模式）
上一节，我们实现了一个可写流可写流那么我们这一节实现一个可读流的（流动模式）。nodeJs有俩种模式的可读流，一种是暂停模式，一种是流动模式。什么是流动模式了？监听data事件，调用resume()方法，使用Pipe()都是流动模式，流动模式就是说数据是不会经过缓冲区的，像水流一样，只要打开就不停的往下面流。暂停模式就像你用吸管吸一样，你像要多少数据，你就吸多少。流动模式的实现比较简单...
2019-04-27 15:21:46
774
原创 NodeJS -- 简单实现一个可写流
实现node.js里面的可写流主要在于俩个点1：有一个缓冲区，用于对没有来得及写入的数据进行缓存2：有一个字段用来标记当前是否为写入状态。在代码体现为, this.buffer一个数组用来保存缓冲区里面的值，this.writing表示当前是否为写入状态true表示正在写入思路，我们调用write方法，读入数据时对当前状态进行判断，如果writing为false,那么置为true ...
2019-04-25 00:22:27
704
原创 NodeJS -- 设计一个行读取器
使用nodeJS编写一个行读器，函数接受一个路径，然后我们可以监听newLine事件，当读取到一行时，就会向外发送newLine事件，并把读取的值全部返回，当读取结束的时候，向外发送end事件。关键点1：如何实现一个一个字节的读取文件，这个就需要利用流了，我们创建一个可读流，并且是paused模式。关键2：如何判断是否换行了，在不同的操作系统下面这个是不一样的，在window下面是/n/r...
2019-04-23 19:44:34
196
原创 NodeJS -- 异步删除一个文件夹
我们借助fs模块，promise可以很容易办到这一点。我们对当前路径的文件进行判断是文件还是文件夹，如果是文件夹那么递归调用，如果是文件，那么就是要unlink删除。为什么要是有promise了，因为我们需要在子代文件夹和文件全部删除后，删除本文件夹，因为删除子文件也是异步的，所有正好可以使用promise.all，来删除本文件夹。//异步删除一个文件夹const fs = r...
2019-04-21 16:47:20
1271
原创 JavaScript -- 简单理解同步与异步 阻塞与非阻塞
用最简单的话表示同步和异步，阻塞和非阻塞。同步和异步关注的是消息的通知机制阻塞和非阻塞关注的是等待消息的状态同步异步关注的是被调用者，阻塞和非阻塞关注的是调用者场景：我给我的女神表白，调用者:我，被调用者：女神同步阻塞：我打电话给我电话给女神表白，我一直紧张的等着女神回话，什么都没有干（阻塞），女神想了一下（同步）直接把我拒绝了。同步非阻塞：我打电话给我电话给女神表白...
2019-04-17 21:08:47
174
原创 JavaScript -- 搜索引擎的关键字提示功能（字典树）
如上图，类似Google，百度这样的搜索引擎的关键字提示功能，你知道是怎么实现的吗？虽然它们可能实现的比较复杂，考虑到情况比较多，但是归根结底就是一种数据结构Trie树，又称字典树。首先我们先大体认识一下，知道它是一棵树。如下图：现在当然看不出什么东西，最直观的感觉就是一棵多叉树而已，那么上面那棵树是如何形成的了？这是输入hello hi her how see so这些单...
2019-04-14 15:51:35
1370
原创 React -- 自己实现一个react-router-dom里面的一些组件(简单路由）
本次主要实现的是Hash路由，也就是监听/#/后面的hash值得变化。使用过react的都知道，this.props上面有一个比较重要的属性location,match, history等，这一次我们实现里面的几个简单属性，用于完成路由,如下：location: {pathname } history: { push} match: { url, path, params}由于设计到...
2019-03-31 17:40:48
779
原创 前端面试小总结
HTML部分：1：请你说说Doctype的作用。答：用于告知浏览器的解析器用什么文档标准解析这个文档。HTML文档包含形式完整的DOCTYPE，那么他一般以标准模式呈现。DOCTYPE不存在或者格式不正确会导致文档已混杂模式呈现。<!Docutype html>告知浏览器以html5的文档标准解析这个文档。2：请你说一下<head>标签中能够写那些标签。答：...
2019-03-04 23:11:06
357
1
原创 JavaScript -- ES6中类的等价写法
尽管类与自定义类型之间有相似性，但仍然要记住一些重要的区别：1. 类声明不会被提升，这与函数定义不同。类声明的行为与 let 相似，因此在程序的执行到达声明处之前，类会存在于暂时性死区内。2. 类声明中的所有代码会自动运行在严格模式下，并且也无法退出严格模式。3. 类的所有方法都是不可枚举的，这是对于自定义类型的显著变化，后者必须用Object.defineProperty() 才能...
2019-01-25 16:54:34
409
原创 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
333
原创 JavaScript -- 提示页面性能
前端面试经常碰到提示页面性能的问题，换句话说也就是如何让页面打开的更快，更流畅，不卡顿。大致可以总结为几点。1：资源压缩合并，减少HTTP请求HTTP请求基于TCP/IP协议，三次握手四次分手想必大家都知道吧。频繁的HTTP请求势必将造成性能消耗，合理的资源压缩合并，有效的减少HTTP请求次数可以优化性能。2：非核心代码异步加载 (defer async)JS是单线程...
2019-01-21 22:11:13
174
转载 HTML/CSS -- 浏览器渲染机制
转载博主： 浏览器渲染机制我们可能都知道浏览器含有一个渲染引擎，用来渲染窗口所展示的内容。默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件，用于显示PDF格式。但是其具体的渲染原理和流程估计也有很多人都不知道或者不清楚吧。这些天研究了一下浏览器的渲染原理，有了些心得，在这里跟大家分享一下，这里只讨论渲染引擎最主...
2019-01-20 16:10:10
1482
原创 JavaScript -- new 运算符
开门见山,new 运算符的操作步骤当代码 new Foo(...) 执行时，会发生以下事情：一个继承自 Foo.prototype 的新对象被创建。 使用指定的参数调用构造函数 Foo ，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。 由构造函数返回的对象就是 new 表达式的结果。如果构造函数没...
2019-01-17 14:39:57
219
1
原创 HTTP协议 -- 与HTTP协议协作的服务器
用单台虚拟主机实现多个域名在HTTP1.1协议下，同一台HTTP服务器可以搭载多个web站点，提供了效率。我们知道域名会通过DNS解析成一个IP地址，那么无论是www.tricorder.jp 还是 www.hackr.jp都会被解析同一个IP地址。那么服务器如何区分了？这就需要HOST首部了，在相同的 IP 地址下，由于虚拟主机可以寄存多个不同主机名和域名的 Web 网站，因...
2019-01-17 13:29:18
227
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人