什么是封装？

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

特性:数据隐藏
什么是函数?

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

函数封装是一种函数的功能 它把一个或多个功能通过函数、类的方式封装起来 对外只提供一个简单的函数接口

当写程序的过程中需要执行同样操作时 不需要再写同样的函数来调用 直接从函数库里面调用
使用函数有两步

定义函数(又叫声明函数 封装函数)

定义函数的三个要素:功能 参数 返回值
调用函数

函数的参数和返回值

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

简单的函数封装示例

示例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>

1. 函数封装

函数封装是一种函数的功能，它把一个程序员写的一个或者多个功能通过函数、类的方式封装起来，对外只提供一个简单的函数接口。

2. 对selenium的常用操作进行封装

1)封装开启关闭浏览器
2)封装定位操作
3)封装对元素的基本操作

封装开启关闭浏览器



    def locateElement(self, locate_type, value):
        # 判断定位方式并调用相关方法
        el = None
        if locate_type == 'id':
            el = self.driver.find_element_by_id(value)
        elif locate_type == 'name':
            el = self.driver.find_element_by_name(value)
        elif locate_type == 'class':
            el = self.driver.find_element_by_class_name(value)
        elif locate_type == 'text':
            el = self.driver.find_element_by_link_text(value)
        elif locate_type == 'xpath':
            el = self.driver.find_element_by_xpath(value)
        elif locate_type == 'css':
            el = self.driver.find_element_by_css_selector(value)
        # 如果el不为None,则返回
        if el is not None:
            return el

    # 指定对某一元素的点击操作
    def click(self, locate_type, value):
        # 调用定位方法进行元素定位
        el = self.locateElement(locate_type,value)
        # 执行点击操作
        el.click()
        time.sleep(1)

    # 对指定的元素进行数据输入
    def input_data(self,locate_type,value,data):
        # 调用定位方法进行元素定位
        el = self.locateElement(locate_type,value)
        # 执行输入操作
        el.send_keys(data)

标签切换
function tabChange(btnBox,btn,tabBox,tab){
    $(btnBox).find(btn).click(function() {
        var _this = $(this);
        _this.addClass('on').siblings(btn).removeClass('on');
        var index = _this.index();
        $(tab).eq(index).show().siblings(tab).hide();
    });
}
//调用
tabChange('#title-nav','.option','.productList','.list');



<!--btnBox btn-->
<div id="title-nav">
    <span class="option on">待确认</span>
    <span class="option">待参加</span>
    <span class="option">已完成</span>
    <span class="option">已取消</span>
</div>

<!--tabBox tab-->
<div class="productList">
    <div class="list">tab1</div>
    <div class="list hide">tab2</div>
    <div class="list hide">tab3</div>
    <div class="list hide">tab4</div>
</div>

函数封装
    //调用外部封装好的js库即可
Utils：
    var Utils=(function () {
    return {
        setStyle:function (elem,style) {
            for(var prop in style){
                elem.style[prop]=style[prop];
            }
        },
        randomColor:function (alpha) {
            if(alpha>1 || isNaN(alpha) || alpha<0){
                alpha=1;
            }
            var color="rgba(";
            for(var i=0;i<3;i++){
                color+=parseInt(Math.random()*256);
                color+=",";
            }
            color+=alpha+")";
            return color;
        }
    }
})();

//函数调用
var div0=document.getElementById("div0");
Utils.setStyle(div0,{
    width:"100px",
    height:"100px",
    backgroundColor:Utils.randomColor()
})