开启辅助访问
帐号登录 |立即注册

JS函数封装与调用

 
函数的使用可以减少大量重复的代码,封装好一个函数之后,可以在后面多处去调用,有时候使用别人封装好的函数,都不需要去了解该功能是如何实现,只需要知道函数是如何使用的即可,非常之方便。
语法
1,关键词 : function
2,函数名称 : 符合变量的命名规范
3,函数的参数 : 函数的执行数据
4,函数的程序 : 封装在函数{}中的程序内容
5,函数的返回值 : return 定义函数的返回值,并且会终止之后函数程序的执行


函数的封装方式
1,声明式
            function fun(){ }
2,匿名式,赋值式
            var fun1 = function(){}

函数的存储
        基本数据类型和复杂数据类型,在定义和存储数据时的区别
        基本数据类型 : 布尔 数值 字符串 undefined null
        复杂数据类型 : 对象 数组 函数
        在计算机存储数据的过程中,将变量,存储在内存当中,
        在内存中计算机程序执行是,将内存中的存储空间虚拟的分成了两个部分     
       栈 和 堆  两个部分 来存储数据
        基本数据类型,都存储在 栈 当中
        复杂数据类型,都存储在 堆 当中
            
        var a = 100;
            这是在定义一个基本数据类型
            a = 100 存储在 栈 中
            变量名称 a 中 存储的就是 数值100
            调用变量a,就是调用其中存储的数据100

        var b = function (){}
            这是在定义一个复杂数据类型
            function(){}  函数存储在 堆 当中,并且计算机操作系统,给这个函数定义了一个 内存地址 例如 0f0
            b 这个变量 存储在 栈 当中
            b 这个变量 存储的是 函数的内存地址 0f0
            调用变量b , 实际上是调用 0f0 这个地址 , 找到地址对应的函数 , 调用函数中的程序

1、无参无返回值函数
封装
function fun(){
//无return返回值
}
调用
fun();  //不需要传参,也没有返回值

2、有参无返回值函数
封装
function add(num1,num2){ //求和函数,没进行容错处理
console.log(num1+num2); //打印求和结果
//无return返回值
}
调用
fun(12,13);  //需要传入两个整数,没有返回值

3、有参有返回值函数
封装
function add(num1,num2){ //求和函数,没进行容错处理
return num1+num2;
}
调用
var res = fun(12,13);  //需要传入两个整数,还需要声明变量接收返回值
conso.log(res)

函数封装细节
1,考虑容错机制
       函数的执行,对于参数是要有要求的,如果参数出现问题,要么终止程序的执行,要么对参数进行处理。
            方式1: 使用return来终止函数的执行
                在switch判断和循环语句中,可以使用break来终止程序
                在函数中药终止函数的执行,不能使用break
                需要使用return关键词;
            方式2: 对数据进行调整
2,考虑函数参数的默认值
       有时候一个函数需要传入两个参数,但是使用时之传了一个参数,那另一个就会以默认值的形式存在,会影响最终结果。  
3,给函数定义函数说明
       代码规范中规定,所有的自定义函数,都要写函数说明。每个公司对于函数说明的语法规范都不相同,我们现在先了解一个基本格式。
函数说明   param  参数的意思  是对参数的说明
                 一般写  参数的名称  数据类型  作用
                  return  返回值的意思 是对返回值的说明
                  return  返回值的名称 数据类型 作用

一、使用函数有两步:

1、定义函数,又叫声明函数, 封装函数。
定义函数的三个要素:功能,参数,返回值。
function 函数名(形参){
函数代码
return 结果
}
//2、调用函数
var 变量  =  函数名(实参);

二、对函数的参数和返回值的理解
1、函数的参数就是完成一件事情的已知条件,就是输入。
2、函数的返回值就是事情完成的结果。就是输出。

三、以下为简单的函数封装的代码:
//封装函数的三个要素;
//功能:奇偶数的判断
//参数:一个数
//返回值:true:是偶数;false:是奇数;
function isOuShu(num){
if(num%2==0){
return true;
}else{
return false;
}
}

//功能:判断一个数是不是3和7的倍数
//参数:一个数
//返回值:true:是;false:否
function isSanAndSeven(num){
if(num%3==0 && num%7==0){
return true;//return语句可以终止函数的执行。
}
return false;
}

//功能:判断一个两位以内数是不是逢7过的数
//参数:一个两位以内数
//返回值:true:是;false:否
function isSevenPass(num){
if(num%7==0 || num%10==7 || parseInt(num/10)==7){
return true;
}
return false;
}

//功能:闰年
//参数:年份
//返回值:true:是;false:否
function isLeapYear(year){
if((year%4==0 && year%100!=0)||(year%400==0)){
return true;
}
return false;
}

//功能:身体健康指数
//参数:身高和体重
//返回值:-1:太轻了;0:正常;1:太重了;
function BMI(height,weight){
var str="";
var standardWeight = height-105;
if(weight<standardWeight-5){
return -1;
}else if(weight>standardWeight+5){
return 1;
}else{
return 0;
}
}

//功能:输入数字显示星期几
//参数:0-6的数字
//返回值:形如"星期一"一样的字符串,如果是空字符串("")表示输入的数字不在0-6之间。
function convertWeek(num){
var str="星期";
switch(num){
case 0:str+="天";break;
case 1:str+="一";break;
case 2:str+="二";break;
case 3:str+="三";break;
case 4:str+="四";break;
case 5:str+="五";break;
case 6:str+="六";break;
default:str="";
}
return str;
}


//功能:n到m之间的所有的自然数之和;
//参数:
//   参数1:表示起始的数n,
//   参数2:表示结束的数m
//返回值:求和的结果,是个数字;
function sumfromNToM(n,m){
var sum = 0;
for(var i=n;i<=m;i++){
sum=sum+i;
}
return sum;
}

//功能:计算1-m以内能被n整除的数之和
//参数:
// 表示结束数的m
// 表示整除的数n
//返回值:表示和的数
function sumFrom1ToMByN(m,n){
var sum=0;
for(var i=n;i<=m;i=i+n){
sum = sum+n;
}
return sum;
}

//功能:求出1-1/2+1/3-1/4+1/5....1/100的和(加奇减偶)。
//参数:无
//返回值:表示和的数;
function sumFrom1To100(){
var sum = 0;
for(var i=1;i<=100;i++){
if(i%2==0){
sum = sum-1/i;
}else{
sum = sum+1/i;
}
}
return sum;
}

//功能:求出1-1/2+1/3-1/4+1/5....1/n的和(加奇减偶)。
//参数:无
//返回值:表示和的数;
function sumFrom1ToN(n){
var sum = 0;
for(var i=1;i<=n;i++){
if(i%2==0){
sum = sum-1/i;
}else{
sum = sum+1/i;
}
}
return sum;
}

//功能:打星星
//参数:行数和列数
//返回值:无
function printStar(rows,cols){
for(var i=0;i<rows;i++){//外层循环循环的是行
//1、打印5个星星
for(var j=0;j<cols;j++){//内层决定了列数
document.write("?");
}
//2、换行
document.write("
");

}
}

//功能:生成n位的验证码
//参数:位数n
//返回值:n个随机数
function getCheckNum(n){
var str="";
for(var i=0;i<n;i++){
str += parseInt(Math.random()*10);
}
return str;
}
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。