摘要： JavaScript的面向对象主要是基于原型进行实现，传统的写法在开发中很不方便，于是创建一个工厂类，用于创建“类”。 /** * Clone the attribute * @param attribute */执行深拷贝，主要是针对那些属于对象类型的属性，进行克隆var cloneAttribute = function( attribute ) {switch( Object.prototype.toString.call( attribute ) ) { // Null case '[object Null]': return null; break; ... 阅读全文

摘要： 在前端技术并不流行的时候，大部分网站都采用PHP端的模版引擎，其中的Smarty是最经典的一种，其实我也只用过Smarty模版引擎。个人认为，不管是什么样的模版引擎，基本思想都应该是类似的。互联网发展到今天，随着浏览器性能大幅提高，功能日益强大，浏览器能够承载更多的职责，大部分功能都开始由后端慢慢移向前端。将更多的事情交给前端来完成，这样做的好处就是可以减少服务器的压力，也提高了用户体验。将模版引擎的开发引入到前端，就是一个不错的改变。现在有很多优秀的模版引擎库，如backone.js，jQuery的模版引擎。不过不同的模版引擎，他们的原理应该是类似的： 1. 写一个模版文件，这个文件可以是. 阅读全文

摘要： JavaScript中的this是根据执行环境来确定。如果函数在全局环境中被调用，this就会指向window；如果某个函数当做某个对象的方法被调用，那么通常情况下this就指向该对象。这里说通常情况是因为在JavaScript中可以通过apply和call方法显示的改变函数的执行环境。 有的时候，我们需要为某个函数绑定执行环境，让这个函数始终在一个指定的执行环境中执行，这种方式就叫函数绑定。在很多JavaScript库中都实现了一个bind方法，可以为函数绑定执行环境。 例子： Function.prototype.bind = function() { var fn = t... 阅读全文

摘要： 工厂模式也是很常用的一种模式，工厂模式顾名思义就是将对象作为工厂类中的产品，我们只需要告诉工厂类我们需要创建的对象的类型，工厂类就返回我指定类型的对象了。 当我们有一系列具有类似功能的对象的时候，而且我们需要根据不同的情况创建其中的某一种对象的时候，这种情况下，我们就可以使用工厂类了。比如在项目中，我们有很多管理类，这些管理类都负责管理不同类型的对象，他们功能是类似的，而且我们根据不同的情况需要使用不同的管理类，我们就可以使用一个工厂类来代理取出管理类的这个过程。 例子：var ManagerFactory = function ( name ) { var managers = ... 阅读全文

摘要： 单例模式在传统软件工程中使用非常广泛，单例模式的含义就是如果一个类被设计成单例类，那么从第一次创建它的对象开始，从始至终这个类都只保存一个实例对象，不会有多个类的实力对象。为了保持这个特性，所以通常的做法都是为这个单例类设置一个静态的属性，第一次创建类对象的时候，就将这个类对象保存在这个静态属性中，以后再次实例化类对象的时候，都是取出保存在静态属性中的这个对象，所以从始至终这个类都只会有一个实例对象存在，这就是单例模式。 JavaScript语言并不像传统面向对象语言那样具有静态变量。但是JavaScript依然可以实现单例模式，而且由于其动态性，会有多种实现方法。 为了能够实现静... 阅读全文

摘要： 事件是HTML与JavaScript的通讯方式，也就是经常听到的基于事件的通讯方式。我们需要先在某个元素对象上面监听某一类事件，然后将某个回调函数绑定到这个事件上面，当事件发生的时候，回调函数就会被立刻调用。所有需要传递给回调函数的数据都绑定在事件对象上面，回调函数可以接受这个事件对象，然后从其中取出自己需要的数据执行逻辑上的操作。其实这种模式就是软件工程中很有名的观察者模式，该模式主要的目的是实现HTML与JavaScript之间的松耦合。当HTML方的某个事件发生的时候，它只负责封装事件对象，并传递这个事件对象，而不需要关心该事件发生之后会有什么样的逻辑处理。而JavaScript方只负责 阅读全文

摘要： 1. 在删除DOM中某个节点的时候，建议先移除附加在它上面的事件处理函数和一些引用对象，否则会造成内存问题；2. 使用innerHTML比多次操作DOM修改文档结构要高效，因为设置innerHTML是浏览器的工作，而不是JavaScript的DOM操作。不过多次使用innerHTML也是不合理的，可以将信息保存在一个临时的字符串中，再一次性赋值给innerHTML；3. 缓存NodeList动态集合对象，因为每次访问它，都会运行一次文档查询，文档查询的代价是昂贵的；4. 在为DOM添加新节点的时候，可以利用文档片段，将新的节点先放置在文档片段中，再一次性添加到DOM中，这样可以减少添加节点的次 阅读全文

摘要： 几乎所有的浏览器都提供了一套关于元素大小和位置的属性，让我们可以方便的进行控制。1. 偏移量offsetWidth：包括元素内容区，垂直滚动条，左右边框，左右内边距的宽度之和（不包括外边距）；offsetHeight：包括元素内容区，水平滚动条，上下边框，上线内边距的高度之和（不包括外边距）；offsetLeft：元素左方的外边距距离包含元素左方的内边框之间的距离；offsetRight：元素上方的外边距距离包含元素上方的内边框之间的距离；offsetParent：引用包含元素；注意：上面四个属性都是以像素为单位，offsetParent不一定会是parentNode，parentNode指的 阅读全文

摘要： HTML中定义的样式一共有三种方式： 1. 外部样式表，使用<link>元素导入外部的样式表，样式表都是.css类型的文件； 2. 嵌入样式，使用<style>在HMTL文档中定义的样式； 3. 元素特定样式：即在某个特定标签中style属性定义的样式；元素的style属性 JavaScript为每个元素提供了一个style属性，让我们可以方便的用编程的方式控制样式。这个style对应的是元素特定样式中的style属性，比如有一个<div id="myDiv" style="border: 4px solid green; width 阅读全文

摘要： 节点类型中有一种类型叫DocumentFragment，即文档片段。文档片段是一种“轻量级”的文档，可以控制节点，但是又不会占用过多资源。 nodeType：11； nodeName：“#document-fragment”； nodeValue：null；由于每次我们在操作某个节点的时候，无论是移动，删除，还是添加，都会导致浏览器重绘整个树结构，这个代价是很昂贵的。如果我们一次要添加多个节点到树结构中，那么我们就需要多次重绘树结构。使用文档片段就很好的帮我们解决了这个问题。我们可以创建一个文档片段，将我们的需要添加的新节点用同样的方式添加到文档片段中，添加完成后，再将这个文档片段添加到... 阅读全文