2020 年你應(yīng)該知道的 8 種前端 JavaScr

2020 年你應(yīng)該知道的 8 種前端 JavaScript 趨勢(shì)和工具

文轉(zhuǎn)自：https://www.jianshu.com/p/8f064d69d206

前端開發(fā)人員和技術(shù)人員的數(shù)量逐年增加，而整個(gè)生態(tài)系統(tǒng)渴望實(shí)現(xiàn)標(biāo)準(zhǔn)化。新技術(shù)和工具的出現(xiàn)已經(jīng)改變了游戲規(guī)則。可以肯定地說，總體趨勢(shì)將是 UI 標(biāo)準(zhǔn)化、基于組件的模塊化和組合，這將影響從樣式到測(cè)試甚至狀態(tài)管理的所有方面，并在總體上實(shí)現(xiàn)更好的模塊化。

JavaScript世界日新月異。

前端開發(fā)（和 web 開發(fā)）的世界正在以驚人的速度發(fā)展。今天，如果你沒有領(lǐng)先，或者不是 Webpack、React Hooks、Jest、Vue 和 NG elements，你就會(huì)開始感覺到差距在擴(kuò)大。但是，情況正在發(fā)生變化。

前端開發(fā)人員和技術(shù)人員的數(shù)量逐年增加，而整個(gè)生態(tài)系統(tǒng)渴望實(shí)現(xiàn)標(biāo)準(zhǔn)化。新技術(shù)和工具的出現(xiàn)已經(jīng)改變了游戲規(guī)則。

可以肯定地說，總體趨勢(shì)將是 UI 標(biāo)準(zhǔn)化、基于組件的模塊化和組合，這將影響從樣式到測(cè)試甚至狀態(tài)管理的所有方面，并在總體上實(shí)現(xiàn)更好的模塊化。這將包括圍繞 Web 組件、ES 模塊、面向組件的樣式或狀態(tài)管理工具等構(gòu)建的技術(shù)。

本文是我個(gè)人對(duì)未來幾年前端發(fā)展?fàn)顩r的一種簡短而片面的觀察。當(dāng)然，它遺漏了很多東西，所以請(qǐng)盡管在評(píng)論區(qū)發(fā)表你的見解。

框架無關(guān)的 Web 組件

基本上，這就是未來。為什么？因?yàn)檫@些純 Web 組件與框架無關(guān)，可以在沒有框架的情況下工作，這意味著標(biāo)準(zhǔn)化。因?yàn)樗鼈儾粫?huì)帶來 JS 疲勞，并且受到現(xiàn)代瀏覽器的支持。因?yàn)樗鼈兊陌笮『唾Y源消耗將是最優(yōu)的，而且 VDOM 渲染令人興奮。

這些組件提供自定義元素、Javascript API（允許定義一種新的 HTML 標(biāo)簽）、HTML 模板（用于指定布局），當(dāng)然還有影子 DOM（本質(zhì)上是特定于組件的）。

在這個(gè)領(lǐng)域中，需要了解的主要工具包括 Lit-html （和 Lit-element ）、 StencilJS 、 SvelteJS ，當(dāng)然還有 Bit ，它們都是面向可重用的模塊化組件，而這些組件可以在任何地方直接共享、使用和開發(fā)。

當(dāng)考慮 UI 開發(fā)的未來，以及組件時(shí)代的模塊化、重用性、封裝和標(biāo)準(zhǔn)化原則時(shí)，Web 組件就是答案。

框架戰(zhàn)爭的未來？

是的，在 NPM 下載中，React 目前仍然是女皇

所以我們不會(huì)深入探討“誰更好，為什么更好”，你可以下文中了解到關(guān)于這個(gè)問題的更多答案。相反，我們將后退一步，看看更大的圖景。圍繞組件的前端技術(shù)的總體“市場份額”正在不斷增長。新開發(fā)人員的加入速度也在快速增長，工具的采用空間也越來越大。

那么，從現(xiàn)在開始的 5 年內(nèi)，哪個(gè)框架會(huì)占據(jù)統(tǒng)治地位呢？沒有人知道。但是，可以肯定地說，在原生 JS 生態(tài)系統(tǒng)中，這將是一個(gè)大有可為的方面。在這個(gè)生態(tài)系統(tǒng)中，Web 組件統(tǒng)治了 DOM。React 居 NPM 下載量之后。然而，看看這些數(shù)字。在實(shí)際的 Web 使用中，差距似乎非常小。

令人震驚的，對(duì)吧？

實(shí)際上，Vue 和 React 在實(shí)際應(yīng)用中非常接近

隨著未來與框架無關(guān)的 Web 組件的標(biāo)準(zhǔn)化，人們可能想知道它可能對(duì) UI 框架戰(zhàn)爭產(chǎn)生什么樣的影響。是的，我們知道，React 不是一個(gè)框架……

組件隔離、重用和組合

heBit 組件：未來的代碼共享、重用和開發(fā)

當(dāng)談到在不久的將來的前端開發(fā)和 UI 組件時(shí)，我們不可能忽視 Bit 令人驚喜的承諾和功能。

Bit（開源）隔離并將組件（或任何可重用的 JS 代碼）轉(zhuǎn)換為共享的構(gòu)建塊，你可以在所有項(xiàng)目和應(yīng)用程序中使用和共享這些構(gòu)建塊。神奇的是，你還可以使用 Bit 開發(fā)不同項(xiàng)目的相同組件，同時(shí)完全控制源代碼更改和整個(gè)依賴關(guān)系圖。

簡單地說，使用 Bit，你可以立即在一個(gè)項(xiàng)目中使用來自另一個(gè)項(xiàng)目的組件，開發(fā)和更改來自兩個(gè)項(xiàng)目的組件，并同步更改。當(dāng)作為一個(gè)團(tuán)隊(duì)工作時(shí)，這個(gè)工作流將通過 bit.dev （Bit 的組件中心）得到增強(qiáng)，你可以在其中組織和共享你的團(tuán)隊(duì)代碼。

組件中心提供了組件共享和協(xié)作所需的一切，從出色的搜索和發(fā)現(xiàn)體驗(yàn)到在線組件試用、完整的 CI/CD 支持等等。

使用 Bit，你構(gòu)建的應(yīng)用程序可以完全實(shí)時(shí)地訪問你的團(tuán)隊(duì)和開源社區(qū)編寫的所有組件，并立即共享新組件或建議對(duì)現(xiàn)有組件進(jìn)行更新。

ES 模塊和 CDN

ES 模塊是在瀏覽器中使用模塊的標(biāo)準(zhǔn)，由 ECMAScript 標(biāo)準(zhǔn)化。使用 ES 模塊可以很容易地將功能封裝到模塊中，這些模塊可以通過 CDN 等方式使用。隨著 Firefox 60 的發(fā)布，所有主流瀏覽器都將支持 ES 模塊，Node 團(tuán)隊(duì)正在努力將 ES 模塊支持添加到 Node.js 中。另外，面向 WebAssembly 的 ES 模塊集成將在未來幾年實(shí)現(xiàn)。想象一下，利用 Bit 隔離的 JS 組件，依托 bit.dev 通過 CDN 使用。

組件級(jí)狀態(tài)管理

那么，狀態(tài)管理有什么新變化？最終，我們會(huì)遍歷 Redux 全球商店中的所有東西？

但是，這可能使充分利用組件的模塊化和可重用性變得困難。從這個(gè)角度來看，像 MobX 這樣的項(xiàng)目提供了一種有趣的、更具反應(yīng)性的方法（也可以看下 Unstated 項(xiàng)目）。React 的新 Context API 和 Hooks 意味著你不需要第三方庫，可以在功能組件級(jí)管理狀態(tài)，提高模塊性和可重用性。

因此，展望未來，嘗試更多地從封裝組件的角度來考慮狀態(tài)管理，而不是從全局應(yīng)用程序存儲(chǔ)的角度來考慮。

可組合樣式化組件

借助 Bit 模塊化：獨(dú)立的邏輯和主題組件組合成你的樣式

所以在過去的兩年里，有很多關(guān)于“樣式化組件（styling components）”的討論。從內(nèi)聯(lián) CSS 或 CSS 模塊到 JS 和樣式組件中的 CSS，甚至還有像 stylable 這樣的讓步解決方案，選項(xiàng)很多。

在考慮未來幾年的樣式化時(shí)，我喜歡把樣式化當(dāng)作一種組合。也就是說，我們的組件設(shè)計(jì)系統(tǒng)應(yīng)該同時(shí)包含邏輯組件和主題組件，這些組件可以使用 Bit 之類的工具組合在一起。通過這種方式，你可以創(chuàng)建一個(gè)設(shè)計(jì)系統(tǒng)，根據(jù)需要進(jìn)行演進(jìn)和更改，而不會(huì)將一個(gè)繁瑣的庫強(qiáng)加給不愿意采用它的開發(fā)人員。設(shè)計(jì)工具本身，比如 Sketch an Figma，將利用組件來達(dá)到這個(gè)目的（將它們與 Bit 結(jié)合起來，就得到了最終的組件設(shè)計(jì)系統(tǒng)）。這非常令人興奮。

因此，使用 GraphQL 通過組件為客戶端提供了令人興奮的可能性。使用 Apollo ，你可以輕松構(gòu)建通過 GraphQL 獲取數(shù)據(jù)的 UI 組件。結(jié)合 Bit，你可以直接從正在使用組件的項(xiàng)目導(dǎo)入和開發(fā)這些組件。

通過對(duì) API 的智能管理，可以簡化圍繞數(shù)據(jù)驅(qū)動(dòng)應(yīng)用開發(fā)的工作流，加快開發(fā)速度。所以，展望未來，這絕對(duì)是值得的。

基于組件的設(shè)計(jì)工具

隨著組件成為我們的設(shè)計(jì)系統(tǒng) ，設(shè)計(jì)人員和開發(fā)人員之間的鴻溝將被彌合。從設(shè)計(jì)人員和開發(fā)人員的角度來看，這都是可能的。

Sketch 已經(jīng)在設(shè)計(jì)組件之間創(chuàng)建了依賴關(guān)系鏈接，因此，你可以以模塊化的方式設(shè)計(jì)和更新設(shè)計(jì)。代碼組件的集成已經(jīng)開始出現(xiàn)，這只是時(shí)間問題。 Figma 之類的工具是基于可重用的 UI 元素構(gòu)建的。 Framer 團(tuán)隊(duì) 正在為編寫代碼的設(shè)計(jì)人員構(gòu)建一個(gè)工具，在一定程度上控制將 UI 元素轉(zhuǎn)換為可重用的 React 組件。通過 Bit ，你可以將你設(shè)計(jì)的組件轉(zhuǎn)換為可重用的構(gòu)建塊，這些構(gòu)建塊可以在任何地方被可視化地發(fā)現(xiàn)、使用甚至開發(fā)，從而彌合與開發(fā)人員之間的鴻溝。Bit + 組件設(shè)計(jì)工具未來將產(chǎn)生很大的影響。通過 CDN 使用 Bit 和 Web 組件意味著全面的組合。

要講解爬蟲相關(guān)的知識(shí)如：http、網(wǎng)頁、爬蟲法律等，讓大家對(duì)爬蟲有了一個(gè)比較完善的了解和一些題外的知識(shí)點(diǎn)。

今天這篇文章，我們從今天開始就正式進(jìn)入實(shí)戰(zhàn)階段，后面將會(huì)有更多的實(shí)際案例。

為大家講解了HTTP原理，很多人好奇：好好的講爬蟲和HTTP有什么關(guān)系？其實(shí)我們常說的爬蟲（也叫網(wǎng)絡(luò)爬蟲）就是使用一些網(wǎng)絡(luò)協(xié)議發(fā)起的網(wǎng)絡(luò)請(qǐng)求，而目前使用最多的網(wǎng)絡(luò)協(xié)議便是HTTP/S網(wǎng)絡(luò)協(xié)議簇。

一、Python有哪些網(wǎng)絡(luò)庫

在真實(shí)瀏覽網(wǎng)頁我們是通過鼠標(biāo)點(diǎn)擊網(wǎng)頁然后由瀏覽器幫我們發(fā)起網(wǎng)絡(luò)請(qǐng)求，那在Python中我們又如何發(fā)起網(wǎng)絡(luò)請(qǐng)求的呢？答案當(dāng)然是庫，具體哪些庫？豬哥給大家列一下：

Python2: httplib、httplib2、urllib、urllib2、urllib3、requests
Python3: httplib2、urllib、urllib3、requests

Python網(wǎng)絡(luò)請(qǐng)求庫有點(diǎn)多，而且還看見網(wǎng)上還都有用過的，那他們之間有何關(guān)系？又該如何選擇？

httplib/2：這是一個(gè)Python內(nèi)置http庫，但是它是偏于底層的庫，一般不直接用。而httplib2是一個(gè)基于httplib的第三方庫，比httplib實(shí)現(xiàn)更完整，支持緩存、壓縮等功能。一般這兩個(gè)庫都用不到，如果需要自己封裝網(wǎng)絡(luò)請(qǐng)求可能會(huì)需要用到。
urllib/urllib2/urllib3：urlliib是一個(gè)基于httplib的上層庫，而urllib2和urllib3都是第三方庫，urllib2相對(duì)于urllib增加一些高級(jí)功能，如：HTTP身份驗(yàn)證或Cookie等，在Python3中將urllib2合并到了urllib中。urllib3提供線程安全連接池和文件post等支持，與urllib及urllib2的關(guān)系不大。
requests：requests庫是一個(gè)基于urllib/3的第三方網(wǎng)絡(luò)庫，它的特點(diǎn)是功能強(qiáng)大，API優(yōu)雅。由上圖我們可以看到，對(duì)于http客戶端python官方文檔也推薦我們使用requests庫，實(shí)際工作中requests庫也是使用的比較多的庫。

綜上所述，我們選擇選擇requests庫作為我們爬蟲入門的起點(diǎn)。另外以上的這些庫都是同步網(wǎng)絡(luò)庫，如果需要高并發(fā)請(qǐng)求的話可以使用異步網(wǎng)絡(luò)庫：aiohttp，這個(gè)后面豬哥也會(huì)為大家講解。

二、requests介紹

希望大家永遠(yuǎn)記住：學(xué)任何一門語言，都不要忘記去看看官方文檔。也許官方文檔不是最好的入門教程，但絕對(duì)是最新、最全的教學(xué)文檔！

1.首頁

requests的官方文檔（目前已支持中文）

從首頁中讓HTTP服務(wù)人類這幾個(gè)字中我們便能看出，requests核心宗旨便是讓用戶使用方便，間接表達(dá)了他們?cè)O(shè)計(jì)優(yōu)雅的理念。

注：PEP 20便是鼎鼎大名的Python之禪。

警告：非專業(yè)使用其他 HTTP 庫會(huì)導(dǎo)致危險(xiǎn)的副作用，包括：安全缺陷癥、冗余代碼癥、重新發(fā)明輪子癥、啃文檔癥、抑郁、頭疼、甚至死亡。

2.功能特性

都說requests功能強(qiáng)大，那我們來看看requests到底有哪些功能特性吧：

Keep-Alive & 連接池
國際化域名和 URL
帶持久 Cookie 的會(huì)話
瀏覽器式的 SSL 認(rèn)證
自動(dòng)內(nèi)容解碼
基本/摘要式的身份認(rèn)證
優(yōu)雅的 key/value Cookie
自動(dòng)解壓
Unicode 響應(yīng)體
HTTP(S) 代理支持
文件分塊上傳
流下載
連接超時(shí)
分塊請(qǐng)求
支持 .netrc

requests 完全滿足今日 web 的需求。Requests 支持 Python 2.6—2.7以及3.3—3.7，而且能在 PyPy 下完美運(yùn)行

三、安裝requests

pip install requests

如果是pip3則使用

pip3 install requests

如果你使用anaconda則可以

conda install requests

如果你不想用命令行，可在pycharm中這樣下載庫

四、爬蟲流程

下圖是豬哥之前工作總結(jié)的一個(gè)項(xiàng)目開發(fā)流程，算是比較詳細(xì)，在開發(fā)一個(gè)大型的項(xiàng)目真的需要這么詳細(xì)，不然項(xiàng)目上線出故障或者修改需求都無法做項(xiàng)目復(fù)盤，到時(shí)候程序員就有可能背鍋祭天。。。

言歸正傳，給大家看項(xiàng)目的開發(fā)流程是想引出爬蟲爬取數(shù)據(jù)的流程：

確定需要爬取的網(wǎng)頁
瀏覽器檢查數(shù)據(jù)來源（靜態(tài)網(wǎng)頁or動(dòng)態(tài)加載）
尋找加載數(shù)據(jù)url的參數(shù)規(guī)律（如分頁）
代碼模擬請(qǐng)求爬取數(shù)據(jù)

起點(diǎn)中文網(wǎng)創(chuàng)建于2002年5月，是國內(nèi)最大文學(xué)閱讀與寫作平臺(tái)之一，是國內(nèi)領(lǐng)先的原創(chuàng)文學(xué)門戶網(wǎng)站，隸屬于國內(nèi)最大的數(shù)字內(nèi)容綜合平臺(tái)——閱文集團(tuán)旗下。

總體思路分為三步：

1.分析網(wǎng)頁結(jié)構(gòu)，利用xpath表達(dá)式爬取到所有的文章名字與鏈接，并按文章名字生成文件夾。

import requests
from urllib import request
from lxml import etree
import os
header={
    'User-Agent': 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36'}

class Spider(object):
    def start_request(self):
        url='https://www.qidian.com/all'
        req=request.Request(url,headers=header)
        html=request.urlopen(req).read().decode('utf-8')
        html=etree.HTML(html)
        bigtit_list=html.xpath('//div[@class="book-mid-info"]/h4/a/text()')   ##爬取所有的文章名字
        bigsrc_list=html.xpath('//div[@class="book-mid-info"]/h4/a/@href')

        print(bigtit_list)
        print(bigsrc_list)
        for bigtit,bigsrc in zip(bigtit_list,bigsrc_list):
            if os.path.exists(bigtit)==False:
                os.mkdir(bigtit)
            self.file_data(bigsrc,bigtit)

2.利用文章鏈接，爬取每個(gè)章節(jié)名字與鏈接

 def file_data(self,bigsrc,bigtit):   #詳情頁
        url="http:"+bigsrc
        req=request.Request(url, headers=header)
        html=request.urlopen(req).read().decode('utf-8')
        html=etree.HTML(html)
        print(html)
        Lit_tit_list=html.xpath('//ul[@class="cf"]/li/a/text()')  #爬取每個(gè)章節(jié)名字
        Lit_href_list=html.xpath('//ul[@class="cf"]/li/a/@href')  #每個(gè)章節(jié)鏈接
        for tit,src in zip(Lit_tit_list,Lit_href_list):
            self.finally_file(tit,src,bigtit)

3.利用每個(gè)章節(jié)的鏈接，生成帶有章節(jié)名稱的txt文件，并保存到每個(gè)文章文件夾下。

 def finally_file(self,tit,src,bigtit):
        url="http:" + src
        req=request.Request(url, headers=header)
        html=request.urlopen(req).read().decode('utf-8')
        html=etree.HTML(html)
        text_list=html.xpath('//div[@class="read-content j_readContent"]/p/text()')
        text="\n".join(text_list)
        file_name=bigtit + "\\" + tit + ".txt"
        print("正在抓取文章：" + file_name)
        with open(file_name, 'a', encoding="utf-8") as f:
            f.write(text)

spider=Spider()
spider.start_request()

成功！

生成的文件夾如下圖：

家好，很高興又見面了，我是"高級(jí)前端?進(jìn)階?"，由我?guī)е蠹乙黄痍P(guān)注前端前沿、深入前端底層技術(shù)，大家一起進(jìn)步，也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā)，您的支持是我不斷創(chuàng)作的動(dòng)力。

今天給大家?guī)淼闹黝}是Lit ，即一個(gè)簡單的庫，用于構(gòu)建快速、輕量級(jí)的 Web Component。話不多說，直接進(jìn)入正題！

1.什么是 Lit

Lit 是一個(gè)簡單的庫，用于構(gòu)建快速、輕量級(jí)的 Web Component。 Lit 的核心是一個(gè)消除樣板的組件基類，它提供反應(yīng)式狀態(tài)、作用域樣式和一個(gè)微小、快速且富有表現(xiàn)力的聲明性模板系統(tǒng)。

Lit 具有以下優(yōu)勢(shì)：

簡單/去樣板化：Lit 建立在 Web Component 標(biāo)準(zhǔn)之上，添加了反應(yīng)性、聲明性模板和一些優(yōu)秀功能，以減少樣板文件并使工作更輕松。每個(gè) Lit 功能都經(jīng)過精心設(shè)計(jì)，并考慮到 Web 平臺(tái)的發(fā)展。
快速地/體積小/即時(shí)更新：Lit 的體積約為 5 KB（minified and compressed），有助于保持較小的包體積并縮短加載時(shí)間。而且渲染速度非常快，因?yàn)?Lit 在更新時(shí)只涉及 UI 的動(dòng)態(tài)部分，無需重建虛擬樹并將其與 DOM 進(jìn)行比較。
可互操作/面向未來：每個(gè) Lit 組件都是原生 Web Component，具有超強(qiáng)的互操作性。 Web Component 可以在任何使用 HTML 的地方工作，可以使用任何框架，也可以不使用框架。這使得 Lit 成為構(gòu)建可共享組件、設(shè)計(jì)系統(tǒng)或可維護(hù)、面向未來的網(wǎng)站和應(yīng)用程序的理想選擇。

除了以上特點(diǎn)外，Lit 的優(yōu)勢(shì)還包括：

標(biāo)準(zhǔn)自定義元素：Lit 組件是標(biāo)準(zhǔn)的自定義元素，因此瀏覽器將它們完全視為內(nèi)置元素。在手寫的 HTML 或框架代碼中使用它們，從 CMS 或靜態(tài)站點(diǎn)構(gòu)建器輸出它們，甚至在 JavaScript 中創(chuàng)建實(shí)例
支持范圍樣式（Scoped styles）：Lit 默認(rèn)使用 Shadow DOM 來確定樣式的范圍，從而使得 CSS 選擇器保持簡單，并確保組件的樣式不會(huì)影響頁面上的任何其他樣式，也不受其影響。
支持反應(yīng)性：支持聲明響應(yīng)式屬性來對(duì)組件的 API 和內(nèi)部狀態(tài)進(jìn)行建模。每當(dāng)反應(yīng)性屬性（或相應(yīng)的 HTML 屬性）發(fā)生變化時(shí)，Lit 組件就會(huì)有效地重新渲染。
聲明性模板：Lit 模板基于標(biāo)記的模板文字，簡單、富有表現(xiàn)力且快速，具有 HTML 標(biāo)記和內(nèi)聯(lián)的原生 JavaScript 表達(dá)式。無需學(xué)習(xí)自定義語法，更重要的是無需編譯。

目前 Lit 在 Github 上通過 BSD-3-Clause 協(xié)議開源，有超過 15.1k 的 star、0.8k 的 fork、38.1k 的項(xiàng)目依賴量，代碼貢獻(xiàn)者 160+，npm 周平均下載量 845k，是一個(gè)妥妥的前端優(yōu)質(zhì)開源項(xiàng)目，值得長期關(guān)注。

2.Lit 的使用場景

開發(fā)者可以使用 Lit 構(gòu)建幾乎任何類型的 Web UI！

每個(gè) Lit 組件都是標(biāo)準(zhǔn)的 Web 組件。 Web 組件具有互操作性的超強(qiáng)能力，本身受瀏覽器的支持，可以在任何 HTML 環(huán)境中使用，可以使用任何框架，也可以不依賴框架。

這使得 Lit 成為開發(fā)可共享組件或設(shè)計(jì)系統(tǒng)的理想選擇。 Lit 組件可以跨多個(gè)應(yīng)用程序和站點(diǎn)使用，即使這些應(yīng)用程序和站點(diǎn)構(gòu)建在各種前端堆棧上。使用 Lit 組件的站點(diǎn)開發(fā)人員不需要編寫甚至不需要查看任何 Lit 代碼，可以像使用內(nèi)置 HTML 元素一樣使用這些組件。

Lit 還非常適合用于逐步增強(qiáng)基本 HTML 網(wǎng)站。瀏覽器將識(shí)別標(biāo)記中的 Lit 組件并自動(dòng)初始化，無論站點(diǎn)是手工制作的、通過 CMS 管理的、使用服務(wù)器端框架構(gòu)建的，還是由 Jekyll 或 Eleventy 等工具生成的。

當(dāng)然，開發(fā)者也可以使用 Lit 組件構(gòu)建高度交互、功能豐富的應(yīng)用程序，就像使用 React 或 Vue 等框架一樣。 Lit 的功能和開發(fā)人員體驗(yàn)與這些流行的替代方案相當(dāng)，但 Lit 通過采用瀏覽器的本機(jī)組件模型最大限度地減少鎖定、最大限度地提高靈活性并提高可維護(hù)性。

總結(jié)起來，Lit 非常適用于以下場景：

共享組件：支持可放入任何站點(diǎn)、構(gòu)建在任何堆棧上的交互式內(nèi)容。由于瀏覽器本身就支持 Web Component，因此 Web Component 是完美的解決方案，而且 Lit 使它們易于構(gòu)建。
設(shè)計(jì)系統(tǒng)：設(shè)計(jì)系統(tǒng)可幫助創(chuàng)造始終如一的卓越品牌體驗(yàn)，而 Lit 能夠有效解決跨框前端架、跨團(tuán)隊(duì)的諸多問題。
網(wǎng)站和應(yīng)用程序：使用 Lit 組件逐步增強(qiáng)靜態(tài)站點(diǎn)或構(gòu)建整個(gè)應(yīng)用程序。通過采用 Web Component，Lit 最大限度減少了鎖定并提高了可維護(hù)性。

3.開始使用 Lit

3.1 安裝 Lit

首先需要使用 npm 安裝 Lit：

npm i lit

然后導(dǎo)入 JavaScript 或 TypeScript 文件：

import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";

當(dāng)然，Lit 還可以作為預(yù)構(gòu)建的單文件包提供，從而提高開發(fā)工作流程的靈活性：例如，如果開發(fā)者更愿意下載單個(gè)文件而不是使用 npm 和構(gòu)建工具。

這些包是沒有依賴關(guān)系的標(biāo)準(zhǔn) JavaScript 模塊，任何現(xiàn)代瀏覽器都能夠從 <script type="module"> 中導(dǎo)入并運(yùn)行這些代碼，如下所示：

import {
  LitElement,
  html,
} from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";

3.2 使用 Lit 開發(fā)一個(gè) Web Component

下面使用 Lit 開發(fā)了一個(gè) Web Component：

import {LitElement, html, css} from 'lit';
import {customElement, property, state} from 'lit/decorators.js';
import {play, pause, replay} from './icons.js';
@customElement("my-timer")
// @customElement是類裝飾器工廠將裝飾類定義為自定義元素，即 my-timer
export class MyTimer extends LitElement {
  static styles=css`/* playground-fold */
  :host {
    display: inline-block;
    min-width: 4em;
    text-align: center;
    padding: 0.2em;
    margin: 0.2em 0.1em;
  }
  footer {
    user-select: none;
    font-size: 0.6em;
  }
  @property() duration=60;
  @state() private end: number | null=null;
  @state() private remaining=0;
  render() {
    const {remaining, running}=this;
    const min=Math.floor(remaining / 60000);
    const sec=pad(min, Math.floor(remaining / 1000 % 60));
    const hun=pad(true, Math.floor(remaining % 1000 / 10));
    return html`
      ${min ? `${min}:${sec}` : `${sec}.${hun}`}
      <footer>
        ${remaining===0 ? '' : running ?
          html`<span @click=${this.pause}>${pause}</span>` :
          html`<span @click=${this.start}>${play}</span>`}
        <span @click=${this.reset}>${replay}</span>
      </footer>
    `;
  }
  start() {
    this.end=Date.now() + this.remaining;
    this.tick();
  }
  pause() {
    this.end=null;
  }
  reset() {
    const running=this.running;
    this.remaining=this.duration * 1000;
    this.end=running ? Date.now() + this.remaining : null;
  }
  tick() {
    if (this.running) {
      this.remaining=Math.max(0, this.end! - Date.now());
      requestAnimationFrame(()=> this.tick());
    }
  }
  get running() {
    return this.end && this.remaining;
  }
  connectedCallback() {
    super.connectedCallback();
    this.reset();
  }
}

上面代碼有幾點(diǎn)值得說明：

Lit 的主要功能是 LitElement 基類，它是原生 HTMLElement 的便捷且多功能的擴(kuò)展，主要功能是：管理元素 properties 和 attribute 并渲染 lit-html 模板的基本元素類。
@property()是一個(gè)屬性裝飾器，它創(chuàng)建相應(yīng)屬性值的反應(yīng)性屬性。當(dāng)設(shè)置裝飾屬性時(shí)，元素將更新并渲染。也可以選擇提供 PropertyDeclaration 來配置屬性功能。
@state() 聲明一個(gè)私有或受保護(hù)的響應(yīng)式屬性，代表組件的公共 API 和/或內(nèi)部狀態(tài)，該屬性在更改時(shí)會(huì)觸發(fā)元素的更新，它不會(huì)從相應(yīng)的屬性中反映出來。
默認(rèn)情況下，樣式是有范圍（scope）的，使 CSS 選擇器保持簡單，并確保組件的樣式不會(huì)污染（或被污染）周圍的上下文。
Lit 富有表現(xiàn)力的聲明性模板（利用 JavaScript 標(biāo)記模板文字）可以輕松描述組件的渲染方式。
Lit 在普通 JavaScript 表現(xiàn)良好，開發(fā)者可以通過使用裝飾器和類型聲明來使用 TypeScript 以獲得更好的人體工程學(xué)效果。

聲明了 my-timer 這個(gè) Web Component 后，接著就可以在 HTML 中引入這個(gè) my-timer 來直接使用：

<!doctype html>
<head>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@1,800&display=swap" rel="stylesheet">
  <script type="module" src="./my-timer.js"></script>
  <style>
    body {
      font-family: 'JetBrains Mono', monospace;
      font-size: 36px;
    }
  </style>
</head>
<body>
  <my-timer duration="7"></my-timer>
  <my-timer duration="60"></my-timer>
  <my-timer duration="300"></my-timer>
</body>

當(dāng)然，Lit 還包括：指令（Directives）、Shadow DOM、生命周期（Lifecycle）、上下文（Context）、Lit 服務(wù)端渲染（Lit SSR）、前端框架集成等高級(jí)用法，這些可以在文末的參考資料中直接使用，本文不再過多展開。

4.本文總結(jié)

本文主要和大家介紹 Lit ，即一個(gè)簡單的庫，用于構(gòu)建快速、輕量級(jí)的 Web Component。相信通過本文的閱讀，大家對(duì) Lit 會(huì)有一個(gè)初步的了解。

因?yàn)槠邢蓿P(guān)于 Lit 的更多用法和特性文章并沒有過多展開，如果有興趣，可以在我的主頁繼續(xù)閱讀，同時(shí)文末的參考資料提供了大量優(yōu)秀文檔以供學(xué)習(xí)。最后，歡迎大家點(diǎn)贊、評(píng)論、轉(zhuǎn)發(fā)、收藏，您的支持是我不斷創(chuàng)作的動(dòng)力。

參考資料

https://github.com/lit/lit

https://lit.dev/tutorials/intro-to-lit/

https://lit.dev/docs/

https://www.npmjs.com/package/lit

https://lit.dev/docs/frameworks/react/

https://coderpad.io/blog/development/web-components-101-framework-comparison/

https://medium.com/front-end-weekly/web-components-lwc-stencil-and-lit-by-numbers-b158efcf82f7

在線咨詢

上一篇：Flicking，一款神奇的 JavaScript
下一篇：純干貨：node.js入門教程以及中文學(xué)習(xí)資源大搜羅

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商