- 博客(102)
- 收藏
- 关注
RSS订阅原创 linux命令
ls目录列表 或者dirls -l 显示目录长列表格式ls-a 隐藏文件 前面带.的文件cd切换至哪个目录文件名严格区分大小写退回上一层 cd …退回两级目录 …/…mkdir创建新文件 mkdir 目录名cp复制文件cp 要复制的文件 赋值为什么文件名/或者复制到哪个目录下面cp bbb aaa/bbb 把bbb文件复制到aaa目录下面cp bbb aaa/ccc 把bbb文件改名为ccc复制到aaa目录下面cp -R aa
2022-03-09 17:08:49
673
原创 typeScript-03接口与泛型
接口接口既可以在面向对象编程中表示为行为的抽象，也可以用来描述对象的形状我们用 interface 关键字来定义接口 在接口中可以用分号或者逗号分割每一项，也可以什么都不加定义的变量比接口少了一些属性是不允许的，多一些属性也是不允许的。赋值的时候，变量的形状必须和接口的形状保持一致接口一般首字母大写。有的编程语言中会建议接口的名称加上 I 前缀。//接口可以用来描述`对象的形状`interface Speakable { speak(): void; readonly lng: s
2022-01-13 10:58:38
314
原创 typeScript-02函数与类
函数函数的定义可以指定参数的类型和返回值的类型function hello(name:string):void{ console.log('hello',name); }hello('hhh') //函数声明法 function run():number{ return 123; } // 匿名函数 var fun2=function():number{ return 123; }函数表达式
2021-11-29 16:37:45
360
原创 typeScript-01安装及类型
安装及编译npm i typescript -g全局安装ts若是出错可前加sudo尝试npm i -g ts-node全局安装ts-node目的是帮助我们在不需要编译成js的前提下就可以直接执行ts代码tsc --init 生成tsconfig.js配置文件在项目下新建index.ts文件const a: string = "hello world";console.log(a);终端输入tsc index.ts会自动生成一个inex.js文件v
2021-11-26 10:45:53
368
原创 webpack
npm install webpack webpack-cli --global. 全局安装yarn add webpack-dev-server -D-D 开发依赖-S 生产依赖 Lodash不建议全局安装本地安装步骤初始化创建package.json文件 ： npm init -y/yarn init -y安装webpack: npm install /yarn add webpack webpack-cli -D打包html: yarn add html-we..
2021-11-23 11:04:10
236
原创 面试题1205
mixin局部混入和全局混入；局部混入：顾名思义就是部分混入，也就是只有引入了mixin的混入对象才可以使用，并且只有在引入了mixin混入对象的组件中才生效；//这里注意：属性名为mixins，值为数组类型 mixins:[mixin],由此，我们可以知道mixin混入对象的变量是不会共享的；也就是你page1发生了变化，并不会通知mixin进行实时刷新数据，发生的变化只会在page1.vue中生效，不影响其他组件；全局混入：全局混入我们只需要把mixin.js引入到main.js中，
2020-12-05 09:50:56
112
原创 本地存储
本地存储CookieCookie 的本职工作并非本地存储，而是“维持状态”。在 Web 开发的早期，人们亟需解决的一个问题就是状态管理的问题：HTTP 协议是一个无状态协议，服务器接收客户端的请求，返回一个响应，故事到此就结束了，服务器并没有记录下关于客户端的任何信息。那么下次请求的时候，如何让服务器知道“我是我”呢？在这样的背景下，Cookie 应运而生。Cookie 说白了就是一个存储在浏览器里的一个小小的文本文件，它附着在 HTTP 请求上，在浏览器和服务器之间“飞来飞去”。它可以携带用户
2020-11-13 08:14:29
121
原创 vue面试题
vue面试题1.生命钩子函数在beforeCreate钩子函数调用的时候，是获取不到props或者data中的数据的，因为这些数据的初始化都在ininstate中然后会执行created钩子函数，到这一步的时候已经可以访问到之前不能访问到的数据，但是这时候组件还没有被挂载，所以是看不到的接下来会先执行beforeMount钩子函数，开始创建VDOM(虚拟DOM)，最后执行mounted钩子，并将VDOM渲染为真实DOM并且渲染数据，组件中如果有子组件的话，会挂载子组件，只有当所有子组件全部挂载完毕
2020-11-08 21:07:20
160
原创 json-server
json-serveryarn add json-server -s 下载修改package.json文件，添加"serve": “json-server ./mock/cookbook.json -p 9000 -w”运行 yarn serveGET /posts?_page=7&_limit=20 //查询7页，一页返回十条数据GET /posts?_sort=views&_order=asc //按升序排序GET /posts?_sort=v
2020-11-08 21:00:16
237
1
原创 js数组方法
js数组方法原生数组方法的描述数组方法参数描述函数原理简述原数组变化返回值push(需要插入的元素)添加一个或多个元素到数组的末尾改变操作后的数组长度pop无删除一个数组中的最后一个元素改变被删除的元素shift无删除数组的第一个元素，并返回这个元素改变被删除的元素unshift(需要插入的值)在数组的开头插入一个或多个元素改变数组长度reverse无前后颠倒数组中元素的位置，第一个元素会成为最后一个改变操作后数组
2020-11-08 20:53:45
720
1
原创 前端面试手写
原理实现call()不传入第一个参数，那么上下文默认为 window改变了 this 指向，让新的对象可以执行该函数，并能接受参数Function.prototype.myCall = function(context) { if (typeof this !== 'function') { throw Error("not a function") } context = context || window context.fn = this const args
2020-11-08 20:42:57
100
原创 前端面试题
1.CSS高度塌陷，怎么解决子元素设置浮动以后，子元素会完全脱离文档流，导致父元素高度塌陷解决方案给父元素一个固定的值（只是表面好）overflow设置为hidden在高度塌陷的父元素最后，设置一个空白的div,对其进行清除浮动通过after伪类，添加一个空白的块元素，然后进行清除浮动2.继承什么是对象对象是对单个事物的抽象，对象是一个容器，封装了属性（状态）和方法（行为）原型在javascript中，函数可以有属性，每个函数都有一个特殊的属性：原型(protptype
2020-11-08 20:23:56
728
1
原创 图片优化
图片优化时下应用较为广泛的 Web 图片格式有 JPEG/JPG、PNG、WebP、Base64、SVG 等，老生常谈的雪碧图（CSS Sprites）至今也仍在一线的前端应用中发光发热。二进制位数与色彩的关系在计算机中，像素用二进制数来表示。不同的图片格式中像素与二进制位数之间的对应关系是不同的。一个像素对应的二进制位数越多，它可以表示的颜色种类就越多，成像效果也就越细腻，文件体积相应也会越大。一个二进制位表示两种颜色（0|1 对应黑|白），如果一种图片格式对应的二进制位数有 n 个，那么它
2020-11-05 09:00:04
544
1
原创 输入 URL 到页面渲染的整个流程
输入 URL 到页面渲染的整个流程DNS（Domain Name System）域名系统DNS 的作用就是通过域名查询到具体的 IP。在 TCP 握手之前就已经进行了 DNS 查询，这个查询是操作系统自己做的。当你在浏览器中想访问 www.google.com 时，会进行一下操作操作系统会首先在本地缓存中查询 IP没有的话会去系统配置的 DNS 服务器中查询如果这时候还没得话，会直接去 DNS 根服务器查询，这一步查询会找出负责 com 这个一级域名的服务器然后去该服务器查询 googl
2020-11-04 08:36:13
121
原创 路由原理 hash/history
路由原理 hash/history本质是监听URL的变化，然后匹配路由规则，显示相应的页面，并且无需刷新页面，目前只有两种实现方式Hash 模式History 模式Hash 模式www.test.com/#/ 就是 Hash URL，当 # 后面的哈希值发生变化时，可以通过hashchange事件监听到url的变化，从而进行页面跳转，并且无论哈希值如何变化，服务端接收道德url请求永远是www.test.com。window.addEventListener('hashchange
2020-10-26 08:48:26
835
原创 react.js
一、create-react-app全局安装create-react-app$ npm install -g create-react-app创建一个项目$ create-react-app your-app 注意命名方式Creating a new React app in /dir/your-app.Installing packages. This might take a couple of minutes. 安装过程较慢，Installing react, react-dom,
2020-10-25 17:30:03
211
原创 性能优化
性能优化图片加载优化不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。小图使用 base64 格式将多个图标文件整合到一张图片中（雪碧图）选择正确的图片格式：对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差
2020-10-22 08:36:52
73
原创 安全防范知识点
XSS什么是 XSS 攻击？XSS 简单点来说，就是攻击者想尽一切办法将可以执行的代码注入到网页中XSS 可以分为多种类型，但是总体上我认为分为两类：持久型和非持久型持久型：攻击的代码被服务端写入进数据库中，这种攻击危害性很大，因为如果网站访问量很大的话，就会导致大量正常访问页面的用户都受到攻击。非持久型：一般通过修改 URL 参数的方式加入攻击代码，诱导用户访问链接从而进行攻击。如何防范 XSS 攻击？转义字符：转义输入输出的内容，对于引号、尖括号、斜杠进行转义func
2020-10-21 15:52:05
151
原创 浏览器渲染机制
浏览器渲染机制为什么操作DOM慢DOM属于渲染引擎中的东西，JS又是JS引擎中的东西，当我们通过JS操作DOM的时候，涉及到了两个线程之间的通信，会带来性能上的损耗操作DOM次数多，等同于一直进行线程之间的通信，操作DOM可能会带来重绘回流的情况，导致性能上的问题解决方法虚拟滚动(virtualized scroller)原理：只渲染可视区内容，非可视区域完全不渲染，当用户在滚动的时候就实时去替换渲染的内容什么情况阻塞渲染渲染的嵌套是生成渲染树，所以 HTML 和 CSS 肯
2020-10-21 15:51:32
68
原创 浏览器缓存机制
浏览器缓存机制数据请求步骤：网络请求后端处理浏览器响应浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。浏览器缓存机制缓存位置缓存策略实际场景英语缓存策略缓存位置Service WorkerMemory CacheDisk CachePush Cache网络请求Service WorkerService Worker 是
2020-10-21 15:51:00
58
原创 git
gulpgitee 最多四个人gitlab 公司仓库github 服务端remote 远程仓库workspace 工作区respository 本地仓库index/stage 索引区 暂存区常用命令git status 查询repo的状态.git init 初始化 在本地创建一个仓库git config --global alias.st status 把status改为st //简写命令git add. //会递归地添加当前工作目
2020-09-22 19:40:42
121
原创 生命周期钩子
生命周期钩子beforeCreate在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。应用场景：可以用来初始化变量，这个变量不具有响应式，可以读取this,挂载静态变量created在实例创建完成后被立即调用在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。应用
2020-09-19 14:45:53
344
原创 vue入门
什么是vue一套用于构建用户界面的渐进式框架Vue 被设计为可以自底向上逐层应用Vue的核心只关心视图层直接在浏览器打开：npx http servernpm i browser-sync 下载brower-sync start -s -f */ --directory -w 监听brower-sync(npm,yarn):是node.js 的一个模块引入vue.js直接在官网下载js文件，然后引入<!-- 开发环境版本，包含了有帮助的命令行
2020-09-19 14:31:41
179
原创 JS面试题4
JS面试题4var const let什么是变量提升(host)var变量提升：变量还为声明，我们就可以使用这个未声明的变量，这种情况就叫做变量提升console.log(a) // undefinedvar a = 1等同于var aconsole.log(a) // undefineda=1函数也会被提升console.log(a) // ƒ a() {}function a() {}var a = 1函数提升优于变量提升，函数提升会把整个函数
2020-09-19 09:14:24
99
原创 Vue的插槽，组件，边界情况，自定义指令，渲染函数，插件，过滤器
0918复习组件注册全局组件：用vue.component 必须有templete全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生组件命名：局部组件：定义组件名，给一个对象自变量。放的组件定义的optionoptions关于选项、数据开头的yarn init在script写脚本[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9SwD7seV-1600438178067)(C:\Users\admin\App
2020-09-18 22:11:29
218
原创 JS面试题3
列举一下常见的关系型数据库和非关系型数据库？关系型数据库：Oracle、MySQL、DB2、SQL Server非关系型数据库：MongoDB、NoSql两者的区别有哪些？关系型数据库只支持基础类型存储；非关系型存储格式可以是key,value形式、文档形式、图片形式等，使用灵活，应用场景广泛存储载体不同：关系型数据库存储载体只能使用硬盘；非关系型数据库可以使用硬盘或者随机存储器作为载体关系型数据库支持SQL语句，可用于复杂的查询；非关系型数据库不支持SQL语句非关系型数据库基于键值对存储
2020-09-18 19:25:47
87
原创 MVC，MVP,MVVM
MVC，MVP，MVVMMVCview 视图 ：用户界面Controller 控制器：业务逻辑Model 模型 ：数据保存所有的通信都是单向的view传送指令到ControllerCotroller完成业务逻辑后，要求Model改变状态Model将新的数据发送到View，用户得到反馈互动模式接受用户指令时，MVC可以分为两种，一种是通过view接受指令，传递给Controller另一种是直接通过controller接受指令
2020-09-18 17:21:29
86
原创 JS面试题2
return,break,continuebreak用于完全结束一个循环，跳出循环体。不管是哪种循环，一旦在循环体中遇到break，系统将完全结束循环，开始执行循环之后的代码。 break不仅可以结束其所在的循环，还可结束其外层循环。continue的功能和break有点类似，区别是continue只是中止本次循环，接着开始下一次循环。而break则是完全中止循环。return关键字并不是专门用于跳出循环的，return的功能是结束一个方法。 一旦在循环体内执行到一个return语句，retur..
2020-09-14 09:12:37
164
原创 JS面试题
apply和call方法的异同相同点:两个方法产生的作用是完全—样的，都是改变this指向，第—个参数都是对象不同点:call()方法参数将依次传递给借用的方法作参数，即fn.call(thisobj, arg1,arg2,arg3…argn)，有n个参数apply()方法第—个参数是对象，第二个参数是数组fn.apply(thisobj,arg)，此处的arg是—个数组,只有两个参数2.懒加载原理和应用概念：对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量.
2020-09-06 16:24:53
1211
原创 Ajax的封装
Ajax的封装设计模式: 为了解决特定问题而给出的简洁优化的解决方案懒惰模式: 多种方案选择一种的方式例子: 创建 ajax 对象四种方式封装的时候要判断再找个页面你创建两次的时候第一次要跑断到第四个第二次还是要判断到第四个懒惰模式, 第一次的时候, 判断到第四个, 从第二次开始, 不再进行判断封装ajax对象封装一个函数，创建xhr对象不需要参数返回值就是一个可以在浏览器使用的xhr对象封装过程把每一种创建方式写成一个函数一次去调用这个函数如果
2020-09-06 15:15:21
114
原创 ajax补充
0905ajax前后端交互的一种的手段通过JS向服务端发起请求所有服务端返回的响应都不会直接显示在页面上而是返回给js这个语言说明：JS和服务端交互依赖于浏览器来发送请求ajaxasync 异步javascriptandxml：更严格的html格式使用方法找到一个对象能帮我发送ajax请求XMLHttpRequest()内置构造函数专门创建实例化对象帮你发送ajax请求对本次请求进行一些配置open()的方法语法：xhr.ope
2020-09-06 14:21:09
110
原创 js基础 --数据类型
js基础 --数据类型分成了两个大的类型基本数据类型(简单数据类型)Number 数值String 字符串Boolean 布尔Undefined 空null 空复杂数据类型(地址数据类型 / 引用数据类型)ObjectFunctionNumber 数值一切十进制表示的数字一切浮点数(小数)其他进制表示的数字十六进制, 以 0x 开头八进制, 以 0 开头二进制, 以 0b 开头科学计数法比较大的数字使用科学计数法表示2e5 2 * 10
2020-09-05 10:53:13
85
原创 JS基础 --命名规则和规范
命名规则和规范规则: 你必须遵守, 不然报错一个变量只能由 数字(0-9), 字母(a-zA-Z), 美元符($), 划线下(_) 组成一个变量不能由 数字 开头在JS 中严格区分大小写num Num NUm NUM 这是四个变量不能使用关键字或者保留字关键字: 现在 JS 语法正在使用的关键字(var)保留字: 现在 JS 还没用, 但是将来可能会用的规范: 建议你遵守, 因为大家都这样不要用中文命名变量语义化尽可能使用一个有意义的单词驼峰命名法当一个
2020-09-05 10:41:17
237
原创 JS基础 --JS书写
JS书写分为三种方式行内式(强烈不推荐)内嵌式(不推荐)外链式(推荐)行内式JS代码a标签因为a标签本身就有行为出现当点击的时候，需要区分你是跳转链接还是执行JS代码在href属性里面书写一个javascript:JS代码；非a标签因为没有自己的行为，我们需要给他加一个行为写一个onclick属性，表示当点击时属性值的位置书写JS代码<div onclick="JS代码"></div>内嵌式JS代码在页面书写一个s
2020-09-05 10:02:27
163
原创 nrm
nrm(npm镜像原地址管理工具)npm的下载地址默认在国外下载会比较慢，容易丢包解决办法就是换一个国内的下载地址npm 地址 npm的原始地址yarn 地址 国外的地址cnpm 地址 中国国家做的镜像地址taobao 地址，阿里做的镜像地址nrm 也是一个 “软件”专门管理npm下载地址的软件安装nrm因为他也是一个javaScript的工具所以可以使用npm安装因为不是某一个项目里面使用的需要安装在你电脑的操作系统中使用n
2020-09-05 09:46:19
134
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人