精华内容
参与话题
问答
  • 前端基础入门

    2019-03-09 22:21:00
    前端入门,首先要知道前端到底是个什么玩意儿,先来看以下名词 HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services 在解释这一大堆不知道什么鬼的名词的同时,讲一讲Web访问的机制,以下参考这...

    目录

    ① WEB

    ② 前端

    ③ 实践

    【WEB】

    前端入门,首先要知道前端到底是个什么玩意儿,先来看以下名词

    HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web Services
    在解释这一大堆不知道什么鬼的名词的同时,讲一讲Web访问的机制,以下参考这篇知乎(看原文更好,这里只是简略地说一下,想更专业点的话请看相同问题的这篇回答)

    先来一波名词对照:

    1. 服务器运算(后端)→服务器脚本(PHP, ASP.NET

    2. 浏览器运算(前端)→浏览器脚本(HTML, CSS, JavaScript)

    3. 数据库(MySQL, SQLSever)

    其中,脚本就是我们写出来的那些代码。

    当你访问一个网站,顺序是2→1→3→1→2,如下图(就那篇知乎里的图)

    好了,现在剩下的名词有三个:

    HTML5和XHTML,这俩看成HTML也没关系,反正一个家族的,就用HTML当代言人吧;

    Web Services让PHP和ASP.NET两种语言、让(PHP + MySQL)和(ASP.NET + SQLServer)两种架构之间有了统一的接口标准,有了互通的可能。

    以上,名词解释到此为止,简略版看不太懂的话就去看看原文那人语文比我好。

    So,前端在整个网络交互过程中的任务也就比较明显了:售货员!直接面对客户,先听听你要买啥(需求),然后把活儿(请求)甩给跑腿的(后台),跑腿的到仓库(数据库)取货,然后咱把货(网页)拿到客户面前,DONE!

    【前端】

    有个大概了解之后,咱们正式说说前端那点事儿

    HTML——骨架

    HTML就是最直观的网络页面,静态的死的,不会动的。正式点的说法可以看看这里的简介。

    在其语言规范中,HTML是靠一个个标签来实现各种功能的,比如最简单的

    这是一段话

    而HTML有茫茫多的标签供我们实现各种各样的静态页面。但这么多记不住怎么办?来看看这个参考手册,另外一个参考手册也可以。不过这东西不用背,因为不知道的或记不清的标签在实际写代码的过程中多来查几次就能记得很牢了。

    CSS——血肉

    既然HTML的标签属性中有style这种东西,那为何还要用CSS?

    规范,以及逼格。

    首先,在style中写的东西想在另一个标签中用到要怎么办?复制+粘贴,多快,还不用多想。然而,这样做代码就臃肿了。——CSS专做各种批量刷格式。

    其次,改动页面布局的时候,难道要一个个style地找过去?眼都要瞅瞎了。——CSS专搞各种格式聚集地。

    最后,想用别人的格式怎么办,全用style的话要报警了好吧。——CSS专营各种格式借鉴抄袭。

    然而,这一切的一切,都阻挡不了某些时候style更好用的事实反向营销?。这一点暂且按下不表,让我们先分析分析CSS的神奇功能。

    CSS的常客两大类:id与class。

    每个标签都可以有这两种属性(没错html这个标签貌似也能)。顾名思义,id就是标签唯一认证的东西,就是说你这一套样式只能给一个标签用;class依旧沿用类的概念,由于可以有多个标签同属一个class属性,它就成了给一批标签同时刷格式的存在了。

    CSS有个很吊的特征:优先级。

    !important > 内联样式 > ID选择器 > 类选择器 > 继承 > 浏览器默认属性

    左侧覆盖右侧,记住上面这行就可以满足日常需要了。这东西说着没做着好玩,推荐实际写写玩玩,可以搞很多花样出来。(内联样式就是style这种了)

    于是,在有了优先级的情况下我们可以批量刷格式,单刷格式,动态刷格式(这时简单格式用style更顺手,也不会出现异步无数据的问题),而各个css文件的调用也可以让我们自己制作格式模板。当然,千万不要擅改class的格式就是了。

    JavaScript——灵魂

    JS的功能一句话说来就是页面反应,是让页面“动”起来的根本所在。

    前端三大件,HTML和CSS只是结构标签与样式配置,只有JS才算得上是一门编程语言。这门编程语言使用逻辑语句实现预设的功能,也就有了各种炫酷的动态,使页面活了起来。

    Wait,编程语言?C?

    我当初第一反应就是这个。然后我现在终于发现这玩意儿不是C,它在某种意义上比C更简单……由于原生JS和JQ都是围绕元素进行操作的,在用这俩写.js的时候基本都会有很清晰的思路。目前高级特效我还没涉及到,暂不讨论。

    另外,既然刚才提到了JQ,顺手介绍一波主流框架:Vue,Angular,React。这仨选一个学好就行,学的多不如精一个。

    JS就不多说了,因为还是编程的那一套流程:写着写着就会了。(当然还是需要看书的,直接上手会有一段时间不适应,而且不利于成长)

    【实践】

    瞎扯结束,上干货作业

    先顺手来一发编辑器推荐:JetBrain家的WebStorm,工程项目用起来很顺手,毕竟功能太强大了没有WebStorm我就不会写代码了。风格设置可以参考这里。

    当然像Sublime Text 3这类的也很好虽然我没用过就是了。嗯,其实记事本也是能拿来写的。

    ————————————我就是吐槽的分割线————————————

    实践之前先说一句,代码规范是个很重要的东西,如果你之前没有正式系统地学习过一门编程语言,就需要在规范上多下点功夫,让自己的代码风格更趋近于正统思想:简洁、工整、有效。规范可以参考以下三个:

    HTML编码规范

    CSS编码规范

    JavaScript编码规范

    另外,这篇前端开发学习指南推荐看一下。里面有各种tips,专治开发过程中的小困惑,可能会对实际开发有所帮助。

    ————————————我还是吐槽的分割线————————————

    然后就是喜闻乐见的真枪实弹环节,可以参考这位知乎答主的做法:Web 前端怎样入门。

    ①HTML+CSS基础课程迅速过一遍,只要对这俩有个大概的了解就好。
    ②啃书。下边会列出书单,共8本。
    ③通关百度前端技术学院的零基础学院。

    以上三项的难度分别是,1,24,975。

    好了不扯了,这是上边那位答主的书单:

    《CSS权威指南(第3版)》——权威指南了解一下……没错,真的只是了解就好。
    《CSS3 专业网页开发指南》——进阶。不看也没什么大问题,把CSS搞懂就能满足大部分需求了。
    《JavaScript高级程序设计(第3版)》——前七章,DOM,事件,表单脚本,JSON,Ajax与最后几章,这些需要看。百度网盘----链接:https://pan.baidu.com/s/1hsZUXzm 密码:nlul
    《JavaScript语言精粹》——这本书干的事儿就是,考前划重点。
    《你不知道的JS》——各种非主流疑难杂症。
    《ES6 标准入门》——ECMAScript 6,下一代JavaScript语言标准,目前已经全书开源。留个印象就好。
    《JavaScript设计模式与开发实践》——进阶。设计模式看个人需求。
    《高性能JavaScript》——进阶。优化是永远的话题。

    这些东西看完了大概就能跟大牛们谈笑风生了,不考虑一波?

    最后的最后,记住两点:看书比看视频更难但更快,模仿代码比自己写更基础但更利于学习

    展开全文
  • 结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路。互联网的快速发展和激烈竞争,用户...

    结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路。

    互联网的快速发展和激烈竞争,用户体验成为一个重要的关注点,导致专业前端工程师成为热门职业,各大公司对前端工程师的需求量都很大,要求也越来越高,优秀的前端工程师更是稀缺。个人感觉前端入门相对容易,但是也需要系统地认真学习,在打好基础后坚持学习,成为优秀前端工程师也只是时间问题。

    学习任何知识最重要的都是兴趣,如果经过一段时间的学习感觉不喜欢,那可能强迫自己学习是很痛苦的,效果也不会好,毕竟这很可能就是以后很多年生存的技能。不过随着互联网行业的发展,前端必然是Web开发人员需要学习的知识,有时候是没有专业前端工程师一起合作的,所以即使不做专门的前端工程师,掌握基本的前端技能为工作带来方便。

    后期邀请了一些同学分享学习经历。如果有同学愿意分享,欢迎push

    必备基础技能

    前端技能汇总这个项目详细记录 了前端工程师牵涉到的各方面知识。在具备基本技能之后可以在里面找到学习 的方向,完善技能和知识面。

    frontend-dev-bookmarks是老外总结的前端开发资源。覆盖面非常广。包括各种知识点、工具、技术,非常全面。

    以下是个人觉得入门阶段应该熟练掌握的基础技能:

    • HTML4HTML5语法、标签、语义
    • CSS2.1CSS3规范,与HTML结合实现各种布局、效果
    • Ecma-262定义的javascript的语言核心,原生客户端javascriptDOM操作HTML5新增功能
    • 一个成熟的客户端javascript库,推荐jquery
    • 一门服务器端语言:如果有服务器端开发经验,使用已经会的语言即可,如果没有服务器端开发经验,熟悉Java可以选择Servlet,不熟悉的可以选PHP,能实现简单登陆注册功能就足够支持前端开发了,后续可能需要继续学习,最基本要求是实现简单的功能模拟,
    • HTTP

    在掌握以上基础技能之后,工作中遇到需要的技术也能快速学习。

    基本开发工具

    恰当的工具能有效提高学习效率,将重点放在知识本身,在出现问题时能快速定位并 解决问题,以下是个人觉得必备的前端开发工具:

    • 文本编辑器:推荐Sublime Text,支持各种插件、主题、设置,使用方便
    • 浏览器:推荐Google Chrome,更新快,对前端各种标准提供了非常好的支持
    • 调试工具:推荐Chrome自带的Chrome develop tools,可以轻松查看DOM结构、样式,通过控制台输出调试信息,调试javascript,查看网络等
    • 辅助工具:PhotoShop编辑图片、取色,fireworks量尺寸,AlloyDesigner对比尺寸,以及前面的到的Chrome develop tools,
    • 翻墙工具:lantern, 壁虎漫步

    学习方法和学习目标

    方法:

    1. 入门阶段反复阅读经典书籍的中文版,书籍中的每一个例子都动手实现并在浏览器中查看效果
    2. 在具备一定基础之后可以上网搜各种教程、demo,了解各种功能的实际用法和常见功能的实现方法
    3. 阅读HTML,CSS,Javascript标准全面完善知识点
    4. 阅读前端牛人的博客、文章提升对知识的理解
    5. 善用搜索引擎

    目标:

    1. 熟记前面知识点部分的重要概念,结合学习经历得到自己的理解
    2. 熟悉常见功能的实现方法,如常见CSS布局,Tab控件等。

    入门之路

    以下是入门阶段不错的书籍和资料

    1. HTML先看《HTML & CSS: Design and Build Websites》1-9章,然后《HTML5: The Missing Manual》1-4章。
    2. CSS先看《CSS: The Missing Manual》,然后《CSS权威指南》
    3. javascript先看《javascript高级程序设计》,然后《javascript权威指南》
    4. HTTP看HTTP权威指南
    5. 在整个学习过程中HTML CSS JavaScript会有很多地方需要互相结合,实际工作中也是这样,一个简单的功能模块都需要三者结合才能实现。
    6. 动手是学习的重要组成部分,书籍重点讲解知识点,例子可能不是很充足,这就需要利用搜索引擎寻找一些简单教程,照着教程实现功能。以下是一些比较好的教程网址
    7. 原生javascript是需要重点掌握的技能,在掌握原生javascript的基础上推荐熟练掌握jQuery,在实际工作中用处很大,这方面的书籍有《Learning jQuery》或者去jQuery官网
    8. 建一个https://github.com/账号,保存平时学习中的各种代码和项目。
    9. 有了一定基础之后可以搭建一个个人博客,记录学习过程中遇到的问题和解决方法,方便自己查阅也为其他人提供了帮助。也可以去http://www.cnblogs.com/或者http://www.csdn.net/这样的网站注册账号,方便实用
    10. 经常实用Google搜索英文资料应该经常找到来自http://stackoverflow.com/的高质量答案,与到问题可以直接在这里搜索,如果有精力,注册一个账号为别人解答问题也能极大提高个人能力。
    11. 经典书籍熟读之后,可以打开前面必备基础技能部分的链接。认真读对应标准,全面掌握知识

    继续提高

    有了前面的基础之后,前端基本算是入门了,这时候可能每个人心中都有了一些学习方向,如果还是没有。 可以参考前面必备技能部分提到的那两个项目,从里面选一些进行发展学习。以下是一些不错的方面:

    一些个人经历

    LingyuCoder的学习经历

    上面的大神都总结得差不多了,我这里就胡扯一些吧

    工具

    • chrome dev tools:前端开发调试利器,着重注意几个功能:
      • console(废话)
      • elements:元素样式调整,很常用
      • sources:代码中添加断点,单步调试,以及单步调试过程中查看内存中的对象
        • watch expression:通过表达式查看当前内存中的值
        • call stack:查看调用栈,开启async,可以看异步调用栈(这个非常有用,尤其是ajax调试的时候)
        • scope variables:作用域链上的变量,非常有用
      • network:抓包查看每个请求,非常重要,前后端联调必备
      • timeline:分析渲染、js执行等等各个阶段,性能优化利器
      • emulation:模拟移动端环境,mobile页面开发必备
      • 一些插件:
        • liveload: 修改页面后自动刷新,不用按F5
        • dimensions:直接在页面上测量的利器
        • livestyle:css样式修改后自动起效果,不需要刷新,elements修改后也能同步到代码中
        • image tool:测量,取色
        • UC二维码:移动端调试扫码必备
        • pagespeed,YSlow:页面性能分析和优化插件
        • 马克飞象:优秀的在线markdown编辑器,快速写周报,做记录
    • sublime text2:编码方便,插件多,速度快,性能好
      • emmet:提升html编码速度必备
      • sublimelinter + 各种语言的lint和hint:代码纠错
      • 一些snippets:自动补全,提升开发效率
    • Intellij IDEA和WebStorm:集成开发环境,集成了各种功能,开发比sublime要方便,但会比较吃性能
    • Mark Men:测量、取色、标注利器,拿到视觉稿之后第一个打开的软件
    • GFW Fucker:我用红杏,可以的话买个虚拟服务器当梯子
    • iHosts:非常优秀的hosts管理软件,轻松修改hosts,开发调试必备
    • Charles:Mac 平台最好用的抓包分析工具
    • Rythem:AlloyTeam出品的代理抓包软件,非常轻量,安装简单,移动端(真机)开发调试很好用
    • Wunderlist:一个非常不错的Todo List,任务、需求多的时候管理起来很方便

    技能

    前端的技能其实除了JavaScript(包括NodeJS)、HTML、CSS以外,还有很多。其实前端的技能树很大,这里只能列一些我开发中见到的说一说

    语言基础

    JavaScript:

    • 作用域链、闭包、运行时上下文、this
    • 原型链、继承
    • NodeJS基础和常用API

    CSS:

    • 选择器
    • 浏览器兼容性及常见的hack处理
    • CSS布局的方式和原理(盒子模型、BFC、IFC等等)
    • CSS 3,如animation、gradient、等等

    HTML:

    • 语义化标签
    进阶

    JavaScript:

    • 异步控制(Promise、ES6 generator、Async)
    • 模块化的开发方式(AMD、CMD、KMD等等)
    • JavaScript解释器的一些相关知识
      • 异步IO实现
      • 垃圾回收
      • 事件队列
    • 常用框架使用及其原理
      • jQuery:基于选择器的框架,但个人认为不能叫框架,应该算工具库,因为不具备模块加载机制,其中源码很适合阅读钻研
      • AngularJS/Avalon等MVVM框架:着重理解MVVM模式本身的理念和双向绑定的实现,如何解耦
      • underscore:优秀的工具库,方便的理解常用工具代码片段的实现
      • polymer/React: 组件化开发,面向未来,理解组件化开发的原理

    CSS和HTML:主要是CSS3的特性和HTML5的特性,以及浏览器处理的流程和绘制原理

    • DOM树、CSSOM树、渲染树的构建流程及页面渲染的过程
    • 解析HTML、CSS、JavaScript时造成的阻塞
    • HTML5相关
      • SVG及矢量图原理
      • Canvas开发及动画原理(帧动画)
      • Video和Audio
    • flex box布局方式
    • icon fonts的使用

    常用NodeJs的package:

    • koa
    • express
    • underscore
    • async
    • gulp
    • grunt
    • connect
    • request

    一些理念:

    • 响应式Web
    • 优雅降级、渐进增强
    • don`t make me think
    • 网页可用性、可访问性、其中的意义
    • SEO搜索引擎优化,了解搜索引擎的原理
    • SPA的好处和问题

    性能优化:

    • 减少请求数量(sprite、combo)
    • 善用缓存(application cache、http缓存、CDN、localstorage、sessionstorage,备忘录模式)
    • 减少选择器消耗(从右到左),减少DOM操作(DOM和JavaScript解释器的分离)
    • CSS的回流与重绘
    项目
    • 版本管理:首推Git,用过Git都不会想用SVN了
      • Git:本地版本管理的机制
      • SVN:远程中心的版本管理机制
    • 自动化构建:主要就是less、模板、coffee等的预处理以及对代码压缩和合并
      • Gulp:基于流构建,速度快、模块质量好
      • Grunt:独立任务构建,速度慢,配置蛋疼,灵活性高
    • 预处理和模板引擎
      • less:语法简单,但功能有限
      • jade、ejs、velocity等模板引擎,各有各的长处
      • coffee:python工程师最爱,我没用过
    • 环境搭建:主要是将线上代码映射到本地,并在本地启动一个demo服务器,至于模拟数据的mock,见仁见智了
      • 本地代理:ihosts
    • 自动化测试:在业务较为稳定的情况下,可以通过自动化测试来减少测试的事件,但需求较多的时候,维护测试用例的成本会很高,可能用自动化测试会起到反效果
      • jasmine
      • mocha
    • 生态系统
      • npm
      • bower
      • spm
    • 搭建一个属于自己的博客
      • git pages
      • hexo
      • jekyll
    未来
    • Web Componets:面向未来的组件化开发方式
      • HTML模板
      • Shadow DOM
      • Custom Elements
      • HTML Import
    • 移动端Native开发:这也是需要了解的,以后前端工程师会经常地和webview打交道,也要了解native开发
    其他

    有些东西不是考敲码就能弄好的,我参与实习的时候感受到了很多,这些是我遇到的也是我感觉自己做的不好的地方

    • 对于业务的思考:我个人这方面非常欠缺,所以放在最前面,在敲码前要多思考业务
    • 交流和沟通能力:这个非常重要,前端同时需要与项目经理、产品、交互、后台打交道,沟通不善会导致很多无用功,延缓项目
    • 知识管理、时间管理:input和output的平衡,output是最好的input。如何做好分享,参与社区,做好交流,作好记录
    • 对新技术的渴望,以及敢于尝试

    入门书

    入门可以通过啃书,但书本上的东西很多都已经过时了,在啃书的同时,也要持续关注技术的新动态。这里推几本我觉着不错的书:

    • 《JavaScript高级编程》:可以作为入门书籍,但同时也是高级书籍,可以快速吸收基础,等到提升再回来重新看
    • 《JavaScript权威指南》:不太适合入门,但是必备,不理解的地方就去查阅一下,很有帮助
    • 《编写可维护的JavaScript》和:
    • 《Node.js开发指南》:不错的Nodejs入门书籍
    • 《深入浅出Node.js》:Nodejs进阶书籍,必备
    • 《JavaScript异步编程》:理解JS异步的编程理念
    • 《JavaScript模式》和《JavaScript设计模式》:JavaScript的代码模式和设计模式,将开发思维转变到JavaScript,非常好的书
    • 《JavaScript框架设计》:在用轮子同时,应当知道轮子是怎么转起来的,讲解很详细,从源码级别讲解框架的各个部分的实现,配合一个现有框架阅读,可以学到很多东西
    • 《Don`t make me think》:网页设计的理念,了解用户行为,非常不错
    • 《CSS禅意花园》:经久不衰的一部著作,同样传递了网页设计中的理念以及设计中需要注意的问题
    • 《高性能JavaScript》和《高性能HTML5》:强调性能的书,其中不只是性能优化,还有很多原理层面的东西值得学习
    • 《HTML5 Canvas核心技术》:我正在读的一本书,对于canvas的使用,动画的实现,以及动画框架的开发都非常有帮助
    • 《HTTP权威指南》:HTTP协议相关必备,前端开发调试的时候也会经常涉及到其中的知识
    • 《响应式Web设计》:技术本身不难,重要的是响应式网页的设计理念,以及移动先行的思想
    • 《JavaScript语言精粹》:老道的书,也是普及JavaScript的开发思维的一本好书,非常适合入门

    一些不错的网站

    • github:没啥好说的,多阅读别人的源码,多上传自己的源码,向世界各地的大牛学习
    • codepen:感受前端之美的必选之地,里面有很多酷炫的效果和优秀的插件
    • echojs:快速了解js新资讯的网站
    • stackoverflowsegmentfault:基本上各种问题都能在上面获得解答
    • google web fundamentals:每篇文章都适合仔细阅读
    • static files:开放的CDN,很好用
    • iconfont:阿里的矢量图标库,非常不错,支持CDN而且支持项目
    • html5 rocks: 一个不错的网站,很多浏览器的新特性以及前沿的技术,都能在这上面找到文章
    • css tricks:如何活用CSS,以及了解CSS新特性,这里可以满足你
    • JavaScript 秘密花园 JavaScript初学必看,非常不错
    • w3cplus:一个前端学习的网站,里面的文章质量都挺不错的
    • node school:一个不错的node学习网站
    • learn git branch:一个git学习网站,交互很棒
    • 前端乱炖:一个前端文章分享的社区,有很多优秀文章
    • 正则表达式:一个正则表达式入门教程,非常值得一看
    • 阮一峰的博客张鑫旭的博客:快速了解某些知识的捷径,但是如果需要深挖,还需要其他的资源
    • 各路大牛的博客:这个太多了,就不贴了,知乎上有很全的
    • 各种规范的官方网站,不懂得时候读规范

    历程

    以前是做Java SSH的,半路出家做的前端,所以水平比较弱,遇到问题也比较多。基本上入门靠看书和W3C School上的教程,以及一些前端博客,如汤姆大叔的博客。以前也只是使用jQuery,原生js也没有太多的钻研,后来逐渐看了很多本动物书,比如老道的语言精粹等等。从这些书中学到了很多语言层面的知识。但这显然是不够的,所以我经常会去社区上看看大家在谈论什么,然后去看看相关的资料,感兴趣就会多找些资料看看,或者写一写demo。学CSS主要就是通过这种方式。后来开始更多的关注各路大牛的博客和一些比较深的书籍,以及关注一些新的知识和框架,并且不断地练手提交代码到github,这样也学到了很多知识。在实习的过程中,切身参与到实际项目开发之中,能学到很多在学校学不到的理念和思维,这点也有很大的帮助。不说了,我要去搬砖求offer了...

    MrRaindrop的学习经历

    qiu神的邀请分享一下前端学习经验,这里对前端知识体系架构就不做总结了,各位大神们的总结已经相当到位了,我就贡献几个个人认为还比较有用的链接大家研究研究就好,然后主要分享一下我在前端学习过程中遇到的问题和总结的经验教训吧,如果能帮到想要入门的FE初学者(我就姑且假定为本文的读者受众类型了),让他们少走点弯路,每走一步都知道自己下一步的方向,这是最好了。各位大神的总结和分享详见qiu神整理的FE-learning

    先说下,前端这个东西每个人都可以有适合自己的学习方法,这篇仅作参考,写的有点乱,各位凑合看。

    缘起

    我是属于误打误撞进了前端,之前一直往做游戏的方向去来着,搞过游戏网站,玩过游戏引擎,比如unity,unreal这种商业引擎,捣鼓了几个游戏原型,不过自打研一进了实验室,直接就被导师派去写了js,导师给了我半个月时间让我写个基于百度地图api的数据展示页面,虽然这个时间还是相当宽裕的,不过之前没怎么写过js,也不会用地图api,于是我就一边啃着《Javascript权威指南》(犀牛书)一边参考实验室前人留下的“代码”,总算是把功能都写出来了。那个页面算我的js入门作了,也是我前端学习路线的开始。

    现在想来,虽然指派了去做前端,但是一直做下去并做好还是得靠兴趣维持,当然前端是一个趣味性十足的技术领域,而且社区每天都很“热闹”。

    项目,下一个项目

    我个人认为前端的学习,初学阶段你可以完全脱离开书本,以项目驱动。虽然我个人是从犀牛书开始啃的,不过如果你没有充足的时间,或者觉得啃大部头乏而无味的话,还是别像我这样。当然了如果决定啃书最好是把书里的例子都跟着敲一遍的。我上研之前没接触过js,4月份还没开学呢就被直接被导师甩了个百度地图api的项目到脸上,接着就是各种ERP,地图数据展示,虽然换着花样来一点不重样,不过基本上都是前端的活,SSH和android开发也打过酱油,整个实验室就我一个人写前端敢信?富客户端SPA时代的后端就是一个restful接口,代码量基本都在前端啊,写的我一个人怎一个爽字了得...期间跟着导师感受了一把创业,每天从7点搞到晚上10点,也算是经历了一段快速成长期。

    掌握一门技术先掌握它的大体框架,想一个能实现的点子,做一个能跑就行的demo,再去完善它的细节,等到demo完成了,对这门技术有了一个感性的认识,再去啃书,收获会大很多。我从开始原生js写到jquery,再到extjs,再到angularjs,从导师指定技术,到自己做技术选型,一个项目接着一个项目的练,就跟打怪升级似的。当然没有项目就去自己创造项目,动手实现自己的想法是件有乐趣和成就感的事。

    收集癖和知识管理

    前端学习有个特点,很多东西都很零碎,分散,需要你自己去整理、归纳和总结。在微博、知乎上follow了众多的大神,你不仅仅是为了听八卦,大神们的只言片语有时候留下的是无尽的余味,很有可能一个不经意提到的一个词就成为你下一个学习的目标。收集这些信息,善用google,提问,思考。就像游戏里的收集要素,前端学习也是充满搜集要素的一个“游戏”,只不过你需要一个知识管理工具来充当物品栏和仓库,我所知道的大牛们无一不是知识管理工具的重度使用者。以前用的oneNote,那时候还没绑定到云存储,现在基本上用evernote,笔记已经累计到1200+篇。书签一直打算用delicious,因为它是基于tag管理的,但一直没用起来。当然重点不在于这些工具,但是趁手的工具可以提高你的学习效率。最关键当然是随时保持旺盛的学习欲望,你的目标是了解有关前端的一切(当然不是所有都要掌握,因为毕竟你的精力有限,而且现实的说这也不太可能)。

    跟对神

    这个可控性貌似不大...跟对老大这个就不多说了,一定程度要看造化。不过话说回来,多跟身边的高手交流是王道,这个高手不一定要多高,但是一定要对技术有热情。研一的时候热情高涨,每天7点进实验室门,然后发现有个家伙居然比我还早到。后来发现这家伙上午就走了,下午又来了,而且导师对此习以为常,原来这家伙晚上不睡觉通宵写代码,上午才跑回去睡。后来经常和这位神讨论问题,每次感觉经验值蹭蹭蹭的往上涨。然后实验室还有一位神,被前面这位通宵神形容为“只能望其项背,一直在追赶,从来没赶上”,两位神的特点都是什么都了解一点,所以什么都能跟你讨论得起来,我有段时间做了个读书计划,从c/c++到vc/mfc再到unix网络编程,最后一路看到java核心技术和MSDN上的C#编程指南,和神们也能扯得很high了。

    总之就是这两位神把我拉进了坑,或者说从一个坑跳进另一坑,虽然两位神都不是搞前端的,不过技术之间总有相通之处。

    读书

    读书,多读书,读好书。在刘未鹏的博客里看到过一个公式,你第一个月的工资等于之前买过(读过)的技术书价格总和(这里说的技术书指那些经典的公认的好书)。讨论这个公式的正确性似乎没什么意义,然而它的合理性是毋庸置疑的,那就是多读经典技术书。最极端的一个例子,google的徐宥在我的大学里面说他扫荡了图书馆的整个TP312书架...对于前端的经典书籍,后面列了一个我收集的前端书列(如果有遗漏的前端经典好书,还请留言告诉我),有条件可以尝试刷一遍这些书,我也是在找完整的时间去啃完它们。之前说的,前端知识点松散,收集零散的知识点,从博客里快速学习等,这些只是前端学习的一个方面,如果你要想深入理解一个知识体系,了解它的来龙去脉,对它建立系统认识,读经典书还是必不可少的。

    我从最开始啃完犀牛书,然后接着去看了其他一些和前端干系不大的经典技术书,再后来通过实验室的项目和自己弄的一些小项目逐渐对前端领域比较上路以后,又看了《Javascript模式》、《Javascript设计模式》、《编写可维护的Javascript》,后来了解到node并开始用node搞点小玩意儿,又看了本《NodeJS up and run》和《Mongodb权威指南》,不过感觉前者略坑。那会儿朴灵那本深入浅出(晒书么么哒)还没出,后来出了就去图书馆借来看完,这么看下来感觉还不错,不过感觉看的还是偏少了,还需要继续刷(参照上面的书列)。

    前端的定位

    前端的定位关乎到你需要吸收什么样的知识和技能,决定在技术世界里你对什么需要格外敏感。如果你认为前端仅仅停留在切页面,实现交互和视觉的要求,那你对前端的认识还停留在初级阶段。阿里终面的时候我问了考官这么个问题:前端技术日新月异,范围越扩越宽,标准越来越丰富,似乎任何一个触角都能伸出很远。怎么给前端一个合适的定位?考官给我分析了半天,然后总结成一句话,就是用户和网站的联结者,用户体验的创造者(原话不是这样,但大体是这个意思)。也就是说前端的终极目标其实就是创造用户体验,提升用户体验,以用户体验为中心。不管你是从交互设计上下手,还是从性能优化出发,或者改进工作流提升工作流效率,最终都是为了创造和提升用户体验,最终都要体现到用户体验这一点上来。我认为这个总结非常有道理(当然“用户体验”这个词太宽泛了,并且不仅仅是前端工程师的范畴,比如开发后台的时候对一个数据处理过程进行优化,提升了整体性能,这也是对用户体验的一个提升)。

    现在的前端工程师做到一定阶段不可避免会接触到很多比切页面、实现视觉要求、实现交互等更深入的问题,比如前端自动化、图像编程、性能优化等等,再往后推一点就是PHP/JSP/ASP/nodeJs,过去后端模板一般属于后端的范畴,现在随着前端架构的演进,可能会让你去写后端模板的代码,需要用到后端语言(PHP/Java/C#等),这就是所谓大前端(然而这与前端的定位并不是相背离的,大前端处理的依然是与用户接触的部分,仍然是对用户体验的优化)。可能最常见或者被谈论最多的就是node,其实这几种技术选型都可以,bat三家据说百度用PHP比较多,阿里用node比较多。

    玉伯在他的博客里提过所谓全端是横向的,全栈是纵向的。全端即所有的终端说白了都是前端,因为都关乎到用户体验,直接和用户接触。适应多终端的开发,要求你在web前端的基础上,可能还要去扩展android开发和ios开发的知识,好在由于hybrid开发方式的流行,对使用native语言开发的技能会要求的不那么深入。

    全栈可以说是最适合初创公司的一种发展类型,广义上认为是从前端干到后端,从开发干到运维,这种就不说了,一般人应该不会想要去往这个方向发展,想要成为这种意义上的full-stack dev的,可能用不着来看我这篇文章了;而狭义上的全栈特指使用js语言从前端写到架设在nodeJs上的后端,前后端统一语言,统一编程模型,甚至公用同一套代码。更多了解全栈开发可以看看玉伯这篇说说全栈工程师

    以上是我对前端以及衍生出来的技术路线的一些浅薄理解,学习一个领域掌握它的整体上的走向和趋势还是挺重要的。另外如果想要对前端学习方向、职业成长路径有一个整体的认识,推荐看看拔赤总结的这篇前端开发十日谈

    最后

    贡献几个对前端学习、面试有帮助的链接:

    byr论坛yiyizym的建议

    与grunt相比,学习gulp会比较简单

    做SPA的话,推荐backbone.js和 backbone.marionette.js

    翻墙不用折腾,花十块钱买一个月的 红杏。

    把基础打扎实了再学这些都没问题。

    html 没什么好说的,有空学学html5。

    css 尽量看文档 ,因为很多中文资料都各执一辞,看多了反而会糊涂。

    有个网站可以查找html/css标签、属性在各个浏览器中的支持情况,挺好用的。

    javascript 就看 javascript高级程序设计 。不过这么厚的书看过就会忘。对javascript核心概念的讲解:对象/原型链/ 构造函数/执行上下文/作用域链/闭包/this,这里有篇不错的文章。

    有闲情可以看看 ecmascript 6,计划明年6月就发布啦。阮一峰的网站有入门资料。

    jquery 有很多 API,这个网站可以方便查到。有时间弄清楚jquery deferred 的用法。

    多给 sublimetext 装插件,比如说检查代码错误的,新建目录文件的,整理代码的。

    展开全文
  • 前端入门方法

    千次阅读 2017-08-12 10:45:22
    文章转自: ...FE-learning 必备基础技能 基本开发工具 学习方法和学习目标 入门之路 继续提高 一些个人经历 [LingyuCoder](https://github.com/LingyuCoder)的学习经历 工具 技能 语

    文章转自: https://github.com/qiu-deqing/FE-learning

    Table of Contents generated with DocToc

    FE-learning

    FE

    结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路。

    互联网的快速发展和激烈竞争,用户体验成为一个重要的关注点,导致专业前端工程师成为热门职业,各大公司对前端工程师的需求量都很大,要求也越来越高,优秀的前端工程师更是稀缺。个人感觉前端入门相对容易,但是也需要系统地认真学习,在打好基础后坚持学习,成为优秀前端工程师也只是时间问题。

    学习任何知识最重要的都是兴趣,如果经过一段时间的学习感觉不喜欢,那可能强迫自己学习是很痛苦的,效果也不会好,毕竟这很可能就是以后很多年生存的技能。不过随着互联网行业的发展,前端必然是Web开发人员需要学习的知识,有时候是没有专业前端工程师一起合作的,所以即使不做专门的前端工程师,掌握基本的前端技能为工作带来方便。

    后期邀请了一些同学分享学习经历。如果有同学愿意分享,欢迎push

    必备基础技能

    前端技能汇总这个项目详细记录
    了前端工程师牵涉到的各方面知识。在具备基本技能之后可以在里面找到学习
    的方向,完善技能和知识面。

    frontend-dev-bookmarks是老外总结的前端开发资源。覆盖面非常广。包括各种知识点、工具、技术,非常全面。

    以下是个人觉得入门阶段应该熟练掌握的基础技能:

    • HTML4HTML5语法、标签、语义
    • CSS2.1CSS3规范,与HTML结合实现各种布局、效果
    • Ecma-262定义的javascript的语言核心,原生客户端javascriptDOM操作HTML5新增功能
    • 一个成熟的客户端javascript库,推荐jquery
    • 一门服务器端语言:如果有服务器端开发经验,使用已经会的语言即可,如果没有服务器端开发经验,熟悉Java可以选择Servlet,不熟悉的可以选PHP,能实现简单登陆注册功能就足够支持前端开发了,后续可能需要继续学习,最基本要求是实现简单的功能模拟,
    • HTTP

    在掌握以上基础技能之后,工作中遇到需要的技术也能快速学习。

    基本开发工具

    恰当的工具能有效提高学习效率,将重点放在知识本身,在出现问题时能快速定位并
    解决问题,以下是个人觉得必备的前端开发工具:

    • 文本编辑器:推荐Sublime Text,支持各种插件、主题、设置,使用方便
    • 浏览器:推荐Google Chrome,更新快,对前端各种标准提供了非常好的支持
    • 调试工具:推荐Chrome自带的Chrome develop tools,可以轻松查看DOM结构、样式,通过控制台输出调试信息,调试javascript,查看网络等
    • 辅助工具:PhotoShop编辑图片、取色,fireworks量尺寸,AlloyDesigner对比尺寸,以及前面的到的Chrome develop tools,
    • 翻墙工具:lantern, 壁虎漫步(已被和谐)

    学习方法和学习目标

    方法:

    1. 入门阶段反复阅读经典书籍的中文版,书籍中的每一个例子都动手实现并在浏览器中查看效果
    2. 在具备一定基础之后可以上网搜各种教程、demo,了解各种功能的实际用法和常见功能的实现方法
    3. 阅读HTML,CSS,Javascript标准全面完善知识点
    4. 阅读前端牛人的博客、文章提升对知识的理解
    5. 善用搜索引擎

    目标:

    1. 熟记前面知识点部分的重要概念,结合学习经历得到自己的理解
    2. 熟悉常见功能的实现方法,如常见CSS布局,Tab控件等。

    入门之路

    以下是入门阶段不错的书籍和资料

    1. HTML先看《HTML & CSS: Design and Build Websites》1-9章,然后《HTML5: The Missing Manual》1-4章。
    2. CSS先看《CSS: The Missing Manual》,然后《CSS权威指南》
    3. javascript先看《javascript高级程序设计》,然后《javascript权威指南》
    4. HTTP看HTTP权威指南
    5. 在整个学习过程中HTML CSS JavaScript会有很多地方需要互相结合,实际工作中也是这样,一个简单的功能模块都需要三者结合才能实现。
    6. 动手是学习的重要组成部分,书籍重点讲解知识点,例子可能不是很充足,这就需要利用搜索引擎寻找一些简单教程,照着教程实现功能。以下是一些比较好的教程网址
    7. 原生javascript是需要重点掌握的技能,在掌握原生javascript的基础上推荐熟练掌握jQuery,在实际工作中用处很大,这方面的书籍有《Learning jQuery》或者去jQuery官网
    8. 建一个https://github.com/账号,保存平时学习中的各种代码和项目。
    9. 有了一定基础之后可以搭建一个个人博客,记录学习过程中遇到的问题和解决方法,方便自己查阅也为其他人提供了帮助。也可以去http://www.cnblogs.com/或者http://www.csdn.net/这样的网站注册账号,方便实用
    10. 经常实用Google搜索英文资料应该经常找到来自http://stackoverflow.com/的高质量答案,遇到问题可以直接在这里搜索,如果有精力,注册一个账号为别人解答问题也能极大提高个人能力。
    11. 经典书籍熟读之后,可以打开前面必备基础技能部分的链接。认真读对应标准,全面掌握知识

    继续提高

    有了前面的基础之后,前端基本算是入门了,这时候可能每个人心中都有了一些学习方向,如果还是没有。
    可以参考前面必备技能部分提到的那两个项目,从里面选一些进行发展学习。以下是一些不错的方面:

    一些个人经历

    LingyuCoder的学习经历

    上面的大神都总结得差不多了,我这里就胡扯一些吧

    工具

    • chrome dev tools:前端开发调试利器,着重注意几个功能:
      • console(废话)
      • elements:元素样式调整,很常用
      • sources:代码中添加断点,单步调试,以及单步调试过程中查看内存中的对象
        • watch expression:通过表达式查看当前内存中的值
        • call stack:查看调用栈,开启async,可以看异步调用栈(这个非常有用,尤其是ajax调试的时候)
        • scope variables:作用域链上的变量,非常有用
      • network:抓包查看每个请求,非常重要,前后端联调必备
      • timeline:分析渲染、js执行等等各个阶段,性能优化利器
      • emulation:模拟移动端环境,mobile页面开发必备
      • 一些插件:
        • liveload: 修改页面后自动刷新,不用按F5
        • dimensions:直接在页面上测量的利器
        • livestyle:css样式修改后自动起效果,不需要刷新,elements修改后也能同步到代码中
        • image tool:测量,取色
        • UC二维码:移动端调试扫码必备
        • pagespeed,YSlow:页面性能分析和优化插件
        • 马克飞象:优秀的在线markdown编辑器,快速写周报,做记录
    • sublime text3:编码方便,插件多,速度快,性能好
      • emmet:提升html编码速度必备
      • sublimelinter + 各种语言的lint和hint:代码纠错
      • 一些snippets:自动补全,提升开发效率
    • Intellij IDEA和WebStorm:集成开发环境,集成了各种功能,开发比sublime要方便,但会比较吃性能
    • Mark Men:测量、取色、标注利器,拿到视觉稿之后第一个打开的软件
    • GFW Fucker:我用红杏,可以的话买个虚拟服务器当梯子
    • iHosts:非常优秀的hosts管理软件,轻松修改hosts,开发调试必备
    • Charles:Mac 平台最好用的抓包分析工具
    • Rythem:AlloyTeam出品的代理抓包软件,非常轻量,安装简单,移动端(真机)开发调试很好用
    • Wunderlist:一个非常不错的Todo List,任务、需求多的时候管理起来很方便

    技能

    前端的技能其实除了JavaScript(包括NodeJS)、HTML、CSS以外,还有很多。其实前端的技能树很大,这里只能列一些我开发中见到的说一说

    语言基础

    JavaScript:
    * 作用域链、闭包、运行时上下文、this
    * 原型链、继承
    * NodeJS基础和常用API

    CSS:
    * 选择器
    * 浏览器兼容性及常见的hack处理
    * CSS布局的方式和原理(盒子模型、BFC、IFC等等)
    * CSS 3,如animation、gradient、等等

    HTML:
    * 语义化标签

    进阶

    JavaScript:
    * 异步控制(Promise、ES6 generator、Async)
    * 模块化的开发方式(AMD、CMD、KMD等等)
    * JavaScript解释器的一些相关知识
    - 异步IO实现
    - 垃圾回收
    - 事件队列
    * 常用框架使用及其原理
    - jQuery:基于选择器的框架,但个人认为不能叫框架,应该算工具库,因为不具备模块加载机制,其中源码很适合阅读钻研
    - AngularJS/Avalon等MVVM框架:着重理解MVVM模式本身的理念和双向绑定的实现,如何解耦
    - underscore:优秀的工具库,方便的理解常用工具代码片段的实现
    - polymer/React: 组件化开发,面向未来,理解组件化开发的原理

    CSS和HTML:主要是CSS3的特性和HTML5的特性,以及浏览器处理的流程和绘制原理
    * DOM树、CSSOM树、渲染树的构建流程及页面渲染的过程
    * 解析HTML、CSS、JavaScript时造成的阻塞
    * HTML5相关
    - SVG及矢量图原理
    - Canvas开发及动画原理(帧动画)
    - Video和Audio
    * flex box布局方式
    * icon fonts的使用

    常用NodeJs的package:
    * koa
    * express
    * underscore
    * async
    * gulp
    * grunt
    * connect
    * request

    一些理念:
    * 响应式Web
    * 优雅降级、渐进增强
    * don’t make me think
    * 网页可用性、可访问性、其中的意义
    * SEO搜索引擎优化,了解搜索引擎的原理
    * SPA的好处和问题

    性能优化:
    * 减少请求数量(sprite、combo)
    * 善用缓存(application cache、http缓存、CDN、localstorage、sessionstorage,备忘录模式)
    * 减少选择器消耗(从右到左),减少DOM操作(DOM和JavaScript解释器的分离)
    * CSS的回流与重绘

    项目
    • 版本管理:首推Git,用过Git都不会想用SVN了
      • Git:本地版本管理的机制
      • SVN:远程中心的版本管理机制
    • 自动化构建:主要就是less、模板、coffee等的预处理以及对代码压缩和合并
      • Gulp:基于流构建,速度快、模块质量好
      • Grunt:独立任务构建,速度慢,配置蛋疼,灵活性高
    • 预处理和模板引擎
      • less:语法简单,但功能有限
      • jade、ejs、velocity等模板引擎,各有各的长处
      • coffee:python工程师最爱,我没用过
    • 环境搭建:主要是将线上代码映射到本地,并在本地启动一个demo服务器,至于模拟数据的mock,见仁见智了
      • 本地代理:ihosts
    • 自动化测试:在业务较为稳定的情况下,可以通过自动化测试来减少测试的事件,但需求较多的时候,维护测试用例的成本会很高,可能用自动化测试会起到反效果
      • jasmine
      • mocha
    • 生态系统
      • npm
      • bower
      • spm
    • 搭建一个属于自己的博客
      • git pages
      • hexo
      • jekyll
    未来
    • Web Componets:面向未来的组件化开发方式
      • HTML模板
      • Shadow DOM
      • Custom Elements
      • HTML Import
    • 移动端Native开发:这也是需要了解的,以后前端工程师会经常地和webview打交道,也要了解native开发
    其他

    有些东西不是考敲码就能弄好的,我参与实习的时候感受到了很多,这些是我遇到的也是我感觉自己做的不好的地方
    * 对于业务的思考:我个人这方面非常欠缺,所以放在最前面,在敲码前要多思考业务
    * 交流和沟通能力:这个非常重要,前端同时需要与项目经理、产品、交互、后台打交道,沟通不善会导致很多无用功,延缓项目
    * 知识管理、时间管理:input和output的平衡,output是最好的input。如何做好分享,参与社区,做好交流,作好记录
    * 对新技术的渴望,以及敢于尝试

    入门书

    入门可以通过啃书,但书本上的东西很多都已经过时了,在啃书的同时,也要持续关注技术的新动态。这里推几本我觉着不错的书:

    • 《JavaScript高级编程》:可以作为入门书籍,但同时也是高级书籍,可以快速吸收基础,等到提升再回来重新看
    • 《JavaScript权威指南》:不太适合入门,但是必备,不理解的地方就去查阅一下,很有帮助
    • 《编写可维护的JavaScript》
    • 《JavaScript DOM编程艺术》学习JavaScript和DOM开发的必读之作。
    • 《Node.js开发指南》:不错的Nodejs入门书籍
    • 《深入浅出Node.js》:Nodejs进阶书籍,必备
    • 《JavaScript异步编程》:理解JS异步的编程理念
    • 《JavaScript模式》和《JavaScript设计模式》:JavaScript的代码模式和设计模式,将开发思维转变到JavaScript,非常好的书
    • 《JavaScript框架设计》:在用轮子同时,应当知道轮子是怎么转起来的,讲解很详细,从源码级别讲解框架的各个部分的实现,配合一个现有框架阅读,可以学到很多东西
    • 《Don`t make me think》:网页设计的理念,了解用户行为,非常不错
    • 《CSS禅意花园》:经久不衰的一部著作,同样传递了网页设计中的理念以及设计中需要注意的问题
    • 《高性能JavaScript》和《高性能HTML5》:强调性能的书,其中不只是性能优化,还有很多原理层面的东西值得学习
    • 《HTML5 Canvas核心技术》:我正在读的一本书,对于canvas的使用,动画的实现,以及动画框架的开发都非常有帮助
    • 《HTTP权威指南》:HTTP协议相关必备,前端开发调试的时候也会经常涉及到其中的知识
    • 《响应式Web设计》:技术本身不难,重要的是响应式网页的设计理念,以及移动先行的思想
    • 《JavaScript语言精粹》:老道的书,也是普及JavaScript的开发思维的一本好书,非常适合入门

    一些不错的网站

    • github:没啥好说的,多阅读别人的源码,多上传自己的源码,向世界各地的大牛学习
    • codepen:感受前端之美的必选之地,里面有很多酷炫的效果和优秀的插件
    • echojs:快速了解js新资讯的网站
    • stackoverflowsegmentfault:基本上各种问题都能在上面获得解答
    • google web fundamentals:每篇文章都适合仔细阅读
    • static files:开放的CDN,很好用
    • iconfont:阿里的矢量图标库,非常不错,支持CDN而且支持项目
    • html5 rocks: 一个不错的网站,很多浏览器的新特性以及前沿的技术,都能在这上面找到文章
    • css tricks:如何活用CSS,以及了解CSS新特性,这里可以满足你
    • JavaScript 秘密花园 JavaScript初学必看,非常不错
    • w3cplus:一个前端学习的网站,里面的文章质量都挺不错的
    • node school:一个不错的node学习网站
    • learn git branch:一个git学习网站,交互很棒
    • 前端乱炖:一个前端文章分享的社区,有很多优秀文章
    • 正则表达式:一个正则表达式入门教程,非常值得一看
    • 阮一峰的博客张鑫旭的博客:快速了解某些知识的捷径,但是如果需要深挖,还需要其他的资源
    • 各路大牛的博客:这个太多了,就不贴了,知乎上有很全的
    • 各种规范的官方网站,不懂得时候读规范

    历程

    以前是做Java SSH的,半路出家做的前端,所以水平比较弱,遇到问题也比较多。基本上入门靠看书和W3C School上的教程,以及一些前端博客,如汤姆大叔的博客。以前也只是使用jQuery,原生js也没有太多的钻研,后来逐渐看了很多本动物书,比如老道的语言精粹等等。从这些书中学到了很多语言层面的知识。但这显然是不够的,所以我经常会去社区上看看大家在谈论什么,然后去看看相关的资料,感兴趣就会多找些资料看看,或者写一写demo。学CSS主要就是通过这种方式。后来开始更多的关注各路大牛的博客和一些比较深的书籍,以及关注一些新的知识和框架,并且不断地练手提交代码到github,这样也学到了很多知识。在实习的过程中,切身参与到实际项目开发之中,能学到很多在学校学不到的理念和思维,这点也有很大的帮助。不说了,我要去搬砖求offer了…

    MrRaindrop的学习经历

    qiu神的邀请分享一下前端学习经验,这里对前端知识体系架构就不做总结了,各位大神们的总结已经相当到位了,我就贡献几个个人认为还比较有用的链接大家研究研究就好,然后主要分享一下我在前端学习过程中遇到的问题和总结的经验教训吧,如果能帮到想要入门的FE初学者(我就姑且假定为本文的读者受众类型了),让他们少走点弯路,每走一步都知道自己下一步的方向,这是最好了。各位大神的总结和分享详见qiu神整理的FE-learning

    先说下,前端这个东西每个人都可以有适合自己的学习方法,这篇仅作参考,写的有点乱,各位凑合看。

    缘起

    我是属于误打误撞进了前端,之前一直往做游戏的方向去来着,搞过游戏网站,玩过游戏引擎,比如unity,unreal这种商业引擎,捣鼓了几个游戏原型,不过自打研一进了实验室,直接就被导师派去写了js,导师给了我半个月时间让我写个基于百度地图api的数据展示页面,虽然这个时间还是相当宽裕的,不过之前没怎么写过js,也不会用地图api,于是我就一边啃着《Javascript权威指南》(犀牛书)一边参考实验室前人留下的“代码”,总算是把功能都写出来了。那个页面算我的js入门作了,也是我前端学习路线的开始。

    现在想来,虽然指派了去做前端,但是一直做下去并做好还是得靠兴趣维持,当然前端是一个趣味性十足的技术领域,而且社区每天都很“热闹”。

    项目,下一个项目

    我个人认为前端的学习,初学阶段你可以完全脱离开书本,以项目驱动。虽然我个人是从犀牛书开始啃的,不过如果你没有充足的时间,或者觉得啃大部头乏而无味的话,还是别像我这样。当然了如果决定啃书最好是把书里的例子都跟着敲一遍的。我上研之前没接触过js,4月份还没开学呢就被直接被导师甩了个百度地图api的项目到脸上,接着就是各种ERP,地图数据展示,虽然换着花样来一点不重样,不过基本上都是前端的活,SSH和android开发也打过酱油,整个实验室就我一个人写前端敢信?富客户端SPA时代的后端就是一个restful接口,代码量基本都在前端啊,写的我一个人怎一个爽字了得…期间跟着导师感受了一把创业,每天从7点搞到晚上10点,也算是经历了一段快速成长期。

    掌握一门技术先掌握它的大体框架,想一个能实现的点子,做一个能跑就行的demo,再去完善它的细节,等到demo完成了,对这门技术有了一个感性的认识,再去啃书,收获会大很多。我从开始原生js写到jquery,再到extjs,再到angularjs,从导师指定技术,到自己做技术选型,一个项目接着一个项目的练,就跟打怪升级似的。当然没有项目就去自己创造项目,动手实现自己的想法是件有乐趣和成就感的事。

    收集癖和知识管理

    前端学习有个特点,很多东西都很零碎,分散,需要你自己去整理、归纳和总结。在微博、知乎上follow了众多的大神,你不仅仅是为了听八卦,大神们的只言片语有时候留下的是无尽的余味,很有可能一个不经意提到的一个词就成为你下一个学习的目标。收集这些信息,善用google,提问,思考。就像游戏里的收集要素,前端学习也是充满搜集要素的一个“游戏”,只不过你需要一个知识管理工具来充当物品栏和仓库,我所知道的大牛们无一不是知识管理工具的重度使用者。以前用的oneNote,那时候还没绑定到云存储,现在基本上用evernote,笔记已经累计到1200+篇。书签一直打算用delicious,因为它是基于tag管理的,但一直没用起来。当然重点不在于这些工具,但是趁手的工具可以提高你的学习效率。最关键当然是随时保持旺盛的学习欲望,你的目标是了解有关前端的一切(当然不是所有都要掌握,因为毕竟你的精力有限,而且现实的说这也不太可能)。

    跟对神

    这个可控性貌似不大…跟对老大这个就不多说了,一定程度要看造化。不过话说回来,多跟身边的高手交流是王道,这个高手不一定要多高,但是一定要对技术有热情。研一的时候热情高涨,每天7点进实验室门,然后发现有个家伙居然比我还早到。后来发现这家伙上午就走了,下午又来了,而且导师对此习以为常,原来这家伙晚上不睡觉通宵写代码,上午才跑回去睡。后来经常和这位神讨论问题,每次感觉经验值蹭蹭蹭的往上涨。然后实验室还有一位神,被前面这位通宵神形容为“只能望其项背,一直在追赶,从来没赶上”,两位神的特点都是什么都了解一点,所以什么都能跟你讨论得起来,我有段时间做了个读书计划,从c/c++到vc/mfc再到unix网络编程,最后一路看到java核心技术和MSDN上的C#编程指南,和神们也能扯得很high了。

    总之就是这两位神把我拉进了坑,或者说从一个坑跳进另一坑,虽然两位神都不是搞前端的,不过技术之间总有相通之处。

    读书

    读书,多读书,读好书。在刘未鹏的博客里看到过一个公式,你第一个月的工资等于之前买过(读过)的技术书价格总和(这里说的技术书指那些经典的公认的好书)。讨论这个公式的正确性似乎没什么意义,然而它的合理性是毋庸置疑的,那就是多读经典技术书。最极端的一个例子,google的徐宥在我的大学里面说他扫荡了图书馆的整个TP312书架…对于前端的经典书籍,后面列了一个我收集的前端书列(如果有遗漏的前端经典好书,还请留言告诉我),有条件可以尝试刷一遍这些书,我也是在找完整的时间去啃完它们。之前说的,前端知识点松散,收集零散的知识点,从博客里快速学习等,这些只是前端学习的一个方面,如果你要想深入理解一个知识体系,了解它的来龙去脉,对它建立系统认识,读经典书还是必不可少的。

    我从最开始啃完犀牛书,然后接着去看了其他一些和前端干系不大的经典技术书,再后来通过实验室的项目和自己弄的一些小项目逐渐对前端领域比较上路以后,又看了《Javascript模式》、《Javascript设计模式》、《编写可维护的Javascript》,后来了解到node并开始用node搞点小玩意儿,又看了本《NodeJS up and run》和《Mongodb权威指南》,不过感觉前者略坑。那会儿朴灵那本深入浅出(晒书么么哒)还没出,后来出了就去图书馆借来看完,这么看下来感觉还不错,不过感觉看的还是偏少了,还需要继续刷(参照上面的书列)。

    前端的定位

    前端的定位关乎到你需要吸收什么样的知识和技能,决定在技术世界里你对什么需要格外敏感。如果你认为前端仅仅停留在切页面,实现交互和视觉的要求,那你对前端的认识还停留在初级阶段。阿里终面的时候我问了考官这么个问题:前端技术日新月异,范围越扩越宽,标准越来越丰富,似乎任何一个触角都能伸出很远。怎么给前端一个合适的定位?考官给我分析了半天,然后总结成一句话,就是用户和网站的联结者,用户体验的创造者(原话不是这样,但大体是这个意思)。也就是说前端的终极目标其实就是创造用户体验,提升用户体验,以用户体验为中心。不管你是从交互设计上下手,还是从性能优化出发,或者改进工作流提升工作流效率,最终都是为了创造和提升用户体验,最终都要体现到用户体验这一点上来。我认为这个总结非常有道理(当然“用户体验”这个词太宽泛了,并且不仅仅是前端工程师的范畴,比如开发后台的时候对一个数据处理过程进行优化,提升了整体性能,这也是对用户体验的一个提升)。

    现在的前端工程师做到一定阶段不可避免会接触到很多比切页面、实现视觉要求、实现交互等更深入的问题,比如前端自动化、图像编程、性能优化等等,再往后推一点就是PHP/JSP/ASP/nodeJs,过去后端模板一般属于后端的范畴,现在随着前端架构的演进,可能会让你去写后端模板的代码,需要用到后端语言(PHP/Java/C#等),这就是所谓大前端(然而这与前端的定位并不是相背离的,大前端处理的依然是与用户接触的部分,仍然是对用户体验的优化)。可能最常见或者被谈论最多的就是node,其实这几种技术选型都可以,bat三家据说百度用PHP比较多,阿里用node比较多。

    玉伯在他的博客里提过所谓全端是横向的,全栈是纵向的。全端即所有的终端说白了都是前端,因为都关乎到用户体验,直接和用户接触。适应多终端的开发,要求你在web前端的基础上,可能还要去扩展android开发和ios开发的知识,好在由于hybrid开发方式的流行,对使用native语言开发的技能会要求的不那么深入。

    全栈可以说是最适合初创公司的一种发展类型,广义上认为是从前端干到后端,从开发干到运维,这种就不说了,一般人应该不会想要去往这个方向发展,想要成为这种意义上的full-stack dev的,可能用不着来看我这篇文章了;而狭义上的全栈特指使用js语言从前端写到架设在nodeJs上的后端,前后端统一语言,统一编程模型,甚至公用同一套代码。更多了解全栈开发可以看看玉伯这篇说说全栈工程师

    以上是我对前端以及衍生出来的技术路线的一些浅薄理解,学习一个领域掌握它的整体上的走向和趋势还是挺重要的。另外如果想要对前端学习方向、职业成长路径有一个整体的认识,推荐看看拔赤总结的这篇前端开发十日谈

    最后

    贡献几个对前端学习、面试有帮助的链接:

    byr论坛yiyizym的建议

    与grunt相比,学习gulp会比较简单

    做SPA的话,推荐backbone.js和 backbone.marionette.js

    翻墙不用折腾,花十块钱买一个月的 红杏。

    把基础打扎实了再学这些都没问题。

    html 没什么好说的,有空学学html5。

    css 尽量看文档 ,因为很多中文资料都各执一辞,看多了反而会糊涂。

    有个网站可以查找html/css标签、属性在各个浏览器中的支持情况,挺好用的。

    javascript 就看 javascript高级程序设计 。不过这么厚的书看过就会忘。对javascript核心概念的讲解:对象/原型链/ 构造函数/执行上下文/作用域链/闭包/this,这里有篇不错的文章。

    有闲情可以看看 ecmascript 6。阮一峰的网站有入门资料。

    jquery 有很多 API,这个网站可以方便查到。有时间弄清楚jquery deferred 的用法。

    多给 sublimetext 装插件,比如说检查代码错误的,新建目录文件的,整理代码的。

    展开全文
  • 前端入门之路

    千次阅读 2019-05-12 16:13:49
    正式接触前端应该是在2017年7月份,到现在差不多已经有两年的时间。我很庆幸,在入门的过程中我是处在一个技术资源还算有保障的环境中,遇到什么问题,都可以从身边的前辈身上找到答案。但是回想起来,仍觉得入门之...

    正式接触前端应该是在2017年7月份,到现在差不多已经有两年的时间。我很庆幸,在入门的过程中我是处在一个技术资源还算有保障的环境中,遇到什么问题,都可以从身边的前辈身上找到答案。但是回想起来,仍觉得入门之路颇为坎坷。很多人刚接触前端时普遍存在的问题主要包含不理解前端的基本概念,不知道有多少技术栈,不明白各种技术栈出现的原因,以及他们之间的相互关系,在什么情况下该使用哪个。更具体地来说,是不知道问题出在哪里,也不知道该怎么描述自己遇到的问题。

    我认为产生以上问题的原因主要来自于三个方面。第一,前端包含太多让人眼花缭乱、不知该从哪里下手的技术方案,对于同一种效果或功能的实现,可以有多种不同的技术搭配方案,这个现象导致学习的过程非常不稳定。第二,大多数学校都没有开设前端相关的课程,给前端入门也带了一定的困难。第三,很多学习前端的人缺少真正的实战经验,只能通过文档和视频自学,因此一直在边缘徘徊。

    在这篇文章中,我试着回想并梳理一下从入门到现在自己会遇到或者思考过的一些问题,以及我现在对于这些问题的答案。简单来讲,就是一个关于前端知识的问答。

    前端和后端的区别是什么?

    我直到大学毕业的时候对这个问题都没有概念。16年8月份去老师的公司实习,接手了一个项目,主要工作是按照产品的需求修改前端的部分内容和功能。所以我面临的第一个问题就是搞清楚前端和后端的区别是什么,百度一下,再看几篇博客,感觉已经理解了前后端的差别。但是理解是一回事,前后端代码放在一起,让你找出来哪一部分是前端,哪一部分是后端又是另一回事。所以我花了几天的时间才搞清楚前端和后端代码的区别。

    现在,我想用一个案例来描述前后端的区别。就以我们每天都会去的食堂作为模板。在食堂这个体系下,打菜的窗口和阿姨就是前端,厨房里做菜的厨师就是后端。如果把食堂里一半窗口的打菜工作人员换成年轻漂亮的小姑娘,男生们肯定都喜欢去这些窗口打菜。但是,需要明白的一点是,这些窗口的菜并不一定好吃,菜好不好吃是由每个窗口后面的厨房(假定每个窗口都有一个单独的厨房供应饭菜)决定的。所以,前端是用户能够直接看到和感知到的东西,但是用户体验好不好却要分为两个方面,一是打菜的小姑娘好不好看(前端展示的内容和效果好不好),二是厨师做的菜好不好吃(后端服务器的综合能力,可能包括数据处理、并发能力、数据真实性等若干)。

    哪里可以学前端?

     不管是已经下定决心要从事前端行业的人还是在犹豫期不知道该学什么想要尝试一下前端的人,都需要找到合适的学习方法和学习平台。学习平台有很多,网上一搜,一大把,W3C School(尽管我平时不太习惯看这个)、菜鸟教程、慕课视频、各种博客等。平台有很多,但是需要注意的一点是,所有平台的教程都只能教会给我们最基本的语法和用法,并不能帮我们指明学习方向或解决具体的问题,所以我觉得这些平台的内容只适合用于入门初期快速浏览一遍。更好的方式可能是在有了一定的基础之后为自己设定一个个目标,并不断达成这些目标。比如实现一个或一组简单的网页展示、动态效果及跳转逻辑,或者参加到项目实战中去。

    Html 中那些标签都是怎么写出来的?

    网页中的标签都是一个一个手打出来的吗?这是我对前端的第一印象。但是网页头部往往有很多有长又难记的内容,这些内容需要把他们记住吗?还是说每次只需要从已经写好的网页上复制粘贴过来就可以了?后来,慢慢写的多了,就知道除了头部那一堆东西之外,其他的东西确实都是一行一行打出来的,但是也存在一些很方便的工具可以让我们码html 的时候更快一些,比如说利用Emmet,我们可以通过一个感叹号 + tab 就打出以下的代码,其他更多的的使用方式可以参考:

    https://docs.emmet.io/abbreviations/syntax/

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>Document</title>
    </head>
    <body>
      
    </body>
    </html>

    开发工具用什么?

    最初用的是webstorm,后来使用了sublime text,现在用的vscode。多种工具各有利弊,但是都有很多便利的插件和漂亮的主题,比如说上面提到的Emmet 还有Snippets 等,善用插件可以帮我们提升很大的编码效率。最后用哪个可能全凭个人喜好,更多内容可以参考下面的连接。

    sublime text 插件:https://www.cnblogs.com/junwu/p/5660934.html

    前端开发ide:https://blog.csdn.net/qq_36538012/article/details/80748167

    为什么网页可以有很多后缀?

    在不同技术栈的项目中可能会看到各种各样的网页后缀,.html,.jade,.vue 巴拉巴拉。不管是什么后缀,有一点是非常明确的,即浏览器最终只能识别并正确翻译html 后缀的网页。所以各种后缀的网页实际上是不同的框架或技术栈,为了提升html 的编码效率或扩展性所做的在html 之上的一步封装,最终发布的时候还是要被转换成html 文件。看到不同后缀的网页名字的时候只需要去网上查这个框架的语法等基本信息,就可以很快地理解并使用。但是新手还是建议从原生html 写起。

    那些网页的css 都是自己写的吗?Bootstrap 是什么?

    在看到css 中大段大段的代码的时候,脑海中的第一个想法就是这些内容都是开发者自己写出来的吗,还是从不知道什么地方复制过来的?是的,就是自己写的。在正常的开发流程过程中,设计人员会为前端提供网页的设计稿,设计稿上会标注出每一个元素的宽高、颜色、边缘弧度等,根据这些信息就可以利用代码一比一还原网页,只是这个还原过程需要花一定的时间去培养,需要尝试着写,去看人家的代码和反复地练习才行。

    但是,随之而来的一个问题就是:很多情况下,我们可能会用到相似的css 样式,尤其是在管理系统中,比如说一个按钮、一个选择框或者一个表格,我们不想直接用很丑的原生展现,又想要一套比较好看、容易被大多数人接受的固定模板,该怎么办呢?以bootstrap 为例的框架正是以上问题的解决方案,其他的还有weui、ant design、element-ui、vutify 等,我习惯称之为UI 框架。管理系统的快速离不开这些UI 框架,但是如果像是公司官网之类定制化程度比较高的内容可能主要还是靠手写。

    JQuery 是什么,该怎么用?

    网页的最初目的是用于图文排版,展示内容。到后来会慢慢加入一些交互,比如用户点击一个按钮,可能会发生图片的旋转或者信息的变化等。这些功能都要通过利用js 操作dom(其实就是网页中的标签)来实现,先获取dom,然后改变dom 的内容或者css 样式等。一个很经典的用法如下:

     var para = document.getElementsByTagName("p");//返回的是数组
     para[0].setAttribute("title", "a list of goods");

    因此,早期的js 代码里充斥着像这种获取dom 和操作dom 的代码。但是由于早期的浏览器厂商之间的竞争和dom 技术的发展,不同浏览器对于不同代码的兼容性不是特别好,一个很典型的例子就是为dom 添加监听事件:

    function addEvent(elm, evType, fn, useCapture) {
      if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);//DOM2.0
        return true;
      }
      else if (elm.attachEvent) {
        var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+
        return r;
      }
      else {
       elm['on' + evType] = fn;//DOM 0
      }
    }

    因此,通过js 来操作dom 的方式需要写很多条件判断的代码且容易出错。为了解决这个问题,jquery 应运而生。它在js 的基础之上做了一层封装,屏蔽了底层不同浏览器的差异,让我们操作dom 的过程更加简单,正确性更高。因此在很多年里,jquery 都大受欢迎,这是在那个时代大家针对前端的复杂性所研究出的最好的解决方案。

    前端框架是什么?

    这个问题我花了很长的时间才搞明白。如今,在我印象中的前端框架主要包含js 框架和css 框架,css 框架就是上面所说的ui 框架,它们给我们提供的是一套标准的ui 解决方案。Js 框架就非常多了,像上面提到的jquery 就是统领了前端江湖好多年的一大霸主,尽管它现在已经有些跟不上时代了。如今的前端三杰Angular、Vue、React 是最受欢迎的三大js 框架(实际上也包含了html),他让我们的编码过程更加简单,写出来的东西可扩展性更好,降低了团队合作的成本。三大框架的流行使得很多人一开始就直接跳过原生的js 开发,直接面对这些优化过的东西。我认为这对于新手来说并不是最好的选择,还是推荐从原生的html、js、css 写起。

    那么,jquery 跟vue 有什么不同呢?jquery 统治了前端那么多年,又是如何衰落下去的?这跟大家对前端的认知阶段有关。以前(jquery时代),工程师想的是如何让操作dom 的过程更便利、更有保证,但是项目中仍然充斥着获取和改变dom 的操作,代码的书写和排错要花费很大的成本。现在的模式则是如何把操作dom 这一复杂的机制彻底隐藏,比如通过双向绑定直接将js 变量的变化关联到html 上,除此之外,组件化和模块化也使得整个项目的可维护性更高,更利于大型项目的开发。

    Ajax 是什么?

    很早以前,页面内容的变化只能通过整个页面的刷新来完成。后来,Google 一系列产品的应用使得只需部分刷新页面即可进行信息更新的ajax 被大家广泛接受。简单来讲,ajax 就是前端与后端进行最小代价沟通的一种技术。

    Npm 是什么,为什么会出现这个东西?

    前端,或者说js 对于大部分人来说都不是他们接触的第一门语言,而第一门语言通常是C 或者java。想想C 或者java 的模块化管理机制,其基本理念为将负责不同功能或者不同模块的代码放在不同的文件中,通过引入的方式来进行方法的调用。在js 中,安装node(node 是一个js 的运行环境,相当于没有界面的浏览器)时所附带的npm 就是前端的模块化解决方案。通过npm 我们可以发布和安装各种各样的依赖包,不同的包会针对不同的领域提供一个普适性地解决方案,node 项目中最知名的两行代码就是:

    npm install
    // 然后
    npm run dev
    // 下面就不会了

    第一行代码的作用是按照项目根目录下的package.json 文件中的依赖关系安装相关的依赖包,安装的所有依赖包都放在根目录下的node_modules 文件夹中,这个文件夹的体积通常非常大,因此在多人协作中,这个文件夹通常是要被加入到.gitignore 文件中的。即大家仅仅通过package.json 来同步项目的依赖,这个机制使得项目的管理非常简单。

    除此之外,ES6 的import 和export 也是前端模块化的解决方案之一,关于两者(require 和import)的区别可以参考以下链接:

    https://www.imooc.com/article/22371?block_id=tuijian_wz

    Js 为什么会有那么多叫法?ES6、ES7、TypeScript

    同html 模块的描述一样,浏览器只能识别并正确运行原生的js 代码,即ES5(全称是ECMAScript 5,是js 发展过程中某一阶段的规范)。但是原生js 有很多缺点,在项目开发过程中使用起来十分不方便,因此慢慢出现了更多的标准,这些新的标准在代码的维护性、扩展性和团队合作的便利性方便相对于原生js 有了很大的提升。ES6、ES7、TypeScript 就是其中之若干。现在的前端项目中很少有直接用ES5 开发的,但是初学阶段还是建议使用ES5 进行学习,因为如果使用了ES6 以上的语法,如果不进行相关的配置在浏览器中无法正常运行。至于如何分辨出ES5 和E6,这个可能就要具体情况具体分析了。

    Scss、Less、Stylus 等跟Css 的关系

    原生的css 书写过程中颇为复杂,维护性较差,如果你已经有一些css 方面的经验,可能会遇到过下面的代码:

    .outer {
      ...
    }
    .outer .inner1 {
      ...
    }
    .outer .inner2 {
      ...
    }
    .outer .inner2 .inner-inner1 {
      ...
    }
    
    .red-a {
      ...
      color: red;
    }
    .red-b {
      ...
      color: red;
    }

    如果用stylus 来写,会怎么样:

    $color-red = red
    
    // 嵌套
    .outer
      ...
      .inner1
        ...
      .inner2
        ...
        .inner-inner1
          ...
    
    // 变量
    .red-a
      ...
      color $color-red
    .red-b
      ...
      color $color-red

    因此可以看到,像scss、less、stylus 等被称为css 预处理器的东西所要描述的内容其实跟css 是一致的,只是表现形式不同而已,预处理器通过引入变量、嵌套、继承、mixin 等机制使得css 的书写和维护更加高效。但是到最后,所有用预处理器写成的代码最终还是要被转换成css 在浏览器端运行。

    Webpack 是什么,我不用他行不行?

    说到这里,webpack 就该出场了。上面提到,现在前端项目开发过程中用到了大量非原生、即浏览器不能识别的框架或技术,如果在项目开发和发布的过程中一个一个地进行配置将会是一项非常复杂的工程,那么有没有一个工具来帮助我们解决这个问题,并且可以提供除此之外的其他帮助呢?有,那就是webpack。关于webpack,之前写过一篇稍微详细一些的博客,更多内容可以参考:

    Webpack:从野战到入门 => https://blog.csdn.net/qq_33594380/article/details/80684442

    不用webpack 行不行?我觉得不行。

    要不要看书,要看哪些书?

    一定要看书,项目和实战过程中永远只能给我们线条状的知识点。块状的知识点和前端知识体系的搭建必须通过看书等系统的学习过程来完成。此处也推荐几本我看过的觉得很有帮助的书。

    除了书之外,多关注一些与前端相关的公众号,每天去看一下公众号推送的文章,对于探索新的东西和复习旧的知识也有很大的帮助,比如说:前端早读课、前端大全、前端之巅、奇舞周刊等。

    // JS 高级程序设计(或犀牛书)
    // 可维护的JS
    // JS DOM 编程艺术
    // ES6 标准入门
    // CSS 世界
    // 图解Http
    // 深入浅出Webpack
    // 深入浅出Node.js

     

    展开全文
  • 前端入门

    2018-12-04 19:53:50
    前端入门 什么是前端? 前端就是网站的前台部分,运行在pc端或者移动端的浏览器上展现给用户浏览的网页页面。随着互联网的发展,h5,css,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效...
  • 前端入门系列

    2019-06-22 16:48:16
    CSS 基础入门(1)初识 前端HTML & CSS 基础入门(2)段落及文本 前端HTML & CSS 基础入门(3)列表及其样式 前端HTML & CSS 基础入门(4)边框与背景 前端HTML & CSS 基础入门(5)超链接 前端...
  • 前端基础入门——个人笔记

    千次阅读 2018-07-08 01:29:58
    /* Created by DyanByta on 18/7/7 21:00 */目录① WEB② 前端③ 实践【WEB】要入门前端,首先要知道前端到底是个什么玩意儿,先来看以下相关名词HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、Web...
  • Web前端基础知识整理(一)

    万次阅读 2019-06-24 00:00:57
    1. typeof返回的数据类型 typeof返回的数据类型包括undefined、string、number、boolean、symbol、Object、Function类型。 2. 检查数组的方式 isArray()方法、toString.call()、instanceof Array ...
  • web前端零基础该怎么学习呢?

    万次阅读 多人点赞 2018-10-28 17:29:16
    前端开发领域是IT技术语言领域唯一一个男女老少都可以快速入门并快速提升兴趣的领域,今天就来聊聊前端到底该怎么学~ 话不多说,让我们直接进入今天的主题。 web前端的基本工作职责和基础技能(要清楚) web前端的...
  • 前端自学路线--入门

    千次阅读 多人点赞 2018-09-13 21:38:16
    但是后来和自己自学对比了一下,放弃了继续去上培训班,在网络如此发达的今天,网络上的免费视频和各种知识网站,完全可以满足前端的一个基础入门,至于更深层次的就是要自己动手做项目,去学习一些更好的框架 ...
  • 前端入门知识(二)

    2020-10-27 11:19:40
    前端入门知识(二) 前端开发流程 在分离之后的前端开发,首先要解决两个问题:页面预览问题(pc端和手机端预览)和 接口跨域问题 一、页面预览问题 直接用浏览器打开.html文档,这个url的路径类似于file:///D:/...
  • web 前端入坑第一篇:web前端到底是什么?有前途吗

    万次阅读 多人点赞 2016-08-01 14:49:20
    web前端到底是什么? 某货: “前几年前端开发人员鱼目混杂,技术参差不齐,相对学习起来不规范,导致> 前端开发人员聚集,所以现在前端工种和工资还是没得到普遍重视,但近2年来,> > HTML5、JS 的流行...
  • web前端该怎么入门?web前端入门教程(非常详细)给你学习前端的新手几个建议:第一:切记学习前端开发不可以依赖任何人,我做了开发这么久,十年了,见过很多依赖老师的学生,这样的后果就是自己没有解
  • web前端入门(一)--NodeJs

    2016-12-07 15:20:40
    1.NodeJS安装由于一些原因,npm在中国的下载速度并不是很理想,我们可以安装淘宝提供的cnpm来代替其功能。 官方网址 : https://npm.taobao.org/执行以下命令即可...之后可以直接使用cnpm代替npm,命令格式是一样的。...
  • 我的第一篇文章:【web前端到底是什么?有前途吗?】,在我没想到如此 ‘HOT’ 的情况下 得到很多好评和有效传播。 也为我近期新开的 个人前端公众号:前端你别闹(webunao) 直接增加了几百粉(果然,帅的人...
  • 快速入门Web前端开发

    万次阅读 多人点赞 2018-09-30 09:06:40
    入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平。请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript 这三大基础技术栈肯定是需要掌握的,但要能参与实际...
  • 那么,怎么才算入门Web前端呢?想要从事Web前端开发行业,需要了解哪些相关的面试技巧呢?接下来分享20道HTML基础题自测一下,你可要仔细看哦! 1、HTML 指的是?() A.超文本标记语言(Hyper Text Markup Language...
  • 主要介绍了前端是什么,能干什么,与后端的区别,主要学的技术,HTML,CSS,JavaScript等等,以及未来的职业发展状况。
  •  接着是学习前端的一个难点、也是重点,就是JavaScript。  首先,初学一门语言,要秉承一个原则:“能动手的,尽量别吵吵”  另外,你需要一个能够从简到难的知识体系,一步一步跟下来。  下面...
  • web前端入门

    2019-04-01 10:13:11
    web端三大框架react、vue和angular。
  • WEB前端开发快速入门教程

    千次阅读 2017-03-17 14:47:24
    目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端工程师去做,web前端工程师是设计加开发的综合体,web前端工程师是在开发人员中最直接面向产品,面向用户的设计人员,一个开发团队的...
  • 下面介绍学习web前端入门必学的16个知识点,以及web前端的学习方法。 一、下面介绍学习web前端入门必学的16个知识点 1、HTML常用标签 语言是什么 、Web前端开发语言、 HTML超文本标记语言 、 网页主体结构 、常用...
  • web前端开发入门基础教程系列

    千次阅读 2019-06-18 21:54:58
    前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲,前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端、移动端网页,处理视觉和交互...
  • 前端开发工具、流行框架、面试、技术、模块引擎、前端语言
  • 一、不要混淆标记 大多数网站都会忽视WML,而是用大家熟悉的XHTML语言来编辑标记,所以在进行设计时一定要使用适合的编辑语言,并建立简明的语义标记。 二、了解你的手机 我们不仅要满足手机不通屏幕尺寸和分辨率...
  • 作为一个从零开始学习web前端技术的人给大家推荐基本不错的书籍,希望对于刚刚想进入web前端的人有一定的帮助,以下就是给初学web前端最近书籍推荐。 一、《Web前端开发最佳实践》 这本书是前端开发领域的经典之作,...
  • 100本最棒的web前端图书推荐

    万次阅读 2017-03-07 11:15:28
    100本最棒的web前端图书推荐 01、《JavaScript DOM编程艺术第二版(中文)》 语言:中文 类型:pdf  简介:这本书作为被大家推荐的最多的前端入门书籍是有道理的。 他能真正让大家了解dom脚本编程,或是说...
  • 首先说一下,这个课程学习的时间稍微有点长,整套课程涵盖了工作开发中的绝大部分技术,可以说掌握了里面的技术,在公司中独挡一面是觉对没有问题的。 学习一定要持之以恒 开篇为基础部分,一定要掌握好基础,才能...
  • 11个web前端开发实战项目案例+源码!拿走就是了

    万次阅读 多人点赞 2019-07-25 22:11:00
    小白为大家收集了11个web前端开发,大企业实战项目案例+5W行源码!拿走玩去吧! 老规矩:转发+关注并私信小编:“资料”全部打包带走! 下面给大家简单介绍几个: 小米官网: 项目描述 首先选择小米官网为第...
  • WEB前端简历模板

    万次阅读 多人点赞 2019-10-15 17:15:36
    WEB前端简历模板 详细资料 姓名:XXX 出生年月:XXXX年X月 名 族:X族 政治面貌:XXXX ...

空空如也

1 2 3 4 5 ... 20
收藏数 553,194
精华内容 221,277
关键字:

前端入门