随笔分类 - JavaScript
《你不知道的JavaScript》整理(四)——原型
摘要:一、[[Prototype]] JavaScript中的对象有一个特殊的[[Prototype]]内置属性,其实就是对于其他对象的引用。 当你试图引用对象的属性时会触发原型[[Get]]操作,比如myObject.a。 1. 第一步是检查对象本身是否有这个属性,如果有的话就使用它。 2. 如果a不在
阅读全文
《你不知道的JavaScript》整理(三)——对象
摘要:一、语法 两种形式定义:文字形式和构造形式。 二、类型 对象是JavaScript的基础。 1)基本类型 在JavaScript中一共有六种主要类型(术语是“语言类型”): 2)内置对象 JavaScript中还有一些对象子类型,通常被称为内置对象。 引擎可以将一些基础类型自动转换成相应的内置对象,
阅读全文
《你不知道的JavaScript》整理(二)——this
摘要:最近在读一本进阶的JavaScript的书《你不知道的JavaScript(上卷)》,这次研究了一下“this”。 当一个函数被调用时,会创建一个活动记录(执行上下文)。 这个记录会包含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。 this就是记录的其中一个属性,会在函数执行的过程
阅读全文
《你不知道的JavaScript》整理(一)——作用域、提升与闭包
摘要:最近在读一本进阶的JavaScript的书《你不知道的JavaScript(上卷)》,里面分析了很多基础性的概念。 可以更全面深入的理解JavaScript深层面的知识点。 一、函数作用域 1)函数作用域 就是作用域在一个“Function”里,属于这个函数的全部变量都可以在整个函数的范围内使用及复
阅读全文
前端页面性能参数搜集
摘要:经常会看些性能分析的书,但是实际在做优化的时候又无从下手。 因为没有数据,也不能确定实际用户到底在哪一环影响了他们的性能。 现在H5提供了一些很方便的Performance接口,可以让我们更方便的搜集到用户的数据,不过有几个方法的兼容性实在太差。 插件已经上传到Github中,可以在这里获取到,in
阅读全文
图片预加载与懒加载
摘要:一、预加载 前面做了个招聘页面,里面有大量的图片需要加载。 一开始都是全部写在页面中,在测试环境还看不出很慢,一放到正式环境就不对了。 微信浏览器本来就觉得慢,现在一下子要加载这么多图片,一下子就把屏幕弄白了,过了几十秒后才会完整的出现Loading图片。 这显然是无法忍受的,马上就加了预加载的功能
阅读全文
制造自己的榫卯
摘要:一、榫卯 榫卯(sǔn mǎo),是古代中国建筑、家具及其它器械的主要结构方式,是在两个构件上采用凹凸部位相结合的一种连接方式。 若榫卯使用得当,两块木结构之间就能严密扣合,达到“天衣无缝”的程度,并且不用钉子。 下面这张图来自于山西悬空寺,屋檐下面的那些都是用榫卯做成的,没有用一颗钉子。 二、Ja
阅读全文
移动开发屏幕适配分析
摘要:我在开发前端的时候曾经会有几个疑惑: 1)拿到的设计搞的宽度是640px或750px的,在页面不同尺寸屏幕布局的时候怎么换算。 2)移动端布局是用%、px、rem、伸缩盒 Flexible Box Layout还是多列Multi-column。 3)用px设置了字体大小,但是在ipad上面显示的却很
阅读全文
实现tap的多种方式
摘要:一、tap.js 这是一个比较轻量的插件tap.js,142行代码,支持模块化开发。 1)handleEvent addEventListener方法中的第二个参数,我原先并没有注意到其实可以传一个对象,该对象必是实现EventListener接口,查看在线代码。 var tap = { handl
阅读全文
触屏touch事件记录
摘要:一、chrome中的Remote Debugging 一开始并没有用这个调试,不过后面需要多点触碰,可chrome模拟器中我没看到这个功能。突然看到了Remote Debugging,网站需要FQ才能浏览。 1)以我的红米为例,首先要打开USB调试 2)手机连接电脑,打开PC的chrome,输入“c
阅读全文
JavaScript中Promises/A+规范的实现
摘要:Promises是一种异步编程模型,通过一组API来规范化异步操作,这样也能够让异步操作的流程控制更加容易。下面的代码是假设执行一个异步队列,每一项都会使用上一项返回的数据:function nest(url, params, fn) { $.getJSON(url, params, func...
阅读全文
jQuery中的Sizzle引擎分析
摘要:我分析的jQuery版本是1.8.3。Sizzle代码从3669行开始到5358行,将近2000行的代码,这个引擎的版本还是比较旧,最新的版本已经到v2.2.2了,代码已经超过2000行了。并且还有个专门的Sizzle主页。从一个demo开始,HTML代码如下: 子集1 ...
阅读全文
前端面试题目搜集
摘要:最近读到一本与前端面试有关的书《前端程序员面试笔试宝典》,里面的内容很多都是高频的面试题,在此推荐给各位网友。 一、理论知识 1.1、前端 MV*框架的意义 早期前端都是比较简单,基本以页面为工作单元,内容以浏览型为主,也偶尔有简单的表单操作,基本不太需要框架。 随着 AJAX 的出现,Web2.0
阅读全文
JavaScript中事件处理
摘要:先看看下面一道题目,请评价以下代码并给出改进意见: 1)不应该在if和else语句中声明addListener函数,应该先声明; 2)不需要使用window.addEventListener或document.all来进行检测浏览器,应该使用能力检测; 3)attachEvent在IE中有this指
阅读全文
JavaScript中typeof、toString、instanceof、constructor与in
摘要:JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。 这也意味着你可以使用同一个变量保存不同类型的数据。 最新的 ECMAScript 标准定义了 7 种数据类型: 7种内置类型:Boolean、Null、Undefined、Num
阅读全文
JavaScript与PHP中正则
摘要:一、JavaScript 有个在线调试正则的工具,点击查看工具。下面的所有示例代码,都可以在codepen上查看到。 1.创建正则表达式 1)正则表达式字面量在脚本加载后编译。若你的正则表达式是常量,使用这种方式可以获得更好的性能。 2)使用构造函数,提供了对正则表达式运行时的编译。当你知道正则表达
阅读全文
JavaScript中尺寸、坐标
摘要:测试环境是IE8,Chrome38,Firefox40,下面是全局通用脚本打印代码 一、尺寸 在container外面我还套了个container_out,宽度为1000px,方便演示用,HTML代码如下: 1)CSS获取width、height 分别在container中,width写为200px
阅读全文
多种方法实现Loading(加载)动画效果
摘要:当我们ajax提交一个按钮的时候,给那个按钮来个Loading效果会高端很多,体验也会上升个层次。既能让用户知道正在提交中,也能防止二次提交,好处多多呢。上面的这个圈圈是会滚动的。简单点的话,可以直接用GIF动态图片实现。不过现在已经有了CSS3和HTML5了,多了好几种高大上的实现方式。这里先来介...
阅读全文
JavaScript数据类型
摘要:一、用toString判断类型toString() 方法返回一个代表该对象的字符串。当对象需要转换为字符串时,会调用它的toString()方法。默认情况下,每个对象都会从Object上继承到toString()方法,如果这个方法没有被这个对象自身或者更接近的上层原型上的同名方法覆盖(遮蔽),则调用...
阅读全文
JavaScript垃圾回收(三)——内存泄露
摘要:一、JavaScript内存监测工具在讨论内存泄露之前,先介绍几款JavaScript内存监测工具。IE的sIEve与JSLeaksDetector(这两个可以在下面的附件中下载),firefox的Leak Monitor,chrome的Porfiles等。1、Leak Monitor好不容易找到下...
阅读全文