@前端

动态 列表
@enaium

Java革命性ORM框架Jimmer簡單介紹

首發於Enaium的個人博客 本文使用Jimmer的官方用例來介紹Jimmer的使用方法,Jimmer同時支持Java和Kotlin,本文使用Java來介紹,實際上Kotlin比Java使用起來更方便,這裏為了方便大家理解,使用Java來介紹,本篇文章只是對Jimmer的一個簡單介紹,更多的內容請參考官方文檔 這裏開始就不從實體類開始介紹了,這裏簡單的把用到的三張表之間的關係介紹一下: Bo

enaium 头像

@enaium

昵称 Enaium

@fenanjiu

pnpm才是前端工程化項目的未來

前言 相信小夥伴們都接觸過npm/yarn,這兩種包管理工具想必是大家工作中用的最多的包管理工具,npm作為node官方的包管理工具,它是隨着node的誕生一起出現在大家的視野中,而yarn的出現則是為了解決npm帶來的諸多問題,雖然yarn提高了依賴包的安裝速度與使用體驗,但它依舊沒有解決npm的依賴重複安裝等致命問題。pnpm的出現完美解決了依賴包重複安裝的問題,並且實現了yarn帶來的所有優

fenanjiu 头像

@fenanjiu

昵称 南玖

@fenanjiu

【webpack系列】從核心概念到上手配置

前言 作為前端開發者,相信大家或多或少都接觸過webpack,現如今webpack已經滲透在了前端的各個方面,所以我們有必要來了解並學習webpack,webpack 是一種用於構建 JavaScript 應用程序的靜態模塊打包器,它能夠以一種相對一致且開放的處理方式,加載應用中的所有資源文件(圖片、CSS、視頻、字體文件等),並將其合併打包成瀏覽器兼容的 Web 資源文件。webpack相比其它

fenanjiu 头像

@fenanjiu

昵称 南玖

@fanwenjie

NPM 依賴管理的複雜性

這是一個很少被提及的話題 —— 依賴管理(Dependencies Management) 。 在開源文化盛行的現代,多數時候我們都不必從零開始搭建一套軟件系統,轉而可以藉助諸多開放的代碼片段及其他資源更快速高效開發軟件應用,這算的上軟件工程發展史上一次巨大革命,因為它能大幅提升軟件工業的生產效率,我們不必再從底層開始編寫所有代碼,大部分問題與常見的編程模式都能在社區找到相應的解決方案,且這些被反

fanwenjie 头像

@fanwenjie

昵称 範文傑

@fenanjiu

【性能監控】如何有效監測網頁靜態資源大小?

前言 作為前端人員肯定經常遇到這樣的場景:需求剛上線,產品拿着手機來找你,為什麼頁面打開這麼慢呀,心想自己開發的時候也有注意性能問題呀,不可能會這麼誇張。那沒辦法只能排查下是哪一塊影響了頁面的整體性能,打開瀏覽器控制枱一看,頁面上的這些配圖每張都非常大,心想這些配圖都這麼大,頁面怎麼快,那麼我們有沒有辦法監測頁面上的這些靜態資源大小,從而避免這種情況的發生。 Performance Perform

fenanjiu 头像

@fenanjiu

昵称 南玖

@fenanjiu

淺析Vite本地構建原理

前言 隨着Vue3的逐漸普及以及Vite的逐漸成熟,我們有必要來了解一下關於vite的本地構建原理。 對於webpack打包的核心流程是通過分析JS文件中引用關係,通過遞歸得到整個項目的依賴關係,並且對於非JS類型的資源,通過調用對應的loader將其打包編譯生成JS 代碼,最後再啓動開發服務器。 瞭解到webpack的耗時主要花費在打包上,Vite選擇跳過打包,直接以以 原生 ESM 方式提供源

fenanjiu 头像

@fenanjiu

昵称 南玖

@fenanjiu

Vite本地構建:手寫核心原理

前言 接上篇文章,我們瞭解到vite的本地構建原理主要是:啓動一個 connect 服務器攔截由瀏覽器請求 ESM的請求。通過請求的路徑找到目錄下對應的文件做一下編譯最終以 ESM的格式返回給瀏覽器。 基於這個核心思想,我們可以嘗試來動手實現一下。 搭建靜態服務器 基於koa搭建一個項目: 項目結構如上,服務使用koa搭建,bin指定cli可執行文件的位置 #!/usr/bin/env node

fenanjiu 头像

@fenanjiu

昵称 南玖

@steven_code

browserslist 使用簡介

頁面為了能在各個品牌、各個版本的瀏覽器上正常顯示,需要處理各種兼容問題:將現代的 JavaScript 語法(ESNext)轉譯為舊版的 JavaScript 語法(ES5);為不兼容的 CSS 樣式添加瀏覽器前綴(-webkit-、-moz-);等等。 現代的前端頁面開發流程,都有相應的工具為開發者自動地處理這些兼容問題:Autoprefixer - 為 CSS 樣式,自動添加不兼容的瀏覽器前綴

steven_code 头像

@steven_code

昵称 Steven

@ddup365

一文讀懂 NPM 版本

這是前端工程化的系列文章 版本號組成 node package 版本號由四部分組成:major.minor.patch[-prerelease],比如:1.0.2-beta.1,其中 prerelease 可選。 major:代表主版本號,通常在需要提交不能向下兼容的情況下對該版本號進行升級 minor:代表次版本號,通常在新增功能時才對該版本號進行升級 patch:代表修復版本號,升級該

ddup365 头像

@ddup365

昵称 specialcoder

@ddup365

認識包管理工具: npm、yarn和pnpm

包管理工具的發展 2010 年 1 月,一款名為 npm 的包管理器誕生。它確立了包管理器工作的核心原則。 npm 的發佈誕生了一場革命,在此之前,項目依賴項都是手動下載和管理的。npm 引入了文件和元數據字段,將依賴項列表存儲在 package.json 文件中,並且將下載的文件保存到 node_modules 文件夾中。 後來因為 npm 的缺陷或者舊版本的不足,又出現了一個個替代

ddup365 头像

@ddup365

昵称 specialcoder

@fenanjiu

深入瞭解Vite:依賴預構建原理

前言 前面我們有提到Vite在開發階段,提倡的是一個no-bundle的理念,不必與webpack那樣需要先將整個項目進行打包構建。但是no-bundle的理念只適合源代碼部分(我們自己寫的代碼),vite會將項目中的所有模塊分為依賴與源碼兩部分。 依賴: 指的是一些不會變動的一些模塊,如:node_modules中的第三方依賴,這部分代碼vite會在啓動本地服務之前使用esbuild進行預構建。

fenanjiu 头像

@fenanjiu

昵称 南玖

@apifox

發現 HTTP 和 RPC 的不同之處:技術洞察

隨着互聯網技術的發展,網絡通信在各種應用中扮演着至關重要的角色。無論是構建 Web 應用還是進行服務之間的交互,選擇合適的通訊協議成為開發者們需要深入思考的問題。在眾多協議中,HTTP(HyperText Transfer Protocol)和 RPC(Remote Procedure Call)因各自獨特的特點和優勢而備受關注。那麼,它們之間有何不同,又該如何在實際項目中做出選擇呢? 什麼是 H

apifox 头像

@apifox

昵称 Apifox

@huaweiclouddeveloper

學會這5種JS函數繼承方式,前端面試你至少成功50%

摘要:函數繼承是在JS裏比較基礎也是比較重要的一部分,而且也是面試中常常要問到的。下面帶你快速瞭解JS中有哪幾種是經常出現且必須掌握的繼承方式。掌握下面的內容面試也差不多沒問題啦~ 本文分享自華為雲社區《人類高質量JS函數繼承》,作者:北極光之夜。 一. 前言: 函數繼承是在JS裏比較基礎也是比較重要的一部分,而且也是面試中常常要問到的。下面帶你快速瞭解JS中有哪幾種是經常出現且必須掌握的繼

huaweiclouddeveloper 头像

@huaweiclouddeveloper

昵称 華為雲開發者聯盟

@_6085362b65292

ES5、ES6 如何實現繼承

完整高頻題庫倉庫地址:https://github.com/hzfe/aweso... 完整高頻題庫閲讀地址:https://febook.hzfe.org/ 相關問題 關於 ES5 和 ES6 的繼承問題 原型鏈概念 回答關鍵點 原型鏈繼承 構造函數繼承 ES6 類繼承 繼承是指子類型具備父類型的屬性和行為,使代碼得以複用,做到設計上的分離。JavaScript 中的繼承主要通過原型鏈和

_6085362b65292 头像

@_6085362b65292

昵称 HZFEStudio

@niumingxin

繼承

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

niumingxin 头像

@niumingxin

昵称 微言

@limingcan562

JS繼承面試的時候怎麼説?答應我,不要再死記硬背了好嗎?

前言 JS繼承這塊,ES6已經有class很香的語法糖實現了,ES6之前那些實現繼承的方法真的又多又長,説句心裏話,能不學真的不想再學,但是沒辦法,面試還是要搞你呀,所以這兩天看回ES6之前的繼承,發現還是蠻有意思的。寫這篇文章也是對自己的一個梳理總結,也希望能幫助到大家弄懂繼承這塊,這樣就不需要再死記硬背八股文,面試自由發揮就好。 JS的繼承,核心就是靠原型鏈完成。如果大家對原型鏈還不是很

limingcan562 头像

@limingcan562

昵称 limingcan

@yinzhixiaxue

js繼承您瞭解多少呢

實現繼承的方式有很多,下面我們來寫常用的幾種(包括但不限於原型鏈繼承、構造函數繼承、組合繼承、寄生組合繼承、ES6繼承): 原型鏈繼承 原型鏈繼承通過修改子類的原型為父類的實例,從而實現子類可以訪問到父類構造函數以及原型上的屬性或者方法。 // 原型鏈繼承 function Parent () { this.name = 'kobe' } Parent.prototype.getName

yinzhixiaxue 头像

@yinzhixiaxue

昵称 銀之夏雪

@arextest

如何實現在純 Web 端完成各類 API 調試?

在軟件開發過程中,對於各類 API 的調試工作至關重要。API調試是驗證和測試應用程序接口的有效性和正確性的關鍵步驟。傳統的API調試方法通常依賴於獨立的工具或桌面應用程序,限制了調試過程的靈活性和效率。 為推動API調試向更便捷、高效的方向發展,越來越多的開發人員開始尋求在純Web端完成各類API調試的解決方案。純Web端的API調試具有許多優勢,包括無需安裝額外軟件、跨平台支持、便於團隊協作等

arextest 头像

@arextest

昵称 AREX_中文社區

@vivo_tech

前端 JS 安全對抗原理與實踐

作者:vivo 互聯網安全團隊- Luo Bingsong 前端代碼都是公開的,為了提高代碼的破解成本、保證JS代碼裏的一些重要邏輯不被居心叵測的人利用,需要使用一些加密和混淆的防護手段。 一、概念解析 1.1 什麼是接口加密 如今這個時代,數據已經變得越來越重要,網頁和APP是主流的數據載體,如果獲取數據的接口沒有設置任何的保護措施的話,數據就會被輕易地竊取或篡改。 除了數據泄露外,一些重要功能

vivo_tech 头像

@vivo_tech

昵称 vivo互聯網技術

@1227

一文搞定前端多種主題配置及全局引入scss文件

前言 本文中所採取的方案主要是css預處理(less/scss)方案,適用於項目中有多套主題需要進行配置,有着很強的擴展性和易用性,如果你的項目臨時需要加上主題切換,可以採用;如果你的項目需要很多套主題配置,也非常適用! 一、變量配置的代碼部分 1、主題變量的配置 theme.scss(在項目中存放在style文件夾下面,這個文件夾主要用於系統一些公共樣式的存放和管理) // 主題配置 $the

1227 头像

@1227

昵称 1227

@xishui_5ac9a340a5484

SCSS即將廢棄`@import`,以前的`@import`該何去何從?

SCSS即將廢棄@import,以前的@import該何去何從? 1. 引言 隨着前端開發技術的不斷髮展,SCSS(Sass)作為一種流行的CSS預處理器,已經在眾多前端項目中得到了廣泛應用。其優雅的語法、強大的功能以及靈活的模塊化機制,使得開發者能夠更加高效地構建和管理樣式表。然而,隨着SCSS的不斷迭代更新,我們也迎來了一個重要的變革:@import語法即將被廢棄。雖然@import曾經是SC