前端小白之每天学习记录----js简单的组件封装 / 憋错料

设计模式：是解决问题的模板

关于设计模式，可以阅读汤姆大叔的博文http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html

这里简单介绍两种设计模式：

1.单例模式：单例就是保证一个类只有一个实例

　　　　　　eg：在JavaScript里，实现单例的方式有很多种，其中最简单的一个方式是使用对象字面量的方法，其字面量里可以包含大量的属性和方法：

var people = {
    name: "lxb",
    age: "22",
    eat: function () {
        console.log(‘eat‘);
    }
};

2.工厂模式：建造类型的模式, 重点是创造对象

　　　　　　eg：可以创建许多有相同属性，属性的值不同的对象：

function CreateObj( name, age ){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        return obj;
    }

    var o1 = CreateObj( xx, xx );
    var o2 = CreateObj( xx, xx );

组件：许多插件组合在一起

想要封装组件，首先要先搭建插件

比如现在我们要搭建一个警告框插件

警告框插件：

1.整体架构准备

第一步：定义一个警告框构造函数

第二步：给这个构造函数加上方法

　　　　方法1：显示警告框

　　　　方法2：隐藏警告框

第三步：把构造函数实例化，并调用显示方法显示警告框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //第一步：定义一个警告框构造函数
        var popAlert = function (opt) {  //opt参数为外部可定制参数集合
            this.opt = opt || {};   //未传参时默认为空
        }       //第二步：
        //显示警告框
        popAlert.prototype.show = function () {
            var oDiv = document.createElement("div"); //新建一个div
            oDiv.setAttribute(‘class‘, ‘alert‘);    //为div添加类名alert
            document.body.appendChild(oDiv);    //把div输出到body
        }
        //隐藏警告框
        popAlert.prototype.hide = function () {

        }　　　　　第三步：
        //测试：F12查看
        window.onload = function () {
            var oAlertSuccess = new popAlert(); //实例化
            oAlertSuccess.show();//显示
        }
    </script>
</head>

<body>

</body>

</html>

以上代码会在body创建一个div

2.警告框插件完成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 从bootstrap复制的警告款样式 -->
     <!-- <link rel="stylesheet" href="./css/layout.css">  -->
    <!-- 或者直接用bootstrap样式 -->
     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
    <script>
        //定义一个警告框构造函数
        var popAlert = function (opt) {
            this.opt = opt || {};
        }
        //显示警告框
        popAlert.prototype.show = function () {
            //新建div
            var oDiv = document.createElement("div"),
                    that = this, //that 保存构造函数构造的实例对象
                    aClose;
            //添加类名
            this.opt[‘class‘]?// 判断有无外部参数class
            oDiv.classList.add( ‘alert‘, this.opt[‘class‘])
            :oDiv.classList.add( ‘alert‘,"alert-info");//外部没有传参数用默认的
            //为div添加内容
            oDiv.innerHTML = "<a href=‘javascript:;‘ class=‘close‘>x</a>"; //添加一个x的关闭标志
            oDiv.innerHTML += this.opt[‘content‘] || ‘请添加内容‘; //添加外部指定内容
            //把div输出到body下
            document.body.appendChild(oDiv);
            // 为所有x关闭标志绑定点击事件（重复遍历，在后面会改正）
            aClose = document.querySelectorAll(".alert > .close");
            aClose.forEach(function( ele ){
                ele.addEventListener( ‘click‘, function(){
                    that.hide( this.parentNode );  //用构造函数的隐藏方法隐藏点击的关闭标志的父节点（即整个警告框）
                });
            });
        }
        //隐藏警告框
        popAlert.prototype.hide = function ( obj ) {
            obj.style.display = ‘none‘;
        }
         //测试：
        window.onload = function () {
               var oAlertkong = new popAlert();
            oAlertkong.show();

            var oAlertkong2 = new popAlert({
                content: ‘这是默认样式‘,
                // class: ‘alert-success‘
            });
            oAlertkong2.show();

            var oAlertSuccess = new popAlert({
                content: ‘这是成功提示‘,
                class: ‘alert-success‘
            });
            oAlertSuccess.show();

            var oAlertWarning = new popAlert({
                content: ‘这是警告提示‘,
                class: ‘alert-warning‘
            });
            oAlertWarning.show();

            var oAlertInfo = new popAlert({
                content: ‘这是信息提示‘,
                class: ‘alert-info‘
            });
            oAlertInfo.show();

            var oAlertDanger = new popAlert({
                content: ‘这是危险提示‘,
                class: ‘alert-danger‘
            });
            oAlertDanger.show();
        }
    </script>
</head>

<body>

</body>

</html>

3.把警告框插件（popAlert）封装在组件（module）里面

分装好的js部分（plugin.js）：

; (function (window, undefined) {
    var module = {}; //定义组件
    //插件1
    var popAlert = function (opt) {
        this.opt = opt || {};
    }
    // 输出
    popAlert.prototype.show = function () {
        var oDiv = document.createElement("div"),
            that = this,
            aClose;
        this.opt[‘class‘] ?
            oDiv.classList.add(‘alert‘, this.opt[‘class‘])
            : oDiv.classList.add(‘alert‘, "alert-info");
        oDiv.innerHTML = "<a href=‘javascript:;‘ class=‘close‘>x</a>";
        oDiv.innerHTML += this.opt[‘content‘] || ‘请添加内容‘;
        document.body.appendChild(oDiv);
    // 绑定事件
        aClose = document.querySelectorAll(".alert > .close");
        aClose.forEach(function (ele) {
            ele.addEventListener(‘click‘, function () {
                that.hide(this.parentNode);
            });
        });
    }
    popAlert.prototype.hide = function (obj) {
        obj.style.display = ‘none‘;
    };

    module[‘popAlert‘] = popAlert; //为组件添加插件一
    window.module = module; //暴露组件到外部

})(window, undefined);

　测试输出的html部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./css/layout.css"> -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
    <script src="./js/plugin.js"></script>
    <script>
        //封装在plugin.js里面
        window.onload = function () {
            var oAlertSuccess = new module.popAlert({
                content: ‘这是成功提示‘,
                class: ‘alert-success‘
            });
            oAlertSuccess.show();

            var oAlertWarning = new module.popAlert({
                content: ‘这是警告提示‘,
                class: ‘alert-warning‘
            });
            oAlertWarning.show();

            var oAlertInfo = new module.popAlert({
                content: ‘这是信息提示‘,
                class: ‘alert-info‘
            });
            oAlertInfo.show();

            var oAlertDanger = new module.popAlert({
                content: ‘这是危险提示‘,
                class: ‘alert-danger‘
            });
            oAlertDanger.show();
        }
    </script>
</head>

<body>

</body>

</html>

模态框插件+警告框插件：（新建plugin2.js）

; (function (window, undefined) {
    var module = {};//定义组件
    //插件1:警告框
    var popAlert = function (opt) {
        this.opt = opt || {};
    };
    popAlert.prototype.show = function () {
        var oDiv = document.createElement("div"),
            that = this,
            aClose;
        this.opt[‘class‘] ?
            oDiv.classList.add(‘alert‘, this.opt[‘class‘])
            : oDiv.classList.add(‘alert‘, "alert-info");
        oDiv.innerHTML = "<a href=‘javascript:;‘ class=‘close‘>x</a>";
        oDiv.innerHTML += this.opt[‘content‘] || ‘请添加内容‘;
        document.body.appendChild(oDiv);
        var that = this;
        aClose = document.querySelectorAll(".alert > .close");
        aClose.forEach(function (ele) {
            ele.addEventListener(‘click‘, function () {
                that.hide(this.parentNode);
            });
        });
    };
    popAlert.prototype.hide = function (obj) {
        obj.style.display = ‘none‘;
    };
    //插件2：模态框
    var popModal = function (opt) {
        this.opt = opt || {};
    };
    //显示
    popModal.prototype.show = function () {
        var that = this;
        var modalHtml = "<div class=‘modal fade‘>";//进入的方式：飞入
        modalHtml += "<div class=‘modal-dialog‘>";//布局
        modalHtml += "<div class=‘modal-content‘>";//模态框盒子
        //标题
        modalHtml += "<div class=‘modal-header‘>";
        modalHtml += "<button type=‘button‘ class=‘close‘>x</button>";
        modalHtml += "<h4 class=‘modal-title‘>" + (this.opt[‘title‘] || ‘可定制title标题‘) + "</h4>"
        modalHtml += "</div>";
        //内容
        modalHtml += "<div class=‘modal-body‘>";
        modalHtml += this.opt[‘content‘] || ‘可定制content内容‘;
        modalHtml += "</div>";
        // 底部内容
        modalHtml += "<div class=‘modal-footer‘>";
        modalHtml += this.opt[‘footer‘] || ‘可定制footer底部内容‘;
        modalHtml += "</div>";
        //尾部标签
        modalHtml += "</div>";
        modalHtml += "</div>";
        modalHtml += "</div>";
        //按钮
        modalHtml += "<h2>";
        modalHtml += this.opt[‘tip‘] || "可定制tip提示信息";
        modalHtml += "</h2><button class=‘btn btn-primary btn-lg‘ data-toggle=‘modal‘ data-target=‘#myModal‘>";
        modalHtml += this.opt[‘btn‘] || "可定制btn按钮文本";
        //输出到bady
        var oldHTML = document.body.innerHTML;    //保存旧的文档
        document.body.innerHTML = oldHTML + modalHtml;//添加插件

        //绑定x点击事件 关闭框
        var that = this;
        var oClose = document.querySelector(".modal .close")
        oClose.addEventListener("click", function () {
            that.hide(this);
        });
        //绑定显示事件
        var open = document.querySelector(".btn[data-toggle=modal]");
        open.onclick = function () {
            var oModal = document.querySelector(".modal");
            oModal.style.display = ‘block‘;
            oModal.classList.add(‘in‘);
            //遮罩层
            var backdrop = document.createElement("div"); //新建一个div
            backdrop.setAttribute(‘class‘, ‘modal-backdrop in‘);    //为div添加类名
            document.body.appendChild(backdrop);
        }
    }

    popModal.prototype.hide = function (obj) {
        var objParents = findNode(obj, "modal"); //当前.close的父辈元素 .modal
        objParents.style.display = ‘none‘;//隐藏模态
        document.body.removeChild(document.querySelector(".modal-backdrop"));
        // document.querySelector(".modal-backdrop").style.display = "none";
    }
    //公共的方法:
    //找到关闭按钮的指定父节点
    function findNode(obj, classname) {
        var aClass;
        var regExp = new RegExp(classname);
        while (obj = obj.parentNode) {
            aClass = Array.prototype.slice.call(obj.classList); //类数组--->数组
            if (aClass.length && regExp.test(aClass[0]) && aClass[0].length == 5) {
                break;
            }
        }
        return obj;
    }
    //把插件存入组件
    module = {
        popAlert: popAlert,
        popModal: popModal
    };

    window.module = module;//把组件暴露到外部

})(window, undefined);

　测试使用模态框：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
    <script src="./js/plugin2.js"></script>
    <script>
        window.onload = function () {
            var oModal = new module.popModal({
                // title: ‘你好‘,
                // content: ‘这是模态框的内容‘,
                // footer:"作者：你好啊",
                // tip:"下面这个按钮点一下",
                // btn:"点我啊"
            });
            oModal.show();
        }
    </script>
</head>

<body>
</body>
</html>

时间： 2024-07-31 14:35:23

前端小白之每天学习记录----js简单的组件封装

前端小白之每天学习记录----js简单的组件封装的相关文章

前端小白之每天学习记录----php（2）数据库操作软件

前端小白之每天学习记录----简单的原生js路由

前端小白之每天学习记录----php（4）ajax

前端小白之每天学习记录----php（6）面向对象

前端小白之每天学习记录----angula2--（1）

前端小白之每天学习记录----php（7）session与cookie

前端学习记录 JS DOM

前端小白该如何学习？以及掌握哪些能力才能从事前端开发工程师

web文件上传一学习记录（简单的web浏览器可读文件的上传，servlet 文件上传）