- 博客(59)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 Vue异步组件处理路由组件加载状态
问题场景在大型单页面应用中，处于对性能的考虑和首屏加载速度的要求，我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块，并且只在需要的时候才从服务器加载一个模块。但是这种解决方案也有其问题，当网络环境较差时，我们去首次访问某个路由模块，由于加载该模块的资源需要一定的时间，那么该段时间内，我们的应用就会处于无响应的状态，用户体验极差。解...
2018-09-06 14:53:51
3275
3
原创 nodejs数据mock服务
nodejs数据模拟服务github: https://github.com/fisher-zh/mock功能模拟后端数据返回使用在 mock 文件内的 routes.json 中配置相应的接口数据即可，后续将提供可视化配置界面配置参数"url": "/getName", // 路由地址（必填）"method": "GE...
2018-06-09 22:01:53
3637
2
原创 关于微前端的技术思考
目前微前端的概念已经火了一段时间了，社区也有相对来说比较出名的解决方案，如single-spa、qiankun等。但是关于本篇文章将抛开框架来谈一下对于微前端的思考。微前端的优点微前端为什么能火，当然有其优点，比较突出的主要有以下几点：技术栈无关（很多项目由于历史包袱等原因可能技术栈比较老）独立开发、独立部署（一些大型的项目，动辄几十上百个页面，每次开发跑起来都要很久，同时也可能存在node内存不足的问题。同时，独立的环境能比较业务模块间的互相影响）各业务模块独立，便于升级和重构等微前端的难
2021-10-14 10:46:56
321
原创 前端文件下载常用方法及原理解析
文件下载是前端开发中一个常见的功能，目前主流的下载实现主要有两种：静态文件直接下载和文件流下载直接下载顾名思义，直接下载即通过浏览器的文件策略直接下载文件。通常用于下载静态文件。实现方法常用的方法即使用a标签或者使用js在浏览器中打开Excel、Word等类型的文件链接，浏览器就会帮我们自动下载这些文件。存在问题由于浏览器的策略问题，当文件类型为 pdf 或 jpg 等类型时，浏览器会默认进行预览，即使你设置了 download 属性，大多数浏览器都仍然会执行预览解决方法要想直接下载 pdf
2021-07-16 11:28:02
3103
原创 webpack中img标签的src使用相对路径的方法
简介Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。webpack目前已经是大部分前端项目打包工具的首选，但是在使用的过程中还是存在一些问题。我们下面要讲到的就是常见的
2021-01-11 17:59:27
5422
原创 【面试题】基于promise的并发函数的实现
要求：实现一个 Parallel 函数，可以控制并发任务的数量，实现效果如下function task (ms, name) { return new Promise((resolve, reject) => { setTimeout(_ => { console.log(new Date(), name); resolve(); }, ms) })}console.log('task start-----------', new Date(
2020-11-16 17:25:08
328
原创 理解await的串行与并行
await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function。若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。另外，如果 await 操作符后的表达式的值不是一个 Promise，则返回该值本身。这是mdn上关于await的简介，在日常的业务应用中，如果.
2020-11-13 10:17:57
1051
原创 Express与Koa中间件机制分析（二）
前言在Express与Koa中间件机制分析（一）中我们有提到，Express 为线型模型，而 Koa 则为洋葱型模型，之前我们已经通过解析 connect 的源码对 Express 中间件机制进行了分析，本篇文章我们将对 Koa 的部分源码进行分析以帮助大家来理解其中间件机制。koa1 基于的 co 库，所以 koa1 利用 Generator 来代替回调，而 koa2 由于 node 对 a...
2019-03-28 15:41:00
501
原创 Express与Koa中间件机制分析（一）
提到 Node.js 开发，不得不提目前炙手可热的2大框架 Express 和 Koa。Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。目前使用人数众多。Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、...
2019-03-13 18:02:26
754
原创 js水印生成工具
watermark水印生成工具安装npmnpm install @fisher-zh/watermarkscript<script src="./dist/watermark.min.js"></script>使用WaterMark({ type = 'canvas', container: document.getElement...
2019-02-21 14:33:23
1603
原创 Flutter安装和踩坑指南（windows）
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。开发环境windows10安装Flutter获取Flutter SDK官网下载github直接拉取代码（推荐使用）环境变量配置要在终端运行 f...
2019-01-15 17:51:19
1298
原创 Vue CLI 项目结构及解析
介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service)，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以...
2018-11-15 11:06:35
646
转载 AMD 和 CMD 的区别有哪些？
作者：玉伯链接：https://www.zhihu.com/question/20351507/answer/14859415来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。AMD 规范在这里：https://github.com/amdjs/amdjs-api/wiki/AMDCMD 规范在这里：https://github.com/seajs/seajs...
2018-11-01 19:10:06
206
原创 node.js中exports与module.exports的区别分析
前言关于Node.js中的exports和module.exports，很多时候都比较容易让人混淆，弄不清楚两者间的区别。那么我们就从头开始理清这两者之间的关系。来源在开发Node.js应用的时候，很多模块都是需要引入才能使用，但是为什么exports和module.exports我们没有引用却可以直接使用呢？事实上，Node.js应用在编译的过程中会对JavaScript文件的内容进行头...
2018-10-18 14:54:15
616
原创 基于cnpmjs.org构建企业私有npm库
为什么要搭建？npm——我们大家都知道是NodeJS的包管理工具，用于Node插件的管理包括安装、卸载、管理依赖等。基于npm命令行我们可以快速的安装项目中所依赖的代码模块，甚至可以自己发布一些自己写的插件等。使得我们的项目开发效率得到大大的提升。发布到npm的模块是开源的，我们只能共享大家都能用的开源模块。然而，现如今随着业务越来越复杂，项目迭代速度也越来越快，那么项目间的常用业...
2018-08-30 20:50:30
3674
原创 基于canvas的移动端手写插件
mobile-graphics基于canvas的移动端手写插件github地址：https://github.com/fisher-zh/graphics[https://github.com/fisher-zh/graphics]安装模块化安装npm install mobile-graphics --save直接引入<!-- 直接在 git...
2018-06-09 21:57:29
3490
原创 页面中自适应iframe高度的问题总结
当需要对iframe进行操作，例如获取iframe的高度等，iframe和当前页面需要时同域，跨域情况下是获取不到的；当动态设置iframe的高度时，iframe的高度一旦变大是不会自动缩小的。 例如： iframe中 a 页面高度为800px，b 页面的高度为500px ，你获取到的iframe高度只会是 800px 反之，a 为 500px，b 为800px，那么从 a 跳转到 b ...
2018-05-21 16:38:49
2931
转载 深入浅出Vue基于“依赖收集”的响应式原理
原文地址： https://zhuanlan.zhihu.com/p/29318017每当问到VueJS响应式原理，大家可能都会脱口而出“Vue通过Object.defineProperty方法把data对象的全部属性转化成getter/setter，当属性被访问或修改时通知变化”。然而，其内部深层的响应式原理可能很多人都没有完全理解，网络上关于其响应式原理的文章质量也是参差不齐，大多是贴个
2018-01-30 16:48:23
586
1
原创 JavaScript节流函数
var throttle = function(fn, delay, mustRunDelay){ var timer = null; var start; // 这里是利用一个闭包来保存变量，避免污染全局变量 return function(){ var context = this, args = arguments,
2017-10-29 21:21:57
646
原创 JavaScript正则表达式
// 邮箱const emailReg = /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])/// 手机const phoneReg = /^1[34578]\d{9}$/// 身份证号(只验证位数和是否是数字)const idReg = /^\d{18}$|^\d{17}(\d|X|x))$/// 6-20位数字和字符con
2017-10-18 20:45:29
449
原创 vue.js学习笔记（七）--插件
在日常的项目中，如果我们需要频繁的使用某些功能，那么最好的办法就是将这个功能封装成函数来使用。在vue中，我们同样也会经常将常用的组件分离出来，这样既便于我们的使用，同时也便于之后的维护。同样，当某个组件在许多项目中都要频繁的使用，那么我们可以将其写成一个插件，vue官方的文档中也有简单的介绍插件的开发和使用方法
2017-10-14 20:54:26
520
原创 webpack 构建多页面应用（以regularjs为例）
webpack-regular github源码： https://github.com/fisher-zh/webpack-regular基于webpack构建的多页面网站开发环境。webpack在前端开发的过程中逐渐扮演着越来越重要的角色，在使用vuejs开发单页面应用的过程中，个人是倾向于直接使用vue-cli来搭建初期的环境，毕竟方便。但是在做一些需要兼容老版本浏览器（如IE7、8）的
2017-10-10 22:51:34
1144
原创 前端跨域时的post与get问题
问题：在前端跨域时如果使用post提交会被自动转为get方式，这是因为跨域所使用的数据格式为jsonp。 解决办法：不使用jsonp，其他方法稍后更新
2017-09-11 21:03:39
1818
原创 vue.js学习笔记（六）--利用v-model实现父子组件间的双向通信
作者：张飞翔 博客：https://fisher-zh.github.io/在Vue中，我们可以使用prop属性来进行父子组件间的通信，在之前的文章Vue踩坑之路–父子组件通信总结中有介绍过。 但是prop 是单向绑定的，我们无法在组件中直接修改prop传递的属性。 prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态
2017-08-05 15:47:03
6558
2
原创 vue.js学习笔记（五）--axios中取消请求
在平时的开发过程中，我们会经常遇到菜单切换的问题，在一些切换频率较低的情况下，在切换到另一个页面的时候，上一个页面基本没有未完成的异步请求，即时有，在一些情况下也是可以忽略的。但是，在一些切换频率较高的页面中，如果我们不处理这些未完成的请求，那么这些请求会极大的影响页面的性能，甚至导致之后的请求超时。
2017-07-25 22:07:39
31875
2
原创 vue.js学习笔记（四）--变化检测问题
Vue追踪变化是通过把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
2017-07-24 22:35:47
531
原创 vue.js学习笔记（三）--父子组件通信总结
在使用Vue的过程中，如果需要进行父子组件间的通信，通过查阅官方文档 我们可以了解到只需要在子组件要显式地用 props选项声明它期待获得的数据，同时在其使用过程中传入相应的数据即可
2017-07-24 22:31:32
459
原创 禁用浏览器滚动事件（不隐藏其滚动条）
function unScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable', function(e) { $(document).scrollTop(top); })},function reScroll() { $(document).off('scr
2017-05-19 23:21:10
5249
1
原创 vue.js学习笔记（一）
vue.js学习笔记（一）最近在通过vue.js的官网学习其框架，我将会把我在学习过程中遇到的错误和自己的收货分享出来，希望与大家共勉。
2016-12-26 21:52:32
13398
1
原创 关于chrome中使用12px以下字号的问题
chrome浏览器中规定的最小字号是12px，当你设置为12px以及12px以下的字号时，那么浏览器显示的都是12px的字体。有时候我们需要12px以下的字体怎么办呢？那么下面的方法就有用武之地了。font-size: 12px;transform: scale(0.5);transform-origin: 0% 0%;使用css3中的缩放来进行更小字体的显示。写在最后：就我个人来
2016-12-13 22:25:02
475
原创 前端效率优化之数组去重
方法一：遍历数组，建立新数组，利用indexOf判断是否存在于新数组中，不存在则push到新数组，最后返回新数组function removeDuplicatedItem(ar) { var ret = []; for (var i = 0, j = ar.length; i < j; i++) { if (ret.indexOf(ar[i]) === -1...
2016-12-08 22:09:52
1682
转载 前端优化之路
前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ? 1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。 2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
2016-11-22 22:48:33
404
原创 javascript中的获取URL中指定的查询字符串
function getSearchString(key) { // 获取URL中?之后的字符 var str = location.search; str = str.substring(1,str.length); // 以&分隔字符串，获得类似name=123这样的元素数组 var arr = str.split("&"); var
2016-11-22 21:16:32
2796
2
原创 jQuery选择器
jQuery 选择器选择器实例选取*$("*")所有元素#id$("#lastname")id="lastname" 的元素.class$(".intro")所有 class="intro" 的元素element$("p")所有
2016-11-01 19:50:26
283
原创 javascript实现动画的联动
最近在做一个网站的时候用到了图片联动的效果，然后觉得不错，就把其中图片联动的部分copy出来分享一下，其中包含图片的左右滚动，自定义滚动条，滚动条控制图片的滚动。html部分： javascript实现动画的联动
2016-11-01 15:03:33
604
转载 javascript本地对象、内置对象、宿主对象和自定义对象
1. 本地对象 ECMA-262把本地对象（native object）定义为“独立于宿主环境的ECMAScript实现提供的对象”。 此处的宿主环境，简单来说就是用户的机器环境，包括操作系统和浏览器。 本地对象包括如下内容：Object、Function、String、Array、Boolean、Number、Date、 RegExp、Error、E
2016-10-20 18:56:13
1897
原创 AJAX实现瀑布流布局
瀑布流是当前一种比较流行的网站界面布局方式，参差不齐的多栏布局以及到达底部自动加载的方式，使网站在视觉和用户体验上都能得到较大的提升。最早使用此布局的是国外的图片网站Pinterest，之后国内的一些图片网站也开始使用瀑布流布局，包括和Pinterest类似的花瓣网、图片社区lofter、美丽说、蘑菇街等等。瀑布流在布局上对于大多数人来说应该是很简单的，比较只有几列而已。瀑布流最主要的还是数据...
2016-10-18 16:37:14
6025
2
原创 Ajax工作原理以及函数的简单封装
什么是AJAX？AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。AJAX运用的意义?新浪微博、百度地图、股票信息的显示、网站登录验证码等等这些都应用到了ajax技术
2016-10-17 15:57:29
1459
原创 javascript滚轮控制模拟滚动条
此实例通过对滚轮事件的监听，通过滚轮控制滚动条的上下移动，可以将其修改后运用与使用滚轮缩放图片、改变透明度等特效。 *{ margin: 0; padding: 0; } #boxwrap{ position: relative; width: 15px; height: 500px; margin: 5
2016-10-14 14:41:01
1623
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人