- 博客(29)
- 收藏
- 关注
RSS订阅原创 react生命周期
React生命周期react生命周期可以从广义分为三个阶段，即挂载、渲染、卸载。在这个过程中提供有很多生命周期钩子函数，在不同生命周期可以被调用。生命周期官方结构图挂载过程当组件实力被创建并且被插入DOM中时，生命周期如下：constructor() 构造函数 一般不可以调用setState方法，只绑定初始状态组件挂载之前会调用构造函数为子类实现构造函数时候，在构造函数内调用super(props)constructor(props) { super(props);}
2021-04-27 14:30:02
248
原创 深入理解npm脚本
npm脚本什么是npm脚本？npm 允许在 package.json 文件里面，使用 scripts 字段定义脚本命令；{ "scripts": { "build": "node build.js" }}在package.json文件中有一个scripts对象，这里面可以书写我们想要执行的脚本，比如如果想执行 node build.js，我们只需要在终端中输入：$ npm run build//这样等同于我们执行了$ node build.js查看当前scir
2020-12-01 20:09:00
1075
原创 JS中的this指向问题(详细版plus)
JS中的this指向问题()在全局作用域中=>this -> window<script> console.log(this); //this->window</script>在普通函数中=>this取决于谁调用，谁调用我，this就指向谁，跟如何定义无关 var obj = { fn1:function() { console.log(this);
2020-12-01 18:38:17
304
原创 npm下载和使用（超详细）
NPM （ Node Package Manager）简称为Node包管理工具安装（首先我们需要安装Node）Mac如果没有安装Node可以使用mac的包管理神器HomeBrew进行安装，首先下载HomeBrew，接下来在终端执行以下命令brew install node也可以选择去官网下载pkg安装包，记得下载长期稳定版，即LTS版windows可以在官网中选择windows相对应的版本，同样下载稳定版本，一步点击安装即可使用当下载好Node后我们就可以使用n..
2020-12-01 09:51:18
60325
原创 gulp基础详解
gulp什么是gulpgulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的，常见的有Grunt、Gulp、Webpack三种，Grunt比较老旧，功能少，更新少，插件少。gulp可以用来做什么搭建web服务器文件保存时自动重栽浏览器使用预处理器如Sass、Less优化资源，比如压缩CSS、JavasScript、压缩图片gulp的安装全局安装npm i gulp@3 -g //安装3.9.1版本npm i
2020-11-30 22:27:36
329
原创 JS-理解观察者模式-视频直播弹幕效果
JS-理解观察者模式-视频直播弹幕效果观察者模式=>定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。=>一个对象状态改变给其他对象通知的问题，而且要考虑到易用和低耦合，保证高度的协作。=>使用面向对象技术，可以将这种依赖关系弱化。=>观察者和被观察者是抽象耦合的。 建立一套触发机制。创建观察者=>能设置自己的状态, 当我需要改变的时候, 要触发这个方法改变状态export default class
2020-11-21 12:20:39
300
1
原创 JavaScript + node 实现三级联动菜单
三级联动菜单项目分析效果前端=>面向对象=>首先分析下拉结构，构造相应的结构和样式=>绑定事件，点击，鼠标滑过等=>导入写好的 js 文件 构造菜单项、=>使用ajax请求服务端 获取数据=>用每次获取的数据动态生成页面结构服务端=>接口文档（定义接口，服务地址，端口}=>存储数据=>创建服务器=>接收前端的ajax请求，响应数据代码面向对象代码export default class
2020-11-14 22:34:02
520
原创 sass基础入门
sass安装sass是基于ruby语言开发的，所以使用sass之前需要安装rubymac自带ruby不需要下载，window版本需要先安装ruby环境=> gem install sass=>gem install compass=>compass 是一个 sass 的库，compass 里面有很多封装好的 mixin ，有了它，我们就可以很快的写出完美的，兼容的样式单文件转化为css=>sass input.scss output.css多文件
2020-11-12 20:20:13
110
原创 JS-本地存储详解
WebStoragelocalstorage （本地存储）=>长期存储在浏览器中，存储时候是以键值对的形式存储，以字符串的形式存储，如果是对象，就需要使用 JSON字符串转换然后存储，一旦创建就不会消失，需要手动删除创建，更新=>localStorage.setItem( key[string] value[string])=>localStorage.key = value因为本地存储只允许存储一个相同的key作为数据，要想对其更改只用改变其value值即可//创建
2020-11-09 09:54:43
356
原创 JS-ES6-Promise详解
ES6-Promise什么是Promise是一种js异步编程的解决方案，主要解决回调地狱问题，最早由社区提出并实现，ES6将其写入了标准语言，并提供了Promise这个对象。Promise的三种状态持续 pending成功 resolved失败 rejected=>对象的状态不受外界干扰，就像一种承诺，只有异步操作的结果来影响这三种状态。用法Promise 是 ES6 内置的构造函数=>var p = new Promise( function( r
2020-11-03 20:01:11
458
原创 五星好评案例（利用cookie存储）
五星好评案例（利用cookie存储）业务逻辑首先明确使用面向对象的方式进行书写创建元素添加样式 (外部的div容器，容器左边的title部分，中间的星星部分，以及右边的分数部分)增加鼠标事件改变星星样式（当鼠标经过时星星的背景发生改变）改变星星笑脸（当鼠标经过时星星上方定位的笑脸会发生变化）改变评价分数（当鼠标经过时星星后面的评价分数也会随之改变）将每次点击之后的分数利cookie存储 （注意设置存储到期日期）获取cookie并将其格式转化为对象格式存储 利于后期使用把获取的数据以
2020-11-01 18:37:13
234
1
原创 JS正则表达式(超详细整理版)
正则表达式创建正则表达式利用RegExp对象创建var reg = new RegExp(/123/);console.log(reg) // /123/字面量创建var reg = /123/；console.log(reg) // /123/正则.exec( str ) 从字符串里获取符合正则表达式的一部分片段=> 返回值:1. 字符串里面没有符合规则的片段 -> null2. 字符串里面有符合规则的片段
2020-10-27 08:33:32
388
原创 什么是JSON(详解)
JSON什么是JSON=>JSON是一种数据格式，不是编程语言，全称(javascript object Notation)javascript对象表示法，不是只有 javascript可以使用JSON，很多编程语言都有针对JSON格式的解码器。语法基本类型:=>可以在JSON中表示字符串，数字，布尔值和null，但是不支持undefined对象：=>可以在JSON格式中出现对象，对象中以键值对的形式存储，但是键名和属性值必须用双引号包裹，键值对中的值
2020-10-26 18:51:02
1654
原创 ES6-Set数据结构用法(详细版)
ES6-Set数据结构SetSet数据结构=>Set数据结构类似于数组，但是与数组不同的是，Set中的成员都是唯一的、无序的、并且没有重复。Set实例的属性和方法set.size 获取set数据结构的值的个数const set = new Set([1,2,3,4]);console.log(set.size);// 4set.add( ) 向set数据结构中添加某个值 返回数据结构本身const set = new Set([1,2,3,4]);
2020-10-25 17:08:29
1150
原创 JS中的this指向问题(详细版)
JS中的this指向问题()在全局作用域中=>this -> window<script> console.log(this); //this->window</script>在普通函数中=>this取决于谁调用，谁调用我，this就指向谁，跟如何定义无关 var obj = { fn1:function() { console.log(this);
2020-10-23 09:16:16
16255
11
原创 javascript事件及事件绑定
事件事件流事件流是描述从页面中接收事件的顺序，包括事件冒泡流和事件捕获流。事件冒泡（IE事件流）事件开始时从触发事件的那个元素一级一级向上传播，从而触发上面的每一级，知道传播到document对象<div id="grandfather"> <div id="father"> <div id="son"></div> </div></div>当触发了son这个
2020-10-20 08:17:03
115
原创 javascript阻止浏览器默认行为
阻止浏览器默认行为e.preventDefault( ) //标准浏览器e.returnValue = false //IE低版本处理兼容方式1: if () { } else { }方式2: try {} catch (err) {}方式3: return false常见浏览器默认行为a标签的跳转form表单的提交鼠标单击右键的时候显示菜单栏鼠标的框选效果a.onclick = function (e) { e = e || w
2020-10-19 20:33:36
463
原创 javascript事件绑定的区别以及兼容
DOM0级绑定与DOM2级绑定的区别以及兼容1.区别on事件支持任何浏览器兼容，addEventListener只支持IE8及其以上版本支持on事件实际是给DOM绑定了一个固定的属性，例如onclick就是给元素绑定一个匿名函数，这就意味着再次赋值的时候原来的属性值会被覆盖，而addEventListener是使用的回调函数，可以设置多个事件回调函数不会被覆盖 bn.onclick=function(){ console.log("aa");
2020-10-19 20:26:58
109
1
原创 javascript事件对象
事件对象DOM中的事件对象兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论是DOM0级还是DOM2级方法，都会传入event对象。event事件中的有关属性和方法event.bubbles 表明事件是否冒泡类型=>booleanevent.cancelable 表明是否可以取消事件的默认行为类型=>booleanevent.currentTarget 事件处理程序当前处理的那个元素类型=>Element
2020-10-19 20:25:44
151
原创 javascript字符串及其常用方法详解
字符串字符串的特点ECMAScitpt中的字符串是不可变的，字符串一旦创建，他的只就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量转换为字符串toString( ) 数值、布尔值、对象和字符串值都有一个toString方法。但null和undefined没有这个方法var num = 10;console.log(num.toString()) //'10'console.log(num.toString(2)) //
2020-10-19 08:31:17
110
原创 javascript字符串及其常用方法详解
字符串字符串的特点ECMAScitpt中的字符串是不可变的，字符串一旦创建，他的只就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量转换为字符串toString( ) 数值、布尔值、对象和字符串值都有一个toString方法。但null和undefined没有这个方法var num = 10;console.log(num.toString()) //'10'console.log(num.toString(2)) //
2020-10-15 19:09:53
86
原创 javascript获取css行内样式
javascript获取css样式获取行内样式ele.getComputedStyle //标准浏览器 IE8以上支持ele.currentStyle //支持低版本IE浏览器 IE8及其以下获取非行内样式ele.style.attr //只能获取非行内样式封装兼容函数/** * 获取元素样式 * @param { ELEMENT } ele 要获取样式得元素 * @param { STRING } style 要获取得样式字符串 * @r
2020-10-15 10:25:34
539
原创 DOM(文档对象模型)之操作DOM的API总结
DOM(文档对象模型)什么是DOMDOM全称是Document Object Model(文档对象模型)，是为HTML和XML提供的API。DOM把整个页面映射为一个多层次的节点结构。HTML和XML页面中的每一个组成部分都是某种类型的节点。借助DOM提供的API，开发人员可以轻松自如的删除，添加，替换，修改任何节点。DOM 是一个以树状结构存在的内容。DOM 的顶级是 document 表示当前文档。window->document->html获取DOM元素非常规标签1
2020-10-14 22:48:58
357
原创 javascript时间对象-Date
时间对象-DateDate类型使用自UTC国际协调时间 1970年1月1日零时开始经过的毫秒数来保存日期创建var date = new Date();可以创建一个指定日期的时间对象传递数字1-1. 第一个数字, 表示年 1-2. 第二个数字, 表示月 -> 0 表示 1 月, 11 表示 12 月 1-3. 第三个数字, 表示日 1-4. 第四个数字, 表示时
2020-10-13 20:59:31
186
原创 javascript之Math对象
Math对象Math对象常用到的特殊值 console.log(Math.E)//自然对数的底数e console.log(Math.LN10)//10的自然对数 console.log(Math.LN2)//2的自然对数 console.log(Math.LOG2E)//以2为底的对数 console.log(Math.LOG10E)//以十为底的对数 console.log(Math.PI)//PI的值 console.log(Math.SQ
2020-10-13 20:58:55
138
1
原创 javascript基本包装类型-Number
基本包装类型-Number,Boolean,String基本包装类型因为基本类型不是对象，本身不能调用属性和方法，为了便于操作基本类型，于是ECMAScript提供了三种特殊的引用类型：Boolean，Number，String。每当读取一个基本类型的值的时候，后台会创建一个对应的基本包装类型的对象，从而调用操作这些数据。var str = 'hello world';var str2 = str.substring(2); //str是基本类型 理论不可以调用方法 实际上str在调用su
2020-10-13 20:58:09
129
原创 javascript数组及其常用方法详解
数组-array创建数组的两种方式Array构造函数创建var arr = new Array();如果想要保存数组的项数var arr = new Array(20); //创建一个数组为长度20的数组也可以传递字符串，但不能只传递一个数字，只传递一个数字会默认为数组的长度字面量创建var arr = ['red','green','yellow'];var arr1 = [];length属性可以通过设置length这个属性，从数组末尾增
2020-10-13 13:46:48
388
原创 javascript字符串详解
字符串字符串的特点ECMAScitpt中的字符串是不可变的，字符串一旦创建，他的只就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量转换为字符串toString( ) 数值、布尔值、对象和字符串值都有一个toString方法。但null和undefined没有这个方法var num = 10;console.log(num.toString()) //'10'console.log(num.toString(2)) //
2020-10-12 22:43:08
225
原创 javascript数值转换-number,parseInt,parseFloat
数值转换Number() 可以用于任何数值类型如果是Boolean类型，true和false分别被转换成1和0如果是数字值，只是简单的传入和传出如果是null，返回0如果是undefined，返回NaN如果是字符串如果字符串只包含数字，则将其转化为十进制数字，‘1’会被转化成1，‘123’会被转化为123，‘011’会被转化为11（会忽略字符串前导0）如果字符串包含有效的浮点格式，‘1.1’会被转化为1.1，同样忽略前导0如果字符串包含有效的十六进制格式，例如‘0xf’，则将其转化
2020-10-12 22:41:00
239
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人