- 博客(45)
- 收藏
- 关注
RSS订阅
原创 字节跳动前端技术面试分享
跟大家分享一下字节跳动的面试过程，毕业后在电信设计院里面任职前端开发工程师，一直都有离职的打算，也有陆续看机会投递简历，有一天就接到了字节跳动人事的电话，邀约面试，选择的时间是在晚上8点，后因为面试官开会延迟到8.30分面试，面试到9.30几分，用的是飞书，首先跟面试官打招呼，进行自我介绍，介绍完毕后，面试官直接让我共享屏幕，打开vscode，直接撸算法题。算法题1、JS 实现两个大数相加？let a = "9007199254740991";let b = "123456789999999999
2021-02-23 12:57:51
1075
原创 js递归函数递归思想
定义：1、递归函数就是在函数体内调用本函数；2、递归函数的使用要注意函数终止条件避免死循环，使用递归的时候必须有一个结束标志,否则会报内存溢出的错误 Maximum call stack size exceeded；为什么使用递归：递归是编程算法的一种，通过调用自身，将一些复杂/抽象的问题简单化，便于得出解决方案。先看一道题：例题：某人需要走上10级台阶，有两种走法，走法A：一步1个台阶；走法B：一步2个台阶。两种走法可以任意交替使用，问走上10级台阶共有多少种方法？。。。。。。这道题看起
2021-01-20 12:27:15
801
1
原创 简述JS面向对象编程（很容易接受）
面向对象的特点：封装、继承、多态1、封装 根据功能使用集成为api接口，使用对象的人可以不考虑内部实现，只需根据暴露出的api对应的属性进行使用。2、继承 为了增强代码的复用性，子类可以从父类上继承方法和属性，也可以自己创建拥有自己的属性和方法。3、多态 同一操作在不同的对象会产生不同的效果。可以看出来，在比较复杂的问题面前，或者参与方较多的时候，面向对象的编程思想可以很好的简化问题，并且能够更好的扩展和维护。Js中的面向对象对象里包含方法和属性创建对象的方法：1、普通方式：const F
2021-01-06 13:42:44
553
4
原创 Vue弧形轮播菜单导航栏
搞了个弧形轮播导航栏，轮播有动画过渡，可设置自动轮播，以及手动左右切换，只提供我的实现方法，没有集成为组件，大家可做参考根据自己的需求进行修改，优化封装成组件使用。视频演示，有点模糊，手机拍的。有什么问题评论见<template> <div class="user_callback"> <div class="user_pic" id="user_pic"> <span class="prev"></s
2020-12-30 09:42:10
4571
5
原创 微信小程序跳转到第三方H5网页
我开发过程中有小程序跳转到网页的需求，下面分享一下我的实现过程：使用官方文档web-view组件：web-view1、首先得通过微信公众平台配置业务域名，配置业务域名需要将校验文件上传到网站服务器根目录下。步骤一：登录公众平台找到开发管理步骤二：找到业务域名新增，下载校验文件，将校验文件放到网站服务器根目录下。步骤三：浏览器可访问到网站服务器根目录下的校验文件，即可保存业务域名成功。备注：微信小程序跳转到第三方网页需要获取第三方网站的同意，想要跳转到别人的网站，得获取别人的同意，吧把校验文
2020-12-20 16:42:23
14785
7
原创 Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的，在开发小程序的时候自带的根本满足不了需求，分享一个封装好的组件，支持自定义icon、扩展dom，适配安卓、ios、h5，全面屏。我用的是京东的Taro多端编译框架写的小程序，原生的也可以适用，用到的微信/taro的api做调整就行，实现效果如下。1、NavBar.jsimport Taro from '@tarojs/taro';import React, { Component } from 'react'import { View
2020-12-14 12:56:35
5642
11
原创 echarts自动轮播
最近搞了个数据可视化大屏项目，可视化大屏项目一般都是交互性比较少，图表一般加自动轮播。所以跟大家分享一下我的实现方案步骤：1、封装自动轮播函数，添加到vue实例原型上，以便全局调用。举例：echarts_auto_tooltip.js 源码，参数详见里面/** * echarts tooltip 自动轮播 * @param chart * @param chartOption * @param options * { * interval 轮播时间间隔，单位毫秒，默
2020-12-07 23:29:00
1945
3
原创 文字超出时tooltip才显示
对于字数过长，我们可能使用超出省略，移上去tooltip显示全部文本这种视觉交互，例如以下效果实现代码如下<template> <div> <div v-for="(item, index) in list" :key="index"> <el-tooltip class="item" effect="dark" :content="item" placement="right-start"> <div cl
2021-07-10 16:36:28
6014
10
原创 Dom节点优化方案
DOM操作对性能影响最大是因为它导致了浏览器的重绘和回流，我们都知道页面UI的更改都是通过DOM操作实现的，DOM虽然提供了许多api方便我们操作dom，但DOM操作的代价很高，页面前端代码的性能瓶颈也大多集中在DOM操作上，所以前端性能优化的一个主要的关注点就是DOM操作的优化。浏览器渲染机制：浏览器渲染页面浏览器解析 HTML 文档的源码，然后构造出一个 DOM 树，遇到样式就异步计算。异步计算好的样式与dom树合成，构建 render 树。进行布局（layout） render 树。
2021-04-11 15:53:27
556
1
原创 JS遍历(循环)——JS对象遍历(循环)&JS数组遍历(循环)
最近在处理一些偏逻辑的代码块经常遇到遍历问题，接下来跟大家一起温习一下有关于JS的遍历吧。js数组遍历1、for循环//不缓存var arr = [5,2,0,1,3,1,4];for ( var i = 0; i <arr.length; i++){ console.log(arr[i]);//遍历所得子项}for循环优化版：在JS性能优化中，有一个常见的小优化，即缓存数组长度//缓存var arr = [5,2,0,1,3,1,4];var len = arr.len
2021-01-14 23:43:40
2975
3
原创 leetcode每日一题：实现 strStr() 函数
实现 strStr() 函数。给定一个 haystack 字符串和一个 needle 字符串，在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始)。如果不存在，则返回 -1。脑子一闪，字符串内置方法indexOf()就是这个功能。var strStr = function(haystack, needle) { return haystack.indexOf(needle)};备注：indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的
2021-01-12 18:05:47
105
原创 leetcode每日一题：js解法-盛水最多的容器
学习是我进步。。。。。。盛最多水的容器给你 n 个非负整数 a1，a2，…，an，每个数代表坐标中的一个点 (i, ai) 。在坐标内画 n 条垂直线，垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0) 。找出其中的两条线，使得它们与 x 轴共同构成的容器可以容纳最多的水。说明：你不能倾斜容器。解题思路：木桶理论：木桶装水,取决于最短的那快板。同理想要求得两根条形所盛水的体积就是最矮的那条乘以下标差，及Math.min(a,b)*(b的x轴值-a的x轴值)，那么求盛水最多的我们一一遍历
2021-01-08 10:24:03
237
2
原创 浏览器最小字体为12px以及解决方法
在页面编写时候会发现浏览器最小字体显示大小为12px，只要小于12px,无论fontSize怎么调整，字体大小都不变，如果确实要用到更小的字体，可以通过css属性transform: scale();来缩小字体。transform: scale(1.0, 0.8)//transform: scale(x,y) x横向倍数,y纵向倍数缩小例子：对比原来：...
2021-01-05 15:44:36
2353
原创 vue改变data里对象的属性
Vue双向绑定是通过Object.defineProperty()函数来劫持各个属性的setter,getter属性，数据变动，通知订阅者，触发更新回调函数，重新渲染视图。当直接对data里对象增加属性的时候，这时候是没有setter,getter属性的，Vue实例化会遍历data里面的对象的所有的属性，并通过Object.defineProperty()函数把这些属性全部转为 getter/setter。受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到
2020-12-29 23:54:05
3405
原创 微信小程序兼容iphonex底部横条适配
padding-bottom:calc(10px + env(safe-area-inset-bottom)/2);
2020-12-29 14:29:55
1639
原创 img图片链接无效的问题
img标签src动态绑定，直接绑定路径是无法读取到的吗，会出现显示不出来的bug，解决办法使用require去请求静态资源即可{ rank: 1, roadName: "肇庆市茂高电子有限公司", img:require("../assets/parkWisdom/first.png"), color:'#FE3861', value:33, }...
2020-12-28 23:40:09
1089
原创 js弧形菜单
实现效果:js代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text
2020-12-28 18:09:59
525
原创 vue+express+mongodb全栈开发
去年做的毕业设计，功能实现得差不多，页面有些简陋有兴趣的可以自己做优化，代码私信获取本次电影资讯网站的设计与开发，前端技术栈为：“Vue.js + ivew + vue-router路由”,后端技术栈为：“Express + MongoDB”。包含多个模块的实现。其中就包括登陆注册功能、找回密码功能、提交评论功能、热门电影推荐功能等各方面的功能，除此之外还有针对后台开发的API，增、删、更新电影和资讯、用户评论的处理等等。业务设计：主要分为新闻、影评、焦点、电影、专题等模块，提供全面的资讯。账
2020-12-27 15:10:04
338
1
原创 echarts进度环
实现效果一：let tips = 20option = { title: [ { text: tips * 1 + '%', x: "center", y: "center", textStyle: { color: '#F65858', fontSize: 20 } }
2020-12-27 11:41:14
494
原创 echarts横向柱状图
实现效果：自动轮播效果请见：自动轮播函数封装option = { tooltip: { trigger: "axis", axisPointer: { type: "shadow", }, }, grid: { left: "3%", right: "4%", bottom: "6%", co
2020-12-27 11:28:21
1470
原创 echarts饼图指示线文字换行处理
实现效果：自动轮播效果请见：自动轮播函数封装option = { tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c}", }, series: [ { name: "", type: "pie", tooltip: { t
2020-12-27 11:14:09
5135
原创 echarts自定义legend形状
实现效果：自动轮播效果请见：自动轮播函数封装option = { tooltip: { trigger: "item", formatter: "{b} : {c} ({d}%)", }, // legend: { // // orient: 'vertical', // // top: 'middle', // bottom: 10,
2020-12-27 11:05:07
2324
原创 echarts进度条渐变
实现效果：自动轮播效果请见：自动轮播函数封装option = { tooltip: { trigger: "axis", axisPointer: { type: "shadow", }, }, grid: { left: "3%", right: "4%", bottom: "3%", co
2020-12-27 10:57:53
1056
原创 Taro微信小程序发布新版本时自动提示用户重启更新版本
我用的是Taro多端编译开发的小程序，原生的也是同样用法，在页面加载时使用就好。//app.json中，在页面加载完成的生命周期加入这段代码，Taro在componentDidMount生命周期中使用，原生在onLoad中使用if(process.env.TARO_ENV==='weapp'){ const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) {
2020-12-21 15:43:39
787
2
原创 微信小程序修改顶部通知栏字体颜色，手机电量时间.....。
我用的是Taro多端编译写的小程序，原生的换成wx.setNavigationBarColor即可Taro.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: '#1c2060', animation: { duration: 1 } })
2020-12-21 15:15:27
2515
原创 vue-element-admin中文设置
有的同学在github上拉vue-element-admin管理后台发现默认是英文版的，中文版的要拉的是i18n分支的代码
2020-12-19 15:30:48
1714
1
原创 vue必会的一些api
1、与数据相关的APIVue.set向响应式对象中添加一个属性，触发试图更新，这个新属性同样是响应式的。使用：Vue.set(target, propertyName/index, value)Vue.delete删除响应式对象属性，触发更新试图。Vue.delete(target, propertyName/index)2、与事件相关的APIvm.$on监听当前实例上的自定义事件，事件可以由vm.$emit触发，回调函数接收所有传入事件触发函数的额外参数。vm.$on('test',
2020-12-15 13:47:20
275
原创 Vue3教程（对比vue2用法）
没啥好说的，淦就完事了，详见代码，里面有setup()用法和生命周期写法、父子组件的传值写法。1、父组件<template> <img src="./logo.png"> <h1>Hello Vue 3!</h1> <button @click="inc">Clicked {{ count }} times.count++ {{auto}}</button> <child-node @my-emit="pare
2020-12-10 14:51:36
977
2
原创 vue导出excel(手把手教学)
1、导出按钮//导出按钮<el-button type="primary" :loading="downLoad" size="small" @click="expertExcel" //导出事件 icon="el-icon-download">导出</el-button>2、通过设置a标签触发excel下载// 导出excel expertExcel () { this.downLoad = true //调接口 get
2020-12-09 10:52:41
346
1
原创 ElementUi按需引入，Table使用失效
按需引入方式见博主这篇推文https://blog.csdn.net/weixin_44143279/article/details/110648868element-ui按需引入，Table表格无法显示解决方法：降低element-ui版本1、手动修改package.json2、删除node_modules给大家推荐一个快速删除node_modules的插件安装（推荐全局安装）：npm install -g rimraf使用：rimraf node_modules3、重新安装
2020-12-08 16:08:51
1870
2
原创 moment.js使用
计算两个时间的差：moment(time1).diff(time2, type, boolean)time1和time2支持类型：Moment|String|Number|Date|Array；type支持值为：years, months, weeks, days, hours, minutes, seconds；第三个参数默认为false，即为计算结果向下取整（3.2=3; 3.9=3）例如：计算当前时间距离2018年1月1号的 天数moment().diff(‘2018-01-01’, ‘da
2020-12-08 09:12:05
452
原创 js判断对象是否为空
正常判断对象a不为空的代码if(a!=null&&typeof(a)!=undefined&&a!=''){ //a不为空}!!处理就简单很多了if(!!a){ //a不为空}
2020-12-08 09:08:51
189
原创 阻止事件的默认行为、React阻止事件的默认行为
HTML中阻止事件的默认行为可以用return false<a href="#" onclick="console.log('The link was clicked.'); return false"> Click me</a>而React中只能显示调用e.preventDefault();function ActionLink() { function handleClick(e) { e.preventDefault(); console.log(
2020-12-08 09:06:54
485
原创 Taro生命周期
Taro生命周期componentWillMount在微信小程序中这一生命周期方法对应页面的onLoad或入口文件app中的onLaunchcomponentDidMount在微信小程序中这一生命周期方法对应页面的onReady或入口文件app中的onLaunch，在 componentWillMount后执行componentDidShow在微信小程序中这一生命周期方法对应 onShowcomponentDidHide在微信小程序中这一生命周期方法对应 onHidecomponentDi
2020-12-07 23:42:05
1054
1
原创 React.js生命周期之shouldComponentUpdate
选择渲染组件提高性能当你清楚在某些情况下组件不需要被重新渲染时，可以通过在 shouldComponentUpdate 钩子里返回 false 来跳过本次渲染流程。shouldComponentUpdate (nextProps, nextState) { if (this.props.color !== nextProps.color) { return true } if (this.state.count !== nextState.count) { return tr
2020-12-07 23:36:25
174
原创 按需引入element-ui找不到.babelrc
在开发过程中我们可以通过按需引入的方式引入所需要的组件，以达到减小项目体积的目的：步骤一：使用babel-plugin-component插件。运行命令行npm install babel-plugin-component -D2、修改babel.config.js文件module.exports = { presets: ['@vue/cli-plugin-babel/preset'], plugins: [ [ 'component',
2020-12-04 15:49:41
2092
原创 vue登录滑动验证
1、引入vue-monoplasty-slide-verify组件到项目里先使用命令行安装：npm install --save vue-monoplasty-slide-verify2、在main.js目录下添加代码import Vue from 'vue';import SlideVerify from 'vue-monoplasty-slide-verify';Vue.use(SlideVerify);3、在页面中使用<slide-verify :l="42"
2020-12-03 23:34:44
1887
2
原创 js深拷贝,对象深拷贝、数组深拷贝
数组深拷贝1、最简单的方法：使用ES6扩展运算符var arr = [1,2,3,4,5]var copy = […arr]测试：var arr = [1,2,3,4,5]var copy = [...arr]arr[2] = 5console.log(arr)console.log(copy)2、js数组concat/slice方法var arr = [1,2,3,4,5]var copy = arr.concat()arr[2] = 5console.log(arr)
2020-11-25 12:41:01
279
原创 vue关于echarts子组件数据渲染失败
用echarts组件时，echarts子组件数据渲染失败，代码重现：在这里插入代码片父组件：//dom元素<div class="AllAreaGDPTrand"> <div class="AllAreaGDPTrandHeader">全区GDP总额趋势</div> <all-areatrand :data="data" /></div>//获取数据 async getJCKZEQS (params) {
2020-11-19 13:35:41
1640
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人