微搭低代码入门03函数
在用低代码开发软件的时候，除了我们上两节介绍的变量、条件语句外，还有一个重要的概念叫函数。函数是执行特定功能的代码片段，比如我们在小程序中，如果点击提交按钮，往往希望将数据存入数据源中，那这个数据写入的过程我们就可以封装成一个函数。
我们本篇介绍函数的语法，示例，结合低代码中的自定义方法的编写深入理解函数的概念。
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 = 18
console.log(age+1)
console.log('您的姓名：'+userName)
console.log(`您的姓名:${userName}`)
console.log(typeof userName)
sayHi(userName)
}
模块被导出之后，可以使用import关键字导入，import后边的名字可以自己命名，在示例的最后一行代码我们就调用了导入的方法sayHi
总结
这一篇其实就是低代码开发必须需要弄明白的事情，如果不懂函数是干啥的，后边你在调用前后端API的时候往往一头雾水。前端是啥，后端又是啥，就会有种看代码一点都看不明白的感觉。
原文地址：https://blog.csdn.net/u012877217/article/details/143731704
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！