tag 前端

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

@前端 / 博客 RSS 訂閱

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

收藏 評論

hai2007 頭像

你好2007 - 理解prototype和__proto__（繼承與原型鏈）

從關係圖中可以看出來，ECMAScript中創建一個對象是通過new構造函數實現的，而本質上來説這個對象其實是以構造函數的屬性prototype指向的對象為基本模板的，因此新對象的__proto__屬性表明了自己來源於誰。 prototype 該屬性用來指向創建一個對象的基本模板，默認指向new構造函數，也可以修改，或者通過改屬性為新對象添加屬性。 需要注意的是，該屬性只有函數才有。 //構造函

prototype , 前端 , Javascript

收藏 評論

steven0812 頭像

張子溪 - 解決 Angular 項目中，報錯: ‘router-outlet’ is not a known element 的問題。

在 app.component.html頁面中添加 router-outlet/router-outlet 標籤後報錯： 解決： 在路由文件，即 app-routing.module.ts 中，添加上一句：exports: [RouterModule] 截圖如下： 即可解決 router-outlet 的報錯問題。 參考： https://stackoverflow.com/questions

angular2 , 前端

收藏 評論

alibabawenyujishu 頭像

阿里巴巴文娛技術 - 優酷質量保障系列(二）—客户端自動化測試基礎能力建設

文娛妹導讀 自動化測試能力建設過程中，自動化框架選型、框架設計核心和思路、自動化能力平台接入，是自動化測試能力建設過程中重要環節。文章分享優酷APP自動化測試能力建設過程中的經驗 本系列文章將陸續發佈，感興趣的朋友持續關注！ 前言 隨着移動端版本迭代的加快，快速測試，快速反饋已經是一個常態化的流程，週期內版本發佈頻率的增加，各項測試的時間正在急劇縮短，且迴歸性的任務不斷充斥當中，

工具 , 測試 , 移動端web , 自動化測試 , 前端

收藏 評論

nanian_5cd6881d3cc98 頭像

那年 - vue 使用computed報錯 .. was assigned to but it has no setter.

問題： a-radio @change="chooseOther" v-model="tempReadio"其他/a-radio computed: { tempReadio() { if (this.reasonValue == 7) { return true; } else { return false; }

vue.js , 雙向綁定 , computed , 前端 , Javascript

收藏 評論

ishy 頭像

ishy - vue使用wangeditor4.0版本，並實現編輯器內容雙向綁定

下載安裝 npm i wangeditor --save 封裝組件Editor 新建Vue組件Editor 初始化編輯器組件 template lang="html" div id="editor" /div /template script import E from 'wangeditor' export default { name:

vue.js , 編輯器 , 雙向綁定 , wangeditor , 前端

收藏 評論

ethanprocess 頭像

EthanProcess - 我是如何在 Vue 項目中做代碼分割的

通常為了開發效率，我們會使用 vue-cli 創建項目，這樣創建的項目默認情況下編譯是會對代碼進行分割的。但是如果是自行配置的 webpack 環境的話，還是很有必要熟悉代碼分割的相關知識的。 為什麼要做代碼分割 在配置 webpack 的過程中，很多時候我們的 webpack 入口只寫了一個 entry: '${sourceDir}/index.js’，默認情況下只會生成一個 bundle 文件

vue.js , 前端優化 , webpack , 前端

收藏 評論

user_cwhpnk0j 頭像

xizugogo - Vue響應式原理概述

1 MVVM模式 Model-View-ViewModel源自MVC模式，核心是ViewModel，ViewModel作為一個“中轉站”，對接Model層獲得並轉換數據使得數據易管理、便於View層使用，又對接View層進行雙向的數據綁定。MVVM框架利用ViewModel這一層幫助開發者們做好了之前jQuery時代低效的查找、操作DOM的工作。View最終展現的不僅是Model的數據，也是經過V

vue.js , mvvm , 原理 , 前端

收藏 評論

pingan8787 頭像

pingan8787 - 5個Chrome調試混合應用的技巧

對前端開發人員來説，Chrome 真是一個必備的開發工具，大到頁面展示，小到 BUG 調試/HTTP 抓包等，本文我將和大家分享自己做混合應用開發過程中經常用到的幾個調試技巧。 一、調試安卓應用 在進行混合應用開發過程中，經常需要在安卓應用中調試 H5 項目的代碼，這裏我們就需要了解安卓應用如何在 Chrome 上進行調試。 接下來簡單介紹一下，希望大家還是能實際進行調試看看： 1. 準備工

瀏覽器 , hybrid-app , 調試技巧 , 前端 , Javascript

收藏 評論

yangxiansheng_5a1b9b93a3a44 頭像

羊先生 - Vue適配PC+大屏，手機+ipad適配

PC+大屏適配 可適配 1400px以上的屏幕 查看演示 項目地址 設置設計稿-轉換rem 我們的設計稿是3840px寬度，所以widthOfDesignLayout設置3840 module.exports = { plugins: { autoprefixer: {}, "@njleonzhang/postcss-px-to-rem": {

vue.js , 移動端web , 前端 , html5

收藏 評論

trueyann 頭像

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

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

vue.js , vuex , 模塊化開發 , 前端

收藏 評論

bianchengsanmei 頭像

編程三昧 - WebSocket 對象簡介

WebSockets 是一種先進的技術。它可以在用户的瀏覽器和服務器之間打開交互式通信會話。使用此API，您可以向服務器發送消息並接收事件驅動的響應，而無需通過輪詢服務器的方式以獲得響應。 何為 WebSocket 對象？ WebSocket 對象是 WebSockets 的接口之一，用於連接WebSocket服務器的主要接口，之後可以在這個連接上發送 和接受數據。 WebSocket 對

websocket , 技能表 , 前端優化 , 前端

收藏 評論

wangzc996 頭像

霧島聽風 - 如何在angular中使用vue

將Vue組件包裝為本Web組件。 由於Angular支持使用自定義Web組件，因此能夠使用Vue組件（包裝為Web組件）。 對於Angular，如果自定義Web組件是由Vue生成的，那麼它就沒有區別（對於所有Angular都知道，它們可以是本機HTML元素） 我們使用vue-custom-element來來進行包裝 demo地址：這裏使用element-ui作為組件導入angular使用

vue.js , angular4 , 前端

收藏 評論

bianchengsanmei 頭像

編程三昧 - Webpack 簡介

構建其實是工程化、自動化思想在前端開發中的體現，把一系列流程用代碼去實現，讓代碼自動化地執行這一系列複雜的流程。 構建給前端開發注入了更大的活力，解放了我們的生產力。 Webpack 憑藉強大的功能與良好的使用體驗，已經成為目前最流行，社區最活躍的構建工具，是現代 Web 開發必須掌握的技能之一。 背景 在當下的前端環境裏，各種框架和工具層出不窮，比如 React、Vue、Angular 等，極大

構建工具 , 前端構建 , 工程化 , webpack , 前端

收藏 評論

kkocdko 頭像

kkocdko - 3 KB 的博客首頁，我是如何做到的？

這並不是一篇網絡上氾濫的“前端體積優化”文章。 百尺竿頭，更進一步！本文以我的博客為例，介紹極限控制頁面體積的奇技淫巧。 成果預覽 眼見為實，本人博客首頁 的網絡傳輸總體積為 2.6 KB。 本人的博客 Repo 在 kblog - GitHub，喜歡就給個 Star 唄~ 需求精簡 平淡無奇的頁面，體積再小，也不足為奇。我需要： 單頁面（SPA）。 使用 Material

material-design , Css , spa , 前端 , Javascript

收藏 評論

nulidexiaocongmang 頭像

MangoGoing - koa實踐總結

什麼是koa？ koa是Express的下一代基於Node.js的web框架。使用 koa 編寫 web 應用，通過組合不同的 generator，可以免除重複繁瑣的回調函數嵌套，並極大地提升常用錯誤處理效率。Koa 不在內核方法中綁定任何中間件，它僅僅提供了一個輕量優雅的函數庫，使得編寫 Web 應用和API變得得心應手。 Koa能幹什麼？ 主要用途 網站（比如cnode這樣的論壇） ap

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

收藏 評論

tonyyoung 頭像

拖泥羊 - 前端工程化4：如何去做js模塊化開發？ES Modules/CommonJS有什麼區別？

1. 如何去做js模塊化開發 = 模塊化標準 + 加載器 1.1、我們説討論的僅限於javascript代碼的模塊化，如果要涉及到所有文件的模塊化請使用webpack。 1.2、那麼js的模塊化可以用一句話概括：模塊化標準 + 加載器；本文主要介紹模塊化標準。 2. 幾種模塊化標準對比： CommonJS 1、以同步的模式加載模塊：通常在Nodejs環境使用，不適合瀏覽器 1. 因為服務器讀

模塊化 , commonjs , es-modules , 前端 , Javascript

收藏 評論

moyuyaowan 頭像

魔芋藥丸 - 【招商銀行-掌上生活-運行H5頁面】JS-SDK及其特有schema

掌上生活是一個比較先進的銀行App，不能單純當做瀏覽器來處理，其有專門提供的JS-SDK供調用 JS-SDK: https://open.cmbchina.com/Pla... 如果不想引入這個庫的話，有一些細微但重要的功能可以直接仿寫，比如判斷是否在掌上生活中，就是通過正則匹配UA判斷的 判斷是否在掌上生活中：/cmblife/.test(ua); 在該App內想要喚起美團，也不能直接使用

hybrid-app , 前端

收藏 評論

2021_60e2de6ea45f7 頭像

前端知識搬運工 - viewport深入理解和使用

什麼是viewport ? viewport是用户網頁的可視區域，也可叫做視區。手機瀏覽器是把頁面放在一個虛擬的窗口(viewport)中，通常這個虛擬的窗口比屏幕寬，這樣就不用把網頁擠到很小的窗口中，用户可以通過平移和縮放來看網頁的不同部分。 下圖為常見一些設備瀏覽器默認viewport寬度： css中的1px不等於設備的1px 在css中經常使用px做單位，PC端瀏覽器中的1px往往都

移動端web , 移動端適配 , 前端

收藏 評論