tag 前端

標籤
貢獻1,071
2846
06:37 AM · Oct 27 ,2025

@前端 / 博客 RSS 訂閱

一顆冰淇淋 - 自定義javascript中call、bind、apply方法

call、bind、apply都是Function原型上的方法,用於改變this的指向 自定義函數 js中的call、bind、apply是用c++代碼實現的,我們這裏使用js代碼做一個模式,沒有把所有的邊界情況考慮進來,僅做一個簡單的實現,三個函數在使用的時候有一些需要注意的地方,在定義的時候需要把這些情況考慮進去 當傳入的值是基本數據類型時,call、apply、bind方法會將它轉變成引

this , 前端 , Javascript

收藏 評論

Evans_波 - 從零開始搭建 TS + webpack-dev-server 的開發環境

目的: 可使用 TypeScript 來開發項目 結合 webpack-dev-server 的熱重載,提升開發效率 瞭解相關依賴和配置的作用 準備 一、初始項目目錄結構(非常簡單) |_ src | |_ index.ts |_ public |_ index.html(只需在body標籤中添加script src="./index.js"/script)

webpack-dev-server , typescript , 前端

收藏 評論

code小生 - Angular 10 不再支持 IE9/10!

本文作者|Stephen Fluin 譯者|王強 策劃|李俊辰,原文鏈接:原文鏈接 https://blog.angular.io/versi... Angular v10.0.0 正式發佈了!這是跨越整個平台(包括框架、Angular Material 和 CLI)的一次主要版本更新。這次的新版發佈間隔比以往短一些。自我們發佈 Angular 9.0 版以來只過去了四個月。 我們嘗試

angularjs , angular , 前端框架 , 前端

收藏 評論

前端css和js乾貨 - 煩人的this,7個關於js關鍵詞的面試題

更多文章詳見公眾號【前端css和js乾貨】 在 JavaScript 中,this是函數的調用上下文。 難度在於this具有複雜的行為。 本文,整理了一個關於this關鍵字的7個有趣面試問題的列表。 注意:下面的 JavaScript 片段在非嚴格模式下運行,也稱為 sloppy 模式。 1: 變量 vs 屬性 以下代碼會在控制枱打印什麼: const object = { m

箭頭函數 , this , 前端 , Javascript

收藏 評論

微言 - 繼承

繼承 原型鏈繼承 實現方式如下 function Parent() { this.name = '微言'; } Parent.prototype.getName = function () { console.log(this.name); }; function Child() {} // new Parent產生的一個parent 的實例,同時包含了,實例屬性以及原型方法

原型 , 繼承 , 前端

收藏 評論

微言 - this 指針詳解

概念 this 是當前函數/當前模塊的運行環境上下文。是一個指針型變量,普通函數中的 this 是在調用時才被綁定確認指向的。 通過不同的 this 調用同一個函數,可以產生不同的結果。 到底如何確認 this 綁定的內容是什麼? this 綁定的規則 1.默認綁定 function a() {} a(); 函數獨立調用的時候,不帶任何修飾的函數引用. 非嚴格模式下 this 指向全局對象

this , 前端 , Javascript

收藏 評論

Sunshine_Lin - 這可能是思否講「原型鏈」,講的最好最通俗易懂的了,附練習題!

前言 大家好,我是林三心,相信大家都聽過前端的三座大山:閉包,原型鏈,作用域,這三個其實都只是算基礎。而我一直覺得基礎是進階的前提,所以不能因為是基礎就忽視他們。今天我就以我的方式講講原型鏈吧,希望大家能牢固地掌握原型鏈知識 很多文章一上來就扔這個圖,但是我不喜歡這樣,我覺得這樣對基礎不好的同學很不好,我喜歡帶領大家去從零實現這個圖,在實現的過程中,不斷地掌握原型鏈的所有知識!!!來吧!!!跟着我

ecmascript-6 , 面試 , 原型鏈 , 前端 , Javascript

收藏 評論

Emon - JS 實現 Angular slider 組件

需求描述 需求:根據傳入的動態數組生成一個節點數為數組長度的 slider 組件。要求節點直接長度一致,但是顯示的值為傳入數組的值。 示例: 傳入值為[5], 因為只有一個值,slider 無法拖動,顯示如下 傳入值為[5,10,20,30,40,50,55], 數值之間差值不一定相等,顯示如下 實現邏輯: UI: 先畫一條線作為滑動條,再根據傳入數

angular , component , 前端

收藏 評論

註銷 - 使用 Angular Transfer State 的一個具體例子

Using TransferState API in an Angular v5 Universal App 讓我們用一個具體的例子來説明這篇文章。 我們有一個天氣應用程序,在其側邊欄中顯示城市列表。 當您單擊城市名稱時,該應用程序會顯示該城市的當前天氣。 因為我們希望我們的應用程序是可抓取和可索引的,所以我們使它通用:城市頁面在服務器上呈現,存儲為 HTML 文件並由 HTTP 服務器提供服務。

angularjs , angular , typescript , 前端 , Javascript

收藏 評論

我是好人 - 你的項目切換代理需要重啓嗎?

問題 參與過多人項目之後,總是會碰到下面的問題。 需要跟另一個人對接了,那麼就要把代理的target改成他的ip地址,改完還得重啓項目。 別人把配置文件的代碼提交了,覆蓋了我的target配置。又得改回來,再次重啓項目。 有可能配置文件的代碼是這樣的 module.exports = { devServer:{ proxy:{ '/api':{

webpack-dev-server , 代理 , webpack , vue-cli , 前端

收藏 評論

維李設論 - 從2021看2022前端發展趨勢

本文參與了 SegmentFault 思否徵文「2021 總結」,歡迎正在閲讀的你也加入。 前言 又到了年底,回顧一下整個2021年的前端歷程,總體來説前端趨向到了一個比較穩定的發展階段,雖然仍然有許多層出不窮的庫及輪子,但整體來看其實今年最突出的前端發展其實可以概括為以下幾個關鍵詞,即:工程基建、低代碼、多語言、雲+邊+端。從不同大廠對整個前端的劃分視角來看,整體可以分為兩大類,一類是聚焦化,比

大前端 , 前端工程化 , 前端框架 , 前端構建 , 前端

收藏 評論

註銷 - Angular Change Detection 的學習筆記

Angular 變化檢測機制比 AngularJs 中的等效機制更透明且更易於推理。但是在某些情況下(例如在進行性能優化時),我們確實需要知道幕後發生了什麼。因此,讓我們通過以下主題深入瞭解變更檢測: 如何實施變更檢測? Angular 變化檢測器是什麼樣子的,我能看到嗎? 默認的變更檢測機制是如何工作的 打開/關閉更改檢測,並手動觸發它 避免變更檢測循環:生產與開發模式 什麼是On

angularjs , vue.js , angular , change-id , 前端

收藏 評論

buxia97 - RuleApp,基於typecho的知識付費/個人博客/資源論壇APP,支持安卓,蘋果,小程序 ,現正式發佈

簡介 這是一款功能全面,用户交互良好的程序,兼容安卓蘋果端,H5網頁,微信小程序等。同時是集成數據本地緩存,郵箱驗證,在線投稿,(內置Mardown編輯器),社會化登錄,點贊打賞,積分商城,付費閲讀,VIP會員等一系列功能的自媒體博客資訊APP。 APP和接口後端都是開源的,沒有任何收費項目,放心下載研究。 項目基於國產開源程序Typecho數據庫開發,所以可以對接任意Typecho網

typecho , uniapp , 前端

收藏 評論

陳東民 - JavaScript 中的數組分組:array.groupBy()

JavaScript 中的數組分組:array.groupBy() 原文: https://dmitripavlutin.com/ja... 由於豐富的標準實用程序庫,許多開發人員喜歡 Ruby 編程語言。例如,Ruby 中的數組有大量的方法。 JavaScript 也逐步豐富了其關於字符串和數組的標準庫。例如,在之前的文章中,我描述了新的array.at()方法。 今天的主角是新的數組組提案(目

ecmascript , 前端 , html5 , Javascript

收藏 評論

HeiYanjing - 退出歷史舞台的Grunt基本瞭解

Grunt Grunt 生態系統非常龐大,並且一直在增長。由於擁有數量龐大的插件可供選擇,因此,你可以利用 Grunt 自動完成任何事,並且花費最少的代價。如果找不到你所需要的插件,那就自己動手創造一個 Grunt 插件,然後將其發佈到 npm 上吧 Grunt基本使用 yarn add grunt yarn add安裝之後,創建一個gruntfile.js文件,這是grunt的入口文件,用

grunt , 前端

收藏 評論

杭州程序員張張 - [譯]Vue.js + Astro 比 Vue SPA 更好嗎?

最近有很多開發者宣佈他們已經將網站遷移到Astro。這通常伴隨着一張接近完美的Lighthouse分數的截圖和一系列火箭表情符號。 像大多數人一樣,我發現無休止的新框架會讓人感到厭倦。但我對Astro做了一些研究,認為它真的值得一試。 在本文中,我將向您展示如何使用 Astro 構建基於 Vue 的應用程序,我們將瞭解其獨特的架構如何帶來比單頁應用程序 (SPA) 更好的性能。 SPA 架構回顧

astro , vue.js , spa , 前端

收藏 評論

DiracKeeko - [前端基礎] HTTP請求GET與POST

開發中同事問了我一個問題 Q: GET請求能不能用request body來傳遞數據? 這個問題的場景是,他們的前後端溝通需要攜帶複雜的參數,用POST方法的request body(key value)的形式傳參會更加明瞭,但又覺得不夠語義化,所以想到了GET + request body。 A: HTTP規範rfc2616中是沒有對GET方法的使用body做限制( HTTP 規範並

post , HTTP , get , 前端

收藏 評論

豆皮範兒 - CSS3實戰:實現一個旋轉的3D金幣

CSS3實戰:實現一個旋轉的3D金幣 最近親愛的產品同學,提了一個需求:在頁面某個角落增加一個旋轉的金幣來吸引用户參加活動~越快上越好,我們的“未見”同學直接上手用css擼了一個旋轉的金幣的動畫,讓我們來看一下是如何實現的吧~ 作者:未見 如下圖 拿到這個需求,第一反應gif+a標籤,簡單粗暴+便捷。即將實施就碰到一個問題,UI小姐姐還沒有做設計,排期需要在x天后~怎麼辦?沒有難做的工作,只有解

css3 , css3動畫 , 前端

收藏 評論

HeiYanjing - Gulp基本概念及應用

gulp簡介,基本使用 Gulp.js 是一個自動化構建工具,開發者可以使用它在項目開發過程中自動執行常見任務。 yarn add gulp 安裝gulp的時候會安裝gulp-cli。gulpfile.js中導出一個函數,最新的gulp中取消了同步代碼模式,每一個任務都是異步任務,最後需要調用回調函數或其他方式標記任務完成。如例子中如果沒有done,會報錯.如果任務名是default,運行時的命

gulp , 前端

收藏 評論

編程三昧 - 再解 JavaScript 原型與原型鏈

前言 JavaScript 原型與原型鏈雖然是一個老生常談的話題,但依然困惑着很多人,今天我再來從另一個角度談談這個問題。 兩個疑問 先看這樣一段代碼: let obj = {} obj.__proto__.haha = 'gogo' console.log(obj.haha) // "gogo" 運行一下上面的代碼,輸出結果為 gogo。 針對這個結果,有以下疑問: obj 哪來的 __p

原型 , 原型鏈 , 前端 , Javascript

收藏 評論

HeiYanjing - AST語法樹增刪改查

AST 是 Abstract Syntax Tree 的縮寫,即 “抽象語法樹”.它是以樹狀的形式表現編程語言的語法結構. webpack 打包 JS 代碼的時候,webpack 會在我們的原有代碼基礎上新增一些代碼, 例如我們可以在打包JS 代碼的時候將高級代碼轉為低級代碼,就是通過 AST 語法樹來完成的 AST在線生成地址 babel插件查看使用地址 AST生成過程由源碼-詞法分

ast , 前端

收藏 評論

編程三昧 - Web Components系列(一) —— 概述

前言 如果我們選擇不使用任何框架的情況下來進行前端開發,那麼針對一個完整的網頁,我們需要開發以下代碼: HTML 代碼 CSS 代碼 JavaScript 代碼 就幾年之前來説,HTML 部分的代碼基本不存在複用的可能,這就導致我們可能需要開發大量重複的 HTML 代碼,即使使用 CV 法,代碼的冗餘卻是不可避免的。 Web Components 誕生的背景 近幾年,我們在使用前端框架(

component , 組件化 , 前端

收藏 評論

LiveVideoStack - 【客户端建設及調優實踐】

“音視頻+無限可能” 是一扇LiveVideoStackCon面向新興領域開啓的大門,在移動互聯網紅利消失、內卷的局面下,智能車、製造、金融、醫療、出海等新興領域還在迫切追尋新技術帶來的增值。在“音視頻+無限可能” ,提前看到新機會、新案例、新實踐。 4月15日-16日,LiveVideoStackCon 2022 音視頻技術大會 上海站,和你一同開啓通向未來的大門。 客户端建設及調優實踐 軟/硬

前端優化 , 客户端 , 前端

收藏 評論

viewweiwu - Ant Design 二次封裝 Amiya 發佈啦~🎉🎉🎉

什麼是 amiya amiya 是一個組件庫,是對Ant Design的二次封裝,提供頁面級別的組件。 文檔地址 它有什麼特點? 表單只讀模式 默認的 antd 只對少數組件支持 readonly 模式,而 disabled 模式會把 placeholder 顯示出來,且有可能展示不完整。 所以 amiya 為每一種表單類型,提供 readonly 模式,去除默認的圖標符號,變更背景顏色於文字顏色

react , ant-design , component , 前端

收藏 評論