设计模式之迭代器模式(Iterator)

迭代器模式是一种相对简单的模式,简单到很多时候我们都不认为它是一种设计模式。目前的绝大部分语言都内置了迭代器。

比如:JavaScript 的 Array.prototype.forEach

jQuery里一个非常有名的迭代器就是 $.each 方法,通过each我们可以传入额外的function,然后来对所有的item项进行迭代操作,例如:

1
2
3
4
5
6
7
$.each( [1, 2, 3], function( i, n ){
console.log( '当前下标为: '+ i,'当前值为:' + n );
});
// 下标: 0 当前值:1
// 下标: 1 当前值:2
// 下标: 2 当前值:3

设计模式之代理模式(Proxy)

代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。

代理模式的关键是,当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,客户实际上访问的是替身对象。替身对象对请求做出一些处理之后,再把请求转交给本体对象。

定义

代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下:

代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问。

设计模式之单例模式(Singleton)

在 JavaScript 开发中,单例模式的用途非常广泛。比如,当我们单击登录按钮的时候,页面中会出现一个登录浮窗,而这个登录浮窗是唯一的,无论单击多少次登录按钮,这个浮窗都只会被创建一次,那么这个登录浮窗就适合用单例模式来创建。

定义

单例模式的定义是:保证一个类仅有一个实例,并提供一个访问它的全局访问点。

实现方法

经典Singleton模式的实现方式是,如果实例不存在,通过一个方法创建一个实例。如果已经存在,则返回实例的引用。

Singleton与静态类(对象)不同的是,它可以被延迟生成,只有在需要的时候才会生成实例。

在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的方法,其字面量里可以包含大量的属性和方法:

Kindle 书籍源下载推荐

近日重拾公司所发kindle,之前一度觉得手机阅读完全可以替代这个产品,但手机看pdf文件,还是不够舒适,虽然是无背光版的,但在上下班路上的几个小时,用kindle阅读一些书籍感觉还是挺不错的,愉快的加入kindle大家庭,多刷秘籍吧。

新手入门介绍

Kindle伴侣 为静心阅读而生

将近日下载 Kindle 书籍源地址等整理分享一下,也算服务大众吧。

typeof与instanceof的区别

typeof和instanceof都可以用来判断变量,它们的用法有很大区别:

  • typeof:返回一个变量的基本类型,检测的是基本数据类型
  • instanceof:返回的是一个布尔值,检测的是引用类型

typeof

typeof会返回一个变量的基本类型,只有以下几种:number,boolean,string,object,undefined,function;例:

Javascript数组常见问题

1、删除数组里指定的某个元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var arr = [3,2,3,3,5,3],
val = 3;
var removeElement = function(arr, elm) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == elm) {
arr.splice(i, 1);
i--;
}
}
return arr;
};
console.log(removeElement(arr, val)); // [2, 5]

注意:这里for循环里的length是动态的,随着splice删除数组元素而变小,这里不能用forEach,因为forEach方法它一开始执行就自动缓存数组的长度,删除数组元素会出现意外。

Javascript定义类(class)的三种方法

在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称”实例”)共有的属性和方法。

Javascript语言不支持”类”,但是可以用一些变通的方法,模拟出”类”。

1、构造函数法

第一种是经典方法,它用构造函数模拟”类”,在其内部用this关键字指代实例对象。

1
2
3
function Dog() {
  this.name = "旺财";
}

生成实例的时候,使用new关键字。

1
2
var dog = new Dog();
console.log(dog.name); // 旺财

类的属性和方法,还可以定义在构造函数的prototype对象之上。

Javascript基础之数组

简介

数组是编程语言中应用最广泛的存储结构,在 ECMAScript 中数组是非常常用的引用类型。很有必要将数组的内容捋一遍,加深印象。

数组属性

  • constructor 表示引用数组对象的构造函数
  • length 表示数组的长度,即其中元素的个数。注意在js中length属性是可变的,当设置一个数组的length值变大时,数组内容不会改变,仅仅是length更改,但当length设置小于实际数组的时候,则原数组中索引大于或等于length的元素的值全部被丢失。
  • prototype属性是object共有的,可以通过增加属性和方法扩展数组定义。

基本操作

一、创建方法

创建一个空数组

1
2
3
var arr = [];
var arr = new Array(); // 创建一个空数组
`

创建一个指定长度的数组

1
var arr = new Array(size) // size 表示数组的长度

创建一个指定元素的数组

1
var arr = new Array(1,2,3,4,5) //创建数组并赋值 [1,2,3,4,5]

Javascript 面向对象编程详解

Javascript是一种基于对象的语言,秉承一切皆对象的理念。

但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。我们知道面向对象编程的三大特征就是封装、继承、多态

那么如何用 Javascript 来实现面向对象编程呢

1、利用Prototype模式实现封装

在Javascript里每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。

这样,我们把那些不变的属性和方法,直接定义在prototype对象上

1
2
3
4
5
6
7
8
9
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype.legs = 2
Person.prototype.speak = function() {
console.log("我的名字是:" + this.name + ",年龄:" + this.age);
}

然后,生成实例

1
2
3
4
5
var jack = new Person("jack", 26);
var lily = new Person("lily", 25);
jack.legs; // 2
lily.speak() // 我的名字是:lily,年龄:25

div嵌套水平垂直居中方法

总结当前知道的对div嵌套标签水平垂直居中方法,如果还有新的方法,请不吝赐教哦。好,下面开始列举代码咯。
首先给需要实现水平垂直居中的两个div设置统一的样式,查看demo

1
2
3
4
5
6
7
8
9
10
11
12
13
.styl {
width: 100%;
height: 300px;
background: #ccc;
margin: 30px auto;
position: relative;
border: 1px solid #000;
}
.box {
width: 200px;
height: 100px;
background: #333;
}

方法一:父标签 table-cell 法

看题目就知道是利用父标签的 display: table-cell,该属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的。
那么既然父标签已经是类似表格单元了,那么就可以利用表格单元的属性vertical-align: middle; 来使得内部元素垂直居中了,然后再给子标签 margin:0 auto; 即可,需要说明的是,这里的父标签需要设置宽度,不能自适应宽度