#DayOne前端每日读书

为了不忘初心，太多人和我说，原生js没有用，只要能够快速上手项目就可以了。而又有另外一个声音在告诉我，不知道原理基础，怎么去知道那些框架的真正目的和原理呢？对于一个学了大半年没有实习过没有大型项目经历的我来说，没有什么发言权，我还是坚持每天积累，看书，总有一天会有用的。

《高级程序设计》----24章节 最佳实践

image.png

一 可维护性

怎么说，代码最后如果越来越多，就是给大家看的代码的，所以一定要做好一些前期的规范工作，才能有利于后续的实践与操作。

那么就应该做一些代码的约定。
kimmy也经常说，在实际的项目中代码约定很重要。为了避免以后别人看不懂我的代码，现在还是要强制改好自己的习惯。

• 可读性
  在一些必要的地方做好代码的注释，每一个函数和事件之前做好代码的解释，别人才会知道这个方法的用处。以及一些复杂的算法实现还有相应的hack解决手段，也应该有所注释。
• 变量和函数命名
  其实，说真的，我有时候对于一些变量和函数的命名真的是惊慌失措，因为觉得没有名字了。函数的命名最好还是根据函数的目的来命名，要获取名字，就叫做getName（）。对了，如果是有返回值的话，或者是测试布尔值，可以用isEnable()来命名，以is为开头。嗯，长度不是问题，而是应该合乎逻辑的名字。
• 变量类型透明
  说到这个，我在定义类型的时候，经常是选择给空字符串。现在想想觉得不太好，应该最好是什么类型的数据先给一个类似的初始值。

var found = false
var count = 0
var name = ''

但是，这样别人也不能轻易知道是什么数据类型，所以我会选择这样的方式，就是结合上面的还有匈牙利标记法

var bfound = false
var icount = 0
var sname = ''
var Ocar = {}

当然，文中还提到一种注释法，但是注释法会影响多行注释，所以不建议。

二松散耦合

• 解耦html/js
  尽量不要在js代码中创建html代码。
• 解耦css/js
  这个其实有道理，就是你尽量不要在js内部去直接修改css样式，因为这样导致的后期调试问题是很难的。element.style.color = red;element.style.width = '10px' 这么做其实都没有必要，因为一旦页面需要调试的话，你要找到这个样式的设置是很难的。所以应该尽量不要在js中修改css.
  ？？？那，怎么做比较好呢
  相应的解决方案：修改元素的类，class

element.className = 'red'

这样就有一个好处了，一旦调试出问题，我们也可以直接通过类来找到。再者，如果后期这个样式要修改，我们也可以通过直接找到相应的类名，在类内部去修改。不至于再去js代码内部修改。

• 解耦应用逻辑/事件处理程序
  这个我也很有感触啊。因为经常在一些需要处理应用逻辑和事件处理程序的代码中。怎么把两者分离也是很重要的。就像kimmy也经常有说，你事件的处理程序和你数据的请求也要分开来写。这样就简单明了。
  原来的代码

function handleKetPress(event){
  event = EventUtil.getevent(event)
  if (event.keyCode == 13) {
   var target = EventUtil.getTarget(event)
   var value = 5 * parseInt(target.value)
  if (value > 10) {
  document.getElementById('message').style.display = 'block'
 }
 }
 }

转换后的代码,将事件处理和逻辑应用分开处理。

function validatValue(value) {
var value = 5 * parseInt(tvalue)
if (value > 10) {
document.getElementById('message').style.display = 'block'
}
}


function handleKetPress(event){
  event = EventUtil.getevent(event)
  if (event.keyCode == 13) {
   var target = EventUtil.getTarget(event)
   validatValue(target.value)
}
}

三 编程实践

• 避免全局量
• 使用常量
  这个还挺有感悟的，有时候在写一些东西的时候，就是一些比较常用的常量，还是可以将其存放在一个常量里的
  我记得kimmy在那个换肤的那个应用的时候，就是定义了一些常量在一个文件里，需要使用的时候就直接应用了。当然，以后我们如果需要修改到这个常量，我们只要找到当初存放的文件夹，进行修改就可以了。

var constance = {
  url : /huhuhu.php/,
  msg: 'invalid Value'
}

• 避免与null进行比较
  有时候在if语句内，经常要判断一些变量的属性，来进行下一步的操作。当然，变量最好就不要与Null进行比较。
  引用类型： 使用instanceof判断检查其构造函数

value instanceof Array   // 判断是不是数组

基本类型：使用typeof检查其类型

typeof value// 判断是什么类型的 string .Array .Object

如果是希望对象包含某个特定的方法。使用typeof操作确保制定名字的方法存在于对象上。