以螞蟻森林和螞蟻莊園為典型代表，而淘寶里的“野生小伙伴”、天貓里的“童話鎮(zhèn)”也是此類題材。這類游戲更多是通過公益捐獻(xiàn)的形式賦予用戶更多的使命感，吸引用戶參與，但是帶來的用戶商業(yè)價(jià)值不高。目前“野生小伙伴”已經(jīng)下架，“童話鎮(zhèn)”在天貓平臺(tái)的露出并不明顯，用戶的感知較弱。
四、總結(jié)
愛玩是人類的天性。因此游戲以及游戲化的產(chǎn)品，天然具有高用戶粘度和用戶活躍度的特質(zhì)。但是市場上有無數(shù)的游戲化產(chǎn)品，為什么有的異?；鸨?，有的無人問津呢？
在產(chǎn)品設(shè)計(jì)時(shí)需要注意以下幾點(diǎn)：
1、游戲化產(chǎn)品之所以受到用戶的喜愛，利益點(diǎn)僅僅是表層驅(qū)動(dòng)，游戲的玩法才是產(chǎn)品真正的核心。因此需要通過建立完善的游戲化體系，提升產(chǎn)品的競爭力；
2、游戲化產(chǎn)品競爭激烈，需要不斷的進(jìn)行玩法創(chuàng)新，才能帶給用戶差異化體驗(yàn)。例如拼多多系列產(chǎn)品，通過實(shí)物領(lǐng)取和兌換，帶給了用戶全新的體驗(yàn)感受，對用戶的吸引力也更強(qiáng)；
3、游戲化產(chǎn)品需要賦能商業(yè)目標(biāo)，在實(shí)現(xiàn)了用戶活躍的基礎(chǔ)上，還需要提升用戶轉(zhuǎn)化；
作者：子牧先生
轉(zhuǎn)自 ：子牧設(shè)計(jì)筆談
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行變色</title>
</head>
<body>
<table id="mytable" align="center" width="80%" border="1">
<tr bgcolor="#cccccc">
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
</table>
<script type="text/javascript">
window.onload=function(){
//獲取mytable中標(biāo)簽名為tr的字節(jié)點(diǎn)
mytable=document.getElementById("mytable");
trs=mytable.getElementsByTagName("tr");
len=trs.length;
flag=true;
for(i=0;i<len;i++){
if(flag){
//每隔一行設(shè)置背景色
var tr=document.getElementsByTagName("tr")[i].setAttribute("bgcolor","#cccccc");
flag=false;
}else{
flag=true;
}
}
}
</script>
</body>
</html>
/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
//以下進(jìn)行測試
if (Sys.ie) document.write('IE: ' + Sys.ie);
if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
if (Sys.opera) document.write('Opera: ' + Sys.opera);
if (Sys.safari) document.write('Safari: ' + Sys.safari);
</script>
PC端只有Chrome有Safari字段嗎？為什么不需要判斷其他瀏覽器？
其實(shí)360，QQ等瀏覽器的userAgent字段也會(huì)帶有Safari字段，但是由于他們基于Chrome二次開發(fā)的，所有也會(huì)攜帶有Chrome字段。
所以「匹配規(guī)則：擁有Safari字段，并且沒有Chrome字段」就可以了。
接下來是修改元素樣式
<html>
<head>
<style>
#a{
width:700px;
height:300px;
font-size:50px;
color:red;
background-color:grey;
z-index:2;
position:absolute;
top:1300px;
left:200px;
display:none;
}
</style>
</head>
<body>
<div id="a"></div>
</body>
<script type="text/javascript">
//假設(shè)想修改display為block
function modify(){
//1.原生Js法
var a= document.getElementById("a");
a.style.display="block";
//2.用JQuery的css方法
var a =$("#a");
a.css("display","block");
//3.用JQuery的attr方法
var a =$("#a");
a.attr("style","display:block");
}
</script>
</html>
這樣就可以根據(jù)不同瀏覽器寫出不同的樣式適配啦
JS中數(shù)據(jù)類型轉(zhuǎn)換
目前為止，我了解到的JavaScript中共有6種類型。通過typeof關(guān)鍵字可以查看類型名稱。
數(shù)據(jù)的類型：
字符串：若值為字符串，則顯示為String。字符串使用單引號(hào)或雙引號(hào)括起來。在控制臺(tái)顯示為黑色。
數(shù)字：若值為數(shù)字，則顯示為Number。在控制臺(tái)顯示為藍(lán)色。
布爾值：若值為布爾值，則顯示為Boolean。它的值只有”true”和”false”。
對象：若值為對象，則顯示為Object。
未定義：若值未定義，也就是僅僅聲明，但未進(jìn)行賦值，則顯示為Undefined。
空值：若值為指向不引用對象的指針，則顯示為Null，它與Undefined不同，以后慢慢深入了解。
以下表格詳細(xì)寫出了各種情況下相互轉(zhuǎn)換的結(jié)果，可作為輔助記憶。
值 轉(zhuǎn)換為字符串 轉(zhuǎn)換為數(shù)字 轉(zhuǎn)換為布爾值 轉(zhuǎn)換為對象
undefined “undefined” NaN false throw TypeError
null “null” 0 false throw TypeError
true “true” 1 new Boolean(“true”)
false “false” 0 new Boolean(“false”)
“” 0 false new String("")
“1.2” 1.2 true new String(“1.2”)
“1.2a” NaN true new String(“1.2a”)
“aaa” NaN true new String(“aaa”)
0 “0” false new Number(0)
1 “1” true new Number(1)
NaN “NaN” false new Number(NaN)
Infinity “Infinity” true new Number(Infinity)
[] “” 0 true
[9] “9” 9 true
[“a”“b”] “a,b” NaN true
在Js中，數(shù)據(jù)類型可以相互轉(zhuǎn)換，轉(zhuǎn)換的方式有兩種，隱式轉(zhuǎn)換和強(qiáng)制轉(zhuǎn)換，首先來說一些隱式轉(zhuǎn)換。在進(jìn)行代碼書寫時(shí)，要經(jīng)常提醒自己所使用的元素是什么數(shù)據(jù)類型，在進(jìn)行某些操作后是否會(huì)導(dǎo)致數(shù)據(jù)類型的變化，原因就是Js會(huì)對數(shù)據(jù)進(jìn)行類型的隱式轉(zhuǎn)換。
隱式轉(zhuǎn)換舉例：
（+）加法運(yùn)算的隱式轉(zhuǎn)換：加號(hào)兩邊只要出先了字符串，就自動(dòng)將兩者均轉(zhuǎn)化為字符串，使兩個(gè)字符串發(fā)生“拼接”，最后生成的結(jié)果也是一個(gè)字符串；如果前后都不是字符串，則轉(zhuǎn)化為數(shù)字類型進(jìn)行計(jì)算。
（-、*、/、%）其他算數(shù)運(yùn)算的隱式轉(zhuǎn)換：前后都轉(zhuǎn)化為數(shù)字類型進(jìn)行計(jì)算。
（?。┻壿嫹堑碾[式轉(zhuǎn)換：他會(huì)將他后面的變量或表達(dá)式轉(zhuǎn)換為布爾值。
（<，>）比較運(yùn)算符的轉(zhuǎn)換：如果前后存在一個(gè)數(shù)字，會(huì)對另一個(gè)轉(zhuǎn)化為數(shù)字進(jìn)行比較；如果前后均為字符串，會(huì)依次比較對應(yīng)字符的編碼大小，老大比老大，老二比老二，依次進(jìn)行。
（&&，||）邏輯運(yùn)算符的轉(zhuǎn)換：先將前后都轉(zhuǎn)化為布爾值再進(jìn)行判斷，要記住的是，只有undefined,null,0,””,NaN會(huì)轉(zhuǎn)化成為false，其他都是true。
（== 、===）這里作為補(bǔ)充說明，null與Undefined相等但不全等，NaN與任何都不相等。
強(qiáng)制轉(zhuǎn)換的方式：
1.轉(zhuǎn)化為字符串
String（里面寫待轉(zhuǎn)化的內(nèi)容）：沒什么好解釋的，就是強(qiáng)制將你所看到的轉(zhuǎn)化為你所看到的。
toString（里面寫目標(biāo)數(shù)字是幾進(jìn)制），寫法為：待轉(zhuǎn)化內(nèi)容.toString（目標(biāo)內(nèi)容是幾進(jìn)制）。括號(hào)內(nèi)不寫時(shí)默認(rèn)為10。
toFixed（保留小數(shù)的位數(shù)），寫法為待轉(zhuǎn)化內(nèi)容.toFixed（保留小數(shù)的位數(shù)），存在精度誤差。
2.轉(zhuǎn)化為數(shù)字
Number（），只有所轉(zhuǎn)化內(nèi)容在肉眼看到的全是數(shù)字，才會(huì)正常轉(zhuǎn)化；false會(huì)轉(zhuǎn)化為0，true會(huì)轉(zhuǎn)化為1；null會(huì)轉(zhuǎn)化為0；undefined會(huì)轉(zhuǎn)化為NaN；其他情況均為NaN。
parseInt（待轉(zhuǎn)化內(nèi)容，待轉(zhuǎn)化內(nèi)容的進(jìn)制方式），與toString互為逆運(yùn)算，不寫的話默認(rèn)為10。如果待轉(zhuǎn)化內(nèi)容為字符串，若以數(shù)字開頭，可以從開始轉(zhuǎn)換到字符前為止變成數(shù)值。布爾值，undefined，null經(jīng)過轉(zhuǎn)化均為NaN。
ParseFloat（），與上面一致，不贅述。
3.轉(zhuǎn)化為布爾值
書寫方式為Boolean（），如果上面的隱式轉(zhuǎn)換你有好好看，這里很得不需要再寫了。
密碼強(qiáng)度驗(yàn)證
需求
首先我們需要知道需求是什么？ 這很重要！
要知道 我們寫的一切邏輯都是建立在需求之上
當(dāng)輸入框聚焦時(shí)提示密碼要求
當(dāng)密碼符合要求時(shí) 隱藏提示 并給予反饋
密碼等級(jí)低時(shí) 提示密碼等級(jí)為低
密碼等級(jí)一般時(shí) 提示密碼等級(jí)為中
密碼等級(jí)高時(shí) 提示密碼等級(jí)為高
當(dāng)密碼不符合要求時(shí) 重新打開提示
思考如何構(gòu)建函數(shù)
通過上面的需求 你能想到的函數(shù)時(shí)什么？你能想到的邏輯又是什么？
首先 提示的顯示隱藏我們可以用事件綁定或者事件監(jiān)聽來做
其次 我們需要利用正則來判斷密碼等級(jí)
當(dāng)密碼等級(jí)為低時(shí) 顯示紅色
當(dāng)密碼等級(jí)為中時(shí) 顯示黃色
當(dāng)密碼等級(jí)為高時(shí) 顯示綠色
最后 根據(jù)密碼等級(jí)來渲染頁面 也就是反饋給用戶的樣式
建議 :
在這里 盡量把每個(gè)函數(shù)的功能區(qū)分好 構(gòu)思好
不僅要讓自己能看懂 還要讓別人能看懂
這樣的代碼才是好的代碼 可讀性更好 可維護(hù)性更高
在提示盒子的內(nèi)部寫3個(gè)div 不同等級(jí)給予不同顏色不同數(shù)量的提示
密碼 : <input type="text" id="ipt">
<p id="p">請輸入6-20位的帶有數(shù)字字母或者特殊符號(hào)的密碼</p>
<div class="box">
<span></span>
<div></div>
<div></div>
<div></div>
</div>
不管樣式行為再怎么花里胡哨 也一定要先把結(jié)構(gòu)里要出現(xiàn)的元素寫出來
由于考慮到等級(jí)分為三種 所以給提示盒子分3中不同的class類名
每一個(gè)類名對應(yīng)的子元素的樣式也不同
到j(luò)s部分我們只需要操作class類名就可以了
<style>
*{
margin : 0 ;
padding : 0 ;
}
//提示盒子
.box{
position : absolute;
top : 2px;
left : 200px;
}
.box div,
.box span{
margin-right : 5px;
width : 20px;
height : 20px;
float : left;
}
//低等級(jí)
.box.low :nth-child(2){
background : red;
}
//中等級(jí)
.box.middle div{
background : yellow;
}
.box.middle :last-child{
background: #fff;
}
//高等級(jí)
.box.high div{
background : green;
}
//提示文字默認(rèn)隱藏
p{
display : none;
}
</style>
<script>
//獲取需要操作的元素
let ipt = document.getElementById('ipt');
let p = document.getElementById('p');
let div = document.getElementsByClassName('box')[0];
var tip = false; //聚焦顯示提示的開關(guān)
//添加聚焦事件
ipt.addEventListener('focus' , () => {
//由于存在用戶輸入正確的密碼失焦再操作的可能 所以需要驗(yàn)證開關(guān)
if(!tip) {
p.style.display = 'block';
}
//默認(rèn)選中文字 提升用戶體驗(yàn)
ipt.select();
})
//添加輸入時(shí)的事件
ipt.addEventListener('input' , () => {
//拿到用戶輸入的密碼字符串
let str = ipt.value;
//當(dāng)密碼不符合要求時(shí) 要及時(shí)給予反饋 及時(shí)清除樣式
if(str.length < 6 ||str.length > 20 || /[^(\da-zA-Z\_\#\@\$\^\%\*\&\!\~\+\-)]/.test(str) || str === "") {
p.style.display = 'block';
removeClass(div);
div.children[0].innerHTML = "";
tip = true;
//如果不符合要求 就沒必要判斷等級(jí)了 直接結(jié)束判斷
return false;
}else{
p.style.display = 'none';
}
//判斷密碼等級(jí)
let res = level(str);
//根據(jù)等級(jí)添加樣式
randerLevel(res);
})
//判斷密碼等級(jí)函數(shù)
function level (str) {
let level = 0;
//當(dāng)用戶輸入的字符串符合一定規(guī)則 讓等級(jí)+1
if(/\d+/.test(str)) {
level ++;
}
if(/[a-zA-Z]+/.test(str)) {
level ++;
}
if(/[\_\#\@\$\^\%\*\&\!\~\+\-]+/.test(str)) {
level ++;
}
return level;
}
//添加樣式函數(shù)
function randerLevel (level) {
//在添加樣式前先清空樣式
removeClass(div);
div.children[0].innerHTML = "";
//根據(jù)等級(jí)添加對應(yīng)的類名
switch (level) {
case 1 :
div.children[0].innerHTML = '低';
//元素存在不止一個(gè)類名 用 += 更好
div.className += ' low';
break;
case 2 :
div.children[0].innerHTML = '中';
div.className += ' middle';
break;
case 3 :
div.children[0].innerHTML = '高';
div.className += ' high';
break;
}
}
//去等級(jí)類名函數(shù)
function removeClass(ele){
let reg = /low|middle|high/g;
if(reg.test(ele.className)) {
//不要忘記把值賦回去 replace返回的是新字符串
ele.className = ele.className.replace(reg , "");
}
}
</script>
當(dāng)密碼等級(jí)為低時(shí) 給予紅色反饋
————————————————
版權(quán)聲明：本文為CSDN博主「豆?jié){不好喝」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_45178648/article/details/104885417
好，下面我將結(jié)合一些實(shí)例，說一下我對組合模式以及觀察者模式的了解：
1、組合模式：
組合模式在對象間形成樹形結(jié)構(gòu);
組合模式中基本對象和組合對象被一致對待;
無須關(guān)心對象有多少層, 調(diào)用時(shí)只需在根部進(jìn)行調(diào)用;
將多個(gè)對象的功能，組裝起來，實(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 = [];
}
// 用來組合的功能，接收要組合的對象
add(task){
// 向容器中填入，將來準(zhǔn)備批量使用的對象
this.skills.push(task);
}
// 用來批量執(zhí)行的功能
action(){
// 拿到容器中所有的對象，才能批量執(zhí)行
this.skills.forEach( val => {
val.init();
} );
}
}
// 創(chuàng)建一個(gè)組合器
var c = new Comb();
// 提前將，將來要批量操作的對象，組合起來
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)組合起來的對象的功能
由此，我們可以總結(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è)對象下，還會(huì)有自己的子對象
2.如果執(zhí)行了父對象的某個(gè)方法，所有的子對象會(huì)跟隨執(zhí)行
3.組合模式一般建議使用在動(dòng)態(tài)的html結(jié)構(gòu)上，因?yàn)榻M合模式的結(jié)構(gòu)和html的結(jié)構(gòu)，出奇的一致
4.基本對象和組合對象被一致對待, 所以要保證基本對象(葉對象)和組合對象具有一致方法
2、觀察者模式：
觀察者模式也叫也叫Observer模式、訂閱/發(fā)布模式，也是由GoF提出的23種軟件設(shè)計(jì)模式的一種。
觀察者模式是行為模式之一，它的作用是當(dāng)一個(gè)對象的狀態(tài)發(fā)生變化時(shí)，能夠自動(dòng)通知其他關(guān)聯(lián)對象，自動(dòng)刷新對象狀態(tài)，或者說執(zhí)行對應(yīng)對象的方法（主題數(shù)據(jù)改變，通知其他相關(guān)個(gè)體，做出相應(yīng)的數(shù)據(jù)更新）。
這種設(shè)計(jì)模式可以大大降低程序模塊之間的耦合度，便于更加靈活的擴(kuò)展和維護(hù)。
以觀察的角度，發(fā)現(xiàn)對應(yīng)的狀況，處理問題。
觀察者模式包含兩種角色：
①觀察者（訂閱者）：會(huì)隨時(shí)更新自身的信息或狀態(tài)（訂閱者可以隨時(shí)加入或離開）；
②被觀察者（發(fā)布者）：接收到發(fā)布者發(fā)布的信息，從而做出對應(yīng)的改變或執(zhí)行。
很方便的實(shí)現(xiàn)簡單的廣播通信，實(shí)現(xiàn)一對多的對應(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)頁設(shè)置成網(wǎng)頁框架的一種雙標(biāo)簽，被設(shè)計(jì)成框架的網(wǎng)頁被切分成若干區(qū)域，沒有實(shí)際的內(nèi)容，只當(dāng)做框架用于鑲嵌其它的網(wǎng)頁。
那么，這個(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)頁不具有實(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)頁 剛剛我們使用 frameset 標(biāo)簽將網(wǎng)頁變成框架并劃分成了若干區(qū)域，每一個(gè)區(qū)域都是一個(gè)單獨(dú)的可顯示頁面的子網(wǎng)頁（筆者起的名）?，F(xiàn)在，我們需要在這些區(qū)域內(nèi)為它鑲嵌上一個(gè)網(wǎng)頁，這需要用到frame這個(gè)單標(biāo)簽在框架下添加網(wǎng)頁，它的寫法如下： <frame src="...." name="...." /> 1 這里可以看到 frame 標(biāo)簽的兩個(gè)屬性; src 和 name 。它們分別代表著添置連接（這是一個(gè)超鏈接，網(wǎng)頁，HTML文件，圖片等都是可以的。有關(guān)超鏈接的信息，可參照上一篇學(xué)習(xí)總結(jié)或者問問度娘 ），以及框架名稱。 框架的命名，很主要的一個(gè)原因在于可以重復(fù)利用一個(gè)框架，即在其他標(biāo)簽使用時(shí)，可以在某個(gè)框架上顯示相應(yīng)內(nèi)容。還記得上一篇中，我們提到的鏈接標(biāo)簽 target 屬性中的 “某框架名稱” 這個(gè)值嗎？在為框架命名后，就可以使用上述的 target 用法，將打開的網(wǎng)頁放在某個(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)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43745003/article/details/104908639
前言
在學(xué)習(xí)JS中的原型，原型鏈，繼承這些知識(shí)之前，我們先學(xué)習(xí)下基礎(chǔ)知識(shí)：函數(shù)和對象的關(guān)系。
我們一直都知道，函數(shù)也是對象的一種，因?yàn)橥ㄟ^instanceof就可以判斷出來。但是函數(shù)和對象的關(guān)系并不是簡單的包含和被包含的關(guān)系，這兩者之間的關(guān)系還是有點(diǎn)復(fù)雜的。接下來我們就來捋一捋。
首先，闡述一點(diǎn)，對象都是通過函數(shù)創(chuàng)建的
對于下面這種類型的代碼，一般叫做“語法糖”
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對象是從Fn函數(shù)new出來的，這樣fn對象就可以調(diào)用Fn.prototype中的屬性。
但是，因?yàn)槊總€(gè)對象都有一個(gè)隱藏的屬性——“proto”，這個(gè)屬性引用了創(chuàng)建這個(gè)對象的函數(shù)的prototype。即：fn.proto === Fn.prototype
那么，這里的_proto_到底是什么呢？
其實(shí)，這個(gè)__proto__是一個(gè)隱藏的屬性，javascript不希望開發(fā)者用到這個(gè)屬性值，有的低版本瀏覽器甚至不支持這個(gè)屬性值。
var obj = {};
console.log(obj.__proto__);
isPrototypeOf()函數(shù)，用于檢測兩個(gè)對象之間似乎否存在原型關(guān)系，使用方法如下：
// 查看 Fn 的 prototype 對象，是否是 f 原型 Fn.prototype.isPrototypeOf(f);
//// 查看 f 對象是否是構(gòu)造函數(shù) Fn 的實(shí)例
//console.log(f instanceof Fn);
//// 查看 f 對象是否是構(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í)例對象 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頁面上即可顯示，注意要引入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)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43745003/article/details/104919633
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.yvirxh.cn