函数封装与this应用

最新推荐文章于 2022-06-12 19:55:26 发布

爱敲代码的狼仔

最新推荐文章于 2022-06-12 19:55:26 发布

阅读量165

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_48469083/article/details/119684367

版权

本文介绍了JavaScript中的函数封装，强调了代码复用的重要性。通过实例展示了如何通过函数实现元素操作，如事件监听和元素样式的获取，同时讲解了`this`关键字在不同环境下的应用场景。此外，还探讨了开关效果的实现、自定义属性的使用以及在多组开关效果和选项卡效果中的应用。

摘要由CSDN通过智能技术生成

1 函数封装

函数封装过程：
- 实现功能
- 声明一个函数，把主要代码放入到函数中
- 在函数中找可变的值做参数，参数代入到函数中
- 调用调试

1.2 代码复用

代码复用：功能一样，结构一致

实现思路：

1.把他当做只有一组去实现，里面的标签必须通过父元素获取

2.实现一组的功能

3.把实现一组功能的代码放入到函数中，把父元素作为参数

4.调用

var oLis = document.getElementsByTagName("li");
for(var i = 0;i<oLis.length;i++){
    car(oLis[i]);
}
// car(oLis[0]);
// car(oLis[1]);
// car(oLis[2]);

function car(parent) {
    //1.通过父元素获取子元素
    var oBtns = parent.getElementsByTagName("button");
    var oStrong = parent.getElementsByTagName("strong")[0];
    var oSpans = parent.getElementsByTagName("span");

    //2.点击+的按钮，改变数量，改变小计
    oBtns[1].onclick = function () {
        //，改变数量  在当前商品数量的基础上+1
        //oStrong.innerHTM++;
        oStrong.innerHTML = ++oStrong.innerHTML;
        oSpans[1].innerHTML = (oSpans[0].innerHTML * oStrong.innerHTML).toFixed(2);
    }
    oBtns[0].onclick = function () {
        //，改变数量  在当前商品数量的基础上+1
        //oStrong.innerHTM++;
        if (oStrong.innerHTML > 0) {
            oStrong.innerHTML = --oStrong.innerHTML;
            oSpans[1].innerHTML = (oSpans[0].innerHTML * oStrong.innerHTML).toFixed(2);
        }
    }
}

2.获取元素的样式

获取行间样式：标签.style.属性名【只能获取获取行间样式】

获取非行间样式

标准浏览器： window.getComputedStyle(标签).属性名 ie8-不兼容

IE浏览器：标签.currentStyle.属性名

//3.标准浏览器： window.getComputedStyle(标签).属性名
var w = window.getComputedStyle(oDiv).width;
console.log(w);

//4. IE浏览器：标签.currentStyle.属性名
var w = oDiv.currentStyle.width;
console.log(w);

兼容

兼容：如果是方法(xx.xx() )的兼容就需要使用if判断

判断条件：拿任意一个浏览器的方法xx.xx做为判断条件

//alert(oDiv.currentStyle); //ie为真  标准undefined假
//alert(window.getComputedStyle)//标准为真，ie undefined为假

if (oDiv.currentStyle) {
    var w = oDiv.currentStyle.width;
    console.log(w);
} else {
    var w = window.getComputedStyle(oDiv).width;
    console.log(w);
}

3.this

this的概念

this:当前这个，一般在函数中出现，出现位置不一样，代表的值也不一样，取决于当前调用函数时所处的环境
在普通函数中this -----> window
在事件函数中this -----> 当前触发事件的对象(标签) 点谁是谁

在对象的方法中this ---> 指当前对象

//1.普通函数  (所有的全局变量和全局函数都属于window)
function sum(){
    console.log(this);
}
window.sum();
var a = 10;
console.log(window.a);  //一般省略window

//2.在事件函数中this ----->  当前触发事件的对象(标签)    点谁是谁
var oBtns = document.getElementsByTagName("button");
for(var i = 0;i<oBtns.length;i++){ //循环添加点击事件的时候，事件里面不会执行
    oBtns[i].onclick = function(){
        console.log(this);
        alert(this.innerText);
    }
}

//3.在对象的方法中this --->指当前对象
var txf = {
    "name":"小芳",
    "skill":function(){
        console.log("敲代码");
        console.log(this); //当前对象
    }
}
txf.skill();

4.开关效果

开关效果：一个标签两种状态

实现思路：定义一个状态标识，tag = true，点击的时候判断tag的值

//1.获取元素
var oImg = document.getElementsByTagName("img")[0];

//如果判断找不到的判断条件，自己创造一个条件
var tag = true;  //true----关     false-----开

//2.点击图片
oImg.onclick = function(){
    console.log(oImg.src); //获取的是绝对地址
    if(tag == true){
        oImg.src = "./images/bright.jpg";
        tag = false;
    }else{
        oImg.src = "./images/dark.jpg";
        tag = true;
    } 
}

5.自定义属性

5.1 自定义属性

属性分类：
- 固有属性：系统定义好的 id class title src name
- 自定义属性：程序员自己定义的 tag

属性操作

获取：var a = 标签.属性名
设置：标签.属性名 = 属性值

var oDiv = document.getElementsByTagName("div")[0];

//1.可以在标签上直观看到，但是暂时获取不到直接写在行间的自定义属性
var t = oDiv.tag;
console.log(t); //undefined

//2.在js中给标签自定义属性,在标签上看不到，但是可以获取使用
oDiv.a = true;
console.log(oDiv.a);

5.2 自定义属性的使用场景

多组开关效果

//2.循环添加点击事件
for (var i = 0; i < oDiv.length; i++) {
    oDiv[i].tag = true; //添加自定义属性，给每个标签都添加一个自己的属性
    oDiv[i].onclick = function () {
        if (this.tag == true) { //点击获取对应标签的属性状态进行判断
            this.style.height = "100px";
            this.tag = false;
        } else {
            this.style.height = "40px";
            this.tag = true;
        }
    }
}

选项卡效果

var colors = ["teal","skyblue","deeppink","rgba(233,245,250,0.8)","orange"];
//           [button   button   button     button                  button]
document.body.style.background = "#ccc";

//1.获取元素
var oBtns = document.getElementsByTagName("button");

//3.循环的事件中，需要下标又获取不到下标的时候，需要使用自定义属性去存储下标
// oBtns[0].index = 0;
// oBtns[1].index = 1;
// oBtns[2].index = 2;

//2.循环添加点击事件
for(var i = 0;i<oBtns.length;i++){
    //循环的事件中，需要下标又获取不到下标的时候，需要使用自定义属性去存储下标
    oBtns[i].index = i;
    oBtns[i].onclick = function(){
        console.log(this.index);
        document.body.style.background = colors[this.index];     
    }
}