都是本人理解，筆記大致概念，不詳細(xì)也并非完全正確，所以僅供參考。

模塊化

為什么要模塊化開發(fā)？
因為前端現(xiàn)在要做的事要多了，代碼越來越大了，依賴也越來越多了，所以不同的依賴的加載，不同開發(fā)人員的協(xié)同，如果不進(jìn)行模塊化的開發(fā)，會非常難以維護(hù)，組織代碼會非常麻煩，由此，需要模塊化開發(fā)，使代碼層次和結(jié)構(gòu)更清晰，使項目維護(hù)變得簡單。

兩種模塊化開發(fā)規(guī)范：

• AMD
• CommonJS

詳細(xì)的講解參照這里，以下簡單說明

AMD

AMD 是一個在瀏覽器端模塊化開發(fā)的規(guī)范，它只定義了 define() 函數(shù)，可以通過此函數(shù)創(chuàng)建一個模塊，供外部調(diào)用，例如：

define('myModule',['jQuery', 'exports'],function(){
  exports.abc = 123;
  exports.test = function(){
    console.log('haha')
  }
});

CommonJS

CommonJS 是服務(wù)器端模塊的規(guī)范，Node.JS首先采用了JS模塊化的概念。
根據(jù)CommonJS規(guī)范，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域，也就是說，在該模塊內(nèi)部定義的變量，無法被其他模塊讀取，除非定義為global對象的屬性，它使用 module.exports 來輸出模塊

var i = 1;
var max = 30;

module.exports = function () {
  for (i -= 1; i++ < max; ) {
    console.log(i);
  }
  max *= 1.1;
};

模板引擎

在如今的開發(fā)中，前后分離越來越多，所以數(shù)據(jù)與界面分離的也越來越重要，所以模板引擎的分量也越來越重。
簡單來說，模板引擎就是為了讓動態(tài)頁面渲染的時候，可以簡化字符串的拼接操作的東西。
模板引擎有很多種，舉 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>

現(xiàn)在的模板有很多，如何選擇和選擇哪個請參考此文章。

同構(gòu)

同構(gòu)是指同開發(fā)一個可以跑在不同的平臺上的程序。 例如開發(fā)一段 js 代碼可以同時被基于node.js 開發(fā)的web server 和瀏覽器使用。

同構(gòu)的詳情解釋參照此文章：點此前去

SSR 服務(wù)端渲染

因為HTML/CSS/JS本質(zhì)就是可被瀏覽器解析并執(zhí)行的字符串，所以服務(wù)端渲染的本質(zhì)是在服務(wù)端將業(yè)務(wù)邏輯處理，將站點的代碼和結(jié)構(gòu)加工完成，將成品的字符串返回，這就是 SSR 服務(wù)端渲染。

服務(wù)端渲染的優(yōu)勢很明顯，因為在服務(wù)端完成了邏輯和業(yè)務(wù)，所以減少了請求，不需要先下載一堆 js 和 css 后才能看到頁面，對首屏性能提升很大。

前后端的渲染各有利弊，在此不做描述，可參考此文章。

模板引擎、同構(gòu)、服務(wù)端渲染的知識點是一體的，所以細(xì)細(xì)研究一下就能了解三者。