- 博客(38)
- 收藏
- 关注
RSS订阅原创 B端响应式布局解决方案—— Grid 栅格布局应用详解
栅格布局三大重要因素：列、水槽、页面边距首先要了解，栅格系统三大重要因素：列、水槽、页面边距。定义列一般PC端通常使用12列栅格，如果业务比较复杂，则可以使用24栅格。当前，也可以根据实际场景需要增加栅格数量，数量越多响应式约灵活，相应的版面被分割的会比较零碎。定义水槽宽度水槽宽度一般使用4或者8的倍数，比如16px，20px，24px。一般推荐使用16px，间距适中。最后 定义触发页面布局的关键值比如 672px，1056px，1312px等进行栅格数量删减。
2022-10-12 03:20:30
1678
1
原创 安装了 vue-cli，提示 zsh: command not found: vue
安装了`vue@cli后`脚手架后，输入`vue` ，输出 `zsh: command not found: vue`
2022-09-17 19:51:51
3138
1
原创 构建工具 Vite、Webpack、Rollup对比
webpack是一种新型前端构建工具，能够显著提升前端开发体验它主要由两部分组成：其作用类似webpack+ webpack-dev-server，其特点如下：vite会直接启动开发服务器，不需要进行打包操作，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快利用现代浏览器支持ES Module的特性，当浏览器请求某个模块的时候，再根据需要对模块的内容进行编译，这种方式大大缩短了编译时间 结论：rollup更适合打包库，webpack更适合打包项目应用，vite...............
2022-06-24 18:23:10
3919
原创 webpack：自定义plugin插件开发
plugin使用方式：通常我们会先通过npm安装到本地,然后在配置文件(webpack.config.js)的头部引入,在plugins那一栏使用new关键字生成插件的实例注入到webpack，webpack注入了plugin之后,那么在webpack后续构建的某个时间节点就会触发plugin定义的功能plugin一旦注入到webpack中后,它会在对应的生命周期函数里绑定一个事件函数,当webpack的主程序执行到那个生命周期对应的处理工序时,plugin绑定的事件就会触发.......
2022-06-23 14:55:38
2577
原创 前端工程化实践：从开发到构建测试部署——由此及彼
前端工程化从实践方面来说，一般涵盖了从开发阶段到代码发布生产环境，包含了以下几个内容： - 开发：脚手架Vue/React - 构建：webpack、Rollup、Vite构建工具 - 测试：单元测试、e2e测试、组件测试、黑盒测试 - 部署：CI/CD 性能：性能优化 - 规范：开发流程规范、编码规范、版本管理规范当然，从理论角度来讲，前端工程化又可以理解为一种通过规范化、模块化、自动化等手段，提高前端项目 在研发、运维阶段的效率、质量。............
2022-06-16 01:20:53
1024
原创 浅谈一下在阿里工作的前端性能优化的全链路经验
在阿里做性能优化也有一段时间了，那就总结一下前端常见的优化内容吧首先作为一个前端工程师，要明白性能优化的重要性以及必要性，基本都涵盖了从开发、打包构建、以及前端工程化模块化等等一系列内容，不光可以提升技术广度和可加深技术深度~~.........
2022-06-08 07:02:25
976
1
原创 【算法】LeetCode53：超简单的求最大子数组和~~
给你一个整数数组 nums ，请你找出一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。子数组 是数组中的一个连续部分。示例 1：输入：nums = [-2,1,-3,4,-1,2,1,-5,4] 输出：6 解释：连续子数组 [4,-1,2,1] 的和最大，为 6 。示例 2：输入：nums = [1] 输出：1示例 3：输入：nums = [5,4,-1,7,8] 输出：23来源：LeetCode53 求最大子数组和【解题思路】：使用动态规划第一步：遍历
2022-05-26 16:09:14
142
原创 前端CORS跨域原理详细分析
JSONP并不是一个好的跨域解决方案，它至少有着下面两个严重问题：会打乱服务器的消息格式：JSONP要求服务器响应一段JS代码，但在非跨域的情况下，服务器又需要响应一个正常的JSON格式只能完成GET请求：JSONP的原理会要求浏览器端生成一个script元素，而script元素发出的请求只能是get请求所以，CORS是一种更好的跨域解决方案。概述CORS是基于http1.1的一种跨域解决方案，它的全称是Cross-Origin Resource Sharing，跨域资源共享。针对不同的请求
2022-04-18 09:30:00
2739
原创 面试怎么回答call、bind、apply区别
有关 JavaScript 中 call()、apply()、bind() 的不同怎么回答：有两点不同： 1. 传参方式不同：这三个函数的第一个参数都是 this 的指向对象；第二个参数有所不同，call 和 bind 的参数是逗号分隔直接放进去的，但是 apply 的所有参数是以数组形式传进去的。 2. 调用方式不同：bind 返回的是一个新的函数，必须调用它才会被执行。c...
2022-04-18 03:43:28
1058
原创 node环境的CPU密集型与IO密集型介绍
CPU密集型也叫计算密集型，指的是系统的硬盘、内存性能比CPU要好很多；IO密集型指的是系统的CPU性能比硬盘、内存要好很多。计算密集型任务由于主要消耗CPU资源，因此，代码运行效率至关重要。对于计算密集型任务，最好用C语言编写，Python这样的脚本语言运行效率很低，完全不适合计算密集型任务。对于IO密集型任务，最合适的语言就是开发效率最高（代码量最少）的语言，脚本语言是首选。
2022-04-18 03:23:52
897
原创 【算法】寻找目标值的索引——leetcode704二分查找 超简单的js解法
二分查找的做法是： 1. 首先定义查找的范围 `[left,right]`，初始查找范围是整个数组。 2. 每次取查找范围的中点 `mid`，比较 `nums[mid]` 和 `target` 的大小，如果相等则 `mid ` 即为要寻找的下标，如果不相等则根据 `nums[mid]` 和 `target` 的大小关系将查找范围缩小一半。
2022-04-15 02:56:08
288
2
原创 看题说顺序、快速理解宏任务和微任务
目录1. 宏任务和微任务2. 宏任务、微任务有哪些？3. 宏任务、微任务是怎么执行的？4. 经典案例1. 宏任务和微任务首先，我们要先了解下 JS。js 是一种单线程语言，那么就产生了同步任务和异步任务。js 同步任务和异步任务ES6 规范中，microtask 称为 jobs，macrotask 称为 task宏任务是由宿主发起的，而微任务由JavaScript自身发起。2. 宏任务、微任务有哪些？宏任务：script (可以理解为外层同步代码)setTimeout/setIn
2022-04-14 02:22:59
601
原创 ES2020新特性双问号操作符与可选链?.操作符
?? 在 value1 和 value2 之间，只有当 value1 为 null 或者 undefined 时取 value2 ，否则取 value1
2022-04-10 01:09:35
696
原创 如何回答面试中的get 和post 两种请求方法的区别
get 和 post 是HTTP请求的两种基本方法，要说它们的区别，接触过前端开发的人都能说出一二，但是在面试中要尽可能的说的详细一些、完整一些才算完美，下面从传输方式、传输大小、编码类型总结一下
2021-11-27 17:21:42
2981
原创 算法：js数组循环右移问题
算法：js数组循环右移问题题目描述一个数组A中存有N（N>0）个整数，在不允许使用另外数组的前提下，将每个整数循环向右移M（M>=0）个位置，即将A中的数据由（A0 A1……AN-1 ）变换为（AN-M …… AN-1 A0 A1 ……AN-M-1）（最后M个数循环移至最前面的M个位置）。如果需要考虑程序移动数据的次数尽量少，要如何设计移动的方法？示例1输入6,2,[1,2,3,4,5,6]返回值[5,6,1,2,3,4]解题思路：关键：当m >
2021-02-02 02:05:49
1355
原创 理解js中的&&和||的优先级及运算
彻底理解js中的&&和||javascript中，&&和||的用法比较神奇，经常用在对象上，例如a || b，如果a不存在，则返回b。a && b，如果a存在，则返回b，否则返回a。本质是什么呢？&& 和 || 的作用只有一个(定义)：在javascript中：以下内容会被当成false处理："" , false , 0 , null , undefined , NaN其他都是true。注意：字符串"false"也会被当做true处理
2020-12-28 19:01:30
904
原创 如何判断this指向问题以及普通函数和箭头函数的this区别
this是前端面试中必考的基础知识点。但其实this不难理解。判断this指向时，记住以下几点：判断函数类型，1.1 如果是箭头函数，则为第一个包裹箭头函数的普通函数的this指向1.2 如果不是箭头函数，但是使用了bind,call,apply等改变this的方法，this被重新绑定为bind/call/apply函数的第一个参数如果是普通函数，并且没有绑定this2.1 如果是new的方式调用，this被绑定到实例上2.2 如果被调用，谁调用便指向谁2.3 如果直接执行，this指向w
2020-12-21 10:58:29
739
原创 普通函数和箭头函数区别
如何回答面试官的问题：普通函数和箭头函数的区别（this指向） 1. 声明方式不同：普通函数可以是声明式的，也可以是赋值式；而箭头函数只能是赋值式的； 2. this指向不同：普通函数有原型prototype，this指向不确定；箭头函数本身没有this，因为没有原型，this指向确定，指向他父级作用域； 3. new不同：普通函数可以new；箭头函数不能new，没有prototype属性，也不可以被当作构造函数， 4. 传参方式：普通函数可以获取 `arguments`
2020-12-21 10:34:25
3236
1
原创 html5新特性总结：媒体元素【video、audio】篇
媒体元素——video和audio1.使用方法audio使用方法：<audio src='' controls='controls'></audio>video使用方法：<video src='' controls='controls' width='' height=''></video>或者：<video><source src='video.mp4' type ='video.mp4'/></v
2020-11-09 18:40:13
1251
原创 使用CDN内容分发网络加速（前端性能优化面试题）
web前端性能优化之CDN加速（内容分发网络）1.什么是CDNCDN (Content Delivery Network) 可直译成 内容分发网络 。CDN的本质是利用缓存技术，将数据快速可靠从源站传递给用户。用户获取数据，不需要直接从源站获取，而是通过CDN对于数据的分发，用户可以从一个较优的服务器获取数据，从而达到快速访问，并减少源站负载压力的目的。2.为什么使用CDN来加速为什么不从源站进行数据的直接交付，让用户直接从源站获取数据呢？如果网络上的数据都使用从源站直接交付到用户的方法，那
2020-11-04 18:53:39
1173
原创 vue父子组件传值：详解父组件向子组件传值（props）
vue父子组件传值：父组件向子组件传值（props）定义父组件2.定义子组件关键点：1.父组件想要向子组件传值，那么需要在子组件引入的地方绑定要传的值，并且要在父组件中引入子组件。2.绑定的值可以是一个自定义属性来存放父组件向子组件传递的数据。3.子组件使用props属性接收，然后可以直接在页面上以这个形式“{{}}”引用1.父组件代码如下：<template> <div> 父组件: <input type="text" v-mode
2020-10-27 14:05:15
77737
16
原创 svn没有显示小图标解决方法
svn没有显示小图标解决方法打开注册表：输入 regedit ,然后接下来的具体路径为HKEY_LOCAL_MACHINE -> SOFTWARE -> Microsoft-> Windows ->CurrentVersion-> Explorer -> ShellIconOverlayIdentifiers把前面的几个文件夹重命名 ，删掉开头的空格，然后重启电脑，打开之后就有了。...
2020-10-15 09:54:04
1947
原创 vue ElementUI的DatePicker 日期选择器怎么设置显示的最大时间范围是当前时间或者使当前日期的框框在右边显示？
ElementUI的DatePicker 日期选择器怎么设置选择的最大时间是当时时间或者使当前日期的框框在右边显示？ElementUI的 DatePicker 日期选择器在进行范围日期范围选择的时候，当前月份的日期总是会从左边开始显示，但是我设置了选择范围只能选当前月份以前的月份，也就是从只能选择2020年10月 以前的月份。但是官方给出的禁用时间效果是这样的，这样的话默认从左到右的显示方式就会导致右边显示出来的日期有一半是不可选的。用户体验不是很好。。。。。如下图：所以，，怎么样可以设置Date
2020-10-12 16:19:09
882
原创 vue element-ui （DatePicker)日期选择器获取开始时间和结束时间传入后台进行网络请求
vue element-ui （DatePicker)日期选择器获取开始时间和结束时间以及显示默认时间1.DatePicker 日期选择器获取开始时间和结束时间页面效果：<el-date-picker v-model="valuedate" type="monthrange" align="right" unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"
2020-10-12 14:22:46
16329
4
原创 vue elementUI select下拉框设置默认值
elementUI select下拉框设置默认值要为select下拉框设定默认值，只需要把 v-model 绑定的值和你想要选中 option 的 value 值设置一样即可。<el-select v-model="valuetype" @change="changetype"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
2020-10-10 20:13:36
58704
2
原创 vue项目中elementUI中tabs标签页点击切换 发起网络请求 tab-click
elementUI中tabs标签页点击切换 发起网络请求 tab-click官方中的tabs标签页示例代码：<template> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane> <el-tab-pane label="配置管理" name="seco
2020-10-10 14:09:48
24660
6
原创 vue插槽使用slot-scope：ElementUI根据后台返回的0 1渲染表格里的tag标签不同数据
ElementUI 根据后台返回的0 1渲染表格里的tag标签不同数据
2020-10-09 18:48:51
1255
原创 解决办法：vue-cli4创建项目导入elementUI，浏览器报错Uncaught TypeError: Cannot read property ‘prototype‘ of undefined
vue-cli4创建项目导入elementUI浏览器报错：Uncaught TypeError: Cannot read property ‘prototype‘ of undefined 解决办法根据main.js里的这三条语句的不同显示，可以得出 问题就出在这三条语句上面！！！！查看elementUI官网，发现这样一句话：使用 vue-cli@3 我们为新版的 vue-cli 准备了相应的 Element 插件，你可以用它们快速地搭建一个基于 Element的项目。而官网引入的格式是这
2020-09-24 15:47:39
12278
9
原创 vue-cli4创建项目浏览器报错：Uncaught TypeError: Cannot read property ‘prototype‘ of undefined
问题：新建的项目引入elementUI后就报错了，并且页面上什么都没有在main.js里 引入elementUi的3个语句，import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);代码如下：运行 npm run serve，然后页面上什么都没有。。。。然后打开浏览器，有报错信息报错信息如下：Uncaught TypeError: Canno
2020-09-23 17:42:47
7684
9
原创 sass-loader安装+Failed to resolve loader: sass-loader You may need to install it.解决方法
sass-loader安装+Failed to resolve loader: sass-loader You may need to install it.解决方法新建项目后报错： ERROR Failed to compile with 1 errors 3:45:51 ├F10: PM┤Failed to re
2020-09-17 16:24:07
34043
12
原创 超详细的Nodejs安装及环境配置，vue ui可视化新建项目
超详细的Nodejs安装及环境配置，vue ui可视化新建项目最近在重装node，正好再重新走一遍node安装配置流程，记录一下~~第一步：下载安装包点击这里下载：node官网根据电脑系统及位数选择，我这里选择windows64位.msi格式安装包第二步：安装下载完成后，双击安装包，开始安装，一直点next即可，安装路径默认在 C:\Program Files 下，也可以自定义修改。我安到了E盘接着：npm package manager表示npm包管理器online document
2020-09-17 15:06:09
2199
3
原创 windows系统下更新nodejs与npm版本
windows系统下更新nodejs与npm版本超详细的更新node版本步骤，亲测成功！！！最近创建项目需要更新node版本，之前版本有些旧，原本以为更新node直接用指令就行，查了一圈百度和博客，大多都是坑人的linux版本下用工具n更新。。。。其实node版本更新只能下载最新的安装包，然后对原路径的进行覆盖，下面详细说一下：1.更新nodeJS:win+r 打开命令行，在命令行中输入：where node ，找到node的安装位置。如下图：可以看到我的node位置在E盘下面的 node
2020-09-16 19:08:43
10774
8
原创 面试点：超详细的flex弹性布局的6个容器属性和6个项目属性介绍
flex属性： flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content，因为它的多属性所以经常混淆，下面就是关于弹性布局的讲解Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。一、Flex使用1.设置容器为 Flex 布局。.box{ dis...
2019-11-06 20:52:06
1806
原创 Bootstrap中的属性 aria-hidden、sr-only、aria-labe、alert组件介绍
看了两天的bootstrap，发现这就是一个前端的框架，让你做网站的时候套着用，看了看中文官网，bootstrap中文网 分为4个部分：起步全局css样式组件javascript插件这几个内容，前两部分看看文档 ，会用就行， 不会的话就跟着敲。 在看全局CSS样式时 有几个属性 需要注意一下~~~~~~~~~·~-----------------------------分割...
2019-08-28 18:07:14
3789
原创 表单form中readonly只读和 disabled不可选的异同（超详细 附应用场景）
**表单中readonly只读和 disabled不可选的异同：好久没有写博客了，最近在学习前端框架 会陆续把一些需要注意的点补上。好了 切入正题。。。--------------------------------分割线-----------------------------------------相同点：两者都是用在表单中的两个属性，它们都能够使用户不能更改表单域中的内容。...
2019-08-28 15:57:42
2562
原创 超简单的配置java环境变量（绝对路径）
超简单的配置java环境变量（绝对路径）之前一开始学习java的时候糊里糊涂配好了环境变量，也是费了好大的牛劲，配了卸卸了重新配。前几天学妹让我给她看看环境变量，瞬间觉得环境变量真的很好懂，只要你搞懂 一点都不难。相对路径的话 就是网上那些path、classpath、java_home 的变量值，就像这样的，稍微少个符号就不对，而且出错不易察觉。但是用绝对路径会巨巨巨简单！！！下面...
2018-11-14 19:54:11
5783
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人