收藏 / 列表

amejimaobari-ollornwi 頭像

Amejimaobari Ollornwi - Creating An Effective Multistep Form For Better User Experience

For a multistep form, planning involves structuring questions logically across steps, grouping similar questions, and minimizing the number of steps and the amount of required information for each s

ux , Design , Javascript

linx 頭像

前端路引 - Web前端入門第 89 問：總結 8 種跨域通信處理方案

為什麼會跨域？跨域是誰附加的限制？為什麼 APP 不會有跨域問題？ 首先跨域問題是由於瀏覽器的同源策略（Same-Origin Policy）導致的，基本上所有瀏覽器都有限制，默認情況是不允許跨域訪問的！！ APP 的請求不受瀏覽器的同源策略限制，所以不存在跨域。類似一個服務器像另一個服務器發起請求一樣，也不會受跨域影響。 想想一下：如果瀏覽器沒有同源策略限制，A 網站可以隨意訪問 B 網站內容，

前端

hsr2022 頭像

後山人 - 有些數據管理的軟件，真心不用找人寫的

我們的Simplest Admin快速開發系統，有國企、高校、政府、公司、個人等各類用户。他們都有同樣的特點，就是需要快速的完成，功能不是特別複雜的系統，他們本身就是各個組織信息部門的人員，本事就有責任落實這些需求，但是，苦於沒有合適的，上手就用的系統；這時候，我們的Simplest Admin系統就恰好滿足了他們的需求。 首先，快速且完整，他們可以使用代碼生成，不同於很多系統一鍵生成，需要

vue.js , thinkphp

kestrel_task 頭像

微芒不朽 - 用 n8n 實現工作自動化後，我每天多睡 2 小時！

n8n 是一個開源的工作流自動化平台，允許用户通過拖放節點來創建複雜的自動化流程。n8n 提供了豐富的內置節點和社區貢獻的節點，支持與各種 API、數據庫和其他服務集成。本文將詳細介紹 n8n 中節點的使用方法，包括如何添加節點、配置節點、連接節點以及調試和優化工作流。 1. n8n 基本概念 1.1 工作流（Workflow） 工作流是由多個節點組成的自動化流程，每個節點代表一個操作，如發送電

機器學習 , 人工智能 , 深度學習

dirackeeko 頭像

DiracKeeko - [CSS] flex佈局+white-space: nowrap寬度異常

在flex佈局中，定義一行三列並列的3個div，其中2個div寬度寫定，第3個div隨着父容器寬度由flex自適應。這是個很常見的佈局，平常使用沒有啥問題。 現在在第3個div中放置一段長的純文本(文本內容單行放置寬度大於第3個div的寬度)，且設置white-space: nowrap，此時就會出現第3個div的寬度被文本撐開，變為單行文本的寬度，而不受flex佈局的約束。且由於第3個div的寬

flex , white-space , Css

apifox 頭像

Apifox - 精通軟件質量提升的利器：Mock 測試教程

在軟件工程的套路中，虛擬化測試，又稱 Mock 測試，扮演一個無可或缺的角色。Mock 測試允許工程師仿製和操控對象、服務或者系統組件等的行為，使得人們能在一個乾淨獨立的環境裏測試特定功能。這種方法能確保測試聚焦於代碼邏輯，而非外圍干擾因素。 Mock 測試的核心概念 Mock 測試 用虛擬對象取代實際對象，通過控制外部依賴，帶來了測試的隔離性和準確性，從而確立了代碼的穩定性及其長期維護性。 Mo

mock.js , mock , mockito , 前端工程師 , 前端

yinzhixiaxue 頭像

銀之夏雪 - this你瞭解多少呢

執行上下文 js在執行代碼之前，需要經過一系列的“準備”，這被稱為執行上下文 ，其包含詞法環境 和this 。所有的 js 代碼在運行時都是在執行上下文中進行的，每創建一個執行上下文，就會將當前執行上下文放到一個棧頂，這就就是我們常説的執行棧 。 執行上下文的創建 何時創建執行上下文 JavaScript 中有三種情形會創建新的執行上下文： 全局執行上下文 ，進入去全局代碼的時候。任何不在函數

面試 , this , 前端 , Javascript

linong 頭像

linong - 前端培訓-中級階段（10）- 同源策略（2019-08-15期）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。 同源策略是什麼？ 同源策略是瀏覽器的一個安全功能，不同源的數據禁止訪問。 所以 lilnong.top 下的 ajax 訪問 51vv.com 數據是會報

script , xmlhttprequest , 同源策略 , Ajax , Javascript

ruochuan12 頭像

若川 - 50行代碼串行Promise，koa洋葱模型原來是這麼實現？

1. 前言 大家好，我是若川。歡迎關注我的公眾號若川視野，最近組織了源碼共讀活動《1個月，200+人，一起讀了4周源碼》，感興趣的可以加我微信 ruochuan12 參與，長期交流學習。 之前寫的《學習源碼整體架構系列》 包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4十餘篇源碼文章。其中最新的兩篇是

node.js , koa , koa.js , 前端 , Javascript

momeak9 頭像

泯瀧 - Web Woker 與主線程通信場景下對postMessage的簡潔封裝

在Web Worker與主線程之間進行通信時，使用postMessage是一種常見的方式。然而，在某些業務場景中，postMessage可能會顯得不夠簡潔，因為它涉及到手動序列化和反序列化數據，以及通過事件監聽器處理消息。以下是一些常見問題和解決方案，以簡化在Web Worker與主線程之間的通信場景中使用postMessage的問題。 結構化克隆問題 在Web Worker與主線程之間傳輸數據時

瀏覽器 , webworker , 瀏覽器原理 , 前端 , Javascript

_607c00baa52ff 頭像

懟懟 - 【css】塊格式化上下文(BFC)

定位方式 BFC 1 定位方式 普通流/文檔流 浮動 絕對定位 1.1 普通流/文檔流 規則 元素按照其在HTML中的先後位置自上而下佈局 行內元素水平排列，直到當行被佔滿然後換行，塊級元素則會被渲染為完整的一個新行 所有元素默認都是普通流定位 1.2 浮動 規則 元素先按照普通流的位置出現，然後根據浮動的方向儘可能向左或向右偏移 平移到容器邊框，或者碰到另外一個

bfc , float , Css

zisrfs 頭像

zsirfs - 談談深拷貝、淺拷貝

前提: 假設您已經知道為什麼在JavaScript中需要深拷貝和淺拷貝了。 舉兩個例子： const a = [1, 2, { key: 20 }] const b = [...a] b[2].key = 30 console.log(a[2] === b[2]) console.log(a === b) // true const o = { k1: { kk1: 50} } con

javascript專題系列 , Javascript

webinfoq 頭像

破曉L - React 50 種狀態類型

React 是一個視圖層框架，其核心思想是 UI = f(state)，即「UI 是 state 的投影」，state 自上而下流動，整個 React 組件樹由 state 驅動。當一個 React 應用程序足夠複雜，組件嵌套足夠深時，組件樹中的狀態流動會變得難以控制（例如你如何跟蹤父節點的 state 流動到葉子節點時產生的變化）。這時我們就需要對 state 進行管理，在進行狀態管理的同時，還

react , 狀態管理 , 組件通信 , 前端 , Javascript

hai2007 頭像

你好2007 - 關於CSS中設置overflow屬性的值為hidden的相關理解

包裹元素剪裁條件 是不是包裹元素overflow設置為hidden以後，內部元素如果超過包裹元素的話就會被剪裁？答案是不一定，這要看此刻的CSS環境。 根據對CSS2.1規範的理解，可以這樣表述：如果一個元素的包含塊的overflow屬性設置為hidden，那麼超過這個包含塊部分的內容就會被剪裁。 因此我們需要學會尋找一個元素的包含塊，不過在這之前，讓我們先簡單的知道如果一個元素的overflow

overflow , bfc , hidden , Css

zhuifengdekukafei 頭像

追風的苦咖啡 - 永久免費 + 國密支持！JoySSL 憑什麼成為中小站長新首選？

JoySSL 能成為中小站長新首選，核心在於精準擊中了中小站長 “成本敏感、合規難、技術弱、場景雜” 的四大核心痛點，其 “永久免費” 打破成本壁壘，“國密支持” 解決合規焦慮，再疊加低門檻操作與全場景適配，形成了對中小站長的強吸引力。 一、“永久免費”：擊穿中小站長的成本核心痛點 對個人博客、小電商、初創企業站點等中小站長而言，“省錢” 是首要訴求，而 JoySSL 的 “永久免費” 並非噱

ssl證書 , HTTPS , Javascript

shimiandeshatanku 頭像

李遊Leo - 深入理解 ECMAScript 2024 新特性：正則表達式 /v 標誌

ECMAScript 2024 （ES15）標準引入了新的正則表達式標誌 /v，這一新增功能不僅優化了多行匹配的處理，還增加了對特殊字符匹配的支持。這一變革對於需要處理複雜文本數據的應用場景尤為重要，比如日誌分析、代碼審核等。接下來，本文將深入探討 /v 標誌的實際應用價值，並通過多個編程案例來展示其強大的實際應用能力。 /v 標誌的技術背景與應用 正則表達式作為開發者的有力工具，經常被用於字符

ecmascript , Javascript

nanchengfe 頭像

南城FE - CSS螢火蟲按鈕特效

如圖所示，這是一個很炫酷的按鈕懸浮特效，鼠標懸停時，按鈕呈現發光的效果，周邊還出現類型螢火蟲的效果。本文將解析如何實現這個按鈕特效，基於這個動圖可以分析出需要實現的要點： 有一個跟隨鼠標移動的圓點 按鈕懸停時有高亮發光的效果 懸停時按鈕周邊的螢火中效果 實現過程 跟隨鼠標移動的圓點 這個部分需要基於JS實現，但不是最主要的實現代碼 如果單純做一個跟隨鼠標移動的點很簡單，只需要監聽鼠標事

css3 , 動畫 , 前端

beckyyyy 頭像

beckyyyy - 居中佈局：水平居中和垂直居中

居中佈局在實際場景中很常見，在面試當中也經常會被考察。 以下分別是水平居中和垂直居中常用的樣式。 水平居中 margin: 0 auto; + width 應用於塊級元素居於容器中間 若節點不是塊級元素，需聲明display: block 若節點寬度已隱式聲明則無需顯式聲明width div class="h-c1" p談笑有鴻儒，往來無白丁。談笑有鴻儒，往來無白丁。/p /div

佈局 , 面試 , Css , 前端

ning_643b67be37ac3 頭像

麒寧 - Ant Design 常見用法與坑點總結（二）：Form 表單下拉框設置初始值

前言 Ant Design 是螞蟻出品的出色優秀的 React 組件庫，相信使用 React 進行管理系統開發的小夥伴們或多或少都接觸過 Ant Design。很多公司基於 React 開發的管理端系統也都是使用 Ant Design 的組件庫。 因此，瞭解 Ant Design 的常見用法與坑點還是有必要的。 本系列文章針對 Ant Design 一些官方文檔雖有提及，但是容易被忽略的，又比較重

antd , select , antd-mobile , 前端 , Javascript

cloudyttt 頭像

雲魚 - JavaScript中各種源碼實現

前言 能夠手撕各種JavaScript原生函數，可以説是進大廠必備！同時對JavaScript源碼的學習和實現也能幫助我們快速紮實地提升自己的前端編程能力。 最近很多人和我一樣在積極地準備前端面試筆試，所以就整理了一些前端面試筆試中非常容易被問到的原生函數實現和各種前端原理實現，其中部分源碼戳這裏。 實現一個new操作符 我們首先知道new做了什麼： 創建一個空的簡單JavaScript對象

面試 , 源碼 , 筆試 , 前端 , Javascript

u_17350491 頭像

轉角處的湯姆 - JavaScript 中的閉包：理解與應用

在 JavaScript 的世界中，閉包是一個非常重要且常用的概念。它不僅是 JavaScript 中的核心特性之一，也是許多複雜編程模式的基礎。無論是為了解決數據封裝問題，還是為了實現一些高效的異步編程模式，閉包都發揮着至關重要的作用。在本文中，我們將詳細探討閉包的概念、工作原理及常見應用，幫助你更好地理解並運用閉包。 目錄 什麼是閉包？ 閉包的工

詞法 , 作用域 , 數據封裝 , 前端開發 , Javascript

gqkmiss 頭像

月恆 - Chrome 134 版本開發者工具（DevTools）更新內容

Chrome 134 版本開發者工具（DevTools）更新內容 一、隱私與安全面板 舊的 Security 面板已演變為隱私與安全面板，並新增了一個專注於隱私的部分。在該部分中，可以： 在 DevTools 打開時，臨時限制第三方 Cookie（可帶或不帶例外），並測試網站在此情況下的表現。 查看一張表格，其中包含有關第三方 Cookie 的信息，包括它們是否被臨時限制模式攔截或豁免，以及

chrome , 瀏覽器 , chrome-devtools , 前端

u_17072679 頭像

前端小巷子 - Vue 2深入 keep-alive

Vue 2深入 keep-alive keep-alive 是 Vue 2 運行時裏最常被提及卻最少被深究的內置組件。它看上去只是“把頁面緩存起來”，背後卻涉及實例生命週期劫持、LRU 緩存策略、VNode 複用以及內存管理。 一、設計動機 單頁應用裏常見的“標籤頁”“麪包屑”“分步表單”等交互模式，都要求用户在多個路由或狀態之間來回切換。默認情況下，每一次切換都會觸發舊組件

生命週期 , 緩存 , 複用 , 前端開發 , Javascript

grewer 頭像

Grewer - 記一次樣式 debug

背景 在一個平凡的工作日中，突然有客户説我們產品的彈窗點擊無法顯示，這讓我立刻放下了手裏的活，去看了下線上環境，結果卻是一切正常 這不禁讓我有些奇怪，所以和客户要了截屏，最後發現在客户的電腦上點擊無效，作為一個老開發，第一反應就是兼容性的問題 涉及到公司產品，暫時不能放出對應截圖，不過會用 demo 截圖來代替。 這裏我用 demo 復現的場景： 這是正常的antd modal樣式： 現

兼容性 , debugging , 前端