JS修炼之路
VisonYH
这个作者很懒,什么都没留下…
展开
-
gulp配置使用教程
mark一下这篇文章。 https://www.cnblogs.com/2050/p/4198792.html转载 2017-12-19 21:15:23 · 388 阅读 · 0 评论 -
DOM映射机制
其实通过JS获得的DOM元素只是真实DOM树中的一个引用,二者引用的是同一块堆内存中的数据,因此二者任何一个改变了,另一个自动跟着改变。 原文地址: https://www.cnblogs.com/rainbow8590/p/7096153.html...转载 2018-01-20 17:27:36 · 430 阅读 · 0 评论 -
DOM的重绘与回流
原文地址: http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/转载 2018-01-20 17:17:07 · 955 阅读 · 0 评论 -
JavaScript闭包详解
http://www.jb51.net/article/24101.htm转载 2017-08-10 17:27:24 · 189 阅读 · 0 评论 -
JS系列总结笔记——1. JavaScript的预解释机制(变量提升)
1. 概念当浏览器加载HTML页面时,会先提供一个供全局JS代码执行的环境(即全局作用域,window或者global),在这个环境中,浏览器默认会把所有带var和function的变量进行提前声明或者定义。 (1) 理解声明和定义;var num = 12;// 声明: 告诉浏览器在全局作用域中有一个num变量// 定义: 给变量进行赋值// 使用只声明未定义的变量值为und...原创 2018-03-20 20:05:21 · 190 阅读 · 0 评论 -
JS系列总结笔记——2. JavaScript函数执行内部原理
1. 函数执行的步骤JavaScript函数执行时的步骤如下: (1) 形成新的私有作用域; (2) 如果有形参,先给形参赋值; (3) 进行私有作用域中的预解释(预解释原理); (4) 私有作用域中的代码从上到下执行。2. 区分私有变量和全局变量全局变量:在全局(window)下声明的变量即全局变量;私有变量:在JavaScript(不包含es6)函数内部声明的变...原创 2018-03-21 10:22:05 · 421 阅读 · 0 评论 -
JS系列总结笔记——3. 深入理解JS中的this
1. 定义JS中的this代表的是当前行为执行的主体,context指的是当前行为执行的环境(区域)。 例如:我在餐厅吃饭和我在食堂吃饭,this都是我,改变的是执行环境。2.判断this到底是谁函数执行,首先看执行时函数名前是否有 “ . ”,有的话前面是谁this就是谁,没有的话this就是window。function fn() {console.log(t...原创 2018-03-21 10:51:10 · 166 阅读 · 0 评论 -
利用数组创建JS的队列结构
var Queue = (function(){ function enqueue(element){ this.dataStore.push(element); }; function dequeue(){ return this.dataStore.shift(); }; function front(){ ...原创 2018-04-08 15:51:05 · 135 阅读 · 0 评论 -
JS系列总结笔记——4.JS继承
1.类式继承// 父类var SuperClass = function() { this.superValue = true;}// 子类var SubClass = function() { this.subValue = false;}SubClass.prototype = new SuperClass(); // 原型指向父类的实例,即可继承父类的...原创 2018-03-21 22:02:50 · 102 阅读 · 0 评论 -
模拟创建JS的链表结构
1.单向链表概念:链表是由一组节点组成的集合。 每个节点都使用一个对象的引用指向它的后继。 指向另一个节点的引用叫做链。 直接上代码:var LList = function() { var Node = function(element) { this.element = element; this.next = null; };...原创 2018-04-08 18:04:05 · 199 阅读 · 0 评论 -
JavaScript异步编程
参考阮一峰老师的: 1.Javascript异步编程的4种方法 2.async 函数的含义和用法转载 2018-04-08 19:05:25 · 94 阅读 · 0 评论 -
模块化
参考: 1. import、require、export、module.exports 混合使用详解转载 2018-04-15 20:25:24 · 132 阅读 · 0 评论 -
JS系列总结笔记——7.创建型设计模式
概念:创建型设计模式是一类处理对象创建的设计模式,通过某种方式控制对象的创建来避免基本对象创建时可能导致设计上的问题或增加设计上的复杂度。1. 简单工厂模式概念:又叫静态工厂方法,由一个工厂对象决定创建某一种产品对象类的实例,主要用来创建同一类对象。function createPop(type, text) { var o = new Object(); ...原创 2018-04-04 16:17:45 · 124 阅读 · 0 评论 -
利用数组创建JS的栈结构
1. 实现源码var Stack = function(){ function pop(){ return this.dataStore[--this.top]; }; function push(element){ this.dataStore[this.top++] = element; }; function p...原创 2018-04-04 19:19:00 · 205 阅读 · 0 评论 -
深入理解JavaScript异步编程
参考: 1. JavaScript 运行机制详解:再谈Event Loop 2. 深入理解 JavaScript 事件循环(一)— event loop 3. JS 事件循环机制 - 任务队列、web API、JS主线程的相互协同 4. HTML5新特性之Mutation Observer 5. Vue 中如何使用 MutationObserver 做批量处理? 6. Promise简...转载 2018-04-23 21:55:20 · 131 阅读 · 0 评论 -
event loop
参考: 1. JavaScript 异步、栈、事件循环、任务队列 2. 从event loop规范探究javaScript异步及浏览器更新渲染时机 3. 深入探究 eventloop 与浏览器渲染的时序问题 4. 从Vue.js源码看异步更新DOM策略及nextTick...转载 2018-04-25 13:22:55 · 106 阅读 · 0 评论 -
JS盒子模型
概念:JS盒子模型是指通过JS提供的一系列属性和方法,获取页面元素的样式信息值。以 div 元素为例,div 有很多私有属性和原型链上的公有方法,其原型链继承关系是:HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype -> Node.prototype -> EventTarg...原创 2018-01-21 15:12:27 · 388 阅读 · 0 评论 -
JavaScript中的prototype、__proto__、constructor图解
首先必须明确的是,prototype属性属于构造函数,__proto__属于对象,constructor属于对象和prototype对象。定义一个Person构造函数function Person(){}Person.prototype.name="VisonYH";Person.prototype.age=23;Person.prototype.job='xx';Person.proto...原创 2017-08-11 15:30:21 · 245 阅读 · 0 评论 -
JavaScript正则
https://www.cnblogs.com/moqing/archive/2016/07/13/5665126.html转载 2017-12-11 18:50:29 · 111 阅读 · 0 评论 -
JavaScript作用域
JavaScript作用域1. 全局作用域一般来说,以下三种情况下的变量拥有全局作用域。(1)最外层的函数以及最外层声明的变量,例如:var globalVar="variable"; //具有全局作用域的变量//具有全局作用域的函数function golbalFun(){console.log("I am a global function");}(...原创 2017-12-03 13:04:10 · 216 阅读 · 0 评论 -
JavaScript中的this详解
JS中的this指的是当前行为主体,context代表的是当前行为执行的环境,this和函数的context没有任何关系。那么问题来了,如何区分this?1、函数执行,首先看函数前有没有“.”,若有,则前面是谁this就是谁,若没有,this就是window;例如:function fn(){ console.log(this);}var obj={fn:fn};var oo={原创 2017-12-03 21:11:13 · 156 阅读 · 0 评论 -
饿了么项目总结(更新中...)
一、使用webpack初始化项目1. npm install -g vue-cli 2. vue init webpack “项目名” 创建项目,不安装单元测试和e2e测试3. 生成的目录中,build 和 config是配置文件。二、项目文件构建1. 在src目录下新建common文件夹,文件夹中包含js、fonts、stylus文件夹。2. 在component文件夹中新建header原创 2017-12-21 14:16:30 · 2253 阅读 · 0 评论 -
一像素边框实现
直接上代码(stylus代码) 1. 边框实现border-1px($color) position: relative &:after display: block position: absolute left: 0 bottom: 0 width: 100% border-bott原创 2017-12-21 19:53:08 · 295 阅读 · 0 评论 -
获取元素CSS属性值
DOMObj.style[attr] 只能获取行内样式,在现代浏览器中,有DOMObj.getComputedStyle 方法可以获得浏览器渲染计算后的属性值。 以下就不同浏览器中进行获取 css 样式进行封装。 //需要规避复合值的问题 margin padding //把带获取到带单位的把单位去掉 px em pt rem deg function ge原创 2018-01-21 16:46:27 · 2116 阅读 · 0 评论 -
null和undefined的区别
我们先来看 null 和 undefined 的相同之处:二者在转为布尔值时均为 falseif (!null) { console.log('null is converted to false!');}if (!undefined) { console.log('undefined is converted to false!);}二者在不严格相等的情况下是等价的原创 2018-01-21 20:25:49 · 151 阅读 · 0 评论 -
JS中的offsetParent和parentNode 以及 获取元素相对body的偏移值
1. JS 中的 offsetParent 和 parentNode在正常的文档流中,元素的 offsetParent 值为 body 元素,offsetLeft 和offsetTop 获取的也是相对于 body 的偏移量;而 parentNode 指的是元素的父节点。 2. 获取元素相对于 body 的偏移量需要考虑到非正常文档流中(有关元素不处于正常文档流的情况,这里不原创 2018-01-21 21:59:11 · 1022 阅读 · 0 评论 -
JS中的正则
1. JS 正则概念: 用来处理字符串的规则。每一个正则表达式都是由元字符和修饰符组成。 元字符: 在 / / 之间具有意义的一些字符 修饰符:g(全局匹配) 、i(忽略大小写)、m(多行匹配)\ 转义字符 ^ 以某元字符开始 /^\d/ 以数字开头 $ 以某元字符结束 /\d$/以数字结束 . 除了 \n以外的任意字符代表出现次数的量词元字符:原创 2018-01-22 21:44:17 · 463 阅读 · 0 评论 -
AJAX创建相关
AJAX创建过程分为经典的四步,以下分步阐述其过程及要点。1. 创建AJAX对象;var xhr = new XMLHTTPRequest; // IE6及以下不兼容2. 发送前的基本信息配置:配置请求方式(GET、POST、PUT、DELETE、HEAD…);打开一个URL地址(配置向哪一个服务器地址发送请求);同步还是异步(true异步,false同步,默认是tru原创 2018-01-26 11:39:15 · 147 阅读 · 0 评论 -
Node中的异步和单线程
传统多线程异步 传统的异步是多线程的,当要同时做两件事的时候,他们是执行在不同的线程里的。这就像是柜台卖东西,来了一个人就得找一个员工陪他,直到这个人走了这个员工才能接待下一个客人。店内的员工就像线程池里的空闲线程,空闲的时候可以去接待客人,可是同时只能接待一个人,要接待其他人就得找另外一个人。 电脑里的线程相当于一个员工团队,哪里需要去哪里。多线程的异步好处在于可以更多的转载 2018-01-19 17:16:34 · 204 阅读 · 0 评论 -
数组的常用方法
转换方法toLocalString()、toString()、valueOf()var color = ['red','blue','green']; console.log(color.toString());console.log(color.valueOf());console.log(color.toLocaleString());结果如下:补充转载 2018-01-20 14:03:41 · 146 阅读 · 0 评论 -
JS 设计模式
原文转自腾讯前端: http://www.alloyteam.com/2012/10/commonly-javascript-design-patterns-combined-mode/https://www.cnblogs.com/tugenhua0707/p/5198407.html转载 2018-01-20 17:44:55 · 144 阅读 · 0 评论 -
DOM详解
原文转自: https://github.com/jserz/js_piece/tree/master/DOM转载 2018-01-20 17:46:00 · 165 阅读 · 0 评论 -
JS系列总结笔记——5.深入理解call、apply、bind方法
1. call方法的作用说明:在js中所有的函数都是Function的实例,而且对于Function来说,它的原型即Function.prototype中含有很多东西,其中call,apply和bind方法就是Function原型中的方法,所以根据原型的规则,所有的函数都可以使用原型中属性和方法,所以来说,对于所有的函数都可以使用call、apply、bind方法。 作用:而在JavaScr...原创 2018-03-22 18:16:32 · 190 阅读 · 0 评论 -
JS系列总结笔记——6.深入数组的sort方法
1. sort方法使用说明该方法接收一个函数作为参数,该函数在sort方法内部执行n-1次。该函数的两个参数分别对应数组每次比较的两项。var arr = [2,1,4,3,6,7,5];arr.sort(function(a,b){ console.log(a,b);});执行结果为: 正常来说,该方法的排序需要自己传入相应的回调函数。例如实现数字数组的排序函...原创 2018-03-23 22:02:34 · 167 阅读 · 0 评论 -
JavaScript核心概念——执行环境、执行环境栈、变量对象、活动对象
1.执行环境(Execution Context)什么是执行环境(Execution Context)? “每当程序的执行流进入到一个可执行的代码时,就进入到了一个执行环境中。”执行环境栈(Execution Stack) 执行流依次进入的执行环境在逻辑上形成了一个栈,栈的底部永远是全局环境,栈的顶部则是处于活动状态当前的执行环境(浏览器总是执行处于栈顶的上下文)。当执行...转载 2018-05-11 21:24:40 · 293 阅读 · 1 评论