fisher

目前微前端的概念已经火了一段时间了，社区也有相对来说比较出名的解决方案，如single-spa、qiankun等。但是关于本篇文章将抛开框架来谈一下对于微前端的思考。微前端的优点微前端为什么能火，当然有其优点，比较突出的主要有以下几点：技术栈无关（很多项目由于历史包袱等原因可能技术栈比较老）独立开发、独立部署（一些大型的项目，动辄几十上百个页面，每次开发跑起来都要很久，同时也可能存在node内存不足的问题。同时，独立的环境能比较业务模块间的互相影响）各业务模块独立，便于升级和重构等微前端的难

文件下载是前端开发中一个常见的功能，目前主流的下载实现主要有两种：静态文件直接下载和文件流下载直接下载顾名思义，直接下载即通过浏览器的文件策略直接下载文件。通常用于下载静态文件。实现方法常用的方法即使用a标签或者使用js在浏览器中打开Excel、Word等类型的文件链接，浏览器就会帮我们自动下载这些文件。存在问题由于浏览器的策略问题，当文件类型为 pdf 或 jpg 等类型时，浏览器会默认进行预览，即使你设置了 download 属性，大多数浏览器都仍然会执行预览解决方法要想直接下载 pdf

简介Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。webpack目前已经是大部分前端项目打包工具的首选，但是在使用的过程中还是存在一些问题。我们下面要讲到的就是常见的

要求：实现一个 Parallel 函数，可以控制并发任务的数量，实现效果如下function task (ms, name) { return new Promise((resolve, reject) => { setTimeout(_ => { console.log(new Date(), name); resolve(); }, ms) })}console.log('task start-----------', new Date(

await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function。若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。另外，如果 await 操作符后的表达式的值不是一个 Promise，则返回该值本身。这是mdn上关于await的简介，在日常的业务应用中，如果.

var throttle = function(fn, delay, mustRunDelay){ var timer = null; var start; // 这里是利用一个闭包来保存变量，避免污染全局变量 return function(){ var context = this, args = arguments,

// 邮箱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

原文地址： https://zhuanlan.zhihu.com/p/29318017每当问到VueJS响应式原理，大家可能都会脱口而出“Vue通过Object.defineProperty方法把data对象的全部属性转化成getter/setter，当属性被访问或修改时通知变化”。然而，其内部深层的响应式原理可能很多人都没有完全理解，网络上关于其响应式原理的文章质量也是参差不齐，大多是贴个

在日常的项目中，如果我们需要频繁的使用某些功能，那么最好的办法就是将这个功能封装成函数来使用。在vue中，我们同样也会经常将常用的组件分离出来，这样既便于我们的使用，同时也便于之后的维护。同样，当某个组件在许多项目中都要频繁的使用，那么我们可以将其写成一个插件，vue官方的文档中也有简单的介绍插件的开发和使用方法

当需要对iframe进行操作，例如获取iframe的高度等，iframe和当前页面需要时同域，跨域情况下是获取不到的；当动态设置iframe的高度时，iframe的高度一旦变大是不会自动缩小的。 例如： iframe中 a 页面高度为800px，b 页面的高度为500px ，你获取到的iframe高度只会是 800px 反之，a 为 500px，b 为800px，那么从 a 跳转到 b ...

mobile-graphics基于canvas的移动端手写插件github地址：https://github.com/fisher-zh/graphics[https://github.com/fisher-zh/graphics]安装模块化安装npm install mobile-graphics --save直接引入<!-- 直接在 git...

nodejs数据模拟服务github: https://github.com/fisher-zh/mock功能模拟后端数据返回使用在 mock 文件内的 routes.json 中配置相应的接口数据即可，后续将提供可视化配置界面配置参数"url": "/getName", // 路由地址（必填）"method": "GE...

问题场景在大型单页面应用中，处于对性能的考虑和首屏加载速度的要求，我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块，并且只在需要的时候才从服务器加载一个模块。但是这种解决方案也有其问题，当网络环境较差时，我们去首次访问某个路由模块，由于加载该模块的资源需要一定的时间，那么该段时间内，我们的应用就会处于无响应的状态，用户体验极差。解...

前言关于Node.js中的exports和module.exports，很多时候都比较容易让人混淆，弄不清楚两者间的区别。那么我们就从头开始理清这两者之间的关系。来源在开发Node.js应用的时候，很多模块都是需要引入才能使用，但是为什么exports和module.exports我们没有引用却可以直接使用呢？事实上，Node.js应用在编译的过程中会对JavaScript文件的内容进行头...

作者：玉伯链接：https://www.zhihu.com/question/20351507/answer/14859415来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。AMD 规范在这里：https://github.com/amdjs/amdjs-api/wiki/AMDCMD 规范在这里：https://github.com/seajs/seajs...

watermark水印生成工具安装npmnpm install @fisher-zh/watermarkscript<script src="./dist/watermark.min.js"></script>使用WaterMark({ type = 'canvas', container: document.getElement...

webpack-regular github源码： https://github.com/fisher-zh/webpack-regular基于webpack构建的多页面网站开发环境。webpack在前端开发的过程中逐渐扮演着越来越重要的角色，在使用vuejs开发单页面应用的过程中，个人是倾向于直接使用vue-cli来搭建初期的环境，毕竟方便。但是在做一些需要兼容老版本浏览器（如IE7、8）的

function unScroll() { var top = $(document).scrollTop(); $(document).on('scroll.unable', function(e) { $(document).scrollTop(top); })},function reScroll() { $(document).off('scr

在平时的使用过程中，发现使用float类型在进行计算的时候，有些数字在进行计算后，小数点后面的位数明显变多，并且最后一位不为零，和正常的计算结果产生了误差。首先看一下我的代码。 求和 function add(){ var a1 = document.getElementById('add1').value; var

关于网页中的动画，在css3中我们已经可以使用一些属性快速的做出来，但是有时候为了浏览器的兼容性我们还是需要使用js来制作网页中的动画。使用js做动画最重要的一个函数就是setInterval函数，这里不再赘述，不懂可以直接百度用法。本文主要讲动画的原理已经在制作过程中的要点。老规矩，先上代码，能直接看懂的可以节省时间。html部分： move

现在很多javascript的插件都可以实现图片轮播的功能，这篇文章，主要是通过这个domo来解析javascript图片轮播的原理。老规矩，先上代码。至于代码中的图片，随便找三张即可，最核心的还是理解其思想。html： 滚动图

工欲善其事，必先利其器。要想实现某一个模块的功能，我们必须要知道他的原理。放大镜的功能就是通过获取鼠标在小图中的位置，然后根据大小图的尺寸比例换算出大图需要显示的部分，然后使用定位让大图要显示的部分出现在右边的边框内。

此实例通过对滚轮事件的监听，通过滚轮控制滚动条的上下移动，可以将其修改后运用与使用滚轮缩放图片、改变透明度等特效。 *{ margin: 0; padding: 0; } #boxwrap{ position: relative; width: 15px; height: 500px; margin: 5

在javascript中函数的声明方法有两种：function func (){ alert("hello,world");}var func =new Function (alert("hello,world"));var func = function(){ alert("hello,world");}第一种属于声明式函数，而第二种称为函数构造函数又

由于html是从上至下加载的，通常我们如果在head部分引入javascript文件，那么我们都会在javascript的开头添加window.onload事件，防止在文档问加载完成时进行DOM操作所出现的错误。如果有多个javascript文件，那么极有可能出现多个window.onload事件，但是最后起作用的只有一个，这时候就需要使用事件绑定来解决这个问题了。IE方式attachEv

阻止冒泡。冒泡简单的举例来说，儿子知道了一个秘密消息，它告诉了爸爸，爸爸知道了又告诉了爷爷，一级级传递从而引起事件的混乱，而阻止冒泡就是不让儿子告诉爸爸，爸爸自然不会告诉爷爷了。下面的domo就是很好的例子。 #box{ width: 300px; height: 300px; background: red;

在开发的过程中，我们要做淡入淡出效果的话，我们完全可以使用jQuery的fadeTo()方法。但是我们的目的不只是会用，而是理解程序底层的逻辑。这篇文章主要就是利用原生的javascript实现淡入淡出的效果。构建框架，基本没难度。 透明度函数的封装 #box{ width: 200px; height: 200px; backgroun

原理比较简单，可以参照之前的文章javascript淘宝主图放大镜功能帮助理解。 *{ margin: 0; padding: 0; } #box{ position: absolute; left: 50px; top: 50px; width: 200px; height: 200px;

获取非行间样式的函数封装

1、javascript是单线程的，当你使用setInterval函数的时候并不是真正暂停，而是先挂起这个事件，继续执行下面的事件，而当这个事件要执行时，如果浏览器当前没有任务，那么它会立马执行，但是如果浏览器有任务，那么就会有一定的延迟。JavaScript 运行机制详解：再谈Event Loop2、在IE下当我想在img标签上层显示一个div元素时，此时如果该div的background为

最近在做一个网站的时候用到了图片联动的效果，然后觉得不错，就把其中图片联动的部分copy出来分享一下，其中包含图片的左右滚动，自定义滚动条，滚动条控制图片的滚动。html部分： javascript实现动画的联动

function getSearchString(key) { // 获取URL中?之后的字符 var str = location.search; str = str.substring(1,str.length); // 以&分隔字符串，获得类似name=123这样的元素数组 var arr = str.split("&"); var

方法一：遍历数组，建立新数组，利用indexOf判断是否存在于新数组中，不存在则push到新数组，最后返回新数组function removeDuplicatedItem(ar) { var ret = []; for (var i = 0, j = ar.length; i < j; i++) { if (ret.indexOf(ar[i]) === -1...

关于style.width/height和offsetWidth/height，他们都可以返回对象的宽度，但是两者又有很大的区别。总结：1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。2.offsetWidth属性仅是可读属性，而style.width是可读写的。3.offset