SaiwenOutMan-CSDN博客

原创 Fetch漫游指南--篇1

一.什么是Ftech“Fetch API提供了一个JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。”简单来说，在前一阶段，我们通常是使用ajax之类的基于XMLHttpRequest来进行发送各种http网络请求，但是由于XHR其自身的局限性,导致在其基础上封装的原生a...

2020-04-08 21:27:13 401 1

原创 Fetch漫游指南--篇2

大家好，由于最近比较忙，直到今天我才时间写第二篇关于fetch的介绍。今天我将继续为大家介绍Fetch API，现在我先大概列出我们接下来会看到的内容：response对象;自定义request()对象;fetch的异常处理;fetch的兼容实现方案;fetch目前的不足；一.Response对象Fetch API 的Response接口呈现了对一次请求的响应数据，Respon...

2020-04-08 21:26:58 670

原创原生JS实现并封装前端路由

目前，前端中所有的MVVM框架中基本都有自己的Router组件，比如React-router或者Vue-router,主要的作用就是通过拦截url来返回相应的组件。如果我们通过原生js来实现一个类似的router，应该怎么做呢？本文将提供一个思路和完整demo，以解释其中的原理。一.效果图二.代码示例<!DOCTYPE html><html lang="en"&g...

2020-04-08 21:26:43 1941

一.前言js中数组去重是老生常谈的问题，之所以是老生常谈，是因为这东西在平常的业务场景中挺常见的，是刚需；其次在面试中面试者也喜欢问，基本上是希望你能回答的越多越好，今天趁这个机会我正好捋一捋思路，把这块整理一下。要说在前面的是，不同的业务场景决定不同的技术手段，也不存在一招通吃的函数或者算法。而且，大家一定不要被‘优雅’这两个字所桎梏，在业务中，能解决问题的办法，就是好办法；能解决问题的办法...

2020-04-08 21:26:24 243

原创 JavaScript 中神奇的加法（隐式类型转换）

一般来说，加减法应该是我们学习生涯中接触到的第一个运算符，通常意义下它也是最简单的运算符。在程序语言中，加减法的情况一般也比较简单，但是在 JavaScript 中加法的情况却比较奇怪，因为它有着大量特殊的情况。我们举个简单的例子：1 + '1' = '11'; 1 + 'a' = '1a';1 + [] = '';从基础数据类型的加法开始，我们得到的结果就变的奇怪了起来。究其根...

2020-04-08 21:26:06 1070 1

原创 JavaScript 中的浅拷贝和深拷贝

一.前言每一个前端的 JavaScript 之路不一定是由《JavaScript 高级程序设计》开启的，但是每一位前端都一定被“按值传递”和“按引用传递”这两个概念坑过。现在你我应该都很清楚，在 JavaScript 中的object类型是按引用传递的，但是在函数参数中，所有参数都是按值传递的。我们今天要谈的东西，就起源于object型数据的复制与再操作，简单来说，就是我们今天的主题：对象的浅...

2020-04-08 21:25:36 307

原创 TopTal 进阶 JavaScript 面试题

原网址：37 Essential JavaScript Interview Questions 以下为我对这37个题目的翻译和解答，其中小部分题目的解答是我认为官方解答的很合适，也无需更为深入的挖掘，会直接翻译官方的回答；大部分题目的解答都是我对题中涉及到的知识点更深入的挖掘做出的解释。1.当你使用typeof bar === 'object' 来确定 bar 是否是 object 时，这其中...

2020-04-08 21:25:10 1077

原创从 Promise 来看 JavaScript 的异步处理

一.前言在早期 JavaScript 的 ES5 语法中，多层函数的回调嵌套是一件让人很头疼的事儿，行内黑话一般称之为回调地狱。可能有些伙计还没遇到过此类业务场景，但是没关系，只要在前端圈里混，苍天会绕过谁呢？所以为了大家，我就举个特别常见的业务场景：有三个接口，分别为 URL-A, URL-B, URL-C (都是 get 请求)，我们需要分别向这三个接口请求获取数据。请求 URL-...

2020-04-08 21:24:33 203

原创 JavaScript 闭包机制的详解

js的闭包是老生常谈的问题了，网上大部分的解释都不是特别易懂。在我看来，解决一个碰到的问题有两个思路：一是找到解决这个问题的方法。二是尝试从根源上去解析这个问题，以避免被其他类似的问题困扰。下面我说说第一种思路。咱们先看一个简单的例子：var arr=[];function eg(){ for (var i= 0;i&lt;3;i=i+1){ arr[i]=function(

2020-04-08 21:30:26 1424 2

原创从如何优雅的将类数组对象转化为数组谈起

从如何优雅的将类数组对象转化为数组谈起今日研读阮老师的ES6标准入门，读到函数的扩展方法时看到这么一段代码：let arrayList = { &amp;amp;amp;amp;amp;quot;0&amp;amp;amp;amp;amp;quot;:&amp;amp;amp;amp;amp;quot;a&amp;amp;amp;amp;amp;quot;, &amp;amp;amp;

2020-04-08 21:30:03 1187

原创从JavaScript的垃圾回收机制谈起

javascript垃圾回收机制大家肯定都有所了解。网上大部分的文章也都是在讲引用计数算法和垃圾回收算法的原理以及这两者之间的区别。今天咱们不提这个，咱们只提关于老垃圾回收算法和新垃圾回收算法的演变。一.旧的javascript垃圾回收算法：我们以V8引擎为划分线。v8之前的浏览器的垃圾回收算法大概有三类： 1.引用计数（Reference Counting）算法（低版本ie下使用...

2020-04-08 21:29:53 304

原创 SVG基本图形的创建和动画详解——1

一.引言　　SVG全称为“Scalable Vector Graphics”，意为可缩放矢量图形。而什么是矢量图？矢量就是向量，所以矢量图就意味着无限缩放而不改变图片的质量。　　多说无益，下面放MDN上关于SVG的定义： SVG是XML语言的一种形式，有点类似XHTML，它可以用来绘制矢量图形，例如右面展示的图形。SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图...

2020-04-08 21:29:42 1400

原创 JavaScript this探究

　　关于javascript的this讲解的文章已经多如牛毛了，我本人在开发过程中也用到过很多次。这次趁有空，整理一下关于this的一系列问题：包括this的指向，严格模式和非严格模式下的区别，什么情况下可以改变this的指向以及在ES6下箭头函数中this的指向。一.严格模式下this的指向严格模式下：function aa(){ 'use strict'; c...

2020-04-08 21:29:31 239

原创 JavaScript事件委托机制与this的比较

　　很多时候我们在完成交互时，页面的一些dom结构是根据后台传输过来的数据动态加载的，如果说我们需要给这些数量比较大的dom结构（比如说表格，或则ul&amp;amp;gt;li）添加click或则hover事件时，手写/遍历生成元素内的onclick函数式不可取的，会大量的消耗浏览器内存，降低程序的性能。所以，采用事件委托机制或this就来替代就显得很有必要了。一.什么是事件委托机制简单来说，就是借助e...

2020-04-08 21:29:20 186

原创 D3.js实现带动画效果的柱状图

&amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;zh-cn&amp;amp;amp;quot;&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;head&amp;amp;amp;amp;g

2020-04-08 21:28:54 3872

原创 D3.js创建力导向图(V4)附带详细的参数说明

一.代码示例&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;zh-cn&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;

2020-04-08 21:28:42 3311 3

原创魔改echarts生成类环形散点图，附带随机数据的组装

我们先看效果图，如下图所示：接下来是代码部分，首先准备一个容器： &lt;div class="col-sm-12 chart" id="backImage"&gt; &lt;div id="monitor-rada" class="rada"&gt;&lt;/div&

2020-04-08 21:28:31 1765

原创 D3.js制作带悬浮提示框的渐变色中国地图（使用node.js提供服务）

一.效果图使用D3来制作中国地图主要有几个地方需要注意：需要用到投影函数，并挂在在路径生成器上。由于同源策略限制的原因，需要通过服务器来返回地图文件，比如china.json这种。如果需要做渐变色渲染或者显示标注，需要额外的数据，并通过服务器返回。要区分开topojson和geojson两种格式的数据的不同，他们的加载模式也有所不同，相对于geojson数据，topojson文件更...

2020-04-08 21:28:18 2007

原创前后端分离下的前端架构选型

一.主要目标1.前后端解耦。前端主要任务是讲原有页面中的jinja2模板内容给替换，采用纯粹的javascript模板引擎。2.前后端分离。前端拥有自己的静态资源服务器和路由，负责静态文件的转发和html页面的返回。二.几种技术选型方案选型方案，将从重构成本，人员成本(即学习成本)，部署难度等几方面考虑。方案一： art-template（用于html文件解耦） + node.js(ex...

2020-04-08 21:28:04 1864

原创 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 1169

原创 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 2147

原创下拉框Ztree的实现

效果图：首页得有一个盛放伪下拉框的input输入框，然后在input下面放一个div层盛放Ztree，默认隐藏，在点击input时再调出来。看代码。 <table style="width:100%"> <tr> <td style="position:relativ...

2019-03-07 09:41:17 4909 1

原创 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 3351

原创 async和await改写node.js的读取文件函数

const fs = require('fs');const path = require('path');function getFile() { return new Promise((resolve, reject) =&gt; { const filePath = path.resolve(path.join(__dirname, '../public/ima...

2019-03-07 09:39:49 934 1

原创关于HTTP中formData和Request Payload的区别

在http的请求中，formData和request Payload常出现于POST请求中，比如正常的ajax post请求中：$.ajax({ url:'/index', type:'post', dataType:'json', data:{ name:'acc', age:13 }, success:res =...

2018-11-26 12:02:28 3308 1

原创 node.js将异步的遍历文件目录改成同步

我们都知道，如果想读取某一目录下的文件时，需使用fs.readdir来进行，看如下代码:function getFileList(filePath){ fs.readdir(filePath, (err, files)=&gt; { var listArr = []; files.forEach(filename =&gt; { listArr.push(filename)...

2018-11-15 14:31:30 2254 2

原创 node.js 实现简单的文件上传功能

本文主要采用node express框架实现,模板引擎用的是EJS这是app.js文件const express = require('express');const cookieParser = require('cookie-parser');const sessionParser = require('cookie-session');const consolidate = req...

2018-10-26 14:25:44 758

原创自定义Echarts折线图中悬浮框的位置

　　在Echarts3的折线图的使用过程中，想使初始化出来的图表更人性化，就比如说有这么个需求，在Echarts折线图中，鼠标悬浮在左侧某一个点时，悬浮框悬停在点的右侧；鼠标悬停在右侧某一个点时，悬浮框悬停在点的左侧。下面是具体实现思路：　　首先明确一点，我们需要借助tooltip.position属性。理想的思路是我们在回调函数中获取鼠标每次悬停的坐标，然后再判断这个坐标是否处于此容器(...

2018-08-31 17:48:28 10538

原创 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 1794

转载 JavaScript对象之扩展，密封和冻结特性

扩展特性 Object.isExtensible 方法Object.preventExtensions 方法密封特性 Object.isSealed 方法Object.seal 方法冻结特性 Object.isFrozen 方法Object.freeze 方法浅冻结和深冻结扩展特性如果一个对象是可以添加属性的，那么它就是可扩展的。Object.isEx...

2018-03-22 10:08:12 276

原创 JavaScript 多位数字每隔三位加一个逗号

//每隔三位小数加逗号function add_comma_toThousands(num) { var num = (num || 0).toString(); var result = ''; while (num.length > 3) { result = ',' + num.slice(-3) + result; num ...

2018-01-20 14:40:18 6274

原创 Echarts饼图将数据显示在 legend旁边

var client_patch_config_option = { title: { text: '' }, color:['#FE7E00','#FEC400','#22DACE'], tooltip: {}, legend: { x : '46%', y : '28%', orient :

2018-01-20 14:13:15 36728 11

原创 Echarts 饼图，折线图，柱状图，条形图ajax动态渲染数据方法汇总

Echarts的各种图表渲染方法其实速途同归，你对照着官网的demo里的数据格式，设置好回传数据的接受格式就行，下面看各个demo。一.Echarts折线图function getIndex(URL) { $.ajax({ dataType: "json", type: "GET", url: URL,

2018-01-20 11:38:55 5699

原创 iframe设置锚点来解决刷新时跳转到其他页面和点击动态生成的菜单栏让其高亮的思路

我们在使用iframe时，一般是很多子页面共用一个菜单栏，然后点击不同菜单切换到不同的子页面，但是当你刷新时可能会碰到跳转到其他页面的情况，这个时候就需要设置锚点来解决。另外，我们还需要解决点击菜单栏让它处于高亮的选中状态。并且在设置锚之后，还要处理如何在页面刷新后，让动态生成的菜单仍旧处于被选中的状态。我们看代码。先设置锚点/设置锚点function setAnchor(url){

2017-12-28 20:52:31 1607

原创对jQuery ajax jsonp的理解和使用实例

目前主流的前端跨域请求方式有两种，一种是XHR2 CORS，也就是在服务端填上响应头： header(“Access-Control-Allow-Origin:*”); /星号表示所有的域都可以接受，/ header(“Access-Control-Allow-Methods:GET,POST”);CORS不支持ie10以下。但是第二种是更加方便的就是jsop了，jsop有很多种实现方式，除了

2017-12-21 10:09:55 4763

原创 Echarts折线图的实例

使用eharts图表一共三步。第一步是创建两个js文件。一个用来设置图表格式，一个用来使用ajax渲染数据。第一步，创建设置图表格式的js文件/*设置格式*/var configuration_option = { tooltip: { formatter:'{a0}: {c0}'+'个病毒' }, color: [], legend

2017-12-16 15:48:32 4753

Eiwen的博客