随笔分类 - javascript
摘要：微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。以及，它们应该可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Ta
阅读全文
摘要：一、定义 foreEach()方法：针对每一个元素执行提供的函数。 map()方法：创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来。 二、语法 foreEach arr.forEach(function callback(currentValue[, index[, ar
阅读全文
摘要：setTimeout是什么时候开始倒计时的？其实是在执行到当前位置的时候，就已经开始计时了，如：当定时时间设置为小于阻塞时间（200ms）： var startTime = window.performance.now(); console.log('setTimeoutstart',startTi
阅读全文
摘要：一、正常动画实践 为了使用户达到更好的体验，做动画的时候都知道用requestAnimationFrame了，但是他也是有极限的，当绘制的东西足够多或者复杂的时候，频繁的删除与重绘降低了很多性能。 在canvas中粒子系统应该算是比较常见的一种了，现在创建一个canvas画布，并绘制100个粒子在整
阅读全文
摘要：冒泡和捕获 在页面中点击一个元素，事件是从这个元素的祖先元素中逐层传递下来的，这个阶段为事件的捕获阶段。当事件传递到这个元素之后，又会把事件逐成传递回去，直到根元素为止，这个阶段是事件的冒泡阶段。 如上图所示，事件传播分成三个阶段： 捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕
阅读全文
摘要：垃圾回收 JavaScript 中的内存管理是自动执行的，而且是不可见的。我们创建基本类型、对象、函数……所有这些都需要内存。 当不再需要某样东西时会发生什么? JavaScript 引擎是如何发现并清理它? 可达性 JavaScript 中内存管理的主要概念是可达性。 简单地说，“可达性” 值就是
阅读全文
摘要：with的语法结构为： with(object) { /* 语句 */ } with主要是用来对对象取值的， 如下 所示： with(obj) { var newa = a; var newb = b; console.log(newa+newb); } 该语句 等价于： var newa = ob
阅读全文
摘要：一、XMLHttpRequest的发展历程 XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口，再后来W3C对它进行了标准化，提出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和Level 2。XMLHtt
阅读全文
摘要：1.class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。 const bar = new Bar(); // it's ok function Bar() { this.bar = 42; } const foo = new Foo(); //Ca
阅读全文
摘要：这是一篇关于js模块化历程的长长的流水账，记录js模块化思想的诞生与变迁，展望ES6模块化标准的未来。经历过这段历史的人或许会感到沧桑，没经历过的人也应该知道这段历史。 无模块时代 在ajax还未提出之前，js还只是一种“玩具语言”，由Brendan Eich花了不到十天时间发明，用来在网页上进行表
阅读全文
摘要：这里先说两个概念：1、堆（heap）2、栈（stack）堆 是堆内存的简称。栈 是栈内存的简称。说到堆栈，我们讲的就是内存的使用和分配了，没有寄存器的事，也没有硬盘的事。各种语言在处理堆栈的原理上都大同小异。堆是动态分配内存，内存大小不一，也不会自动释放。栈是自动分配相对固定大小的内存空间，并由系统
阅读全文
摘要：我们经常面临一个抉择：到底使用JavaScript还是CSS动画，下面做一下对比 JS动画 缺点：(1)JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。 (2)代码的复杂度
阅读全文
摘要：function hasPrototypeProperty(object, name) { return !object.hasOwnProperty(name) && (name in object) } 原理：hasOwnproperty()方法会返回一个布尔值，检测属性是否存在于对象中（实例）
阅读全文
摘要：考虑两点: 第一个参数为undefined或null的时候，那么会转变为window 改变了this执行，让新的对象可以执行该函数。 call Function.prototype.myCall = function(context) { if (typeof context "undefined"
阅读全文
摘要：Web动画形式 首先我们来了解一下Web有哪些动画形式 1. CSS3动画 Transform（变形） Transition（过渡） Animation（动画） 2. JS动画（操作DOM、修改CSS属性值） 3. Canvas动画 4. SVG动画 5. 以Three.js为首的3D动画 以上各种
阅读全文
摘要：canvas的图像变换api，可以帮助我们更加方便的绘画出一些酷炫的效果，也可以用来制作动画。接下来将总结一下canvas的变换方法，文末有一个例子来更加深刻的了解和利用这几个api。 1.画布旋转api 这里要先了解另一个api translate(x,y):重新定义画布上（0，0）的位置。 首先
阅读全文
摘要：canvas可以绘制出很多奇妙的样式和美丽的效果，通过几个简单的api就可以在画布上呈现出千变万化的效果，还可以制作网页游戏，接下来就总结一下和绘图有关的API。 绘画的时候canvas相当于画布，而context相当于画笔。 1.绘制线条 moveTo(x0,y0)：把当前画笔（ictx）移动到（
阅读全文
摘要：一、requestAnimationFrame概念 与setTimeout和setInterval不同，requestAnimationFrame不需要设置时间间隔。这有什么好处呢？为什么requestAnimationFrame被称为神器呢？本文将详细介绍HTML5新增的定时器requestAni
阅读全文
摘要：1、分页功能实现效果如下： 2、代码如下 <!DOCTYPE html > <html> <head> <title> 消息呈现 </title> <link rel="icon" href="picture.ico" type="image/x-icon" /> <script src="../j
阅读全文
摘要：原理： 将一些图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。 步骤一：建立html基本布局 如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </head> <body> <div
阅读全文
浙公网安备 33010602011771号