工作了兩年，一直沒有好好打理甚至說沒有開通自己的博客，直到最近才明白博客的重要性。

回想過去兩年的工作，一直忙忙碌碌，做過不少事，遇到過不少問題，每次都想著開通自己的博客，記錄下來，學會溫故而知新。但每次回到家，累的躺倒床上，給自己催眠，“明天再弄，明天復明天，明天何其多”，就這樣，被自己的“懶惰”，一直拖延到現在。

每天都是忙忙碌碌，很少靜下心來，思考自己到底是否真正掌握了一門知識。

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

樣式類：css，less,sass

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

-webkit-overflow-scrolling: touch

只知道使用了這個屬性，在手機上滑動屏幕就會很流暢，不會出現卡頓現象，至于這個屬性為啥使用后就可以流暢，不知道。

-webkit-appearance: none;

除去蘋果手機表單的默認樣式，

取值和兼容性如下：

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

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

等等。

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

當然最拿手的是jquery，也是熟練使用狀態，偶爾哪天興致勃勃的研究下它的源碼，，因為沒有記錄，轉眼也就忘了，偶爾還記得，如何解決“$”沖突,之所以對它印象深刻是因為，同事隨口問了句，然我說我就知道，

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

然后他給我又列舉了幾個，感覺很羞愧，一個專業前端還沒有一個非專業的知道的多。

大致總結了一下，有三種方式可以實現：

方式一：

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

優點：如果整個項目需要替換，可以寫個全局變量

缺點：引入了這段代碼后，不僅是當前的js文件，該html引用的所有js中，如果有用到jquery中的$，都得用$j來代替之前的$

方式二：

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

優點：解決上述缺點

缺點：只在ready函數里有效，通常情況下，我們會把經常用的邏輯處理封裝成函數，并把這些封裝好的函數寫在ready函數外面，這就會造成外面的函數jquery并不能改變。

方式三：

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

優點：完美解決上述兩種的缺點，

框架類：樣式框架（bootstrap,jquery-weui）,js框架 做過實際項目的vue,寫過demo的react，也寫過微信小程序

這部分不舉例子了，因為為了用好vue，會衍生出很多知識，如:webpack打包工具，es6語法，babel轉換es6,require,common.js思想，MVC框架，MVVM框架，當然我還是只會用，底層的理解還是不精通。

插件類：說起插件，我都數不清我用過多少插件了，分為滿意類，坑人類，無感類吧

滿意類：

在用到bootstrap樣式框架時，由它衍生出的表單驗證插件bootstrap-validator，樣式是我見過的驗證插件里樣式算是比較好看的，官網鏈接如下：

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

驗證效果如下：

今天先寫到這，有空在更吧~~~

轉載于:https://www.cnblogs.com/zuoan-oopp/p/6629065.html

總結

以上是生活随笔為你收集整理的随心--------------总结一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。