您现在所在的位置:首页 >关于奇酷 > 行业动态 > 5个实用JS库99%的人可能都不知道

5个实用JS库99%的人可能都不知道

来源:奇酷教育 发表于:

5个实用JS库99%的人可能都不知道

  前言
 
  作为一名前端开发者,我通过这些JavaScript库大大提高了自己的效率,比如格式化日期、处理URL参数、调试手机网页等。
 
 
  1.使用“Day.js”格式化日期和时间
 
  地址:https://day.js.org/en/
 
  作为一名开发人员,我受够了在 JavaScript 中操作日期和时间,因为它太麻烦了。
 
  比如我们要打印当前的日期和时间,就需要写一大段代码来完成。
 
  const getDate = () => {
 
    const fillZero = (t) => {
 
      return t < 10 ? `0${t}` : t
 
    }
 
    const d = new Date()
 
    const year = d.getFullYear()
 
    const month = fillZero(d.getMonth() + 1)
 
    const day = fillZero(d.getDate())
 
    const hour = fillZero(d.getHours())
 
    const minute = fillZero(d.getMinutes())
 
    const second = fillZero(d.getSeconds())
 
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`
 
  }
 
  console.log(getDate()) // 2022-05-09 07:19:14
 
  幸运的是,使用 Day.js 只需一行代码即可完成。
 
  console.log(dayjs().format('YYYY-MM-DD HH:mm:ss')) // 2022-05-09 07:19:14
 
  注意:“Day.js 是一个极简主义的 JavaScript 库,它使用大部分与 Moment.js 兼容的 API 为现代浏览器解析、验证、操作和显示日期和时间。
 
  如果你使用过 Moment.js,那么,使用Day.js,你也不会觉得很难。”
 
 
  2.使用“qs.js”格式化URL参数
 
  地址:https://github.com/ljharb/qs
 
  我们为了获取“URL”的参数,也许会写一个这样的函数。
 
  const formatSearch = () => {
 
    window.location.search.slice(1).split('&').reduce((res, it) => {
 
      const [ key, value ] = it.split('=')
 
      res[ key ] = value
 
      return res
 
    }, {})
 
  }
 
  // https://medium.com?name=fatfish&age=100
 
  const search = formatSearch() // { name: 'fatfish', age: 100 }
 
  // use qs.js to format
 
  const search2 = qs.parse(window.location.search.slice(1)) // { name: 'fatfish', age: 100 }
 
  但是,现在我们如果要实现这样一个新功能,就会变得简单很多。
 
  如果我们想在“https://medium.com”中添加姓名和年龄两个参数。
 
  // 1. url = https://medium.com
 
  // 2. params = { name: 'fatfish', age: 100 }
 
  const splitSearch = (url, params) => {
 
    const search = Object.entries(params).map((it) => it.join('=')).join('&')
 
    return `${url}?${search}`
 
  }
 
  const url = 'https://medium.com'
 
  const params = { name: 'fatfish', age: 100 }
 
  console.log(splitSearch(url, params)) // https://medium.com?name=fatfish&age=100
 
  // use qs.js to stringify url
 
  console.log(`${url}?${qs.stringify(params)}`) // https://medium.com?name=fatfish&age=100
 
 
  3.使用“js-cookie.js”读写cookies
 
  地址:https://github.com/js-cookie/js-cookie
 
  我们都知道在 JavaScript 中操作 cookies 不是一件简单的事情,为了提高你的工作效率我强烈推荐“js-cookie.js”,它是一个简单、轻量级的 JavaScript API,用于处理 cookies。
 
  Cookies.set('name', 'fatfish', { expires: 10 })
 
  Cookies.get('name') // fatfish
 
 
  4. 为什么选择 Lodash?
 
  地址:https://github.com/lodash/lodash
 
  先来看看Lodash的介绍:
 
  Lodash 通过消除处理数组、数字、对象、字符串等的麻烦,使 JavaScript 变得更容易。Lodash 的模块化方法非常适合:
 
  迭代数组、对象和字符串
 
  操纵和测试值
 
  创建复合函数
 
  // 1. Flatten the array
 
  _.flattenDeep([ 1, [ 2, [ 3, [  4, [ 5 ]] ] ] ]) // [1, 2, 3, 4, 5]
 
  // 2. More convenient object traversal
 
  _.each({ name: 'fatfish', age: 100 }, (val, key) => {
 
    console.log(val, key) 
 
    // fatfish name
 
    // 100 'age'
 
  })
 
  // 3. ...
 
 
  5、在移动端使用“Vconsole”调试网页
 
  地址:https://github.com/Tencent/vConsole
 
  在移动设备上调试网页非常困难,但有了“Vconsole”,一切都会变得容易得多。我们可以通过扫描此二维码或点击网址(http://wechatfe.github.io/vconsole/demo.html)来体验其功能。
 
  
 
  TIP: 与chrome浏览器的devtools类似,Vconsole提供了以下功能帮助你更好的调试网页。
 
  日志:console.log、info、error、…...
 
  网络:XMLHttpRequest、Fetch、sendBeacon
 
  元素:HTML 元素树
 
  存储:Cookies、LocalStorage、SessionStorage
 
  手动执行JS命令
 
  自定义插件