前端学习之路

本篇文章汇总了前端开发的学习资源，包括 JavaScript、TypeScript、Node.js、React、Vue.js 等技术的学习路径和参考资料，适合前端开发者参考。

ECMACScript/JavaScript/TypeScript

ECMAScript 是 JavaScript 的标准，JavaScript 是 ECMAScript 的实现。TypeScript 是 JavaScript 的超集，它增加了类型系统。

• TypeScript: https://www.typescriptlang.org/

• ECMACScript：http://www.ecmascript.org/index.php

• typescript-tutorial: https://github.com/xcatliu/typescript-tutorial

Node.js

Node.js 是一个免费、开源、跨平台的 JavaScript 运行时环境, 它让开发人员能够创建服务器 Web 应用、命令行工具和脚本。

• Node.js: https://nodejs.org/
• nvm(Node Version Manager): https://github.com/nvm-sh/nvm
• npm：https://www.npmjs.com/
• pnpm(Fast, disk space efficient package manager): https://pnpm.io/
• The Node Beginner Book/Node入门: https://www.nodebeginner.org/index-zh-cn.html
• Turborepo(高性能构建系统): https://turborepo.dev/
• Yarn: https://yarnpkg.com/

jQuery

jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它通过可在多种浏览器上运行的易于使用的 API，使 HTML 文档遍历和操作、事件处理、动画和 Ajax 等事情变得更加简单。凭借多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。

• jQuery: https://jquery.com/
• jQuery Validation Plugin: https://jqueryvalidation.org/
• jQuery CDN: https://releases.jquery.com/

Angular

Angular 是一个平台，用于构建移动和桌面 Web 应用。它是一个开源框架，由 Google 的工程师和社区志愿者共同维护。

• Angular: https://angular.dev/

React

React 是一个用于构建用户界面的 JavaScript 库。

• React: https://react.dev/

Vue.js

Vue 是一个渐进式 JavaScript 框架，用于构建用户界面。

• Vue.js: https://vuejs.org/
• Vue Router: https://router.vuejs.org/
• Vue I18n(Vue I18n is internationalization plugin for Vue.js): https://kazupon.github.io/vue-i18n/

构建工具

• Webpack: https://webpack.js.org/
• 尚硅谷Webpack5入门到原理: https://www.bilibili.com/video/BV14T4y1z7sw/
• Vite: https://github.com/vitejs/vite
• Rollup: https://rollupjs.org/
• esbuild: https://esbuild.github.io/
• Parcel: https://parceljs.org/
• Gulp: https://gulpjs.com/

容器

• PWA(Progressive Web Apps): https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps
• Electron: https://www.electronjs.org/
• Tauri: https://tauri.app/
• NW.js(node-webkit): https://nwjs.io/
• Capacitor: https://capacitorjs.com/

测试框架

• vitest: https://vitest.dev/
• Jest(Jest基于Jasmine): https://jestjs.io/
• Jasmine: https://github.com/jasmine/jasmine
• jsunit: http://github.com/pivotal/jsunit

CSS

• Tailwind CSS(提供大量的工具类): https://tailwindcss.com/
• PostCSS(一个用 JavaScript 编写的工具，用于转换 CSS 代码): https://postcss.org/

其它

• uiverse(The Largest Library of Open-Source UI): https://uiverse.io/
• MDN: https://developer.mozilla.org/zh-CN/
• W3C: http://www.w3.org/
• W3C QA: http://www.w3.org/QA/2002/04/valid-dtd-list
• W3Schools: https://www.w3schools.com/
• W3School: http://www.w3school.com.cn/index.html
• ESLint: https://eslint.org/
• 前端开发框架对比：http://www.ibm.com/developerworks/cn/web/1404_wangfx_jsframeworks/
• 网页制作完全手册: https://documentation.help/DHTML-zh/default.html
• Front End JavaScript Development Handbook – React, Angular, and Vue Compared: https://www.freecodecamp.org/news/front-end-javascript-development-react-angular-vue-compared/
• 当我说前端基础时，我在说什么？ —— 最近几年在前端圈的观察和反思: http://weibo.com/p/1001603933000810243086
• dojo：http://dojotoolkit.org/
• ExtJS：https://www.sencha.com/
• Backbone.js：http://backbonejs.org/
• UNDERSCORE.JS：http://underscorejs.org/
• Zepto.JS：http://zeptojs.com/
• IMMUTABLE.JS：http://facebook.github.io/immutable-js/
• css-layout：https://github.com/facebook/css-layout
• flux：http://facebook.github.io/flux/docs/overview.HTML
• refluxjs：https://github.com/reflux/refluxjs
• Ember.js: http://emberjs.com/
• JSX: http://facebook.github.io/jsx/
• echarts：http://echarts.baidu.com/index.html
• antv: http://antv.alipay.com/zh-cn/index.html
• CommonJS：http://www.commonjs.org/
• PhantomJS: https://github.com/ariya/phantomjs
• expo(making universal native apps with React): https://github.com/expo/expo
• 清理无用的CSS样式的几个工具（转）: https://www.cnblogs.com/jiangxinnju/p/5697644.html

个人网站搭建

• 静态博客网站生成器jekyll、hexo和hugo如何选择？有什么区别？https://www.yundashi168.com/254.html
• jekyll(将纯文本转换为静态博客网站, Ruby): https://jekyllrb.com/ http://jekyllcn.com/
• minimal-mistakes(jekyll主题): https://github.com/mmistakes/minimal-mistakes
• modernist(jekyll主题): https://github.com/orderedlist/modernist
• Hexo(快速、简洁且高效的博客框架，Node.js): https://hexo.io/
• Hugo(The world’s fastest framework for building websites, Go)：http://gohugo.io/ https://www.gohugo.org/
• WordPress: https://cn.wordpress.org/
• 让Google搜索到用Jekyll搭建在Github Pages上的博客: https://evanli.github.io/blog/2018/10/25/let-jekyll-github-pages-be-searched-by-google/

Tools

• firebug: http://getfirebug.com/
• Brackets: http://brackets.io/
• Tridiv is a web-based editor for creating 3D shapes in CSS: http://tridiv.com/
• CodeMirror: http://codemirror.net/

RequireJS

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

• http://requirejs.org/

• Javascript模块化编程（一）：模块的写法: http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
• Javascript模块化编程（二）：AMD规范: http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
• Javascript模块化编程（三）：require.js的用法: http://www.ruanyifeng.com/blog/2012/11/require_js.html
• 大漠穷秋: https://my.oschina.net/mumu/blog

EasyUI

• http://www.jeasyui.com/

Ajax

• ASP.NET Ajax: Enhanced Interactivity and Responsiveness: http://www.asp.net/ajax
• Ajax Q&A(Ajax”发明人”答问)：http://www.360doc.com/content/07/0225/13/10305_375511.shtml
• [四天学会ajax]学习ajax教程第一天: https://www.cnblogs.com/xueliang/articles/1100724.html
• [四天学会ajax] 学习Ajax教程第二天，JavaScript 和 Ajax 发出异步请求: https://www.cnblogs.com/xueliang/archive/2008/03/11/1100737.html
• [四天学会ajax] 学习Ajax教程第三天,Ajax 中的高级请求和响应: https://www.cnblogs.com/xueliang/articles/1100747.html
• [四天学会ajax] 学习Ajax教程第四天，利用 DOM 进行 Web 响应: https://www.cnblogs.com/xueliang/articles/1100756.html

XPath

• XPath Parser: http://xpathparser.codeplex.com/
• XPath Visualizer: http://xpathvisualizer.codeplex.com/
• XPath Tester: http://xpathtester.codeplex.com/

Foundation

• http://foundation.zurb.com/
• http://www.foundcss.com/

Chrome调试

• 最全面的JavaScript调试技巧总结: http://www.codeceo.com/article/javascript-debug-skills.html