20190519 前端開發日報

框架的游戲:2019 年 JavaScript 流行趨勢;ES6中的class是如何實現的?(附Babel編譯的ES5代碼詳解);讓你從頭到尾把promise整的明明白白;如果可以,永遠不要在生產中直接運行 Node.js;從頭開始復習js之讓你徹徹底底搞清楚數組;vue+electron高仿網易云;一道有意思并對你有幫助的Promise題;談一談我是怎么學習使用vuex的

  1. 框架的游戲:2019 年 JavaScript 流行趨勢 JavaScript 生態系統復雜多變,各種框架讓人眼花繚亂。究竟孰優孰劣,如今的發展趨勢是怎樣的,用人單位又需要怎樣的人才?本文站在一個中立者的角度,客觀分析了當前這場“框架的游戲”中,JavaScript 的流行趨勢。 Javascript 的生態環境讓我想到了戰場。TypeScript 對戰 ES6,React 對戰 Angular,Jest 對戰 Mocha……...
  2. ES6中的class是如何實現的?(附Babel編譯的ES5代碼詳解) 今天強行被某大廠社招面試了一波,時長持續半個小時,以面試官的一句“面試反饋還挺好的,希望以后保持聯系”告終。時間節點發生在辭掉實習回學校做畢設的時候,這場面試就顯得格外刺激?;A的數據結構和算法題都回答一二,但是也暴露了對ES6底層代碼實現的不求甚解。不經過刻意準備的面試,也是原始狀態的真實體現。 ...
  3. 讓你從頭到尾把promise整的明明白白 最近一直私下在看Android項目,前端這一塊沒怎么仔細研究。昨天在寫重構公司前端項目的時候,我發現一旦有異步的任務,腦海里面條件反射一般的出現promise的字樣。重構的多了 心就就在納悶:既然promise這么好用,我能不能自己手寫一個promise呢?我思索了半天,按照自己的想法模擬了出來,但是和一位大佬交流的時候,他...
  4. 如果可以,永遠不要在生產中直接運行 Node.js 有時候我也在想我是否真的知道很多東西。 就在幾周前,我正在和一個朋友談話,他不經意間提到,“你永遠都不會在生產中直接使用 Node 來運行程序”。我強烈點頭,表示我 也 不會在生產中直接運行 Node,原因可能每個人都知道。但是我并不知道,我應該知道原因嗎?我還能繼續寫代碼嗎? 如果讓我繪制一個維恩圖來表示...
  5. 從頭開始復習js之讓你徹徹底底搞清楚數組 關于數組這一塊,從開始寫項目開始就一直在用,但是基本都沒有整理過,怎么說呢?既然在復習這個東西,那我今天正好在復習這個數組,就集中整理一下在實際開發中用到頻率最高的數據吧。 一、 es5中的數組方法 es5中定義了22個數組的方法,這22個方法的使用頻率基本貫穿整個前端開發,如果你想進入前端,這22個應該成...
  6. vue+electron高仿網易云vue+electron高仿網易云桌面端,根據網上一位大神的api做的,目前已上線阿里云,項目在github上面有,希望大家支持下,覺得有幫助的點個star github地址如下: 高仿網易云 gif動圖演示
  7. 一道有意思并對你有幫助的Promise題 一道有意思的題 以下我的學習分析心路歷程,以及我自己又多加了幾道菜;希望對你有幫助 先上菜 new Promise((resolve, reject) => { console.log('promise1'); resolve(); }).then(() => { console.log('then11'); new Promise((resolve, reject) => { console.log('pro...
  8. 談一談我是怎么學習使用vuex的 首先我們談到一個技術肯定是要從以下幾個方面來進行探究的: 什么情況下要用這項技術 這項技術相對于其他技術的優勢 我這里呢?就從這兩個方面來開始,逐次、深層次的介紹vuex。 首先現今幾大主流的框架:react,vue,angluar包括小程序,無以復加的都提出一個組件化的思想。這樣做的好處是:高內聚、...
  9. 前端每日實戰:166# 視頻演示如何用 CSS 創作一個 Safari LOGO效果預覽 按下右側的“點擊預覽”按鈕可以在當前頁面預覽,點擊鏈接可以全屏預覽。 [鏈接] 可交互視頻 此視頻是可以交互的,你可以隨時暫停視頻,編輯視頻中的代碼。 請用 chrome, safari, edge 打開觀看。 [鏈接] ...
  10. WebGL-Demo 最近拖更蠻嚴重,因為對自己的要求高了一大截。 最近玩了個Three.js的Demo,也算了解了一波前端的動畫方面的延伸,因為我公司主要業務為大數據,學了很多數據層的東西,動畫方面沒什么用武之地,但是我是喜歡動畫效果的,哎,有沒有種逼良為娼的感覺。 OpenGL 想入門WebGL的時候就查了很多文章,以前學c++的時候接...
  11. Node.js 微服務實踐(二) 基于Seneca 和 PM2構建 本章主要分為三個小節: 選擇Nodejs的理由:將證明選擇Node.js來構建的正確性。介紹使用Node.js時設計的軟件棧。 微服務架構Seneca:關于Seneca 的基本知識。 PM2:PM2 是運行 Node.js 應用的最好選擇。 選著Node.js的理由 如今,Node.js 已經...
  12. 使用 Nodemailer 輕松構建能通過電子郵件重置密碼的 React 應用程序 在我還沒有真正動手嘗試,幫我的 MERN 應用程序構建基于電子郵件的密碼重置功能時,我高估了這么做的難度。據我所知,在 JavaScript 應用程序中發送電子郵件是很困難的,但我仍然想嘗試一下。 幾個月來,為了磨練我的 JavaScript 全棧技能,我一直在慢慢構建這個應用并把它添加到一個 用戶注冊服務 。 首先,我使...
  13. 再談javascriptjs原型與原型鏈及繼承相關問題 什么是原型語言 只有對象,沒有類;對象繼承對象,而不是類繼承類。 “原型對象”是核心概念。原型對象是新對象的模板,它將自身的屬性共享給新對象。一個對象不但可以享有自己創建時和運行時定義的屬性,而且可以享有原型對象的屬性。 每一個對象都有自己的原型對象,所有對象構成一個樹狀的層級系統。root節點...
  14. HTTP/2 in Go(四) 女主宣言 上篇文章我們了解了如何在HTTP/2 server端進行Header信息的發送,同時保持連接不斷開。這次我們在這個基礎上,實現自動下發PUSH。本文來自公眾號“360搜索技術團隊”的投稿,作者付坤。 PS:豐富的一線技術、多元化的表現形式,盡在“360云計算”,點關注哦! 相關閱讀: ...
  15. vue+高德地圖開發采坑持續記錄網上搜索了一些資料,大部門都是index.html直接引入高德地圖的js文件,個人感覺沒有必要,畢竟地圖只是部分頁面需要使用,所以這種方法直接不考慮了。然后又找到了一種地圖懶加載的方法,需要的時候按需引入地圖...
  16. js高級程序設計 - 溫故而知新 文章來源: www.bookcss.com/note/12/33 JavaScript 誕生于 1995 年。當時,它的主要目的是處理以前由服務器端語言(如 Perl)負責的一些輸入驗證操作。在 JavaScript 問世之前,必須把表單數據發送到服務器端才能確定用戶是否 沒有填寫某個必填域,那你可能九年級木塊模塊了是否輸入了無效的值。 Netscape Navi...
  17. 適用于 Cocos 的 JSC 加解密工具 腳本地址:Github 簡介 此腳本用于CocosCreator加密編譯后 jsc 文件解密為 js 文件和 js 文件加密為 jsc 文件。 CocosCreator構建時,是否勾選Zip壓縮選項決定了使用腳本的參數不同。在CocosCreator的構建面板下圖的位置中,查看加密密鑰和是否開啟Zip壓縮。 此腳...
  18. vue-cli3.0的簡單配置 從去年九月份開始,就一直有人在公眾號上面叫囂 vue3.0將要來臨了 ,為了適應前端潮流的開發,我都花了一段時間去研究了一段時間的vue3.0源碼,也算小有所成吧,有時間還是希望與大家分享的,現在呢?主要記錄一下,今天研究vue3.0的項目配置文件的成果。 一、 安裝 首先注意一下:Vue Cli要求Node.js版...
  19. ITree:基于 Netty 編寫的 Http 服務器,可以支持常規的接口訪問,靜態文件部署功能 ITree 介紹 基于Netty編寫的Http服務器,可以支持常規的接口訪問,靜態文件部署功能 服務器運行效果 服務器支持對靜態文件css,js,html,圖片資源的訪問。通過網絡的形式對這些文件可以進行訪問,相應截圖如下所示: 支持對于js,css,html等文件的訪問: ...
  20. 從頭開始復習css之動畫 說到動畫,在很多的眼里 都會認為動畫是一個可有可無的東西。因為在很多程序員的日常開發中,動畫基本都是沒有被用到的。我們這里來談到動畫會不會有點多余呢? 正如我前面說到,動畫并不是項目中的必需品,但卻是項目的潤滑劑。因為它能很大程度上能增強用戶的體驗。說了這么多,究竟動畫是什么呢? 動畫是使元素從...
  21. 利用Jenkins + nginx 實現前端項目自動構建與持續集成本地push代碼到GitHub,Webhook自動觸發jenkins上的構建動作,完成安裝node插件并且打包,然后通過Publish Over SSH插件,將打包出來的文件,部署到目標服務器上。
  22. jQuery動畫隊列 前言 隊列是 jQuery 內部的基礎設施, animate 動畫依賴的基礎設施,整個 jQuery 中隊列僅供給動畫使用。 那么 jQuery 引入隊列其實從一個角度上可以認為:允許一系列函數被異步地調用而不會阻塞程序。 $(selector).slideUp().fadeIn() 這是 jQuery 的一組動畫鏈式序列,它的內部其實就是...
  23. JSX的替代品 JSX現在是一種非常受歡迎的選擇,用戶在各種框架中進行模板模式開發,而不僅僅是在React中,但是,如果你不喜歡它,或者有一個你想要避免使用它的項目,或者只是好奇如何在沒有它的情況下編寫您的React代碼呢?最簡單的答案是閱讀官方文檔,但是它有點短。 我們有更多的選擇 免責聲明:就個人而言,我喜歡JSX并在...
  24. ES6-Generator與react狀態機(13)大家在寫App和一些單頁面程序的時候,經常會遇到這樣的情況:當點擊左邊的箭頭的時候,會出現灰黑色的抽屜效果,再點擊一下向左的箭頭,就會收起來,當然向右滑動和向左滑動也能實現抽屜效果的開關。還有,當抽屜...
  25. 你知道 JavaScript 有 535 種方法刷新頁面嗎? 使用 JavaScript 有多少種方式重新加載頁面? 第 1 種 location = location 復制代碼 第 2 種 location = location.href 復制代碼 第 3 種 location = window.location 復制代碼 第 4 種 location = self.location 復制代碼 第 5 種 location = window.location.href 復制代碼 第 6 種 location...
  26. Vue入門及上手教程 我所在的部門的職能是提高其他業務部門在產品交付上的更好、更快。以前,公司內部與三方公司簽訂了協議,購買了別人家一套開發軟件,幫助我們更好地落地這個流水線的概念。后來,由于軟件升級及需求限制,產品戰略轉型,轉成自建流水線,再后來就有了這次Vue前端界面技術選型經歷。 由于內部團隊,包括三方支持公司的...
  27. Vue2.0解決watch對象屬性變化監聽不到問題問題在項目中遇到一個問題,父組件向子組件傳值,子組件監聽傳入對象的某個屬性的時候,發現子組件使用deep watch都不能監聽到屬性的變化。今天終于在網上找到了答案,在這里把方法記錄下來。參考網址[鏈接]解決...
  28. React如何通過Webpack優雅的接入serviceWorker的成熟方案workBox && Google Analytics 為了提高React應用的啟動速度、離線訪問能力, 做到頁面能離線啟動、service worker能在后臺默默更新本地緩存的頁面、數據的版本,并且做到監控版本更新能力的靠譜性。 踩過"大大"的坑, 看了"大大"的文章, 最后的方案是: 采用serviceWorker的成熟方案workBox通過Webpack的workbox官方插件workbox-w...
  29. 善用CSS偽類,不用JS也能做出選項卡功能講到選項卡(Tabs)功能時,大多會想到用JavaScript去做,像知名的前端框架:Bootstrap所提供的Tab元件,就是用jQuery實現的(其實網絡上有很多用jQuery開發的Tab);但其實不用jQuery或JavaScript技術,就能實現...
  30. 前端實現圖片壓縮上傳 前端實現圖片壓縮上傳我覺得還是很有必要的, 現在移動web頁面越來越多, 活動頁很多都牽涉到圖片上傳難問題, 而用戶手機像素又很高, 隨隨便便一張圖片就是5~10M, 要是一次要上傳多張圖片的話, 第一個時間花費太多, 第二個就是用戶的流量也要耗費不少, 而如果實現前端圖片壓縮則能很好的避開這兩個問題. 我的基本思路是用...
  31. webpack還能這么玩:用十分之一的構建時間做一場頁面靜態資源依賴分析 前言: 所謂【靜態資源依賴分析】,指的是可以通過分析頁面資源后,可以以 json 數據或者圖表的方式拿到頁面資源間的依賴關系。 比如 college-index(酷家樂大學首頁)的入口文件 entry.js 引用了 banner.js、 同時 banner.js 又引用了 utils.js, 那么我們希望經過分析后能拿到一份這樣的數據: [ { ...
  32. 【黑科技】React-canvas助力HTML5游戲的開發界有一個理論,就是當動畫或者交互響應達到60FPS(60幀每秒)的時候,就可以定義為流暢,按此理論,那么每幀里所有操作必須在16ms完成。要想提高頁面的用戶體驗,必須在性能上下功夫。最早做動畫都是用 s...
  33. vue路由里前進后退的那些事兒 最近蒸煮在做一個獨立項目的時候遇到了一個小坑,特此做個爬坑紀念。 基本情景是頁面之間通過vue路由跳轉,從頁面A跳轉到頁面B(在頁面B進行對應操作后),再從頁面B跳轉到頁面C。之后再從頁面C返回到頁面B,頁面B保留之前狀態,返回頁面A,頁面B狀態不保留。(????)??嗨~感覺說的好亂。 總之就是, 前進刷新,后...
  34. JavaScript引擎是如何工作的?從調用棧到Promise你需要知道的一切你有沒有想過瀏覽器是如何讀取和運行 JavaScript 代碼的嗎?這看起來很神奇,但你可以學到一些發生在幕后的事情。讓我們通過介紹 JavaScript 引擎的精彩世界在這種語言中盡情暢游。
  35. 從頭開始復習js之這可能是最全的字符串用法 前面一章主要復習了數組的所有方法,今天我們開始來研究一下字符串的方法吧。 一、 es5的字符串方法 1.1、 字符串新建 new方法新建 toString方法轉化 數組的join 字面量定義 length:字符串的長度 關于字符串新建這相對比較簡單,我就界面上面幾種方式,當然還有很多方式啊。推薦使用數...

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

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