<input id="0qass"><u id="0qass"></u></input>
  • <input id="0qass"><u id="0qass"></u></input>
  • <menu id="0qass"><u id="0qass"></u></menu>

    自定義博客皮膚VIP專享

    *博客頭圖:

    格式為PNG、JPG,寬度*高度大于1920*100像素,不超過2MB,主視覺建議放在右側,請參照線上博客頭圖

    請上傳大于1920*100像素的圖片!

    博客底圖:

    圖片格式為PNG、JPG,不超過1MB,可上下左右平鋪至整個背景

    欄目圖:

    圖片格式為PNG、JPG,圖片寬度*高度為300*38像素,不超過0.5MB

    主標題顏色:

    RGB顏色,例如:#AFAFAF

    Hover:

    RGB顏色,例如:#AFAFAF

    副標題顏色:

    RGB顏色,例如:#AFAFAF

    自定義博客皮膚

    -+
    • 博客(114)
    • 收藏
    • 關注

    原創 JavaScript中常說的四種模塊規范

    JavaScript中常說的模塊規范CommonJS 規范AMD 規范UMD 規范ES6 模塊 規范CommonJS 規范CommonJS 規范定義了模塊應該怎樣進行編寫,從而各個模塊系統之間可以進行相互操作。var beta = require('beta');function verb { return beta.verb();}module.exports = { verb: verb};CommonJS 有以下特點:一個文件就是一個模塊;使用requir

    2021-05-27 18:07:28 18

    原創 代碼構建與webpack知識點

    代碼構建與webpack知識點1、Webpack 工具都做了些什么2、常見的前端構建工具3、了解Webpack(1)入口(entry)(2)輸出(output)(3)Loader(4)插件(plugins)總結Webpack 到底對項目代碼做了什么?1、Webpack 工具都做了些什么如今前端項目大多數都使用了模塊化,而如果想要將多個文件的代碼打包成最終可按照預期運行的代碼,則需要使用到代碼構建工具。不管項目代碼是如何進行組織的,項目中又有多少個文件,最終瀏覽器依然會從 HTML 內容進行解析和加載

    2021-05-27 18:04:44 321 3

    原創 前端進階者面試重點匯總

    前端進階者面試重點匯總一、前端三件套 HTML/CSS/JavaScript二、與 JavaScript 運行環境相關的瀏覽器和 Node.js:三、前端開發通用領域、網絡、安全、算法和計算機通用知識。1、瀏覽器相關2、Node.js 相關3、網絡相關4、安全相關5、算法與數據結構6、計算機通用知識四、知識匯總一、前端三件套 HTML/CSS/JavaScript面試官在面試 1~3 年經驗的前端崗位候選人時會更多傾向于考察對頁面布局原理的掌握,包括盒子模型、文檔流、浮動布局等,以及常見頁面布局的技巧

    2021-05-26 11:37:20 31 1

    原創 git remote: HTTP Basic: Access denied報錯解決

    git error: git remote: HTTP Basic: Access denied問題原因: 可能是剛改過遠程倉庫密碼,造成本地git配置的用戶名、密碼與gitlab上注冊的用戶名、密碼不一致。1、解決方法一:跟著圖示步驟走然后繼續使用soucetree 會彈窗 提示輸入用戶名密碼 就好了2、解決方法二:如果賬號密碼有變動 用下面命令 重新輸入賬號密碼git config –system –unset credential.helper用了第一個命令 還不能解決問

    2021-05-12 15:53:23 17

    原創 Error: PostCSS received undefined instead of CSS string

    新拉下來的項目,啟動項目 npm run serve 的時候就報錯:Error: PostCSS received undefined instead of CSS string1、我的項目問題原因:我的node的版本影響了node-sass的應用。2、解決辦法:卸載當前版本,安裝最新版本的node-sassnpm uninstall node-sassnpm install node-sass --save-dev刪除依賴,重新安裝又依賴rimraf node_modulesnpm

    2021-05-07 14:28:59 191

    原創 寫出更優雅的react組件(避免重復渲染)

    寫出更優雅的react組件一、存在問題二、解決辦法類組件的解決方法1、 shouldComponentUpdate(React 類組件的一個生命周期)2、PureComponent + Immutable.js(進階版)(1)為什么有了PureComponent這個方法(2)PureComponent 與 Component 的區別點(3)PureComponent用法(4)Immutable.js函數組件的解決方法1、React.memo:“函數版”shouldComponentUpdate/PureCo

    2021-04-25 15:03:29 64

    原創 深度理解并使用react的useEffect()

    深度理解并使用react的useEffect()useEffect()是React 16.8 的新增特性,它的出現是為了彌補只能在react中的類組件中使用的的生命周期函數:componentDidMount、componentDidUpdate、componentWillUnmount(和vue中的mounted、destoryed生命周期函數有異曲同工之妙,其實都是相通的)。下面這段代碼是直接從react文檔中拷貝過來的,寫的是在類組件中當我們想在文檔更新時和在組件消失時執行一些邏輯時,是有相關生命

    2021-04-06 18:28:53 61

    原創 深度理解react的useState()

    理解并使用react的useState1、為什么有了這個方法useState()是專門用在函數組件中的,因為函數組件本來是沒有狀態的組件,而類組件中可以通過 this.state和this.setState來更新組件狀態,于是 React 16.8 就新增useState這個特性,用來提升函數組件的性能。函數組件import React, { useState } from 'react';function ChangeAge() { // 聲明一個叫 "name" 的 state 變量

    2021-04-02 18:00:13 63

    原創 react創建一個組件(函數組件和類組件及區別)

    函數組件和class組件1、函數組件:編寫 JavaScript 函數,返回一個react元素(組件名首字母要大寫)function Welcome(props) {// 此處可以寫入你想寫的一些邏輯語句// 最后只需要return出react元素 return <h1>Hello, {props.name}</h1>;}// 或者const Welcome = (props) => {// 此處可以寫入你想寫的一些邏輯語句//最后只需要return出r

    2021-03-24 17:16:22 28

    原創 初學react實現列表處理功能

    通過上的react課程實現一個對列表相關的處理功能,涉及到的react知識點有:建立react組件,引入react組件、react綁定事件、react循環渲染組件、react寫樣式、es6語法。1、首先熟悉下這個項目的文件夾,方便開發2、我寫的文件包含下面幾個其中todolist.js文件是主文件(vue的內容文件都是以.vue為后綴;react是以.js為后綴),todoitem.js是todolist.js的一個組件,todolist.css是樣式文件。3、todolist.js文件的內.

    2021-03-24 15:38:38 19

    原創 初學者:創建一個react項目

    1、去react官網:https://editor.csdn.net/md/?not_checkout=1’點擊文檔部分找到下面的模塊。(或者直接看我寫的第二步執行相關命令)2、使用命令行進入到你想創建react項目的一個目錄,分別執行下面的命令(react的腳手架命令)npx create-react-app my-appcd my-appnpm start其中的my-app是你的項目名字,可以自行更改。(我取得項目名子為todolist)執行完上面命令以后我的目錄里面首先會出現一個t

    2021-03-23 11:36:13 24 1

    原創 prettier安裝和配置

    prettier安裝和配置1、prettier安裝(1)命令安裝(2)插件安裝2、prettier配置1、prettier安裝(1)命令安裝(2)插件安裝2、prettier配置module.exports = { "printWidth": 100, // 超過最大值換行 "overrides": [ { "files": ".prettierrc", "options": { "parser": "json" }

    2021-03-20 16:07:31 98

    原創 理財課程干貨總結三:股票入門

    本節內容主要是對股票中的打新股和打新債有所了解,然后是打新債的操作流程以及如何選出優質股票。分為以下幾個內容版塊:舉例說明打新股打新債打新債實操如何選出好的股票一、舉例說明舉個例子:下面的白菜價錢變化表中,我們在12月2號買入白菜,在12月5號賣出是不是就能賺取最大的收益。其實只要我們買到最低價,不管我們在什么時候賣出就不會虧。關鍵就在于我們如何找到它的最低價。再舉個了例子:比如我們購買一盒牛奶。所以通過上面例子我可以在股市中得到的是我們要買到股票的出廠價。股市的核心就是

    2021-01-28 18:05:01 269

    原創 理財課程干貨總結二:債券入門

    本節主要內容是理財的一些觀念,以及債券入門。理財不是賭博,安全才是基礎真正的安全不是躲理財躲得遠遠的,而是掌握背后的知識和邏輯1、如果有一款app,它告訴你把錢給它,你可以完全不用動腦子,它就可以給你8%以上的收益,那這個99.99%是騙子。(沒有一款產品,不用讓你動腦子,就可以保證讓你獲得比較高一點的收益)。收益率8%是分水嶺,低于8%的有可能可以靠別人;高于8%的,只能靠自己2、既然是想靠錢生錢,就要學會選擇安全的高收益產品。如果只要求低收益,你完全可以把錢放余額寶,放銀行。收益低

    2021-01-27 17:33:47 201

    原創 理財課程干貨總結一

    1、年利率/年化收益/存款年利率/七日年化含義:你存錢存一年可以獲得的利息舉例:年化收益2%(年利率2%)時,你投入100元,每年可以賺2元;投入10萬元,每年可以賺2000元。根據上面這張圖,根據收益率把人分成了很多個級別,我們可以得知的是:理財最重要的不是本金,而是收益率,收益率決定了你財富的等級。理財不是賭博,安全才是基礎(理個財不要弄得自己提心吊膽,每天飯吃不好,睡不好覺)2、余額寶的本質是什么?貨幣基金3、什么是基金?舉個例子:出去旅游的時候兩種旅行方式,一種是自己包辦一切,

    2021-01-26 11:22:25 650 1

    原創 監聽頁面隱藏掉的事件

    1、visibilitychange事件:當document.visibilityState == hidden的時候可以監聽到頁面被隱藏。(當你在移動端直接從一個app頁面劃到主頁面或者跳轉到其它頁面就會監聽到該事件)document.addEventListener("visibilitychange", function() { if (document.visibilityState == 'hidden') {...}}})2、pagehide事件:當你在移動端從一個app頁面劃到

    2021-01-25 17:46:28 145

    原創 徹底刪除node_modules

    出現問題:有時候安裝了新的模塊或者改了什么配置,都是需要重新的安裝依賴的(node_modules),但是在安裝前需要先提前徹底刪除node_modules,手動刪除一般沒效果。使用npm上面的rimraf模塊,用這個模塊可以直接刪除node_modules里面的深層依賴。首先安裝rimraf模塊,使用命令:npm install -g rimraf使用刪除命令:rimraf node_modules...

    2021-01-22 10:15:45 56

    原創 用vant實現下拉刷新和上拉加載功能(vue項目)

    我這次的詳細做法是:1、首先在下面顯示的文件下建立了一個list.js文件(要做分頁加載的頁面都可以引入使用)。2、list.js文件的內容如下:export default { data() { return { //三個判斷 loading: false,//是否在加載中 finished: false,//是否加載完成 refreshLoading: false, pageSize: 20, // 列表請求數 p

    2020-12-01 11:18:19 500 1

    原創 第一次做比較大的前端需求的自我總結

    問題點:1、需求給的時間是很長的,一開始看到這個需求的時候看到很多個頁面,就覺得需求量挺大的,雖然時間很長但開始的時候覺得很不熟悉,完全沒進入狀態,有些東西沒有頭緒,就浪費了很多時間。所以說這次需求是沒把握好時間,以至于沒有更多的時間做一些細節上的東西2、有些自己沒辦法實現的東西自己一直在那里探索和糾結,沒有考慮到上線時間的問題和穩定性的問題,應該提前給自己確定下來是否可以按期完成,完成不了應該盡早把問題丟出來,讓大佬幫忙解決。3、UI開始沒有完全按照設計稿執行,不夠嚴謹,有些東西做出來是憑借自我感覺

    2020-11-26 16:31:04 55

    原創 npm ERR! Failed at the node-sass@4.5.2 postinstall script. npm ERR! This is probably not a problem

    npm run dev的時候不成功,然后我就刪除node_module文件,npm install 重新安裝依賴,結果報錯說:npm ERR! Failed at the node-sass@4.9.2 postinstall script.npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! node-sass@4.9.2 postinstall: `node scripts/build.js`npm ERR! Exit status 1npm ERR

    2020-09-14 17:44:02 92

    原創 mac安裝報錯Error: EACCES: permission denied, access ‘/usr/local/lib/node_modules

    關于權限問題的報錯:意思是你沒有權限訪問這個文件解決辦法:在安裝命令前面加一個sudo例如我原先的命令是npm install -g cnpm --registry=https://registry.npm.taobao.org然后把它換成sudo npm install -g cnpm --registry=https://registry.npm.taobao.org然后再輸入電腦開機密碼,輸入的時候它是不會顯示出來的,正常輸入就好。...

    2020-09-14 17:40:31 68

    原創 詳解深拷貝和淺拷貝以及如何深拷貝

    深拷貝和淺拷貝一、如何區分深拷貝和淺拷貝二、舉例加深理解深拷貝和淺拷貝三、圖文理解四、哪些方法是淺拷貝,如何進行深拷貝一、如何區分深拷貝和淺拷貝內在的區別:淺拷貝就是簡單的把指向別人的值的一個指針給復制過來,深拷貝就是實實在在的把別人的值給復制過來。直接顯示出來的區別:淺拷貝就是雙方不是獨立的,還會互相影響;深拷貝是不會影響到彼此,是獨立的個體。深拷貝與淺拷貝的存在主要還是受拷貝的數據類型所影響的。當拷貝的是js基本數據類型時,都會是深拷貝;如果拷貝的是js引用數據類型時,簡單的賦值過來的時候就

    2020-09-10 10:50:17 141

    原創 理解js棧內存和堆內存

    內存分配與垃圾回收:在編譯階段,除了聲明變量和函數,查找環境中的標識符這兩項工作之外,還會進行內存分配。不同類型的數據會分配到不同的內存空間一般來說棧內存線性有序存儲,容量小,系統分配效率高。而堆內存首先要在堆內存新分配存儲區域,之后又要把指針存儲到棧內存中,效率相對就要低一些了。垃圾回收方面,棧內存變量基本上用完就回收了,而推內存中的變量因為存在很多不確定的引用,只有當所有調用的變量全部銷毀之后才能回收。棧內存:引擎執行代碼時工作的內存空間,除了引擎,也用來保存基本值和引用類型值的地址。堆

    2020-09-09 11:46:24 81

    原創 限制input輸入長度與內容

    如果輸入的是數字,通過監聽input事件再通過slice進行截取限制長度<input type="number" oninput="f(value.length>6)value=value.slice(0,4)">如果輸入的是文字或者字符,就會有一個maxlength屬性進行限制長度<input type="text" placeholder="只能輸入六個字符" maxlength="6">...

    2020-09-07 20:02:48 561

    原創 vue獲取input值的方法總結

    1、v-model:使用v-model創建雙向數據綁定, 用來監聽用戶的輸入事件以更新數據 <template> <input placeholder="請輸入你的手機號碼" type="number" v-model="number" /> <input placeholder="請輸入密碼"

    2020-09-07 16:57:17 707

    原創 前端驗證碼倒計時的實現(實戰)

    是用vue寫的,但是邏輯基本上都是一樣的。效果如下:驗證碼倒計時: codeTimer() { this.timer = 60; let _this = this;//setTimeout里面的this不一樣,所以在這里先保存好 if (this.timer >= 1) { //this.$refs.eleCode是vue獲取dom元素的一種方法 this.$refs.eleCode.setAttribut

    2020-09-07 13:56:47 218

    原創 前端驗證碼登陸模塊的實現(vue實現)

    實現效果如下:用vue寫的,但實現邏輯都是一樣的。摘取出來的輸入框的html部分: //號碼輸入框 <input class="login-input login-phone" placeholder="請輸入你的手機號碼" type="number" v-model="loginNumberVal" @input="lenControl"

    2020-09-07 11:53:12 650

    原創 安裝完PS要首先要有的一步操作

    打開PS,按快捷鍵ctrl + k,彈出首選項框點擊性能選項顯示如下圖:進行的操作是第一個框框進度條拉到90%的樣子,往右的第二個框框的歷史紀錄步數調到50左右,下邊第三個框框的暫存盤勾選除C盤以外的其它盤。這是使用建議使用ps時的一個初始設置。...

    2020-09-06 19:59:34 102

    原創 詳解slice,substring,substr的區別

    slice,substring和substr的區別都接收兩個參數,slice和substring接收的是起始位置和結束位置(不包括結束位置),而substr接收的則是起始位置和所要返回的字符串長度。其中substring是以兩個參數中較小一個作為起始位置,較大的參數作為結束位置,slice是將后面小的參數轉化為0slice是數組和字符串都可以使用,返回截取到的值,不影響原數組和字符串;substring和substr只有字符串可以使用,返回截取到的字符串。//參數都是比較正常的情況下var st

    2020-08-26 16:28:01 66

    原創 css實現固定區域的上下滑動(vue基礎實踐案例)

    dsdwdwd

    2020-08-25 17:33:54 409

    原創 瞄點到某個具體位置的實現方式

    1、給要瞄點文本添加id屬性(id屬性針對任何標簽都生效),通過a標簽href屬性的hash值進行跳轉<body> <div id="go-here">待瞄點文本</div> <div> <span><a href="#go-here"></a><\span> </div></body>2、給要瞄點文本添加name屬性(name屬性針對a標簽生效),通過a標簽h

    2020-08-14 17:51:28 73

    原創 css實現標簽固定懸浮在某個位置(position:fixed)

    關鍵用到的就是固定定位(position:fixed)和層疊屬性(z-index)<div class="fix-box"></div><style> .fix-box{ text-align: center; top:35px; position:fixed; z-index:100; }</style>知識點詳細解析position:fixed:盒子將脫離原來的文本流,進入到新

    2020-08-12 17:58:40 1584

    原創 vue阻止事件冒泡@click.stop、默認行為@click.prevent、按鍵修飾符@keyup.enter

    1、@click用法 @click="fun" @click="fun(參數)" v-on:click="fun"//完整寫法2、@click.stop 阻止事件冒泡//點擊child區域時只會執行函數sayChild,不會執行函數sayFather<div class="father" @click="sayFather"> <div class="child" @click.stop="sayChild"> </div></div>

    2020-08-06 18:08:09 387

    原創 前端路由hash、history、location總結

    一、理解前端路由,前端路由都有哪些?1、理解路由2、前端路由方法(1)history對象(window.history)(2)location對象(Hash)3、hash(locstion對象屬性) 和 pushState (history對象屬性)對比1、理解路由直接可理解為根據不同的url地址來顯示不同的頁面或內容的功能,最開始的后端路由有一個很大的缺點就是每次路由切換的時候都需要去刷新頁面,然后發出ajax請求,然后將請求數據返回回來,那么這樣每次路由切換都要刷新頁面對于用戶體驗來說就會不太友好。

    2020-07-29 18:11:45 116

    原創 前端環境搭建

    前端環境搭建一、node.js安裝1、windows安裝node.js2、Mac上安裝node.js先安裝nvm一、node.js安裝1、windows安裝node.js(1) 百度搜索node.js進入node.js官網進行下載安裝,一步步的點擊next就可以安裝完成。(2)測試是否按照完成:在鍵盤按下【win+R】鍵,輸入cmd,然后回車,打開cmd窗口(3)在cmd窗口輸入以下命令,如果顯示版本號則表示按照成功。node -vnpm -v注釋:Node.js中自帶npm,安裝Nod

    2020-07-23 18:20:12 1015 2

    原創 強大的電腦快捷鍵

    1、讓電腦鎖屏:windows + L (lock鎖住)2、步驟記錄器:先按windows + R;再輸入psr.exe;然后點擊開始記錄,它會記錄下你做的所有操作,然后生成一個圖文并茂的詳細文檔,單擊停止記錄以后,會將詳細文檔保存到一個壓縮文件中。3、快速顯示桌面:windows + D。當你正在瀏覽其它窗口時想要快速回到桌面而不是一個個的縮小,就用這個快速回到桌面。4、屏幕放大鏡:按住...

    2019-12-07 15:35:09 85

    原創 js實現小球隨機運動

    HTML <div class='box'> <div class='ball'></div> </div>style:.box{ width:300px; height:400px; background-color:green; opacity:0.5; margin:auto; position:r...

    2019-09-29 00:09:24 937

    原創 為什么要設置短信驗證碼倒計時和圖片驗證碼(登錄原理)

    1、短信驗證碼倒計時的作用:主要是為了防止用戶頻繁的點擊,獲取短信驗證碼是有時間限制的,這樣就可以讓用戶在規定的時間內只能點擊一次,在客戶端就只是告知用戶這個什么時候可以點擊,在服務端就可以更少的調用這個接口,不去影響服務器的性能每點擊一次都會發送一條短信,也是會收費用的,限制用戶點擊次數也可以節省費用設置短信驗證碼可以定位到目標用戶,提高安全性2、設置圖片驗證碼的作用:防止有人...

    2019-08-23 18:09:47 284

    原創 閉包面試題之閉包解決for循環打印

    閉包的作用: 正常函數執行完畢后,里面聲明的變量被垃圾回收處理掉,但是閉包可以讓作用域里的 變量,在函數執行完之后依舊保持沒有被垃圾回收處理掉1、正常的for循環打印for (var i = 0; i < 4; i++) { console.log(i);輸出的是0、1、2、32、加了延遲的for循環打印for (var i = 0; i < 4; i++) { ...

    2019-08-21 11:27:41 534

    原創 js事件循環機制相關定義

    (1)、當javascript代碼執行的時候會將不同的變量存于內存中的不同位置:堆(heap)和棧(stack)中來加以區分。其中,堆里存放著一些對象。而棧中則存放著一些基礎類型變量以及對象的指針。 但是我們這里說的執行棧和上面這個棧的意義卻有些不同。(2)、當我們調用一個方法的時候,js會生成一個與這個方法對應的執行環境(context),又叫執行上下文。這個執行環境中存在著這個方法的私有作用...

    2019-08-21 11:04:24 142

    空空如也

    空空如也

    空空如也

    TA創建的收藏夾 TA關注的收藏夾

    TA關注的人 TA的粉絲

    提示
    確定要刪除當前文章?
    取消 刪除
    多乐彩