博客 RSS 訂閱

顧昀峯 - 利用input file模擬一個圖片上傳

用到的知識點: (1)input type="file"標籤 (點擊閲讀參考資料) (2)利用addEventListener()事件監聽input type='file'改變(點擊閲讀參考資料) (3)利用HTML5FileReader()中的.readAsDataURL()方法將圖片url轉為Base64位碼(點擊閲讀參考資料) (4)File​Reader​.onload(

formdata , Css , es5 , Javascript

收藏 評論

火狼 - ES5和ES6函數你不知道的區別【面試篇】

前言 JS 中函數是高等公民,但是function 和 class 的區別你真的清楚嘛? 本文從PolyFill 實現,再到性能分析,再複習哈基礎篇的使用; 另外深圳前端求坑,有坑的大佬麻煩內推一下。 1. PolyFill 1.利用原生 js 擼一個簡單的 class; 2.根據上面的用法知道 class 必須通過 new 調用,不能直接調用; // 阻止直接()調用,

react , vue.js , ecmascript-6 , es5 , Javascript

收藏 評論

B͜a͜r͜a͜n͜ - webpack.01-簡單使用

webpack官網:https://webpack.js.org/ 全局安裝webpack cnpm i -g webpack webpack-cli 創建index.js console.log('hellowebpack')//示例:建議寫es5語法可正常運行,es6需要babel後面做筆記會寫 cmd運行 webpack index.js//------生成文件夾dist,生成文件main.

webpack , es5 , npm , Javascript

收藏 評論

sugar_coffee - es5/es6中新增的方法

ES5中的新增方法 ES5 中給我們新增了一些方法,可以很方便的操作數組或者字符串,這些方法主要包括: 數組方法 字符串方法 對象方法 1.1 數組方法 迭代(遍歷)方法:forEach()、map()、filter()、some()、every(); array.forEach(function(currentValue, index, arr)) 讓數組中每個元素都執行一次 fn

ecmascript-6 , es5 , 前端 , Javascript

收藏 評論

火狼 - JS開發必須知道的41個技巧【持續更新】

前言 JS是前端的核心,但有些使用技巧你還不一定知道; 本文梳理了JS的41個技巧,幫助大家提高JS的使用技巧; 文章有點長,可以clone下源碼,直接擼,源碼地址請戳全部源碼,原創不易,歡迎star; 序列文章: Vue 開發必須知道的 36 個技巧 React 開發必須知道的 34 個技巧 Array 1.數組交集 普通數組 const arr1 = [1, 2

vue.js , ecmascript-6 , 技巧 , es5 , Javascript

收藏 評論

趙不悔 - ES6/7/8等新屬性

var let const 第一件事為什麼用let 和 const。因為曾經的var不明確,重複之後就直接覆蓋 而let如果有撞衫直接報錯,const也一樣 var i = 0 ... var i = 345 //不報錯,覆蓋而已 let i = 123 let i = 456 //換成 let就顯示:Uncaught SyntaxError: Identifier 'i'

es7 , function , es5

收藏 評論

assassin_cike - ES5 繼承

首先要明白兩點: 一、非方法屬性每個子類實例需要獨立 二、方法屬性每個子類實例需要共享 為什麼? 如果非方法屬性為引用類型,且非方法屬性共享,在一個實例中改變,其他實例中就會做出改變,這樣每個實例就會相互影響,而方法屬性一般是不需要進行改變的,只是對方法調用。 方法跟屬性分別可以定義在構造函數內部跟prototype上。 繼承的目的是子類繼承父類的方法跟屬性,換句話説一些類

繼承 , es5 , Javascript

收藏 評論

xx小枱燈 - 使用babel把es6語法轉換成es5

Babel 是什麼 Babel 是一個工具鏈,主要用於將 ECMAScript 2015+ 版本的代碼轉換為向後兼容的 JavaScript 語法,以便能夠運行在當前和舊版本的瀏覽器或其他環境中。 Babel能用在哪裏 NodeJs 使用 npm 初始化項目 $ mkdir es6-to-es5 $ npm init -y 安裝Babel $ npm install --save-dev @ba

ecmascript-6 , node.js , babel7 , es5 , Javascript

收藏 評論

洋仔 - 數組並集/交集/差集

underscore 官網 _.union([2,1,2]); // [2,1] lodash 官網 _.uniq([2,1,2]); [2,1] 不產生新數組 使用indexOf判斷和splice刪除。 const removeDuplicates = (nums) = { let len = nums.length - 1 for(let i = len; i=0; i--

ecmascript-6 , es5 , underscore , 前端 , Javascript

收藏 評論

ox1dp6ei - 使用原生ES5封裝 call, apply, bind 等方法

直接上代碼,大家一看就明瞭 !DOCTYPEhtml htmllang="en" head metacharset="UTF-8" metahttp-equiv="X-UA-Compatible"content="IE=edge" metaname="viewport"content="width=device-width,initial-scale=1.0" titleDocument/

es5 , Javascript

收藏 評論

小壞壞 - 第一個nodejs程序

推薦編輯器 記事本   是的,首先開發要明確一點,代碼才是一個項目的核心,編輯器只是一個輔助工具,一個能給予可靠的關鍵詞提示的工具,心中有代碼,處處能開發;   而代碼的運行也一樣,編輯器只是起到一個輔助的作用,給關鍵命令行提供了一個可靠的按鈕,只需要輕鬆點擊即可完成該命令行的執行,完成代碼的運行和debug;   所以要擅長運用命令行來運行代碼,不要過度依賴編輯器,這樣如果編輯器的某個按鈕出問題

node.js , yarn , es5 , npm , Javascript

收藏 評論

小壞壞 - JS語言特性(下)

調包   即引用其他項目或者文件。   之所以需要把這個模塊單獨拎出來,是因為,一個語言能不能成氣候的其中的一個關鍵點在於能否模塊化;一個項目能否形成一個可觀的體量也離不開模塊化,簡單來説就是不同文件或項目間能否互相調用,es5和es6中都有着不同風格的引用方式,開發時要注意自己的開發環境以及語法格式 es5   有着AMD、CMD、CommonJS三種的引用方式,其中AMD(Asynchrono

ecmascript-6 , node.js , es5 , 前端 , Javascript

收藏 評論

HZFEStudio - New 操作符的原理

完整高頻題庫倉庫地址:https://github.com/hzfe/awesome-interview 完整高頻題庫閲讀地址:https://febook.hzfe.org/ 相關問題 new 操作符做了什麼 new 操作符的模擬實現 回答關鍵點 構造函數 對象實例 new 操作符通過執行自定義構造函數或內置對象構造函數,生成對應的對象實例。 知識點深入 1. new 操作符做了什麼

面試 , new , es5 , 前端 , Javascript

收藏 評論

nqbefgvs - es6的繼承原理

javascript有八種類型的數據,其中沒有function,是因為function被object這個大類包含了。也就是説,所有函數都是object。 當我們自己聲明瞭一個類,我們拿到的引用是一個函數的引用,它默認繼承於內置的Object對象,但是由於javascript最頂層的父級(Object和Function)設計有點亂,並且不具有普適性,在這裏我們用兩個普通的類來演示繼承的實現。 將子類

ecmascript-6 , new , es5 , 原型鏈 , Javascript

收藏 評論

前端小菜 - js獲取對象的屬性個數

let math = { subject: '數學', children: [ { id: 1, title: '數一' }, { id: 2, title: '數二' }, { id: 3, title: '數三' }, { id: 0, title: '待定' } ] } // 取對象的屬性個數 Ob

ecmascript-6 , es5 , Javascript

收藏 評論

前端小菜 - JS如何刪除對象中的某一屬性

let math = { subject: '數學', children: [ { id: 1, title: '數一' }, { id: 2, title: '數二' }, { id: 3, title: '數三' }, { id: 0, title: '待定' } ] } // 添加新屬性 math

ecmascript-6 , es5 , Javascript

收藏 評論

前端小菜 - js合併數組的方法

1,方法一 concat() 實例:arrayA.concat(arrayB) 會生成新的數組。 let arrayA = ['ja', 'va']; let arrayB = ['scr', 'ipt']; // 合併數組A和B arrayA = arrayA .concat(arrayB); // 查看合併後的結果 console.log(arrayA); // ['ja',

ecmascript-6 , es7 , es5 , Javascript

收藏 評論

前端小菜 - js解析url的三種方法

js解析url,將如下url中的參數解析為key-value對象 https://mp.weixin.qq.com/adva... 方法1,split() + 循環依次取出 parseURLParams(url) { let queryParams = {} // 判斷是否有參數 if (url.indexOf('?') 0) return queryPar

ecmascript-6 , es5 , Javascript

收藏 評論

DexterYao - Chrome 103支持使用本地字體,純前端導出PDF優化

在前端導出PDF,解決中文亂碼一直是一個頭疼的問題。要解決這個問題,需要將ttf等字體文件內容註冊到頁面PDF生成器中。但是之前網頁是沒有權限直接獲取客户機器字體文件,這時就需要從服務器下載字體文件或者提示用户選擇字體文件上傳到頁面。對於動輒數十兆(M)的中文字體文件,網絡不好時並不是一個好的解決方案。 Chrome 103 Chrome 103版本中新的字體API可以讓web應用獲取到用户在本

pdf導出 , chrome , 字體 , Javascript

收藏 評論

羊先生 - 如何在uni-app使用iconfont字圖標

添加圖標 打開,https://www.iconfont.cn/ 網站,找到自己的喜歡的圖表加入到項目中 下載本地 點擊下載至本地 拷貝文件 將iconfont.css,iconfont.woff,iconfont.woff2 複製到自己的項目中, 打開iconfont.css文件,我需要去編輯框框的地方 資源轉換 uni-app 字體文件小於 40kb,uni-app 會自動將其轉化為

iconfont , 字體 , webapp , uni-app , 前端

收藏 評論

海的盡頭 - 一文告訴你AVM中設置字體的方法

avm 是一種簡便的多端開發框架,可以開發APP、小程序、H5。今天學習了一下使用 avm 開發 APP 怎麼設置字體,下面將經驗分享給大家。 所需步驟: 1. 將需要使用的字體文件放到代碼包res 目錄下。 2. 在 config.xml 中配置字體,配置示例: preference name="font" family="sf" value="widget/res/sf.ttf" /

app , 字體 , avm.js

收藏 評論

侑虎科技 - 對於字體裁剪生僻字的做法

1)對於字體裁剪生僻字的做法 ​2)協程中yield return CoFunction()和yield return StartCoroutine(CoFunction())的區別 3)Unity切換場景時對技能特效首次釋放卡頓 4)《SLG手遊的製作與優化》中Shadowmap優化的疑問 這是第324篇UWA技術知識分享的推送,精選了UWA社區的熱門話題,涵蓋了UWA問答、

performance , shadow , script , 字體

收藏 評論

hooozen - 前端工程師需要知道的字體知識

隨着網頁個性化設計和品牌特色的需要,在網頁中使用特定的字體將成為越來越常見的需求。現代字體設計經歷了數十年的發展,已經積累了成熟的標準和規範,但對於許多前端開發者來説可能可能還比較陌生,本文就前端開發過程中可能遇到的字體知識做一個梳理和介紹。 博客原文:https://www.hozen.site/archives/64/ 字體基礎 字體標準 字體的設計和使用和其他任何工業設計產品一樣,需要統一的

css3 , 字體 , 前端

收藏 評論

南城FE - CSS小技巧使用 font-variation 讓文字起飛

今天逛codepen的時候發現了一個不錯的文字動畫效果,如此絲滑飄逸的效果必須得研究研究,可以看到字體粗細切換過渡效果很均勻,不像我們平常使用字體時設置 font-weight 的效果,日常設置字重的時候並不是每個值都會生效,只會有幾個區間的值是可用的,以下代碼給6個p標籤設置font-weight 從 100 到 600: @for $i from 1 through 6 { p:nth-

設計 , css3 , 動畫 , 字體 , 前端

收藏 評論