動態

@jm365

webpack配置看這裏就夠了

webpack簡述 webpack簡單來説就是一個模塊打包器,也是目前最流行的前端構建工具之一,他將整個項目根據依賴關係通過各種loader與plugin的處理後進行打包;可以實現對代碼的各種處理,比如less、sass、stylus的解析,ecmascript版本的轉換、代碼的壓縮分割等等 webpack之loader loader可以説是webpack最核心的部分,前面所説的各種功能大部分就是

jm365 頭像

@jm365

昵稱 jm365

@codemz

Input報錯“Form elements must have labels: Element has no title attribute Element has no placeholde”

喵~ 項目開發難免會遇到些不解的問題,以下總結的是簡化版,重在復現問題,解決問題。 寫表單時,如果只是單獨寫了input元素,發現在後台管理會飄紅。感覺很奇怪,明明沒有寫錯語法,為什麼會飄紅呢? 1、寫一段最普通的html頁面 2、右鍵,選擇 “檢查”,打開後台管理器,指向input元素 此時,可以看到飄紅的input,鼠標指向input,會顯示一段提示: 3、按照提示,Shift +

codemz 頭像

@codemz

昵稱 代碼喵仔

@codemz

【3分鐘學會】一招禁用表單中input輸入框回車鍵自動觸發提交事件!

知其然知其所以然 在前端項目開發中,偶爾會有表單提交的問題: 用户輸入表單後,不小心按了回車鍵,導致提前觸發了提交事件? 問題概述 當表單中僅有一個input輸入框時,按下回車鍵就會自動觸發提交事件,這是為什麼呢? 這裏就要提到一個標準:W3C 文中最後一句話已經解釋了原因: 當表單中只有一個單行文本輸入字段時,用户代理應接受在該字段中按Enter鍵作為提交表單的請求。

codemz 頭像

@codemz

昵稱 代碼喵仔

@zhifou_5cf8bb7bcc249

JavaScript模塊化開發

1:發展歷史 早期的Javascript是作為瀏覽器的腳本語言,使用script標籤直接引入,沒有所謂的模塊化。也就是説如果我們需要一個js文件,我們就加一個script標籤,把需要的js引入進來。這種方式的特點在於:簡單粗暴。 但是當項目越來越大,依賴越來越多時可能就會出現問題,比如邏輯越來越混亂,頁面也越複雜,然後可維護性就變差了,除此之外還存在全局變量暴露、文件的引入順序的問題。比如説一個文

@woniuseo

HTML5 微數據規範

​ HTML5 微數據規範 簡介 微數據是一種內置於 HTML 中的結構化數據格式。它允許網頁作者定義頁面上的特定內容類型,例如文章、事件或人物。這有助於機器(例如搜索引擎)理解和解釋網頁內容。 微數據的基本概念 項目(Items):一個微數據項代表頁面上的某個對象或實體,例如一個人、一本書或者一個事件等。一個item通常由itemscope屬性定義。 類型(Types):每個item可以有

woniuseo 頭像

@woniuseo

昵稱 騎着烏龜奔跑的蝸牛

@yuan_life

webpack

一、webpack是什麼? webpack是一款模塊加載器兼打包工具,它能把各種資源,例如JS(含JSX)、coffee、樣式(含less/sass)、圖片等都作為模塊來使用和處理。 webpack 的核心是 依賴分析,把依賴分析出來了,其他都是細枝末節了 它主要的用途是通過CommonJS的語法把所有瀏覽器端需要發佈的靜態資源做相應的準備,比如資源的合併和打包。 二、為什麼使用web

yuan_life 頭像

@yuan_life

昵稱 草原的原

@smileZAZ

記錄---瀏覽器多窗口通信有效實踐總結

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 如何跨越不同窗口通信 在現代 Web 開發中,多個窗口或標籤頁之間的通信成為了越來越常見的需求,尤其是在應用需要同步數據、共享狀態或進行實時更新的場景中。不同窗口間的通信方式有很多種,選擇合適的方式可以大大提高開發效率和用户體驗。本文將詳細介紹幾種常見的瀏覽器多窗口通信技術,並結合實際代碼示例,分析它們的優缺點及兼容性。

smileZAZ 頭像

@smileZAZ

昵稱 林恆

@yuebanxiaoyequ_5b12c826c10bc

Node中url模塊的使用

URL模塊是NodeJS的核心模塊之一,用於解析url字符串和url對象 url.parse(url_str[,boolean]) url.parse(url_str[,boolean])用於將url字符串轉為對象格式。該方法有兩個參數,第一個參數為url字符串,第二個為布爾值,可以不寫,表示是否也將query轉為對象 url.parse(url_str) //注意 以下代碼只能在node中運行

yuebanxiaoyequ_5b12c826c10bc 頭像

@yuebanxiaoyequ_5b12c826c10bc

昵稱 月半小夜曲

@xiejinrong

前端模塊化開發之ES Module

瞭解過Web前端開發的小夥伴應該知道,歷史上,JavaScript一直沒有自己模塊體系(module),無法將一個大程序拆分成互相依賴的小文件,再用簡單的方法拼裝起來。其他語言如java、python等都具備這項功能,唯獨Javascript沒有,在ES6之前,要想在前端做模塊化開發,必須依賴第三方框架來實現,如:requireJS與seaJS,requireJS支持的是AMD規範,seaJS支持

xiejinrong 頭像

@xiejinrong

昵稱 老謝

@yuzhihui

H5 頁面中實現跳轉到其他 APP

H5 頁面中實現跳轉到其他 APP 在 H5 頁面中跳轉到其他 APP,可以使用以下幾種方式: 1. URL Scheme(自定義協議) 許多 APP 都支持 URL Scheme 方式的跳轉,例如: a href="weixin://"打開微信/a a href="alipay://"打開支付寶/a a href="yourapp://path"打開自定義 APP/a 注意: 需要目標 A

yuzhihui 頭像

@yuzhihui

昵稱 飛仔FeiZai

@alienzhou

替代 webpack?一文帶你瞭解 snowpack 原理,你還學得動麼

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

alienzhou 頭像

@alienzhou

昵稱 alienzhou

@aser1989

前端視角看 HTTPS

最近用Docusaurus搭了一個個人網站,部署後看到瀏覽器地址欄上“不安全”三個字感覺特別辣眼,便不由自主的想起了HTTPS。回憶起自己在日常開發中遇到的一些與HTTPS相關的知識,忍不住想將這些年積累的一些細節和心得體會整理一下。 為什麼要使用HTTPS HTTPS的發展歷程是一段頗具趣味的歷史,充滿了技術創新與安全挑戰。作為前端開發者為什麼要使用HTTPS,難道HTTP不能用了嗎?當然不是,

aser1989 頭像

@aser1989

昵稱 ASER_1989

@smileZAZ

如何跨標籤頁通信

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 開篇小劇場:為什麼標籤頁要"聊天"? 想象你在網上商城: 標籤1:瀏覽商品頁 標籤2:開着購物車 當你在標籤1點擊"加入購物車",標籤2的購物車數字應該立即+1!這就是標籤頁通信的魔力啦!✨ 🎨 方案1:BroadCast Channel(對講機頻道) 🛠️ 方案2:Service Worker(隱形郵差) 📦 方案3

smileZAZ 頭像

@smileZAZ

昵稱 林恆

@longlong688

vscode Live Server插件問題修改

基於Windows11下Visual Studio Code中的Live Server插件使用過程中出現的問題與解決方法 本文字符約881個,閲讀需10分鐘 問題 Open a folder or workspace... (File - Open Folder) 這個是沒有打開文件夾 點擊這個後沒有啓動瀏覽器

longlong688 頭像

@longlong688

昵稱 longlong688

@johnsongh_5bd6ae333cae7

JavaScript模塊化標準

為什麼模塊化(Why) 如果你將項目拆分成小的單獨文件中,這樣開發軟件通常會很簡單,因為這通常會消除無法預知的相互影響(remove unexpected interaction),以及顯著降低了所要解決的問題的複雜度(complexity of the problem),並且可以在項目最初時,就簡潔地編寫小的項目(不一定是標準答案)。不幸的是,JavaScript 以往並沒有將此功能作為語言的核

@trueyann

使用vuex4.0完成兩個組件數據的雙向綁定(實現modules模塊化)

問題場景:在優化項目的交互體驗時,想實現在左側表單輸入數據,右側篩選條件組件同步顯示輸入的功能,第一時間想到使用vuex 由於vuex升級到了4.0,語法發生了較大的變化,首先查詢官方文檔 vuex官方文檔 看到項目結構引起了我的注意,考慮到後期管理項目能更加便利,使用modules勢在必行 在store目錄下新建modules文件夾,之後的module文件都放在這個文件夾

trueyann 頭像

@trueyann

昵稱 trueYann

@smileZAZ

B站首頁的 Banner 這麼好看,我讓你直接用到你的項目!

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 寫在前面 我最開始是用 Angular 去實現了B站的 Banner ,那時候還沒有人做這東西,可以看到下面那一長串 Bannet 圖片的第一個圖是好幾年以前的了。然後隨着逐步完善,在這幾年偶爾也看到有人發過這東西的實現方法。 但我為什麼要寫這篇文章?因為我打算用原生 JS 和三大框架都去實現一遍,以滿足所有人的需求

smileZAZ 頭像

@smileZAZ

昵稱 林恆

@lishisan

前端構建這十年

寫在前面 前端模塊化/構建工具從最開始的基於瀏覽器運行時加載的 RequireJs/Sea.js 到將所有資源組裝依賴打包 webpack/rollup/parcel的bundle類模塊化構建工具,再到現在的bundleless基於瀏覽器原生 ES 模塊的 snowpack/vite,前端的模塊化/構建工具發展到現在已經快 10 年了。 本文主要回顧 10 年間,前端模塊化/構建工具的發展歷程及

lishisan 頭像

@lishisan

昵稱 李十三

@smileZAZ

如何進行頁面前端監控

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 前端監控主要分三個方向 前端性能(用户體驗優化) 異常監控 業務指標跟 下面我來分別介紹三類指標如何獲取 1)前端性能指標: 一、用户體驗相關的: 頁面加載時間(Page Load Time) : 定義:從用户請求頁面到頁面完全加載的時間。

smileZAZ 頭像

@smileZAZ

昵稱 林恆

@smileZAZ

記錄---讓網頁像現實世界一樣“拿起來,放進去”

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 引言 2025年,我們早已習慣用手指滑動屏幕、拖動文件。而這一切流暢體驗的背後,HTML5 的拖拽(Drag and Drop)功能功不可沒。它讓網頁不再只是“點一點”,而是可以“拖一拖、放一放”,大大提升了交互的直觀性和用户體驗。 為什麼拖拽如此重要? 回想一下 iPad 為何能迅速風靡全球?一個重要原因就是它的操作“傻

smileZAZ 頭像

@smileZAZ

昵稱 林恆

@vivo_tech

Android模塊化開發實踐

一、前言 隨着業務的快速發展,現在的互聯網App越來越大,為了提高團隊開發效率,模塊化開發已經成為主流的開發模式。正好最近完成了vivo官網App業務模塊化改造的工作,所以本文就對模塊化開發模式進行一次全面的介紹,並總結模塊化改造經驗,幫助兄弟項目避坑。 二、什麼是模塊化開發 首先我們搞清兩個概念,Android客户端開發目前有兩種模式:單工程開發模式和模塊化開發模式。 單工程開發模式:早期業

vivo_tech 頭像

@vivo_tech

昵稱 vivo互聯網技術

@DingyLand

【D01】Django中實現帶進度條的倒計時功能(簡易版)

首先説明簡易版是隻有一個 倒計時 和一個 進度條,頁面加載後自動開始計時,下次計時需要手動刷新頁面。 後續會更新實現完整的倒計時功能的文章 前期準備 前端框架 你需要準備一些前端框架:Bootstrap4 和 jQuery 安裝方法請自行查閲官方文檔或教程 Bootstrap4:https://v4.bootcss.com/docs/getting

DingyLand 頭像

@DingyLand

昵稱 stu(dying)