javascript
juzipchy
好好学习 天天向上
展开
-
多线程的浏览器、单线程的JavaScript和Event Loop
我们经常看到这样的说法,浏览器是多线程的,而js是单线程的,以及事件队列(event loop)和异步回调的概念,现在总结下多线程的浏览器和单线程的JavaScript。CPUcpu是整个计算机的核心,一直在运行,完成计算机的各种计算任务,相当于一个工厂。进程进程可以看作工厂里的车间。工厂有很多车间,CPU就有很多进程。多个车间可以同时工作,多个进程也可以互不干扰独立完成工作。线程线程...原创 2019-12-30 20:25:21 · 315 阅读 · 0 评论 -
跨页面通信之postMessage
最近要写的一个页面内嵌了一个iframe,引入的页面是其他域名的页面。复页面需要获取子页面iframe里面的信息,这就需要子页面像父页面传值,首先想到了用iframe间的通信。// 子页面<div id='child'>i am a child</div> <script> window.onload = function() { ...原创 2019-12-25 16:53:44 · 955 阅读 · 0 评论 -
GitHub:pull request
Github 的一大特色就是 Pull Request 功能pull request定义:"Pull Request 是一种通知机制。你修改了他人的代码,将你的修改通知原来的作者,希望他合并你的修改,这就是 Pull Request。"Pull Request 本质上是一种软件的合作方式,是将涉及不同功能的代码,纳入主干的一种流程。这个过程中,还可以进行讨论、审核和修改代码Pull Request原创 2017-07-18 23:19:37 · 430 阅读 · 0 评论 -
前端演进史
什么是前端 维基百科是这样说的:前端Front-end和后端back-end是描述进程开始和结束的通用词汇。前端作用于采集输入信息,后端进行处理。计算机程序的界面样式,视觉呈现属于前端。从静态走向动态 我们都知道万维网(WWW)是欧洲核子研究组织的科学家为了方便看文档、传论文而创造的,这就是为什么Web网页都基于Document。Document就是用标记语言+超链接写成的由文字原创 2017-07-09 13:13:07 · 953 阅读 · 0 评论 -
javascript中bind另一个用法
看师傅写的代码时,遇到的一个问题,毫无疑问的又是被鄙视了。 下面总结下bind的用法:bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。1.绑定函数 我们知道bind的用法常用来跟call、apply比较, bind()最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值。将方法从对象中拿出原创 2017-07-10 23:44:44 · 388 阅读 · 0 评论 -
touch事件计算滑动距离
计算手势在手机屏幕上滑动时,手势滑动的距离,代码如下:function wetherScroll(){ var startX = startY = endX =endY =0; var body=document.getElementsByTagName("body"); body.bind('touchstart',function(even原创 2017-06-08 18:49:19 · 12125 阅读 · 0 评论 -
js中getBoundingClientRect()方法详解
getBoundingClientRect获取元素位置 getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。 getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。 该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height; 这里的t原创 2017-06-07 11:45:21 · 30759 阅读 · 1 评论 -
npm --save-dev --save 的区别
npm install 在安装 npm 包时,有两种命令参数可以把它们的信息写入 package.json 文件,一个是npm install--save另一个是 npm install –save-dev,他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下,--save-dev 则添加到 package.json 文件 devDep原创 2017-03-24 21:15:28 · 50032 阅读 · 3 评论 -
javascript数组遍历for in的一些坑
js中数组遍历的时候,常见的的是for循环,简单易懂for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]);}但这样写比较麻烦也许你想到了用数组的forEach方法遍历myArray.forEach(function (value) { console.log(value);});短原创 2017-04-20 20:38:03 · 10673 阅读 · 0 评论 -
什么是单页面应用(SPA)
单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中,仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了,SPA不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态的变换HTML的内(采用的是div切换显示和隐藏),从而实现U原创 2017-08-07 22:33:50 · 5237 阅读 · 0 评论 -
Object.keys用法总结
Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。也就是说我们可以用此方法罗列出对象的所有属性名传入对象,返回属性名var obj = {'a':'123','b':'345'};console.log(Object.原创 2017-07-24 20:32:10 · 7973 阅读 · 0 评论 -
前端技术演进史
好久前写了篇前端演进史 ,然而我师傅并不满意,让我写个前端技术发展史,如是有了这篇文章。 - - 什么是前端前端:针对浏览器的开发,代码在浏览器运行后端:针对服务器的开发,代码在服务器运行前后端不分的时代 互联网发展的早期,前后端开发是一体的,前端代码是后端代码的一部分。后端收到浏览器的请求生成静态页面发送到浏览器后端 MVC 的开发模式那时的网站开发,采用的是后端 MVC 模式。 M原创 2017-07-30 22:15:49 · 4682 阅读 · 0 评论 -
Web开发技术的演变
web发展了几十年,这期间,技术千变万化,很多技术都被淘汰了,我们并没有完整的经历过这个历史。下面介绍各项技术的革新。前后端不分 最初的web开发比较简单,开发者操控web服务器(经常还是他自己的服务器),有时候他还会写一些html代码放在指定的文件下。当发送html请求时,这些页面会出现。 以上返回的是静态内容,倘若查看网站的访问量或者放访问者填写包含姓名和邮箱的表单?可看到此模式的局限性。于原创 2017-08-06 10:15:33 · 1886 阅读 · 0 评论 -
什么是异步
通常,代码是由上往下依次执行的。如果有多个任务,就必需排队,前一个任务完成,后一个任务才会执行。这种执行模式称之为: 同步(synchronous) 。新手容易把计算机用语中的同步,和日常用语中的同步弄混淆。如,“把文件同步到云端”中的同步,指的是“使…保持一致”。而在计算机中,同步指的是任务从上往下依次执行的模式。比如:例 1A();B();C();在上述代码中,A、B、C 是三个不同的函数,原创 2017-09-14 20:13:17 · 771 阅读 · 0 评论 -
webpack(2):Loader
webpack 的目标是,让 webpack 聚焦于项目中的所有资源(asset),而浏览器不需要关注考虑这些(明确的说,这并不意味着所有资源(asset)都必须打包在一起)。webpack 把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理。然而 webpack 自身只理解 JavaScript。webpack loader 在文件被添加到依赖图中时,其转换原创 2017-09-17 15:47:29 · 409 阅读 · 0 评论 -
this易错点
1.如果不是用new调用,在函数里面使用this都是指代全局范围的this。foo = "bar"; function testThis() { this.foo = "foo"; } console.log(this.foo); //logs "bar" testThis(); console.log(this.foo); //logs "foo"除非你使用严格模式,原创 2017-10-28 12:13:53 · 317 阅读 · 0 评论 -
关于变量提升的易错点
一个简单的面试题:var name = 'World!';(function () { if (typeof name === 'undefined') { var name = 'Jack'; console.log('Goodbye ' + name); } else { console.log('Hello ' + name);原创 2017-10-28 18:31:08 · 407 阅读 · 2 评论 -
JavaScript栈内存和堆内存区别
和栈这两个字我们已经接触多很多次,那么具体是什么存在栈中什么存在堆中呢?就拿JavaScript中的变量来说: 首先JavaScript中的变量分为基本类型和引用类型。 基本类型就是保存在栈内存中的简单数据段,而引用类型指的是那些保存在堆内存中的对象。1、基本类型 基本类型有Undefined、Null、Boolean、Number 和S原创 2017-12-03 16:19:10 · 1926 阅读 · 0 评论 -
void 0 与 undefined的区别
在看《你不知道的JavaScript》的时候,看到了这个么一段代码. function foo() { var a = arguments[0] !== (void 0 ) ? arguments[0] : 2; return a; }void 0 返回undefined,我们都知道的,但是为什么不直接...原创 2019-01-13 21:03:31 · 19172 阅读 · 4 评论 -
Set数据结构实现数组的交集、并集、差集
Set数据结构是es6中新增的,它类似于数组,但是成员的值唯一,没有重复值。 Set本身是一个数据结构,用来生成Set数据节后Set数据结构的实例有4种遍历方法: keys():返回一个键名的遍历器 values():返回一个键值便利器 entries():返回一个键值对便利器 forEach():使用回调函数遍历每个成员由于Set数据结构没有键名,只有键值(或者说键名和键值是同一个值),原创 2017-04-20 22:06:07 · 1577 阅读 · 0 评论 -
数组去重
又是一个常见的面试题= =… 话说我最近怎么老是就面试题写博客总结下数组去重的四种常见的做法,以及相应的运行时间的比较: 方法1: 创建一个新的临时数组来保存数组中已有的元素Array.prototype.unique1 = function(){ var n = []; //一个新的临时数组 for(var i=0; i<this.length; i++){原创 2017-03-02 19:32:22 · 313 阅读 · 0 评论 -
js中var的重复声明
腾讯的一个笔试题,先看一下var a = 100;function fn() { alert(a); //undefined var a = 200; alert(a); //200}fn();alert(a); //100var a;alert(a); //100var a = 300;alert(a); //300前两个很简单,不解释原创 2017-04-12 09:11:16 · 7097 阅读 · 2 评论 -
json对象和json字符串之间的转化
1.使用jQuery插件$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象2.使用工具函数JSON.parse(jsonstr); //可以将json字符串转换成json对象JSON.stringify(jsonobj); //可以将json对象转换成json对符串 3.使用Javascript支持的转换原创 2017-02-17 21:19:18 · 342 阅读 · 0 评论 -
构造函数是否有new的区别
在JavaScript中,任何合法的函数都可以作为对象的构造函数,这既包括系统内置函数,也包括用户自己定义的函数。一旦函数被作为构造函数执行,它内部的this属性将引用函数本身。通常来说,构造函数没有返回值,它们只是初始化由this指针传递进来的对象,并且什么也不返回。如果一个函数有返回值,被返回的对象就成了new表达式的值。从形式上看,一个函数被作为构造函数还是普通函数执行的唯一区别,是否用new原创 2017-02-17 13:27:29 · 1848 阅读 · 0 评论 -
javascript常见错误(1)
看下面的代码:(function() { var x=foo(); var foo=function foo() { return “foobar”; }; return x;})();在编辑器后运行后返回“TypeError”为什么不是 “foobar”?原因出在 var foo=function foo() {return “foobar”};第一个原创 2017-02-15 20:54:00 · 796 阅读 · 0 评论 -
javascript中void()的用法
举个例子,void(0)这个写法看着很陌生,弄不明白是干什么的。实际上我们在写页面的时候在很多地方都使用到它了,只不过是没注意到罢了。 在这里进行一下介绍void是一元运算符,它出现在操作数之前,操作数可以是任意类型,操作数会照常计算,但忽略计算结果并返回undefined。由于void会忽略操作数的值,因此在操作数具有副作用的时候使用void来让程序更具语义console.log(void 0)原创 2017-02-16 22:04:48 · 2504 阅读 · 0 评论 -
基本数据类型的详细介绍
[0]5种数据类型: [0.1]基本数据类型:Undefined、Null、Boolean、Number、String [0.1.1]基本类型值是指简单的数据段,5种基本类型是按值访问的,因为可以操作保存在变量中的实际值 [0.1.2]基本类型的值在内存中占据固定大小的空间,被保存在栈内存中。从一个变量向另一个变量复制基本类型的值,会创建这个值的一个副本原创 2017-02-16 21:41:55 · 1617 阅读 · 0 评论 -
JavaScript中toStirng()与Object.prototype.toString.call()区别
一、toString()能将某一个值转化为字符串的方法。然而它是如何将一个值从一种类型转化为字符串类型的呢?1.将boolean类型的值转化为string类型:console.log(true.toString());//"true"console.log(false.toString());//"false"2.将string类型按其字面量形式输出:var str = "test123y";c原创 2017-02-16 21:22:18 · 815 阅读 · 0 评论 -
闭包与变量
闭包:有权访问另一个函数作用域中的变量的函数闭包只能取得包含函数中任何变量的最后一个值。闭包保存的是整个变量对象,而不是某个特殊的变量,下面这个例子可以清楚的说明这个问题。function createFunctions(){ var result = new Array(); for(var i=0; i<10;i++){ result[i]=原创 2017-02-07 18:49:16 · 443 阅读 · 0 评论 -
理解JavaScript里的 [].forEach.call() 写法
var divs = document.querySelectorAll('div');[].forEach.call(divs, function(div) { // do whatever div.style.color = "red";});初次看到 [].forEach.call() 这样的代码,我觉得这种写法很有趣,为什么要这样写?为什么要用空数值引申出的方法?于是研究了一下。转载 2016-12-23 18:41:23 · 2023 阅读 · 0 评论 -
一个常见的闭包函数的分析
先看个代码: //糟糕的例子 //构造一个函数,用错误的方式给一个数组中的节点设置事件处理程序 //当点击一个节点时,按照预期,应该弹出一个对话框显示节点的序号 //但它总是会显示节点的数目 var add_the_handlers=function(nodes){ var i; for(var i=0;i<nodes.lengt原创 2017-02-15 19:45:42 · 701 阅读 · 0 评论 -
if(3 == true)
昨天看了微店的一道面试题if(3 ==true)中if的返回结果应该是什么。 我个人觉得应该为true。写代码运行了下,结果为false。 又写代码测试了下结果。 alert(1=="1"); //true alert(1==true); //true alert(0==false); //true alert(-1==false); // false原创 2017-02-18 10:35:35 · 1690 阅读 · 0 评论 -
javascript中的一些坑
1.对象使用和属性 JavaScript 中所有变量都可以当作对象使用,除了两个例外 null 和 undefined。 一个常见的误解是数字的字面值(literal)不能当作对象使用。这是因为 JavaScript 解析器的一个错误, 它试图将点操作符解析为浮点数字面值的一部分。2.toString(); // 出错:SyntaxError有很多变通方法可以让数字的字面值看起来像对象。2..t原创 2017-03-20 18:35:18 · 408 阅读 · 0 评论 -
javascript中的prototype属性
在js中经常看到prototype,看了一遍,理解了后又忘了,- - …可能是理解的不够深入,现在写个博客总结下:每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数被用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和方法。你不需要显式地声明一个prototype属性,因为在原创 2017-02-23 11:21:10 · 369 阅读 · 2 评论 -
js中扩充类型的功能
javascript允许给语言的基本类型扩充功能,通过给Ojbject.prototype添加方法,可以让该方法对所有对象适用。这样的方式对数组、函数、字符串、数字、正则表达式和布尔值都适用。比如,我们可以给Function.prototype增加方法来使得该方法对所有函数可用: Function.prototype.method=function(name,fun){ this.p原创 2017-02-14 23:37:42 · 389 阅读 · 0 评论 -
js中的异常处理
js提供了一套异常处理机制,异常是干扰程序的正常流程的不寻常(但并非完全是出乎意料)的事故。当发现这样的事故时,你的程序应该抛出一个异常:var add=function(a,b){ if(typeof a!=="number"||typeof b!="number"){ throw { name:"typeerror",原创 2017-02-14 23:07:58 · 261 阅读 · 0 评论 -
原型链的理解
function obj(name){ if(name){ this.name = name; } return this;}obj.prototype.name = "name2";var a = obj("name1");var b = new obj;console.log(a.name); // name1console.log(window原创 2017-02-14 21:16:06 · 371 阅读 · 0 评论 -
函数中参数是否有var的区别
在牛客网上看了一个代码,很有意思,故记录下来,先来看一下代码<SCRIPT LANGUAGE="JavaScript">var bb = 1;function aa(bb) { bb = 2; alert(bb);};aa(bb);alert(bb);</SCRIPT>运行结果为2,1;不是我以为的2,2 看下面的代码,<script> var bb = 1;原创 2017-02-14 20:27:04 · 785 阅读 · 0 评论 -
跨域:JSONP
这几天在看面试题,发现跨域这个知识点被问到很多次,网上搜了搜各种资料,五花八门,- - …整了半天,算是明白了什么意思。总结如下:首先要明白的是:<script>标签是不受同源策略的限制的,它可以载入任意地方的 JavaScript 文件,而并不要求同源。同样的有src属性的标签都不受同源策略的限制,比如<img><iframe>.跨域的核心就是利用这个。JSONP 的理念就是,我和服务端约定好一个原创 2017-02-22 17:10:54 · 390 阅读 · 0 评论 -
javascript中的this使用总结
首先,我们在全局环境中看看它的 this 是什么: first. 浏览器:console.log(this);// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedS转载 2017-01-03 14:51:24 · 274 阅读 · 0 评论