对于从事前端工作的小伙伴,掌握Vue,React这样的框架可以说是前端基本功了。人人都会用,那我们怎样才能写得比别人优雅?比别人漂亮?
鉴于一线互联网大厂在前沿技术领域的持续研究和大规模投入,直接向他们取经,是最便捷也是最高效的学习方式。
本文将介绍大厂Vue项目两大最佳实践:
一劳永逸的组件注册
通常在组件使用前,需要引入后再注册,但如果高频组件多了,每次都这样做,不仅新增很多代码,效率还低!我们应该如何优化呢?
其实,我们可以借助一下webpack的require.context() 方法来创建自己的(模块)上下文,从而实现自动动态require组件。
我们先在components文件夹(这里面都是些高频组件)添加一个叫global.js的文件,在这个文件里使用require.context 动态将需要的高频组件统统打包进来,然后在main.js文件中引入global.js的文件。
// global.js文件
import Vue from 'vue'
function changeStr (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
const requireComponent = require.context('./', false, /\.vue$/)
// 查找同级目录下以vue结尾的组件
const install = () => {
requireComponent.keys().forEach(fileName => {
let config = requireComponent(fileName)
console.log(config) // ./child1.vue 然后用正则拿到child1
let componentName = changeStr(
fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
)
Vue.component(componentName, config.default || config)
})
}
export default {
install // 对外暴露install方法
}
最后我们就可以随时随地在页面中使用这些高频组件,无需再手动一个个引入了。
高精度权限控制—自定义指令directive
我们通常给一个元素添加 v-if / v-show 来做权限管理,但如果判断条件繁琐且多个地方需要判断,这种方式的代码不仅不优雅而且冗余。
针对这种情况,我们可以通过全局自定义指令来处理:我们先在新建个 array.js 文件,用于存放与权限相关的全局函数;
// array.js
export function checkArray (key) {
let arr = ['1', '2', '3', '4', 'demo']
let index = arr.indexOf(key)
if (index > -1) {
return true // 有权限
} else {
return false // 无权限
}
}
// main.js
import { checkArray } from "./common/array";
Vue.directive("permission", {
inserted (el, binding) {
let permission = binding.value; // 获取到 v-permission的值
if (permission) {
let hasPermission = checkArray(permission);
if (!hasPermission) { // 没有权限 移除Dom元素
el.parentNode && el.parentNode.removeChild(el);
}
}
}
});
<div class="btns">
<button v-permission="'1'">权限按钮1</button> // 会显示
<button v-permission="'10'">权限按钮2</button> // 无显示
<button v-permission="'demo'">权限按钮3</button> // 会显示
</div>
我们都会写组件,但是你知道怎么让组件能够成为高复用性的组件库型组件吗?
我们都会项目打包上线,但是你知道如何编写配置文件能让打包速度最优化吗?
我们都会写路由,但是你知道如何写才能保证多路由模块解耦,保证更方便增加新的路由模块吗?
3.9-3.11网易独家面试集训
3天前端直播课
0元学习
3月9日-3月11日 ,每晚8点
3月9日:
前端必备:从源码中学会思维和技巧
1、源码有哪些值得学习的?
2、源码组织模式
3、透过源码学习设计模式
3月10日:
vue高级实战技巧-骚操作和最佳实践
1、缓存架构
2、vue一些底层api的运用
3、vue插件的开发
3月11日:
加快项目进度:大型vue项目更多api层架构解析
1、Axios源码分析
2、大型项目中的api层
3、二次封装Axios实例
……
请持续关注,还有网易老师亲自简历指导,就业咨询哦!
扫描下方二维码
添加助教小姐姐一起进步
遇到扫码频繁,请再次识别哦
(别让您的犹豫阻碍您的进步)
进阶视频资料+学习路径图
添加助教小姐姐一起进步
遇到扫码频繁,请再次识别哦
(别让您的犹豫阻碍您的进步)
免费直播,海量资料,先到先得~
往期直播干货回顾↓