tag 前端

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

@前端 / 博客 RSS 訂閱

xingzhaodezhaoxiansheng 頭像

姓趙的趙先生 - jsonp跨域原理解析

1、背景： 由於瀏覽器同源策略的限制，非同源下的請求，都會產生跨域問題，jsonp即是為了解決這個問題出現的一種簡便解決方案。 2、同源策略： 同一協議，同一域名，同一端口號。當其中一個不滿足時，我們的請求即會發生跨域問題。 舉個栗子🌰： http://www.abc.com:3000到https://www.abc.com:3000的請求會出現跨域（域名、端口相同但協議不同） http:

node.js , 前端 , Javascript , Jsonp

收藏 評論

alienzhou 頭像

alienzhou - 替代 webpack？一文帶你瞭解 snowpack 原理，你還學得動麼

近期，隨着 vue3 的各種曝光，vite 的熱度上升，與 vite 類似的 snowpack 的關注度也逐漸增加了。目前（2020.06.18）snowpack 在 Github 上已經有了將近 1w stars。 snowpack 的代碼很輕量，本文會從實現原理的角度介紹 snowpack 的特點。同時，帶大家一起看看，作為一個以原生 JavaScript 模塊化為核心的年輕的構建工具，它是如

構建工具 , webpack , 模塊化開發 , 前端 , Javascript

收藏 評論

haikuotiankong_mac 頭像

海闊天空_mac - 基於小程序請求接口 wx.request 封裝的類 axios 請求

Introduction wx.request 的配置、axios 的調用方式 源碼戳我 feature 支持 wx.request 所有配置項 支持 axios 調用方式 支持 自定義 baseUrl 支持 自定義響應狀態碼對應 resolve 或 reject 狀態 支持 對響應（resolve/reject）分別做統一的額外處理 支持 轉換請求數據和響應數據 支持 請

小程序 , 前端工程師 , 前端優化 , 前端 , Javascript

收藏 評論

jingzhexiaoyu 頭像

胡斐 - Docker 第一次上手

Docker第一次上手 引言 DevOps/開發運維/不懂運維和部署的前端開發 項目實際需要，平穩升級構建工具 安裝Docker 去看官網就好了 涉及的幾個命令 dockerimages ![dockerimages](./assets/docker-images.jpg) dockerbuild -t指定image的repository和tag，這兩項的含義可

node.js , frontend , Docker , 前端 , Javascript

收藏 評論

imouou_5a60be738882f 頭像

王小o - 【快速開發App實戰】BUI高仿網易新聞App系列一、搭建App開發環境和工作空間

一. 搭建App開發環境和工作空間 前言 我們的目標是要做一個真實的案例, 着重通過BUI框架及其相關工具的使用, 結合原生打包平台, 幫助大家理解一個App的開發過程. 以最新網易新聞的App為例, 儘量只描述過程, 細節可以自行完善, 高仿得太過以假亂真, 會有侵權問題 ^_^. 文章會分為多個小章節, 知識點逐個講解的方式, 每天掌握一點點, 進步一點點. 文章首發都會在bui神速訂閲號,

app , hybrid-app , webapp , 前端 , Javascript

收藏 評論

imouou_5a60be738882f 頭像

王小o - [分享]高仿網易新聞WebApp模板源碼下載

BUI-163網易新聞 大小: 6.27M 該App基於BUI Webapp框架+Dcloud構建. 僅供學習交流使用. 整個app開發過程記錄在這裏bui神速訂閲號. 快速開發App系列篇 預覽 交互1: 下拉刷新, 加載分頁 交互2: Tab嵌套交互 交互3: 欄目刪減自動更新 交互4: 底部tab的交互, 每個Tab裏面還有各自的交互 下載 源碼下載: https

hybrid-app , webapp , 前端 , Javascript

收藏 評論

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

收藏 評論