javascript模式 读书笔记一

第一章 简介

模式

模式是指一个通用问题的解决方案。 模式分三种 设计模式 编码模式:javascript特有的

反模式:常见的 引发的问题比解决的问题更多的一种方法。

JavaScript:基本概念

面向对象

只有五种基本类型不是对象:数值类型,字符串类型,布尔类型,空类型和未定义类型。

函数实际上也是对象,函数有属性和方法。

对象主要有两种: 原生的(Native) 原生的对象分为内置对象(数组,日期等) 和用户自定义对象 (var o={}) 主机的(Host) 包含windows对象和所有的DOM对象。

没有类

JavaScript中没有类。

原型(Prototypes)

JavaScript没有继承,可以使用多种方法实现继承,通常使用原型。

原型是一个对象,并且创建的每一个都会自动获取一个Prototypes属性,该属性指向一个新的空对象。

该对象几乎等同于采用对象字面量或Object()创建的对象,区别在于它的constructor属性指向了所创建的函数,而不是指向内置的Object()函数。可以为该空对象增加成员变量,以后其他对象也可以从该对象继承并像使用自己的属性一样使用该对象的属性。

原型就是一个对象,每一个函数都有Prototype属性。

ECMAScript 5

核心的JavaScript编程语言(不包含DOM,BOM和额外的主机对象)是基于ECMAScript标准(缩写是ES).

strict模式

避免使用arguments.callee之类的构造函数

ES5 Object.create() 等同于ES3 Object()

暗示全局变量(implied globals):任何变量,如果未经声明,就为全局对象所有

JSLint

JavaScript代码质量检查工具

Console

Console对象不是JavaScript语言的一部分,而是浏览器提供的一个运行环境。

P15 另一种创建隐式全局变量的反模式是带有var声明的链式赋值。

function foo(){
  var a=b=0;
  // 等于 var a=(b=0);
}

隐含全局变量不是真正的变量,而是全局对象的属性。属性可以通过delete操作符删除,但变量不可以。 P16 访问全局对象,可以按如下方式访问

var global=(function(){return this;}());

P18 提升:JavaScript允许在函数的任意地方声明多个变量,无论在哪里声明,效果都等于在函数顶部进行申明。 P19 在所有的浏览器中,通过将HTML容器上需要遍历的次数缓存起来都会大大提高速度。 P21 使用正常的for循环来处理数组,并使用for-in循环来处理对象。

P23 不要给内置的原型增加属性

P24使用===和!====操作符对数值和类型进行比较 P26 避免使用eval(),可使用new Function()代替eval(). P27 使用paresInt()

P45 不要使用new Object()构造函数

第二章 基本技巧

编写可维护的代码

尽量少用全局变量

Javascript使用函数管理作用域。变量在函数内生命,只在函数内有效。全局变量在函数外部生命,在函数内部无需声明即可食用。

每个Javascript环境都有全局对象,可在函数外部使用this进行访问。

创建的每一个全局变量都为全局对象所有。

myglobal="hello";  //反模式
console.log(myglobal);
console.log(window.myglobal);
console.log(window['myglobal']);
console.log(this.myglobal);

全局变量的问题

自执行立即生效函数 the self-executing immediate functions

Javascript特性: 1 Javascript可直接使用变量,甚至无需声明 2 Javascript有个暗示全局变量(implied globals)的概念,任何变量,如果未经声明,就为全局对象所有。

function sum(x,y){
   //反模式:暗示全局变量 result
   result=x+y;
   return result;
}
function sum(x,y){
  //正确的写法
  var result=x+y;
  return result;
}

另一种创建隐式全局变量的反模式是带有var声明的链式赋值

function foo(){
   var a=b=0;
   //反模式 a是局部变量 b是全局变量
}

首先,优先级较高的是表达式b=0,此时b未经声明。表达式的返回值为0,它被赋予给局部变量a 。相当于var a=(b=0);

function foo(){
   //正确的赋值方式 对链式赋值的所有变量都进行了声明
   var a,b;
   a=b=0; 
}

变量释放时的副作用

隐含全局变量与明确定义的全局变量的细微不同:能否删除

  • 使用var创建的全局变量(这类变量在函数外部创建)不能删除
  • 不使用var创建的隐性全局变量(尽管是在函数内部创建)可以删除

这表明隐含全局变量是全局对象的属性,属性可以通过delete操作符删除,但变量不可以。

//定义三个全局变量
var global_var=1;
global_novar=2; //反模式
(function(){
	global_fromfunc=3 //反模式
}());


//企图删除
delete global_var; //false
delete global_novar; //true;
delete global_fromfunc; //true;

//测试删除情况
typeof global_var; //number类型
typeof global_novar; //undefined 类型
typeof global_fromfunc; //undefined类型

访问全局对象

var global=(function(){
	return this;
}());

从内嵌函数的作用域访问window对象 (不带硬编码的方式)

单一var模式(Single var Pattern)

只使用一个var在函数顶部进行变量声明的模式。

function func(){
	var a=1,
	    b=2,
	    sum=a+b,
	    myobject={},
	    i,
	    j;

	    //函数体
}
function updateElement(){
	var el=document.getElementById('result'),
	    style=el.style;

	    //使用el和style再做其他事...
	   
}

提升:零散变量的问题

Javascript允许在函数的任意地方声明多个变量,无论在哪里声明,效果都等于在函数顶部进行声明。所以容忍先使用后声明的情况。

//反模式
myname="global";//全局变量
function func(){
	alert(myname); //未定义
	var myname="local";
	alert(myname); //局部变量
}
func();

前面的代码等同于下面的代码

myname="global"; //全局变量
function func(){
	var myname; //等同于->var myname=undefined;
	alert(myname); //未定义
	myname="local";
	alert(myname); //局部
}
func();

for循环

for循环经常用在遍历数组或类数组对象。

好的for循环模式是将已经遍历过的数组(或容器)的长度缓存起来。如以下代码所示。

for(var i=0, max=myarray.length;i<max;i++){
   //对myarray[i]进行处理
}

单变量模式,可以将变量放到循环以外

function looper(){
  var i=0,
      max,
      myarray=[];
  //...

  for(i=0,max=myarray.length;i<max;i++){
     //处理myarray[i]
  }
}

++和--提倡 excessive trickiness 过分棘手

改进版,逐步将至0,这样更快

var i,myarray=[];
for(i=myarray.length;i--;){
   //处理myarray[i]
}
var myarray=[],
    i=myarray.length;

while(i--){
   //处理 myarray[i]
}

for-in循环

for-in循环应该用来遍历非数组对象。使用for-in循环也被称为枚举enumeration

//对象

var woman={
	hands:4
};
var man={
	hands:2,
	legs:2,
	heads:1
};

//代码的其他部分
//将一个方法添加到所有对象上
if(typeof Object.prototype.clone==="undefined"){
	Object.prototype.clone=function(){
		alert('克隆');
	};
}




//1 
//for-in循环
for(var i in man){
	if(man.hasOwnProperty(i)){  //filter
		console.log(i,":",man[i]);
	}
	
}
/* 
控制台中的结果
hands:2
legs:2
heads:1
*/

//2
//反模式
//不适用hasOwnProperty()进行检查后使用for-in循环的结果 
for(var i in man){
	console.log(i,":",man[i]);
}

/* 
控制台中的结果
hands:2
legs:2
heads:1
clone:function Object.clone()
*/

另外一种使用hasOwnProperty()的模式是在Object.prototype中调用该函数

for(var i in man){
	if(Object.prototype.hasOwnProperty.call(man,i)){  //过滤
		console.log(i,":",man[i]);
	}
	
}

使用hasOwnProperty对man对象进行精炼后,可以避免命名冲突,也可以使用一个本地变量来缓存比较长的属性名。

var i,
    hasOwn=Object.prototype.hasOwnProperty;
for(var i in man){
	if(hasOwn.call(man,i)){  //过滤
		console.log(i,":",man[i]);
	}
	
}

变种 略过花括号

//警告 :不能通过JSLint检查
var i,
    hasOwn=Object.prototype.hasOwnProperty;
    for(i in man) if(hasOwn.call(man,i)){  //过滤
    	console.log(i,":",man[i]);

    }

不要增加内置的原型

增加构造函数的原型属性是一个增强功能性的强大的方法,但有时候该方法过于强大。

增加内置构造函数(例如Object(),Array(),Function()等)的原型是很有诱惑的,但这可能会严重影响可维护性。

实在需要增加自定义方法可以用如下代码:

if(typeof Object.prototype.myMethod!=="function"){
	Object.prototype.myMethod=function(){
		//implementation....
	}
}

switch模式

var inspect_me=0,
     result='';

 switch(inspect_me){
 	case 0:
 	   result="zero";
 	   break;
 	case 1:
 	   result="one";
 	   break
 	default:
 	   result="unknown";
 }

避免使用瘾式类型转换

使用=== 和!==操作符

var zero=0;
if(zero===false){
	//因为zero是0,而不是false,所以代码未执行
	
}
//反模式
if(zero==false){
	//该代码会被执行。。。
	
}

避免使用eval()

var obj={
	name:"lilu",
}

//反模式
var property="name";
alert(eval("obj."+property));


//推荐的方法
var property="name";
alert(obj[property]);

eval()包含安全隐患,这样做有可能执行被篡改过的代码。 通过setInterval(), setTimeout()和function()等构造函数传递参数,也会导致类似eval的隐患。

//反模式
setTimeout("myFunc()",1000);
setTimeout("myFunc(1,2,3)",1000);

//推荐模式
setTimeout(myFunc,1000);
setTimeout(function(){
	myFunc(1,2,3);
},1000);

eval()中任何采用var定义的变量会自动变成全局变量。因此可以通过使用Function()或者将eval()调用封装到一个即时函数中。

console.log(typeof un); //未定义
console.log(typeof deux); //未定义
console.log(typeof trois); //未定义

var jsstring="var un=1;console.log(un);";
eval(jsstring); //logs "1"

jsstring="var deux=2; console.log(deux);";
new Function(jsstring)(); //logs "2"

jsstring="var trois=3; console.log(trois);";
(function(){
	eval(jsstring);
}());  //logs "3";

console.log(typeof un); //数值类型
console.log(typeof deux); //未定义
console.log(typeof trois); //未定义

new Function()和eval()的区别在于eval()会影响到作用于链,而Function更多地类似于一个沙盒。无论在哪里执行Function,它都仅仅能看到全局作用域。 Function的使用和new Function是一样的。

(function(){
	var local=1;
	eval("local=3; console.log(local)"); //logs 3
	console.log(local); //logs 3
}());



(function(){
	var local=1;
	Function("console.log(typeof local);")(); //logs 未定义
}());

使用parseInt()的数值约定

每次具体制定进制参数

var month="06",
    year="09";
month=parseInt(month,10);

year=parseInt(year,10);

//另外一个将字符串转换为数值的方法是 +"08" //结果是8 Number("08") //8

编码约定

一致遵循约定比这个具体约定是什么更为重要。

缩进

JSLint默认值 4个空格缩进

function outer(a, b){
	var c = 1,
	    d = 2,
	    inner;
	if (a > b){
        inner = function () {
        	return {
        		r: c - d
        	};
        };
	} else {
		inner = function () {
			return {
				r: c + d
			};
		};
	}
	return inner;
}

大括号

应该经常使用大括号

开放的大括号位置

分号插入机制 semicolon insertion mechanism

空格

命名约定

构造函数的首字母大写

分割单词

构造函数可以用使用大驼峰命名法

函数和方法名可以用小驼峰命名法

函数的变量可以用小写单词和下划线连接

其他命名默模式

变量名全部大写代表该变量在生命周期中不可变

编写注释

编写API文档

/**
* @tag value
*/

/**
 * 反转一个字符串
 *
 * @param {String} 输入血药反转的字符串
 * @return {String} 反转后的字符串
 */
var reverse=function(input){
	//...
	return output;
};

YUIDoc范例

http://www.jspatterns.com/book/2/

/**
 * 我的JavaScript应用程序
 *
 * @module myapp
 */

 var MYAPP = {};

 /**
  * 一个数字工具
  * @namespace MYAPP
  * @class math_stuff
  */
MYAPP.math_stuff={
	/**
	 * Sums two numbers
	 *
	 * @method sum
	 * @param {Number} 是第一个数
	 * @param {Number} 是第二个数
	 * @return {Number} 两个输入的总和
	 */
	sum: function (a, b) {
		return a + b;
	},
	/**
	 * Multiplies two numbers
	 *
	 * @method multi
	 * @param {Number} 是第一个数
	 * @param {Number} 是第二个数
	 * @return {Number} 两个输入相乘后结果
	 */
	 multi: function (a, b) {
         return a * b;
	 }

};
 /**
  * Constructs Person objects
  * @class Person
  * @constructor
  * @namespace MYAPP
  * @param {String} first 是名字
  * @param {String} last 是姓氏
  */
 MYAPP.Person =function (first, last){
 	/**
 	 * 人的姓名
 	 * @property first_name
 	 * @type String
 	 */
 	this.first_name=first;
 	/**
 	 * Last (family) name of the person
 	 * @property last_name
 	 * @type String
 	 */
 	this.last_name=last;



 };
/**
 * Returns the name of the person object
 *
 * @method getName
 * @return {String} 人的姓名
 */
MYAPP.Person.prototype.getName = function () {
	return this.first_name + ' ' + this.last_name;
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AI科技大本营的专栏

突发!Java首度承认失败,愿永久服软Python!网友:好想哭!

最近,这个格局已经被悄然打破,正是被来自曾经的小弟,新晋网红Python给硬生生拽下神坛。对此,Java曾表示强烈质疑,最近一份数据榜单悄悄来了!

14520
来自专栏A周立SpringCloud

史上最污技术解读,我竟然秒懂了!

很多同学对热备,冷备,云备了解不深,我科普一下 IT 行业各种备份术语。以后别闹笑话了。

11320
来自专栏Java技术栈

Spring Boot 注册 Servlet 的三种方法,真是太有用了!

本文栈长教你如何在 Spring Boot 注册 Servlet、Filter、Listener。

14350
来自专栏Java技术栈

阿里 P8 Java 高级工程师,都需要掌握哪些技术栈?

大家都知道,阿里P8高级技术专家,基本上是一线技术人能达到的最高职级,也是很多程序员追求的目标。

24860
来自专栏SpringCloud专栏

Springboot集成sentinel实现接口限流入门

版权声明:本文为博主原创文章,转载请注明地址http://blog.csdn.net/tianyaleixiaowu。 https://blog.csd...

2.3K50
来自专栏weixuqin 的专栏

leecode刷题(27)-- 合并k个排序链表

以前做过合并两个有序链表的问题,所以刚开始想到的解法与之类似,我们可以先合并两个有序链表,再用合并的新链表去合并第三个链表:

11330
来自专栏Java技术栈

为什么大部分码农做不了系统架构师?

小团队一般 10 人左右,其中常常是技术最牛的人做架构师(或TL)。所以,架构师在广大码农中的占比大概平均不到 10%。

14640
来自专栏Java架构

80后程序员降薪6K,预感中年危机来袭,准备跳槽却碰壁

一提及程序员,很多人想到的都是“工资高”“技术好”诸如此类的,可见程序员是个非常赚钱的职业,所以每年都会有很多毕业生来选择这个行业。

15140
来自专栏养码场

编程语言简史:有人不喜欢花括号,于是他发明了 Python

编程语言有上千种,但是流行的不过10来种,那些我们经常使用的编程语言都是谁在什么时候创造出来的呢?Casper Beyer为我们进行了整理。(本文节选)

14720
来自专栏用户1337634的专栏

Java Bean Validation分组校验

81220

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励