javascript
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 · 1441 阅读 · 2 评论 -
D3.js制作带悬浮提示框的渐变色中国地图(使用node.js提供服务)
一.效果图 使用D3来制作中国地图主要有几个地方需要注意:需要用到投影函数,并挂在在路径生成器上。由于同源策略限制的原因,需要通过服务器来返回地图文件,比如china.json这种。如果需要做渐变色渲染或者显示标注,需要额外的数据,并通过服务器返回。要区分开topojson和geojson两种格式的数据的不同,他们的加载模式也有所不同,相对于geojson数据,topojson文件更...原创 2020-04-08 21:28:18 · 2061 阅读 · 0 评论 -
魔改echarts生成类环形散点图,附带随机数据的组装
我们先看效果图,如下图所示:接下来是代码部分,首先准备一个容器: <div class="col-sm-12 chart" id="backImage"> <div id="monitor-rada" class="rada"></div&原创 2020-04-08 21:28:31 · 1806 阅读 · 0 评论 -
D3.js创建力导向图(V4)附带详细的参数说明
一.代码示例<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8">原创 2020-04-08 21:28:42 · 3386 阅读 · 3 评论 -
Fetch漫游指南--篇1
一.什么是Ftech“Fetch API提供了一个JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。”简单来说,在前一阶段,我们通常是使用ajax之类的基于XMLHttpRequest来进行发送各种http网络请求,但是由于XHR其自身的局限性,导致在其基础上封装的原生a...原创 2020-04-08 21:27:13 · 432 阅读 · 1 评论 -
Fetch漫游指南--篇2
大家好,由于最近比较忙,直到今天我才时间写第二篇关于fetch的介绍。今天我将继续为大家介绍Fetch API,现在我先大概列出我们接下来会看到的内容:response对象;自定义request()对象;fetch的异常处理;fetch的兼容实现方案;fetch目前的不足;一.Response对象Fetch API 的Response接口呈现了对一次请求的响应数据,Respon...原创 2020-04-08 21:26:58 · 697 阅读 · 0 评论 -
原生JS实现并封装前端路由
目前,前端中所有的MVVM框架中基本都有自己的Router组件,比如React-router或者Vue-router,主要的作用就是通过拦截url来返回相应的组件。如果我们通过原生js来实现一个类似的router,应该怎么做呢?本文将提供一个思路和完整demo,以解释其中的原理。一.效果图二.代码示例<!DOCTYPE html><html lang="en"&g...原创 2020-04-08 21:26:43 · 1953 阅读 · 0 评论 -
JavaScript 中神奇的加法(隐式类型转换)
一般来说, 加减法应该是我们学习生涯中接触到的第一个运算符,通常意义下它也是最简单的运算符。在程序语言中,加减法的情况一般也比较简单,但是在 JavaScript 中加法的情况却比较奇怪,因为它有着大量特殊的情况。我们举个简单的例子:1 + '1' = '11'; 1 + 'a' = '1a';1 + [] = '';从基础数据类型的加法开始,我们得到的结果就变的奇怪了起来。究其根...原创 2020-04-08 21:26:06 · 1082 阅读 · 1 评论 -
JavaScript 数组去重的7种实现
一.前言js中数组去重是老生常谈的问题,之所以是老生常谈,是因为这东西在平常的业务场景中挺常见的,是刚需;其次在面试中面试者也喜欢问,基本上是希望你能回答的越多越好,今天趁这个机会我正好捋一捋思路,把这块整理一下。要说在前面的是,不同的业务场景决定不同的技术手段,也不存在一招通吃的函数或者算法。而且,大家一定不要被‘优雅’这两个字所桎梏,在业务中,能解决问题的办法,就是好办法;能解决问题的办法...原创 2020-04-08 21:26:24 · 289 阅读 · 0 评论 -
JavaScript 中的浅拷贝和深拷贝
一.前言每一个前端的 JavaScript 之路不一定是由《JavaScript 高级程序设计》开启的,但是每一位前端都一定被“按值传递”和“按引用传递”这两个概念坑过。现在你我应该都很清楚,在 JavaScript 中的object类型是按引用传递的,但是在函数参数中,所有参数都是按值传递的。我们今天要谈的东西,就起源于object型数据的复制与再操作,简单来说,就是我们今天的主题:对象的浅...原创 2020-04-08 21:25:36 · 333 阅读 · 0 评论 -
TopTal 进阶 JavaScript 面试题
原网址:37 Essential JavaScript Interview Questions 以下为我对这37个题目的翻译和解答,其中小部分题目的解答是我认为官方解答的很合适,也无需更为深入的挖掘,会直接翻译官方的回答;大部分题目的解答都是我对题中涉及到的知识点更深入的挖掘做出的解释。1.当你使用typeof bar === 'object' 来确定 bar 是否是 object 时,这其中...原创 2020-04-08 21:25:10 · 1109 阅读 · 0 评论 -
下拉框Ztree的实现
效果图:首页得有一个盛放伪下拉框的input输入框,然后在input下面放一个div层盛放Ztree,默认隐藏,在点击input时再调出来。看代码。 <table style="width:100%"> <tr> <td style="position:relativ...原创 2019-03-07 09:41:17 · 4925 阅读 · 1 评论 -
自定义Echarts折线图中悬浮框的位置
在Echarts3的折线图的使用过程中,想使初始化出来的图表更人性化,就比如说有这么个需求,在Echarts折线图中,鼠标悬浮在左侧某一个点时,悬浮框悬停在点的右侧;鼠标悬停在右侧某一个点时,悬浮框悬停在点的左侧。下面是具体实现思路: 首先明确一点,我们需要借助tooltip.position属性。理想的思路是我们在回调函数中获取鼠标每次悬停的坐标,然后再判断这个坐标是否处于此容器(...原创 2018-08-31 17:48:28 · 10615 阅读 · 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 · 3373 阅读 · 0 评论 -
iframe设置锚点来解决刷新时跳转到其他页面和点击动态生成的菜单栏让其高亮的思路
我们在使用iframe时,一般是很多子页面共用一个菜单栏,然后点击不同菜单切换到不同的子页面,但是当你刷新时可能会碰到跳转到其他页面的情况,这个时候就需要设置锚点来解决。 另外,我们还需要解决点击菜单栏让它处于高亮的选中状态。并且在设置锚之后,还要处理如何在页面刷新后,让动态生成的菜单仍旧处于被选中的状态。 我们看代码。先设置锚点/设置锚点function setAnchor(url){原创 2017-12-28 20:52:31 · 1628 阅读 · 0 评论 -
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 · 6291 阅读 · 0 评论 -
JavaScript对象之扩展,密封和冻结特性
扩展特性 Object.isExtensible 方法Object.preventExtensions 方法密封特性 Object.isSealed 方法Object.seal 方法冻结特性 Object.isFrozen 方法Object.freeze 方法浅冻结和深冻结 扩展特性如果一个对象是可以添加属性的,那么它就是可扩展的。Object.isEx...转载 2018-03-22 10:08:12 · 284 阅读 · 0 评论 -
从如何优雅的将类数组对象转化为数组谈起
从如何优雅的将类数组对象转化为数组谈起今日研读阮老师的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 · 1195 阅读 · 0 评论 -
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 · 1826 阅读 · 0 评论 -
从JavaScript的垃圾回收机制谈起
javascript垃圾回收机制大家肯定都有所了解。网上大部分的文章也都是在讲引用计数算法和垃圾回收算法的原理以及这两者之间的区别。今天咱们不提这个,咱们只提关于老垃圾回收算法和新垃圾回收算法的演变。一.旧的javascript垃圾回收算法:我们以V8引擎为划分线。v8之前的浏览器的垃圾回收算法大概有三类: 1.引用计数(Reference Counting)算法(低版本ie下使用...原创 2020-04-08 21:29:53 · 321 阅读 · 0 评论 -
JavaScript this探究
关于javascript的this讲解的文章已经多如牛毛了,我本人在开发过程中也用到过很多次。这次趁有空,整理一下关于this的一系列问题:包括this的指向,严格模式和非严格模式下的区别,什么情况下可以改变this的指向以及在ES6下箭头函数中this的指向。一.严格模式下this的指向严格模式下:function aa(){ 'use strict'; c...原创 2020-04-08 21:29:31 · 245 阅读 · 0 评论 -
JavaScript事件委托机制与this的比较
很多时候我们在完成交互时,页面的一些dom结构是根据后台传输过来的数据动态加载的,如果说我们需要给这些数量比较大的dom结构(比如说表格,或则ul&amp;amp;gt;li)添加click或则hover事件时,手写/遍历生成元素内的onclick函数式不可取的,会大量的消耗浏览器内存,降低程序的性能。所以,采用事件委托机制或this就来替代就显得很有必要了。一.什么是事件委托机制简单来说,就是借助e...原创 2020-04-08 21:29:20 · 195 阅读 · 0 评论 -
从 Promise 来看 JavaScript 的异步处理
一.前言在早期 JavaScript 的 ES5 语法中,多层函数的回调嵌套是一件让人很头疼的事儿,行内黑话一般称之为回调地狱 。可能有些伙计还没遇到过此类业务场景,但是没关系,只要在前端圈里混,苍天会绕过谁呢?所以为了大家,我就举个特别常见的业务场景:有三个接口,分别为 URL-A, URL-B, URL-C (都是 get 请求),我们需要分别向这三个接口请求获取数据。请求 URL-...原创 2020-04-08 21:24:33 · 212 阅读 · 0 评论