搁浅

摘要： 1.定义函数实际上是对象，每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。对于函数的定义有以下三种类型：函数声明式定义——如1 function sum(num1, num2) {return num1 + num2;} 函数表达式定义——如1 var sum = function(num , num2) {return num1 + num2;}; //注意函数末尾有一个分号，就像声明其他变量一样 Function构造函数——如1 var sum = Function... 阅读全文

摘要： 1、DHTML DHTML曾被认为是HTML/XHTML、CSS和JavaScript相结合的产物，就像今天的HTML5那样，但把这些东西真正凝聚在一起的是DOM。如果真的需要来描述这一过程的话，“DOM脚本程序设计”更精确，它表示使用W3C DOM来处理文档和样式表。2、关联数组 数组的下标不局限于数字，可以使用字符串来标识语义的数组。3、宿主对象 除了内建对象，还可以在JavaScript脚本里使用一些已经预先定义好的其他对象。这些对象不是有JavaScript语言本身而是由它的运行环境提供的。具体到WEB应用，这个环境就是浏览器。有浏览器提供的预定义对象被称为宿主对象。4、DOM定... 阅读全文

摘要： 对于函数的执行性能（这里主要考虑执行时间，所耗内存暂不考虑），这里写了一个简单的类Timer，用于量化函数执行所耗时间。 整体思路很简单，就是new Date()的时间差值。我仅仅了做了一层简单的封装——/** * 执行时间调试器 * * Timer类 */ (function(win) { var Timer = function() { return this; }; Timer.log = function(content) { if (typeof console == "undefined") { //... 阅读全文

摘要： 本书的第二个部分总结了有关编程实践相关的内容，每一个章节都非常不错，捡取了其中5个章节的内容。对大家组织高维护性的代码具有辅导作用。 5个章节如下——一.UI层的松耦合二.避免使用全局变量三.事件处理四.将配置数据从代码中分离出来五.抛出自定义错误 一、UI层的松耦合 如果两个组件耦合太紧，则说明一个组件和另一个组件直接相关，这样的话，如果修改一个组件的逻辑，那么另外一个组件的逻辑也需要修改。比如，有一个名为error的CSS类名，它是贯穿整个站点的，它被嵌入到HTML之中。如果有一天你觉得error的取名并不合适，想将它改为warning，你不仅需要修改CSS还要修改用到这个c... 阅读全文

摘要： 之前大致翻了一遍这本书，整体感觉很不错，还是不可追求快速，需要细细理解。 这篇随笔主要对本书的第一部分中对自己触动比较大的部分及与平常组织代码最为息息相关的部分做一个记录，加深印象。 主要讲述五点内容——一、空行二、null三、undefined四、变量声明五、函数声明 一、空行/* * 通常来讲，代码看起来应当像一系列可读的段落，而不是一大段揉在一起的连续文本。 * 有时一段代码的语意和另一段代码不相关，这时就应该使用空行将它们分隔，确保语义有关联的代码展现在一起。 */var len = 2, array = [], flag, i;if (flag) { ... 阅读全文

摘要： 一提到“防御性编程”，大家都会感觉，这个话题很大，不知从何说起，该说哪些具体内容。 我做这篇文章的源头，是我已经做了很多很多相关前端及后端数据流校验的事情。对测试同学给我提出的所有bug做了整体的统计促使我对“防御性编程”的思考。我想绝大多数的程序bug都是因为代码“防御性”做得不够好而导致的，而导致代码“防御性”不够完善的原因又是多种多样的。 我们做防御性编程，无非一个目的——打造高质量的模块（或程序）。然而，相信大家都清楚，不可能仅凭做好了“防御性”来评价模块（或程序）的质量高与低。同样的，即使我们搭建了十分健壮的代码“防御性”，我们也不可能确保不会有任何bug的产生。 “防御性... 阅读全文

摘要： 相信大家都碰见过maven配置的依赖或者是jar包或者是工程，在开发的过程当中，我们当然需要引入的是工程，这样查看maven依赖的文件的时候，就能直接查看到源码。 一、本地工程依赖 举个例子，其架构如下所示（以下均使用eclipse中m2eclipse插件进行演示）—— 此时，这里依赖的“dependency-to-hello”指代的是eclipse工作空间中的工程，这样，我们直接源码依赖的便是工作空间里的源码，这样很方便，也是我们需要的。会注意到，所依赖的“dependency-to-hello”工程，并没有显示其路径，也就是默认的工作空间的地址。 那么，什么时候maven依... 阅读全文

摘要： 通读了《Maven实战》这本书，由于在实际的工作中，对其有一定的操作上的经验。因此，再回头去通读这本书，就能够更加精准的把握里面的核心知识了。 以下我主要从两点去介绍之——1> m2eclipse插件常用操作2> Maven最佳实践 一.m2eclipse插件常用操作 1> 执行mvn命令 直接在项目上或者pom.xml上点击鼠标右键，选择Run As选项，就能看到这些命令—— clean、test、package、install等都是常用的命令。这里特别想说的Maven build和maven build…两个选项卡—— (1) “Maven build…”：自定义mav. 阅读全文

摘要： 一、知识体系 摘自：前端技能汇总 Frontend Knowledge Structure二、JavaScript书籍阅读 O'Reilly系列： 01>《JavaScript语言精粹》 02>《JavaScript模式》 03>《高性能JavaScript》 04>《编写可维护的Jav... 阅读全文

摘要： SEO的工作深入到产品设计，页面制作，以及系统结构功能的开发等产品的各个环节中。这样和谐完美的运作过程要比单纯的把一件事全部交给SEOer来做质量和效率都要高的多。 下面主要从内容、代码、UE规范三个角度来谈谈SEO基本准则。 一、内容 1.网站结构扁平化(网站结构的扁平化：主要取决于网站的物理结构和逻辑结构规划。一般来说访问用户通过少于4 次的点击数到达最终内容页面的网站结构是符合扁平化的要求的); 2.页面结构不要太过个性化, 风格和版面趋于一致, 以易于搜索引擎理解; 3.关键词很重要: 1>精心设计关键词, 思考用户会通过哪些关键词来搜索这个页面; 2>全页面... 阅读全文

摘要： 不知道大家对vertical-align是否碰到了麻烦，今天对其做了一个系统的分析，主要有两篇文章向大家推荐，深入理解了这两篇文章，相信大家就能解决很多实际碰到的问题。具体能够解决什么问题，读透了，自然就知道了。 流氓文章一：大家都对vertical-align的各说各话 官方文章二：各浏览器对常用行内替换元素的 'baseline' 位置理解不同 在这儿，我先截一个图放在这里—— 这个图来自第一个文章，这里的文本font-size: 18px;行高(这里由父元素决定) line-height: 36px;，这张图能够清晰的看出font-size和line-height属性对v 阅读全文

摘要： 我们知道，web开发的数据不断在数据库端、服务器端、客户端进行传递。 我们为了防止脏数据，我们需要对每个数据项的极限值进行特殊的处理；或者，换个角度来讲，为了我们的代码更加的健壮，我们不得不考虑所有与业务相关的极限值的处理。 这里的”极限值处理“的定义比较宽泛，如 1> 处理空值(如null/undefined/''等) 2> 处理数据类型 3> 处理数据范围 4> 其他与业务相关的特殊值或范围的处理 在这里，我仅仅说说有关前端方面的极限值的处理情况。主要包含两点： 1> 页面显示的极限值处理 2> JavaScript函数参数的极限值处理 阅读全文

摘要： 对于做WEB前端工程师的我们，一旦碰到了输入框，我们就该具备一定的敏感思维，那便是校验。不要小看任何一个输入框的校验，往往测试同学挑剔的便是这个校验。 我们该如何处理这个校验。毫无疑问，首先我们需要理解业务逻辑，去定义它的一系列的校验规则，简单举一个通用的例子，就拿登录的用户名和密码来举例——1> 先从两者共性来看 (1) 是否允许为空？ (2) 输入的前后空格如何处理(是否截断)？ (3) 最少几个字符，最多多少字符？ (4) 如果输入超出最多字符，是否还允许继续输入？ (5) 鼠标点击label后，是否让光标自动聚焦于对应输入框？ (6) 是否让之有placeholder... 阅读全文

摘要： 首先说说防止重复点击提交是什么意思。 我们在访问有的网站，输入表单完成以后，单击提交按钮进行提交以后，提交按钮就会变为灰色，用户不能再单击第二次，直到重新加载页面或者跳转。这样，可以一定程度上防止用户重复提交导致应用程序上逻辑错误。 不妨引深来看，它不一定发生在表单的提交事件上，同样可以发生在ajax的异步请求上。有效地在web客户端采用一定机制去防止重复点击提交，将大大减轻服务器端压力。 那么，我们就不妨从表单提交及ajax的两种不同请求的处理过程中，来试试如何防止重复点击提交。 一、表单提交 就以登录表单为例，代码如下：<form action="login.do" 阅读全文

摘要： 每个函数都包含两个非继承而来的方法：apply()和call()。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内this对象的值。 一、应用场景 那就读读这篇文章——浅析读JS中的call和apply里的两个例子吧，这里我仅仅将第一个例子引用过来。 function dwn(s) { document.write(s + "<br />"); } window.onload = function () { var p = new Point(1, 2); var v = new Vector(-1, 2); var p1 = ad... 阅读全文

摘要： 在项目的开发过程当中，确实在IE的条件注释中碰到了有点儿坎儿，项目后又小小的看了一下，做个小总结吧。 一、先了解一下它的用法（摘自：IE的条件注释）1. 概述 IE条件注释（简称condcom)是一种IE5.0版本以上特有的，允许程序员使用的一种特殊的指令。2.条件注释的各种类型<!--This is acomment-->3.IE条件注释<!--[if IE]><![endif]-->4.相反的IE条件注释：<!--[if ! lt IE 7]> <![IGNORE[--><![IGNORE[]]> 这里的代码与条件语句 阅读全文

摘要： 模块化JavaScript之风早已席卷而来，CommonJS、AMD、NodeJS、RequireJS、SeaJS、curljs等模块化的JavaScript概念及库扑面而来，不得不承认，对于前端JavaScript代码的组织编写是一次伟大的变革。本文主要参考snandy的有关modular js系列文章，对SeaJS和RequireJS做一个系统的深入分析及对比。 一、我们为什么要用模块化的JavaScript 相信大家也都经历了“过程式的JavaScript”、“面向对象的JavaScript”，再到现在的“面向模块的JavaScript”。这个“面向模块的JavaScript”到... 阅读全文

摘要： 相信大家都知道JavaScript面向对象的设计是基于JavaScript原型(prototype)的，也能看到很多优秀的框架(如jQuery、YUI)都应用到了prototype，那就不妨把这个可恶又奇妙的prototype给弄明白，再看那些优秀框架的源码也就不是什么难事儿了，同时，它也能够帮助我们合理组织我们的代码。 老套路，直接放置一个图—— 对于这张图的说明及引深—— 1.本图能够深入剖析有关原型方面的基础理论； 2.本图能够解释为何使用函数原型能够节省内存，因此我们常常将可复用的成员(包括属性和方法)添加到函数原型中； 3.本图中介绍的两种模式也是我们常常使用的类式继承... 阅读全文

摘要： 在编写我们的JavaScript代码的时候，我们需要考虑代码的封装性，那么，究竟怎样的封装才是好的呢？ 借助后端程序语言(这里主要是参考Java)封装性，利用JavaScript语言模拟实现，对JavaScript的组织，作以封装性总结。 这里的实例变量，指代的是通过构造函数所创建的对象实例中的成员(包括属性和方法)。 这张图帮我们整体去看这个专题—— 对这张图的说明与引深—— 1>所有JavaScript内部细节性代码无非是以上几种的应用或组合； 2>具体考虑代码封装的好坏，需要根据具体业务具体分析； 3>所有代码的宏观组织方式同样源自以上几种方案的一种或者多种； 4> 阅读全文

摘要： 在《高性能JavaScript》这本书中，对“闭包如何产生内存消耗及性能消耗”这个专题做了比较清晰的解释。如下（内容摘自此书的第二章数据访问中的“闭包，作用域，和内存”）—— 1.先说标识符识别性能—— 标识符识别不是免费的，事实上没有哪种电脑操作可以不产生性能开销。在运行期上下文的作用域链中，一个标识符所处的位置越深，它的读写速度就越慢。所以，函数中局部变量的访问速度总是最快的，而全局变量通常是最慢的（优化的JavaScript引擎在某些情况下可以改变这种状况）。请记住，全局变量总是处于运行期上下文作用域链的最后一个位置，所以总是最远才能触及的。图2-4和2-5显示了作用域链上不... 阅读全文

摘要： <meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<head> <!-- <meta> 标签的属性定义了与文档相关联的名称/值对。 --> <!-- http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对 --> <!-- http-equiv:服务器将把名称/值对添加到发送给浏览器的内容头部 --> <!-- 告诉浏览器准备接受一个HTML文档 --> < 阅读全文

摘要： 每每有新项目，第一步就是应当使用一个reset.css来重置样式。滥用不如不用，直接拿个现成的reset.css过来将导致后期各种离奇bug的发生。所以最好还是自己写一个reset.css，并且要明白每一条reset都是用来做什么的。 1 /* 1.默认色彩 */ 2 /* YUI2 */ 3 html { 4 /* 不要在reset中设置背景色和字体颜色 */ 5 color: #000; 6 background: #FFF; 7 } 8 9 /* 2.边距 */ 10 /* YUI2 */ 11 body, div, dl, dt, dd,... 阅读全文

摘要： 先说BFC|haslayout的应用场景： 1>触发BFC | haslayout可以包含内部元素的浮动（闭合浮动）； 2>触发BFC | haslayout可以阻止元素被浮动元素覆盖； 3>触发BFC | haslayout可以阻止垂直外边距折叠（合并）。 再说BFC | haslayout的触发方式： 触发BFC常用方式： float: left | right; position: absolute | fixed; display: inline-block | table-cell | table-caption overflow: auto ... 阅读全文

摘要： 很多人都已经习惯称之为清除浮动，但是确切地来说是不准确的。 1> 清除浮动：清除对应的单词是 clear，对应CSS中的属性是 clear：left | right | both | none； 2> 闭合浮动：更确切的含义是使浮动元素闭合，从而减少浮动带来的影响。 通过上图实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决warp高度塌陷的问题。 故：用闭合浮动比清除浮动更加严谨，所以应准确称之为：闭合浮动。 清理浮动的方式有很多，总结如下—— 1> 添加额外标签(如<div styl 阅读全文

摘要： 对于jQuery只停留在应用是可悲的，在做项目的过程，jquery源码一度成为了自己开发的瓶颈，利用了近一天的时间对其宏观上进行了彻底的分析，收获颇丰，分享于此—— 在此说明，所研究的jquery框架版本为1.7.2。 宏观而言，jQuery框架可分为3个步骤—— 1.定义jQuery变量 2.扩充jQuery变量及jQuery.fn变量(利用jQuery及jQuery.fn命名空间进行方法的填充) 3.将jQuery置于全局 其细节如下—— 1 /** 2 * 1.定义jQuery变量 3 * var jQuery = (function () { 4 * ... 阅读全文

摘要： 相信大家都知道，函数的调用模式与进入函数执行上下文的this指针有着密不可分的关系。随着调用模式的不同，this指针的指向便有所不同。随着应用的复杂、代码的累积，对于函数作用域的分析真是个头痛的问题。因此，深入理解函数调用模式对函数作用域(this指针)的影响变得至关重要。/** * 函数调用模式 * * 1>方法调用模式 * (1)当一个函数被保存为对象的一个属性时，称它为一个方法。 * (2)当一个调用表达式包含一个属性存取表达式（即一个.表达式或[subscript]下标表达式）， * 那么它被当做一个方法来调用。 *... 阅读全文

摘要： 本篇随笔主要介绍3个比较相近的文本属性word-wrap、white-space、word-break，先看看官方API对这3个属性的介绍——word-wrap : normal | break-word normal : 默认值。允许内容顶开指定的容器边界break-word: 内容将在边界内换行。如果需要，词内换行( word-break )也将发生 white-space : normal | pre | nowrap normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行 pre : 换行和其他空白字符都将受到... 阅读全文

摘要： 本文主要从以下几个方面串烧如何优化我们的JavaScript代码—— 1>变量类型和变量声明 2>等号(==)和非等号(!=) 全等号(===)和非全等号(!==) 3>逻辑与(&&)运算和逻辑或(||)运算 4>函数声明 vs 函数表达式 5>命名空间 6>分号和空格 主要是从让代码更加简洁、更加美观的角度去思考总结在书写JavaScript代码需要注意的要点—— 1 (function($){ 2 3 var namespace = {}; 4 5 namespace.basevar = function () { 6... 阅读全文

摘要： 话不多说，直接附上总结表格——格式操作Chrome/FF/IE7/IE8IE6gif不透明全透明的部分转为白色，半透明的部分转为常色(对于不支持的颜色转为白色)同左索引色透明支持全透明，不支持半透明同左alpha透明以索引色透明方式进行输出同左png不透明同gif的不透明同左索引色透明同gif的索引色透明同左alpha透明支持全透明，支持半透明支持全透明，半透明的部分输出全透明png24--不支持全透明，不支持半透明同左png32-­-同png8的alpha透明同左jpg--不支持全透明，不支持半透明 需要说明的是，如果一张图片既包含了全透明部分，又包含了半透明部分，同时也包含了非透 阅读全文

摘要： 我们常常需要这样的效果：半透明的纯色背景浮动着高亮不透明的文本。当然，通常我们有两种实现方式，总结如下—— 1> 第一种实现方式：使用opacity和filter: alpha(opacity=XX)div.x { width: 500px; height: 50px; background-color: black; /* 这种方式使得里面的内容也呈现为半透明 */ filter: alpha(opacity=70); /* 针对IE */ opacity: 0.7; ... 阅读全文

摘要： css选择符有个权重，我们习惯于这样书写进行判断——比如a,b,c,d。style标签的内联样式a=1，ID选择符b=1，class选择符c=1，标签(包括伪元素)选择符d=1。举个例子——body .link{display:block;width:100px;height:100px;background-color:black;} -->0,0,1,1body .content.link:hover{background-color:blue;} -->0,0,2,2body .link:hover{background-col... 阅读全文

摘要： 本篇文章，对JavaScript函数的执行流程做了细致入微的分析。话不多说，我以下面这个例子作为样例—— 1 (function ($){ 2 3 function foo() { 4 var x = 10; 5 return function bar() { 6 console.log(x); 7 }; 8 } 9 10 var f = foo();11 12 var x = 20;13 14 f(); // 结果是10而不是2015 16 })(jQuery)... 阅读全文

摘要： 这里主要引用《JavaScript语言精粹》里面有关函数的理解，结合《JavaScript高级程序设计-第2版》对块级作用域的理解，联想到自己所做的项目，对模块模式作以汇总并评价。 1 /** 2 * 首先需要知道块级作用域的概念—— 3 * 1>JavaScript当中没有真正意义上的块级作用域，我们使用匿名函数进行模拟实现。 4 * 2>在块级作用域中定义的任何变量，都会在执行结束时被销毁（闭包另当别论），源于没有指向该匿名函数的引用。 5 * 3>当里面应用了闭包时，该块级作用域里的代码执行结束时，销毁的是它的作用域链，但是其活动对象仍然... 阅读全文

摘要： 这里的这个例子是引用于《JavaScript高级程序设计-第2版》的第4章-函数里的例子，结合对汤姆大叔博客里对函数的理解，需要对函数的构建及执行过程作以细致的分析理解，才能对闭包作以深入的分析与应用。以下是我对闭包的理解—— 1 (function($){ 2 3 function createFunction() { 4 var result = new Array(); 5 for (var i = 0; i < 3; i++) { 6 /** 7 ... 阅读全文

摘要： 所有CSS布局都依赖于三个基本概念：定位、浮动和空白边操作。不同的技术其实没有本质的区别，而且如果理解了核心概念，那么创建自己的布局是相当容易的。 本文主要是总结实际中使用的CSS布局技巧，从简单布局到高级布局。本文分享的布局只是基于XHTML1.0-transitional，可工作在各大主流浏览器中，对有浏览器差异性的技巧在此不作分享。1. 文档流：1.1 文档流也称普通流。1.2 文档流将窗体自上而下分成一行行，并在每行中按照从左至右的顺序排放元素。1.3 有三种情况将使得元素脱离文档流而存在，分别是浮动、绝对定位、固定定位。1.4 脱离文档流的元素不占任何正常文档流空间，并且叠放层... 阅读全文