LCUI框架开发中需注意的JS基本点

• 常用方法

1. this和self

1. this不被上一级调用时指向window,被上一级调用时指向上一级，被多个对象调用时也指向上一级，即this永远指向最后调用它的对象；new可以改变this的指向（创建实例），this遇到return时根据返回对象决定。
2. self指窗口本身，它返回的对象和window对象是一模一样的，window对象常用的方法和函数都可以用self代替window。

 

1. 阻止默认事件和事件冒泡

当该页面与该页面上某个控件或窗口针对同一事件消息作出不同的处理时，会发生事件冲突，比如针对同一按键，按键松开时会调用该页面上所有的针对该按键事件，此时需要在子控件事件处理之后调用默认事件阻止方法和阻止事件冒泡方法，即event.preventDefault()和event.stopPropagati on()。

stopPropagation()函数用于阻止当前事件在DOM树上冒泡。根据DOM事件流机制，在元素上触发的大多数事件都会冒泡传递到该元素的所有祖辈元素上，如果这些祖辈元素上也绑定了相应的事件处理函数，就会触发执行这些函数。

使用stopPropagation()函数可以阻止当前事件向祖辈元素的冒泡传递，也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。

 

3、this.f = function(){}和function f(){}的区别：

前者只有在被赋值的时候才会被正在定义，具有良好的控制可见性；后者在JS文件被加载的时候就已被定义，遂不能作为条件语句

 

4、  参数的定义传递

（1）、在一个函数内，var param = ……的方式定义的参数为局部变量，只能在该函数内使用；

（2）、在函数体外用var声明变量或者在函数内部不用var，直接写变量名均为全局变量；另外，const 修饰的变量必须初始化，声明位置不限，变量值不可修改；let声明的变量在函数体内使用，变量的作用域仅在块级域中；

（3）、self是指window对象的本身，也是js运行所依附的全局环境对象和全局作用域对象，其对象可全局使用。

参数传递需注意的问题：

将函数作为参数传递时，function()表示传递函数已执行的结果，function表示传递函数使接收方执行；this.params = null 的含义，可将该函数内的变量包含在self.params中（需弄明白参数传递的方向）。

 

 

5、CSS属性z-index和tabindex的使用

tabindex：定义的是tab键获取光标的顺序；

z-index：定义了层的层次关系,在层之上还是在层之下，值大的在上面。但在父标签 position属性为relative、该标签无position属性（不包括static）、标签含有浮动(float)属性时设置z-index没有效果，需要设置该标签位置为绝对定位才可以。

 

   6、定位方式（需要注意的问题）

       绝对定位的时候，设置margin-left/right/top/…无法起到将元素定位到各边相距位置，需设置left/right/top/…

 

    7、可视化设置属性：

       outline：设置边框虚线的显示情况

       visibility：设置窗口或控件的显示情况

 

• JS与JQUERY的区别

 

1、根据ID取元素

{

JS:取到的是一个DOM对象。

　　例：var div = document.getElementByID("one");

JQUERY:取到的是一个JQUERY对象。

　　例：var div = $("#one");——括号里面是根据某个东西来找，相当于一个选择，如果我们要根据ID来找，在样式表里的ID是用#来表示的，所以在这里我们直接带入井号，整句的意思就是根据ID为one的来查找。

}

 

2、根据class取元素，在数组里面如果要取DOM对象使用索引的方式，如果要取JQUERY对象使用eq()

{

JS:取到的是一个数组

　　例：var div = document.ElementsByClassName("test");

JQUERY:

　　例：var div = $(".test");

}

3、根据name取元素

{

JS：返回的是一个数组

　　例：var bd = document.getElementsByName(uid);

JQUERY：的方式是用 方括号，属性=一个值，不限制非要根据name来取值，JQUERY是根据属性来取元素

　　例：$("[name='uid']");

}

 

4、根据标签名取元素

{

JS：返回的也是一个数组

　　例：var div = document.getElementsByTagName("div");

JQUERY：和样式表里面给所有div加样式的方法一样，在双引号内直接写标签名

　　例：$("div");

}