FIND方式-CSDN博客

原创 typeScript学习总结

基础类型：Boolean、Number、String、null、undefined 以及 ES6 的 Symbol 和 ES10 的 BigInt。继承extends ｜任意属性[propName: string] ｜可选属性?｜只读属性readonly ｜添加函数。void也可以定义undefined 和 null类型。

2023-12-06 10:41:25 104

原创事件循环原理

程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

2023-10-17 16:58:43 242

reflow 的本质就是重新计算 layout 树。当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。浏览器在反复权衡下，最终决定获取属性立即 reflow。repaint 的本质就是重新根据分层信息计算了绘制指令。

2023-10-17 16:57:35 140

原创 React-Router

参考：React-RouterReact Router 使用教程/阮一峰/ 2016年5月25日文章目录路由器 Router路由导航路由匹配路由的钩子动态路由hooks路由器 Router<Router history={hashHistory}> <Route path="/" component={App}/> </Router>history 属性BrowserRouter调用的是浏览器的History APIH

2022-03-22 16:48:42 1273

原创 react 处理表单数据：受控组件/非受控组件

在大多数情况下，我们推荐使用受控组件来处理表单数据。在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控组件，这时表单数据将交由 DOM 节点来处理。受控组件表单元素根据用户输入进行更新state状态constructor(props) { super(props); this.state = {value: ''}; }handleChange(event) { this.setState({value: event.target.

2022-03-22 16:48:32 753

原创 import和require的区别

1. 导入导出使用importimport test from test.jsimport * as test from test.jsconst { a, b } = testexportexport default {a ,b}export {a ,b}requirerequire('test.js')2. 导入区别requireimportcommonjses6运行时被加载编译时被加载，必须放在头部，性能更好类似深拷贝浅拷贝（引入的对

2022-01-26 18:57:39 959

原创 React使用/更新useState数据

使用 useState() 进行状态管理useState()是改变状态的开关，将状态添加到函数组件需要4个步骤:启用状态、初始化、读取和更新。import React, { useState } from 'react'; //1.启用状态const [state, setstate] = useState(initialState); //2.初始化状态consloe.log(state); //3.读取setstate(newState); //4.更新状态useState()使用回调更

2021-10-13 18:54:10 3544 1

原创 React 状态管理-redux

文章目录Redux 应用中数据的生命周期store 单一数据源actionreducercontaineraction 普通JavaScript对象 --actioType.js定义行为类型 const GET_STUDENT_LIST = 'get_student_list'store.js 存储数据state --reducer.js 接收state、action，并返回新state的函数 --子reducer.js 每个reducer函数负责独立管理state --出口reduc

2021-07-28 17:19:11 158

转载 CSS命名规范——BEM思想（非常赞的规范）

CSS命名规范——BEM思想（非常赞的规范）人们问我最多的问题之一是在CSS类名中“–”和“__”是什么意思？它们的出现是源于BEM和Nicolas Gallagher…BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目...

2021-07-12 18:27:46 110

转载给前端应届生的职业规划建议

林洋，YMFE 资深前端工程师，负责去哪儿网 Hybrid（Hy）、React Native（QRN）等移动端方案架构、开发和推进，负责一系列基于 Node 的开源平台（YIcon、YApi 等）、开发工具（小程序构建工具、YDoc、YKit 等）的管理维护工作。专注于移动前端，着眼于工程流程化。【前言】近一年多的时间，笔者在公司中担任过应届生导师、实习生导师、应届生项目导师等一系列导师角色。期间，笔者发现一些即将和准备成为前端攻城狮的同学其实并没有明确前端真正的核心和定位，也...

2020-11-27 11:20:04 834

原创 ES6(ECMAScript6 )入门

文章目录代码块声明变量变量的解构赋值扩展符...字符串解构赋值对象的解构赋值字符串的扩展遍历器接口模板字符串函数的扩展函数形参默认值箭头函数 =>********************数组方法的扩展拆开数组复制数组合并数组对象方法扩展0代码块声明变量let 作用域提前生成重复声明constfor循环+计时器******************变量的解构赋值按照对应的结...

2020-09-22 16:29:19 179

原创 ES6 类型定义-箭头函数- promise

var提前声明变量 √作用域：函数let重复定义 ×提前声明变量 ×作用域：块级暂时性死区 √ ：只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。var tmp = 123;if (true) { tmp = 'abc'; // ReferenceError 封闭作用域。凡是在声明之前就使用这些变量，就会报错。 let tmp; tmp = 123; //123}const暂时性死区 √重复定.

2020-09-02 12:21:28 115

原创 Object.create Object.defineProperty

文章目录Object.create()1）创建对象的方式不同2）创建对象属性的性质不同Object.setPrototypeOfObject.defineProperty属性的特性以及内部属性Object.create()Object.create(proto, [propertiesObject]) 创建一个新对象，使用现有的对象来提供新创建的对象的proto。proto : 必须。表示新建对象的原型对象，即该参数会被赋值到目标对象(即新对象，或说是最后返回的对象)的原型上。该参数可以是null，

2020-09-01 14:42:34 253

原创 link @import 区别

这两种方式都是为了加载css文件，但还是存在细微的差别。加载内容link标签除了可以加载css外，还可以做很多其他的事情；@import只能加载CSS。加载顺序的差别页面加载时，link文件同时加载；@import引用的文件等待页面下载完再加载兼容性@import只有在IE5以上的才能识别dom控制样式用JS控制dom去改变样式的时候，只能使用link标签...

2020-08-04 16:50:31 114

原创 CSS --- 样式继承

文章目录常用继承样式内联元素可以继承的属性块级元素可以继承的属性继承规则CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。css属性一旦继承了不能被取消，只能重新定义样式常用继承样式继承虽然减少了重复定义的麻烦，但是，有些属性是不能继承的，例如border（边框）、margin（边距）、padding（补白）和背景等。font：组合字体font-family：规定元素的字体系列font-weight：设置字体的粗细font-size：设置字体的尺寸font-style：定义

2020-08-02 18:21:33 270

原创 Object 对象与方法

JavaScript 对象是键值对的容器键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为对象属性。访问对象属性两种方式: obj.property 或 obj [“property”]访问对象方法obj.property()对象object循环遍历.each()可以遍历数组和对象 $.each(obj,function(key,value){ console.log("键："+key+";"+"键值："+obj[k

2020-07-28 11:58:59 295

原创 JS--数组-- 扁平化 / 去重

文章目录reduce()扁平化(flatten())reduce()reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。array.reduce(function(total, currentValue, currentIndex, arr), initialValue)参数描述total 必需。初始值, 或者计算结束后的返回值。currentValue 必需。当前元素currentIndex 可选。当前元素的索引

2020-07-28 11:39:33 253

转载 vue animate.css

NPMnpm install v-animate-css --saveUsageimport Vue from 'vue';import AnimateCss from 'animate.css';Vue.use(AnimateCss);

2020-06-16 14:32:30 233

转载 Less Sass

less变量可运算对常用的值进行定义，然后应用到样式中，这样只要改变你定义的变量参数值就可以达到改变全局的效果.border{ border:1px solid red;}@color :blue; //定义变量 @blue : 'color' ;@height:10px; @width:100px; #header { .border //混入class height: @height; width: @width; color: @@blue;

2020-06-15 17:29:17 164

原创 vue组件创建、传值

创建组件局部全局父给子传值父获取子组件所有内容：事件，数据>>>组件的自定义事件：非父子传递内容：new Vue()插槽标签 <slot>默认的插槽内容</slot>具名插槽...

2020-06-15 16:23:34 204

原创 vue 插槽

1、匿名插槽//父组件<template> <div class="home"> 我是Home父组件 <HelloWorld> <h1>我是helloworld中的插槽啊</h1> //没有插槽，这里的内容不显示 </HelloWorld> </div></template>//子组件Nav<template> <div cl

2020-06-11 16:58:07 109

转载 vue全局使用axios的方法

就知道axios 是一个基于 promise 的 HTTP 库，axios并没有install 方法，所以是不能使用vue.use()方法解决方法结合 vue-axios使用axios 改写为 Vue 的原型属性结合 Vuex的action1.结合 vue-axios使用看了vue-axios的源码，它是按照vue插件的方式去写的。那么结合vue-axios，就可以去使用vue.use方法了首先在主入口文件main.js中引用：import axios from 'axios'im

2020-06-11 15:59:11 372

原创 Element UI -- vue使用

文章目录布局Container 布局容器Icon 图标布局Container 布局容器<el-container>：外层容器。当子元素中包含或时，全部子元素会垂直上下排列，否则会水平左右排列。<el-header>：顶栏容器。<el-aside>：侧边栏容器。<el-main>：主要区域容器。<el-footer>：底栏容器。Icon 图标提供了一套常用的图标集合<i class="el-icon-delete"&

2020-06-10 16:19:15 188

转载 Scoped CSS

Scoped CSS当 <style scoped >标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素混用本地和全局样式你可以在一个组件中同时使用有 scoped 和非 scoped 样式<style>/* 全局样式 */</style><style scoped>/* 本地样式 */</style>深选择器如果想对设置了scoped的子组件里的元素进行控制可以使用’>>>’或者’de

2020-06-10 09:39:49 167

原创常见的HTTP状态码

2开头（请求成功）表示成功处理了请求的状态代码。200 （成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。201 （已创建）请求成功并且服务器创建了新的资源。202 （已接受）服务器已接受请求，但尚未处理。203 （非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源。204 （无内容）服务器成功处理了请求，但没有返回任何内容。205 （重置内容）服务器成功处理了请求，但没有返回任何内容。206 （部分内容）

2020-05-28 21:00:25 115

原创 cookies、sessionStorage和localstorage

文章目录缓存cookie 缓存页面信息到浏览器localStorage 本地缓存sessionStorage 临时缓存不同点字符串加密转码缓存cookie 缓存页面信息到浏览器存储的数据量比较小，浏览器数据存储，下次读取，有效期 //创建cookie document.cookie="cookieName"; expires //有效期 path //当前cookie的有效路径不写默认有效路径//设置cookie document.cookie

2020-05-28 18:48:46 100

原创 CSS 两种盒模型box-sizing

盒模型：设置同样宽高二者的盒子的宽度是否包含元素的边框和内边距。content-box（默认）：不包含padding borderborder-box：包含padding border

2020-05-28 18:14:16 129

转载前端---javaScript面试题总结

JS最初null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。目前的用法null表示"没有对象"，即该处不应该有值.用法是：（1）作为函数的参数，表示该函数的参数不是对象。（2）作为对象原型链的终点。Object.getPrototypeOf(Object.prototype)// nullundefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。用法是：（1）变量被声明了，但没有赋值时 var i // ..

2020-05-25 21:53:23 121

原创 React 基础3

redux vuexajax axiosrouter link route githubMaterial UIreact native 脚手架

2020-05-22 20:07:57 136

原创 React 基础2

List item图片路径的引入import imginfo from '../assets/image/my_2.png';<img src={imginfo} alt=""/>src使用es5里面的require<img src={require('../assets/image/my_2.png')} alt=""/>事件 this指针 function handle(){ //直接这样获取 this的指针不同} onClick={this.handle.bi.

2020-05-22 20:07:44 211

原创 React 安装

环境准备配置文件src开发文件public静态资源目录React 创建组件从 React.Component 的子类继承footer>footer.js :引入footer.css+引入组件模块import React,{Component} from 'react'+声明(继承+view)+暴露footer>footer.cssReact组件挂载引入模板import Footer from ''使用模板 <Footer></Footer> &lt.

2020-05-12 21:36:15 156

原创 JS数据 --- 字符串 / 数组

文章目录StringArray数组的增加、修改、删除splice数组的截取slice和拼接contact数组转换为字符串join toString排序sort和排列查找find indexOfStringstr.length 返回字符串长度str.toUpperCase()转换成大写str.toLowerCasw()转换成小写查找str.indexOf("x") /lastInde...

2020-04-27 20:14:13 241

原创 Node.js 连接 MySql 渲染页面

文章目录nodejs获取mysql数据将mysql数据渲染到页面nodejs获取mysql数据创建一个connection连接connection执行SQL语句,获取数据关闭connectionvar mysql = require('mysql'); //调用MySQL模块//1. 创建一个connectionvar connection = mysql.createC...

2020-04-25 12:30:53 1127

原创 JS try/catch/finally/throw 语句

try 语句使您能够测试代码块中的错误。catch 语句允许您处理错误。throw 语句允许您创建自定义错误。finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。try { tryCode - 尝试执行代码块}catch(err) { catchCode - 捕获错误的代码块 throw (err);} finally { ...

2020-04-24 18:13:59 140

原创 CSS 文本溢出隐藏

单行文本溢出隐藏overflow: hidden; /**溢出隐藏显示省略号**/white-space: nowrap;text-overflow: ellipsis;多行文本溢出隐藏overflow: hidden;text-overflow: -o-ellipsis-lastline;text-overflow: ellipsis;display: -webkit-bo...

2020-04-22 19:40:35 150

原创 MySql 命令行操作

命令行操作数据库显示所有的数据库 show databases;直接创建数据库 create database chat; //显示1行受影响成功检测创建数据库：在创建的时候检测该数据库是否存在不存在创建create database if not exists chat;使用数据库 use mysql;删除数据库 drop database chat;数据...

2020-04-21 21:13:30 200

原创 Node.js 连接 MongoDB 封装模块

1. 安装mongoDBcnpm install --save-dev mongodb2. 创建数据库创建链接池 > 选择数据库 > 创建集合// 引入mongodb驱动var MongoClient = require('mongodb').MongoClient;// 引入 mongodb服务器地址var url = "mongodb://localhost:2701...

2020-04-20 16:16:43 315

原创 mongoDB 命令行基本操作

mongoDB 是一个文档型数据库存储的是key：value 类似json数据分布式高性能的数据库数据库>集合>文档 _id:ObjectId创建数据库 use dataBasename 会去检测数据库是否存在，不存在创建+定位，存在直接定位；显示数据库 show dbs删除数据 db.dropDtabase()创建集合 db.createColle...

2020-04-20 15:37:02 412

原创子元素浮动后、父元素坍塌

父元素设置overflow:hidden，同时height不设置或者100%或者auto父级元素内中的最下面新增一个标签，设置clear:both；父元素用伪类:after (推荐) ul>liul:after{ content:""; display: block; clear:both; }li{　　float:left;}...

2020-04-18 11:15:27 107

原创 Node.js express框架--路由

基于 Node.js 平台，快速、开放、极简的 Web 开发框架express安装创建pagejson 文件 cnpm init -yes安装express cnpm install express --save-dev引入express let express = require('express');创建框架服务器创建express框架实例let app = expr...

2020-04-13 13:36:08 292 1

空空如也

空空如也