简介
@xa-neso/job-common 是一款专为前端工程师打造的 npm 包，旨在帮助工程师快速搭建一套符合规范、易于维护的项目结构，同时提供各种实用的工具函数，让开发过程更加高效、便捷。
安装
安装 @xa-neso/job-common 可采用简便的 NPM 安装命令：
npm install @xa-neso/job-common
使用
目录结构
使用 @xa-neso/job-common 可以让你的项目结构变得清晰、有结构化，同时也符合当前前端的最佳实践规范，其目录结构如下：
-- -------------------- ---- ------- --- ----- -- -------- ------- --- --- ------ -- ------ --- ------ -- -------- ---- ------ --- --- -- ----- - --- --- -- --- ---- - --- ------ -- ------------- - --- ---------- -- ---- - --- ------ -- ------ - --- ----- -- ---- ---- - --- ----- -- ---- - --- ----- -- ---- - --- ------- -- --- - --- ------- -- ---- --- ------ -- -------- ---- --- --- ----- -- ---- --- ------------- -- ----- --- ---------- -- --- ---- --- ------------ -- ------ ---- --- ------------ -- ---- --- --------- -- ----
常用工具函数
debounce
防抖函数，避免频繁触发事件，一段时间内只触发一次。
import { debounce } from '@xa-neso/job-common'
function handleScroll() {
console.log('scroll')
}
window.addEventListener('scroll', debounce(handleScroll, 200))throttle
节流函数，避免高频率触发事件，一段时间内只触发一次。
import { throttle } from '@xa-neso/job-common'
function handleResize() {
console.log('resize')
}
window.addEventListener('resize', throttle(handleResize, 500))deepClone
深拷贝一个对象。
import { deepClone } from '@xa-neso/job-common'
const obj1 = { a: 1, b: { c: 2 } }
const obj2 = deepClone(obj1)
console.log(obj1) // { a: 1, b: { c: 2 } }
console.log(obj2) // { a: 1, b: { c: 2 } }formatCurrency
格式化货币。
import { formatCurrency } from '@xa-neso/job-common'
const price = 123456.78
const formattedPrice = formatCurrency(price)
console.log(formattedPrice) // ￥123,456.78页面跳转
在 @xa-neso/job-common 中，可以使用 router.js 文件来管理前端路由。例如：
-- -------------------- ---- ------- ------ --------- ---- ------------ ------ ---- ---- ------------------ ------ ----- ---- ------------------- ----- ------ - - - ----- ---- ---------- ---- -- - ----- --------- ---------- ----- - - ----- ------ - --- ----------- ----- ---------- ----- --------------------- ------ -- ------ ------- ------
之后在入口文件 main.js 中导入并挂载路由：
import router from './router'
import App from './App.vue'
new Vue({
router,
render: h => h(App)
}).$mount('#app')发送请求
在 @xa-neso/job-common 中，可以使用封装好的 Axios 实例来发送请求。例如：
import axiosInstance from '@/api/axiosInstance.js'
axiosInstance.get('/posts').then(response => {
console.log(response.data)
}).catch(error => {
console.log(error)
})其中，Axios 实例的定义在 api/axiosInstance.js 文件中。
总结
@xa-neso/job-common 是一款优秀的 npm 包，提供了前端开发中常用的工具函数和前端项目结构等，让前端开发更加高效、便捷。希望本文对您在使用 @xa-neso/job-common 进行前端开发时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005722d81e8991b448e852e