巩固基础,重学HTML、CSS、Javascript前言

     重新复习HTML、CSS、JavaScript的第一篇博客。带大家了解一下基础性的东西,结合网上看到的信息,给大家讲解一下应该从什么角度去加深对于这些前端基础的理解以及我认为最后应该到达一个什么样的境界。文章有什么不足的地方,请大家给我留言我会尽快改正过来。

来源:https://www.zhihu.com/question/19834302     天猫张帅

     基础方面:HTML+CSS这部分。建议上W3School去学习。

                      Javascript方面,如果没有基础建议线上W3SChool上学习。之后建议去看《JavaScript精粹》,JS是一门很混乱的语言,这本书能帮助你辨别出那些事精华,那些是糟粕,对于精华需要深入学习。糟粕部分看得懂就行,不必深入。

    习惯看视频的同学可以从在慕课网上学习。虽然我自己没用过。依照我的经验来看,直接看视频比上手撸码和看书进度要慢一些。

初级

    有了以上基础,就可以进行一般的静态页面设计,不过复杂的页面需要进一步学习。

一:CSS

   CSS的主要学习的模块划分为:"基础概念"、"CSS2.1规范"、"CSS3规范"、必看精通CSS第二版。主要掌握的内容有:

盒子模型,流动,block,inline,层叠,样式优先级等概念。等概念非常了解了。这本确实有些年头了,但基础概念部分讲述非常清晰,可以称之为经典。css3的部分可以参考:CSS3实用指南 (豆瓣)。这本书同样有些老,只是最新出版的书中没发现有特别好的。

二:JavaScript

上面提到内容还不足以让你胜任js编程。在有了基础之后,进一步学习内容包括:

1、简单框架。可以学习zepto,简单易用。学完w3school上面的简单js后,直接zepto即可完成一些简单的项目。可以使用codecademy学习javascript,zepto。同时也应该关注原生的javascript,现在越来越多的网页使用原生的javascript以面向对象的形式进行编程了。

2、复杂框架。这一部分lz暂时没有学习经验。对于框架核心在于理解理念,而不要只是会用。框架这一级别已经高度抽象了,只有牢牢掌握基础的javascript才能更好地使用它。所以javascript才是重中之重。

3、Javascript的知识要点。 javascript是一门面向对象的语言。(至少在我看来是这样。面向对象三大基本特性:封装、继承、多态。缺一不可,这些都可以通过javascript自身的一些方式来实现。)在另外一方面,javascript并不是一门完全面向对象的语言,它有很多设计理念都有函数式编程语言的影子。如果不使用面向对象,可以将它理解成为函数式编程语言。面向对象方面:可以使用百度,网上有大把资料可供选择。如果需要书籍推荐:《object oriented javascript》。 函数式编程参考这篇:JavaScript中的函数式编程实践

4、Javascript语言内部机制。 必须弄清楚如下概念:js中变量的作用域,变量传递方式,函数的定义环境与执行环境,闭包,函数的四种调用方式(一般函数,对象的方法,apply,call),以及四种调用方式下,'this'指向的是谁。这部分可以在《javascript语言精粹》中详细了解。

5、dom编程。这个web前端工程师的核心技能之一。必读《dom编程艺术》,另外《高性能javascript》这本书关于dom编程的部分也讲得很好。

6、ajax编程。这个上网查一些资料就可以了,真正的编程是很容易的。需要了解一下xhr2,CORS(跨域问题),FormData文件上传问题。

7、es5、es6。现在开发js大部分基于es5的,ie8一下通过es5-shim。但利用一些工具,现在可以直接写es6代码了,尤其在reactjs,nodejs类型的项目中。对于从es5,es6每个阶段js发生了哪些变化都需要系统学习,学习顺序建议是javascript基础->

es5->es6,越靠前越重要。参考张鑫旭的博客。

三、HTML5

需要了解HTML都提供了哪些api,然后在项目中用起来。关键在于能用HTML5解决业务问题,以及不支持HTML5的浏览器的降级方案。这体现了前端的一个思想:面向未来编程,尽早将新技术引入业务中来,而不是过分考虑兼容性问题,进而导致面向过去编程。

中级

一、代码层面

有了以上知识,对于大多数小型网站,你应该可以写出能够工作的代码了。但要想成为更专业的前端,我还需要继续努力。更高的要求大概分为:1易维护,2可测试、3高性能、4低流量(移动端)

1、易维护。对于页面你该理解‘样式’、‘数据’,‘行为’三者分离,对应的就是css、html、js。对于js代码,你最好了解设计模式,重构,MVC等内容。

2、可测性。就是保证你的代码能沟通单元测试100%覆盖到所有分支

3、高性能。必读《高性能javascript》

4、低流量。移动端关注比较多,PC端可以不用太关注。

二、工程层面

前端项目同样面临软件生命周期的各个环节,首先代码管理,必须学会svn和git。其次是代码的构建。如今前端代码构建已经不是简单的压缩一下了,需要进行依赖管理、模块合并、各种编译,必须要学会用grunt、gulp、webpack、rollup等前端构建工具,以及前端模块管理的方式,amd、cmd、es6、module等等。

高级

以上内容只是简单说明了前端学习的顺序。前端工程师应该有的知识结构请参考这里:JacksonTian/fks · GitHub   https://github.com/JacksonTian/fks

补充:对于前端开发,基本内容就是这些了。可以根据自己的兴趣爱好选择性学习一下内容。

1、交互设计。大公司依然由专业人士搞这些,如果不懂交互的前端一定不是好前端。推荐《简约至上》。

2、后端。应该说前端工程师必须至少理解一门后端语言,lz学习的是java。现在NodeJs在大公司已经得到了普遍的使用,推荐大家使用在Node上使用KOA框架做一些后端服务的开发。

3、Android和IOS开发。时至今日,前端的工作领域已经非常广泛,native的页面开发本质上也是前端开发,各个大公司面临着Native环境和web换将同时维护的问题,如果能够在技术上得到统一,将有巨大的价值。对于学有余力的同学,应该了解Native开发的基本流程,至少了解到界面构建的技术。

4、最后一个编程习惯的问题:绝对是保证你工作平安,少出故障。 代码提交前必须做三件事情:A.git diff(svn diff),检查所有变更; B.跑一遍单元测试;C.手动运行一遍所有demo.

总结:对于零基础来说,最轻松也是最好的方式是先上w3school上去学习HTML、CSS、Javascript。然后明确学习路线并且坚持不懈的努力。或许一年,或许两年,学习从来都不是一件容易的事情,一件挺重要的事情是记录,写博客记录你的成长,将所学的知识总结出来,并写出来能够更加透彻地理解这个知识点。

推荐书籍:

精通CSS第二版

CSS3实用指南 (豆瓣)

JavaScript中的函数式编程实践

《object oriented javascript》

参考资料:https://blog.csdn.net/weixin_40913261/article/details/80670950

推荐博客:https://www.zhangxinxu.com/wordpress/tag/es5/  张鑫旭

史上最全的前端开发资料:https://zhuanlan.zhihu.com/p/22229868 整理作者路人甲和他的朋友,看过我的博客如果可以的话请帮我给他点个赞。

资料会持续更新。。。。。

猜你喜欢

转载自blog.csdn.net/bulletpaul/article/details/82945345
今日推荐