javascript 学习整理
文章平均质量分 52
ynd_sg
种一棵树最好的时间是十年前,其次是现在
展开
-
前端知识点2
1. BFC相关知识点bfc内,盒子垂直排列;同一个bfc的两个元素的margin会发生垂直合并,使用bfc可保证margin都生效,因为bfc是页面上的一个独立容器,容器子元素不影响外面的元素计算bfc高度,浮动元素也算在内bfc的区域不会与float box重叠,所以一个兄弟元素为float时,防止两者重叠,可把一个元素设置bfc创建bfc根元素浮动元素,float不为noneposition为absolute或fixedoverflow不为visible的元素display为i原创 2020-05-29 18:32:37 · 213 阅读 · 0 评论 -
前端知识总结
1. async 和 defer的相同点和区别defer 延迟加载async 异步加载defer和async在“下载”这块是一样的,都是异步不会阻塞html的解析区别在于何时执行,async不管声明顺序如何,加载完了后会立刻执行defer将在页面完成解析时(domcontentloaded)执行,同时是按照加载顺序执行的w3school的说法:如果 async=“async”:脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)如果不使用 async 且 defer=“原创 2020-05-29 19:56:29 · 366 阅读 · 0 评论 -
由es6 class的super引发的思考
前言: 我能理解为什么有些人那么喜欢语言了,或许这就是一种探索发现的魅力吧。一种语言的成型蕴含了它的设计思想。我们经常遇到这种(mdn截图):你也是class,我也是class,凭什么我继承了你就不能主宰自己的this。es5没有这么说过。我想这是一种规范,内部肯定做了什么骚操作,那就一起看一下吧。es6写法如下:class a{}class b extends a{ const...原创 2020-01-06 16:16:59 · 522 阅读 · 0 评论 -
ajax的传输
1. 同步(sync)和异步(async)同步:事情一件一件的做,做完这件事才能做另一件事,像排队一样要按先后顺序;异步:不必按先后顺序,可以使得事件顺序动态改变,使得不会阻塞。在与服务器进行通信的时候,利用ajax和服务器进行异步传输,发送请求的同时即使未响应完毕,还能做其他事情ajax相当于在客户端和服务器之间架起一个中间站,像表单验证或其他少量数据交换时,将请求发送给中间站,...原创 2018-04-05 14:36:50 · 233 阅读 · 0 评论 -
实例对象、构造函数和原型之间的关系
首先转载一张图(转自:https://www.cnblogs.com/lml-lml/p/6880757.html):实例对象拥有__proto__和constructor属性,前者指向构造函数的原型,后者指向构造函数;构造函数与普通函数不一样,多拥有一个prototype属性,指向它的prototype原型;__proto__属性指向构造函数的对象类型(先是Function类型,往上是Objec...原创 2018-03-29 16:32:42 · 725 阅读 · 0 评论 -
跨浏览器的事件对象-------EventUtil 中的方法总结
什么是EventUti----封装好的事件对象点击事件先后顺序=>>>mousedown>mouseup>click在JavaScript中,DOM0级、DOM2级与旧版本IE(8-)为对象添加事件的方法不同为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序习惯上,这个方法属于一个名为EventUtil的对象编写并...转载 2018-04-04 00:46:32 · 268 阅读 · 0 评论 -
一些表单脚本知识
1. 选择表单:取得某个表单:document.forms[0];或者document.forms["form2"]; 前者通过下标,后者通过标签name值确定取得表单中的某个字段:document.forms[0].element["color"]:选中第一个表单中name为color的,当然也可以通过下表选中2. 文本框脚本创建一个文本框,让它能够显示 25 个字符,但输入不能超过 50 个字...原创 2018-04-04 00:43:51 · 113 阅读 · 0 评论 -
keyCode和charCode,keydown和keypress的区别
keyCode:键盘按键码,每个键有一个编码;charCode:字符编码;两者较大的区别是keyCode不会区分大小写字母,只能判断按下的键;keydown: 只要按键就会触发,返回键盘代码,能捕获多个字符;keypress:按下能影响屏幕上字符的显示,如退格键,或在屏幕上输出的数为字母、数字才会触发,返回ASCII码,只能捕获单个字符...原创 2018-04-03 10:25:13 · 1150 阅读 · 0 评论 -
性能优化的一些措施
1. 使用最新的库最新的库进行了bug修复和优化2. 使用合适的选择器以jquery为例,提升性能的优先顺序是:1)$("#content"),如果想找没有设置id的元素,可以通过$("#content").find("div"),从最近有id的元素开始向下搜索2)$("p")、$("div"),直接以标签进行选择3)以类进行选择4)$("[attribute=value]")5) 利用原创 2018-04-15 19:42:20 · 163 阅读 · 0 评论 -
对闭包的理解
今天看了一下《你不知道的JavaScript》,到闭包那一讲,发现自己之前其实并不是很懂。 闭包,百科上解释是能够读取其他函数内部变量的函数,拿书中的例子来说:function foo() { var a = 2; function bar() { console.log( a ); }return bar;}var baz = foo();baz();...原创 2018-05-11 19:29:58 · 332 阅读 · 0 评论 -
关于JavaScript对象
在javascript中对象是一种基本的数据类型,在数据结构上是一种散列表,可以看作是属性的无序集合,除了原始值其他一切都是对象。它可以用来表示现实世界中或者我们大脑中抽象出来的客体,这和其他面向对象的编程语言有些类似,但js并不是面向对象的而是基于对象的,因为典型的面向对象要求封装、继承和多态,而javascript中的对象只是做到了封装,而继承可以通过原型或者借用别人家的构造函数来...转载 2018-07-08 11:13:02 · 171 阅读 · 0 评论 -
《高性能JavaScript》学习总结
1. js引擎的执行过程代码执行时长(性能)字符串的连接str+=a+b:内存中创建临时字符串,将a+b的值赋值给临时字符串,将临时字符串和str相加,得到的结果赋值给strstr=str+a+b:将a添加到str后进行连接,然后将b再添加到后面str=a+b+str,执行过程和str+=a+b差不多,需要分配临时字符串当进行字符串拼接时,由于“+=”会拷贝很长的字符串,使用数组的j...原创 2018-12-01 12:55:01 · 125 阅读 · 0 评论 -
前端性能优化
1. 函数防抖(debounce)//函数防抖var timer=null;window.onresize=function(){clearTimeout(timer);timer=setTimeout(function(){ console.log(12); },1000)}2. 函数节流(throttle)let canRun=truewindow.onr...原创 2018-11-28 20:58:08 · 180 阅读 · 0 评论 -
js 事件循环理解
(注:图片来自https://juejin.im/post/5d5b4c2df265da03dd3d73e5#heading-5)事件循环包括宏任务和微任务。宏任务的优先级为:setTimeout>setInterVal>setImmediate>I/O微任务的优先级为:promise.nextTick>promise>MutationObserver...原创 2018-12-06 14:25:10 · 168 阅读 · 0 评论 -
手写实现apply,call,bind和数组es5方法
1. apply方法(注意没有传context或者为undefined或null或string,number类型时的上下文context)Function.prototype._apply=function(context){ if(context===undefined||context===null){ context=window; } if(typeof context==...原创 2018-12-21 00:17:40 · 585 阅读 · 0 评论 -
es6 generator知识点
//generator模拟next方法function gener(arr){ var index=0; return{ next:function(){ return index<arr.length?{value:arr[index++],done:false}:{value:undefined,done:true}; } }};如下所示,迭代器调用,使用r...原创 2019-01-03 16:34:33 · 119 阅读 · 0 评论 -
js 基本包装类型
1. Boolean类型var falseObject = new Boolean(false);//falseObject是对象var result = falseObject && true;alert(result); //truevar falseValue = false;//基本类型,booleanresult = falseValue && ...原创 2018-03-27 17:03:43 · 207 阅读 · 0 评论 -
js 函数内部属性arguments.callee
函数的参数是一个叫arguments的数组,保存数组参数,arguments有一个叫callee的属性,是一个指针,指向拥有该arguments对象的函数,例如阶乘函数:function factorial(num){if (num <=1) {return 1;} else {return num * factorial(num-1)}}为消除该函数的内容与函数名之间...原创 2018-03-27 14:21:46 · 398 阅读 · 0 评论 -
javascript中call()、apply()及bind()
function SuperType() { this.color=["red","blue","green"]; } function SubType() { SuperType.call(this);//继承SuperType,在SubType()中写的这段代码,表明SubType继承了SuperType的 ...原创 2017-11-08 12:15:06 · 158 阅读 · 0 评论 -
JavaScript——创建文本节点
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style type="text/css">.message{ width:200px; height:100px; backgr原创 2017-11-09 20:56:54 · 621 阅读 · 0 评论 -
javascript学习指南——先导片
javascript学习: - 带有src属性的&lt;script&gt;元素不应该在其&lt;script&gt;和&lt;/script&gt;标签之间再包含额外的JavaScript代码,如果包含了嵌入的代码,只会下载并执行外部脚本文件,嵌入的代码会被忽略 - 标准模式和混杂模式的区分点:主要为css方面,也会影响JavaScript 标准模式和混杂模式区别 - &lt;nos原创 2017-11-06 10:47:36 · 3991 阅读 · 0 评论 -
document.ready和window.onload的区别
在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完)。而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比wi转载 2017-11-30 20:13:44 · 317 阅读 · 0 评论 -
理解js创建对象和继承的方式及优缺点
以下以《JavaScript高级程序设计》例子为例。一、创建对象的方式1. 工厂模式:function createPerson(name,age,job){ let o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ console....原创 2018-03-29 20:26:07 · 1362 阅读 · 0 评论 -
深入理解JavaScript
js是否万物皆对象:经常在国内的各大网站博客上看到一句话,叫做JS中万物皆对象,那是否真是如此?那么,我们先来捋一捋JS中的数据类型,JS中的数据类型有下面几种UndefinedNullBooleanNumberStringSymbol (ES6中新增)Object所以本质上真的都是Object? -- NO1.数据类型在JS中我们把前面六种类型称为为基本数据类型,最后一种则是复杂数据类型,也就是...转载 2018-03-20 14:05:02 · 250 阅读 · 0 评论 -
javascript中return,return true,return false三者的用法及区别
1.语法及返回方式①返回控制与函数结果 语法为:return 表达式; 语句结果函数的执行,返回调用函数,而且把表达式的值作为函数结果返回出去②返回控制无函数结果 语法为:return; 在大多数情况下,为事件处理函数如果让其返回false,可以防止默认的事件行为.例如,默认情况下,点击一个<a>标签元素,页面会跳转到该元素hre...转载 2018-04-07 15:05:12 · 582 阅读 · 0 评论 -
js中的delete操作符与内部属性
在讲解Configurable之前,我们首先来看一道面试题:a = 1;console.log( window.a ); // 1console.log( delete window.a ); // trueconsole.log( window.a ); // undefinedvar b = 2;console.log( window.b ); // 2console.lo...转载 2018-03-31 12:36:57 · 350 阅读 · 0 评论 -
关于js中的节点
选取元素时,若是通过document.getElementsByTagName等方式选取,记得在后面加[0];最常见的是用id引用说说Node的分类: | 类型 | nodeType | | ----------- | -------- | | 元素 Element | 1 | | 属性 Attr | ...原创 2018-03-31 21:45:25 · 247 阅读 · 0 评论 -
js 函数参数按值传递的理解
例子选自《javas高级程序设计》1.基本类型按值传递function addTen(num) {num += 10;return num;}var count = 20;var result = addTen(count);alert(count); //20,没有变化alert(result); //30在执行addTen(count)时,将20这个值复制一份传递到了num中,...原创 2018-03-26 15:01:53 · 1144 阅读 · 0 评论 -
深拷贝和浅拷贝的理解与应用
对象拷贝(Object Copy)就是将一个对象的属性拷贝到另一个有着相同类类型的对象中去。在程序中拷贝对象是很常见的,主要是为了在新的上下文环境中复用对象的部分或全部 数据。JavaScript中有两种类型的对象拷贝:浅拷贝(Shallow Copy)、深拷贝(Deep Copy)。深拷贝与浅拷贝的区别深复制和浅复制最根本的区别在于是否是真正获取了一个对象的复制实体,而不是引用。...转载 2018-03-22 11:33:24 · 197 阅读 · 0 评论 -
js判断引用类型之Array
判断引用类型的方法有几种1. typeof,如果是引用类型,只会返回object2. instanceof返回object对象的实例,如var arr=[1,23,4];arr instanceof Array会返回true3. 原型链方法即arr._proto_.constructor==Array或者arr.constructor==Array,但这种方法有兼容,在IE早期...原创 2018-03-26 20:24:45 · 318 阅读 · 0 评论 -
DOM操作中的引用
1. 引用动态脚本时,由于IE将 <script> 视为一个特殊的元素,不允许 DOM 访问其子节点,需要用到text属性,为兼容浏览器得如下:function loadScriptString(code){var script = document.createElement("script");script.type = "text/javascript";try {scr...原创 2018-04-01 19:37:05 · 290 阅读 · 0 评论 -
js中的sort()及数组操作方法
js中的sort()和java中的有很大的不同,js中默认是调用每个数组项的 toString() 转型方法,然后比较得到的字符串(Unicode字符集编码),两两比较以确定如何排序,类似冒泡。Unicode:http://tool.chinaz.com/tools/unicode.aspx于是需要传入一个比较函数,如: var arr = [4,3,6,5,7,2,1];ar...原创 2018-03-26 21:07:15 · 307 阅读 · 0 评论 -
js中的事件及处理程序
DOM事件流是先捕获,再冒泡,目标事件被看做冒泡阶段的一部分DOM2级事件增添和删除事件:addEventListener()和removeEventListener(匿名函数不能被移除,因为和添加的匿名函数不是同一个),都接收3个参数:处理事件名、程序处理的函数、布尔值(为true表示在捕获阶段调用函数,为false表示在冒泡阶段调用函数),如:var btn = document.g...原创 2018-04-02 14:15:39 · 192 阅读 · 0 评论 -
js RegExp类型属性和方法
/** 匹配所有以"at"结尾的 3 个字符的组合,不区分大小写*/var pattern3 = /.at/gi;/** 匹配所有".at",不区分大小写*/var pattern4 = /\.at/gi;对于 pattern3 来说,句点表示位于 "at" 之前的任意一个可以构成匹配项的字符。但如果想匹配 ".at" ,则必须对句点本身进行转义,如 pattern4 所示。RegExp 的每个实...原创 2018-03-27 13:24:21 · 873 阅读 · 0 评论