SDUzzy的博客

因为最近毕业设计要写答辩ppt，里面需要统计工作量，因此写了一个用来统计代码行数的小demo。

跟着尚硅谷的天禹老师学习React看视频可以直接点击 b站视频地址概述在2021年11月，React官方将ReactRouter6调整为ReactRouter的默认版本1.React Router以3个不同的包发布到npm上，它们分别为：react-router：路由的核心库，提供了很多的组件和钩子。react-router-dom：包含了react-router所有内容，并添加了一些专门用于DOM的组件，例如<BrowserRoute/r>react-router-native

react扩展:hooks、组件通信、ssetState、lazyLoad、Context、Fragment、组件优化、render props、错误边界

跟着尚硅谷的天禹老师学习React看视频可以直接点击 b站视频地址简介redux是什么redux是一个专门用于状态管理的JS库（不是react插件库）它可以用在react，angular，vue等项目中，但基本与react配合使用。作用：集中式管理react应用中多个组件共享的状态redux在什么情况下使用某个组件的状态，需要让其他组件可以随时拿到（共享）一个组件需要改变另一个组建的状态（通信）总体原则：能不用就不用，除非比较难以实现的时候再用。redux的三个核心概念a

antd参考antd官网：在 create-react-app 中使用使用输入指令 npm install antd 安装antd注意antd需要自己手动引入样式。import 'antd/dist/antd.css'文档如果需要看详细的教程，需要看3.x版本的文档。基本使用App.jsimport React, { Component } from "react";import { Button,DatePicker } from "antd";import 'antd/dist

跟着尚硅谷的天禹老师学习React看视频可以直接点击 b站视频地址SPA的理解单页Web应用（Single Page Application）整个应用只有一个完整的页面简单来讲就是只有一个html文件，比如React脚手架搭建后只有一个放在public文件夹的index.html点击页面中的链接只会做部分界面的更新。数据都需要通过ajax请求获取，并在前端异步更新路由的理解可以理解在页面组织过程中，以路径作为键，以组件作为值得映射过程。什么是路由一个路由就是一个映射关系key

脚手架和一个todolist案例

事件处理、生命周期、diffing

React简介、state、props、refs学习

比对两个数据结构相同的对象并返回两个对象中值不同的键BFS版var time = new Date()var obj1 = { a: 1, // b: { c: 1, // d: 2 // }, e: [1, 2, 3], // 每个都是 f: '123', // g: { h: 3, // i: 5, // j: { k: 1, //

参考文章官方文档起步1、安装（略）2、挂载组件Vue Test Utils 通过将它们隔离挂载，然后模拟必要的输入 (prop、注入和用户事件) 和对输出 (渲染结果、触发的自定义事件) 的断言来测试 Vue 组件。被挂载的组件会返回到一个包裹器（wrapper）内，而包裹器会暴露很多封装、遍历和查询其内部的 Vue 组件实例的便捷的方法。你可以通过 mount 方法来创建包裹器。// 从测试实用工具集中导入 `mount()` 方法// 同时导入你要测试的组件import { moun

参考文章：官方文档APImount()shallowMount()render()renderToString()选择器createLocalVue()createWrapper(node [, options])配置enableAutoDestroy(hook)mount()参数：{Component} component{Object} options返回值： {Wrapper}这个的选项比较多。用法：创建一个包含被挂载和渲染的 Vue 组件的 Wrapper。i

菜鸟教程-正则表达式在js中使用正则表达式var reg = /[a-z]/var regObj = new RegExp('[0-9]')console.log('123'.search(reg)) // -1console.log('123'.search(regObj)) // 0动态使用正则表达式：正则表达式构造函数var index = 'id:'for(let i=0;i<10;i++){ var reg = new RegExp(index + i) c

Symbol一、简介ES5 的对象属性名都是字符串，这容易造成属性名的冲突。想为一个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Nu

一、Promise的含义1、Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。2、三种状态：pending、fulfilled（千万不要记成resolved，不过也可以混用）、rejected3、优点：避免回调地狱4、缺点：无法取消、如果不设置回调函数有问题也不会被发现、pending状态时无法知道进展二、P

十四、ProxyProxy 实例的方法get()set()apply()has()construct()deleteProperty()defineProperty()getOwnPropertyDescriptor()getPrototypeOf()isExtensible()ownKeys()preventExtensions()setPrototypeOf()注意：handler可以写在函数里面，如果需要复用或者需要创建proxy时简便一些可以单独声明。第一个参数也是如

九、数组的扩展扩展运算符（…）1、常规用法…后跟空数组则没有任何作用[...[],1]// [1] 注意不是[undefined,1]仅当在函数参数列表中，扩展运算符才可以放在小括号内。(...[1,2])// Uncaught SyntaxError: Unexpected numberconsole.log((...[1,2]))// Uncaught SyntaxError: Unexpected numberconsole.log(...[1,2])// 1 22、ap

一、简介1、es和js的关系ES全称ECMA（European Computer Manufacturers Association）Script，是一种标准。js除了标准的还有JScript 和 ActionScript。总的来说前者是后者的规格，后者是前者的一种实现。2、ES6和ES2015的关系ES6泛指5.1版本后的js的标准，也有ES2016、ES2017等，ES2015是ES6的第一个版本，有时候ES6也特指ES2015。3、ES历史ES3就是js的基础，1、2都没有得到广泛的支持

一、文件系统模块无需安装。 作为 Node.js 核心的组成部分，可以通过简单地引用来使用它：const fs = require('fs')一旦这样做，就可以访问其所有的方法，包括：fs.access(): 检查文件是否存在，以及 Node.js 是否有权限访问。fs.appendFile(): 追加数据到文件。如果文件不存在，则创建文件。fs.chmod(): 更改文件（通过传入的文件名指定）的权限。相关方法：fs.lchmod()、fs.fchmod()。fs.chown(): 更改文

基础AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页面。一、发送请求如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：xmlhttp.open("GET","test1.txt",true);xmlhttp.send();（感觉可以封装一个同步ajax库）1、open与send方法GET 还是

这三个是最近做移动端项目遇到的一些比较小的需求。1、禁止滚动背景：手动实现了一个压屏窗（可以理解成带遮罩的弹窗），发现在弹窗出现后，依然可以通过鼠标滚轮上下滑动来使下面的列表进行滑动，要解决这个问题。实现一：利用betterscroll插件，将列表彻底做成只能被touch或者tap类事件触发滚动的组件。实现二：如果弹窗没有滚动需求的话，可以在弹窗弹出时，禁用touchmove事件实现三：如果弹窗没有滚动需求的话，可以把body的overflow设置为hidden，直接就没有滚动这一说了2、文本溢

因为这是个简易版，所以代码行数不多，直接贴上代码再看。<template> <view class="main-container"> <view class="main-left" @touchmove='touchMove' @touchstart='touchStart' @touchend='touchEnd'> <canvas class="left-canvas-area" canvas-id="s

要求能够实现将个人照片、信息，展示到小程序页面中，并可以导出。但是因为后端没有一个单独的图片服务器，并且图片是以一个blob对象捎带在响应数据中的，因此还要考虑blob数据转换成文件（图片）。可以拆解一下功能逻辑：1、发起请求，保存图片到本地路径，或者本地临时路径。2、绘制。3、绑定按键，点击即可导出文件（图片）。其中1、3都有uniapp和小程序都有自带的api。2的话主要是考虑canvas，主要有两种实现思路，一种是通过wxml导出，一种是直接在canvas上绘制。其中wxml导出是不大好实

一、node与浏览器的区别1、生态系统不同没有document、window以及其他对象（比如cookies）2、运行环境在node中，可以选择运行环境，不需要像浏览器端那样去做适配。3、模块系统不同node中使用的是CommonJS，浏览器端使用的是ES的模块系统。简单来讲就是node，使用require()而不是import二、V8引擎...

参考文章阮一峰的三篇文章：Javascript模块化编程（一）：模块的写法Javascript模块化编程（二）：AMD规范Javascript模块化编程（三）：require.js的用法

今天换了个新电脑，什么都没有，重新配置一下前端的开发环境。nvm:node.js version managernpm:node.js packages managernrm:node resource manager安装顺序nvm->npm->nrm，先安装nvm，然后用nvm安装npm，最后用npm安装nrm1、nvmnvm安装比较简单，只需要去github上下载一份windows专用的nvm。...

大概就是这样一个需求：首先通过一个id值来获取整个数据列表，然后最后附上整个代码：<template><view id="container"> <view style="height:30rpx"></view> <view class="apply-card" v-for="(apply,index) in applys" :key="apply.application_abroad_id">

1、使用Router使用webpack构建的项目时，有一个router文件夹下面有一个index.js文件，里面全局配置了整个路由（当然如果不使用webpack构建的项目，可以写一个js文件，里面包含下面的内容）。import Vue from 'vue'import Router from 'vue-router'import client from '../client'import personal from "../personal"import mainClient from '..

BOM提供了很多对象，用于访问浏览器的功能，这些功能与网页无关。W3C把浏览器中JavaScript最基本的部分标准化，已经将BOM的主要方面纳入了HTML5规范中。1、window对象BOM的核心对象是window，他表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量、函数，都以window作为其Global对象，因此有权访问parseInt()等

对DOM的扩展，主要有Selector API和HTML5。1、选择符API众多JavaScript库中最常用的一项功能，就是根据CSS选择符选择与某个模式匹配的DOM元素。实际上，jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用，从而抛开了getElementById()和getElementsByTagName()。Selector API Level1的核心是两个方法，querySelector()和querySelectorAll()，可以通过Document和Elemen

DOM描述了一个层次化的节点树，允许卡法人员添加、移除、修改页面的一部分。DOM拖泰语Netscape及微软公司创始的DHTML（动态HTML）1、节点层次DOM节点分为几种不同的类型，每种类型分别表示文档中不同的信息及标记。每个节点...

canvas是html5中的新功能，并且canvas还建议了一个WebGL的3D上下文。主流浏览器基本都支持。Windows XP本身缺少必要的绘图驱动程序，因此不可以使用canvas。1、canvas元素canvas的使用原理是先在html中声明一个canvas元素，然后在这个元素所占区域（使用width和height属性指定）中进行绘制。canvas可以使用id来标识自身，也可被css选择器选择后进行调整。基本使用方法，创建一个canvas元素，获取这个canvas元素，获取二维上下文。&lt

对验证码组件进行封装参考了这篇文章<canvas id="canvas" width="120" height="30" style="cursor: pointer;"></canvas>var cas=document.querySelector('#canvas');var ctx=cas.getContext('2d'); //构建绘图环境cas.onclick = randomCode;position={x:0,y:0,w:120,h:30};ne

因为浏览器间存在大大小小的差异以及怪癖（quirk），开发人员应当优先采取一种更通用的方法，然后在使用特定于浏览器的技术增强该方案。当然这是红宝书的观点，是一种渐进增强的观点，还有与之相对的优雅降级思想。注意：检测Web客户端的方法和手段有很多，不到万不得已的时候就不要使用客户端检测，尽量去找通用的方法。1、能力检测最常用的客户端检测形式就是能力检测（也叫特性检测），能力检测的目的不是识别浏览器，而是识别浏览器的能力。举例，IE在早期版本没有document.getElementById()方法；

1、html5为

1、安全类型检测问题背景:typeof和instanceof有时候不靠谱，比如Safari（一直到4）在对正则表达式使用typeof时会返回“function”，instanceof在多个全局作用域存在的情况下（比如一个页面多个frame），也会出现问题，比如：var isArray = value instanceof Array;所以引入了安全的类型检测概念。实现:基本原理是使用toString方法，在任何值上调用Object的toString方法，都会返回一个[object Native

1、过滤器例子<div id="app"> {{ message | capitalize }}</div><script>new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString()

1、将js中Date类型对象转换为“yyyy-MM-dd HH:MM:SS”格式原博地址：https://cloud.tencent.com/developer/article/1484285getNowFormatDate : function () { var date = new Date(); var seperator1 = "-"; var seperator2 = ":"; var month = date.getMonth(

1、html不区分大小写，但js会相应的将短横分隔写法（kebab-case）和驼峰表示法（camelCase）转换。2、methods中的this指向的是全局中的data和props3、slot内容分发是以在html实际内容的区域，在子组件标签内部的内容插入component中已经定义的中，如果需要使用具名slot，则需要在中声明内容。例如<子组件><h2 name=”aba”></h2></子组件>//Component中<子组件&gt

组件间通信：Props：1、props的类型可以是一个数组或对象。2、子组件可以使用、绑定这个数组中的值。3、Props在vue2中，数据的传递是单向的，即由父组件传给子组件，反过来不成立。4、两种需要更改prop的情况：子组件希望使用父组件的传值作为初始值，并希望随意修改，可以在组件中的data中声明一个变量，然后将prop中的值赋给它，就可以随意修改了；子组件需要使用传入的值并修改，例如需要在style中将传入的width直接使用，可以在子组件中合适呢个名一个计算属性，style:functi