gaoshanyangzhi_1999的博客

原创 JS防抖节流其实很简单

情景在日常生活中，不难见到验证码已发送后按钮变灰倒数内不能再次触发、搜索框输入后1000毫秒搜索、表单验证输入1000毫秒后验证，这些场景都是防抖节流的应用。具体哪个对应防抖，那个对应节流，先不急。防抖什么是防抖？我们读读字面意思。防抖，大概就是一种短时间频繁触发，我认为你手抖了，然后被忽略了，更新计时，直到指定时间内你不再频繁触发，我认为你才是正常触发。官方一点：不管事件触发频率多高，...

原创 redux

前言在我做第一个项目时，并没有使用redux,但是大家都说redux很重要,那我们怎么判定自己项目是否需要redux？有人说过一句话：“如果你不知道是否需要 Redux，那就是不需要它。”好像说了，大家可能还是不懂如何区分？大致概括如下：某个组件的状态，需要共享某个状态需要在任何地方都可以拿到一个组件需要改变全局状态一个组件需要改变另一个组件的状态举个例子，如下的需求，第三行...

原创 图片裁剪

概述在项目中，我们常常遇到图片裁剪的问题。不论是某个博文封面或者头像，都会用到裁剪。今天我们就来说说大致的思路。图片准备如果是写在项目中的裁剪，我们最好将它封成组件，这样在需要的地方方便调用。巧妇难为无米之炊，所以我们的第一步便是准备图片。<input type="file" id="myfile" class="coverpic" accept="image/*" onchange...

原创 npm install、npm install -g、npm install --save与npm install --save-dev区别

异同一览异同点npm installnpm install -gnpm install --savenpm install --save-dev模块安装至node_modules目录下√×（安装至全局）√√将模块依赖写入devDependencies×××√将模块依赖写入dependencies××√×devDependenci...

原创 预处理语言less

预处理语言预处理css，​ 可以使用 变量 、循环 、继承 、自定义方法等多种特性的标记语言，逻辑性得以大大增强。包括Sass、Less 、Stylus 。LessSass 与 Stylus 相比于 Less 功能更为丰富，而Less 没有去掉任何 CSS 的功能，而是在现有的语法上，增添了许多额外的功能特性。它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS...

原创 react 常用 hook

Hook是什么Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。例如，useState 是允许你在 React 函数组件中添加 state 的 Hook。什么时候使用Hook编写函数组件并需要向其添加一些 state常用hookuseState语法const [count,setCount]=useState(0)解释通过useState()声明，会返回一个...

原创 Meta 的 referrer 策略

背景及问题在写项目时，后端请求回来的wiki里面有一部分是来自外网，动态赋给src属性，结果加载不出来，控制台报错403。名词解释引用策略：是从一个文档发出请求时，是否在请求头部定义 Referrer 的设置。HTTP Referer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，服务器基此可以获得一些信息用于处理...

原创 在react项目中使用阿里iconfont字体库的svg图标

阿里矢量图库阿里矢量图标库是国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能，是阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具。在很多项目中，我们会使用到大量的小图标，这种情况下，使用字体来实现图标就有很多优势：字体文件小； 容易编辑和维护，尺寸和颜色可以用css来控制。使用形式分为三种：unicode引用、font-class引用、symbol引用...

原创 react-router-dom 学习总结

说在最前使用React构建的单页面应用，要想实现页面间的跳转。就需要使用到路由，在React中，常用的有两个包可以实现这个需求，即react-router和react-router-dom。那么这两个包有什么区别呢？不同之处就是后者比前者多出了<Link> <BrowserRouter>这样的 DOM 类组件。因此我们只需引用 react-router-dom 这个包就...

原创 js获取并改变伪元素的值

说在前本文主要说一下::before ::after，因为剩余::first-letter、::first-line、::selection等没有content属性，方法是一样的。虽然伪元素可以被浏览器渲染引擎识别并正确渲染，然而伪元素本身并不是DOM元素,所以无法被js直接操作——因此任何基于JS直接选取DOM元素的CSS更改方法对伪元素都不起作用。获取伪元素的属性值js 里面虽然没有可...

原创 关于this apply call bind

说在前要明白后三个方法，前提是了解 this。因此先从 this 开始。this指向指向原理：this永远指向最后调用它的那个对象。举例：例1var name = 'windowsName';function foo() { var name = 'Cherry'; console.log(this.name); //windowsName con...

原创 js调用堆栈

简述大家都听过v8引擎的概念,js 是单线程的，或是使用回调队列。js引擎最流行的是谷歌的 V8 引擎， V8 引擎使用在 Chrome 以及 Node 中。引擎结构：引擎由两部分组成：内存堆：内存分配发生的地方调用栈：代码执行时的地方运行时有些浏览器的 API 经常被使用到(比如说：setTimeout)，但是，这些 API 却不是引擎提供的。有很多引擎之外的 API，...

原创 理解ES6中暂时性死区TDZ

什么是暂时性死区ES6中，在代码块内，使用let/const命令声明变量之前，该变量都是不可用的，在变量声明之前属于该变量的“死区”。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。ES标准并没有明确提出TDZ，但我们常用其描述let、const的不提升效果。let、const和var的区别let、const是块级作用域，var是全局作用域let、c...

原创 es6——箭头函数

基本用法es6新增了箭头函数，举个例子基本语法let func = value =&gt; value;相当于let func = function(value){ return value;}如果需要给函数传入多个参数或不需要参数，使用一个圆括号将参数部分括起来：let func = (value, num) =&gt; value * num;如果箭头函数的...

原创 mysql从一张表查询批量数据并插入到另一表中

说在前面nodejs 读取数据库是一个异步操作，所以在数据库还未读取到数据之前，就会继续往下执行代码。最近写东西时，需要对数据库进行批量数据的查询后，insert到另一表中。说到批量操作，让人最容易想到的是for循环。错误的 for 循环版本先放出代码,提前说明一下，在这里封装了sql操作:sql.sever(数据库连接池，sql语句拼接函数，回调函数)for(let i=0;i&amp;lt...

原创 webpack打包工具学习笔记

为什么需要webpack?在互联网发展早期，JavaScript就已经成为支撑网页内容交互体验的基础技术。在很长的一段前端历史里，作用大概就是在生成一些闪烁鼠标轨迹等等简单操作，代码量不是很多那时候不存在打包这个说法，页面基本是纯静态的或者服务端输出的，没有 AJAX，也没有 jQuery。直到 AJAX的出现。这是一个使用方便的，兼容性良好的服务器通信接口。从此开始，我们的页面开始玩出各种花...

原创 git入门配置及常用命令

配置及生成SSHGit配置Git安装完之后，需做最后一步配置。打开git bash，分别执行以下两句命令git config --global user.name “用户名”git config --global user.email “邮箱”SSH配置打开git bash执行生成公钥和私钥的命令：ssh-keygen -t rsa 并按回车3下（为什么按三下，是因为有提示你是否...

原创 mysql入门基本概念及语法

一、数据库的概念数据库：按照数据结构来组织、存储和管理数据的仓库。其中关系型数据库最为常用。关系型数据库：1.数据以表格的形式出现2.每行为各种记录名称3.每列为记录名称所对应的数据域4.许多的行和列组成一张表单5.若干的表单组成database二、数据库中的一些名词两种单位：1.库：相当于文件夹——用来管理，本身没法存2.表：相当于文件——存数据其中表...

原创 nodejs:cookie session基础

为什么要cookie、session?http:不足之处在于无状态，两次请求间不能判断是否是同一个人。那是否可以用ip地址判断？不能，公司的出口都是同一IP。每次刷新都要重新登陆，这时用户体验度极大降低。cookie：在浏览器保存一些数据，每次向服务器发送请求都会带过来。用户可修改，不够安全且大小有限（4k）。session:在服务器端保存数据。相对安全。既然cookie储存空间有限并...

原创 数据结构与算法——树的基本概念与存储结构

一、树的定义树（tree）是包含n（n&amp;amp;amp;amp;gt;=0）个结点的有穷集，其中：（1）每个元素称为结点（node）；（2）有一个特定的结点被称为根结点或树根（root）。（3）除根结点之外的其余数据元素被分为m（m≥0）个互不相交的集合T1，T2，……Tm-1，其中每一个集合Ti（1&amp;amp;amp;amp;lt;=i&amp;amp;amp;amp;lt;=m）本身也是一棵树，被称作原树的子树（subtree）。注意点：

原创 ES6:var、let、const的区别

从ES6开始 js 申请变量的方式有：var、let、const。今天我们来一起讨论这三种的区别。关于变量提升想必大家都知道，用var声明变量，js会在预编译时进行变量提升。即如下代码，不会报错。function a(){ console.log(x);//undefined}a();var x = 2;可能你会疑惑，既然提升了为什么还是undefined，难道没有提升？是这样...

原创 Express框架基础

安装，配置npm install express接收请求var express = require(&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;express&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;);var server = express;server.use(&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;/a.ht

原创 原生javascript实现图片放大镜

效果如图所用知识点offsetTop属性:此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。offsetLeft属性:此属性和offsetTop的原理是一样的，只不过方位不同，这里就不多介绍了...

原创 em与rem

重点理解em有一个普遍的误解，即：em是相对父级的字体大小。而根据W3标准 ，它是相对于使用em单位的元素的字体大小。举个例子：div{ font-size:16px; padding-top:1em; }实际上，这是由于其单位遗传...

原创 nodejs模块化

系统模块Crypto 加密Event 事件getServer 域名解析为ip地址Net 网络操作OS 操作系统信息Path 处理文件路径Stream 流操作readFile全读到内存全部发送Timers 定时器ZLIB 压缩（实际是一种流）自定义模块1.模块组成2.npm3.发布自己的模块模块组成require 请求：引入模块加./* 不加./时js文...

原创 nodejs简易httpserver搭建--注册登录

用户注册登录定接口/*注册*//user?act=reg&amp;amp;amp;amp;amp;name=aaa&amp;amp;amp;amp;amp;pass=123{&amp;amp;amp;quot;ok&amp;amp;amp;quot;:&amp;amp;amp;quot;false&amp;amp;amp;quot;,&amp;amp;amp;quot;msg&amp;amp;amp;quot;=&amp

原创 nodejs——http数据解析get

数据请求前台请求:form ajax jsonp后台相同前台&amp;amp;lt; - &amp;amp;gt;后台 通过 http 协议进行交互请求方式：GET 数据在url中POST 数据不在url前台于后台交互数据通过所谓的“消息”传播，一个消息又分两部分：header与content。header: 包括url和头信息content: post数据GET以下是一...

原创 nodejs——http模块使用 fs文件模块

原创 canvas绘图

基本用法&amp;amp;amp;amp;lt;canvas&amp;amp;amp;amp;gt;看起来和&amp;amp;amp;amp;lt;img&amp;amp;amp;amp;gt;标签一样，只是 &amp;amp;amp;amp;lt;canvas&amp;amp;amp;amp;gt; 只有两个可选的属性 width、heigth 属性，指定绘图区域大小，但没有 src、alt 属性。如果不给&amp;amp;amp;amp;l

原创 CSS3 3D立体旋转

用到的知识点最重要的一个属性 transform-style:flat|preserve-3d;该属性默认值为 flat。当我们指定一个容器的 transform-style 的属性值为 preserve-3d 时，容器的子元素便会相对父元素所在平面进行3D变换。位移操作： translateX(length) 、translateY(length) 、 translateZ(len...

原创 Ajax

在Ajax诞生以前，比如说用户填写一个表单，当所有信息填写完成，点击提交按钮，等待五分钟，页面刷新显示邮箱地址重复。填完后点击提交，再进入等待。而Ajax出现后，实现了数据实时交互，提高了用户体验。HTMLHttpRequest对象创建对象var request;if(window.XMLHttpRequest){ request = new XMLHttpRequest...

原创 JS——JSON

语法简单值：表示字符串（必须使用双引号）、数值、布尔值和null。不支持undefined。对象：表示一组无序键值对儿。每个键值对儿的值可以是简单值，也可是复杂数据类型。 与JS区别：1），没有变量声明；2），没有末尾分号；3），对象的属性必须加上双引号 { &amp;quot;name&amp;quot;:&amp;quot;Mike&amp;quot;, &amp;quot;age&amp;quot;:29, &amp

原创 JS事件冒泡 事件委托

如何绑定事件处理函数ele.on+事件类型 = function(event){}（句柄式） 兼容性好，但是在一个元素的同一个事件上只能绑定一个处理程序基本等同于写在HTML上程序this指向Dom元素本身obj.addEventListener(‘事件类型’,函数,false) IE9以下不兼容，可以为一个事件绑定多个处理程序程序this指向dom元素本身obj.attach...

原创 JS获取窗口属性，获取DOM尺寸

查看滚动条的滚动距离window.pageXOffset/pageYOffset(IE8及以下不兼容)document.body.scrollLeft/scrollTop(兼容性较乱)document.documentElement.scrollLeft/scrollTop(兼容性较乱) 注：后两个兼容性较乱，但在IE8及以下浏览器二者必有一可用。//可以这样使用documen...

原创 JS定时器

定时器日期对象创建Date对象语法var date = new Date();Date对象常用方法 var date = new Date;//时刻记录，记录创建时刻，非实时 console.log(date.getDate());//返回日期月份中的天数（1-31） console.log(date.getDay());/...

原创 DOM继承树，增删改操作(精简版)

DOM扩展选择APIquerySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，未找到返回null。 //取得body元素var body = document.querySelector(&amp;amp;quot;body&amp;amp;quot;);//取得ID为&amp;amp;quot;myDiv&amp;amp;quot;的元素var myDiv = document.querySel

原创 DOM基础知识

DOMDOM可以将任何HTML文档或XML文档描绘成一个由多层次节点构成的结构。节点分为不同类型，每个节点拥有各自特点、数据和方法。文档元素是文档最外层元素，文档中的其他元素都包含在文档元素中。每个文档只能有一个文档元素。每一段标记都可以通过树中的一个节点来表示：HTML元素通过元素节点表示，特性通过特性及节点表示，文档类型通过文档类型节点表示，注释通过注释节点表示。共12种，这些类型都...

原创 js闭包

作用域链[[scope]]:每个js函数都是一个对象，对象中有些属性可以访问，但有些不可以，这些不可访问的的属性仅供js引擎存取。[[scope]]指的是我们所说的作用域，其中存储了运行期间的上下文集合。作用域链：[[scope]]中所存储的执行期上下文对象的集合，这个集合呈链式连接，我们把这种链式连接叫做作用域链。function a(){ function b(){ ...

原创 JS继承

原型：是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。 利用原型特点和概念，可以提取共有属性 对象可通过隐式属性_ proto _查看原型 对象可通过constructor查看其构造函数1.原型链继承function Super(){ this.prototype = true;}...

原创 JavaScript预编译

JS运行三部曲：语法分析：通篇扫描，查找语法错误；预编译：发生在函数执行的前一刻解释执行 ：js解析一句执行一句预编译知识补充： 1.imply global：（暗示全局变量）任何变量，如果变量未经声明就赋值，此变量就为全局对象（window）所有。2.一切声明的全局变量，全是window的属性。function test(){ var a = b = 3; /...