如何判斷當前 js 代碼是運行在浏覽器還是node環境中 All In One-編程思維
如何判斷當前 js 代碼是運行在浏覽器還是node環境中 All In One globalThis // ✅✅✅ const env = globalThis.window ? 'js 運行在浏覽器環境' : 'js 運行 Node.js 環境'; console.log('js env =', env); console.log('js env =', globalThis.win
VUE3 之 全局組件與局部組件-編程思維
1. 概述 老話說的好：忍耐是一種策略，同時也是一種性格磨煉。 言歸正傳，今天我們來聊聊 VUE 的全局組件與局部組件。 2. 全局組件 2.1 不使用組件的寫法 <body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp(
js auto expand array All In One-編程思維
js auto expand array All In One rows 自動擴展 const rows = [ { "name": "總計", "ins_num_10k": 0, "natural_ins_num_ratio": null, "cost_amount_10k": 96058.5732011944, "all
VUE3 之 表單元素-編程思維
1. 概述 老話說的好：行動起來，原地觀望是沒有用的。 言歸正傳，今天我們來聊聊 VUE3 的 表單元素。 2. 表單元素 2.1 文本框與數據綁定 <body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ //
我的簡易2048小遊戲記錄整理-編程思維
前言 注：該篇記錄暫未實現過渡動畫以及移動端的上下左右操作 我的2048後續最新效果展示2048GAME (226yzy.com) 還有後續代碼我放在了我的Github上了226YZY/my2048game: 我的簡易2048小遊戲 (github.com) (本篇效果煩請自行根據代碼複現😂) 本篇記錄中的代碼是我根據我對2048的基本遊戲邏輯，嘗試通過html+css+原生js實現 由于個人水
JavaScript字符串對象轉JSON格式-編程思維
JavaScript字符串對象轉JSON格式 原始數據 { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series
VUE3 之 鍵盤事件-編程思維
1. 概述 老話說的好：甯願自己吃虧，也不讓他人吃虧。 言歸正傳，今天我們來聊聊 VUE3 的 鍵盤事件。 2. 鍵盤事件 2.1 敲擊任意鍵觸發事件 <body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ /
查收新年禮物丨DevEco Studio 3.0 Beta2發布，20個新變化詳解-編程思維
HUAWEI DevEco Studio是開發HarmonyOS應用和原子化服務的一站式集成開發環境（IDE），為開發者提供工程模闆創建、開發、編譯、調試、發布等功能。 2021年12月31日，新版本DevEco Studio 3.0 Beta2如期而至，快去升級吧： 在線升級工具：打開DevEco Studio，選擇“Help > Check for Updates”。 官網下載
fix img cors error All In One-編程思維
fix img cors error All In One function imageReceived() { let canvas = document.createElement("canvas"); let context = canvas.getContext("2d"); canvas.width = downloadedImg.width; canvas.heig
crypto.getRandomValues & Math.random All In One-編程思維
crypto.getRandomValues & Math.random All In One ArrayBufferView The Crypto.getRandomValues() method lets you get cryptographically strong random values. The array given as the parameter is fil
js Map All In One-編程思維
js Map All In One const map = new Map(); map.set(0, 1); map.set(1, 1); map.set(2, 3); map.set(3, 4); console.log('size =', map.size); for([key, value] of map) { console.log('key, value', key, va
Web 3D 技術 All In One-編程思維
Web 3D 技術 All In One WebGL / Canvas / WebVR / WebXR WebGL https://www.khronos.org/webgl/ https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API https://developer.mozilla.org/en-US/docs/Web/API/
web 前端熱修複方案 All In One-編程思維
web 前端熱修複方案 All In One Hot Fix / 熱修複 2015 年以來，移動開發領域對熱修複技術的讨論和分享越來越多，同時也陸續出現了一些不同的解決方案。 業内普遍共識是把不用重新發布新版本，不更新 App 自身安裝包，在用戶無感知的情況下，就可以對應用當前版本實現 bug 修複、部分功能修改的技術解決方案稱為熱修複 HotFix。 對比常規的開發流程而言，熱修複的開發流程顯
localStorage undefined bug All In One-編程思維
localStorage undefined bug All In One undefined ❌ localStorage.setItem('bug', JSON.stringify({k: undefined, v: 1})); null ✅ localStorage.setItem('bug', JSON.stringify({k: null, v: 1})); sol
web animation methods All In One-編程思維
web animation methods All In One web 動畫技術彙總 gif 動畫、css 動畫、svg 動畫、video 動畫、flash 動畫(已廢棄)、js 圖片動畫、js canvas 動畫 https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animat
parent.postMessage bug All In One-編程思維
parent.postMessage bug All In One parent.postMessage not working const sendScrollMessage = () => { const app = document.querySelector('#app-content'); const clientHeight = app.clientHei
你真的會用react hooks？看看eslint警告吧!(如何發請求、提升代碼性能等問題)-編程思維
前言 看過幾個react hooks 的項目，控制台上幾百條警告，大多是語法不規範，react hooks 使用有風險，也有項目直接沒開eslint。當然，這些項目肯定跑起來了，因為react自身或者其他的包，在編譯的時候彌補了一些缺陷，還有一些是不規範的警告，或者還沒運行到報錯的代碼。 在這，我想分享并解析一些react開發過程中，一些很常見的需求，以及正确的用法，至少也得做到控制台沒
自定義布局頁面的思路與實現-編程思維
前言 最近做了一個需求：自定義首頁。 用戶或運營可以自己修改首頁的布局，做到千人千面。 這個需求類似于當年的自定義QQ空間，不過怕是年輕一些的沒玩過這個東西。 所以你也可以簡單理解為是博客園的皮膚，隻是不能寫樣式和代碼，但是可以調整各個組件的布局。 明确需求 這并不是一個低代碼頁面設計器，不是給程序員用的。 隻是一個自定義布局的頁面而已，是面向客戶或者運營的。 如果遇到類似的需求，大家可以針對具
從零搭建react hooks項目(github有源代碼)-編程思維
前言 首先這是一個react17的項目，包含項目中常用的路由、狀态管理、less及全局變量配置、UI等等一系列的功能，開箱即用，是為了以後啟動項目方便，特地做的基礎框架，在這裡分享出來。 這裡寫一下背景，我最開始是node8的環境，因為react17需要至少node14的版本，我就直接升級到16了，關于node升級遇到的問題，我有另一篇文章專門羅列步驟和可能出現的問題及解決方案，這裡就不
react hooks 如何自定義組件（react函數組件的封裝）-編程思維
前言 這裡寫一下如何封裝可複用組件。首先技術棧 react hooks + props-type + jsx封裝純函數組件。類組件和typeScript在這不做讨論，大家别白跑一趟。 接下來會說一下封裝可複用組件的思路，比如一個新手應該怎麼去封裝，都需要有哪些東西。 然後說一些複雜組件需要的功能，比如閉合标簽内部dom怎麼處理，其實就是插槽功能，比如數據監聽，内部做一些業務