gentry-jh-CSDN博客

index.jslet Dep = { clientList:{}, listen:function(key,fn){ (this.clientList[key] || (this.clientList[key] = [])).push(fn) }, trigger:function(){ let key = Array.prototype.shift.call(arguments), fns = this.cli

2021-12-28 16:04:43 424

原创 vuex模块化

当项目包含多个模块，例如：登录模块，商品模块等，每个模块中都含有大量需要组件共享的状态，此时就要用到vuex的模块化管理了。给项目安装vuexnpm install vuex --save等vuex安装完成，src文件夹下创建store文件夹，store文件夹下是index.js和login.js文件//index.jsimport Vue from 'vue'import Vuex from 'vuex'import login from './login.js'Vue.u.

2021-12-28 15:14:51 418

原创 js面试题-手写数组的方法

首先声明，这里只写代码。至于方法的作用请自行查阅mdn文档。1、Array.prototype.at()方法Array.prototype.myAt = function(params = 0){ let temp = this, index, result, if(typeof params == 'string'){ if(params.length == 0){ index = 0 }el

2021-11-29 16:15:45 371

原创在react脚手架种简单的使用redux

创建你的react项目，并且按照如图所示，创建文件夹以及文件：Count组件内容：import React,{Component} from 'react'export default class Count extends Component { increment = () => { } decrement = () => { } incrementOdd = () => { } incrementAsy.

2021-11-11 14:13:40 934

原创 js实现数字的千分化

数字千分化的格式： 10000000000.000001 ==> 10,000,000,000.000,001let num = 23456.78965//整数部分 23456 翻转 65432 通过下标取余3为0加逗号得 23,456, 去掉开头结尾逗号为 23,456//小数部分 78965 下标不加1 得 7,896,5 下表加1得 789,65 去掉开头结尾逗号为 789,65function thousand(target){ let nu...

2021-11-04 15:46:09 373

原创如何不借助第三方变量，把对象数组中所有元素的相同属性提取到一个新数组中

let arr = [ { name:'cindy', age:18 },{ name:'maike', age:19 }]let narr = arr.reduce((pre,item) => { return pre += `${item.name},`},'').filter(i => i !== '')console.log(narr) // ['cindy','maike'.

2021-09-01 13:34:03 288 1

原创用canvas开发简易版的随机柱状统计图

<canvas id="cv" width="400" height="400"/><script> let cv = document.querySelectorAll('#cv')[0] //获取画布元素 let ctx = cv.getContext('2d') //获取画布元素操作权限 //绘制坐标轴 ctx.beginPath() //创建开始路径 ctx.moveTo(100,100) .

2021-08-27 23:37:42 170

转载事件代理是什么？有哪些应用场景？

一、是什么事件代理，通俗的来讲，就是把一个元素的响应事件（click、keydown......）的函数委托倒另一个元素。前面讲到，事件流都会经过三个阶段：捕获阶段 -> 目标阶段 -> 冒泡阶段，而事件委托就是在冒泡阶段完成。事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素。当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后再外层元素上去执行函数。二、应用场景如果我们有一个列表，列

2021-06-07 17:15:12 2611

原创说说你对slot的理解？slot使用场景有哪些？

一、slot是什么在HTML中slot元素，作为Web Components技术套件的一部分，是Web组件内的一个占位符该占位符可以在后期使用自己的标记语言填充举个栗子<template id="element-details-template"> <slot name="element-name">Slot template</slot></template><element-details> <span slot="el.

2020-12-20 20:18:49 2590 1

原创为什么Vue中的v-if和v-for不建议一起用？

一、作用v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名在 v-for 的时候，建议设置 key 值，并且保证每个 key 值是独一无二的，这便与 diff 算法进行优化两者在用法上<Modal v-if="isShow" /><li.

2020-12-18 15:59:16 5218

原创 Vue中的$nextTick怎么理解？

一、NextTick是什么官方对其的定义在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。什么意思呢？我们可以理解成，Vue在更新DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新举例一下Html 结构<div id="app">{{message}}</div>构建一个 vue 实例const vm = new Vue({ el:"#app".

2020-12-16 13:09:57 465

原创在处理el-select数据回显时遇到的问题

在开发vue项目的时候，会普遍的用到elementUI组件库，当用道其中的下拉框组件时，会遇到一点儿问题。先看如下代码：<el-select v-model='regin'> <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" ></el-option></el-select>data(){ r

2020-12-14 15:29:32 3402

原创 vue的X-Templates

当你写的组件模板template内容很冗长和复杂时，如果都在JavaScript里拼接字符串，效率是很低的，因为不像直接写html简单。为了解决这个问题，Vue提供了另一种定义模板的方式，在< script >标签里使用text/x-template类型，并且指定一个id,将这个id赋给template。代码如下<div id="app"> <my-component></my-component> <script type="text/x-te

2020-12-09 13:26:12 297

原创 vue实例的手动挂载

vue通过Vue.extend与$mount方法来挂载vue的实例Vue.extend是基础的vue的构造器，用来创建一个"子类"，参数是一个包含组件选项的一个对象请看如下代码<div id="mount-div"></div><script> const MyComponent = Vue.extent({ template:"<div>Hello:{{name}}</div>", data:function(){.

2020-12-09 13:02:44 848

原创浅拷贝和深拷贝

浅拷贝：只能复制数值类型，引用类型无效对象里有单个属性let obj = { name:"july"}let obj2 = { name:obj.name}对象里有多个属性let obj = { name:"july", age:18}//第一种方法let obj1 = {}for(const key in obj){ obj1[key] = obj[key]}//第二种方法let obj2 = Object.assign({},obj)//第三种方法let ob

2020-10-26 16:24:06 123

原创编写remove函数删除指定的数组元素

2020-10-01 22:32:14 613

原创炫酷的文字logo效果

2020-10-01 21:11:54 383 1

原创 Array的reduce方法

let arr = [1,2,3,4,5,6];arr.reduce(function(pre,value,index,array){ console.log(pre,value);})结果如下：1,2undefined 3undefined 4undefined 5undefined 6reduce方法回调函数的四个参数的意义：pre:上一次返回的值(起初调用的时候pre就是数组的第一个值)value:起初调用时数组的第二个值，下一次调用就是第三个值，以此类推。let arr

2020-10-01 18:05:45 3434

原创冒泡排序

2020-09-29 09:44:14 149

原创弹性盒子

弹性布局与传统布局响应对比传统布局<style> *{ margin: 0; padding: 0; } main{ position: relative; height: 100vh; } main nav{ width: 80px; position: absolute; left: 0;

2020-09-13 17:23:36 222

原创 render方法的使用

render方法的作用：用js来渲染组件准备工作：在你的vue项目中 src/view 这个目录下新建一个 .vue文件:这是render函数最基础的用法：<template> <div> <Child :level="1"></Child> <Child :level="2"></Child> <Child :level="3"></Child> </div></t

2020-08-09 17:17:49 3915

原创 $nextTick的使用

$nextTick解决了什么问题：当数据更新，dom没有更新，获取不到最新的dom问题<template> <div> <p ref="myp">msg:{{msg}}</p> <p>msg1:{{msg1}}</p> <p>msg2:{{msg2}}</p> <button @click="changeIt">改变</button> </div>&l

2020-08-09 09:35:53 183

原创 jsonp跨域

同源策略：ajax请求的时候浏览器要求当前页面和请求的地址(server端)必须是同源同源：协议一致，域名一致，子域名一致，端口一致跨域：说白了就是绕开同源策略下面讲解用jsonp的方式跨域script标签可以绕开同源策略<script> function callback(res){ console.log(res) }</script><script src="https://wis.qq.com/weather/common?source=p

2020-08-08 21:50:07 82

原创通过promise加载图片

准备工作：新建一个文件夹文件夹里有图片文件夹，里面有一张图片<script>function loadImg(src){ return new Promise((resolve,reject)=>{ var img = document.createElement('img') img.onload=()=>{ resolve(img); } img.onerror=(err)=>{ reject(err) } img.src = sr

2020-08-08 15:49:02 689

原创手写一个ajax

准备工作：新建一个文件夹文件夹里有两个文件beload.txt文件ajax.html文件txt文件里添加任意文本即可ajax.html文件内容<body> <button onclick="load()">加载</button><body><script>function load(){ var xhr = new XMLHttpRequest(); //创建一个xhr xhr.open("GET","./beload.

2020-08-08 14:55:21 106

原创 uni-app组件之间的通讯

父组件传递数据给子组件//父组件<test :title='title'>子组件</test>data(){ title:'Hello'}子组件{{title}}export default{ props:['title']}子组件传递数据给父组件//子组件<button @click="sendNum">点击</button>data(){ return{ num:3 }}methods:{ send

2020-07-29 19:43:40 801

原创 JavaScript中函数的节流和防抖

函数的节流什么是函数的节流当一个函数执行一次后，只有在大于设定周期后才会执行第二次。通俗点儿说，就是有个需要频繁触发的函数，处于优化性能的角度，在规定时间内，之让函数触发的第一次生效，后面的不生效具体代码如下//js部分代码function throttle(fn,delay){ //fn() 需要节流的函数 //delay 规定的时间 var lastTime = 0; //记录上一次触发的时间 return function(){ var nowTime = Dat

2020-07-27 22:06:46 66

原创项目流程

项目流程项目角色：PM：产品经理（Project Manager），项目主管或项目经理RD：研发（Research and Development）CRD：客户端；移动端（client Research and Development）FE：前端（Front-End）；前端开发（Front-End Development）QA：测试（QUALITY ASSURANCE，中文意思是"质量保证"）UE：用户体验（User Experience，简称UX或UE）OP：运维（Operations）

2020-05-13 08:51:01 145

原创 react面试题

什么是虚拟DOM？虚拟DOM(VDOM)是真实DOM在内存中的表示。UI的表示形式保存在内存中，并与实际的DOM同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。类组件和函数组件之间的区别是啥？类组件可以使用其他特性，如状态state和生命周期钩子。当组件只是接收props渲染到页面时，就是无状态组件，就属于函数组件，也被称为哑组件或展示组件。函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函

2020-05-13 08:28:47 134

原创微信小程序总结

小程序的目录结构：其中项目级别的的文件包括 app.js、app.json、app.wxss 这三个。其中.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。页面级别可以包含很多个页面，如index，detail等页面，每个页面都包含.js，.json，.wxml，.wxss这些文件，其中.wxml为页面视图文件，是自定义标签的HTML页面。app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量，可以调用框架提供的丰富的 A

2020-05-09 08:17:32 498

空空如也

空空如也