Javascript模式（第一章简介）------读书笔记

一：模式

模式是一个通用问题的解决方案，可以提供一个更好的实践经验、有用的抽象化表示和解决一类问题的模板。

本书主要讨论如下三种类型的模式

1 设计模式：可复用面向对象软件的基础，包括singleton、factory、decorator、observer等

2 编码模式：是js特有的模式，它提供了关于该语言独特的很好的体验

3 反模式：并不是bug或者编码错误，而是常见的，引起的问题比解决的问题更多的一种方法

二：JS：基本概念

　　2.1：面向对象

　　　　1 js是一门面向对象的语言，只有5种基本类型不是对象：number，string，boolean，null，undefined。其中前三种有对应的以基本类型封装形式体现的对象表示，这三种类型可以通过程序员或者js解析器来实现向对象的转换

　　　　2 函数也是对象，因为函数有属性和方法

　　　　3 在js中只要定义好一个变量，就已经正在处理对象了，原因如下：1：该变量会自动成为内置对象的一个属性，成为一个激活对象（如果该变量是一个全局变量，那么该变量会成为全局对象的一个属性）；2：该变量实际上也是伪类，因为它拥有其自身的属性，这些属性决定该变量是否可以被删除，是否可以被修改，是否可以被枚举（for-in）

　　　　4 对象的概念：对象是一个包含命名的属性、键-值对的容器

　　　　5 JS中的对象分为原生对象和主机对象，原生对象又分为内置对象和用户自定义对象，主机对象包括所有的DOM对象和windows对象

　　2.2 没有类　　　　

　　　　1 在js中没有类的概念，在需要的时候创建一个空对象，然后往该对象里面添加感兴趣的属性，方法或者其他对象即可

　　　　2 一个空对象，其实并不是真正意义上的空对象，它拥有一些内置属性，只是没有自身的属性而已

　　　　3 在“Gang of four”一书中提到一个通用规则“尽量多的使用对象的组合，而不是使用类的继承”

　　2.3 原型

　　　　1 创建的每一个函数都会自动获取一个prototypes属性，该属性指向一个新的空对象，该对象的constructor属性指向创建它的函数

　　2.4 环境

　　　　1 js通常在浏览器中运行，但是这不是js唯一的运行环境，环境会提供自身的主机对象，该对象在ECMAScript标准中没有定义，可能会带来没有特定的不确定的行为

　　2.5 ECMAScript5

　　　　1 核心的JS编程语言，不包括DOM,BOM和额外的主机对象，是基于ECMAScript标准（ES），该标准现已更新直第五版,第五版最重要的概念是增加了strict模式，该模式从JS语言中移除了某些特性，使程序更简洁，更不易出错，该模式的触发，通过一个普通的字符串触发， 对于之前的浏览器而言，该字符串只是一个字符串，并没有分配给任何变量，因此只是一串不能被使用的字符，不会导致错误，从而实现向后的兼容性

function fun(){
    "use strict";
    //函数体   
}

　　2.6 JSLint

　　　　我们在notepad++使用JSLint插件，

　　　　1 到这里下载JSLint插件并解压到任意目录。

                           

　　　　2 打开notepad++,在设置--》导入---》导入主题，选择步骤1中解压的JSLintNpp.dll文件，就可以了

　　　　                 

　　　　3 然后随意打开一个JS文件，点击插件----》JSLint----》JSLint Current  File，就会列出问题

　　　　　　

　　　　　　

　　2.7 console

　　　　1 console对象并不是js语言的一部分，而是大多数浏览器提供的一个运行环境

http://getfirebug.com/wiki/index.php/Console_API#console.exception.28error-object.5B.2C_object.2C_....5D.29

　　　　2 console.assert(expression, object[, object...])接收至少两个参数，第一个参数的值或返回值为false的时候，将会在控制台上输出后续参数的值

　　　　3 console.clear()用来清除控制台的所有输出

　　　　4 console.count([label]) 统计当前代码被执行过多少次，可选参数 label 可以输出在次数之前

　　5 console.debug(object[, object, …]) 向控制台输出一条信息，它包括一个指向该行代码位置的超链接。

　　6 console.dir(object)将传入对象的属性，包括子对象的属性以列表形式输出

　　7 console.dirxml()  console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

比如，先获取一个dom节点，

var container= document.getElementById("container");

 

然后，显示该节点包含的代码。

console.dirxml(container)

 

　　8 console.error(object[, object...])用于输出错误信息，用法和常见的console.log一样，不同点在于输出内容会标记为错误的样式，便于分辨。

　　9 console.exception(error-object[, object, ...]) 当有异常产生的时候，在js的出错点输出一个错误的信息，同时还输出一个跟踪错误的堆栈，与console.error很相似，唯一的不同是其他参数l记录在一个数组中时，第一个参数将作为出错信息的name

　　10 console.group这是个有趣的方法，它能够让控制台输出的语句产生不同的层级嵌套关系，每一个console.group()会增加一层嵌套，相反要减少一层嵌套可以使用console.groupEnd()方法。

console.group(1);
　　　　console.log(1.1);
       console.group(1.2);
            console.log("1.2.1");
            console.log("1.2.2");
       console.groupEnd();
console.groupEnd();
console.group(2);
　　　　console.log(2.1);
　　　　console.log(2.2);
console.groupEnd();

 

　　11 groupCollapsed折叠起来

console.groupCollapsed(1);
　　　　console.log(1.1);
       console.groupCollapsed(1.2);
            console.log("1.2.1");
            console.log("1.2.2");
       console.groupEnd();
console.groupEnd();
console.groupCollapsed(2);
　　　　console.log(2.1);
　　　　console.log(2.2);
console.groupEnd();

 

　　12console.info(object[, object...])此方法与之前说到的console.error一样，用于输出信息，只是前面的图标不一样

　　13console.table()可将传入的对象，或数组以表格形式输出，相比传统树形输出，这种输出方案更适合内部元素排列整齐的对象或数组，不然可能会出现很多的 undefined。

var obj = {
  foo: {
    name: 'foo',
    age: '33'
  },
  bar: {
    name: 'bar',
    age: '45'
  }
};

var arr = [
  ['foo', '33'],
  ['bar', '45']
];

console.table(obj);
console.table(arr);

 

　　14 console.profile([profileLabel])可用于性能分析。在 JS 开发中，我们常常要评估段代码或是某个函数的性能。在函数中手动打印时间固然可以，但显得不够灵活而且有误差。借助控制台以及　　　　　　　　1）console.profile()：在需要开始profile的地方插入console.profile()，在结束profile的地方插入console.profileEnd()

function sum(){
    add1();
    add2();
    add3();
}
function add1(){
    for(var i=0;i<10000;i++){
    }
}
function add2(){
    for(var i=0;i<1000;i++){
    }
}
function add3(){
    for(var i=0;i<100;i++){
    }
}
setTimeout(function(){console.profile("sum");
sum();
console.profileEnd("sum");
},1000);
//如果不增加setTimeout，这个只执行的话，在控制台找不到概况的信息，估计是运行的太快，没有捕获到

 

　　　　1 profile的参数：当页面中有多段代码需要监测性能的时候，我们利用向profile传递参数的方式来区分不同的性能概括

　　　　2 占用时间：只有函数自身执行的时间，不包括其内部所调用的其他函数的执行时间

　　　　3 时间：不仅仅是该函数自身执行的时间，还包括其内部调用的其他函数执行的时间，也就是这个函数执行的总时间　　

　　　　（add1+add2+add3+sum的相对时间=sum的时间）

　　　　4 如果一个函数的时间>占用时间，那么该函数内部一定存在调用的函数

　　15 console.time(name):计时器，可以将成对的console.time()和console.timeEnd()之间代码的运行时间输出到控制台上，name参数可作为标签名。

console.time("计时器一");

　　for(var i=0;i<1000;i++){

　　　　for(var j=0;j<1000;j++){}

　　}

　　console.timeEnd("计时器一");

 

　　16 console.trace():用来追踪函数的调用过程。在大型项目尤其是框架开发中，函数的调用轨迹可以十分复杂，console.trace()方法可以将函数的被调用过程清楚地输出到控制台上。

function add(a,b){

　　　　console.trace();

　　　　return a+b;

　　}

var x = add3(1,1);

　　function add3(a,b){return add2(a,b);}

　　function add2(a,b){return add1(a,b);}

　　function add1(a,b){return add(a,b);}

 

 

　　17 console.warn(object[, object...]):输出参数的内容，作为警告提示。与console.error等相似输出，只是图标与颜色不同

console支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）。

console.log("%d年%d月%d日",2011,3,26);

var dog = {} ;

　　dog.name = "大毛" ;

　　dog.color = "黄色";

console.log("%o",dog);