20190721 前端開發日報

常見的面試問題:【CSS】CSS盒模型;11個頂級 JavaScript 日歷插件[每日前端夜話0x9A];學習 Vue(一):Vue CLI;React 328道最全面試題(持續更新);Vue單頁項目SEO完全指南;Nealyang 全棧前端;前端培訓-中級階段(10)- 同源策略(2019-08-15期);【VueSSR系列二】clientManifest與bundle的處理流程解讀

  1. 常見的面試問題:【CSS】CSS盒模型CSS盒模型本質上是一個盒子,封裝周圍的HTML元素,它包括:外邊距(margin)、邊框(border)、內邊距(padding)、實際內容(content)四個屬性。CSS盒模型:標準模型 + IE模型
  2. 11個頂級 JavaScript 日歷插件[每日前端夜話0x9A] 每日前端夜話 0x9A 每日前端夜話,陪你聊前端。 每天晚上18:00準時推送。 正文共:2860 字 預計閱讀時間:9 分鐘 作者:Eugene Stepnov 翻譯:瘋狂的技術宅 來源: flatlogic 日歷是我們生活中重要的一部分。在當今世界,人們大多使用網絡或移動日歷。它們隨處可見,包括在各種...
  3. 學習 Vue(一):Vue CLI Vue CLI 是 Vue 官方提供的命令行工具,提供了以下功能: 項目腳手架; 零配置的快速原型; 基于 webpack 的運行時依賴; 插件; 用于管理 Vue.js 項目的 UI 界面。 安裝 使用 Vue CLI,官方推薦使用 Node.js 8.11.0 以上版本。使用 Node.js 包管理工具 npm 全局安裝: npm install -g @vue/...
  4. React 328道最全面試題(持續更新)半個月前出了248個Vue的知識點,受到很多朋友的關注,都強烈要求再出多些React相前的面試題,受到大家的邀請,我又找了20多個React的使用者,他們給出了328道React的面試題,由我整理好發給大家,同時發布在了前...
  5. Vue單頁項目SEO完全指南 搜索引擎優化(Search engine optimization,簡稱SEO),指為了提升網頁在搜索引擎自然搜索結果中(非商業性推廣結果)的收錄數量以及排序位置而做的優化行為,是為了從搜索引擎中獲得更多的免費流量,以及更好的展現形象。 SEM(Search engine marketing,搜索引擎營銷),則既包括了SEO,也包括了付費的商業推廣優化...
  6. Nealyang 全棧前端 這不是干貨鋪,更不是學習平臺。這僅僅是個人的學習、感悟和成長的總結筆記。只是,愛分享、愛沉淀、愛總結。 關于 Nealyang 個人網站: https://www.nealyangfed.com (暫未開通) GitHub: https://github.com/Nealyang 當然,在前端大潮中我始終也還是個菜鳥,還在不斷地探索學習。慢慢的在迷茫中,...
  7. 前端培訓-中級階段(10)- 同源策略(2019-08-15期)前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術水平,打牢基礎知識的中心思想,我們開課啦(...
  8. 【VueSSR系列二】clientManifest與bundle的處理流程解讀 上一節討論了VueSSR的構建流程,構建出來的clientManifest和serverBundle最終會被轉換成html,這一節我們深入vue-server-renderer的核心內容,看看它們都經過了哪些的處理。這一節的內容包括: 使用BundleRenderer的原因 服務端渲染的大體原理 輸出html正文過程 預加載與預取資源 閱讀源碼先整體查...
  9. 前端小糾結--babel的配置的默認套路 我是一個標題黨,這篇文章介紹一點babel的默認配置套路,總結了一點遇到的項目管理問題。 babel的bug刺激了我 現象:項目編譯沒有任何問題,打開頁面才報錯 問題現象console報錯: _objectSpread is not defined 原因:根據輸出的錯誤,我猜測是babel的問題,因為 _objectSpread 就是使用了新的對象展開的...
  10. vue-cli3.0項目中使用vw——相比flexible更原生的移動端解決方案vw 與 vh單位,以viewport為基準,1vw 與 1vh分別為window.innerWidth 與 window.innerHeight的百分之一。
  11. JavaScript核心知識(面試題)[#] 原題: alert(a); a(); var a = 3; function a() { alert(10); } alert(a); a = 6; a(); 復制代碼 考點: 變量提升、函數提升 答案: 第一次輸出: function a() { alert(10); } 第二次輸出: 10 第三次輸出: 3 第四次輸出: a is not a function 解析: 其變形為: ...
  12. React Vue 解決火狐下禁用輸入框無法復制 1.起因 根據不同條件禁用input框,是開發中常見的問題。但是在火狐瀏覽器的表現上,火狐禁用了input框所有的交互事件。無法觸發用戶勾選字段進行復制操作。 1.React+Antd 在配合Antd開發React中,我們一般講Antd的Input組件多封裝一層我們自己的組件,可以統一修改組件的樣式和邏輯,在處理火狐禁用復制功能時也是...
  13. react腳手架項目,根據 localstorage 判斷用戶是否登錄本地存儲 localstorage 判斷用戶是否登錄 APP.js {代碼...} login/index.jsx {代碼...}
  14. NodeJs簡明教程(3)The HTTP interfaces in Node.js are designed to support many features of the protocol which have been traditionally difficult to use. In particular, large, possibly chunk-encoded, messages. The inte...
  15. Flutter官方WebView使用使用過人氣很高的flutter_webview_plugin,但是缺少2個重要的功能。也在打開多個WebView時會出錯。 不能在JS中調用Flutter方法 不能在H5進入某個URL之前攔截 雖然該插件不夠完整,但是使用起來很方便,封裝了很多...
  16. 滲透啟示錄-從JS信息泄露到Webshell 滲透測試是一項吃經驗、吃心性的工作,優秀的滲透測試人員需要在一線崗位不斷作戰、不斷提升,對于各類應用的漏洞了然于心,這至少需要數年的積累才算是"入門"。人員也要有正確的三觀,巨大的黑產、泄密利益是對人性的考驗,從工作上來講,碰到過很多大神,他們共同的特點就是擁有常人難有的耐心、細心,很多...
  17. Node.js 實現簡單的無侵入式緩存框架 前言 python 的flask.ext.cache 通過注解這樣對方法返回結果進行緩存: @cache.cached(timeout=300, key_prefix='view_%s', unless=None) def hello(name=None): print 'view hello called' return render_template('hello.html', name=name) 這類實現方式對業務邏輯沒有絲毫的...
  18. Facebook發布全新JavaScript引擎Hermes:越來越像Java字節碼,JS要統一全端? Facebook在Chain React 2019 大會上發布的一個嶄新JavaScript引擎: Hermes,比傳統JavaScriptJIT,即時運行的方式不同,Hermes需要先將JavaScript編繹成字節碼,這一點很像是Java的方式。 性能提升 從對比測試可觀察,Hermes引擎提升性能較為明顯,使用預編繹,很容易得知這些提升所產生的原因。 在應用程序...
  19. JavaScript 九大面試問題集錦,助你順利通關 全文共6287字,預計學習時長20分鐘或更長 圖片來源:Irvan Smith / Unsplash 人們認為JavaScript是最適合初學者的語言。一部分原因在于JavaScript在互聯網中運用廣泛,另一部分原因在于其自身特性使得即使編寫的代碼不那么完美依然可以運行:無論是否少了一個分號或...
  20. 漫談 Webpack 之服務端渲染、客戶端渲染和同構 服務端渲染 頁面由服務端直接返回給瀏覽器,路由為服務端路由,URL 的變更會刷新頁面,原理與 ASP,PHP 等傳統后端框架類似。 客戶端渲染(CSR) 頁面在 JavaScript,CSS 等資源文件加載完畢后開始渲染,路由為客戶端路由,也就是我們經常談到的 SPA(Single Page Application)。 同構(即...
  21. Nuxt.js -- PC 與 移動端 間自動識別跳轉 根據瀏覽器ua判斷當前是否為移動設備: let isMobile = (ua) => { return !!ua.match(/AppleWebKit.*Mobile.*/) } 復制代碼 因為接觸Nuxt.js時間不長,也算不上深入。按直覺來吧: 第一版:在 default.vue 里面 mounted 里面直接操作。 mounted(){ if(process.browser){ let ua = navigator....
  22. 制定自己團隊的前端開發規范之 eslint 以下是之前寫的前端開發規范配套的 eslint,后續會發布一個 eslint-config 放到 npm 上,使用教程等上傳到 npm 上之后再寫,目前可以直接把這個下邊的配置 copy 到自己的 .eslintrc.js 中,具體每一條什么意思都已經寫明了,如果還有不清楚的,給大家個傳送門,自行搜索一下吧~ 如果使用了 react 或者 vue 的話,需...
  23. 微型 Python Web 框架:Bottle(一) Bottle 是一個非常小巧但高效的微型 Python Web 框架,它被設計為僅僅只有一個文件的Python模塊,并且除Python標準庫外,它不依賴于任何第三方模塊(摘抄完畢)~ 我的應用場景: 局域網內,需要從一臺機器(ubuntu系統)傳輸數據到另一臺上。 解決方案可以有很多,但python的bott...
  24. NodeJs簡明教程(2) NodeJs簡明教程將從零開始學習NodeJs相關知識,助力JS開發者構建全棧開發技術棧! 本文是NodeJs簡明教程的第二篇,將介紹NodeJs在不同操作系統下的安裝操作。 官網 https://nodejs.org 由于國內的網絡原因,官網可能訪問速度有點慢,推薦直接使用淘寶鏡像源下載 淘寶鏡像源 https://npm.taobao.org/mirr...
  25. React 題目集合 什么是React? React有哪些特點? React有哪些優點? React有哪些局限? React.lazy()函數有什么作用? 在React中,什么是代碼拆分? 什么是Suspense組件? 什么是JSX? 什么是Virtual DOM? Virtual DOM...

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

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