前端小白之每天學習記錄----js簡單的組件封裝
阿新 • • 發佈：2017-08-17
學習 styles this src 元素 modal info clas mov
設計模式：是解決問題的模板
關於設計模式，可以閱讀湯姆大叔的博文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 );
組件：許多插件組合在一起
想要封裝組件，首先要先搭建插件
比如現在我們要搭建一個警告框插件
<!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簡單的組件封裝