随笔分类 - JavaScript
摘要：前言关于JavaScript脚本加载的问题，相信大家碰到很多。主要在几个点——1> 同步脚本和异步脚本带来的文件加载、文件依赖及执行顺序问题2> 同步脚本和异步脚本带来的性能优化问题深入理解脚本加载相关的方方面面问题，不仅利于解决实际问题，更加利于对性能优化的把握并执行。先看随便一个script标签...
阅读全文
摘要：前言相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作，如$.isArray，_.some，_.find等等方法。这里无非是对原生js的数组操作多了一些包装。这里主要汇总一下JavaScript数组操作的常用API。相信对大家解决程序问题很有帮助。1、性质JavaS...
阅读全文
摘要：本文主要写一下如何实现dom元素拖动，目前使用jquery库实现之。主要的注释附在代码中，大家可以根据代码画一个小的窗口模型图，以便于理解。 1 2 3 4 5 实现dom元素拖动 6 16 17 18 19 拖动20 84 85
阅读全文
摘要：前言1> 借鉴里面的应用思想，使用断言提高代码的健壮性及维护性2> 实现方式——不采用直接嵌入expect的方式，统一进行重写（提取常用断言方法，重新构造API）官网介绍https://github.com/LearnBoost/expect.js在这里,主要是熟悉里面的API即可.列举一下常用的几...
阅读全文
摘要：这两本书就一块儿搞了，大多数已经理解，简单做个标记。主要对自己不太了解的地方，做一些记录。一、读《高性能网站建设指南》 0> 黄金性能法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。 1> 尽量减少HTTP请求 2>...
阅读全文
摘要：一、定义 在事件驱动的环境中，比如浏览器这种持续寻求用户关注的环境中，观察者模式（又名发布者-订阅者(publisher-subscripber)模式）是一种管理人与其任务之间的关系（确切地讲，是对象及其行为和状态之间的关系）的得力工具.用JavaScript的话来说，这种模式的实质就是你可以对程...
阅读全文
摘要：一、定义 代理是一个对象，它可以用来控制对另一个对象的访问。它与另外那个对象实现了同样的接口，并且会把任何方法调用传递给那个对象。另外那个对象通常称为本体。代理可以代替其实体被实例化，并使其可被远程访问。它还可以把本体的实例化推迟到真正需要的时候，对于实例化比较费时的本体，或者因尺寸较大以至于不用...
阅读全文
摘要：一、定义 装饰者模式可用来透明地把对象包装在具有同样接口的另一个对象之中。这样一来，你可以给一个方法添加一些行为，然后将方法调用传递给原始对象。相对于创建子类来说，使用装饰者对象是一种更灵活的选择（装饰者提供比继承更有弹性的替代方案）。 装饰者用于通过重载方法的形式添加新功能，该模式可以在被装饰...
阅读全文
摘要：前言 前端的MVC，近几年一直很火，大家也都纷纷讨论着，于是乎，抽空总结一下这个知识点。看了些文章，结合实践略作总结并发表一下自己的看法。 最初接触MVC是后端Java的MVC架构，用一张图来表示之—— 这样，我们让每一个层次去关注并做好一件事情，层与层之间保持松耦合，我们可以对每一个层次单独做好测试工作。如此，我们可以让代码更具可维护性。 因此，借鉴于后端的这种MVC设计思想（更多的我想是一种优秀的、经过考验的实践模式），针对越来越复杂的JavaScript应用程序，便有了猜想，我们是否可以使用MVC的设计思想，编写出高维护性的前端程序。一、MVC定义 先来看看《基于MVC的J...
阅读全文
摘要：对于函数的执行性能（这里主要考虑执行时间，所耗内存暂不考虑），这里写了一个简单的类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) { ...
阅读全文
摘要：一、知识体系 摘自：前端技能汇总 Frontend Knowledge Structure二、JavaScript书籍阅读 O'Reilly系列： 01>《JavaScript语言精粹》 02>《JavaScript模式》 03>《高性能JavaScript》 04>《编写可维护的Jav...
阅读全文
摘要：我们知道，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...
阅读全文
摘要：模块化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>
阅读全文