前端小白之每天学习记录----js简单的组件封装
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端小白之每天学习记录----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>
以上是关于前端小白之每天学习记录----js简单的组件封装的主要内容，如果未能解决你的问题，请参考以下文章