中年抠脚程序猿 - 个人主页动态 - 牛客网

发布(39) 评论刷题收藏

2021-12-08 21:44

字节跳动_电商_前端开发

一键publish的node脚本

需求背景 公司有8个前端项目，共使用四个公共包，基础包（baqi）、医生公共包（baqi-doctor）、患者公共包（baqi-patient）、聊天包（baqi-chat）。 开发分支上使用file引入公共包（file引入的方式可以查看这一篇），到测试和生产上需要使用版本号来引入这几个公共包。这就需要一个方便的publish公共包的工具，写了一个node脚本publish.js 实现 主流程： 计算下一个版本号 设置npm代理为淘宝 设置baqi包、baqi-xxx包中package.json的version号 publish baqi包和baqi-xxx包 替换前端8...

0 点赞评论收藏

分享

2021-12-08 21:44

字节跳动_电商_前端开发

Vue自定义指令加订阅发布模式处理按钮权限问题

需求 现在有个需求，需要设置每个用户的按钮级权限。 也就是说需要根据某个用户的角色权限来判断页面上某些按钮能不能点击，或者是否展示这些按钮。 这里选择第二种，也就是当用户没有按钮权限时，移除这个按钮。 实现 假设后端权限接口接口返回是这样的数据： { "permissions": [ "patient:listByPage", "patient:patientInfo:save", "patient:patientTransfer:delete", "...

0 点赞评论收藏

分享

2021-12-08 21:43

字节跳动_电商_前端开发

使用flex解决overflow需要设置固定高度的问题

背景 通常在页面上的某一部分，需要超出滚动的情况，我们会设置固定高度或者宽度，但这样设置固定高度或者宽度很不灵活，当页面需要隐藏某一部分，就需要重新计算固定的高度或者宽度，很繁琐且容易出错。 这里可以使用flex弹性布局来解决overflow需要设置固定高度的问题。 实现 假设我们要实现以下页面，页面结构可以看右边的dom，分为top标题栏，bottom_left菜单栏，bottom_right_top子页面标题，bottom_right_bottom子页面四个部分。 先看bottom_left菜单这部分，要在不设置高度的情况下实现超出部分可滚动，设置各块样式如下 .app { ...

0 点赞评论收藏

分享

2021-12-08 21:43

字节跳动_电商_前端开发

封装promise，实现ajax请求全局异常处理和个性异常处理（若有，覆盖全局异常）

背景 现在有个需求，要求封装axios，实现全局异常处理和个性异常处理，若有个性异常处理覆盖全局异常处理。 假如约定正常返回码为0000，后端不为0000的异常返回，前端全局异常处理为toast这个异常。这个使用axios的response拦截器很容易实现。 request.interceptors.response.use(response => { if(response.data.retCode != '0000') { toast(response.data.errMsg) return Promise.reject(errMsg) }...

0 点赞评论收藏

分享

2021-12-08 21:43

已编辑

字节跳动_电商_前端开发

Vue keepAlive页面强制刷新

需求 现在有一个需求，要求不刷新浏览器，但要刷新路由中的组件 方案 将需要keepAlive的页面name加入到keep-live的include中。 Vue的transition组件，有一个after-enter钩子事件，待子组件插入完毕调用，正好适合这个场景，在这个钩子中，将当前组件添加到keep-live的include中。 在刷新时，从keepAliveArr中移除当前组件的name，然后利用v-if删除router-view组件，在nextTick事件后将router-view添加回来，实现组件的刷新 代码 template <transition @af...

0 点赞评论收藏

分享

2021-12-08 21:42

字节跳动_电商_前端开发

前端处理ajax重复请求的几种方式

公司项目处理ajax重复请求的几个阶段 第一阶段，遮罩层 只对需要提交数据的请求做防重复，对查询请求不做防重复功能。在点击按钮做提交数据请求时，生成一个全屏遮罩层，防止下一次点击。 function submitRequest(){ showLoading('提交中') // 发请求 axios().then(res=>{ Toast.clear() //逻辑处理 },err=>{ Toast.clear() //异常处理 }) } function showLoading (text) { ...

0 点赞评论收藏

分享

2021-12-08 21:42

字节跳动_电商_前端开发

JavaScript实现异步请求并发数限制

背景 上一篇《JavaScript 阻塞方式实现异步任务队列》实现了异步请求依次执行的方案，实际上就是限制同一时间只能有一个异步请求，并发请求数为1。 那实现流量控制，怎么实现并发数大于1的情况呢？ 方案 思路： 使用Promise.all来保证并发数限制 待Promise.all返回后再执行下一轮的Promise.all 任务开启时，标记running状态为true 队列中任务全部处理完后标志running状态为false 代码： <body> <button onclick="clickMe()">点我</but...

0 点赞评论收藏

分享

2021-12-08 21:42

已编辑

字节跳动_电商_前端开发

npm file方式引入公共包遇到的几个坑

背景 在《前端多个vue项目公共组件的三种方法（推荐npm file引入）》这一篇里讲了npm通过file方式引入公共包的方法，但在实际运用中，会遇到不少坑，这里就讲述笔者遇到的2个问题并给出解决方案。 问题一 通过file方式引入的包，npm不会自动安装该包的依赖。 例：项目A通过file方式引入了包B，如下所示。在 项目A的package.json： { "name": "A", "version": "0.1.0", "dependencies": { ...

0 点赞评论收藏

分享

2021-12-24 16:35

已编辑

字节跳动_电商_前端开发

JS处理并行请求的四种方式

需求 两个异步请求同时发出，两个请求都返回时再做处理 实现 这里的方法仅提供思路，只做请求成功处理 方法一 使用Promise.all const startTime = new Date().getTime()  function request(time) {       return new Promise(resolve => {    &...

0 点赞评论收藏

分享

创作者周榜

更多

关注他的用户也关注了：

牛客网
牛客企业服务