20200606 前端開發周報

vue3.0 beta已出,來快速實踐一下吧;圖解 Promise 實現原理(四)—— Promise 靜態方法實現;js從原始數據類型到深淺拷貝(個人筆記);這些熱門 GitHub 庫,值得每一個前端開發者收藏;javascript代碼重構之:寫好函數;【深度揭秘】你不知道的 JS 強制類型轉換知識;5 個你需要知道的 JavaScript 小技巧;探究SEO與VUE首屏渲染及其解決方案

  1. vue3.0 beta已出,來快速實踐一下吧

    vue3.0 beta已出,來快速實踐一下吧 本文視屏 我的個人博客 vue3向下兼容vue2,vue2目前也是必學的 本節源碼 立即前往 前段時間尤大在嗶哩嗶哩直播了vue3的預覽,來簡單實踐一下吧 api文檔 Composition API RFC 立即前往 vue3地址 立即前往 vue3的改變 更小更快 ...

  2. 圖解 Promise 實現原理(四)—— Promise 靜態方法實現

    本文首發于 vivo互聯網技術 微信公眾號 鏈接: https://mp.weixin.qq.com/s/Lp_5BXdpm7G29Z7zT_S-bQ 作者:Morrain 了用法,原生提供了Promise對象。更多關于 Promise 的介紹請參考阮一峰老師的  ES6入門 之 Promise 對象 。 很多同學在學習 Promise 時,知其然卻不知其所以然,對其中的用法理解不了...

  3. js從原始數據類型到深淺拷貝(個人筆記)

    最近學習總結感覺很多知識都串一起去了,所以今天就把幾個知識點一起理一理把。 原始數據類型 number null   (沒有值卻存在  這里“沒有對象”,即不應該有值) underfined  (應該有值卻不存在,這里"缺少值",就是這里應該有值,但是還沒有定義) boolea string ...

  4. 這些熱門 GitHub 庫,值得每一個前端開發者收藏

    作為一個碼農,我們需要專注于功能和最佳實踐,而不是一遍遍地編寫樣板代碼。消除無用功,投入時間學習使用正確的工具或者懂得使用有用的資源可以極大的幫助我們節省時間。

  5. javascript代碼重構之:寫好函數

    系統由程序、子程序和函數組成。寫好函數,就會讓你的代碼讀起來清晰得多。接下來討論如何寫好函數 1、函數要短小,一個函數只做一件事 如果函數做了較多的事情,它就難以組合、測試和推測。同時讓函數只做一件事情的時候,它們就很容易重構。 // Bad function showStudent(ssn){ const student = db.get(ssn); ...

  6. 【深度揭秘】你不知道的 JS 強制類型轉換知識

    如 | 或者 ~ ,只適用于 32 位整數,運算符會強制操作數使用 32 位格式。 比如: 0 | -0 // 0 0 | NaN // 0 0 | Infinity // 0 0 | -Infinity // 0 復制代碼 以上的數字因為來自 IEEE 754 標準,而運算符強制要求 32 位格式,但是它們無法以 32 位格式來呈現,所以返回 0。 對于 ~ ,首先將值強...

  7. 5 個你需要知道的 JavaScript 小技巧

    JavaScript 是目前最流行的編程語言之一。就像其他任何編程語言一樣,它也有很多小技巧,從今天開始你就可以使用它們。 大多數程序員都應該每天訓練這些小技巧,直到熟能生巧。 在這篇文章中,我們將一起練習一些技巧,它可以讓你成為更好的開發者,也可以提高你的 JavaScript 技能。 1. Every 和 Some 并不是所有...

  8. 探究SEO與VUE首屏渲染及其解決方案

    前言 【音樂博客】 上線啦! 開開心心部署到服務器,然后滿懷欣喜打開首頁,結果發現有點小慢,這就很不愉快啦 下面來解決vue首屏渲染 五個方面 1. SPA單頁面應用 首屏打開速度很慢,因為用戶首次加載需要先下載SPA框架及應用程序的代碼,然后再渲染頁面。 不利于...

  9. 也許這才是你想要的微前端方案

    微前端是當下的前端熱詞,稍具規模的團隊都會去做技術探索,作為一個不甘落后的團隊,我們也去做了。也許你看過了Single-Spa,qiankun這些業界成熟方案,非常強大:JS沙箱隔離、多棧支持、子應用并行、子應用嵌套...

  10. Vue的class語法與常規語法對照表

    由于項目需要,需要使用 Vue 的 class 語法配合 TypeScript 來進行組件開發,我也簡單總結了一下Class語法與常規語法的對照,便于記憶和查閱。 項目中使用的是 vue-class-component 、 vue-property-decorator 配合 TypeScript 來進行開發的,其中 vue-class-component 提供了 class 語...

  11. 尤雨溪:重頭來過的 Vue 3 帶來了什么?

    【CSDN 編者按】為了實現更清晰、更易維護的源代碼架構,Vue.js 作者尤雨溪于 2018 年年底透露 Vue 下一版本 Vue 3.0 將從頭開始寫 。 如今一年多時間已過,在上個月,我們終于見證了 Vue 3.0 beta 的發布:https://github.com/vuejs/vue-next#status-beta,不過對于該測試版,尤雨溪表示,“暫時還不建議升級生產環境...

  12. vue-cli踩坑記錄

    初步判斷,由于css樣式資源、頁面資源都已經加載到位,排除網絡環境問題后,讓用戶打開控制臺截圖看一下,白屏的原因是由于JS執行報錯阻塞了后續的邏輯執行和渲染。

  13. 從一個誤寫的逗號談開去——JS代碼是如何被壓縮的

    故事起源于一個很小問題,我寫了個代碼,被質疑有問題:簡化之后大概如下: {代碼...} 被質疑的主要原因是第三行a=123的后面為什么是逗號,不是分號。坦白來說,我是簡單的手誤,將分號錯寫成了逗號。但是感覺貌...

  14. 一篇文章,全面掌握Git

    版本控制 版本控制就是記錄項目文件的歷史變化。它為我們查閱日志,回退,協作等方面提供了有力的幫助。 版本控制一般分為集中化版本控制和分布式版本控制。 集中化主要的版本數據都保存服務端。 分布式版本數據...

  15. css布局實例第二篇:3種方法實現三欄布局高度不定,左右寬度一定,中間寬度自適應

    承接上文思考2 flex布局,table布局,grid布局可以實現高度不定,左右自適應中間高度 float布局overflow:hidden可以使中間內容垂直排布,不能左右自適應; 絕對定位布局只能指定固定高度,不能左右自適應; {代碼...

  16. 用js實現css的文字兩端對齊效果

    引言: 作為前端開發,我們常常用到text-algin這個屬性使文字兩端對齊。今天我們使用js來實現一個文字兩端對齊的效果! 題目: 給定一個所有項都是長度大于0的字符串words,以及每行最大字符數target。請實現每一行兩端對齊。最后一行需要采用左對齊! eg1: Input: words = ["This", "is", &quot...

  17. 小小試水—npm上傳自己的vue組件

    注冊npm賬號 搭建一個vue項目 新建packages文件夾 修改vue.config.js配置 修改package.json配置 搭建一個vue項目 可以查看我的文章搭建一個vue3/4項目 目錄如下: ├── node_modules/ # 依賴包; ├── public/ # 靜態資源,不經過打包; │ ├── favicon.ico ...

  18. 使用Vue全家桶+Node.js搭建的小型全棧項目

    項目運行 # 克隆到本地 git clone git@github.com:Hanxueqing/Douban-Movie.git # 安裝依賴 npm install # 開啟本地服務器localhost:8080 yarn serve # 發布環境 yarn build 項目開發 1、安裝vue-cli3腳手架 現在使用前端工程化開發項目是主流的趨勢,也就是說,我們需要使用一些工具來搭建vue的開發環境...

  19. 前端自動生成圖片并下載(不到60行代碼)

    需求 由于一些簡單的圖片拼合需要處理(大概8000張),但是又沒有找到合適的傻瓜軟件能夠很好地解決需求,同時也很令人頭疼的是nodejs里面圖片處理庫,基本上沒幾個好用,且安裝費時費勁 (當然我還是裝了)。作為一個有追求的前端,如果能不依靠其他的東西,直接在前端頁面上實現它不香么?于是就有了這個小嘗試。其...

  20. 萬丈高樓平地起(3)繼續梳理js 知識點(瀏覽器存儲,TCP流程,get post ,js內存)

    簡介:瀏覽器存儲大致可分為三個點,cookie,localStorage,sessionStorage下面我將為大家一一介紹這三種瀏覽器存儲方式并總結 一、cookie 1、cookie的定義 cookie是存儲在瀏覽器上的一小段數據,用來記錄某些當頁面關閉或者刷新后仍然需要記錄的信息。在控制臺用docum.cookie可以查看當前正在瀏覽網站的cookie。 2、c...

  21. 來自 1000+ 個項目的 10 大 JavaScript 錯誤(以及如何避免)

    為了回饋我們的開發人員社區,我們查看了包含數千個項目的數據庫,并發現了JavaScript中的前10大錯誤。我將向你展示導致它們的原因以及如何防止它們發生。如果你避免這些“陷阱”,它將使你成為更好的開發人員。 由于數據為王,因此我們收集、分析并排名了前10個JavaScript錯誤。Rollbar收集每個項目的所有錯誤,...

  22. 第二期:前端九條bug分享

    這次9個并不都是bug, 其中有幾個小優化, 雖然一個月的時間遇到很多bug, 但并不是每個都有參考價值, 讓我們看看這次我遇到的有趣問題吧.

  23. 實現一個Vue自定義指令懶加載

    比如我們加載一個頁面,這個頁面很長很長,長到我們的瀏覽器可視區域裝不下,那么懶加載就是優先加載可視區域的內容,其他部分等進入了可視區域在加載。

  24. jQuery實現視頻展示效果

    本文實例為大家分享了jQuery實現視頻展示的具體代碼,供大家參考,具體內容如下 效果: 用戶可以單擊左上角的左右箭頭,來控制視頻展示的左右滾動。當單擊向右箭頭時,下面的展示視頻會向左滾動,同時新的視頻展示會以滾動方式顯示出來。 思路: 當視頻展示內容處于最后一個版面時,如果再向后,...

  25. websocket+nodejs實現聊天室

    傳統http協議,是基于請求和響應的,無法直接做到客戶端向客戶端發送消息。 websocket協議是基于tcp的一種新的網絡協議。實現了瀏覽器與服務器全雙工通信。全雙工:客戶端可以主動給服務器發送消息,服務器也可以主動給客戶端發送消息。 websocket是一種持久協議,http是非持久的 傳統http協議實現即使聊天,必須通過aja...

  26. 循序漸進VUE+Element 前端應用開發(5)— 表格列表頁面的查詢,列表展示和字段轉義處理

    在我們一般開發的系統界面里面,列表頁面是一個非常重要的綜合展示界面,包括有條件查詢、列表展示和分頁處理,以及對每項列表內容可能進行的轉義處理,本篇隨筆介紹基于Vue +Element基礎上實現表格列表頁面的查詢,列表展示和字段轉義處理。 在前面隨筆《 循序漸進VUE+Element 前端應用開發(4)--- 獲取后端數據及產...

  27. Webpack 詳解之代碼分割(code-splitting)

    本文所有的內容均基于 webpack@4.42.0 所撰寫。閱讀本文之前需了解 Webpack 的一些基本概念,如: entry 、 chunk 、 module 等。 代碼分割是 Webpack 最引人注目的特性之一。這個特性允許開發者將代碼分割成不同的包,然后可以按需加載或并行加載這些包。它可以用來實現更小的包,并控制資源加載優先級,如果...

  28. Express 基于 Node.js 平臺,快速、開放、極簡的 Web 開發框架

    //導入express const express = require('express') //創建app對象 const app = express() //構建請求 app.get('/',(req, res)=>res.send('hello world')) //配置app監聽3000端口 app.listen(3000, ()=>console.log('Example app listening on port 3000!')) 復制代碼 快速創建應用的骨架-Express 應用程序生成...

  29. Vue-常見的組件通信方式

    最近一直在從頭開始學習vue,順手整理一下vue組件化的相關通信方式,分析不到之處,還望各位指正。 組件化 vue組件系統提供了?種抽象,讓我們可以使?獨?可復?的組件來構建?型應?,任意類型的應?界?都可以抽象為?個組件樹。組件化能 提?開發效率 , ?便重復使? , 簡化調試步驟 , 提升項?可維護性 ...

  30. JavaScript – 原生JS實現滾輪翻頁

    當用戶通過鼠標滾輪與頁面交互、在垂直方向上滾動頁面時,就會觸發mousewheel事件,這個事件就是實現全屏切換效果需要用到的。在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 “mousewheel” 事件,而 Firefox 3.5+ 中提供了一個等同的事件:”DOMMouseScroll”。與mousewheel事件對應的event對象中我們還會用到另一個...

  31. 使用 Vuepress 編寫組件示例文檔的最佳實踐

    這篇文章面向使用 Vuepress 來開發 Vue 組件文檔庫的用戶服務,去年差不多這個時候我為公司開發了一個基于 AntDesignVue 封裝的高階組件庫,經過一年的版本迭代與文檔更新,收獲了很多坑點,其中有一個就是關于組件示例維護相關的,今年有意重構組件庫的文檔與代碼結構,后面會陸陸續續將踩到的坑點與相應的解決方案一...

  32. 圖解JavaScript——進階篇(執行上下文、變量對象、作用域、作用域鏈、閉包、this、原型及原型鏈、事件循環等一把梭)

    使用思維導圖闡述JS的知識,為面試及工作助力。本節是第二部分,主要內容包括函數的執行(函數執行過程、執行上下文、變量對象、作用域、作用域鏈、閉包、this指向、原型及原型鏈等)和事件循環(任務分類、Event...

  33. RN和React路由詳解及對比

    在平時H5或者RN開發時,我們業務場景中大部分都不是單頁面的需求,那這時我們就能使用路由在進行多頁面的切換。下面會對比一下react路由和RN路由的本質區別和使用方法。

  34. 這才是真正的 Git 分支合并

    本文通過講解三向合并和 Git 的合并策略,介紹 Git 如何完成一次合并。

  35. 使用 Nodejs 開發的 SpaceX-API 開源了

    上面是這個圖片不是從網上隨便找的,來自于 SpaceX-API 項目的 Github 網站,想起了之前說的一個玩笑 “面試造火箭” 這次是真的造火箭了。。。 SpaceX-API 是什么? SpaceX-API 是一個用于火箭、核心艙、太空艙、發射臺和發射數據的開源 REST API。 https://docs.spacexdata.com 展示了所提供的 API 接口,還包括...

  36. 關于Git rebase你必須要知道的幾件事

    DevUI是一支兼具設計視角和工程視角的團隊,服務于華為云DevCloud平臺和華為內部數個中后臺系統,服務于設計師和前端工程師。 官方網站:devui.designNg組件庫:ng-devui(歡迎Star) 官方交流群:添加 DevUI小助...

  37. 基于promise和原生ajax寫axios源碼

    代碼要寫在一個私有作用域中(閉包),防止變量污染,用window.xxx=xxx的方式向外暴露使用的方法axios,axios.get|options|delete|head|post|put方法要掛載到方法實例上,還有defaults(默認的配置)和interceptors(攔截器),通過整理默認config和自定義的config結合得到最后的config,通過這個配置結合原生的ajax實現axios 代碼 ...

  38. Nodejs 中 ES Modules 入門使用講解

    2020-05-26 Nodejs v12.17.0 LTS 版發布,去掉 --experimental-modules 標志。 雖然已在最新的 LTS v12.17.0 中支持,但是目前仍處于 Stability: 1 - Experimental 實驗階段,如果是在生產環境使用該功能,還應保持謹慎,如果在測試環境可以安裝 n install v12.17.0 進行嘗試。 刪除標志也是將 ESM 變為穩定性而...

  39. 面試系列——JavaScript基礎篇

    JS中存在的 執行上下文類型 : 全局上下文:windows對象 函數上下文:每次調用函數時,創建一個新的上下文 eval上下文 每個執行上下文,都存在三個屬性: 作用域 、 變量 、 this 作用域:JS只有 全局作用域 和 函數作用域 var創建的變量只有 函數作用域 let和const創建的變量既有 ...

  40. js每天一個小技巧-變量和函數提升

    首先,先丟出來一道題: var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); 復制代碼 如果我們不了解 javascript 中的變量提升和函數聲明提升,那么我們的答案肯定是 1。 那么正確的答案是什么呢? 我們首先把這段代碼還原: var foo = 1; function bar(){ ...

  41. 前端實習涼涼面

    自我介紹 省略 OSI網絡分層 物理層、數據鏈路層、網絡層、傳輸層、會話層、表示層、應用層 HTTP請求的連接與斷開 三次握手 四次揮手 url到頁面展示的過程 DNS解析、HTTP請求、瀏覽器獲得數據渲染頁面。 DNS是怎么解析的 不清楚 瀏覽器是怎么將HTML渲染成頁面的 解析HTML文檔,構...

  42. Flutter Provider 迄今為止最深、最全、最新的源碼分析

    Flutter State Management狀態管理全面分析上期我們對Flutter的狀態管理有了全局的認知,也知道了如何分辨是非好壞,不知道也沒關系哦,我們接下來還會更加詳細的分析,通過閱讀Provider源碼,來看看框架到底如何...

  43. 精讀JS系列(9b) Promise — 回調地獄、Promise構造器

    看一下進階時間線: 看到夢想之前,我只想到了無限長的距離…… 首先解釋一下這張時間線,它的起點就是 入門完成 ,所以自然會從 印象最深的概念 開始入手——即 異步 這里。所以較復雜的知識已經在之前搞完了,現在就是比較簡單的了。 本文將簡單的介紹一下 Promise 以及 promisify 的方法,不涉及 底...

  44. 從零開始解說vue中動態組件的創建和使用

    邏輯: 用戶手動選擇加入那些組件 方式:通過element ui tree組件復選框來選擇,加載哪個組件 1.在html頁面構建 加入keep-alive是保持這些組件的狀態,以避免反復重渲染導致的性能問題 el-tree(:data="treeData" ref="tree" class="filter-tree" show-che...

  45. JDK14性能管理工具:jstack使用介紹

    簡介 在之前的文章中,我們介紹了JDK14中jstat工具的使用,本文我們再深入探討一下jstack工具的使用。 jstack工具主要用來打印java堆棧信息,主要是java的class名字,方法名,字節碼索引,行數等信息。 更多精彩...

  46. JavaScript框架的"代價"

    原文標題:The Cost of Javascript Frameworks 原文地址: https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/ 本文采用意譯而非直譯,有刪減 網頁中大量使用JavaScript會拖慢網頁的速度。這是因為,我們在網頁中使用JavaScript時,需要付出以下的成本: 從網絡上下載js文...

  47. JavaScript重構技巧-降低函數復雜度

    點贊再看,養成習慣本文 GitHub [鏈接] 上已經收錄,更多往期高贊文章的分類,也整理了很多我的文檔,和教程資料。歡迎Star和完善,大家面試可以參照考點復習,希望我們一起有點東西。

  48. web安全之XSS實例解析

    跨站腳本攻擊(Cross Site Script),本來縮寫是 CSS, 但是為了和層疊樣式表(Cascading Style Sheet, CSS)有所區分,所以安全領域叫做 “XSS”;

  49. 一分鐘玩轉 Git

    今天又有新來的小朋友問我關于 Git 的用法,我發現還是有蠻多新人不會用的,或者用不好的。其實想想自己剛工作時也是倒騰不清楚這些參數和用法,而且總怕出錯,慢慢的多看文檔、用得多了就熟悉了,今天簡單跟大家...

  50. Robust 第 15 期:跳出框架看前端分層結構

    時下最火的前端框架,說白了實際上都是視圖開發框架。前端開發除了遵循框架的范式外,實際上還有很大的空間。但是實際上前端開發不單單只包含視圖層開發。我們關注的核心,實際上包含了界面、數據、業務、事件。本期robust就來聊一聊,前端分層結構,如何發揮MVC,梳理出前端開發的結構層次。 網易云音樂: 點...

  51. JavaScript的padStart()和padEnd()格式化字符串使用技巧

    幾天前,我正在使用JavaScript構建倒數計時器,因此我需要格式化秒和毫秒,我希望秒始終是2位數的長度,而毫秒總是3位數的長度,換句話說,我希望 1 秒顯示為 01,1 毫秒顯示為 001。

  52. VS Code 調試完全攻略(6):調試用 TypeScript 開發并打包的 React

    說到前端,我現在選擇的武器是 React、TypeScript 和 Parcel trinity。這是一個簡單、可靠而且高效的設置,只需最少的配置。本文將向你展示如何在 VS Code 中創建匹配的調試器。

  53. CSS 創意構想 – Part 2/2

    背景 本文接上篇, 繼續我們的《CSS》 創意構想。 因為有一些案例沒有代碼, 本著學習的態度, 我需要一個個補齊, 也方便大家看。 更新的時候可能就按小節, 逐步更新。 廢話補多少, 開始正文吧。 正文 本文的...

  54. 記 vue-cli 項目首頁加載速度慢的有效優化

    開始我想把這個鍋甩給網速,但我發現一些大商城項目(淘寶,京東),在網速一般的情況下,加載速度依然還是挺快,哎,網速不背這個鍋 還是找項目的原因吧,加載時間4.5s 監控首頁加載的過程,找到拖后腿的 vendors***.js 這個鍋他來背 1.9M 的 js文件下載3.42秒 ,先不說網速,這個js也太TM大了...

  55. AV1 vs HEVC:WebRTC 編解碼器之爭卷土重來?(四)

    有關最新WebRTC視頻編解碼器的常見問題解答 Web WebRTC是否支持HEVC(H.265)? 不,并沒有正式支持。 蘋果正在Safari中添加對HEVC的支持,但是其他瀏覽器沒有添加,或表示有此計劃。 我可以在WebRTC中使用HEVC嗎? 可以,但瀏...

  56. WebView庫功能完善

    01.loadUrl到底做了什么 02.觸發加載網頁的行為 03.webView重定向怎么辦 04.js交互的一點知識分享 05.攔截緩存如何優雅處理 06.關于一些問題和優化 07.關于一點面向對象思想 08.關于后期需要研究目標 01.loadUrl到底做了什么 WebView.loadUrl(url)加載網頁做了什么? 加載網頁是一個復雜的...

  57. VS Code 調試完全攻略(5):基于瀏覽器的 React 應用

    這次我們來研究怎樣把調試器連接到用 Create React App 生成的 React 程序。我們將看到如何從 VS Code 啟動瀏覽器并檢查遠程異步 API 調用。它超級強大,同時又很容易,所以在調試 CRA 和 React 程序時沒有理由不...

  58. vue的keep-alive講解

    保存用戶狀態,比如說:我們在填寫收貨地址的頁面,需要跳轉到另一個頁面通過定位選擇地址信息再返回繼續填寫,這時候需要緩存收貨地址頁面,避免跳轉頁面導致用戶數據丟失。

  59. JS實現select選中option觸發事件操作示例

    我們在用到下拉列表框select時,需要對選中的 <option> 選項觸發事件,其實 <option> 本身沒有觸發事件方法,我們只有在select里的onchange方法里觸發。 想添加一個 option 的觸發事件,在 option 中添加 onclick 點來點去就是不會觸發事件。 又在 select 中添加 onclick 這下可好了,沒選 opti...

  60. Flutter Weekly Issue 58

    教程 逆向 Flutter 應用 進展匯總 | Flutter 精彩不停,與您同在 插件 creditcard-slider Dart package for creating a credit card slider flutter-orientation ...

更多內容請關注公眾號【前端開發博客】每日更新