weixin_38015898-CSDN博客

原创 XMLHttpRequest.readyState 状态

XMLHttpRequest.readyStateXMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。一个 XHR 代理总是处于下列状态中的一个：值状态描述0UNSENT代理被创建，但尚未调用 open() 方法。1OPENED方法已经被调用。2HEADERS_RECEIVEDsend() 方法已经被调用，并且头部和状态已经可获得。3LOADING下载中； responseText

2020-07-17 22:46:38 596

原创 JavaScript八张思维导图

JavaScript八张思维导图不知不觉做前端已经五年多了，无论是从最初的jQuery还是现在火热的Angular，Vue，React等前端框架，甚至是nodejs等服务端的兴起，归根到底，我始终觉着一切的核心还是JavaScript。于是最近就有了一个想法，想要梳理一下这些年学习以及使用JS的心得。本系列文章主要是针对JS的相关知识点做一个类似提纲似的提炼，一来可以作为今后温故知新的参照；二来也是希望能够帮助大家更加系统清晰的理解JS这门语言。本系列文章主要参照了Nicholas C. Zakas

2020-07-17 22:21:54 109

原创原生JS中DOM节点相关API合集

原生JS中DOM节点相关API合集节点属性Node.nodeName //返回节点名称，只读Node.nodeType //返回节点类型的常数值，只读Node.nodeValue //返回Text或Comment节点的文本值，只读Node.textContent //返回当前节点和它的所有后代节点的文本内容，可读写Node.baseURI //返回当前网页的绝对路径Node.ownerDocument //返回当前节点所在的顶层文档对象，即documentNode.ne

2020-07-16 19:35:14 120

原创彻底掌握scrollTop, offsetTop, scrollLeft, offsetLeft......

彻底掌握scrollTop, offsetTop, scrollLeft, offsetLeft…标记完善的一张图补充说明上面的图已经标记的已经很明显了，我再稍微补充几点：offsetTop, offsetLeft：只读属性。要确定的这两个属性的值，首先得确定元素的offsetParent。offsetParent指的是距该元素最近的position不为static的祖先元素，如果没有则指向body元素。确定了offsetParent，offsetLeft指的是元素左侧偏移offsetPare

2020-07-16 19:19:58 463

原创 DOM事件机制

DOM事件机制一、DOM事件级别DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM 0级事件处理，DOM 2级事件处理和DOM 3级事件处理。由于DOM 1级中没有事件的相关内容，所以没有DOM 1级事件。1.DOM 0级事件el.οnclick=function(){}// 例1var btn = document.getElementById('btn'); btn.onclick = function(){ aler

2020-07-08 21:59:20 70

原创 CSS性能优化的8个技巧

CSS性能优化的8个技巧我们都知道对于网站来说，性能至关重要，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。因此，与其相关的性能优化是不容忽视的。对于性能优化我们常常在项目完成时才去考虑，经常被推迟到项目的末期，甚至到暴露出严重的性能问题时才进行性能优化，相信大多数人对此深有体会。笔者认为，为了更多地避免这一情况，首先要重视起性能优化相关的工作，将其贯穿到整个产品设计与开发中。其次，就是了解性能相关的内容，在项目开发过程中，自然而然地进行性能优化。最后，也是最最重要的，那就是

2020-07-08 21:36:00 307

原创 javascript执行上下文栈

JavaScript深入之执行上下文栈顺序执行？如果要问到 JavaScript 代码执行顺序的话，想必写过 JavaScript 的开发者都会有个直观的印象，那就是顺序执行，毕竟：var foo = function () { console.log('foo1');}foo(); // foo1var foo = function () { console.log('foo2');}foo(); // foo2然而去看这段代码：function fo

2020-07-06 19:25:18 65

原创闭包与垃圾回收机制的关系

闭包与垃圾回收机制的关系内存生命周期不管什么程序语言，内存生命周期基本是一致的：分配你所需要的内存使用分配到的内存（读、写）不需要时将其释放\归还所有语言第二部分都是明确的。第一和第三部分在底层语言中是明确的，但在像JavaScript这些高级语言中，大部分都是隐含的。JavaScript 的内存分配值的初始化为了不让程序员费心分配内存，JavaScript 在定义变量时就完成了内存分配。var n = 123; // 给数值变量分配内存var s = "azerty"; // 给

2020-07-03 22:27:05 381

原创 apply、call、bind 区别

apply、call、bind 区别刚刚我们已经介绍了 apply、call、bind 都是可以改变 this 的指向的，但是这三个函数稍有不同。在 MDN 中定义 apply 如下；apply() 方法调用一个函数, 其具有一个指定的this值，以及作为一个数组（或类似数组的对象）提供的参数语法：fun.apply(thisArg, [argsArray])thisArg：在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this

2020-07-03 21:49:31 63

原创 this指向

this指向在js中this指向在严格模式和非严格模式下会有一些区别全局环境无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。// 在浏览器中, window 对象同时也是全局对象：console.log(this === window); // truea = 37;console.log(window.a); // 37this.b = "MDN";console.log(window.b) // "MDN"console.log(b)

2020-07-03 20:07:08 77

原创 js作用域与动态作用域区别

js作用域与动态作用域区别作用域作用域是指程序源代码中定义变量的区域。作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域。静态作用域与动态作用域因为 JavaScript 采用的是词法作用域，函数的作用域在函数定义的时候就决定了。而与词法作用域相对的是动态作用域，函数的作用域是在函数调用的时候才决定的。让我们认真看个例子就能明白之间的区别：var value = 1;function

2020-07-02 20:44:30 133

原创 js常见错误

js常见错误1. SyntaxError：语法错误// 1.1 变量名不符合规范var 1 // Uncaught SyntaxError: Unexpected numbervar 1a // Uncaught SyntaxError: Invalid or unexpected token// 1.2 给关键字赋值function = 5 // Uncau

2020-07-02 20:27:07 275

原创数据类型的划分及转换

数据类型的划分及转换比如下题：console.log(["0"] == [0]); // falseconsole.log(!["0"] == ![0]); // trueconsole.log(["0"]+0 == [0]+0); // true结果我们看到了，那我们今天就得好好说道说道各种运算符带来的隐式数据类型转换隐式类型转换隐式数据类型转换，也就是说这个转换过程不受我们强制 js 偷偷自己转的.如 10 - “5”结果为 5。按照道理数字和字符串是不能直接运算的。但是这里使用减号的

2020-06-18 20:07:58 96

原创常用git命令手册

常用Git命令手册1.安装GitLinuxsudo apt-get install gitWindow:到Git官网下载安装：https://git-scm.com/downloads2.配置全局用户Name和E-mail$ git config --global user.name "Your Name"$ git config --global user.email "email@example.com"3.初始化仓库git init4.添加文件到G

2020-06-18 19:34:10 117

原创 rem设计方案中有与font-size引起的问题

rem设计方案中有与font-size引起的问题在rem响应式设计中，根元素的font-size会根据文档显示区的宽而变化，这时inline元素容易引下面问题：这是由于inline元素默认继承html的font-size引起的解决方法：给文档的body元素设置较小font-size，覆盖掉html的font-sizehtml{ font-size:100px;}body{ font-size:16px;}...

2020-06-18 19:16:52 479

原创 html编码规范1

HTML编码规范1. img标签要写alt属性根据W3C标准，img标签要写alt属性，如果没有就写一个空的。但是一般要写一个有内容的，根据图片想要表达的意思，因为alt是在图片无法加载时显示的文字。如下不太好的写法：<img src="company-logo.svg" alt="ABC Company Logo">更好的写法：<img src="chime-logo.svg" alt="ABC Company">这里就不用告诉用户它是一个Logo了，直接告诉它是A

2020-06-10 21:58:11 182

原创浮动已经清除浮动

浮动与清除浮动浮动相关知识float属性的取值：left：元素向左浮动。right：元素向右浮动。none：默认值。元素不浮动，并会显示在其在文本中出现的位置。浮动的特性：浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。浮动元素的展示在不同情况下会有不同的

2020-06-09 19:22:49 100

原创 css 适配iPhone X

CSS 网页适配 iPhoneXiPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。适配之前需要了解的几个新知识安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图

2020-06-08 19:35:33 248

weixin_38015898的博客