微搭低代码入门03函数

目录

  • 1 函数的定义与调用
  • 2 参数与返回值
  • 3 默认参数
  • 4 将功能拆分成小函数
  • 5 函数表达式
  • 6 箭头函数
  • 7 低代码中的函数
  • 总结

在用低代码开发软件的时候,除了我们上两节介绍的变量、条件语句外,还有一个重要的概念叫函数。函数是执行特定功能的代码片段,比如我们在小程序中,如果点击提交按钮,往往希望将数据存入数据源中,那这个数据写入的过程我们就可以封装成一个函数。

我们本篇介绍函数的语法,示例,结合低代码中的自定义方法的编写深入理解函数的概念。

1 函数的定义与调用

语法:

使用function关键字进行定义。其基本语法如下:

function functionName(parameters) {// 函数体return something;
}
  • functionName:函数名。
  • parameters:函数的参数,可以有多个,用逗号分隔。
  • functionBody:函数体,包含要执行的代码。
  • return:返回语句,用于返回函数的结果。

调用

定义函数后,可以通过函数名加上一对圆括号(可以包含参数)来调用它:

functionName(arguments);

在调用的时候可以传入参数

2 参数与返回值

函数参数是函数定义时声明的变量,用于在函数体中接收传递的数据。

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

在这个例子中,add函数接受两个参数a和b,并返回它们的和。

函数可以通过return语句返回一个值。如果函数没有return语句,则默认返回undefined。

function greet(name) {return "Hello, " + name;
}

调用greet(“Alice”)将返回"Hello, Alice"。

3 默认参数

在ES6中,引入了默认参数的概念,允许在函数定义时为参数指定默认值。

function greet(name = "Guest") {return "Hello, " + name;
}

调用greet()将返回"Hello, Guest",而调用greet(“Alice”)将返回"Hello, Alice"。

4 将功能拆分成小函数

将一个大的任务拆分成小任务可以提高代码的可读性和可维护性。例如,将温度从摄氏度转换为华氏度的过程可以拆分成几个小函数:

function toCelsius(fahrenheit) {return (fahrenheit - 32) * 5 / 9;
}function toFahrenheit(celsius) {return celsius * 9 / 5 + 32;
}function convertTemperature(temp, from, to) {if (from === 'C' && to === 'F') {return toFahrenheit(temp);} else if (from === 'F' && to === 'C') {return toCelsius(temp);} else {throw new Error("Invalid conversion type");}
}let celsius = 25;
let fahrenheit = convertTemperature(celsius, 'C', 'F');
console.log(fahrenheit); // 输出:77

5 函数表达式

函数表达式允许我们将一个函数赋值给一个变量,这样函数就可以像其他变量一样被传递和使用。

let add = function(a, b) {return a + b;
};console.log(add(3, 4)); // 输出:7

6 箭头函数

ES6引入了箭头函数,提供了一种更简洁的函数定义方式。箭头函数没有自己的this,继承外层作用域的this值。

示例:

let add = (a, b) => {return a + b;
};console.log(add(3, 4)); // 输出:7

如果箭头函数的函数体只有一条语句,可以省略花括号和return关键字,这条语句的结果将自动返回。

let square = x => x * x;console.log(square(5)); // 输出:25

使用箭头函数对前面的示例进行重构:

let toCelsius = fahrenheit => (fahrenheit - 32) * 5 / 9;let toFahrenheit = celsius => celsius * 9 / 5 + 32;let convertTemperature = (temp, from, to) => {if (from === 'C' && to === 'F') {return toFahrenheit(temp);} else if (from === 'F' && to === 'C') {return toCelsius(temp);} else {throw new Error("Invalid conversion type");}
};let celsius = 25;
let fahrenheit = convertTemperature(celsius, 'C', 'F');
console.log(fahrenheit); // 输出:77

7 低代码中的函数

低代码对函数进行了可视化的封装,其实是借助es6的模块的概念进行了封装。比如我们在代码区可以创建两类方法,一种是页面生命周期的方法,一种是全局生命周期的方法。不同的生命周期标识方法的可见范围不同。我们将演示两类方法的使用。

先看第一类,页面生命周期的方法

export default function({event, data}) {// 函数体
}

这种语法是ES6模块导出语法的一种应用,它定义了一个默认导出的函数。这个函数接受一个对象作为参数,这个对象包含了event和data两个属性。event表示我们的事件对象,data表示在方法调用的时候传入的参数

比如我们在上边举了一个温度转换的函数,我们把他放入自定义方法中

在这里插入图片描述

function toCelsius(fahrenheit) {return (fahrenheit - 32) * 5 / 9;
}function toFahrenheit(celsius) {return celsius * 9 / 5 + 32;
}function convertTemperature(temp, from, to) {if (from === 'C' && to === 'F') {return toFahrenheit(temp);} else if (from === 'F' && to === 'C') {return toCelsius(temp);} else {throw new Error("Invalid conversion type");}
}
export default function ({ event, data }) {let celsius = 25;let fahrenheit = convertTemperature(celsius, 'C', 'F');console.log(fahrenheit); // 输出:77
}

创建一个按钮,调用我们的自定义方法
在这里插入图片描述
在这里插入图片描述
export default:这是ES6中用于导出模块成员的语法。当使用export default时,你可以导出一个函数、类、对象或任何其他类型的值。微搭这样写,通常我们是让代码更好管理,一个方法对应组件上的一个事件调用。

在{}里边写你具体的逻辑,如果需要将逻辑再封装成函数的,可以把你封装的function放在export上边。初学低代码的遇到这就开始乱写了,任意拼凑代码,为啥我看你的教程,我自己一写就报错呢?可不报错,连基础的语法都没有遵守。

第二种就是我们的全局方法,全局方法语法如下

export default function sayHi() {console.log('Hi LowCode')
}

全局比页面的多了一个方法的名字sayHi这个可以自己改,改成自己好认的名字。比如全局定义之后,一个是可以在组件里调用,还有就是可以在页面的方法里调用,调用的示例:

import sayHi from '../../common/sayHi'
export default function({event, data}) {let userName = '张三'console.log(userName)userName= '李四'console.log(userName)const age = 18console.log(age+1)console.log('您的姓名:'+userName)console.log(`您的姓名:${userName}`)console.log(typeof userName)sayHi(userName)}

模块被导出之后,可以使用import关键字导入,import后边的名字可以自己命名,在示例的最后一行代码我们就调用了导入的方法sayHi

总结

这一篇其实就是低代码开发必须需要弄明白的事情,如果不懂函数是干啥的,后边你在调用前后端API的时候往往一头雾水。前端是啥,后端又是啥,就会有种看代码一点都看不明白的感觉。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/14227.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Zabbix中文监控指标数据乱码

1)点击主机,选择Zabbix server 中的 图形 一项,可以看到当前显示的为乱码 2) 下载字体文件: https://gitcode.com/open-source-toolkit/4a3db/blob/main/SimHei.zip 解压unzip -x SimHei.zip 3) 替换字体文…

限价订单簿中的高频交易

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学,点击下方链接报名: 量化投资速成营(入门课程) Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…

JDBC事务管理、四大特征(ACID)、事务提交与回滚、MySQL事务管理

目录 一、什么是JDBC事务? (1)事务概念。 (2)JDBC事务的实现。 1、提交。 2、回滚。 (3)生活中可以类比 JDBC 事务的例子。 1、以网上购物为例。 二、JDBC的四大事务(ACID&#xff0…

操作系统离散存储练习题

1. (简答题)分页存储管理系统具有快表,内存访问时间为2ns,检索快表时间为0.5ns,快表命中率为80%,求有效访问时间 -分析:首先访问缓存(快表),如果没有找到访问内存(页表&…

【AI日报】2024年11月13号

我回来啦!!发现自己好久不发文章了。 在某头部AI公众号实习的过程中,学到太多太多了,也感谢某位大神的指点,也衷心祝愿他的IP可以越做越好 之后因为时间关系,可能要自己出来单干了。 在实习过程中学到的…

inline内联函数(C++)

a)⽤inline修饰的函数叫做内联函数,编译时C编译器会在调⽤的地⽅展开内联函数,这样调⽤内联函数就不需要建⽴栈帧了,就可以提⾼效率。 b)inline对于编译器⽽⾔只是⼀个建议,也就是说,你加了inl…

C++builder中的人工智能(27):如何将 GPT-3 API 集成到 C++ 中

人工智能软件和硬件技术正在迅速发展。我们每天都能看到新的进步。其中一个巨大的飞跃是我们拥有更多基于自然语言处理(NLP)和深度学习(DL)机制的逻辑性更强的AI聊天应用。有许多AI工具可以用来开发由C、C、Delphi、Python等编程语…

Harmony- List组件最后一个item显示不全

在使用List组件显示数据的时候会出现最后一个item显示不全的问题,如下 出现在高度问题上,如果List组件上下没有其他占位组件就是正常显示的 解决方案: 1.给List组件加上layoutWeight(1),使它填满父控件剩余空间; 2.还有一种情况…

neo4j desktop基本入门

下载安装不在赘述,本文只记述一些neo4j的基本入门操作 连接本地neo4j数据库 1. 点击ADD添加连接 端口一般是7687 账户名和密码忘记了,可以通过neo4j web(默认为neo4jneo4j://localhost:7687/neo4j - Neo4j Browser)重置密码 AL…

function and task

任务和函数 在Verilog语言中提供了任务和函数,可以将较大的行为级设计划分为较小的代码段,允许设计者将需要在多个地方重复使用的相同代码提取出来,编写成任务和函数,这样可以使代码更加简洁和易懂。 1.1任务 任务的定义 任务定义…

24/11/13 算法笔记<强化学习> DQN算法

DQN算法的主要特点包括: 神经网络代替Q表:在传统的Q学习中,需要维护一个Q表来存储每个状态-动作对的Q值。而在DQN中,使用神经网络来近似这些Q值,这使得算法能够处理具有大量状态和动作的问题。 经验回放(E…

blind-watermark - 水印绑定

文章目录 一、关于 blind-watermark安装 二、bash 中使用三、Python 调用1、基本使用2、attacks on Watermarked Image3、embed images4、embed array of bits 四、并发五、相关 Project 一、关于 blind-watermark Blind watermark 基于 DWT-DCT-SVD. github : https://githu…

Qt_day10_程序打包(完结)

目录 1. 设置图标 2. Debug和Release版本 3. 动态链接库 4. 打包 5. 联系项目要求 Qt开发的程序最终都是要给用户使用的,用户的电脑上不可能装一个Qt的开发环境导入项目使用。因此项目项目开发完成后需要打包——制作成安装包,用户直接下载并安装即可使用…

【C语言】指针的运算

指针的增量操作: int i 10; int *p &i;printf("p %p\n", p);//1024p; // 增加int 4个字节大小printf("p %p\n", p);//1028指针的增量运算取决于指针的数据类型,它将会增加数据类型的大小的字节。 指针的减量操作与增量同理…

C++builder中的人工智能(28):FANN: Fast Artificial Neural Networks快速人工神经网络(ANNs)

这篇文章全面介绍了快速人工神经网络(ANNs)的世界,探讨了它们在现代计算智能中的重要地位、核心特点、应用领域以及未来发展。 快速人工神经网络库(Fast Artificial Neural Network Library,简称FANN)是一…

零基础Java第十六期:抽象类接口(二)

目录 一、接口(补) 1.1. 数组对象排序 1.2. 克隆接口 1.3. 浅拷贝和深拷贝 1.4. 抽象类和接口的区别 一、接口(补) 1.1. 数组对象排序 我们在讲一维数组的时候,使用到冒泡排序来对数组里的元素进行从小到大或从大…

wafw00f源码详细解析

声明 本人菜鸟一枚,为了完成作业,发现网上所有的关于wafw00f的源码解析都是这抄那那抄这的,没有新东西,所以这里给出一个详细的源码解析,可能有错误,如果有大佬发现错误,可以在评论区平和的指出…

Bilibili-超能用户榜入口优化-技术方案反思与总结

目录 客户端实现: 高能用户入口实现逻辑: 接口服务信息(服务端下发): 执行方案: (1)数据类新增服务端下发字段 ​编辑 (2) UI添加 寻找思路: (3)超能用户icon显示…

终端打开程序、为什么要用pycharm

方法一:cd文件路径 方法二:输入cmd 为什么终端可以运行python代码,还需要pycharm?——让写代码的过程更加简单 学习视频:【最详细的 Windows 下 PyTorch 入门深度学习环境安装与配置 CPU GPU 版 | 土堆教程】https://w…

深度了解flink(十一) 心跳机制详解

前言 在Flink的各个服务组件中,ResourceManager、JobMaster、TaskExecutor三者之间存在相互检测的心跳机制:ResourceManager会主动发送心跳请求探测JobMaster、TaskExecutor是否存活;JobMaster也会主动发送心跳请求探测TaskExecutor是否存活…