都是本人理解，笔记大致概念，不详细也并非完全正确，所以仅供参考。
模块化
为什么要模块化开发？
因为前端现在要做的事要多了，代码越来越大了，依赖也越来越多了，所以不同的依赖的加载，不同开发人员的协同，如果不进行模块化的开发，会非常难以维护，组织代码会非常麻烦，由此，需要模块化开发，使代码层次和结构更清晰，使项目维护变得简单。
两种模块化开发规范：
- AMD
- CommonJS
详细的讲解参照这里，以下简单说明
AMD
AMD 是一个在浏览器端模块化开发的规范，它只定义了 define() 函数，可以通过此函数创建一个模块，供外部调用，例如：
define('myModule',['jQuery', 'exports'],function(){
exports.abc = 123;
exports.test = function(){
console.log('haha')
}
});
CommonJS
CommonJS 是服务器端模块的规范，Node.JS首先采用了JS模块化的概念。
根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性，它使用 module.exports 来输出模块
var i = 1;
var max = 30;
module.exports = function () {
for (i -= 1; i++ < max; ) {
console.log(i);
}
max *= 1.1;
};
模板引擎
在如今的开发中，前后分离越来越多，所以数据与界面分离的也越来越重要，所以模板引擎的分量也越来越重。
简单来说，模板引擎就是为了让动态页面渲染的时候，可以简化字符串的拼接操作的东西。
模板引擎有很多种，举 vue 的渲染为例：
<template>
<div>
<div v-for="(item, i) in list" :key="i">
{{ item.name }}的年龄是：{{ item.age }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
name: '小明',
age: 10
},
{
name: '小张',
age: 11
},
{
name: '小王',
age: 12
}
]
};
}
};
</script>
template 中， v-for 、 {{}} 就是模板引擎的语法，最终渲染出来的HTML如下：
<div>
<div>小明的年龄是：10</div>
<div>小张的年龄是：11</div>
<div>小王的年龄是：12</div>
</div>
现在的模板有很多，如何选择和选择哪个请参考此文章。
同构
同构是指同开发一个可以跑在不同的平台上的程序。 例如开发一段 js 代码可以同时被基于node.js 开发的web server 和浏览器使用。
同构的详情解释参照此文章：点此前去
SSR 服务端渲染
因为HTML/CSS/JS本质就是可被浏览器解析并执行的字符串，所以服务端渲染的本质是在服务端将业务逻辑处理，将站点的代码和结构加工完成，将成品的字符串返回，这就是 SSR 服务端渲染。
服务端渲染的优势很明显，因为在服务端完成了逻辑和业务，所以减少了请求，不需要先下载一堆 js 和 css 后才能看到页面，对首屏性能提升很大。
前后端的渲染各有利弊，在此不做描述，可参考此文章。
模板引擎、同构、服务端渲染的知识点是一体的，所以细细研究一下就能了解三者。
网友评论