- 博客(34)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 css三大预处理器（Sass、Less和Stylus）一目了然
1.首先，什么是预处理器呢？A:CSS（Cascading Style Sheet-级联样式表） 预处理器是一种用来为 CSS 增加一些编程特性的语言，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、函数、简单的程序逻辑等一些编程语言中的基本技巧，使得CSS 更为简洁，适应性更强，代码更直观等诸多好处。2.三种css预处理器的对比对比 Less Sass ...
2019-03-07 15:35:07
2289
原创 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
920
1
原创 Mac解决EROR: While executing gem ... (Gem::FilePermissionError) You don‘t have write permissions f
截图中报错信息提示权限不够，是因为我们电脑上自带的ruby，一般不要自行删除系统自带的ruby，可以再安装一个。在执行上述命令报错如下。
2023-09-06 16:24:18
993
原创 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
281
原创 三栏布局的几种实现方式
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
950
原创 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
78
原创 面向对象编程
分享-前端业务场景的一些代码优化前端开发基本每天都在写业务代码，有些场景我们可以用更好更优雅的方式去处理。今天给大家分享下我在实际业务场景下对代码的一些思考与优化，和大家探讨下。主要是两个方面：如何利用js对象key唯一性简化代码逻辑 如何利用异步和队列简化重复代码逻辑如何利用js对象key简化代码1. 利用对象来简化if else或者switch case先简单举例说个业务场景：运单可能有待发车、运输中、待收货、待回单、已收货…等状态，我们需要根据不同状态来显示不同的文案和图标
2022-05-24 15:30:23
333
原创 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
3573
原创 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
2911
原创 前端实现超出文字显示展开收起的功能
交互难点：位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收起”按钮说实话，之前单独看这个布局，即使借助 JavaScript 也不是一件容易的事啊（需要计算文字宽度动态截取文本，vue-clamp就是这么做的），更别说下面的交互和判断逻辑了，不过经过我的一番琢磨，其实纯 CSS 也能完美实现的，下面就一步一步来看看如何实现吧~文本样式1.多行文本截断<div class="text"> 浮动元素是如..
2022-01-06 11:35:29
7013
12
原创 前端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
1269
原创 介绍一下你对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
378
原创 介绍一下你对vuex的理解
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。（1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
2021-11-18 14:26:05
287
原创 Vue 组件间通信有哪几种方式？
（1）**props / $emit**适用 父子组件通信这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。（2）**ref**与**$parent / $children**适用 父子组件通信·ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例·$parent/$children：访问父 / 子实例（3）**EventBus** ``**（**``**$emit / $on**``...
2021-11-18 14:25:34
735
原创 computed 和 watch 的区别和运用的场景
computed****：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；watch****：更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；运用场景：· 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；· 当我们需要在数..
2021-11-18 14:25:01
298
转载 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
171
原创 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
2747
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
758
2
转载 JavaScript常见的工具函数汇总，正则、数组操作、本地存储、转码、节流防抖等等
工作中常用的工具函数，提高工作效率https://juejin.cn/post/6844904181761835016
2020-12-12 09:53:21
117
原创 使用patch-package定制node_modules 中的依赖包
背景： 首先，需求是这样，Vue项目中使用的是iview第三方UI库，要修改组件DatePicker中默认选中的当日的日期（如下图），实现无论在哪个时区，均显示中国的日期 （图1-1）由于，iview提供的api中并没有可以设置当前选中的日期的参数，而是默认去的new Date()，也就是当前系统的时间，所以这个默认选...
2020-12-12 09:35:39
8487
15
转载 悠谈 webpack
第1部分入门（1）模块化1.CommonJSCommonJS是一种被广泛使用的Javascript模块化规范，其核心思想是通过require方法来同步加载依赖的其他模块，通过module.exports导出需要暴露的接口。2.AMD与CommonJS最大的不同在于，它采用了异步的方式去加载依赖的模块。主要用于解决针对浏览器环境的模块化问题，最具代表性的实现是requirejs...
2020-05-21 15:19:04
212
转载 浅浅的webpack
第1章 入门（1）模块化1.CommonJSCommonJS是一种被广泛使用的Javascript模块化规范，其核心思想是通过require方法来同步加载依赖的其他模块，通过module.exports导出需要暴露的接口。2.AMD与CommonJS最大的不同在于，它采用了异步的方式去加载依赖的模块。主要用于解决针对浏览器环境的模块化问题，最具代表性的实现是requirejs。...
2020-03-12 17:07:39
140
原创 前端使用mathJax.js展示数学公式无法自动换行的问题
前言:最近使用的一款插件math.js按照正常格式展示各种公式，途中遇到不能自动换行的困扰，一步步排查得知标签class名为mjx-chtml的设置强制不换行white-space: nowrap，那么只需要在你所引用的CSS文件中加一行样式即可话不多说，上代码全局引用并设置mathJaxmessageStyle是公式转化的进度，会显示的页面左下角，用户体验不是很好，SO，我隐藏掉...
2020-03-12 16:51:51
2294
3
原创 前端代码书写规范
前端规范通用规范TAB键用两个空格代替（WINDOWS下TAB键占四个空格，LINUX下TAB键占八个空格）。 CSS样式属性或者JAVASCRIPT代码后加“;”方便压缩工具“断句”。 文件内容编码均统一为UTF-8。 对于属性的定义，确保全部使用双引号，不要使用单引号；js 代码中尽量使用单引号。文件规范文件名用英文单词，多个单词用驼峰命名法。 一些浏览器会将含有这些词的作为...
2019-12-14 17:44:27
212
原创 前端如何快速实现构建
1.entrywebpack 查找依赖的入口文件配置，入口文件既可以一个也可以是多个。单页面应用入口配置通常做法配置：index.js 单页面应用入口文件，vendor.js 第三方依赖库，polyfill.js 特性填充库，// 导出配置module.exports = { entry: { vendor: './src/vendor.js', pol...
2019-11-30 10:55:33
657
原创 前端解决跨域问题的常用方法
首先，跨域是什么？只要协议、域名、端口有任何一个不同，都被当作是不同的域。为什么三者任何一个不同就会产生跨域呢，想想也很容易知道，要是很随便引用什么外部文件，不同标签下的页面引用类似的彼此的文件，浏览器很容易懵逼的，保障不了安全问题，但在安全限制的同时也给注入iframe或是ajax请求上带来了不少麻烦。所以我们要通过一些方法使本域的js能够操作其他域的页面对象或者使其他域的js能操作本域的页...
2019-11-30 10:40:02
734
原创 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
115
原创 2019前端面试题总结一波
前言：本来是自己总结方便自己呢，共享出来，欢迎各位大佬拍砖，嘻嘻一.html基础1.1 html属于结构层，负责描绘出内容的结构； css属于表现层，负责如何显示内容； JavaScript属于行为层，负责内容应如何对事件作出反应1.2 标签语义化 语义化最实在的理解就是用正确的标签做正确的事情，让页面的内容结构化便于对浏览器、搜索引擎解析；...
2019-03-20 13:41:58
408
原创 利用css实现元素的上下左右居中
前言：关于text-align:center和文字通过height与line-height实现的方式就不再赘述1.未知元素宽高方法一：代码实例：html==><div class="table"><div class="father"><div class="son">子元素居中子元素居中子元...
2019-03-06 18:03:43
1421
1
原创 electron-vue实现自动更新版本的另一类方法
首次使用electron-vue实现桌面应用，其中遇到n多的坑，一次次的从坑中爬起再跌下再爬起。。。1.实现版本的自动更新：首先想到的是autoUpdater，就按着百度的方法（完全没有问题）比葫芦画瓢的实现了，但由于打包的是合在一起打包的，有些参数可能没有，另外就是我们的下载的连接是按照登录的服务器地址（也就是不是固定的地址），诸多不便，于是放弃这种方式；于是乎，便使用以下方法/...
2018-12-17 18:26:32
3919
5
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人