随笔分类 - JS
记录原生Javascript编码技巧
摘要：在所有面向对象的编程中，继承是一个重要的话题。一般说来，在设计类的时候，我们希望能减少重复性的代码，并且尽量弱化对象间的耦合（让一个类继承另一个类可能会导致二者产生强耦合）。关于“解耦”是程序设计中另一个重要的话题，本篇重点来看看在javascript如何实现继承。 其它的面向对象程序设计语言都是通
阅读全文
摘要：博客园里大家都分享了很多的有用知识，看到好的代码，总想拿到手上去试一下，然后慢慢体会！如果是展示一段完整能运行的代码，若能给读者提供一个【运行代码】的按钮，就方便多了！前两天开通了博客园的JS权限（发邮件到contact@cnblogs.com可以申请开通），今天先拿这个试了一下手，先来体验一把吧：
阅读全文
摘要：有时候，在web页面中使用iframe，可以解决一些实际问题，比如跨域访问等……这篇文章的关键不是iframe适用于哪些场景？而是iframe间如何进行互通？所谓互通是指： 情况1：在任何一个页面中调用其它页面的方法或数据（比如：在frameb.html中调用index.html中的sayHello
阅读全文
摘要：这是一个小事件，但当下的WEB应用交互非常丰富，判断鼠标的滚动来执行相应的操作是比较常见的。我用Chrome/IE/Firefox/Opera 4种浏览器做测试，发现只有firefox的处理方法有很大的不同，下面细说一下这个情况： 第1、事件的名称不同 其它浏览器均采用mousewheel做为事件的
阅读全文
摘要：从汤姆大叔的博客里看到了6个基础题目：本篇是第6题 - 实现如下语法的功能：var a = add(2)(3)(4); //9 解题关键：add()函数需要返回一个加法函数，而不是一个普通的值，即定义add()，并想办法让add()返回一个add()。js最显著的特征就是函数的返回值可以是一个函数。
阅读全文
摘要：从汤姆大叔的博客里看到了6个基础题目：本篇是第5题 - 实现如下语法的功能：var a = (5).plus(3).minus(6); //2 解题关键： 1、理解使用(5)和5的区别 2、构造函数原型的扩展(Object.prototype) 解点1：理解使用(5)和5的区别 (5)是一个表达式，
阅读全文
摘要：从汤姆大叔的博客里看到了6个基础题目：本篇是第4题 - 利用JavaScript打印出Fibonacci数（不使用全局变量） 解题关键： 1、Fibonacci数列的规律 2、递归 解点1：Fibonacci数列的规律 解点2：递归 递归是一个复杂的概念，此题可以不用递归解决，但题目要求不能使用全局
阅读全文
摘要：从汤姆大叔的博客里看到了6个基础题目：本篇是第3题 - 给object数组进行排序（排序条件是每个元素对象的属性个数） 解题关键： 1、Array.sort的用法 2、object的属性数量的统计 解点1：Array.sort的用法 Array.sort可以为数组指定一个排序规则，一般用如下格式进行
阅读全文
摘要：从汤姆大叔的博客里看到了6个基础题目：本篇是第2题 - 转化一个数字数组为function数组（每个function都弹出相应的数字） 此题关键点： 1、如何将一个匿名函数存入数组？ 2、如何锁住需要调用的值？ 解点1：如何将一个匿名函数存入数组？ 如上，arr[0]即为一个函数，可用arr[0](
阅读全文
摘要：从汤姆大叔的博客里看到了6个基础题目：本篇是第1题 - 找出数字数组中最大的元素（使用Match.max函数） 从要求上来看，不能将数组sort、不能遍历。只能使用Math.max，所以只能从javascript的特征和本质方面着手。 分析：查找列表是一个数组，那么意味着我们要传入一个数组参数给Ma
阅读全文
摘要：前面我写过一个一个特殊的事件绑定程序（通用于各种浏览器）不过，此函数只实现了事件的绑定，并保证按顺序执行这些绑定的函数。但是，不能实现元素的某个事件上删除一个函数。比如：element元素的click事件上有三个函数分别是a,b,c。现在要删除c这个函数的绑定，就无法实现了。所以特重新编写了两个函数：bindEvent(element, eventName, func) —— 绑定func到element的eventName事件上（不重复绑定）unBindEvent(element, eventName, func) —— 删除element上的eventName事件上的func函数。下面是这
阅读全文
摘要：做前端，事件绑定是一个关键！全球比较有名的事件绑定程序也比较多，而且在网络广为流传。也不得不承认那些程序是写的不错。今天我自己也写了一个，就目前形式来看，它具有以下特点：1、同元素的同事件可以绑定多个函数。2、解决了this的问题，也是说在绑定函数体内的this指向的是元素。3、被绑定的那些函数总是按顺序执行的。4、简单容易理解，完全无视addEventListener和attachEvent之类的东西。5、在firefox、IE、opera、safari、chrome下工作良好下面是代码：function addEvent(obj, type, fn) { var func = obj[&#
阅读全文
摘要：在google.com.hk的左上角，有一个更多的链接，它具有一个目标地址，但是当我们点击时，大多数情况发现的是弹出一个下拉列表供用户选择（这是一种典型的渐进增强形式）。怎么理解？——如果用户的浏览器支持javascript，那么就可以享受到这种快速导航的服务功能。现在，请你禁用的你的浏览器的javascript功能（不会禁用猛击这里)，再次访问google.com.hk，再次点击更多时，发生了什么？是的，没有看到下拉列表，而打开了一个新页面。（这是一种典型的平稳退化）。怎么理解？——如果用户的浏览器不支持javascript，用户仍然能够访问我的网站。如何实现类似google的这一功能？1
阅读全文
摘要：记录：function stopBubble( e ) { if(e && e.stopPropagation) { e.stopPropagation(); } //标准模式 else { window.event.cancelBubble = true; } //IE模式}问题：好像这阻止冒泡并不是很适用。转载请注明：转载自web前端开发
阅读全文
摘要：在各大浏览器中，除Mozilla浏览器外，几乎都支持一个元素的属性：innerText。我们可以通过它来快速获取某个元素的内的文本。比如：<p id="test"><strong><font color="red">Hello</font> , world!</strong></p>我们使用代码：alert((document.getElementById("test")).innerText)在IE、Chrome中，均能获取到“Hello , world!”，但
阅读全文
摘要：创建对象的三种方法方法一：var obj = new Object();obj.属性 = 值;//继续添加其它属性obj.方法 = function(参数) {//功能代码}//继续添加其它方法方法二：var obj = {属性：值 ,//继续添加其它属性 ,方法: function(参数) {功能代码} ,//继续添加其它方法}以上两种方法都是直接创建一个对象方法三：//先定义对象的模型，也可以理解为类function obj(参数) {this.属性 = 值;//继续添加其它属性}obj.prototype.方法 = function(参数) {//功能代码....}//继续添加其它方法/
阅读全文
摘要：做为一个javascript新手，为了程式的简便，可能会在javascript中运用了大量的全局变量，虽然一时看来，问题解决了，而且也可能让编码变得更加的简单。但是从全局看来，这样会导致出现一些让我们难以掌控的情况的出现：变量同名、多个函数共用一个全局变量后的值的变换……等等。所以，有时候，对于一些简单的全局变量，我们可以通过另一种方式来处理——用自执行函数+闭包的方法来解：比如：我们要在网页加载时给出一个提示，在网页关闭时给出另一个提示下面的代码，实现了以上功能varmsg1 = "欢迎光临!"; // 定义一个全局变量var msg2 = "再见！"
阅读全文
摘要：在一般程序设计语言中，作用域是按块来划分的。即“变量定义在哪个块之内，这个块就是变量的有效范围”。而在javascript中，变量的作用域是按函数来划分的——变量在某个函数范围内有效。比如：var f = false;if(true) { var f = true; } //此时f位于if内，也就是块内，等价于还是全局范围内alert(f) //所以，结果为true再如下例：var f = false;function test() { var f = true; //这是函数内定义的变量，只在函数内部有效，函数执行完毕后，该变量将被释放}test();alert(f) //结果为false
阅读全文
摘要：javascript对于变量的定义、类型的要求都比较松散，这样既方便，但又容易犯错。有时候进行必要的类型检查是必须的。常用检查变量类型的方法有两种，下面是解说：检查变量类型方法一：typeof格式：typeof 变量用法：if( typeof 变量 == "类型标识") { ... }下面是一些常用数据类型对应的typeof值：{an:"object"} : object["an","array"] : objectfunction() {} : function"a string" : string55
阅读全文
浙公网安备 33010602011771号