简单的JS代码封装示例

时间:2022-09-06 11:20:35 类型:JS/JQUERY
字号:    

随着js的版本升级,现在也支持了class, 也可以直接 new 类生成一个实例对象, 封装将变得非常简单,那么之前的js封装是怎么样的呢?

首先看一个最基础的js封装示例:

 function myCar() {
        this.name='庄子汽车';
        this.drive=function(){
            console.log(this.name + "时速可以达到180KM/小时")
        }
    }
    var my = new myCar();//创建实例化对象
        console.log(my.name);//调用属性
        my.drive();//调用方法

这是一个非常简单的函数封装, 可以通过function产生独立的作用域, 防止同名属性的冲突, 但是在某些应用场景中还是会有一些问题, 那么我们看下下一段代码

index.js文件代码:

(function(window,$){
    function yt(name,config){
        this.name = name;
        var conf = {
            title : "我们都是一家人",
            content:"我们应该热爱这个家庭",
            time  : "2022-08-09",
            autho : "庄子",
        };
        $.extend(conf,config);

        this.success = function(){
            console.log(conf);
        }

        this.getMax = function(x,y){
            return x > y ? x:y;
        }
       
    }
    function tt(){
        console.log("测试");
    }
    //暴露yt方法
    window.yt = yt;
    window.tt= tt;
   
    }(window,$));
//window是全局变量

上面这段代码使用的是IIFE: Immediately Invoked Function Expression, 意为立即调用的函数表达式, 也就是说, 声明函数的同时立即调用这个函数. 这里我们可以控制想要暴露出去的属性和方法。

index.html文件加载

let test = new yt("南昌雅腾",{title:"我爱我的家","keyword":"家,爱"});
        test.success();
        let max = test.getMax(100,300);
        tt();

根据使用场景的不同,我们可以灵活选择不同的封装方法

<