二〇一六年的前端入门指南

本文来自egoistian,点击「阅读原文」查看完整文章。

年初在 V2EX 看到很多人发帖问前端如何入门,我姑且来分享一下我的经验。

或许你不知道我是谁,不过如果你对前端有兴趣,都可以联系我帮你 Review 代码、提供改进建议,这有我的 GitHub 地址。

我假设阅读者只了解过简单的 HTML/CSS。

HTML

HTML 没有了 CSS 就什么都不是,它相当于给网页各个区域命名,然后让你可以进行更多的操作。比如头部导航栏,你经常会给它起个名字叫 header。

CSS

CSS 是层叠样式表(Cascading Style Sheets)的缩写,它是用来定义你的 HTML 的展现形式的一种语言。比如让你的 HTML 里的文字显示不同字体,一个元素显示不同的高度。

HTML+CSS

HTML 和 CSS 都是语法非常松散的语言,这样的导致了它们入门非常简单,然而一旦代码量变大维护就会很困难。

模板引擎

假设你有两个网页,它们共用一个导航栏(header),然后只有主体(content)部分显示不同的内容,在已有知识背景下你只能做两个网页,把导航栏的代码复制两次。

于是有了模板引擎,比如 jade,他可以让你复用重复的模板,减少代码量,提高可维护性。

CSS 处理器

嵌套的风格让作用域更清晰,你同时可以尽可能地只用标准的 CSS 属性然后让 CSS 处理器帮你兼容其它浏览器。推荐使用 PostCSS,它本身并不改变你的 CSS 代码,但它把你的代码抽象成一个 JavaScript 对象让你能够通过插件来随心所欲地进行操作,比如实现嵌套风格以及自动加 -moz -webkit 这些前缀。你可以自己写插件同时它已经有大量现成的插件供你使用。

HTML+CSS 小结

现在你知道了 HTML/CSS 在一起使用的时候能干什么,也知道了用模板引擎、CSS 处理器可以让你更好地写 HTML/CSS。要记住,「更好」也许只是在代码量增大的情况下更明显。

那么这些模板引擎和 CSS 处理器是怎么实现的?很多都是用的 JavaScript。

JavaScript

JavaScript 是一门真正的语言,它简单且强大。(以下简称 JS)

正如 HTML/CSS 是用于网页的样式呈现,JS (在过去)则是用于网页的交互操作上,比如用户点击了一个按钮然后弹出一个框,这些需要 JS 完成。

JS 本身并不具有「监听用户点击」这一功能,在浏览器上,现代浏览器都内置了网页 DOM API,它提供了一套 JS 接口,让你可以用 JS 调用来实现相应功能,而这些功能本身是基于更低级的 C/C++ 语言实现的。

因此,一名及格的前端需要掌握 JS 的基础,比如变量、数组、函数这些几乎所有语言都有的特性,然后就是 DOM API,缺了这个实现网页交互就是纸上谈兵。

Node.js

刚才说过,过去的 JS 就是 JS 本身加上浏览器的 DOM API,于是就有人想到了:能不能把浏览器 DOM API 换成用户操作系统的 API?这样 JS 看起来就更像一门「真正的语言」,即可以在用户本地环境而不只是在浏览器中运行。

幸好,谷歌浏览器(Chrome)使用的 JavaScript 运行环境(v8)发展到近几年已经能非常快地将 JS 代码转为机器码,于是 Node.js 的先驱们就成立了这个组织,基于 Chrome v8 引擎实现了一个跨平台 JavaScript 运行环境 —— 即现在非常流行的 Node.js。

如何学习 Node.js

大同小异,如果你在之前知道了如何学习 JavaScript。无非是 JS 本身加上 Node.js 提供的 API 而已。你可以直接打开 Node.js 官网查看其 API。

Node.js 只是一个运行环境,类似于 Java 的 JVM,最重要的还是 JavaScript 本身。

原文发布于微信公众号 - 星流全栈(MeteorFullStack)

原文发表时间:2016-02-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏姬小光

姬小光前端兴趣班【第009期】- 切图大法之代码的整理

上一期我们已经学会了使用 PS 切图并生成网页,那么这一期我们看看生成后的代码如何处理,才能变成一个合格的网页。

13730
来自专栏微服务

高效Web开发的10个jQuery代码片段

高效Web开发的10个jQuery代码片段 在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库。今天我们将为各位Web开发者提供10个最...

37780
来自专栏前端儿

Web--CSS控制页面(link与import方式区别)

【1】         “Table”和“DIV”这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构

16910
来自专栏walterlv - 吕毅的博客

像黑客一样!Chrome 完全键盘操作指南(原生快捷键 + Vimium 插件)

发布于 2018-07-01 11:56 更新于 2018-07...

23020
来自专栏Web 开发

Design For Mobile Web

上面这段代码,源自Google的Best Practices for Web Apps,但在实际使用过程中,并不能完全适应iOS、Android平台,至于WP,...

10100
来自专栏编程微刊

三个Bootstrap免费字体和图标库

32140
来自专栏编程微刊

Font Awesome 一套绝佳的图标字体库和CSS框架

21730
来自专栏程序员的知识天地

微信小程序的组件用法与传统HTML5标签的区别

小程序刚开放公测,互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联,甚至小程序就是基于HTML5开发。

29520
来自专栏针针小站

【Vue】如何动态的更新页面的Title

95930
来自专栏更流畅、简洁的软件开发方式

自然框架,拆分后的项目关系

  拆分了一下自然框架,似乎又绕回去了。以前是多个项目分开放的,有人说太分散了,还得一个个下载,麻烦。于是就做了一个解决方案,把项目都放在了一起。   现在呢,...

24250

扫码关注云+社区

领取腾讯云代金券