工作了兩年，一直沒(méi)有好好打理甚至說(shuō)沒(méi)有開(kāi)通自己的博客，直到最近才明白博客的重要性。

回想過(guò)去兩年的工作，一直忙忙碌碌，做過(guò)不少事，遇到過(guò)不少問(wèn)題，每次都想著開(kāi)通自己的博客，記錄下來(lái)，學(xué)會(huì)溫故而知新。但每次回到家，累的躺倒床上，給自己催眠，“明天再弄，明天復(fù)明天，明天何其多”，就這樣，被自己的“懶惰”，一直拖延到現(xiàn)在。

每天都是忙忙碌碌，很少靜下心來(lái)，思考自己到底是否真正掌握了一門(mén)知識(shí)。

回想過(guò)去的兩年 ，也是用過(guò)不少插件。自己歸類下：

樣式類：css，less,sass

css用的最多，css3的新屬性用過(guò)的也不少，但是僅僅留在會(huì)用的層面上，也留意過(guò)一些比較偏的屬性如：

-webkit-overflow-scrolling: touch

只知道使用了這個(gè)屬性，在手機(jī)上滑動(dòng)屏幕就會(huì)很流暢，不會(huì)出現(xiàn)卡頓現(xiàn)象，至于這個(gè)屬性為啥使用后就可以流暢，不知道。

-webkit-appearance: none;

除去蘋(píng)果手機(jī)表單的默認(rèn)樣式，

取值和兼容性如下：

-webkit-appearance取值代碼效果介紹ChromeSafariiOS SafariAndroid Browser

none	?	去除系統(tǒng)默認(rèn)appearance的樣式,常用于IOS下移除原生樣式	支持	支持	支持	支持
button	?	渲染成button的風(fēng)格	支持	支持	支持	支持
button-bevel	?	渲染成button-bevel的風(fēng)格	支持	支持	不支持	不支持
caret	?	渲染成caret的風(fēng)格	支持	支持	不支持	不支持
checkbox	?	渲染input:checkbox樣式的復(fù)選框按鈕	支持	支持	支持	支持
listbox	?	渲染為listbox樣式的復(fù)選框按鈕	支持	支持	支持	支持
listitem	?	渲染成listitem的風(fēng)格	支持	支持	不支持	不支持
media-fullscreen-button	?	渲染成media-fullscreen-button的風(fēng)格	不支持	不支持	不支持	不支持
media-mute-button	?	渲染成media-mute-button的風(fēng)格	支持	支持	不支持	不支持
media-seek-back-button	?	渲染成media-seek-back-button的風(fēng)格	不支持	支持	不支持	不支持
media-seek-forward-button	?	渲染成media-seek-forward-button的風(fēng)格	不支持	支持	不支持	不支持
media-slider	?	渲染成media-slider的風(fēng)格	支持	支持	不支持	不支持
media-sliderthumb	?	渲染成media-sliderthumb的風(fēng)格	支持	支持	不支持	不支持
menulist	?	渲染成menulist的風(fēng)格	支持	支持	不支持	不支持
menulist-button	?	渲染成menulist-button的風(fēng)格	支持	支持	支持	不支持
menulist-text	?	渲染成menulist-text的風(fēng)格	支持	支持	不支持	不支持
menulist-textfield	?	渲染成menulist-textfield的風(fēng)格	支持	支持	不支持	不支持
push-button	?	渲染成push-button的風(fēng)格	支持	支持	支持	支持
radio	?	渲染成radio的風(fēng)格	支持	支持	支持	支持
searchfield	?	渲染成searchfield的風(fēng)格	支持	支持	不支持	支持
searchfield-cancel-button	?	渲染成searchfield-cancel-button的風(fēng)格	支持	支持	不支持	支持
searchfield-decoration	?	渲染成searchfield-decoration的風(fēng)格	支持	支持	不支持	不支持
searchfield-results-button	?	渲染成searchfield-results-button的風(fēng)格	不支持	支持	不支持	不支持
searchfield-results-decoration	?	渲染成searchfield-results-decoration的風(fēng)格	不支持	支持	不支持	不支持
slider-horizontal	?	渲染成slider-horizontal的風(fēng)格	支持	支持	支持	支持
slider-vertical	?	渲染成slider-horizontal的風(fēng)格	支持	支持	支持	支持
sliderthumb-horizontal	?	渲染成sliderthumb-horizontal的風(fēng)格	支持	支持	支持	支持
sliderthumb-vertical	?	渲染成sliderthumb-vertical的風(fēng)格	支持	支持	支持	支持
square-button	?	渲染成square-button的風(fēng)格	支持	支持	支持	支持
textarea	?	渲染成textarea的風(fēng)格	支持	支持	不支持	支持
textfield	?	渲染成textfield的風(fēng)格	支持	支持	不支持	支持
scrollbarbutton-down	?	渲染成scrollbarbutton-down的風(fēng)格	不支持	不支持	不支持	不支持
scrollbarbutton-left	?	渲染成scrollbarbutton-left的風(fēng)格	不支持	不支持	不支持	不支持
scrollbarbutton-right	?	渲染成scrollbarbutton-right的風(fēng)格	不支持	不支持	不支持	不支持
scrollbargripper-horizontal	?	渲染成scrollbargripper-horizontal的風(fēng)格	不支持	不支持	不支持	不支持
scrollbargripper-vertical	?	渲染成scrollbargripper-vertical的風(fēng)格	不支持	不支持	不支持	不支持
scrollbarthumb-horizontal	?	渲染成scrollbarthumb-horizontal的風(fēng)格	不支持	不支持	不支持	不支持
scrollbarthumb-vertical	?	渲染成scrollbarthumb-vertical的風(fēng)格	不支持	不支持	不支持	不支持
scrollbartrack-horizontal	?	渲染成scrollbartrack-horizontal的風(fēng)格	不支持	不支持	不支持	不支持
scrollbartrack-vertical	?	渲染成scrollbartrack-horizontal的風(fēng)格	不支持	不支持	不支持	不支持

等等。

邏輯類：javascript ,jquery,es6，vue,react

當(dāng)然最拿手的是jquery，也是熟練使用狀態(tài)，偶爾哪天興致勃勃的研究下它的源碼，，因?yàn)闆](méi)有記錄，轉(zhuǎn)眼也就忘了，偶爾還記得，如何解決“$”沖突,之所以對(duì)它印象深刻是因?yàn)?#xff0c;同事隨口問(wèn)了句，然我說(shuō)我就知道，

(function(jq){// 開(kāi)始你的邏輯 })(jQuery)

然后他給我又列舉了幾個(gè)，感覺(jué)很羞愧，一個(gè)專業(yè)前端還沒(méi)有一個(gè)非專業(yè)的知道的多。

大致總結(jié)了一下，有三種方式可以實(shí)現(xiàn)：

方式一：

var jq= jQuery.noConflict(); //自定義一個(gè)比較短快捷方式 jq(function(){ //使用jQuery// 開(kāi)始你的邏輯 });

優(yōu)點(diǎn)：如果整個(gè)項(xiàng)目需要替換，可以寫(xiě)個(gè)全局變量

缺點(diǎn)：引入了這段代碼后，不僅是當(dāng)前的js文件，該html引用的所有js中，如果有用到j(luò)query中的$，都得用$j來(lái)代替之前的$

方式二：

jQuery( document ).ready(function( $){}

優(yōu)點(diǎn)：解決上述缺點(diǎn)

缺點(diǎn)：只在ready函數(shù)里有效，通常情況下，我們會(huì)把經(jīng)常用的邏輯處理封裝成函數(shù)，并把這些封裝好的函數(shù)寫(xiě)在ready函數(shù)外面，這就會(huì)造成外面的函數(shù)jquery并不能改變。

方式三：

(function(jq){// 開(kāi)始你的邏輯 })(jQuery)

優(yōu)點(diǎn)：完美解決上述兩種的缺點(diǎn)，

框架類：樣式框架（bootstrap,jquery-weui）,js框架 做過(guò)實(shí)際項(xiàng)目的vue,寫(xiě)過(guò)demo的react，也寫(xiě)過(guò)微信小程序

這部分不舉例子了，因?yàn)闉榱擞煤胿ue，會(huì)衍生出很多知識(shí)，如:webpack打包工具，es6語(yǔ)法，babel轉(zhuǎn)換es6,require,common.js思想，MVC框架，MVVM框架，當(dāng)然我還是只會(huì)用，底層的理解還是不精通。

插件類：說(shuō)起插件，我都數(shù)不清我用過(guò)多少插件了，分為滿意類，坑人類，無(wú)感類吧

滿意類：

在用到bootstrap樣式框架時(shí)，由它衍生出的表單驗(yàn)證插件bootstrap-validator，樣式是我見(jiàn)過(guò)的驗(yàn)證插件里樣式算是比較好看的，官網(wǎng)鏈接如下：

http://1000hz.github.io/bootstrap-validator/

驗(yàn)證效果如下：

今天先寫(xiě)到這，有空在更吧~~~

轉(zhuǎn)載于:https://www.cnblogs.com/zuoan-oopp/p/6629065.html

總結(jié)

以上是生活随笔為你收集整理的随心--------------总结一的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。