![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
文章平均质量分 62
是小橙丶
正在努力的前端攻城师,一次次记录自己所遇到的问题,望各位大神多多指导
展开
-
JS实现数组转换成树形结构数组(封装公共方法)
公共方法原创 2023-03-18 14:34:05 · 11213 阅读 · 0 评论 -
前端常见的适配方法
作为一个真正的前端攻城狮,我们经常会谈到web前端怎么做适配,然而平常经常做的事,一旦问起来突然好像脑子一片空白,只能想到rem、flex、媒体查询那些,因此想记录一篇文章以此警醒自己。一、固定布局(pc端)(静态布局)以像素作为页面的基本单位,不管设备和浏览器宽度,只设计一套尺寸(这种不太现实)二、根据不同根据不同的分辨率,加载不同的CSS样式文件(可切换的固定布局)自适应布局<script> // 分辨率大于等于1680,大部分为1920的范围情况下,调用此css if(wi原创 2021-05-27 11:10:27 · 22169 阅读 · 2 评论 -
基于typescript下的贪吃蛇练习项目(内含源码)
各位铁汁们,这个是我练习typescript时根据资料做的一个练习项目(用babel配置了浏览器的兼容,以及用postcss兼容各个浏览器的css3(IE))首先先将我们的项目进行一些简单配置(这里就不详细描述了),小伙伴们要是不理解可以去之前写过的webpack打包ts的配置可以看看,(依然送上我们的截图和代码)1.package.json{ "name": "part5", "version": "1.0.0", "description": "", "main": "inde原创 2021-05-26 09:27:56 · 1967 阅读 · 3 评论 -
webpack打包typescript代码
1.首先要npm init -y初始化项目2.把镜像换成淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org3.然后安装开发版本的一些依赖cnpm i -D webpack webpack-cli typescript ts-loader此时可以看到这些文件 就是成功了4.然后创建webpack.config.js进行简单的配置// 引入一个包const path = require('path')原创 2021-05-24 08:28:39 · 2076 阅读 · 10 评论 -
var a={}, b={key:‘a‘}, c={key:‘c‘}; a[b]=123; a[c]=456; console.log(a[b]);结果为什么是456?
今天在技术交流群看到了一个很有意思的一道题var a={}, b={key:‘a’}, c={key:‘c’}; a[b]=123; a[c]=456;console.log(a[b]);//为什么是456?我也不懂什么原理,这道题我做错了 于是乎我进行了一些资料的查阅,因为b跟c都是对象,而普通对象的属性名如果是对象的话,就首先要把它转为字符串,所以这样下来的话,这里用b或者c作为属性名的话,每次都是的结果都是 object object了,只是给了他两次赋值而已,接下来我们对这段代码进行深度分原创 2021-05-21 09:15:49 · 2021 阅读 · 1 评论 -
vue项目中回车键登录、登录密码是否可见、以及登录功能做防抖处理
在我们的登录页面,一般有个登录按钮,我们点击它然后才进行登录,但是站在用户体验上讲,体验非常不好,一般用户都是输入完账号和密码回车就直接登录了,以及一般希望在密码旁边可以点击查看自己的密码看见,输入的是否正确,接下来让我们先上效果图密码不可见的时候密码可见的时候分为三个部分呀一:回车键登录1.第一种方法在created()写上以下代码<script> created() { 回车键 enter点击登录 var _this = this; .原创 2021-05-20 17:05:11 · 2335 阅读 · 1 评论 -
高级前端面试题(来自一位朋友的投稿哟)
第一题题目:<script>let a = new Date() === new Date() let b = new Date("2020-08-25") == new Date("2020-08-25")let c = new Date("2020-08-25").toString() == new Date("2020-08-25")let d = new Date() === new Date().toString()let e = 0.1 + 0.2 === 0.3le原创 2021-05-09 20:40:39 · 1665 阅读 · 2 评论 -
利用uniapp中模仿抖音、滑动视频组件、双击点赞、首个视频自动播放
前言仿抖音截图基于uniapp模仿抖音的视频播放,其核心就是播放器,因此记录一下实现该功能的组件,我喜欢组件化开发,就放重点的一些组件,可以在下面的代码中学到父组件调用子组件的方法,父组件向子组件传值,子组件向父组件传值等操作组件化开发videoList.vue //主要组件<template> <view class="videoList"> <view class="swiper-box"> <swiper class="swi原创 2021-05-08 10:37:07 · 14030 阅读 · 16 评论 -
Vue父子组件之间传值、兄弟组件之间传值、子组件调用父组件方法(有例子方便理解)
组件之间传值原创 2021-04-26 17:50:25 · 1631 阅读 · 1 评论 -
JS中的防抖和节流,包含vue使用防抖和节流(有例子方便理解)
函数防抖:是指在事件被触发 n 秒后再执行回调,如果在这n秒内事件又被触发,则重新计时。这可以使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求。函数节流是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。节流可以使用在scroll 函数的事件监听上,通过事件节流来降低事件调用的频率。// 函数防抖的实现function debounce(fn, wait) { var timer = null.原创 2021-04-23 16:57:54 · 1527 阅读 · 1 评论 -
什么是原型、原型链?原型和原型链的作用(有图方便理解)
原型:JS声明构造函数(用来实例化对象的函数)时,会在内存中创建一个对应的对象,这个对象就是原函数的原型。构造函数默认有一个prototype属性,prototype的值指向函数的原型。同时原型中也有一个constructor属性,constructor的值指向函数对象。通过构造函数实例化出来的对象,并不具有prototype属性,其默认有一个__proto__属性,__proto__的值指向构造函数的原型。在原型对象上添加或修改的属性,在所有实例化出的对象上都可共享。/*代码基本架构1.每个函数.原创 2021-04-23 15:59:21 · 38067 阅读 · 3 评论 -
常见浏览器兼容性问题
常见的浏览器内核:1.图片边框的问题ie8浏览器上 a>img 图片会出现蓝色边框解决方法:common.css img { border:none; }2.图片下间隙问题盒子套图片时,盒子底边框和图片底线有一个空白距离原因:图片和文字以基线对齐 下间隙其实就是基线和底线之间距离解决办法:vertical-align:middle;font-size:0;line-height:0;display:block; 3.IE低版本常见的兼容性问题(了解)1.ie6小高原创 2021-04-23 09:25:14 · 1343 阅读 · 0 评论 -
Vuex的详细使用
Vuex是做什么的?管理什么状态有什么状态需要在多个组件上共享呢1.如果你做过大型开放,你一定遇到过多个状态,在多个界面之间的共享问题。2.比如用户的登录状态、用户名称、头像、地理位置信息等等。3.比如商品的收藏、购物车中的物品等等对我来说 我认为Vuex就是一个大管家统一来帮助我们管理,看一下官方的图片1.若你要修改state里面的状态,最好是要经过Mutations,因为这里能让Devtools监听到你的State变化,方便我们在使用Vuex能观察到哪个组件改变了该值以及操作原创 2021-04-20 16:13:33 · 1472 阅读 · 2 评论 -
vue—slot插槽用法记录
什么是插槽?插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot>表示,父组件可以在这个占位符中填充任何模板代码,如HTML、组件等,填充的内容会替换子组件的标签。插槽内容简单来说就是在父组件中给子组件模板,子组件直接可以通过<slot></slot>使用。为什么要写这篇文章记录以后可能要使用插槽时可以查阅使用默认插槽的用法在子组件放入以下代码<template> <div id=原创 2021-04-16 14:32:44 · 1614 阅读 · 0 评论 -
如何判断一个对象是否为数组
function isArray(arg) { //传进来一个参数 if(typeof arg === 'object'){ // 判断传进来的是否是一个对象 return Object.prototype.toString.call(arg) === '[object Array]' //判断是否是数组 }}arr= ['ss','nn']isArray(arr) //打印true...原创 2021-04-15 23:22:22 · 1369 阅读 · 0 评论 -
手写一个Promise函数以及实际使用场景
Promise大家都知道Promise称之为异步神器,解决了困扰我们的回调地狱,所以因此很多面试过程中都会让你手写一个Promise函数,Promise三个状态, PENDING=>等待 resolved =>成功 rejected=>失败一、简单的手写var promise = new Promise((resolve,reject) => { if(操作成功){ resolve(value) } else{ reject(error)原创 2021-04-15 09:28:38 · 2290 阅读 · 3 评论 -
vue 数据双向绑定原理
一、首先是2.0的双向绑定原理,基于Object.defineProperty实现et obj = { name:''}let virtualDom = JSON.parse(JSON.stringify(obj))Object.defineProperty(obj,"name",{ get(){ return virtualDom.name }, set(val){ virtualDom.name = val observer() }})func原创 2021-04-14 15:15:03 · 1340 阅读 · 4 评论 -
前端面试题一些的整理
一、响应式的数据原理是什么vue响应式的核心就是Object.defindProperty作用:直接在一个对象上定义一个新的属性,或者修改一个对象的现有属性语法:Object.definProperty(obj,prop,descriptor)参数:obj要在其上定义属性的对象,prop要定义的或要修改的属性的名称,descriptor将被定义或修改的属性描述符数据描述configurable:是否可以删除属性,默认falseenumberable:此属性是否可以被枚举,默认falseval原创 2021-04-13 17:18:52 · 1280 阅读 · 0 评论 -
async 一道经典面试题
经典面试题async function async1(){ console.log('async1 start') await async2() console.log('async1 end')}async function async2(){ console.log('async2')}console.log('script start')setTimeout(function(){ console.log('setTimeout')},0) a原创 2021-04-12 09:30:12 · 391 阅读 · 1 评论 -
echart图表实现动态改变纵坐标的最小值最大值(解决y轴波动幅度过于小的问题) 以及纵坐标横线隐藏
如图所示,该图的数据变化不大,此时呈现出来的数据效果看起来像一条直线,看不出波动,以及那一条条白色的横线像小学生笔记本一样(领导对这种效果很不满意),于是我们得想,是否可以取它变化的最小值和最大值为Y轴的刻度(数据是请求接口得到的动态数据):yAxis: [{ type: 'value', axisLine: { show:true, lineStyle: { color:'#fdfeff' //Y轴颜色 } }, //解决白色的横线 show改为false即可 split.原创 2021-04-09 14:55:40 · 3880 阅读 · 1 评论 -
关于闭包的一些理解还有题目
什么叫闭包:闭包就是能够读取其他函数内部变量的函数。在js中,可以将闭包理解成“函数中的函数“。闭包 如 fun 这个函数作用域 访问了另外一个函数 fn里面的局部变量num我们fn 外面的作用域可以访问fn 内部的局部变量闭包的作用 主要延生了变量的作用范围function fn(){ var num = 10; // function fun() { // console.log(num); // } //fun(); return function(){ console.lo原创 2021-04-08 08:55:33 · 1300 阅读 · 0 评论 -
记录一下ES6 ... 扩展运算符(对象展开符)的使用
一、扩展运算符( spread )是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。例子:console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5[...document.querySelectorAll('div')]// [<div>, <div>, <div>]二、合并数组如下面例子// ES5[1, 2,3].c原创 2021-04-01 11:10:55 · 1677 阅读 · 1 评论 -
微信小程序如何获取自定义组件中properties的属性并修改,以及父组件和子组件相互传值
原因:因为自己想了解组件中properties里面的值如何获取到而记录这篇文章一、自创自定义组件,在json文件夹写上“component”:true二、父组件的操作步骤2.1.在json文件夹加上使用组件2.2 在js文件中写好要传的数组数据2.3 在wxml页面进行父组件传子组件的值,用属性传值三、字组件在自己的JS中properties接收父组件传过来的值,定义好type属性和value为[],即为默认值(父组件传过来的值)四、用observers监听properties的属性原创 2021-03-31 09:38:28 · 30038 阅读 · 6 评论