- 博客(80)
- 收藏
- 关注
RSS订阅原创 如何写js事件委托
正常的 ul.addEventListener('click', function(e){ if(e.target.tagName.toLowerCase() === 'li'){ fn() // 执行某个函数 } })以上代码存在问题比如<!- // dome <ul> <li><span>1</span></li> <li><span>2</s
2021-11-11 09:32:54
824
原创 将字符串函数转为能正常执行的函数类型
const aa = 'function(val){console.log(val)}'此时我们想要执行aa 函数怎么办？javascript 提供 [eval()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval) 函数会将传入的字符串当做 JavaScript 代码进行执行。...
2021-05-06 19:44:24
402
原创 手写ajax 请求并将获取到的图片二进制流渲染到页面上
话不多说代码附上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <meta http-equ
2021-03-16 19:21:31
471
原创 原生js实现图片懒加载 并实现页面触底加载更多
思路：设置自定义属性绑定到 img 上 src 上绑定load图 当图片处于视口区域时 将自定义属性的 url 替换图片的 url 即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.
2021-03-11 22:34:44
317
原创 实现一个 $attr(name,value)遍历 获取对应的元素集合
实现一个 $attr(name,value)遍历 * 属性位name * 值为value的元素集合 * */html<ul> <li id="AA" class="box clearFix">1</li> <li name="con" class="content box">2</li> <li name="BB">3</li> <li id="AA">4</li>
2021-03-11 10:51:28
229
原创 正则有关面试题
编写一条正则，用来验证规则：一个6~16位的字符串，必须同时包含有大小写字母和数字let reg = /(?!^[a-zA-Z]+$)(?!^[A-Z0-9]+$)(?!^[a-z0-9]+$)^[a-zA-Z0-9]{6,16}$/;/** 此处使用正则的负向预查* (?!^[a-zA-Z]+$) ==> 不能只包含 纯小写字母 纯大写字母 大小写字母混合* (?!^[A-Z0-9]+$) ==> 不能只包含 纯大写字母 纯数字 大写字母和数字混合* (?!
2021-03-11 10:15:17
255
原创 封装方法解析url中所携带的参数
1. 使用 split 截取let url = 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&ch=&tn=baidu&bar=&wd=asda&rn=&fenlei=256&oq=&rsv_pq=852f8b600006fe09&rsv_t=d83fhSkb8%2B5kleIGqlIzawqlutDlkezC2Vhw7YJatwRMdmo
2021-03-09 19:39:28
301
原创 手写 new 关键字
function myNew(Func, ...args) { // 创建一个新对象 const obj = {}; // 新对象原型指向构造函数原型对象 obj.__proto__ = Func.prototype; // 将构造函数的this指向新对象 let result = Func.apply(obj, args); // 根据返回值判断 return result instanceof Object ? result : obj;}使用function.
2021-03-02 09:33:49
96
原创 javascript 树形结构数据打印
const list = [{ id: 1001, parentId: 0, name: 'AA' }, { id: 1002, parentId: 1001, name: 'BB' }, { id: 1003, parentId: 1001, name: 'CC' }, { id: 1004, parentId: 1003, name: 'DD' }, {
2021-02-23 16:57:59
913
原创 JSON Key 驼峰转换
实现一个转换函数 convert，将 JSON 对象的 key 从下划线形式（under_score_case）转换到小驼峰形式（camelCase）// 字符串的下划线格式转驼峰格式，eg：hello_world => helloWorldfunction underline2Hump(str){ return s.replace(/_(\w)/g, function(all, letter) { return letter.toUpperCase() })}// 字符串的
2021-02-23 16:45:30
2780
原创 js 实现 图片懒加载
js 实现 图片懒加载html <img src="loading图" data-src="./img/1.jpg" alt=""> <img src="loading图" data-src="./img/2.jpg" alt=""> <img src="loainding图" data-src="./img/3.jpg" alt=""> <img src="loading图" data-src="./img/4.jpg" alt="">
2021-01-27 11:28:13
70
原创 h5 input 实现 上传文件
单个文件上传html<input type="file" id="file1" oninput="fileChange()" ><img src="" alt="上传" id="upLoadImg">js const file1 = document.getElementById('file1') const upLoadImg = document.getElementById('upLoadImg') function fileChange() {
2021-01-27 10:28:56
965
原创 封装ajax
function myAjax (options){ this.method = options.method this.url = options.url this.data = options.data || '' this.flag = options.flag || true this.callback = options.callback var self = this var xmlHttp if (typeof XMLHttpRe
2021-01-21 09:49:13
83
原创 uniapp 使用 moment 或 new Date() 处理 对应时间时 返回 ＜NAN＞的bug
uni-app 时间格式问题 new Date(str) IOS系统跟Android系统不兼容今天做了一个需求，要在列表中把后台返回来的时间给显示出来，使用 new Date(str) 在微信开发者工具上显示是没有问题的，然后在IOS系统上显示是NAN。原因是 IOS系统只识别 " / " 不识别 " - " “.”.后台返回来的时间类型一般有三种 时间、时间搓、字符串。我们就研究一下这三种类型怎么 处理才能兼容安卓系统和IOS系统吧。formatTime(d) { var year = d
2021-01-07 11:02:30
1113
原创 web开发 兼容不同的屏幕分辨率和浏览器
在web开发的过程中经常会要求根据不同的屏幕大小来做兼容，尤其是webAPP的流行和各种响应式布局，兼容不同的屏幕分辨率更是前端开发者必会的技能。本篇主要介绍用CSS 的媒体查询来兼容不同的屏幕大小和用js 来兼容不同的浏览器（主要是IE、火狐、360、谷歌、UC、QQ、百度等）。一、CSS媒体查询使用 CSS3 的@media 查询，你可以针对不同的媒体类型定义不同的样式。它的语法结构是：@media mediatype and|not|only (media feature) { CSS
2020-12-15 10:50:47
1503
原创 js 获取时间戳的方式 及使用时间搓生成的永远不会重复的id
js 获取时间戳 let date = new Date()// 方法一 ------> getTime()console.log(date.getTime()) // 1603330099319// 方法二 -------> valueOf()console.log(date.valueOf()) //1603330099319// 方法三 ------> +New Date()console.log(+date)
2020-10-22 09:41:39
4013
原创 js 实现 列表向上无限滚动 新闻列表
效果展示（鼠标移入，滚动停止；鼠标移出，滚动继续）html:>><div class="boxbig"> <ul class="ul"></ul> <ul class="con"></ul></div>css:>> * { margin: 0; padding: 0; box-sizing: border-box; } .boxbig {
2020-10-19 17:02:59
548
原创 js 监测 数据类型
js 监测数据类型有很多种typeof instanceoftypeof监测数据类型不太严谨 因为遇到 数组和null 都会返回 ‘object’const aa = nullconst bb = [1,2,3,4]console.log(typeof aa) => 'Object'console.log(typeof bb) => 'Object'instanceof 监测相对来说严谨了许多 但是用法也比较繁琐const aa = nullconst bb
2020-10-13 09:49:41
209
原创 vue + axios 解决跨域问题
vue + axios 解决跨域问题项目开发过程中遇到了使用axios请求后台接口跨域的问题，网上搜了几种方案都没有解决，最后通过配代理的方式解决了，代码如下：报错：首先npm安装好axios，其次在main.js中引入：import axios from 'axios'Vue.prototype.$axios = axios //把axios挂载到vue的原型中，在vue中每个组件都可以使用axios发送请求Vue.prototype.HOME = '/api' //重要在于这里
2020-10-10 13:05:13
2656
1
原创 js 原型继承 在对象原型上新增方法
使用最新的方法Object.setPrototypeOf（类似Reflect.setPrototypeOf）可以很方便地给对象设置原型，这个对象会继承该原型所有属性和方法。但是，setPrototypeOf的性能很差，我们应该尽量使用 Object.create()来为某个对象设置原型。//obj的原型是Object.prototypevar obj={ methodA(){ console.log("coffe"); }}var newObj = Object.
2020-09-01 15:17:46
481
原创 js 判断数据类型
Object.prototype.toString用来判断类型再合适不过，借用它我们几乎可以判断所有类型的数据：function isType(data, type) { const typeObj = { "[object String]": "string", "[object Number]": "number", "[object Boolean]": "boolean", "[object Null]": "null", "[object Undefi
2020-08-26 14:05:50
214
原创 uniapp或微信开发 使用 swiper 组件 实现 3d 轮播 中间大图另外两张小图
话不多说上图html部分<swiper :autoplay="true" :current="currentIndex" :circular="true" previous-margin="80rpx" next-margin="80rpx" :interval="3000" :duration="100" @change="swierChange" > <swiper-item v-for="(item,i) in 5"
2020-08-13 17:57:57
3122
2
原创 怎样能使数组降维 数组扁平化？
Array.prototype.{flat,flatMap}这个特性新创造了两个方法，其中：Array.prototype.flat 数组的所有项会以指定的维度降维（扁平化），然后组成新数组返回；Array.prototype.flatMap 首先会执行一次map()方法，然后再通过类似flat()方法扁平化数组。它等同于执行完map() 后再执行一次 flat() 方法，所以当你执行 map() 返回的结果如果是个数组，然后又要将其扁平化时，这个方法会显得方便。来看几个例子解释一下，首先 fl
2020-08-11 17:58:46
337
原创 vue-quill-editor 引入了css文件但是有些样式预览时回显不出来的问题
问题描述：在使用vue-quill-editor时，有些样式不能和编辑时一样表现，如:<pre></pre>,分析编辑器中的css样式可知，.ql-editor外层还需要加个class名ql-snow，（前提是已经引用过该css文件import ‘quill/dist/quill.snow.css’）如：<div class="ql-snow"> <div class="ql-editor" v-html="content"> </d
2020-07-28 08:55:48
1130
原创 vue 监听事件 watch
最近使用vue的watch功能监听Object的属性变化，发现一个问题：通过直接赋值的方法为Object新增属性时，watch监听不到变化监听方法watch: { queryForm: { handler (value) { console.log(value) }, deep: true } }新增属性idmethods: { fun1 () { this.quer
2020-07-27 20:32:59
125
原创 vue 中 set 与 $set 方法
this.$set(obj, key, value)我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性<template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input type="text" v-model="student.age"> </div
2020-07-08 22:41:50
603
原创 js 字符串方法详解
1. charAt()作用：通过下标值找到对应的字符。语法：字符串.charAt(index);参数：index：索引值取值范围：0-字符串的length-1，如果超出这个范围，比如小于0或者大于等于length，会返回一个空字符。代码var str='guowei';var a=str.charAt(0);console.log(a);//gvar b=str.charAt(-1);console.log(b);// 空字符串var c=str.charAt(str.length);
2020-07-08 22:33:38
256
原创 js数组方法大全 详解
JavaScript中创建数组有两种方式使用 Array 构造函数：var arr1 = new Array(); //创建一个空数组var arr2 = new Array(20); // 创建一个包含20项的数组var arr3 = new Array(“lily”,“lucy”,“Tom”); // 创建一个包含3个字符串的数组使用数组字面量表示法：var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建一个包含1项的数组var arr6 = [“
2020-07-08 22:04:59
129
原创 js 在原型链上添加 16进制 与 10进制 相互转换的方法
近日在做项目需要用到 16进制 与 10进制 相互转换所以就在 原型链上添加了两个方法 以后用起来就比较简单// 在原型上添加16进制转10进制String.prototype.hexadToNum = function() { return parseInt(this, 16)}// 在原型上添加10进制数字转16进制Number.prototype.numTohexad = function() { return '0x' + this.toString(16)}conso
2020-07-08 21:46:03
197
原创 vue 封装 axios 网络请求
1.创建api文件，在当前目录封装一个request.js文件，配置请求响应的拦截信息/** * @file axios请求封装 */import axios from 'axios'import store from '../store/common'import router from '../router/common'import { Toast } from 'vant'const Axios = axios.create({})// 响应时间Axios.defaults.
2020-05-23 10:08:33
368
原创 解决 Better-scroll 可滚动区域的bug
Better-scroll 在决定由多少区域可以滚动时 是根据scrollerHeight 属性决定的，scroolerHeight 属性是根据放 Better-scroll的conent中的子组件的高度，但是我们的首页中，刚开始在计算scrollerHeight属性时，是没有将图片计算在内的，所以 ， 计算出来的告诉是错误的，后来图片加载完成之后有了新的高度，但是 scrollerHeight 的属性并没有更新，所以就出现了滚动不了的bug**如何解决这个问题呢？**监听每一张图片是否加载完成，只
2020-05-21 14:33:29
995
2
原创 Vue权限控制
在Web系统中, 权限很久以来一直都只是后端程序所控制的。为什么呢? 因为Web系统的本质围绕的是数据, 而和数据库最紧密接触的是后端程序.所以在很⻓的一段时间内, 权限一直都只是后端程序需要考虑的 话题.但是随着前后端分离架构的流行, 越来越多的项目也在前端进行权限控制.权限相关概念权限的分类后端权限从根本上讲前端仅仅只是视图层的展示, 权限的核心是在于服务器中的数据变化, 所以后端才是权限的关键, 后端权限可以控制某个用户是否能够查询数据, 是否能够修改数据等操作后端如何知道该请求是哪个用
2020-05-19 22:36:38
181
原创 前端发起网络请求 返回状态码
状态码含义说明200OK请求成功201CREATED创建成功204DELETED删除成功400BAD REQUEST请求的地址不存在或者包含不支持的参数401UNAUTHORIZED未授权403FORBIDDEN被禁止访问404NOT FOUND请求的资源不存在422Unprocesable entity[POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误500INTERNAL SERV...
2020-05-19 22:14:36
605
原创 谈谈小程序生命周期函数
onLoad(options) 页面加载时触发，只会调用一次，,在options中可获取路径中的参数。onShow() 页面显示/切入前台时触发，一般用来发送数据请求;onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交 互。onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台 等。onUnload() 页面卸载时触发，如 redirectTo 或 navigateBack 到其他页面时。...
2020-05-10 21:18:29
378
原创 vue 中双向数据绑定的原理是什么?
vue 双向数据绑定的原理主要通过数据劫持 Object.defineProperty 和 发布订阅模式实现的，通过 Object.defineProperty 监听数据发生变化然 后通知订阅者(watcher)，订阅者触发响应的回调
2020-05-10 15:43:54
336
原创 为什么避免 v-if 和 v-for 用在一起?
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过 v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。
2020-05-10 15:32:07
1479
原创 http 超文本传输协议
超文本传输协议(HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛 的一种网络协议。所有的 WWW 文件(即超文本文件(Hypertext)，是指具有超链接功 能的文件，它可以将文件中已经定义好的关键字(Keyword)，经过鼠标的点取 (Click)，便可以得到该关键字的相关解释，这种方法使用户使用起来更感舒适。类似于 早期使用的 WIN32 下的 HELP...
2020-05-06 13:50:09
791
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人