- 博客(196)
- 收藏
- 关注
RSS订阅原创 B2B、B2C、C2C、O2O分别是什么意思？
B = Business，即企业；C = Customers，即消费者；M = Medium，即媒体。B2B（Business To Business）商家对商家进行的交易，如 阿里巴巴、生意宝；B2C（Business To Customer）商家对个人进行交易，如 京东商城、当当网；C2C（Customer To customer）个人对个人进行交易，如 淘宝、拍拍；O2O（Online To Offline）线上对线下进行交易，如 团购网。B2B 模式B2B 是指商家与商家建立的商.
2021-01-16 10:39:54
5117
转载 前端性能优化 24 条建议
前端性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或要遵守的规则太多。并且性能优化并不适用于所有的场景，需要谨慎使用。1. 减少 HTTP 请求一个完整的HTTP请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发出响应，浏览器接收响应等过程。接下来看一个具体的例子帮助理解 HTTP ：这是一个 HTTP 请求，请求的文件大小为 28.4KB。名词解释：Queueing: 在请求队列中的时间。
2021-01-02 23:35:59
517
1
转载 js中正则表达式验证URL 网址，亲测有效
/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/ 大家可直接复制上面的正则表达式 https://www.example.comhttp://www.example.comwww.example...
2020-09-16 18:34:03
2623
1
转载 React中super(props)和super()以及不写super()的及ES6和ES5的区别
一、constructor和super的基本含义constructor() – 构造方法这是es6中的类的默认方法，通过new命令生成对象实例自动调用的方法。并且，该方法是类中必须要有的，如果没有显示定义，则会默认添加空的constructor()方法。super() – 继承在class方法中，继承是使用extends关键字来实现继承的。子类必须在constructor()中调用super()方法，否则新建实例时会报错。报错的原因是，子类是没有自己的this对象的，它只能继承父类的this对
2020-08-14 09:07:29
838
原创 npm 发包
1. 初始化package.jsonnpm init结果：{ "name": "react-pc-ui", "version": "1.0.0", "description": "\"React PC 组件库(React pc component library)\"", "main": "index.js", // publish 入口 "scripts": { "start": "webpack-dev-server --open --config ./build/
2020-07-25 16:50:05
206
转载 React 组件通信（发布者和订阅者模式）
// eventProxy.js'use strict';const eventProxy = { onObj: {}, oneObj: {}, on: function(key, fn) { if(this.onObj[key] === undefined) { this.onObj[key] = []; } this.onObj[key].push(fn); }, one: function(key, fn) { if(this.on
2020-07-19 09:29:35
636
原创 Visual Studio Code 使用Git进行版本控制
参考????：[Visual Studio Code 使用Git进行版本控制](https://www.cnblogs.com/xuanhun/p/6019038.html?utm_source=tuicool&utm_medium=referral)
2020-07-18 20:33:17
219
原创 npm和 npx 的区别
前言： 在接触学子 React 的时候，创建react应用项目使用的命令是 npx create-react-app my-app，有些奇怪，为什么为添加 npx 呢？ 其实写法是正确的，npx 不是拼写错误，它是 npm 5.2+ 附带的 package 运行工具。注意：NPM实际上自身不能去运行任何包，如果你想去执行某个包，必须在package.json文件中去定义。当通过NPM安装Node包，NPM会在node_modules下的.bin里创建一个软链接。本地安装链接会放到./node_m.
2020-07-18 18:55:22
830
原创 Mac 的使用
之前一直使用的都是Windows系统，大都数情况下都是可视化的操作。第一次接触Mac时，很多操作都会用到终端命令，有些不熟悉，导致很多流程时间开销较大，在此，结合自己初次接触，系统环境配置等的操作，做简要总结。（PS：前端开发）一、Homebrew安装Homebrew 是一款Mac OS平台下的软件包管理工具，拥有安装、卸载、更新等很多实用性功能。参考官网：Homebrew安装/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.co
2020-06-14 15:39:41
771
1
原创 Git Flow工作流的学习与理解
问题：Git flow workflow是什么？Git：是一款开源的分布式版本控制系统Workflow：工作流，是指完成操作或办公协作等操作时，要遵循的一套规范流程Git flow workflow：使用 git 要遵循的一套规范（称为分之管理模型），有助于项目开发和发布的有序、高效概览git flow流程： 各分支理解：masterdevelopfeaturereleasehotfix存放production-ready状态代码标记tag表示发布里程碑整合并存
2020-06-14 10:09:45
240
转载 css元素z-index设置为什么不起作用？
元素位置重叠的背景常识(x)html文档中的元素默认处于普通流（normal flow）中，也就是说其顺序是由元素在文档中的先后位置决定的，此时一般不会产生重叠（但指定负边距可能会产生重叠）。当我们使用css为某个元素指定 float 浮动或者 positoin 定位后，元素的定位将会依据情况发生如下改变：指定float值left/right 行内元素也会隐形变成块元素，元素会脱离文档的普通流，向左或右浮动，直到其外边缘碰到包含框或另一个浮动框。指定position值relative 可以相对于其
2020-05-29 17:14:26
334
原创 js 删除 （同名）cookie 失败
前言： 在刚完成的毕设项目中，使用到了cookie，主要是用来记录用户信息，方便用户下次访问时，在有效期内直接跳过登录页面进入主界面。总结一下遗留的问题：在删除同名cookie时，无法全部删除、覆盖。问题：只在登录界面对用户信息进行了保存，但发现在其他 url 界面也会出现cookie保存着用户信息，删除的时候将cookie信息的 expires 设置为过期时间即可，但只删除了其中一个同名的cookie，其他同名的cookie未删除。cookie 属性定义：设置 cookie 属性设置 cooki
2020-05-29 12:07:34
912
原创 create-react-app 构建的项目中配置proxy
前言： 目前项目开发中大都采用的是完全前后端分离开发模式，各自独立进行开发，虽然最后前后端都会部署到同一台服务器上，但在开发过程中前后需要进行联调，这个过程难免会遇到跨域问题。解决跨域问题：使用 react 脚手架 create-react-app 搭建react基础项目。运行 npm run eject 展开项目中的详细配置注意：项目中只能执行一次，展开后不可恢复；如果项目需要相关配置文件，建议刚开始执行。create-react-app 版本低于 2.0 时，可以直接在 packa
2020-05-29 10:34:39
832
原创 React单页面应用实现div或组价高度占满屏的效果
通过浏览器调试可以这样设置样式：html, body, #root { height: 100%;}问题：这样设置可以实现占满屏的效果，但是会对全局的组件样式产生影响。解决方案：使用绝对定位的方式，如下：.className { width: 100%; height: 100%; position: absolute; top: 0; left: 0;}...
2020-04-29 14:13:32
1450
原创 yarn add node-sass 失败的解决方案
create-react-app 搭建的基本项目中，执行 yarn add node-sass 失败：解决方案：在项目的根目录下新建 .npmrc 文件进行镜像配置：phantomjs_cdnurl=http://cnpmjs.org/downloadssass_binary_site=https://npm.taobao.org/mirrors/node-sass/registry...
2020-04-29 12:37:05
2065
原创 React项目中 Eslint 配置
Eslint：是 JavaScript 的验证工具，可以在项目中形成一套规范，检测代码是否出错等。1. 安装eslint及依赖包// 全局安装npm i -g eslint// 当然也可以局部安装cnpm i -D eslintcnpm i -D eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import esli...
2020-04-20 11:11:09
2823
原创 Eslint：React version not specified in eslint-plugin-react settings
在react项目中，配置了eslint，但在 npm start 时，给了这样的提示：React version not specified in eslint-plugin-react settings解决方案：// 在 .eslintrc.js 中需要指定react版本号："settings": { "react": { /** * "detect" automaticall...
2020-04-20 10:33:37
2882
原创 回调函数、异步编程
回调函数： 是一段可执行的代码，作为参数传递到另外一个函数中，其作用是在需要的时候调用这段（回调函数）代码。回调函数使用场景：异步编程事件监听、处理setTimeout、setInterval定时器方法通用方法，简化逻辑异步编程常见方法：回调函数DOM事件监听发布订阅模式ES6中的promise 对象ajax请求注意：异步任务又可分为宏任务（macro-task）...
2020-04-17 22:08:30
334
原创 React 事件处理及 this 绑定问题
React 事件处理React 事件是一个合成事件，JSX实际上是 React.createElement(component, props, ...children) 函数提供的语法糖表达方式，那么：// JSX 表达<button onClick = {this.handleClick}> Click me</button>// 经转化为React.cr...
2020-04-14 11:19:05
272
原创 constructor 中为什么要调用super和传递props
来自官网中的一段代码，入下：// 通过该方法将props传递到父类的构造函数中constructor(props) { super(props); this.state = {date: new Date()};}为什么调用super这并不是 react 的限制，是 js（ES6） 的限制，ES6中 class 的 this 指向问题，ES6中类的继承需要先调用拿到当前实例的...
2020-04-13 21:03:07
1316
1
原创 高级数据结构
了解了基本数据结构，就可以帮助我们分析问题的结构，提高解决问题的能力，但对于复杂问题，或者为了提高解决问题的时间、空间复杂度，基本的数据结构还是远远不够的，因此在学习、介绍几种高级数据结构：优先队列图优先队列特点：能够保证每次取出的数据都是队列中优先级最高的元素。优先级可自定义。应用场景：从一个无序数组中根据其优先级逐步地找出需要的元素值。实现方式：优先队列本质一个二叉堆（Bin...
2020-04-11 18:00:25
645
原创 react 之 create-react-app 启动命令 npm run eject
前言：使用 create-react-app 初始化 react 项目时：初始化后项目文件只有：node_modules 是各个依赖存放的位置public 用来存放静态资源，其不参与构建src 项目源码文件，一般开发就在该目录下扩展，并参与构建package.json 文件默认只有三个依赖：react、react-dom、react-scripts，其他如 webpack 、b...
2020-04-10 21:17:02
910
转载 JavaScript----什么是纯函数
定义简单来说，一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。这么说肯定比较抽象，我们把它掰开来看：函数的返回结果只依赖于它的参数。函数执行过程里面没有副作用const a = 1const foo = (b) => a + bfoo(2) // => 3foo 函数不是一个纯函数，因为它返回的结果依赖于外部变量 a，我...
2020-04-09 15:07:23
155
原创 递归与回溯
概念理解：递归递归的基本性质就是函数自调用，处理问题时，递归是将一个大问题不断的化为小问题进行处理推导的过程。回溯利用了递归的性质，从问题的开头出发，不断地尝试，回一步或者是多步在做选择，直到到达终点的一个过程。递归分析递归算法是调用自身函数的一中算法（二叉树遍历中得到了广泛应用），可以简单理解，算法是已经实现了解决问题的步骤，使用递归只是将一个大问题不断的变小，直到得出结果。案例...
2020-04-02 11:25:26
568
转载 带你体验Vue2和Vue3开发组件有什么区别
我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来。但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验。还有一些童鞋已经开始又慌又抓狂了 – “又要开始学新的写法了 (ノToT )ノ ~┻┻”。所以这里我使用Vue2和Vue3开发一个简单的表格组件来展示一下Vue2和Vue3开发组件的区别。看完这片文章后，你将会有一个概念Vue2和Vue3开发组件时的区别，并且为Vue3...
2020-03-20 09:43:44
210
原创 js实现双向链表
双向链表function DoubelLinkedList() { let Node = function (ele){ this.ele = ele; this.prev = null; this.next = null; } let length = 0, head = null; // 向尾部追加 this.append = function(ele) { l...
2020-03-10 18:30:04
185
转载 js实现单链表、单链表循环
链表 是一种物理存储单元上非线性、非连续的数据结构。每个节点由数据域（存储的数据值）和指针域（存储的是指针信息指向链表的下一个或上一个元素）组成。正式由于指针的存在，链表在物理存储上是非连续的。特点：添加、删除节点效率高，只需要操作指针的指向即可链表长度是无限制的，可动态的变化长度js 实现单链表function LinkedList() { let Node = funct...
2020-03-10 17:35:28
448
原创 vue树状组件的实现
使用场景：菜单栏的展示任何有层次结构的树状格式实现思路：vue树状组件是属于递归组件的应用，可以通过组价命名来使用自己的组件。代码展示：父组件<template> <div> <tree-item :list="categoryList"></tree-item> </div></template&g...
2020-03-08 15:33:54
765
原创 Vue弹窗组件的实现
弹窗组件包含内容：弹窗遮罩层内容层的实现（涉及slot、props、$on、$emit）实现步骤：搭建组件UI样式，HTML、css实现遮罩层、内容区编写弹窗内容：通过组件slot插槽接收父组件传递过来的弹窗内容组件开关的实现组件代码实现<template> <div class="modal-bg" v-show="show"> <di...
2020-03-08 10:51:34
4978
1
原创 js中关于各个循环的认识
for循环循环最原始的写法，相比起来说，写法较为麻烦。forEachforEach是数据内置的循环方法，会对数组中的每个元素提供一次回调执行函数匿名函数中this是指的window执行的速度没有for循环快，因为接收了一个回调函数，性能上比不上for循环其返回值是 undefined ，不可以链式调用，可以通过数据的索引修改原来数组的数据forEach遍历过程中没有办法通过 ret...
2020-03-06 20:45:18
169
原创 实现 element message 消息提示组件
提示组件UI样式如下：设计思路：element message消息提示是方法的方式触发：this.$message({});本质上还是组件，故需要将组件转化为方法的方式来使用最后将方法挂载到 Vue prototype 原型上，即可全局使用message.vue组件的实现：<template> <div class="message> <p&g...
2020-03-06 19:56:14
3110
原创 js new的原理解析
new 的使用场景：一般是用来创建一个 obj 实例的。代码分析：function People(name) { // 构造函数可以直接以函数的方式来使用 this.name = name; console.log(this); return {name: name};}var p1 = new People("zlq");var p2 = People("zs");co...
2020-03-06 17:38:53
305
原创 原生js实现 bind 绑定 this 指向
我们都知道对于 this 指向来说，可以通过 call、apply、bind 来改变 this 的指向，那么如何自己实现 bind 绑定 this 的方法呢？如下分析：要想直接当全局的方法来使用，那么需要在 Function 原型上添加bind方法；获取方法自身的 this 指向获取调用函数的上下文（传递参数）通过 apply 改变其指向并返回Function.prototype....
2020-03-06 16:41:22
426
原创 面向对象、面向过程编程的理解
概念理解1. 面向过程编程面向过程编程是一种以过程为中心的编程思想，分析解决问题的步骤，然后使用函数的方式把这些 步骤 一步一步的实现。特点：数据和对数据的操作是分离的。2. 面向对象编程面向对象编程是将事务对象化，通过 对象通信 来解决问题。特点：数据和对数据的操作是绑定在一起的。三大特征：（1）封装：把客观事务封装成抽象成的类，隐藏对属性和方法的实现细节，仅对外提供接口。（...
2020-03-06 10:54:13
965
1
原创 常用数据结构
数据结构分类：数据结构 是指相互之间存在一种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成。常见的数据结构有：数组、栈、队列、链表、树、图、堆、散列表等，如下：1. 数组数组是可以在内存中连续连续存储多个元素的结构，在内存中的分配也是连续的，访问是通过元素下标进行的，数据下标从 0 开始。int [] data = new int[100];data[0] = 1;优...
2020-03-06 09:46:50
430
原创 js实现队列
js实现队列队列： 队列是一种特殊的线性表，特殊性表现它只能在表的前端 front 进行删除操作，只能在表的后端 rear 进行添加操作。 先进先出（FIFO）
2020-03-05 15:20:28
1016
原创 js实现二叉树根节点到所有叶子节点组成的路径数字之和
思路：首先会用到的就是树的遍历，其次为了得到每个路径的数字之和，需要对每次遍历完的结果进行保持，于是会用到递归的思想。// 测试数据如下：var root2 = { val: 1, left: { val: 2, left: null, right: null, }, right: { val: 3...
2020-03-05 10:11:26
1364
原创 js数据结构☞二叉树遍历
二叉树的遍历//测试数据：二叉树结构如下：var root = { val: 1, left: { val: 2, left: { val: 4, }, right: { val: 5 } }, right: { v...
2020-03-05 09:59:14
161
原创 js之字形输出二叉树
/* 1 2 3 4 5 6 7 输出：[[1], [3, 2], [4, 5, 6, 7]]*/// 主要思想就是二叉树的遍历function print(root) { if(!root) return []; var result = [], queue = [], flag = true; queue.pu...
2020-03-04 15:26:01
316
原创 JS中string值类型为什么会有length属性、以及其他字符串方法 -- js包装对象
前言JavaScript数据类型包含两种：基本类型（或原始类型）和引用类型；基本类型的值是保存在栈内存中的简单数据段，是按值来访问的。有 String、Number、Boolean、Undefined、Null；引用类型的值是保存在堆内存中的对象，是按引用来访问的。有Object、Function、Array、Date、RegExp等；对象自身是拥有属性方法的，如下：var arr ...
2020-03-03 09:19:53
2177
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人