摘要:總結(jié)主要是前端的基礎(chǔ)不準(zhǔn)吐槽我把總結(jié)寫(xiě)在前面特別感謝超級(jí)好用的編輯器碰到的所有坑都放在前面。
總結(jié): 主要是前端 JS 的基礎(chǔ) (╯‵□′)╯︵┻━┻不準(zhǔn)吐槽我把總結(jié)寫(xiě)在前面
1. 碰到的所有坑都放在前面 (。??)ノ特別感謝超級(jí)好用的MarkDown編輯器(づ ̄ 3 ̄)づStackEdit
JS的函數(shù)定義時(shí)有3個(gè)參數(shù), 使用時(shí)傳入5個(gè)實(shí)參, 則前3個(gè)實(shí)參由定義的3個(gè)參數(shù)獲得, 剩下的參數(shù)可以通過(guò)arguments獲取, arguments是一個(gè)偽數(shù)組, 在這個(gè)例子里, 共有5個(gè)元素.
2. 小tips== != === !==的區(qū)別: 關(guān)于JS的 undefined null 還有 === 和 ==
標(biāo)簽內(nèi)的JS代碼用wrap起來(lái), 是因?yàn)橛械臑g覽器如果沒(méi)有這個(gè)會(huì)無(wú)法識(shí)別js代碼(當(dāng)然現(xiàn)在大部分瀏覽器都是沒(méi)問(wèn)題的)
使用+來(lái)連接多行字符串
跟css相反, 不要使用省略的小數(shù)寫(xiě)法
3.2 行間格式不要省略花括號(hào)
不要用with語(yǔ)句
不要使用for-in語(yǔ)句來(lái)遍歷數(shù)組
不推薦使用==和!=, 推薦使用===和!==
3.3 JS代碼樣例 3.3.1 對(duì)象定義// case 1: // 對(duì)象的定義: var book = { title: "markdown", author: "me" };3.3.2 數(shù)組定義
// case 2: // 數(shù)組的定義: var color = [ "red", "green" ] ;3.3.3 注釋格式
// case 3: // 注釋的推薦格式 // 1. 類(lèi)似這樣的單行注釋, 用來(lái)說(shuō)明一行代碼的功能, 前面加一個(gè)空格, 縮進(jìn)跟代碼一致 console.log("我是代碼"); /* * 2. 使用這樣的格式來(lái)作為 * 多行注釋 */ console.log(true); // 3. 像這樣的提醒類(lèi)注釋跟代碼之間隔一個(gè)空格 /** 4. 如果要生成文檔, 就使用這樣的注釋 @method 函數(shù)的動(dòng)作 @param {Object} 說(shuō)明 @return {Object} 說(shuō)明 **/3.3.4 循環(huán)
// case 4: // 如果要使用for-in循環(huán), 最好先使用hasOwnProperty()方法 var p; for (p in object) { if (object.hasOwnProperty(p)) { console.log("p name is " + p); console.log("p value is " + object[p]); } }4. JS工具
JSHint
JSLint
5. JS編寫(xiě)規(guī)范 5.1 js和css分離// case 5: // js和css分離, 這個(gè)函數(shù)支持所有瀏覽器中給元素添加方法 function addListener(target, type, handler) { if (target.addEventListener) { target.addEventListener(type, handler, false); } else if (target.attachEvent) { target.attachEvent("on" + type, handler); } else { target["on" + type] = handler; } } // 這個(gè)函數(shù)做*, 加在onclick上 function doSomething() { // do something } var btn = document.getElementById("action-btn"); addListener(btn, "click", doSomething);5.2 js和html分離
不要直接在html里面引用js
5.3 js的全局變量盡量不要使用全局變量
小心不要?jiǎng)?chuàng)建意外的全局變量
5.4 js單一職責(zé)主要是為了可擴(kuò)展性
var MyApplication = { // 這個(gè)方法專(zhuān)門(mén)處理鼠標(biāo)點(diǎn)擊 handleClick: function(event) { this.showPopup(event); }, // 然后這個(gè)方法專(zhuān)門(mén)處理鼠標(biāo)點(diǎn)擊產(chǎn)生的動(dòng)作 showPopup: function(event) { var popup = document.getElementById("popup"); popup.style.left = event.clickX + "px"; popup.style.top = event.clickY + "px"; popup.className = "reveal"; } }; // 將popup加到鼠標(biāo)點(diǎn)擊動(dòng)作里去的實(shí)際應(yīng)用 addListener (element, "click", function(event) { MyApplication.handleClick(event); });5.5 js的判斷 5.5.1 檢測(cè)引用值, 使用instanceof, 而不要使用!==和=== 5.5.2 數(shù)組檢測(cè)
// 這個(gè)函數(shù)的作用是判斷value是不是數(shù)組 function isArray(value) { if (typeof Array.isArray === "function") { return Array.isArray(value); } else { return Object.prototype.toString.call(value) === "[object Array]"; } } // 使用函數(shù)判斷x是不是數(shù)組 isArray(x); // 一般來(lái)說(shuō), 還可以這樣判斷 Array.isArray(x) === "[object Array]"5.5.3 屬性檢測(cè)
// 對(duì)象的定義, 下面我們要檢測(cè)這個(gè)對(duì)象的屬性 var object = { count: 0; related: null; }; // 檢測(cè)對(duì)象的count屬性 if ("count" in object) { // code here } // 或者可以這樣 if (object.hasOwnProperty("related")) { // code } // 或者更詳細(xì)一點(diǎn) if ("hasOwnProperty" in Object && object.hasOwnProperty("related")) { // code }5.6 js配置數(shù)據(jù)和代碼分離
把配置數(shù)據(jù)多帶帶放在一個(gè)對(duì)象的屬性值中
把配置數(shù)據(jù)放在Java屬性文件中
讀取的時(shí)候: 使用JSON/JSONP/js
5.7 js拋出自定義錯(cuò)誤// 常見(jiàn)的拋出錯(cuò)誤方法 throw new Error("error description"); // 定義自己的錯(cuò)誤類(lèi)型 function MyError(message) { this.message = message; } MyError.prototype = new Error();5.8 js阻止修改的3個(gè)層次
Object.preventExtension(object);
Object.seal(object);
Object.freeze(person);
5.9 瀏覽器嗅探首先使用特性檢測(cè)判斷某個(gè)屬性是否存在
不行再使用用戶代理檢測(cè)檢測(cè)用戶代理字符串
6. JS樣例 6.1 使用js實(shí)現(xiàn)c語(yǔ)言的sprintf// case 1: // 這個(gè)函數(shù), 達(dá)到了跟c語(yǔ)言的sprintf一樣的效果 function sprintf(text) { // text可以獲取傳入sprintf里面的第一個(gè)參數(shù), args獲取包括text在內(nèi)的所有參數(shù) var i=1, args=arguments; /* * 在這里, 將替換text中的所有replace * 匿名函數(shù)將被調(diào)用2次, 第一次返回args[1], 第二次返回args[2] * args[0] 等于 text */ return text.replace(/%s/g, function() { return (i < args.length) ? args[i++] : ""; }); } // 使用sprintf函數(shù) var result = sprintf("
./js/hello.js
define(function(){ var moving = function() { $("#btn").addClass("btn-move-class"); }; return { moving: moving } });6.2.4 js文件的requireJS引用
./hello.html
6.2.5 css動(dòng)畫(huà)Click
./css/hello.css
@charset "utf-8"; .container {font-family:"Microsoft YaHei","Hiragino Sans GB",Arial,"Lucida Grande",Verdana;} div { height: 60px; width: 90%; margin: auto; font-size: 50px; color: #fff; font-weight: bolder; text-align: center; border-radius: 9999px; background: #338559; } .btn-move-class { -webkit-animation:moving 5s linear infinite; animation:moving 5s linear infinite; } @keyframes moving{ 0%,100% {height:60px;} 50% {height:200px;} } @-moz-keyframes moving /* Firefox */{ 0%,100% {height:0px;} 50% {height:200px;} } @-webkit-keyframes moving /* Safari 和 Chrome */{ 0%,100% {height:0px;} 50% {height:200px;} } @-o-keyframes moving /* Opera */{ 0%,100% {height:0px;} 50% {height:200px;} }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/85919.html
摘要:總結(jié)主要是前端的基礎(chǔ)不準(zhǔn)吐槽我把總結(jié)寫(xiě)在前面特別感謝超級(jí)好用的編輯器碰到的所有坑都放在前面。 總結(jié): 主要是前端HTML+CSS的基礎(chǔ) (╯‵□′)╯︵┻━┻不準(zhǔn)吐槽我把總結(jié)寫(xiě)在前面 特別感謝超級(jí)好用的MarkDown編輯器(づ ̄ 3 ̄)づStackEdit 1. 碰到的所有坑都放在前面 (。??)ノ firefox太坑了!css不能實(shí)時(shí)更新!(╯‵□′)╯︵┻━┻ 用bef...
摘要:關(guān)于自己屆畢業(yè)生一本雙非學(xué)校,非科班可能和很多人一樣,因?yàn)樾r(shí)候喜歡打游戲,所以大學(xué)一直想學(xué)編程,但因?yàn)榉N種原因,自己來(lái)到了一個(gè)硬件相關(guān)專(zhuān)業(yè),但由于現(xiàn)實(shí)和興趣,自己又從事了軟件相關(guān)的工作。找實(shí)習(xí)實(shí)習(xí)對(duì)于之后的秋招來(lái)說(shuō),是非常非常重要的。 ...
摘要:前言最初,唯有時(shí)光記得。起初,按照自己的學(xué)習(xí)習(xí)慣來(lái),一直秉承著好記性不如爛筆頭的學(xué)習(xí)理念,開(kāi)始做紙質(zhì)的筆記,累計(jì)了好多本之后,發(fā)現(xiàn)有很多的不便利,例如圖片隨時(shí)要改動(dòng)注明來(lái)源等。微信公眾號(hào)微博。 回顧 Retrospect to the past and look into the future 最近在積極地學(xué)習(xí)webview,原本打算整理一下寫(xiě)成一篇文章。無(wú)奈時(shí)間有限,暫時(shí)沒(méi)有把握把w...
摘要:前言最初,唯有時(shí)光記得。起初,按照自己的學(xué)習(xí)習(xí)慣來(lái),一直秉承著好記性不如爛筆頭的學(xué)習(xí)理念,開(kāi)始做紙質(zhì)的筆記,累計(jì)了好多本之后,發(fā)現(xiàn)有很多的不便利,例如圖片隨時(shí)要改動(dòng)注明來(lái)源等。微信公眾號(hào)微博。 回顧 Retrospect to the past and look into the future 最近在積極地學(xué)習(xí)webview,原本打算整理一下寫(xiě)成一篇文章。無(wú)奈時(shí)間有限,暫時(shí)沒(méi)有把握把w...
閱讀 3152·2021-11-04 16:09
閱讀 3106·2021-09-23 11:49
閱讀 3603·2021-09-09 09:33
閱讀 3604·2021-08-18 10:22
閱讀 2041·2019-08-30 15:55
閱讀 3625·2019-08-30 15:53
閱讀 2653·2019-08-28 18:08
閱讀 888·2019-08-26 18:18