- 博客(34)
- 资源 (1)
- 收藏
- 关注

原创 css三大预处理器(Sass、Less和Stylus)一目了然
1.首先,什么是预处理器呢?A:CSS(Cascading Style Sheet-级联样式表) 预处理器是一种用来为 CSS 增加一些编程特性的语言,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、函数、简单的程序逻辑等一些编程语言中的基本技巧,使得CSS 更为简洁,适应性更强,代码更直观等诸多好处。2.三种css预处理器的对比对比 Less Sass ...
2019-03-07 15:35:07
2414
原创 Xcode 14.3.1build 报错整理
building for iOS Simulator, but linking in object file built for iOSCommand PhaseScriptExecution failed with a nonzero exit code
2023-10-11 16:46:31
1077
1
原创 Mac解决EROR: While executing gem ... (Gem::FilePermissionError) You don‘t have write permissions f
截图中报错信息提示权限不够,是因为我们电脑上自带的ruby,一般不要自行删除系统自带的ruby,可以再安装一个。在执行上述命令报错如下。
2023-09-06 16:24:18
1204
原创 npm install 报错 npm ERR! code EINTEGRITYnpm ERR! sha1-XWtFkM/pDAyNc5bIP/2fwotaZFA= integrity checksum
也来来回回删除了package-lock.json和node_modules。运行了:npm cache clean --force。结果npm install 竟然成功了。有人说要把npm版本升到最新,我也升。最终有人说要降低版本。
2023-06-07 17:26:34
455
原创 三栏布局的几种实现方式
1、float实现三栏布局给左盒子设置float:left,给右盒子设置float:right,中间盒子设置margin-left和margin-right。需要注意的是,左右盒子要放在中间盒子之前。代码如下:2、absolute实现三栏布局给左右盒子设置position:absolute,给左盒子设置left:0;top:0,给右盒子设置right:0;top:0;给中间盒子设置margin-left和margin-right。代码如下:3、flex实现三栏布局给父元素设置display
2022-06-13 13:49:35
1019
原创 JS处理数组去重
示例数组:let arr = [8,5,12,8,5,45,2,56,78,45,5,45],let newArr = [];方法一:暴力双循环方法二:includes()去重方法三:filter()循环过滤方法四:sort()排序方法五:ES6 Array.from()方法六:递归
2022-06-10 10:56:13
115
原创 面向对象编程
分享-前端业务场景的一些代码优化前端开发基本每天都在写业务代码,有些场景我们可以用更好更优雅的方式去处理。今天给大家分享下我在实际业务场景下对代码的一些思考与优化,和大家探讨下。主要是两个方面:如何利用js对象key唯一性简化代码逻辑 如何利用异步和队列简化重复代码逻辑如何利用js对象key简化代码1. 利用对象来简化if else或者switch case先简单举例说个业务场景:运单可能有待发车、运输中、待收货、待回单、已收货…等状态,我们需要根据不同状态来显示不同的文案和图标
2022-05-24 15:30:23
409
原创 vue 前端实现上传录音功能
所用到的技术+原理// 音频文件上传示例new Blob()// Binary Large Object 二进制类型的大对象,Blob是JavaScript内建对象,表示不可变的原始数据,类似文件的对象。// https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/Blob// let aBlob = new Blob( array, options );let dataBlob = new Blob([音频文件原数据], { type
2022-02-21 20:55:03
3746
原创 RN 环境搭建教程
RN开发环境搭建mac:1,安装homebrew/usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"选择中科大镜像2,安装nodebrew install node3,安装yarnnpm install -g yarniOS模拟器环境搭建1,安装Xcode官网下载最新版appStore下载最新版React Native 目前需要Xcode 12 或更高版本。你
2022-01-20 16:53:07
3002
原创 前端实现超出文字显示展开收起的功能
交互难点:位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时,不显示“展开收起”按钮说实话,之前单独看这个布局,即使借助 JavaScript 也不是一件容易的事啊(需要计算文字宽度动态截取文本,vue-clamp就是这么做的),更别说下面的交互和判断逻辑了,不过经过我的一番琢磨,其实纯 CSS 也能完美实现的,下面就一步一步来看看如何实现吧~文本样式1.多行文本截断<div class="text"> 浮动元素是如..
2022-01-06 11:35:29
8112
13
原创 前端ES6碎知识小总结
1.处理字符串相关方法let str = "I love JS";str.includes("I"); // --> true 字符串中是否包含该字符。 str.startsWith("I") // --> true 字符串是否以I开头str.endsWith("JS")// --> true 字符串是否以JS结尾str.repeat(3) // 字符串重复三次 返回新字符串str.padStart(10,'0'); // 字符串的长度最少为两位,不够的话在字符串的前面加0
2021-11-19 13:54:16
1297
原创 介绍一下你对vue-router的理解
vue-router****实现原理? (课程中的代码)vue-router 有 3 种路由模式:hash、history、abstract,l hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器;l history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式;l abstract : 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如
2021-11-18 14:26:54
408
原创 介绍一下你对vuex的理解
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store(仓库)。“store” 基本上就是一个容器,它包含着你的应用中大部分的状态 ( state )。(1)Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。(2)改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
2021-11-18 14:26:05
328
原创 Vue 组件间通信有哪几种方式?
(1)**props / $emit**适用 父子组件通信这种方法是 Vue 组件的基础,相信大部分同学耳闻能详,所以此处就不举例展开介绍。(2)**ref**与**$parent / $children**适用 父子组件通信·ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例·$parent/$children:访问父 / 子实例(3)**EventBus** ``**(**``**$emit / $on**``...
2021-11-18 14:25:34
768
原创 computed 和 watch 的区别和运用的场景
computed****:是计算属性,依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值;watch****:更多的是「观察」的作用,类似于某些数据的监听回调 ,每当监听的数据变化时都会执行回调进行后续操作;运用场景:· 当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算;· 当我们需要在数..
2021-11-18 14:25:01
345
转载 ES6数组的扩展
1.扩展运算符 扩展运算符是三个点(...),它好比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>]该运算符主要用于函数调用。注意,只有函数调用时,...
2021-09-09 11:26:29
223
原创 git常用命令大全
下面是我整理的常用 Git 命令清单。几个专用名词的译名如下。Workspace:工作区Index / Stage:暂存区Repository:仓库区(或本地仓库)Remote:远程仓库一、新建代码库# 在当前目录新建一个Git代码库$ git init# 新建一个目录,将其初始化为Git代码库$ git init [project-name]# 下载一个项目和它的整个代码历史$ git clone [url]二、配置Git的设置文件为.gitconfig,它可以在.
2021-08-24 09:38:49
2776
1
原创 Vue利用 provide 和 inject 实现realod()页面刷新的功能
Vue项目中刷新当前页面的方法JS 原生刷新页面方法:window.location.reload() 利用路由刷新的方法:this.$route.go(0) 利用 vue 提供的 provide 和 inject 自定义刷新前两种刷新页面的方法,虽然代码简单,但比较粗暴,属于强制刷新整个页面,会出现短时间的白屏空隙,用户体验不好下面只总结第三种刷新页面的方法,可以很好地解决刷新但不出现白屏的问题。利用provide和inject实现页面刷新首先在父页面中比如 App.vue ...
2020-12-12 11:30:12
806
2
转载 JavaScript常见的工具函数汇总,正则、数组操作、本地存储、转码、节流防抖等等
工作中常用的工具函数,提高工作效率https://juejin.cn/post/6844904181761835016
2020-12-12 09:53:21
137
原创 使用patch-package定制node_modules 中的依赖包
背景: 首先,需求是这样,Vue项目中使用的是iview第三方UI库,要修改组件DatePicker中默认选中的当日的日期(如下图),实现无论在哪个时区,均显示中国的日期 (图1-1)由于,iview提供的api中并没有可以设置当前选中的日期的参数,而是默认去的new Date(),也就是当前系统的时间,所以这个默认选...
2020-12-12 09:35:39
8684
15
转载 悠谈 webpack
第1部分入门(1)模块化1.CommonJSCommonJS是一种被广泛使用的Javascript模块化规范,其核心思想是通过require方法来同步加载依赖的其他模块,通过module.exports导出需要暴露的接口。2.AMD与CommonJS最大的不同在于,它采用了异步的方式去加载依赖的模块。主要用于解决针对浏览器环境的模块化问题,最具代表性的实现是requirejs...
2020-05-21 15:19:04
251
转载 浅浅的webpack
第1章 入门(1)模块化1.CommonJSCommonJS是一种被广泛使用的Javascript模块化规范,其核心思想是通过require方法来同步加载依赖的其他模块,通过module.exports导出需要暴露的接口。2.AMD与CommonJS最大的不同在于,它采用了异步的方式去加载依赖的模块。主要用于解决针对浏览器环境的模块化问题,最具代表性的实现是requirejs。...
2020-03-12 17:07:39
169
原创 前端使用mathJax.js展示数学公式无法自动换行的问题
前言:最近使用的一款插件math.js按照正常格式展示各种公式,途中遇到不能自动换行的困扰,一步步排查得知标签class名为mjx-chtml的设置强制不换行white-space: nowrap,那么只需要在你所引用的CSS文件中加一行样式即可话不多说,上代码全局引用并设置mathJaxmessageStyle是公式转化的进度,会显示的页面左下角,用户体验不是很好,SO,我隐藏掉...
2020-03-12 16:51:51
2618
3
原创 前端代码书写规范
前端规范通用规范TAB键用两个空格代替(WINDOWS下TAB键占四个空格,LINUX下TAB键占八个空格)。 CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”。 文件内容编码均统一为UTF-8。 对于属性的定义,确保全部使用双引号,不要使用单引号;js 代码中尽量使用单引号。文件规范文件名用英文单词,多个单词用驼峰命名法。 一些浏览器会将含有这些词的作为...
2019-12-14 17:44:27
255
原创 前端如何快速实现构建
1.entrywebpack 查找依赖的入口文件配置,入口文件既可以一个也可以是多个。单页面应用入口配置通常做法配置:index.js 单页面应用入口文件,vendor.js 第三方依赖库,polyfill.js 特性填充库,// 导出配置module.exports = { entry: { vendor: './src/vendor.js', pol...
2019-11-30 10:55:33
704
原创 前端解决跨域问题的常用方法
首先,跨域是什么?只要协议、域名、端口有任何一个不同,都被当作是不同的域。为什么三者任何一个不同就会产生跨域呢,想想也很容易知道,要是很随便引用什么外部文件,不同标签下的页面引用类似的彼此的文件,浏览器很容易懵逼的,保障不了安全问题,但在安全限制的同时也给注入iframe或是ajax请求上带来了不少麻烦。所以我们要通过一些方法使本域的js能够操作其他域的页面对象或者使其他域的js能操作本域的页...
2019-11-30 10:40:02
785
原创 webpack配置总结
const path = require('path');module.exports = { entry: "./app/entry", // string | object | array // Webpack打包的入口 output: { // 定义webpack如何输出的选项 path: path.resolve(__dirname, "dist"), // st...
2019-11-07 18:13:55
136
原创 2019前端面试题总结一波
前言:本来是自己总结方便自己呢,共享出来,欢迎各位大佬拍砖,嘻嘻一.html基础1.1 html属于结构层,负责描绘出内容的结构; css属于表现层,负责如何显示内容; JavaScript属于行为层,负责内容应如何对事件作出反应1.2 标签语义化 语义化最实在的理解就是用正确的标签做正确的事情,让页面的内容结构化便于对浏览器、搜索引擎解析;...
2019-03-20 13:41:58
430
原创 利用css实现元素的上下左右居中
前言:关于text-align:center和文字通过height与line-height实现的方式就不再赘述1.未知元素宽高方法一:代码实例:html==><div class="table"><div class="father"><div class="son">子元素居中子元素居中子元...
2019-03-06 18:03:43
1469
1
原创 electron-vue实现自动更新版本的另一类方法
首次使用electron-vue实现桌面应用,其中遇到n多的坑,一次次的从坑中爬起再跌下再爬起。。。1.实现版本的自动更新:首先想到的是autoUpdater,就按着百度的方法(完全没有问题)比葫芦画瓢的实现了,但由于打包的是合在一起打包的,有些参数可能没有,另外就是我们的下载的连接是按照登录的服务器地址(也就是不是固定的地址),诸多不便,于是放弃这种方式;于是乎,便使用以下方法/...
2018-12-17 18:26:32
3983
5
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人