js基础
文章平均质量分 93
夕山雨
前端的魅力,超乎你想象!
展开
-
window.open用法详解
目录一、window.open1. 基本语法本文主要分两部分。第一部分详细介绍window.open的详细用法,包括它的基本语法、使用说明等。第二部分由window.open引出,我们将介绍当存在多个页面相互关联时,页面之间的通信问题。一、window.open1. 基本语法...原创 2020-08-09 17:44:52 · 76110 阅读 · 1 评论 -
window.Date、Math、JSON用法解读
目录一、前言一、前言相信只要对前端有所了解的同学,对window上的Date、Math和JSON这三个原生对象(或构造函数)都不会陌生,不过却未必全面了解过它们的用法。首先我们先来简述这三个原生对象的作用。...原创 2020-08-09 14:58:11 · 869 阅读 · 0 评论 -
带你了解JavaScript的异步
目录一、异步的由来二、异步模型解析1. 宏任务和微任务一、异步的由来异步编程常见于如JavaScript一类的单线程语言,用于解决由单线程导致的执行效率低下的问题。单线程语言是相对于多线程语言(如java)而言的。多线程语言具备同时利用CPU的多个内核并行执行程序的能力,代码执行效率较高。多线程语言通常采用同步编程模型,即任何一个任务都必须等待它的上一个任务执行完毕后才可以执行,这种编程模型更方便组织代码逻辑和划分线程任务。而单线程语言则无法利用CPU的多核优势,它的主线程在同一时间只能执行一个任务原创 2020-07-12 16:26:15 · 1721 阅读 · 0 评论 -
js基础之模块化规范:CommonJS、AMD、CMD、ES6
目录一、什么是模块化?二、前端模块化规范详解1. CommonJS(1)基本用法(2)运行机制2. AMD3. CMD4. ES6的模块规范(1)基本用法(2)export命令(3)import命令总结一、什么是模块化?模块化是一种将复杂系统分解为更好的可管理模块的方式(引自百度百科)。在软件开发领域,当一个系统的规模变得十分庞大,功能变得非常复杂时,开发和维护该系统就会变得相当困难。这个问...原创 2020-03-29 21:42:07 · 840 阅读 · 3 评论 -
正则表达式(应用篇)
目录一、正则表达式的难点在哪?一、正则表达式的难点在哪?如果你对正则表达式的基本语法还不甚了解,这里有正则表达式(基础篇)可供参考。很多人在使用正则表达式时都有一种感觉:我已经学完了正则表达式的所有基本语法,对正则表达式的用法也轻车熟路,可是一旦接触到一个需求,仍然不知道该如何下手。或者即使写完了,也无法知道自己写的表达式是不是正确的。这也正是正则表达式的难点所在。...原创 2020-03-23 09:29:32 · 1313 阅读 · 1 评论 -
正则表达式(基础篇)
目录一、正则表达式的概念一、正则表达式的概念正则表达式(Regular Expression,常简写为RegExp或RE),又称规则表达式,通常用来检索、替换那些符合某个模式(规则)的文本。正则表达式是为字符串处理而生的,...原创 2020-03-15 12:19:46 · 10364 阅读 · 5 评论 -
web存储详解(cookie、sessionStorage、localStorage、indexedDB)
目录一、web存储概念简介1. 什么是web存储?2. 为什么需要web存储?二、web存储详解1. cookie2. sessionStorage和localStorage(1). 相同点(2). 不同点3. indexedDB三、前端存储与后端存储的关系一、web存储概念简介1. 什么是web存储?web存储指的是在web通信过程中,由客户端(如浏览器)对少量数据进行的本地存储(注:本文...原创 2020-03-01 12:07:36 · 5329 阅读 · 1 评论 -
form表单技术清单
目录一、form简介二、form的全局属性1. action2. accept-charset3. autocomplete4. enctype5. method6. name7. target三、form的输入控件四、form的手动提交1. 构造表单数据对象2. 提交表单总结一、form简介form标签是网页上负责数据采集的元素,称为表单。我们常见的登录页面,其主体构成就是一个form表单,...原创 2020-02-22 21:56:42 · 1346 阅读 · 0 评论 -
跨域解决方案汇总
目录一、跨域和同源策略1. 什么是跨域?2. 同源策略3. 同源策略带来的问题二、跨域解决方案1. iframe通信类(1). 修改document.domain(2). 设置location.hash(3). 设置window.name(4). postMessage2. 跨域请求类(1). JSONP(2). 跨域资源共享(CORS)(3). nginx代理(4). nodejs中间件(5)....原创 2020-01-05 20:39:41 · 1171 阅读 · 0 评论 -
js基础之自定义事件
目录一、什么是事件?二、自定义事件的实现1. 生成事件对象2. 监听事件3. 触发自定义事件三、自定义事件的用途总结一、什么是事件?事件是浏览器与用户交互的主要方式。举例来说,当用户点击页面上的一个按钮,对浏览器来说,就是在这个按钮上触发了一个“点击事件”。浏览器会去执行开发者为这个“点击事件”定义的回调函数,以此来响应用户的操作。也就是说,浏览器通过“事件”,来感知用户操作,然后执行开发者...原创 2019-12-10 20:37:05 · 859 阅读 · 0 评论 -
前端异步方案之Promise(附实现代码)
一、基本原理一个Promise对象可以理解为这样一个状态机,它(通常)接收一个异步任务作为输入,然后去执行这个异步任务,根据异步任务的执行结果来改变自身的状态,并保留这个执行结果 。这个状态机总共有三种状态:pending(异步任务执行中)、fullfilled(执行成功)和rejected(执行失败)。在异步任务执行完之前,状态机处于pending状态;一旦任务执行成功,状态就会转为full...原创 2019-11-16 19:26:40 · 2469 阅读 · 1 评论 -
js基础之探秘Array的原型方法
如果现在需要用js生成[0, 2, 4, 6, 8, …, 100]这样一个数组,你第一时间想到的会是下面的写法吗?var arr = new Array(51);//使用临时变量保存数组长度,可以有效避免每次循环都计算数组长度var len = arr.length; for(var i = 0; i < len ; i++){ arr[i] = i * 2;}或者你会...原创 2019-11-10 18:35:16 · 1468 阅读 · 0 评论 -
V8引擎的内存管理分析
概述作为目前最受欢迎的JavaScript引擎,V8引擎从一出现就因其出色的性能而备受关注,更是帮助Chrome确立了浏览器霸主的地位。从浏览器结构来看,V8引擎位于Chrome最底层的webkit中(关于浏览器结构,请参考之前的一篇文章:浏览器(基于Chromium)运行机制剖析),用于替换webkit默认的JavaScript引擎 - JavaScriptCore,实现对JavaScript...原创 2019-07-08 11:26:21 · 2429 阅读 · 0 评论 -
js基础之函数的节流与防抖
函数节流和防抖的原理及用途函数节流 (throttle)基本思想:当一个函数在短时间内频繁触发时,通过超时调用来降低函数的执行频率。常见用途:函数防抖(debounce)基本思想:当一个函数在短时间内频繁触发,且触发间隔小于设定的阈值时,暂时不执行该函数,只在触发间隔超过一定的时间后才执行该函数。...原创 2019-06-28 19:35:03 · 677 阅读 · 1 评论 -
js基础之图片懒加载
概述什么是图片的懒加载?简单来说就是尽可能晚地加载图片(这里的懒,指的就是一件事只有到不得不做的时候才去做)。举个例子,当我们在逛淘宝查看商品列表时,肯定经常遇到这种情况:如果连续向上滑动商品列表,很快就会停住(就像到了列表底部一样)。这时候如果继续向上滑动,就会出现 “加载中” 的提示,随后展示出更多的商品。这就是一个典型的懒加载案例。整个商品列表并没有在进入页面时全部加载进来,而是先加载一...原创 2019-07-14 20:11:19 · 577 阅读 · 1 评论 -
js基础之setTimeout与setInterval原理分析
基本原理setTimeout(func, delay, args):设置超时调用,经过delay时间后,将func函数加入到执行队列中准备调用。如果队列为空,立即执行该函数,否则等待线程空闲再执行。setInterval(func, interval, args):设置...原创 2019-07-06 17:13:10 · 5693 阅读 · 0 评论 -
js基础之原型链
概述什么是原型链?简单来说,就是JavaScript对象的继承链。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法(引用自JavaScript高级程序设计)。对于一门面向对象的语言来说...原创 2019-07-21 20:08:40 · 932 阅读 · 2 评论 -
js基础之六种继承方式
概述在JavaScript中,存在六种继承模式,分别是基本继承(即前文js基础之原型链提到的最原始的方式,暂未查到官方称谓)、借用构造函数、组合继承、原型式继承、寄生式继承和寄生组合式继承。其中组合继承是基本继承和借用构造函数的组合版本,也是最常用的继承;原型式继承是基本继承的“干净”版本(只继承原型);寄生式继承是原型式继承的工厂化版本;寄生组合式继承是组合继承融入原型式继承思想后的优化版本,...原创 2019-07-27 13:55:16 · 1402 阅读 · 1 评论 -
js基础之事件捕获与冒泡原理
想要了解什么是事件捕获与冒泡,需要先了解什么是事件。什么是事件?我们知道,在前端开发中,JavaScript负责定义网页的“行为”。这里所说的“定义”,其实指的是开发者可以通过JavaScript语言向浏览器描述一些规则,浏览器按照这些规则与用户进行交互。比如开发者希望当用户点击页面上某个按钮的时候,就弹出一个窗口,显示特定的内容。而当用户真正点击这个按钮的时候,浏览器将按照开发者定义的这个规...原创 2019-10-07 17:01:37 · 1663 阅读 · 1 评论 -
使用原生js实现简单动画效果
使用原生js实现简单动画效果我们知道,借助jQuery提供的animate方法,我们可以很容易实现一些常见的js动画效果。而对于颜色等无法用数值直接表示的样式,我们可以通过引入一些jQuery插件来实现。但是随着前端组件化开发的流行,jQuery大量的DOM操作已显得十分多余,正在逐渐从前端技术栈中被淘汰。那么如何使用原生js来实现类似于jQuery中的动画效果呢?下面我们将使用原生js实现一个...原创 2019-06-22 19:44:57 · 17087 阅读 · 10 评论