- 博客(33)
- 收藏
- 关注
RSS订阅
原创 前端八股文
前端八股文随着准备面试汇总一些我觉得重要的面试考点。这个是目录，随着复习随着更新文章目录前端八股文JS基础前后端通讯安全工程化REACTVUETypeScriptJS基础原型对象和原型链.作用域、作用域链和执行上下文.数据类型var、const、let 对比es next 最新规范new 的过程this 指向问题bind 实现方式闭包事件循环 【超高频】类型判断手写 Promise异步&同步ES6新语法前后端通讯输入 URL 到页面展示 【超高频】跨
2021-05-16 15:04:38
14311
6
原创 Git常见操作整理
从远程仓库拉取全部分支的代码git clone ~~~~ 克隆主分支代码git branch -a 查看远程所有分支git checkout XXXX 本地新建远程同名分支git remote 列出已经存在的远程分支git remote -v 列出详细信息，在每一个名字后面列出其远程urlgit pull origin XXXX 拉取全部远程代码...
2021-11-16 13:52:21
729
原创 AFrame中渲染器的写法
AFrame中渲染器的写法渲染器在AFrame中作为材质的一个属性使用，全局注册后可以作为一种材质配置在material下我们知道WebGL是基于OpenGL的，而OpenGL用GLSL（OpenGL Shading Language）这一着色器语言完成着色器工作，因此，WebGL的着色器程序大致与GLSL相同。着色器通常分为几何着色器（Geometry Shader）、顶点着色器（Vertex Shader）、片元着色器（Fragment Shader）等等。由于WebGL基于OpenGL ES 2.
2021-08-05 15:22:39
318
1
原创 深拷贝的多种方法
function deepCloneEasy(target){ if(target!==null &&typeof target==="object"){ return JSON.parse(JSON.stringify(target)) }else{ return target }}// 这个方法虽然简单但是会丢失方法 且循环调用会出问题function deepCloneHard(target,map=new Map()){
2021-06-14 11:16:56
253
原创 meta标签
meta标签一、meta标签的定义meta标签是head部的一个辅助性标签，提供关于 HTML 文档的元数据。它并不会显示在页面上，但对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（SEO），或其他 web 服务。二、meta标签的作用meta标签里的数据是供机器解读的，其主要作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等等。三、meta标签的可选属性在W3school中
2021-06-13 18:45:05
2525
原创 Redux
Redux什么情况下使用redux某个组件的状态，需要共享某个状态需要在任何地方都可以拿到一个组件需要改变全局状态一个组件需要改变另一个组件的状态工作流程容器组件(用户)发出Action。容器组件：容器组件中要引入action，就是要引入需要操作的动作action_creators：(做什么，然后将需要做的事分发给STORE)Action Creators 把动作分发给StoreStore：负责中转，redux的主要组件Store 自动调用 Reducer，并且传入两个参数：
2021-06-01 22:27:02
196
原创 React三大属性和通信（组件间&组件内）
组件的三大属性state1. 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示2. 初始化指定: constructor() { super() this.state = { stateName1 : stateValue1, stateName2 : stateValue2 } }3. 读取显示: this.state.stateName14. 更新状态-->更新界面 :
2021-05-30 21:53:29
235
1
原创 react项目细节流程
本项目的git仓库不看攻略手写一个react+redux后台管理系统B端项目 直接用的ANTD，肯定没那么好看关于redux想要获取redux中的数据，写在connect的state和方法参数中，调用：this.props.参数/方法名容器组件想要冲redux中取值。state=>{一般和后面是一样的：state.reducer的Index中定义的名字} ,方法通过action引入写在class组件中的参数，需要是表达式 state={a:***}, 调用：this.state.a2
2021-05-30 20:47:09
1472
原创 VScode远程同步配置
安装插件 Setting SyncGITHUB设置github -> Settings 在左侧 Developer settings -> Personal access tokens起个名字会生成一个token,保存下来。Vscode中设置命令面板（Ctrl+Shift+P）----输入sync----选中sync:Update/Uploading Setting登录你的Github账号，就自动上传/更新了，全程没有用到token下载也是一样的步骤只是选中：sync:Do
2021-05-29 10:02:03
273
原创 Vue(不全)
vue官网https://vuejs.org/https://cn.vuejs.org/介绍描述作者: 尤雨溪(一位华裔前Google工程师)渐进式JavaScript 框架 渐进式主要体现在vue的使用和学习路线并不陡峭, vue本身只是一个视图层的框架.只负责数据的渲染. 没有ajax获取数据的能力,没有布局能力. 就连最擅长的数据处理在遇到复杂业务场景时,也变的很艰难起来. 这就需要大量的第三库来支持vue进行复杂应用开发. 当然如果你的项目不复杂你就
2021-05-27 14:13:20
241
原创 React Hook
React HookHook 是一些可以让你在函数组件里 “ 钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。hook出现的原因避免地狱式嵌套，可读性提高。函数式组件，比class更容易理解。class组件生命周期太多太复杂，使函数组件存在状态。解决HOC和Render Props的缺点。UI 和 逻辑更容易分离。hook使用规则只能在函数最外层调用 Hook。不要在循环、条件判
2021-05-27 11:31:49
262
原创 跨域问题(没写完)
跨域问题同源策略&跨域同源策略：浏览器的一种安全策略。同源：协议（http/https）域名 端口号 必须完全相同。违背同源策略就是跨域跨域：跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。非同源收到那些限制：cookie不能获取DOM无法获取Ajax请求不能获取数据jsonp解决跨域（只支持get请求）jsonp的原理：利用就是利用script标签没有跨域限制，可以通过s
2021-05-25 17:20:12
99
原创 REST
RestfulREST APIURL定位资源，用HTTP动词（GET,POST,DELETE,DETC）描述操作。发送请求进行CRUD哪个操作由请求方式来决定同一个请求路径可以进行多个操作请求方式会用到GET/POST/PUT/DELETE非 REST API请求方式不决定请求的CRUD操作一个请求路径只应对应一个操作一般只有 GET/POST客户-服务器（Client-Server）客户端服务器分离优点:提高用户界面的便携性（操作简单）通过简化服务器提高可伸缩性（高性能
2021-05-21 14:44:05
115
原创 Cookie、session和localStorage、以及sessionStorage
cookie和session的区别HTTP是一个无状态协议，因此cookie最大的作用就是存储sessionID用来唯一标识用户实现机制：Session的实现常常依赖于Cookie机制，通过Cookie机制回传SessionID；大小限制：Cookie有大小限制并且浏览器对每个站点也有cookie的个数限制，Session没有大小限制，理论上只与服务器的内存大小有关；安全性：Cookie存在安全隐患，通过拦截或本地文件找得到cookie后可以进行攻击，而Session由于保存在服务器端，相对更加安
2021-05-21 10:46:56
155
原创 HTTP&HTTPS工作原理
HTTP和HTTPS的区别HTTP：超文本传输协议，是一个客户端与服务器端请求和应答的标准（TCP），可以使浏览器更高效，信息是明文传输，无状态HTTPS：是以安全为目标的HTTP通道，在HTTP下加入SSL层HTTPS需要CA证书，贵！HTTP协议端口：80 HTTPS端口：443HTTPS协议的工作原理建立一个信息安全通道，来确保数据的传说，确保网站的真实性客户端C 使用https url 访问服务器S ，要求与服务器S 建立SSL链接。服务器S 接收到客户端C请求之后，
2021-05-20 20:40:01
475
原创 手写Promise
手写Promise面试中经常涉及的一个问题，下面一步一步完成一下。其中重点是写一个 Promise.all手写一个promise类在写之前我们先确定一下promise本身封装的一些方法promise的常用方法构造函数：excutor执行器函数 resolve函数 reject函数执行器函数Promise内部立即同步回调，这个部分在promise执行顺序的题中经常遇到promise.prototype.then 成功&失败的回调 onResolved函数 onRejected函数p
2021-05-20 16:07:21
1033
原创 ES6新语法——Class类
ES6新语法——Class类：ES6提供了更接近面向对象（注意：javascript本质上是基于对象的语言）语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。类中有构造方法：constructor方法，通过new命令生成实例时，会自动调用该方法，如果没有显示定义，会默认添加一个空得constructor。constructor方法默认返回实例对象（即this），但也可以指定返回另外一个对象。类的方法：不需要function关键字可以使用类名.protot
2021-05-20 13:16:12
135
原创 call,bind,apply的区别
call,bind,apply的区别简单来说:三个方法的主要作用都是改变this指向。call和apply都是，改变指向之后，立即执行。但是bind仅仅改变this指向，不调用函数call 和 bind直接将第二个参数及其以后的参数作为参数传入函数体内。但是apply需要将所有参数放入一个数组内。但是其实这并不准备call和bind的区别：它和 call 很相似，接受的参数有两部分，第一个参数是是作为函数上下文的对象，第二部分参数是个列表，可以接受多个参数。它们之间的区别有以下两点。
2021-05-20 11:27:04
836
原创 JS new一个对象的过程
new一个构造函数的流程得到了实例继承了构造器的构造属性主要有3步：创建一个空对象，将它的引用赋给 this，继承函数的原型。通过 this 将属性和方法添加至这个对象最后返回 this 指向的新对象，也就是实例（如果没有手动返回其他的对象）但是：它只描述了构造器属性是如何塞给实例，没说原型上的属性是如何给实例继承的。改写：以构造器的prototype属性为原型，创建新对象；将this(也就是上一句中的新对象)和调用参数传给构造器，执行；如果构造器没有手动返回对象，则返回第一步创
2021-05-19 14:36:23
196
原创 JS继承
JS完成继承的六种方法：和其他功能一样，ECMAScript 实现继承的方式不止一种。这是因为 JavaScript 中的继承机制并不是明确规定的，而是通过模仿实现的。这意味着所有的继承细节并非完全由解释程序处理。作为开发者，你有权决定最适用的继承方式。首先我们定义一个父类：// 定义一个动物类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){
2021-05-19 14:04:26
792
原创 babel装饰器语法
babel装饰器语法：安装装饰器：npm install save- @babel/plugin-proposal-decorators修改配置文件 config-overrides.jsconst { addDecoratorsLegacy} = require('customize-cra'); module.exports = override( addDecoratorsLegacy() );写法：//@后是一个方法，把紧随@后的内容作为参数传给@方法@de
2021-05-18 14:10:57
333
原创 实现多页签通讯的几种方法
实现多页签通讯的几种方法：websocket协议localstorage、cookieSharedWorker(HTML5新特性)websocket协议：webSoket用来实现双向通信，客户端和服务端实时通信。webSoket优点和缺点：优点：对于前端来说，使用简单，功能灵活，如果部署了webSocket服务器，可以实现实时通信。缺点：需要服务端技术的支持，如果websocket数据量比较大的话，会严重消耗服务器的资源。websocket服务器端搭建//初始化一
2021-05-13 14:51:09
480
原创 React控制台提示安装react devtools
控制台提示：运行react项目的时候浏览器控制台总会有这个提示，强迫症患者忍不了，决定解决一下。安装react devtools：这里就是提示你去安装devtools调试工具尝试了一下按照教程NPM安装的方式，非常复杂还不是很好用直接在Chrome商店下载插件即可提示就没有啦...
2021-05-08 09:42:47
282
原创 fMRI功能磁共振图像的预处理
fMRI介绍：低分辨率的功能像要与高分辨率的解剖像叠加融合，或配准到已知的空间解剖结构中表现出来是FMRI数据处理和分析的主要任务Fmri原始数据是以dicom数据格式存在的压缩文件，解压后，得到原始文件。原始文件以“IMA”下为后缀。对于功能像（fMRI）的数据，有多少个TR就有多少个IMA图像文件，即每个IMA文件就是一个完整的volume；MRI数据也是一个完整的volumeFMRI预处理：头部运动的校正是一个理想的单体 (Subject)单模态(Modality)配准，常基于刚体运动模型
2021-04-25 16:27:28
2582
原创 Node原生服务器的搭建
配置环境：连接Mongodb数据库安装Node、npm/yarn安装yarn :在项目根目录的终端执行// 把项目封装成包yarn inityarn add mongoose未安装yarn也可以直接用npm// 把项目封装成包npm initnpm i mongoose --saveNode原生搭建服务器：提示：express框架可以快速搭建，这里只是提供一个当大//1.引入Node内置的http模块let http = require('http')//引入
2021-04-20 10:06:23
297
原创 ES6-Babel-Browserify模块化教程
ES6-Babel-Browserify模块化教程1. 创建项目结构|-js |-src |-module1.js |-module2.js |-module3.js |-app.js|-index.html|-package.json { "name" : "es6-modular-0719", "version" : "1.0.0"}2. 安装babel-cli, babel-preset-es2015和browserify:第一步，全局安
2021-04-13 10:35:39
198
原创 前端面试--函数防抖和函数节流
函数防抖和函数节流：函数防抖（debounce）概念：延迟要执行的动作，若果在延迟的这段时间内，再次触发，取消之前开启的动作，重新计时举例：电脑休眠，一旦鼠标移动，就重新计时实现：定时器应用：搜索时等用户完整输入内容后在发送查询请求（自动）let inputNode = document.getElementById('user_id');let id; // 定时器需要定义在函数外，不然每次都会被清掉inputNode.addEventListener('keyup',function()
2021-04-11 15:14:45
388
原创 原生JS遍历时获取下标的三种方式
原生JS遍历时获取下标的三种方式设置元素自定义属性： <nav> <div class="nav-item" index = "0">AAL</div> <div class="nav-item" index = "1">AAL</div> <div class="nav-item" index = "2">AAL&
2021-03-31 13:35:10
2466
原创 JS移动端适配问题的解决方案
JS移动端适配问题的解决方案：定值解决：前提条件：稿件宽度 375px设置 font-size：100px（可以自定义）所有CSS内单位写为rem document.documentElement.style.fontSize = document.documentElement.clientWidth *100/375 +'px'; window.onresize = function (){ document.documentElement.style.fontSize
2021-03-24 11:02:56
256
原创 JS实现堆
JS实现堆：JS中没有封装好的队列、栈和堆。队列和栈可以用数组模拟，但是堆需要自己封装数据结构。或者封装一个构造函数，每次建堆都是一个实例化的过程。在JAVA和C++中也都提供了优先队列这个数据结构，这个数据结构的底层实现也是用堆完成的。下面我们用JS模拟一个堆以实现优先队列。堆的几个特性：堆本身是一棵满二叉树，这里我们实现一个小根堆左孩子索引 = （父元素索引+1）*2-1右孩子索引 = （父元素索引+1）*2插入元素放在树的最后（树是用数组实现的，也就是push到数组的最后面），然后比
2021-03-23 10:30:25
885
1
原创 作用域、作用域链与执行上下文
作用域、作用域链与执行上下文作用域一、作用域的作用二、作用域&执行上下文1.执行上下文2.作用域和执行上下文的区别三、作用域链1.查找变量的流程2.作用域链3.作用域链和执行上下文作用域作用域本身是一个抽象的概念，在定义时就已经创建好了一、作用域的作用隔离变量规定当前函数之后创建的作用域链的上一条作用域链是什么样的具体形式：[[scopes]]：上一级作用域链二、作用域&执行上下文了解两者的区别时，首先要了解什么是执行上下文1.执行上下文执行上下文代表了代码执行的环
2021-03-11 13:07:30
1567
3
原创 JS中关于原型对象的理解
JS中关于原型对象的理解原型对象prototype举例解释以上四点原型对象prototype每个函数都有prototype，该属性指向原型对象（显式原型对象）每个实例都有_proto_属性，该属性指向原型对象（隐式原型对象）构造函数的显示原型对象===当前构造函数实例对象的隐式原型对象原型对象的本质：普通的Object对象，非函数对象所有函数都是new Function产生的，包括Function自己举例解释以上四点// 以该函数为例function Foo(){}var foo =
2021-03-10 18:28:17
2445
原创 WebStorm2020配置
WebStorm2020配置方法WebStorm介绍Less和min的安装配置到WebStormWebStorm自定义快捷键WebStorm介绍WebStorm 在前端开发中是必不可少的一部分，新版本的WebStorm相比较于老版本有些不同，随用随更新。Less和min的安装Less 扩充了 CSS 语言,增加了诸如变量、混合(mixin)、运算、函数等功能。 Less 既可以运行在服务器端(Node.js 和 Rhino 平台)也可以运行在客户端(浏览器)。Min主要用于压缩代码，less相较于
2021-03-09 10:14:53
3259
8
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人