- 博客(47)
- 收藏
- 关注
RSS订阅原创 多行文本溢出隐藏显示省略号
.txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; word-break: break-all; text-justify: newspaper; text-overflow: ellipsis; overflow: hidden;}.
2021-06-08 18:19:09
260
原创 移动端图片上传并生成图片（图片上传/图片压缩/图片绘制/Vue纯前端）
如今用户上传图片，生成图保存分享这些都是h5页面的基操了吧，十分常见，实际操作起来也是满满的技能点，其实也有很多兼容问题的坑。下面是以vue+elementUI做的一套
2021-06-08 17:29:14
1034
原创 部分安卓机型会有键盘挤压H5变形
上文说到部分安卓机型会有键盘挤压页面的情况，其实很直接就能解决获取窗口还未变化的高度，在检测到窗口变化之后把原高度赋值给新的高度就好啦，流不流氓？强不强硬？哈哈哈哈！ const originalHeight = document.documentElement.clientHeight || document.body.clientHeight; window.onresize = () => { return (() => { //键盘
2021-06-08 14:40:31
238
原创 竖向输入文字并展示
竖向输入文字并展示第一反应就是用 div 模拟 input 吧本文原需求：1、一个宽两列的输入框，竖向输入文字；2、当文字数量小小于等于 6 时，文字居中一列显示并且字号大,当文字数量大于 6 时，呈两列显示且字号小
2021-06-07 19:14:01
1220
1
原创 颜色转换 js
十进制纯数字颜色值 转 RGB 和 十六进制#颜色值RGB 转 十六进制#颜色值十六进制#颜色值 转 十进制纯数字颜色值一、十进制纯数字颜色值 转 RGB 和 十六进制#颜色值var num = 2330147let r = num >> 16;let g = (num & 0xff00) >> 8;let b = num & 0xff;let hex = '#' + ((1 << 24) + (r << 16) + (g.
2021-04-06 16:58:43
643
原创 Agora声网-Uniapp拉流（Vue拉流）
/** * agora声网解决方案 * 1. 创建 AgoraClient 对象 * 2. join进入相应频道 * 3. on 监听 user-published 拿到远端用户对象 AgoraRTCRemoteUser * 4. subscribe订阅流 将3.内的参数(远端用户对象, type('video'/'audio'))赋值给subscribe，拿到最新的远端用户信息 * 5. 根绝监听 user-published 返回的type来分别处理音/视频 * video -&g
2021-03-11 16:05:11
3039
原创 Ant Design Pro使用操作说明--(1) 搭建项目
一套全新升级的最新的超详细的umi+Antdpro的中后台管理系统的搭建和使用，希望可以帮助到各位。react（umi+dva+antdpro）～
2020-12-19 18:00:39
1362
4
原创 npm i的时候报错：npm ERR! node-sass@4.13.1 postinstall: `node scripts/build.js`
npm的时候报错运行以下代码，再重新npm i即可npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
2020-03-31 16:11:14
2410
1
原创 小程序的这些坑你踩过吗？
把自己在开发的过程中遇到的一些坑记录一下，防止以后再踩坑。1. 模拟器和真机的差异在开发的过程中，在模拟器上表现得好好的，在真机上却出问题的例子数不胜数。譬如动画的使用，cover-view上面使用定位，在模拟器好好的，在真机却错乱等等等等。造成这些错乱的原因主要是pc端和移动端不同的内核导致的。避坑方式：开发过程中，要时不时地用真机也看一下效果。2. view对本地图片的引用...
2020-02-23 16:08:28
284
原创 数组按数字重量排序
对给定数字重量排序给定一系列数字要求根据数字重量从小到大排序备注:重量计算规则:对数字每一位上的数字进行求和得到该数字的重量，例如: “19"重量为"10”,“21"重量为"3”排序规则:按数字重量从小到大排序，重量相等的情况下把数字当做字符串按字典序排序例子:输入"56 65 74 100 99 68 86 180 90"， 输出“100 180 90 56 65 74 ...
2020-02-10 19:50:31
1396
原创 自适应和响应式的区别
什么是响应式布局？响应式网页布局设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够兼容多个终端。什么是自适应布局？自适应网页布局设计指网页能够在不同大小的终端设备上自行适应显示。一个网站在不同大小的设备上呈现显示同一样的页面，让同一个页面适应不同大小屏幕，根据屏幕的大小，自动缩放...
2020-02-09 15:01:05
210
原创 前端性能优化之—防抖与节流(2)
在上一篇中，我们了解了了解了为什么要限制事件的频繁触发，以及如何做限制：debounce 防抖与throttle 节流今天重点讲讲节流的实现。一、防抖与节流的区别防抖：触发高频函数事件后，n秒内函数只能执行一次，如果在n秒内这个事件再次被触发的话，那么会重新计算时间，可以理解为仅仅只会调用一次节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率，当达到了一定的时间...
2020-02-08 00:59:36
259
原创 前端性能优化之—防抖与节流(1)
下面我来叙述一个场景，你的用户们由于各种原因，使用鼠标在几秒钟不停的按了数十次，不停点击发起请求，身为前端开发，你不担心你的页面崩溃嘛？！！肯定担心！！！由此, 就到了我们的性能优化环节——防抖。一、何为防抖？概念：任务频繁触发的情况下，只有任务触发的间隔超过制定的时间间隔的时候，任务才会被执行。防抖的原理就是：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件...
2020-02-07 23:13:58
347
原创 粉阿吉整理(14)之------函数和对象
1. 函数的概念和作用函数在数据类型划分里，划为object。概念：函数是指一个代码块，代码块是花括号围起来的，代码块通常是为了实现某种功能的，比如alert，就是一个函数，功能是弹出一个警告框，由事件驱动或者被调用时可重复执行的代码块。作用：增加灵活性，减少代码冗余，增强代码的可维护性、可扩展性。2. 函数的创建方式三种：函数声明、函数表达式、构造函数//函数声明，通过函数关...
2020-02-05 14:20:19
152
原创 粉阿吉整理(13)------js基础结构算法题
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>case</title> </head> <body> <script type="text/javas...
2020-02-02 14:07:41
215
原创 如何让一个单页面应用程序(SPA)更具黏性(sticky)
如果在Web上花费一点时间，很快就会知晓大多数公司和个人通过给他们的用户提供更好的服务，他们采用的方法是：把他们的站点划分成较短的、可以快速阅读的页面，周围环绕着图形导航元素，允许他们收集在几次单击内可能想要的几乎所有信息，而且，使用多个页面以代替一系列非常长的页面最小化了滚动页面的需要，而对于那些使用移动设备查看完整的站点或者具有低分辨率的显示器（小于800x600像素）的访问者来说，滚动页面可...
2020-02-02 13:41:36
163
原创 关于测试Web内容
作为前端大军一员，无论何时把文件传输到web服务器上或者把它们存放在可移动媒体上，都应该立即彻底的测试每个页面。下面的web测试检查步骤有助于确保web内容像你期望的那样工作。web测试检查步骤在传输文件之前，要在本地机器上测试它们，以确保链接都会工作，并且内容反映了你想要的视觉设计。在把页面传输到Web服务器或可移动设备上之后，要把它们都再次测试一遍。利用尽可能多的浏览器执行这些测试，Chrome、F...
2020-02-02 12:38:16
119
原创 SEO搜索引擎优化的来龙去脉
作为一个前端，搞不懂SEO的来龙去脉可不行，只是单纯的死记硬背方法，不是我所喜，所以有了这篇博客，说到来龙去脉，此篇幅真心不短，但是请放心，看完这篇一定会让你感受到SEO的友好哒，绝不白白浪费你的这几分钟~引子：什么是SEO？我们辛辛苦苦码出来的页面，只有最终被人们访问是才是有用的，如果没有人能找到你的页面，那么当初为了创建一种有用的架构、提供有趣的内容以及正确的编码而付出的所有努力终将是...
2020-02-01 21:30:44
911
原创 JS的映射与解析
今天刷到一道有意思的题，评论还延伸了几道，在这列出来顺便解析一波题目：['1', '2', '3'].map(parseInt) what & why ?我的想法：第一眼看到这个题目的时候，脑海跳出的答案是 [1, 2, 3]，但是真正的答案是[1, NaN, NaN]首先回顾一下map函数：语法: array.map(function(currentValue,index...
2020-02-01 13:20:46
2815
原创 在React/Vue 项目列表组件中写 key，其作用是什么？
diff 算法在我的另一篇有解释，这个是之前整理的面试题，环环相扣，关于react的基础：看了前三个就能基本理解diff啦~ 此篇我们只讨论key在列表组件中的作用！有人认为基于没有key的情况diff速度会更快。确实，这种观点并没有错，没有绑定key的情况下，并且在遍历模板简单的情况下，会导致虚拟新旧节点对比更快，节点也会复用。而这种复用是就地复用，一种鸭子辩型的复用。<div i...
2020-02-01 12:20:45
576
原创 粉阿吉整理(12)之------JS程序基本结构的介绍
程序的基本结构顺序结构 → 从上往下依次执行分支结构 → 分支语句、选择语句循环结构 → 循环语句顺序结构//从上往下依次执行，每一行代码都要执行到var a=10;var b=20;var c=a;a=b;b=c;console.log(a,b) //a=20,b=10分支结构if else语句/*if('条件'){ //条...
2020-01-30 22:02:26
182
1
原创 粉阿吉整理(11)之------JS逻辑运算符与自增自减
1. 逻辑运算符 逻辑与 && 二元 逻辑或 || 二元 逻辑非 ! 一元逻辑运算的特殊用法当操作数不是布尔值或者不仅仅是布尔值时//概念逻辑与 如果第一个操作数为true或者能隐式转换为true，结果为第二个操作数console.log( 2&&1 , 0&&1 , 2&&0 , true&...
2020-01-30 20:44:21
224
原创 粉阿吉整理(10)之------JS基本介绍与类型转换
1. JavaScript 基本介绍及发展趋势页面效果，人机交互，前后端交互1.1 浏览器发展简史1991年WorldWideWeb → 1994年NetScape → 2002年IE主导浏览器市场 → 2003年Safari → 2004年Firefox → 2008年Chrome → ...注意：排版引擎专门用来渲染解析Html、Css1.2 JavaScript的诞生...
2020-01-30 14:43:01
188
原创 粉阿吉整理(7)之------CSS3
1. CSS3 多列通过 CSS3，能够创建多个列来对文本进行布局 - 就像报纸那样！ 多用在文章部分多列属性栏目列数 column-count num 会冲突栏目宽度 column-width px (必要属性) 栏目距离 column-gap px栏目间隔线 column-rule px 跨列属性 width style color column-...
2020-01-27 18:26:09
191
原创 粉阿吉整理(6)之------Flex 弹性盒
1. 怪异盒模型想写上border和padding，又不想增加的时候，就可以把它变成怪异盒模型 因为怪异盒模型的boder和padding都在内部。标准盒模型只针对内容的宽度做了一个指定，没有对元素的总宽度进行指定。在让**boder和padding在内部去解析**的场合，利用border-box属性值会使得页面布局更加方便。怪异盒模型=IE低版本盒模型=border-box标准盒：b...
2020-01-27 15:22:26
212
1
原创 粉阿吉整理(5)之------H5 新增标签
-1. 结构写法上更加的简单化(DOCTYPE/charset)相关面试题(DOCTYPE)1). DOCTYPE声明必须是HTML文档的第一行，位于标签之前2). DOCTYPE声明不是HTML标签，它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令3). DOCTYPE 3种类型：HTML 4.01 Strict、HTML 4.01 Transitional、HTML ...
2020-01-27 00:25:24
242
原创 粉阿吉整理(4)之------Css Sprites、Css 统筹与表单表格
CSS Sprites(图片整合技术) 精灵图 雪碧图将导航背景图片，按钮背景图片等不常更换的小图片有规则的合并到一张大的背景图上。即将多张图片合为一张整图，然后用background-position来实现背景图片的定位。精灵图的优势通过整合图片减少对服务器的请求数量减少图片的体积从而加快页面加载速度CSS统筹整站里相同的css样式提取到一个样式表里，各个页面调用相同的样式...
2020-01-26 17:13:26
181
原创 粉阿吉整理(3)之------页面布局与浏览器兼容
1. 宽高自适应能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示1.元素的大小能够根据窗口自动调整2.根据子元素自动调整3.元素具备最小高度的自适应 min-height属性宽度自适应元素宽度设置为100%，块元素宽度默认为100%高度自适应（窗口高度）首先: html,body{height:100%}其次: 自适应元素的height:100%...
2020-01-26 16:48:52
159
原创 精心整理Node.js入门---原理篇
咱们前端这么多技术，上手容易，但是搞清楚原理不太简单呀，而我偏偏强迫症，不喜欢一头雾水的使用某个技术，某行代码，所以在之前学习node的时候研究了一点东西，梳理了一下趁着这次整理，一齐放上来先来段入门的文件读写练练手再开讲读取文件（fs）1、fs模块是系统模块，叫文件系统, FileSystem用来操作本地文件,原生js做不到。2、文件系统的写读nodejs/js都有一个异步的回调机...
2020-01-22 00:09:20
196
原创 umi+dva+antd后台管理系统(7)---table表格的增删
oho~，这两天有事，今天继续写啦！先来个删除把，比较简单的稳一下心情。1. 删除1、首先还是一样的，先定义一个请求~// 删除所选商品export const Dele=(id)=>{ return instance.POST("/api/crud",id)}2、然后定义model发起请求的方法delete~export default { namespace:...
2020-01-17 15:32:31
993
原创 umi+dva+antd后台管理系统(6)---table数据的改查
数据的增删改查！源码在这儿MyGithub，觉得不错留颗小星星哦~1. 修改效果：点击编辑按钮，跳转修改页，并且商品信息传过去！！先做个简单的表单，制作修改页...
2020-01-17 10:46:02
1219
原创 umi+dva+antd后台管理系统(5)---dva loading
在开始增删改查之前，我又加了个加载数据的loading效果~1. loading效果其实也不难，我的思路是：初始化设置loading为false，在发起网络请求的时候更新为true，展示加载状态，待数据请求过后，同步数据的时候，loading重新设置为false即可。然后UI组件那边负责接收这个loading和展示这个 loading即可。models：export defaul...
2020-01-10 11:09:55
2658
原创 umi+dva+antd后台管理系统(4)---展示数据
废话不多说，今天事多，希望标题功能一上午能写完 ，开干！ok，先修改了一下界面，展示一下我要实现的功能。 如图：1. antd找了一个table表格2. 发网络请求填数据定义一个发请求的方法 //获取商品列表export const list =()=>{ return instance.GET('/api/detail')}在componentDi...
2020-01-09 18:51:49
1127
原创 umi+dva+antd后台管理系统(3)---完整登录逻辑
界面准备好啦，登录操作开始：1. 回顾一下redux是什么redux 是一个应用数据流框架，主要解决了组件间状态共享的问题，原理是集中式管理，可以让数据更可控，react 中所有数据处理都在 redux 中进行，三个核心方法，action、store 和 reducer。在 redux 中遵循的原则：1. 一个项目只能有一颗数据树。2. 所有的数据改变都需要在 reducer 中进行...
2020-01-08 21:16:31
4515
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人