前端资源
要叫我大哥
我这个人很懒,啥也没有留下,留下来一坨坨
展开
-
ES6,很多人不会用的地方
const obj = { a:1, b:2, c:3, d:4, e:5,}const a = obj.a;const b = obj.b;const c = obj.c;const d = obj.d;const e = obj.e;const f = obj.a + obj.d;const g = obj.c + obj.e;//改进const {a,b,c,d,e} = obj;const f = a + d;const g = c原创 2021-11-16 13:54:39 · 450 阅读 · 0 评论 -
移动端ios出现输入框无法输入的情况
加上这段css即可[contenteditable="true"], input, textarea { -webkit-user-select:auto!important; -khtml-user-select: auto!important; -moz-user-select: auto!important; -ms-user-select: auto!important; -o-user-select: auto!important; user-select: auto!i原创 2021-11-16 10:01:05 · 2036 阅读 · 0 评论 -
用new Promise去封装接口
方法封装export const promiseAjax= () => { return new Promise((resolve, reject) => { getFundOpenApplyByMobile().then(res => {//这里是接口方法 let result = res.data resolve(result)//接口返回成功,抛出成功结果 }, error=>{原创 2021-11-12 11:24:09 · 655 阅读 · 0 评论 -
数组和字符串有哪些方法
// 数组filter //有返回值(数组),return是布尔值,true的时候item返回到数组内map //有返回值(数组),return任意类型,return直接在数组内forEach //没有返回值。arr.forEach(function(self,index,arr){}) 三个参数,不支持break,只支持return相当于continuefor //break跳出循环,reurn必须在函数内,且终止当前函数every //有返回值(布尔值),循环中所有的return原创 2021-08-29 21:47:54 · 133 阅读 · 0 评论 -
vue3.0-第一章之setup,ref / reactive
1.setup触发的时机是beforeCreate之前,所以setup内部访问不到this的概念2.setup的写法与beforeCreate同级,内部有两个参数,且内部必须要用return暴露出去props:上个组建的参数context:1.attrs是上个页面传过来的属性,没有用props承接的都会在attrs里面展示,用props承接的都不展示在attrs内2.emit是抛出事件,如下方法:emitFn3.slots插槽,context.slotssetup(props,co原创 2021-08-02 13:54:49 · 353 阅读 · 0 评论 -
Lodash中节流(throttle)和防抖(debounce)
1.节流throttle API走起_.throttle(func, [wait=0], [options={}])func (Function): 要节流的函数。[wait=0] (number): 需要节流的毫秒数。[options={}] (Object): 选项对象。[options.leading=true] (boolean): 指定调用在节流开始前,默认true。[options.trailing=true] (boolean): 指定调用在节流结束后,默认true。用法原创 2021-07-20 11:34:47 · 19685 阅读 · 0 评论 -
vue路由拆成多个文件
1.原始的一个文件注册所有的路由:import Vue from "vue";import VueRouter from "vue-router";// 引入组件import home from "../views/home.vue";import about from "../views/about.vue";Vue.use(VueRouter);const routes = [ { path:"/", component: home },原创 2021-07-19 16:21:09 · 363 阅读 · 0 评论 -
vue组建创建之后公共引入,不用每个文件内都引入
1.正常情况下单个文件内引入,注册并使用<template> <div id="app"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div></template><script>import HelloWorld from './components/HelloWorld.vue'export default { name: 'App', c原创 2021-07-19 16:17:01 · 554 阅读 · 0 评论 -
html的meta标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度,为一个正整数,或字符串‘device-width’ // device-width 设备宽度 // height 设置viewport高度,一般设置了宽度,会自动解析出高原创 2021-07-14 16:28:25 · 52 阅读 · 0 评论 -
让图文不可复制
-webkit-user-select: none; -ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;原创 2021-07-14 16:24:46 · 55 阅读 · 0 评论 -
audio元素和video元素在ios和andriod中无法自动播放问题解决
原因: 因为各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放;音频,写法一 <audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> 音频,写法二 <audio controls="controls"> <source src="music/bg.ogg" type="audio/ogg"></sourc原创 2021-07-14 16:21:46 · 492 阅读 · 0 评论 -
消除transition闪屏
.css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }过渡动画(在没有启动硬件加速的情况下)会出现抖动的现象, 以上的 解决方案只是改变 视角 来启动硬件加速的一种方式;启动硬件加速的 另外一种方式: .css { -webkit-transform: tra原创 2021-07-14 16:17:04 · 990 阅读 · 0 评论 -
nginx代理配置
1.静态资源和接口代理//静态资源location /eap/ { proxy_pass http://29.12.3.68/bd/eap/; proxy_pass_header Set-Cookie; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}//接口代理locatio原创 2021-07-09 14:08:15 · 1328 阅读 · 0 评论 -
html2canvas生成图片
1.安装npm install --save html2canvas2.引入import html2canvas from 'html2canvas'3.使用html2canvas是需要生成图片的dom元素,button是触发点击事件的img是最后生成的图片路径展示的地方<div id="html2canvas"> kdfnowiebnfobewofbioqbwefi时刻记得把女佛鳄把握v贝尔我v为儿女IE温暖日vnew人稗</div>原创 2021-07-08 10:04:06 · 374 阅读 · 0 评论 -
js跨域解决办法
1.通过jsonp跨域使用JS动态生成script标签,进行跨域操作(script.src =‘http://www.example.com/data/?callback=handleResponse’;)2.通过document.domain+iframe来跨子域(只有在主域相同的时候才能使用该方法)a项目:<iframe src = "http://script.a.com/dir/b.html" id="iframe"></iframe> <scr原创 2021-07-05 18:42:46 · 105 阅读 · 0 评论 -
mac和window电脑 解决github打不开问题
一.mac电脑(mac电脑亲测有效)1.新建一个访达窗口,同时按住shift command G三个键,进入前往文件夹页面2.在输入框内输入/etc/hosts3.找到hosts文件夹4.由于hosts文件夹不可编辑,所以复制一份hosts文件先保存到本地桌面5.在新的hosts文件夹里输入如下代码http://github.com 204.232.175.94 http://gist.github.com 107.21.116.220 http://help.github.com 207.9转载 2021-07-01 15:29:36 · 3179 阅读 · 1 评论 -
数组和字符串有哪些常用方法 javascript
** 数组**filter //有返回值(数组),return是布尔值,true的时候item返回到数组内map //有返回值(数组),return任意类型,return直接在数组内forEach //没有返回值。arr.forEach(function(self,index,arr){}) 三个参数,不支持break,只支持return相当于continuefor //break跳出循环,reurn必须在函数内,且终止当前函数every //有返回值(布尔值),循环中所有的ret原创 2021-07-01 09:45:54 · 148 阅读 · 0 评论 -
canvas绘画
<canvas canvas-id="iCanvas" class="canvas-class"></canvas>canvas绘制图片小程序的操作let _this=this;let ctx = uni.createCanvasContext('iCanvas', _this);//画图片 参数是(图片路径,定位x,定位y,宽,高)ctx.drawImage("../../static/index/shareBgNew.png", 0*rpx, 0*rpx,840*原创 2021-06-30 17:12:48 · 382 阅读 · 0 评论 -
iframe父子组件传值通讯二
1.子组件传给父组件子组件:window.parent.postMessage(mess, '*');//mess是传递的数据父组件接受:<iframe id="child" src="http://127.0.0.1:5500/day01/b.html" frameborder="2"></iframe>window.addEventListener('message', function(e){ console.log(e) }, false)原创 2021-06-30 16:04:49 · 294 阅读 · 0 评论 -
Web前端iframe使用以及页面通信postmessage
iframe基本内涵通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了<iframe src="demo_iframe_sandbox.htm"></iframe>iframe常用属性:1.frameborder:是否显示边框,1(yes),0(no)2.height:框架作为一个普通元素的高度,建议在使用css设置。3.width:框架作为一个普通元素的宽度,建议使用css设置。4.name:框架的名称,window.frames[nam转载 2021-06-29 14:55:27 · 5086 阅读 · 0 评论 -
微信原生小程序以及uni-app的钩子函数和生命周期,路由跳转
1.小程序钩子函数onLaunch:小程序App启动时执行(全局只执行一次)onLoad:第一次进入页面前会进入此函数,类似于vue中的createdonReady:类似于vue中的mounted,监听页面初次渲染完成onShow:每次进入该页面都会触发onHide:每次离开该页面会触发onUnload:页面卸载,vue中的beforeDestroyonError:小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息onPageNotFound:页面不存在监听函数onShar原创 2021-06-28 18:05:02 · 4237 阅读 · 1 评论 -
2021年最新前端面试题(js,vue,webpack,css,react)总结
一.javascript1.javascript 有哪几种数据类型undefined,null,string,boolean,number,symbol(ES6),BigInt。。。object里面包含的function、Array、Date2.target和currentTarget区别event.target 返回触发事件的元素 event.currentTarget 返回绑定事件的元素$(document).ready()方法和window.onload有什么区别(1)、w原创 2021-06-24 22:34:48 · 3020 阅读 · 10 评论 -
unity编辑器使用-配套oculus创建全景视频-全景图片-手柄控制-调用外部接口-对接百度语音
这里写自定义目录标题官网地址说明unity编辑器使用创建项目制作全景视频添加图片添加文字C#控制手柄操作添加按钮(目前还存在问题,全景视频内缺少手柄对应的射线)调用外部接口对接百度语音识别某些名词/单词解释说明官网地址oculus官网:https://developer.oculus.com/unity官网:https://docs.unity3d.com/cn/2018.4/Manual/VideoPanoramic.html说明Unity 是实时3D互动内容创作和运营平台 。包括游戏开发、原创 2021-05-20 09:56:44 · 715 阅读 · 1 评论 -
vue组件-文字太多出现展开收起按钮或者hover的时候展示全部,没有的情况下默认展示
说明:组件封装了两种情况:1:超过有省略号,有展开收起按钮2.超过部分省略号,并且hover的时候有提示,没有展开收起按钮调用:/**title:显示的内容lineHeight:单行的行高eclipse: 第几行出现省略号ishasOpenBtnType: 字符串,默认为1 1:超过有省略号,有展开收起按钮 2.超过部分省略号,并且hover的时候有提示,没有展开收起按钮**/<eclipse :title=原创 2021-05-19 11:20:33 · 1363 阅读 · 0 评论 -
flex布局
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>lo原创 2021-05-19 11:14:40 · 34 阅读 · 0 评论 -
防抖与节流
函数防抖:将多次操作合并为一次操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。函数节流:使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,原创 2021-05-19 11:11:25 · 70 阅读 · 0 评论 -
14react之路由Route
1.安装npm install react-router-dom --save2.简单使用这个是点击跳转的操作:<Link className="list-group-item" to="/about">About</Link>这个是展示路由组件的区域:component属性就是放展示的组建的<Route path="/about" component={About}/>完整代码展示:import React, { Component } from '原创 2021-05-19 11:02:52 · 62 阅读 · 0 评论 -
13react之react-redux
1.安装npm install redux --save(用于中间键applyMiddleware和createStore)npm install react-redux --save(用于装饰器写法connect)npm install --save prop-types(监听数据格式传递是否正确)redux-thunk:npm install redux-thunk --save(用于thunk,可以异步加载)redux-logger: npm install redux-原创 2021-05-19 10:12:27 · 107 阅读 · 0 评论 -
11react的hook之useReducer
useReducer:useReducer的用法,看代码注释import React, { useReducer } from 'react';const initState = {count:0};const reducer = (state,action)=>{ //根据dispatch的action,去更新state switch(action.type){ case "reset": return initState;原创 2021-05-19 09:29:03 · 71 阅读 · 0 评论 -
10.react的hook之useCallback
useCallback是函数组件,类似于userEffect,第一个参数是函数,第二个参数是数组,监听的值变化的时候才会执行当前的函数function Form() { const [text, updateText] = useState(''); const handleSubmit = useCallback(() => { console.log(text); }, [text]); // 每次 text 变化时 handleSubmit 都会变原创 2021-05-18 11:59:30 · 621 阅读 · 0 评论 -
09react的hook之useEffect
useEffect:useEffect是 componentDidMount,componentDidUpdate,componentWillUnmount这几个生命周期函数的统一用法如下useEffect(()=>{//副作用逻辑// xxxxxreturn ()=>{//return一个函数,用于组件卸载前执行的代码}},[])备注: 1.空数组表示只执行一次,相当于componentDidMount。 2.非空数组,useEffect会在数组发生改变后执行原创 2021-05-18 11:54:56 · 91 阅读 · 0 评论 -
08react的hook之useState
两个参数:一个是变量,一个是函数。useState是hook,传入的参数是变量的默认值 //const [count, setCount] = useState(0);import React, { useState } from 'react';// 两个参数:一个是变量,一个是函数。useState是hook,传入的参数是变量的默认值 //const [count, setCount] = useState(0);function UseState() { const [count原创 2021-05-18 11:52:25 · 120 阅读 · 0 评论 -
07高阶组件
组建通信之上下文:1.定义变量const MyContext = React.createContext()const {Provider, Consumer} = MyContext;2 定义的父组件中,传入的属性需要时value, ChildrenComponents是第一级子组建名称,store是定义的一个变量<Provider> <ChildrenComponents value={this.state.store}></ChildrenCom原创 2021-05-18 11:50:10 · 107 阅读 · 0 评论 -
06 react _DOM的Diffing算法
_DOM的Diffing算法:虚拟DOM中key的作用:1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 2). 详细的说: 当状态中的数据发生变化时,react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较,比较规则如下: a. 旧虚拟DOM中找到了与新虚拟DOM相同的key: (1).若虚拟DOM中内容没变, 直接使用之前的真实DOM原创 2021-05-18 11:42:20 · 64 阅读 · 0 评论 -
05react中ant-design样式框架使用
ant-design样式框架:安装:npm install antd --save2.对antd进行按需加载,配置之后就不需要进行css引入1)安装制定版本的,否则会报错:npm install react-app-rewired@2.0.2 --save-dev修改package.json“script”:{“start”:“react-app-rewired start”,“build”:“react-app-rewired build”,“test”:“react-app-rewi原创 2021-05-18 11:13:57 · 211 阅读 · 0 评论 -
04react组件生命周期
react组件生命周期:import React, { Component } from 'react';class demo extends Component { // 1.dom挂载的时候执行函数 //1).componentWillMount //组建将要挂载 可以调用api,但是不能dom操作 //2).componentDidMount //组建已经挂载 可以进行dom操作,对状态操作 // 2.下面是state/props发生变化的时候执行的原创 2021-05-18 11:00:32 · 40 阅读 · 0 评论 -
03react组件传值
组件传值:知识点:组件直接用props传值class ParentDemo extends React.Component{ constructor(props){ super(props) this.state = { list:[], } } render(){ return <Fragment> <ul> { thi原创 2021-05-18 10:48:39 · 124 阅读 · 0 评论 -
02.react组件的编写和各种属性的绑定写法
组建—属性知识点:1.state和props用法2.setState用法3.react中点击事件写法4.ref的使用import React,{Fragment} from "*****"import ReactDOM from "***"let user = { name:"name111", age:12, gender:"男"}class Movie extends React.components{ constructor(props){原创 2021-05-18 10:43:23 · 179 阅读 · 0 评论 -
three.js
three.js演示demo实例教程代码github地址three.js的单文件代码1、javascript能写高效率的3D程序吗?能。技术在进步,几年前也许这是不行,写3D程序,最好是用c++,这样才能保证效率,但是现在,世界改变了。javascript的计算能力因为google的V8引 擎得到了迅猛的增强,做3D程序,做服务器都没有问题。如果你对服务器感兴趣,你可以看看nodejs...原创 2020-02-10 10:09:01 · 237 阅读 · 1 评论