整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
當用戶進行鼠標框選選擇了頁面上的內容時，把選擇的內容進行上報。
雖然這需求就一句話的事，但是很顯然，沒那么簡單...
因為鼠標框選說起來簡單，就是選擇的內容，但是這包含很多中情況，比如：只選擇文案、選擇圖片、選擇輸入框、輸入框中的內容選擇、iframe、等。
簡單總結，分為以下幾點：
鼠標框選包含以下幾點：
老生常談的技術點了，這里不能用節流，因為肯定不能你鼠標選擇的時候，隔一段時間返回一段內容，肯定是選擇之后一起返回。
這里用 debounce 主要也是用在事件監聽和事件處理上。
事件監聽，因為鼠標選擇，不僅僅是鼠標按下到鼠標抬起，還包括雙擊、右鍵、全選。
需要使用事件監聽對事件作處理。
Range 接口表示一個包含節點與文本節點的一部分的文檔片段。
Range 是瀏覽器原生的對象。
<body>
<ul>
<li>Vite</li>
<li>Vue</li>
<li>React</li>
<li>VitePress</li>
<li>NaiveUI</li>
</ul>
</body>
<script>
// 創建 Range 對象
const range = new Range()
const liDoms = document.querySelectorAll("li");
// Range 起始位置在 li 2
range.setStartBefore(liDoms[1]);
// Range 結束位置在 li 3
range.setEndAfter(liDoms[2]);
// 獲取 selection 對象
const selection = window.getSelection();
// 添加光標選擇的范圍
selection.addRange(range);
</script>可以看到，選擇內容為第二行和第三行
只選擇 li 中的 itePres
可以看出 range 屬性對應的值
const range = document.createRange();const range = window.getSelection().getRangeAt(0)if (document.caretRangeFromPoint) {
range = document.caretRangeFromPoint(e.clientX, e.clientY);
}const range = new Range()Selection 對象表示用戶選擇的文本范圍或插入符號的當前位置。它代表頁面中的文本選區，可能橫跨多個元素。
window.getSelection()錨指的是一個選區的起始點（不同于 HTML 中的錨點鏈接）。當我們使用鼠標框選一個區域的時候，錨點就是我們鼠標按下瞬間的那個點。在用戶拖動鼠標時，錨點是不會變的。
選區的焦點是該選區的終點，當你用鼠標框選一個選區的時候，焦點是你的鼠標松開瞬間所記錄的那個點。隨著用戶拖動鼠標，焦點的位置會隨著改變。
范圍指的是文檔中連續的一部分。一個范圍包括整個節點，也可以包含節點的一部分，例如文本節點的一部分。用戶通常下只能選擇一個范圍，但是有的時候用戶也有可能選擇多個范圍。
一個用戶可編輯的元素（例如一個使用 contenteditable 的 HTML 元素，或是在啟用了 designMode 的 Document 的子元素）。
首先要清楚，選擇的起點稱為錨點(anchor)，終點稱為焦點(focus)。
function debounce (fn, time = 500) {
let timeout = null; // 創建一個標記用來存放定時器的返回值
return function () {
clearTimeout(timeout) // 每當觸發時，把前一個 定時器 clear 掉
timeout = setTimeout(() => { // 創建一個新的 定時器，并賦值給 timeout
fn.apply(this, arguments)
}, time)
}
}/**
* debounce 函數類型
*/
type DebouncedFunction<F extends (...args: any[]) => any> = (...args: Parameters<F>) => void
/**
* debounce 防抖函數
* @param {Function} func 函數
* @param {number} wait 等待時間
* @param {false} immediate 是否立即執行
* @returns {DebouncedFunction}
*/
function debounce<F extends (...args: any[]) => any>(
func: F,
wait = 500,
immediate = false
): DebouncedFunction<F> {
let timeout: ReturnType<typeof setTimeout> | null
return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const context = this
const later = function () {
timeout = null
if (!immediate) {
func.apply(context, args)
}
}
const callNow = immediate && !timeout
if (timeout) {
clearTimeout(timeout)
}
timeout = setTimeout(later, wait)
if (callNow) {
func.apply(context, args)
}
}
}nterface IGetSelectContentProps {
type: 'html' | 'text'
content: string
}
/**
* 獲取選擇的內容
* @returns {null | IGetSelectContentProps} 返回選擇的內容
*/
const getSelectContent = (): null | IGetSelectContentProps => {
const selection = window.getSelection()
if (selection) {
// 1. 是焦點在 input 輸入框
// 2. 沒有選中
// 3. 選擇的是輸入框
if (selection.isCollapsed) {
return selection.toString().trim().length
? {
type: 'text',
content: selection.toString().trim()
}
: null
}
// 獲取選擇范圍
const range = selection.getRangeAt(0)
// 獲取選擇內容
const rangeClone = range.cloneContents()
// 判斷選擇內容里面有沒有節點
if (rangeClone.childElementCount > 0) {
// 創建 div 標簽
const container = document.createElement('div')
// div 標簽 append 復制節點
container.appendChild(rangeClone)
// 如果復制的內容長度為 0
if (!selection.toString().trim().length) {
// 判斷是否有選擇特殊節點
const isSpNode = hasSpNode(container)
return isSpNode
? {
type: 'html',
content: container.innerHTML
}
: null
}
return {
type: 'html',
content: container.innerHTML
}
} else {
return selection.toString().trim().length
? {
type: 'text',
content: selection.toString().trim()
}
: null
}
} else {
return null
}
}
/**
* 判斷是否包含特殊元素
* @param {Element} parent 父元素
* @returns {boolean} 是否包含特殊元素
*/
const hasSpNode = (parent: Element): boolean => {
const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
const inpList = ['input', 'textarea', 'select']
return Array.from(parent.children).some((node) => {
if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
if (
inpList.includes(node.nodeName.toLocaleLowerCase()) &&
(node as HTMLInputElement).value.trim().length
)
return true
if (node.children) {
return hasSpNode(node)
}
return false
})
}/**
* 獲取框選的文案內容
* @returns {string} 返回框選的內容
*/
const getSelectTextContent = (): string => {
const selection = window.getSelection()
return selection?.toString().trim() || ''
}// 是否時鼠標點擊動作
let selectionchangeMouseTrack: boolean = false
const selectionChangeFun = debounce(() => {
const selectContent = getSelectContent()
console.log('selectContent', selectContent)
// todo... 處理上報
selectionchangeMouseTrack = false
})
// 添加 mousedown 監聽事件
document.addEventListener('mousedown', () => {
selectionchangeMouseTrack = true
})
// 添加 mouseup 監聽事件
document.addEventListener(
'mouseup',
debounce(() => {
selectionChangeFun()
}, 100)
)
// 添加 selectionchange 監聽事件
document.addEventListener(
'selectionchange',
debounce(() => {
if (selectionchangeMouseTrack) return
selectionChangeFun()
})
)
// 添加 dblclick 監聽事件
document.addEventListener('dblclick', () => {
selectionChangeFun()
})
// 添加 contextmenu 監聽事件
document.addEventListener(
'contextmenu',
debounce(() => {
selectionChangeFun()
})
)也可以進行封裝
/**
* addEventlistener function 類型
*/
export interface IEventHandlerProps {
[eventName: string]: EventListenerOrEventListenerObject
}
let selectionchangeMouseTrack: boolean = false
const eventHandlers: IEventHandlerProps = {
// 鼠標 down 事件
mousedown: () => {
selectionchangeMouseTrack = true
},
// 鼠標 up 事件
mouseup: debounce(() => selectionChangeFun(), 100),
// 選擇事件
selectionchange: debounce(() => {
if (selectionchangeMouseTrack) return
selectionChangeFun()
}),
// 雙擊事件
dblclick: () => selectionChangeFun(),
// 右鍵事件
contextmenu: debounce(() => selectionChangeFun())
}
Object.keys(eventHandlers).forEach((event) => {
document.addEventListener(event, eventHandlers[event])
})function debounce (fn, time = 500) {
let timeout = null; // 創建一個標記用來存放定時器的返回值
return function () {
clearTimeout(timeout) // 每當觸發時，把前一個 定時器 clear 掉
timeout = setTimeout(() => { // 創建一個新的 定時器，并賦值給 timeout
fn.apply(this, arguments)
}, time)
}
}
let selectionchangeMouseTrack = false
document.addEventListener('mousedown', (e) => {
selectionchangeMouseTrack = true
console.log('mousedown', e)
})
document.addEventListener('mouseup', debounce((e) => {
console.log('mouseup', e)
selectionChangeFun()
}, 100))
document.addEventListener('selectionchange', debounce((e) => {
console.log('selectionchange', e)
if (selectionchangeMouseTrack) return
selectionChangeFun()
}))
document.addEventListener('dblclick', (e) => {
console.log('dblclick', e)
selectionChangeFun()
})
document.addEventListener('contextmenu',debounce(() => {
selectionChangeFun()
}))
const selectionChangeFun = debounce(() => {
const selectContent = getSelectContent()
selectionchangeMouseTrack = false
console.log('selectContent', selectContent)
})
const getSelectContent = () => {
const selection = window.getSelection();
if (selection) {
// 1. 是焦點在 input 輸入框
// 2. 沒有選中
// 3. 選擇的是輸入框
if (selection.isCollapsed) {
return selection.toString().trim().length ? {
type: 'text',
content: selection.toString().trim()
} : null
}
// 獲取選擇范圍
const range = selection.getRangeAt(0);
// 獲取選擇內容
const rangeClone = range.cloneContents()
// 判斷選擇內容里面有沒有節點
if (rangeClone.childElementCount > 0) {
const container = document.createElement('div');
container.appendChild(rangeClone);
if (!selection.toString().trim().length) {
const hasSpNode = getSpNode(container)
return hasSpNode ? {
type: 'html',
content: container.innerHTML
} : null
}
return {
type: 'html',
content: container.innerHTML
}
} else {
return selection.toString().trim().length ? {
type: 'text',
content: selection.toString().trim()
} : null
}
} else {
return null
}
}
const getSpNode = (parent) => {
const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
const inpList = ['input', 'textarea', 'select']
return Array.from(parent.children).some((node) => {
if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
if (inpList.includes(node.nodeName.toLocaleLowerCase()) && node.value.trim().length) return true
if (node.children) {
return getSpNode(node)
}
return false
})
}今年國慶假期終于可以憋在家里了不用出門了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費，睡覺、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風，趕緊起來把文章寫完。
這篇文章比較基礎，在國慶期間的業余時間寫的，這幾天又完善了下，力求把更多的前端所涉及到的關于文件上傳的各種場景和應用都涵蓋了,若有疏漏和問題還請留言斧正和補充。
以下是本文所涉及到的知識點，break or continue ?
原理很簡單，就是根據 http 協議的規范和定義，完成請求消息體的封裝和消息體的解析，然后將二進制內容保存到文件。
我們都知道如果要上傳一個文件，需要把 form 標簽的enctype設置為multipart/form-data,同時method必須為post方法。
那么multipart/form-data表示什么呢？
multipart互聯網上的混合資源，就是資源由多種元素組成，form-data表示可以使用HTML Forms 和 POST 方法上傳文件，具體的定義可以參考RFC 7578。
multipart/form-data 結構
看下 http 請求的消息體
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請求要上傳文件，其中boundary表示分隔符，如果要上傳多個表單項，就要使用boundary分割，每個表單項由———XXX開始，以———XXX結尾。
每一個表單項又由Content-Type和Content-Disposition組成。
Content-Disposition: form-data 為固定值，表示一個表單元素，name 表示表單元素的 名稱，回車換行后面就是name的值，如果是上傳文件就是文件的二進制內容。
Content-Type：表示當前的內容的 MIME 類型，是圖片還是文本還是二進制數據。
解析
客戶端發送請求到服務器后，服務器會收到請求的消息體，然后對消息體進行解析，解析出哪是普通表單哪些是附件。
可能大家馬上能想到通過正則或者字符串處理分割出內容，不過這樣是行不通的，二進制buffer轉化為string,對字符串進行截取后，其索引和字符串是不一致的，所以結果就不會正確，除非上傳的就是字符串。
不過一般情況下不需要自行解析，目前已經有很成熟的三方庫可以使用。
至于如何解析，這個也會占用很大篇幅，后面的文章在詳細說。
使用 form 表單上傳文件
在 ie時代，如果實現一個無刷新的文件上傳那可是費老勁了，大部分都是用 iframe 來實現局部刷新或者使用 flash 插件來搞定，在那個時代 ie 就是最好用的瀏覽器（別無選擇）。
DEMO
這種方式上傳文件，不需要 js ，而且沒有兼容問題，所有瀏覽器都支持，就是體驗很差，導致頁面刷新，頁面其他數據丟失。
HTML
<form method="post" action="http://localhost:8100" enctype="multipart/form-data">
選擇文件:
<input type="file" name="f1"/> input 必須設置 name 屬性，否則數據無法發送<br/>
<br/>
標題：<input type="text" name="title"/><br/><br/><br/>
<button type="submit" id="btn-0">上 傳</button>
</form>
復制代碼服務端文件的保存基于現有的庫koa-body結合 koa2實現服務端文件的保存和數據的返回。
在項目開發中，文件上傳本身和業務無關，代碼基本上都可通用。
在這里我們使用koa-body庫來實現解析和文件的保存。
koa-body 會自動保存文件到系統臨時目錄下，也可以指定保存的文件路徑。
然后在后續中間件內得到已保存的文件的信息，再做二次處理。
NODE
/**
* 服務入口
*/
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存庫
var fs = require('fs');
var Koa = require('koa2');
var app = new Koa();
var port = process.env.PORT || '8100';
var uploadHost= `http://localhost:${port}/uploads/`;
app.use(koaBody({
formidable: {
//設置文件的默認保存目錄，不設置則保存在系統臨時目錄下 os
uploadDir: path.resolve(__dirname, '../static/uploads')
},
multipart: true // 開啟文件上傳，默認是關閉
}));
//開啟靜態文件訪問
app.use(koaStatic(
path.resolve(__dirname, '../static')
));
//文件二次處理，修改名稱
app.use((ctx) => {
var file = ctx.request.files.f1;//得道文件對象
var path = file.path;
var fname = file.name;//原文件名稱
var nextPath = path+fname;
if(file.size>0 && path){
//得到擴展名
var extArr = fname.split('.');
var ext = extArr[extArr.length-1];
var nextPath = path+'.'+ext;
//重命名文件
fs.renameSync(path, nextPath);
}
//以 json 形式輸出上傳文件地址
ctx.body = `{
"fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
}`;
});
/**
* http server
*/
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ...... ');
復制代碼CODE
https://github.com/Bigerfe/fe-learn-code/
期獲取方法
獲取方法用于獲取日期的某個部分（來自日期對象的信息）。下面是最常用的方法（以字母順序排序）：
getTime() 方法返回自 1970 年 1 月 1 日以來的毫秒數：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript getTime()</h2>
<p>JavaScript 中的內部時鐘從 1970 年 1 月 1 日午夜開始計算。</p>
<p>getTime() 函數返回從那時起的毫秒數：</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getTime();
</script>
</body>
</html>getFullYear() 方法以四位數字形式返回日期年份
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript getFullYear()</h2>
<p>getFullYear() 方法返回日期的完整年：</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getFullYear();
</script>
</body>
</html>getMonth() 以數字（0-11）返回日期的月份：
在 JavaScript 中，第一個月（1 月）是月號 0，因此 12 月返回月號 11。
您可以使用名稱數組，并使用 getMonth() 將月份作為名稱返回：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript getMonth()</h2>
<p>getMonth（）方法以 0 到 11 之間的數字返回日期的月份。</p>
<p>要獲得正確的月份，您必須添加 1：</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getMonth() + 1;
</script>
</body>
</html>getDate() 方法以數字（1-31）返回日期的日：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript getDate()</h2>
<p>getDate() 方法以數字（1-31）返回日期的日：</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getDate();
</script>
</body>
</html>getHours() 方法以數字（0-23）返回日期的小時數：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript getHours()</h2>
<p>getHours() 方法以數字（0-23）返回日期的小時：</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getHours();
</script>
</body>
</html>getDay() 方法以數字（0-6）返回日期的星期名（weekday）：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript getDay()</h2>
<p>getDay() 方法將周名作為數字返回：</p>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.getDay();
</script>
</body>
</html>在 JavaScript 中，一周的第一天（0）表示“星期日”，即使世界上的一些國家認為周的第一天是“星期一”。
您可以使用名稱數組，并使用 getDay() 將星期名作為名稱返回：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
