angular

前言

来公司大概2周了，接手的是一个angular的项目，angular是前端三大流行框架之一，而且是出现最早的前端框架，现在相对比较流行的Vue和angular很多优秀的思想都是借鉴的angular，包括现在比较流行的基于ajax的axios库也是借鉴angular的$http，因此angular还是非常值得我们去研究的一个前端框架。下面简单聊一下我接到的这个基于angular框架的前端项目。

项目目录结构

合理的项目结构对整个项目后期的不管是开发还是维护都是至关重要的，我的这个项目结构如下图：

从上往下依次来介绍,首先第一个文件夹是app，这个就是项目代码了，所有模块都在这个文件夹下面，也就是我们现在所说的组件都在这个文件夹下，这也是我们现在开发操作次数最多的文件夹，然后接下来是dist文件夹，dist是distribution的缩写，顾名思义就是线上发布的版本。然后是libs文件夹这个文件夹下主要涉及到的是cookie的一些简单存取，node_modules文件夹很熟悉了，前端的各种模块通过node这个包管理工具引入进来，当然现在也可以用yarn（目测以后会替代npm），public这个文件夹只存放了一个根index.html文件，这个的作用后边再说。然后是script文件夹，这个里面主要放置一些配置文件，如webpack打包配置文件，static文件夹也是存放公共静态资源，这里目测有点多余。

下面的单个的文件都是一些简单的配置文件和文档说明（README.md），这里有一个package-lock.json,可能很多人并不知道其作用，这个和package.json文件夹的作用非常类似，比较早期的npm版本是没有package-lock.json这个文件夹的。其实打开这2个文件对比一下就可以知道区别在哪里，如下图：

通过对比知道，package.json版本号都是向上兼容的，比如”angular”: “^1.6.9”,也就是1.6.9以上的版本都可以，而packjson-lock.json文件则是指定好确定的版本号，为什么要这样做呢，其实原因很简单，因为npm版本库每时每刻都在更新，在不同的时间安装就会有版本不一致的问题，因此通过引入package-lock.json最大程度上的避免了版本号不一致引起的一些问题，保证了项目的稳定性和后期的可维护性。

这就是大概的项目结构，感觉项目结构方面比较清晰，找各种文件时，目标也比较明确，能够满足中大型项目的需求。

和react的对比引发的一些思考

因为之前在微博实习的时候主要用的是react，通过对比可以知道react和angular区别还是很大，首先数据绑定机制上，react更多强调的单向数据流，当然也可以实现双向绑定，这里并不推荐。angular单向和双向绑定都有。

在实现机制上react是发布订阅者模式，而angular则采用脏值检查来实现，当然react还有一层diff算法，这也是react较快的原因之一。

其次代码层面方面，react更多的是将所有东西都放到一个文件里面，也就是一个组件基本就是一个文件搞定，HTML用jsx语法搞定，当然css文件单独引入，而angular组件则分成三个文件夹的这种格式，其中template文件夹放置需要的html文件（Vue也有这种写法），controller文件夹放置对应的交互逻辑操作，service文件夹主要就是各种数据操作，主要就是与后台交互的一些ajax请求。

我感觉这2中框架各有千秋吧，都有各自的有点，并没有说哪种框架是完美的，具体的还是结合具体的实际业务来进行技术选型，总之适合自己项目的就是最好的。

项目中与webpack相结合的一些点

webpack可以说是现在最流行的打包工具，现在webpack4也已经发布，速度提高将近40%，可以说webpack现在就是前端最好用的打包工具，webpack配置好的话相信对整个项目的开发都有事半功倍的效果。webpack说起来的话，4个东西比较核心。

首先就是入口，在多个代码模块中会有一个起始的 .js 文件，这个便是 webpack 构建的入口。webpack 会读取这个文件，并从它开始解析依赖，然后进行打包。我们常见的项目中，如果是单页面应用，那么可能入口只有一个；如果是多个页面的项目，那么经常是一个页面会对应一个构建入口。入口可以使用 entry 字段来进行配置，webpack 支持配置多个入口来进行构建。

webpack 中提供一种处理多种文件格式的机制，便是使用 loader。我们可以把 loader 理解为是一个转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块。

举个例子，在没有添加额外插件的情况下，webpack 会默认把所有依赖打包成 js 文件，如果入口文件依赖一个 .hbs 的模板文件以及一个 .css 的样式文件，那么我们需要 handlebars-loader 来处理 .hbs 文件，需要 css-loader 来处理 .css 文件（这里其实还需要 style-loader，后续详解），最终把不同格式的文件都解析成 js 代码，以便打包后在浏览器中运行。那么在处理css这块有一个坑，就是各种loader的加载顺序需要注意，比如处理scss文件，

以处理 SCSS 文件为例：

SCSS 源代码会先交给 sass-loader 把 SCSS 转换成 CSS； 把 sass-loader 输出的 CSS 交给 css-loader 处理，找出 CSS 中依赖的资源、压缩 CSS 等； 把 css-loader 输出的 CSS 交给 style-loader 处理，转换成通过脚本加载的 JavaScript 代码；

其次是plugin，在 webpack 的构建流程中，plugin 用于处理更多其他的一些构建任务。可以这么理解，模块代码转换的工作由 loader 来处理，除此之外的其他任何工作都可以交由 plugin 来完成。通过添加我们需要的 plugin，可以满足更多构建中特殊的需求。例如，要使用压缩 JS 代码的 uglifyjs-webpack-plugin 插件，只需在配置中通过 plugins 字段添加新的 plugin 即可。

最后是输出，webpack 的输出即指 webpack 最终构建出来的静态文件，当然，构建结果的文件名、路径等都是可以配置的，使用 output 字段。

上面是对webpack简单的介绍，下面具体结合项目来梳理，首先有2种webpack类型的配置文件，一种开发版本，另外一种则是生产环境版本，开发可以配置一些我们需要的比如热更新配置，等到上线时就可以直接删掉这些配置，因此这里需要2种类型的配置文件。接上面的pulic文件夹下只放了一个index.html文件，这里说下原因webpack 默认从作为入口的 .js 文件进行构建（更多是基于 SPA 去考虑），但通常一个前端项目都是从一个页面（即 HTML）出发的，最简单的方法是，创建一个 HTML 文件，使用 script 标签直接引用构建好的 JS 文件，如：

<script src="./dist/bundle.js"></script>

但是，如果我们的文件名或者路径会变化，例如使用 [hash] 来进行命名，那么最好是将 HTML 引用路径和我们的构建结果关联起来，这个时候我们可以使用 html-webpack-plugin。(具体配置参考官方文档即可)这里也是回答之前有个同学问我的这个问题。这里是比较新的一个点，其他一些比较常规的配置这里不在细说。

webpack是非常强大的工具，你可以自定义loader和plugin，之后打算自己写一个处理markdown的loader，之后一并分享，高效使用webpack是前端必修课。

项目中的数据交互

数据交互主要就是ajax请求，现在各种发ajax请求的库太多了，其实了解一个即可触类旁通，几乎所有的都是大同小异，这边angular用的是自带的$http库，写法也是和promise比较相似的链式调用写法，如下图：

其中ajax，这部分有一个点我觉得特别好，这里把所有请求的路径都写到一个API.js文件当中，而不是把请求地址放到对应的方法当中，这是非常好的一个实践，这样结构非常清晰。

请求这里有一个坑就是表单请求的时候注意相关参数的初始化（params），不然表单的值是不可控的,也就是无法获取到表单的值，这里要特别注意一下。

总结

后面关于路由和angular依赖注入打算在写一篇文章来介绍，通过这次项目的接触，感觉每个项目配置都不尽相同，我们自己平时都喜欢使用现成的脚手架。

react：create-react-app

vue:vue-cli

angular:angular/devkit/build-webpack

那么如何自己搭建一个最简单的脚手架或许才是我们需要思考的。