开启你的JavaScript之路：一、浅谈前端发开发模式

1. 经典Web开发

就是最初Web的开发模式，它的目录结构是这样的：

我们可以看到整个项目的入口文件是index.html，当我们双击打开html文件的时候浏览器会根据文件中引入的路径加载JavaScript脚本和css，里面的写法就不作介绍了，相信大家已经烂熟于心了。这种开发模式已经算是分离的最彻底的模式了，相信大家也知道，不需要外部引入，只需要一个html文件也可以开发我们的web项目。

1.1 为啥这种开发模式可以持续这么长事件呢？

1. 前端负责静态页面的生成，后端负责页面的渲染；

2. 页面上没有太多的交互，前端方面逻辑代码少；

   肯定还有其他原因，剩下的我也没有仔细研究过。

1.2 为啥现在不用这种开发模式了？

1. 这种开发模式虽然结构简单，但是造成整个项目的代码都在一个文件里；
2. 就算通过引入把脚本文件分成一个一个脚本文件，那样做的局限性也很强，脚本之间的通讯如何实 现？项目如何管理，这都是一个个严峻的考验；
3. 如今Web开发的技术是日新月异，页面交互也是越来越复杂，HTML5的出现，让我们的Web页面可以变得更加绚丽。这些功能的实现，带价就是前端的代码量变得越来越多，技术越来越复杂，衍生出了一种职业–前端工程师，那我们的任务就是实现这些功能，并且让代码变得不那么复杂。
4. 现在的项目动辄上万行代码，我们可以尝试阅读一下别人的代码，一千行的代码看的你就无法自拔了。代码是给人看的，顺便让机器去执行，这种不易于维护不易于二次开发的模式肯定是要淘汰了。

2. 如今的Web开发

2.1 开发思维–组件式开发

如何去管理你的项目和你的代码呢？
我们可以把项目分割成一个又一个小的部分，并且规定命名和位置，通过在它们之间建立通道来把他们联系起来，组成一个完整的项目。我们只需要面对几十个几百行代码的组件，而不是几个几千行的脚本文件。并且根据打包规则可以生成你想要的任意模式的包。这种方法可以极大程度上的降低维护成本，并且提升加载速度。这一个个被分割开的文件，我们称它们为组件。
但是又有一个问题，如何去实现这些标准呢？一万个读者心中有一万个哈姆雷特，你有你的实现方法，我有我的实现方法，大家众说不一，根本没有办法协同开发。所以前端框架应运而生。

2.1 开发方式–借助框架开发

框架的作用是是什么？
如我们刚才所说，如何实现组件式开发？

1. 把项目分割成一个又一个小的部分
2. 规定命名和位置
3. 在他们之间建立通道
   框架最基本的实现就是这样，框架规定了我们在什么时间什么地点要做什么样的事，而我们要做的就是怎么去做这个事。这样一来我们只需要关系怎么去做这个事，无论你做事风格是怎样的，只要把这个事情做成了就行了。这样我们就完成了即高效又低成本开发。

这里就到了框架选择的时间了
我这里说说我对目前3大主流框架的看法，如何取舍全凭自愿：

Angular

Angular框架是Google公司开发的一款Web框架，最初的第一代AngularJS横空出世，让无数程序猿对前端程序猿的定义发生了改变，以前的前端程序员被称为‘切图狗’、‘笑话’，当然这是玩笑话，但是也代表了当时前端程序猿的处境。对前端程序猿的要求也普遍比较低，这都是大环境导致的，这些我们在后面再讲。当时的框架只会在后端开发去使用，因为当时的开发模式普遍没有前后端分离，还是去靠后端去渲染的这种，前端不需要框架这种作茧自缚的东西。

随着前后端分离开发模式的普及和经典前端开发方式已无法满足当前需求的时候，AngularJS的出现颠覆了传统的前端概念，从此进入了大前端时代，前端技术的更新是一天一个样。

AngularJS的开发模式将Html、Css、JavaScript分离出来，JavaScript作为controller控制页面的逻辑、Html呈现页面、Css渲染页面样式。集成了大量API，统一了格式，相同命名即为一个组件的约定。

目前Angular已经到了第7版从第2版本开始改名为Angular使用巨硬公司的typeScript作为默认开发语言，这门语言我们在后面再说。
因为学习成本的提高使得这个框架的追随者急剧下降，我们就以Angular7为例子来对比目前的其他框架。

我们暂且只关注src目录。开发的代码都在app文件夹下面，此框架的优点在于集成度高，换句话说就是啥都有，新建文件都有命令，而且十分规范，使用Typescript作为开发语言，有静态检查，语法类似于C++，对于大项目的开发有天生的优势，也是我最喜欢的框架。缺点就是太大了，而且学习成本比较高，需要记住很多指令，还有元数据等一系列的概念，并且要学习typescript这门语言，不过说真的这门语言是真的好用，我们后面再说一说这门语言。

现在是市场经济，你能带来的价值代表了你的价值，这门语言在国内的环境确实比较差。你在拉钩上去搜一下就会发现寥寥几行，还有招AngularJS的，这种招AngularJs的就是项目太大了，没有办法升级到Angular7，又不能放弃的，只能强行维护，不建议去这种公司。所以这个框架个人不推荐。但确实是我最喜欢的框架。当然Typescript墙裂建议去看看，巨硬出品必属精品。

React

后面的我就不去介绍框架的故事了，写法才是我们最关注的问题，直接上图
同样的也是在src目录下不过react使用的是jsx或者tsx语言类似于这样：

import React from 'react';

class Welcome extends React.Component {
    constructor() {
        super();
        this.aDataInfo = [1, 2, 3];
    }
    render() {
        return (
            <h1>
                {this.aDataInfo}
            </h1>
        );
    }
}
export default Welcome;

将html标签写在js文件中。
我们观察目录结构就会发现没有了html文件，相同命名为同一组件，使用起来比较自由。优点显而易见，结构简单，jsx也比较亲和，缺点就是和传统开发差异较大没有了html文件，一时让人很难接受。

Vue

Vue是尤雨溪和他的团队开发出来的，这个框架吸收了Angular和React的优点，也加上了自己对前端开发的理解，我们且来看一下目录结构：

同样的我们聚焦src目录，assets文件夹放的的是资源文件。components顾名思义就是组件了，下面的router定义了路由规则。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-link to="/home/test">Test</router-link>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

a:hover {
  color: blueviolet;
}

</style>

template标签内放的是页面标记也就是html，script标签种写JavaScript，style 标签写css样式。这样构成一个Vue组件。和react一样也是导出类，使用标签的形式实例化。

Vue框架在国内拥有大量追随者，社区拥有大量中间件，市场价值也高于前两个框架，如果你在考虑第一个入坑的框架不妨试试Vue。

当然学无止境，不能将思想局限于框架，学习它的写法，吸收它的优点，才能在前端的路上越走越远。