- 博客(28)
- 收藏
- 关注
RSS订阅原创 分享8个非常实用的Vue自定义指令
本文在github做了收录github.com/Michael-lzg…demo源码地址github.com/Michael-lzg…在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过Vue.directive( id, [definition] )方式注册全局指令。然后在入口...
2020-12-15 14:58:37
367
原创 谈谈图片上传及canvas压缩的流程
我们通常在做图片上传的时候都会遇上这样的情况，一是后端接口限制上传图片的大小，或者是即使后端没有限制大小，因为图片太大在前端渲染时太慢，造成页面加载体验较差。因此我们很有必要对上传的图片进行压缩。本文在gitthub做了收录：github.com/Michael-lzg…本文主要包括以下流程：用户通过input框选择图片 使用FileReader进行图片预览 将图片绘制到canvas画布上 使用canvas画布的能力进行图片压缩 将压缩后的Base64(DataURL)...
2020-06-11 11:44:24
477
原创 有趣的Canvas，你值得拥有！
Canvas 是 HTML5 提供的一个用于展示绘图效果的标签. Canvas 原意为画布, 在 HTML 页面中用于展示绘图效果. 最早 Canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现。canvas 的使用领域游戏 大数据可视化数据 banner 广告 多媒体 模拟仿真 远程操作 图形编辑判断浏览器是否支持 canvas 标签var canvas = document.getElementById('canvas')if (canvas.getContex
2020-06-06 16:45:49
312
原创 谈谈关于文件上传下载那些事
前端开发中总免不了关于文件的上传、下载需求。下面来总结一下常用的方法，欢迎讨论和吐槽。form 表单提交最传统的文件上传方法是使用form表单上传文件的，只需要把enctype设置为m...
2020-06-03 09:03:44
394
原创 从零构建一个类似vue-cli的脚手架
前言想必大多数人在开发 vue 等 SPA 项目都时候都会直接用vue-cli等脚手架开发，一是方便省去了好多配置上的功夫，二是vue-cli毕竟是久经考验较为成熟的东西，遇到问...
2020-05-27 09:37:38
930
原创 webpack4构建一个前端项目
webpack是一种模块打包工具：它将各种静态资源（比如：JavaScript 文件，图片文件，样式文件等）视为模块，它能够对这些模块进行解析优化和转换等操作，最后将它们打包在一起，打包后的文件可用于在浏览器中使用。webpack的优点：1、代码转换: TypeScript 编译成 JavaScript、SCSS,LESS 编译成 CSS.2、文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片。3、代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
2020-05-10 10:10:06
448
1
原创 2020年你不能不知道的webpack基本配置
前言在很久很久以前，在我们前端还只是页面切图仔的年代，我们开发一个html页面，通常会遇到这些情况：需要引入十几个css和js文件，而且因为他们彼此间有着依赖关系，所以引入的顺序还不能乱。 传统的html+css+js开发方式不能不能很好地运用less/scss等css预处理器以及ES6+的高级语法。 代码复用性差，可维护性差。此时就需要一个处理这些问题的工具，webpack应运而生...
2020-05-05 17:37:30
459
原创 JS基础总结（5）—— JS执行机制与EventLoop
前言在2020年春节及疫情期间，整理了一下javascript的基础知识，在此给大家做下分享，喜欢的大佬们可以给个小赞。本文在github也做了收录。本人github:github.com/Michael-lzgJS基础总结（1）——数据类型JS基础总结（2）——原型与原型链JS基础总结（3）——作用域和闭包JS基础总结（4）——this指向及call/apply/bindJS基础总结...
2020-05-04 15:35:27
290
原创 你也许不知道的javascript高级函数
高阶函数是对其他函数进行操作的函数，可以将它们作为参数或通过返回它们。简单来说，高阶函数是一个函数，它接收函数作为参数或将函数作为输出返回。例如Array.prototype.map，A...
2020-05-03 16:07:54
242
原创 JS基础总结（4）——this指向及call/apply/bind
前言在2020年春节及疫情期间，整理了一下javascript的基础知识，在此给大家做下分享，喜欢的大佬们可以给个小赞。本文在github也做了收录。本人github:github.com/Michael-lzgJS基础总结（1）——数据类型JS基础总结（2）——原型与原型链JS基础总结（3）——作用域和闭包JS基础总结（4）——this指向及call/apply/bindJS基础总结...
2020-04-27 21:50:20
277
原创 JS基础总结（3）——作用域和闭包
前言在2020年春节及疫情期间，整理了一下javascript的基础知识，在此给大家做下分享，喜欢的大佬们可以给个小赞。本文在github也做了收录。本人github:github.com/Michael-lzgJS基础总结（1）——数据类型JS基础总结（2）——原型与原型链JS基础总结（3）——作用域和闭包JS基础总结（4）——this指向及call/apply/bindJS基...
2020-04-25 22:43:49
279
原创 从 javascript 事件循环看 Vue.nextTick 的原理和执行机制
抛砖引玉Vue 的特点之一就是响应式，但是有些时候数据更新了，我们看到页面上的 DOM 并没有立刻更新。如果我们需要在 DOM 更新之后再执行一段代码时，可以借助 nextTick 实现...
2020-04-25 19:20:06
311
原创 总结javascript处理异步的方法
点击上方蓝色文字关注我们javascript语言的执行环境是单线程（single thread），就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个...
2020-04-06 14:36:23
284
原创 总结几个移动端H5软键盘的大坑
点击上方蓝色文字关注我们1、部分机型软键盘弹起挡住原来的视图解决方法：可以通过监听移动端软键盘弹起Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视...
2020-03-24 09:32:34
759
原创 总结vue知识体系之高级应用篇
点击上方蓝色文字关注我们vue 作为目前前端三大框架之一，对于前端开发者可以说是必备技能。那么怎么系统地学习和掌握 vue 呢？为此，我做了简单的知识体系体系总结，不足之处请各位大佬多多...
2020-03-17 11:31:15
325
原创 JS基础总结（2）——原型与原型链
前言农历2019即将过去，趁着年前几天上班事情少，整理了一下javascript的基础知识，在此给大家做下分享，喜欢的大佬们可以给个小赞。本文在github也做了收录。本人github:github.com/Michael-lzg掘金：https://juejin.im/post/5e25017a6fb9a030026e804e构造函数每个构造函数(constructor)都...
2020-01-20 11:26:06
206
原创 JS基础总结（1）——数据类型
前言农历2019即将过去，趁着年前几天上班事情少，整理了一下javascript的基础知识，在此给大家做下分享，喜欢的大佬们可以给个小赞。本文在github也做了收录。本人github:github.com/Michael-lzg掘金：https://juejin.im/post/5e23eae9f265da3e2a79230cJavaScript 是弱类型语言，而且 JavaS...
2020-01-19 15:45:35
279
原创 总结解决跨域的几个方法
本文源自https://juejin.im/post/5e0d4b1c6fb9a048167710c3什么是跨域跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 javascript 施加的安全限制。同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域；跨域问题的解决jsonp虽然现在大部分项目并不会使用它来解决跨域，但是...
2020-01-06 15:43:05
391
原创 总结几种数组去重的方法
数组去重，是前端开发中处理数据常用到的方法，也是面试中常会被问到的知识点。下面我将介绍几种常见的方法，仅做参考!文章来源https://juejin.im/post/5dc00d8bf265da4d185fbacf1、利用数组的indexOf下标属性来查询function unique4(arr) { var newArr = [] for (var i = 0; i &...
2019-12-27 14:04:29
248
原创 浅谈JavaScript的 深拷贝和浅拷贝
文章来源：https://juejin.im/post/5da5bc60f265da5b8d18d4d3深拷贝深拷贝复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。 深拷贝后的对象与原来的对象是完全隔离的，互不影响，对一个对象的修改并不会影响另一个对象。浅拷贝浅拷贝是会将对象的每个属性进行依次复制，但是当对象的属性值是引用类型时，实质复制的是其引用，当引用指向的值...
2019-12-27 13:47:36
223
原创 Flow语法入门总结
看一段常见代码function foo(x) { return x + 10}foo('Hello!')上述的函数传参肯定不是我们希望的，因为JavaScript 是一门动态类型语言，变量和参数的类型是可以随时改变的，这样会提高在运行时产生错误的概率。但是怎么去避免这样的错误呢？#Flow语法没有类型的静态检查是 JavaScript 语言的先天缺失，所有很多变量类型相...
2019-11-01 14:59:41
4203
原创 搭建一个vue-cli的移动端H5开发模板
简介vue-mobile 是是基于 vue-cli 实现的移动端 H5 开发模板，其中已经搭建好基本的开发框架，可帮助您实现快速开发。 技术栈：vue + vux + axios + less源码地址：github.com/Michael-lzg…功能搭建项目目录 配置 css 预处理器 配置 UI 组件库 vux 解决移动端适配 配置页面路由缓存 axios 请求封装...
2019-10-29 17:37:06
2157
原创 移动端rem使用及高清适配
一、相关概念rem（fontsizeoftherootelement）是指相对于根元素(html)的字体大小的单位。简单的说它就是一个相对单位。em（fontsizeoftheelement）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。设备物理像素：通俗的讲设备屏幕有多少个可以闪烁的点 是一个具体的概念 比如...
2019-03-11 22:50:49
757
原创 ES6总结（1）
let和var的区别：1、ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。var a = [];for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i); };}a[6](); // 10上面代码中，变量i是var命...
2018-12-10 22:33:48
218
转载 webpack优化
由于前端的快速发展，相关工具的发展速度也是相当迅猛，各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目，也正式因为这个原因，我们对于脚手架中最关键的一环webpack相关的优化知之甚少，脚手架基本上已经为我们做好了相关的开发准备，但是当我们想要做一些定制化的优化操作时，对webpack的优化也需要有一定的了解，否则无从下手，接下来就让我们进入webpack的优化世界...
2018-12-01 21:05:47
283
原创 js中的reduce()函数
案例计算数组总和var num = [1,2,3,4,5];var res = num.reduce(function(total,num){ return total+num; //return total + Math.round(num);//对数组元素四舍五入并计算总和});console.log(res)；//15合并二维数组var red = [...
2018-11-16 17:44:57
3439
转载 meta标签
原文链接：http://caibaojian.com/mobile-meta.html移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析HTML代码，更好地将移动web前端页面表现出来。本文整理一些常用的meta标签。 lang="zh-cmn-Hans"> > charset='utf-8'> http-equiv
2018-01-12 21:54:57
432
转载 js中的事件委托或是事件代理详解
起因：1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的；2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考；概述：那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们
2017-12-06 14:56:50
237
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人