20200228 前端開發日報

javascript 代碼是如何被壓縮的;究竟啥是javascript中的裝箱操作與拆箱操作;NodeJS、Npm和 npm 命令介紹;GitHub:除非真正需要,否則我們不會刪除您的任何內容;聊一聊看似簡單的Promise.prototype.then()方法;微前端:優勢,缺點和痛點;Json與Ajax(注冊實例);基于 HTML5 WebGL 的 3D 機房數據中心可視化展示

  1. javascript 代碼是如何被壓縮的這是山月關于高級前端進階暨前端工程系列文章的第 M 篇文章 (M 隨便打的,畢竟也不知道能寫多少篇),關于前 M-1 篇文章,可以從我的 github repo shfshanyue/blog 中找到,如果點進去的話可以捎帶~點個贊~,如果...
  2. 究竟啥是javascript中的裝箱操作與拆箱操作 復習知識點時又一次的一臉懵逼 最近在復習javascript知識點時,又又又忘記了遺忘了一個知識點,還是留下文章來做紀念的好。 當我們轉換數據類型時,他們的執行過程因為不同的數據類型,而擁有不同的執行過程,也就是所謂的裝箱操作和拆箱操作。一般的解釋為,把基本數據類型轉換為引用數據類型時,會觸發裝箱操作。把...
  3. NodeJS、Npm和 npm 命令介紹 一、NodeJS Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環境。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型。 Node 是一個讓 JavaScript 運行在服務端的開發平臺的腳本語言。發布于2009年5月,由Ryan Dahl開發,實質是對Chrome V8引擎進行了封裝。 Node對一些特殊用例進行優化,提供替代的API,...
  4. GitHub:除非真正需要,否則我們不會刪除您的任何內容《GitHub: We won't take down any of your content unless we really have to》 原文作者:Daphne Leprince - Ringuet 原文鏈接:[鏈接]編譯:思否@徐九
  5. 聊一聊看似簡單的Promise.prototype.then()方法 Proise實例的then方法是定義在原型對象Promise.prototype上的,它的作用是為Promise實例添加狀態改變時的回調函數。 該方法可以接收兩個回調函數作為參數,其中第二個回調函數是可選的。第一個回調函數是 Promise 對象的狀態變為 Resolved 時調用,第二個回調函數是 Promise 對象的狀態變為 Rejected 時調用。 下...
  6. 微前端:優勢,缺點和痛點 原文連接 Microfrontends: the good, the bad, and the ugly by KBall 上周前端開發在twitter上討論關于 微前端 的話題,雙方進行了熱烈的爭論和發表了各自的意見。 這次爭論讓我想到了過去關于“CSS in JS”的爭論。由于我對過去 “CSS in JS”的爭論 一直心懷歉意,這次我會更加的客觀去看待這個問題。...
  7. Json與Ajax(注冊實例) 需要在服務器上進行哈 jquery的ajax方法: // jquery請求 $.ajax({ url: "./server/slider.json", type: "post", dataType: "json", async: true, success: function(datas) { renderData(datas.slider); } ...
  8. 基于 HTML5 WebGL 的 3D 機房數據中心可視化展示在 3D 機房數據中心可視化應用中,隨著視頻監控聯網系統的不斷普及和發展, 網絡攝像機更多的應用于監控系統中,尤其是高清時代的來臨,更加快了網絡攝像機的發展和應用。
  9. 為物聯網項目選擇JavaScript的5大理由 在一個以數字化為主導的世界中,物聯網(IoT)在改變我們的生活和開展業務方式方面發揮著至關重要的作用。從智能生活到工作場所協作,以及與現場員工的聯系,物聯網將一如既往地節省時間和提高生產力。 根據一份微軟物聯網研究報告,大約85%的受訪者表示他們目前正在采用物聯網,四分之三的人處于項目計劃階段 。此...
  10. 如何在Git提交大小寫敏感的文件下午在搞代碼部署的時候, 遇到一個文件大小寫的問題, 問題比較簡單, 但是也簡單整理下, 分享給大家。
  11. 淺談JavaScript的防抖與節流在前端開發的過程中,我們經常會需要綁定一些持續觸發的事件,如 resize、scroll、mousemove 等等,但有些時候我們并不希望在事件持續觸發的過程中那么頻繁地去執行函數。這時候就用到防抖與節流。
  12. 一些 JS 數組精簡技巧,要記好筆記了點贊再看,養成習慣本文 GitHub [鏈接] 上已經收錄,更多往期高贊文章的分類,也整理了很多我的文檔,和教程資料。歡迎Star和完善,大家面試可以參照考點復習,希望我們一起有點東西。
  13. vue必須掌握之組件通信(7種方法) 方法一:$emit / props 父組件通過props的方式向子組件傳遞,子組件通過$emit觸發父組件中v-on綁定的自定義事件 <!--父組件--> <template> <div> <Child :message="message" @customEvent="customEvent"/> </div> </template> <script&gt...
  14. 前端常見面試-css篇隨著疫情的不斷好轉,各地都開始逐步的復工,當然對我們來說,也馬上迎來所謂的金三銀四跳槽季。在此,分享自己在前端領域中積累的一些經驗,供自己溫故知新。 對于前端來說,涉及的知識面廣,內容繁多,但是萬變...
  15. webpack學習之路 --- webpack 入門基本配置 新建一個目錄,初始化npm npm init webpack是運行在node環境中的,我們需要安裝以下兩個npm包 npm i -D webpack webpack-cli 新建一個文件夾 src ,然后新建一個文件 main.js ,寫一點代碼測試一下 console.log('第一次打包') 配置package.json命令 ...
  16. JavaScript DOM–元素操作 獲取元素 根據 ID 獲取元素 語法: document.getElementById(id) <div id='time'>2020-01-09</div> <script> var timer = document.getElementById('time'); console.log(timer); // 根據 ID 獲取 // 查看里面的屬性和方法 console.dir(timer) </script> ...
  17. webpack中的Code Splitting以及配置參數 在最開始的時候,webpack都是將所有的代碼打包到一個文件中,但是當項目過大的時候,頁面所需要加載的時間就會變長,這個時候我們就需要 Code Splitting 對文件進行分塊,實現代碼的按需加載。 接下來我們來看看下面兩種方式: 當用第一種方式的時候, 我們需要等打包文件加載完成之后,才會去實現文件里面的邏輯...
  18. 松軟科技課堂:jQuery 語法 jQuery 語法 jQuery 語法是為 HTML 元素的選取編制的,可以對元素執行某些操作。 基礎語法是:$(selector).action() 美元符號定義 jQuery 選擇符(selector)“查詢”和“查找” HTML 元素 jQuery 的 action() 執行對元素的操作 示例 $(this).hide() – 隱藏當前元素 $("p").hide() – 隱藏所有段落 ...
  19. 吊打 JavaScript 之從原型到原型鏈 (給前端大全加星標,提升前端技能) 作者: 達達前端 公號 / Jeskson (本文來自作者投稿) 目錄 說一說原型模式 每個函數都有一個 prototype 原型屬性,這個屬性它是一個指針,指向一個對象,而這個對象的...
  20. jQuery-File-Upload 使用,jQuery-File-Upload上傳插件 ================================ ©Copyright 蕃薯耀 2020-01-10 https://www.cnblogs.com/fanshuyao/ 一、官網地址: https://github.com/blueimp/jQuery-File-Upload 二、使用文檔(參數說明) https://github.com/blueimp/jQuery-File-Upload/wiki/Options 三、瀏覽器支持(官網說明) ...
  21. Promise面試題整理Promise 面試題來源網絡 面試題一 {代碼...} 運行結果: {代碼...} 解釋:Promise 構造函數是同步執行的,promise.then 中的函數是異步執行的。 面試題二 {代碼...} 運行結果: {代碼...} 解釋:promise 有 3 種...
  22. 記一天兩次前端面試的經歷(一) Today如果用一個字來形容就是——累,兩個字就是很累,三個字真的累... 下午面完試本來覺得今天終于可以放松了,結果到了傍晚又來了一個電話約面試,疲憊的我趕緊推了個時間再約。 本以為會度過一個平靜的夜晚,然后突然一個電話又到來,又是一次技術面,而且和下午的是同一個公司的不同部門...此時我是崩潰的。 現...
  23. 3D LUT 濾鏡顏色映射原理剖析與JS實現 byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9275 本文歡迎分享與聚合,全文轉載就不必了,尊重版權,圈子就這么大,若急用可以聯系授權。 一、原理剖析 關于3D LUT濾鏡及其相關知識可以參考我之前“ 用3D LUT濾鏡電影級別調色工具 ”一文,重復內容不再贅述。 3D LUT實際上就是一個立體的顏色...
  24. vue插槽(slot)的模板與JSX寫法 vue官網API: 插槽: https://cn.vuejs.org/v2/guide/components-slots.html JSX: https://cn.vuejs.org/v2/guide/render-function.html 說明:vue版本2.6.0以上語法 一、插槽模板傳值 子組件:child.vue <template> <div> <!-- 默認插槽 --> <slot :info...
  25. js中保存成圖片并下載 1、保存canvas中繪制的內容為圖片 HTML代碼: <canvas id="canvas" width="400" height="400"></canvas> <div> <button id="save">保存</button> </div> js代碼: var arr = , , ],c...
  26. Vue – 自定義組件雙向綁定 前言 無論在任何的語言或框架中,我們都提倡代碼的復用性。對于Vue來說也是如此,相同的代碼邏輯會被封裝成組件,除了復用之外,更重要的是統一管理提高開發效率。我真就接手過一個項目,多個頁面都會用到的列表,沒有去封裝列表組件,只要有一點改動,每個頁面都得加上。很肯定的說,沒有用組件化開發的Vue項目是沒有...
  27. JS—案例:旋轉木馬 案例:旋轉木馬 頁面加載時候出現的效果,script標簽寫在head里面,body上面 顯示一個圖片散開的動畫,遍歷之后,把每個圖片用封裝的動畫函數移動到指定目標(同時改變多屬性:寬,透明度,層級,top, left) 在做左右按鈕點擊事件。 右邊按鈕,用數組里面的push和shift,數組第一個去除加到最后一個位置 左邊按鈕...
  28. jQuery 源碼解析(二十九) 樣式操作模塊 尺寸詳解 樣式操作模塊可用于管理DOM元素的樣式、坐標和尺寸,本節講解一下尺寸這一塊 jQuery通過樣式操作模塊里的尺寸相關的API可以很方便的獲取一個元素的寬度、高度,而且可以很方便的區分padding、border、 margin等,主要有六個API,如下: heihgt(size)、width(size)  ;獲取第一個匹配元素的高度、寬度,或者通...
  29. 松軟科技課堂:jQuery 效果 – 淡入淡出 jQuery Fading 方法 通過 jQuery,您可以實現元素的淡入淡出效果。 jQuery 擁有下面四種 fade 方法: fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() 方法 jQuery fadeIn() 用于淡入已隱藏的元素。 語法: $(selector).fadeIn(speed,callback); 可選的 speed 參數規定效果的時...
  30. Javascript 實踐中的命令模式這一系列是對平時工作與學習中應用到的設計模式的梳理與總結。由于關于設計模式的定義以及相關介紹的文章已經很多,所以不會過多的涉及。該系列主要內容是來源于實際場景的示例。本篇文章為該系列的第一篇,下一...
  31. 原生JS實現旋轉木馬輪播圖特效 大概是這個樣子: 首先來簡單布局一下(emm…隨便弄一下吧,反正主要是用js來整的) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-sc...
  32. jQuery—內容復習 1.1 css操作       設置單個樣式       設置多個樣式       獲取樣式 css(name, value) :設置單個樣式 css(obj):設置多個樣式 css(name):獲取樣式 1.2 class操作       addClass(name):添加類     &n...
  33. CSS選擇器及優先級選擇器分類 id選擇器 {代碼...} 類選擇器 {代碼...} 標簽選擇器 {代碼...} 屬性選擇器 {代碼...} 偽類選擇器 a元素的偽類:link、visited、active、hover。 其他(1) li:first-child{} (修飾第一個li)(2) li:last-...

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

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