es6标准⼊门第3版pdf_最详细,快速⼊门Web前端开发的正确
姿势
⼊门标准
⼊门标准很简单,就⼀条:达到能参与 Web 前端实际项⽬的开发⽔平。请注意,是实际项⽬,这就需要了解如今的实际项⽬开发都⽤了哪些技术栈。HTML/CSS/JavaScript 这三⼤基础技术栈肯定是需要掌握的,但要能参与实际项⽬开发,肯定还要掌握其他⼀些主流的框架体系。
⼏年前, jQuery + Bootstrap 可以说是⼀统江湖,是前端领域的绝对霸主。⽽这⼏年,随着 Angular、React、Vue 等框架的兴起,变成了百家争鸣的局⾯。这⼏年,Web 前端的技术发展真是太快了,相应地,技术栈也就变得⾮常多,除了最基本的
HTML/CSS/JavaScript,以及 Vue/React/Angular 等这些 JavaScript 框架和各⾃的⽣态体系,还有 CSS 预处理器
Sass/Less/Stylus,还有 TypeScript,还有 grunt/webpack/gulp 等各种打包构建⼯具,还有其他⼀⼤堆技术栈。
这么多技术栈,我们不可能全都掌握,就算是资深的前端⼯程师,也只是精通其中⼀部分,⽐如,有些精通 Angular,有些掌握 React,有些则熟悉 Vue,很少有⼈对三种框架⽣态体系都⾮常了解。因此,我们⼊门也没必要每种框架都学习,只要挑选⼀种就够了。⽽且,作为全栈,我们学习⼀门技术更重要的是要学习技术背后的编程思想、设计思想、架构思想等。⽽不管是 Angular、React 还是 Vuew,其背后的核⼼设计思想都是组件化的设计,因此只要掌握⼀种框架,我们也就能学习到前端技术的核⼼思想了。
那么,我们应该学哪种框架体系呢?我的建议是从 Vue 开始,因为 Vue 的学习成本是最低的,⼊门简单,⽽且这两年 Vue 可以说是出现了爆发式的增长,已经直逼 React。React 的主要学习成本在于要掌握 JSX 语法,⽽且⽂档还⼤多都是英⽂。Vue 因为是国⼈开发和维护的,⾃然对国内的开发者更友好。Angular 则是个⼤⽽全的框架,显得太重,学习成本⾃然最⾼。⾄于 jQuery + Bootstrap 这套,已经过时了,建议没必要去学习了,毕竟我们的时间很宝贵,还有⼀⼤堆更有价值的东西等着我们去学。
因此,我们要⼊门 Web 前端开发的话,除了要学习 HTML/CSS/JavaScript 三⼤基础技术栈,还要了解 Vue 体系。⽽ Vue 体系,除了Vue 框架本⾝,还包括其他技术栈,这个后⾯再说。
HTML/CSS/JavaScript
HTML、CSS、JavaScript 是前端的核⼼基础,所以必须要掌握。HTML 主要就是 HTML5,相⽐之前的版本,新增了很多新特性。CSS 则主要是 CSS3 了,相⽐以前的版本,主要就是作了模块化的拆分。JavaScript 其实分为三部分:ECMAScript、DOM 和 BOM。ECMAScript 简称 ES,是 JavaScript 的核⼼,⽬前最新版本已经是 ES2017,是 ES6 的第三个⼩版本。DOM 是⽂档对象模型,其实就是⼀套访问和操作 HTML 所有元素的 API。BOM 则是浏览器对象模型,⽤于访问和操作浏览器的⼀些特性。
HTML/CSS/JavaScript 的学习资源⽐较多,我推荐⼏个。⾸先是 w3school 的系列教程:
HTML:该教程也包括了 HTML5 新增的内容,但讲得没下⾯专门讲解 HTML5 的细,所以该教程我建议只看 HTML 基础教程和表单部分即可
HTML5:该教程讲解了 HTML5 的新特性
CSS:该教程并不包括 CSS3 新增的特性,所以还需要学习下⾯的 CSS3 的教程
CSS3:该教程内容⽐较少,只包含 CSS3 新增的特性
JavaScript:该教程只是讲解了⾮常基础的语法
不过,我更推荐菜鸟的教程,内容虽然也是来⾃ w3school,但部分内容⽐ w3school 的更详细,以下是教程地址:
HTML:www.runoob/html/html-t…
CSS:www.runoob/css/css-tut…
JavaScript:www.runoob/js/js-tutor…
HTML 和 CSS 只要根据以上教程学习就⾜够了,但 JavaScript 则是不够的,以上教程缺少了 ES6 及更⾼版本的内容,后⾯我再推荐其他学习资源进⾏补充。
书籍⽅⾯,HTML 和 CSS 基础⽅⾯的,⾸推《Head First HTML与CSS》,编排设计通俗易懂,就连完全零基础的⾮ IT ⼈员都适合学习。不过,Head First 这本书没有涉及到 HTML5 和 CSS3 的更新内容。不过,Head First 有另⼀本书讲解了 HTML5,叫《Head First HTML5 Programming》,不过,要熟悉 HTML5 的⽤法,还是要先掌握⼀点 JavaScript 基础。CSS3 ⽅⾯ Head First 则没有相应的书籍,因此,我推荐另⼀本《CSS3实⽤指南》。
JavaScript ⽅⾯,我⾸推《JavaScript⾼级程序设计》这本书,书中内容由浅⼊深,也是写得通俗易懂,适合⼊门。另外,有些⼈会推荐《JavaScript权威指南》,但这本书主要还是⼀本字典书,略显晦
涩,其实不适合⼊门。不过《JavaScript⾼级程序设计》还是基于 ES5的,为了补充 ES6 的内容,推荐阮⼀峰的《ES6标准⼊门》,⽬前是第3版,内容已经覆盖了最新版本的 ES2017。另外,因为这是⼀本开源教材,所以也可以直接去阮⼀峰的官⽹免费阅读,以下是链接地址:
ECMAScript 6 ⼊门:es6.ruanyifeng/
另外,有⼀套系列书叫《You Don't Know JS》也要推荐给⼤家,也是开源教材,这套书会让你对 JavaScript 知其然也知其所以然,也包含了 ES6 的内容,不过这套书⾯向初学者的,只适合⽤来进阶。也出版了中⽂翻译的书籍,叫《你不知道的JavaScript》,⽬前只有上卷和中卷两本,据评价,上卷的翻译还不错,但中卷的翻译则⼀般般,下卷不知道什么时候才出版。以下是系列书的github地址:
You Don't Know JS:github/getify/You-…
那么,这么多学习资源,我们应该如何学习才⾼效呢?其实,我们主要还是为了了解各种核⼼概念,我们不可能在短期内熟悉所有知识点,因此,我还是和前⾯的⽂章⼀样,也罗列出⼀些核⼼的知识点吧。
HTML基础:以 w3school 或菜鸟的 HTML 教程为主,熟悉各种常⽤标签的⽤法,尤其是标题、段落、链接、图像、表格、列表、表单、区块、布局、CSS、脚本等
CSS基础:同样以 w3school 或菜鸟的 CSS 教程为主,熟悉 CSS 语法和选择器、样式、框模型、定位等模块的内容
JavaScript基础:⾸先作为⼀门编程语⾔,语⾔本⾝的基础肯定要熟悉,包括数据类型、变量、运算符、控制流、函数、对象等;另外,也要熟悉 DOM;BOM 简单了解下就可以了,使⽤场景不多
HTML5:HTML5 的新特性肯定要了解,内容其实也不是很多,核⼼的就是 canvas、svg、对多媒体的⽀持、Web 存储、应⽤缓存、WebSocket等
CSS3:CSS3 也是要熟悉那些新特性,最核⼼的就是弹性盒⼦
ES6:ES6 ⾃然也是要熟悉的,学好阮⼀峰的《ECMAScript 6 ⼊门》教程就⾜够了
Vue 体系
在开始正式学习 Vue 之前,我们先来了解⼏个概念,这样才能更好理解 Vue 的⼀些设计理念。第⼀个概念是「单页应⽤程序」,就是只有⼀个 Web 页⾯的应⽤,是只加载单个 HTML 页⾯并在⽤户与应⽤程序交互式动态更新该页⾯的 Web 应⽤程序。第⼆个概念是「Virtual DOM」,即虚拟 DOM,简单说就是⼀个模拟 DOM 树的 JavaScript 对象,是为了避免⼤⾯积操作真实 DOM ⽽导致的性能问题。第三个概念是「响应式系统」,通过数据模型和 View 的数据绑定,系统可以对数据模型的修改⾃动
响应到视图上。第四个概念则是「组件化」,Vue 和 React 都是通过组合各种组件组成应⽤程序的。理解了这些概念,你才能更好的理解 Vue/React 这些前端框架体系。
android编程入门指南 pdf还有,开发⼯具⽅⾯,我推荐 Visual Studio Code,⼀款免费开源的轻量级代码编辑器,macOS、Windows、Linux 都⽀持,有⼈评价说⽐sublime开源,⽐atom更快,⽐webstorm更轻,所以说,你值得拥有。
Vue 体系包含了很多技术栈,⼀套完整的 Vue 项⽬⼀般包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack,其
中,vue + vue-router + vuex ⼜称为 Vue 全家桶,因为这三套技术栈都是 Vue 官⽅推出的,其他框架和⼯具则是第三⽅的。那么,就让我们来⼀个个了解这些技术栈吧。
vue:vue 即是 Vue.js 框架本⾝,是⼀套采⽤了 MVVM 模式的 JavaScript 框架,它和 React ⼀样使⽤了 Virtual DOM,也提供了响应式和组件化的视图组件。不过与 React 不同的是,Vue 更推荐使⽤基于 HTML 的模板,这也是它相⽐ React 等其他框架更容易⼊门的原因。
vue-router:因为现在⼤多数 Web 应⽤都是单页应⽤,那要实现单个页⾯⾥的不同视图的跳转,就要⽤到路由,vue-router 库就是⽤来实现单页应⽤的路由功能。
vuex:vuex 是⼀个类 Flux 的状态管理库,它采⽤集中式存储管理应⽤的所有组件的状态。关于什么是 Flux,可以参考阮⼀峰写的⼀篇⽂章《Flux 架构⼊门教程》。
vue-cli:vue-cli 是官⽅提供的命令⾏⼯具,⽤它可以快速创建 vue 项⽬。
axios:axios 是 vue 官⽅推荐的⼀个第三⽅ HTTP 库,它是基于 promise 的,promise 是 ES6 的新增特性。
sass:CSS 的⼀款预处理器,简单⼊门可以看看阮⼀峰的⼀篇⽂章《SASS⽤法指南》。预处理器另外还有 less 和 stylus,不过不少⼤⽜最推荐的还是 sass。
webpack:webpack 是打包构建⼯具,可以类⽐为 Java 的 Gradle。不过 webpack 是基于 node.js 的,所以要⽤熟 webpack,还要学点 node.js 的基础知识,⾄少要懂得配置 node.js 的运⾏环境以及了解 node.js 的包管理⼯具 npm 的常⽤命令。
对于刚接触当代前端的⼈员来说,存在太多陌⽣的概念需要了解,⼀时可能难以消化,Vue 的作者尤⾬溪写过⼀篇《新⼿向:Vue 2.0 的建议学习顺序》,可以按照他的建议去学习。
学习资源⽅⾯,最好的应该就是官⽅⽂档了。另外,《Vue.js实战》这本书有尤⾬溪作推荐序,也可以买来看看,可以作为官⽹的补充资源。对于⼀些概念如果还不是很理解,也可以暂时先放⼀放,后
⾯在做项⽬开发的过程中可能你就会理解了。
实战⼊门
最关键的还是要通过项⽬实战才能真正⼊门,这也是我⼀贯推崇的。也是和 Android、iOS 实战⼀样的建议,如果条件允许,你可以向上司申请参与⾃⼰公司的前端项⽬开发,然后开始去熟悉代码和实现⼀些简单的⼯作任务,建议先从完成⼀些简单的UI界⾯开始。同样,开源项⽬⾃然也是少不了,Vue 这块的开源项⽬我推荐两个:
vue2-happyfri:很简单的⼀个⼩项⽬,很适合⼊门练习
vue2-elm:⽤ vue 模仿饿了么的⼀个完整项⽬,重点推荐
另外,也附上⼀个汇总了众多 vue 开源项⽬的 github 地址:github/opendigg/aw…。
对于开源实战项⽬的操作上,我依然还是建议先给应⽤改⽪肤开始,之后尝试着⾃⼰做出⼀个类似的App。以上⾯的 vue 版饿了么项⽬为例,你先给它所有页⾯先换个⽪肤,包括背景、按钮、⽂字等等,通通换掉⼀遍,然后尝试⾃⼰做⼀个百度外卖或美团外卖,当你做完,应付⼀般的 vue 项⽬开发就应该没有问题了。之后也根据需要可以再去学下 React 体系,这时候学起来绝对不会吃⼒。
总结
前端开发⼊门,要学的技术栈真的很多,除了最基础的 HTML/CSS/JavaScript,还包括 HTML5、CSS3、ES6,还要学习⽬前流⾏的JavaScript 框架,我的建议是从 Vue 开始,容易⼊门,要掌握的技术栈包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack,另外,node.js 也要了解点基础。最后,实战项⽬我推荐了⼀个简单的⼩项⽬和⼀个完整的 vue 版饿了么项⽬。
思考和实践
前端开发的编程思想和移动开发有什么不同?如何将前端的架构思想应⽤到移动开发上?最后,还是要独⽴完成⼀款 Web 应⽤。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。