1.学web前端有前途吗
2.AST详解与运用

学web前端有前途吗

       一   学习前端这门技术有前途吗？

1、源码行业发展好。源码

       就说我们目前中国所有行业，源码可以说任何一个行业都离不开互联网，源码现在的源码人们对于互联网的依赖很大，互联网行业在中国无疑是源码底层就是源码现在发展前景最好的没有之一。web前端现在虽然竞争大，源码刚开始工作并不是源码那么好找，但是源码它未来所需要的人才是可观的，只有你拥有这个技术，源码作为web互联网+时代，源码用户体验现在成为了企业的源码第一标准，web前端当然待遇是源码水涨船高的。

2、源码人才需求大。源码

       现在的人们离不开手机，我们现在手机的各种应用都是用代码写成的，互联网对人们的影响越来越大，根据新闻报道未来中国年，需要软件开发，美工设计，web前端开发人才W人才，各类职业也需求更多，前端的人才需求比以前也有了质的飞跃。

3、薪资待遇高。

       web前端开发工程师的薪资待遇平均工资已经突破一万，因为其他行业确实工资涨幅不大，xadmin源码解析所以必然会吸引了大批想要月薪过万的人来转行学习。我想引用乔布斯的一句话：WEB就是人类的未来，我们身为前端开发工作者也是未来，相信WEB前端开发的明天会更好。

二    零基础小白应该怎么学习前端才能少走弯路？

             关于前端这一块的学习，我不主张自学，因为前端的知识体系是很庞大的，如果你自学，遇到一些问题，你自己很难解决，至少需要有专业的前端人士指导你，站在高手的肩膀上，才能看的更高更远，当然很多小伙伴会说，我也知道学习前端有高手指点挺好啊，可是我怎么知道去哪里找高手，高手又为什么愿意指导我呢？

            这个问题问的好，其实现在是互联网时代，网上有很多的相关视频和直播课，我平时就经常去上网听一些前端高手讲课。我可以给大家分享一下我在网上听课的地方，老师挺厉害的，每天晚上在网上免费讲两个小时的直播课，也很适合零基础小白，讲的很透彻通俗易懂，让人感觉，原来前端是aar指标源码这么回事，没有想象的那么难，想听前端直播课的同学，可以进入他的前端教程资料裙：首先位于开头的一组数字是：，其次处于中间地带的一组数字是：，最后位于尾部的一组数字是：，把以上三组数字按照先后顺序组合起来即可。作为想从事前端这个行业的小伙伴，一定要有一个平常心，只要能学到知识，去学就是了，不要磨磨唧唧的的做什么事情，否则什么也做不好。

三  学习前端，你需要具备哪些素质？

       （1）如果web的任何一个元素（web界面，灵活的编程风格等）有一点吸引了你，让你着实着迷，恭喜你，有了一个完美的开始。确认一下自己是否喜欢和合适前端，而不是为了一份看起来体面而且薪水不菲的工作。

       （2）不断学习，每日的积累，关注前端动态，是你跟上前端潮流的主要途径。前端的体系过于庞大，技术框架争涌而出，如果你经常抱怨累死码农的cuda源码大全节奏，那就审视一下自己对前端的态度。

       （3）主抓基础，避免盲目。前端领域知识点很多，值得学的东西也很多，聪明的人懂得花时间学习成体系的知识并且研究得足够深入，而不是盲目的看到别人用什么框架就去学什么。只停留在实践运用的阶段，到头来框架们都一个一个被淘汰，你仍在原地踏步。

       （4）整理总结，先模仿后创造。将每日的积累做好规整，记录到博客也好，笔记也好。多看看牛人的源代码，等你达到了一定的层次水准，自然会得心应手。

       （5）持有一颗造福前端社区的心。写一些有意思的小工具、插件，推广出去， 始终坚信，在从事前端的道路上You are not alone。

       （6）要有专业人士的指导，尤其是学习前端找工作的，不要妄想自己一个人自学前端能找到工作，源码分析git现在非常难，如果没有一个明白人帮你解决一下问题，会有非常多的弯路，中间很容易放弃，学习的不专业不说，最重要是浪费时间。

       （7）一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

四  入门web前端开发需要学习什么?

第一，基础部分的学习。

       主要就是html、css、Java。这个其实不用多讲，这些个基础不学扎实了什么也干不了，可以直接从html5、css3、ES5来学习。

第二，与美工相关、后端开发、设计相关的学习。

       想做好Web前端开发，一定搞清楚自己的工作界面在什么地方，这对你有很大帮助。每个公司可能都不一样，所以了解边界相关的知识就很重要。

       美工相关，主要是说ps、切图之类的东西，photoshop还是需要会用的，至于说你能不能搞出漂亮的来那倒不是重点，关键点是体会美工的工作过程。如果你在公司兼了这件事，那你就得深入的学习了，别不以为然，前端的美术有修养还是挺重要的。

       后端开发，虽说一般情况下，前端开发和后端开发是分开的，不过二般情况也很多。这个时候就需要你在后端中选择一条主线，很多人都在比较PHP、Python、Node.js哪种好，其实都差不多，不过从市场上的热度来说视乎Node.js更热一些，当然Node.js对js熟悉的前端来说也更容易上手。

       相关标准，标准这个东西很多人都很不屑。其实很重要，越大的团队越重要。还是熟悉熟悉养成好的习惯微妙。这在初期至少涉及到很多兼容性问题，所以W3C的标准是必须了解和掌握的。

第三，各种框架类库的学习。

       jquery，bootstrap等，现在的框架比较多，但是jquery和bootstrap这样级别的必须得熟练掌握，要不很多公司都没法干活。一般类库和框架都有垂直的网站可以学习，如bootstrap中文网之类的都很不错。

第四，对于工具的学习。

       如Git、webpack、Gulp、github、Nginx 等等。工具本身实际上不学也能干活，从学习的角度来说，这个时间的分配上可以少一点儿，但是从工作的角度来说，如果需要的话要尽快上手，逐步熟悉。工具类的东西都不是特别难上手，几天可能就差不多了，但是想玩的透，极大的提高效率这个还是需要投入不少时间的。

AST详解与运用

       了解AST之前,我们先来简单陈述一下JavaScript引擎的工作原理:从上图中我们可以看到,JavaScript引擎做的第一件事情就是把JavaScript代码编译成抽象语法树,于是就有了本文对AST抽象语法树的浅析.

       我们都知道,在传统的编译语言的流程中,程序的一段源代码在执行之前会经历三个步骤,统称为"编译":抽象语法树（abstract syntax code，AST）是源代码的抽象语法结构的树状表示，树上的每个节点都表示源代码中的一种结构，之所以说是抽象的，是因为抽象表示把js代码进行了结构化的转化，转化为一种数据结构。这种数据结构其实就是一个大的json对象，json我们都熟悉，他就像一颗枝繁叶茂的树。有树根，有树干，有树枝，有树叶，无论多小多大，都是一棵完整的树。

       简单理解,就是把我们写的代码按照一定的规则转换成一种树形结构。

       AST的作用不仅仅是用来在JavaScript引擎的编译上，我们在实际的开发过程中也是经常使用的，比如我们常用的babel插件将 ES6转化成ES5、使用 UglifyJS来压缩代码 、css预处理器、开发WebPack插件、Vue-cli前端自动化工具等等，这些底层原理都是基于AST来实现的，AST能力十分强大， 能够帮助开发者理解JavaScript这门语言的精髓。

       我们先来看一组简单的AST树状结构:

       经过转化,输出如下AST树状结构:

       我们可以看到，一个标准的AST结构可以理解为一个json对象，那我们就可以通过一些方法去解析和操作它，这里我们先提供一个在线检测工具,大家可以自行去体验: esprima.org/demo/parse...

       AST编译流程图:

       我们可以看到,AST工具会源代码经过四个阶段的转换：

       词法分析scanner

       parser生成AST树

       traverse对AST树遍历,进行增删改查

       generator将更新后的AST转化成代码

       Babel插件就是作用于抽象语法树。

       Babel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。

       vue中AST主要运用在模板编译过程.

       vue中的模板编译主要分为三个步骤:

       解析器要实现的功能就是将模板解析成AST，我们这里主要来分析一下代码解析阶段，这里主要运用的是parse()这个函数,事实上,解析器内部也分为好几个解析器,比如HTML解析器、文本解析器以及过滤解析器，其中最主要的就是HTML解析器。HTML解析器的作用就是解析HTML，它在解析HTML的过程中会不断触发各种钩子函数，我们来看看代码实现：

       举个例子:

       当上面这个模板被HTML解析器解析时,所触发的钩子函数依次是:start、chars、end。

       所以HTML解析器在实现上是一个函数，它有两个参数----模板和选项，我们的模板是一小段一小段去截取与解析的，所以需要不断循环截取，我们来看看vue内部实现原理：

       以上就是vue解析器生成AST语法树的主流程了，代码细节的地方还需要自己去解读源码，源码位置:\vue\packages\weex-template-compiler\build.js

       AST抽象语法树的知识点作为JavaScript中(任何编程语言中都有ast这个概念,这里就不过多赘述)相对基础的，也是最不可忽略的知识，带给我们的启发是无限可能的，它就像一把螺丝刀，能够拆解javascript这台庞大的机器，让我们能够看到一些本质的东西，同时也能通过它批量构建任何javascript代码。

       小时候梦想改变世界，如今我们可以用自己写的程序，构建出我们所生活的网络世界，丰富多姿。

       借用一句歌词: 我还是从前那个少年，没有一丝丝改变。时间只不过是考验，种在心中信念丝毫未减 。希望大家能够在软件开发的路途上坚定信念，越走越远.....