蒋宗正啊-CSDN博客

原创 websocket和socket.io

websocketHTTP 是个懒惰的协议，server 只有收到请求才会做出回应，否则什么事都不干。因此，为了彻底解决这个 server 主动向 client 发送数据的问题，W3C 在 HTML5 中提供了一种 client 与 server 间进行全双工通讯的网络技术 WebSocket。WebSocket 是一个全新的、独立的协议，基于 TCP 协议，与 HTTP 协议兼容却不会融入 HTTP 协议，仅仅作为 HTML5 的一部分。webcocket与http关系那 WebSocket 与 H

2022-03-03 11:51:28 1049 1

原创 typescript中接口和类的区别

ts中的接口一般用来定义数据结构，因为ts中的interface不同于其它强类型语言的一点是，interface中可以定义变量，这就使得interface还可以充当一些model对象的基类使用，而并非通常的用来定义一些行为。接口只声明成员方法，不做实现。ts中的类类声明并实现方法场景接口有什么用呢？设想如下需求：要实现一个print函数，它将传入的对象打印出来。在实际实现上，它将调用对象的getContent方法：function print(obj): void { con

2021-11-07 19:53:27 2295

原创 typescript基础--接口

接口ts的接口与其他语言接口不太一样，其作用可能只是为类型命名或第三方代码定义契约，一开始接触到的时候，看见公司代码里有interface，以为是java一样的接口，但主管告诉我这只是一个数据结构，就像你看见屎，别人非说这是巧克力，我还是很纳闷的，也不敢问，后面才开始慢慢理解：//接口labelvalueinterface LabelValue { label: string;}function printLable(labelObj: LabelValue) { console.log

2021-11-04 08:44:01 165

原创 typescript基础入门一：基本数据类型和解构展开

基础数据类型boolean，string，number，array，tuple（元组，定义一个已知元素数量和类型的数组，各个元素中的类型不必相同），枚举，any，void，null，undefined，never，object，类型断言tuple元组元组类型就是定义一个数组，定义的时候需要定义里面元素的数量和类型，且每个元素的类型不需要相同。例如：//*表示定义了一个有四个元素的数组，第一个类型为string，第二个为number，第三个为string或number类型，最后一个为number类型的

2021-11-02 09:32:10 713 1

原创 html那些你所不知道的事儿

html那些你所不知道的事儿基础标签h/p标签在不设置样式的情况下让其居中：<h1 align="center">标题居中</h1><p align="center"></p>水平线标签：<p>hr 标签定义水平线</p><hr />为html页面添加背景色:<body bgcolor="green"><h2>请看: 改变了颜色的背景。</h2>&lt

2021-11-01 23:47:34 58

原创添加元素到数组的方式以及监听事件杂谈

序国庆闲来无事，写篇前端的技术杂谈，希望对大家有所帮助，主要会讲：void(0)的意义添加元素到数组的六种方法监听事件void(0)void(0)是比较常见的表达式,但它是什么作用呢？我们先看到void，在Javascript中void是一个操作符，该操作符可以传递任何表达式，但是返回值为undefined。由于无论在括号里输入什么，返回的都是undefined，所以我们常用0进行替代。常用的,我们再a标签中输入href="javascript:void(0);"阻止页面的跳转添加元素

2021-10-02 00:29:55 314

原创 !!引发的思考

相信大家都知道!是什么作用，是取反的作用。之前还一直看见!!却没怎么在意，今天又看见了这玩意儿，趁今天有空，给大家讲一下:！！作用：实际上它就是把任意类型的变量转为布尔类型的一种方式，例如:var apple = 'apple';console.log(typeof apple); //stringconsole.log(typeof !apple); //booleanconsole.log(!apple === false); //trueconsole.log(typeof !!app

2021-09-26 17:55:14 56

原创不太知名的Angular模板特性

简述：Angular 12刚刚推出，它给模板添加了一个null合并操作符(’ ?? ')。但是，Angular模板还有哪些你可能从未听说过的特性呢?让我们来看看!ngProjectAsAngular的内容投影有点像Web Components插槽系统。虽然你可以只写，你放在组件标签中的所有内容都会被投影到那里-你也可以为目标投影添加多个带有" select "属性的内容标签。就像下面的例子:@Component({ selector: 'layout', template: ` &l

2021-09-26 16:06:41 173

原创 ng自保存下拉菜单

Angular的自保存下拉菜单——又是一个指令使用Angular指令的强大功能来创建一个可重用的自保存下拉指令。Angular指令是框架提供的一个功能强大的模式，可以用来给元素添加额外的行为。在本文中，我们将创建一个自定义Angular指令，为下拉元素启用自动保存功能。什么是自动下拉保存菜单？考虑一个示例应用程序中的这个简单场景，其中有一个下拉菜单来确定一个人的性别年龄组。这种情况的自然和有效的实现是使用带有选项的下拉菜单。通常使用带有下拉字段和提交按钮的表单。但是，如果这个下拉框不是较大窗体的一

2021-09-26 16:03:36 135

原创如何在Angular中正确地操作DOM ?

序通常，当我们在Angular中使用JavaScript技术时，我们几乎会忘记框架的特性。让我们去使用它们。 web开发中一个有趣的主题是DOM操作。在Angular中，有很多方法可以操作DOM。让我们使用它们而不是直接的JavaScript方法。通常来说，在dom操作时会有两种概念：调整DOM元素调整DOM结构调整DOM元素我们熟悉很多修改DOM元素的JavaScript方法。例如：classList.add()setAttribute()Style.setPropperty()

2021-09-26 16:01:37 1934

原创工作中发现的null、undefined是否为true，false的问题

今天想用三目运算进行如下判断:abc = null;var result = abc ? true : false;然后就开始思考null、undefined是否为true的关系，调研完之后发现原理大致如下现象null==false以及null==true，结果：falseundefined==false以及undefined==true 结果：falsenull==undefined，结果： true详解在某种意义上，null就是空的意思，undefined就是未定义，大概

2021-09-26 13:30:24 4471

原创 RXJS入门

主要目的当我们介绍引入一个概念时，我们应该都会问，这个东西是用来干嘛的，作用是什么，那么同样的，RXJS也是一样，它是用来干嘛的呢？主要目的：有效管理非同步环境下的事件资料。这句话是什么意思呢？这里举个栗子：假如你按顺序发出去12345这五个事件，那么你接收的时候一定是按顺序接收么？答案是不一定的，也就是所谓的异步。这个时候我们就可以使用rxjs，来进行有效的管理事件资料的顺序定义一组可用来处理非同步或事件的js函数库非同步：AJAX/XHRService WorkersetTim

2021-09-26 08:35:22 319

原创 git常用命令大全-不会来这里就对了

Git初始化# 初始化本地git仓库（创建新仓库）git init# 配置用户名git config --global user.name "xxx" # 配置邮件git config --global user.email "[email protected]" Git提交# 提交git commit -m 'xxx' # 合并上一次提交（用于反复修改）git commit --amend -m 'xxx'# 将add和commit合为一步git commit

2021-06-21 16:03:49 55

原创工厂模式之间的区别

本文将对下列概念之间的差异进行说明：工厂构建方法静态构建（或工厂）方法简单工厂工厂方法抽象工厂工厂工厂是一个含义模糊的术语，表示可以创建一些东西的函数、方法或类。最常见的情况下，工厂创建的是对象。但是它们也可以创建文件和数据库记录等其他东西。例如，下面这些东西都可以非正式地被称为 “工厂”：创建程序 GUI 的函数或方法创建用户的类以特定方式调用类构造函数的静态方法一种创建型设计模式构建方法构建方法被定义为 “创建对象的方法”。这意味着每个工厂方法模式的

2021-06-20 12:14:02 164

原创数据结构-链表

前言想要刷链表的算法，那必定得先知道它是什么，它的基本操作。简介各种数据结构，不管是队列，栈等线性数据结构还是树，图的等非线性数据结构，从根本上底层都是数组和链表。不管你用的是数组还是链表，用的都是计算机内存，物理内存是一个个大小相同的内存单元构成的。而数组和链表虽然用的都是物理内存，都是两者在对物理的使用上是非常不一样的，如图：不难看出，数组和链表只是使用物理内存的两种方式。数组是连续的内存空间，通常每一个单位的大小也是固定的，因此可以按下标随机访问。而链表则不一定连续，因此其查找只能依靠别的

2021-06-17 23:58:29 331 2

原创外观模式-typescript

定义外观是一种结构型设计模式，能为复杂系统、程序库或框架提供一个简单（但有限）的接口。场景简单来说就是大家基金都玩吧，股票应该也都懂，某一天感觉自己炒股很厉害，就投了一个亿在股票上，但是最后发现亏了好几个亿，你追悔莫及，感觉炒股太难了，需要懂很多东西，是一个很复杂的系统。然后别人告诉你可以玩基金，基金经理会帮你打理你的钱，获得的利润都是你自己的，这就相当于外观模式。基金经理就是所谓的外观，让我们避免与股票的直接接触，从而规避更大的风险。放到程序开发中，外观类就是给复杂子系统提供一个简单的接口

2021-06-15 09:22:11 123

原创 typescript类型断言

作用：通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”，你会比 TypeScript 更了解某个值的详细信息，你清楚的知道一个实体具有比它现有类型更确切的类型。一般实现的方式有尖括号和as两种方式，但这里只推荐用ad方式。as 语法：(this.transferBtn.nativeElement as HTMLElement).click();这句话就可以告诉ts我知道btn的nativeElement到底是个啥玩意儿，你不用管它进行判断。这样就可以避免编译时报错。...

2021-06-13 18:05:03 71

原创 angualr-ngmodule（简单来说，一看就会）

定义ngModule是什么呢？Angular 应用是模块化的，它拥有自己的模块化系统，称作 NgModule。一个 NgModule 就是一个容器，用于存放一些代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。它可以包含一些组件、服务提供商或其它代码文件，其作用域由包含它们的 NgModule 定义。它还可以导入一些由其它模块中导出的功能，并导出一些指定的功能供其它 NgModule 使用。简单来说就是把一个用来配置ng中一个模块的，告诉angualr这里需要什么它有什么它是什

2021-06-12 10:42:09 761 1

原创你所不知道的git1

序相信初步对git了解的人应该已经能把commit，merge，log这些看的滚瓜烂熟了，接下来给大家介绍一些git中比较实用的高阶指令，妈妈再也不用担心自己被领导骂了。git reset：版本回退小马虎（简称小马）在进行开发时把代码写错了，可能还把别人的代码不小心改掉了，这怎么办呢，哎，别急，git版本回退带你飞。那怎么做呢？首先，git必须知道当前是哪个版本，HEAD表示当前版本，也就是最新的提交。而返回上一个版本就可以用git HEAD^ 进行版本回退，一个^ 就代表一个版本，当想回退到前10

2021-06-07 20:57:57 63

原创初入公司，git中遇到的一些常见问题

Git常见问题dev与本地代码发生冲突**场景：**当dev分支下拉代码时，与本地代码发生冲突**原因：**测试版远端代码更新了，但本地的没有更新，两边代码不一致导致的冲突解决办法：切分支,例如: git checkout feat/2089删除本地dev分支: git branch -D develop获取远程dev分支: git checkout develop2.git stash场景：当本地有修改完的代码，但有一部分不需要上传时，可以使用到stash暂存区来解决。

2021-04-17 20:53:32 96

原创 Chrome控制台的使用

Chrome控制台的使用基础：打开方式：windows:F12mac:fn+F12设置控制台显示位置：控制台右侧点击三个小点图标，dock side就可以进行控制台位置的控制清除信息:当想要清除控制台信息时,则可以控制台输入clear或者点击如下图标来进行清除Elements:expand recursively：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DAkHxHvJ-1617633182986)(img/elements1.png)]..

2021-04-05 22:41:59 1180

原创 Angualr入门第一部分

Angualr一、目录结构“assets”: [ 存放静态资源目录 “src/favicon.ico”,“src/assets”]“index”: “src/index.html”, 单页面，打包编译结果出口“main”: “src/main.ts”, 整个模块化系统启动的入口，其作用为：加载根模块，启动执行模块系统，为整个系统的程序入口。package.json：项目包说明文件，文件中有scripts字段，左边是简易命令，右边是等效的执行程序，即在终端输入 npm run start 和 ng

2021-04-05 22:32:36 313

原创 flex布局--一看就会

flex布局序看了看菜鸟教程的flex布局讲解，晦涩难懂，一头雾水，工作中又要用，那怎么办呢，自己研究用人话再讲一遍就行了呗，希望能帮助到在学flex布局的小伙伴，如有不对请指正对齐方式flex-direction：（主轴方向，这是方向就是东南西北的意思）就是汽车往哪个方向开row、row-reverse、column、column-reverseflex-wrap（换行方式）：wrap、nowrap、wrap-reverseflex-wrap：（是否换行）flex-flow：（flex

2021-04-04 15:34:32 172

原创 angualr3月19日

nz-tooltip：文字提示的样式设置nzTooltipPlacement:表示箭头指向z-index:元素的堆叠顺序z-index:表示多个标签之间的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面-1表示堆叠在最底部auto堆叠顺序与父元素相等inherit表示从父元素继承z-index的值cursor:鼠标悬浮样式：鼠标指针放在一个标签范围内时鼠标悬浮时的光标形状<span style="cursor:a

2021-03-19 19:20:46 202 2

原创 git小命令：cherry-pick

使用场景前提：这里先弄清五个版本本地版本1测试版本2缺陷版本3客户版本4最新版本5是不是光版本就已经看到头大？昨天在提交代码时，将缺陷版本3修复后变为本地版本1，将1提交至产品最新版,5，此时本地版本是没有问题的，但是后面mentor说还需要把代码提交至测试版本审核，还需要同步至客户版本并提出同步需求。但是这时候本地版本是1，并没有可以提交的东西，也不能add全部，那么此时我们就可以用到git cherry-pick这个命令作用提交指定的commit到当前分支，可以理解为摘桃子，从之前

2021-03-18 10:59:34 872

原创每日一题2：说一下宏任务和微任务

宏任务主要包括 script(整体代码)、事件回调、请求回调、setTimeout、setInterval微任务主要就是 Promises.then和MutationObserverMutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知。要概念上，它很接近事件。可以理解为，当DOM发生变动会触发Mutation Observer事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说DOM发生变动立刻会触发

2021-03-18 09:44:01 477

原创每日一题1：1rem、1em、1vh、1px各自代表的含义

remrem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。em子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin用em的话是相对于该元素的font-sizevw/vh全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的话 vh 单位更好。pxpx像素（Pixel

2021-03-16 10:08:49 240

原创 vertical-align

CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐。官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。语法：vertical-align : baseline | top | middle | bottom...

2021-03-14 11:22:19 62

原创 angular基本操作1

格式化进行大写{{heros.name | uppercase}}浏览器会把英雄的名字刷新显示成大写字母。绑定表达式中的 uppercase 位于管道操作符（ | ）的右边，用来调用内置管道 UppercasePipe。管道是格式化字符串、金额、日期和其它显示数据的好办法。 Angular 发布了一些内置管道，而且你还可以创建自己的管道。数据双向绑定angualr中采用ngmodule进行数据的双向绑定，语法：<input [(ngModel)]=“hero.name” plac

2021-03-11 13:12:59 127 2

原创初识Angualr

安装angularangualr的windows版本依赖node，python和visual Studio，所以需要先去官网安装这些。然后开始安装：npm install -g @angular/cli使用帮助ng help初始化项目ng new <项目名称>踩坑一：使用ng new初始化时发现报错：settimeOut is not defined。这是由于安装脚手架时使用的cnpm进行安装，我们应使用npm进行安装，所以写在脚手架，通过 npm instal

2021-03-05 18:03:23 115

原创 Promise详解1

定义大家应该都知道promise是js中执行异步操作的一种方式，英文叫做承诺，那么为什么叫做承诺呢，因为每个promise都承诺会有一个then去处理状态改变后的操作，即一个 promise 必须有一个 then 方法用于处理状态改变状态说明Promise包含pending、fulfilled、rejected三种状态：pending：初始等待状态，即新建完promise之后的状态resolve：指已经解决，将 promise 状态设置为fulfilledrejected：指拒绝处理该请求，将

2021-03-02 13:19:01 71

原创 JavaScript原理剖析（js运行机制）

javaScript为什么是单线程JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。同步和异步单线程就意味着，所有任务需要排队，

2021-02-28 20:06:21 388

原创 VUE面试题

题目比较一下vue和reactvue组件之间的通信种类，通信实现方式说说对vuex的理解说说Vue的MVVM实现原理答案1比较一下vue和react相同点：都是组件化开发，都有虚拟dom都支持props进行父子组件之间数据通信都支持数据驱动视图，不直接操作dom都支持服务器端渲染不同点：数据绑定：vue实现了数据的双向绑定，react数据流动是单向的组件写法不一样，react推荐把html和css都写进javaScript中，vue推荐html，css和js分开R

2021-02-18 11:14:03 289

原创 JS异步编程方案

同步编程同步编程指的是当一个任务在执行时，另一个任务需要等到之前的任务执行完毕才能继续执行，换句话说，就是一段代码的执行会阻塞另一段代码的执行，这就叫做同步编程。异步编程异步编程指的是当一个任务在执行时，另一个任务也可以同时执行，一段代码的执行不会阻塞另一段代码的执行，这种叫做异步。js为什么需要异步编程js是单线程的，所以如果js都是同步执行代码的话，就会造成阻塞。因此在js编程中，会大量使用js来进行异步编程。js异步编程方式先放结论：回调函数fs.readFile(A,'utf-8

2021-02-17 15:54:23 110

原创 npm安装包时报错

问题今天在安装vuex时又遇到了这个错误，看了网上很多教程都不是很详细，还容易倒腾坏，这里总结一下我的办法：输入如下命令:npm set registry https://registry.npm.taobao.org/然后重新输入安装命令就行，我这里装的是vuex，命令如下：cnpm install vuex --save安装成功！...

2021-02-10 19:44:26 138

原创设计模式之观察者模式（简单得不得鸟）

定义观察者模式又叫做发布-订阅模式，它定义了一种一对多的依赖关系，让多个观察者对象同时去监听某一个主题对象，这个主题对象在状态发生变化时，会通知所有观察者对象，使他们能自动更新自己。结构图：具体描述这个模式我们可以用微信公众号来举例子，有一天你在网上发现某一公众号有很多岛国资源，你特别开心，对里面的内容非常感兴趣，那么你就点了关注，此时你相当于订阅者（subscribes）订阅了该公众号（publisher）的内容。此时就相当于观察者模式，你是观察者，监听着公众号发布的消息通知，假如公众号发布新通

2021-02-01 21:51:09 62 1

animate.css-4.1.1.zip

空空如也