随心--------------总结一

工作了两年,一直没有好好打理甚至说没有开通自己的博客,直到最近才明白博客的重要性。

回想过去两年的工作,一直忙忙碌碌,做过不少事,遇到过不少问题,每次都想着开通自己的博客,记录下来,学会温故而知新。但每次回到家,累的躺倒床上,给自己催眠,“明天再弄,明天复明天,明天何其多”,就这样,被自己的“懒惰”,一直拖延到现在。

每天都是忙忙碌碌,很少静下心来,思考自己到底是否真正掌握了一门知识。

回想过去的两年 ,也是用过不少插件。自己归类下:

样式类: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/

验证效果如下:

今天先写到这,有空在更吧~~~

posted @ 2017-03-27 21:59  左岸-oopp  阅读(182)  评论(0编辑  收藏  举报