[Micro-build low-code] Javascript basics - introduction to functions and modules

If you want to get started with low-code, you first need to learn javascript. We already have two basic articles,
variable definition and initialization
loop and conditional control
. This article introduces two knowledge points, one is function and the other is module

function

In js, functions are code blocks that can be reused. Functions are defined to remove redundancy. Any code blocks that need to be reused can be refined using the syntax of functions. The syntax of the function is

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

Formal parameters and return values ​​are not necessary. If there are no formal parameters, then our function is a function that does not require parameters. A function call can return a specific value. If it is only for processing, it is also possible to not return a value.

After the function is defined, it can be called. When calling, the syntax is

函数名(实参)

We use the function name to call a specific function. When calling, we need to pass in a specific value. If no formal parameters are defined, just write a pair of parentheses to call it.

If the function has a return value, then we can define a variable to receive the return value. Example: we define a summation function with two formal parameters, and the return value of the function is the sum of the two formal parameters.

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

After it is defined, if it needs to be called, we call it like this and receive the return value

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

After the function is called, the result of the calculation will be returned, 3+2=5, so the console will print 5

module

With the concept of modules in ES, we can encapsulate different functions into different modules. When defining, we need to use export to export the variables and methods in the module. When using, we can use import to import

Export can export variables and methods defined in modules. For example, we can define a module to obtain openid in the common directory

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
}

insert image description here
If we need to get the openid as soon as we load the applet, we can introduce the module in the life cycle function and use the import statement to 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)
  }
}

After importing, it can be used according to the syntax of function call, which is more convenient

Summarize

This article introduces the syntax of functions and the basic knowledge of modules. In the process of programming, you must first be familiar with the syntax, and then implement the functions according to the syntax. Let’s practice.

Guess you like

Origin blog.csdn.net/u012877217/article/details/127206512