- 博客(155)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Lerna多个npm包管理工具
1、介绍官网：Lerna · A tool for managing JavaScript projects with multiple packages.Lerna 是一个工具，可以优化使用 git 和 npm 管理多包存储库的工作流程。2、使用场景有一个业务组件仓库，里边有N个业务组件 每个业务组件是一个单独的 npm 包 作为一个包管理者 每一次仓库的更新，都意味极有可能需要发一遍包3、处理机制对于包的管理，有两种模式：固定模式(fixed)：所有包是统一的版...
2022-01-24 11:13:49
341
原创 vue render函数解析
1、使用场景：Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。 render 函数的使用，重点：样式、事件、插槽、指令、props、v-model、函数组件的处理。2、参数说明：// @returns {VNode}createElement( // {String | Object | Function} // 一个 HTML 标签名、组件选项对象，或者 //
2021-12-28 18:24:25
864
原创 父元素使用“text-overflow：ellipsis”属性
使用场景：当n个子元素都在单行展示，需要超出宽度隐藏文本，显示省略号。子元素设置成行内元素就可以了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .external { width: 200px; overflow:hidden;
2021-12-27 15:35:05
339
原创 vue属性事件传递
index.vue页面<template> <div> <h1>props、属性、事件传递</h1> <app-parent test="123" :name="name" :age="age" v-on:start1="say1" @start2="say2"></app-parent> </div></template><script> imp
2021-12-02 10:45:34
273
原创 阿里云部署nginx
1、执行yum命令安装依赖yum -y install pcre* // 支持正则的pcre模块yum -y install openssl* // 可以执行交互或批量命令2、下载官网地址：http://nginx.org/en/download.htmlwget http://nginx.org/download/nginx-1.20.0.tar.gz3、安装//通过tar解压安装包tar -zxvf nginx-1.20.0.tar.gz//进入nginxcd
2021-11-12 17:17:13
3467
1
原创 vue常用优化方案
1、路由懒加载routes: [ { path: '/home', component: () => import('./home.vue') }]原理分为两步：将需要进行懒加载的子模块打包成独立的文件（children chunk）；借助函数来实现延迟执行子模块的加载代码；...
2021-10-17 22:29:10
288
原创 电脑搭建前端开发环境
1、安装编辑器 推荐Visual Studio Code，下载地址https://code.visualstudio.com/2、下载代码 2-1、git下载地址https://www.git-scm.com/download/ 或者使用客户端sourceTreehttps://www.sourcetreeapp.com/ 2-2、配置ssh 可以参考：https://www.cnblogs.com/wqbin/p/11070...
2021-07-28 18:34:29
151
原创 leetcode无重复字符的最长子串
var lengthOfLongestSubstring = function(s) { var res = 0; // 用于存放当前最长无重复子串的长度 var str = ""; // 用于存放无重复子串 var len = s.length; for(var i = 0; i < len; i++) { var char = s.charAt(i); var index = str.indexOf(char); if(inde...
2021-07-22 10:23:32
76
原创 electron-builder打包
1、特点：1、electron-builder 可以打包成msi、exe、dmg文件，macOS系统，只能打包dmg文件，window系统才能打包exe，msi文件；2、几乎支持了所有平台的所有格式；3、支持Auto Update；4、支持CLI和JS API两种使用方式；2、windows 和 linux 打包{ "name": "web", "version": "1.8.0", "private": true, "homepage": "./",
2021-07-05 21:38:07
1350
原创 vue实现一个日历切换功能
1、显示星期几和对应日历2、可以增减年份/月份3、可以选中当前时间效果图<template> <div class="date-pickers"> <input type="text" placeholder="选择日期" @focus="trueDateBox" :value="date" readonly /> <transition name="fad
2021-06-29 16:09:15
1028
原创 vue生命周期总结
1、2.0和3.0对比1.1代码示例beforeCreate: function () { console.group('beforeCreate'); console.log("el : " + this.$el); console.log("data : " + this.$data); console.log("message: " + this.message) },created: function () { console.group('.
2021-06-04 10:48:33
126
1
原创 浅谈浏览器渲染过程与重绘
一、服务器返回html/css/js是如何渲染到页面上的呢？1、处理HTML并构建DOM树。2、处理CSS构建CSSOM树。3、将DOM和CSSOM合成一个渲染树。4、根据渲染树布局，计算每个节点位置。5、调用GPU绘制，合成图层，显示。以chrome浏览器为例，主要流程图1.HTML解析到script标签时，会暂停构建DOM，直到加载完成才继续构建，所以一般我们将script放在body最后边。 defer和async不会阻塞DOM渲染，defer是按照书写顺序异..
2021-05-28 18:45:51
187
2
原创 防抖和节流如何更好的理解
本质都是为了防止函数高频调用，利用闭包特性来缓存变量（状态）。1、防抖（debounce）重在清零clearTimeout(timer)，执行最后一次原理：调用函数fn在一段时间后才执行，如果这段时间再次调用，则重新计算执行时间，如果规定的时间没有再次调用该函数，则执行函数fnfunction debounce(fn, wait) { let timer = null; return function () { let _this = this; .
2021-05-27 19:40:32
171
2
原创 如何调试微信浏览器内嵌H5
有些代码是必须依赖微信环境才能正常运行，而X5调试页面可以把我们在手机的操作页面，投屏到chrome浏览器里面，像我们常用的开发者工具操作可以查看console、network、缓存等。官网地址：https://x5.tencent.com/tbs/guide/debug/faq.html安卓调试：1.在微信中打开http://debugx5.qq.com地址如果打开提示不是x5内核，可以如下操作1-1.在微信中输入：debugtbs.qq.com，点开会自动下载；1-2.下载成功后
2021-05-27 15:41:12
4053
原创 vant 是search组件autofocus属性兼容问题
在使用autofocus属性发现安卓手机只有第一次加载的时候，键盘会弹起来。之后就没效果了，ios手机是不兼容的。解决方案：ios因为安全原因不让进来就弹键盘，那么我们可以在搜索页前一个页面加个input，点击的时候把键盘调起来，然后搜索页面input绑定一个focus事件就可以了。在搜索页mounted的时候，我们调用下onFocus方法onFocus() { document.getElementsByClassName('van-field__control')[0].focus
2021-05-26 10:45:54
2253
1
原创 element-ui table表格固定列
今天一个小伙伴问我，element里面table组件循环列表，怎么固定那些列？其实可以把tableData里面的key组成一个数组，fixed放在里面就可以了，代码如下：<template> <el-table :data="tableData" style="width: 100%" height="250"> <el-table-column v-for="(item,index) in tablerow" :
2021-05-21 18:38:59
4822
2
原创 promise实现原理
一、我们先看看promise怎么使用const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else { reject(error); }});promise.then(function(value) { // success}, function(error) { // failure}
2021-05-21 18:32:12
130
原创 关于构成vue组件元素的思考
在我们开发中，我经常需要对页面功能进行不同的拆分，可以分为容器组件和展示组件。容器组件包含一个或多个展示组件。一个展示组件包含了模板、脚本以及样式的代码。常见的封装：1、用户改变数据源使页面呈现不同的状态。<div> <my-component data="我是父组件传入子组件的数据"></my-component></div>2、自定义封装，开放一部分slot给父组件，可以使其定制化。<div> <
2021-05-09 10:10:41
212
1
原创 封装element里面form和table组件
在后台开发中，有很多页面都是一个form搜索查询和一个table展示，所以我们可以把这两个封装成组件进行复用。form组件<template> <!--是否行内表单--> <el-form :inline="inline" :model="form" :rules="rules" ref="form" label-width="100px"> <!--标签显示名称--> <el-form-item
2021-05-05 19:10:14
544
原创 对于字符串常见考点总结
1、将一个字符串翻转，如’abcd’反转为‘dcba’'abcd'.split('').reverse().join('')2、如何判断一个字符串是否是回文字符串(例如：abccba就是一个回文字符串)2.1可以利用上面翻转的方法判断与原字符串是否相等function isEqual(str) { const res = str.split('').reverse().join('') return res === str}2.2可以用for循环判断第一位和最后一.
2021-05-01 15:47:07
162
原创 对于如何实现Promise.all思考
在日程开发中，promise.all可以帮助我们多个异步请求过来，再去进一步操作。Promise.all([ new Promise((resolve,reject) => { const result = 1000; setTimeout(()=>{ resolve(result) },1000); }), new Promise((resolve,reject) => { const result =.
2021-04-29 21:53:42
162
原创 vue登录权限总结
在h5和后台开发中，我们经常需要权限登录。所以需要总结日常经常需要的几种方式。1、路由方面一般由vue-router和vuex完成路由体系，h5一般通过router.beforeEach()进行拦截，后台一般通过addRoutes添加路由实现菜单控制。1.1router.beforeEach() 判断mate标识页面是否需要登录和store用户登录的标识。//路由配置meta信息const routes = [ { path: '/', name: 'Home',
2021-04-25 17:50:23
2330
原创 实现一个audio模拟器
audio自带的样式一般满足不了ui需求，所以往往需要自己去实现。原理是将audio隐藏，监听audio事件，实现模拟播放效果。audio属性的值可以通过父组件传值过来，此代码可以封装成一个组件。<template> <div class="audio-wrapper"> <audio controls="controls" class="audio1" :src="url" :preload="audio.
2021-04-22 20:34:25
221
2
原创 搭建sentry前端异常日志监控环境
一、sentry可以做什么可以实时监控生产环境上的系统运行状态，一旦发生异常会第一时间把报错的路由路径、错误所在文件等详细信息以邮件形式通知我们，并且利用错误信息的堆栈跟踪快速定位到需要处理的问题。优点：支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web界面来展示输出错误。Sentry 分为服务端和客户端 SDK，前者可以直接使用它家提供的在线服务，也可以本地自行搭建；后者提供了对多种主流语言和框架的支持，包括 React、Angular、Node、Dj
2021-04-20 17:49:30
1254
1
原创 关于接口返回数据需要合并处理的思考
1、今天有个小伙伴问我后台返回一个data，需要将数组的每一项合并成一个新的数组。data=[[4, 8, 10, 3, 6778129614750487000], [3, 7, 7, 6, 6777475710194946000]]需要换成data=[[4, 3],[8, 7],[10, 7],[3, 6],[6778129614750487000, 6777475710194946000]]代码实现如下var data = [[4, 8, 10, 3, 67781296147504
2021-04-19 14:06:59
966
原创 对于vuex在每个组件如何做到数据统一的思考？
第一步：先看看vuex是如何挂载到每一个组件的。1、一般我们会在main.js引入我们封装的store，挂载到vue实例上import store from './store';new Vue({router,store,render: (h) => h(App)}).$mount('#app');2、在store.js中我们会用Vue.use使用我们的vuex插件，因为vue.js 暴露一个 install 方法，所以我们去看看vuex的install方...
2021-04-15 11:38:55
341
转载 一个DOM元素绑定多个事件时，先执行冒泡还是捕获
绑定在被点击元素的事件是按照代码顺序发生，其他元素通过冒泡或者捕获“感知”的事件，按照W3C的标准，先发生捕获事件，后发生冒泡事件。所有事件的顺序是：其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。一个DOM元素绑定两个事件，一个冒泡，一个捕获，则事件会执行多少次，执行顺序如何。首先来了解一下冒泡和捕获是怎么回事：1.冒泡冒泡是从下向上，DOM元素绑定的事件被触发时，此时该元素为目标元素，目标元素执行后，它的的祖元素绑定的事件会向上顺序执行。如下代码
2020-10-29 15:36:46
489
原创 一个二进制数组，计算其中最大连续1个数
示例：[1,0,0,1,1,1] 输出3function maxOne(arr) { let max = 0; let tmp = 0; for (let i = 0; i < arr.length; i++) { if (arr[i] ==1) { tmp++; } else { max = Math.max(max,tmp); tmp = 0; } } return Math.max(max,tmp);}时间复杂度O(N) 空间复杂度O(1)
2020-10-29 10:41:00
707
原创 图片懒加载实现思路
1、在img元素上绑定一个属性data-src，放上图片真实的地址，src可以放一个占位图或者为空。2、当图片进入可视区域的时候，将data-src值赋值给src。<!doctype html><html><head><meta charset="utf-8"><title></title><!--适应移动端--><meta name="viewport" content="width=devic
2020-09-25 15:13:19
393
原创 前端利用exif.js+canvas压缩上传图片
利用canvas作为媒介重新绘画一张图片达到压缩目的，由于ios存在图片翻转问题，所以需要借助exif.js对图片进行处理。注意：base64转成file 用new File()在ios部分机型存在不兼容问题，所以转成blob，再转成file文件。import EXIF from "exif-js"; // 压缩图片 export function changeFile(file,callback) { var Orientation = null; // 选
2020-09-22 17:38:40
373
原创 总结一下在页面中常用到的方法
//获取 ？后面参数function getQueryString (paras) { var url = location.hash var paraString = url.substring(url.indexOf('?') + 1, url.length).split('&') for (var i = 0; i < paraString.length; i++) { var pair = paraString[i].split('=') if (pai.
2020-09-22 17:07:50
111
原创 vue子组件watch监听父组件传递的值
<script>export default { props: ["list"], components: {}, watch: { list: function(newVal, oldVal) { this.newList = newVal; //newVal即是list this.filte...
2019-11-20 09:44:08
2347
原创 vue在main.js引入less文件一直报错问题
今天在main.js中使用 import './assets/style/base/global.less' 引入less文件一直报错，而引入css文件却是可以的。经查找是需要require引入依赖，才可以正确运行 ...
2019-02-21 15:08:39
3882
原创 H5与安卓和ios通信
引入JsBridge（安卓）或WebViewJavascriptBridge（iOS）库的方案function setupWebViewJavascriptBridge(callback) { //Andriod使用 if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge)...
2019-01-30 15:21:01
913
原创 todolist应用（子父间传值）
<div id="app"> <input type="text" v-model="inputValue"/> <button type="button" @click="handleBtnClick">提交</button> <ul> <
2018-09-27 16:06:54
174
转载 vue数据绑定数组，改变元素时不更新view问题
写个例子HTML<body> <div class="box"> <div v-for="aa in aas">{{aa}}</div> <button @click="change">变数据 </button> &
2018-09-04 16:42:19
1217
原创 在eventBus传值时遇到的问题
今天在开发中遇到这样一个需求，A跳转到B页面，B页面里面事件触发返回A页面（需要B页面的参数），随之想到用eventBus。B页面触发的方法A页面进行监听结果在A页面发现data.cityid是可以接收到的，但A页面的数据并没发生变化……随后查资料发现在加载新组件时，在新组件挂载之前会销毁上一个组件，然后再挂载新的组件。如下图图片来自所以B页面触发在before...
2018-07-26 18:14:11
1803
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人