EZstar-CSDN博客

原创从前端角度出发理解架构模式：MVVM,MVC,MVP

视图层view：html,css等配合渲染出页面的文件模型层Model: 就理解为数据（业务逻辑什么的要是放在后端，那前端不用管，要是放在前端，那不应该属于模型层）上面两层的概念不变，那么理解这三种模式的区别其实就是在理解Controller层，Presenter层，ViewModel层三者的区别以及几层间交互方式的区别。

2024-04-13 19:11:21 571

原创 next build打包的时候如何跳过eslint和tstype类型检测

打包时因为eslint报错或ts类型检测报错中断了build怎么办？next build打包的时候如果跳过eslint和tstype类型检测？

2024-04-12 17:08:20 105

原创从node http构建服务端的角度去理解单页面路由以及SSR(服务端渲染)

从返回资源的角度去理解，所谓的SSR渲染，其实就是在服务端就生成好了对应的html资源，然后客服端访问不同路由时，服务端就会返回对应的资源。这也就解释了为什么SSR对seo友好，因为html包含的内容已经生成好了，更利于引擎抓取，以及页面已经在服务端生成渲染好了，首屏加载的速度会更快，用户更快看到页面，体验更好，在网站停留下的可能就越大（比如有些网站半天打不开，用户一生气就退了），用户在网站停留时间越久，就越有利于网站排名相关的数据，最终也会反馈到seo上，这也是为什么提升网站性能也是优化seo的原因

2024-04-12 16:44:56 671

原创 React18新hook useDeferredValue详解

比如网上很多文档都写到useDeferredValue可以设置延迟时间，即第二个参数timeoutMs，写法如此 useDeferredValue(text, { timeoutMs: 2000 })。如果你看了这些概念，便很合理的就会认为useDeferredValue就是一个可以手动设置延迟获取state变更后的值的hook，然后再去跑代码，发现根本不生效，坑爹啊。我不知道timeoutMs这个属性是从哪里传出来的，一是官方文档根本没提到过，二是包里的ts定义也没有.....

2024-04-09 20:24:07 804

原创 js基础类型Symbol的应用场景

Symbol作为es6新增的变量基本类型，其特性是独一无二且不可变的数据类型。

2024-03-29 16:55:14 181

原创 typescript版本问题导致项目启动后，内部页面报错

记一次项目中，由于type script版本过高导致的问题。问题描述：项目能正常跑起来，但是由于typescript版本问题导致tsx文件解析有问题，进而导致了控制台报了一些react的方法问题的错。且当时终端无任何错误提示，只有一闪而过的typescript版本过高的提示，最后根据这条提示降低了typescript版本，运行就正常了。感想：所以报react xx方法有问题，不一定是代码写错了，也可能是由于编程环境导致代码解析出错了。解决方案：1，修改package.json中的typescript版

2022-03-07 18:40:39 2459 4

原创 macOS 安装brew；brew安装其它包的指令

macOS command+空格打开搜索框，然后打开terminal。terminal输入指令安装brew/usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"brew安装成功，显示 Installation successful! 或者 Checking out files: 100% (5392/5392), done.。brew常用指令brew update 更新

2022-03-01 19:35:54 321

原创前端pm2部署项目&pm2常用指令

PM2 简单使用首先安装，根据node环境，使用npm指令安装npm i pm2 -g安装完成后，就可以使用pm2的指令pm2 start npm --name '进程名' --watch -- run start这是一句复合指令，其作用就是在输入该指令的目录下，执行npm run start的命令。pm2创建进程时，会将输入命令的路径作为执行文件路径pm2 start npm --name '进程名'创建一个新进程任务--watch给该进程增加监听功能，执行文件改变，重启任务p

2021-11-23 17:18:51 969

原创 git指令大全&git生成压缩包&git生成某次commit的补丁（见九）

一，新建项目 git init初始化一个git仓库 git init 项目名称新建一个目录，并为其初始化git仓库 git clone url克隆一个项目二，配置项 git config --list显示当前git配置 git config -e --global编辑git配置文件 git config --global user.name "用户名" git config --global user.email "邮箱"配置仓库关联用户的用户名和邮箱，–global

2021-11-23 17:13:45 1877

原创 npm指令大全&npm发布自己的包，删除发布包的指定版本（见第四部分）

一，包的安装/更新/卸载npm i 或者 npm install装包,默认安装最新版本，直接npm i 会安装package.json中dependencies的所有包npm i [email protected]安装指定版本npm i -S 或者 npm i --save装包到生产环境（也就是上线后需要的依赖），在package.json的dependencies中生成版本信息npm i -D 或者 npm i --save-dev装包到开发环境（也就是开发时需要的依赖），在package.json的d

2021-11-23 17:10:30 2287 1

原创 js实现继承的数种方法

先定义一个类，用来被继承:function xx(name){ this.name=name;}xx.prototype.eat=function(food){ console.log(this.name+'正在吃'+food);};一。原型链继承：function Cat(){ }Cat.prototype=new xx();Cat.prototype.name='cat';var cat=new Cat();这种继承方式就是将Cat类的原型指向改变成指向xx类的实例，父类

2021-07-08 11:36:48 90

原创关于闭包的一些见解

闭包的意义：在不污染全局环境的前提下，使一个变量能够复原。如何实现闭包：分三步，第一步把冰箱打开，第二步把大象装进去，第三步关上冰箱-------没有，开个玩笑。1，外层函数嵌套内层函数2，内层函数使用外层函数的局部变量3，把内层函数作为外层函数的返回值代码示例如下function xx() { var a = 1; return function yy(n) { a += n console.log(a)

2021-07-08 10:39:28 73

原创函数柯里化，使用JS实现

函数柯里化看起来是一个特别专业的名词，其实就是函数里面返回函数，是高阶函数的特殊用法。柯里化的好处就是能够复用参数，或者说固定参数。举个简单例子，柯里化就很好理解了。 // 未柯里化的函数 function test(a,b) { return a + b } test(1,2) // 3 // 柯里化之后 function test(a) { return function(b) { return a + b } } test(1)(2) // 3 // 柯里化实现

2021-07-06 16:00:29 154

原创防抖与节流

防抖和节流的出现，都是为了解决事件触发十分频繁的问题。个人认为，节流是防抖的优化，因为防抖只能做到在一段时间内，事件不会一直触发，但是要是一直进行触发这个事件的操作，那么根据防抖的设计，计时器就会一直刷新，导致事件一次也触发不了。下面直接上代码吧。防抖实现:function fangDou(fn, delay) { let time = null return function() { if (time) clearTimeout(time) // 如果time存在，就说明定时器已经触发过一

2021-07-06 10:45:15 106

原创 js实现LRU与FIFO算法

首先，这两种算法都是为了构建一个缓存函数，用以控制数组长度。FIFO的设计理念是：当达到缓存上限时，就去掉最先加进来的一项。LRU的设计理念是：当达到缓存上限时，去除最不经常访问的一项。那么怎么判断谁是最不经常访问的一项呢？做法就是每当访问的时候，就把被访问的那项提升到末位。也就是说，要是没读取任何一项，还是去掉最先加入的一项。js代码实现：FIFO函数class FifoCache { constructor(maxCache) { this.maxCache = maxCache

2021-07-05 14:05:28 146

原创 ES7装饰器decorators解析

ES7装饰器decorators解析1，首先思考一个问题，在哪种情况下需要用到装饰器，装饰器的作用是什么？我自己的答案：装饰器可以修改类里面的属性，或是新增类的属性。在需要就类原本的功能扩展新功能时会用到装饰器。我当时理解到这里时不禁产生了一个疑问，如果只是这样，要加新功能直接在类上面加就是了，为什么还要弄个装饰器出来呢？解释是，自己定义的类，想怎么改属性当然就能怎么改了，但是继承的类呢，比如说有一个你自己写的react组件，它继承于component，你现在想修改它的componentUpdate生命

2020-12-23 18:39:57 298 2

原创 js数据类型

基本数据类型：数值型number字符型String布尔型Boolean未定义型undefined空型null引用数据类型：数组array函数function对象object数据类型转换：1，转换成字符型隐式转换：数字加字符串，就会转换成字符型显式转换：String（123）；或是var num=123，num.toString（）...

2020-07-02 10:44:04 85

原创 HTML5新增的标签（常用）

HTML5新增标签语义化标签<header>头部</header><section>内容</section><footer>脚部</footer><article>文字区域</article><aside>侧边栏</aside><nav>导航栏</nav>视频标签<video> <source src="xx.mp4" typ

2020-07-01 17:14:28 120

原创元素布局与居中-垂直居中与水平居中的几种方法

HTML（在不设置css属性的情况下）根据元素类型不同而布局不同，块级元素靠左边向下排列，行内元素和行内块元素不会独占一行，可以横向排列。所以不借助css的话，页面布局就会有很大的局限性。能够影响布局的css属性（常用）：属性属性值作用marginxxpx设置盒子外边距，可以理解为包裹电视机的泡沫，在外部影响了电视机与桌子的距离paddingxxpx设置盒子内边距，调整盒子内容的布局positionabsolute（绝对定位）relative（相对定位）fix

2020-06-30 18:53:17 290

原创 BFC剖析

首先，BFC作为一个特殊的容器，或者说特殊的布局环境，因为并不是div这种需要标签生成的box，而是通过某些条件激活的一个环境，所以严格来讲不能称为容器，它有几条规则。1.在BFC环境下，每个元素都会贴着BFC的边框“垂直”排列。例如：两个div，一大一小，小的设置了左浮动，看起来的效果就是小的贴着大的的左边和上边，并且覆盖住那一部分。2.BFC垂直方向的距离由margin决定，属于一个BFC的两个相邻元素会发生margin重叠（也就是会发生塌陷和margin-bottom和margin-top重和

2020-06-29 11:11:44 117

qq_42619099的博客