JavaScript
文章平均质量分 91
JavaScript语法内容
YuLong~W
这个作者很懒,什么都没留下…
展开
-
JavaScript 常见的设计模式
文章目录设计模式工厂模式简单工厂抽象工厂单例模式装饰器模式代理模式设计模式设计模式: 设计模式是解决某个特定场景下对某种问题的解决方案。因此,当我们遇到合适的场景时,可能会条件反射一样自然而然想到符合这种场景的设计模式。为什么要学习设计模式:设计模式来源众多专家的经验和智慧,它们是从许多优秀的软件系统中总结出的成功的、能够实现可维护性、复用的设计方案,使用这些方案将可以让我们避免做一些重复性的工作。设计模式提供了一套通用的设计词汇和一种通用的形式来方便开发人员之间沟通和交流,使得设计方案更加通俗原创 2022-02-03 11:18:50 · 1178 阅读 · 3 评论 -
浏览器输入URL后发生了什么?
文章目录URL 解析DNS域名解析建立TCP连接发送HTTP请求处理并响应HTTP请求浏览器渲染页面关闭TCP连接URL 解析URL(Uniform Resource Locator),统一资源定位符,用于定位互联网上资源,俗称网址。地址格式:scheme://host.domain:port/path/filename各部分解释如下:scheme: 定义因特网服务的类型。常见的协议有 http、https、ftp、file,其中最常见的类型是 http,而 https 则是进行加密的网络传输原创 2021-11-27 19:04:08 · 3435 阅读 · 2 评论 -
JS 函数防抖和节流
文章目录防抖节流防抖与节流的比较<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div> <script> let num = 1; const content = document.getElementById('content');原创 2021-11-21 21:00:00 · 244 阅读 · 2 评论 -
JS 执行机制 详解(附例题)
文章目录事件循环(Event Loop)初识任务队列宏任务与微任务事件循环(Event Loop)完整事件循环(Event Loop)初识JS分为 同步任务 和 异步任务同步任务都在主线程(这里的主线程就是JS引擎线程)上执行,会形成一个执行栈主线程之外,事件触发线程管理着一个任务队列,只要异步任务有了运行结果,就在任务队列之中放一个事件回调一旦执行栈中的所有同步任务执行完毕(也就是JS引擎线程空闲了),系统就会读取任务队列,将可运行的异步任务(任务队列中的事件回调,只要任务队列中有事件回调,就说原创 2021-11-18 20:31:51 · 1695 阅读 · 4 评论 -
JS(单线程)与浏览器(多进程)
文章目录进程与线程JS(单线程)浏览器(多进程)渲染进程中的主要线程浏览器的进程模型、线程模型浏览器内多标签页之间通信方式进程间通信的方式进程与线程1、进程: 进程是CPU资源分配的最小单位CPU是计算机的核心,承担所有的计算任务进程 字面意思就是 进行中的程序,可以理解为 一个可以独立运行且拥有自己的资源空间的任务程序进程包括 运行中的程序 和 程序所使用到的内存和系统资源。当我们启动某个程序时,操作系统会给该程序创建一块内存(当程序关闭时,该内存空间就会被回收),用来存放代码、运行中的数据原创 2021-11-16 17:57:36 · 2526 阅读 · 4 评论 -
JS动画 与 CSS3动画 及 回流和重绘
文章目录JS动画CSS3动画浏览器的渲染流程回流(重排) 和 重绘JS动画JS动画:也被称为 逐帧动画,在时间帧上绘制内容,一帧一帧的,所以它的可再造性很高,几乎可以完成任何想要的动画形式。缺点:有可能造成丢帧的情况。JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞,从而造成丢帧。代码的复杂度高于CSS动画。优点:JavaScript动画控制能力很强,可以在动画播放过程中对动画进行控原创 2021-11-14 19:50:25 · 2188 阅读 · 2 评论 -
JS 内存泄漏 及 垃圾回收机制
文章目录垃圾的产生:JavaScript 的引用数据类型是保存在 堆内存 中的,然后在 栈内存 中保存一个对堆内存中实际对象的引用,所以,JavaScript 中对引用数据类型的操作都是操作对象的引用而不是实际的对象。可以简单理解为,栈内存中保存了一个地址,这个地址和堆内存中的实际值是相关的比如:首先声明了一个变量,它指向一个对象,建立了一个引用关系。接着把这个变量重新赋值了一个数组对象,也就变成了该变量引用了一个数组,那么之前的对象引用关系就没有了。没有了引用关系,也就是无用的对象,如果这种无用的原创 2021-11-07 21:41:50 · 279 阅读 · 2 评论 -
JS 闭包详解
文章目录什么是闭包?要理解 闭包 就要去理解 变量的作用域,在JS中存在两种变量的作用域,一种是全局变量,一种是局部变量。两种变量的区别就是:函数内部可以直接读取全局变量,但是在函数外部无法读取函数内部的局部变量。闭包就是能够读取其他函数作用域中局部变量的函数。只有函数内部的子函数才能读取局部变量,所以闭包可以理解成 定义在一个函数内部的函数。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。声明在一个函数中的函数,叫做 闭包函数。而且内部函数总是可以访问其所在的外部函数中声明的参数和变量,原创 2021-11-05 19:34:30 · 322 阅读 · 2 评论 -
ES6 新特性知识点总结
文章目录原创 2021-09-22 19:58:22 · 2229 阅读 · 6 评论 -
jQuery 事件、其他方法
文章目录jQuery事件事件注册事件处理on() 绑定事件off() 解绑事件trigger() 自动触发事件事件对象jQuery其他方法jQuery对象拷贝多库共存jQuery插件jQuery事件事件注册语法:element.事件(function(){})$('div').click(function(){ 事件处理程序 }) 其他事件和原生基本一致。比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等原创 2021-07-22 15:47:33 · 393 阅读 · 4 评论 -
jQuery 样式、属性、元素操作、动画效果、尺寸位置操作
文章目录jQuery样式操作操作CSS方法设置样式类方法jQuery属性操作jQuery元素操作jQuery样式操作操作CSS方法1、获取样式属性的值$(selector).css('样式属性名')2、设置样式属性的值对象方式:属性名和属性值用冒号隔开, 属性可以不用加引号$(selector).css({'样式属性' : '值'})3、函数传值方式:属性必须加引号,值如果是数字可以不用跟单位和引号$(selector).css('样式属性','值')设置样式类方法作用等同于以前的原创 2021-07-20 20:30:34 · 844 阅读 · 10 评论 -
jQuery 概述、选择器
文章目录jQuery概述jQuery对象与DOM对象区别、转换jQuery概述jQuery对象jQuery对象:通过jquery的方式获取到的对象DOM对象:通过js的方法获取到的对象与DOM对象区别、转换jquery对象是一个DOM对象的包装集(包含了DOM对象的集合)jquery对象实质是一个DOM对象的伪数组DOM对象不能调用jquery对象的方法jQuery对象能不能调用DOM对象的方法转换:DOM对象转换成jquery对象var $obj = $(domObj);原创 2021-07-19 22:31:29 · 454 阅读 · 10 评论 -
JavaScript 正则表达式、String类方法
文章目录正则表达式使用组成可选模式符边界符字符类量词符预定义类优先级String类中方法match()方法search()方法split()方法replace()方法正则表达式一种描述字符串结构的语法规则,是用于匹配字符串中字符组合的模式,同时正则表达式也是对象特点:具有灵活性逻辑性和功能性非常强可以迅速地用极简单的方式达到字符串的复杂控制使用创建:字面量方式:var 变量名=/表达式/构造函数方式:var 变量名=new RegExp(/表达式/)test( )方法用来检测字原创 2021-06-19 09:06:38 · 722 阅读 · 6 评论 -
JavaScript BOM及相关对象、JS执行机制
文章目录BOMwdinow对象window对象常见事件定时器JS执行机制其他对象location对象navigator对象history对象BOMBOM(Browser Object Model) 浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 windowBOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性wdinow对象是 JS 访问浏览器窗口的一个接口是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法w原创 2021-06-17 16:19:00 · 397 阅读 · 16 评论 -
JavaScript DOM 事件进阶
文章目录事件事件注册传统方式事件监听方式事件删除DOM事件流事件对象事件对象的使用常用属性和方法e.target和this区别阻止默认行为阻止事件冒泡事件委托鼠标事件鼠标事件对象键盘事件键盘事件对象综合案例:快递单号放大显示事件事件注册传统方式dom对象.事件名=事件处理程序唯一性:同一个对象的同一个事件只能注册一个处理程序,后面注册的程序会将前面注册的程序覆盖掉事件监听方式由于不同浏览器采用的事件流实现方式不同,事件监听的实现存在兼容性问题。通常根据浏览器的内核,可以把浏览器划分为两大类①原创 2021-06-09 17:19:05 · 1257 阅读 · 26 评论 -
JavaScript 操作元素案例练习
文章目录案例:显示隐藏密码案例案例:循环精灵图案例:密码框验证信息案例:背景换色案例:表格换色案例:表单全选和反选案例:tab栏切换案例:显示隐藏密码案例核心思路: (操作表单元素属性)点击眼睛按钮,把密码框类型改为文本框就可以看见里面的密码 一个按钮两个状态,点击一次,切换为文本框,继续点击一次切换为密码框算法:利用一个flag变量,来判断flag的值,如果是1 就切换为文本框,flag 设置为0,如果是0 就切换为密码框,flag设置为1<style> .box{原创 2021-06-08 18:12:11 · 3590 阅读 · 40 评论 -
JavaScript DOM 节点操作
文章目录节点基础节点分类节点层级获取节点获取父节点获取子节点获取兄弟节点节点操作创建节点添加节点删除节点复制节点节点基础节点分类HTML文档可以看作是一个节点树,网页中的所有内容都是节点,一般来说,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这3个基本属性元素节点,nodeType为1 (节点操作主要操作的是元素节点)属性节点,nodeType为2文本节点,nodeType为3,文本节点包含文字、空格、换行等节点层级节点的层级关系如原创 2021-06-08 14:52:08 · 596 阅读 · 6 评论 -
JavaScript WebAPI、DOM、事件、操作元素
文章目录WebAPIDOMDOM树DOM获取元素方式document对象属性事件事件的使用步骤事件的类型操作元素操作元素内容操作元素属性案例:显示隐藏密码案例操作元素样式案例:循环精灵图案例:密码框验证信息WebAPIAPI:应用程序编程接口,是一些预先定义的函数,由某个软件开放给开发人员使用的,帮助开发者实现某种功能,开发人员无须访问源码、无须理解其内部工作机制细节,只需知道如何使用即可简单理解: API 是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能WebAPI:主要针对浏览器的A原创 2021-06-07 17:46:03 · 738 阅读 · 22 评论 -
JavaScript ES5新增方法(数组、字符串、对象)、错误处理、浅拷贝和深拷贝
文章目录ES5新增方法数组方法字符串方法对象方法类的本质ES5新增方法ES5 中给我们新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括数组方法迭代(遍历)方法:forEach()、map()、filter()、some()、every()array.forEach(function(currentValue, index, arr))foreach() 方法:currentValue:数组当前项的值index:数组当前项的索引arr:数组对象本身array.filt原创 2021-06-03 10:32:19 · 423 阅读 · 2 评论 -
JavaScript 函数的调用、this指向、ES5组合继承(构造函数+原型对象)
文章目录this指向分析this指向更改this指向错误处理try catch处理throw抛出错误对象错误类型继承构造函数实现继承父类属性原型对象实现继承父类方法this指向函数中this指向,情况如下:构造函数内部的this指向新创建的对象直接通过函数名调用函数时,this指向的是全局对象window如果将函数作为对象的方法调用,this将会指向该对象分析this指向function foo(){ return this}var o={ name:'Jim',原创 2021-05-31 21:59:04 · 396 阅读 · 10 评论 -
JavaScript 作用域(链)、预解析、闭包函数
文章目录作用域变量的作用域作用域链闭包函数预解析作用域变量的作用域全局变量:在函数外部定义的变量(显示定义)或在内部不用var定义的变量(隐式定义) 在浏览器页面关闭后才销毁,比较占空间局部变量:在函数内部利用var关键字定义的变量 函数调用结束后就销毁,节省内存资源块级变量:ES6中使用let关键字在语句块中定义的变量 当语句块结束就销毁,更节省内存空间作用域链在一个函数内部声明另一个函数时,内层函数只能在外层函数作用域内执行,在内层函数执行过程中,若引入某个变量,先在当前作用原创 2021-05-25 21:25:52 · 273 阅读 · 12 评论 -
JavaScript 原型对象、原型链、成员查找机制
文章目录原型对象构造函数的原型对象对象的原型对象原型对象的原型对象原型链原型链结构图函数在原型链中的结构原型对象构造函数的原型对象每个构造函数都有一个原型对象存在,这个原型对象通过构造函数的prototype属性来访问,属性指向了构造函数的原型对象//构造函数的原型对象function Person() {} // 定义函数console.log(Person.prototype) // 输出结果:{constructor: ƒ}console.log(typeof Person.protot原创 2021-05-24 18:41:37 · 665 阅读 · 3 评论 -
JavaScript 面向对象、ES6中面向对象语法、类的本质
文章目录面向对象ES6面向对象语法类和对象构造函数成员函数继承静态成员、实例成员静态属性的定义静态方法的定义面向对象面向对象就是把需要解决的问题分解成一个个对象,建立对象不是为了实现一个步骤,而是为了描述每个对象在解决问题中的行为,面向对象的核心是对象。面向对象的优势:模块化更深,封装性强更容易实现复杂的业务逻辑更容易维护、复用、扩展面向对象的特征:封装性:对象是属性和行为的结合体多态性:同一消息被不同对象接收后,会产生不同的效果继承性:子类型可继承父类的信息ES6面向对象语法原创 2021-05-24 18:40:32 · 408 阅读 · 2 评论 -
JavaScript内置对象的练习
文章目录猜数字游戏倒计时算法的实现统计字符串中每个字母出现的次数将十进制的整数转换成给定数制格式输出猜数字游戏使程序随机生成一个1~10之间的数字,并让用户输入一个数字,判断这两个数的大小,如果用户输入的数字大于随机数,那么提示“你猜大了”,如果用户输入的数字小于随机数,则提示“你猜小了”,如果两个数字相等,就提示“恭喜你,猜对了”,结束程序。function getRandom(min, max) { return Math.floor(Math.random() * (max - min原创 2021-05-24 17:06:15 · 874 阅读 · 12 评论 -
JavaScript 对象、内置对象(Math、Date、数组、String)及值类型和引用类型
文章目录对象什么是对象对象定义和成员的访问利用字面量创建非空对象用new Object创建空对象用构造函数创建对象对象成员的访问遍历对象成员内置对象Math对象Date对象数组对象String对象值类型和引用类型对象什么是对象在JavaScript中,对象是一种数据类型,它是由属性和方法组成的一个集合。属性是指事物的特征(静态),方法是指事物的行为(动态)对象定义和成员的访问利用字面量创建非空对象var 对象名={ 属性名:值 方法名:function([参数]){ 方法体语句 }原创 2021-05-24 16:30:55 · 658 阅读 · 8 评论 -
JavaScript 函数、进阶函数(匿名、回调、递归函数)及相关练习
文章目录函数定义函数调用函数函数的参数函数的返回值函数的内置对象arguments函数练习题计算n!求数组中的最大值数组排序找出100以内素数将字符串中的空格替换函数的进阶函数表达式(匿名函数)回调函数递归函数递归计算输入的n!递归计算1+2+3+...n递归输出斐波那契数列前20项作用域变量的作用域作用域链闭包函数预解析函数在编写代码时,可能会出现非常多的相同代码,或者功能类似的代码,这些代码可能需要大量重复使用,此时就可以使用JavaScript中的函数。定义函数function 函数名([参数原创 2021-05-21 15:34:53 · 718 阅读 · 6 评论 -
JavaScript数组、二维数组及相关练习
文章目录数组创建数组数组元素的访问数组元素的练习输出下列数组的最大值、最小值数组中去掉所有的0元素数组元素的倒置二维数组创建二维数组二维数组的访问二维数组的练习找出二维数组每一行的最大值输出二维数组每行、每列、对角线元素之和二维数组的转置让二维数组的每行元素都是 降序 排列数组数组是一组类型相同的数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。创建数组1、使用new创建数组 var 数组名=new Array()2、使用字面量创建数组 var 数组名=[ ]数组元素原创 2021-05-21 11:40:32 · 1095 阅读 · 0 评论 -
JavaScript流程控制(顺序、分支、循环)及相关练习
文章目录流程控制顺序结构分支结构if语句if...else语句if...else if语句三元表达式switch语句循环结构while循环do-while循环for循环循环嵌套continue、break关键字流程控制在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。顺序结构程序中最简单、最基本的流程控制,无特定语法结构,按原创 2021-05-13 18:02:22 · 1004 阅读 · 6 评论 -
JavaScript入门基础之概述、变量、数据类型、运算符
文章目录JavaScript 概述JS 简介常见浏览器JS 特点和组成JS 使用方法及语法规则输入和输出变量什么是变量变量的使用命名规范数据类型数据类型的分类数据类型的转换运算符常用运算符运算符优先级JavaScript 概述JS 简介JavaScript: 是Web开发领域中的一种功能强大的编程语言,主要用于开发交互式的Web页面。在计算机、手机等设备上浏览的网页,其大多数的交互逻辑几乎都是由JavaScript实现的。JavaScript内嵌于HTML网页中,通过浏览器内置的JavaScript原创 2021-05-07 18:46:28 · 236 阅读 · 2 评论