20190511 前端開發日報

理解promise、async 和await之間的執行關系;JavaScript繼承解析;JS筆記(17):事件;譯| 自定義一個Vue路由器;URL特殊字符和JS編碼解碼方法;Webpack 是怎樣運行的?;JS 之數組的幾個經典api;js異步從入門到放棄( 三)- 異步任務隊列(task queues)

  1. 理解promise、async 和await之間的執行關系 先看下面的例子 console.log('script start'); async function async1(){ console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2(){ console.log('async2 end'); } async1(); setTimeout(function(){ console.log('setTimeout'); },0) new Promise(r...
  2. JavaScript繼承解析 基本上,ES6 的class可以看作只是一個語法糖,它的絕大部分功能,ES5 都可以做到,新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。 借助構造函數實現繼承 缺點:無法繼承原型鏈上的屬性和方法 function Person () { this.name = 'person1' } Person.prototype.sex = '10' Pers...
  3. JS筆記(17):事件 事件:一件事情或者一種行為(對于元素來說,他的很多事件都是天生自帶的),只要我們去操作這個元素,就會觸發這些行為 如果沒有事件函數賦值,事件默認值為null 系統默認事件:null 自定義事件:undefined 元素天生自帶的事件(事件本身不帶on): 1) 【鼠標事件】 ...
  4. 譯| 自定義一個Vue路由器 大量的教程在解釋Vue的官方路由庫vue-router如何集成到現有的Vue應用中做了很好的工作。 vue-router通過向我們提供將應用的組件映射到不同的瀏覽器URL路由所需的功能,做了出色的工作。 簡單的應用通常不需要完全成熟的路由庫,如vue-router。 在本文中,我們將使用Vue構建一個簡單的自定義客戶端路由器。 通過這樣做...
  5. URL特殊字符和JS編碼解碼方法 Home Programming >Front end >Javascript URL特殊字符和JS編碼解碼方法 文章目錄 前言 我們在操作 URL 的時候經常需要處理其中的特殊字符,因為在 URL 中有很多字符是有特殊意義的,比如 ? , & , = 等等,如果在處理 URL 的時候不對這些特殊...
  6. Webpack 是怎樣運行的?在平時開發中我們經常會用到Webpack這個時下最流行的前端打包工具。它打包開發代碼,輸出能在各種瀏覽器運行的代碼,提升了開發至發布過程的效率。
  7. JS 之數組的幾個經典api本文主要來講數組api的一些操作,如簡單實現扁平化n維數組、數組去重、求數組最大值、數組求和、排序、對象和數組的轉化等。
  8. js異步從入門到放棄( 三)- 異步任務隊列(task queues)本文是對于異步系列第一篇里提到的evenloop模型中,所提到的任務隊列(task queues)的展開分析
  9. 一圖理解VUE生命周期感謝作者:[鏈接]
  10. 用這個插件,幫你把 Web VS Code 變為 C/C++ IDE “ 用兩周開發一個插件,能提升更多人的開發效率,這事還是挺劃算的。 程序員也分青銅和王者。青銅只專注于埋頭搬磚,王者致力于造輪子,為了更輕松地敲代碼... 每一個想成為王者的程序員,一定要熟練地使用工具來實現自己的想法,沒有工具,那就自己造,讓寫代碼如絲般順滑。 VS Code 開發中...
  11. Flutter for web README.md Welcome to the code repository for Flutter for web. This repository contains the source code for a fork of Flutter that targets the web. Our goal is to add web support as a first-tier platform in the Flutter SDK alongside iOS and Android. The...
  12. 沒有廢話的vue高級進階( 三 ) 組件高級用法及最佳實踐 世界上有太多孤獨的人害怕先踏出第一步。      ---綠皮書 書接上回,上篇介紹了vue組件通信比較有代表性的幾種方法,本篇主要講述一下組件的高級用法和最佳實踐, 爭取用最少的篇幅占領高地 ?。ǘ嗾f一句,后續這個系列會有 vue最佳實踐和源碼解讀 ,我總有辦法能讓大家看懂,所以點贊關注,不迷...
  13. 如何在Vue里實現一個Redux狀態管理? 嗯,我們都知道 redux 通常是 react 項目中 中一種管理數據的手段,它跟我們 vue 項目里的 Vuex 狀態管理類似,功能相同,但是使用方法卻有不同~ 最近在學習 redux 這一塊,為了更好的幫助跟我一樣的萌新更加深入的了解 redux 的內部原理,我們就來試試,手動實現一個簡單的 redux 狀態管理。 不同的是,我們...
  14. 簡談JSONP 瀏覽器出于安全方面的考慮,只允許與同源下的接口交互。 所謂"同源"指的是"三個相同"。 協議相同:如都是 http 或者 https 域名相同:www.example.com/dir 和 www.example.com/dir2/ 端口相同:如都是80端口 目前,如果非同源,共有三種行為受到限制。 ...
  15. VSCode 使用 eslint 規則格式化 js 使用 Eslint 規范代碼。 格式化代碼時使用 Eslint 規范。 工具 VSCode Eslint Prettier 二步實現 1. 讓 vscode 格式化時默認使用 Prettier 打開 settings.json 配置文件: On Windows/Linux - File > Preferences > Settings On macOS - Code > Preferences > Set...
  16. 音樂播放器項目,gulp+面向對象+異步回調+fs模塊模擬數據庫項目 地址: github.com/liyuanzhe-c… 今天使用jquery按照單對象面向對象思想做了音樂播放器; 只有一個player對象, 各種功能在該對象上面進行擴展, 核心, 除了主入口index.js, 每一個js文件都這么寫 禁止使用異步async, await, 避免index.js 先于依賴模塊加載出來 (function ($, root) { funct...
  17. vue-json-view 一款用于展示json的vue組件,支持大體積json文件快速解析渲染 在線示例 開發背景: 項目開發過程中遇到展示json的場景,且json文件體積過大,小則幾百kb,也嘗試了已經開源的部分組件,但由于節點過多,渲染速度過慢,無法使用,已有項目技術選型為vue,無法再使用react相關技術,所以考慮自己開發一款。 開發過程中參考了react-json-view部分api,組件實現的功能比較基礎,但...
  18. 12個提高 JavaScript 技能的概念JavaScript 是一種復雜的語言。如果是你是高級或者初級 JavaScript 開發人員,了解它的基本概念非常重要。本文介紹 JavaScript 至關重要的12個概念,但絕對不是說 JavaScript 開發人員只需要知道這些就可以了。
  19. Nodejs+socket.io搭建WebRTC信令服務器 我們在學習WebRTC 時,首先要把實驗環境搭建好,這樣我們就可以在上面做各種實驗了。 對于 WebRTC 來說,它有一整套規范,如使它使用的接口、使用SDP進行媒體協商、通過ICE收集地址并進行連通性檢測等等。除此之外,WebRTC還需要房間服務器將多端聚集到一起管理,以及信令服務器進行信令數據交換(如媒體描述信息SDP...
  20. 解析jsonwebtoken(jwt)在nodejs中的使用 這里要用到三個插件, 加上前端一共是至少4個插件 >>>>>>后端應用: jsonwebtoken //生成token字符串 passport //token解析主插件 passport-jwt // 密鑰解析規則插件, 有密鑰解析 ------------------------------------------------------------ >>>>>> 給前端使用的 jwt-dec...
  21. 簡析js中的深淺拷貝問題 因為在JavaScript中對象在賦值中存儲的是對象的地址(指針),所以會造成對象類型在復制過程中只復制對象的地址,從而導致以下問題 var people = { name: "小明" } var peoplea = people; peoplea.name = "小白"; console.log(peoplea.name)//小白 console.log(people.name)//小白 復制...
  22. 復習webpack4之打包分析,Preloading,Prefetching 之前學習過webpack3的知識,但是webpack4升級后還是有很多變動的,所以這次重新整理一下webpack4的知識點,方便以后復習。 這次學習webpack4不僅僅要會配置,記住核心API,最好還要理解一下webpack更深層次的知識,比如打包原理等等,所以可能會省略一些比較基礎的內容,但是希望我可以通過此次學習掌握webpack,更好...
  23. 從源碼分析vue-cli@3.0環境變量配置 在開始之前,我們先來看下官方文檔說明;查看vue-cli文檔中有這么一句話: 只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。 復制代碼 由此我們可以知道, vue-cli 是有針對 VUE_APP_ 這個變量進行配置。接下來讓我們查看源碼,看下 vue-cli 是怎么實現的。 源碼分...
  24. 手把手帶你使用 typescript 實現一個 axios 庫(二)url 參數處理 主要內容:對 get 請求參數的處理 需求分析 看下面這個請求 axios({ method: 'get', url: '/base/get', params: { a: 1, b: 2 } }) 復制代碼 系列一實現了 axios 的基本請求,但是如果你細心會發現還存在問題,就是我們的請求 url 其實是不全的。具體看下圖 圖片占位 可以看到我...
  25. 記錄一次 http 網絡超時的排查過程 微信公眾號:內核小王子 覺得可以的話歡迎關注 場景:公司對外網關對很多外部商戶開放,運行多年一直正常,昨天某一個客戶調用我們接口的時候頻繁報connectiontimeout,異常如下: 該異常來自于httpclient,原因是創建連接超時,也就是tcp進行三次握手的時候失敗,或者握手報文沒有到達服務...
  26. 原創文章:使用Vuejs實現個人所得稅功能兼容移動端 使用vuejs實現個人所得稅的功能,包含5000起點和3500起點之間個稅的變化,并且兼容移動端。 css部分如下: #saper-container { width:86%; margin:0 auto; } #saper-container>.header { margin:10px 2%; } #saper-bd>.subfiled,#gsqd>.gswq>h3,.gssqw>h3 { background:#66CDAA; } #saper-bd>.subf...
  27. GitHub 集成 Netlify:快速預覽 PR 前言 本文將介紹使用Netlify為Github中的開源項目進行持續部署: 每當項目發生一個Pull?Request時,Netlify會構建相應的代碼,并自動回復,在回復內容提供一個在線鏈接,可供開發者快速預覽此次改動的效果。 開始使用 直接訪問Netlify網站,使用Github賬號登錄 ...
  28. Vue項目中配置pug解析支持 Vue 的用法沒有變化: <template lang="pug"> transition(name="sider") div.hello h3 {{msg}} p(:style="{color:'#000'}", :htmlData="msg") p label button(@click="clickMe") clickTest </template> 復制代碼 要注意的一...
  29. 手摸手,帶你用vue擼后臺 系列五(v4.0新版本)vue-element-admin 從 2017.04.17提交第一個 commit 以來,維護至今已經有兩年多的時間了了,發布了四十多個版本,收獲了三萬多的 stars,遠遠的超出了自己的預期。距離上次手摸手系列教程也已經過去了很久,主要...
  30. 使用 Git 的 post-receive 實現自動部署 這事斷斷續續折騰我大概兩周時間,這就把我經歷的事分享給大家。 為了實現在本地提交這個blog項目能不用手動到線上更新而努力著,剛開始在找解決辦法時以為就那么簡單,結果卻折騰在docker、linux權限和如何寫shell的幾個關鍵知識里面。 流程 這里先簡單介紹一下部署流程: 本地--[推...
  31. 從零開始手寫一個優化版React腳手架webpack馬上要出5了,完全手寫一個優化后的腳手架是不可或缺的技能。 本文書寫時間 2019年5月9日 , webpack版本 4.30.0最新版本 要轉載必須聯系本人經過同意才可轉載 謝謝! 杜絕5分鐘的技術,我們先深入原理再寫...
  32. fe-interview:前端面試每日 3+1,以面試題來驅動學習,每天進步一點 README.md 前端面試每日 3+1(每日三問) 《論語》,曾子曰:“吾日三省吾身”(我每天多次反省自己)。 前端面試每日3+1,以面試題來驅動學習,每天進步一點! 讓努力成為一種習慣,讓奮斗成為一種享受! 相信 堅持 的力量?。?! 學習不打烊,充電加...
  33. Vue.js應用性能優化:第一部分---介紹性能優化和懶加載當“移動優先”(mobile-first)的方式逐漸成為一種標準,而且不確定的網絡環境因素應該始終是我們考慮的一點,因此保持讓應用程序快速加載變得越來越困難。在本系列文章中,我將深入研究Vue性能優化技術,我們在 V...

關注github前端日報 訂閱精彩文章

前端日報欄目數據來自碼農頭條,每日分享互聯網上熱門的前端開發、移動開發、設計、資源和資訊等,為開發者提供動力,如果覺得內容對你有用,記得分享給你的小伙伴。進入碼農頭條查看更多