前端⼯具
- 接⼝模拟 + 数据模拟
https://github.com/wll8/mockm - 查询浏览器兼容性
https://caniuse.com/ - 发关请求
https://www.npmjs.com/package/axios - 时间处理
https://github.com/iamkun/dayjs - ⽅便操作 dom
https://github.com/jquery/jquery - nodejs 依赖安装镜像⼯具
- 接⼝框架
https://github.com/expressjs/express - 数据模拟
https://www.npmjs.com/package/mockjs - css 预处理器
https://www.npmjs.com/package/less - nodejs 程序进程管理
https://www.npmjs.com/package/pm2 - nodejs 环境变量管理⼯具
https://www.npmjs.com/package/cross-en
书籍
第一本:《JavaScript 语言精粹(修订版)》
我毕业后工作头一两年读的第一本 JavaScript 书就是《JavaScript 语言精粹》,当时完整地读了两篇,后来还时不时地会翻里面的重点看。对于前端刚工作的人和前端刚入门的人来说,需要反复阅读和理解。这本书可以深入理解 JavaScript 的特性,写出高质量的代码,适合有 JavaScript 语言基础的人学,不适合于作为零基础入门的教材。
第二本:《数据结构与算法 JavaScript 描述》
如果你专注前端开发,又想学习数据结构和算法,那么这本书是非常不错的选择,至少在中文书籍中,我还没有见到过一本比这本更好的用 JavaScript 描述的数据结构与算法书。
其实这本书在实际工作中没有太大的实战性,就像很多人说的,实际工作中几乎用不到算法。但是,算法绝对是值得每一个程序员去学习的。学习算法是为了提高逻辑思维能力和解决问题的能力,这是每个公司都第一看重的能力。
如果你发现你学的技术已经有了到了瓶颈的感觉,那么说明你需要学习算法了。就算为了给你工作加分,也应该学习算法。如果面试时让你写一个冒泡排序,你不会,那岂不是很尴尬。
当然,这书讲的都是数据结构和算法基础知识,比如字典、集合、二叉树、排序算法等。但如果你已经有这基础,我觉得对于前端开发这份工作已经够了,如果你想学习机器学习或继续锻炼自己的逻辑思维能力,我推荐关注我的系列教程《算法》,也是基于 JavaScript 语言的。
第三本:《CSS 揭秘》
这本书是一书很好的 CSS 实战性教程。每一节都是先给出一个“难题”,再给出一个或多个“方案”,并会作详细解释。掌握 CSS 的最好学习方法就是多练,这本书是中文 CSS 书籍中我个人最喜欢的一本。为什么它写的好。举个书中的例子:
书中第二章第 1 节讲的是半透明边框,这个场景是很常见的,看起来很简单,就是设置 boder 属性而已,但默认情况下,背景会延伸到边框的区域下层,也就是说你即使设置了半透明,默认情况这个半透明边框是看不到的。具体解决方案我就不讲了,大家可以去看这本书。
第四本:《JavaScript 高级程序设计, 第 3 版》
这本书和《JavaScript 权威指南, 第 6 版》相比,我强烈推荐《JavaScript 高级程序设计》。如果你想正儿八经地系统性地学习一遍 JavaScript,那么这本书应该是最好的选择。而且我建议看完后可以画画重点,将来既可以作为参考用,对于面试也是能派上用场的。当然,如果你已经有一定基础了,不必每一章每一节都看,可以筛选着看。
这本书算是基础类的了,如果你想对 JavaScript 有更深入更细的理解和掌握,特别是理解那些比较晦涩难懂的知识点,比如this、原型、委托等,那就看看《你不知道的 JavaScript》这套书,它分为上、中、下三卷。
第五本:《ECMAScript 6 入门》
这本书是阮一峰老师写的,而且是开源的,在线阅读地址是:http://es6.ruanyifeng.com,讲的是 ES6 标准下的新语法,我个人觉得讲得很好,言简意赅。如果你用过 Vue、React 等前端框架,你就知道 ES6 标准的 JavaScript 语法无处不在。所以如果你还没学,或者学得不够全,那么我建议你看看这个教程。
第六本:《JavaScript 函数式编程》
函数式编程是一种编程范式,它的优点是简洁易读,模块化,低耦合,适合并发编程等,很多前端大咖都推过函数式编程。这本对书函数式编程的相关概念和编程思想都讲的比较好也容易理解,从中你可以学习到纯函数、高阶函数、柯里化(Currying) 等知识。如果你用过 React,这一类知识肯定用得比较多,学好函数式编程也有助于你更好地理解 React 的设计思想。
不过,有一点不好的就是,比如说柯里化,如果直接说 Currying 反而更容易理解,不是说这本书翻译得不好,很多术语用中文表达总觉得不是很恰当,我觉得如果你能阅读英文版的最好读英文版的。
框架、库和组件
- ice 阿里飞冰,从此再也不担心管理系统的开发。(个人觉得简单项目还是可以,复杂的做不了)
- polymer 以一切皆组件、最少化代码量、最少框架限制为设计理念的web组件构建框架
- impress.js 创建令人兴奋的演示。使用css3的转换和过渡,这个库允许你创建令人印象深刻的演示文稿
- ScrollMagic 一款非常赞的滚动交互的js插件,可用于官网与宣传广告场景
- reveal.js 基于css3的3D幻灯片工具,能够制作绚丽的演示文稿并生成html格式,将它发布到web上
- nodePPT 使用nodejs写的网络幻灯片,可能是迄今为止最好的网页版ppt
- three.js 是js编写的webgl第三方库,提供了非常多的3D显示功能
- TimelineJS 轻松制作时间轴
- highlight.js js语法高亮,既可以运行在浏览器端也可以运行在服务端
- commander.js nodejs命令行工具,可用于制作那种node命令行终端应用
- togetherjs 由Mozilla打造的一款可以给网站添加实时协作功能的js库
- HTML 轻量级的简化与dom操作的js库
- wechat.js 微信相关的 js 操作:分享、网络、菜单
- JavaScript-Load-Image 一个js加载和转换图像文件的库
- progress.js 一个js的库,帮助开发人员为网页上的每个对象创建和管理进度条效果
- foundation 号称世界上最先进的响应式前端框架,也是一款移动端优先的框架
- Sugar 扩展了现有的js对象的方法,让你可以用更少的代码做更多的事情
- todomvc 帮你挑选一款mv框架,它使用不同的最流行的mv框架实现了一个相同的todo应用
- Pikaday 是一个js日期选择器,特点是轻量级、无依赖和模块化的css
- webuploader 一个简单的以html5为主,flash为辅的现代文件上传组件。支持大文件分片并发上传,极大的提高了文件上传效率
- headroom.js 是一个轻量级、纯js组件,用来隐藏或展现页面上的元素,为你的页面留下更多展示内容的空间
- ua-device 史上最全面的userAgent解析库,百度FEX出品
- share.js 一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣等
常用网站
- MDN开发者文档网址:https://developer.mozilla.org/zh-CN/
- CSS教程:https://www.schoolw3c.com/html-css/css/
- node中文网:http://cnodejs.org/getstart
- JavaScript教程网:https://zh.javascript.info/
- web开发人员必备工具包(实现快速敲代码):https://docs.emmet.io/
- 常用色彩搭配表:http://tool.c7sky.com/webcolor/
- 阿里巴巴图标库:https://www.iconfont.cn/
- web开发人员必备工具包(实现快速敲代码):https://docs.emmet.io/
- 谷歌浏览器插件下载地址: http://chromecj.com/
- ES6入门(阮一峰大佬的):http://es6.ruanyifeng.com/
- 短信验证码接口:https://www.mysubmail.com/sms/api?tag=jq22
- 轮播图插件:https://www.swiper.com.cn/
- 放大镜插件:http://www.elevateweb.co.uk/image-zoom/examples
- 响应式瀑布流插件:http://www.jq22.com/jquery-info20261
- 码云代码托管平台:https://gitee.com/
- github代码托管平台:https://github.com
- SVN代码托管平台:https://svnbucket.com/?ADTAG=bdss#/
- SVN代码托管中心:http://www.svnchina.com/
- 阿里云:https://www.aliyun.com
- 腾讯云:https://cloud.tencent.com/
- html中文网:https://www.html.cn/
- React官网:https://reactjs.org/
- Redux官网:https://react-redux.js.org/
- React Router:https://reacttraining.com/react-router/
- Vue官网:https://cn.vuejs.org/
- NodeJS官网:http://nodejs.cn/
- 微信开发者平台:https://developers.weixin.qq.com/
- 钉钉开发者平台: https://ding-doc.dingtalk.com/
- 百度地图开发者平台:https://passport.baidu.com
- DvaJS:https://dvajs.com/
- MDN开发者文档:https://developer.mozilla.org/zh-CN/
- 菜鸟教程:https://www.runoob.com/
- W3CSchool:http://www.w3school.com.cn/
- JavaScript教程网:https://zh.javascript.info/
- 一行代码搞定bug监控:https://www.fundebug.com/?tdsourcetag=s_pcqq_aiomsg
- web开发人员必备工具包(实现快速敲代码):https://docs.emmet.io/
- 让代码提交的时候先执行一次代码,如果有报错不让提交:www.npmjs.com/package/eslint-config-airbnb
- 阿里巴巴图标库:https://www.iconfont.cn/
- UI颜色布料:https://www.materialui.co/colors
- UI必备颜色表(色块+色码):https://blog.csdn.net/weixin_43606158/article/details/97569176
- logo在线制作,有很多:http://www.logofree.cn/
- 免费设计图,有很多:https://www.chuangkit.com/designtools/designindex
- 图片试别转换各种格式,有很多,只列举了一个:https://zhcn.109876543210.com/
- 在线开发工具:https://tool.lu/c/developer
- 在线做图【ProcessOn 支持流程图、思维导图、原型图、UML、网络拓扑图、组织结构图】:https://www.processon.com/
- 项目部署流程:https://cloud.tencent.com/developer/information/部署服务器步骤
- 网站SEO: http://www.jj3721.com/
- 验证正则表达式的可视化工具:https://regexper.com/
- 开源、免费、企业级CMS系统:https://www.siteserver.cn/
- 前端开发必备JS功能函数总结(上):https://blog.csdn.net/weixin_43606158/article/details/94590474
- 前端开发必备JS功能函数总结(下):https://blog.csdn.net/weixin_43606158/article/details/94660402
- 渐进式web应用程序核对表:https://developers.google.cn/web/progressive-web-apps/checklist
- 在线存放图片的地址:https://sm.ms/
- 代码变漂亮图片:https://carbon.now.sh
- MintUI:https://mint-ui.github.io/#!/zh-cn
- ElementUI:https://element.eleme.cn/#/zh-CN
- iViewUI:https://www.iviewui.com/
- Layui:https://www.layui.com/
- cubeUI:https://didi.github.io/cube-ui/#/zh-CN
- Antd:https://ant.design/index-cn
- MUI:http://dev.dcloud.net.cn/mui/
- Animate.CSS:https://daneden.github.io/animate.css/
- ECharts:https://www.echartsjs.com/index.html
- HighCharts:https://www.highcharts.com.cn/
- 富文本编辑器wangEditor: http://www.wangeditor.com/
- 富文本编辑器UEditor: https://ueditor.baidu.com/website/onlinedemo.html
- 蚂蚁数据可视化:http://antv.alipay.com/zh-cn/index.html
- 热力图插件:https://www.patrick-wied.at/static/heatmapjs/
- 视频监控直播的插件VLC:https://www.videolan.org/
- 直播软件开发:http://www.nodemedia.cn/
- 网易云信:https://netease.im/
- 聊天开放软件:https://www.oschina.net/p/keybase
- 有道翻译API:http://fanyi.youdao.com/openapi?path=data-mode
- 游戏开发:http://phaser.io/
- 力扣JS题库:https://leetcode-cn.com/
- 刷算法题:https://www.lintcode.com/
- ES6入门(阮一峰大佬的):http://es6.ruanyifeng.com/
- babel(将ES6代码转为ES5代码):https://babeljs.io/
- 处理时间与日期的JS库:http://momentjs.cn/
- Lodash:https://www.lodashjs.com/
- 你可能不需要jQuery:http://youmightnotneedjquery.com/
- 云小蜜智能机器人API:https://help.aliyun.com/product/59495.html?spm=a2c4g.11186623.3.1.7dad1b005dRM5F
- 易万维源接口:https://www.showapi.com/api/apiList
- 短信验证码接口:https://www.mysubmail.com/sms/api?tag=jq22
- 榛子短信验证码接口: http://smsow.zhenzikj.com/
- 草料二维码生成器:https://cli.im/
- 二维码
- RAP2假数据接口:http://rap2.taobao.org/
- 可扒的真实电商数据:http://www.xiongmaoyouxuan.com/#/
- 易文档接口:https://easydoc.xyz - -
- CSDN:https://me.csdn.net/atsoar
- 免费接口:http://www.bejson.com/knownjson/webInterface/
- 假数据接口(测试用):http://jsonplaceholder.typicode.com/
- 上传文件转进制的formData: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
- jQuery插件库:http://www.jq22.com/search
- 轮播图插件:https://www.swiper.com.cn/
- 放大镜插件:http://www.elevateweb.co.uk/image-zoom/examples
- 响应式瀑布流插件:http://www.jq22.com/jquery-info20261
- art-template模板引擎:https://aui.github.io/art-template/zh-cn/docs/
- ejs模板引擎:https://ejs.bootcss.com/
- 小表情的emoji:https://emojipedia.org/
- Postman测试前端请求后端接口:https://www.getpostman.com/
- coding代码托管平台:https://coding.net/
- 码云代码托管平台:https://gitee.com/
- github代码托管平台:https://github.com/
- SVN代码托管平台:https://svnbucket.com/?ADTAG=bdss#/
- SVN代码托管中心:http://www.svnchina.com/
- 禅道:https://www.zentao.net/
- 蓝湖(ps切图):https://lanhuapp.com/
- git官网:https://git-scm.com/
- npm官网:https://www.npmjs.com/
- npm模块管理器介绍:https://javascript.ruanyifeng.com/nodejs/npm.html#toc18
- 码神岛: https://msd.misuland.com/
- 掘金网:https://juejin.im/
- 思否:https://segmentfault.com/
- 知乎:https://www.zhihu.com
- stack Overflow:https://stackoverflow.com/
- v2ex社区:https://www.v2ex.com/
- CtoLib码库: https://www.ctolib.com
- 牛客网:https://www.nowcoder.com
- FCC中文网:https://www.freecodecamp.one/
- Web 开发练习题:https://www.freecodecamp.org/
- 百度前端技术学院 — 前端开发项目库:http://ife.baidu.com/
- FCC 的 Medium 频道:https://www.freecodecamp.org/news/
- 阿里云:https://www.aliyun.com
- 腾讯云:https://cloud.tencent.com/
- GitBook:https://legacy.gitbook.com/@llh911001
- 妙味课堂:https://miaov.com/
- 慕课网:https://www.imooc.com/
- html中文网:https://www.html.cn/
- hCoder:http://www.hcoder.net/
- 扣丁学堂:http://www.codingke.com/
- 开课吧: https://www.kaikeba.com/
- gitbook: https://legacy.gitbook.com/
- 各种语言的书:https://www.laojiyou.com/
- React官网:https://reactjs.org/
- Redux官网:https://react-redux.js.org/
- React Router:https://reacttraining.com/react-router/
- Vue官网:https://cn.vuejs.org/
- NodeJS官网:http://nodejs.cn/
- React Native: https://reactnative.cn/
- uni-app:https://uniapp.dcloud.io/
- Mui: https://dev.dcloud.net.cn/mui/
- Taro: https://taro.aotu.io/?tdsourcetag=s_pcqq_aiomsg
- 微信小程序开发者平台:https://developers.weixin.qq.com/
- 微信开发者平台: https://open.weixin.qq.com/
- 钉钉开发者平台: https://ding-doc.dingtalk.com/
- 百度地图开发者平台:https://passport.baidu.com
- DvaJS:https://dvajs.com/
- jQuery官网:https://jquery.com/
- jQuery API中文文档【在线手册】:http://jquery.cuishifeng.cn/
- ZeptoJS官网:https://zeptojs.com/
- cheerioJS安装地址:https://www.npmjs.com/package/cheerio
- RequireJS官网:https://requirejs.org/
- Sass官网(CSS预处理器,通过编程的方式来开发CSS):https://sass-lang.com/
- Less官网(同上):http://lesscss.org/
- CSS参考笔记:http://css.doyoe.com/
- Bootstrap官网:https://www.bootcss.com/
- CSS优质内容网站:https://css-tricks.com/
- CSS 优质内容网站:https://css-weekly.com/
- HTML 优质内容网站:https://www.html5rocks.com/en/
- JS 优质内容:http://www.echojs.com/
- 移动端 Web 开发:https://mobiledevweekly.com/
- VScode快捷键介绍:https://www.cnblogs.com/bindong/p/6045957.html
- Socket通信:https://socket.io/
- JSONPlaceholder:http://jsonplaceholder.typicode.com/
- 拉勾网:https://www.lagou.com/
- Boss直聘:https://www.zhipin.com/?sid=sem_pz_bdpc_dasou_title
- 猎聘网:https://www.liepin.com/
- 智联招聘:http://landing.zhaopin.com/register
- 一早一晚(国内远程工程师招聘):https://yizaoyiwan.com/
- 接项目接私活的网站总结:https://blog.csdn.net/weixin_43606158/article/details/90728142
- web开发互助网:http://hz.uyi2.com/
- 前端面试题一到三年: https://blog.csdn.net/weixin_43606158/article/details/89811189
- 前端面试题三到五年:https://blog.csdn.net/weixin_43606158/article/details/89640672
- 项目中常用插件:https://blog.csdn.net/weixin_43606158/article/details/90136700
- React 新闻订阅:http://reactjsnewsletter.com/issues
- 社区:https://hashnode.com/
- 节点周刊:https://nodeweekly.com/
- 前端焦点:https://frontendfoc.us/
- JavaScript周刊:https://javascriptweekly.com/
- 各种书籍:https://www.sitepoint.com/
- 各种书籍文章:https://www.smashingmagazine.com/
- 资源数据:https://www.ceicdata.com
- 99藏书网【非IT行业图书】:https://www.99lib.net/book/
- 投资界新闻:https://news.pedaily.cn/
- 百度网盘免费超级会员列表:https://www.vipleyuan.com/bdy
- 开发者中心: https://dev.dcloud.net.cn