- 博客(47)
- 收藏
- 关注
RSS订阅原创 前端面试题记录
1、防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法2、节流高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率实现方式：每次触发事件时，如果当前有等待执行的延时函数，则直接return3、原型原型每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype
2021-06-30 15:19:49
163
原创 taro使用总结
Taro 就是可以用 React 语法写小程序的框架，拥有多端转换能力，一套代码可编译为微信小程序、百度小程序、支付宝小程序、H5、RN等一、创建项目
2021-05-31 16:02:10
1507
原创 JS排序
1、冒泡排序原理：从第一个元素开始，把当前元素和下一个索引元素进行比较。如果当前元素大，那么就交换位置，重复操作直到比较到最后一个元素function sortArr(arr) { if (Array.isArray(arr)) { for (var i = 0; i <arr.length; i++) { for (var j = i+1; j < arr.length; j++) { if (arr[i] >
2021-05-13 21:08:48
69
原创 安装yarn
1.下载yarn 安装包yarn安装包2.查看yarn版本yarn --version3.安装淘宝镜像源yarn config set registry https://registry.npm.taobao.org -gyarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
2021-03-11 22:32:01
104
原创 typescript接口
"use strict";// 接口interface的作用：在面向对象的编程中，接口是一种规范的定义，定义了行为和动作的规范，在程序设计里面，接口起到限制和规范作用，接口定义了某一批类所需要遵守的规范，接口不关心类的内部状态数据，也不关心类里面方法的实现细节，之规定类里面必须提供默写方法，提供这些方法的类就可以满足需求。ts中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等function printName(name) { alert(name.firstN.
2021-02-24 22:48:57
68
原创 typescript静态方法和抽象类
//静态方法class Person{ public name:string; static hello:string='hello' //静态属性 constructor(name:string){ this.name=name; } study(){ //实例方法 alert(`${this.name}在学习`) } eat(){ alert(`${this.name}在吃饭`) } static sayHello(){ //静态方法 .
2021-02-24 21:52:30
267
原创 Typescript类的定义与继承
//1、TS定义类class Person{ name:string; //属性 前面省略了public constructor(n:string){ //构造函数 实例化类的时候触发 this.name=n } run():void{ alert(this.name) } getName():string{ return this.name } setName(name:string):void{ this.name=name .
2021-02-23 23:24:26
267
原创 JS几种继承方式
//继承function Person(){ this.name="张收" this.age=20 this.run=function(){ alert(`${this.name}在跑步`) }}Person.prototype.sex='boy'Person.prototype.work=function(){ alert(`${this.name}${this.sex}在工作`)}//1、原型链+对象冒充组合继承function Work(){ Per.
2021-02-23 22:06:56
58
原创 typescript function
//1、定义函数方法 function runs():string{ return 'abc' } //匿名函数 var fun2=function():number{ return 123 } console.log(fun2) //123//2、定义方法传参 function getMsg(name:string,age:number):string{ return `${name}---${age}` } console.log(get.
2021-02-22 23:35:24
255
原创 typescript基本类型
//一：数据类型 let num:Number=1 //boolean var flag:boolean=true //number var a:number = 123 a=12.3 //string var str:string='this is string' //array //方法1 let arr:number[]=[1,2] let arr2:string[]=['a','b'] //方法二 let arr3:Array&l.
2021-02-22 23:34:40
55
原创 原型链继承
function SuperType(){ this.proprety=true}SuperType.prototype.getSuper=function(){ return this.proprety}function subType(){ this.subVal=false}// 继承 SuperType subType.prototype = new SuperType();subType.prototype.getSub=function(){ return thi.
2021-02-19 21:46:43
68
原创 计算rem
@function rem($px) { @return ($px / 100) * (1rem);}body { color: #505050; font-size: .14rem; line-height: 1.5; font-family: "Microsoft Yahei", "PingFang SC", "SimSun", "Helvetica Neue", Helvetica, Arial, sans-serif, Tahoma; back.
2020-12-16 15:41:14
140
1
原创 useContext父组件向子组件传值
import React,{useState,createContext,useContext} from 'react'const CountContext = createContext({});function Child(){//子组件 let count= useContext(CountContext) return ( <div> 这是子组件{count} </div> )}function Example01(){ .
2020-11-21 16:52:46
649
原创 移动端mate设置
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" /> .
2020-11-10 15:10:15
152
原创 React-hooks useState useEffect用法
import React, {useState,useEffect} from 'react'import {BrowserRouter as Router,Route,Link} from 'react-router-dom'function Index(){ useEffect(()=>{ console.log('hello,index') return ()=>{ console.log('bye,index')//路由解綁 } },[].
2020-11-09 23:22:39
729
1
原创 vue兼容IE
1、安装@babel/polyfillnpm install @babel/polyfill --save2、在main.js中引入import "@babel/polyfill"3、在vue.config.js里添加配置 chainWebpack: config => { config.entry('polyfill').add('@babel/polyfill')}package.json里要有兼容的版本"browserslist": [ "l
2020-11-05 10:05:32
319
原创 axios封装
import qs from "qs"import axios from "axios"/** * 顺序执行操作 * @param {*} arr 传递函数数组 */let _queue = async arr => { let res = null for (let promise of arr) { try { res = await promise(res) } catch (error) { return Promise.rej..
2020-09-25 18:02:51
69
原创 uni-app开发总结
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。1、开发工具使用HBuilder 可以进行快捷打包运行2、项目结构common 是存放公共js和css的目录，大家可以把一些工具js或者公共的css放这里面components是放组件的目录，我们所有的组件都可以放这里面，记住组件里面不能使用uni-app页面钩子函数pages 是un...
2020-09-08 14:50:55
1114
原创 canvas使用远程图片跨域问题
最近在做canvas生成海报时使用到远程图片一直报跨域问题，即使设置了跨域let image = new Image();image.src = src;image.crossOrigin = 'Anonymous'; // 支持跨域图片第一次访问仍然会报跨域，强刷后又访问成功后来通过在图片路径上拼上时间戳或者随机数成功解决了问题原来是浏览器缓存导致304 中不携带跨域的头导致的该问题...
2020-07-15 10:00:27
1254
4
原创 JS时间格式化
export const getDate = date => { if (date instanceof Date) { return date } if (typeof date === 'number') { return new Date(date) } if (typeof date === 'string') { if (date) { // eslint-disable-next-line no-useless-escape .
2020-05-29 17:36:25
108
原创 快速认领该应用 apk空白包签名 方法
APP上架应用宝，被要求认领应用的MD5签名，借助工具可以快速认领该应用点击下载360签名工具步骤，打开360Signer.exe，填写相应信息，点击一键签名即可...
2020-05-08 14:26:28
282
原创 uni-app应用内跳转至app-store
uni-app在ios端从app应用内跳转到app-storelet appleId=12345678 //app的appleIdplus.runtime.launchApplication({ action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`}, function(e) { console.log('Op...
2020-04-27 16:28:11
4082
原创 制作雪碧图
快速制作雪碧图并生成对应css的网站https://www.toptal.com/developers/css/sprite-generator
2020-04-27 10:40:36
228
原创 IOS微信页面分享失败
在用VUE开发微信h5分享时出现了ios只会在入口首页的时候进行初始化设置成功，后面如果有页面跳转例如入口页面是A跳转到B页面，如果在B页面获取微信签名，会一直失败。但在安卓上不会出现这种问题找了一圈发现了解决问题的方法用window.location.href代替router.push跳转页面可以避免这种问题的出现...
2020-03-20 13:55:48
565
原创 jquery-slotmachine控制停到指定位置方法
jquery-slotmachine是一个实现类似老虎机抽奖的插件，默认的配置不能控制停到指定位置但是futureActive这个属性就是最后的结果，在结束之前只需要设定一个值就可以进行控制在自己写的页面里添加window.SlotMachine.prototype.setResult = function (num) { this.futureActive = num;}...
2020-02-05 17:42:24
928
2
原创 typescript函数声明、函数传参、函数重载
//一：函数声明//函数的声明function fun1(): string { return '123'}//匿名函数声明var fun2 = function(): number { return 1}fun2() //调用函数//二：ts中定义方法传参function fun3(a: number, b: number): number { return ...
2019-12-23 22:55:25
2966
原创 typescript泛型
//泛型是解决类、接口、方法的复用性、以及对不特定数据类型的支持//一、泛型//只能返回string类型function getData(value: string): string { return value}//同时返回 string number类型//1//any:放弃了类型检查，传入的数据类型和返回的数据类型不一致function testOne(val: an...
2019-12-19 23:31:15
90
原创 vue在IOS上当前页面链接是入口页面链接解决办法
在开发微信公众号页面时，有时需要调用微信授权的接口，要用当前页的页面链接去获取授权信息，但是在IOS上当前页的链接不是当前页的，而是入口页面的链接，在这里我们可以用下面的方法对当前页进行操作来解决这个问题export default{ beforeRouteEnter (to, from, next) { let u = navigator.userAgent; let ...
2019-12-02 16:45:30
466
原创 audio在ios系统上不能自动播放
audio设置了自动播放，在安卓系统上可以自动播放，但是在IOS系统上由于限流机制不能自动播放，所以要用户触发播放事件才能播放<audio id="singleDog" autoplay="autoplay" loop="loop"> <source src="singleDog.wav" type="audio/wav"></audio>...
2019-10-17 13:41:05
540
原创 vscode ctrl+s自动格式化代码格式
最近在用学习TS，用的vscode工具进行开发保存，由于用vue3.0创建项目时用到了eslint，在保存项目时总是报代码格式错误，一点点改又很麻烦，所以就想到了VScode可以通过配置来实现保存时自动格式化代码，从网上搜了一大堆，在这里整合一下，有不对的地方还请指正一.先使用vscode下载下面四个插件1.eslint2.Prettier - Code formatter3.Man...
2019-10-11 10:13:23
13682
原创 swiper.js样式及手动滑动后自动轮播失效问题
用swiper4.0+来实现这种效果的轮播图，之前写了大量的CSS样式才搞成这种效果，现在从网上搜了一堆配置才配置好，同时遇到了手动滑动后自动轮播失效的问题，在这里记录一下swiper= new Swiper('.swiper-container', { roundLengths : true, initialSlide :2, speed:600,...
2019-09-26 17:32:13
684
原创 微信小程序ajax请求封装
虽然小程序有自己的ajax请求封装，但是写多了代码就比较冗余，我们可以基于小程序的ajax请求去自己封装promise请求，这样可以使代码看起来更加的简洁，同时还能解决一些因为异步请求带来的问题。在app.js中添加接口封装方法ajax(method, url, option){ wx.showLoading({ title: '加载中...' ...
2019-09-19 10:46:03
539
原创 响应式页面计算rem代码
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = do...
2019-09-11 16:08:45
257
原创 canvas绘制层级以及清晰度问题
前端用canvas绘制时，有时候会出现层级问题，导致有的需要显示的图片被其他图片遮住，但是canvas又没有可以设置层级的配置，这时我们可以用promise来解决层级的问题，然后再按照顺序去绘制，同时在绘制canvas时如果有图片经常会出现图片模糊的问题，我们可以通过scale来放大canvas，同时将相关图片的尺寸放大相应倍数，这样生成的canvas就比较清晰，即使是保存成图片也很清晰，亲测有效...
2019-09-10 17:55:41
5746
原创 IOS手机唤起键盘，输入框失去焦点后页面元素点击事件位置偏移
移动端页面中如果有input框，在IOS手机中，当唤起系统键盘输入数据完成后，再去点击页面其他元素，会发现点击位置偏移的问题，这是因为在IOS系统中唤起键盘后页面向上滚动了一段距离。这就需要我们在input框失去焦点时取消页面的滚动距离window.scroll(0,0);这个方法可以解决此问题...
2019-09-05 15:56:29
2249
原创 公告栏上下滚动特效
话不多说，直接上代码style样式<style> .list{ list-style: none; width: 100%; text-align: center; overflow: hidden; height:40px; padding: 0; margin: 0 } ...
2019-09-05 15:41:33
656
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人