tag Javascript

標籤
貢獻1,356
1136
06:37 AM · Oct 27 ,2025
tuzixiansen_63d4d65909d62 頭像 invalidnull 頭像 icecreamlj 頭像 lengxi_16 頭像 yayu 頭像 u_15469972 頭像 tanking 頭像 codesheep_pro 頭像 u_15943685 頭像 refanbanzhang 頭像 hightopo 頭像 u_17141077 頭像

@Javascript / 博客 RSS 訂閱

jump_and_jump 頭像

jump__jump - 利用 XState(有限狀態機) 編寫易於變更的代碼

目前來説，無論是 to c 業務,還是 to b 業務，對於前端開發者的要求越來越高，各種絢麗的視覺效果，複雜的業務邏輯層出不窮。針對於業務邏輯而言，貫穿後端業務和前端交互都有一個關鍵點 —— 狀態轉換。 當然了，這種代碼實現本身並不複雜，真正的難點在於如何快速的進行代碼的修改。 在實際開發項目的過程中，ETC 原則，即 Easier To Change，易於變更是非常重要的。為什麼解耦很好？ 為

有限狀態機 , fsm , 前端優化 , 代碼質量 , Javascript

收藏 評論

wisdomqq 頭像

阿秋_在路上 - 【進階篇】koa+Mysql的全棧之旅

背景  繼續上一篇【easy篇】前端到全棧從這裏開始完成對雲服務器的初步瞭解，以及nginx的配置，接下來是MySQL安裝，建表操作以及使用Node.js框架Koa進行簡單的數據增刪改查功能。過程比較長，但是按照下面步驟來就比較輕鬆了。 MySQL安裝  登錄雲服務器，進入linux控制枱，安裝執行以下命令行即可 //1.下載安裝 wget http://repo.mysql.com/

node.js , MySQL , koa.js , 後端 , Javascript

收藏 評論

yangxiansheng_5a1b9b93a3a44 頭像

羊先生 - 完整版移動端滑動事件封裝

touchEvent 基於Jquery擴展在移動端產生的事件，包含，單次觸摸事件，兩次觸摸事件，長按事件，滑屏事件，向上滑動事件，向下滑動事件，向左滑動事件，向右滑動事件 預覽 地址預覽 https://hangjob.github.io/touchEvent/index.html 事件類型 單次觸摸事件 $(el).tap tap: function(element, fn) {

移動端web , jquery , 前端 , html5 , Javascript

收藏 評論

jiangpengfei_5ecce944a3d8a 頭像

蔣鵬飛 - 手寫Koa.js源碼

用Node.js寫一個web服務器，我前面已經寫過兩篇文章了： 第一篇是不使用任何框架也能搭建一個web服務器，主要是熟悉Node.js原生API的使用：使用Node.js原生API寫一個web服務器 第二篇文章是看了Express的基本用法，更主要的是看了下他的源碼：手寫Express.js源碼 Express的源碼還是比較複雜的，自帶了路由處理和靜態資源支持等等功能，功能比較全面。與之

node.js , koa.js , 源碼分析 , 前端 , Javascript

收藏 評論

jibvxiz 頭像

吉古力 - 微前端是什麼，可以帶來什麼收益

轉自掘金原文《微前端究竟是什麼，可以帶來什麼收益》 本文將講解微前端誕生的背景，詳細解説微前端概念的緣由以及其深入理解，讀完本文，相信你對微前端有一個比較全面的認知，明白它可以解決您團隊以及整個企業什麼問題，帶來怎麼樣的收益。 一.背景 現在很多企業，基本在物理上進行了應用代碼隔離，實行單個應用單個庫，閉環部署更新測試環境、預發佈環境和正式環境。於是，我們的探討的是，基於不同應用不同庫並獨立部署的

前端框架 , 前端優化 , 前端設計 , 微前端 , Javascript

收藏 評論

beilunyang 頭像

悖論BeilunYang - 使用Workbox創建PWA應用

前言 最近公司項目迭代逐漸放緩，下班時間逐漸變早，所以本着漸進增加的理念，在下班後，將公司項目進行了一下PWA改造 為何要改造成PWA 用户需求。我們的用户有許多電腦小白，不想記網址，又不會使用瀏覽器的收藏功能。以前使用的同類軟件都有桌面版，有一種覺得桌面版比網頁版可靠，使用簡單的錯覺，曾多次在釘釘售後羣裏反映，如何將網頁保存至桌面，方便他下次直接在桌面打開 PWA是漸進式的，如果用户的瀏覽

pwa , webpack , 前端 , Javascript

收藏 評論

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

收藏 評論

lizeze 頭像

xx小枱燈 - 使用babel把es6語法轉換成es5

Babel 是什麼 Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換為向後兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。 Babel能用在哪裏 NodeJs 使用 npm 初始化項目 $ mkdir es6-to-es5 $ npm init -y 安裝Babel $ npm install --save-dev @ba

ecmascript-6 , node.js , babel7 , es5 , Javascript

收藏 評論

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

收藏 評論

kylebing 頭像

KyleBing - 寫了個網頁版的五筆跟打器：玫楓跟打器

玫楓跟打器 Roseo Maple Type Pad 線上地址 https://kylebing.cn/tools/typepad/ 截圖 前言 自己是個五筆愛好者，也一直在使用五筆，從 Windows 轉到 Mac 之後，也沒有有可用的跟打器，每回想練練打字了都需要打開 Windows 模擬器來打字。 一直一直想有個能在 macOS 上運行的跟打器。 最初是想自己用 swift

輸入法 , requirejs , 前端 , Javascript

收藏 評論

evilboy 頭像

瘋狂的技術宅 - 2020 年 Chrome 開發者峯會的亮點

2020 年的Chrome 開發者峯會和往年有所不同，今年是在線上召開的，每次談話大約十分鐘，討論規模更大。雖然我沒有在第一時間觀看會議的直播，但是看回放也不會錯過這些亮點。 所有的回放在這裏：https://developer.chrome.com/... 通過“Core Web Vitals”簡化了性能指標 我們都知道 Chrome 有大量的性能指標，可以用它們來跟蹤關於網站性能的所有內容。儘

chrome , pwa , Css , 前端 , Javascript

收藏 評論

stephentian 頭像

StephenTian - 2021 前端開發手冊

簡介 這是一份 2021 年前端開發手冊，列舉前端開發相關技術，提供相關技術的學習資源。下面的項目不用全部學習，可以選其中一些學習。 歡迎補充！項目地址：2021-frontend-handbook 目錄 HTML CSS JavaScript 前端框架 前端工程化 服務端渲染 SSR 靜態站點生成器 SSG TypeScript 用 JS 去做服務器端 桌面應用程序 El

frontend , 前端 , Javascript

收藏 評論

jump_and_jump 頭像

jump__jump - 聊聊不可變數據結構

三年前，我接觸了 Immutable 庫，體會到了不可變數據結構的利好。 Immutable 庫具有兩個最大的優勢: 不可修改以及結構共享。 不可修改(容易回溯，易於觀察。減少錯誤的發生) let obj = { a: 1 }; handleChange(obj); // 由於上面有 handleChange，無法確認 obj 此時的狀態 console.log(obj) 結構共享(

性能優化 , 開發工具 , 前端優化 , immutable-js , Javascript

收藏 評論

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

收藏 評論

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

收藏 評論

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

收藏 評論

ox1dp6ei 頭像

ox1dp6ei - 使用原生ES5封裝 call, apply, bind 等方法

直接上代碼，大家一看就明瞭 !DOCTYPEhtml htmllang="en" head metacharset="UTF-8" metahttp-equiv="X-UA-Compatible"content="IE=edge" metaname="viewport"content="width=device-width,initial-scale=1.0" titleDocument/

es5 , Javascript

收藏 評論

xiaolei_599661330c0cb 頭像

小磊 - Koa1技術分享

寫在前面 　　Koa使用了ES6規範的generator和異步編程是一個更輕量級Web開發的框架，Koa 的先天優勢在於 generator。由於是我個人的分享交流，所以Node基礎、ES6標準、Web開發基礎以及Koa的"Hello World"程序都不在討論，希望各位小夥伴提出意見和指導。 　　PS：Koa 內核中沒有捆綁任何中間件，但不用擔心，Koa 擁有極其強悍的拓展性，正文所有中間

koa2 , node.js , koa , koa.js , Javascript

收藏 評論

jackn 頭像

Jack_N - 前端進階（1）Web前端性能優化

前端進階（1）Web前端性能優化 Web前端性能優化, 不僅能夠改善站點的用户體驗，並且能夠節省相當的資源利用。下面將從1）服務器、2）html內容、3）css、 4）javascript、 5）圖片等幾方面介紹具體的優化操作。 1. 服務器優化 1.1. 使用內容分發網絡（CDN） 把網站內容分散到多個、處於不同地域位置的服務器上可以加快下載速度。 1.2. 服務器使用http2.0協議 Htt

前端優化 , Css , HTML , Javascript

收藏 評論

pingan8787 頭像

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

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

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

收藏 評論