tag 前端

標籤
貢獻1,041
1052
06:37 AM · Oct 27 ,2025
tuzixiansen_63d4d65909d62 頭像 opentiny 頭像 qaz666 頭像 invalidnull 頭像 dirackeeko 頭像 junxiudetuoba 頭像 jdcdevloper 頭像 smileZAZ 頭像 yayu 頭像 icecreamlj 頭像 beishangdejianjidan_cqxuxf 頭像 xixindehongjiu 頭像

@前端 / 博客 RSS 訂閱

henry_57bcfc6a67f76 頭像

henry_57bcfc6a67f76 - tailwindcss 系列 Flex Aligin Content

aligin content start 效果 代碼 div class="flex content-start flex-wrap bg-gray-200 h-48" div class="w-1/3 p-2" div class="text-gray-700 text-center bg-gray-400 p-2"1/div /d

flexbox , css框架 , 前端

收藏 評論

maomaoxiaobo 頭像

貓多少 - Flex佈局

上一期我整理介紹了grid佈局方式，如果想看的同學，可以直接點擊此文章： Grid佈局 這期我把flex佈局方式筆記也整理出來了，內容是我自己在根據別人視頻學習過程中整理的資料。 目前很多css的框架都使用Flexbox作為基礎。瀏覽器大部分也都兼容。 接下來直接看代碼演示，我們先準備一個素材,準備5個div元素，定義為 ABCDE。因為div默認情況下display是block塊級元素，所

flexbox , flex , Css , HTML , 前端

收藏 評論

mincloud 頭像

知曉雲 - 開發一個 App Clip 並不難！我們立馬上開發教程

作者｜何世友、彭權華 在 2020 年 6 月 23 日的 WWDC 大會中，蘋果發佈了 App Clips 。 App Clip（官方翻譯：輕 App；民間翻譯：「蘋果」小程序），是主 app 輕量級的版本，旨在在特定場景為用户提供快速便捷的體驗。 如果你在上班路上經過一家咖啡店想購買一杯咖啡，但發現排隊下單付款的人很多，此刻你只需要使用 iPhone 自帶的掃碼工具掃描咖啡商店的 App Cl

移動web開發 , 小程序 , app , 蘋果開發 , 前端

收藏 評論

yangxiansheng_5a1b9b93a3a44 頭像

羊先生 - 完整版移動端滑動事件封裝

touchEvent 基於Jquery擴展在移動端產生的事件，包含，單次觸摸事件，兩次觸摸事件，長按事件，滑屏事件，向上滑動事件，向下滑動事件，向左滑動事件，向右滑動事件 預覽 地址預覽 https://hangjob.github.io/touchEvent/index.html 事件類型 單次觸摸事件 $(el).tap tap: function(element, fn) {

移動端web , jquery , 前端 , html5 , Javascript

收藏 評論

solvep 頭像

solvep - 前端代碼風格實踐 prettier + ESLint + Git Hook + lint-staged

整潔的代碼如同優美的散文。—— Grady Booch 前言： 在繁雜的業務迭代時，接手其他項目，如果沒有一個統一的代碼風格，閲讀起來是相當困難的，畢竟團隊裏的每個人習慣不一樣。團隊協作，意味着需要犧牲一些個性，減少一些沒必要的爭吵。 1.Prettier是什麼？ 顧名思義 prettier（更漂亮的），讓你的代碼更漂亮。官網説的很清楚了 An opinionated code format

前端工程化 , 前端優化 , 前端 , Git

收藏 評論

jiangpengfei_5ecce944a3d8a 頭像

蔣鵬飛 - 手寫Koa.js源碼

用Node.js寫一個web服務器，我前面已經寫過兩篇文章了： 第一篇是不使用任何框架也能搭建一個web服務器，主要是熟悉Node.js原生API的使用：使用Node.js原生API寫一個web服務器 第二篇文章是看了Express的基本用法，更主要的是看了下他的源碼：手寫Express.js源碼 Express的源碼還是比較複雜的，自帶了路由處理和靜態資源支持等等功能，功能比較全面。與之

node.js , koa.js , 源碼分析 , 前端 , Javascript

收藏 評論

erin_5f911ffcecd4e 頭像

Erin - Flex響應式佈局 ：元素必要時的換行以及讓元素佔滿水平剩餘的空間

item的換行 默認情況下，item都排在一條軸線上： 使用 flex-wrap 可以使一條軸線排不下的情況下換行。 div style="display:flex; flex-wrap:wrap" div style="background-color: yellow; min-width: 200px;height: 200px;"Item 1/div div style="bac

flexbox , Css , 前端

收藏 評論

beilunyang 頭像

悖論BeilunYang - 使用Workbox創建PWA應用

前言 最近公司項目迭代逐漸放緩，下班時間逐漸變早，所以本着漸進增加的理念，在下班後，將公司項目進行了一下PWA改造 為何要改造成PWA 用户需求。我們的用户有許多電腦小白，不想記網址，又不會使用瀏覽器的收藏功能。以前使用的同類軟件都有桌面版，有一種覺得桌面版比網頁版可靠，使用簡單的錯覺，曾多次在釘釘售後羣裏反映，如何將網頁保存至桌面，方便他下次直接在桌面打開 PWA是漸進式的，如果用户的瀏覽

pwa , webpack , 前端 , Javascript

收藏 評論

weidewei 頭像

圍的圍 - 基於Koa2打造屬於自己的MVC框架，仿egg的簡易版本

背景 Express和Koa作為輕量級的web框架，沒有任何約束的框架在一開始的時候會非常的爽快，開發幾個demo，手到擒來，但是一旦代碼真正上去的時候（而且一定會），你就會發現，大量重複的操作，重複的邏輯。導致項目的複雜度越來越高，代碼越來越醜，非常的難以維護。我的quark-h5也是開始隨意的寫，寫到最後只能重構一波了。正好期間做了個在線文檔管理的項目用了egg.js，讓我這種 node 小白

node.js , eggjs , koa , koa.js , 前端

收藏 評論

angular4 頭像

阿寶哥 - postMessage 還能這樣玩

在日常工作中，消息通信是一個很常見的場景。比如大家熟悉 B/S 結構，在該結構下，瀏覽器與服務器之間是基於 HTTP 協議進行消息通信： 然而除了 HTTP 協議之外，在一些對數據實時性要求較高的場景下，我們會使用 WebSocket 協議來完成消息通信： 對於這兩種場景，相信大家都不會陌生。接下來，阿寶哥將介紹消息通信的另外一種場景，即父頁面與 iframe 加載的子頁面之間，如何進行消息通

消息傳遞 , postmessage , 前端 , Javascript

收藏 評論

dantiedan 頭像

彈鐵蛋同學 - [譯] 如何使用 useRef 修復 React 性能問題

原文地址：How to useRef to Fix React Performance Issues 原文作者：Sidney Alcantara 譯文出自：掘金翻譯計劃 本文永久鏈接：https://github.com/xitu/gold-miner/blob/master/article/2020/how-to-useref-to-fix-react-performanc

react , react-hooks , 前端優化 , 前端 , Javascript

收藏 評論

fulade 頭像

弗拉德 - 【Python 1-5】Python教程之——字符串

字符串或串(String)是由數字、字母、下劃線組成的一串字符。 字符串 字符串就是一系列字符。在Python中，用引號括起的都是字符串，其中的引號可以是單引號， 也可以是雙引號，如下所示: "This is a string." 'This is also a string.' 這種靈活性讓你能夠在字符串中包含引號和撇號: 'I told my friend, "Python is my

python3.x , python2.7 , 後端 , 前端 , Python

收藏 評論

tianzhich 頭像

小志Chris - 【譯】繼承與原型鏈（Inheritance and the prototype chain）

前言 原文來自MDN JavaScript主題的高階教程部分，一共5篇。分別涉及繼承與原型、嚴格模式、類型數組、內存管理、併發模型和事件循環。本篇是第一部分，關於繼承和原型。 原文鏈接請點我 下面是正文部分： 對於熟悉基於類的編程語言（例如 Java 和 C++）的開發者來説，JavaScript 會讓他們感到困惑，因為 JS 的動態性以及其本身並不提供class的實現（ES2015 中提出的c

prototype , inheritance , 前端 , Javascript

收藏 評論

jiangpengfei_5ecce944a3d8a 頭像

蔣鵬飛 - 手寫koa-static源碼，深入理解靜態服務器原理

這篇文章繼續前面的Koa源碼系列，這個系列已經有兩篇文章了： 第一篇講解了Koa的核心架構和源碼：手寫Koa.js源碼 第二篇講解了@koa/router的架構和源碼：手寫@koa/router源碼 本文會接着講一個常用的中間件----koa-static，這個中間件是用來搭建靜態服務器的。 其實在我之前使用Node.js原生API寫一個web服務器已經講過怎麼返回一個靜態文件了，代碼雖然

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

收藏 評論

fromin 頭像

Fromin - 全新的postmessage庫特性介紹與源碼解析

眾所周知，postMessage 是在不同頁面間進行通信的一種常用方式: window.postMessage() 方法可以安全地實現跨源通信。通常，對於兩個不同頁面的腳本，只有當執行它們的頁面位於具有相同的協議（通常為https），端口號（443為https的默認值），以及主機 (兩個頁面的模數 Document.domain設置為相同的值) 時，這兩個腳本才能相互通信。window.postM

通信 , postmessage , 前端

收藏 評論

kylebing 頭像

KyleBing - 寫了個網頁版的五筆跟打器：玫楓跟打器

玫楓跟打器 Roseo Maple Type Pad 線上地址 https://kylebing.cn/tools/typepad/ 截圖 前言 自己是個五筆愛好者，也一直在使用五筆，從 Windows 轉到 Mac 之後，也沒有有可用的跟打器，每回想練練打字了都需要打開 Windows 模擬器來打字。 一直一直想有個能在 macOS 上運行的跟打器。 最初是想自己用 swift

輸入法 , requirejs , 前端 , Javascript

收藏 評論

buddhad666 頭像

buddha - ios原生鍵盤兼容問題

出現的兼容問題是: 我寫的是H5,當我在input標籤的oninput事件裏寫入了正則表達式replace(/\s+/g, '')限制輸入框不能輸入空格,android手機中英文一切正常輸入，但是到了ios手機上，用ios原生鍵盤輸入中文時，明明習慣性的一次輸入多箇中文，但是點擊對應的文字到輸入框後卻變成了英文，還總是失去焦點。 沒找到問題的原因時臨時的解決方法就是一個字一個字的輸入或

input , regexp , ios , 前端

收藏 評論

evilboy 頭像

瘋狂的技術宅 - 2020 年 Chrome 開發者峯會的亮點

2020 年的Chrome 開發者峯會和往年有所不同，今年是在線上召開的，每次談話大約十分鐘，討論規模更大。雖然我沒有在第一時間觀看會議的直播，但是看回放也不會錯過這些亮點。 所有的回放在這裏：https://developer.chrome.com/... 通過“Core Web Vitals”簡化了性能指標 我們都知道 Chrome 有大量的性能指標，可以用它們來跟蹤關於網站性能的所有內容。儘

chrome , pwa , Css , 前端 , Javascript

收藏 評論

stephentian 頭像

StephenTian - 2021 前端開發手冊

簡介 這是一份 2021 年前端開發手冊，列舉前端開發相關技術，提供相關技術的學習資源。下面的項目不用全部學習，可以選其中一些學習。 歡迎補充！項目地址：2021-frontend-handbook 目錄 HTML CSS JavaScript 前端框架 前端工程化 服務端渲染 SSR 靜態站點生成器 SSG TypeScript 用 JS 去做服務器端 桌面應用程序 El

frontend , 前端 , Javascript

收藏 評論

qianxiaqingkong 頭像

蘭俊秋雨 - 年終盤點跨平台技術優劣勢對比（Hybrid、RN、Weex、Flutter）

跨平台技術發展的三個階段 第一階段是混合開發的web容器時代 為了解決原生開發的高成本、低效率，出現了Hybrid混合開發 原生中嵌入依託於瀏覽器的WebView Web瀏覽器中可以實現的需求在WebView中基本都可以實現 但是Web最大的問題是，它的性能和體驗與原生開發存在肉眼可感知的差異 因此並不適用於對性能和用户體驗要求較高的場景

weex , react-native , flux , hybrid-app , 前端

收藏 評論

xiuxian_orange 頭像

修仙大橙子 - 「一起造輪子」從1.9k的jsonp庫出發🏗一起實現jsonp

1. 什麼是jsonp？ 下方是維基百科對JSON的解釋 從這個解釋中，我們可以知道，完成jsonp需要的步驟主要有以下兩點： 向頁面中插入一個帶有請求鏈接的script標籤 通過回調函數，獲取需要的JSON數據 2. jsonp庫是如何實現的？ jsonp是一個star數1.9k的倉庫，實現了一個簡單的jsonp方法 jsonp倉庫傳送門 2.1 傳入參數 url 傳入的u

一起寫輪子 , 前端 , Javascript , Jsonp

收藏 評論

sucre_199782 頭像

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

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

收藏 評論

alisecued 頭像

ES2049 - 從 Bundleless 看前端構建

前言 Bundle or Bundleless？自 2015 年 ESM 標準發佈後，路線之爭就開始逐步升温。轉眼間，時間已來到 2021 年。如果白酒的車你錯過了，那麼不妨看看 Bundleless，或許它就是前端圈的下一位「茅台」。 前端構建當下的問題 不得不説，曾經把自己定位為「打包器」的 Webpack，如今已形成強大的構建生態，儼然一統江湖。但前端構建的道路還遠沒有走到最後。隨着業務的發

前端構建 , 前端

收藏 評論

chen_6016206b422ca 頭像

chen - 移動端click事件300ms延時解決方案

問題描述 移動端由於屏幕雙擊會縮放頁面，因此移動端click事件會有300ms延時情況的產生 解決方案 方法一：全局禁止縮放 在html頁面頭部的meta標籤中加上content="user-scalable=no" meta content="user-scalable=no" 該方法會讓瀏覽器禁用默認的雙擊行為並且去掉300ms點擊延時 適用場景：需要對整個頁面進行禁用雙擊行為。但

移動端web , 前端 , Javascript

收藏 評論