1.復(fù)制代碼到Dreamweaver或HBuilder或vscode中
2.點(diǎn)擊運(yùn)行---運(yùn)行到瀏覽器---選擇你要打開的瀏覽器
3.打開后會出現(xiàn)這個界面，前四個是固定音樂，最后一個是自主選擇的音樂，你可以選擇你電腦上的歌曲，什么歌曲都行（第一次打開可能會有點(diǎn)慢，稍等片刻即可，選擇音樂的時候點(diǎn)一下沒反應(yīng)的話多點(diǎn)幾下即可，第一次打開這屬于正?，F(xiàn)象）
4.特別提醒：打開的時候電腦一定要處于聯(lián)網(wǎng)狀態(tài)
在當(dāng)今互聯(lián)網(wǎng)時代，實(shí)時通信已成為很多應(yīng)用的需求。為了滿足這種需求，WebSocket協(xié)議被設(shè)計(jì)出來。WebSocket是一種基于TCP議的全雙工通信協(xié)議，通過WebSocket，Web應(yīng)用程序可以與服務(wù)器建立持久的連接，實(shí)現(xiàn)實(shí)時雙向數(shù)據(jù)輸，提供極低的延遲和高效的數(shù)據(jù)傳輸。
在理解WebSocket原理之前，我們需要了解HTTP請求-響應(yīng)協(xié)議。HTTP是一種無狀態(tài)的請求-響應(yīng)協(xié)議，客戶端通過發(fā)送HTTP請求到服務(wù)器，服務(wù)器接收并處理請求，并返回HTTP響應(yīng)給客戶端。但是，在傳統(tǒng)的HTTP協(xié)議中，客戶端只能發(fā)送請求，而服務(wù)器只能通過響應(yīng)來處理客戶端的請求。
WebSocket協(xié)議是在HTTP協(xié)議的基礎(chǔ)上進(jìn)行擴(kuò)展的。在建立WebSocket連接時，客戶端首先發(fā)送一個HTTP請求到服務(wù)器，并將Upgrade頭部字段設(shè)置為"websocket"，表示希望升級到WebSocket協(xié)議。服務(wù)器接收到這個請求后，如果支持WebSocket協(xié)議，會返回一個狀態(tài)碼101 Switching Protocols的HTTP響應(yīng)，并通過Upgrade頭部字段將連接升級為WebSocket連接。
升級完成后，客戶端和服務(wù)器之間的通信不再遵循HTTP請求-響應(yīng)模式，而是通過WebSocket協(xié)議進(jìn)行雙向的實(shí)時通信。客戶端和服務(wù)器可以直接發(fā)送消息給對方，不需要等待對方的請求。
要建立WebSocket連接，需要在客戶端和服務(wù)器之間進(jìn)行系列的握手操作。下面是詳細(xì)的代碼教程，示了如何在Web應(yīng)用程序中建立WebSocket連接。
在戶端（JavaScript）：
// 創(chuàng)建WebSocket對象并指定服務(wù)器地址
var socket = new WebSocket("ws://example.com/socket");
// 監(jiān)聽連接建立事件
socket.onopen = function() {
console.log("WebSocket連接已建立");
// 在連接建立后，可以發(fā)送消息到服務(wù)器
socket.send("Hello Server!");
};
// 監(jiān)聽接收到服務(wù)器發(fā)送的消息
socket.onmessage = function(event) {
var message = event.data;
console.log("接收到服務(wù)器發(fā)送的消息：" + message);
};
// 監(jiān)聽連接關(guān)閉事件
socket.onclose = function(event) {
console.log("WebSocket連接已關(guān)閉");
};
// 監(jiān)聽連接錯誤事件
socket.onerror = function(event) {
console.error("WebSocket連接錯誤：" + event};
在服務(wù)器端（示例使用Node.js）：
const WebSocket = require("ws");
// 創(chuàng)建WebSocket服務(wù)器
const wss = new WebSocket.Server({ port: 8080 });
// 監(jiān)聽連接建立事件
wss.on("connection", function(socket) {
console.log("WebSocket連接已建立");
// 監(jiān)聽接收到客戶端發(fā)送的消息
socket.on("message", function(message) {
console.log("接收到戶端發(fā)送的消息：" + message);
<span class="token comment">// 向客戶端發(fā)送消息</span>
socket<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">"Hello Client!"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
});
// 監(jiān)聽連接關(guān)閉事件
socket.on("close", function() {
console.log("WebSocket連接已關(guān)閉");
});
});
在以上代碼中，客戶端通過創(chuàng)建WebSocket對象，并指定服務(wù)器地址"ws://example.com/socket"來建立WebSocket連接。同時，客戶端通過監(jiān)聽onopen事件，可以在連接建立后發(fā)送消息到服務(wù)器。服務(wù)器端使用WebSocket.Server類創(chuàng)建WebSocket服務(wù)器，并監(jiān)聽"connection事件來處理連接建立后的操作。服務(wù)器端通過socket.on(“message”)來監(jiān)聽接收到客戶端發(fā)送的消息，并通過socket.send()向客戶端發(fā)送消息。
建立WebSocket連接后，客戶端和服務(wù)器可以通過WebSocket對象進(jìn)行雙向的實(shí)時數(shù)據(jù)傳輸。下面是一個示例代碼，演示了如何在客戶端和服務(wù)器之間進(jìn)行數(shù)據(jù)傳輸。
在客戶端（JavaScript）：
// 發(fā)送消息到服務(wù)器
socket.send("Hello Server!");
// 監(jiān)聽接收到服務(wù)器發(fā)送的消息
socket.onmessage = function(event) {
var message = event.data;
console.log("接收到服務(wù)器發(fā)送的消息：" + message);
};
在服務(wù)器端（示例使用Node.js）：
// 向客戶端發(fā)送消息
socket.send("Hello Client!");
// 監(jiān)聽接收到客戶端發(fā)送的消息
socket.on("message", function(message) {
console.log("接收到客戶端發(fā)送的消息：" + message);
});
在以上代碼中，客戶端通過調(diào)用socket.send()方法將消息發(fā)送到服務(wù)器，服務(wù)器通過socket.send()方法將消息發(fā)送到客戶端?？蛻舳送ㄟ^監(jiān)聽socket.onmessage事件來接收服務(wù)器發(fā)送的消息，服務(wù)器通過監(jiān)聽socket.on("message")事件來接收客戶端發(fā)送的消息。
通過以上代碼示例，你可以詳細(xì)了解如何使用WebSocket建立連接并進(jìn)行數(shù)據(jù)傳輸。請注意，示例代碼中使用的服務(wù)器地址和端口號需要根據(jù)實(shí)際情況進(jìn)行修改。同時，你還可以在具體應(yīng)用中根據(jù)需要使用WebSocket的其他方法和事件來實(shí)現(xiàn)更復(fù)雜的功能。
WebSocket非常適合用于即時通訊應(yīng)用，因?yàn)樗軌驅(qū)崿F(xiàn)實(shí)時雙向通信。以下是一個簡單的即時聊天應(yīng)用的代碼教程。
在客戶端（JavaScript）：
// 創(chuàng)建WebSocket對象并指定服務(wù)器地址
var socket = new WebSocket("ws://example.com/socket");
// 監(jiān)聽連接建立事件
socket.onopen = function() {
console.log("WebSocket連接已建立");
// 監(jiān)聽文本框輸入，按下Enter鍵時發(fā)送消息
var input = document.getElementById("input");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
var message = input.value;
socket.send(message);
input.value = "";
}
});
};
// 監(jiān)聽接收到服務(wù)器發(fā)送的消息
socket.onmessage = function(event) {
var message = event.data;
console.log("接收到服務(wù)器發(fā)送的消息：" + message);
// 將接收到的消息顯示在聊天窗口中
var chatWindow = document.getElementById("chatWindow");
chatWindow.innerHTML += "<p>" + message + "</p>";
};
// 監(jiān)聽連接關(guān)閉事件
socket.onclose = function(event) {
console.log("WebSocket連接已關(guān)閉");
};
// 監(jiān)聽連接錯誤事件
socket.onerror = function(event) {
console.error("WebSocket連接錯誤：" + event};
在服務(wù)器端（示例使用Node.js）：
const WebSocket = require("ws");
// 創(chuàng)建WebSocket服務(wù)器
const wss = new WebSocket.Server({ port: 8080 });
// 監(jiān)聽連接建立事件
wss.on("connection", function(socket) {
console.log("WebSocket連接已建立");
// 監(jiān)聽接收到客戶端發(fā)送的消息
socket.on("message", function(message) {
console.log("接收到客戶端發(fā)送的消息：" + message);
<span class="token comment">// 向所有連接的客戶端發(fā)送消息</span>
wss<span class="token punctuation">.</span>clients<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">client</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
client<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
});
// 監(jiān)聽連接關(guān)閉事件
socket.on("close", function() {
console.log("WebSocket連接已關(guān)閉");
});
});
在上述代碼中，客戶端通過創(chuàng)建WebSocket對象連接到服務(wù)器。輸入框中的文本框用于錄入要發(fā)送的消息，按下Enter鍵時會將消息發(fā)送給服務(wù)器。服務(wù)器接收到消息后，通過遍歷所有連接的客戶端，向每個客戶端發(fā)送消息。
這樣，多個客戶端就可以實(shí)時地進(jìn)行聊天，并且所有的消息都會實(shí)時地在各個客戶端之間同步顯示。
WebSocket還可用于多人協(xié)作應(yīng)用，讓多個用戶可以實(shí)時地協(xié)同編輯文檔或畫布。以下是一個簡單的代碼教程。
在客戶端（JavaScript）：
// 創(chuàng)建WebSocket對象并指定服務(wù)器地址
var socket = new WebSocket("ws://example.com/socket");
// 監(jiān)聽連接建立事件
socket.onopen = function() {
console.log("WebSocket連接已建立");
// 監(jiān)聽文本框輸入，按下Enter鍵時發(fā)送繪畫指令
var canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", function(event) {
// 繪畫指令的數(shù)據(jù)格式可以自定義，這里使用了簡單的示例
var instruction = {
type: "draw",
position: {
x: event.clientX,
y: event.clientY
}
};
socket.send(JSON.stringify(instruction));
});
};
// 監(jiān)聽接收到服務(wù)器發(fā)送的消息
socket.onmessage = function(event) {
var message = JSON.parse(event.data);
console.log("接收到服務(wù)器發(fā)送的消息：" + message);
// 根據(jù)消息執(zhí)行相應(yīng)的操作，示例中處理了繪畫指令
if (message.type === "draw") {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(message.position.x, message.position.y, 5, 0, 2 * Math.PI);
ctx.fill();
}
};
// 監(jiān)聽連接關(guān)閉事件
socket.onclose = function(event) {
console.log("WebSocket連接已關(guān)閉");
};
// 監(jiān)聽連接錯誤事件
socket.onerror = function(event) {
console.error("WebSocket連接錯誤：" + event};
在服務(wù)器端（示例使用Node.js）：
const WebSocket = require("ws");
// 創(chuàng)建WebSocket服務(wù)器
const wss = new WebSocket.Server({ port: 8080 });
// 監(jiān)聽連接建立事件
wss.on("connection", function(socket) {
console.log("WebSocket連接已建立");
// 監(jiān)聽接收到客戶端發(fā)送的消息
socket.on("message", function(message) {
console.log("接收到客戶端發(fā)送的消息：" + message);
<span class="token comment">// 向所有連接的客戶端發(fā)送消息</span>
wss<span class="token punctuation">.</span>clients<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">client</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
client<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
});
// 監(jiān)聽連接關(guān)閉事件
socket.on("close", function() {
console.log("WebSocket連接已關(guān)閉");
});
});
在上述代碼中，客戶端通過創(chuàng)建WebSocket對象連接到服務(wù)器。當(dāng)鼠標(biāo)在畫布上按下時，將繪畫指令發(fā)送給服務(wù)器。服務(wù)器接收到繪畫指令后，將指令廣播給所有連接的客戶端，并在各個客戶端上進(jìn)行繪畫操作。
這樣，多個用戶就可以實(shí)時地協(xié)同編輯同一個畫布或文檔，所有的繪畫指令都會即時同步在各個客戶端之間。
WebSocket還可以用于實(shí)時數(shù)據(jù)更新應(yīng)用，例如股票交易應(yīng)用中的實(shí)時股票價格更新。以下是一個簡單的代碼教程。
在客戶端（JavaScript）：
// 創(chuàng)建WebSocket對象并指定服務(wù)器地址
var socket = new WebSocket("鏈接");
// 監(jiān)聽連接建立事件
socket.onopen = function() {
console.log("WebSocket連接已建立");
};
// 監(jiān)聽接收到服務(wù)器發(fā)送的消息
socket.onmessage = function(event) {
var message = JSON.parse(event.data);
console.log("接收到服務(wù)器發(fā)送的消息：" + message);
// 對接收到的實(shí)時數(shù)據(jù)進(jìn)行處理
var stockPriceElement = document.getElementById("stockPrice");
stockPriceElement.innerText = message.price;
};
// 監(jiān)聽連接關(guān)閉事件
socket.onclose = function(event) {
console.log("WebSocket連接已關(guān)閉");
};
// 監(jiān)聽連接錯誤事件
socket.onerror = function(event) {
console.error("WebSocket連接錯誤：" + event};
在服務(wù)器端（示例使用Node.js）：
const WebSocket = require("ws");
// 創(chuàng)建WebSocket服務(wù)器
const wss = new WebSocket.Server({ port: 8080 });
// 模擬實(shí)時股票價格更新
setInterval(function() {
var stockPrice = Math.random() * 100;
// 向所有連接的客戶端發(fā)送實(shí)時數(shù)據(jù)
wss.clients.forEach(function(client) {
var data = {
price: stockPrice
};
client.send(JSON.stringify(data));
});
}, 2000);
// 監(jiān)聽連接建立事件
wss.on("connection", function(socket) {
console.log("WebSocket連接已建立");
// 初始化發(fā)送實(shí)時數(shù)據(jù)
var stockPrice = Math.random() * 100;
var data = {
price: stockPrice
};
socket.send(JSON.stringify(data));
// 監(jiān)聽連接關(guān)閉事件
socket.on("close", function() {
console.log("WebSocket連接已關(guān)閉");
});
});
在上述代碼中，客戶端通過創(chuàng)建WebSocket對象連接服務(wù)器。服務(wù)器使用setInterval函數(shù)模擬實(shí)時股票價格的更新，并將更新的數(shù)據(jù)發(fā)送給所有連接的客戶端?？蛻舳吮O(jiān)聽接收到服務(wù)器發(fā)送的消息，并處理接收到的實(shí)時數(shù)據(jù)。
這樣，在股票交易應(yīng)用中，多個用戶可以實(shí)時地接收和顯示股票價格的更新信息。包括打游戲的時候，隊(duì)友之間互相溝通，打字交流，或者走位，放技能等等，都是即時的。
雙向?qū)崟r通信：WebSocket提供了雙向的實(shí)時信能力，客戶端和服務(wù)器可以通過該協(xié)議進(jìn)行雙向數(shù)據(jù)傳輸，實(shí)時反饋更新信息，實(shí)現(xiàn)即時通訊、實(shí)時數(shù)據(jù)推送等功能。
較低的延遲：與傳統(tǒng)的HTTP請求相比，WebSocket降低了通信的開銷，減少了傳輸和處理數(shù)據(jù)的延遲，因此可以更快進(jìn)行實(shí)時數(shù)據(jù)傳輸。
更高的性能：由于WebSocket使用較少的頭部信息和更有效的消息傳輸格式，因此在相同帶寬下可以傳輸更多的數(shù)據(jù)，提高了性能和效率。
廣泛的瀏覽器支持：WebSocket是HTML5的一部分，并且得到了大多數(shù)現(xiàn)代瀏覽器的支持，因此它可以在各種平臺和設(shè)備上使用。
連接保持：與傳統(tǒng)的HTTP請求不同，WebSocket連接保持在建立之后，雙方可以隨時進(jìn)行數(shù)據(jù)傳輸，避免了不必要的連接和斷開操作。
兼容性問題：雖然現(xiàn)代瀏覽器廣泛支持WebSocket，但在某些舊版本或特定設(shè)備上可能存在兼容性問題。為了兼容性，可以使用輪訓(xùn)技術(shù)（如長輪詢）作為備選方案。
部署和維護(hù)復(fù)雜性：WebSocket服務(wù)器的設(shè)置和配置可能比傳統(tǒng)的Web服務(wù)器復(fù)雜一些，需要專門的服務(wù)器環(huán)境和配置。
安全性問題：由于WebSocket是在HTTP協(xié)議的基礎(chǔ)上建立的，它們共享相同的安全風(fēng)險(xiǎn)，例如跨站點(diǎn)腳本（XSS）和跨站請求偽造（CSRF）。因此，在使用WebSocket時需要考慮到安全性，并采取適當(dāng)?shù)陌踩胧?/p>
擴(kuò)展問題：WebSocket協(xié)議還不支持像HTTP/2那樣的一些高級特性，例如頭部壓縮和流量控制。在某些特殊情況下，可能需要通過其他方式實(shí)現(xiàn)這些功能。
盡管WebSocket具有上述局限性，但它仍然是實(shí)時通訊、實(shí)時數(shù)據(jù)傳輸和實(shí)時協(xié)作等場景下的首選協(xié)議，因?yàn)樗邆淞穗p向?qū)崟r通信和較低延遲等一系列的優(yōu)勢。在開發(fā)時，需要根據(jù)具體需求和限制，綜合考慮使用WebSocket的適用性。
WebSocket是一種能夠提供雙向?qū)崟r通信的協(xié)議，適用于需要實(shí)時數(shù)據(jù)傳輸和雙向通信的場景。它具有較低的延遲、更高的性和廣泛的瀏覽器持等優(yōu)勢，能夠?qū)崿F(xiàn)即時通訊、多人協(xié)和實(shí)時數(shù)據(jù)更新等功能。
然而，WebSocket也存在兼容性、部署和維護(hù)復(fù)雜性、安全性問題以及缺乏一些高級特性等局限性。在開發(fā)時，需要仔細(xì)考慮具體需求和限制，并必要時采取適當(dāng)?shù)慕鉀Q方案。
總的來說，WebSocket在實(shí)時通信和實(shí)時數(shù)據(jù)傳輸方面具有明顯的優(yōu)勢，是構(gòu)建現(xiàn)代Web應(yīng)用的重要工具之一。
藍(lán)藍(lán)設(shè)計(jì)(sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司
銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
再次遇到監(jiān)聽子組件收到父組件傳過來的值，如果這個值變化，頁面中的值發(fā)現(xiàn)是不會跟著同步變化的。所以監(jiān)聽props中的值，一直監(jiān)聽。
代碼：
藍(lán)藍(lán)設(shè)計(jì)(sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司
銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
前端入門之旅：探索Web開發(fā)的奇妙世界 歡迎來到前端入門之旅！感興趣的可以訂閱本專欄哦！這個專欄是為那些對Web開發(fā)感興趣、剛剛踏入前端領(lǐng)域的朋友們量身打造的。無論你是完全的新手還是有一些基礎(chǔ)的開發(fā)者，這里都將為你提供一個系統(tǒng)而又親切的學(xué)習(xí)平臺。在這個專欄中，我們將以問答形式每天更新，為大家呈現(xiàn)精選的前端知識點(diǎn)和常見問題解答。通過問答形式，我們希望能夠更直接地回應(yīng)讀者們對于前端技術(shù)方面的疑問，并且?guī)椭蠹抑鸩浇⑵鹨粋€扎實(shí)的基礎(chǔ)。無論是HTML、CSS、JavaScript還是各種常用框架和工具，我們將深入淺出地解釋概念，并提供實(shí)際案例和練習(xí)來鞏固所學(xué)內(nèi)容。同時，我們也會分享一些實(shí)用技巧和最佳實(shí)踐，幫助你更好地理解并運(yùn)用前端開發(fā)中的各種技術(shù)。
無論你是尋找職業(yè)轉(zhuǎn)型、提升技能還是滿足個人興趣，我們都將全力以赴，為你提供最優(yōu)質(zhì)的學(xué)習(xí)資源和支持。讓我們一起探索Web開發(fā)的奇妙世界吧！加入前端入門之旅，成為一名出色的前端開發(fā)者！ 讓我們啟航前端之旅?。?！
前端安全性概述及最佳實(shí)踐
前端安全性是指在前端開發(fā)中采取的一系列措施，旨在保護(hù)應(yīng)用程序、用戶數(shù)據(jù)以及用戶隱私免受各種安全威脅。以下是一些前端安全性的最佳實(shí)踐：
HTTPS 使用：
內(nèi)容安全策略（CSP）：
跨站腳本攻擊（XSS）防護(hù)：
跨站請求偽造（CSRF）防護(hù)：
安全的跨域資源共享（CORS）配置：
安全的第三方庫和框架：
安全的存儲和傳輸：
用戶身份驗(yàn)證和授權(quán)：
不使用過期或不安全的特性：
前端路由安全：
監(jiān)測和報(bào)告安全事件：
教育和培訓(xùn)：
安全頭部的使用：
定期進(jìn)行安全性測試：
這些最佳實(shí)踐有助于構(gòu)建更加安全、可靠的前端應(yīng)用程序，減少潛在的攻擊風(fēng)險(xiǎn)。前端安全性是一個不斷演變的領(lǐng)域，開發(fā)者應(yīng)該時刻關(guān)注新的安全威脅和最佳實(shí)踐。
本專欄適用讀者比較廣泛，適用于前端初學(xué)者；或者沒有學(xué)過前端對前端有興趣的伙伴，亦或者是后端同學(xué)想在面試過程中能夠更好的展示自己拓展一些前端小知識點(diǎn)，所以如果你具備了前端的基礎(chǔ)跟著本專欄學(xué)習(xí)，也是可以很大程度幫助你查漏補(bǔ)缺，由于博主本人是自己再做內(nèi)容輸出，如果文中出現(xiàn)有瑕疵的地方各位可以通過主頁的左側(cè)聯(lián)系我，我們一起進(jìn)步，與此同時也推薦大家?guī)追輰冢信d趣的伙伴可以訂閱一下：除了下方的專欄外大家也可以到我的主頁能看到其他的專欄；
前端小游戲（免費(fèi)）這份專欄將帶你進(jìn)入一個充滿創(chuàng)意和樂趣的世界，通過利用HTML、CSS和JavaScript的基礎(chǔ)知識，我們將一起搭建各種有趣的頁面小游戲。無論你是初學(xué)者還是有一些前端開發(fā)經(jīng)驗(yàn)，這個專欄都適合你。我們會從最基礎(chǔ)的知識開始，循序漸進(jìn)地引導(dǎo)你掌握構(gòu)建頁面游戲所需的技能。通過實(shí)際案例和練習(xí)，你將學(xué)會如何運(yùn)用HTML來構(gòu)建頁面結(jié)構(gòu)，使用CSS來美化游戲界面，并利用JavaScript為游戲添加交互和動態(tài)效果。在這個專欄中，我們將涵蓋各種類型的小游戲，包括迷宮游戲、打磚塊、貪吃蛇、掃雷、計(jì)算器、飛機(jī)大戰(zhàn)、井字游戲、拼圖、迷宮等等。每個項(xiàng)目都會以簡潔明了的步驟指導(dǎo)你完成搭建過程，并提供詳細(xì)解釋和代碼示例。同時，我們也會分享一些優(yōu)化技巧和最佳實(shí)踐，幫助你提升頁面性能和用戶體驗(yàn)。無論你是想尋找一個有趣的項(xiàng)目來鍛煉自己的前端技能，還是對頁面游戲開發(fā)感興趣，前端小游戲?qū)诙紩蔀槟愕淖罴堰x擇
Vue3通透教程【從零到一】（付費(fèi)） 歡迎來到Vue3通透教程！這個專欄旨在為大家提供全面的Vue3相關(guān)技術(shù)知識。如果你有一些Vue2經(jīng)驗(yàn),這個專欄都能幫助你掌握Vue3的核心概念和使用方法。我們將從零開始,循序漸進(jìn)地引導(dǎo)你構(gòu)建一個完整的Vue應(yīng)用程序。通過實(shí)際案例和練習(xí),你將學(xué)會如何使用Vue3的模板語法、組件化開發(fā)、狀態(tài)管理、路由等功能。我們還會介紹一些高級特性,如Composition API和Teleport等,幫助你更好地理解和應(yīng)用Vue3的新特性。在這個專欄中,我們將以簡潔明了的步驟指導(dǎo)你完成每個項(xiàng)目,并提供詳細(xì)解釋和示例代碼。同時,我們也會分享一些Vue3開發(fā)中常見的問題和解決方案,幫助你克服困難并提升開發(fā)效率。無論你是想深入學(xué)習(xí)Vue3或者需要一個全面的指南來構(gòu)建前端項(xiàng)目,Vue3通透教程專欄都會成為你不可或缺的資源。
TypeScript入門指南（免費(fèi)） 是一個旨在幫助大家快速入門并掌握TypeScript相關(guān)技術(shù)的專欄。通過簡潔明了的語言和豐富的示例代碼，我們將深入講解TypeScript的基本概念、語法和特性。無論您是初學(xué)者還是有一定經(jīng)驗(yàn)的開發(fā)者，都能在這里找到適合自己的學(xué)習(xí)路徑。從類型注解、接口、類等核心特性到模塊化開發(fā)、工具配置以及與常見前端框架的集成，我們將全面覆蓋各個方面。通過閱讀本專欄，您將能夠提升JavaScript代碼的可靠性和可維護(hù)性，并為自己的項(xiàng)目提供更好的代碼質(zhì)量和開發(fā)效率。讓我們一起踏上這個精彩而富有挑戰(zhàn)性的TypeScript之旅吧！
藍(lán)藍(lán)設(shè)計(jì)(sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司
銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
HTML進(jìn)階、CSS進(jìn)階、div+css布局、HTML+css整站開發(fā)、
Js基礎(chǔ)教程、js內(nèi)置對象常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點(diǎn)圖。
常見特效、例如：tab、導(dǎo)航、整頁滾動、輪播圖、JS制作幻燈片、彈出層、手風(fēng)琴菜單、瀑布流布局、滾動事件、滾差視圖。
正則表達(dá)式、排序算法、遞歸算法、閉包、函數(shù)節(jié)流、作用域鏈、基于距離運(yùn)動框架、面向?qū)ο蠡A(chǔ)、
懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。
HTML5新語義標(biāo)簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、Web Socket、Canvas.
CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果制作、Velocity.js框架、元素進(jìn)場、出場策略、炫酷CSS3網(wǎng)頁制作。
響應(yīng)式概念、媒體查詢、響應(yīng)式網(wǎng)站制作、刪格系統(tǒng)、刪格系統(tǒng)原理、Bootstrap常用模板、LESS和SASS。
跨終端WEB和主流設(shè)備簡介、視口、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機(jī)中常見JS效果制作、Zepto.js、手機(jī)聚劃算頁面、手機(jī)滾屏。
服務(wù)器基礎(chǔ)知識、Apache服務(wù)器和其他WEB服務(wù)器介紹、Apache服務(wù)器搭建、HTTP介紹。
PHP基礎(chǔ)語法、使用PHP處理簡單的GET或者POST請求、
Ajax簡介和異步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細(xì)介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用。
JSON和JSON解析、數(shù)據(jù)綁定和模板技術(shù)、JSONP、跨域技術(shù)、圖片預(yù)讀取和lazy-load技術(shù)、JQuery框架中的AjaxAPI、使用Ajax實(shí)現(xiàn)爆布流案例額。
從內(nèi)存角度到理解JS面向?qū)ο蟆⒒绢愋?、?fù)雜類型、原型鏈、ES6中的面向?qū)ο?、屬性讀寫權(quán)限、設(shè)置器、訪問器。
繼承性、多態(tài)性、封裝性、接口。
面向?qū)ο缶幊趟季S、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。
事件流、冒泡、捕獲、事件對象、事件框架、選擇框架。
運(yùn)動原理、單物體運(yùn)動框架、多物體運(yùn)動框架、運(yùn)動框架面向?qū)ο蠓庋b。
JQuery框架雛形、可擴(kuò)展性、模塊化、封裝屬于傳智自己的框架。
面向組件編程的方式、面向組件編程的實(shí)現(xiàn)原理、面向組件編程實(shí)戰(zhàn)、基于組件化思想開發(fā)網(wǎng)站應(yīng)用程序。
AMD設(shè)計(jì)規(guī)范、CMD設(shè)計(jì)規(guī)范、RequireJS，LoadJS、淘寶的SeaJS。
GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。
Angular.js、Backbone.js、Knockout/Ember。
React.js、Vue.js、Zepto.js。
WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關(guān)系、開發(fā)環(huán)境搭建、Cordova實(shí)戰(zhàn)（創(chuàng)建項(xiàng)目，配置，編譯，調(diào)試，部署發(fā)布）。
Ionic簡介和同類對比、模板項(xiàng)目解析、常見組件及使用、結(jié)合Angular構(gòu)建APP、常見效果（下拉刷新，上拉加載，側(cè)滑導(dǎo)航，選項(xiàng)卡）。
React Native簡介、React Native環(huán)境配置、創(chuàng)建項(xiàng)目，配置，編譯，調(diào)試，部署發(fā)布、原生模塊和UI組件、原生常用API。
HTML5+中國產(chǎn)業(yè)聯(lián)盟、HTML5 Plus Runtime環(huán)境、HBuilder開發(fā)工具、MUI框架、H5+開發(fā)和部署。
Node.js發(fā)展、生態(tài)圈、Io.js、Linux/Windows/OS X環(huán)境配置、REPL環(huán)境和控制臺程序、異步編程，非阻塞I/O、模塊概念，模塊管理工具、開發(fā)流程，調(diào)試，測試。
全局對象global，process，console，util、事件驅(qū)動，事件發(fā)射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務(wù)端與客戶端、Socket.IO。
HTTP協(xié)議，請求響應(yīng)處理過程、關(guān)系型數(shù)據(jù)庫操作和數(shù)據(jù)訪問、非關(guān)系型數(shù)據(jù)庫操作和數(shù)據(jù)訪問、原生的Node.js開發(fā)Web應(yīng)用程序、Web開發(fā)工作流、Node.js開發(fā)Blog案例。
Express簡介+MVC簡介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構(gòu)Blog案例、Koa等其他常見MVC框架。
需求與設(shè)計(jì)、賬戶模塊注冊登錄、會員中心模塊、前臺展示模塊、購物車，訂單結(jié)算、在線客服即時通訊模塊。
MacOS自帶Python路徑為:/System/Library/Frameworks/Python.framework/Versions
自行安裝Python路徑為:/Library/Frameworks/Python.framework/Versions/
打開Terminal
切換工作路徑:cd /System/Library/Frameworks/Python.framework/Versions/current/bin
打印相對路徑Python版本:./python --version
打印當(dāng)前用戶Python版本:python --version
如下圖可以看到，系統(tǒng)Python版本為
2.7,當(dāng)前用戶Python為3.7
使用which命令查看各版本Python的文件路徑
系統(tǒng)命令默認(rèn)路徑/usr/bin(系統(tǒng)預(yù)裝的可執(zhí)行文件,隨系統(tǒng)升級而變化)
用戶命令默認(rèn)路徑/usr/local/bin(用戶安裝的可執(zhí)行文件,不隨系統(tǒng)升級影響)
其中，usr是Unix System Resource
可以看到
/usr/bin中有python可執(zhí)行命令,其版本為2.7.18,而/usr/local/bin則沒有python,存放的是python3.7的執(zhí)行命令
在Mac電腦上安裝Python環(huán)境可以按照以下步驟進(jìn)行操作：
訪問Python官方網(wǎng)站（https://www.python.org/downloads/macos/）下載適用于Mac的Python安裝包。根據(jù)你的操作系統(tǒng)版本選擇合適的安裝包，通常選擇最新的穩(wěn)定版本。
雙擊下載的Python安裝包，會出現(xiàn)一個安裝向?qū)Т翱凇｜c(diǎn)擊"Continue"繼續(xù)安裝。
在安裝向?qū)Т翱谥校梢赃x擇安裝Python的位置和其他可選組件。通常建議保持默認(rèn)設(shè)置，然后點(diǎn)擊"Install"開始安裝。
安裝過程中，系統(tǒng)可能會要求輸入管理員密碼。輸入密碼并點(diǎn)擊"Install Software"繼續(xù)安裝。
安裝過程可能需要一些時間，請耐心等待直到安裝完成。
安裝完成后，打開終端應(yīng)用程序（Terminal），輸入以下命令驗(yàn)證Python安裝是否成功：
python3 -V
如果成功安裝，終端會顯示Python的版本號。
在產(chǎn)品線或者項(xiàng)目組中，開發(fā)工程師絕對是最大的群體，包含前端開發(fā)、后端開發(fā)、測試等崗位。之前做交互設(shè)計(jì)師時，跟開發(fā)人員直接的溝通并不多，主要在交互設(shè)計(jì)宣講和還原度測試時有些接觸。即使有些糾纏，也會通過產(chǎn)品經(jīng)理進(jìn)行協(xié)調(diào)，溝通的難度并不大。轉(zhuǎn)崗產(chǎn)品經(jīng)理后，主要溝通對象就變成了開發(fā)工程師。今天來聊聊我遇到過或合作過的“開發(fā)大佬”們。
干貨！四個章節(jié)深度解析「組件」知識點(diǎn)｜蘭亭妙微UI設(shè)計(jì)公司
第一章：組件的定義和基本概念
在軟件開發(fā)領(lǐng)域，組件是指獨(dú)立的、可重用的軟件模塊，它們具有特定的功能和接口，可以被組合成更大的軟件系統(tǒng)。組件可以是軟件對象、類、庫、模塊或其他單位。它們通過定義輸入和輸出接口，以及實(shí)現(xiàn)特定功能來提供服務(wù)。
組件的基本概念包括以下幾個方面：
1.1 組件容器：組件容器是一個環(huán)境，用于加載、管理和執(zhí)行組件。容器提供對組件的生命周期管理、通信和部署支持。組件容器可以是運(yùn)行時環(huán)境（如操作系統(tǒng)、應(yīng)用服務(wù)器）或特定的框架（如Java EE容器、ASP.NET容器）。
1.2 組件接口：組件接口定義了組件對外提供的服務(wù)和合約。它包括輸入?yún)?shù)、輸出結(jié)果以及可能的異常。接口可以通過編程語言的接口、類、方法或其他機(jī)制來定義。
1.3 組件協(xié)作：組件可以通過協(xié)作來完成更復(fù)雜的任務(wù)。協(xié)作可以通過組件之間的接口調(diào)用、事件觸發(fā)、消息傳遞等方式進(jìn)行。協(xié)作可以實(shí)現(xiàn)任務(wù)的拆分、并行處理和功能擴(kuò)展。
1.4 組件復(fù)用：組件的重要特性是可復(fù)用性。組件的設(shè)計(jì)和實(shí)現(xiàn)應(yīng)該考慮到復(fù)用的需求，使其可以在不同的上下文中被重復(fù)使用。組件復(fù)用可以提高開發(fā)效率、降低維護(hù)成本，并促進(jìn)軟件系統(tǒng)的生態(tài)系統(tǒng)發(fā)展。
第二章：組件化開發(fā)和架構(gòu)模式
2.1 組件化開發(fā)：組件化開發(fā)是一種軟件開發(fā)方法，通過將軟件系統(tǒng)劃分為獨(dú)立的組件來提高開發(fā)效率和質(zhì)量。組件化開發(fā)促進(jìn)了模塊化、可復(fù)用、可測試和可維護(hù)的代碼編寫。它還鼓勵團(tuán)隊(duì)協(xié)作和并行開發(fā)。
2.2 組件化架構(gòu)模式：組件化架構(gòu)模式是一種組織和管理組件的方式。常見的組件化架構(gòu)模式包括面向服務(wù)架構(gòu)（SOA）、微服務(wù)架構(gòu)和組件協(xié)作模式等。這些架構(gòu)模式通過定義組件之間的接口、通信和協(xié)議，實(shí)現(xiàn)了松耦合、可擴(kuò)展和可替換的軟件系統(tǒng)。
第三章：組件的優(yōu)勢和挑戰(zhàn)
3.1 組件的優(yōu)勢：組件化開發(fā)具有許多優(yōu)勢。首先，它提供了代碼重用和模塊化的機(jī)制，減少了開發(fā)工作量和維護(hù)成本。其次，組件可以提供標(biāo)準(zhǔn)化的接口，促進(jìn)了團(tuán)隊(duì)協(xié)作和模塊復(fù)用。此外，組件可以獨(dú)立測試和部署，提高了系統(tǒng)的可靠性和可擴(kuò)展性。
3.2 組件的挑戰(zhàn)：盡管組件化開發(fā)具有許多優(yōu)勢，但也存在一些挑戰(zhàn)。首先，組件的設(shè)計(jì)和實(shí)現(xiàn)需要額外的工作和時間。其次，組件之間的協(xié)作和通信涉及到復(fù)雜的依賴關(guān)系和調(diào)試過程。此外，組件的版本管理和升級可能導(dǎo)致一些兼容性和穩(wěn)定性的問題。
第四章：組件化開發(fā)實(shí)踐和案例分析
4.1 組件化開發(fā)實(shí)踐：組件化開發(fā)需要結(jié)合具體的技術(shù)和工具來實(shí)現(xiàn)。常見的組件化開發(fā)實(shí)踐包括使用面向?qū)ο缶幊?、設(shè)計(jì)模式、依賴注入和模塊化打包工具等。此外，組件化開發(fā)還需要規(guī)范和標(biāo)準(zhǔn)來指導(dǎo)開發(fā)和集成。
4.2 組件化開發(fā)案例分析：組件化開發(fā)已經(jīng)在軟件開發(fā)領(lǐng)域得到廣泛應(yīng)用。例如，Android開發(fā)中的組件化架構(gòu)、Java EE中的Enterprise JavaBean、.NET中的組件模型等。這些案例提供了關(guān)于組件化開發(fā)的實(shí)踐經(jīng)驗(yàn)和最佳實(shí)踐。
藍(lán)藍(lán)設(shè)計(jì)，工作室2008年開始，2011年正式成立北京蘭亭妙微科技有限公司，主創(chuàng)清華團(tuán)隊(duì)，專注軟件和互聯(lián)網(wǎng)ui設(shè)計(jì)開發(fā)。擅長企業(yè)信息化管理、監(jiān)控、大數(shù)據(jù)軟件UIUE咨詢和設(shè)計(jì)開發(fā)服務(wù)。立足UI，一直在學(xué)習(xí)進(jìn)步。
藍(lán)藍(lán)設(shè)計(jì)，秉承設(shè)計(jì)優(yōu)秀，不斷超越的理念，誠信敬業(yè)、專業(yè)耐心的工作作風(fēng)，進(jìn)行設(shè)計(jì)服務(wù)創(chuàng)新，幫助企業(yè)進(jìn)行軟件和互聯(lián)網(wǎng)產(chǎn)品的界面設(shè)計(jì)及開發(fā)升級，提供卓越的解決方案。對軟件界面用戶體驗(yàn)與交互設(shè)計(jì)與實(shí)現(xiàn)，國際化標(biāo)準(zhǔn)和流行趨勢，進(jìn)行不斷的研究和實(shí)踐，擁有豐富的解決問題經(jīng)驗(yàn)。
讓用戶輸密碼的正確姿勢！簡化密碼設(shè)計(jì)的三個小秘籍
2023-06-28 15:50北京北京蘭亭妙微科技有限公司官方帳號
隨著互聯(lián)網(wǎng)的普及和數(shù)字化時代的來臨，密碼的重要性不言而喻。然而，很多人在設(shè)計(jì)密碼時往往面臨記憶難題和安全性問題。為了幫助用戶設(shè)計(jì)更簡化且安全的密碼，本文將介紹三個小秘籍。
一、使用密碼管理工具
密碼管理工具是一種方便且安全的方式來管理和存儲密碼。它們通常提供加密的存儲空間，可以儲存各種賬戶的用戶名和密碼。用戶只需記住一個主密碼，就能夠訪問和管理所有其他密碼。這樣，用戶可以選擇更復(fù)雜、更安全的密碼，而不必?fù)?dān)心記憶的問題。此外，密碼管理工具通常還提供自動生成密碼的功能，確保密碼的隨機(jī)性和安全性。一些常見的密碼管理工具包括LastPass、1Password和Keepass等。
二、使用短語或句子作為密碼
傳統(tǒng)的密碼通常由字符、數(shù)字和特殊符號組成，很難記憶且容易被猜測。相比之下，使用短語或句子作為密碼可以更容易記住且更安全。選擇一個有意義的短語或句子，并將其轉(zhuǎn)化為密碼。例如，"ILoveToTravelTheWorld!"，這個短語可以轉(zhuǎn)化為密碼"Ilv2ttw!"。這樣的密碼不僅容易記憶，而且由于包含了大小寫字母、數(shù)字和特殊符號，具備了一定的安全性。
三、使用多因素身份驗(yàn)證
多因素身份驗(yàn)證是一種提高賬戶安全性的重要方式。除了使用密碼外，多因素身份驗(yàn)證要求用戶提供第二個驗(yàn)證因素，如手機(jī)驗(yàn)證碼、指紋識別或硬件安全密鑰等。這樣，即使密碼被泄露，黑客也無法輕易訪問賬戶。許多在線服務(wù)提供了多因素身份驗(yàn)證選項(xiàng)，用戶應(yīng)該積極開啟并使用這個功能。
綜上所述，設(shè)計(jì)簡化且安全的密碼并不是一件困難的事情。通過使用密碼管理工具、使用短語或句子作為密碼以及使用多因素身份驗(yàn)證，用戶可以更好地保護(hù)自己的賬戶安全。重要的是，用戶應(yīng)該時刻保持警惕，定期更換密碼，并避免在多個賬戶中使用相同的密碼，以確保個人信息的安全。
今日分享這篇文章是藍(lán)藍(lán)設(shè)計(jì)的原創(chuàng)文章，未來將會持續(xù)在平臺上分享關(guān)于設(shè)計(jì)行業(yè)的文章。此外藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，添加vx藍(lán)小助ben_lanlan，報(bào)下信息，藍(lán)小助會請您入群。同時添加藍(lán)小助我們將會為您提供優(yōu)秀的設(shè)計(jì)案例和設(shè)計(jì)素材等，歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
以下是在 JavaScript 和 Google 地圖 API 中添加點(diǎn)擊事件，根據(jù)國家進(jìn)行不同操作的示例代碼：
//創(chuàng)建地圖對象
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 37.0902, lng: -95.7129}
});
//創(chuàng)建信息窗口（infowindow）
var infowindow = new google.maps.InfoWindow();
//創(chuàng)建一個數(shù)組來存儲標(biāo)記
var markers = [];
//為每個國家添加點(diǎn)擊事件
google.maps.event.addListener(map, 'click', function(event) {
//獲取點(diǎn)擊位置的經(jīng)緯度坐標(biāo)
var latLng = event.latLng;
//使用地理編碼器（geocoder）將經(jīng)緯度坐標(biāo)轉(zhuǎn)換為地址信息
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'location': latLng}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
//獲取點(diǎn)擊位置所在的國家名稱
var countryName = '';
for (var i = 0; i < results[0].address_components.length; i++) {
var component = results[0].address_components[i];
if (component.types.indexOf('country') !== -1) {
countryName = component.long_name;
break;
}
}
//根據(jù)國家名稱執(zhí)行相應(yīng)操作
switch (countryName) {
case 'China':
alert('您點(diǎn)擊了中國');
break;
case 'United States':
alert('您點(diǎn)擊了美國');
break;
default:
alert('您點(diǎn)擊了' + countryName);
}
//創(chuàng)建標(biāo)記并將其添加到地圖上
var marker = new google.maps.Marker({
position: latLng,
map: map
});
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。 藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com