
前端学习
文章平均质量分 93
Lerch_Wang
这个作者很懒,什么都没留下…
展开
-
事件冒泡、捕获以及event.target与event.currentTarget的区别
事件冒泡、事件捕获如上图:事件捕获:事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。addEventListener的第三个参数决定事件处理函数在冒泡还是捕获阶段执行,设置为true就在捕获过程中执行,反之就在冒泡过程...原创 2019-11-01 10:56:37 · 703 阅读 · 0 评论 -
关于Object.defineProperty()理解与使用
该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的,能够在属性枚举期间呈现出来(for…in 或 Object.keys 方法), 这些属性的值可以被改变,也可以被删除。这个方法允许修改默认的额外选项(或配置)。默认情况下,使用 Object.defineProperty() 添加的属性值是不可修改的。Object.defineProperty(obj, prop, des...原创 2019-10-28 16:57:29 · 405 阅读 · 0 评论 -
JS 详解 Cookie、 LocalStorage 与 SessionStorage
基本概念CookieCookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。localStoragelocalStorage 是 HTML5 标准中新加入的技术,它并不是什么划时代的新东西。早在 IE 6 ...转载 2019-09-19 12:08:57 · 160 阅读 · 0 评论 -
shim和polyfill的区别,重点是Polyfill的作用和使用
在JavaScript的世界里,有两个词经常被提到,shim和polyfill.它们指的都是什么,又有什么区别?一个shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现一个polyfill就是一个用在浏览器API上的shim.我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill.然后新旧浏览器就都可以使用这个API了...转载 2019-09-19 12:00:08 · 411 阅读 · 0 评论 -
你所不知道的vertical-align
我们经常需要在竖直方向上对齐一些并肩排列的元素。CSS为我们提供了一些实现方法。有时候我会使用float,有时候也用position:absolute,有时候甚至利用手动添加内外边距的方法。我并不喜欢这些方法。浮动只能对齐它们的顶部,而且需要手动清除浮动。绝对定位会使元素脱离文档流,以致于它们就不能影响周围的元素了。再说说使用固定的内外边距,会突然导致微弱的改变。这里还有另一种值得信任的方法...转载 2019-09-10 16:26:16 · 425 阅读 · 0 评论 -
jQuery中$()函数有几种用法
jQuery想必是当前前端开发中必不可少的组件。它提供了DOM对象的封装、统一的事件机制、以及一系列的工具函数。 由于面试中突然被问及jQuery中$()有几种用法,瞬间有点懵并未答全。 虽说这样的问法颇似孔乙己问“茴香豆的茴有几种写法?”,但还是借此机会来整理知识,伺机学习一把!首先我们需要引入jQuery,如果你还没有听过jQuery,请移步其他文章或者在你的网站中引入这个:<...转载 2019-09-05 11:01:50 · 676 阅读 · 0 评论 -
html中 table的结构 彻底搞清 caption th thead等
正因为有太多 随意 称呼的 教法, 所以 感到很困惑, 如, 很多人把th叫标题. 那人家 caption怎么想, th只是一个跟td一样的角色, 只是对他进行加粗 加黑了而已, 用于某些单元格的内容 具有 "总起, 总领, 总结, 总计 "之类的语义时...在html中写table的时候,要注意它的结构, 和所包含的 标签层次.要得到 一个 空的 单元格, 直接写 <td>&...转载 2019-09-03 16:32:51 · 3130 阅读 · 0 评论 -
js代码学习过程中琐碎问题汇总(持续更新)
js代码小问题大杂烩对象属性访问新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入对象属性访问对象属性名可以加...原创 2019-09-02 20:26:03 · 503 阅读 · 0 评论 -
一张图理解prototype、proto和constructor的三角关系
前面的话 javascript里的关系又多又乱。作用域链是一种单向的链式关系,还算简单清晰;this机制的调用关系,稍微有些复杂;而关于原型,则是prototype、proto和constructor的三角关系。本文先用一张图开宗明义,然后详细解释原型的三角关系图示概念 上图中的复杂关系,实际上来源就两行代码function Foo(){};var f1...转载 2019-08-30 10:56:36 · 190 阅读 · 0 评论 -
深入理解JavaScript 模块模式
模块模式是JavaScript一种常用的编码模式。这是一般的理解,但也有一些高级应用没有得到很多关注。在本文中,我将回顾基础知识,浏览一些不错的高级技巧,甚至我认为是原生基础的。基础知识首先我们开始简单概述模型模式。三年前Eric Miraglia(YUI)的博文使模型模式众所周知。如果你已经很熟悉模型模式,可以直接阅读“高级模式”。匿名闭包这是一切成为可能的基础,也是Jav...转载 2019-08-28 18:06:05 · 146 阅读 · 0 评论 -
从function前面的!想到的
最近没事喜欢看看,一些js库的源码,结果发现库前不是加一个!就是加+或者一个(),心中猜出个大概知道这个是让函数自动执行,可是这么多符号达到同一个目的,原理是什么呢,下面做一下剖析:先从IIFE开始介绍IIFE(Imdiately Invoked Function Expression 立即执行的函数表达式)function(){ alert('IIFE');}把这个代...转载 2019-08-28 15:31:20 · 168 阅读 · 0 评论 -
call()方法和apply()方法用法总结
1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法。2. 相同点:这两个方法的作用是一样的。都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域。一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向。call()方法使用示例: //例1...转载 2019-08-28 10:48:05 · 295 阅读 · 0 评论 -
彻底理解js中this的指向,不必硬背。
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题。 为...转载 2019-08-28 10:23:58 · 140 阅读 · 0 评论 -
Javascript实现前端简单路由
前端路由在很多开源的js类库框架中都得到支持,如angularJS,Backbone,Reactjs等等。前端路由和后端路由原理一样,是让所有的交互和展现在一个页面运行以达到减少服务器请求,提高客户体验的目的,越来越多的网站特别是web应用都用到了前端路由。本文将使用javascript实现一个极其简单的路由实例。HTML页面中有一个导航菜单ul,和一个div#result用来显示结果...转载 2019-08-09 11:18:15 · 210 阅读 · 0 评论