<dfn id="hx5t3"><strike id="hx5t3"><em id="hx5t3"></em></strike></dfn>

    <thead id="hx5t3"></thead><nobr id="hx5t3"><font id="hx5t3"><rp id="hx5t3"></rp></font></nobr>

    <listing id="hx5t3"></listing>

    <var id="hx5t3"></var>
    <big id="hx5t3"></big>

      
      

      <output id="hx5t3"><ruby id="hx5t3"></ruby></output>
      <menuitem id="hx5t3"><dfn id="hx5t3"></dfn></menuitem>

      <big id="hx5t3"></big>

        夜盡天明

        夜盡天明 查看完整檔案

        廣州編輯  |  填寫畢業院校  |  填寫所在公司/組織 github.com/biaochenxuying/blog 編輯
        編輯

        公眾號:【全棧修煉】,大前端開發相關的技術文章,熱點資源,全棧程序員的成長之路。

        公眾號:【前端GitHub】,專注于挖掘優秀的前端開源項目,抹平你的前端信息不對稱。

        轉載文章,請聯系筆者。

        個人動態

        夜盡天明 發布了文章 · 3月22日

        推薦 7 個 Vue2、Vue3 源碼解密分析的重磅開源項目 ??

        大家好,我是你們的 貓哥,那個不喜歡吃魚、又不喜歡喵 的超級貓 ~

        1. 為什么要學習源碼 ?

        1. 閱讀優秀的代碼的目的是讓我們能夠寫出優秀的代碼。
        2. 不給自己設限,不要讓你周圍人的技術上限成為你的上限。

        其實就跟我們寫作文一樣,你看的高分作文越多,寫出高分作文的概率就越大。

        基于現在的程序員工作模式(模塊化開發,只需要拿到需求做自己的部分),別說看源碼,甚至就連項目里的代碼都懶的去看,我認識的很多程序員就是這樣的,一個項目摸了兩三年,你要問他項目中 webpack 都干了哪些事情,他的回答是不知道,反而趾高氣揚的告訴你,那些他從來都用不上,看了也沒什么用,也看不懂,這里省略內心千字臟文。

        閱讀主要目的 是為了幫助我們 積累素材,不要書到用時方恨少,看到美女我們應該能有一萬種詞語去形容,如氣若幽蘭,美艷不可方物,一笑傾城,再笑傾國,世間尤物,而不是簡短的幾個字,我艸,美女!

        功利性的閱讀源碼

        功利性即指有目的性的,明確知道自己干完某一件事后能得到什么樣的回報,所以首先你要知道你想得到什么?

        看每一本書都有明確的目的,想學會理財,就得看理財相關的書,想學點技術,就得看點技術相關的書

        看源碼也是一樣,你對 Vue.use 之后發生了什么比較好奇,或者是你覺得現在面試都需要會看點源碼,這都很好,至少你有明確的訴求

        凡事只要有了功利屬性,才更容易走的下去,否則就是真香警告。

        2. Vue2

        Vue 雖然出到 Vue3 了,也出了不少 Vue3 的源碼教程,但是 Vue2 還是很棒的框架,它的源碼還是值得細讀的,所以先推薦幾個 Vue2 的源碼項目。

        2.1 vue-analysis

        ?? Vue.js 源碼分析

        目前社區有很多 Vue.js 的源碼解析文章,但是質量層次不齊,不夠系統和全面,這本電子書的目標是全方位細致深度解析 Vue.js 的實現原理,讓同學們可以徹底掌握 Vue.js。目前分析的版本是 Vue.js 的最新版本 Vue.js 2.5.17-beta.0,并且之后會隨著版本升級而做相應的更新,充分發揮電子書的優勢。

        這本電子書是作為?《Vue.js 源碼揭秘》 視頻課程的輔助教材。電子書是開源的,同學們可以免費閱讀,視頻是收費的,25+小時純干貨課程,如果有需要的同學可以購買來學習,但請務必支持正版,請尊重作者的勞動成果。

        https://github.com/ustbhuangy...

        2.2 vue-design

        超級詳細 - 逐行級別的分析

        所謂逐行并非一行接著一行,逐行指的是講解的詳細程度,這套文章將致力于覆蓋所有核心代碼,畢竟每一句代碼都有他存在的意思,假如我們不講明白任何一句代碼的意義,那又怎么敢說是源碼分析呢?

        深度分析 - 講解 issue

        我們知道 Vue 這個項目自誕生以來一直都在不斷的更新完善,比如添加新的特性,修復已知bug等等。而在這個過程中源碼也將越來越完善,這也意味著代碼曾經并不完善,本套文章在分析源碼時除了告訴你這段代碼為什么這么寫之外,還會根據相關 issue 分析這段代碼之前是怎么寫的以及存在的問題。

        http://hcysun.me/vue-design/zh/

        2.3 vue-family-mindmap

        用一張思維導圖總結了 Vue | Vue-Router | Vuex 源碼與架構要點。

        以上內容是筆者最近學習 Vue 源碼時的收獲與所做的筆記,本文內容大多是開源項目?Vue.js 技術揭秘?的內容,只不過是以思維導圖的形式來展現,內容有省略,還加入了筆者的一點理解。

        筆者之所以采用思維導圖的形式來記錄所學內容,是因為思維導圖更能反映知識體系與結構,更能使人形成完整的知識架構,知識一旦形成一個體系,就會容易理解和不易忘記。

        注意:文章的圖片可能上傳時會經過壓縮,可能有點模糊,不過本文用到的 所有?超清圖片?都已經放在?github?上,而且還有?pdf 格式、markdown 語法、思維導圖 的原文件,自己可以根據?思維導圖原文件?導出相應的超清圖片。
        https://github.com/biaochenxu...

        2.4 learnVue

        Vue.js 源碼分析,記錄了個人學習 Vue.js 源碼的過程中的一些心得以及收獲。以及對于 Vue 框架,周邊庫的一些個人見解。

        在學習的過程中我為Vue.js(2.3.0)、Vuex(2.4.0)、Vue-router(3.0.1)加上了注釋,分別在文件夾 vue-src、vuex-src 以及 vue-router-src 中,希望可以幫助有需要的同學更好地學習理解 Vue.js 及周邊庫的源碼。

        https://github.com/answershut...

        2.5 vue

        Vue 源碼逐行注釋分析 +40 多 M 的 Vue 源碼程序流程圖思維導圖 (diff 部分待后續更新)

        Vue 源碼業余時間差不多看了一年,以前在網上找帖子,發現很多帖子很零散,都是一部分一部分說,斷章的很多,所以自己下定決定一行行看,經過自己堅持與努力,現在基本看完了 。

        這個 Vue 源碼逐行分析,我基本每一行都打上注釋,加上整個框架的流程思維導圖,基本上是小白也能看懂的 Vue 源碼了。

        https://github.com/qq28111327...

        2.6 vue2.0-source

        Vue 源碼分析 -- 基于 2.2.6 版本

        該源碼分析,會帶著大家一起學習 Vue 的大部分代碼,而不是簡單的講一下它的原理,我會盡可能的多解釋每一行主要的代碼含義,另外一些輔助方法什么的,大家可以在學習的過程中,自己看一眼就知道了。

        https://github.com/liutao/vue...

        3. Vue3

        3.1 中文學習網址

        先給大家提供 2 個 Vue3 的中文學習網址。

        Vue3 中文文檔,國內 CDN 加速版

        https://vue3js.cn/docs/zh/

        Vue3 相關項目聚合網站

        https://vue3js.cn/

        3.2 Vue3 源碼

        https://vue3js.cn/start/

        最后

        更多關于 Vue3 的優質項目,請看往期精文: Vue3 的學習教程匯總、源碼解釋項目、支持的 UI 組件庫、優質實戰項目

        公眾號:前端GitHub,專注于挖掘優秀的前端開源項目,抹平你的前端信息不對稱。

        平時如何發現好的開源項目,可以看看這篇文章:GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目


        關于貓哥,大家可以看看我的年終總結 前端工程師的 2020 年終總結 - 乾坤未定,你我皆黑馬

        不知不覺,已經寫到第 31 期了呢,往期精文請看下方寶藏倉庫,請慎入!

        https://github.com/FrontEndGitHub/FrontEndGitHub

        微信搜 “前端GitHub”,回復 “電子書” 即可以獲得 160 本前端精華書籍,回復 “1024”,獲取前端精華學習視頻。

        往期精文

        查看原文

        贊 36 收藏 25 評論 0

        夜盡天明 發布了文章 · 3月21日

        解秘 Node.js 單線程實現高并發請求原理,以及串聯同步執行并發請求的方案

        最近在做一個支持多進程請求的 Node 服務,要支持多并發請求,而且請求要按先后順序串聯同步執行返回結果。

        對,這需求就是這么奇琶,業務場景也是那么奇琶。

        需求是完成了,為了對 Node.js 高并發請求原理有更深一些的理解,特意寫一篇文章來鞏固一下相關的知識點。

        問題

        Node.js 由這些關鍵字組成: 事件驅動、非阻塞I/O、高效、輕量。

        于是在我們剛接觸 Node.js 時,會有所疑問:

        • 為什么在瀏覽器中運行的 JavaScript 能與操作系統進行如此底層的交互?
        • Node 真的是單線程嗎?
        • 如果是單線程,他是如何處理高并發請求的?
        • Node 事件驅動是如何實現的?

        下來我們一起來解秘這是怎么一回事!

        架構一覽

        上面的問題,都挺底層的,所以我們從 Node.js 本身入手,先來看看 Node.js 的結構。

        • Node.js 標準庫,這部分是由 Javascript編寫的,即我們使用過程中直接能調用的 API。在源碼中的 lib 目錄下可以看到。
        • Node bindings,這一層是 Javascript 與底層 C/C++ 能夠溝通的關鍵,前者通過 bindings 調用后者,相互交換數據。
        • 第三層是支撐 Node.js 運行的關鍵,由 C/C++ 實現。
        • V8:Google 推出的 Javascript VM,也是 Node.js 為什么使用的是 JavaScript 的關鍵,它為 JavaScript 提供了在非瀏覽器端運行的環境,它的高效是 Node.js 之所以高效的原因之一。
        • Libuv:它為 Node.js 提供了跨平臺,線程池,事件池,異步 I/O 等能力,是 Node.js 如此強大的關鍵。
        • C-ares:提供了異步處理 DNS 相關的能力。
        • http_parser、OpenSSL、zlib?等:提供包括 http 解析、SSL、數據壓縮等其他的能力。

        單線程、異步

        • 單線程:所有任務需要排隊,前一個任務結束,才會執行后一個任務。如果前一個任務耗時很長,后一個任務就不得不一直等著。Node 單線程指的是 Node 在執行程序代碼時,主線程是單線程。
        • 異步:主線程之外,還維護了一個"事件隊列"(Event queue)。當用戶的網絡請求或者其它的異步操作到來時,Node 都會把它放到 Event Queue 之中,此時并不會立即執行它,代碼也不會被阻塞,繼續往下走,直到主線程代碼執行完畢。

        注:

        • JavaScript 是單線程的,Node 本身其實是多線程的,只是 I/O 線程使用的 CPU 比較少;還有個重要的觀點是,除了用戶的代碼無法并行執行外,所有的 I/O (磁盤 I/O 和網絡 I/O) 則是可以并行起來的。
        • libuv 線程池默認打開 4 個,最多打開 128 個 線程。

        事件循環

        Nodejs 所謂的單線程,只是主線程是單線程。

        • 主線程運行 V8 和 JavaScript
        • 多個子線程通過?事件循環?被調度

        可以抽象為:主線程對應于老板,正在工作。一旦發現有任務可以分配給職員(子線程)來做,將會把任務分配給底下的職員來做。同時,老板繼續做自己的工作,等到職員(子線程)把任務做完,就會通過事件把結果回調給老板。老板又不停重復處理職員(子線程)子任務的完成情況。

        老板(主線程)給職員(子線程)分配任務,當職員(子線程)把任務做完之后,通過事件把結果回調給老板。老板(主線程)處理回調結果,執行相應的 JavaScript。

        更具體的解釋請看下圖:

        1、每個 Node.js 進程只有一個主線程在執行程序代碼,形成一個執行棧(execution context stack)。

        2、Node.js 在主線程里維護了一個"事件隊列"(Event queue),當用戶的網絡請求或者其它的異步操作到來時,Node 都會把它放到 Event Queue之中,此時并不會立即執行它,代碼也不會被阻塞,繼續往下走,直到主線程代碼執行完畢。

        3、主線程代碼執行完畢完成后,然后通過 Event Loop,也就是事件循環機制,檢查隊列中是否有要處理的事件,這時要分兩種情況:如果是非 I/O 任務,就親自處理,并通過回調函數返回到上層調用;如果是 I/O 任務,就從 線程池 中拿出一個線程來處理這個事件,并指定回調函數,當線程中的 I/O 任務完成以后,就執行指定的回調函數,并把這個完成的事件放到事件隊列的尾部,線程歸還給線程池,等待事件循環。當主線程再次循環到該事件時,就直接處理并返回給上層調用。 這個過程就叫 事件循環 (Event Loop)。

        4、期間,主線程不斷的檢查事件隊列中是否有未執行的事件,直到事件隊列中所有事件都執行完了,此后每當有新的事件加入到事件隊列中,都會通知主線程按順序取出交 Event Loop 處理。

        優缺點

        Nodejs 的優點:I/O 密集型處理是 Nodejs 的強項,因為 Nodejs 的 I/O 請求都是異步的(如:sql 查詢請求、文件流操作操作請求、http 請求...)

        Nodejs 的缺點:不擅長 cpu 密集型的操作(復雜的運算、圖片的操作)

        總結

        1、Nodejs 與操作系統交互,我們在 JavaScript 中調用的方法,最終都會通過 process.binding 傳遞到 C/C++ 層面,最終由他們來執行真正的操作。Node.js 即這樣與操作系統進行互動。

        2、Nodejs 所謂的單線程,只是主線程是單線程,所有的網絡請求或者異步任務都交給了內部的線程池去實現,本身只負責不斷的往返調度,由事件循環不斷驅動事件執行。

        3、Nodejs 之所以單線程可以處理高并發的原因,得益于 libuv 層的事件循環機制,和底層線程池實現。

        4、Event loop 就是主線程從主線程的事件隊列里面不停循環的讀取事件,驅動了所有的異步回調函數的執行,Event loop 總共 7 個階段,每個階段都有一個任務隊列,當所有階段被順序執行一次后,event loop 完成了一個 tick。

        參考文章:Nodejs探秘:深入理解單線程實現高并發原理

        串聯同步執行并發請求

        就像上面說的:Node.js 在主線程里維護了一個"事件隊列"(Event queue),當用戶的網絡請求或者其它的異步操作到來時,Node 都會把它放到 Event Queue之中,此時并不會立即執行它,代碼也不會被阻塞,繼續往下走,直到主線程代碼執行完畢。

        所以要串聯同步執行并發請求的關鍵在于維護一個隊列,隊列的特點是 先進先出,按隊列里面的順序執行就可以達到串聯同步執行并發請求的目的。

        方案

        • 根據每個請求的 uniqueId 變量作為唯一令牌
        • 隊列里面維護一個結果數組和一個執行隊列,把執行隊列完成的 令牌與結果 存儲在結果數組里面
        • 根據唯一令牌,一直去獲取執行完成的結果,間隔 200 毫秒,超時等待時間為 10 分鐘
        • 一直等待并獲取結果,等待到有結果時,才返回給請求;并根據令牌把結果數組里面相應的項刪除

        隊列

        代碼:

        class Recorder {
            private list: any[];
        
            private queueList: any[];
        
            private intervalTimer;
        
            constructor() {
                this.list = [];
                this.queueList = [];
                this.intervalTimer = null;
            }
        
            // 根據 id 獲取任務結果
            public get(id: string) {
                let data;
                console.log('this.list: ', this.list);
                let index;
                for (let i = 0; i < this.list.length; i++) {
                    const item = this.list[i];
                    if (id === item.id) {
                        data = item.data;
                        index = i;
                        break;
                    }
                }
                // 刪除獲取到結果的項
                if (index !== undefined) {
                    this.list.splice(index, 1);
                }
                return data;
            }
        
            public clear() {
                this.list = [];
                this.queueList = [];
            }
        
            // 添加項
            public async addQueue(item: any) {
                this.queueList.push(item);
            }
        
            public async runQueue() {
                clearInterval(this.intervalTimer);
                if (!this.queueList.length) {
                    // console.log('隊列執行完畢');
                    return;
                }
                // 取出隊列里面的最后一項
                const item = this.queueList.shift();
                console.log('item: ', item);
                // 執行隊列的回調
                const data = await item.callback();
                console.log('回調執行完成: ', data);
                // 把結果放進 結果數組
                this.list.push({ id: item.id, data });
            }
        
            public interval() {
                clearInterval(this.intervalTimer);
                this.intervalTimer = setInterval(async () => {
                    clearInterval(this.intervalTimer);
                    // 一直執行里面的任務
                    await this.runQueue();
                    this.interval();
                }, 200);
            }
        }
        
        const recorder = new Recorder();
        recorder.interval();
        
        export default recorder;

        服務

        下面模擬一個請求端口的的 Node 服務。

        代碼:

        const Koa = require('koa')
        const Router = require('koa-router')
        const cuid = require('cuid');
        const bodyParser = require('koa-bodyparser')
        import recorder from "./libs/recorder";
        
        const MAX_WAITING_TIME = 60 * 5; // 最大等待時長
        // web服務端口
        const SERVER_PORT: number = 3000;
        const app = new Koa();
        app.use(bodyParser());
        const router = new Router();
        
        
        /**
         * 程序睡眠
         * @param time 毫秒
         */
        const timeSleep = (time: number) => {
            return new Promise((resolve) => {
                setTimeout(() => {
                    resolve("");
                }, time);
            });
        };
        
        /**
         * 程序睡眠
         * @param second 秒
         */
        const sleep = (second: number) => {
            return timeSleep(second * 1000);
        };
        
        router.post("/getPort", async (ctx, next) => {
            const { num } = ctx.request.body;
            const uniqueId = cuid();
            console.log('uniqueId: ', uniqueId);
            recorder.addQueue({
                id: uniqueId,
                callback: getPortFun(num)
            });
            let waitTime = 0;
            while (!ctx.body) {
                await sleep(0.2);
                console.log('1');
                const data: any = recorder.get(uniqueId);
                if (data) {
                    ctx.body = {
                        code: 0,
                        data: data,
                        msg: 'success'
                    };
                }
                waitTime++;
                // 超過最大時間就返回一個結果
                if (waitTime > MAX_WAITING_TIME) {
                    ctx.body = {};
                }
            }
        });
        
        // 返回一個函數
        function getPortFun(num) {
            return () => {
                return new Promise((resolve) => {
                    // 模擬異步程序
                    setTimeout(() => {
                        console.log(`num${num}: `, num);
                        resolve(num * num);
                    }, num * 1000);
                });
            };
        }
        
        app.use(router.routes()).use(router.allowedMethods());
        
        app.listen(SERVER_PORT);

        最后

        最近狀態很差勁,所以最近的原創技術文章有點難產了 ??

        心態急需調整,周末想出去玩,放松一下自己,找回那個斗志滿滿的真我才行,唉。

        推薦閱讀

        支持一下下??

        查看原文

        贊 6 收藏 2 評論 0

        夜盡天明 發布了文章 · 3月8日

        推薦 2 個用 VS Code 直接瀏覽 GitHub 代碼!只需要 1s !

        大家好,我是你們的 貓哥,一個不喜歡吃魚、又不喜歡喵 的超級貓 ~

        喵~ 喵~ 喵~ 正文開始了,上車坐穩扶好了~

        今天給大家推薦可以直接在 VS Code 界面讀取 GitHub 項目的代碼,實現了 GitHub 項目與 VS Code 的無縫銜接的兩個項目。

        1. github1s

        這個項目叫做 github1s,也正如其名,作者對其的解釋是:只需 1 秒,就可以用 VS Code 方式來看 GitHub 代碼。

        畢竟代碼嘛,在“原汁原味”的環境下看,還是比較舒服的。

        而且操作方式也是非常的簡單,只需要在瀏覽器網址部分中的 “github” 后邊,添加一個 “1s” 就可以了。

        https://github.com/conwnet/gi...

        2. 1s

        還有一個項目是「+1s」,有些網站,當我們給它 +1s 時,會有意想不到的奇效。

        1、github +1s

        在 GitHub 域名后面加 1s 可以直接使用 VSCode Online 打開倉庫代碼,例如:

        https://github1s.com/microsof...
        ? ?

        2、youtube +1s

        當你看到喜歡的 YouTube 視頻時,可以在 youtube 后面加 1s,直接下載此視頻。

        https://www.youtube1s.com/wat...

        3、tiktok +1s

        國外版抖音的視頻,可以在 tiktok 后面加 1s,直接下載此視頻。

        https://www.tiktok1s.com/@ram...

        是不是很神奇,趕緊去試試吧。

        項目地址:

        https://github.com/justjavac/1s

        最后

        初級前端與高級前端之間,很大原因就是投入學習前端的時間、經驗的差別,其實就是信息差。

        如果有一個地方能又快又好的獲得這些優質的前端信息,那么將會大大縮短從初級到高級的時間。

        公眾號:前端GitHub,專注于挖掘優秀的前端開源項目,抹平你的前端信息不對稱。

        微信搜 “前端GitHub”,回復 “電子書” 即可以獲得 160 本前端精華書籍哦,貓哥 WX:CB834301747 。

        已經推薦了 面試項目、CSS 奇技淫巧項目、代碼規范項目、數據結構與算法項目、JavaScript 奇技淫巧項目、前端必備在線工具 等專題的近 200 個優秀項目了。

        平時如何發現好的開源項目,可以看看這篇文章:GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目


        關于貓哥,大家可以看看我的年終總結 前端工程師的 2020 年終總結 - 乾坤未定,你我皆黑馬。

        不知不覺,已經寫到第 20 期了呢,往期精文請看下方寶藏倉庫,請慎入!

        https://github.com/FrontEndGitHub/FrontEndGitHub

        往期精文

        查看原文

        贊 8 收藏 4 評論 0

        夜盡天明 發布了文章 · 3月6日

        B站收藏 12.5w+!GitHub 標星 6.6k+!這門神課拯救了我薄弱的計算機基礎

        大家新年好呀,我是你們的 貓哥,我又回來啦 ~

        相信大家過年都過得開心吧

        過得開心,那么就開始學習了哈 ~

        前言

        作為一個所謂的計算機科班出身的人來說,特別難為情的是自己的計算機基礎很差,相信這不是少數程序員的現狀,而是絕大多數程序員的現狀。

        比如計算機網絡當年一度差點掛掉,多虧當時的老師手下留情,給我一個剛及格的分數。

        但是貓哥出來工作之后,特別覺得學生的計算機基礎特別差,主要原因是老師和教育資源的問題,老師都是照著書本或者 PPT 講的,十分乏味。

        如果有好的學習資源,肯定能激發學習的興趣的,或者學習起來容易一點,沒那么難懂。

        當程序員的時間越長好像越明白這些基礎知識和原理的重要性,這樣說起來簡單,但是其中的枯燥就讓很多摩拳擦掌的同學折戟沉沙,都說興趣最重要,怎么提氣這個興趣。

        最近貓哥在逛 b 站的時候偶然發現了這么一個課程,通過圖文并茂生動形象的介紹計算機的基礎知識,看了幾集,覺得非常的棒,特地把這個《計算機科學速成課》推薦給大家。

        計算機科學速成課

        這門 40 集的課真的包含了超多的基礎知識:

        1 - 早期的計算 - Early Computing
        
        2 - 電子計算 - Electronic Computing
        
        3 - 布爾邏輯與邏輯電路 - Boolean Logic & Logic Gates
        
        4 - 二進制 - Representing Numbers and Letters with Binary
        
        5 - 算術邏輯單元 - How Computers Calculate - the ALU
        
        6 - 寄存器 & 內存 - Registers and RAM
        
        7 - 中央處理器 - The Central Processing Unit(CPU)
        
        8 - 指令和程序 - Instructions & Programs
        
        9 -  高級 CPU 設計 - Advanced CPU Designs
        
        10 - 編程史話 - Early Programming
        
        11 - 編程語言 - The First Programming Languages
        
        12 - 編程原理:語句和函數 - Programming Basics: Statements & Functions
        
        13 - 算法初步 - Intro to Algorithms
        
        14 - 數據結構 - Data Structures
        
        15 - 阿蘭·圖靈 - Alan Turing
        
        16 - 軟件工程 - Software Engineering
        
        17 - 集成電路、摩爾定律 - Integrated Circuits & Moore’s Law
        
        18 - 操作系統 - Operating Systems
        
        19 - 內存 & 儲存介質 - Memory & Storage
        
        20 - 文件系統 - Files & File Systems
        
        21 - 壓縮 - Compression
        
        22 - 命令行界面 - Keyboards & Command Line Interfaces
        
        23 - 屏幕 & 2D 圖形顯示 - Screens & 2D Graphics
        
        24 - 冷戰和消費主義 - The Cold War and Consumerism
        
        25 - 個人計算機革命 - The Personal Computer Revolution
        
        26 - 圖形用戶界面 - Graphical User Interfaces
        
        27 - 3D 圖形 - 3D Graphics
        
        28 - 計算機網絡 - Computer Networks
        
        29 - 互聯網 - The Internet
        
        30 - 萬維網 - The World Wide Web
        
        31 - 網絡安全 - Cybersecurity
        
        32 - 黑客與攻擊 - Hackers & Cyber Attacks
        
        33 - 加密 - Cryptography
        
        34 - 機器學習與人工智能 - Machine Learning & Artificial Intelligence
        
        35 - 計算機視覺 - Computer Vision
        
        36 - 自然語言處理 - Natural Language Processing
        
        37 - 機器人 - Robots
        
        38 - 計算機中的心理學 - Psychology of Computing
        
        39 - 教育型科技 - Educational Technology
        
        40 - (完結) 奇點,天網,計算機的未來 - The Singularity, Skynet, and the Future of Computing

        到這里你以為完了么?不!這怎么能夠!

        譯者們還貼心的在每一集的開頭放上了 片頭總結,讓你剛開始就能知道這一集講了啥。

        哪個時間點講了哪些知識點,真的是炒雞貼心!

        如此貼心的翻譯團隊,制作出如此良心的一門課。

        真的強烈建議大家一定要好好看,沉下心來,認認真真的每天學一點,當復利拐點到了,有一天你會頓悟、和突飛猛進的。

        當然這么好看的課當然希望大家能夠 多多轉發,在看 支持,讓更多的朋友能夠看到,大家一起學習一起進步!

        b 站地址:

        https://www.bilibili.com/vide...

        GitHub 地址:

        https://github.com/1c7/Crash-...

        如果你還想下載這門課,請在關注本公眾號,回復 計算機 ,即可獲得下載鏈接了。

        之前還寫過類似的:推薦 7 個 Github 上近 200k Star 的計算機學習資源,練好內功的秘籍!,相信你會找到寶藏!

        最后

        初級前端與高級前端之間,很大原因就是投入學習前端的時間、經驗的差別,其實就是信息差。

        如果有一個地方能又快又好的獲得這些優質的前端信息,那么將會大大縮短從初級到高級的時間。

        前端GitHub 就是這樣一個倉庫,能幫助前端開發人員節省時間的倉庫!

        公眾號:前端GitHub,專注于挖掘優秀的前端開源項目,抹平你的前端信息不對稱。

        已經推薦了 面試項目、CSS 奇技淫巧項目、代碼規范項目、數據結構與算法項目、JavaScript 奇技淫巧項目、前端必備在線工具 等專題的近 200 個優秀項目了。

        平時如何發現好的開源項目,可以看看這篇文章:GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目


        關于貓哥,大家可以看看我的年終總結 前端工程師的 2020 年終總結 - 乾坤未定,你我皆黑馬。

        不知不覺,已經寫到第 19 期了呢,往期精文請看下方寶藏倉庫,請慎入!

        https://github.com/FrontEndGitHub/FrontEndGitHub

        往期精文

        微信搜 “前端GitHub”,回復 “電子書” 即可以獲得 160 本前端精華書籍哦,貓哥 WX:CB834301747 。

        查看原文

        贊 33 收藏 20 評論 1

        夜盡天明 發布了文章 · 2月21日

        22 個拓展程序員技術與視野的國外網站!奇怪的知識又增加了!

        大家新年好呀,我是你們的 貓哥,我又回來啦 ~

        相信大家過年都過得開心吧

        過得開心,那么就開始學習了哈 ~

        關于貓哥,大家可以看看我的年終總結 前端工程師的 2020 年終總結 - 乾坤未定,你我皆黑馬。

        前言

        初級前端與高級前端之間,很大原因就是投入學習前端的時間、經驗的差別,其實就是信息差。

        如果有一個地方能又快又好的獲得這些優質的前端信息,那么將會大大縮短從初級到高級的時間。

        前端GitHub 就是這樣一個倉庫,能幫助前端開發人員節省時間的倉庫!

        公眾號:前端GitHub,專注于挖掘優秀的前端開源項目,抹平你的前端信息不對稱。

        已經推薦了 面試項目、CSS 奇技淫巧項目、代碼規范項目、數據結構與算法項目、JavaScript 奇技淫巧項目、前端必備在線工具 等專題的近 200 個優秀項目了。

        平時如何發現好的開源項目,可以看看這篇文章:GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目

        以下為今天【前端GitHub】的第 18 期精華內容。

        今天給大家推薦一些程序員經常使用的網站,也是我經常上的一些網站,讓大家也一下拓展視野。

        貓哥還將網站做了分類整理,方便大家閱讀。

        1. 項目類

        項目是一個面試官非??粗氐狞c,也是拓展視野、挖掘輪子一個的地方。

        下面就為你推薦幾個程序員都應該 mark 的項目類網站。

        1.1 GitHub?代碼托管?

        GitHub 作為全球最大的同性交友網站,也是礦資源非常豐富的礦場。

        GitHub 有時比 Google 還有用,如果你不懂如何使用它來挖礦,那你不算一名合格的程序員。

        GitHub 是一個寶藏庫,可沒有藏寶圖,GitHub 這個億計的優秀的開源項目也和你沒有關系。

        GitHub 也有非常多好的項目可以推薦,比如我自己的 github (逃了)

        https://github.com/biaochenxu...

        還有很多非常優秀的 GitHub 項目,比如?FrontEndGitHub、CS-notes、mall 商城項目。

        1.2 GitLab

        對于有些人,提到 GitHub 就會自然的想到 Gitlab, Gitlab 支持無限的公有項目和私有項目。

        GitLab 是一個用于倉庫管理系統的開源項目,使用 Git 作為代碼管理工具,并在此基礎上搭建起來的 web 服務。

        貓哥目前公司的項目用的就是 GitLab 平臺。

        https://about.gitlab.com/

        2. 博客類

        2.1 dev

        dev 社區和國內的掘金社區很相似,技術分類也比較多,各種技術應有盡有,文章質量都很不錯。

        像 Java、Python、js、分布式等應有盡有,文章質量普遍都還不錯,其實如果平時多留意不難發現,掘金上有一些文章是翻譯自 dev 社區。

        這個社區也是貓哥經常去看的網站,還翻譯過幾篇該網站的文章呢。

        https://dev.to/

        2.2 dreamincode

        dreamincode 是一個相對小眾的技術博客,界面和 博客園 風格頗為相似,屬于簡約而不簡單的那種,但是內容卻不簡單。

        https://www.dreamincode.net

        2.3 bytes

        bytes 和 dreamcode 類似,簡約但不簡單,不多說了。

        https://bytes.com

        2.4 hongkiat

        hongkiat 是與技術、設計領域相關的站點之一,大家可以在這里分享技術文章。

        https://www.hongkiat.com/blog...

        2.5 IBM Developer

        這里面都是一線工程師,技術性很強,每一篇文章都值得細細觀看,認真學習。

        https://developer.ibm.com

        3. 問答類

        3.1 StackOverFlow

        作為一名程序員,如果沒有聽過 Stackoverflow,那么你最好去面壁思過一下。

        這是一個由外國人創辦的專為程序員提供的國際性問題解答交流社區,正如網站簽名:Stack Overflow - Where Developers Learn, Share, & Build Careers。

        這個網站非常的純粹,一般人還真不太習慣用這個,沒有一手好英語還看不太懂全英文的技術交流與問答。

        當你拋出一個技術問題時,最終是否能得到有用的回答,往往取決于你所提問和追問的方式。 –Eric S. Raymond

        https://stackoverflow.com

        3.2 Reddit

        reddit 是一個非常個性的社區,你可以在這里討論編程問題,還可以學習學英語,reddit 還很幽默,有古怪的莫名笑點,評論接樓很有意思。

        https://www.reddit.com

        3.3 daniweb

        daniweb 也是一個質量比較高的問答平臺,有一種像社交平臺的感覺。

        https://www.daniweb.com

        4. 算法類

        4.1 LeetCode

        和國內的 leetcode 一樣都是刷題用的,但是國際版的 leetcode 匯聚了全球各國大神,看看你和大神的思路是否一樣呢。

        https://leetcode.com

        4.2 LintCode

        LintCode 領扣上有數量超過 1000 道的算法題目和人工智能題目,通過刷題熟練掌握數據結構和算法。

        完成各大名企的階梯訓練,為你斬獲心儀的 offer 打下堅實的基礎

        https://www.lintcode.com

        4.3 Codeforces

        Codeforces是全球最著名的在線評測系統之一,這里有高水平的選手,高質量的題目,高密度的比賽。

        該網站由俄羅斯的一個團體創立并負責運營。當然,該網站上大部分博客、評論、題面都是英語的。

        http://codeforces.com/

        4.4 Topcoder

        Topcoder 據說是世界上規模最大的編程網站,這里面的題型,比賽形式跟 ACM/ICPC 極不相同。

        該網站把中國納入其賽區,大家可以上去那里跟來自全世界的程序員(事實上大多數也是大學生)進行更直接的交流,可能也是 ACM/ICPC 練兵的好地方吧。

        該網站每個月都有兩到三次在線比賽,根據比賽的結果對參賽者進行新的排名。

        參賽者可根據自己的愛好選用 Java, C++, C#, VB 或 python 進行編程。

        https://www.topcoder.com

        5. 教程類

        5.1 tutorialspoint

        這是一個在線學習的網站,并且免費,里面有各種技術、各個知識點的講解和demo,灰常全面,這比查找API方便多了,遇到不明白的知識點直接根據索引找就是了,還有各種電子書。

        https://www.tutorialspoint.co...

        5.2 codecademy

        學習新語言,敲代碼玩就在這里了。這個網站將簡化編程學習的過程。比如說網站左邊會講解知識點,右邊直接練習。如果出現錯誤,就會有錯誤提示,直接給你反饋。所以,使用它不用想太多,直接拼命硬干敲代碼入門。

        https://www.codecademy.com

        5.3 Livecoding.tv

        Livecoding.tv由一群歐美程序愛好者共同發起成立,旨在為全球程序員提供一個實時高效的互動平臺。特色是使用了錄屏直播技術,用戶可以在線觀看高手實時編程并且可以向對方提問互動,網站現在已經匯集了一大批程序精英?,F在Livecoding.TV來到中國,希望更多的中國程序員加入進來一起切磋技術。

        https://www.livecoding.tv/acc...

        5.4 Dzone

        Dzone是一個技術涵蓋比較全面的網站,像云平臺、數據庫、物聯網、開發運維、Java語言等都有。

        https://dzone.com

        5.5 simpleprogrammer

        simpleprogrammer 簡單的程序員,這個網站上純技術文章不多,指導建議性的文章比較多。

        講述一些職場、以及軟件開發中的一些“ 潛規則”。

        https://simpleprogrammer.com/

        5.6 SitePoint

        通過 SitePoint 教程,課程和書籍學習 Web 設計和開發 HTML5,CSS3,JavaScript,PHP,移動應用。

        這是一個偏向前端方向的網站,在這里包含了各種高質量的前端方面的文章,電子書。

        https://www.sitepoint.com/web

        5.7 YouTobe

        YouTobe 這個網站可算是經典,和國內的嗶哩嗶哩一樣,各類視頻匯聚于此,當然各國編程大神也在這啦。

        YouTube 是源自美國的視頻分享網站,也是當前全球最大的視頻搜索和分享平臺,讓用戶上傳、觀看、分享及評論視頻。

        此網站沒有官方的中文名字,較為廣泛使用的俗稱有油管、水管、你管等。

        https://www.youtube.com/

        最后

        如果你訪問不了國外網站,那就上網站 GitHub 上搜索一下,你會找到屬于你的驚喜?。?!貓哥只能幫助你到這里了。

        關于貓哥,大家可以看看我另一個號的 前端工程師的 2020 年終總結 - 乾坤未定,你我皆黑馬,看看貓哥的臉都被打歪的 ??。

        不知不覺,已經寫到第 18 期了呢,已經分享超過 200 個好的前端項目了呢,往期精文請看下方寶藏倉庫,點擊很危險,請慎入!

        https://github.com/FrontEndGitHub/FrontEndGitHub

        平時如何發現好的開源項目,可以看看這篇文章:如何在 GitHub 上發現優秀開源項目如何使用 GitHub 進行精準搜索的神仙技巧。

        往期精文

        微信搜 “前端GitHub”,回復 “電子書” 即可以獲得 160 本前端精華書籍哦,加超級貓的 WX:CB834301747 ,一起閑聊前端。

        查看原文

        贊 14 收藏 12 評論 0

        夜盡天明 發布了文章 · 2月19日

        相親感悟:關于戀愛擇偶的幾點直擊心靈深處的認知

        今年年三十中午吃飯時,老爸突然說給我安排了一場相親,我 ??。。。

        真的是 生活艱難,落魄少年,被迫營業。

        相親就是認識一個人,還是要聊聊和接觸了才能知道是否合適,比如三觀(人生觀、世界觀、價值觀)是否合得來,并沒什么特別的。

        如果身邊有比較了解并覺得比較合適的人,選擇身邊的人是個不錯的選擇,因為了解一個陌生人是否合適,是很需要花費時間、精力的事情。

        今年回家,倒是從別人的相親過程中,發現了幾點很重要的認知。

        昨晚貓哥思如泉涌,又很有表達欲,所以還是想寫下這篇文章,給讀者一點啟發。

        優勝劣汰、適者生存

        這個世界上自古以來奉行的就是 優勝劣汰、適者生存 的大自然法則,沒有絲毫例外。

        情侶的選擇也同樣在用這個法則,試問一下自己 在選取對象的時候,是不是傾向于選擇比自己優秀或者同等條件的人,就算不符合這個法則,早早找到的對象都是那些不是很差的人。反正我是,我相信絕大部分的人都是這個思想。

        一般是相對于自己來說,傾向于選擇比自己優秀或者同等條件的人,是個高價值的人。

        高價值簡單來說,就是一切向好的價值。

        大概是以下三類:

        • 生存價值:社會地位,收入、房、車等等與物質相關的
        • 繁衍價值:身高,長相,體格等等與身體相關的
        • 情緒價值:情緒能量,知識儲備,性格,抗干擾能力,帶動他人的能力等等與情緒精神相關的

        先說明一下,優質的對象一般是指具備高價值的人。

        絕大部分人都是趨利避害的,所以同齡的優質的對象一般都被人選擇了,或者他(她)已經選擇了同樣優質的對象了。

        所以就導致了一個問題:年齡越大,同齡留下的優質對象就越少,被留下的絕大部分都是很有自己想法的人,或者不那么優質的,或者說某些方面是不盡人意的(一般都是 身材、樣貌、學歷、經濟、風趣幽默、各種軟能力等,總有某一項或者幾項真的很差,讓人不能接受的)。這個情況也是從大概率上來說的,說的是中位數的情況。

        貓哥回想了一下,無論是讀書時代、工作后的這幾年里、就連村里面,這個現象都存在。

        讀書時代,漂亮女生、帥氣的男生、或者成績好的人 都有很多人追,而且已經有了對象了。

        工作后的幾年里面,身邊的實習生,正職,條件優質也同樣選擇好了對象。

        而那些還沒對象的,一般來說條件都不優質,這里面只能指大概率是這個情況,當然有些是不著急找對象、或者還在找優質對象的同樣優質的人還單著,只不過是極少數了。

        身邊的某位親人的朋友,今年 29 了,這幾年相親了 10 來個,10 個里面,達到同等條件的只有那么一兩個,其余的 8 個條件都不怎么樣;

        還有另外一個親人的朋友,也是 29 歲了,條件是很不錯的,這幾年相親了 30 來個了,最后都沒成。

        我猜那些相親的對象不怎么樣,我讓這位親人特意問了一下那位朋友,那些相親的對象的質量怎么樣,得到的回答也果真和我猜想的一樣。

        也印證了 一般來說,年齡越大,同齡留下的優質對象就越少,被留下的絕大部分都是很有自己想法的人,或者都是不那么優質的,或者說某些方面是不盡人意的。

        向上向下

        目前中國社會,絕大多數男生會傾向于選擇同齡或者比自己年齡小幾歲的女生做為對象,而女生會傾向于選擇同齡或者比自己大幾歲的男生做為對象,注意這里說的絕大多數,是個概率問題,而且是大概率是這種情況。

        之所以會出現這種情況,貓哥覺得,很大原因是:因為同齡來說,男生一般比女生的思想晚成熟,而女生一般想找成熟穩重一點的男生,而男生想找年輕漂亮的女生。

        • 向上:指的是對象是高價值的
        • 向下:指的是對象的價值是比自己低的

        根據前面的 優勝劣汰、適者生存 的法則,年齡越大,身邊留下的單身的人,都是很有自己想法的人,或者一般來說都是不優質的,而且年齡越大,一般來說就更不優質,都是被挑剩下的。

        雖然有一些條件優質的人是自愿留下的,但是如果還要找同樣優質的對象的話,就會很難,因為條件優質的人一般不會被留下,所以就又造成另外一個現象:一般來說,留下的優質的人會更加難找到或者一直找不到高價值的人(也就是平時大家說的合適的對象),也就是向上取不到。

        如果你是那個留下的優質的人,那就趕緊找那個屬于你的另外一個優質條件的人,不然再拖下去,能選擇的對象只會更少,甚至沒有得選擇,那就只能向下取了!

        你選擇別人,別人選擇你,都是互相選擇的結果。

        而且目前中國社會的世俗眼光,大部分人(特別是父輩)對年齡大的男生和女生都存在很多偏見,只不過對男生好像少一點。

        事業 VS 愛情

        錢是可以解決很多社會及家庭問題的,因為 物質是最重要的基礎,基礎不牢地動山搖。

        也是為什么那么多人想先掙錢,想先財富自由,關于對財富自由的認知,可以看看我寫的那篇 用錢生錢,談談我對財富自由的理解,自認為寫的真的很不錯。

        錢財可以在往后的時間里掙到,但是優質的對象一旦錯過了,就真的是沒了,因為一般來說,年齡越大,同齡狀態下,留下的對象的質量就越差,結婚生子什么的可以不著急,但是找到合適的對象要抓緊。

        而且我發現高價值的人,事業和愛情真的兩不誤,事業和愛情并不是互斥的。

        成家立業,現在覺得先成家后立業還是有一點道理的,先找到優質的對象成家,再和優質的對象一起打拼,打造屬于你們共同的家,這樣的關系可能更穩固,更長久。

        前幾年,貓哥一直想掙錢,一直想財富自由,對找對象這件事情并不是十分上心,覺得隨緣就好,緣份到了就找到了,現在覺得并不是那么一回事了。

        就算自己有錢了,財富自由了,自己變成了優質對象了,但是沒有了優質的對象可以選擇,那也就成了人生的一大難題了。

        一旦錯過了該談戀愛與結婚的年齡,可能就會一直錯過了。

        在合適的年齡做合適的事情。

        愛情的邏輯認知

        談戀愛也是要調動智商、情商,考驗個人能力的呀!可惜大多數人都太不重視了,得過且過。能談好戀愛的人,一定是情商智商雙高的人。

        很多人以為自己會談戀愛的,其實不是,很多事情沒經歷過,很多知識、認知、道理都不知道!

        知道自己不知道是很重要的一件事情!

        所以過年這幾天,貓哥也沒干啥事,就看了幾本關于戀愛與愛情的書籍,其中有一本叫 《愛情的邏輯:破除親密關系中的認知陷阱》,微信讀書 APP 上能找到,貓哥看完后,覺得這是很棒的一本書,把愛情邏輯與認知講得很通透,能給 5 星評分。

        其中還看了一本極客時間上新出的一本書,叫《戀愛必修課》,這本書內容不多,也還沒更完,不過貓哥覺得很不錯,寫的很接地氣,也很受用,能給 5 星評分。

        這幾天貓哥還記錄下了一些覺得很有用或者有感覺的語句,分享給大家。

        有感語句

        愛與被愛,是一種可以習得的能力。知識和方法可以復制,雖然不可能速成,但是能力可以通過訓練得到。

        戀愛就是自我成長。與 ta 相處的過程中,其實就是一場自我認識、自我和解的旅程。

        心有戚戚但不發一言,人潮之中彼此相視而竊喜。

        痛痛快快地勇敢追求心中所愛,成了,你抱得美人歸;沒成,你也可以昂首挺胸走出這段關系。任何人挑不出你毛病,拒絕你的姑娘,也得給你點個贊:“是個坦蕩人”。

        當暫時沒有具體目標的時候,讓自己變得有趣是最好的辦法,也是給未來的 TA 的最好禮物。

        在戀愛過程中也是這樣,對絕大多數人來說,投入到感情中的金錢、精力、時間和機會成本都是非常寶貴而有限的。如果你在最好的年華被渣男 / 渣女耽擱兩三年,你的擇偶質量可能就要憑空下降一檔。更何況,那些對愛情的信心和憧憬,被狠狠撕碎一次后,可能就再也找不回來了。

        你要記住,越強大的人,越能兼容別人的價值觀。這是愛的能力的修煉,也是人生的修煉。

        選伴侶就像選牌,過日子就像打牌,想要把牌出得順暢,前提自然是牌好。誰都希望自己起手就是一把好牌,只是起手的好牌通常是給男神、女神準備的,普通人有很大概率摸不到好牌,只能拿到跟自己在人群中的世俗地位大致相稱的牌。此時,如果你跟別人的牌比較了一下,覺得不夠滿意,那么你有兩個選擇:
        1.繼續打下去,把這副牌打好。隨著你對自己的牌型和打牌技巧越來越熟悉,用點心的話,你是可以在這副牌允許的范圍內達到接近上限的位置的;
        2.你也可以選擇換牌(換伴侶),可能換得更好,也可能換得更差。只是換牌也有成本,最怕的是隨著時間的流逝,你自己的“交換價值”也在下降,例如年齡增大但其他方面的吸引力又沒有增加或增加得不夠快,于是你換到的牌大概率是越來越差的。這種情況下如果你還頻繁換牌,就等于每次都得在更差的池子里選牌——就像在單純的比大小游戲中,原本可以在 6~10 中選,過幾年再換牌或許只能在 3~7 里選了。
        你該關心的是你欣賞的那些優點是否能長期維持在讓你欣賞的最低水平線之上,如果能,這些優點就是你要優先選擇的;如果不是,則不選。

        兩個人相比一個人是否更舒適,很重要的一點就是是否要極大地改變自己既有的習慣和行為狀態,若是需要,體驗就會變差。

        “愛錢”是個正常的偏好,和喜歡顏值、喜歡性格、喜歡某些優秀品質是一個級別的偏好,并不存在喜歡這些就高級,喜歡另一些就低級。

        當錢的增減到了不影響生活狀態的時候,它的效用自然就會降低。

        如果我們粗略地把人的世俗價值分為 A、B、C 三個等級,通常來說,在匹配的時候某人就達到了 A 級,那他很少會找 C 級的對象。但如果你一開始是 C 級,后期通過一些方式快速逆襲成了 A 級,由于你在 C 級時很難匹配到 A 級對象,現在卻能輕易匹配上了,此時你受到的誘惑就大多了,因為直接回到了我們的第一條,你原先的伴侶覆蓋的優勢變得極小。優勢就是優勢,為什么會變呢?當然會,你接觸的人不同了,拿來和伴侶做比較的對象就有了不同。
        因此,在愛情中智商降為零,并不意味著當事人真的一沾到愛情就變得特別笨,而是當事人更愿意為了期待對方的某些回報或害怕失去手里的某些東西,自愿犧牲某些利益而已。

        戀愛是一個審視他人和審視自己的過程,審視他人主要是發現他人的優點和缺點,審視自己主要是通過跟他人的互動來發掘自己內心真正的需求。

        對于一個三觀正常、有一些正確的底層邏輯基礎的人來說,每一次戀愛都是一次修行,無論是成功還是失敗,都能使自己的想法、行為往正確的方向修正。所以,修習底層智慧和邏輯能力是第一位,然后再在實踐中多用世界給的結果反饋來修補自己的理念,就肯定能讓自己的愛情觀更靠近“真理”。

        修煉愛情智慧的主要目的并不是獲得愛情,而是修煉自身。至于持久的愛情,只不過是由于你的智慧體現在了你的思想和行為上,從而可能得到的一件附屬品而已。
        其實愛情只是眾多人生體驗的一種,當我們過于在意這一類體驗的得失時,自然就會放大每一個相關行為的影響,于是當我們在其他方面由于付出時間和精力不夠,得不到足夠好的體驗時,就會很容易聯想到那些在愛情的付出中得不償失的瞬間,從而懷疑自己在時間精力分配上的選擇;僅有當我們能不因為過多地為愛情付出而影響我們對其他體驗的享受時,才能更好地享受愛情帶來的獨有“驚喜”。

        愛情是沒有理由的,它只是我們在合適的時間、合適的地點遇到了合適的人,只要遵從自己內心的感覺,以真心換真心,就能談一場轟轟烈烈、無愧于心的戀愛。

        往往就是愛得太過努力,用情太過認真,才會在愛情中注入過多的感性因素,被并不理智的情緒所控制,猶如緊緊攏住微弱的愛情火苗不放,急切地吹氣,反而一口氣吹熄了它。

        愛與被愛都是需要一生去學習的能力。愛情的修煉其實是兩個人的共同成長,修煉的是自身。長久的愛情都很需要智慧的引導。

        愛情就是一場自我修煉,找對象其實也是在找尋自我。

        務必真誠,求真是人類的永恒追求之一。

        人一生會遇到約 2920 萬人,兩個人相遇的概率是 0.00478,而你我相識的概率是 0.0000005,而跨過相遇相識相知乃至相愛,概率 0.000049,如此之低。

        一個人走過最有勇氣的路,就是從路人甲走到你心里。

        如果遇見你花光了我所有的運氣,那和你在一起用光了我所有的智商。

        如此來之不易,且行且珍惜。

        更多有感語句請看原文:相親感悟:關于戀愛擇偶的幾點直擊心靈深處的認知

        查看原文

        贊 1 收藏 1 評論 2

        夜盡天明 發布了文章 · 2月2日

        Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 項目配置最佳實踐

        尤大的 Vue3.0 已經發布有一陣子了,已經很成熟了。

        而且 Element Plus + Vite 也出了一段時間了,是時候該上手體驗分享一波了。

        主要是要熟練一下 Vue3,好準備用 Vue3 重構一下自己的網站項目: blog-vue-typescript ,計劃是過年期間會著手重構這個項目,年后會上線。

        1. 初化化項目

        全局安裝 vite-app

        npm i -g vite-app

        創建項目

        yarn create vite-app <project-name>
        
        # 或者
        npm init vite-app <project-name>

        進入項目,安裝依賴

        cd <project-name>
        
        yarn # 或 npm i

        運行項目

        yarn dev 

        打開瀏覽器 http://localhost:3000 查看

        2. 引入TypeScript

        加入 ts 依賴

        yarn add --dev typescript

        在 項目根目錄下創建 TypeScript 的配置文件 tsconfig.json

        {
          "compilerOptions": {
            // 允許從沒有設置默認導出的模塊中默認導入。這并不影響代碼的輸出,僅為了類型檢查。
            "allowSyntheticDefaultImports": true,
            
            // 解析非相對模塊名的基準目錄
            "baseUrl": ".",
        
            "esModuleInterop": true,
        
            // 從 tslib 導入輔助工具函數(比如 __extends, __rest等)
            "importHelpers": true,
        
            // 指定生成哪個模塊系統代碼
            "module": "esnext",
        
            // 決定如何處理模塊。
            "moduleResolution": "node",
        
            // 啟用所有嚴格類型檢查選項。
            // 啟用 --strict相當于啟用 --noImplicitAny, --noImplicitThis, --alwaysStrict, 
            // --strictNullChecks和 --strictFunctionTypes和--strictPropertyInitialization。
            "strict": true,
        
            // 生成相應的 .map文件。
            "sourceMap": true,
        
            // 忽略所有的聲明文件( *.d.ts)的類型檢查。
            "skipLibCheck": true,
        
            // 指定ECMAScript目標版本 
            "target": "esnext",
            
            // 要包含的類型聲明文件名列表
            "types": [
        
            ],
        
            "isolatedModules": true,
        
            // 模塊名到基于 baseUrl的路徑映射的列表。
            "paths": {
              "@/*": [
                "src/*"
              ]
            },
            // 編譯過程中需要引入的庫文件的列表。
            "lib": [
              "ESNext",
              "DOM",
              "DOM.Iterable",
              "ScriptHost"
            ]
          },
          "include": [
            "src/**/*.ts",
            "src/**/*.tsx",
            "src/**/*.vue",
            "tests/**/*.ts",
            "tests/**/*.tsx"
          ],
          "exclude": [
            "node_modules"
          ]
        }

        在 src 目錄下新加 shim.d.ts 文件

        /* eslint-disable */
        import type { DefineComponent } from 'vue'
        
        declare module '*.vue' {
          const component: DefineComponent<{}, {}, any>
          export default component
        }

        把 main.js 修改成 main.ts

        在根目錄,打開 Index.html

        <script type="module" data-original="/src/main.js"></script>
        修改為:
        <script type="module" data-original="/src/main.ts"></script>

        3. 引入 eslint

        安裝 eslint prettier 依賴

        @typescript-eslint/parser @typescr ipt-eslint/eslint-plugin 為 eslint 對 typescript 支持。

        yarn add --dev eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue @typescript-eslint/parser @typescr ipt-eslint/eslint-plugin

        在根目錄下建立 eslint 配置文件: .eslintrc.js

        module.exports = {
          parser: 'vue-eslint-parser',
          parserOptions: {
            parser: '@typescript-eslint/parser',
            ecmaVersion: 2020,
            sourceType: 'module',
            ecmaFeatures: {
              jsx: true
            }
          },
          extends: [
            'plugin:vue/vue3-recommended',
            'plugin:@typescript-eslint/recommended',
            'prettier/@typescript-eslint',
            'plugin:prettier/recommended'
          ],
          rules: {
            '@typescript-eslint/ban-ts-ignore': 'off',
            '@typescript-eslint/explicit-function-return-type': 'off',
            '@typescript-eslint/no-explicit-any': 'off',
            '@typescript-eslint/no-var-requires': 'off',
            '@typescript-eslint/no-empty-function': 'off',
            'vue/custom-event-name-casing': 'off',
            'no-use-before-define': 'off',
            // 'no-use-before-define': [
            //   'error',
            //   {
            //     functions: false,
            //     classes: true,
            //   },
            // ],
            '@typescript-eslint/no-use-before-define': 'off',
            // '@typescript-eslint/no-use-before-define': [
            //   'error',
            //   {
            //     functions: false,
            //     classes: true,
            //   },
            // ],
            '@typescript-eslint/ban-ts-comment': 'off',
            '@typescript-eslint/ban-types': 'off',
            '@typescript-eslint/no-non-null-assertion': 'off',
            '@typescript-eslint/explicit-module-boundary-types': 'off',
            '@typescript-eslint/no-unused-vars': [
              'error',
              {
                argsIgnorePattern: '^h$',
                varsIgnorePattern: '^h$'
              }
            ],
            'no-unused-vars': [
              'error',
              {
                argsIgnorePattern: '^h$',
                varsIgnorePattern: '^h$'
              }
            ],
            'space-before-function-paren': 'off',
            quotes: ['error', 'single'],
            'comma-dangle': ['error', 'never']
          }
        };

        建立 prettier.config.js

        module.exports = {
          printWidth: 100,
          tabWidth: 2,
          useTabs: false,
          semi: false, // 未尾逗號
          vueIndentScriptAndStyle: true,
          singleQuote: true, // 單引號
          quoteProps: 'as-needed',
          bracketSpacing: true,
          trailingComma: 'none', // 未尾分號
          jsxBracketSameLine: false,
          jsxSingleQuote: false,
          arrowParens: 'always',
          insertPragma: false,
          requirePragma: false,
          proseWrap: 'never',
          htmlWhitespaceSensitivity: 'strict',
          endOfLine: 'lf'
        }

        4. vue-router、vuex

        yarn add vue-router@next vuex@next

        4.1 vuex

        在根目錄下創建 store/index.ts

        import { InjectionKey } from 'vue'
        import { createStore, Store } from 'vuex'
        
        export interface State {
          count: number
        }
        
        export const key: InjectionKey<Store<State>> = Symbol()
        
        export const store = createStore<State>({
          state() {
            return {
              count: 0
            }
          },
          mutations: {
            increment(state) {
              state.count++
            }
          }
        })

        main.ts 修改

        import { createApp } from 'vue'
        import { store, key } from './store'
        import App from './App'
        import './index.css'
        
        const app = createApp(App)
        
        app.use(store, key)
        
        app.mount('#app')

        components/HelloWord.vue 修改

        <template>
          <h1>{{ msg }}</h1>
          <button @click="inCrement"> count is: </button>
          <p>{{ count }}</p>
        </template>
        
        <script>
          import { defineComponent, computed } from 'vue'
          import { useStore } from 'vuex'
          import { key } from '../store'
        
          export default defineComponent({
            name: 'HelloWorld',
            props: {
              msg: {
                type: String,
                default: ''
              }
            },
            setup() {
              const store = useStore(key)
        
              const count = computed(() => store.state.count)
        
              return {
                count,
                inCrement: () => store.commit('increment')
              }
            }
          })
        </script>

        4.2 vue-router

        在 src 目錄下建立 router/index.ts,內容如下:

        import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
        import HelloWorld from "../components/HelloWorld.vue";
        
        const routes: Array<RouteRecordRaw> = [
            {
                path: "/",
                name: "HelloWorld",
                component: HelloWorld,
            },
            {
                path: "/about",
                name: "About",
                // route level code-splitting
                // this generates a separate chunk (about.[hash].js) for this route
                // which is lazy-loaded when the route is visited.
                component: () =>
                    import(/* webpackChunkName: "About" */ "../components/About.vue")
            }
        ];
        
        const router = createRouter({
            history: createWebHistory(process.env.BASE_URL),
            routes,
        });
        
        export default router;

        再新建一個 components/About.vue 文件,內容如下:

        <template>
          <img
            alt="Vue logo"
            data-original="../assets/logo.png"
          />
          <h1>{{ msg }}</h1>
        </template>
        
        <script lang="ts">
        import { defineComponent } from 'vue'
        
        export default defineComponent({
          name: 'About',
          data() {
            return {
              msg: 'Hello Vue 3.0 + Vite!'
            }
          },
          setup() {}
        })
        </script>

        再修改 main.ts

        import { createApp } from 'vue'
        import { store, key } from './store'
        import router from "./router";
        import App from './App'
        import './index.css'
        
        const app = createApp(App)
        
        app.use(store, key)
        app.use(router)
        app.mount('#app')

        再訪問 http://localhost:3000/

        http://localhost:3000/about 即可

        5. 加入 Element Plus

        5.1 安裝 element-plus

        全局安裝

        npm install element-plus --save

        5.2 引入 Element Plus

        你可以引入整個 Element Plus,或是根據需要僅引入部分組件。我們先介紹如何引入完整的 Element。

        完整引入

        在 main.js 中寫入以下內容:

        import { createApp } from 'vue'
        import ElementPlus from 'element-plus';
        import router from "./router";
        import 'element-plus/lib/theme-chalk/index.css';
        import App from './App.vue';
        import './index.css'
        
        const app = createApp(App)
        app.use(ElementPlus)
        app.use(router)
        app.mount('#app')

        以上代碼便完成了 Element Plus 的引入。需要注意的是,樣式文件需要單獨引入。


        按需引入

        借助?babel-plugin-component,我們可以只引入需要的組件,以達到減小項目體積的目的。

        首先,安裝 babel-plugin-component:

        npm install babel-plugin-component -D

        然后,將 .babelrc 修改為:

        {
          "plugins": [
            [
              "component",
              {
                "libraryName": "element-plus",
                "styleLibraryName": "theme-chalk"
              }
            ]
          ]
        }

        接下來,如果你只希望引入部分組件,比如 Button 和 Select,那么需要在 main.js 中寫入以下內容:

        import { createApp } from 'vue'
        import { store, key } from './store';
        import router from "./router";
        import { ElButton, ElSelect } from 'element-plus';
        import App from './App.vue';
        import './index.css'
        
        const app = createApp(App)
        app.component(ElButton.name, ElButton);
        app.component(ElSelect.name, ElSelect);
        
        /* or
         * app.use(ElButton)
         * app.use(ElSelect)
         */
        
        app.use(store, key)
        app.use(router)
        app.mount('#app')
        app.mount('#app')

        更詳細的安裝方法請看 快速上手。

        5.3 全局配置

        在引入 Element Plus 時,可以傳入一個全局配置對象。

        該對象目前支持?size?與?zIndex?字段。size?用于改變組件的默認尺寸,zIndex?設置彈框的初始 z-index(默認值:2000)。按照引入 Element Plus 的方式,具體操作如下:

        完整引入 Element:

        import { createApp } from 'vue'
        import ElementPlus from 'element-plus';
        import App from './App.vue';
        
        const app = createApp(App)
        app.use(ElementPlus, { size: 'small', zIndex: 3000 });

        按需引入 Element:

        import { createApp } from 'vue'
        import { ElButton } from 'element-plus';
        import App from './App.vue';
        
        const app = createApp(App)
        app.config.globalProperties.$ELEMENT = option
        app.use(ElButton);

        按照以上設置,項目中所有擁有?size?屬性的組件的默認尺寸均為 'small',彈框的初始 z-index 為 3000。

        最后

        至此,一個基于 Vue3 全家桶 + Vite + TypeScript + Eslint + Element Plus 的開發環境已經搭建完畢,現在就可以編寫代碼了。

        各個組件的使用方法請參閱它們各自的文檔。

        不得不說 Vue3 + Element Plus + Vite + TypeScript 是真的香!

        推薦一個 Vue3 相關的資料匯總: Vue3 的學習教程匯總、源碼解釋項目、支持的 UI 組件庫、優質實戰項目,相信你會挖到礦哦!

        Vue3 中文文檔,國內 CDN 加速版:

        https://vue3js.cn/docs/zh/

        Element Plus 官網:

        https://element-plus.org/#/zh-CN

        作為 2021 第 2 篇原創技術文章,質量應該還可以吧,1 月的 KPI 完成,哈哈哈 ??

        貓哥的年終總結在這里: 前端工程師的 2020 年終總結 - 乾坤未定,你我皆黑馬,希望能帶給你一點啟發,也看看貓哥的臉都被打歪的 ??

        參考文章:vue3 + vite + typescript + eslint + jest 項目配置實踐

        推薦閱讀

        查看原文

        贊 27 收藏 20 評論 2

        夜盡天明 發布了文章 · 2月1日

        推薦程序員必備的 10 大 GitHub 倉庫,前端占了 7 個!

        大家好,我是你們的 貓哥,一個不喜歡吃魚、又不喜歡喵 的超級貓 ~

        關于貓哥,大家可以看看我的年終總結 前端工程師的 2020 年終總結 - 乾坤未定,你我皆黑馬。

        前言

        初級前端與高級前端之間,很大原因就是投入學習前端的時間、經驗的差別,其實就是信息差。

        如果有一個地方能又快又好的獲得這些優質的前端信息,那么將會大大縮短從初級到高級的時間。

        前端GitHub 就是這樣一個倉庫,能幫助前端開發人員節省時間的倉庫!

        公眾號:前端GitHub,專注于挖掘 GitHub 上優秀的前端開源項目。

        已經推薦了 面試項目、CSS 奇技淫巧項目、代碼規范項目、數據結構與算法項目、JavaScript 奇技淫巧項目、前端必備在線工具 等專題的近 200 個優秀項目了。

        平時如何發現好的開源項目,可以看看這篇文章:GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目

        以下為今天【前端GitHub】的第 17 期精華內容。

        1. build-your-own-x

        GitHub stars: 94k

        如果你想要做些什么,并且想要獲得一些關于如何實現它的指導,這是一個很好的資源。

        通過瀏覽列表,你還會發現很多真正有趣的事情。

        比如建立你自己的 Front-end Framework / Library

        建立你自己的 Game

        地址:

        https://github.com/danistefan...

        2. javascript-algorithms

        GitHub stars: 94k

        該倉庫包含了多種基于 JavaScript 的算法與數據結構。

        每種算法和數據結構都有自己的 README,包含相關說明和鏈接,以便進一步閱讀 (還有 YouTube 視頻) 。

        數據結構包含了 鏈表、雙向鏈表、隊列、棧、哈希表(散列)、堆、優先隊列、字典樹、樹、優先隊列、二叉查找樹、AVL 樹、紅黑樹、線段樹、樹狀數組、圖、并查集、布隆過濾器

        算法包含了 算法主題 和 算法范式。

        其中算法主題又包含了:數學、集合、字符串、搜索、排序、鏈表、樹、圖、加密、機器學習。

        算法范式:算法范式是一種通用方法,基于一類算法的設計。這是比算法更高的抽象,就像算法是比計算機程序更高的抽象。

        算法范式包含了:BF 算法、貪心法、分治法、動態編程、回溯法、Branch & Bound 等等。

        這項目還出了對應的教學視頻,總共 81 個視頻講解,每個視頻大概 5 - 10分鐘左右,還能學習英語哦 ??

        youtube 的教學視頻:https://www.youtube.com/playl...

        前端章魚貓之前學習算法的時候,也在這個項目中收益良多呢!

        而且這個項目還一直有維護和更新內容哦!真的非常不錯的一個項目!

        還想知道更多好的數據結構與算法項目,可以看看 GitHub 上值得前端學習的 7 個數據結構與算法項目 ,相信貓哥,你會被驚艷到 ~

        地址:

        https://github.com/trekhleb/j...

        3. computer-science

        GitHub stars: 74k

        不管你是一個從事編程的人,還是一個已經在業界自學的開發者, OSSU 的課程為所有想要學習計算機科學的人提供了大量的免費學習資源。

        OSSU 課程是使用在線材料進行的完整的計算機科學教育。它不僅用于職業培訓或專業發展。

        它適用于那些希望對所有計算學科具有基本概念的正確,全面的基礎,以及那些擁有該學科,具有意愿和(最重要的是?。┝己昧晳T的人,可以在很大程度上依靠自己的力量來接受這種教育來自世界各地的學習者社區。

        它是根據本科計算機科學專業的學位要求減去通識教育(非CS)要求而設計的,因為假定遵循此課程的大多數人已經在CS領域以外接受了教育。

        這些課程本身是世界上最好的課程,通常來自哈佛大學,普林斯頓大學,麻省理工學院等。

        地址:

        https://github.com/ossu/compu...

        類似的項目推薦:7 個 Github 上近 200k Star 的計算機學習資源,練好前端內功的秘籍!相信你會找到你的武功秘籍!

        4. 30-seconds-of-code

        GitHub stars: 67k

        超過 100 個代碼段,涵蓋了 JavaScript 中的各種內容,從典型的算法,到你可能會發現自己需要完成的常見任務。非常值得一看!

        該項目講的是滿足你所有開發需求的簡短代碼段,里面都是些經常會用到而且是非常經典的代碼,非常值得學習!

        比如 JavaScript 模塊就分為了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便學習的。

        地址:

        https://github.com/30-seconds...

        類似的項目推薦可以看看這篇: 12 個 GitHub 上超火的 JavaScript 奇技淫巧項目,找到寫 JavaScript 的靈感!,你會發現新大陸的!

        5. realworld

        GitHub stars: 53k

        有沒有想過要學習如何使用特定的語言 / 技術開發適當的應用?

        這就是為你準備的 GitHub 倉庫!這超出了典型的“ to-do”應用程序, RealWorld 的示例使整個 “Medium-style” 應用程序更加豐富,包括了所有的鐘聲、哨聲和最佳實踐!

        比如前端項目:

        又比如后端項目:

        地址:

        https://github.com/gothinkste...

        6. free-programming-books

        GitHub stars: 170k

        該倉庫主要是免費提供編程書籍。

        大量的免費編程書籍可以幫助你的知識和理解更上一層樓。

        除了編程書籍,還包含了免費在線課程、互動編程資源。

        地址:

        https://github.com/EbookFound...

        類似的項目推薦:160+ 本技術類精華電子書開源了,包括前端、后端、數據結構與算法、計算機基礎、設計模式、數據庫等書籍。

        7. system-design-primer

        GitHub stars: 120k

        學習如何設計大型系統。為系統設計面試做準備。

        如果你正在尋找高級軟件工程(或更高的)職位,那么擁有設計大型系統的能力是很有價值的,很多大型技術公司都希望你具備這一能力。

        這也是一個重要技巧,如果你打算為你正在做的任何工作構建任何大型系統的話。

        這份指南提供了大量的信息來幫助你做好準備。

        地址:

        https://github.com/donnemarti...

        8. awesome-python

        GitHub stars: 92.2k

        精選的 Python 框架,庫,軟件和資源的精選清單。

        Python 內建了一系列不同的庫、框架和技術的列表。

        對那些想要學習一種新的編程語言或僅僅想要提高對已有 Python 的了解的人來說,這是一個極好的指南。

        地址:

        https://github.com/vinta/awes...

        9. nodebestpractices

        GitHub stars 59k

        該倉庫是對 Node.js 最佳實踐中排名最高的內容的總結和分享。

        當前,超過 50 個最佳實現,樣式指南,架構建議已經呈現。

        每天都有新的 issue 和 PR 被創建,以使這本在線書籍不斷更新。

        因此,擁有這些詳細的指南可以幫助你快速提高技能。

        地址:

        https://github.com/goldbergyo...

        10. awesome-machine-learning

        GitHub stars: 47.8k

        這個 GitHub 倉庫包含了精選的很棒的機器學習框架,庫和軟件的列表。

        地址:

        https://github.com/josephmisi...

        最后

        關于貓哥,大家可以看看 前端工程師的 2020 年終總結 - 乾坤未定,你我皆黑馬,看看貓哥的臉都被打歪的 ??。

        不知不覺,已經寫到第 17 期了呢,已經分享超過 200 個好的前端項目了呢,往期精文請看下方寶藏倉庫,點擊很危險,請慎入!

        https://github.com/FrontEndGitHub/FrontEndGitHub

        平時如何發現好的開源項目,可以看看這兩篇文章:如何在 GitHub 上發現優秀開源項目如何使用 GitHub 進行精準搜索的神仙技巧。

        往期精文

        微信搜 “前端GitHub”,回復 “電子書” 即可以獲得 160 本前端精華書籍哦,加超級貓的 WX:CB834301747 ,一起閑聊前端。

        查看原文

        贊 41 收藏 35 評論 0

        夜盡天明 關注了用戶 · 1月31日

        皮小蛋 @scaukk

        The Best Way to Improve Yourself:

        1. Build Stuffs
        2. Help Others
        3. Teach

        PS: Shopee 招人, 薪酬福利待遇好。

        感興趣的話, 可以聯系我內推。

        關注 823

        夜盡天明 發布了文章 · 1月21日

        Vue3 的學習教程匯總、源碼解釋項目、支持的 UI 組件庫、優質實戰項目

        大家好,我是你們的 貓哥,一個不喜歡吃魚、又不喜歡喵 的超級貓 ~

        關于貓哥,大家可以看看我的年終總結 前端工程師的 2020 年終總結 - 3 年之癢。

        前言

        貓哥是一個常年混跡在 GitHub 上的貓星人,所以發現了不少好的前端開源項目、常用技巧,在此分享給大家。

        公眾號:前端GitHub,專注于挖掘 GitHub 上優秀的前端開源項目,并以專題的形式推薦,每專題大概 10 個好項目,每周會有一到三篇精華文章推送,與時俱進版前端資源教程。

        已經推薦了 面試項目、CSS 奇技淫巧項目、代碼規范項目、數據結構與算法項目、JavaScript 奇技淫巧項目、前端必備在線工具 等專題的近 100 個優秀項目了。

        平時如何發現好的開源項目,可以看看這篇文章:GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目

        今天給大家推薦的是 Vue3 的源碼中文學習教程、支持的 UI 組件庫、優質實戰項目。

        以下為【前端GitHub】的第 16 期精華內容。

        1. Vue3 中文文檔

        先給大家提供 3 個 Vue3 的中文學習網址。

        Vue3 中文文檔,國內 CDN 加速版

        https://vue3js.cn/docs/zh/

        Vue3 設計理念

        Vue3 設計理念,動機與目的,上手必讀。

        https://vue3js.cn/vue-composi...

        Vue3 相關項目聚合網站

        https://vue3js.cn/

        2. Vue3 源碼

        為什么要學習源碼 ?

        1. 閱讀優秀的代碼的目的是讓我們能夠寫出優秀的代碼。

        2. 不給自己設限,不要讓你周圍人的技術上限成為你的上限。

        其實就跟我們寫作文一樣,你看的高分作文越多,寫出高分作文的概率就越大。

        基于現在的程序員工作模式(模塊化開發,只需要拿到需求做自己的部分),別說看源碼,甚至就連項目里的代碼都懶的去看,我認識的很多程序員就是這樣的,一個項目摸了兩三年,你要問他項目中 webpack 都干了哪些事情,他的回答是不知道,反而趾高氣揚的告訴你,那些他從來都用不上,看了也沒什么用,也看不懂,這里省略內心千字臟文。

        閱讀主要目的 是為了幫助我們 積累素材,不要書到用時方恨少,看到美女我們應該能有一萬種詞語去形容,如氣若幽蘭,美艷不可方物,一笑傾城,再笑傾國,世間尤物,而不是簡短的幾個字,我艸,美女!

        https://vue3js.cn/start/

        3. UI 組件庫

        Ant-design-vue

        ant-design-vue 是 Ant Design 的 Vue 實現,組件的風格與 Ant Design 保持同步, 目前支持 Vue 3.0 的 2.0.0 測試版 已發布。

        https://antdv.com/docs/vue/in...

        Vant 3.0

        輕量、可靠的移動端 Vue 組件庫。

        Vant 是有贊前端團隊開源的移動端組件庫,于 2016 年開源,已持續維護 4 年時間。

        目前 Vant 已完成了對 Vue 3.0 的適配工作,并發布了 Vant 3.0 版本

        https://vant-contrib.gitee.io...

        Element-plus

        Element Plus,一套為開發者、設計師和產品經理準備的基于 Vue 3.0 的桌面端組件庫。

        https://element-plus.org/#/zh-CN

        element 3

        Element 3,一套為開發者、設計師和產品經理準備的基于 Vue 3.0 的桌面端組件庫。

        https://github.com/hug-sun/el...

        4. 實戰項目

        vue-vben-admin

        基于 ant-design-vue,typescript,vue3.0,vite 實現的 vue3 風格的后臺管理系統。

        https://github.com/anncwb/vue...

        vue-admin-beautiful

        基于 vue3.0 的開源 admin 項目,同時支持電腦,手機,平板,??????默認分支使用vue3.x+antdv 開發,master 分支使用的是 vue2.x+element 開發。

        https://github.com/chuzhixin/...

        vue-cli

        基于 Vue3.0 Composition Api 快速構建實戰項目

        https://github.com/Wscats/vue...

        movie-trailer

        Vue3 + TypeScript 開發的電影預告片 webAPP,可以查看正在熱映與即將上映的電影信息和短片。

        https://github.com/lhz960904/...

        newbee-mall-vue3-app

        newbee-mall 項目是一套電商系統,包括 newbee-mall 商城系統及 newbee-mall-admin 商城后臺管理系統,基于 Spring Boot 2.X 和 Vue 以及相關技術棧開發。

        前臺商城系統包含首頁門戶、商品分類、新品上線、首頁輪播、商品推薦、商品搜索、商品展示、購物車、訂單結算、訂單流程、個人訂單管理、會員中心、幫助中心等模塊。 后臺管理系統包含數據面板、輪播圖管理、商品管理、訂單管理、會員管理、分類管理、設置等模塊。

        https://github.com/newbee-ltd...

        vue3-jd-h5

        ?? 基于 vue3.0.0 ,vant3.0.0,vue-router4.0.0-0, vuex^4.0.0-0,vue-cli3,mockjs,仿京東淘寶的,移動端 H5 電商平臺!

        https://github.com/GitHubGanK...

        最后

        關于貓哥,大家可以看看 前端工程師的 2020 年終總結 - 3 年之癢,看看貓哥的臉都被打歪的 ??。

        不知不覺,已經寫到第 16 期了呢,已經分享超過 200 個好的前端項目了呢,往期精文請看下方寶藏倉庫,點擊很危險,請慎入!

        https://github.com/FrontEndGitHub/FrontEndGitHub

        平時如何發現好的開源項目,可以看看這兩篇文章:如何在 GitHub 上發現優秀開源項目如何使用 GitHub 進行精準搜索的神仙技巧。

        可以加超級貓的 WX:CB834301747 ,一起閑聊前端。

        微信搜 “前端GitHub”,回復 “電子書” 即可以獲得 160 本前端精華書籍哦。

        往期精文

        查看原文

        贊 18 收藏 16 評論 0

        認證與成就

        • 獲得 3833 次點贊
        • 獲得 27 枚徽章 獲得 2 枚金徽章, 獲得 8 枚銀徽章, 獲得 17 枚銅徽章

        擅長技能
        編輯

        開源項目 & 著作
        編輯

        • blog

          個人原創技術文章地址。

        • blog-vue-typescript

          vue + typescript + element-ui 支持 markdown 渲染的博客前臺展示

        • blog-react

          react + Ant Design + 支持 markdown 的博客展示項目

        • blog-react-admin

          基于 pro.ant.design 的 react + Ant Design 的博客管理后臺項目

        • blog-node

          基于 node + express + mongodb 的博客網站后臺

        • vue-family-mindmap

          一張思維導圖輔助你深入了解 Vue | Vue-Router | Vuex 源碼與架構。

        • route

          原生 js 實現的輕量級路由

        • split

          js 實現上下拖動改變父 div 的高度,左右上下拖動動態分割孩子的寬高。

        • progress

          原生 js 實現一個有動畫效果的進度條 progress 插件。

        注冊于 2018-07-05
        個人主頁被 31.6k 人瀏覽

        一本到在线是免费观看_亚洲2020天天堂在线观看_国产欧美亚洲精品第一页_最好看的2018中文字幕