整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
什么是單例呢？
單，就是一個的意思。例：就是實(shí)例化出來的對象，那合在一起就是保證一個構(gòu)造函數(shù)只能new出一個實(shí)例，為什么要學(xué)習(xí)單例模式呢？或者說單例模式有哪些常見的應(yīng)用場景.它的使用還是很廣泛，比如：彈出一個模態(tài)框，一般來說在網(wǎng)站中彈出的模態(tài)框，不停的一直點(diǎn)擊，一般只能創(chuàng)建一個。還有后臺的數(shù)據(jù)庫連接，一般都是保證一個連接等等。今天的主題就是單例在模態(tài)框中的應(yīng)用，我們先要搞清楚，怎么弄個單例出來。
我們先看下普通的構(gòu)造函數(shù)加原型方式。下面這種是常見的方式
每次new都會在內(nèi)存中生成一塊新的內(nèi)存區(qū)域保存新的實(shí)例，所以這種方式就不能保證只能new出一個單例，所以，我們想要創(chuàng)建一個單例，就要能夠控制new創(chuàng)建實(shí)例的過程！?。?，這就是單例的關(guān)鍵，那么要控制這個過程，肯定不能讓用戶直接調(diào)用構(gòu)造函數(shù)，所以我們要另外想辦法.
第一種辦法： 在函數(shù)中添加一個靜態(tài)方法，來控制創(chuàng)建實(shí)例的過程
第8行判斷ins這個變量是否保存了一個實(shí)例，如果沒有就new一個，否則直接返回。第二次在調(diào)用的時候，由于已經(jīng)存在了ins，所以直接返回，就不需要在new了，這要就能確保是單例
第二種辦法：利用閉包和立即表達(dá)式的特性
這兩種方法都可以，接下來，我就選擇第二種方法來實(shí)現(xiàn)彈出單一的模態(tài)框
樣式：
html:
js部分：
html:
在Module.one中通過變量isExist的兩種狀態(tài)和閉包特性控制元素只能被添加一次
出處:http://www.cnblogs.com/ghostwu
bootstrap框架中，使用模態(tài)框（modal）的彈窗組件需要三層 div 容器元素，分別為：
1. 外層：modal（模態(tài)聲明層）。
2. 中間層：dialog（窗口聲明層）。
3. 內(nèi)層：content（內(nèi)容層）。在內(nèi)容層里面，還包含三層，分別為 header(頭部)、body(主體)、footer(注腳)。
案例效果如下：
說明：案例中設(shè)置按鈕的數(shù)據(jù)切換方式（data-toggle）是modal，數(shù)據(jù)目標(biāo)（data-target）指向模態(tài)框的id（mod1）。
網(wǎng)頁文件modal.html的代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>模態(tài)框插件</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body{
font-size:14px;
}
</style>
</head>
<body>
<!--tabindex="-1"表示關(guān)閉焦點(diǎn)，使得按esc鍵也可以關(guān)閉打開的對話框 -->
<div class="modal fade" id="mod1" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">用戶登陸</h4>
</div>
<div class="modal-body">
<div class="input-group">
<span class="input-group-addon">用戶名：</span>
<input type="text" class="form-control" placeholder="請輸入用戶名">
</div>
<p></p>
<div class="input-group">
<span class="input-group-addon">密 碼：</span>
<input type="password" class="form-control" placeholder="請輸入密碼">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default">注冊</button>
<button class="btn btn-primary">登陸</button>
</div>
</div>
</div>
</div>
<hr>
<button class="btn btn-primary" data-toggle="modal" data-target="#mod1">用戶登陸</button>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
至此，案例制作完成。
flex 模態(tài)框彈窗浮動垂直水平居中
- position:fixed 定位
- 元素的位置相對于瀏覽器窗口是固定位置。
- 即使窗口是滾動的它也不會移動;
HTML 代碼實(shí)例
```
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
