LCUI框架開發中需注意的JS基本點
- 常用方法
- this和self
- this不被上一級呼叫時指向window,被上一級呼叫時指向上一級,被多個物件呼叫時也指向上一級,即this永遠指向最後呼叫它的物件;new可以改變this的指向(建立例項),this遇到return時根據返回物件決定。
- self指視窗本身,它返回的物件和window物件是一模一樣的,window物件常用的方法和函式都可以用self代替window。
- 阻止預設事件和事件冒泡
當該頁面與該頁面上某個控制元件或視窗針對同一事件訊息作出不同的處理時,會發生事件衝突,比如針對同一按鍵,按鍵鬆開時會呼叫該頁面上所有的針對該按鍵事件,此時需要在子控制元件事件處理之後呼叫預設事件阻止方法和阻止事件冒泡方法,即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");
}