iT邦幫忙

1

金魚腦之JS雜記(持續更新)

一次性事件

jQuery 的 once

btns.forEach((elem) => {
  elem.addEventListener('click', function listener(e){
    console.log(e.target.id)
    // 事件種類 ,  Function名
    this.removeEventListener('click', listener)
  }) 
})

Content-Type: application/x-www-form-urlencoded

  • 最常見的提交方法
  • 以 key1=val1&key2=val2 的方式編碼
  • jQuery 默認提交方式
  • PHP中以 $_POST['title'] 取得對應值
  Content-Type: application/x-www-form-urlencoded;charset=utf-8
  url/?title=test&name=Tom

GMT 時區差異

const timeZoneOffset = -(new Date().getTimezoneOffset() / 60)
console.log(timeZoneOffset) // 8

Hover & SetInterval

  • Hover = mousein + mouseleave
  • 滑鼠移入,移除計時器,關閉自動輪播效果
  • 滑鼠移出,重新掛載計時器,啟動自動輪播
  function toggleSetInterval(e) {
    const eventType = e.type
    // console.log(eventType)
    if (eventType === 'mouseenter') {
      // 滑鼠移入,移除計時器,關閉自動輪播效果
      window.clearInterval(carousel.autoLoopTimer)
    } else if (eventType === 'mouseleave') {
      // 滑鼠移出,重新掛載計時器,啟動自動輪播
      carousel.autoLoopTimer = setInterval(carousel.autoLoop, 3000)
    }
  }

亂數取值

  function getRandom(min, max) {
    return Math.round(Math.random() * (max - min) + min);
  }

事件監聽 this

const parent = document.querySelector('.parent')
parent.addEventListener('click', test)
function test(e) {
  // e.target 指向觸發事件的元件  .child
  console.log('e.target',e.target);
  // e.currentTarget 指向掛載事件的元件 .parent
  console.log('e.currentTarget',e.currentTarget);
  // this 指向掛載事件的元件  .parent
  console.log('this',this);
}

ES6 spread & rest operator

  1. 其餘運算子 rest operator (用於不確定函式會傳入的變數數量)
  2. 展開運算子 spread operator (用於將陣列展開)
// const sum = function(num1, num2, .....一堆){
const sum = function(...num) {
  // 將傳入的變數 組合成陣列
  console.log(num) // [1, 2, 3]
  return num.reduce(function (sum, el) { return sum + el },0)
}
console.log(sum(1, 2, 3)) // 6
  // 展開陣列
  let number = [1, 2, 3];
  console.log(Math.max(...number));  //  3
  console.log(...number);  // 1, 2, 3

HTML Attribute & DOM Property

  • HTML Attribute (由 HTML 定義、回傳值必為字串)
    Attribute 初始化 DOM properties,初始化結束後即完成工作

  • DOM Property (由 DOM 定義、回傳值可為非字串)

  • 最佳實踐: 推薦使用 property 速度較快

  • 且例如 checked,disabled,selected 會直接回傳 Boolean
    Youtube解釋
    參考文章

範例程式碼

  <!-- 在value上給予值 等同於 初始化 DOM 中的 Property -->
  <input id="inputId" type="text" value="TOM">
  const input = document.querySelector('#inputId')
  input.addEventListener('keydown', test)
  function test(e) {
  
    // HTML Attribute 'TOM' (即初始化的值)
    console.log(input.getAttribute('value')); 
    // HTML Attribute JQ版 'TOM'
    console.log($('#inputId').attr('value'))
    
    // DOM Property '你輸入的文字' (則會依照輸入數據作更改)
    console.log(input.value);
    // DOM Property JQ版 '你輸入的文字'
    console.log($('#inputId').prop('value'))
  }

JS 浮點數相加

0.1 + 0.2 === 0.3 false

Switch

  • 第一次撞到才知道,撞好久,痛阿...
  • case 之內不可用來做判斷式,僅能作 數值匹配
  • 下列情況 採 if/else為佳
const num = 10
switch (num) {
  case (num > 5):
    console.log('num > 5')
    break
  case (num < 10):
    console.log('num > 10')
    break
  default:
    console.log('Default') // 執行此
    break
}

if (num > 5) {
  console.log('num > 5')
} else if (num < 10) {
  console.log('num < 10')
} else {
  console.log('Default')
}

Console.time()

  • 用來測試Function time 到 timeEnd 所花的時間
console.time()
function test() {
  setTimeout(() => {
    console.timeEnd()
  }, 1000)
}
test()

Git

  • 設定 local commit 模版
  • Git 記憶帳號
  • Git remove 增/刪
    // 設定 local commit 模版
    git config --local commit.template 絕對路徑
    
    // Git 記憶帳號
    git config credential.helper store
    // 可設成 Cache
    git config --global credential.helper 'cache --timeout 7200'
    
    // Git remote 增刪
    git remote remove origin
    git remote add origin ~.git

Git Config 優先級

較低者,只有較高者未設置才會生效

  1. .git中的 config (--local)
  2. 登入帳號的Home Directory裡頭的 .gitconfig (--global)
  3. git 安裝檔中的 git config (--system)
  • local config 位於 .git資料夾內的 config
    // -l 列出清單 
    git config -l 
    
    // 設置參數
    // 重新設置某參數 --unset
    git config --global user.name 'RocMark'
    git config --global user.email 

Chrome 插件推薦 Web Developer

  • Web Developer
  • 提供各種 Validation 聯結
  • 快速 Resize、禁用JS
  • Cookie 控制
  • CSS 編輯器、切換成Print Style
  • 檢測圖片是否正常 & 顯示 alt 屬性
  • 搜尋不可用連結
  • 顯示所有元素的 Outline
  • 清除 Cache、History

innerText, textContent

  • innerText (IE8- IE專用屬性並非國際規範!!)
  • textContent (國際規範、IE9才支援)
  • 以下為小程式處理 IE8- 做屬性置換
    function changeTextById(elementId, changeVal) {
      let hasInnerText = (document.getElementsByTagName('body')[0].innerText !== undefined)
      let elem = document.getElementById(elementId)
      if (!hasInnerText) {
        elem.textContent = changeVal
      } else {
        elem.innerText = changeVal 
      }
    }

innerHTML, outerHTML

  • ( W3C 只支持 innerHTML )
  • innerHTML 只包含該標籤 "下" 的元素 (僅span,p)
  • outerHTML 包含該標籤 "本身" (含div)

subString, subStr 子字串擷取

  • subString (用此!!)
  • subStr (MDN 已不推薦使用!!!!)
    const str = 'Hey Yo!'
    
    // substring 開始、"長度"、預設結束為字串長度 可省略
    const substring = str.substring(0, 3)
    const substringFull = str.substring(0)
    console.log(substring, substringFull)
    
    // subStr 開始、結束、預設結束為字串長度 可省略
    const substr = str.substr(0, 3) // Hey
    cosnt substrFull = str.substr(0) // Hey Yo!
    console.log(substr, substrFull)

禁用Cache META TAG

  • 注意 禁用快取 會對 SEO 有所扣分!
    <!-- 一般設定,到該時間即過期 -->
    <meta http-equiv="expires" content="時間"> 
    
    <!-- 一般禁用方法 -->
    <meta http-equiv="cache-control" content="no-cache">
    
    <!-- 舊式寫法,加是為了相容性 -->
    <meta http-equiv="pragma" content="no-cache"> 
    
    <!-- 設定為立即過期 -->
    <meta http-equiv="expires" content="0"> 

Chrome 小技巧

  • 右鍵 Tab 固定分頁可以讓頁籤縮小
  • ChromeDevTools / Appliction 可以查看更改 WebStorage
  • ChromeDevTools / Sources 可以設定 Overrides
  • Overrides 可在瀏覽器更改本地文件 (Chrome當編輯器的概念)
  • ChromeDevTools CSS 可用 上下箭頭控制顏色 & 數字

cmd

  • cd 去哪裡 (cd .. 回上一層)
  • dir 列表
  • mkdir 產生資料夾
  • code . 開始VSCode
  • code-insiders . 開始VSCide-insiders

win7 開始選單整理

C:\ProgramData\Microsoft\Windows\Start Menu\Programs


尚未有邦友留言

立即登入留言