摘要：
一、webpack是什么 webpack是一種前端資源構(gòu)建工具，一個(gè)靜態(tài)模塊打包器(module bundler)。在webpack看來(lái)，前端的所有資源文件(js/json/css/img/less/...)都會(huì)作為模塊處理。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，打包生成對(duì)應(yīng)的靜態(tài)資源（bundle）
閱讀全文
posted @ 2021-02-24 18:28
小Q的博客
閱讀(169)
推薦(0)
摘要：
1、使用class樣式 使用數(shù)組：<p :class="['italic']">隨便輸入一些文字內(nèi)容</p> 數(shù)組中使用三元表達(dá)式：<p :class="['italic',flag? 'active':'']">內(nèi)容</p 數(shù)組中嵌套對(duì)象：<p :class="['italic',{'active
閱讀全文
posted @ 2020-03-01 18:15
小Q的博客
閱讀(342)
推薦(0)
摘要：
一、JSON簡(jiǎn)介 1、JSON全稱是JavaScript Object Notation即JavaScript對(duì)象標(biāo)記法。 JSON是一種輕量級(jí)（Light-Weight）、基于文本的（Text-Based）、可讀的（Human-Readable）格式 JSON的名稱中雖然帶有JavaScript，
閱讀全文
posted @ 2017-08-27 23:31
小Q的博客
閱讀(645)
推薦(0)
摘要：
本文原創(chuàng)，這里首先聲明，轉(zhuǎn)載注明本文出處，翻版必究！ web前端開(kāi)發(fā)規(guī)范的現(xiàn)實(shí)意義 1、提高團(tuán)隊(duì)的協(xié)作能力 2、提高代碼的重復(fù)利用率 3、可以寫(xiě)出質(zhì)量更高，效率更好的代碼 4、為后期維護(hù)提供更好的支持 5、可讀性高 一、命名規(guī)則 1、html命名規(guī)則： a、文件名稱命名規(guī)則：統(tǒng)一使用小寫(xiě)英文字母、數(shù)
閱讀全文
posted @ 2017-08-26 22:13
小Q的博客
閱讀(604)
推薦(0)
摘要：
一、Yeoman 簡(jiǎn)介 通常在開(kāi)發(fā)新項(xiàng)目時(shí)我們都需要配置工程環(huán)境，開(kāi)發(fā)目錄，需要下載一些庫(kù)、框架文件（如 jQuery、Backbone 等），配置編譯環(huán)境（Less、Sass、Coffeescript等），甚至還要配置單元測(cè)試框架，過(guò)程非常繁瑣，還沒(méi)開(kāi)始編碼時(shí)間就耗了大半天。為了解決這個(gè)問(wèn)題 Pa
閱讀全文
posted @ 2017-08-21 19:48
小Q的博客
閱讀(335)
推薦(0)
摘要：
一. 一些導(dǎo)致js性能緩慢的例子 DOM訪問(wèn)執(zhí)行DOM交互的代碼比i一般的js代碼要慢。DOM交互是不可避免的，但是盡量的減少。 例如： 動(dòng)態(tài)的使用innerHTML插入HTML語(yǔ)句比創(chuàng)建DOM節(jié)點(diǎn)更快。 eval無(wú)論什么時(shí)候，避免使用eval方法，因?yàn)閳?zhí)行這一方法會(huì)造成很大的開(kāi)銷。 with盡量不
閱讀全文
posted @ 2017-08-21 13:38
小Q的博客
閱讀(312)
推薦(0)
摘要：
一、IOS自帶safari瀏覽器 1、safari不支持fixed、input輸入框 iOS下的 Fixed + Input 調(diào)用鍵盤(pán)的時(shí)候fixed無(wú)效問(wèn)題 拖動(dòng)頁(yè)面時(shí) header 和 footer 已經(jīng)定位在了對(duì)應(yīng)的位置，目測(cè)沒(méi)問(wèn)題了 但接下來(lái)問(wèn)題就來(lái)了！如果底部輸入框軟鍵盤(pán)被喚起以后，再次滑
閱讀全文
posted @ 2017-08-18 11:25
小Q的博客
閱讀(2376)
推薦(0)
摘要：
一、SASS簡(jiǎn)介 SASS是一種CSS的開(kāi)發(fā)工具，提供了許多便利的寫(xiě)法，大大節(jié)省了設(shè)計(jì)者的時(shí)間，使得CSS的開(kāi)發(fā)，變得簡(jiǎn)單和可維護(hù)。 本文總結(jié)了SASS的主要用法。我的目標(biāo)是，有了這篇文章，日常的一般使用就不需要去看官方文檔了。 二、安裝和使用 1、 安裝 SASS是Ruby語(yǔ)言寫(xiě)的，但是兩者的語(yǔ)法
閱讀全文
posted @ 2017-08-12 15:48
小Q的博客
閱讀(239)
推薦(0)
摘要：
移動(dòng)端開(kāi)發(fā)中需要注意的事項(xiàng)，以及可能需要用到一些框架，尾部總結(jié)了一些主流框架，如果你覺(jué)得有用的話，請(qǐng)點(diǎn)擊推薦，謝謝！ 一、關(guān)于meta 常見(jiàn)的公共meta屬性： 1、viewport <meta name="viewport" content="width-device-width,initial-
閱讀全文
posted @ 2017-08-12 11:13
小Q的博客
閱讀(473)
推薦(0)
摘要：
一、性能診斷工具如下： YSlow：23條性能軍規(guī)，打分制，提供瀏覽器插件 WebPageTest：真實(shí)瀏覽器，多地區(qū)，視頻截圖 GooglePageSpeed：真實(shí)瀏覽器，移動(dòng)端 性能魔方：多地區(qū)、運(yùn)營(yíng)商、多角度、優(yōu)化建議 阿里測(cè)：多地區(qū)、多瀏覽器、訪問(wèn)限制 17CE：多地區(qū)評(píng)測(cè)訪問(wèn)速度，更偏運(yùn)維
閱讀全文
posted @ 2017-08-11 15:36
小Q的博客
閱讀(173)
推薦(0)
摘要：
實(shí)際開(kāi)發(fā)項(xiàng)目中，前端工程師需要和美工、后端、產(chǎn)品經(jīng)理配合來(lái)完成一個(gè)產(chǎn)品，今天就簡(jiǎn)單說(shuō)說(shuō)前端工程師和這些類別工程師配合的那些事。 一、前端攻城獅和美工配合的那些事 懂得圖片理論基礎(chǔ) 常見(jiàn)的圖片格式包含以下幾種： PNG 1996【優(yōu)點(diǎn)】：透明、無(wú)損壓縮、漸近顯示、流式讀寫(xiě)、保留圖像名稱、作者、版權(quán)、創(chuàng)
閱讀全文
posted @ 2017-08-11 12:36
小Q的博客
閱讀(274)
推薦(0)
摘要：
1、對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解和認(rèn)識(shí)？ 標(biāo)簽閉合、標(biāo)簽小寫(xiě)、不亂嵌套、提高搜索機(jī)器人搜索幾率 使用外鏈css和js腳本，結(jié)構(gòu)行為表現(xiàn)的分離 文件下載與頁(yè)面速度更快，內(nèi)容能被更多的用戶所訪問(wèn)，內(nèi)容能被更廣泛的設(shè)備所訪問(wèn) 更少的代碼和組價(jià)，容易維護(hù)，改版方便，不需要變動(dòng)頁(yè)面內(nèi)容 提供打印版本而不需要復(fù)
閱讀全文
posted @ 2017-08-09 20:31
小Q的博客
閱讀(362)
推薦(0)
摘要：
一、性能優(yōu)化之瀏覽器篇 1、把CSS放在head中加載 能讓頁(yè)面更早的開(kāi)始渲染，避免閃屏 最好能包含關(guān)鍵渲染路徑的樣式：首屏 會(huì)讓頁(yè)面顯得加載速度更快，因?yàn)檫@樣做可以使瀏覽器逐步加載已經(jīng)下載的網(wǎng)頁(yè)內(nèi)容，這對(duì)內(nèi)容比多的網(wǎng)頁(yè)尤其重要，用戶不用一直等待在一個(gè)白屏上，而是可以先看到已經(jīng)下載的內(nèi)容。 如果樣式
閱讀全文
posted @ 2017-08-08 22:11
小Q的博客
閱讀(436)
推薦(0)
摘要：
一、基本的準(zhǔn)備工作 1、工具安裝 工具是有微信官方提供。 2、下載地址： windows32位：https://servicewechat.com/wxa-dev-logic/download_redirect?type=ia32&from=mpwiki&t=1475052055457 window
閱讀全文
posted @ 2017-08-06 18:44
小Q的博客
閱讀(1147)
推薦(0)
摘要：
一、Canvas標(biāo)簽： 1、HTML5<canvas>元素用于圖形的繪制，通過(guò)腳本（通常是javascript）來(lái)完成。 2、<canvas>標(biāo)簽只是圖形容器，必須使用腳本來(lái)繪制圖形。 3、可以通過(guò)多種方法通過(guò)Canvas繪制路徑、盒、圓、字符以及添加圖像。 二、Canvas繪制圖形 1、繪制矩形
閱讀全文
posted @ 2017-08-01 22:26
小Q的博客
閱讀(7959)
推薦(0)
摘要：
一、SVG介紹 1、SVG指可伸縮矢量圖片 2、SVG用來(lái)定義用于網(wǎng)絡(luò)的基于矢量的圖形 3、SVG使用XML格式定義圖形 4、SVG圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失 5、SVG是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn) 二、SVG的優(yōu)勢(shì) 1、SVG圖像可通過(guò)文本編輯器來(lái)創(chuàng)建和修改 2、SVG圖像可被搜索、索
閱讀全文
posted @ 2017-08-01 13:45
小Q的博客
閱讀(450)
推薦(0)
摘要：
一、使用smarty+ajax+php實(shí)現(xiàn)無(wú)刷新分頁(yè)效果 效果圖 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ajax分頁(yè)</title> 6 <style> 7 table{ 8 b
閱讀全文
posted @ 2017-07-31 22:57
小Q的博客
閱讀(716)
推薦(0)
摘要：
寫(xiě)在前面的話，如果中間有什么不明白的，請(qǐng)先看封裝ajax框架！（前言篇） 1、添寫(xiě)一個(gè)封閉函數(shù) （function(){}）(); 在一個(gè)項(xiàng)目中，可能會(huì)引用多個(gè)js框架，如果函數(shù)名相同，會(huì)有命名沖突，所以這里使用封閉函數(shù)。 2、封裝一個(gè)函數(shù)，用于dom元素的獲取 但$是局部變量，外面不能直接使用，所
閱讀全文
posted @ 2017-07-31 15:21
小Q的博客
閱讀(459)
推薦(0)
摘要：
Ajax技術(shù)就是利用javascript和xml實(shí)現(xiàn)異步交互的功能。 首先先來(lái)介紹一下Ajax相關(guān)知識(shí)點(diǎn)，如果這些你都會(huì)的話，請(qǐng)直接跳轉(zhuǎn)到封裝ajax框架！（代碼篇） 一、Ajax對(duì)象的創(chuàng)建 1、創(chuàng)建Ajax對(duì)象的方式 a、第一種方式是針對(duì)IE瀏覽器 b、第二種方式針對(duì)w3c：在IE的高版本（IE8
閱讀全文
posted @ 2017-07-30 23:56
小Q的博客
閱讀(1256)
推薦(1)
摘要：
一、JavaScript中的所有事物都是對(duì)象：字符串、數(shù)組、數(shù)值、函數(shù)... 1、每個(gè)對(duì)象帶有屬性和方法 JavaScript允許自定義對(duì)象 2、自定義對(duì)象 a、定義并創(chuàng)建對(duì)象實(shí)例 b、使用函數(shù)來(lái)定義對(duì)象，然后創(chuàng)建新的對(duì)象實(shí)例 二、JS內(nèi)置對(duì)象-String 1、string對(duì)象 string對(duì)象用
閱讀全文
posted @ 2017-07-28 22:52
小Q的博客
閱讀(400)
推薦(0)
摘要：
一、JS瀏覽器對(duì)象-window 1、window對(duì)象 window對(duì)象是BOM的核心，window對(duì)象指當(dāng)前的瀏覽器窗口 所有JavaScript全局對(duì)象、函數(shù)以及變量均自動(dòng)成為window對(duì)象的成員 全局變量是window對(duì)象的屬性 全局函數(shù)是window對(duì)象的方法 2、window尺寸 win
閱讀全文
posted @ 2017-07-28 21:30
小Q的博客
閱讀(2773)
推薦(0)
摘要：
一、less、sass、stylus 它們是三種類似的樣式動(dòng)態(tài)語(yǔ)言，屬于css預(yù)處理語(yǔ)言，它們有類似css的語(yǔ)法，為css賦予了動(dòng)態(tài)語(yǔ)言的特性、如變量、繼承、運(yùn)算、函數(shù)等，這么做是為了css的編寫(xiě)和維護(hù)。 它們使用的文件分別是：.less、.scss、.*styl，這些文件是不能再網(wǎng)頁(yè)上直接使用的，
閱讀全文
posted @ 2017-07-27 18:22
小Q的博客
閱讀(846)
推薦(1)
摘要：
從用戶訪問(wèn)資源到資源完整的展現(xiàn)在用戶面前的過(guò)程中，通過(guò)技術(shù)手段和優(yōu)化策略，縮短每個(gè)步驟的處理時(shí)間從而提升整個(gè)資源的訪問(wèn)和呈現(xiàn)速度。網(wǎng)站的性能直接會(huì)影響到用戶的數(shù)量，所有前端性能優(yōu)化很重要。 前端性能優(yōu)化分為如下幾個(gè)方面： 一、代碼部署 1、代碼的壓縮與合并 2、圖片、js、css等靜態(tài)資源使用和主站
閱讀全文
posted @ 2017-07-27 15:17
小Q的博客
閱讀(206)
推薦(0)
摘要：
一、bootstrap按鈕 1、按鈕 2、按鈕組 3、通欄按鈕 <button class="btn btn-success btn-block">通欄按鈕</button> 4、通欄按鈕組 a、通欄按鈕組，如果用input標(biāo)簽或者button標(biāo)簽，需要將它用btn-group的容器包起來(lái)。 b、如
閱讀全文
posted @ 2017-07-25 23:09
小Q的博客
閱讀(871)
推薦(0)
摘要：
一、移動(dòng)端的操作方式和PC端是不同的，移動(dòng)端主要是用手指操作，所以有特殊的touch事件，touch事件包括如下幾個(gè)事件： 1、手指放到屏幕上時(shí)觸發(fā) touchstart 2、手指放在屏幕上滑動(dòng)式觸發(fā) touchmove 3、手指離開(kāi)屏幕時(shí)觸發(fā)。 touchend 4、系統(tǒng)取消touch事件的時(shí)候觸
閱讀全文
posted @ 2017-07-24 23:28
小Q的博客
閱讀(7696)
推薦(1)
摘要：
jQuery UI是以jQuery為基礎(chǔ)的代碼庫(kù)。包含底層用戶交互、動(dòng)畫(huà)、特效、和可更換主題的可視控件。我們可以直接用它來(lái)構(gòu)建具有很好交互性的web應(yīng)用程序。 jQueryUI網(wǎng)址：http://jqueryui.com 一、jQuery UI主要分為3個(gè)部分：交互、小部件和效果庫(kù)。 1、交互 交互
閱讀全文
posted @ 2017-07-24 18:11
小Q的博客
閱讀(773)
推薦(0)
摘要：
1、cookie存儲(chǔ)在本地，容量最大4k，在同源的http請(qǐng)求時(shí)攜帶傳遞，損耗帶寬，可設(shè)置訪問(wèn)路徑，只有此路徑及此路徑的子路徑才能訪問(wèn)此cookie，在設(shè)置的過(guò)期時(shí)間之前有效。但是cookie不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗麄冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來(lái)傳遞，這使得cookie速度很慢而且效率不高。 a、jq
閱讀全文
posted @ 2017-07-24 16:17
小Q的博客
閱讀(593)
推薦(0)
摘要：
一、JSON JSON是JavaScript Object Notation 的首字母縮寫(xiě)，單詞的意思是javascript對(duì)象表示法，這里說(shuō)的json指的是類似于javascript對(duì)象的一種數(shù)據(jù)格式，目前這種數(shù)據(jù)格式比較流行，逐漸替換掉了傳統(tǒng)的xml數(shù)據(jù)格式。 1、javascript對(duì)象字面量
閱讀全文
posted @ 2017-07-22 23:56
小Q的博客
閱讀(1416)
推薦(0)
摘要：
一、事件冒泡定義 事件冒泡是指在一個(gè)對(duì)象觸發(fā)某類事件（比如單擊onclick事件），如果此對(duì)象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序，如果沒(méi)有定義此事件處理程序或者事件返回true，那么這個(gè)事件會(huì)向這個(gè)對(duì)象的父級(jí)對(duì)象傳播，從里到外，甚至它被處理（父級(jí)對(duì)象所有同類事件都將被激活），或者
閱讀全文
posted @ 2017-07-21 18:56
小Q的博客
閱讀(442)
推薦(0)
摘要：
一、jQuery事件 1、focus（）元素獲得焦點(diǎn) 2、blur（）元素失去焦點(diǎn) 3、change（） 表單元素的值發(fā)生變化（可用于驗(yàn)證用戶名是否存在） 4、click（） 鼠標(biāo)單擊 5、dbclick（） 鼠標(biāo)雙擊 6、mouseover（） 鼠標(biāo)進(jìn)入（進(jìn)入子元素也觸發(fā)） 7、mouseout（
閱讀全文
posted @ 2017-07-20 14:37
小Q的博客
閱讀(385)
推薦(0)
浙公網(wǎng)安備 33010602011771號(hào)