【由果索因】模块化代码后,这样的JavaScript技巧才值得用

简介: 【由果索因】模块化代码后,这样的JavaScript技巧才值得用

一、背景


前端js代码出现重复,因此想放到一个文件中进行复用,使其模块化,需要调整几个函数。函数都是要访问到后台接口的Axios请求。


js语法版本是ECMAScript6。

1666274172576.jpg

前端功能是部门用户树形选择器,且选择器是懒加载模式。点击父节点请求到后台才会加载到子节点数据。


不止一个功能模块需要用到该部门用户树形选择器,因此,将重复的功能函数进行模块化。放到dept.js文件中。


当前的文件就是直接在Vue组件文件的method中直接写需要用到的函数。


二、思路


2.1 树形选择器组件


看一下需要用到的属性,options是数据,load-options就是懒加载节点数据的函数。


<el-form-item label="负责人" v-permission="permission.select">
    <treeselect
      v-model="form.userId"
      :options="depts"
      :load-options="toLoadDepts"
      style="width: 190px" placeholder="选择负责人" />
</el-form-item>

2.2 部门初始化数据函数改造


将初始化数据的函数放到dept.js文件中。

//获取部门和员工数据
export function getDeptAndStaff(params) {
  return request({
    url: 'api/dept/getDeptAndStaff',
    method: 'get',
    params
  })
}
//初始查询部门
export async function queryDepts() {
  let depts = []
  //每次只请求当前节点的所包含的下一级数据
  await getDeptAndStaff({ enabled: true }).then(res => {
    depts = res.content.map(function(obj) {
      if (obj.hasChildren) {
        obj.children = null
      }
      return obj
    })
  })
  return depts
}

2.3 节点数据函数改造


//加载节点数据
export function loadDepts({ action, parentNode, callback }) {
  if (action === LOAD_CHILDREN_OPTIONS) {
    //根据父节点ID查询子节点数据
    getDeptAndStaff({ enabled: true, pid: parentNode.id }).then(res => {
      parentNode.children = res.content.map(function(obj) {
        if (obj.hasChildren) {
          obj.children = null
        }
        // if (String(obj.id).includes("staff")){
        //   delete obj.isDisabled
        // }
        return obj
      })
      setTimeout(() => {
        callback()
      }, 200)
    })
  }
}

2.4 导出引用


export default { queryDepts, loadDepts }

2.5 按需引用

import { queryDepts,loadDepts } from '@/api/system/dept'

2.6 在method中调用


async getDepts() {
     //每次只请求当前节点的所包含的下一级数据
     this.depts = await queryDepts()
   },
toLoadDepts({ action, parentNode, callback }) {
   loadDepts({ action, parentNode, callback})
 }

三、几点疑问


1.直接在组件中写所需函数,请求到后台,就不需要同步async 函数,而模块化后,就需要;

执行顺序的问题,虽然在mounted函数中取http请求的返回值取不到,但是不影响下拉框功能使用。

2.导出的函数也要加export

和export命令的用法有关,导出函数就是在其前加export


相关文章
|
2月前
|
JavaScript
短小精悍的js代码
【10月更文挑战第17天】
126 58
|
9天前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
43 15
在 golang 中执行 javascript 代码的方案详解
|
1月前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
45 3
原生js炫酷随机抽奖中奖效果代码
|
13天前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
393 4
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
102 6
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
81 1
|
2月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理、应用与代码演示
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理、应用与代码演示
|
2月前
|
缓存 JavaScript 前端开发
Node.js模块化的基本概念和分类及使用方法
Node.js模块化的基本概念和分类及使用方法
37 0