读汤姆大叔《深入理解javascript系列》笔记一编写高质量代码

感觉大叔的博文真的是很不错 我打算严格要求自己 按照大叔说的,这样我就会更有规范,更有思想的去工作 去写代码(一入代码深似海)

1,尽可能的少用全局变量(污染全局空间,也会和别人的代码 发生冲突造成严重的后果) ---->命名空间模式或者是函数立即自动执行.

2.不管是不是在函数内始终用var来声明变量, 例如:

function sum(x, y){

result = x + y;

//这里创建了一个隐式全局变量

return result;

}

3.避免出现隐式变量 例如在函数中不通过var声明的变量 或者是没有声明的变量. (部分var声明 例如)

function foo(){

var a = b = 0;

//这里a是局部变量,但是b是全局变量

}

就好比   var a = (b = 0); 这行代码一样

PS:

(1)通过var 创建的全局变量是不能被删除的;

(2)无var创建的隐式全部变量 是可以被删除的

var  global_var1 = 1;

global_var2 = 2;

delete global_var1; //false

delete global_var2;//true

4.声明变量 不管是局部变量还是全局变量 使用链分配是比较好的做法  例如

var a, b;  (变量的声明尽可能 var  和变量名字空开)--->

5.函数中的变量的置顶解析/预解析 例如:

function(){

alert(name);//undefined 而不是报错是因为 咱们的name变量已经解析只是还没有进行表达式的赋值 所以他的值是有的 就是undefined

var name = ‘zero‘;

}

PS: 最好的办法就是你提前声明你需要的所有变量 并最数值确定的时候进行表达式赋值

6.for循环

for(var i = 0;i<myarray.length; i++){

// do something  这不是一个好循环 (每次循环都要去读取myarray的长度 如果 myarray 是一个HTMLCollection对象的时候)

// HTMLCollections指的是DOM方法返回的对象,例如:

//document.getElementsByName()
//document.getElementsByClassName()

//document.getElementsByTagName()

//每次查询都要实时查选dom (操作dom是比较昂贵的)

}

优化方案如下:

(1)

for (var i = 0, max = myarray.length; i < max; i++) {
   // 使用myarray[i]做点什么

}

(2)

for (var i = 0, max = myarray.length; i < max; i+=1) {

// 使用myarray[i]做点什么

}

(3)

var i, myarray = [];
for (i = myarray.length; i–-;) {
   // 使用myarray[i]做点什么

}

5. for-in 循环应该用在非数组对象的遍历上  也叫做"枚举"

6. hasOwnProperty()方法---->过滤掉从原型链上下来的属性 例如:

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

Object.prototype.name=‘zero‘;

//console.log(man.name);//zero  在原型中添加了一个name属性并且赋值为zero

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

}

控制台打印结果为

hands:2

legs:2

heads:1

(已经把原型中添加的属性过滤掉了)

另外一种使用hasOwnProperty()的形式是取消Object.prototype上的方法。像是:

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

}

其好处在于在man对象重新定义hasOwnProperty情况下避免命名冲突。也避免了长属性查找对象的所有方法,你可以使用局部变量“缓存”它。

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

}

PS: 不增加内置原型是最好的。

7. 避免隐式类型转换-----> 始终使用===和!==操作符

8.避免 eval(); 此方法接受任意的字符串,并当作JavaScript代码来处理 例如:

// 反面示例
var property = "name";
alert(eval("obj." + property));

// 更好的
var property = "name";
alert(obj[property]);

9. 不要给setInterval(), setTimeout()和Function()构造函数传递字符串----->请传递函数

// 反面示例
setTimeout("myFunc()", 1000);
setTimeout("myFunc(1, 2, 3)", 1000);

// 更好的
setTimeout(myFunc, 1000);
setTimeout(function () {
   myFunc(1, 2, 3);
}, 1000);

使用function来代替eval是不错的选择

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); // number
console.log(typeof deux); // "undefined"
console.log(typeof trois); // "undefined"

如果你绝对必须使用eval(),你 可以考虑使用new Function()代替。有一个小的潜在好处,因为在新Function()中作代码评估是在局部函数作用域中运行

eval()和Function构造不同的是eval()可以干扰作用域链,而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 undefined

}());

10.parseInt()下的数值转换 该方法接受另一个基数参数,这经常省略,但不应该---->  为了避免矛盾和意外的结果,总是指定基数参数

11.parseInt() 替换方法是将字符串转换成数字,包括:

+"08" // 结果是 8

Number("08") // 8

12.代码一定要进行缩进具体缩进多少 一个tab? 两个tab? 还是空格? 要根据团队的规范来执行

13.花括号一定不要省略就算你的花括号中只有一条语句 ----->  始终把在与之前的语句放在同一行:

function func() {
   return {
      name : "Batman"
   };

}

14.空格的使用

var d = 0,
    a = b + 1;
if (a && b && c) {
    d = a % c;
    a += d;

}

15.大写字母写构造函数:

var adam = new Person();

16. 构造函数--> 驼峰(Camel)命名法:

MyConstructor()

17.对于函数和方法名称,变量也可以使用小驼峰式命名法

calculateArea()getFirstName()

18. 全部单词大写;

var PI = 3.14,

19. 使用一个下划线前缀来表示一个私有属性或方法会更容易些

20.你要随时注释你的代码我相信一个良好的程序员都会在每个功能模块加上自己的注释 不为了别人 为了自己也需要

时间: 2024-10-14 21:24:46

读汤姆大叔《深入理解javascript系列》笔记一编写高质量代码的相关文章

汤姆大叔深入理解JavaScript 学习笔记

myname = "global"; // 全局变量 function func() { alert(myname); // "undefined" var myname = "local"; alert(myname); // "local" } func(); 代码处理分两个阶段,第一阶段是变量,函数声明,以及正常格式的参数创建,这是一个解析和进入上下文 的阶段.第二个阶段是代码执行,函数表达式和不合格的标识符(为声明的变

读汤姆大叔《JavaScript变量对象》笔记

一段简单的JavaScript代码思考 先看一段简单的代码,打印结果是??为什么why?? 从上述打印结果不难看出,在打印基本变量num.函数表达式fn.函数声明fun时,就已经知道变量num.函数表达式fn值为undefined,函数声明fun值为function 但这样会存在一个疑问?js在代码执行之前打印时(变量.函数表达式.函数声明)就存在值,那么在打印(变量.函数表达式.函数声明)之前究竟发了什么?? [答案是变量对象.执行上下文代码的2个阶段] (当然 打印在基本变量num.函数表达

编写高质量代码改善C#程序的157个建议——建议44:理解委托中的协变

建议44:理解委托中的协变 委托中的泛型变量天然是部分支持协变的.为什么是“部分支持协变”?看下面示例: class Program { public delegate T GetEmployeeHanlder<T>(string name); static void Main() { GetEmployeeHanlder<Employee> getAEmployee = GetAManager; Employee e = getAEmployee("Mike"

编写高质量代码改善C#程序的157个建议——建议28:理解延迟求值和主动求值之间的区别

建议28:理解延迟求值和主动求值之间的区别 要理解延迟求值(lazy evaluation)和主动求值(eager evaluation),先看个例子: List<int> list = new List<int>() { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 }; var temp1 = from c in list where c > 5 select c; var temp2 = (from c in list where c > 5 sele

我读汤姆大叔的深入理解js(二)

继续汤姆大叔的js之旅. 揭秘命名函数表达式 函数表达式和函数声明 汤姆大叔在博客中引用ECMA规范:函数声明必须带有标识符,函数表达式可以省略.对于我来说这些概念的东西真是不所适从.还是大叔的实例带劲.上实例如下: function foo(){};//鬼都知道是声明 var bar = function foo(){};//鬼也知道是表达式 new function bar(){}; (function() { function bar(){};//这也是声明 })();这些大家看看应该都很

JavaScript手札:《编写高质量JS代码的68个有效方法》(一)(1~5)

编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { marg

汤姆大叔6道javascript思考题

1.返回数组中的最大值:(math.max) 首先,明确用法.math.max(1,2,4,-5,3 )  比较传入参数的值,参数个数任意: 实现 : 用apply(object,[]); var num =[1,2,3,4,5]; var b=Math.max.apply(Math,num); 2.转化一个数字数组为function数组(每个function都弹出相应的数字) function toFunction (num){           var mynum= new Array()

根本没有“JSON“对象这回事(读汤姆大叔博文记录)

1.字面量 (1)他们是固定的值,不是变量,让你从“字面上”理解脚本. (2)字符串字面量是由双引号("")或单引号('')包围起来的零个或多个字符串组成的. (3)对象字面量是由花括号({})括起来的零个或多个对象的属性(key-value对). 2.何时是JSON,何时不是JSON JSON是设计成描述数据交换格式的,他也有自己的语法,这是语法是JavaScript的子集. {"proporty":"value"}这样的声明可能是JavaSc

读《编写高质量代码:改善JavaScript程序的188个建议》1

建议3:减少全局变量污染 定义全局变量有3种方式: ?在任何函数外面直接执行var语句. var f='value'; ?直接添加一个属性到全局对象上.全局对象是所有全局变量的容器.在Web浏览器中,全局对象名为window. window.f='value'; ?直接使用未经声明的变量,以这种方式定义的全局变量被称为隐式的全局变量. f='value'; 为方便初学者在使用前无须声明变量而有意设计了隐式的全局变量,然而不幸的是忘记声明变量成了一个非常普遍的现象.JavaScript的策略是让那