网站前端架构学习有什么路径指导下，或者什么方法 过程 需要有什么技术基础之后才能去学习前端架构

Question

我们应该如何去学习了解 网站前端架构学习有什么路径指导下，或者什么方法 过程 需要有什么技术基础之后才能去学习前端架构，

本人就做过一些小的项目，和用框架写过一些网站，想自己做一个网站，自己架构，我对前端网站的架构也不是很了解，不知如何下手。

表现，结构，行为和商业逻辑的混杂 这些东西我还分不清，

Answer 1

三分离的原则是指以下三种类型的代码尽量分离：
*样式（css）
*结构（html）
*行为（javascript）

有时候我们会在一个html页面里直接写<style></style>标签进行样式定义，或者是在html标签里写样式，例如:<div class="test" style="color:red;font-size:16px;"></div>;
同样地，我们也可能在html页面里写js脚本，或是在html标签里直接写js代码,例如: <button onclick="alert('123');">click</button>;
这样的写法就是没有分离，耦合性极高。

那么谈到架构，最简单的就是一个小项目里，项目文件按照如下的分类方法进行处理：

project
|------img 放置图片文件
|------js  放置脚本文件
|------css 放置样式文件
|------index.html

在index.html中，js采用<script src="js/xxx.js"></script>的方式引用,dom的操作不直接写在html标签上;而css采用<link rel="stylesheet" type="text/css" href="css/xxx.css">的方式引入，在html标签上只出现类或者id名称。
这就是所谓三分离了。最简单的架构就是这样。

稍微复杂一点的，你可以参考《编写高质量代码--web前端开发修炼之道》里边讲的一种架构，将代码分为底层、组件层、应用层，这样的分法也较为合理，建议你看看这本书。

其实架构都是你觉得怎么样好维护就怎么样设计目录结构。这个并没有一定的，也的确是需要一些工作经验，当自己觉得有些维护工作繁琐的时候，自然就会去思考架构怎么样设计合理。目前前端业界对于比较复杂的应用采用的是MVC或者是MVVM架构，一般都会配合node.js使用。例如奇舞团的think.js就是MVC架构的，基于node.js的框架。所谓架构完全取决于你应用的规模而言，针对项目进行设计。

如果你需要再深入一些，那可以找司徒正美的书看看。

Answer 2

所谓架构，都是以足够的经验作为基础的！

还有，好的产品都是不断迭代出来的