利用构造函数写js往空页面添加两个切换弹窗页面[保存成功/保存中...]

最新推荐文章于 2022-05-03 14:14:23 发布

试图让你心动

最新推荐文章于 2022-05-03 14:14:23 发布

阅读量264

点赞数

分类专栏： javascript 文章标签： java js javascript vue

本文链接：https://blog.csdn.net/zhangmeixia969/article/details/119563514

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的构造函数概念及其执行过程，并展示了如何利用构造函数创建一个名为ShowLoading的功能，用于在页面中添加动态加载提示框。ShowLoading函数包含初始化、显示、隐藏等方法，可以设置不同类型、文本及自动关闭时间。示例代码详细解释了如何在页面中应用此功能。

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

1、什么是构造函数

在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。构造函数首字母一般大写

构造函数会有以下几个执行过程：

(1) 当以 new 关键字调用时，会创建一个新的内存空间，标记为 Animal 的实例。
(2)函数体内部的 this 指向该内存
(3) 执行函数体内的代码
通过上面的讲解，你就可以知道，给 this 添加属性，就相当于给实例添加属性。
(4) 默认返回 this
由于函数体内部的this指向新创建的内存空间，默认返回 this ，就相当于默认返回了该内存空间，也就是上图中的 #f1。此时，#f1的内存空间被变量p1所接受。也就是说 p1 这个变量，保存的内存地址就是 #f1，同时被标记为 Person 的实例。

利用构造函数写js往空页面添加两个切换弹窗页面[保存成功/保存中…]

(function (global) {

    function ShowLoading (opt) {

        if (!global.jQuery) {
            throw new Error('jQuery.js is required!');
            return null;
        }
        this.timer = null;
        this.init(opt);
    }
    ShowLoading.prototype = {
        constructor: ShowLoading,
        init: function (opt) {
            this.addCss(opt);
            this.addHtml(opt);
        },

        show: function (type, text, closeTime) {
             // 根据类型和文本来确定展示哪些内容
            // closeTime自动关闭弹窗
         //   clearTimeout(this.timer);
           // if(closeTime > 0){
            //    this.timer = setTimeout(function(){
              //      $(".show-loading-html").hide();
               // },closeTime);
            }
            
        },
        
        hide: function () {
            //隐藏所有弹窗
        },
        addHtml: function () {
            if ($('.show-loading-html').length === 0) {
                var html = '<div class="show-loading-html">'
              	+''
                + '<div>';
                $('body').append(html);
            }
        },

        addCss: function (opt) {
            if ($('.show-loading-css').length === 0) {
                var css = '<style class="show-loading-css">'
                   +''
                    + '<style>';
                $('body').append(css);
            }
        },

    }
    global.showLoading = new ShowLoading();
    
})(window)

通过上面的介绍大家应该可以简单认识到构造函数
在这里插入图片描述

html

<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
</style>
<body>
</body>
<script src="../test-loading/jquery.js"></script>
<script src="../test-loading/jquery-2.1.1.min.js"></script>
<script src="../test-loading/test.js"></script>   //引入的js文件
<script>
    $(document).ready(function () {
        showLoading.show(2,'保存成功')  //调用的方法
    })
</script>
</html>

我们可以引用这个js文件

showLoading.show(2,‘保存成功’) //调用的方法

可以调取到js文件中show的方法可以看到里面有三个参数 type 类型用来判断我传过去的是什么
text 用来判断我这个页面弹窗的文字 closeTime自动关闭弹窗具体用法我写道那里了可以看一下
在写计时器之前必须先清除一下计时器。 addHtml() 方法按字面理解大家都知道吧添加html代码
addCss（）添加样式喽！

在这里插入图片描述