平常心t-CSDN博客

原创 React核心概念

一、最简易的React示例ReactDom.render( <div>Hello, ling!</div>, document.getElementById('root'));上面这个例子将会在浏览器中展示 “Hello, ling!” 。二、JSX？为什么是JSX？React 并不强制使用 JSX，但是大部分人觉得将 JSX 和 UI 放在一起时，能提升视觉效果，并且可以使 React 提示更多的错误和警告。JSX编译Babel 会把 JSX 转译

2021-03-07 17:17:28 352 3

原创【学习笔记】手撕JS

数组扁平化arr1 = [1,[2,3],[1,[2,3]]]// 1.利用flatconsole.log(arr1.flat(Infinity))//[ 1, 2, 3, 1, 2, 3 ]// 2.利用函数递归let arr2 = []function flatten(arr){ for(let i=0; i<arr.length; i++){ if(Array.isArray(arr[i])){ flatten(arr[i]) } else{

2020-10-21 10:23:05 237

原创【学习笔记】前端性能优化

一、打包优化webpack下一期详细说webpack二、网络优化DNS使用DNS prefetch技术CDN网络加速，请求最近的资源，避免阻塞缓存减少HTTP请求三、代码优化懒加载图片懒加载等web worker额外开一个线程批量操作DOM操作DOM的代价是昂贵的防抖节流避免频繁交互异步加载JSdefer：依次执行async：执行顺序不确定...

2020-10-21 10:21:45 256

原创【学习笔记】浏览器篇

一、多进程架构浏览器进程:负责界面展示，用户交互，子进程管理，提供存储功能渲染进程：将html，css，js解析，出于安全，渲染进程运行在沙箱之下GPU进程：为了实现3D CSS效果，网络进程：负责页面网络资源的加载插件进程：负责插件的运行，保证插件的奔溃不会对浏览器和页面造成影响二、TCP协议TCP的生命周期三次握手建立连接传输数据阶段四次挥手断开连接三次握手客户端向服务端发送SYN，同时带上序列号ISN服务端返回ACK（序号为ISN+1），同时向客户端发送SYN客户

2020-10-21 10:20:34 339

原创【学习笔记】Vue篇

MVVMViewModel：内部集成了Binder，Binder会实现View和Model的双向绑定View，可组件化，View的变化会通过Binder自动更新相应的ModelModel：Model的变化会被Binder监听，一旦监听到变化则会自动实现视图更新生命周期beforeCreate&created,实例化Vue，初始化数据观测，属性，方法beforeMount&mounted,Dom挂载beforeUpdate&updated,数据更新beforeDe

2020-10-21 10:18:23 188

原创【学习笔记】nodeJS篇

一、简介node也是一个JS引擎，通过node可以使js代码在服务端执行，但是它不包含DOM和BOM，node的服务器是单线程的，但是后台拥有一个I/O池，node的底层是C++编写的node的特点非阻塞，异步的I/O事件和回调函数单线程跨平台二、CMD命令dir：列出当前目录下的所有文件cd 目录名：进入到指定的目录md 目录名：创建一个文件夹rd 目录名：删除一个文件夹.表示当前目录…表示上级目录当我们用命令窗口打开一个文件或者调用一个程序的时候系统会首先在当前目录下寻

2020-10-14 20:40:20 144

原创【学习笔记】ES6篇

一、let constlet 和 const定义的变量会暂时性死区，不会造成变量提升const定义的是常量，不可变{ let a = 5 var b = 10}// console.log(a)//报错console.log(b)//10const c = 4c = 5 //报错Assignment to constant variableconsole.log(c)二、Symbol特性每个Symbol都是不一样的作用作为内置对象的属性，保证属性名是不一样的，

2020-10-13 14:24:50 188

原创【学习笔记】JavaScript基础篇

一、数据类型基本类型：string、number、boolean、null、undefined、symbol引用数据类型 :object、array、function其中基本类型存储在栈中，引用数据类型存储在堆中，在栈中存储一个堆的引用二、执行上下文变量提升变量可以提前被访问var 声明的变量函数声明提升，function声明的函数,等于直接提到最顶端console.log(f)//undefinedvar f = 5console.log(af) //[Function:

2020-10-11 21:30:46 214

原创【学习笔记】回顾数据结构与算法

为什么要学习数据结构和算法？培养解决问题的思想，有一句经典说法：设计出数据结构，在施加以算法就行了准备面试逻辑结构集合：其中的数据匀速之间除了”属于同一个集合“的关系以外，别无其他关系线性结构：其中的数据元素之间存在一对一的关系树状结构：其中的数据元素存在一对多的关系网状结构：其中的数据元素存在多对多的结构存储结构顺序存储链式存储索引存储散列存储栈、堆、队列栈：后进先出队列：先进先出堆：堆的底层其实是一颗完全二叉树栈和堆的空间分配区别：栈：由操作

2020-10-09 19:26:16 163

原创【学习笔记】HTML+CSS模仿静态淘宝首页

一、先上一张成果图二、已上传Githubhttps://github.com/ImDaret/Front-end-learning三、直接上代码（头大预警）HTML:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

2020-10-08 20:31:41 23128 1

原创【学习笔记】CSS篇

一、position：1.static:默认情况2.relative：相对的，与正常位置对比3.absolute：绝对的，与父元素位置对比4.fixed：相对于浏览器窗口固定5.sticky:粘性的，滚动后超出区域就粘在目标位置二、盒子模型1.margin：外边距2.border：边框3.padding：内边距4.content：内容三、伪类，伪元素1.a:link:未访问的链接2.a:visited：访问过的链接3.a:active：活动时的链接4.a:hover：悬浮时的链

2020-10-06 17:48:19 143

原创【学习笔记】HTML篇

一、H5的新特性1.新增语义化标签<header>、<nav>、<main>、<article>、<aside>、<section>、<footer>作用：使代码更加结构化，利于SEO搜索，方便读者浏览2.新增input类型color、time、date、week、tel、email、number、search、url、range3.新增input属性max、min、step、autofocus、require

2020-10-05 21:51:11 880 1

原创 http协议详解

http协议(超文本传输协议)作用：用于从万维网服务器传输超文本到本地浏览器的传送协议定义:http协议是基于TCP的应用层协议，它不关心数据传输的细节，主要是用来规定客户端和服务端的数据传输格式，最初是用来向客户端传输HTML页面的内容，默认端口是80特点:http是基于请求与响应模式的、无状态的、应用层的协议具体聊http协议之前先了解下面四层:1.应用层:规定了向用户提供应用服务时的通信协议，http、DNS、FTP2.传输层:提供处于网络连接中两台计算机之间的数据传输所使用的协议,TCP

2020-09-06 21:40:54 335

原创 vue事件修饰符

定义两个函数:methods:{ father(){ console.log('i am father') }, son(){ console.log('i am son') } }一、没有事件修饰符<div @cl

2020-08-29 10:12:45 193

原创 vue中插槽有哪些用法

vue中<slot></slot>标签代表插槽一、内容插槽顾名思义，插槽的作用就是存放内容html代码如下：<test-man> <v-card dark> is handsome </v-card></test-man>javascript代码如下：Vue.component('test-man', { template:` <v-card>

2020-08-16 19:28:16 379

原创浅拷贝和深拷贝

首先定义两个对象data: { // 对象一 obj1:{ name:'pingchangxin', }, // 对象二 obj2:{ name:'', } },一、浅拷贝：浅拷贝就是只拷贝表面的数据，其内存所指的地址还是一样的，所以修改其中一个另外一个也会被修改，比如下面：methods:{edit1(){ this.obj2 = this.obj1; //把obj1

2020-08-09 10:20:30 216

原创 javascript中的常用套路

一、接收图片资源if(result.resultid == 0){ var a = result && result.name && result.data.imgurl || 'sky.jpg'}当前端调用一个接口后，返回一个result对象，我们用变量a来接受result里的图片资源，如果，返回的结果中没有result.data.imgurl这个字段，就用’sky.jpg’作为兜底图片二、短路运算的巧妙之处const a1 = 'pingchangxi

2020-08-08 12:55:17 284

原创 vue双向绑定数组

众所周知,vue中v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。大部分情况,v-model是绑定一个对象的属性，但是如果数据库中的数据是一个数组，这种情况下，如果把数组转换成对象再绑定，然后再转换回去提交到数据库显然是一件工程量很大的事情，本着程序员偷懒的原则，我发现了一个便捷的方法，废话不多说，直接上干货。HTML代码如下：<!DOCTYPE html><html lan.

2020-08-08 12:54:22 1651

原创 vue+vuetify实现可编辑表格

我查遍整个vuetify官网，里面只有弹出对话框的可编辑表格，并没有这种在表格内就可编辑的功能，所以写了这篇文章，以便大家备一手，学会这招你可以秒天秒地秒空气，防老师防领导防项目经理。HTML代码如下:<div id="app"> <v-app> <template> <v-card style="width:70%; margin: 200px auto;"> <v-card-title&g.

2020-08-08 12:53:28 1169 1

原创 vue组件与组件之间传值

目录一、父组件向子组件传值二、子组件向父组件传值三、兄弟组件之间的传值如上图所示，2是1的子组件，1是3的父组件，2和3是兄弟组件一、父组件向子组件传值：html代码:<div id="app"> <v-app>  <list-group :listgroup="listgroup"></list-group> </v-app><

2020-08-08 12:17:34 628