![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端HTML+CSS+学习笔记+理解
菜鸡的全栈路
本博客仅供自己在学习、工作的过程中记录、总结,以便日后复习。当然本着开源的精神,如果能帮助到他人,也是一件很高兴的事情。
展开
-
每日一题1023之JavaScript作用域、异常、声明
(function(){ try{ var e; //此处为了正常说明问题,声明了对象e,正常情况下不需要声明catch的参数 throw new Error(); }catch(e){ var x = 1, y = 2; console.log("e:" + e); console.log("x:" + x); } console.log原创 2018-10-23 18:15:25 · 256 阅读 · 0 评论 -
对象枚举 this
对象枚举 thisfor in 遍历对象缺点:会遍历出对象被修改的系统自带属性,例如__proto__:{}改正方法:借用hasOwnProperty(参数)来判断是否是自身属性。in作用判断能不能访问到改属性,不过父亲的属性也会返回true.A instanceof B:判断对象A是不是由构造函数B,构造出来的。(看A对象的原型链上有没有B的原型。)当一个函数被new...原创 2018-11-03 11:26:28 · 288 阅读 · 0 评论 -
数组 类数组
数组常用方法: 改变原数组: push():向数组末尾添加一个或多个元素。 pop():删除并返回数组的最后一个元素。 shift(): 删除并返回数组的第一个元素。 unshift():在数组开头添加一个或多个元素。 sort():对数组进行排序。内部调用toString()转为字符串按照字符编码进行排序。 想要按照其他标准...原创 2018-11-03 14:38:50 · 289 阅读 · 0 评论 -
Date 定时器
setInterval(function(){},time);(数据结构基于红黑树,计时不准确)time是毫秒,表示每隔time毫秒就执行一次function,并且time值只获取一次,即使后面time改变,定时器也不会变。是window上的方法。有返回值,每一个setInterval都会返回一个数字作为唯一标识。而方法clearInterval(参数);可以让定时器停止,参数为定时器的唯...原创 2018-11-14 15:40:46 · 135 阅读 · 0 评论 -
DOM节点增(创建)、 插(插入html) 删 替换
插入:若选择页面已有的一个元素插入到页面另一个位置,也原位置处该元素消失,出现在新位置。即插入是剪切操作。insertBefore()在父节点里面插入一个元素a在b的前面。封装insertAfter(),实现insertBefore()类似的功能: Element.prototype.insertAfter=function(elem,after){ var befor...原创 2018-11-14 15:41:27 · 1049 阅读 · 0 评论 -
深度克隆剖析
// 深度遍历// 思路:// 遍历对象 for (var key in object)// 判断是否是原始值 typeof // 判断是对象还是数组 instanceof看原型链有无其原型 toString constructor (因父子域问题最好使用toString) // 建立相应的数组或对象function d...原创 2019-03-22 15:24:07 · 135 阅读 · 0 评论 -
尾调用与尾递归
尾调用当一个函数执行时的最后一个步骤是返回(return)另一个函数的调用时,就叫做尾调用。函数调用会在内存形成一个"调用记录",又称"调用帧"(call frame),保存调用位置和内部变量等信息。如果在函数A的内部调用函数B,那么在A的调用记录上方,还会形成一个B的调用记录。等到B运行结束,将结果返回到A,B的调用记录才会消失。如果函数B内部还调用函数C,那就还有一个C的调用记录栈,以此...原创 2019-03-22 18:39:46 · 331 阅读 · 0 评论 -
Less基础使用
声明变量@a= 300px;.border(@width){ border:@width solid red;}使用变量.box{ width:@a; .border(20px);}样式计算.box{ width:300px; .tri{ width:100% +30px; }}此处css解析结果为父级的130%,即390px,很显然这是错误的,我...原创 2019-04-05 17:52:15 · 225 阅读 · 0 评论 -
防抖节流源码实现
关于防抖节流基础介绍及基础实现参见上篇博客:函数防抖与节流,本节为扩展功能源码防抖源码封装:<!DOCTYPE html><html><head> <title></title></head><body> <input type="text" name=""> <button&g...原创 2019-04-10 16:23:17 · 680 阅读 · 0 评论 -
canvas基础及svg
canvas的使用页面上有一个canvas标签获取到这个标签var canvas = decument.ElementsByTagName(“canvas”);得到一个用于在画布上绘图的环境。var ctx = canvas.getContext(“2d”) //目前只支持2d在CanvasRenderingContext2D 对象的原型链上编程,例如画一个扇形C...原创 2019-04-11 11:06:09 · 307 阅读 · 0 评论 -
canvas应用之刮刮乐实现
<!DOCTYPE html><html><head> <title>刮刮乐</title></head><body> <canvas id="can" width="500" height="500"></canvas> <script type="text/javas...原创 2019-04-11 15:29:35 · 530 阅读 · 0 评论 -
拖拽源码
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .box{ width: 100px; height: 100px; top: 50px; left: 50px; position: absolut...原创 2019-04-08 14:12:13 · 511 阅读 · 0 评论 -
iframe内联
iframe是什么?就是一个标签,dom元素。有什么作用?网页嵌套网页;如:导航栏tab切换页、在线编辑器、广告植入。历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案。跨域通信等;iframe 优缺点?iframe会阻塞页面加载;(页面阻塞)当一个页面的iframe标签过多时,会导致刷新图标一直转圈,给人一种迟迟没有加载好的感觉。因为window的onload事件只...原创 2019-04-08 22:16:43 · 236 阅读 · 0 评论 -
原型 原型链 call/apply 继承模式
原型 原型链 call/apply 继承模式 构造函数的三段式隐式生成对象this={},生成的this并不是空对象,而是有__proto__:Person.prototype,指向当前引用的原型。prototype(原型)会先找自己有没有这个属性,如果没有会沿着__proto__指向的寻找有没有。可以修改__proto__的指向。方法里的this指向:谁调用此方法,就指向谁。...原创 2018-11-03 11:24:51 · 490 阅读 · 0 评论 -
arguments
arguments.callee 指向函数引用,作用:立即执行函数无函数名,自身内部递归时无法写自身函数名,可用arguments.callee指向自身函数引用。arguments上的属性只有callee和兰斯。caller是指向函数被调用的环境。判断是否是原始值:typeof()判断是数组还是对象:三种 ①instanceof ②tostring ③con...原创 2018-11-03 11:21:33 · 1002 阅读 · 0 评论 -
JavaScript理解笔记——方法 apply 装饰器
绑定在对象上的函数称为方法,与普通函数无区别,但在内部使用一个this关键字。this始终指向当前对象。要保证this指向正确,必须用this.xxx();形式调用。可以在方法内部定义其他函数,但注意(必须)在定义的函数前捕获this:var that=this;否则出错。可以使用apply控制this的指向。用apply修复函数调用:unction getAge() {...原创 2018-10-27 10:40:26 · 162 阅读 · 0 评论 -
JavaScript理解笔记—变量提升 全局作用域 名字空间
JavaScript会扫描整个函数体,把所有申明的变量提升到函数顶部。注:var x=‘Tom’ 只提升声明,不提升赋值。例如:console.log(x);var x=‘Tom’; 运行不会报错,输出为:undefined上述语句等效为:var x;console.log(x);x=‘Tom’;所以在函数内定义变量时,要首先声明所有变量。在函数外定义的变量为全局作用域,JavaS...原创 2018-10-29 13:27:19 · 169 阅读 · 0 评论 -
JavaScript理解笔记—解构赋值
解构赋值 (存在高阶使用:liaoxuefeng.com 函数>变量作用域与解构赋值)传统:var array = ['hello', 'JavaScript', 'ES6'];var x = array[0];var y = array[1];var z = array[2];使用解构赋值:var 【x,y,z】 = 【’hello‘,’JavaScript‘,’ES6‘】;...原创 2018-10-29 13:28:07 · 139 阅读 · 0 评论 -
每日一题JavaScript之回文数
// 编写一个简单函数(少于160字符),返回一个布尔值,指示字符串是否是palindrome(回文)// 方法A:function isPalindrome(str){ var len = str.length; for (var i=0;i<(len/2);i++){ if(str[i] != str[len-1-i]){ return false; } } r...原创 2018-10-29 13:32:28 · 508 阅读 · 0 评论 -
每日一题1024之JavaScript预编译 作用域
(function (){ var a = b = 3;})();console.log(&quot;a:&quot; + (typeof(a) !== 'undefined'));console.log(&quot;b:&quot; + (typeof(b) !== 'undefined'));// b没有声明,直接使用所有归全局对象window所有。所以在函数外能访问。// a声明在函数体内,归AO对象所原创 2018-10-24 13:42:15 · 136 阅读 · 0 评论 -
每日一题1025之JavaScript闭包
function fun(n,o){ console.log(o); return{ fun:function(m){ return fun(m,n); } }}var a = fun(0);a.fun(1);a.fun(2);a.fun(3);var b = fun(0).fun(1).fun(2).fun(3);var c = fun(0).fun(1);...原创 2018-10-27 09:57:24 · 162 阅读 · 0 评论 -
每日一题1026之JavaScript ()、typeof、立即执行函数
var x = 1;if( function f(){} ){ x += typeof f; // console.log(f);}console.log(x);// if的()将function f(){}变为一个表达式,是立即执行函数,执行结束后就销毁// 所以x += typeof f; 中,f此时是无定义,若直接console.log(f)会报错:Refere...原创 2018-10-27 10:15:05 · 405 阅读 · 0 评论 -
JavaScript作用域 闭包 立即执行函数
运行期(执行期)上下文:AO GO作用域链:[[scope]]中存储的是执行期上下文对象的集合,呈链式链接。[[scope]]:每个JavaScript函数都是一个对象,对象中有些属性能够访问,但有些不可以,比如[[scope]],这些不可以访问的属性仅供JavaScript引擎存取。立即执行函数:全局变量是等到整个JavaScript执行完才被释放,所以一般只执行一次的函数(一般是初始...原创 2018-10-27 10:33:29 · 119 阅读 · 0 评论 -
JavaScript理解笔记——高阶函数之闭包、立即执行函数(一)
返回闭包时,不要引用循环变量,或后续会发生变化的变量。若闭包一定要引用循环变量,必须与立即执行函数配合使用。闭包:将函数作为返回值:function sun(array){ var sum=function(){ return array.reduce(function(x,y){return x+y;}); } return sum;}console.log( ...原创 2018-10-27 10:34:31 · 158 阅读 · 0 评论 -
JavaScript预编译
顺序: ①语法分析 ②预编译 ③解释一行执行一行预编译: 现象:函数声明整体提升,变量 声明提升,赋值不提升 imply global(暗示全局变量)如果变量未经声明就赋值,则此变量为全局对象window所有。一切声明的全局变量,全是window的属性。window是全局的域 预编译发生在函数执行的前一刻 预编译四步: ①创建A...原创 2018-10-27 10:35:46 · 87 阅读 · 0 评论 -
JavaScript——对象、包装类
对象的创建方法①var obj={} plainObject(对象字面量/对象直接量)②构造函数创建 1)系统自带的构造函数 Object araay numbervar obj=new Object() 2)自定义的构造函数(自定义构造函数与普通函数看着没有区别,定义时为了区分,要符合 大坨峰式命名规则:既每个单词首字母都大写)构造函数内部原理:new之后,函数...原创 2018-10-27 10:36:39 · 110 阅读 · 0 评论 -
JavaScript理解笔记—arguments rest
arguments(是关键字) 相当于一个数组或者array将方法里的参数存入arguments,只在函数(方法)内部作用。例如 有一函数 function foo(x){console.log(x);for(var i=0;i<arguments.length;i++){console.log(arguments【i】);}}则调用此方法: foo(1,2,3);...原创 2018-10-27 10:37:56 · 134 阅读 · 0 评论 -
JavaScript理解笔记——generator生成器
是一种 数据类型,一个 generator看着像一个函数,但可以返回多次。(JavaScript的生成器借鉴了python的生成器)区别:generator: 函数:function* foo(x){ function foo(x){yield x+1; //返回值yield x+2; //返回值return x+3;} //返回值 return...原创 2018-10-27 10:38:48 · 206 阅读 · 0 评论 -
JavaScript理解笔记——高阶函数
高阶map():map()定义在JavaScript的array中。 首先定义一个函数:function pow(x){return x*x;}在定义一个变量 var arr=[1,2,3...原创 2018-10-27 10:39:39 · 175 阅读 · 0 评论 -
深入原理:块级作用域、解构赋值
块级作用域:特点: 不存在变量声明提升;作用域仅在所在的{}之内(称为暂时性死区);不允许重复声明;letlet i= 10;for(let i = 0;i<10;i++){ let i= 20;}// 本段代码并不会报错(不允许重复声明错误),因为是三个层级的i,注意for循环的()与{}属于两个层级// 即:let i = 10{ let i =0; {...原创 2019-04-20 01:39:35 · 301 阅读 · 0 评论