收藏 / 列表

卡頌 - 組長讓我把所有state都放Redux裏

大家好,我是卡頌。 在我們React進階源碼羣裏,除了React外,狀態管理是最常討論的話題。 詭異的是,有多個羣友説過類似的話: 他的同事/組長/領導...讓他把所有state都放在Redux/Mobx...裏 他們覺得不對,又不知道如何反駁。 今天我們來聊聊Redux、Mobx等狀態管理庫和React、Vue等視圖庫之間的關係,希望能解決以上困惑。 產品的核心競爭力 如果你在電梯裏遇到大領導

react , vue.js , mobx , redux , 前端

華為雲開發者聯盟 - OAuth:每次授權暗中保護你的那個“MAN”

摘要:OAuth是一種授權協議,允許用户在不將賬號口令泄露給第三方應用的前提下,使第三方應用可以獲得用户在某個web服務上存放資源的訪問權限。 背景 在傳統模式下,用户的客户端在訪問某個web服務提供的具有一定訪問限制的資源時,需要提供用於進行身份認證的憑證(credential),例如密碼,accesskey等。如果存在第三方的應用需要該web服務上用户的資源,用户必須將自己的憑證共享給第

oauth , 協議 , 權限 , 前端 , Web

不語 - IDEA開打jsp頁面亂碼問題解決

問題:IDEA開打jsp頁面亂碼問題解決 解決: 1 先把Idea配置:File–Settings–File Encodings–Project Encoding 設置為UTF-8 2 jsp文件中添加: %@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %

編碼 , JAVA , jsp , 程序員 , Javascript

雲音樂技術團隊 - 淺嘗IM方案在H5活動場景中的應用

本文作者:入雲 前言 説起 IM,大家應該都或多或少了解過一些,一般被熟知是在一些聊天場景裏應用的比較多;而一般情況下我們常接觸的業務中大多是做一些接口的查詢提交之類的操作,用正常的 Ajax 請求就足以滿足需求,比較難接觸到 IM 這種方案。 但如果涉及到一些需要頻繁更新數據的業務場景,使用常規接口查詢難免會給服務端造成比較大的性能開銷,並且數據更新的延遲也會很大;嘗試使用 IM 則可以讓我們在

im , websocket , h5頁面 , 前端

xachary - 使用Three.js如何通過代碼動態改變模型的視角

場景 作為剛剛接觸 Three.js 的小白,在工作中遇到下面的需求: 加載一個 3D 模型 通過代碼切換預設的任意模型的視角 最終效果(在線示例): 👆基於官方示例增加的控制代碼 我們通過官方示例可以知道,只要使用 OrbitControls 就可以通過鼠標調整模型的視角。可是,能不能通過代碼,切換特定的視角呢?有沒有官方的 API 可以實現這個交互呢?小白暫時未能找到拿來即用的示例

three.js , 3d , 前端

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

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

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

lihaixing - ArrayBuffer 二進制數據

在 Web 開發中,當我們處理文件時(創建,上傳,下載),經常會遇到二進制數據。另一個典型的應用場景是圖像處理。 與其他語言相比,JavaScript 中的二進制數據是以非標準方式實現的。 1. 創建二進制數據 基本的二進制對象是 ArrayBuffer —— 對固定長度的連續內存空間的引用。 let buffer = new ArrayBuffer(16); // 創建一個長度為 16 的 bu

二進制 , arraybuffer , 前端 , Javascript

李不要熬夜 - CSS3中的變形處理——transform功能(旋轉、縮放、傾斜、移動)

1 transform屬性 在CSS3中,可以利用transform功能實現文字或圖像的旋轉、縮放、傾斜、移動這4中類型的變形處理。 (1)瀏覽器支持 到目前為止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上瀏覽器支持該屬性。 2 旋轉 使用rotate方法,在參數中加入角度值,角度值後面跟表示角度單位的“deg”文字即可,旋轉方向為順時針方向。

transform , Css , 程序員 , 前端

玩足球的傷疤 - 細説Flexbox 佈局

在響應式設計中,Flexbox 是一種理想的佈局工具。它使得元素能夠根據容器的尺寸自動調整,靈活地填充可用空間。因此,無論是在桌面端還是移動端,Flexbox 都能夠確保佈局自適應、整潔且易於維護。 示例:響應式導航欄 假設我們需要創建一個具有可調節寬度的導航欄,項之間應均勻分佈,並且在小屏幕上時,導航項能夠堆疊在一起: nav class="navbar" a href="#"Home/a

flexbox , typescript , 後端 , 前端 , Javascript

風流倜儻的傷痕 - 分佈式數據庫解析

title: 分佈式數據庫解析 date: 2025/2/20 updated: 2025/2/20 author: cmdragon excerpt: 通過金融交易、社交平台、物聯網等9大真實場景,結合Google Spanner跨洲事務、DynamoDB毫秒級擴展等38個生產級案例,揭示分佈式數據庫的核心原理與工程實踐。內容涵蓋CAP定理的動態權衡策略、Paxos/

elasticsearch , redis , MySQL , nosql , 數據庫

LaughingZhu - DevNow: Search with Lunrjs

前言 假期真快,轉眼國慶假期已經到了最後一天。這次國慶沒有出去玩,在北京看了看房子,原先的房子快要到期了,找了個更加通透一點的房子,採光也很好。 閒暇時間準備優化下 DevNow 的搜索組件,經過上一版 搜索組件優化 - Command ⌘K 的優化,現在的搜索內容只能支持標題,由於有時候標題不能百分百概括文章主題,所以希望支持 摘要 和 文章內容 搜索。 搜索庫的橫向對比 這裏需要對比了 fus

blog , 前端

漢得數字平台 - 零衍課堂 | 環境初始化部署流程

概述 在項目的開始,我們都需要部署POC環境,或者部署開發環境等,部署環境的小夥伴應該都有過這樣的經歷,在首次部署的時候,因為不熟練、系統不熟悉等原因,部署過程困難重重,需要花很長時間去找文檔,如果是複雜的產品我們還需要手動進入到系統內根據用户手冊的指導進行配置數據,茫茫多的菜單對於剛上手的你痛苦萬分。 零衍經過幾個版本的實踐,考慮到了這一點,我們針對部署初始化容易出錯的問題,專門優化了部署與配

單點登錄 , 權限控制 , 系統管理

友人A - threejs的transformControls拖拽結束的異常

transformControls拖拽結束以後會以結束點的射線拾取重新選中新的模型,這裏發現是監聽事件的問題 // 創建 TransformControls const transformControls = new TransformControls(camera, renderer.domElement); const transformControlsHelp

three.js , 前端 , Javascript

尹光耀 - underscore數組遍歷函數分析(一)

這是underscore源碼剖析系列第三篇文章,主要介紹underscore中each、map、filter、every、reduce等我們常用的一些遍歷數組的方法。 each 在underscore中我們最常用的就是each和map兩個方法了,這兩個方法一般接收三個參數,分別是數組/對象、函數、上下文。 // iteratee函數有三個參數,分別是item、index、array或者value、

underscore , 前端 , Javascript

健兒 - 無感刷新token解決方案

在你的 axios 封裝文件中,你需要兩個外部變量來管理狀態: // 標記是否正在刷新 token 的“鎖” let isRefreshing = false; // 存儲因 token 失效而掛起的請求的“隊列” let requestQueue = []; 請求攔截器 (Request Interceptor) 它的任務很簡單:在每個請求發出去之前,都帶上當前的 token

Ajax , 前端 , Javascript

幸福的鬧鐘 - 普通程序員的“技術債滾雪球”……讓我升職後的一件事就是“降本增效”?

🚧 本文沒有技術乾貨,只有技術人的乾巴人生。建議帶點冰闊落一起服用。 一、從Spring MVC到Spring Cloud,人生第一次“技術債滾雪球” 我工作的第八年了,回頭看自己這一身技藝。 最開始是Spring MVC,配置寫得像祖傳配方,一層包一層。 後來接觸Spring Boot,像打開了人生外掛,啓動速度快到讓我以為自己寫的服務終於不再有Bug了。 再後來,Spring Cloud來了

觀點 , 全棧 , 程序員 , 後端 , 前端

袋鼠雲數棧UED - 一文了解 history 和 react-router 的實現原理

我們是袋鼠雲數棧 UED 團隊,致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神,探索前端道路,為社區積累並傳播經驗價值。 本文作者:霜序 前言 在前一篇文章中,我們詳細的説了 react-router@3.x 升級到 @6.x 需要注意的問題以及變更的使用方式。 react-router 版本更新非常快,但是它的底層實現原理確是萬變不離其中,在本文中會從前端路由出發到 react

react , react-router , 前端

jsliang - CSS 實例系列 - 02 - 2023 兔年祝福

Hello 小夥伴們早上、中午、下午、晚上和深夜好,這裏是 jsliang~ 新年新氣象,讓我們耍一個兔飛猛進的祝福吧: 這個是一個完整的線上小實例,小夥伴們可以填寫數據,服務器會用 Node.js 定期讀取數據: 填寫數據:https://kdocs.cn/l/cbmawranzvNL 效果查看:https://liangjunrong.github.io/ 例如你填的用户名稱是:

puppeteer , node.js , css3動畫 , html5 , Javascript

linong - 前端培訓-中級階段(21)- xhr2、FormData(2019-10-17期)

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本着提升技術水平,打牢基礎知識的中心思想,我們開課啦(每週四)。 AJAX 我們肯定不陌生,低版本IE使用new ActiveXObject("Microsoft.XMLHTTP"),其他瀏覽器使用new XMLHttpReq

formdata , xmlhttprequest , Ajax , html5 , Javascript

海豚V靚仔 - 小米13T Pro系統合集:性能與攝影的極致融合,值得你升級的系統ROM

小米 13T Pro 是一款性能卓越、設計精美的旗艦機型,具備多項領先配置,且在與前一代產品及友商機型的對比中優勢明顯,值得深入探討。 性能提升 小米 13T Pro 搭載了最新的 天璣 9200+ 處理器,相較於前一代(小米 12T Pro)的 驍龍 8+ Gen 1,在性能和能效表現上均有顯著提升。天璣 9200+ 的 AI 算力及多任務處理能力使得系統響應速度更快,用户在運行大型應用、遊戲或

前端 , html5

Aresn - View UI Plus 發佈 1.3.1 版本,增強 TypeScript 使用體驗

View UI Plus 1.3.1 版本已於 2022-06-29 發佈。 更新日誌 請到官網 www.iviewui.com 查看最新版。 提供基於 TypeScript 的工程。view-ui-project-ts Playground 默認模板支持切換組合式 API 和選項式 API。Playground 修復 ImagePreview 操作欄在移動端顯示不完整的問題。#104

vue.js , iview , typescript , 前端

qinyuanqiblog - vue-cli3 本地無法代理到生產環境的問題分析

問題描述 一個古老項目,之前是基於vuecli2 後來被我遷移到vue cli3, webpack 版本是4.46, vue-cli版本是4.4.4 vuecli配置,之前這個配置是可以直接訪問到生產環境的,後來同樣的配置,無法代理到生產環境,問了下運維大哥,他説就nginx加了個認證來源而已,別的啥都沒做,肯定是前端代理的姿勢不對 解決辦法 輾轉反側,經過一年終於解決了這個問題。

vue-cli , 前端

zxl20070701 - H5輸入區域光標控制

什麼是光標? 頁面上輸入區域(比如input和textarea)中閃爍的光標其實是一個選區,也就是選區的左邊界和右邊界直接形成的選區。 非IE瀏覽器 輸入框結點input=document.getElementById('#input')有兩個屬性: selectionStart、selectionEnd,分別代表選區開始位置,選區結束位置。 通過修改這兩個值就可以形成選區,寬度為0也就實現了光標

input , textarea , 光標 , HTML , 前端

MangoGoing - 探究幾種CSS視差動畫實現方案及原理

滾動視差 介紹 視差滾動(Parallax Scrolling)是指多層背景以不同的速度移動,形成立體的運動效果,帶來非常出色的視覺體驗。 實現原理 方式一: 利用 background-attachment 屬性,我們可以把網頁解刨成:背景層、內容層、懸浮層 background-attachment 的作用是設置背景圖像隨着頁面滾動的時候固定,即使一個元素有滾動機制,背景也不會隨着元素

parallax-animation , css3動畫 , 前端