我的前端日常坑(2016.08.29)

我乃前端小白一个。这里记录了一个人开发中撞破头的趣事。

有一天,我在做数据可视化的页面,用百度出品的echarts库。做成大概就是表格显示x行y列数据,用折线图表示,表头有按钮可以开关对应的折线。

看着简单吧,但对我这个没啥前端经验的小白,真是窗户纸一层层捅破啊。

2016.08.26 关于js的for循环之一

我向按钮们绑定事件。

我:

    for(var i=0; i
  • (卧槽,我明明)
  • 有bug!
  • 打开chrome F12!
  • 卧槽!
  • 函数的参数i怎么都102了!好大!
  • 什么鬼!
    。。。
  • 由于我一个人苦逼搞前端,没人可问,于是在google众里寻他千百度~
    。。。
  • 妈蛋!
  • 原来那个i的作用域不是在{}里面!
  • 而js以function为单位一级一级延伸作用域!
  • 妈蛋,到底该咋办!
  • 逼我!我去看看电脑里有的js库是咋写的!
  • 先来看看jQuery-2.1.1
    关于全局变量
var class2type = {};
var toString = class2type.toString;
var hasOwn = class2type.hasOwnProperty;

关于简单的for循环

var i = 0;
for( ; i < length; i++){
    //code
}
  • 不能随便声明全局变量啊!
  • 反正以后我全局变量都放在一个Object里。。。
  • 反正以后for循环像上面那样~

2016.08.29 js关于等等和等等等与方括号和点

  • 咦!
  • 打开jquery-2.1.1之后
  • 我的atom的JSHint居然警告!
    get: function( num ) {
        return num != null ?

            // Return just the one element from the set
            ( num < 0 ? this[ num + this.length ] : this[ num ] ) :

            // Return all the elements in a clean array
            slice.call( this );
    }

  //tWarningW041 - Use '!==' to compare with 'null'.at line 111 col 20
  • 天呐!jquery都会欸警告!到底用'!='还是'!=='!
  • 还有!
inArray: function( elem, arr, i ) {
        return arr == null ? -1 : indexOf.call( arr, elem, i );
    },
//WarningW041 - Use '===' to compare with 'null'.at line 421 col 20
  • 看来是'='和'=='之间的战争了!
  • 还有!
    delete Expr.find["ID"];
    //W069 - ['ID'] is better written in dot notation.at line 1105 col 25
  • 是方括号还是点!
  • 我来stackoverflow一番!
  • 找到了!Which equals operator (== vs ===) should be used in JavaScript comparisons?
  • accepted答案:
The identity (===) operator behaves identically to the equality (==) operator except no type conversion is done, and the types must be the same to be considered equal.
Reference: [Javascript Tutorial: Comparison Operators](http://www.c-point.com/javascript_tutorial/jsgrpComparison.htm)
The ==operator will compare for equality *after doing any necessary type conversions*. The ===operator will **not** do the conversion, so if two values are not the same type ===
 will simply return false
. Both are equally quick.
To quote Douglas Crockford's excellent [JavaScript: The Good Parts](http://rads.stackoverflow.com/amzn/click/0596517742),
  • 我慢慢翻译~
  • 来看这个!
'' == '0' // false
0 == '' // true
0 == '0' // true
false == 'false' // false
false == '0' // true
false == undefined // false
false == null // false
null == undefined // true
' \t\r\n ' == 0 // true
  • WTF!
  • '=='
  • 看第二的答案!
 Using the ==operator (*Equality*)
true == 1; //true, because 'true' is converted to 1 and then compared
"2" == 2; //true, because "2" is converted to 2 and then compared
Using the ===operator (*Identity*)
true === 1; //false
"2" === 2; //false
This is because the **equality operator ==
 does type coercion**, meaning that the interpreter implicitly tries to convert the values before comparing.
On the other hand, the **identity operator ===
 does not do type coercion**, and thus does not convert the values when comparing.
  • SOGA!
  • 那么方括号和点呢?
  • 一个博客:https://medium.com/@prufrock123/js-dot-notation-vs-bracket-notation-797c4e34f01d#.kgi1drgd3
  • 找到了MDN的文档:Property accessors!
符号表示法
get = object.property;
object.property = set;
以上代码中,属性名必须是一个有效的JavaScript标识符,例如,一串字母数字字符,也包括下划线及美元符号,但不能以数字作为开头。比如,
object.$1是合法的,而object.1是无效不合法的。
document.createElement('pre');
在上述代码块中,对象document中存在一个名为"createElement"的方法并且被调用了。
括号表示法
get=object[property_name];
object[property_name] = set;
property_name是一个字符串。该字符串不一定是一个合法的标识符;它可以是任意值,例如,"1foo","!bar!", 甚至是一个空格。
document['createElement']('pre');
这里的代码的功能跟上一个列子的作用是相同的。
  • 看来两者的命名规则是主要区别之一
  • 所以为了规范,用点好;某些时候为了随性的命名,页可以用方括号
  • 以上是我猜的!
  • 不要认真!我是几天经验的小白!

你可能感兴趣的:(我的前端日常坑(2016.08.29))