前端架构

原文还是在简书上： Yeoman-- 一个强大的前端构建工具 ,我只是自己的搬运工！！ 上期跟大家试了试 Vue-cli这个构建工具 ，这个让我想起了很多其他的前端工具，其中一个就是Yeoman（上次就剧透了的）,所以这期跟大家先简单介绍下这个脚手架工具，然后慢慢一步步深入下去。 先说说Yeoman是什么，它想做什么？ Yeamon帮助你快速的开展一个项目工程，提供最佳实践和工具，来让你保持高效率编码。 他们自己提供了一个构建生态系统，主要通过‘yo’这个命令来构建一个完整的项目或者项目的一部分。 通过官方的生成器，他们建立了一个Yeoman的工作流，这个流是由一个强大的,固定的客户端组建，包含工具和框架帮助开发者快速建立牛逼的web应用。他们尽量提供了开发者所需的东西。 作为良好文档和深入思考构建过程的思想者，Yeoman包含了检测（静态检测）、测试以及压缩等等一系列工具，让开发者能够更加专注于思考解决方案。 Yeoman其实是3个工具的总和： yo --- 脚手架，自动生成工具 Grunt、gulp --- 构建工具 （最初只有grunt，后面gulp火了添加进来的） Bower、npm --- 包管理工具 （原来是 bower，后面添加了npm） 上面的三个是各自独立发展和运行的，混合后效果就不一样，主要在于yo，相当于一个粘合剂一样，把grunt这些工具粘合在一起。

5G时代来临，各行各业对产品的用户体验需求空前大增。人们在享受互联网带来的便捷也给互联网产品提出了新的需求，这意味着前端开发人员也有了更多的机会和挑战。无论是大小公司，对前端开发工程师的需求都是在快速上涨，薪资待遇也随之上升很快。 前端开发工程师就业机会多，创业机会多，且就业范围广，几乎各行各业都有需要，互联网公司、金融，贸易等等都能进。 对于更迭迅速的IT开发行业来说，新的一年将会有更多的改变和挑战。本人从事IT行业6年，目前也是一名全栈开发者，接下来给大家阐述：5G 带来的万物互联，2020年，web前端工程师在未来发展的惊人表现！无论你是正在学习前端，还是打算学习前端，从事前端，相信阅读完本文，你会更加知道作为前端工程师，在未来前途无量！ 1、前端工程化 在前端工程程化中，开发者最重要的基本素养就是通过工具提升效率，前端开发者在这些工具下会持续迭代和优化。 展望2020年前端的发展，前端工程体系一定会更加闭环，不再是一个脚手架这么简单，而是会结合 IDE，打通业务属性，从项目初始化、到编写代码、到 CI、到灰度、到发布 形成一个完成的闭环。 2、跨端开发 今年很多团队转战谷歌常态的 Flutter，特别是 Flutter for Web 的第一个 Release，这让 Web 前端重燃希望、跃跃欲试。 同时，苹果公司也发布了全新的 UI 系统——SwiftUI，同时

现在市场上对于初级前端并不友好，直接可以这么说，一个实习前端，初级前端，你去面试，竞争力是非常非常大的！不要以为你学好了三剑客，你就可以拿个什么5.6千，甚至7.8千，尤其是即将毕竟的计算机学生，千万不要抱着这种侥幸的心里，多去逛逛，外面的世界很大，也很残酷！ 市场是非常需要前端工程师的，但是，是中高级的前端工程师，所以就算入了前端的门，也需要不断的提升自己，无论你是学院派，还是培训派，还是自学派，都应该具有强烈的学习意识！ 目前入门前端的人群分类 1、计算机相关专业出身 系统走过计算机的理论基础，比如计算机组成原理、操作系统原理、计算机网络、算法数据结构、设计模式，至少用过两门以上编程语言（强类型+弱类型）。 优点：理论、架构方面扎实，有整体计算机思维，内功不错，外功学起来比较快。 缺点：部分人对前端相关细节技术不扎实，不过花时间能很快搞定。 2、非计算机出身自学（也包括计算机专业没好好学的） 理论基础薄弱，后来因个人兴趣或者职业需求，自学前端开发技能。 优点：自学能力比较强，能够根据自己的兴趣规划学习内容。 缺点：部分人对前端没有整体的学习框架不成体系，部分人计算机没有整体思维，建议系统梳理下前端知识体系结构，该补的还是要补起来。 总结入门前端时的一些困境： 1、因一些基础算法、数据结构理论不扎实导致一些编程思维难于理解。 2、计算机体系结构、操作系统理论

1. html特殊字符的html，js，css写法汇总 ： http://www.cnblogs.com/starof/p/4718550.html 2. ::before和::after伪元素的用法 ： http://www.cnblogs.com/keyi/p/5943133.html 3. YFCMF 轻量级企业网站管理系统： https://github.com/yangchaogit/YFCMF 4. 前端开发面试题： https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers 5. 十分钟搞定Vue.js搭建： http://blog.csdn.net/sinat_29412671/article/details/53690658 6.轻量级PHP开发框架thinkPHP：https://www.kancloud.cn/manual/thinkphp5/118003 7.Flexbox弹性盒布局模型：http://www.w3.org/html/ig/zh/wiki/Css3-flexbox/zh-hans 8.简单快速上手弹性盒模型： http://www.w3cplus.com/css3/flexbox-basics.html 9

信息技术的迅速发展，使IT技术者们赶上了一个百年难遇的好机会，尤其是国家出台了“互联网+”的政策后，更是催生了IT行业的就业空间，使其呈现爆发性增长。 如今，微信逐渐成为了大家主要的交流工具，随着各种小程序游戏风靡朋友圈之后，其从业人员Web前端开发工程师的薪资可谓是一路高涨。细心观察下大家不难发现，就目前来看，Web前端作为移动互联网时代的前沿技术，不仅在电脑端，而且在手机端也得到了广泛的应用。据预测，Web前端开发在未来5—10年，将会成为移动互联网领域的主宰者。 当然，很多外行人对于“Web前端开发”的了解还只是皮毛，今天小编就为大家详细解释一下Web前端到底是什么。 1、什么是Web前端？ 早期互联网时代，电脑端的网站页面主要以静态为主，相对来说也没那么复杂。而现在随着网络信息逐渐丰富，网页发生了很大的变化，企业更加注重用户交互，各种产品层出不穷，好产品想要长久发展，用户体验就变得尤为重要，特别是移动端产品。 Web前端技术主要包括HTML5、CSS3、Less、Sass、响应式布局、移动端开发、以及Ps设计等，更高级的前端开发人员还需要掌握JavaScript 语言、Mysql、Mongodb数据库开发、vue.js、webpack、elementui等前端框架技术。 2、Web前端开发可以从事哪些工作？ 学完Web前端开发后，可以从事网站前端工程师、网页制作工程师

Web1.0 Web 1.0，指的是万维网发展的第一阶段，时间大约从1991年到2004年。“在Web 1.0中，内容创作者很少，绝大多数用户只是内容的消费者。”(在Web 1.0时代，人们只能被动地浏览内容。)。 Web2.0 Web2.0介绍 Web 2.0是一种新的互联网方式(第二代互联网)，通过网络应用（Web Applications）促进网络上人与人间的信息交换和协同合作，其模式 更加以用户为中心 。 Web 2.0的核心概念是互动、分享与关系，所有的网络行为，都可用“互动、分享、关系”的概念来作诠释。 2.0是软件版本，这里指一系列web技术的升级，计算机工业的商业革命。 Web2.0特点 将Web作为平台 驾驭集体智能 数据将变成未来的"Intel Inside" 软件不断发行与升级的循环将会被终结 轻量型程序设计模型 通过内容和服务的联合使轻量的业务模型可行 软件运行将跨越单一设备 丰富的用户体验 分享和参与的架构所驱动的网络效应 通过带动分散的、独立的开发者把各个系统和网站组合形成大汇集的改革 快速的反应与功能新增 Web2.0服务方式 1.双向消息协议： REST（RepresentationalStateTransfer）表示了一种Web服务, 客户端传送所有的事务的状态； SOAP（SimpleObjectAccessProtocol

最近接手了公司两个项目，一个PC端后台管理系统，一个app端项目，当然使用的依然是熟悉“Vue全家桶”那套！但是，当我打开项目时，里面的代码是这样的（路由模块）： 就是所有路由配置都放到一个index.js中，这多少还是让我有点惊呆的，显然，项目会越做越大，模块会越加越多，那这种不分模块的架构方式明显给以后带来很大维护困难，index.js文件会变得异常庞大... 所以，我便想趁现在代码量还在可控的情况下赶紧优化一下吧！于是，跟领导说明了用意，并很快得到了首肯！所以就开始动起来了~ 1. 分模块： 　　首先，当然是要把不同模块的路由分离开来了（本来想只把新加入的功能模块做处理，老模块保留现状，因为复制、粘贴也是很耗体力的。但是，想想所幸现在项目还不大，再加上目前虽然不年轻但还算力壮，且还稍微有点强迫症的催动下，所以还是决定将现在有代码拆开...）,心里小小斗争一下之后，就开干了！于是，就有了这样的结构： 同时，让index.js的全部代码缩减成了这样： 为啥你module里的文件名会是.routes.js 呢？这个嘛... 其实是个小技巧，并不是便性规定， 1. 为了方便正则匹配，2. 为了标识文件的功能，让人一看就是知道这是路由文件... 啥正则匹配？ 2. 自动导入： 　　为啥能将index.js缩减成这样呢？其实就是代码所示，利用了require

PS：在其基础上完善了一些答案，增加一些问题 欢迎fork wj：） 目录 前言 HTML 部分 CSS 部分 JavaScript 部分 其他问题 优质网站推荐 前言 本文总结了一些优质的前端面试题（多数源于网络），初学者阅后也要用心钻研其中的原理，重要知识需要系统学习，透彻学习，形成自己的知识链。万不可投机取巧，只求面试过关是错误的！ 面试有几点需注意：(来源程劭非老师 github:@wintercn) 面试题目： 根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方向↑。 题目类型： 技术视野、项目细节、理论知识题，算法题，开放性题，案例题。 进行追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种关联知识是长时期的学习，绝对不是临时记得住的。 回答问题再棒，面试官（可能是你的直接领导面试），会考虑我要不要这个人做我的同事？所以态度很重要。（感觉更像是相亲） 资深的工程师能把absolute和relative弄混，这样的人不要也罢，因为团队需要的你这个人具有可以依靠的才能（靠谱）。 前端开发面试知识点大纲： HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、 选择器优先级及使用、HTML5、CSS3、移动端适应 JavaScript： 数据类型、面向对象

前端学习路径 1.WEB前端快速入门 在本阶段，我们需要掌握 HTML 与 CSS 基础，当然，也包含 H5 和 C3 的新特性。这个部分内容非常简单，而且非常容易掌握。相信你也更愿意学习这个部分，毕竟他可以让你最直观的感受到前端的魅力。为了锻炼大家写代码，可以根据你喜欢的站点去实现效果。这一阶段是非常重要的基础阶段，所谓基础就是可能这个阶段我们的学习的内容，可以让我们开发出来绚丽网站站点，但是功能丰富却暂时做不到。 为了完成更绚丽的站点，我们需要掌握常见特效的实现，利用 css3 和 h5 的新特性实现动画，布局，雪碧图，滑动门，tab 切换等特效。并且掌握基础的站点优化内容。例如 sprite 等。虽然我们还不能完成更多交互内容，但是我们会学习到很多的知识模型和理论，而这些知识模型和理论是我们后期工作和学习的基石。扎实的基础有了，我们才能走的更稳更快。 注：本阶段不涉及到编程，主要是熟悉 HTML5 各种标签用法、CSS3 各种属性的用法。 2.JavaScript 基础与深入解析 JavaScript 语言非常重要，可以说学习前端本质就是学习“JavaScript”编程。后面学全部都是基于JavaScript 的。JavaScript 语言可以让网页元素具备动态效果，让体验度更加流畅。这在目前流行的 B/S 架构体系下，是极端重要的事情。这也是为什么前端工程师大行其道

　　关于一个WEB前端的职业规划，其实是有各种的答案，没有哪种答案是完全正确的，全凭自己的选择，只要是自己选定了，坚持去认真走，就好。在这里，我只是 简要说一下自己对于这块儿内容的理解。有一个观点想要分享给大家的是：任何规划和目标的实现都依赖于知识的积累，而知识的积累来源于学习及学习后大量的实 践。希望我们做前端开发的人心能静下了，好好的学习。因为要学习的知识太多了。在这里我说一句，三百六十行，行行出状元! 　　资深WEB前端工程师 　　这个方向算是一个WEB前端最基本的选择了，在国外，很多老外都能够把自己的专业做到极致，能一辈子就在一个专业领域不断学习和积累。主要在于内因和外因 两方面，内因是老外通常思想比较简单直接，容易一直专注于一个领域;外因是国外的环境很好，能够良好的支撑这样的职业发展道路。反观国内，从内因来 讲，WEB前端技术人员还是蛮浮躁的，通常会因为WEB前端知识的更新速度太快而觉得学习起来辛苦，最终转向后台或其他道路。从外因来讲，WEB前端人员 没有获得公平的待遇，可能从HTML页面制作就开始并沿袭下来的，从来WEB前端人员都比后端人员低一等，貌似前端就是“浅显”的代名词、后端就是“深 奥”的代名词，这也直接造就了前端人员的收入无法和后端人员媲美，同时直接影响到前端人才市场的活跃程度。另一方面，前端的技术入门较容易，造成另一个极 端情况：人员泛滥、人才稀缺