【微搭低代码】Javascript基础知识-函数及模块介绍

简介: 【微搭低代码】Javascript基础知识-函数及模块介绍

低代码要想入门,首先需要学习javascript,我们已经有了两篇基础文章

变量定义及初始化

循环及条件控制

我们本篇介绍两个知识点,一个是函数,一个是模块

函数


在js中函数是可以重复使用的代码块,定义函数是为了去除冗余,凡是需要重复使用的代码块,我们都可以使用函数的语法进行提炼。函数的语法是

function 函数名(形参){
  函数体
    return 返回值
}

形参和返回值不是必须的,如果没有形参,那我们的函数就是一个不需要参数的函数。函数调用可以返回具体的值,如果只是做处理,不返回值也是可以的

函数定义好之后,可以进行调用,调用的时候语法是

函数名(实参)

我们使用函数名调用具体的函数,调用的时候要传入具体的值,如果没定义形参,直接写一对儿小括号调用即可

如果函数有返回值的,那么我们就可以定义一个变量来接收返回值,示例:我们定义一个求和函数,形参有两个,函数的返回值是两个形参的和

function add(a,b){
  return a+b;
}

定义好之后如果需要调用的,我们是这样调用,并且接收返回值

let result;
result = add(3,2);
console.log(result)

函数调用后就会返回计算的结果,3+2=5,所以控制台会打印5

模块


ES中有了模块的概念,我们可以将不同的函数封装到不同的模块里,在定义的时候需要将模块中的变量和方法使用export进行导出,在使用的时候可以用import进行导入

export可以导出模块中定义的变量和方法,比如我们可以在common目录定义一个获取openid的模块

export async function getOpenId() {
  const { OPENID, FROM_OPENID } = await app?.utils?.getWXContext()
  let userId = FROM_OPENID || OPENID
  if (!userId) {
    const { wedaId } = await app.cloud.getUserInfo()
    userId = wedaId
  }
  return userId
}

如果我们一加载小程序的时候,就需要获取openid,可以在生命周期函数中引入模块,使用import语句进行导入

import { getOpenId } from './common/getOpenId'
export default {
  onAppLaunch(launchOpts) {
    // 调用获取用户openId方法,在用户表中查询是否用当前用户并设置全局用户信息
    getOpenId().then(async userId => {
      const res = await app.cloud.dataSources.mykh_uxymskf.wedaGetItem({
        where: [
          {
            key: 'wxOpenId',
            val: userId,
            rel: 'eq'
          }
        ]
      })
      app.dataset.state.userInfo = Object.assign(
        { openId: userId },
        res?.nickName && { nickName: res?.nickName },
        res?.avatar && { avatar: res?.avatar }
      )
    })
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
  },
  onAppShow(appShowOpts) {
    //console.log('---------> LifeCycle onAppShow', appShowOpts)
  },
  onAppHide() {
    //console.log('---------> LifeCycle onAppHide')
  },
  onAppError(options) {
    //console.log('---------> LifeCycle onAppError', options)
  },
  onAppPageNotFound(options) {
    //console.log('---------> LifeCycle onAppPageNotFound', options)
  },
  onAppUnhandledRejection(options) {
    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
  }
}

导入后就可以按照函数调用的语法使用,还是比较方便的

总结


我们本篇介绍了函数的语法及模块的基础知识,编程的过程首先要熟悉语法,然后就按照语法来实现功能,练起来吧。

相关文章
|
6月前
|
JavaScript 前端开发
在Node.js中,如何合理使用模块来避免全局变量的问题?
在Node.js中,如何合理使用模块来避免全局变量的问题?
215 71
|
5月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
199 19
|
7月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
9月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
181 32
|
10月前
|
敏捷开发 人工智能 JavaScript
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
604 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
|
8月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
12月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
240 2

热门文章

最新文章

下一篇
开通oss服务