前端技术小讲

说到前端，html，css与javascript是无法跳过的三个技术点，其中js对于现在emap开发尤为重要，因为大部分的业务逻辑都是写在js文件里面，通过浏览器执行的，而其中js的库jquery更加重要，因为现在不仅仅是emap，公司其他的前端都是基于jquery的。学会了jquery，就可以运用emap进行基础的开发了。本文将从js入手，讲述自己入公司半年来学到的一些浅薄的技术。
对于js来说，它的致命弱点就是其弱语言类型，但是这也是其强大的原因。首先我们先看一段代码：

上图的代码是对于js中isNaN方法的复写（isNaN是用来判断所传参数是否是非数字，如果是非数字则返回true，如果是数字则返回false）。第二行代码的加号（+），这个加号在这里表示的含义是正号的意思，如果result可以转化为数字，例如字符串“123”（此时js会自动将其转化为数字类型Number），或者它本身就是数字，那么正号对于其来说没有任何作用，而如同它是一个无法转换成数字的字符串例如“adc”，那么正号操作符根本无法对一个字符串进行操作，此时result将被赋值为NaN，这是一个js里面特殊的对象 ，它表示非数字类型，它本身和本身就不相等，即NaN!=NaN，之后第三行对result本身进行判断，此时的！==运算符号是表示js将会按照其本身的数据类型进行判断，即数字只能等于数字，字符串只能等于字符串。如果其传入的result可以变转换为数字，那么这个时候result与其本身应该是相等的，返回false，如果result成为NaN，那么本身不等于本身，那么返回true。从这个小代码里面，我发现虽然js是弱语言类型，但是如果严格的去用typeof判断数据模式，js有机会成为一个假的强语言类型。
Js的数据类型分为：undenfine,null,Boolean,Number,String,Object。这些，由于是弱语言，所以这些类型之间可以相互转化，例如在if判断的语句里面，假如你传一个值为null的参数，那么js将会将其转化为false进行if中的判断。其中操作符’==’是将两者进行类型上的自动转化后在进行判断，即’1243’ == 1243这个语句是正确的，因为转化为String类型后他们是相等的，这个操作符不会对数据的类型进行判断，而你想要对数据类型进行判断，那么你需要使用操作符’===’，这个操作符将会对数据的类型进行严格的判断。其中所有的数据类型都可以成为object类型。
Js是事件驱动（Event Driver）的编程语言。Dom元素上的事件绑定是用来驱动业务逻辑的主要手段。Js中的事件流分为两种：1.事件冒泡，2.事件捕获。事件冒泡个人的简单理解就是从确定到不确定，从小的元素到最后的document，事件捕获则恰巧相反，它是从不确定到确定，从大到小。

而这两个方式都被运用在了dom2的事件流中，首先事件将会从捕获开始，即绑定事件的元素在事件捕获中将不会被触发事件，这给我们在此过程里面改变事件阻止事件的发生提供了缺口，之后才是事件冒泡，此时事件已经被触发，事件将会驱动页面中业务逻辑的运转。
事件在实际的业务开发里面十分的重要，它不仅仅是业务逻辑的推动者也是与对象交互的入口。每个事件都会有一个event对象，对象里面包含了各种你所想得到的信息，一般来说我们实际里面需要的是绑定事件的这个dom元素本身，此时通过e.target就可以得到触发事件的元素本身了。在实际开发里面，我们将会用两种事件绑定的形式，一是事件的绑定，它会直接绑定到具体的元素，只有这个元素的事件被触发的时候，事件才会进行，具体的代码如下（jquery）：

这段代码为一个id为id的dom元素绑定了一个click事件，当dom元素被点击的事件，将会触发里面的方法弹出一个内容为“hello”的弹出框。这种事件直接绑定到具体的元素，当元素在页面上是唯一不变，或者一直存在的时候是可以用的，但是如果一个元素的动态生成的，同时又有多个，那么事件的绑定就不可以，第一它可能无法定位元素，第二它需要一个个绑定，代码量巨大。我们此时需要的是事件的代理：

上面的代码表示为一个id为id的父元素绑定了一个监听器，监听器将监听发生在其上的所有click事件，但是只有当其中有class包含class的子元素被点击的时候，监听器才会触发方法，进行事件的执行。这样的好处就是内部的元素只要其存在的时候有class的样式就会在点击的时候触发事件，这样就可以动态的生成dom元素而无需一遍遍的为才生成的节点绑定事件了。
上面已经提到了事件，那么就不能不将事件的主体：函数。函数可以看作一个包含你想执行的语句的集合，它的作用在于完成事件，得到期望的结果。在js里面函数的定义有两种方式：函数声明与函数表达式。

前三行代码是函数声明，它重要特性就是函数声明将会被提升到执行环境顶部首先被解释编译，也就是说当解释器解释js代码的时候，声明的函数将会被首先编译，即使你在函数声明之前就使用了函数也会正常执行，因为它在解释一开始就被编译了。
后三行则是函数表达式，它无法被提升到顶部，所以只能顺序解释执行，在之前其之前将无法使用。

上图中函数fn1将会被提升到整个全局的顶部，而函数a则会被提升到方法fn3内部的顶部，所以说函数的提升也和它所处的作用域有关系。此时不得不说到this，我们通常会在函数里面用到this这个特殊的对象，但是和我们所想的不同，this指向的并不是方法本身，即fn1里面的this并不是指向fn1，而是指向的是函数据以执行的环境对象，一般来说就是window对象，如下代码：

即使是在函数内部定义一个函数，它的this依旧指向的是window而不是其外部包裹的函数：

既然讲到了函数，那么js函数中的闭包就不得不提到。很多人都会把匿名函数与闭包混淆。闭包是指有权访问另一个函数作用域中的变量的函数。一般来说虽然js没有模块的概念，但是函数内部定义的变量，外部的其余函数是无法调用的。

虽然都是a，但是两个a在不同函数内部定义，所以他们所指向的是完全不一样的，fn1中的自定义变量fn2中是不可以访问的。而闭包则可以访问自己所处的父函数内部的变量：

如上图，b就是一个闭包。一般来说函数a在被执行过后，里面的变量等等会被回收，即在执行完毕后，它内部的所有都应该被销毁，但是执行b的时候，其a内部的变量c依旧可以被访问到。a的作用域链在a执行完毕后就被销毁，但是其活动对象依旧会存在于内存里面直到b被销毁后。
闭包在实际的业务场景里面我到现在几乎没有使用，但是在在我的看法中，闭包在组件的开发里面使用率将会很高