写在最开头：其实我以前就在考虑要不要写这个东西，因为这个东西确实不难，但是为什么会有这么多人问，他们问的不是怎么用控制台，而是不知道控制台能干嘛，他们也知道有 console.log 之类的东西，但他们不知道为什么要用这么长的字符串代替 alert 输出信息。在他们眼里 alert 足以。好吧，我承认小小的吐槽了下，不过这个系列我只打算介绍下调试的基本知识，不会涉及太深，因为深入的东西结合js知识，如果你js没到一个境界，我就算...
先打开百度，然后按 F12 打开后，如果不是 Console 项的就点击 Console 这项，因为我们要在控制台操作。。 看到如下内容：好了我们先清空内容，可以右击选 Clear console 菜单，或者输入 clear() 都行。 接着，我们输入 document.getElementById(kw1); 然后回车，就可以看到 id 为 kw1 的元素信息了。是不是很简单。下一步是用 console.dir 查看该元素信息。 输入 console.dir(document.getElementById(kw1)); 然后回车，出来一个奇...
我们先来处理第一个问题：1. 查看文章下方 推荐 这个功能所调用的函数源码 其实非常简单，点放大镜选中那个推荐即可。这个 votePost(cb_entryId,Digg) 就是推荐按钮所调用的函数了，是不是非常简单。 第二个问题，定位到函数所在文件位置。 其实也是非常简单的，当然，不熟悉控制台的朋友也许不知道怎么看。 我在控制台输入 votePost 然后回车，函数源码粗显啦，并且在右下角有个链接 blog-common.js?v=WE8o1xrgcTu07QVvwYqERqD7...
上几篇文章已经为大家介绍了js调试系列的一些基础知识，这次乱码兄弟为大家带来了js断点与动态调试方法，需要的朋友可以参考下 昨天留的课后练习 1. 分析 votePost 函数是如何实现 推荐 的。 其实我们已经看到了源码，只要读下源码即可知道他是怎么实现的了。function votePost(n, t, i) { i || (i = !1); var r = { blogApp: currentBlogApp, postId: n, voteType: t, isAbandoned: i }; $("#digg_tips").css("color", "red").htm...
一个完整的例子上文说了那么多，知识点比较分散，所以最后我打算用一个完整的SeaJS例子把这些知识点串起来，方便朋友们归纳回顾。这个例子包含如下文件： 1.index.html——主页面。2.sea.js——SeaJS脚本。3.init.js——init模块，入口模块，依赖data、jquery、style三个模块。由主页面载入。4.data.js——data模块，纯json数据模块，由init载入。5.jquery.js——jquery模块，对 jQuery库的模块化封装，由init载入。6.style.css——...
下载及安装 要在项目中使用SeaJS，你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置。SeaJS项目目前托管在GitHub上，主页为 https://github.com/seajs/seajs/ 。可以到其git库的build目录下下载sea.js（已压缩）或sea-debug.js（未压缩）。下载完成后放到项目的相应位置，然后在页面中通过<script>标签引入，你就可以使用SeaJS了。 SeaJS基本开发原则 在讨论SeaJS的具体使用前，先介绍一下SeaJS的模块化理念和开发原...
前言SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高J...
1.选择对象 1).基本 #id 根据给定的ID匹配一个元素。例如：$("#id")element 根据给定的元素名匹配所有元素。例如：$("div").class 根据给定的类匹配元素。例如：$(".style1");* 匹配所有元素。例如：$("*")selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。例如：$("#id,div,.style1") 2).表单 :button 匹配所有按钮。例如：$(":button"):checkbox 匹配所有复选框。例如：$(":checkbox"):file 匹配所有文...
代码如下:isNull: function(a){ return a === null; }, isUndefined: function(a){ return a === undefined; }, isNumber: function(a){ return typeof a === number; }, isString: function(a){ return typeof a === string; }, isBoolean: function(a){ return typeof a === boolean; }, isPrimitive: function(b){ var a = typeof b; return !!(b === undefined || b === null || a == boolean || a == number || a == string);...
目前，主要的购物网站都采用了这种加载方式。今天在一个网友的站里发现一个图片延迟加载的插件，很好用，在这里介绍一下。 先介绍一下图片延迟加载原理。我们需要先将图片的真实地址保存在一个自定义的属性中（属性名任你发挥吧，这里我用的是lazy-src），而图片的src属性中用一个占位图片来替代，这个占位图片当然是越小越好，它基本上只干活、不露面。 代码如下:<img src="images/placeholder.png" lazy-src="images/realimg.jp...
前言 在第12章关于变量对象的描述中，我们已经知道一个执行上下文 的数据（变量、函数声明和函数的形参）作为属性存储在变量对象中。 同时我们也知道变量对象在每次进入上下文时创建，并填入初始值，值的更新出现在代码执行阶段。 这一章专门讨论与执行上下文直接相关的更多细节，这次我们将提及一个议题——作用域链。 英文原文：http://dmitrysoshnikov.com/ecmascript/chapter-4-scope-chain/ 中文参考：http://www.denisdeng.c...
介绍 本章节我们要着重介绍的是一个非常常见的ECMAScript对象——函数（function),我们将详细讲解一下各种类型的函数是如何影响上下文的变量对象以及每个函数的作用域链都包含什么，以及回答诸如像下面这样的问题：下面声明的函数有什么区别么？（如果有，区别是什么）。 原文：http://dmitrysoshnikov.com/ecmascript/chapter-5-functions/ 代码如下:var foo = function () { ... }; 平时的惯用方式： 代码如下:function foo()...
介绍 本章我们将介绍在JavaScript里大家经常来讨论的话题 —— 闭包（closure）。闭包其实大家都已经谈烂了。尽管如此，这里还是要试着从理论角度来讨论下闭包，看看ECMAScript中的闭包内部究竟是如何工作的。 正如在前面的文章中提到的，这些文章都是系列文章，相互之间都是有关联的。因此，为了更好的理解本文要介绍的内容，建议先去阅读第14章作用域链和第12章变量对象。 英文原文：http://dmitrysoshnikov.com/ecmascript/chap...
前言 JavaScript 不包含传统的类继承模型，而是使用 prototypal 原型模型。 虽然这经常被当作是 JavaScript 的缺点被提及，其实基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单，但是实现 JavaScript 中的原型继承则要困难的多。 由于 JavaScript 是唯一一个被广泛使用的基于原型继承的语言，所以理解两种继承模式的差异是需要一定时间的，今天我们就来了解一下原型和原型链。 原型 10年前，我刚学习Java...
前言 Bob大叔提出并发扬了S.O.L.I.D五大原则，用来更好地进行面向对象编程，五大原则分别是： The Single Responsibility Principle（单一职责SRP） The Open/Closed Principle（开闭原则OCP） The Liskov Substitution Principle（里氏替换原则LSP） The Interface Segregation Principle（接口分离原则ISP） The Dependency Inversion Principle（依赖反转原则DIP） 五大原则，我相信在博客园已经被讨论烂了，尤其是C#的实现，但...