1、獲取某個(gè)日期位于當(dāng)年的第幾天

const dayOfYear = (date) =>
  Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date('2023,01,01'));

2、灰度算法

效果
實(shí)現(xiàn)
將RGB顏色灰度化（基于光感加權(quán)平均）

const gray = (r,g,b) =>0.2126*r+0.7152*g+0.0722*b;
gray(50,100,150);

3、對(duì)象picker實(shí)現(xiàn)

const pick=(obj,...props)=>Object.fromEntries(Object.entries(obj).filter(([k])=>props.includes(k)))
pick({a:1,b:2,c:3},'a','b')//{a: 1, b: 2}

Object.fromEntries擴(kuò)展應(yīng)用
fromEntries可以用來對(duì)象過濾，Map 轉(zhuǎn) Object，url的search參數(shù)轉(zhuǎn)換

4、隨機(jī)顏色

const randomColor=()=>'#'+Math.floor(Math.random()*0xffffff).toString(16).padEnd(6,'0')

//padEnd填充字符0，向前方補(bǔ)充至6位

5、隨機(jī)字符串

const randomString=()=>Math.random().toString(36).slice(2)
//36進(jìn)制由0-9，A-Z組成，toString(36)即轉(zhuǎn)換成36進(jìn)制的字符串，一般都是為了生成不重復(fù)的隨機(jī)數(shù)才調(diào)用。
//.slice(2)是去掉0.

6、去掉元素標(biāo)記

const removeTag=(fragment)=>new DOMParser().parseFromString(fragment,'text/html').body.textContent||''
removeTag('<em>DOMParser</em>')

7、禁用復(fù)制

監(jiān)聽copy事件，禁用默認(rèn)行為

如果想復(fù)制但是復(fù)制不了可以用這個(gè)

8、JWT加密

以項(xiàng)目token為例

9、判斷是否是async函數(shù)

上面實(shí)現(xiàn)是小問題，主要是下面擴(kuò)展

因?yàn)橛锌蜻x的屬性存在，所以O(shè)bject.prototype.toString.call后面那一段會(huì)改

在ES6里，存在這種改值方式

10、判斷一個(gè)值是否是Promise Like

function promiseLike(value){
	return value!==null&&(typeof value==='object' ||typeof value==='function')&&(typeof value.then==='function')
}

所有promise都是promise A+規(guī)范的實(shí)現(xiàn)，jQuery的$.ajax也是
？根據(jù)規(guī)范，promise A+是一個(gè)對(duì)象或函數(shù)，且value不等于null

11、判斷是否是奇數(shù)

function isOdd(value){
	return value%2===1 || value%2===-1
}

需要考慮數(shù)是任意值時(shí)，做什么處理，
比方說假如這個(gè)數(shù)是負(fù)數(shù)，用歐幾里得的求余法，即

a % b = a - b * p
//p為a/b的整數(shù)部分

還有一個(gè)可以考慮到的是，假如傳入true

12、代碼著色

第三方庫(kù)highlight.js，最好手動(dòng)告訴這一塊代碼是什么語(yǔ)言
分析原理↓
給代碼最外部元素設(shè)置兩個(gè)樣式hls和根據(jù)不同語(yǔ)言帶的css（如language-css），
然后里面遞歸替換

value就可以直接插入

13、promise回調(diào)地獄

promise嵌套多重，則需要平級(jí)展開，鏈?zhǔn)?then

14、方法傳入?yún)?shù)過多可以這么改

15、Switch優(yōu)化成映射

??
https://blog.csdn.net/yun_master/article/details/115015113

16、搜索框封裝

假如有朝一日需要自己實(shí)現(xiàn)表單，最好使用@submit提交，button上寫明type=“submit”

console去除工具terser

17、無痕窗口真的無痕嗎

瀏覽器指紋，全世界很難找出兩個(gè)完全一樣的設(shè)備環(huán)境（ip，瀏覽器版本，瀏覽器語(yǔ)言偏好，時(shí)區(qū)），通過這些信息生成哈希值，盡管無痕沒有任何登錄，他也能知道是誰(shuí)

應(yīng)用是，個(gè)性化廣告，防刷頻
讀取用戶文件指紋，用fingerprintjs

18、幾個(gè)HTML不常用屬性

1、移動(dòng)端鍵盤彈出類型inputmode
2、視頻預(yù)覽圖片

<video src="" poster="圖片地址"></video>

3、multiple，文件多選，下拉多選

4、accesskey，按下b可以聚焦

<input type="text" accesskey="b">

4、tableindex，按下tab的切換順序

<input type="text" tabindex="3">
<input type="text" tabindex="2">
<input type="text" tabindex="1">

5、spellcheck拼寫檢查，通常用于富文本

19、資源提示符

rel后的總共有
async
defer
preload
prefetch
prerender
preconnect

前兩個(gè)是附著在script元素上的

遇到script暫停解析，通過另一個(gè)網(wǎng)絡(luò)線程，去遠(yuǎn)程獲取js文件，再去執(zhí)行js，完成同步代碼后，繼續(xù)解析dom。主線程會(huì)有空窗期。一般js寫在body元素末尾，保證dom解析完后執(zhí)行js，現(xiàn)在有兩個(gè)更好的辦法：
遇到script，去遠(yuǎn)程獲取js文件，不會(huì)暫停解析
1、async
這個(gè)不一定dom全部加載完成

2、defer
有點(diǎn)像DOMContentLoaded，主線程把dom元素全部解析完成后，再去運(yùn)行js。這個(gè)一定是dom完成了

async和defer發(fā)生時(shí)間是在DOMContentLoaded之前

<script type="module">
他的資源提示符默認(rèn)就是defer

——————
link元素上的資源提示符，preload和prefetch

<link rel="preload">

async和defer是拿資源并且要執(zhí)行，preload和prefetch是拿資源但是不執(zhí)行，可以拿任何資源js css和圖片
1、preload
不會(huì)阻塞dom解析，會(huì)有緩存，優(yōu)先級(jí)很高，這個(gè)資源馬上會(huì)用到，發(fā)出的網(wǎng)絡(luò)請(qǐng)求時(shí)間很早

2、prefetch
優(yōu)先級(jí)低，會(huì)在空閑的時(shí)候去取

其他頁(yè)面用到的，preload，自身頁(yè)面用到的prefetch，閑著也是閑著

20、找到性能瓶頸

Main表示渲染主線程

一個(gè)方格就是一個(gè)任務(wù)，紅色三角表示卡頓
縱向是調(diào)用棧

21、打包體積的分析優(yōu)化

package.json
"build": "vue-cli-service build --mode prod --report"

1、cdn優(yōu)化，使用cdn服務(wù)器，跨項(xiàng)目的共享同一個(gè)js，js一般設(shè)置緩存。用戶訪問第一個(gè)項(xiàng)目，緩存一下，第二個(gè)項(xiàng)目就不用重新加載js
生產(chǎn)環(huán)境引入cdn寫法

生產(chǎn)環(huán)境不參入打包的寫法
externals

2、core.js體積也很大，是因?yàn)轫?xiàng)目里有babel，對(duì)項(xiàng)目進(jìn)行向下降級(jí)，es5向下
生成兩套打包，一套針對(duì)高級(jí)瀏覽器，一套針對(duì)低級(jí)IE瀏覽器

紅框加上后會(huì)進(jìn)行兩次打包，
高版本的打包里部分script上有nomodule屬性，直接不加載
低版本 type="module"不認(rèn)識(shí)，不加載，低版本不認(rèn)識(shí)nomodule，忽略，從而去加載

22、幻影依賴

在package.json根本沒有導(dǎo)入的庫(kù)，可以直接import
1、A依賴B庫(kù)，A庫(kù)升級(jí)，B庫(kù)也莫名其妙升級(jí)
2、依賴丟失，開發(fā)依賴有，生產(chǎn)依賴沒有

幻影依賴的原因：

1、node_module是樹結(jié)構(gòu)，如上圖紅圈所示，本來一個(gè)就結(jié)束的依賴，樹狀結(jié)構(gòu)必須兩個(gè)
2、所以后來出現(xiàn)了yarn

node js有個(gè)查詢報(bào)的流程，比方說，紫色依賴深綠和深藍(lán)，它的代碼在require或者import時(shí)，在自身目錄找不到，它就會(huì)往上找，但是這樣還是有幻影依賴，因此有了pnpm
3、pnpm
雖然是樹狀，但是通過鏈接的方式

pnpm為什么能夠不占磁盤空間？硬鏈接和軟鏈接

我們的文件數(shù)據(jù)都存在磁盤上，創(chuàng)建了文件，分配了個(gè)磁盤空間，這個(gè)文件是個(gè)指針指向磁盤空間，通過文件A創(chuàng)建硬鏈接，生成文件B，因?yàn)槭怯叉溄?，所以，B同A，A文件沒了不會(huì)影響B(tài)
軟鏈接類似快捷方式，B指向的是文件A，A文件沒了影響B(tài)

23、取色器

<style>
        body{
            background: url(https://i.loli.net/2019/11/17/GAYyzeKsiWjP5qO.jpg) no-repeat;
        }
        .box {
            width: 100px;
            height: 100px;
        }
    </style>
    <button id="start-button">取色</button>
    <div class="box"></div>
    <script>
        const btn = document.querySelector('button')
        const box = document.querySelector('.box')

        btn.onclick = async () => {
            if (!window.EyeDropper) {
                box.textContent = 'Your browser does not support the EyeDropper API';
                return;
            }
            const dropper = new EyeDropper()
            try {
                const result = await dropper.open()
                console.log(result)
                box.style.backgroundColor = box.textContent = result.sRGBHex;
            } catch (e) {
                console.log('user canceled')//按了esc
            }
        }
    </script>

24、lorem

p*5>lorem1
https://picsum.photos/
https://picsum.photos/200/300，隨機(jī)生成300寬200高圖片
https://picsum.photos/200/300?r=1，加參數(shù)則生成不同圖片

25、cookie

設(shè)置cookie的時(shí)候會(huì)去設(shè)置一個(gè)SameSite屬性
它的作用就是限制跨站請(qǐng)求，img、iframe、Ajax，假如img之前瀏覽過相關(guān)網(wǎng)站，很有可能就有對(duì)應(yīng)的cookie，沒有sameSite就會(huì)默認(rèn)發(fā)送其他iframe、Ajax的cookie，會(huì)造成CSRF攻擊
請(qǐng)求的地址和頁(yè)面地址不一樣，就需要用到SameSite，會(huì)對(duì)請(qǐng)求做出限制，限制cookie發(fā)還是不發(fā)

同站不受sameSite限制，第五個(gè)是公共后綴問題

具體是怎么限制的呢？
SameSite為none時(shí)，在set-cookie時(shí)候，cookie必須為secure（https）傳輸，否則無效，會(huì)造成CSRF攻擊
SameSite為L(zhǎng)ax時(shí)，寬松，會(huì)阻止所有的跨站請(qǐng)求，阻止發(fā)送cookie，但對(duì)超鏈接放行
SameSite為Strict時(shí)，會(huì)阻止所有的跨站請(qǐng)求，阻止發(fā)送cookie，

因?yàn)榫退阒囟ㄏ虻搅诵碌木W(wǎng)站，但是上一個(gè)網(wǎng)站的cookie還是發(fā)送到新網(wǎng)站了。如果新網(wǎng)站是惡意網(wǎng)站，它就可以利用這個(gè)正確的cookie偽造用戶身份。

26、公共后綴

站點(diǎn)域是xxx.公共后綴

27、控制臺(tái)動(dòng)畫

28、版本號(hào)正則

29、埋點(diǎn)

數(shù)據(jù)埋點(diǎn)是為了監(jiān)控服務(wù)的，監(jiān)控用戶行為，收集各種報(bào)錯(cuò)信息
三種服務(wù)監(jiān)控：錯(cuò)誤監(jiān)控、性能監(jiān)控（白屏FP、卡頓、FCP、LCS）、行為監(jiān)控
https://zhuanlan.zhihu.com/p/265948624
網(wǎng)絡(luò)傳輸給監(jiān)控中心，可能會(huì)有預(yù)警
阿里云的ARMS，神策，sentry
數(shù)據(jù)埋點(diǎn)分為侵入（技術(shù)代價(jià)大）和非侵入（我們對(duì)接的浙政釘專有釘釘都是非侵入）

30、web性能指標(biāo)

RAIL模型，

https://web.dev/fcp/
列了部分指標(biāo)

31、i18n、L10n、g11n

i18n國(guó)際化，internationalization
L10n本地化，localization
g11n全球化，globalization
不僅僅是翻譯，
1、文字表達(dá)，大陸區(qū)是程序，臺(tái)灣是程式，繁體簡(jiǎn)體
2、數(shù)字表達(dá)，貨幣書寫，每三個(gè)空一格，我們是每四個(gè)空一格
3、敏感詞
4、配色
5、布局，部分國(guó)家從右到左，確認(rèn)和取消按鈕
6、單擊雙擊
7、落后國(guó)家，電腦屏幕小，布局、交互都有區(qū)別
等等…
獲取地域信息，可以從http頭里的accept-lang，或者是h5里面的navigator.language

vuei18n工具

32、publicPath和base

靜態(tài)資源路徑配置
publicPath: ‘/admin’,//是加在部署地址后的。協(xié)議域名端口+/rxlz+資源地址css/js

路由路徑配置，加在路由地址前
base: “/admin”,

33、垃圾回收和內(nèi)存泄露

一個(gè)應(yīng)用程序，運(yùn)行過程中一定需要內(nèi)存，但是運(yùn)行完這塊內(nèi)存不需要了，需要垃圾回收機(jī)制，
但是問題是，根本沒有垃圾回收器這種東西去回收內(nèi)存，
它無法理解哪一塊代碼需要，哪一塊代碼不需要，
垃圾回收器的范圍<垃圾，所以會(huì)有多余的內(nèi)存

垃圾回收不掉，內(nèi)存泄漏
算法
1、引用計(jì)數(shù)（會(huì)導(dǎo)致垃圾回收器的范圍更小，所以不怎么用）
2、標(biāo)記清除，（新生代/舊生代，星歷圖）

跟內(nèi)存泄露有關(guān)的閉包，原因就是它無法理解是否還需要這個(gè)變量

34、DNS解析和優(yōu)化

DNS解析過程耗費(fèi)時(shí)間，有本地緩存

解析DNS會(huì)打斷解析HTML

異步DNS解析，不在主線程解析

//在head里面盡早寫明
<link rel="dns-prefetch" href="https://www.baidu.com">

后面nodejs沒看懂
https://www.douyin.com/user/self?modal_id=7233335691046980921&showTab=favorite_collection

35、私有字段

老版私有字段，包括Vue也是這么寫

es6 Symbol
新版的私有字段，加#

a.#abc會(huì)報(bào)錯(cuò)

36、行為驗(yàn)證碼

行為驗(yàn)證碼驗(yàn)證是要放在服務(wù)器端而不是客戶端，因?yàn)橛蠴CR識(shí)別，所以驗(yàn)證碼升級(jí)
google/recaptcha
現(xiàn)在點(diǎn)擊驗(yàn)證碼會(huì)把人工識(shí)別結(jié)果作為AI訓(xùn)練的工作集

37、輪播圖

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
        width: 500px;
        height: 300px;
        margin: 10px auto;
        overflow: hidden;
        position: relative;
    }

    .container .carousel img {
        width: 500px;
        height: 300px;
    }

    .carousel {
        width: 100%;
        height: 100%;
        display: flex;
        /* transition: all .5s; */
    }

    .indicator {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        z-index: 2;
    }

    .indicator span {
        width: 20px;
        height: 20px;
        border: 2px solid #ccc;
        margin: 0 3px;
        border-radius: 50%;
        cursor: pointer;
    }

    .indicator .active {
        background-color: #fff;
        border-color: #fff;
    }

    .arrow {
        width: 100%;
        height: 100%;
        padding: 0 20px;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .arrow img {
        width: 30px;
        height: 30px;
        cursor: pointer;
    }
</style>

<body>
<!--  -->
<div class="container"  onmouseout="outClick()" onmouseover="οnmοuseοver()">
    <div class="carousel">
        <div class="item">
            <img src="https://picsum.photos/300/200?r=1" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/300/200?r=2" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/300/200?r=3" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/300/200?r=4" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/300/200?r=5" alt="">
        </div>
        <div class="item">
            <img src="https://picsum.photos/300/200?r=6" alt="">
        </div>
    </div>
    <div class="indicator">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="arrow">
        <img src="./left.png" alt="" class="arrow-left">
        <img src="./right.png" alt="" class="arrow-right">
    </div>
</div>
<script>
    // 定義一個(gè)當(dāng)前選中第幾張圖片的index(默認(rèn)選中第一個(gè))
    let currIndex=0
    // 定義一個(gè)定時(shí)器對(duì)象
    let  interObj=null
    //  獲取相關(guān)元素
    let doms={
        arrowLeft:document.querySelector('.arrow-left'),//左箭頭
        arrowRight:document.querySelector('.arrow-right'),//右箭頭
        indicator:document.querySelectorAll('.indicator span'),//所有的指示器按鈕
        carousel:document.querySelector('.carousel'),//輪播圖容器
    }
    // 初始化輪播圖
    function init(){
        // 將第一張圖片實(shí)行定位使其脫離文檔流，并且使相對(duì)輪播圖容器其往左移動(dòng)一張圖片的單位
        document.querySelectorAll('.carousel .item')[0].style.transform='translateX(-100%)';
        document.querySelectorAll('.carousel .item')[0].style.position='absolute';
    }
    init()

    // 定義輪播圖滾動(dòng)的方法,并接收當(dāng)前處于第幾張圖片的參數(shù)
    function moveTo(index){
        // 進(jìn)行輪播圖容器位置移動(dòng)
        doms.carousel.style.transform=`translateX(-${index}00%)`
        //添加過渡  /* transition: all .5s; */
        doms.carousel.style.transition='all .5s'
        // 去除前一個(gè)選中的指示點(diǎn)
        let active=document.querySelector('.active')
        active.classList.remove('active')
        // 添加當(dāng)前選中的指示器
        doms.indicator[index].classList.add('active')
        currIndex=index
    }
    // 對(duì)指示器添加點(diǎn)擊方法
    doms.indicator.forEach((item,index)=>{
        item.onclick=function(){
            moveTo(index)
        }
    })
    // 定義向左滾動(dòng)的方法
    function leftNext(){
        // 先判斷當(dāng)前選中的是否是處于0這個(gè)位置
        if(currIndex==0){
            // 將輪播圖容器迅速至于最后一張圖的位置
            doms.carousel.style.transform=`translateX(-${doms.indicator.length}00%)`
            // 去除過渡
            doms.carousel.style.transition='none'
            // 由于快速的更新css樣式，瀏覽器來不及渲染，所以需要強(qiáng)制使瀏覽器進(jìn)行渲染
            // 強(qiáng)制渲染
            // 只要讀取元素的尺寸,位置就會(huì)導(dǎo)致瀏覽器的回流,這一回流就會(huì)重新渲染
            doms.carousel.clientHeight;
            moveTo(doms.indicator.length-1)
        }else{
            moveTo(currIndex-1)
        }
    }
    // 定義向右滾動(dòng)的方法
    function rightNext(){
        // 先判斷當(dāng)前選中的是否是處于最后的位置
        if(currIndex==doms.indicator.length-1){
            // 將輪播圖容器迅速至于第一張的位置
            doms.carousel.style.transform=`translateX(100%)`
            // 去除過渡
            doms.carousel.style.transition='none'
            // 由于快速的更新css樣式，瀏覽器來不及渲染，所以需要強(qiáng)制使瀏覽器進(jìn)行渲染
            // 強(qiáng)制渲染
            // 只要讀取元素的尺寸,位置就會(huì)導(dǎo)致瀏覽器的回流,這一回流就會(huì)重新渲染
            doms.carousel.clientHeight;
            moveTo(0)
        }else{
            moveTo(currIndex+1)
        }
    }
    // 給左右箭頭添加點(diǎn)擊事件
    doms.arrowLeft.onclick=leftNext
    doms.arrowRight.onclick=rightNext

    // 定義自動(dòng)輪播的方法
    function pollingInt(){
        interObj=setInterval(()=>{
            rightNext()
        },2000)
    }

    pollingInt()
    // 鼠標(biāo)移出，打開定時(shí)器
    function outClick(){
        pollingInt()
    }
    // 鼠標(biāo)移入，清楚定時(shí)器
    function οnmοuseοver(){
        clearInterval(interObj)
    }
</script>
</body>

</html>

38、function和class互轉(zhuǎn)

60分答卷

滿分這么轉(zhuǎn)換

//在ES6里面用類語(yǔ)法，整個(gè)代碼是在嚴(yán)格模式下
"use strict";
//在類里，只能通過new Example來調(diào)用，不能通過Example('abc')來調(diào)用
function Example(name){
	if(!(this inctance Example)){//this是構(gòu)造函數(shù)的實(shí)例
		throw new TypeError(`Class constructor Example cannot be invoked without 'new'`)
	}
	
	this.name=name
}
//Example.prototype.func=function(){//類里面的方法func不能被枚舉，
//	console.log(this.name)
//}
Object.defineProperty(Example.prototype.func,'func',{
	value:()=>{
		if(!(this inctance Example)){//不可通過new調(diào)用，看this指向，正常情況下指向構(gòu)造函數(shù)的實(shí)例
			throw new TypeError(`is not a constructor`)
		}
		console.log(this.name)
	},
	enumerable:false//不能被枚舉
})

Example(‘a(chǎn)bc’)直接調(diào)用報(bào)錯(cuò)

枚舉差異，類里面的方法func不能被枚舉

在類里面不能↓

39、promise手動(dòng)實(shí)現(xiàn)

class MyPromise{
    constructor(executor){
        const resolve=()=>{}
        const reject=()=>{}
        executor(resolve,reject)
    }
    resolve(){//放在原型鏈上是不太合適的。this會(huì)有問題
        
    }
}

const p=new Promise((resolve,reject)=>{//要啟動(dòng)promise，就是啟動(dòng)任務(wù)，就是這個(gè)函數(shù)，即執(zhí)行器，這一塊同步
    resolve(1)
})

40、flex一些不怎么用的屬性

align-self獨(dú)自
order排序
flex-flow: column wrap
align-content整體
flex-wrap：wrap-reverse

41、判斷是不是數(shù)組（優(yōu)缺點(diǎn)）

已知三種
1、Object.prototype.toString.call()

function(arr){
	return Object.prototype.toString.call(arr)==='[object Array]'
}

現(xiàn)在判斷會(huì)有缺陷，以下obj返回true，可以手動(dòng)修改值

const obj={
	[Symbol.toStringTag]:'Array'
}

2、arr instanceof Array
判斷對(duì)象原型鏈上有沒有array的原型

優(yōu)點(diǎn)是可以對(duì)原型鏈上的，精準(zhǔn)判斷類型

class A extends Array{}
const obj=new A()

obj instanceof Array//true

缺點(diǎn)是
①改變對(duì)象原型為數(shù)組原型

const obj={}
Object.setPrototypeOf(obj,Array.prototype)//改變對(duì)象原型，true

②iframe
iframe會(huì)在頁(yè)面生成獨(dú)立的一套documents還有window

const Array1=window.array;
const iframe=document.querySelector('iframe')
const Array2=iframe.contentWindow.Array

Array1===Array2//false
//會(huì)導(dǎo)致
const arr =new Array2()
//arr instanceof Array//false，因?yàn)樽x的是window里面的Array而不是iframe里的Array

數(shù)組是一個(gè)特殊存儲(chǔ)結(jié)構(gòu)的對(duì)象
3、Array.isArray
判斷有沒有經(jīng)過Array的構(gòu)造函數(shù)

42、filter過濾改成find直接獲取對(duì)象，調(diào)整書寫習(xí)慣

43、開源庫(kù)中的package.json

字段分為
1、標(biāo)準(zhǔn)字段，npm或者node官方能識(shí)別的字段

main字段會(huì)影響node模塊的查找，導(dǎo)入一個(gè)包的時(shí)候，無論是使用import導(dǎo)入還是require導(dǎo)入（第44點(diǎn)），他會(huì)找到文件夾里的package.json，然后找到main字段，讀取到底用的是哪個(gè)模塊

標(biāo)準(zhǔn)字段，開發(fā)完的發(fā)布文件/文件夾

會(huì)影響到npm上的搜索結(jié)果

作者、證書、bug反饋

影響一個(gè)npm展示插件主頁(yè)的地方

2、非標(biāo)準(zhǔn)字段，開發(fā)者自行擴(kuò)展的字段

module是非標(biāo)字段，webpack rollup這些構(gòu)建工具會(huì)讀，往往需要樹搖，假如它們讀main，有可能會(huì)讀到一個(gè)已經(jīng)被降級(jí)的代碼（es6轉(zhuǎn)es5），并不是esmodule，不利于樹搖優(yōu)化，有沒有支持ESmodule的一個(gè)文件，假如有就會(huì)去讀這個(gè)文件去樹搖優(yōu)化

給ts使用的非標(biāo)字段，可以讀到包里的類型定義文件

buildOptions是第三方插件，比如Vue，自定義的非標(biāo)字段，會(huì)影響到rollup打包的參數(shù)，formats，表示打包的時(shí)候要打包成兩種格式

給構(gòu)建工具看的，標(biāo)識(shí)包里面的副作用

單純提供信息，展示倉(cāng)庫(kù)，倉(cāng)庫(kù)目錄

44、node模塊查找方式

模塊查找有兩種方式，一種是classic，一種是node
node模塊查找分四種：
1、文件查找
./或者…/或者/，進(jìn)入文件查找，假如文件不存在，自動(dòng)補(bǔ)上.js再去搜索，然后是補(bǔ)上.json再去搜索，假如都沒有進(jìn)入第二步
2、文件夾查找
查找package.json文件，看文件配置有沒有main，看main寫的文件能否找到，假如失敗，直接查找index.js，或者index.json

3、內(nèi)置模塊
先查看是不是內(nèi)置模塊，fs、path、http等，require(‘fs’)
4、第三方模塊
require(‘a(chǎn)’)

會(huì)從node_module里去找，假如有就去看a有沒有，假如沒有就會(huì)往上級(jí)去找，又會(huì)進(jìn)入1和2的循環(huán)

45、漸進(jìn)式圖片

1、原生
圖片本身就支持漸進(jìn)式
jpg圖片，本身就支持多個(gè)幀，第一幀是比較小的內(nèi)容，第二幀是清晰的內(nèi)容，
即使做成漸進(jìn)式，文件大小不會(huì)增加多少

1)兼容性問題，有些瀏覽器不支持
2)沒有圖片源
2、封裝

傳子組件一張清晰一張模糊
子組件↓

46、打印對(duì)象的bug

兩次打印都是2、2，為什么？
瀏覽器做的小處理，為了節(jié)省內(nèi)存空間，不會(huì)吧對(duì)象所有內(nèi)容展示出來，而是折疊展示，第一次點(diǎn)擊的時(shí)候才會(huì)去計(jì)算
假如收起來，再進(jìn)行++，再展開又是加完后的數(shù)了，假如再收起來，結(jié)果就不變了，后面復(fù)用了

結(jié)論是，調(diào)試用斷點(diǎn)

47、ES2023中的數(shù)組純函數(shù)

原數(shù)組會(huì)變化，函數(shù)式編程環(huán)境我們不希望變化，數(shù)據(jù)不可變

原數(shù)組不變
除此之外還有toSorted、toReversed、toSpliced

新增with方法

48、動(dòng)態(tài)執(zhí)行js

字符串當(dāng)成js來執(zhí)行

1、eval

同步代碼，當(dāng)前作用域，先2再sync

2、setTimeOut

setTimeOut(code,0)

異步，全局作用域，先sync再1
3、創(chuàng)建script元素

同步，全局作用域，先1再sync，額外標(biāo)簽
4、創(chuàng)建function

創(chuàng)建了這個(gè)函數(shù)的函數(shù)體
同步，全局作用域，先1再sync，這個(gè)和3一樣，更好一點(diǎn)

49、使修改數(shù)組本身的方法，不修改數(shù)組本身

之前沒有ES2023的時(shí)候，思路都是創(chuàng)建副本

const sorted1 = arr.slice().sort();
const sorted2 = [...arr].sort();
const sorted3 = Array.from(arr).sort();

50、對(duì)鄙人來說冷門的css選擇器

2020年
::focus-with，能非常方便處理獲取焦點(diǎn)狀態(tài)， 當(dāng)元素本身或其后代獲得焦點(diǎn)時(shí)，:focus-within偽類的元素就會(huì)有效。

:has
需求是，span元素后的兄弟元素帶有自定義屬性data-required才打*


::first-letter，首字母下沉

::selection，選中文字后的樣式

:where簡(jiǎn)化css重復(fù)代碼，:has和:is
此文必看醍醐灌頂，部分屬性在scope里無法作用是因?yàn)椴]有 data-v-xxx 這樣的隨機(jī)屬性
https://blog.csdn.net/qq_43624878/article/details/127045426文章來源地址http://www.zghlxwxcb.cn/news/detail-621472.html

到了這里，關(guān)于近期分享學(xué)習(xí)心得2的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！