JAVASCRIPT

前端-系统总结

2016-12-07  本文已影响95人  爱扎马尾的小狮子

一、知识总结

1. 打包工具

fis/grunt/gulp/webpack
项目部署、代码优化、提高性能、文件压缩打包

2.插件

(1)地图

百度地图、leafletjs
(国外免费地图插件http://leafletjs.com/reference.html#map-conversion-methods)
http://leafletjs.com/

(2)日期

JQuery datepicker
bootstrap-datetimepicker.js
(http://www.tuicool.com/articles/7neYr2)
jquery.simple-event-calendar(可以添加事件,打标识)
https://sensortower.github.io/daterangepicker/

(3)文件上传

webuploader\Uploadify

(4)表单验证

jQuery Form Validator\原生js
http://validatejs.org/

(6)css库

pure.css( http://purecss.io/base/)
fundation
bootstrap

(7)模版

baiduTemplate(http://tangram.baidu.com/BaiduTemplate/)
smarty
baiduTemplate(百度)\artTemplate(腾讯)\juicer(淘宝)\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplate

(8)键盘事件

keymaster.js https://github.com/madrobby/keymaster

(9)颜色插件

Rainbow-custom

(10)图表

highcharts-zepto(https://github.com/mrdanadams/highcharts-zepto)
echarts

(11)模块化加载

requirejs\seajs

(11)拖拽

resizer.js 李哥的插件
jquery-ui的sortable插件

(12)兼容

IE8\IE9 placeholder
jquery-placeholder.js

(13)python插件

快速代码到服务器
_codesync
文件夹下的三个文件

(14)进度条

http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html
NProgress.js:http://ricostacruz.com/nprogress/

(15)自定义滚动条

http://www.bootcdn.cn/jquery.nicescroll/
例子:http://www.html580.com/10187/demo
nanobar.js:http://nanobar.micronube.com/

(15)动画库

animate.css

(16)全屏滚动插件

jQuery fullPage.js

(17)amaze ui 一个移动优先的跨屏前端框架
(18)获取图片主色调 jquery.adaptive-backgrounds.js 基于rgbaster.js实现

兼容ie9+ 火狐 谷歌
http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/
https://github.com/briangonzalez/jquery.adaptive-backgrounds.js
https://github.com/briangonzalez/rgbaster.js

(19)移动端滚动插件

isscroll.js http://wiki.jikexueyuan.com/project/iscroll-5/

(20)图片裁剪

https://github.com/libmw/imageClipper

(21)轮播插件

jquery.carouFredSel
swipper http://www.swiper.com.cn/demo/index.html
unslider http://unslider.com/

(22)javascript 工具库

https://lodash.com/docs#difference

(23)前端生成二维码

js QRCode.js
http://code.ciaoca.com/javascript/qrcode/
color-thief-master

(24)代码检测

JSLint

3.手机端框架

apache cordova(PhoneGap)、jqmobi、Zeptojs、jQuery Mobile、GMUzepto
文档
http://www.css88.com/doc/zeptojs_api/
(中文版)
http://zeptojs.com/#$.camelCase
(英文版)
cordova
中文
http://cordova.apache.org/docs/zh/edge/index.html
视频下载地址
http://bbs.php100.com/read-htm-tid-518128.html
http://bbs.phonegap100.com/thread-361-1-1.html
jqMobi
指南系列教程是《jqMobi JavascriptFrameworks Cheat Sheet》的中文版,详细介绍了jqMobi.
http://www.verydemo.com/demo_c98_i7766.html
PhoneGap
网站
http://www.phonegap100.com/

4.文档编辑

markdown(https://www.zybuluo.com/mdeditor在线编辑器)

5.软件

(1)编程sublime\phpstorm\webstorm
(2)思维导图mindManager
(3)nodejs安装npm安装
(4)python2.7安装及插件
(5)翻墙goagent、蓝灯
(6)连接服务器SecureCRT、Xftp
(7)android SDK

6.代码管理工具git\svn

git廖雪峰教程
http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000
基于git的源代码管理模型——git flow
https://ihower.tw/blog/archives/5140

7.css预编译语言

less(http://www.lesscss.net/)\sass
less源码:
https://github.com/twbs/bootstrap/blob/master/less/variables.less

8.素材

设计百宝箱 http://uirush.com/
17素材 http://www.17sucai.com/category/1/31/44

webstorm注册码链接:http://idea.qinxi1992.cn/

vue相关网站:
ui框架:https://www.iviewui.com/docs/guide/install

上一篇下一篇

猜你喜欢

热点阅读