蓝色清晨_-优快云博客

//获取随机布尔值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 253

转载 Git忽略规则.gitignore梳理

参考文档：Git忽略规则.gitigonore梳理

2022-02-17 13:43:41 366

原创 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 717

原创在cmd中使用git命令时,中文名称的html文件显示数字

https://blog.youkuaiyun.com/luoww1/article/details/106410442/

2022-02-17 13:23:23 472 1

原创程序的开发流程

程序开发流程图详解一、需求分析阶段产品经理 PM 召集项目相关人员，开需求讨论会、讲解原型相关人员需要以此了理解产品的需求，提出质疑：这是什么功能，怎么做，为啥这么做，大概包含如下几个方面：评估实现难度和实现成本，是否有潜在技术问题/风险对比一下自己整理的需求图，如果有和自己想的不符合的，提出疑问。理解PM提出此次需求的目的，明白哪些内容是重点，哪些次要，可以适当取舍。如果产品要求提供时间，简单项目可以预估，复杂项目不可马上给出时间，需要仔细评估，评估时间包含开发、自测、测试人员测试、修复b

2021-07-09 16:37:26 3183 1

原创程序开发流程

一、拿到原型图，先自我解析需求，画出思维导图，流程图在未拿到 UI 给定的 PSD 时，可以先理清我们的需求依赖的外部资源后端提供的接口UI出图的大概布局后期频繁改动的地方需要实现的效果下拉刷新动画效果吸顶效果懒加载、预加载、防抖、节流二、产品召集项目相关人员，开需求讨论会，产品讲解原型理解产品的需求，提出质疑：这是什么功能，怎么做，为啥这么做评估实现难度和实现成本，是否有潜在技术问题/风险对比自己整理的需求图，如果有和自己想的不符合的，提出疑问理解PM提

2021-07-09 16:36:33 615 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 437

原创路由：指定根路由地址

指定根路由地址：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 285

原创 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 630

原创 3.0 利用闭包模仿块级作用域

javascript 没有块级作用域的概念。这意味着在块语句中定义的变量，实际上是在函数中而非语句中创建的。从作用域链的角度来理解是，所有在函数内定义的变量（所有，也就是说块语句中定义的变量也包含在内）都会在这个函数执行时所创建的函数的活动对象中，因此从函数内的所有变量定义开始，就可以在函数内部随处访问它。闭包也可以通过作用域链来访问它。function outputNumbers(count){ for(var i = 0; i < count; i++){ console.log(i

2021-07-07 17:04:11 291 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 729

原创 1.0 什么是闭包

什么是闭包有权访问其他函数作用域中变量的函数。在 javascript 中，只有函数内部的子函数才能访问局部变量，所以闭包可以理解成"定义在函数内部的函数"。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。闭包最典型的应用是实现回调函数(callback)。不必纠结到底怎样才算闭包，其实你写的每个函数都算作闭包。即使是全局函数，你访问函数外部的全局变量时，就是闭包的体现。创建闭包的常见方式在一个函数内部创建另一个函数。举例说明闭包的形成function a(){ var i

2021-07-07 17:03:10 215

原创阶乘问题的解决方案

//使用递归函数实现阶乘问题 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 331

原创 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 123

原创 1.4 Class类的静态方法

什么是静态方法类相当于实例的原型，所有在类中定义的方法都会被实例继承。如果在方法前面加上 static 关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就成为"静态方法"class MakeFoo{ static classMethod(){ console.log('hello'); }}//只能通过类来调用MakeFoo.classMethod();//hello//在实例中调用报错未定义let smallF = new MakeFoo();

2021-07-02 15:46:18 961 1

原创 1.4 Class类的静态方法

什么是静态方法类相当于实例的原型，所有在类中定义的方法都会被实例继承。如果在方法前面加上 static 关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就成为"静态方法"class MakeFoo{ static classMethod(){ console.log('hello'); }}//只能通过类来调用MakeFoo.classMethod();//hello//在实例中调用报错未定义let smallF = new MakeFoo();

2021-07-02 15:44:48 1059

原创 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 514

原创 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 202 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 208

原创 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 263

原创 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 705

原创 3.1 react的空标签

React.Fragment() 空标签React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。Fragments 看起来像空的 JSX 标签：render() { return ( <> <ChildA /> <ChildB /> <ChildC /> </> );}**一个常见模式是为一个组件返回

2021-07-01 18:26:59 3287 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 123

原创 3.0 在react如何编写组件的样式

原文链接：https://blog.youkuaiyun.com/zsm4623/article/details/865932731. 使用行内样式注意点: react中规定,写行内样式时，要写在{{}}中，使用驼峰命名法render(){ return <div> {/* 第一个{}表示我们要在JSX里插入js了，第二个是对象的括号 */} <h1 style={{color:"red",fontSize:"20px"}}>使用行内样式<

2021-06-30 16:39:31 296

原创 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 97

原创创建函数的两种方式

定义函数的方式有两种：一种函数声明，另一种是函数表达式。函数声明的语法是这样的：function functionName(arg0,arg1,arg2){ //函数体}关于函数声明，它的一个重要特征是函数声明提升，意思是在执行代码之前会先读取函数声明，这意味着可以把函数声明放在调用它的语句后面。//不会抛出错误，因为代码执行之前会先读取函数声明sayHi();function sayHi() { alert("Hi")}这个例子不会抛出错误，因为代码执行之前会先读取函

2021-06-23 10:15:01 1345 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 110

原创 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 193

空空如也

空空如也