分类：Js

2021
06-23

详细对比Ember.js和Vue.js

概述JavaScript最初是为Web应用程序创建的。但是随着前端技术的发展，大多数开发人员更喜欢使用基于JavaScript的框架。它简化了你的代码以及使你能完成更多全栈工作，您几乎可以在任何框架中使用JavaScript。使用什么类型的框架决定了创建应用程序的便捷程度。因此，您必须慎重选择。在已经足够复杂的前端环境里，其中两个框架脱颖而出。我们会在本文中对Ember.js和Vue.js之间进行对比，以帮助你更好的做出判断。为什么要选择框架... 继续阅读 >
2021
06-22

JavaScript之不可靠的undefined

undefined在JavaScript中，假设我们想判断一个是否是undefined，那么我们通常会这样写：if(a===undefined){//code}但是，JavaScript中的undefined并不可靠，我们试着写这样一个函数:functiontest(a){varundefined=1;console.log(undefined);//=>1if(a===undefined){//...}}可以看到，undefined被轻易地修改为了1，使得我们之后的对于undefined理解引起歧义。所以，在JavaScript中，把undefined直接解... 继续阅读 >
2021
06-19

如何用JavaScipt测网速

前言事情是这样的，最近尝试写一个通过判断当前网速，从而在前端控制范围请求去分步请求一个大型文件的库。这个东东我现在一行代码都还没写，除了突然发现这个需求的思路有些不太实际之外，另一个原因是我突然问自己——前端要怎么判断网速啊？??！前端判断网速的原理总结(注：下面求的网速单位默认为KB/S)通过查阅相关资料，我发现思路主要是分为以下几种：1.通过img加载或者发起Ajax请求计算网速通过请求一个和服务端... 继续阅读 >
2021
06-19

浅谈JS的二进制家族

概述Blob:前端的一个专门用于支持文件操作的二进制对象ArrayBuffer：前端的一个通用的二进制缓冲区，类似数组，但在API和特性上却有诸多不同Buffer：Node.js提供的一个二进制缓冲区，常用来处理I/O操作Blob我们首先来介绍Blob，Blob是用来支持文件操作的。简单的说：在JS中，有两个构造函数File和Blob,而File继承了所有Blob的属性。所以在我们看来，File对象可以看作一种特殊的Blob对象。在前端工程中，我们在哪些操作中可以... 继续阅读 >
2021
06-19

JS如何实现一个单文件组件

概述前端开发人员只要了解过vue.js框架可能都知道单文件组件。vue.js中的单文件组件允许在一个文件中定义一个组件的所有内容。这是一个非常有用的解决方案，在浏览器网页中已经开始提倡这种机制。但是不幸的是，这个概念自从2017年8月被提出以来，到现在没有任何进展，像是已经要消亡了一样。然而，深入研究这个主题并试着使用现有的技术来实现单文件组件是很有趣的，值得尝试。单文件组件知道“渐进增强”这个概念的前端开发人员... 继续阅读 >
2021
06-19

浅谈JavaScript工具链不完全指南

概述在JavaScript语言日渐强大的同时，与其配套的开发工具也蓬勃发展。现在的Web前端项目，早已不是写几个HTML页面，加点CSS和JS就完事了。随便一个实用的项目，可能都需要用到一些框架和第三方库，以及相应的脚手架、依赖包管理、预编译、构建打包、压缩合并等等工具。纯手工完成这些任务，已经几乎不太可能了。科学技术是第一生产力，而工具就是其中的一个体现。工欲善其事必先利其器，既然工具解放了人力，我们就应该... 继续阅读 >
2021
06-19

详解JavaScript原始数据类型Symbol

简介创建symbol变量最简单的方法是用Symbol()函数。sysmbol变量有两点比较特别：1.它可以作为对象属性名。只有字符串和symbol类型才能用作对象属性名。2.没有两个symbol的值是相等的。constsymbol1=Symbol();constsymbol2=Symbol();symbol1===symbol2;//falseconstobj={};obj[symbol1]='Hello';obj[symbol2]='World';obj[symbol1];//'Hello'obj[symbol2];//'World'尽管调用Symbol()让它看起来像是对象，实... 继续阅读 >
2021
06-19

JavaScript初学者容易犯的几个错误

前言抛开JavaScript语言设计层面的问题不说，毕竟它是BrendanEich当年用短短十天时间设计出来的，有点缺陷也是在所难免。作为开发者，我们该怎样避免一些常见的低级错误呢？本文就列举几个常见错误，看看你有没有似曾相识。混淆undefined和nullJavaScript中的undefined和null都可用来表示没有值，但是二者之间有所区别。undefined字面意思是“未定义”，但它的含义其实已经超出了变量未定义的范畴：尝试读取对象不存在的... 继续阅读 >
2021
06-19

浅谈JavaScript构造树形结构的一种高效算法

引言我们经常会碰到树形数据结构，比如组织层级、省市县或者动植物分类等等数据。下面是一个树形结构的例子：在实际应用中，比较常见的做法是将这些信息存储为下面的结构，特别是当存在1对多的父/子节点关系时：constdata=[{id:56,parentId:62},{id:81,parentId:80},{id:74,parentId:null},{id:76,parentId:80},{id:63,parentId:62},{id:80,parentId:86},{id:87,parentId:86}... 继续阅读 >
2021
06-19

JS鲜为人知的问题之[] == ![]结果为true、而{} == !{}却为false

console.log([]==![])//trueconsole.log({}==!{})//false在比较字符串、数值和布尔值的相等性时，问题还比较简单。但在涉及到对象的比较时，问题就变得复杂了。最早的ECMAScript中的相等和不相等操作符会在执行比较之前，先将对象转换成相似的类型。后来，有人提出了这种转换到底是否合理的质疑。最后，ECMAScript的解决方案就是提供两组操作符：相等和不相等——先转换再比较   （==）全等和不全等... 继续阅读 >
2021
06-19

教你如何写出可维护的JS代码

什么是可维护代码可维护代码需要遵循以下几个特点。1.可理解性-其他人可以接手代码并理解它的意图和一般途径。2.直观性-代码中的东西一看就明白，不管其操作过程有多复杂。3.可适应性-代码以一种数据变化不要求完全重写的方法撰写。4.可扩展性-在代码架构上已考虑在未来允许对核心功能进行扩展。5.可调试性-当有地方出错时，代码可以给你足够的信息快速直接找出问题的所在。代码约定一种让代码变得可维护的简单途径是形成一套JavaS... 继续阅读 >
2021
06-19

详解JS浏览器事件模型

什么是事件我想你很可能听说过事件驱动,但是事件驱动到底是什么？为什么说浏览器是事件驱动的呢？事件驱动通俗地来说就是什么都抽象为事件。一次点击是一个事件键盘按下是一个事件一个网络请求成功是一个事件页面加载是一个事件页面报错是一个事件浏览器依靠事件来驱动APP运行下去，如果没有了事件驱动，那么APP会直接从头到尾运行完，然后结束，事件驱动是浏览器的基石。一个简单的例子其实现实中的红绿灯就... 继续阅读 >
2021
06-19

详解JS WebSocket断开原因和心跳机制

1、断开原因WebSocket断开的原因有很多，最好在WebSocket断开时，将错误打印出来。ws.onclose=function(e){console.log('websocket断开:'+e.code+''+e.reason+''+e.wasClean)console.log(e)}错误状态码：WebSocket断开时，会触发CloseEvent,CloseEvent会在连接关闭时发送给使用WebSockets的客户端.它在WebSocket对象的onclose事件监听器中使用。CloseEvent的code字段表示了WebSocket断开的原因。可... 继续阅读 >
2021
06-19

如何用threejs实现实时多边形折射

前言在本教程中，您将学习如何使用Three.js在三个步骤中使对象看起来像玻璃。渲染3D对象时，无论使用某种3D软件还是使用WebGL进行实时显示，始终都必须为其分配材料以使其可见并具有所需的外观。可以使用Three.js之类的库中的现成程序来模仿许多类型的材料，但是在本教程中，我将向您展示如何使用三个对象（三个步骤）使对象看起来像玻璃一样。步骤1：设定和正面折射在本演示中，我将使用菱形几何图形，但是您可以跟随一个简单的盒... 继续阅读 >
2021
06-19

详解JS ES6编码规范

1、块级作用域1.1、let取代varES6提出了两个新的声明变量的命令:let和const。其中，let可以完全取代var，因为两者语义相同，而且let没有副作用。var命令存在变量提升的特性，而let没有这个命令。所谓变量提升，即指变量可以先使用，再声明，显然，这种编码规范非常不适合阅读。1.2、全局常量和线程安全在let和const之间，优先使用const。let应出现在单线程模块代码内，而const则非常适合多线程。//badvara=1,b=2,c... 继续阅读 >
2021
06-13

JS异步代码单元测试之神奇的Promise

前言写这篇文章的起因是在写单元测试时，做形如下测试时newPromise((resolve,reject)=>reject(1)).then().catch(err=>{console.log(err)})asyncfunctionjestTest(){awaitPromise.resolve().then()console.log('这个时候catch预期已经被调用，且输出日志')}jestTest()无法使用await将测试代码恰好阻塞到catch在EventLoop中被调用后的时机，从而检测到catch的执行，通过测试。而使用“神奇”一词则是因为pr... 继续阅读 >