- 博客(276)
- 收藏
- 关注
RSS订阅原创 JS常用工具函数
//获取随机布尔值const randomBoolean = () => Math.random() >= 0.5;randomBoolean()//反转字符串const reverseStr = (str) => str.split('').reverse().join('');reverseStr("hello")//数组去重const removeDuplicates = (arr) => [...new Set(arr)];removeDuplicates([
2022-03-09 10:45:25
209
原创 warning: LF will be replaced by CRLF in package-lock.json.
问题：使用git add 命令时提示如下warning: LF will be replaced by CRLF in package-lock.json.The file will have its original line endings in your working directory解决：在命令行中执行如下操作git config --global core.autocrlf true感谢：https://www.cnblogs.com/youpeng/p/11243871..
2022-02-17 13:34:51
641
原创 在cmd中使用git命令时,中文名称的html文件显示数字
https://blog.csdn.net/luoww1/article/details/106410442/
2022-02-17 13:23:23
369
1
原创 程序的开发流程
程序开发流程图详解一、需求分析阶段产品经理 PM 召集项目相关人员，开需求讨论会、讲解原型相关人员需要以此了理解产品的需求，提出质疑：这是什么功能，怎么做，为啥这么做，大概包含如下几个方面：评估实现难度和实现成本，是否有潜在技术问题/风险对比一下自己整理的需求图，如果有和自己想的不符合的，提出疑问。理解PM提出此次需求的目的，明白哪些内容是重点，哪些次要，可以适当取舍。如果产品要求提供时间，简单项目可以预估，复杂项目不可马上给出时间，需要仔细评估，评估时间包含开发、自测、测试人员测试、修复b
2021-07-09 16:37:26
2869
原创 程序开发流程
一、拿到原型图，先自我解析需求，画出思维导图，流程图 在未拿到 UI 给定的 PSD 时，可以先理清我们的需求依赖的外部资源后端提供的接口UI出图的大概布局后期频繁改动的地方需要实现的效果下拉刷新动画效果吸顶效果懒加载、预加载、防抖、节流二、产品召集项目相关人员，开需求讨论会，产品讲解原型理解产品的需求，提出质疑：这是什么功能，怎么做，为啥这么做评估实现难度和实现成本，是否有潜在技术问题/风险对比自己整理的需求图，如果有和自己想的不符合的，提出疑问理解PM提
2021-07-09 16:36:33
490
3
原创 vscode快速生成Vue模板
第一步: 新建模板并保存文件 --> 首选项 --> 用户代码片段 --> 输入vue，选择vue.json -->复制 第三步中的模板内容中内容保存第二步: 添加配置，让vscode允许自定义的代码片段提示出来文件 --> 首选项 --> 设置 —> 添加这2项（配置过的可以跳过）// Specifies the location of snippets in the suggestion widget"editor.snippetSuggestions
2021-07-08 15:02:56
380
原创 路由：指定根路由地址
指定根路由地址：import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter);// 引入一级路由import Main from './../views/main/Main'//引入路由组件import Foo from './../views/main/components/Foo'import Bar from './../views/main/components/Bar'//创建 route
2021-07-08 13:45:39
232
原创 4.0 利用闭包创建私有变量
通常，JavaScript 开发者使用下划线作为私有变量的前缀。但是实际上，这些变量依然可以被访问和修改，并非真正的私有变量。这时，使用闭包可以定义真正的私有变量：function Product() { var name; this.setName = function(value) { name = value; }; this.getName = function() { return name; };}var p =
2021-07-07 17:05:35
512
原创 3.0 利用闭包模仿块级作用域
javascript 没有块级作用域的概念。这意味着在块语句中定义的变量，实际上是在函数中而非语句中创建的。从作用域链的角度来理解是，所有在函数内定义的变量（所有，也就是说块语句中定义的变量也包含在内）都会在这个函数执行时所创建的函数的活动对象中，因此从函数内的所有变量定义开始，就可以在函数内部随处访问它。闭包也可以通过作用域链来访问它。function outputNumbers(count){ for(var i = 0; i < count; i++){ console.log(i
2021-07-07 17:04:11
234
1
原创 2.0 利用闭包读取函数内部的变量
出于种种原因，我们有时候需要得到函数的内部变量。但是，由于在 javascript 中，函数内部能够访问外部的变量，而函数外部却无法访问函数内的的变量。所以，正常情况下，是办不到的。但是，我们可以通过变通的方法来实现。那就是，在函数内部，再定义一个函数。function demo1(){ var n = 6699; function demo2(){ alert(n);//6699 }; return demo2;}var demo3 = demo1(
2021-07-07 17:03:41
597
原创 1.0 什么是闭包
什么是闭包有权访问其他函数作用域中变量的函数。在 javascript 中，只有函数内部的子函数才能访问局部变量，所以闭包可以理解成"定义在函数内部的函数"。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。闭包最典型的应用是 实现回调函数(callback)。不必纠结到底怎样才算闭包，其实你写的每个函数都算作闭包。即使是全局函数，你访问函数外部的全局变量时，就是闭包的体现。创建闭包的常见方式在一个函数内部创建另一个函数。举例说明闭包的形成function a(){ var i
2021-07-07 17:03:10
154
原创 阶乘问题的解决方案
//使用递归函数实现阶乘问题 function factorial(num){ if(num<=1){ return 1; }else{ return num*factorial(num-1) } } console.log(factorial(5));//120 //在函数有名字，而且名字以后也不会变的情况下的情况下，这样定义没有问题。这样写的第一个问题是： ...
2021-07-06 14:18:36
255
原创 3.0 let和const命令
let 声明的变量，只能在 let 命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1for 循环的计数器，很适合使用 let 命令，因为计数器 i只在循环体内有效，在循环体外引用就会报错。for (let i = 0; i < 10; i++) { // ...}console.log(i);// ReferenceError: i is not def
2021-07-02 15:48:23
74
原创 1.4 Class类的静态方法
什么是静态方法类相当于实例的原型，所有在类中定义的方法都会被实例继承。如果在方法前面加上 static 关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就成为"静态方法"class MakeFoo{ static classMethod(){ console.log('hello'); }}//只能通过类来调用MakeFoo.classMethod();//hello//在实例中调用报错未定义let smallF = new MakeFoo();
2021-07-02 15:46:18
863
原创 1.4 Class类的静态方法
什么是静态方法类相当于实例的原型，所有在类中定义的方法都会被实例继承。如果在方法前面加上 static 关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就成为"静态方法"class MakeFoo{ static classMethod(){ console.log('hello'); }}//只能通过类来调用MakeFoo.classMethod();//hello//在实例中调用报错未定义let smallF = new MakeFoo();
2021-07-02 15:44:48
1016
原创 2.2 ES Module模块化的原理
ES Module的原理ES Module和CommonJS的区别一、CommonJS模块加载js文件的过程是运行时加载的，并且是同步的：运行时加载意味着是js引擎在执行js代码的过程中加载 模块；同步的就意味着一个文件没有加载结束之前，后面的代码都不会执行；console.log("main代码执行");const flag = true;if (flag) { // 同步加载foo文件，并且执行一次内部的代码 const foo = require('./foo'); c
2021-07-02 15:34:44
411
原创 2.1 ES Module 模块化
常用的模块化方式有 commonJS 规范、AMD 规范、CMD 规范以及 ES Module规范。JavaScript 没有模块化一直是它的痛点，所以才会产生我们前面学习的社区规范：CommonJS、AMD、CMD等。现在，ES 现在推出了自己的模块化系统 ES Module。ES Module 和 CommonJS 的模块化有一些不同之处：一方面它使用了 import 和 export 关键字；另一方面它采用了编译期静态类型检测，并且动态引用的方式；ES Module 模块采用 expo
2021-07-02 15:33:08
144
1
原创 2.0 非模块化带来的问题
非模块化开发带来的问题假设我们现有四个文件：index.html、a.js、b.js、c.js；并在index.html 中进行引入三个脚本文件。index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta na
2021-07-02 15:32:05
169
原创 3.3 使用properType进行类型检查
使用 PropTypes 进行类型检查为了防止传入的数据类型错误，我们可以使用 PropTypes 进行类型检查，可以规范传入数据的类型。借用第三方库 prop-types 来解决这一问题。命令端安装：npm install --save prop-types组件内引用：import ProperTypes from "prop-types"组件内使用：import React from "react";// 引入prop-typesimport ProperTypes from "p
2021-07-01 18:28:07
225
原创 3.2 获取props.children的值
通过 this.props.children 获取父组件传过来的内容//Column 父组件import React, { Component } from 'react'import ColumnItem from "./ColumnItem"export default class Columns extends Component { render() { return ( <div> <Col
2021-07-01 18:27:30
614
原创 3.1 react的空标签
React.Fragment() 空标签React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。Fragments 看起来像空的 JSX 标签：render() { return ( <> <ChildA /> <ChildB /> <ChildC /> </> );}**一个常见模式是为一个组件返回
2021-07-01 18:26:59
3057
1
原创 3.0 react之props
工程化常用的通信方式：1）：props父子组件消息传递2）：pubsub-js概念：PubSub消息订阅与发布；安装：yarn add pubsub-js使用：1.引入：import PubSub from “pubsub-js”2.发布消息3.在ComponentDidMount中订阅消息4.在ComponentWillUnMount中取消订阅props的只读性：组件无论是使用 函数声明 还是通过 class 声明，都绝不能修改自身的 props。props 是组件定义属性的集合。
2021-07-01 18:26:25
78
原创 3.0 在react如何编写组件的样式
原文链接：https://blog.csdn.net/zsm4623/article/details/865932731. 使用行内样式注意点: react中规定,写行内样式时，要写在{{}}中，使用驼峰命名法render(){ return <div> {/* 第一个{}表示我们要在JSX里插入js了，第二个是对象的括号 */} <h1 style={{color:"red",fontSize:"20px"}}>使用行内样式<
2021-06-30 16:39:31
239
原创 2.1 图解生命周期
1）前言：组件的生命周期可以帮助我们清楚的剖析一个组件从创建到销毁的全部流程。如果我们能够知其然且知其所以然，那么在后期多组件、中大型项目开发过程中，就能够很好的把控项目的性能细节。2）生命周期（1）图示[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jijm52qT-1624266950455)(C:\Users\Administrator\Desktop\react-lift.jpg)]（2）阶段划分：4个阶段1.初始化阶段2.更新阶段3.卸载阶段4.错
2021-06-28 15:15:21
70
原创 创建函数的两种方式
定义函数的方式有两种：一种函数声明，另一种是函数表达式。函数声明的语法是这样的：function functionName(arg0,arg1,arg2){ //函数体}关于函数声明，它的一个重要特征是函数声明提升，意思是在执行代码之前会先读取函数声明，这意味着可以把函数声明放在调用它的语句后面。//不会抛出错误，因为代码执行之前会先读取函数声明sayHi();function sayHi() { alert("Hi")}这个例子不会抛出错误，因为代码执行之前会先读取函
2021-06-23 10:15:01
1257
1
原创 16. 网络工具库
1）推荐：1.原生ajax2.fetchfetch号称是ajax的替代品，它的api是基于Promise设计的；旧版的浏览器不支持fecth，需要使用polyfill es6-promise3.axios（目前基本上各个框架都在使用）特性：从浏览器中创建XMLHttpRequest;从node.js中发出http请求；支持Promise API；拦截请求和响应；转换请求和响应数据；取消请求；自动转换json数据；客户端支持防止CSRF/XSRF支持多种请求方式：axios(config) 、ax
2021-06-22 09:15:11
71
原创 5.0 react之redux
我们把Flux看作一个框架理念的话，Redux是Flux的一种实现，除了Redux之外，还有很多实现Flux的框架，比如ReFlux、Fluxible等，但毫无疑问Redux获得得关注度最多，因为Redux具有很多其他框架无法比拟的优势。Redux是在Flux基础上进行改进的，在所有Flux的变体中算是最受关注的框架，没有之一。Flux的基本原则是"单向数据流"，Redux在此基础上强调三个基本原则：唯一数据源（Single Source of Truth）;保持状态只读（State is rea
2021-06-22 09:14:05
148
原创 4.0 react之state
React 把组件看成一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致。React里，只需要更新组件的 state ,然后根据新的 state 重新渲染用户界面（不需要操作DOM）。...
2021-06-22 09:13:37
71
原创 3.0 react之props
工程化常用的通信方式：1）：props父子组件消息传递2）：pubsub-js概念：PubSub消息订阅与发布；安装：yarn add pubsub-js使用：1.引入：import PubSub from “pubsub-js”2.发布消息3.在ComponentDidMount中订阅消息4.在ComponentWillUnMount中取消订阅props的只读性：组件无论是使用 函数声明 还是通过 class 声明，都绝不能修改自身的 props。props 是组件定义属性的集合。
2021-06-22 09:13:01
75
原创 2.2 实例演示生命周期
class Life extends React.Component{ //挂载阶段 constructor(props){ super(props); console.log("constructor()"); }; componentWillMount(){ console.log("componentWillMount()") }; ...
2021-06-22 09:11:57
56
原创 2.0 react生命周期
目前 React 16.8+的生命周期分为三个阶段，分别是挂载阶段、更新阶段、卸载阶段。分别对应组件生命周期的三个状态：1.Mounting：已插入真实DOM；2.Updating：正在被重新渲染；3.Unmounting：已移出真实DOMReact 的生命周期的函数有哪些：组件将要挂载时触发的函数：componentWillMount组件挂载完成时触发的函数：componentDidMount是否更新数据时触发的函数：shouldComponentUpdate将要更新数据时触发的函数：comp
2021-06-21 17:15:38
123
原创 1.5 创建 react 组件
常用的创建 React 组件的方式有两种：1.用构造函数创建组件；2.用 class 关键字创建组件用构造函数创建的组件叫无状态组件。用 class 关键字创建的组件叫做有状态组件。有状态组件和无状态组件的本质区别是有无state属性和有无生命周期函数。使用构造函数创建组件如果需要传参，在函数中加入一个 props 参数来接收，并且必须向外界 return 一个合法的 JSX 语法创建的虚拟 DOM.//1.组件名首字母要大写 2.必须 return 合法的jsx function P
2021-06-21 17:15:00
71
原创 1.4 调试工具
React Developer Tools是一款由 facebook 开发的有用的Chrome 浏览器扩展，可以通过 Chrome Web存储获取。使用 Chrome Devtools 进行调试时，可以查看应用程序的 React 组件分层结构，而不是更加神秘的浏览器 DOM 表示。添加 react developer tools 到 chrome，是对 chrome 开发工具的 React 调试工具。React的开发工具是开源 Chrome DevTools 延伸反应的 JavaScript 库。它允许你检
2021-06-21 17:14:03
55
原创 1.3 本地引入 React
在本地创建一个 Html 文件，直接用浏览器打开即可。<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello World</title> <!-- 引入 react 核心库 --> <script src="https://unpkg.com/react@16/umd/react.development.
2021-06-21 17:13:23
202
原创 1.2 创建 react 元素
React 元素React 元素（React element）,它是 React 中最小的基本单位。React 元素其实就是一个简单的 JavaScript 对象（俗称：虚拟DOM），一个 React 元素对应界面上的一部分 DOM，描述了这部分 DOM 的结构及渲染效果。React 元素不是真实的 DOM 元素，所以没办法直接调用 DOM 上的原生 API。渲染过程：React 元素 描述 虚拟DOM ,再根据 虚拟DOM 渲染出真实的DOM。虚拟DOM：就是用 js 对象结构模拟出 html
2021-06-21 17:12:52
444
原创 1.1 环境搭建工程化
node 安装react项目创建，需要node环境支持，如果你还没有安装node.js，请移步nodejs官网。检测是否安装成功 node -v安装最新版的 node 时，会自动安装 npm 包管理工具，检测是否安装成功 npm -v安装 create-react-app安装 create-react-app 有利于我们快速创建一个 react 应用。安装命令 npm install -g create-react-app ，检测是否安装成功 create-react-app -V使..
2021-06-21 17:12:20
47
原创 1.0 什么是react
React 是一个用于构建用户界面的 JavaScript 库。Vue 是一套用于构建用户界面的渐进式框架。React 的特点：React 是一个视图层框架以组件的方式进行开发使用 JSX 语法采用虚拟DOM 机制视图层框架react 是只负责显示的框架React 能把数据变成 DOM 显示出来，处理在 DOM 上触发的事件，把 DOM 事件再返回给数据react 是一个声明式的框架只需要定义数据和 DOM 的对应关系，这样数据在变换的时候，DOM 会自动变化react 是数据驱
2021-06-21 17:11:50
102
原创 0.0 什么是react
React 是一个用于构建用户界面的 JavaScript 库。Vue 是一套用于构建用户界面的渐进式框架。React 的特点：React 是一个视图层框架以组件的方式进行开发使用 JSX 语法采用虚拟DOM 机制视图层框架react 是只负责显示的框架React 能把数据变成 DOM 显示出来，处理在 DOM 上触发的事件，把 DOM 事件再返回给数据react 是一个声明式的框架只需要定义数据和 DOM 的对应关系，这样数据在变换的时候，DOM 会自动变化react 是数据驱
2021-06-21 13:59:25
63
原创 5.调试工具
React Developer Tools是一款由 facebook 开发的有用的Chrome 浏览器扩展，可以通过 Chrome Web存储获取。使用 Chrome Devtools 进行调试时，可以查看应用程序的 React 组件分层结构，而不是更加神秘的浏览器 DOM 表示。添加 react developer tools 到 chrome，是对 chrome 开发工具的 React 调试工具。React的开发工具是开源 Chrome DevTools 延伸反应的 JavaScript 库。它允许你检
2021-06-21 13:48:11
47
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人