博客 RSS 訂閱

tosmile 頭像

浪遏飛舟 - 談一談組件化

前言 今天前端生態裏面，React、Angular和Vue三分天下。雖然這三個框架的定位各有不同，但是它們有一個核心的共同點，那就是提供了組件化的能力。W3C也有Web Component的相關草案，也是為了提供組件化能力。今天我們就來聊聊組件化是什麼，以及它為什麼這麼重要。 正文 其實組件化思想是一種前端技術非常自然的延伸，如果你使用過HTML，相信你一定有過“我要是能定義一個標籤就好了”這樣的

封裝 , extjs , component , 組件化 , 複用

收藏 評論

viewweiwu 頭像

viewweiwu - 100 左右實現查詢表格？真的假的？一起來體驗一下 Amiya 的魅力。

“老哥，聽説你寫的頁面挺多的，我這兒有一個頁面，你覺得你需要多少代碼？” “我看看，也還行吧，不就是個查詢表格嘛，現在大家都用 ProComponent 了，用那個寫一下很快的。我想想，差不多 200 行左右就可以了吧。” “那個呀，我知道，官方的二次封裝組件庫，200 行就可以了嗎？嗯，可以。等等，你説的代碼是否包含了操作按鈕？” “操作按鈕？是指你圖上的 【新增】【詳情】這些按鈕嗎？” “是

react , 二次開發 , ant-design , component , 前端

收藏 評論

mihuartuanr 頭像

米花兒團兒 - 手把手創建Vue3組件庫

動機 當市面上主流的組件庫不能滿足我們業務需求的時候，那麼我們就有必要開發一套屬於自己團隊的組件庫。 環境 開發環境： vue 3.0 vue/cli 4.5.13 nodeJs 12.16.3 npm 6.14.4 步驟 創建項目 使用 vue-cli 創建一個 vue3 項目，假設項目名為 custom-npm-ui $ vue create custom-npm-ui 手動選擇

library , component , vue3 , storybook , npm

收藏 評論

mihuartuanr 頭像

米花兒團兒 - Vitepress編寫組件文檔

快速開始 安裝依賴 mkdir projectName路徑下 cd projectName npm init -y npm i -D vitepress pkg#scripts "scripts": { "docs:dev": "vitepress dev docs", "docs:build": "vitepress build docs", "docs:serve"

vite , component , vue3 , vuepress , storybook

收藏 評論

jsoncode 頭像

jsoncode - 在react中基於ant-design，封裝一箇中文輸入框,提高onchange性能

1 antd中，input組件在觸發onChange時，如果是中文輸入模式，會頻繁被觸發，導致頁面性能降低。尤其是在onChange時需要實時搜索的情況。 2 在mac設備下，如果在onChange中使用value.replace(/\s/g,''/), 會出現無法輸入中文的問題。優化之後，可以正常輸入。 默認情況下的Input組件： 優化之後的ChineseInput 調用方式：

input , react , antd , component

收藏 評論

invalidnull 頭像

註銷 - 關於 Angular 應用 Components 和 Directives 的實例化問題

同 Angular Module 不同，Angular Components 和 Directives 要實例化多次，每個出現在 HTML template 中的 markup 都會對應一次實例化。 此外，這些項的作用域也限定在它們被導入的 NgModule中，以防止兩個組件使用相同的選擇器時發生命名衝突。由於依賴注入(DI)行為的這種差異，需要區分一個包含組件和指令的 NgModule 和一個包

angular , component , 前端 , html5 , Javascript

收藏 評論

woxiaomaoshihuaihuai 頭像

phoenixhg - vue動態組件綁定動態屬性和方法的小tips

當使用多 tab 內容頁時，動態組件是一件非常好用的利器。但是循環動態組件會有個問題，那就是不同組件綁定不同的屬性值和方法，全部寫在組件內固然是一種方法，就是不方便管理和查看，所以以下是單獨聲明的技巧小 tips。 切換的tabs常量 const TABS = [ { label: 'tab1', compo: 'RankingList', props: [

vue.js , computed , component , 前端 , Javascript

收藏 評論

wei4118268_5df1ce05d1877 頭像

wei4118268 - [vue-cli3/element-plus] 從菜單渲染淺談動態渲染Vue組件的問題

1. 關於Element-plus的菜單渲染問題 跨過了Element-UI，終於來到了Element-plus。又回到了一個老問題，menu的渲染。 創建一個menu數組，利用v-for來渲染數組，生成menu，非常常規的操作。但是操作的過程中，出現了一個小問題，就是關於icon的渲染。 我們知道，在Element-plus中，渲染一個帶圖標的菜單項，是這麼搞的： el-menu-i

vue-cli3 , component , icon , element-plus , 前端

收藏 評論

zhipanyun 頭像

小盼田 - React 如何區分 Class 和 Function？

當我們要渲染一個組件時，通常並不需要關心它是如何定義（是Class還是Function）： function Greeting() { return pHello/p; } class Greeting extends React.Component { render() { return pHello/p; } 使用 // 是類還是函數 —— 無所謂 Greeting /

react , prototype , component , class

收藏 評論

qifengliao_5e7f5b20ee3bd 頭像

起風了 - React.PureComponent深入瞭解機制及其原理

起因 用React.PureComponent時，更新state裏面的count用的方式是++this.state.count，但是意外的導致組件沒有重新render（本人用Hook組件較多，所以感到很疑惑） import React from 'react'; import { Button } from 'antd-mobile'; class DemoChildClass extends

react , setstate , component

收藏 評論

jihu_gitlab 頭像

極狐GitLab - 極狐GitLab 企業級 CI/CD 規模化落地實踐指南（一）

業界已經達成共識：CI/CD 是落地實踐 DevOps 的重要手段，其本質是將軟件交付流程中的步驟自動化運行起來，從而提高軟件交付效率。隨着企業規模擴大（人員增加、產品增多等），高效構建 CI/CD 成為研發效能提升的關鍵。 極狐GitLab CI 內置於極狐GitLab 一體化平台，提供開箱即用的 CI/CD 能力，也是受眾多用户喜愛的 CI 工具之一。極狐GitLab CI 獨特的設計機制和企

devops , component , gitlab , cicd , pipeline

收藏 評論

zxl20070701 頭像

zxl20070701 - 從零開始搭建 Vue3 組件庫開發環境

搭建開發環境 Vite初始化 新建一個空的文件夾，比如叫 Vue3UI ，然後使用命令行在此文件夾下使用npm初始化： npm init 回車後，我們再安裝vite（我們這裏選擇使用Vite進行打包，使用別的也類似）： npm install --save-dev vite 根目錄創建 index.html 文件，裏面內容如下： !DOCTYPE html html lang="zh-cn"

vue.js , vite , component , 前端 , ui

收藏 評論

icodewalker 頭像

信碼由繮 - Spring框架中的Component與Bean註解

Spring Boot 中的 @Bean 與 @Component ![]( https://pic4.zhimg.com/v2-f957e9ec5412c87a66ccb021410eaae9_14...) Spring 的 @Component 和 @Bean 註解的關鍵區別在於：@Bean 註解可用於暴露您自己編寫的 JavaBeans，而 @Component 註解可用於

spring , component , JAVA , bean

收藏 評論

guangmingleiluodetouyingyi_bccdlf 頭像

光明磊落的投影儀 - 如何搭建CDN服務器？

為什麼需要CDN？ 當用户訪問你的網站時，如果服務器距離較遠，加載圖片或視頻就會變慢。CDN（內容分發網絡）通過在全球多地部署緩存服務器，讓用户從最近的節點獲取數據。就像在多個便利店儲備商品，顧客不需要每次都跑回總倉庫取貨。 第一步：硬件與網絡準備 關鍵原則：匹配你的用户規模 小型站點（日訪問量1萬）：普通服務器即可滿足 中型服務（1萬~10萬訪問量）：需要專業級配置 大型平台（10萬訪問

服務器配置 , 運維 , cdn

收藏 評論

cloudimagine 頭像

CloudImagine - 實戰揭秘｜魔搭社區 + 阿里雲邊緣雲 ENS，快速部署大模型的落地實踐

一種高效、便捷的部署方式。 隨着大模型技術的快速發展，業界的關注點正逐步從模型訓練往模型推理轉變。這一轉變不僅反映了大模型在實際業務中的廣泛應用需求，也體現了技術優化和工程化落地的趨勢。 魔搭社區（ModelScope）作為開源大模型的聚集地，結合阿里雲邊緣雲 ENS ，提供了一種高效、便捷的部署方式。通過按需付費和彈性伸縮，開發者可以快速部署和使用大模型，享受雲計算的便利。本文介紹了魔搭社

雲計算 , 邊緣計算 , cdn , 安全 , 大模型

收藏 評論

shimianfeixing_65812a5190e2b 頭像

德迅雲安全_初啓 - 網站被ddos怎麼辦！網站被sql入侵怎麼辦！如何免費接入網站防護！

網站被ddos怎麼辦！網站被sql入侵怎麼辦！ 在互聯網環境中，網站面臨的安全威脅日益增多，其中DDoS（分佈式拒絕服務）攻擊和SQL注入攻擊是兩種常見而具有破壞力的攻擊方式。為了保護網站的安全，必須採取有效的應對策略和防護措施。以下是詳細的處理步驟和預防方法。 DDoS攻擊的特徵 DDoS攻擊通過發送大量惡意流量使目標網站癱瘓。攻擊者往往使用多個受感染的計算機（botnets）同時

cdn

收藏 評論

aigoto 頭像

逐夢AI - 免費騰訊雲 EdgeOne 深度測評：下一代 CDN 的加速與防護實戰體驗

騰訊雲 EdgeOne 深度測評：下一代 CDN 的加速與防護實戰體驗 一、背景與測試環境 作為一名個人站長，我長期運營着一個導航站。由於服務器位於香港，配置為 2C2G5M，再加上域名來自海外註冊商，站點在不使用加速服務時訪問速度明顯偏慢。因此，CDN 一直是我站點運行必不可少的環節。 此前我也使用過其他雲廠商的傳統 CDN，整體體驗在訪問速度方面尚可，但在防護能力和可運維性上表現一般。最近了解

cdn

收藏 評論

yqyx36 頭像

雲輕雨細 - SCDN比傳統CDN好在哪？安全+加速二合一

本文系轉載，轉載鏈接：SCDN比傳統CDN好在哪？安全+加速二合一 前言 做線上業務的人，多半遇到過這些糟心事兒：電商大促時網站卡到付款按鈕點不動，遊戲剛開服就被攻擊到掉線，甚至辛苦做的網站被注入惡意代碼。這些問題，本質上是“內容傳得慢”和“安全沒保障”的雙重痛點。而SCDN防禦服務器，就像給業務裝了“加速引擎+安全盾牌”，既讓用户訪問更快，又能擋住各種惡意攻擊。本文就拆解SCDN的“過人之處”，

安全防護 , 加速器 , cdn

收藏 評論

yqyx36 頭像

雲輕雨細 - 提升網站性能的10個CDN配置優化技巧

本文系轉載，轉載鏈接：提升網站性能的10個CDN配置優化技巧 在數字化時代，內容分發網絡（CDN）已成為全球網站加速的核心技術。通過智能分配節點資源，CDN不僅能將頁面加載速度提升40%-60%（根據Akamai研究報告），更能有效降低服務器帶寬成本。本文將深入解析10個經過驗證的CDN配置策略，幫助技術團隊最大化網絡加速效果。 一、智能選擇CDN服務商的關鍵指標 1.全球節點覆蓋質量 優先選

cdn

收藏 評論

wanshoujidekafei 頭像

德訊雲安全如意 - 免費CDN和高防CDN的區別

在互聯網時代，網站的訪問速度和安全性直接影響用户體驗和業務成敗。CDN（內容分發網絡）與高防CDN作為提升網站性能和抵禦網絡攻擊的關鍵工具，已成為眾多企業的必備之選。 但兩者之間有什麼區別？企業又該如何選擇？ 一、免費的CDN 與高防 CDN 的基本定義與區別 免費的CDN（內容分發網絡） 是一種基礎性的網絡服務，旨在通過在全球分佈的節點上緩存網站內容（如圖片、視頻、CSS文件等），縮短用户訪問距

cdn

收藏 評論

yqyx36 頭像

雲輕雨細 - 網站安全防護入門：CDN的作用與用法

前言 “明者防禍於未萌，智者圖患於將來”，在網絡世界裏，網站就像我們在線上的“店鋪”，一旦遭遇攻擊，數據泄露、頁面癱瘓等問題會直接影響業務，甚至暴露自己的個人信息！ 而CDN，就是我們網站安全的“得力幫手”。今天就講講CDN以及它如何保護的網站安全。 一、為什麼要重視網站安全？別等“出事”才後悔 可能有人覺得“我的網站規模小，沒人會攻擊”，但實際上，網絡攻擊從不“挑大小”。小到個人博客被植入惡意代

網絡安全 , 雲服務器 , cdn

收藏 評論

invalidnull 頭像

註銷 - 使用瀏覽器的 Local Storage 真的安全嗎？

LocalStorage 是一個 HTML5 網絡存儲對象，用於將數據存儲在客户端——即本地，在用户的計算機上。 本地存儲的數據沒有到期日期，並且會一直存在，直到被刪除。 （相比之下，會話存儲是另一個 HTML5 網絡存儲 API，它會在瀏覽器關閉時刪除存儲的數據。） 本地存儲是純 JavaScript。 同樣，雖然它仍然在用户的設備上生成純文本文檔，但本地存儲也允許存儲多達 5MB 的數據（與

react , vue.js , localstorage , 前端 , Javascript

收藏 評論

susuhhhhhh 頭像

用户bPcSPjP - 微信小程序實現歷史搜索功能（h5同理）

1.實現效果 2.實現原理 將數據存在storage中。 wx.setStorageSync('search_history', JSON.stringify(this.data.list)) 取數組前15條。 if (wx.getStorageSync('search_history') ){ this.setData({ list:JSON.parse(wx.get

小程序 , localstorage , 緩存 , storage , 前端

收藏 評論

chenxiang_594a1cea112c2 頭像

阿古達木 - ExpiredStorage-給localstroage增加超時功能 源碼解讀

https://www.npmjs.com/package... 這個庫拓展了localStroage。在設置item的時候，會另外再設置一個key用來存儲過期時間。當在取數據的時候判斷是否過期並且remove元素。 用法 expiredStorage = new ExpiredStorage(); // 60秒後過期 expiredStorage.setItem("test", "fo

localstorage , 前端 , Javascript

收藏 評論