失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > Web前端技术 Web学习资料 Web学习路线 Web入门宝典

Web前端技术 Web学习资料 Web学习路线 Web入门宝典

时间:2023-08-22 23:22:42

相关推荐

Web前端技术 Web学习资料 Web学习路线 Web入门宝典

学习路线

第一章 核心

1.Node

Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript

运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎。相当与JDK。

Github:

/nodejs/node

官网教程:

/en/

其他教程:

http://nqdeng.github.io/7-days-nodejs/

/learn/348

2.Npm

NPM(node package

manager)是 Node.js 的包管理和分发工具。它类似于PHP的Composer,Ruby的gem,Python的pip,Java的Maven……它可以让 JavaScript 开发者能够更加轻松的共享代码和共用代码片段,并且通过npm管理你分享的代码也很方便快捷和简单。截至目前

最新的稳定版 npm 是 3.3.12。

Github:

/npm/npm

官方网站:

官方教程:

/getting-started

其他教程:

/a/1190000005799797

/kelsen/p/4947859.html

/nodejs/nodejs-npm.html

3.Gulp

gulp是基于Nodejs的自动任务运行器, 能自动化地完成

javascript、coffee、sass、less、html/image、css

等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,它借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。

Github:

/gulpjs/gulp

官方网站:

/

官方文档:

/gulpjs/gulp/blob/master/docs/API.md

其他教程:

/2050/p/4198792.html

/articles/FJVNZf

/Darren_code/p/gulp.html

4.Bower

Bower是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt。

Bower与Npm:

简单的说,npm是进行后端开发中,使用的模块安装工具,而bower,是前端的模块安装工具。比如,在安装express,socket.io时,当然使用的是npm,那么比如bootstrap,jquery等前端框架,需要使用bower,npm

是伴随 Node.js 出现的一个包管理器,最开始只能支持 Node.js 的模块管理,但是后来,

npm 官网经过一次改版,打出的口号是,javascript

的包管理器,所以,其已经不在局限于是Node.js 的模块管理了,已经通用到了所有 js

的包管理工具了,可以说,前后通吃了。bower

的话,从一开始,就是专门为前端表现设计的包管理器,一切全部为前端考虑的。npm 和

bower 的最大区别,就是 npm 支持嵌套地依赖管理,而

bower只能支持扁平的依赖(嵌套的依赖,由程序员自己解决)。嵌套依赖,指的就是,你依赖的软件包,还有它自己的依赖,好像摘葡萄,一摘一大串。在服务器环境的时候,这并没什么关系,因为存储空间够大,一切代码都是本地运行,只要解决完依赖就行了,但是到了用户产品的浏览器里,就很成问题了,你不能让用户去下载好几M的js代码,那就太糟糕了。在这个情况下,就需要程序员自己手动解决用到的类库的嵌套依赖问题。比如确保各种各样的插件都依赖同一个版本的jQuery。为什么有很多项目

bower 和 npm 都用呢,那是因为要用 bower 管理前端的包,而用 npm

去管理一些后端的包和构建工具,例如,yeoman,grunt,gulp,jshint

等等等等。所有的包管理器,都有自己的弊端,要视需要选用对自己的项目最合适的。

最新更新于1月17日:

Bower已经过时,作者也不在进行维护,包管理工具已经是npm的天下,不过yarn也在快速崛起,值得研究。

Github:

/bower/bower

官方网站:

https://bower.io/

官方教程:

https://bower.io/#getting-started

其他教程:

/a/1190000002971135

5.Browserify­

browserify是一个编译工具,通过它可以在浏览器环境下像nodejs一样使用遵循commonjs规范的模块化编程。你可以使用browserify来组织代码,也可以使用第三方模块,不需要会nodejs,只需要用到node来编译,用到npm来安装包.browserify模块化的用法和node是一样的,所以npm上那些原本仅仅用于node环境的包,在浏览器环境里也一样能用。

Github:

/browserify/browserify

官方网站:

/

官方教程:

/substack/node-browserify#usage

学习资料

/articles/IFvQ3qv

/a/1190000002941361

/liulangmao/p/4920534.html

6.Browsersync

Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是

Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下:“假设您的桌子上有pc、ipad、iphone、android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师,使用它将提高您30%的工作效率。

Github:

/BrowserSync/browser-sync

教程:

/

7.Less-.less,Saas-.scss

Sass,Less 是一门 CSS 预处理语言,它扩展了 CSS

语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node

或浏览器端。

less 官网:

/

less中文网:

/

sass官网:

http://sass-/

sass中文网:

https://www.sass.hk/

8.Es6

ECMAScript 6

(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在发布的,所以又称ECMAScript

.也就是说,ES6就是ES。

教程:

/

/a/1190000004365693#articleHeader6

9.Babel

Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。

Github:

/babel/babel

官方网站:

http://babeljs.io/

教程:

/

10.Q.js

Promise是抽象异步处理对象以及对其进行各种操作的组件。JavaScript的异步执行都是以回调函数来执行的。Promise可以简化回调并提供链式异步调用。

Github:

/kriskowal/q

教程:

/promises-book/

Github:

/kriskowal/q

11.Express.js

基于 Node.js 平台,快速、开放、极简的 web 后端开发框架。

Github:

/expressjs/express

官方网站:

/

中文网:

/

12.Fontawesome

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

Github:

/FortAwesome/Font-Awesome

官方地址:

/

13.yarn

Yarn 是一个依赖管理工具。它能够管理你的代码,并与全世界的开发者分享代码。Yarn

是高效、安全和可靠的,你完全可以安心使用,与npm属于同一类型的库

中文官方教程:

/docs/getting-started.html

其他教程:

http://mp./s/FnCa0wqdHKQN4syrPIPSAA

14.ESLint

提供一个插件化的javascript代码检测工具

Github:

/eslint/eslint

官网:

/

教程:

/

15.typescript

TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。编译出来的

JavaScript 可以运行在任何浏览器上。TypeScript

编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。

Github:

/Microsoft/TypeScript

教程:

/

/introduction/what-is-typescript.html

第二章 插件库

第三章 gulp自动化构建组件(FEZ项目实践)

第四章 React

react组件轮子集合(摘自antd)

第五章 Vue:

第六章 Webpack:

第七章 CSS:

CSS样式库:

第八章 UI:

第九章 分散技术:

1.**__filename**

在Node.js中,预定义了两个变量:用于获取当前模块文件名的__filename变量与用于获取当前目录名的__dirname变量。在任何模块文件内部,可以使用__filename变量获取当前模块文件的带有完整绝对路径的文件名。

2.fis

3.PostCSS

4.Prettier1.0

JS程序员格式化代码神器!

5.Swagger

是一个简单但功能强大的API表达工具,使用Swagger生成API,我们可以得到交互式文档,自动生成代码的SDK以及API的发现特性等

6.vs code

一款免费,小巧,好看的编辑器,微软出品

官方教程:

/docs

第十章 前端相关文章链接:

第十一章 面试相关:

第十二章 其他文章链接:

如果觉得《Web前端技术 Web学习资料 Web学习路线 Web入门宝典》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。