javascript小知識點

634828354發表於2017-02-07

小知識點:

  1. 設定圖片時<image scr="" alt="" width="">單設定一個長或寬則剩下的邊長按比例自動設定。

  2. 滑鼠移至圖片上時變成小手給圖片新增樣式 cursor:pointer;

  3. 阻止表單提交<form action="javascript:;">

  4. 設定盒子權重時在樣式中寫 z-index:數字越大優先順序越高。

  5. id選擇器與類選擇器的區別:同一個頁面中一個標籤只能對應一個id但是可以選擇多個類,類也可以應用在多個標籤中。

  6. 給a標籤的href="javascript:;" 其中javascript:是偽協議,它可以讓我們透過一個連結來呼叫javascript函式.而採用這個方式 javascript:;可以實現A標籤的點選事件執行時,如果頁面內容很多,有捲軸時,頁面不會亂跳,使用者體驗更好。相當於執行了一段javascript空程式碼,地址不發生跳轉。與這個相同

  7. 去掉li前面的小點用list-style-type: none;

  8. 使li或span的外形變為圓形用border-radius: 50%; 新增圓角邊框。

  9. textarea設定resize:none;可以防止使用者改變文字框大小。

  10. 想讓盒子根據裡面內容多少改變大小將盒子height改成auto。

  11. 使按鈕或者表單不可用this.disable=true;

  12. a&&b 如果a 為假 ,則返回 a ;如果a 為真 ,則返回 b 。

    i. a||b 如果 a 為假 ,則返回b ;如果 a 為真 ,則返回a 。

  13. img {vertical-align: top; } /取消圖片底部3畫素距離/

  14. 一定要注意在javascript裡修改style樣式時候賦值都要用“”以字串形式賦值。

  15. javascript修改style中的數值後都可以到行內數值樣式上看到。

  16. 使用webstorm新建javascript檔案時候先把右下角的編碼格式改為utf-8否則後面執行會出錯。新建css檔案也一樣。

  17. 如果在head裡面引用javascript檔案則需要考慮檔案內函式是否在window.onload裡面否則會產生因為網頁未載入完造成javascript出錯。

  18. 表單中的input可以直接透過name屬性獲取到DOM物件,form.控制元件name

  19. 建立字串時若裡帶有標籤的最好用單引號括起來避免和裡面的雙引號衝突。

  20. JS 頁面跳轉: window.location.href = ””。

  21. 要獲取當前頁面寬度用document.documentElement.clientWidth。

  22. 獲取當前頁面相對滾動document.documentElement.scrollTop||document.body.scrollTop;

  23. input的type改為search時可以將回車當確認鍵。

  24. 獲取螢幕觸控用addEventListener(“touchstart”,function(event){})在函式中用event.touches[0].clientY;來獲取滑鼠點選的Y座標用touchmove來獲取觸控離開時滑鼠最後所在的座標。

  25. 使用var img=new Image(width,height );效果和cratelement的效果相同。用img.src新增圖片。

  26. 字串轉換成JSON物件用全域性的JSON函式 JSON.parse(string);

  27. 可以利用instanceof來判斷物件的建構函式。

  28. 若函式中加return就不能當做建構函式來看,建構函式return的是一個物件。

  29. 判斷資料型別時常用typeof和call,在使用 typeof 運算子時採用引用型別儲存值(NULL,陣列,物件)會出現一個問題,無論引用的是什麼型別的物件,它都返回 "object"。

  30. console.log(toString.call({})) //[object Object]

  31. console.log(toString.call([])) //[object Array]

  32. 用window.addListener(“hashchange”,function(e){})來監聽位址列中#後的雜湊值變化,利用window.location來得到地址物件。

  33. 解析一個地址先建立一個a物件var aLink=document.creatElement(“a”)

  34. 再給a標籤物件href賦值為地址字串,之後既可透過aLink.hash得到地址雜湊值

  35. 小技巧給一個陣列不斷新增內容可以arr[arr.length]=…;來給陣列不斷賦值。

  36. 從陣列中刪除元素也可以splice(元素索引,刪除元素數目)。

  37. for迴圈陣列或物件時若用(index in arry)作為條件index表示當前元素索引。

  38. 可以使用外部連結的標籤img(支援跨域但無法獲取服務端資料)、iframe(可以接受資料單操作複雜)、link(在CSS處理階段會報錯)、script(可以獲取伺服器資料,被選做jsonp傳送方式)。

  39. 為了使程式碼易於維護採用開閉原則,對於後期會產生變化的量一定不能寫死,以後需要透過修改來迭代。

  40. 變化點封裝,一般都把今後會變化的地址類的寫在config函式里面,後面透過別名來使用。一定不要暴露在程式碼中。

  41. 將一個物件利用“=”賦值給另一個物件時傳遞的是一個記憶體物件,若修改其中一個的屬性則都會發生改動,想要避免源物件被篡改可以利用object.assign()方法或者object.creat()方法。

  42. js中函式物件是有長度的,它的長度是由引數的個數決定。(function (a, b, c, d) {}).length === 4。

  43. 想要正確處理上傳的檔案,並接受到檔案的內容,需要把表單的enctype屬性設定為multipart/form-data,這是個適用於於BLOB(大型二進位制檔案)的MIME型別。

  44. 想要將一個包含物件的陣列以字串的形式儲存到檔案中,需要迴圈遍歷陣列並用JSON物件的.stringify方法將物件轉化為字串形式,再進行儲存。

  45. 寫靜態網頁可以使用gulp+browersync(yo webapp生成模板),編寫動態網站用express+ejs+sass.

    Sass監聽資料夾:sass --watch sassFileDirectory:cssFileDirectory;

    Sass監聽單個檔案:sass --watch style.scss:style.css;

  46. 函式的柯里化(Currying)是把接受多個引數的函式變換成接受一個單一引數(最初函式的第一個引數)的函式,並且返回接受餘下的引數而且返回結果的新函式的技術。增加了函式的適用性,但同時也降低了函式的適用範圍。

  47. 惰性載入表示函式執行的分支只會在函式第一次掉用的時候執行,在第一次呼叫過程中,該函式會被覆蓋為另一個按照合適方式執行的函式,這樣任何對原函式的呼叫就不用再經過執行的分支了。如函式功能是對應不同瀏覽器建立XMLHttpRquest當第一次執行時判斷完瀏覽器型別並建立完成後及可以返回一個被修改過後的本函式,覆蓋原來的函式,這樣以後呼叫此函式時就不需要再判斷瀏覽器型別,可以直接建立對應XMLHttpRquest。

  48. 面向切面程式設計AOP主要實現的目的是針對業務處理過程中的切面進行提取,它所面對的是處理過程中的某個步驟或階段,以獲得邏輯過程中各部分之間低耦合性的隔離效果。比如最常見的就是日誌記錄了.

  49. String的search、match、replace引數都可以為正規表示式。

  50. 任何語言在浮點數運算時都會有誤差,浮點數運算的時候,先轉化為二進位制,用二進位制來算,結果再轉回十進位制,轉換的過程中會裝換成無限迴圈小數,所以最後結果會有誤差。js中使用Number.prototype.toFixed()來設定保留小數的位數,返回的是字串。可以使用valueOf()來再轉為number型別。

  51. 陣列的歸約函式reduce(function(prev,cur,i){})會從左到右進行迭代,每次返回的值作為下一次的prev引數。

  52. 在迴圈遍歷陣列時若是想在找到結果後將結果在陣列中剔除防止重複,因為若是直接刪除會影響陣列的迴圈,解決辦法是將此值賦為NaN,這樣在陣列中顯示時為null。使用delete刪除數值元素,刪除元素會產生空缺,不會更新length,空缺部分顯示undefined。如果沒按照陣列順序給陣列某一索引賦值,陣列將不連續,中間空缺部分會顯示undefined。forEach()會忽略undefined。使用splice()函式可以移除元素而不產生空缺。若修改陣列的length為某個值,陣列在此索引之外的部分都會被刪除。使用array.filter(function(v){return true;})可以濾出空缺函式。

  53. 使用閉包要注意,由於變數被儲存在記憶體中,所以會對記憶體造成消耗,所以不能濫用閉包。解決方法是 在退出函式之前,將不使用的區域性變數全部刪除。

  54. 使用array.filter(function(val){})可以遍歷陣列裡的所有內容,return true的話陣列會保留當前內容,false移除當前內容。

  55. 獲得所有傳入的引數放入一個陣列args = Array.prototype.slice.call(arguments);

  56. 寫遞迴函式時要注意:無論是否滿足跳出遞迴的條件,下一步的執行都要帶上return,即在呼叫自身時前面一定要帶上return,滿足跳出條件時才能一步一步跳出迴圈。

    var lefted,sliced = [];function chunkArrayInGroups(arr, size) {

面向物件

  1. 在建構函式中建立共有屬性透過this.建立,私有屬性透過var 建立。
  2. 使用delete collection.tracks,可以刪除collection的tracks屬性。
  3. 資料屬性有4個描述的行為特性,透過Object.defineProperty(obj,propKey,propDesc)設定。


  • writable 表示能否修改屬性的值。預設為false

  • Enumerable 表示能否過過for in迴圈返回屬性是否可以列舉。預設為false可以列舉

  • configuralbe 表示是否能過來delete刪除屬性從來重新定義屬性,能否修改其配置。預設為false。

  • value 包含這個屬性的資料值。讀取屬性值的時候,從這個位置讀取。

  • 使用Object.keys(obj)可以得到obj物件的所有自有(非繼承)可列舉的屬性鍵,屬性通常都是可列舉的,Object.getOwnPropertyNames(obj)返回obj物件的所有屬性鍵。

  • 列舉的一般規則是,系統建立的屬性不可列舉,使用者建立的屬性可列舉。列舉的主要目的是判斷for-in迴圈中的哪些屬性該忽略。對於自己的程式碼,通常可忽略列舉屬性,且應該避免用for-in迴圈,屬性的列舉特性預設為可列舉。

  • 保護物件的三種方式:

    • 防止擴充套件:Object.preventExtensions(obj);設定物件不能新增屬性。

    • 封閉:Object.seal(obj);可以改變屬性的值,但屬性的特性不能被改變。

    • 凍結:Object.freeze(obj)使所有的屬性不可寫,且封閉obj不能擴充套件。

  • A instanceof B運算子可以用來判斷B建構函式的prototype屬性是否存在A物件的原型鏈上。等價於B.prototype.isPrototypeOf(A);

  • 設定原型的另一種方法Object.creat(proto,propDescObj?);

  • 獲取原型的另一種方法Object.getPropertypeOf(obj);

  • 實現模組化程式設計

    • // 計算模組calc_v2015.js

    來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/30046312/viewspace-2133159/,如需轉載,請註明出處,否則將追究法律責任。

    相關文章