最近關(guān)于新擬物化 Neumorphism 的風(fēng)太大，簡(jiǎn)直是傳遍大江南北無人不知。對(duì)于它的看法大家也都眾說紛紜，大部分的觀點(diǎn)都集中于：第一看過去非常的高大上，再仔細(xì)琢磨一下就感覺只能是飛機(jī)稿中的戰(zhàn)斗稿。對(duì)此我表示非常的理解，畢竟在國內(nèi)體制下的用戶界面設(shè)計(jì)基本都延續(xù)商業(yè)設(shè)計(jì)的命脈──低效能、不實(shí)用、不能帶來良好轉(zhuǎn)化的東西統(tǒng)統(tǒng)給我丟掉，哪怕是用戶體驗(yàn)也是建立在商業(yè)目標(biāo)驅(qū)動(dòng)下的存在。
盡管觀點(diǎn)如此，我還是想為新擬物化這位誕生在不平凡 2020 年的新生兒稍稍正個(gè)身，它并非空穴來風(fēng)，也并非完全無法落地使用，相反如果合理加以優(yōu)化應(yīng)該能達(dá)到意想不到的雙贏效果。
一切的開始都源于一個(gè)叫 Alexander Plyuto 的設(shè)計(jì)師在各平臺(tái)發(fā)布了一個(gè)他的新作品──「Skeuomorph Mobile Banking（擬物化手機(jī)銀行）」。
在去年末的時(shí)候這名設(shè)計(jì)師還一直沿用 Skeuomorph（擬物化）這個(gè)名詞來命名自己的一系列設(shè)計(jì)作品，直到 HYPE4 的 CEO-Michal Malewicz 寫了一篇關(guān)于此風(fēng)格的文章，并賦予了它一個(gè)新名詞 Neumorphism（New+Skeuomorphism），自此之后大家就都照著這個(gè)新名詞進(jìn)行傳播了。
在詳解新風(fēng)格之前，先讓我們回憶一下這些年移動(dòng)端用戶界面設(shè)計(jì)風(fēng)格的演變歷程。自 2013 年蘋果推出了 iOS7 之后開始刮起的扁平風(fēng)潮，所有走在設(shè)計(jì)前沿的大廠都開始不約而同地對(duì)自己家的 app 進(jìn)行了大刀闊斧的改版。
這扁平風(fēng)一刮就是 7 年，仔細(xì)分析一下就能明白為何 ta 如此長壽：內(nèi)容優(yōu)先的認(rèn)知簡(jiǎn)約，不僅拓展性強(qiáng)且具有能的特性，解放了一大堆「手活」不是那么好的設(shè)計(jì)師，讓他們有更多時(shí)間專注在設(shè)計(jì)解決問題的命題上。
但就算一個(gè)風(fēng)格再適應(yīng)市場(chǎng)的需求，用戶和時(shí)代還是會(huì)對(duì)它逐漸疲憊，審美疲勞和新的市場(chǎng)需求都會(huì)催生新的變革。
1. 新擬物化≠輕擬物
第一次看到這個(gè)風(fēng)格介紹的時(shí)候險(xiǎn)些以為就是曾經(jīng)的輕擬物重返江湖了，但仔細(xì)看看原設(shè)計(jì)師輸出的設(shè)計(jì)原則，發(fā)現(xiàn)確實(shí)是完全不同的 2 種定義。
輕擬物從本質(zhì)上來說是 Y 軸面原質(zhì)化層級(jí)分離的，而新擬物是在 Y 軸面不分離的情況下物理化擬態(tài)。
來看一個(gè)輕擬物與新擬物卡片的比對(duì)：
從上圖可以感受到新擬物在保留輕質(zhì)感的同時(shí)，更貼近事物的物理還原，但真實(shí)感與舒適度帶來的代價(jià)就是它的辨識(shí)度和對(duì)比度明顯較其他風(fēng)格低了很多，這也是它被大家吐槽飛機(jī)稿中的戰(zhàn)斗稿的重要原因之一。
2. 新擬物化控件示例
原設(shè)計(jì)師對(duì)新擬物化的「淺色版」控件規(guī)范如下，基本涵蓋了核心的界面設(shè)計(jì)控件，整體對(duì)于控件的定義就在于良好使用投影和漸變來打造物理化界面肌理。
另外還有可以良好適配當(dāng)前流行黑色模式的「黑色版」。
在了解新擬物化的設(shè)計(jì)語言特點(diǎn)之后，大家應(yīng)該都發(fā)現(xiàn)這種風(fēng)格的設(shè)計(jì)是有一定局限性的，它并不適用于一部分商業(yè)產(chǎn)品，大部分時(shí)候也不適合全局控件應(yīng)用。那么如果我們想要把新擬物化應(yīng)用到我們的落地項(xiàng)目設(shè)計(jì)中，需要注意哪些地方，并進(jìn)行什么樣的改良呢？
1. 深淺模式疊加解決弱可視難題
新擬物的按鈕肌理很多是建立在素色白板上的淺色按鈕，如果繼續(xù)沿用淺色按鈕，且不說色弱用戶的可視問題，普通用戶的操作行為也會(huì)大打折扣，所以這里我們建議將新擬物的深淺模式疊加來使用，如下圖：
2. 局部高光使用解決層級(jí)難辨問題
如果將新擬物化全控制使用，確實(shí)容易造成界面層級(jí)混亂的問題，因?yàn)楫吘顾脑O(shè)計(jì)語言就是 Y 軸面不分離的設(shè)計(jì)定義，但如果我們合理選擇它來作為局部高光，應(yīng)該大部分情況下還是不錯(cuò)的。如下圖，我們僅在銀行卡部分使用新擬物化（深淺雙模式均可用），其他的控件部分保持扁平，使用 2 個(gè)風(fēng)格相融合的方式可以良好保障層級(jí)的劃分：
3. 拿什么解決開發(fā)崩潰的問題？
之前看到很多文章在轉(zhuǎn)發(fā)一個(gè)生成新擬物化 css 代碼的網(wǎng)站：Neumorphism.io，說是用這個(gè)就可以輕松解決開發(fā)的問題。
然而事實(shí)的真相總是令人落淚的，這個(gè)網(wǎng)站提供的 css 代碼只是網(wǎng)頁代碼，移動(dòng)端是完全用不了的。而且就算有對(duì)應(yīng)的 css 代碼，對(duì)于開發(fā)來說也是遠(yuǎn)不夠的，他們還是要寫框架來支持這套 css 代碼，不然是跑不起來的。所以我們要如何解決開發(fā)小哥哥手寫新擬物化設(shè)計(jì)稿崩潰的問題呢？
很簡(jiǎn)單，就是給他們切圖。按鈕的軟點(diǎn)擊切兩張狀態(tài)圖，卡片背景只需要切一張，ppduck 壓縮走一波，對(duì) app 性能的影響基本可以忽略不計(jì)（因?yàn)樯衔奈乙舱f過了這種風(fēng)格不大可能大面積或者全界面應(yīng)用）。
至于新擬物風(fēng)不適用的場(chǎng)景大家應(yīng)該都心知肚明了，信息承載大，層級(jí)關(guān)系復(fù)雜，我就不一一舉例了，基本就涵蓋了大部分現(xiàn)在市面上主流的產(chǎn)品的大部分場(chǎng)景。但即便如此我們還是需要對(duì)新的設(shè)計(jì)保有一絲激情與希望，不要輕易的去否定，畢竟新生事物總是有它的魅力與獨(dú)到之處。
文章來源：優(yōu)設(shè) 作者：Nana的設(shè)計(jì)錦囊
在一個(gè)asp.net 的項(xiàng)目中，前端通過ajax將富文本中的文字內(nèi)容post到服務(wù)端的一個(gè)ashx中，在ashx中嘗試讀取參數(shù)值時(shí)，
結(jié)果報(bào)錯(cuò)：“從客戶端中檢測(cè)到有潛在危險(xiǎn)的 Request.Form 值”
#事故分析
由于在asp.net中，Request提交時(shí)出現(xiàn)有html代碼字符串時(shí)，程序系統(tǒng)會(huì)認(rèn)為其具有潛在危險(xiǎn)的值。會(huì)報(bào)出“從客戶端 中檢測(cè)到有潛在危險(xiǎn)的Request.Form值”這樣的Error。
而富文本中的內(nèi)容是包含html代碼的，所以...
#解決方案：
1、前端對(duì)富文本字符串進(jìn)行encodeURI編碼，服務(wù)端進(jìn)行HttpUtility.UrlDecode解碼操作；
前端代碼：
var str = '<p><span style="color: #00B0F0;"><em><strong>我想留在你的身邊，</strong></em></span><br/></p><p><span style="color: #7030A0;"><strong><span style="text-decoration: underline;">深情款款多么可憐；</span></strong></span></p>';
$(function() {
$.ajax({
type: "post",
url: "TestHandle.ashx",
data: { Title: 'jack', Content: encodeURI(str) },
success: function (data) {
$("#div").html(data);
}
});
});
后端代碼：
public void ProcessRequest(HttpContext context)
{
string str = context.Request["content"];
string content = HttpUtility.UrlDecode(str);
context.Response.ContentType = "text/plain";
context.Response.Write(content);
}
效果圖：
2、前端不以form的方式提交，直接以json方式提交，服務(wù)端從request的body中讀取數(shù)據(jù)，然后反序列化，得到信息；
前端代碼：
var str = '<p><span style="color: #00B0F0;"><em><strong>我想留在你的身邊，</strong></em></span><br/></p><p><span style="color: #7030A0;"><strong><span style="text-decoration: underline;">深情款款多么可憐；</span></strong></span></p>';
var temp = { Title: 'jack', Content: str };
$.ajax({
type: "post",
url: "TestHandle.ashx",
contentType:"application/json;charset=utf-8",
data: JSON.stringify(temp),
success: function (data) {
$("#div").html(data);
}
});
后端代碼：
string bodyText;
using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream))
{
bodyText = bodyReader.ReadToEnd();
}
dynamic bodyObj = JsonConvert.DeserializeObject(bodyText);
context.Response.ContentType = "text/plain";
context.Response.Write(bodyObj.Content);
效果圖：
#其他場(chǎng)景的解決方案：
1、aspx頁面，當(dāng)前頁面進(jìn)行form提交
打開當(dāng)前.aspx頁面，頁頭加上代碼：validateRequest=”false”，如：
<%@ Page Language="C#" ValidateRequest="false" AutoEventWireup="false" CodeFile="default.aspx.cs" Inherits="default" %>
該方法不推薦，還有一種修改web.config配置文件的方法，強(qiáng)烈不推薦，就不寫在這里了；
2、在ASP.NET MVC中的解決方案
1）、針對(duì)某個(gè)實(shí)體類的單個(gè)字段設(shè)置 [AllowHtml] ，這樣提交的時(shí)候，系統(tǒng)就會(huì)放過該字段。
2）、前端代碼：
var str = '<p><span style="color: #00B0F0;"><em><strong>我想留在你的身邊，</strong></em></span><br/></p><p><span style="color: #7030A0;"><strong><span style="text-decoration: underline;">深情款款多么可憐；</span></strong></span></p>';
$(function () {
$.ajax({
type: "post",
url: "Home/Test",
data: { Title: 'jack', Content: str },
success: function (data) {
$("#div").html(data.ok);
}
});
});
3）、后端代碼：
public class NewInfo
{
public string Title { get; set; }
[AllowHtml]
public string Content { get; set; }
}
#寫在最后
該文只是淺顯的總結(jié)一下，其中涉及的xss方面，沒有詳細(xì)考慮，歡迎指正！
前言
開發(fā)中，經(jīng)常會(huì)用到j(luò)s的Array數(shù)組的各種迭代函數(shù)map()，filter()，some()，every()，forEach()，find() findIndex()，也是在ES6中新增一些遍歷函數(shù)。同樣是不是也是一道面試題，說說ES6新增的一些新特性？？？？
?開始正文some()函數(shù)
?一、對(duì)some()函數(shù)的定義：
some()：用于檢測(cè)數(shù)組中的元素是否滿足指定條件（函數(shù)提供）；
some()方法會(huì)依次執(zhí)行數(shù)組中的每一個(gè)元素：
如果有一個(gè)元素滿足條件，則表達(dá)式返回true，剩余的元素不會(huì)再執(zhí)行檢測(cè)。
如果沒有滿足條件的元素，則返回false。
注意：
some()不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。
some() 不會(huì)改變?cè)紨?shù)組。
?二、瀏覽器支持
表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器的版本號(hào)。
?三、語法
array.some(function(currentValue,index,arr),thisValue)
1
參數(shù)說明：
?三、示例
<script>
var ages = [4, 12, 16, 20];
function checkAdult(age) {
return age >= document.getElementById("ageToCheck").value;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.some(checkAdult);
}
</script>
以螞蟻森林和螞蟻莊園為典型代表，而淘寶里的“野生小伙伴”、天貓里的“童話鎮(zhèn)”也是此類題材。這類游戲更多是通過公益捐獻(xiàn)的形式賦予用戶更多的使命感，吸引用戶參與，但是帶來的用戶商業(yè)價(jià)值不高。目前“野生小伙伴”已經(jīng)下架，“童話鎮(zhèn)”在天貓平臺(tái)的露出并不明顯，用戶的感知較弱。
四、總結(jié)
愛玩是人類的天性。因此游戲以及游戲化的產(chǎn)品，天然具有高用戶粘度和用戶活躍度的特質(zhì)。但是市場(chǎng)上有無數(shù)的游戲化產(chǎn)品，為什么有的異?；鸨?，有的無人問津呢？
在產(chǎn)品設(shè)計(jì)時(shí)需要注意以下幾點(diǎn)：
1、游戲化產(chǎn)品之所以受到用戶的喜愛，利益點(diǎn)僅僅是表層驅(qū)動(dòng)，游戲的玩法才是產(chǎn)品真正的核心。因此需要通過建立完善的游戲化體系，提升產(chǎn)品的競(jìng)爭(zhēng)力；
2、游戲化產(chǎn)品競(jìng)爭(zhēng)激烈，需要不斷的進(jìn)行玩法創(chuàng)新，才能帶給用戶差異化體驗(yàn)。例如拼多多系列產(chǎn)品，通過實(shí)物領(lǐng)取和兌換，帶給了用戶全新的體驗(yàn)感受，對(duì)用戶的吸引力也更強(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)行測(cè)試
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”。
對(duì)象：若值為對(duì)象，則顯示為Object。
未定義：若值未定義，也就是僅僅聲明，但未進(jìn)行賦值，則顯示為Undefined。
空值：若值為指向不引用對(duì)象的指針，則顯示為Null，它與Undefined不同，以后慢慢深入了解。
以下表格詳細(xì)寫出了各種情況下相互轉(zhuǎn)換的結(jié)果，可作為輔助記憶。
值 轉(zhuǎn)換為字符串 轉(zhuǎn)換為數(shù)字 轉(zhuǎn)換為布爾值 轉(zhuǎn)換為對(duì)象
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ì)對(duì)數(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ì)對(duì)另一個(gè)轉(zhuǎn)化為數(shù)字進(jìn)行比較；如果前后均為字符串，會(huì)依次比較對(duì)應(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">請(qǐng)輸入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è)類名對(duì)應(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í)添加對(duì)應(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)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_45178648/article/details/104885417
好，下面我將結(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)頁設(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é)果：
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.wnxcall.com
