简单入门JavaScript函数封装 封装函数

什么是封装？
封装是面向对象的三个基本特征之一 将现实世界的事物抽象成计算机领域中的对象 对象同时具有属性和行为(方法) 这种抽象就是封装
特性:数据隐藏

什么是函数?
用来执行特定任务 实际上为了易于调试和维护 函数允许以更有组织的方式去编写代码 函数还允许代码重用

什么是函数封装？
函数封装是一种函数的功能 它把一个或多个功能通过函数、类的方式封装起来 对外只提供一个简单的函数接口
当写程序的过程中需要执行同样操作时 不需要再写同样的函数来调用 直接从函数库里面调用

使用函数有两步

1. 定义函数(又叫声明函数 封装函数)
   定义函数的三个要素:功能 参数 返回值
2. 调用函数

函数的参数和返回值

1. 函数的参数就是完成一件事情的已知条件 就是输入
2. 函数的返回值就是事情完成的结果 就是输出

简单的函数封装示例
示例1
功能:奇偶数的判断
参数: 一个数
返回值:true是偶数 false是奇数

// 1. 定义函数
function isOuShu(num){
    if(num%2===0){
        // 如果余等于0 则为true 否则为false
        return true
    }else{
        return false
    }
}
// 2. 调用函数
// isOuShu(5)
// 接收函数返回值 为了显示输出的返回值 定义一个变量接收
var num = isOuShu(5)
console.log(num)

示例2
功能:计算元素样式兼容ie浏览器
参数:被计算的元素和被计算元素的类型
返回值:计算后的值

<style>
    .pic{
        height: 1200px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .pic li{
        float: left;
        width: 200px;
        height: 200px;
        background: #333;
        list-style: none;
        margin-right: 10px;
    }
</style>

 <div>
    <ul class="pic" id="pic">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<script>
function getStyle(elem,type){
     // 一般浏览器
     if(window.getComputedStyle){
         return window.getComputedStyle(elem,null)[type]
     }else{
         // ie浏览器
         return elem.currentStyle[type]
     }
 }
 var width = getStyle(pic.children[0],'width')
 console.log(width)
</script>