vue數據響應式的原理（通俗易懂）附源碼
通言：以前都是看網上別人的關於vue數據響應式原理理解，都是長篇大論的，不是很好理解，不能有效概括。直到學習了某位老師的課程我恍然大悟。得出結論：數據響應式就是指數據的改變以後通知函數的執行。 講一下實現的邏輯過程： 首先 js代碼: var user = { name: '合約路', birth: '2002-5-7', }; // 顯示姓氏 function show
昵稱 陽哥
@Javascript
貢獻者369
粉絲0
貢獻者
@Javascript
動態 列表
Nuxt.js實戰：Vue.js的服務器端渲染框架
創建Nuxt.js項目 首先，確保你已經安裝了Node.js和yarn或npm。然後，通過命令行創建一個新的Nuxt.js項目： yarn create nuxt-app my-nuxt-project cd my-nuxt-project 在創建過程中，你可以選擇是否需要UI框架、預處理器等選項，根據需要配置。 目錄結構 Nuxt.js遵循特定的目錄結構，其中一些關鍵目錄如下： ├── .nux
昵稱 天涯學館
使用 AST 遷移複雜前端項目的探索
寫在前面 也不知道為什麼，每一次工作變動，所接手的第一個項目，都和項目遷移有關。這次也不例外，在 5 月初入職樂天之後，處理完雜七雜八的事情，第一個接手的項目是將一個大概有 5 年開發週期的 nuxt 2 前端項目，遷移到 nuxt 3 版本。 項目遷移與“屎山” 談及項目遷移，尤其是複雜項目，很容易讓人把它和“屎山”聯繫起來，而事實上也是如此，大多數規模較大的項目，往往都具備“屎山”的各種特徵，
昵稱 littlelyon
JS模塊化系統
JS模塊化系統 隨着 JavaScript 開發變得越來越廣泛，命名空間和依賴關係變得越來越難以處理。人們已經開發出不同的解決方案以模塊系統的形式來解決這個問題。 CommonJS(CJS) CommonJS 是一種同步加載模塊的規範，主要用於服務器端的 Node.js 環境。 // 模塊導出 module.exports = { // 模塊內容 }; // 模塊導入 const modul
昵稱 四冥
AMD和CMD的最簡單實現
AMD（Asynchronous Module Definition） 模塊的依賴是在定義模塊時就聲明好的，並且作為參數傳入模塊的工廠函數。這意味着所有的依賴都需要在模塊體開始執行之前被加載。 (function(global) { var modules = {}; // 用於存儲定義的模塊 // 定義模塊 function define(name, dependenc
昵稱 cynthia
前端模塊化演變歷程
前端模塊化是指將一個大型的前端應用程序分解為小的、獨立的模塊，每個模塊都有自己的功能和接口，可以被其他模塊使用。 前端模塊化的出現主要是為了解決以下幾個問題： 代碼複用：通過模塊化，可以在多個地方重複使用同一個模塊，而不需要重複編寫相同的代碼。 代碼維護：模塊化後的代碼更加清晰，每個模塊負責的功能明確，便於維護和升級。 依賴管理：模塊化可以很好地處理模塊間的依賴關係，確保模塊使用時其依賴已
昵稱 鄧佔勇
構建模塊化 CLI：Lerna + Commander 打造靈活的基礎腳手架
在現代軟件開發中，創建 定製化的命令行工具(CLI) 已成為滿足公司業務需求的關鍵一環。這類工具可以輔助執行諸如代碼檢查、項目初始化等任務。為了提高開發效率並簡化維護過程，我們將功能模塊化，並通過多個子包來組織這些功能。本文將介紹如何使用 Lerna 來管理一個多包項目，並基於 Commander 實現一個基礎的 CLI 腳手架框架。 初始化：創建入口文件 項目結構 我們以 ice-basic-c
昵稱 一顆冰淇淋
Promise 與異步編程
Promise 是 JavaScript 中的一個重要概念，與前端的工作更是息息相關。因此本文將整理一下 Promise 在日常工作中的應用。 概念 從 MDN | 使用 Promise 中我們能學習到 Promise 的基礎使用與錯誤處理、組合等概念，可以將 Promise 的特點概括為: Promise 對象有三種狀態，且狀態一旦改變就不會再變。其值記錄在內部屬性 [[Promis
昵稱 anran758
JavaScript 異步編程指南：async/await 與 Promise 該怎麼選？
在 JavaScript 開發中，異步操作就像家常便飯 —— 從調用後端 API 到讀取本地文件，幾乎無處不在。但很多開發者都會困惑：到底該用 Promise 的鏈式調用，還是 async/await 語法？其實答案很簡單：沒有絕對的好壞，只有場景的適配。 今天我們就用實際案例聊聊，這兩種異步寫法各自適合什麼場景，以及如何在項目中混搭使用，讓代碼既高效又易讀。 先搞懂：兩者不是對立關係 很多人以為
昵稱 葡萄城技術團隊
webpack dev server 與 hot module replace 提高開發效率
通過 webpack 命令編譯源代碼時，如果我們對源代碼進行了修改，需要重新執行命令才能看到編譯後的效果。 這樣在開發中非常的影響效率，如果存在一種方式，當文件被修改時，webpack 自動監聽重新編譯，並反饋給開發者，這樣就能更高效的進行開發。 watch 我們通過 webpack 執行命令時，編譯完成之後進程會停止，而 webpack --watch 編譯完成後，不會停止進程，並且當文件內容發
昵稱 一顆冰淇淋
抽絲剝繭：詳述一次DevServer Proxy配置無效問題的細緻排查過程
事情的起因是這樣的，在一個已上線的項目中，其中一個包含登錄和獲取菜單的接口因響應時間較長，後端讓我嘗試未經服務轉發的另一域名下的新接口，舊接口允許跨域請求，但新接口不允許本地訪問（只允許發佈測試/生產的域名訪問）。 問題 那麼問題來了，本地環境該如何成功訪問到新的接口並驗證業務功能是否生效呢？ 嘗試過程 我首先就想到了直接在 webpack 項目中配置 devServer，並且修改接口地址
昵稱 一顆冰淇淋
從0到1：React項目中的Webpack配置實戰
公司項目一般都是使用集團封裝好的腳手架，腳手架內部實現咱看不到也摸不着，好不容易組內推行新的UI框架，需要自行定義 webpack 配置，這可是個絕佳的好機會，我對配置過程進行了梳理，把商業項目的成熟配置小跑着送上。 初始化 首先新建一個空文件夾，執行 npm init 初始化生成 package.json 文件。 創建 src 文件夾，項目的業務代碼都放在這裏，再創建 index.js，這是項目
昵稱 一顆冰淇淋
完整版移動端滑動事件封裝
touchEvent 基於Jquery擴展在移動端產生的事件，包含，單次觸摸事件，兩次觸摸事件，長按事件，滑屏事件，向上滑動事件，向下滑動事件，向左滑動事件，向右滑動事件 預覽 地址預覽 https://hangjob.github.io/touchEvent/index.html 事件類型 單次觸摸事件 $(el).tap tap: function(element, fn) {
昵稱 羊先生
移動端click事件300ms延時解決方案
問題描述 移動端由於屏幕雙擊會縮放頁面，因此移動端click事件會有300ms延時情況的產生 解決方案 方法一：全局禁止縮放 在html頁面頭部的meta標籤中加上content="user-scalable=no" meta content="user-scalable=no" 該方法會讓瀏覽器禁用默認的雙擊行為並且去掉300ms點擊延時 適用場景：需要對整個頁面進行禁用雙擊行為。但
昵稱 chen
嘗試檢測移動端click延時
據説移動端click有個延時300ms響應的機制，目的是為了區分單擊、雙擊。如果300ms內再次點擊，則判定為雙擊，移動端的雙擊用於縮放頁面；否則為單擊，執行click的事件處理函數。 取消click延時響應的3種做法： 設置視口標籤，禁用縮放頁面功能，瀏覽器也會相應取消對雙擊的響應。 利用touch系列事件包裝一組監聽器，只有touch持續時間小於某個值才歸為點擊（大於就是長按或者拖
昵稱 BENCJL
JQuery插件之$.fn
jQuery對象方法 $("a").css("color", "red"); 當使用$選擇元素的時候，它會返回一個jQuery對象，這個對象中包含了你一直使用的方法（比如：.css()，.click()等）。這個jQuery對象是從$.fn對象中得到的這些方法。$.fn對象包含了jQuery對象的所有方法，如果想編寫我們自己的方法，也要將方法定義在$.fn對象裏面。使用這種方式編寫插件，即jQue
昵稱 blob
jQuery擴展
jq--CDN jQ -- jQuery源碼解析 1、jQuery.extend() 與 jQuery.fn.extend() 把jQuery看成一個封裝js類 這樣好理解 $.extend是擴展的jQuery這個類 為jQuery類添加類方法 可以理解為靜態方法 只跟這個類本身有關 跟具體的實例化對象是沒關係的。 jQuery.fn.extend() 拓展的是jQuery對象(
昵稱 快樂的單身漢
JS 插件文檔庫邀你一起協同創作
項目概覽 JS 插件文檔庫地址：JS 插件文檔庫 · 語雀 在線演示代碼倉庫：JS 插件文檔庫示例代碼 · GitHub 在線預覽：JS 插件在線演示 項目介紹 如今，隨着大前端的發展，曾經的霸主：jQuery 也漸漸的隕落，隨之一起沒落的，也包含基於 jQuery 的一些優秀的插件。這些優秀的插件，讓我們在前端的開發中，節省了大量的時間。自己的項目中也使用了大部分基於 jQuery 的
昵稱 魯鵬
🚆新手前端不要慌! 給你✊10根救命稻草🍃
🧨放假了特意給大家坐火車打發時間寫了這篇工具收集類的小文, 讓大家輕輕鬆鬆學知識, 😊"鐵皮飯盒"祝大家十一快樂, 吃開心玩開心! 新手階段的前端面臨的最大問題就是: "😥這個咋做?", 這個階段的前端自己實現交互功能基本是不可能的, 那怎麼體現價值呢? 我給個建議: "不會寫還不會用嗎?", 其實js發展這麼多年,常見的功能在github上都是可以找到的, 下面我就給大家拿出我收藏多年的"
昵稱 鐵皮飯盒
原生js slider插件 r-slider
網上看到的一款原生slider插件，覺得挺好用，https://github.com/mohammadFe... script src="javascript/r-slider.js"/script 引入插件 div id="container1"/div html 樣式可以自己寫一下 var mySlider2 = new slider({ // cont
昵稱 弱雞的前端程序員
angular組件開發
隨着前端框架的誕生，也會隨之出現一些組件庫，方便日常業務開發。今天就聊聊 angular4 組件庫開發流程。 下圖是 button 組件的基礎文件。 nk-button.component.ts 為該組件的核心文件，看看代碼： import {Component, Renderer2, ElementRef, AfterContentInit, ViewEncapsulation, Input}
昵稱 Robin
企業微信機器人自動消息發送webhook接入代碼
主要代碼類如下 package com.test.common; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import java.util.HashMap; import java.util.List; imp
昵稱 onekbit導航
前端安全：XSS攻擊與防禦策略
XSS（Cross-Site Scripting）攻擊是前端安全中的一個重要問題，它發生在攻擊者能夠注入惡意腳本到網頁中，這些腳本在用户瀏覽器中執行時可以獲取用户的敏感信息，例如會話令牌、個人信息等。防禦XSS攻擊通常涉及以下幾個策略： 1. 輸入驗證： 對用户提交的數據進行嚴格的驗證，確保只有預期的字符和格式被接受。 使用正則表達式或預定義的白名單模式來過濾無效字符。 限制字符串長度以防
昵稱 天涯學館
前端必知的跨站腳本攻擊（XSS）示例與解決方案
跨站腳本攻擊（Cross-Site Scripting，通常縮寫為XSS）是一種常見的網絡安全漏洞，它允許攻擊者將惡意腳本注入到其他用户會瀏覽的頁面中。 XSS攻擊的示例代碼可以幫助我們瞭解攻擊者可能使用的技術。但請注意，瞭解這些示例的目的是為了更好地防禦XSS攻擊，而不是用於惡意目的。 XSS 攻擊通常分為三種類型 1. 反射型XSS：攻擊者誘使用户點擊一個鏈接，該鏈接包含惡意腳本，當用户點擊時
昵稱 威哥愛編程