JavaScript基础
文章平均质量分 86
JavaScript基础语法学习记录
贾明恣
文章大多写于刚开始接触前端,现在看来有很多不足,正在整理中,先将整理所得备份到juejin同名账号,后期迁移。学习是个向内向外的过程,希望和大家交流
展开
-
HTML5特性汇总(待补充)
离线-存储Application cacheLocal StorageIndexed DB在线/离线事件连接Web SocketsServer-sent事件文件访问File APIFile SystemFile WriterProgressEvents语义新元素、新属性国际化form类型microdata音频视频VideoWeb AudioWebRTCVideo track3D和图形Canvas 2D3D CSS变换WebGLSVG展示CSS3 2D原创 2021-09-11 11:35:41 · 96 阅读 · 0 评论 -
浏览器内核相关学习
浏览器想要在各设备上运行涉及到对操作系统的适配IEFirefoxchromeSafariwindows是是是是(5.1.7之前)Mac OS否是是是Linux否是是否Android否是是否iOS否否是是window是浏览器内核:Trident:IEGecko:FirefoxWebKit:safari 、chrome、 android、 webOS渲染引擎...原创 2021-09-06 22:48:41 · 656 阅读 · 2 评论 -
JavaScript定型数组TypedArray
实际上JavaScript并没有TypedArray类型,实质是一种特殊的包含数值类型的数组。早期,希望在浏览器中安装用于渲染复杂图形的编程平台,无需安装插件。出现了webGL,是基于OpenGL ES2.0的JavaScript API。早期版本中,JavaScript数组与原生数组之间不匹配,出现性能问题。图形驱动程序API不需要以JavaScript默认的双精度浮点格式(js数组存储在内存中的格式)传递给它们的数值。所以提出了定型数组它不继承自普通数组(Array);定型数组中只能存固定类型(数原创 2021-09-05 14:04:44 · 534 阅读 · 0 评论 -
HTML5新增语义标签、多媒体
HTML5,构建Web内容的一种语言描述方式新的语义化标签 <header>标签:包含引导和导航等,通常包含h1~h6、搜索框、logo等。 <footer>标签:一般配合address标签(显示地址),包含作者信息、相关链接等。 <nav>标签:一般包含多个a标签,构建导航组件。 <aside>标签:主要装载广告、侧边栏。 <article>标签:包含文章,一般内嵌header、footer、h1、p标签。原创 2021-04-22 20:00:44 · 202 阅读 · 0 评论 -
单页应用、前端路由:hash+history
单页应用,只有一个入口文件,都是通过js异步在浏览器中渲染出来,会导致大部分搜索引擎无法收录我们的网页在性能差的移动设备上,首次加载速度慢所以出现了服务端渲染SSR,S渲染完生成HTML再返回给客户端。使用webpack构建浏览器和服务器环境的应用(同构应用),即用一份代码分别编译为浏览器和服务器环境下的代码。所以使用API和模块时需要考量两个环境是否都支持。SEO搜索引擎优化为了从搜索引擎中获得更多的免费流量,从网站结构、内容建设方案等角度进行合理规划。...原创 2021-04-22 17:05:23 · 305 阅读 · 0 评论 -
JavaScript模块 commonJS、AMD、UMD、ES6
模块托管类定义ECMAScript6模块规范JavaScript是异步加载的解释性语言,所以不同模块实现也表现出不同形态模块标识符根据其解析为实际模块的JavaScript文件路径也可以是 在模块内部声明的命名空间路径字符串require(’./moduleA’)有些模块要求开发者在开始列出所有依赖,而有些依赖却允许动态加载依赖。动态依赖支持更复杂的依赖关系,但是增加了浏览器对模块进行静态分析的难度。只有所有依赖都加载完成,才可执行入口模块。且模块加载的过程是阻塞的把一个模块的返回值原创 2021-04-22 19:01:31 · 761 阅读 · 0 评论 -
JavaScript基础语法的学习汇总(自用)
基础重点JavaScript数据类型、引用类型、操作符、语句判断JavaScript中的数据类型typeof、instanceof、 constructor、 prototypejavaScrpt存取属性的语法:点语法+中括号JavaScript正则表达式弱映射与弱集合及其私有、垃圾回收方面应用私有变量这里不太懂JavaScript有关XML、JSONJavaScript API待补充和仔细研究jQuery梳理总结相比原生JavaScript,jQuery等库在DOM操作上的性能一定是有所原创 2021-04-30 01:09:23 · 469 阅读 · 3 评论 -
跨域问题
跨域问题MDN Web Docs 中定义跨域,当一个资源从与该资源本身所在的服务器不同的域或端口不同的域或不同的端口请求一个资源时,资源会发起一个跨域 HTTP 请求。即访问了一个网站,然后在这个网站返回的资源里面,请求了B网站/端口的资源。跨域这个情况只会出现在浏览器页面里,因为实际上是浏览器由于安全原因限制了这些请求的访问。CSRF攻击,如果前端可以跨域,那:用户访问A,生成cookie存储在本地,点击弹窗广告进入地址B,B网站可以在自己的页面中获取A的cookie,然后模拟用户登录同源原创 2021-05-02 15:13:18 · 458 阅读 · 0 评论 -
jQuery和zepto添加插件的模板语法
/** * Created by hugohua on 14-4-1. * jQuery plugin template */ /** * 将插件封装在一个闭包里面,防止外部代码污染 冲突 */(function ($) { /** * 定义一个插件 Plugin */ var Plugin, privateMethod; //插件的私有方法,也可以看做是插件的工具方法集 /** * 这里是插件的主体部分原创 2021-04-12 10:47:10 · 202 阅读 · 0 评论 -
DOM元素尺寸:offsetWidth、clientWidth、scrollWidth
目录偏移尺寸:所有视觉空间客户端尺寸:内部视口大小滚动尺寸确定大小本文尺寸除了标记可写的之外 都是只读,每次访问都要重新计算。访问过多会影响性能,多次使用同一值时最好保存在局量中。偏移尺寸:所有视觉空间以边框为界定来算offsetTop 元素上边框外侧距离父元素上边框内侧的像素数offsetLeft可以通过这两属性获取元素在页面中的偏移量function getLeft(ele){ let left=ele.offsetLeft; let current=ele.offse原创 2021-04-14 12:53:27 · 494 阅读 · 0 评论 -
关于动画:JavaScript动画、CSS动画、图层处理、HTML5的canvas及层叠上下文
CSS动画相对于早期的JavaScript动画有很多的性能提升CSS图层浏览器会把页面切分为多个图层,每个图层有一个或多个节点,在渲染DOM的时候,浏览器实际的工作获取DOM后分割为多个图层对每个图层的节点计算样式结果为每个节点生成图形和位置在图层位图中绘制每个节点图层作为纹理上传至GPU复合多个图层至页面每个图层中元素尺寸变化都会影响到别的元素CSS通过transform位移、scale伸缩、rotate旋转、skew倾斜、matrix矩阵转换、perspective透视图提供原创 2021-04-27 17:24:34 · 757 阅读 · 0 评论 -
函数防抖和节流的代码
函数防抖: 多次接近的(相隔不超过时间设置)操作合并为一次操作进行,。只在最后一次事件后才触发一次函数,事件持续被触发使用需谨慎。适用于滚动页面、resize实现:维护一个定时器,返回一个推迟执行的函数//防抖debounce function debounce(fn) { var timer = null; //维护一个计时器,创建一个标记存放定时器的返回值 console.log("1节流"); console.log(timer); return functio原创 2021-04-28 10:39:01 · 390 阅读 · 0 评论 -
手写bind函数:this、返回值是一个函数
目录this返回一个函数前提this函数可以关联至一个对象,这时称之为方法。对象被隐式传递给其所调用的方法,方法可以访问和操作对象里的数据,通过 this 关键字引用对象。当函数作为对象的方法被调用时,this 指向该对象普通函数调用,即普通函数方式,此时的 this 总是指向全局对象构造器里的 this 就指向返回的对象返回一个函数func执行结束后返回一个part函数,再次()调用返回值,执行part函数。part函数返回自己,所以可以一直调用下去。var func = function原创 2021-04-13 17:44:14 · 393 阅读 · 0 评论 -
JavaScript对类的基础了解
JavaScript基础知识面向对象动态多态继承实现多态应用封装封装数据封装实现封装类型封装变化原型模式所有的数据都是对象。要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它对象会记住它的原型。如果对象无法响应某个请求,它会把这个请求委托给它自己的原型。作用域函数是一级对象方法闭包立即执行函数(immediate function)函数调用的方法(1)函数(2)方法(3)构造函数(4)使用 call() 或 apply()函数参数特殊变量JAVA与JavaScript变量类型对象其他语言运原创 2021-04-13 16:27:27 · 111 阅读 · 0 评论 -
JavaScript作用域、执行上下文、闭包及其应用
目录写在前面作用域应用模拟私有变量模块化异步服务端调用创建人工块作用域变量网上有关闭包的分享有很多,大多都是博主基于自己的应用经验之后的理解,难免会有不同出发角度理解的区别。看了之后还是决定自己整理一下自己的理解角度。写在前面在JavaScript出现之前,闭包只存在于函数式编程语言里,是为了满足特殊应用场景出现的语法。闭包:一种能够在函数声明中将环境信息与所属函数绑定在一起的数据结构。基于函数声明的文本位置,因此又称为 围绕函数定义的静态(词法)作用域。使函数访问其环境状态,应用于高阶函数、原创 2021-04-13 11:41:40 · 179 阅读 · 0 评论 -
JavaScript内存相关初了解:堆栈、引擎、闭包隐患
关于Google V8引擎,引擎主要包括两个主要组件Memory Heap 内存堆 —— 这是内存分配发生的地方Call Stack 调用堆栈 —— 这是在你代码执行时栈帧存放的位置JavaScript 是一种单线程编程语言,这意味着它只有一个 Call Stack ,一次仅能做一件事。Call Stack 是一个数据结构,它基本上记录了我们在程序中的所处的位置。如果我们进入一个函数,我们把它放在堆栈的顶部。如果我们从一个函数中返回,我们弹出堆栈的顶部。这是所有的堆栈可以做的东西。Call St原创 2021-04-12 10:59:18 · 164 阅读 · 0 评论 -
JavaScript正则表达式
正则表达式=/正则表达式主体/修饰符(可选)正则表达式是匹配模式,要么匹配字符,要么匹配位置。在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象。支持test()、exec()方法。/e/.test("The best things in life are free!");//返回布尔值/e/.exec("The best things in life are free!");//返回数组,null或者e,多次匹配不会返回多个在 JavaScript 中,正原创 2021-04-10 20:08:04 · 276 阅读 · 0 评论 -
有关prototype和__proto__的学习记录
在网上参看了一些博客之后还是觉得模糊。于是自己动手实验了一下,记录基础知识prototype属性是一个很特别的属性,如果new一个新的对象,浏览器会自动把prototype中的内容附加在对象上。通过利用prototype就可以在JavaScript中实现成员函数的定义,甚至是“继承”的效果。每个构造函数都会有一个prototype属性,该属性是一个原型对象,包含应该由指定类型的实例共享的属性和方法。原型对象有一个constructor属性指向与之关联的构造函数。对象有属性:隐式对象 __ proto原创 2021-04-09 12:17:26 · 166 阅读 · 0 评论 -
JavaScript数据类型、引用类型、操作符、语句
夯实基础基本了解1.变量1.0 var与let1.0.0 补充知识点_setTimeout() 与单线程1.1 const2 数据类型2.0 Undefined2.1 Null类型2.2 Boolean类型2.3 Number类型2.4 Symbol类型(ES6新增)2.4.0 全局符号注册表2.5 Object类型操作符数字操作按位非~左移<<有符号右移(逆左)>>无符号右移 >>>指数操作符**乘性操作符*布尔操作符语句迭代语句for-in枚举对象的非符号键属性原创 2021-03-13 20:59:46 · 1675 阅读 · 1 评论 -
弱映射与弱集合及其私有、垃圾回收方面应用
弱映射:js垃圾回收程序中对待“弱映射”中键的方式要求:key必须是object或者继承自object保证只有通过键对象的引用才能取得值一旦指针key发生变化,就会被回收WeakMap弱映射的应用真正的私有变量对象实例为键,私有成员的字典为值...原创 2021-04-07 00:47:32 · 297 阅读 · 0 评论 -
单线程JavaScript的异步编程
异步操作类似系统中断定时回调中执行数学计算ES6新增promise、ES8新增异步函数promise主要是为异步代码提供了清晰的抽象,串行异步代码。可以用其表示异步执行的代码块,也可以用其表示异步计算的值。异步函数是将promise应用于JavaScript函数的结果,可以暂停执行而不阻塞主线程,可以编写基于promise的代码,组织串行/平行执行的异步代码。...原创 2021-04-06 00:55:13 · 856 阅读 · 0 评论 -
单线程JavaScript的多线程方式:工作者线程
工作者线程JavaScript单线程,意味着它不可以像多线程语言那样把工作委托给独立的线程和进程去做,但是单线程可以保证它与不同浏览器API兼容。而且多线程意味着它与DOM这样的API就会出现问题工作者线程:允许把主线程的工作转嫁给独立的实体,而不会改变现有的单线程模型。各种工作者线程有不同的形式和功能,但他们都是独立于JavaScript的主执行环境。...原创 2021-03-31 19:56:27 · 865 阅读 · 0 评论 -
JavaScript API
Atomics与SharedArrayBuffer简化版的ISA,通过强制同一时刻只对缓冲区执行一个操作,可以让多个上下文安全读写一个SharedArrayBuffer在尽量少但稳定的原子行为上,构建复杂的多线程JavaScript程序任何全局上下文中都有Atomics对象,这个对象上暴露了用于执行线程安全操作的一套静态方法。原子Futex操作与加锁跨上下文消息XDM不同执行上下文之间(不同工作线程/不同源的页面)核心:postMessage(消息,目标接受源,可选的工作者线程相关的Trans原创 2021-04-06 00:56:04 · 490 阅读 · 0 评论 -
JavaScript代理_ES6新增
代理是一种新的基础性语言能力,很多转译程序不支持把代理行为转换为之前的ECMAScript代码。可以检测代理是否存在,不存在提供后备代码。代理可以定义包含 捕获器 的处理程序对象,而这些捕获器可以拦截绝大部分JavaScript的基本操作和方法。在捕获器处理程序中,在遵从捕获器不变式的前提下,可以修改任何基本操作的行为。与代理如影随形的反射API:封装了与捕获器拦截的操作相对于的方法。可以将其看作一套基本操作,是绝大部分JavaScript对象API的基础。开发者可以使用代理创建出各种编码模式,例如原创 2021-03-26 00:52:49 · 748 阅读 · 0 评论 -
javascript对象编程
属性属性分为:数据属性、访问器属性访问器属性通常包含getter、setter函数采用一些内部特性来描述属性的特征,通过Object.getOwnPropertyDescriptor()方法可以获取Configurable是否可以通过delete删除并重新定义,是否可以修改特性,是否更改为数据/访问器属性、默认trueEnumerable是否可以通过for-in循环返回,默认true【数据特有】Writable【数据特有】Value【访问器特有】Get,默认undefined【访问器特有原创 2021-03-28 11:58:25 · 713 阅读 · 0 评论 -
JavaScript用户事件
JavaScript与HTML的交互是通过事件实现的最好限制一个页面中事件处理程序的数量利用事件冒泡,事件委托可以解决限制事件处理程序数量的问题最好在页面卸载前删除所有事件处理程序使用JavaScript也可以在浏览器中模拟事件。事件流:页面接收事件的顺序事件冒泡:DOM树最里面的节点开始事件捕获DOM事件流DOM2 Event规定事件流分为3个阶段:事件捕获、到达目标、事件冒泡事件处理程序事件对象事件类型...原创 2021-03-26 22:33:24 · 267 阅读 · 0 评论 -
javaScript的迭代模式:迭代器与生成器
ES6正式支持迭代模式,引入迭代器和生成器迭代器:可以由任意对象实现的接口,支持连续获取对象产出的每一个值。对象实现Iterable接口,会有一个Symbol.iterator属性,属性引用默认迭代器。默认迭代器像一个迭代工厂,也就是一个函数,调用之后会产生一个实现Iterator接口的对象(按需创建的一次性对象)迭代器必须通过连续调用next()方法才能连续取得值,方法返回一个IteratorObject对象,该对象属性:value、done(布尔值,是否还有更多值)实现了Iterable接口的原创 2021-03-25 00:09:22 · 207 阅读 · 0 评论 -
JavaScript函数相关知识:this、caller、new.target、callee、箭头函数、IIFE、特权方法
函数参数ES6不关心参数的个数,参数只是为了方便写出并不必要因为ES函数的参数在内部表现为一个数组arguments注意箭头函数没有arguments对象,但是可以通过包装函数传递给箭头函数function foo(){ let bar=()=>{ console.log(arguments[0]);//foo的arguments[0]};bar();}这也决定了ES没有重载(例如Java中一个函数可以根据参数不同有两个定义),后一个同名函数始终覆盖前一个。参原创 2021-03-24 20:57:08 · 193 阅读 · 0 评论 -
JavaScript表单脚本
表单基础HTMLFormElement类表单提交按钮重置表单表单字段文本框编程JavaScript较早的用途之一:服务器端表单处理的责任,即表单验证基础web表单在HTML以< form >元素存在,JavaScript中HTMLFormElement类型(继承自HTMLElement)HTMLFormElement类acceptCharset:服务器可以接收的字符集action:请求的URLelements:表单中所有控件的HTMLCollectionenctype:请求的编原创 2021-03-21 23:23:46 · 428 阅读 · 1 评论 -
JavaScript错误处理机制
错误类型Error基类型InternalError底层js引擎抛出,栈溢出。代码错误或者危险EvalError调用eval()异常RangeError 数值越界ReferenceError找不到对象SyntaxErrorTypeErrorURIError 错误的URL格式throw操作符可以抛出一个异常同一情况, 每个浏览器给出的错误消息可能不同,所以我们可以自定义抛出错误的类型try、catch处理异常try{ 可能会出错的代码;}catch(error){ consol原创 2021-03-19 02:05:38 · 144 阅读 · 0 评论 -
JavaScript网络请求与远程资源Ajax、Beacon、Web Socket
Ajax无需刷新当前页面即可从服务器获取数据的一个方法.最初是通过JavaScript从服务器获取XML数据的一种手段XMLHttpRequestweb Socket是与服务器的全双工、双向通信渠道,不使用HTTP,而是自定义协议。目的是更快地发送小数据块。这需要专用的服务器,但速度优势明显。...原创 2021-03-19 01:37:55 · 1148 阅读 · 0 评论 -
JavaScript有关XML、JSON
JSON JavaScript object notation 是一种轻量级数据格式,便于表示复杂数据结构。相比XML更为简洁(JSON可以直接被解析成可用的JavaScript对象),且现在JavaScript、所有浏览器已经原生支持全局JSON对象。(许多语言也支持)JSON支持3种类型的值简单值:字符串、数值、布尔、null都可以,特殊值undefined不可以对象:有序键/值对,值可以是复杂值,对象属性必须带双引号数组JSON中字符串必须使用双引号没有分号JSON对象早期JS原创 2021-03-18 01:37:52 · 203 阅读 · 0 评论 -
JavaScript红宝书之BOM
BOM是使用js开发web应用的核心。BOM的核心是Window对象,该对象双重身份ECMAScript中的Global对象浏览器窗口的JavaScript接口window对象的属性window.toptop对象:最上层窗口,即浏览器窗口本身。self对象窗口位置与像素比...原创 2021-03-16 21:06:30 · 221 阅读 · 0 评论 -
JavaScript红宝书之DOM基础、MutationObserver接口(H5)
DOM是HTML和XML文档的编程接口,表示由多层节点构成的文档,通过他开发者可以添加、删除和修改页面的各大部分。是真正跨平台、语言无关的表示和操作网页的方式。任何HTML或XML文档都可以用DOM表示为一个由节点构成的层级结构每个文档只能有一个文档元素,在HTML中是< html >元素,在XML中任何元素都可以成为文档元素。document.firstChild == document.Element ==htmlDOMNode类型所有DOM节点类型都必须实现Node接口,在原创 2021-03-16 20:32:38 · 357 阅读 · 0 评论 -
script元素、加载时阻塞问题
`<script>元素</script>`补充:js可以使用DOM API,所以向DOM中动态添加script元素同样可以实现加载指定脚本。document.creatElement("script");但是这样获取的资源等同于async有风险,最好在文档头部显示声明<link rel="preload" href="xx.js">元素内代码会被从上到下解释,并且保持在解释器环境里,代码计算完成前,页面其余内容不会被加载执行,所以现在大多应用会将其放在bo原创 2021-03-14 20:35:34 · 2309 阅读 · 0 评论 -
javaScrpt访问属性:点语法or中括号、条件访问、利用key唯一性去重
点语法是首选,静态中括号动态必须在括号中使用属性名的字符串形式,即必须是一个计算结果为字符串的表达式person[“name”]下列情况中采用中括号通过变量访问属性属性名中包含可能会导致语法错误的字符,e.g:空格属性名中包含关键字/保留字...原创 2021-03-14 20:05:33 · 197 阅读 · 0 评论