qq_19249021的博客

vue3 forEach 或者 map中使用splice删除数组元素错误问题

React Hooks 18 effect执行多次的解决方案

接到这个需求有点懵逼，网上搜了搜发现有现成的直接可用的，代码也很简单，分享给各位。 // 需要用到的地方调用就好 watermark({watermark_txt: '我是水印Nickname'}) function watermark(settings) { //默认设置 var defaultSettings={ watermark_txt:"text", watermark_x:20,//水印起始位置x轴坐标 .

问题出现场景在学习TypeScript过程中，发现不同的.ts文件中用class声明相同的类，会报错，提示: 标识符"xxx"重复， xxx.ts文件中也声明了"xxx"，具体截图如下: class Person { public name: string constructor(name: string) { this.name = name } }解决办法其实解决办法很简单，只需要在class的前面加上export就好了，这样就可以解决这个问题。 extends cl

出现这个问题是因为没有找到AMap对象解决办法： // 只需要在new 实例化对象AMap前面添加window就好。后面的xxx为你自己想要的操作。例如添加marker // new window.AMap.Marker({}) new window.AMap.xxx({ // ... })...

本章回顾一下Javascript的一些操作方法。数组方法主要用到以下几个知识点，简单介绍一下unshift() 可以向数组开头添加一个或多个元素，返回数组新长度。(改变原数组)shift() 删除数组开头第一个元素，返回被删除元素的值。(改变原数组)splice() 可删除从index处开始的零或多个元素，并且用参数列表中声明的一个或多个值来替换被删除的元素。(改变原数组)1. 数组元素换位置 function swapArr(arr, arg1, arg2) { arr[arg.

近期在做地图项目，利用的是高德地图API。遇到了一些问题。在此记录下来。问题描述动态生成的轨迹利用setData来设置数据，同样我们可以利用这个方法来清除数据。以下只展示相关代码，自己本身业务相关代码不做展示。代码如下： trackInit() { // 重要！！！ 就是它起到清除数据的作用。注意它放在方法的最顶部 if (window.pathSimplifierIns) { //通过该方法清空上次传入的轨迹 pathSimplifierIns.set.

众所周知，ES6虽然有着很多的兼容性问题。(使用Babel转码解决)。但是很多开发者已经在项目中用了。就算现在不打算用，为了看懂别人代码你也得懂一些ES6语法了。本文开始讲不再讲ES6和JavaScript的关系之类的东西。只是介绍ES6语法。1. 声明变量1). 现有的声明方式以前声明变量只有一种方法，那就是使用var关键字。ES6对声明进行了扩展，现在有三种声明方式：var：variable，可以理解为变量的意思let： 在英文中是 让 的意思，也可以理解为一种声明的意思const：在.

Redux 通俗来讲就是一个组件状态管理器。由于大型项目之间组件难免会发生一些通信关系。例如：父子组件、兄弟组件、也可能毫无关系的两个组件之间通信。如果不采用状态管理器就会使代码逻辑混乱，一团乱麻，异常难维护。这个时候就需要 Redux 上场了。但是，对于简单的项目来说，运用Redux就没必要了。一： 设计思想Redux 的设计思想很简单，就两句话：Web应用是一个状态机， 视图与状态是一一对应的。所有的状态，保存在一个对象里面。二：Redux工作流程初看这张图可能会一脸懵逼，不过没关.

一个完整的项目离不开数据请求，JavaScript中可以使用ajax远程请求，但是对于SPA项目来说写起来太麻烦，所以本节将介绍如何使用请求框架Axios来实现。Vue项目也可以使用它来用做请求框架。1. 安装AxiosAxios可以使用npm来安装，可以直接在根目录下，打开Git Bash Here，弹出命令窗口中输入： npm install --save axios然后，只需要等它自动下载完成就好了。关于 npm install --save 和 npm install --save.

通过上一节，对于React生命周期有了新认识，如何利用它来提高组件的性能呢？本节将会抛砖引玉讲解一个小例子。为了代码的清晰，可以删除上一节一些无关的生命周期函数代码。1. ChildItem.js存在性能问题那就是：子组件ChildItem.js频繁无用渲染render。很多情况下会忽略这个问题，但是软件的卡顿是一点点产生的，所以必须要减少性能消耗。解决方式直接在ChildItem.js中加入如下代码 shouldCompnentUpdate() { return false.

本节主要讲React中非常重要的知识点：生命周期。1. React生命周期图通过这张图，可以看到React生命周期的四大阶段：Initialization： 初始化阶段Mounting：挂载阶段Updation： 更新阶段Unmounting： 销毁阶段2. 什么是生命周期函数？一句话概括：生命周期函数指在某一时刻组件会自动调用执行的函数举例说明：在Child,js组件中。里面的render()函数。就是一个生命周期函数它在state发生改变时自动执行。这就是一个标准的自动执行函.

在编写组件的方法时，经常会遇到语义化很模糊的代码，这对于团队开发是一个很大问题，因为review代码或者合作时都会影响开发消息。ref在react中就是一个语义化代码的工具。1. 替代原来的 e.target.value以前的案例中，写下面的代码，使用了 e.target，这并不直观，也不好看。这种情况其实可以使用ref来进行解决。 inputChange(e){ this.setState({ inputValue: e.target.value }) }如果以上代码使用r.

日常开发中，父组件向子组件传值时，使用了属性的方式，也就是props。这种方式传值在大型项目中，如果不对其进行校验，后期会变的异常混乱，业务逻辑也没法保证。1. PropTypes的简单使用在Child.js组件里传递了4个值，有字符串，有数字，有方法，这些都是可以使用PropTypes限制的。使用之前必须引入一下PropTypes。import PropTypes from 'prop-types'引入后，就可以在组件的下方进行使用了，需要注意的是在子组件ChildItem.js的最下面，写.

很多APP的前进和后退都是有效果的。例如前进是左滑，后退是右滑。本文将介绍如何使用Vue来做这个效果。本文实现这个效果的原理很简单。即：在各个页面定义层级，在切换路由判断用户是进入哪一层页面，如果用户进入更高层的页面那么就做前进动画，反之做后退动画。1. 首先进行路由配置进入router.js文件 import Vue from 'vue' import Router from 'vue-router' // 下面组件自行定义 import Home1 from '@/home1' imp.

本节主要介绍一些理论性的东西：如 React单向数据流、React和其他框架一起使用和函数式编程。1. 单向数据流React的特性中有一个概念叫单向数据流。可以用上几节的Demo来说一下何为单向数据流。Child.js中修改为如下代码. <ul> { this.state.list.map((item, index) => { return ( <Child key = {item + index} content = {.

本节将介绍React中父子组件如何传值的方法。1. 父组件向子组件传值目前最简单，最实用，最容易伤手的方法。就是实用组件属性的形式父组件给子组件传值。例如：在ChildItem组件中加入content属性，然后给属性传递{item}，这样就可以父组件向子组件传值。 <ChildItem content = {item} />此时，父组件值已经传递给子组件，子组件这时候可以使用...

本节将介绍拆分简单组件的知识。实际开发中。一个大功能可能会分成不同的组件，比如把文本框和按钮单独一个组件，下面的list列表单独一个组件。这涉及到了一部分组件拆分的知识。1. 新建子组件在src目录下，新建一个文件叫ChildItem.js，然后写好基础结构。 import React, { Component } from 'react' class ChildItem extends Component { render() { return ( <li>项目.

通过之前几节的学习。基本上已经算是React初级入门了。这节课主要是关于JSX的几个坑。1. JSX代码注释之前第一次写JSX注释，是这样写的。结果会报错 <Fragment> // 我是注释我是注释， 这个是错误示范 <div> ..... 省略其他代码 <input /> </div> </Fragment>正确的方式应该如下： <Fragment> {/* 正确注释的 */} &.

本节将介绍列表循环时删除其中某项需求是这样的：点击已经有的选项时，可以进行删除。1. 数组下标的传递需要删除其中某项，那么首先就要知道当前点击项的index，也就是下标，然后绑定一个事件。代码如下： // 省略部分代码 <ul> { this.state.list.map((item, index) => { // 此处如果return后面只有一行的话就不需要写括号，如果需要换行就必须写括号 return ( <li ke.

本节主要介绍React中列表循环展示数据以及事件的绑定。1. 列表循环数据化目前Child.js组件中的<li>标签内的数据是静态的，也就是死的。如果要换成动态的。就需要把这个列表进行数据化之后再用JavaScript代码循环在页面上。首先，在上一节中。定义过了一个空的list数组。这节课先把list数组添加两个数组元素。代码如下： // 省略上面部分无关代码 constructor(props) { super(props) this.state = { input.

本节主要介绍React中的响应式设计和数据绑定的方法。jQuery和React的区别jQuery以事件驱动，原理是通过事件的触发来操作DOM改变页面。React 以数据驱动，为单向数据流，通过监测数据变化来完成页面的改变。1. 响应式设计和数据的绑定React不建议直接操作DOM元素，而是通过数据进行驱动，改变页面的效果。React会根据数据的变化，自动的帮助你完成页面的改变。所以在写React时，无需关注DOM等相关操作，只需要关注数据的操作就可以了。在上一节，已经编写好了Child..

本节将写一个TodoList组件的基础框架。CSS部分将忽略。1. 新建TodoList组件在src目录下，新建一个文件Child.js文件，然后写一个基础的HTML结构。代码如下： import React, { Component } from 'react' class Child extends Component { render() { return ( <div> <div> <input /> .

上一节其实已经涉及到了一些JSX语法，看起来和HTML标签几乎一样。本节将简单的介绍React中JSX的使用。1. JSX简介JSX 是 JavaScript 和 XML 结合的一种格式。由 React 发明。它的作用是方便利用 HTML 语法来创建虚拟DOM，当遇到<，JSX就当做HTML解析，遇到{就当JavaScript解析。另一方面在React中可以简化代码。下面是一段简单的JSX语法。<ul className = 'list'> <li>text1.

出现原因：由于swiper在初始化的时候会扫描swiper-wrapper下面的swiper-slide的个数，从而完成初始化，但是由于动态加载时在初始化之后的动作，所以导致无法滑动。解决方式：在动态获取数据之后再初始化。另外需要加入如下两个配置参数。 var mySwiper = new Swiper ('.swiper-container', { observer:true,//修改swiper自己或子元素时，自动初始化swiper observePa

废话不多说，直接上代码。<form action="" enctype="multipart/form-data"> <input id="file" class="filepath" onchange="changepic(this)" type="file"><br> <img src="" id="show" width="200"></form><video width = '500' height = '300'

var btn = document.getElementById("btn"); var num = 60; btn.onclick = function settime(){ if (num == 0){ btn.removeAttribute('disabled'); btn.value('点击获取验证码'); num = 60; return; }els

var arr = ["小强","小红","小明","小白"];js for循环正序for(var i = 0;i console.log("My name is " + arr[i] + "!");};for(var i in arr){ console.log("My name is " + arr[i] + "!");}js for循环降序for(

document.write("");for(var x = 1;x document.write(""); for(var y = 1;y document.write("" + x + "*" + y + "=" + x*y + "");}document.write("");}document.write("")