@前端

動態 列表
@shawnphang

如何優雅地編寫一個高逼格的JS插件?

在一個風和日麗的早晨,我正悠閒地喝着Coffe,突然領導向我走來,我趕緊熟練地切出VSCode,淡定自若地問:領導,什麼事?領導拍了拍我的肩膀:你上次封裝的方法同事跟我反饋使用起來很不錯啊,你不如做成JS插件給大家用吧。我放下了手中的馬克杯,甩了一下眼前僅剩的幾根劉海:沒問題啊,小Case!隨即開始摸魚.... 原型鏈寫法 要開始編寫插件就得先了解JS模塊化,早期的模塊化是利用了函數自執行來實現的

shawnphang 頭像

@shawnphang

昵稱 茶無味的一天

@jingdongkeji

極致性能優化:前端SSR渲染利器Qwik.js

引言 前端性能已成為網站和應用成功的關鍵要素之一。用户期望快速加載的頁面和流暢的交互,而前端框架的選擇對於實現這些目標至關重要。然而,傳統的前端框架在某些情況下可能面臨性能挑戰且存在技術壁壘。 在這個充滿挑戰的背景下,我們引入了 Qwik.js 框架。Qwik.js 不僅是一個前端框架,更是一種前端性能的終極解決方案。它不僅提供了卓越的性能,還以其獨特的特點和優勢脱穎而出。 讓我們一起深入探索 Q

jingdongkeji 頭像

@jingdongkeji

昵稱 京東雲技術團隊

@wmbuke

jQuery.js - 前端必備的Javascript庫

作者:WangMin 格言:努力做好自己喜歡的每一件事 jQuery.js 是什麼? jQuery是一個快速簡潔、免費開源易用的JavaScript框架,倡導寫更少的代碼,做更多的事情 。它封裝JavaScript常用的功能代碼,提供了一種簡便的JavaScript設計模式,以及我們開發中常用到的操作DOM的API,優化HTML文檔操作、事件處理、動畫設計和Ajax交互,使更多的網

wmbuke 頭像

@wmbuke

昵稱 汪末末

@it1042290135

js頁面當中沒有寫回車事件,但是有回車效果

前兩天遇到一個問題,研究了我很差事件。問題如下: 頁面只有一個文本框,沒有寫任何回車事件,但是點回車的時候,就會觸發回車,回傳頁面。 於是各種google,終於有了結果: 如果表單裏有一個type=”submit”的按鈕,回車鍵生效。 如果表單裏只有一個type=”text”的input,不管按鈕是什麼type,回車鍵生效。 如果按鈕不是用input,而是用button,並且沒有加type

it1042290135 頭像

@it1042290135

昵稱 —阿峯—

@smileZAZ

如何判斷一個元素是否在可視區域中?

一、用途 可視區域即我們瀏覽網頁的設備肉眼可見的區域,如下圖 在日常開發中,我們經常需要判斷目標元素是否在視窗之內或者和視窗的距離小於一個值(例如 100 px),從而實現一些常用的功能,例如: 圖片的懶加載 列表的無限滾動 計算廣告元素的曝光情況 可點擊鏈接的預加載 二、實現方式 判斷一個元素是否在可視區域,我們常用的有三種辦法: offsetTop、scrollTop

smileZAZ 頭像

@smileZAZ

昵稱 林恆

@smileZAZ

記錄:瀑布流最佳實現方案

傳統實現方式 當前文章的gif文件較大,加載的時長可能較久 這裏我拿小紅書的首頁作為分析演示 可以看到他們的實現方式是傳統做法,把每個元素通過獲取尺寸,然後算出left、top的排版位置,最後在每個元素上設置偏移值,思路沒什麼好説的,就是算元素座標。那麼這種做法有什麼缺點?請看下面這張圖的操作 容器尺寸每發生一次變化,容器內部所有節點都需要更新一次樣式設置,當頁面元素

smileZAZ 頭像

@smileZAZ

昵稱 林恆

@xw-01

jQuery

一、JQuery瞭解 1 .原生JS的問題 我們會發現原生的JS編程很麻煩,尤其在兼容性的問題 選擇元素,權限兼容的只有getElementById和getElementsByTagName;其他方法都有兼容問題 樣式操作也有兼容問題,還得我們自己封裝,封裝getStyle() 動畫也麻煩,也得自己封裝,封裝animation() HTML節點操作也挺麻煩的 JS裏面麻煩的都是和DOM編程有關的

xw-01 頭像

@xw-01

昵稱 二價亞鐵

@kongsq

jQuery(六)jQuery實現瀑布分頁

一、瀑布流分頁案例分析 1.1) 功能分析:   鼠標下拉,加載分頁數據(10條) ,如下圖: 1.2) 如何確定當前顯示的數據已經瀏覽完畢? 公式:(滾動條距底部的距離 + 滾動條上下滾動的距離 + 當前窗口的高度) = 當前文檔的高度   舉例:   - 當前文檔高度:存儲10條數據,100px。   - 滾動條距底部的距離:1px。   - 當前

kongsq 頭像

@kongsq

昵稱 努力--堅持

@kitty-38

JavaScript的常用庫 —— jQuery

jQuery 用來更加方便地去控制前端的HTML標籤和CSS屬性。 使用方式: 1. 直接在head元素中添加: script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"/script 2. 按jQuery官網提示下載。 https://jquery.com/download/ 選擇器: $

kitty-38 頭像

@kitty-38

昵稱 kitty又困了

@yulong1992

漸變頁面

!DOCTYPE html html lang="en" head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titleRadial Gradient Background/title /head body style="backg

yulong1992 頭像

@yulong1992

昵稱 程序員玉龍

@tanggoahead

jQuery Ajax 實用方法精要

大家好,歡迎來到程序視點!我是你們的老朋友.小二! jQuery Ajax 實用方法精要 核心概述 本文系統介紹了jQuery框架中Ajax相關方法的使用,從簡單封裝到底層實現,全面解析瞭如何利用jQuery簡化異步請求開發。 主要Ajax方法 1. 便捷封裝方法 **load()**:加載遠程HTML並插入DOM 自動GE

tanggoahead 頭像

@tanggoahead

昵稱 程序視點

@linx

Web前端入門第 83 問:JavaScript localStorage 有大小限制嗎?溢出會怎樣?

本地存儲除了 Cookie 外,還有 localStorage 和 sessionStorage,本文一探 localStorage。 localStorage 此 API 存入的數據會 永久 保存在瀏覽器中,除非用户手動刪除。 localStorage 能用於同一瀏覽器同一域名跨標籤頁通信。 同一瀏覽器無痕模式和非無痕模式下,localStorage 存儲的數據無法互通,且無痕模式存入的數據在瀏

linx 頭像

@linx

昵稱 前端路引

@codechen8848

格式轉換全能王!一個開源自託管的文件轉換神器

大家好,我是 Java陳序員。 在日常工作生活中,常常需要對一些文件進行轉換,如不同格式的照片進行轉換,還有 Office 各文檔之間的轉換等。但常常找不到趁手的工具,使用在線工具又擔心隱私泄漏。 今天,給大家介紹一個開源自託管的文件轉換神器,支持超多種文件格式轉換,可以説是格式轉換全能王! 關注微信公眾號:【Java陳序員】,獲取開源項目分享、AI副業分享、超200本經典計算機電子書籍等。

codechen8848 頭像

@codechen8848

昵稱 codechen8848

@linx

Web前端入門第 84 問:JavaScript sessionStorage 那些容易踩坑的地方

sessionStorage 與 localStorage 差不多可以算作一對兄弟,它倆的暴露的 API 方法一模一樣。 但兩者也有不同點: 1、sessionStorage 存入的數據在頁面關閉後,會自動清除。 2、相同 URL 的每個 tab 頁籤的 sessionStorage 會被隔離,互不影響。也就是説相同的鏈接,在 A 標籤頁打開和在 B 標籤打開,A 寫入的 sessionSt

linx 頭像

@linx

昵稱 前端路引

@software-Development

如何在DHTMLX Scheduler中實現帶拖拽的任務待辦區(Backlog)

為了滿足DHTMLX Scheduler用户的實際業務需求,本文將展示如何在 JavaScript 日程組件中實現“帶拖拽的任務待辦區(Backlog)”。這一功能讓用户可以像物業管理系統那樣,通過簡單的拖拽操作將任務分配到時間軸上的合適位置,大幅提升排程效率與體驗。 DHTMLX Scheduler 試用下載,請聯繫DHTMLX官方授權代理商慧都科技 本文將帶您一步步實現這一功能。 使用場

software-Development 頭像

@software-Development

昵稱 IT開發者筆記

@software-Development

JavaScript數據表格方案AG Grid主題定製新升級:Figma 設計系統全面打通設計與開發

在最新版本的Figma 設計系統中,所有變量已與AG GridTheming API 參數實現1:1 映射。這意味着設計師在 Figma 中的修改能夠無縫傳遞到開發代碼,徹底消除溝通障礙。更重要的是,藉助自動化導出與轉換工具,團隊可以一鍵生成生產可用的AG Grid自定義主題,顯著提升交付效率。 AG Grid最新版下載,請聯繫AG Grid中國區合作伙伴慧都科技 1. 設計與開發的橋樑:變量

software-Development 頭像

@software-Development

昵稱 IT開發者筆記

@linx

Web前端入門第 85 問:JavaScript 一個簡單的 IndexedDB 數據庫入門示例

在前端風風雨雨的混了多年,從沒在項目中實際使用過 IndexedDB 這個瀏覽器端的數據庫,所以今天就摸了下 MDN 的後門,寫一個簡單的入門示例。 頁面大概長這樣: 源碼: 以下代碼包含了一個數據庫所有的 CRUD (增刪改查)操作。 div button id="js_add_btn"添加書籍/button /div div input type="text" name="" id=

linx 頭像

@linx

昵稱 前端路引

@smileZAZ

記錄---前端實現倒計時為什麼會存在誤差呢

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 1. 前端倒計時為何不準? 1.1 JavaScript的“單線程陷阱” JavaScript是單線程語言,所有任務(包括定時器回調)都在同一個線程中排隊執行。當主線程被耗時任務(如複雜計算、網絡請求)阻塞時,定時器回調只能“望隊興嘆”,導致實際執行時間遠晚於預期時間。就像一家只有一個收銀台的超市,即使定時

smileZAZ 頭像

@smileZAZ

昵稱 林恆

@smileZAZ

記錄---一篇文了解qiankun的代碼隔離原理

🧑‍💻 寫在開頭 點贊 + 收藏 === 學會🤣🤣🤣 隨着前端業務的快速發展,微前端架構已經被廣泛採用,其中qiankun作為主流解決方案也越來越受到關注。前幾天面試時,我就被問到了一個高頻問題:qiankun 是如何實現 JS 和 CSS 隔離的? qiankun 的JS 沙箱 qiankun 的微前端場景是:主應用加載多個子應用,不同子應用可能依賴不同版本的庫、全

smileZAZ 頭像

@smileZAZ

昵稱 林恆

@linx

Web前端入門第 86 問:JavaScript 中的 Web Worker 為什麼能提升代碼性能?

最初的 JS 執行代碼都是一條線執行到底,當遇到比較耗時的操作時,比如大數組循環運算,就會導致頁面卡着,就像假死一樣。就像一個人在廚房燒菜一樣,需要依次完成切菜、炒菜、裝盤這些步驟,此過程中沒辦法同時做其他事情,必須按順序執行每一個步驟。 Web Worker 賦予了 JS 分配任務的能力,在遇到複雜的計算型任務時,比如 canvas 圖形圖像處理(添加濾鏡、矩陣變換等),此類不依賴 DOM 操作

linx 頭像

@linx

昵稱 前端路引

@software-Development

JavaScript數據網格方案AG Grid 34.2 發佈:更靈活的數據結構、更流暢的大數據交互與全新 UI 體驗

近日,JavaScript 數據表格方案AG Grid版本,本次更新為開發者帶來了更靈活的數據分組方式、更順暢的大數據集交互體驗,以及更直觀的 UI 提示與操作反饋。 AG Grid最新版下載,請聯繫AG Grid中國區合作伙伴慧都科技 以下為本次更新的核心亮點: 核心功能更新 1. 日期與時間分組 支持基於日期的層級分組(如日、周、月、季度、年等),開發者可通過rowGroupingHiera

software-Development 頭像

@software-Development

昵稱 IT開發者筆記