好，下面我將結(jié)合一些實(shí)例，說一下我對(duì)組合模式以及觀察者模式的了解：
1、組合模式：
組合模式在對(duì)象間形成樹形結(jié)構(gòu);
組合模式中基本對(duì)象和組合對(duì)象被一致對(duì)待;
無須關(guān)心對(duì)象有多少層, 調(diào)用時(shí)只需在根部進(jìn)行調(diào)用;
將多個(gè)對(duì)象的功能，組裝起來，實(shí)現(xiàn)批量執(zhí)行；
想象我們現(xiàn)在手上有個(gè)萬能遙控器, 當(dāng)我們回家, 按一下開關(guān), 下列事情將被執(zhí)行:
到家了，開門
開電腦
開音樂
// 先準(zhǔn)備一些需要批量執(zhí)行的功能
class GoHome{
init(){
console.log("到家了，開門");
}
}
class OpenComputer{
init(){
console.log("開電腦");
}
}
class OpenMusic{
init(){
console.log("開音樂");
}
}
// 組合器，用來組合功能
class Comb{
constructor(){
// 準(zhǔn)備容器，用來防止將來組合起來的功能
this.skills = [];
}
// 用來組合的功能，接收要組合的對(duì)象
add(task){
// 向容器中填入，將來準(zhǔn)備批量使用的對(duì)象
this.skills.push(task);
}
// 用來批量執(zhí)行的功能
action(){
// 拿到容器中所有的對(duì)象，才能批量執(zhí)行
this.skills.forEach( val => {
val.init();
} );
}
}
// 創(chuàng)建一個(gè)組合器
var c = new Comb();
// 提前將，將來要批量操作的對(duì)象，組合起來
c.add( new GoHome() );
c.add( new OpenComputer() );
c.add( new OpenMusic() );
// 等待何時(shí)的時(shí)機(jī)，執(zhí)行組合器的啟動(dòng)功能
c.action();
// 在內(nèi)部，會(huì)自動(dòng)執(zhí)行所有已經(jīng)組合起來的對(duì)象的功能
由此，我們可以總結(jié)一下組合模式的特點(diǎn)：
1.批量執(zhí)行
2.啟動(dòng)一個(gè)方法，會(huì)遍歷多個(gè)方法，同時(shí)執(zhí)行，有點(diǎn)類似于遞歸的感覺
3.組合模式略微耗性能，但是執(zhí)行方便
目前只是一個(gè)基礎(chǔ)組合。
高級(jí)組合：
1.組合成樹狀結(jié)構(gòu)，每個(gè)對(duì)象下，還會(huì)有自己的子對(duì)象
2.如果執(zhí)行了父對(duì)象的某個(gè)方法，所有的子對(duì)象會(huì)跟隨執(zhí)行
3.組合模式一般建議使用在動(dòng)態(tài)的html結(jié)構(gòu)上，因?yàn)榻M合模式的結(jié)構(gòu)和html的結(jié)構(gòu)，出奇的一致
4.基本對(duì)象和組合對(duì)象被一致對(duì)待, 所以要保證基本對(duì)象(葉對(duì)象)和組合對(duì)象具有一致方法
2、觀察者模式：
觀察者模式也叫也叫Observer模式、訂閱/發(fā)布模式，也是由GoF提出的23種軟件設(shè)計(jì)模式的一種。
觀察者模式是行為模式之一，它的作用是當(dāng)一個(gè)對(duì)象的狀態(tài)發(fā)生變化時(shí)，能夠自動(dòng)通知其他關(guān)聯(lián)對(duì)象，自動(dòng)刷新對(duì)象狀態(tài)，或者說執(zhí)行對(duì)應(yīng)對(duì)象的方法（主題數(shù)據(jù)改變，通知其他相關(guān)個(gè)體，做出相應(yīng)的數(shù)據(jù)更新）。
這種設(shè)計(jì)模式可以大大降低程序模塊之間的耦合度，便于更加靈活的擴(kuò)展和維護(hù)。
以觀察的角度，發(fā)現(xiàn)對(duì)應(yīng)的狀況，處理問題。
觀察者模式包含兩種角色：
①觀察者（訂閱者）：會(huì)隨時(shí)更新自身的信息或狀態(tài)（訂閱者可以隨時(shí)加入或離開）；
②被觀察者（發(fā)布者）：接收到發(fā)布者發(fā)布的信息，從而做出對(duì)應(yīng)的改變或執(zhí)行。
很方便的實(shí)現(xiàn)簡(jiǎn)單的廣播通信，實(shí)現(xiàn)一對(duì)多的對(duì)應(yīng)關(guān)系。
核心思想：觀察者只要訂閱了被觀察者的事件，那么當(dāng)被觀察者的狀態(tài)改變時(shí)，被觀察者會(huì)主動(dòng)去通知觀察者，而無需關(guān)心觀察者得到事件后要去做什么，實(shí)際程序中可能是執(zhí)行訂閱者的回調(diào)函數(shù)。
Javascript中實(shí)現(xiàn)一個(gè)例子：
這是HTML學(xué)習(xí)總結(jié)系列的第二篇，第一篇在這里：
HTML 學(xué)習(xí)總結(jié)1入門 基本概念、格式 文字標(biāo)簽 圖片標(biāo)簽 鏈接標(biāo)簽 表格標(biāo)簽 注釋
這次的學(xué)習(xí)內(nèi)容相較第一次分類少，但是比較雜。
框架集標(biāo)簽
框架標(biāo)簽是將網(wǎng)頁(yè)設(shè)置成網(wǎng)頁(yè)框架的一種雙標(biāo)簽，被設(shè)計(jì)成框架的網(wǎng)頁(yè)被切分成若干區(qū)域，沒有實(shí)際的內(nèi)容，只當(dāng)做框架用于鑲嵌其它的網(wǎng)頁(yè)。
那么，這個(gè)標(biāo)簽是：
<frameset></frameset>
框架集標(biāo)簽的屬性
使用的時(shí)候需要將HTML文件中的body標(biāo)簽部分替換為框架標(biāo)簽，寫成這樣：
<html> <head></head> <frameset rows="500,*" border="3" noresize="noresize"> </frame> </html>看上面的代碼，用frameset替換掉body不難理解，畢竟我們約定做框架的網(wǎng)頁(yè)不具有實(shí)體內(nèi)容 接著，這里提到了框架標(biāo)簽的三個(gè)屬性，分別為： rows/cols 框架的分行或分列 border 分隔框的寬度 noresize 大小是否可調(diào) 現(xiàn)在來分別解釋一下 第一個(gè)，rows 或cols 屬性，代表了框架的分行或分列的情況，在引號(hào)內(nèi)書寫該屬性的值的時(shí)候，不需要指明分成幾欄，只需要指明每一欄占據(jù)的寬度或高度（單位為像素）并使用逗號(hào)隔開。瀏覽器在解析的時(shí)候會(huì)計(jì)算到底分成了幾欄。另外，不指定寬度而使其占據(jù)剩余位置時(shí)，可以使用通配符 “ * ”。 第二個(gè)，border 屬性，代表了分隔框的寬度，這是屬性的數(shù)值單位是像素。所以如果你不想加入邊框，則可以將它設(shè)置為零。 第三個(gè)，noresize 屬性，表示我們的框架的大小是否可調(diào)，frameset標(biāo)簽?zāi)J(rèn)為大小可調(diào)，當(dāng)用戶鼠標(biāo)移動(dòng)到邊框上時(shí)，他可以拖拽改變大小。所以如果不想讓用戶隨意改變框架大小，那么可以選擇使用這個(gè)屬性 （當(dāng)然，也可以選擇把邊框的寬度設(shè)為零，讓他找不到）。 這個(gè)屬性的值同屬性名稱一樣。 最后還需要說明的是：框架集標(biāo)簽是可以進(jìn)行嵌套的，也就是說，在已經(jīng)分出來的框架中，我們可以借著分欄。 在框架內(nèi)鑲嵌網(wǎng)頁(yè) 剛剛我們使用 frameset 標(biāo)簽將網(wǎng)頁(yè)變成框架并劃分成了若干區(qū)域，每一個(gè)區(qū)域都是一個(gè)單獨(dú)的可顯示頁(yè)面的子網(wǎng)頁(yè)（筆者起的名）?，F(xiàn)在，我們需要在這些區(qū)域內(nèi)為它鑲嵌上一個(gè)網(wǎng)頁(yè)，這需要用到frame這個(gè)單標(biāo)簽在框架下添加網(wǎng)頁(yè)，它的寫法如下： <frame src="...." name="...." /> 1 這里可以看到 frame 標(biāo)簽的兩個(gè)屬性; src 和 name 。它們分別代表著添置連接（這是一個(gè)超鏈接，網(wǎng)頁(yè)，HTML文件，圖片等都是可以的。有關(guān)超鏈接的信息，可參照上一篇學(xué)習(xí)總結(jié)或者問問度娘 ），以及框架名稱。 框架的命名，很主要的一個(gè)原因在于可以重復(fù)利用一個(gè)框架，即在其他標(biāo)簽使用時(shí)，可以在某個(gè)框架上顯示相應(yīng)內(nèi)容。還記得上一篇中，我們提到的鏈接標(biāo)簽 target 屬性中的 “某框架名稱” 這個(gè)值嗎？在為框架命名后，就可以使用上述的 target 用法，將打開的網(wǎng)頁(yè)放在某個(gè)框架中了。 綜上，舉個(gè)例子： 先來創(chuàng)造一個(gè)帶有嵌套的框架<!--frame--> <html> <head></head> <frameset rows="200,*" border="5" noresize="noresize"> <frame src="title.html" name="title" /> <frameset cols="200,*"> <frame src="selection_bar.html" /> <frame name="output_page" /> </frameset> </frameset> </html><!--title--> <html> <head></head> <body> <font size="7" color="blue"> The test page </font> </body> </html>
<!--selection_bar--> <html> <head></head> <body> <font size="5" color="red"> Please select websites. </font> <br /><br /> <a target="output_page"/>百度一下<br /><br /> <a target="output_page"/>CSDN <br /><br /> </body> </html>
最后來看下結(jié)果：
復(fù)制到瀏覽器即可使用，注意別忘了引入vue哦
<div id="app">
<div>{{pmsg}}</div>
<menu-item :title='ptitle' :content='ptitle'></menu-item>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
//父組件向子組件傳值-基本使用
Vue.component('menu-item', {
props: ['title', 'content'],
data: function() {
return {
msg: '子組件本身的數(shù)據(jù)'
}
},
template: `<div>
<p>{{msg}}</p>
<p>{{title}}</p>
<p>{{content}}</p>
</div>`
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父組件中內(nèi)容',
ptitle: '動(dòng)態(tài)綁定屬性'
}
});
</script>
————————————————
版權(quán)聲明：本文為CSDN博主「溫柔的堅(jiān)持」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43745003/article/details/104908639
前言
在學(xué)習(xí)JS中的原型，原型鏈，繼承這些知識(shí)之前，我們先學(xué)習(xí)下基礎(chǔ)知識(shí)：函數(shù)和對(duì)象的關(guān)系。
我們一直都知道，函數(shù)也是對(duì)象的一種，因?yàn)橥ㄟ^instanceof就可以判斷出來。但是函數(shù)和對(duì)象的關(guān)系并不是簡(jiǎn)單的包含和被包含的關(guān)系，這兩者之間的關(guān)系還是有點(diǎn)復(fù)雜的。接下來我們就來捋一捋。
首先，闡述一點(diǎn)，對(duì)象都是通過函數(shù)創(chuàng)建的
對(duì)于下面這種類型的代碼，一般叫做“語(yǔ)法糖”
var obj = {a:10,b:20};
var arr = [5, 'x', true];
但是，其實(shí)上面這段代碼的實(shí)質(zhì)是下面這樣的：
//var obj = { a: 10, b: 20 };
//var arr = [5, 'x', true];
var obj = new Object();
obj.a = 10;
obj.b = 20;
var arr = new Array();
arr[0] = 5;
arr[1] = 'x';
arr[2] = true;
function Fn() { }
Fn.prototype.name = '張三';
Fn.prototype.getAge = function () {
return 12;
};
var fn = new Fn();
console.log(fn.name);
console.log(fn.getAge ());
即，F(xiàn)n是一個(gè)函數(shù)，fn對(duì)象是從Fn函數(shù)new出來的，這樣fn對(duì)象就可以調(diào)用Fn.prototype中的屬性。
但是，因?yàn)槊總€(gè)對(duì)象都有一個(gè)隱藏的屬性——“proto”，這個(gè)屬性引用了創(chuàng)建這個(gè)對(duì)象的函數(shù)的prototype。即：fn.proto === Fn.prototype
那么，這里的_proto_到底是什么呢？
其實(shí)，這個(gè)__proto__是一個(gè)隱藏的屬性，javascript不希望開發(fā)者用到這個(gè)屬性值，有的低版本瀏覽器甚至不支持這個(gè)屬性值。
var obj = {};
console.log(obj.__proto__);
isPrototypeOf()函數(shù)，用于檢測(cè)兩個(gè)對(duì)象之間似乎否存在原型關(guān)系，使用方法如下：
// 查看 Fn 的 prototype 對(duì)象，是否是 f 原型 Fn.prototype.isPrototypeOf(f);
//// 查看 f 對(duì)象是否是構(gòu)造函數(shù) Fn 的實(shí)例
//console.log(f instanceof Fn);
//// 查看 f 對(duì)象是否是構(gòu)造函數(shù) Fn 的實(shí)例
//console.log(f instanceof Object);
function Fn(){}
function Fun(){}
var f = new Fn();
console.log( f.__proto__ === Fn.prototype ); // t
console.log( Fn.prototype.isPrototypeOf(f) ); // t
console.log( Fun.prototype.isPrototypeOf(f) ); // f
console.log( Object.prototype.isPrototypeOf(f) ); // t
console.log( f instanceof Fn ); // t
console.log( f instanceof Fun ); // f
console.log( f instanceof Object ); // t
//兩種使用，如果是返回ture，如果不是返回false;
//注意：instanceof運(yùn)算符右側(cè)為構(gòu)造函數(shù)，并且js中所有原型都來自O(shè)bject構(gòu)造函數(shù)。
JS解析器訪問屬性順序
當(dāng)訪問實(shí)例 f 的屬性或方法時(shí)，會(huì)先在當(dāng)前實(shí)例對(duì)象 f 中查找，如果沒有，則沿著__proto__繼續(xù)向上尋找，如果找到最頂頭的Object還是找不到，則會(huì)拋出undefined。如果在實(shí)例中找到，或某層原型中找到，就會(huì)讀取并使用，同時(shí)停止向上找尋。
由此可見，解析器的解析順序遵循就近原則，如果在最近的位置發(fā)現(xiàn)屬性存在，便不會(huì)繼續(xù)向上找尋。
原型的應(yīng)用
數(shù)組去重：
Array.prototype.noRepeat = function(){
var m = [];
for(var i=0;i<this.length;i++){
if(m.indexOf(this[i]) == -1){
m.push(this[i]);
}
}
return m;
}
var arr = [3,4,5,6,7,6,5,4,3,2,1];
var res = arr.noRepeat();
console.log(res);
var arr1 = ["a","b","c","b","a"];
var res1 = arr1.noRepeat();
console.log(res1);
function Parent(){
}
Parent.prototype.show = function(){
console.log("哈哈哈");
}
function Child(){
}
for(var i in Parent.prototype){
Child.prototype[i] = Parent.prototype[i];
}
Child.prototype.show = function(){
console.log("hello");
}
var p = new Parent();
p.show();
console.log(p.name);
var c = new Child();
c.show();
console.log(c.name);
var newvue = new Vue()
觸發(fā)事件
newvue.$emit('自定義事件名', 參數(shù))
監(jiān)聽事件
newvue.on('自定義事件名', 觸發(fā)方法名)
銷毀事件
newvue.off('自定義事件名')
案例
放在html頁(yè)面上即可顯示，注意要引入vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>父組件</div>
<div>
<button @click='handle'>銷毀事件</button>
</div>
<test-tom></test-tom>
<test-jerry></test-jerry>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
兄弟組件之間數(shù)據(jù)傳遞
*/
// 提供事件中心
var hub = new Vue();
Vue.component('test-tom', {
data: function(){
return {
num: 0
}
},
template: `
<div>
<div>TOM:{{num}}</div>
<div>
<button @click='handle'>點(diǎn)擊</button>
</div>
</div>
`,
methods: {
handle: function(){
hub.$emit('jerry-event', 2);
}
},
mounted: function() {
// 監(jiān)聽事件
hub.$on('tom-event', (val) => {
this.num += val;
});
}
});
Vue.component('test-jerry', {
data: function(){
return {
num: 0
}
},
template: `
<div>
<div>JERRY:{{num}}</div>
<div>
<button @click='handle'>點(diǎn)擊</button>
</div>
</div>
`,
methods: {
handle: function(){
// 觸發(fā)兄弟組件的事件
hub.$emit('tom-event', 1);
}
},
mounted: function() {
// 監(jiān)聽事件
hub.$on('jerry-event', (val) => {
this.num += val;
});
}
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
handle: function(){
hub.$off('tom-event');
hub.$off('jerry-event');
}
}
});
</script>
</body>
</html>
————————————————
版權(quán)聲明：本文為CSDN博主「溫柔的堅(jiān)持」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43745003/article/details/104919633
這是一個(gè)最基本的左側(cè)菜單欄，實(shí)現(xiàn)的過程很簡(jiǎn)單，官方的說明文檔就有，但是我在導(dǎo)入layer.js之后，直接復(fù)制這段官方代碼到我的編輯器上時(shí)，發(fā)現(xiàn)頁(yè)面是這樣的：
發(fā)現(xiàn)，綁定屬性的菜單并沒有下拉選項(xiàng)，這個(gè)問題在我導(dǎo)入layer.all.js之后解決了，而且發(fā)現(xiàn)如果是在頁(yè)面的最上方導(dǎo)入的話也沒有下拉選項(xiàng)，只有在html代碼下面導(dǎo)入，才可以顯示 ，不知道是什么原因。
頁(yè)面截圖：
tab項(xiàng)右鍵菜單：
這里右鍵菜單的樣式并沒有做太多的美化。
html代碼：（頁(yè)面中關(guān)于引入js和css文件的部分被我省略了，還有要注意jQuery的引入順序）
<div class="layui-tab layui-tab-card site-demo-button" style="position: relative;">
<ul class="layui-nav layui-nav-tree layui-nav-side">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默認(rèn)展開</a>
<dl class="layui-nav-child">
<dd>
<a data-url="a" data-id="11" data-title="選項(xiàng)a" href="#" class="site-demo-active" data-type="tabAdd">選項(xiàng)a</a>
</dd>
<dd>
<a href="#" data-url="b" data-title="選項(xiàng)b" data-id="22" class="site-demo-active" data-type="tabAdd">選項(xiàng)b</a>
</dd>
<dd>
<a href="">跳轉(zhuǎn)</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解決方案</a>
<dl class="layui-nav-child">
<dd>
<a href="">移動(dòng)模塊</a>
</dd>
<dd>
<a href="">后臺(tái)模版</a>
</dd>
<dd>
<a href="">電商平臺(tái)</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="#" data-url="c" data-title="選項(xiàng)c" data-id="33" class="site-demo-active" data-type="tabAdd">產(chǎn)品c</a>
</li>
<li class="layui-nav-item">
<a href="">大數(shù)據(jù)</a>
</li>
</ul>
<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
<ul class="layui-tab-title">
</ul>
<ul class="rightmenu" style="display: none;position: absolute;">
<li data-type="closethis">關(guān)閉當(dāng)前</li>
<li data-type="closeall">關(guān)閉所有</li>
</ul>
<div class="layui-tab-content">
</div>
</div>
</div>
js代碼：
layui.use('element', function() {
var $ = layui.jquery;
var element = layui.element; //Tab的切換功能，切換事件監(jiān)聽等，需要依賴element模塊
//觸發(fā)事件
var active = {
//在這里給active綁定幾項(xiàng)事件，后面可通過active調(diào)用這些事件
tabAdd: function(url,id,name) {
//新增一個(gè)Tab項(xiàng) 傳入三個(gè)參數(shù)，分別對(duì)應(yīng)其標(biāo)題，tab頁(yè)面的地址，還有一個(gè)規(guī)定的id，是標(biāo)簽中data-id的屬性值
//關(guān)于tabAdd的方法所傳入的參數(shù)可看layui的開發(fā)文檔中基礎(chǔ)方法部分
element.tabAdd('demo', {
title: name,
content: '<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="'+url+'.html" style="width:100%;height:99%;"></iframe>',
id: id //規(guī)定好的id
})
CustomRightClick(id); //給tab綁定右擊事件
FrameWH(); //計(jì)算ifram層的大小
},
tabChange: function(id) {
//切換到指定Tab項(xiàng)
element.tabChange('demo', id); //根據(jù)傳入的id傳入到指定的tab項(xiàng)
},
tabDelete: function (id) {
element.tabDelete("demo", id);//刪除
}
, tabDeleteAll: function (ids) {//刪除所有
$.each(ids, function (i,item) {
element.tabDelete("demo", item); //ids是一個(gè)數(shù)組，里面存放了多個(gè)id，調(diào)用tabDelete方法分別刪除
})
}
};
//當(dāng)點(diǎn)擊有site-demo-active屬性的標(biāo)簽時(shí)，即左側(cè)菜單欄中內(nèi)容 ，觸發(fā)點(diǎn)擊事件
$('.site-demo-active').on('click', function() {
var dataid = $(this);
//這時(shí)會(huì)判斷右側(cè).layui-tab-title屬性下的有l(wèi)ay-id屬性的li的數(shù)目，即已經(jīng)打開的tab項(xiàng)數(shù)目
if ($(".layui-tab-title li[lay-id]").length <= 0) {
//如果比零小，則直接打開新的tab項(xiàng)
active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
} else {
//否則判斷該tab項(xiàng)是否以及存在
var isData = false; //初始化一個(gè)標(biāo)志，為false說明未打開該tab項(xiàng) 為true則說明已有
$.each($(".layui-tab-title li[lay-id]"), function () {
//如果點(diǎn)擊左側(cè)菜單欄所傳入的id 在右側(cè)tab項(xiàng)中的lay-id屬性可以找到，則說明該tab項(xiàng)已經(jīng)打開
if ($(this).attr("lay-id") == dataid.attr("data-id")) {
isData = true;
}
})
if (isData == false) {
//標(biāo)志為false 新增一個(gè)tab項(xiàng)
active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"),dataid.attr("data-title"));
}
}
//最后不管是否新增tab，最后都轉(zhuǎn)到要打開的選項(xiàng)頁(yè)面上
active.tabChange(dataid.attr("data-id"));
});
function CustomRightClick(id) {
//取消右鍵 rightmenu屬性開始是隱藏的 ，當(dāng)右擊的時(shí)候顯示，左擊的時(shí)候隱藏
$('.layui-tab-title li').on('contextmenu', function () { return false; })
$('.layui-tab-title,.layui-tab-title li').click(function () {
$('.rightmenu').hide();
});
//桌面點(diǎn)擊右擊
$('.layui-tab-title li').on('contextmenu', function (e) {
var popupmenu = $(".rightmenu");
popupmenu.find("li").attr("data-id",id); //在右鍵菜單中的標(biāo)簽綁定id屬性
//判斷右側(cè)菜單的位置
l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
popupmenu.css({ left: l, top: t }).show(); //進(jìn)行絕對(duì)定位
//alert("右鍵菜單")
return false;
});
}
$(".rightmenu li").click(function () {
//右鍵菜單中的選項(xiàng)被點(diǎn)擊之后，判斷type的類型，決定關(guān)閉所有還是關(guān)閉當(dāng)前。
if ($(this).attr("data-type") == "closethis") {
//如果關(guān)閉當(dāng)前，即根據(jù)顯示右鍵菜單時(shí)所綁定的id，執(zhí)行tabDelete
active.tabDelete($(this).attr("data-id"))
} else if ($(this).attr("data-type") == "closeall") {
var tabtitle = $(".layui-tab-title li");
var ids = new Array();
$.each(tabtitle, function (i) {
ids[i] = $(this).attr("lay-id");
})
//如果關(guān)閉所有 ，即將所有的lay-id放進(jìn)數(shù)組，執(zhí)行tabDeleteAll
active.tabDeleteAll(ids);
}
$('.rightmenu').hide(); //最后再隱藏右鍵菜單
})
function FrameWH() {
var h = $(window).height() -41- 10 - 60 -10-44 -10;
$("iframe").css("height",h+"px");
}
$(window).resize(function () {
FrameWH();
})
});
tab項(xiàng)是放在<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;"> 這個(gè)div中的，其中有一個(gè)重要的屬性lay-filter，在js中調(diào)用的tabAdd，tabDelete等多種方法都攜帶了這個(gè)參數(shù)，我對(duì)此的理解是相當(dāng)于一個(gè)判斷攔截功能，將tab項(xiàng)放在lay-filter=‘demo’的div中?？梢越柚搮?shù)，完成指定元素的局部更新。
其中還有關(guān)于element的操作，var element = layui.element
element模塊的實(shí)例
返回的element變量為該實(shí)例的對(duì)象，攜帶一些用于元素操作的基礎(chǔ)方法，我們就是用這些方法進(jìn)行tab項(xiàng)的新增和刪除還有切換。
這是element 中的tabAdd方法，其中的content可以是一個(gè)iframe頁(yè)面，在此例中，我就是傳遞了一個(gè)簡(jiǎn)單的頁(yè)面，這就實(shí)現(xiàn)了不同頁(yè)面間的一些切換。
element.tabAdd('demo', {
title: '選項(xiàng)卡的標(biāo)題'
,content: '選項(xiàng)卡的內(nèi)容' //支持傳入html
,id: '選項(xiàng)卡標(biāo)題的lay-id屬性值'
});
————————————————
版權(quán)聲明：本文為CSDN博主「nb7474」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/nb7474/article/details/79413460/
要實(shí)現(xiàn)JavaScript的拖拽效果，首先我們需要知道事件對(duì)象幾個(gè)有關(guān)于實(shí)現(xiàn)拖拽效果的坐標(biāo)
獲取事件對(duì)象 var e = e || window.event;
根據(jù)需求需要用到的拖拽效果的坐標(biāo)
clientX:鼠標(biāo)點(diǎn)擊位置相對(duì)于瀏覽器可視區(qū)域的水平偏移量(不會(huì)計(jì)算水平滾動(dòng)的距離)
clientY:鼠標(biāo)點(diǎn)擊位置相對(duì)于瀏覽器可視區(qū)域的垂直偏移量(不會(huì)計(jì)算垂直滾動(dòng)條的距離)
offsetX:鼠標(biāo)點(diǎn)擊位置相對(duì)于觸發(fā)事件對(duì)象的水平距離
offsetY:鼠標(biāo)點(diǎn)擊位置相對(duì)于觸發(fā)事件對(duì)象的垂直距離
pageX:鼠標(biāo)點(diǎn)擊位置相對(duì)于網(wǎng)頁(yè)左上角的水平偏移量,也就是clientX加 上水平滾動(dòng)條的距離
pageY:鼠標(biāo)點(diǎn)擊位置相對(duì)于網(wǎng)頁(yè)左上角的垂直平偏移量,也就是clientY加上垂直滾動(dòng)條的距離
offsetLeft:如果父元素中有定位的元素，那么就返回距離當(dāng)前元素最近的定位元素邊緣的距離
offsetTop:如果父元素中沒有定位元素，那么就返回相對(duì)于body左邊緣距離
獲取元素自身大?。簅ffsetWidth和offsetHeight / clientWidth和clientHeight
offsetWidth和clientWidth的區(qū)別:就是offsetWidth包含邊框,clientWidth不包含邊框
實(shí)現(xiàn)拖拽需要用到：clientWidth、clientHeight、clientX、clientY、offsetLeft、offsetTop
首先搭建好html結(jié)構(gòu)和css樣式
<div class="wrap">
<div class="cover">
</div>
</div>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 500px;
height: 500px;
border: 1px solid deeppink;
position: relative;
margin: 50px auto;
}
.cover {
width: 150px;
height: 150px;
background: rgba(200, 7, 99, 0.5);
display: none;
position: absolute;
left: 0;
top: 0;
cursor: move;
}
注意：需要給大盒子和小盒子進(jìn)行定位：子絕父相
<script>
var wrap = document.querySelector(".wrap");
var cover = document.querySelector(".cover");
wrap.onmouseover = function() {
cover.style.display = "block";
wrap.onmousemove = function(e) {
var e = e || window.event;
var x1 = e.clientX;
var y1 = e.clientY;
//這里獲取到的e.clientX和e.clientY,可以看情況和需求改為e.pageX和e.pageY
var halfWidth = cover.clientWidth / 2;
var halfHeight = cover.clientHeight / 2;
var wrapLeft = wrap.offsetLeft;
var wrapTop = wrap.offsetTop;
var l = x1 - wrapLeft - halfWidth;
var t = y1 - wrapTop - halfHeight;
if (l <= 0) {
l = 0
}
if (l >= wrap.clientWidth - cover.clientWidth) {
l = wrap.clientWidth - cover.clientWidth
}
if (t <= 0) {
t = 0
}
if (t >= wrap.clientHeight - cover.clientHeight) {
t = wrap.clientHeight - cover.clientHeight
}
cover.style.left = l + "px";
cover.style.top = t + "px"
}
}
wrap.onmouseout = function() {
cover.style.display = "none";
}
</script>
var halfWidth = cover.clientWidth / 2;
var halfHeight = cover.clientHeight / 2;
var wrapLeft = wrap.offsetLeft;
var wrapTop = wrap.offsetTop;
var l = x1 - wrapLeft - halfWidth;
var t = y1 - wrapTop - halfHeight;
//限制范圍
if (l <= 0) {
l = 0
}
if (l >= wrap.clientWidth - cover.clientWidth) {
l = wrap.clientWidth - cover.clientWidth
}
if (t <= 0) {
t = 0
}
if (t >= wrap.clientHeight - cover.clientHeight) {
t = wrap.clientHeight - cover.clientHeight
}
注意：這里要限制小盒子在大盒子之間移動(dòng)的范圍，左上角的限制，當(dāng)小盒子超出范圍時(shí)，將0賦值給l和t。右下角小盒子移動(dòng)的范圍在大盒子寬度減去小盒子的寬度。
css面試題@響應(yīng)式布局如何實(shí)現(xiàn)
1為什么要使用響應(yīng)式布局
響應(yīng)式布局可以讓網(wǎng)站同時(shí)適配不同分辨率和不同的手機(jī)端，讓客戶有更好
的體驗(yàn)。
2如何實(shí)現(xiàn)
方案一：百分比布局
利用對(duì)屬性設(shè)置百分比來適配不同屏幕，注意這里的百分比是相對(duì)于父元素； 能夠設(shè)置的屬性有width，、height、padding、margin，其他屬性比如border、 font-size不能用百分比來設(shè)置的
由于沒辦法對(duì)font-size進(jìn)行百分比設(shè)置，所以用的最多就是對(duì)圖片和大塊布局進(jìn)行百分比設(shè)置。
方案二：使用媒體查詢 (CSS3@media 查詢)
利用媒體查詢?cè)O(shè)置不同分辨率下的css樣式，來適配不同屏幕。
媒體查詢相對(duì)于百分比布局，可以對(duì)布局進(jìn)行更細(xì)致的調(diào)整，但需要在每個(gè)分辨率下面都寫一套css樣式。
該布局的話適用于簡(jiǎn)單的網(wǎng)頁(yè)，可以使移動(dòng)端和pc端使用一套網(wǎng)址。從而節(jié)約成本。也方便后期的維護(hù)，bootcss就是用了CSS3的media來實(shí)現(xiàn)響應(yīng)的 但是相對(duì)于復(fù)雜的網(wǎng)頁(yè)就不適合了（如：淘寶，京東）等等
方案三.rem 響應(yīng)式布局
rem布局的原理
rem：相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù)。
如 html的font-size為100px；那么2rem就為200px。
通俗的來講的話rem就是通過JavaScript來獲取頁(yè)面的寬度，從而動(dòng)態(tài)的計(jì)算rem。這樣就會(huì)使不同分辨率下展現(xiàn)出相同的效果。
//代碼展示
css面試題@響應(yīng)式布局如何實(shí)現(xiàn) 1為什么要使用響應(yīng)式布局 響應(yīng)式布局可以讓網(wǎng)站同時(shí)適配不同分辨率和不同的手機(jī)端，讓客戶有更好 的體驗(yàn)。 2如何實(shí)現(xiàn) 方案一：百分比布局 利用對(duì)屬性設(shè)置百分比來適配不同屏幕，注意這里的百分比是相對(duì)于父元素； 能夠設(shè)置的屬性有width，、height、padding、margin，其他屬性比如border、 font-size不能用百分比來設(shè)置的 由于沒辦法對(duì)font-size進(jìn)行百分比設(shè)置，所以用的最多就是對(duì)圖片和大塊布局進(jìn)行百分比設(shè)置。 方案二：使用媒體查詢 (CSS3@media 查詢) 利用媒體查詢?cè)O(shè)置不同分辨率下的css樣式，來適配不同屏幕。 媒體查詢相對(duì)于百分比布局，可以對(duì)布局進(jìn)行更細(xì)致的調(diào)整，但需要在每個(gè)分辨率下面都寫一套css樣式。 該布局的話適用于簡(jiǎn)單的網(wǎng)頁(yè)，可以使移動(dòng)端和pc端使用一套網(wǎng)址。從而節(jié)約成本。也方便后期的維護(hù)，bootcss就是用了CSS3的media來實(shí)現(xiàn)響應(yīng)的 但是相對(duì)于復(fù)雜的網(wǎng)頁(yè)就不適合了（如：淘寶，京東）等等 方案三.rem 響應(yīng)式布局 rem布局的原理 rem：相對(duì)于根元素(即html元素)font-size計(jì)算值的倍數(shù)。 如 html的font-size為100px；那么2rem就為200px。 通俗的來講的話rem就是通過JavaScript來獲取頁(yè)面的寬度，從而動(dòng)態(tài)的計(jì)算rem。這樣就會(huì)使不同分辨率下展現(xiàn)出相同的效果。 //代碼展示上述代碼中 7.5為動(dòng)態(tài)的值，根據(jù)設(shè)計(jì)圖的寬度進(jìn)行動(dòng)態(tài)的改變。window.onresize的作用是：當(dāng)頁(yè)面的寬度或高度發(fā)生改變時(shí)，再次進(jìn)行調(diào)用rem函數(shù)。
如何在網(wǎng)頁(yè)前端里可視化你的知識(shí)圖譜
最近費(fèi)盡千辛萬苦構(gòu)造了一份可以用（大概）的知識(shí)圖譜，并且把要利用知識(shí)圖譜做的領(lǐng)域命名實(shí)體識(shí)別和一些推薦的功能做成Web版的demo，順帶想實(shí)現(xiàn)一些可視化知識(shí)圖譜的功能。
（憑啥知識(shí)圖譜就只能在Neo4j里自嗨，不能來前端show一下，歧視嗎(￢_￢)）
找了做前端圖表展示的開源庫(kù)，D3.js和Echarts都能做，我拿Echarts實(shí)現(xiàn)了一下功能，先看一下在現(xiàn)在項(xiàng)目里一個(gè)基于知識(shí)圖譜查詢的實(shí)際效果：
接下里看看如何的實(shí)現(xiàn)：
<script src="/static/js/echarts.common.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.min.js"></script>
給要展示的圖準(zhǔn)備一個(gè)Dom：
<!-- 為ECharts準(zhǔn)備一個(gè)具備大小的Dom -->
<div class = "col-md-12">
<div class="panel panel-default ">
<header class="panel-heading">
關(guān)系圖 :
</header>
<div class = "panel-body ">
<div id="graph" style="width: 100%;height:600px;"></div>
</div>
</div>
</div>
data = [
{name:'蘋果',category:1,id:0},
{name:'梨子',catagory:1,id:1},
{name:'水果',category:2,id:2}
]
links = [
{source:0,target:2,category:0,value:'屬于',symbolSize:10},
{source:1,target:2,category:0,value:'屬于',symbolSize:10}
]
var myChart = echarts.init(document.getElementById('graph'));
option = {
title: {
text: ''
},
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
label: {
normal: {
show: true,
textStyle: {
fontSize: 12
},
}
},
legend: {
x: "center",
show: false
},
series: [
{
type: 'graph',
layout: 'force',
symbolSize: 45,
focusNodeAdjacency: true,
roam: true,
edgeSymbol: ['none', 'arrow'],
categories: [{
name: '查詢實(shí)體',
itemStyle: {
normal: {
color: "#009800",
}
}
}, {
name: 'instance',
itemStyle: {
normal: {
color: "#4592FF",
}
}
}, {
name: 'class',
itemStyle: {
normal: {
color: "#C71585",
}
}
}],
label: {
normal: {
show: true,
textStyle: {
fontSize: 12,
},
}
},
force: {
repulsion: 1000
},
edgeSymbolSize: [4, 50],
edgeLabel: {
normal: {
show: true,
textStyle: {
fontSize: 10
},
formatter: "{c}"
}
},
data: data,
links: links,
lineStyle: {
normal: {
opacity: 0.9,
width: 1.3,
curveness: 0,
color:"#262626",
}
}
}
]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
這樣就成功實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的圖譜可視化：
————————————————
版權(quán)聲明：本文為CSDN博主「游離態(tài)GLZ不可能是金融技術(shù)宅」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_37477357/article/details/104857495
1.實(shí)現(xiàn)注冊(cè)與登錄功能：
要求用到驗(yàn)證碼，登錄后該出不再顯示登錄與注冊(cè)，而是顯示用戶名。
2.實(shí)現(xiàn)預(yù)約功能：
實(shí)現(xiàn)“運(yùn)動(dòng)”與“學(xué)習(xí)”兩方面的邀約功能，并將邀約數(shù)據(jù)保存到數(shù)據(jù)庫(kù)中，數(shù)據(jù)庫(kù)使用Mysql。
運(yùn)動(dòng)可以邀約：籃球、足球、乒乓球等
學(xué)習(xí)可以邀約：自習(xí)、輔導(dǎo)等
在正式開始編碼之前，需要先導(dǎo)入相關(guān)jar包并配置好相關(guān)的配置文件，同時(shí)也需要導(dǎo)入前端給的頁(yè)面代碼。接著是建立好相應(yīng)的數(shù)據(jù)庫(kù)結(jié)構(gòu)，并初步構(gòu)建好三層架構(gòu)的想法思路。
web層
service層
dao層
然后在這里寫一下對(duì)于驗(yàn)證碼處理和點(diǎn)擊圖片更換驗(yàn)證碼功能的一些細(xì)節(jié)。
如下圖所示，為了保證servlet層能夠正確接收到界面所展示的驗(yàn)證碼信息，同時(shí)因?yàn)閟ession對(duì)象是項(xiàng)目自生成的，所以我直接獲取session對(duì)象并以類似于鍵值對(duì)的形式將頁(yè)面驗(yàn)證碼信息存入session中。
接下來是jsp頁(yè)面對(duì)于驗(yàn)證碼展示的一些處理
在這里，因?yàn)辄c(diǎn)擊驗(yàn)證碼更換操作需要用到j(luò)s，所以我百度得到了上圖這樣一串代碼。其中時(shí)間戳的作用是通過改變每次請(qǐng)求的時(shí)間參數(shù)來獲得刷新效果，即改變url中的響應(yīng)頭信息。
2.注冊(cè)功能
事實(shí)上，有了登錄功能的實(shí)現(xiàn)，注冊(cè)功能的代碼與其都是大同小異的。最大的不同應(yīng)該就是Dao層執(zhí)行的操作不同
預(yù)約功能的實(shí)現(xiàn)更是與注冊(cè)功能的實(shí)現(xiàn)基本一致。所不同的應(yīng)該是jsp頁(yè)面對(duì)單選框輸入的設(shè)置。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com