分类目录归档：JavaScript开发

2016
03-08

一封写给 jQuery 的情书

我爱你jQuery。我们在一起已经有十年了。要是按照正常情况下JavaScript开发框架的生命周期来计算的话，应该相当于五十多年。我们现在见面的次数已经没有以前那么多了，但是如果和刚认识你那会儿相比，我需要你的程度一点儿也没有降低。我永远不会忘记我们刚在一起时的第一个函数：$(document).ready(function(){alert(‘pageloaded’);});哈哈！我希望你原谅这个看似有点儿鲁莽的消息提示框。我过... 继续阅读 >
2016
03-03

JS创建对象几种不同方法详解

1、工厂模式弊端：没有解决对象的识别问题，即怎么知道一个对象的类型。2、构造函数模式与工厂模式相比：1、没有显式的创建对象2、直接将属性和方法赋给了this对象3、没有return语句要创建person的实例，必须使用new操作符，以这种方式调用构造函数实际上会经历4个步骤：1、创建一个新对象2、将构造函数的作用域赋给新对象3、执行构造函数中的代码4、返回新对象创... 继续阅读 >
2016
03-03

WEB开发者必备的7个JavaScript函数

我记得数年前，只要我们编写JavaScript，都必须用到几个常用的函数，比如，addEventListener和attachEvent，并不是为了很超前的技术和功能，只是一些基本的任务，原因是各种浏览器之间的差异造成的。时间过去了这么久，技术在不断的进步，仍然有一些JavaScript函数是几乎所有Web程序员必备的，或为了性能，或为了功能。防止高频调用的debounce函数这个debounce函数对于那些执行事件驱动的任务来说是必不可少的提... 继续阅读 >
2016
02-29

JavaScript中this指针指向的彻底理解

首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。为什么要学习this？... 继续阅读 >
2016
02-17

JavaScript 创建对象模式与最佳实践 HOT

在JavaScript中“创建对象”是一个复杂的话题。这门语言提供了很多种创建对象的方式，不论新手还是老手都可能对此感到无所适从，不知道应该选择哪一种。不过，尽管创建对象的方法很多，看上去语法差异也很大，但实际上它们的相似性可能比你所以为的要多。本文将带领你踏上一段梳理对象创建方法的旅程，为你揭示不同方法之间的依赖与递进关系。对象字面量我们的第一站毫无疑问就是创建对象最简单的方法，对象字面量。JavaScript... 继续阅读 >
2016
01-15

jQuery升级踩坑大全

背景jQuery想必各个web工程师都再熟悉不过了，不过现如今很多网站还采用了很古老的jQuery版本。其实如果早期版本使用不当，可能会有DOMXSS漏洞，非常建议升级到jQuery1.9.x或以上版本。前段时间我就主导了这件事情，把公司里我们组负责的项目jQuery版本从1.4.2升级到了jQuery1.11.3。jQuery官方也为类似升级工作提供了jQueryMigrate插件。言归正传。坑从何处来jQuery1.11.3是1.x时代的最后一个版本（作者... 继续阅读 >
2016
01-04

不可错过的javascript迷你库

最近看着下自己的githubstar，把我吓坏了，手贱党，收藏癖的我都收藏了300+个仓库了，是时候整理一下了。Unix主张kiss，小而美被实践是最好用的，本文将介绍笔者收集的一些非常赞的开源库。这些库的共性是非常小，而且功能单一。cookie.js如果你操作过cookie的接口，那么你一定会感觉这东西的规范真的是太复杂了，根本记不住啊，其实你是对的，因为cookie的接口设计的是有问题的，也就是说设计的太底层了，根本不友好，那么... 继续阅读 >
2015
12-22

JavaScript 查找数组中最大值与最小值 推荐

最小值算法如下：将数组中第一个元素赋值给一个变量，把这个变量作为最小值；开始遍历数组，从第二个元素开始依次和第一个元素进行比较；如果当前的元素小于当前的最小值的话，就把当前的元素值赋值给最小值；移动到下一个元素，继续对第三步操作；当数组元素遍历结束时，这个变量存储的就是最小值；代码如下：//查找数组中最小值functionarrayMin(arrs){varmin=arrs[0];for(vari=1,ilen=... 继续阅读 >
2015
12-21

JavaScript 判断该对象是否为数组

1.typeof首先我们会想到的是使用typeof来检测数据类型，但是对于Function,String,Number,Undefined等这几种基本类型来说，使用typeof来检测都可以检测到，比如代码如下：functiontest(){}console.log(typeof1);//numberconsole.log(typeoftest);//functionconsole.log(typeof"yunxi");//stringconsole.log(typeofundefined);//undefined但是对于数组或者正则来说，使用typeof来检测的话，那就满足不了，因为... 继续阅读 >
2015
12-18

JavaScript 开发的45个技巧 推荐

JavaScript是一个绝冠全球的编程语言，可用于Web开发、移动应用开发（PhoneGap、Appcelerator）、服务器端开发（Node.js和Wakanda）等等。JavaScript还是很多新手踏入编程世界的第一个语言。既可以用来显示浏览器中的简单提示框，也可以通过nodebot或nodruino来控制机器人。能够编写结构清晰、性能高效的JavaScript代码的开发人员，现如今已成了招聘市场最受追捧的人。在这篇文章里，我将分享一些JavaScript的技巧、秘诀和最佳实... 继续阅读 >
2015
12-16

为什么说DOM操作很慢

一直都听说DOM很慢，要尽量少的去操作DOM，于是就想进一步去探究下为什么大家都会这样说，在网上学习了一些资料，这边整理出来。首先，DOM对象本身也是一个js对象，所以严格来说，并不是操作这个对象慢，而是说操作了这个对象后，会触发一些浏览器行为，比如布局（layout）和绘制（paint）。下面主要先介绍下这些浏览器行为，阐述一个页面是怎么最终被呈现出来的，另外还会从代码的角度，来说明一些不好的实践以及一些优... 继续阅读 >
2015
12-11

哪些JavaScript IDE最好用？

阅读本文之前，分享大家一张图片，看图会发现JavaScript开发需求最高，占比达到42.84%，因此掌握JavaScript语言好工作就不愁啦，工欲善其事必先利其器，那么选择IDE来开发是至关重要的，本文指出常用的几款JavaScriptIDE，分析其优缺点，如有不完善的请大家补充WebStorm优点：1.关键字提示使用WebStorm开发时，它会自动提示JS变量，关键字，方法，函数或参数名，可帮助你快速输入，避免一些低级的输入... 继续阅读 >
2015
11-20

前端程序员应该知道的 15 个 jQuery 小技巧

前端程序员应该知道的 15 个 jQuery 小技巧 通过使用jQuery中的animate 和scrollTop 方法，不用插件就可以创建一个滚动到顶部的简单动画：//Backtotop$('.top').click(function(e){e.preventDefault();$('html,body').animate({scrollTop:0},800);});<!--Createananchortag--><aclass="top"href="#">Backtotop</a>改变scrollTop 的值可以更改你想要放置滚动条的位置。所有你真正需要做的是在800毫秒的时间内设置文档主体的动画，直到... 继续阅读 >
2015
11-05

我们程序员为什么要关注 JavaScript ？

受这周我在企业中看到的JS现状的启发，我写了这篇文章。10年之前，我从来没有想过现在的JavaScript竟然会变得几乎无处不在。下面是几个你之所以要关注JavaScript的原因。首先，我认为JavaScript能够得到普及的主要原因之一是，JavaScript非常易于接近。学习JavaScript，对于初学者而言，相对比较容易，对于高级用户而言，又非常强大，可以用它来构建复杂又可靠的系统。其次，之所以要关注JavaScript是因为现今的Jav... 继续阅读 >
2015
10-22

26个Jquery使用小技巧

下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。... 继续阅读 >
2015
10-22

浅谈 JS 创建对象的 8 种模式 HOT

1.Object模式varo1={};//字面量的表现形式varo2=newObject;varo3=newObject();varo4=newObject(null);varo5=newObject(undefined);varo6=Object.create(Object.prototype);//等价于varo={};//即以Object.prototype对象为一个原型模板,新建一个以这个原型模板为原型的对象//区别varo7=Object.create(null);//创建一个原型为null的对象在chrome里查看各个新建对象的区别:可以看出前6种模式创... 继续阅读 >
2015
10-22

编写高质量JavaScript代码 推荐

才华横溢的StoyanStefanov，在他写的由O’Reilly初版的新书《JavaScriptPatterns》(JavaScript模式)中，我想要是为我们的读者贡献其摘要，那会是件很美妙的事情。具体一点就是编写高质量JavaScript的一些要素，例如避免全局变量，使用单变量声明，在循环中预缓存length(长度)，遵循代码阅读，以及更多。此摘要也包括一些与代码不太相关的习惯，但对整体代码的创建息息相关，包括撰写API文档、执行同行评审以及运行JSLint。这些... 继续阅读 >
2015
10-22

10个必须把握的jQuery小技巧 推荐

收集的10个jQuery小技巧/代码片段，可以帮你快速开发。1.返回顶部按钮你可以利用animate和scrollTop来实现返回顶部的动画，而不需要使用其他插件。//Backtotop$('a.top').click(function(){$(document.body).animate({scrollTop:0},800);returnfalse;});<!--Createananchortag--><aclass="top"href="#">Backtotop</a>改变scrollTop的值可以调整返回距离顶部的距离，而animate的第二个参数是执行返回动... 继续阅读 >
2015
09-30

深入学习JavaScript对象

JavaScript中，除了五种原始类型（即数字，字符串，布尔值，null，undefined）之外的都是对象了，所以，不把对象学明白怎么继续往下学习呢？一.概述对象是一种复合值，它将很多值（原始值或其他对象）聚合在一起，可通过属性名访问这些值。而属性名可以是包含空字符串在内的任意字符串。JavaScript对象也可以称作一种数据结构，正如我们经常听说的“散列（hash）”、“散列表（hashtable）”、&ld... 继续阅读 >
2015
09-26

深入浅出 妙用Javascript中apply、call、bind

网上文章虽多，大多复制粘贴，且晦涩难懂，我希望能够通过这篇文章，能够清晰的提升对apply、call、bind的认识，并且列出一些它们的妙用加深记忆。apply、call 在javascript中，call和apply都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部this的指向。JavaScript的一大特点是，函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」... 继续阅读 >
2015
09-14

检测一个函数是否是JavaScript原生函数

在我的开发工作中经常会遇到需要判断一个函数是否是JavaScript原生函数的情况，有时候这是一个很必要的工作，你需要知道这个函数是浏览器自身提供的，还是由第三方封装、伪装成原生函数。当然，最好的方法是考察执行这个函数的toString方法的返回值。TheJavaScript完成这个任务的方法非常简单：functionisNative(fn){return(/\{\s*\[nativecode\]\s*\}/).test(''+fn);}toString方法会返回这个方法的字符串形式，然后用... 继续阅读 >