前端
SaiwenOutMan
404notFound
展开
-
JavaScript 闭包机制的详解
js的闭包是老生常谈的问题了,网上大部分的解释都不是特别易懂。在我看来,解决一个碰到的问题有两个思路:一是找到解决这个问题的方法。二是尝试从根源上去解析这个问题,以避免被其他类似的问题困扰。下面我说说第一种思路。 咱们先看一个简单的例子:var arr=[];function eg(){ for (var i= 0;i<3;i=i+1){ arr[i]=function(原创 2020-04-08 21:30:26 · 1452 阅读 · 2 评论 -
Karma 自动化测试框架搭建文档
一.前言此文档为前端自动化单元测试框架 Karma 的搭建以及使用文档。二.准备环境先列出我们此次搭建测试框架 Karma 必须的环境和包。 1. node.js (node 引擎) 2. npm (node 包管理器) 3. cnpm(可选) (淘宝镜像) 4. karma (提供 web 服务和浏览器适配) 5. mocha (单元测试框架) 6. chai (断言...原创 2020-04-08 21:27:41 · 1207 阅读 · 0 评论 -
TopTal 进阶 JavaScript 面试题
原网址:37 Essential JavaScript Interview Questions 以下为我对这37个题目的翻译和解答,其中小部分题目的解答是我认为官方解答的很合适,也无需更为深入的挖掘,会直接翻译官方的回答;大部分题目的解答都是我对题中涉及到的知识点更深入的挖掘做出的解释。1.当你使用typeof bar === 'object' 来确定 bar 是否是 object 时,这其中...原创 2020-04-08 21:25:10 · 1131 阅读 · 0 评论 -
原生JS实现并封装前端路由
目前,前端中所有的MVVM框架中基本都有自己的Router组件,比如React-router或者Vue-router,主要的作用就是通过拦截url来返回相应的组件。如果我们通过原生js来实现一个类似的router,应该怎么做呢?本文将提供一个思路和完整demo,以解释其中的原理。一.效果图二.代码示例<!DOCTYPE html><html lang="en"&g...原创 2020-04-08 21:26:43 · 1963 阅读 · 0 评论 -
Fetch漫游指南--篇2
大家好,由于最近比较忙,直到今天我才时间写第二篇关于fetch的介绍。今天我将继续为大家介绍Fetch API,现在我先大概列出我们接下来会看到的内容:response对象;自定义request()对象;fetch的异常处理;fetch的兼容实现方案;fetch目前的不足;一.Response对象Fetch API 的Response接口呈现了对一次请求的响应数据,Respon...原创 2020-04-08 21:26:58 · 719 阅读 · 0 评论 -
Fetch漫游指南--篇1
一.什么是Ftech“Fetch API提供了一个JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。”简单来说,在前一阶段,我们通常是使用ajax之类的基于XMLHttpRequest来进行发送各种http网络请求,但是由于XHR其自身的局限性,导致在其基础上封装的原生a...原创 2020-04-08 21:27:13 · 452 阅读 · 1 评论 -
JavaScript禁止鼠标右键点击的浏览器后退事件(兼容IE9及以上)
提到禁止浏览器的后退行为,就不得不提到history这个api.而HTML5中中新引入的pushState()和 replaceState()方法。 现在你打开百度,搜索“js实现禁止浏览器后退功能”,你会看到一大片解决方案,当然也有所谓的“终极方案”,类似下面这种:&amp;amp;amp;lt;script language=&amp;amp;quot;javascript&amp;amp;quot;&amp;amp;amp;g原创 2018-07-10 14:22:50 · 1842 阅读 · 0 评论 -
自定义Echarts折线图中悬浮框的位置
在Echarts3的折线图的使用过程中,想使初始化出来的图表更人性化,就比如说有这么个需求,在Echarts折线图中,鼠标悬浮在左侧某一个点时,悬浮框悬停在点的右侧;鼠标悬停在右侧某一个点时,悬浮框悬停在点的左侧。下面是具体实现思路: 首先明确一点,我们需要借助tooltip.position属性。理想的思路是我们在回调函数中获取鼠标每次悬停的坐标,然后再判断这个坐标是否处于此容器(...原创 2018-08-31 17:48:28 · 10658 阅读 · 0 评论 -
JavaScript this探究
关于javascript的this讲解的文章已经多如牛毛了,我本人在开发过程中也用到过很多次。这次趁有空,整理一下关于this的一系列问题:包括this的指向,严格模式和非严格模式下的区别,什么情况下可以改变this的指向以及在ES6下箭头函数中this的指向。一.严格模式下this的指向严格模式下:function aa(){ 'use strict'; c...原创 2020-04-08 21:29:31 · 252 阅读 · 0 评论 -
JavaScript事件委托机制与this的比较
很多时候我们在完成交互时,页面的一些dom结构是根据后台传输过来的数据动态加载的,如果说我们需要给这些数量比较大的dom结构(比如说表格,或则ul&amp;amp;gt;li)添加click或则hover事件时,手写/遍历生成元素内的onclick函数式不可取的,会大量的消耗浏览器内存,降低程序的性能。所以,采用事件委托机制或this就来替代就显得很有必要了。一.什么是事件委托机制简单来说,就是借助e...原创 2020-04-08 21:29:20 · 206 阅读 · 0 评论 -
JavaScript判断浏览器向上或者向下滚动
/*** * 监听滚动事件,判断滚动方向 * ***/ var Before_scollH = 0; $(window).on('scroll', function () { var After_scollH = $(window).scrollTop(); var differH = After_scollH - Bef...原创 2019-03-07 09:40:37 · 3390 阅读 · 0 评论 -
SVG基本图形的创建和动画详解——1
一.引言 SVG全称为“Scalable Vector Graphics”,意为可缩放矢量图形。而什么是矢量图?矢量就是向量,所以矢量图就意味着无限缩放而不改变图片的质量。 多说无益,下面放MDN上关于SVG的定义: SVG是XML语言的一种形式,有点类似XHTML,它可以用来绘制矢量图形,例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形,也可以修改已有的位图...原创 2020-04-08 21:29:42 · 1449 阅读 · 0 评论 -
UI recorder 自动化UI测试框架使用手册
一.前言此文档为前端自动化UI测试框架 UI recorder 的搭建以及使用文档。二.准备环境我们需要准备以下环境,安装顺序没有先后,环境之间相互无依赖:安装 java jdk(需要jdk 1.8及以上),并配置相应的环境变量。安装 node.js 和 npm。配置 npm 国内镜像 cnpm。2.1 安装 java jdk打开 java官网,找到你系统对应的jdk版本,点...原创 2020-04-08 21:27:24 · 2277 阅读 · 0 评论