什么是封装?
封装是面向对象的三个基本特征之一 将现实世界的事物抽象成计算机领域中的对象 对象同时具有属性和行为(方法) 这种抽象就是封装
特性:数据隐藏
什么是函数?
用来执行特定任务 实际上为了易于调试和维护 函数允许以更有组织的方式去编写代码 函数还允许代码重用
什么是函数封装?
函数封装是一种函数的功能 它把一个或多个功能通过函数、类的方式封装起来 对外只提供一个简单的函数接口
当写程序的过程中需要执行同样操作时 不需要再写同样的函数来调用 直接从函数库里面调用
使用函数有两步
- 定义函数(又叫声明函数 封装函数)
定义函数的三个要素:功能 参数 返回值 - 调用函数
函数的参数和返回值
- 函数的参数就是完成一件事情的已知条件 就是输入
- 函数的返回值就是事情完成的结果 就是输出
简单的函数封装示例
示例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>