#11 Next、Nuxt、Nest的区别

Web前端 2023-02-20

Twilio Blog 的文章《Next, Nest, Nuxt… Nust?》，讲 Next.js，Nest，Nuxt 这几个名字非常相近的 NodeJS 框架到底有什么区别。

flowchart TD
    A[Framework purpose?] -->|Pure Backend| B(Plain HTTP Handlers?)
    B -->|Y| C(express)
    B -->|N| D(nest)
    A -->|Focus on Rendering| E(Rendering Type)
    E -->|CSR| F(React<br>Angular<br>Vue<br>NuxtJS)
    E -->|Backend light| H(Next<br>NuxtJS)
    E -->|Mostly SSR| G(Gatsby<br>Next<br>NuxtJS)

流行程度对比：

  • Express
  • Nest

...

  • Next.js
  • Nuxt
  • Gatsby

...

  • React
  • Vue
  • Angular

Express

Express 是 Node 圈子的老牌 HTTP Server 框架，根据 NPM 下载量来看，可以说是事实标准。

Nest

LOGO

基于 Express，当然也支持替换成其他的 HTTP Server 库。

Next

Next.js 是一个基于 React 的前端应用开发框架。

Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验：包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。

Nuxt

基于 Vue 的前端应用开发框架。

#10 HTML5 Boilerplate

Web前端 HTML5 2021-07-26

可以保证跨浏览器兼容性的一套 HTML 模板，我决定将其应用在本站。

HTML5 Boilerplate is an HTML, CSS and JavaScript template (or boilerplate) for creating HTML5 websites with cross-browser compatibility.

#7 Bootstrap 基础模板

Bootstrap Web前端 2019-03-04 
<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>HELLO WORLD</title>

    <link rel="stylesheet" href="/static/bootstrap@3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>你好，世界！</h1>
    </div>

    <script src="/static/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <script src="/static/bootstrap@3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>

</html>
  1. 样式参考：https://v3.bootcss.com/getting-started/#examples
  2. 相关文件：

#3 转载：jQuery 插件开发全解析

Web前端 JavaScript jQuery 2015-11-09

jQuery 插件的开发包括两种：
一种是类级别的插件开发，即给 jQuery 添加新的全局函数，相当于给 jQuery 类本身添加方法（jQuery 的全局函数就是属于 jQuery 命名空间的函数）。
另一种是对象级别的插件开发，即给 jQuery 对象添加方法。下面就两种函数的开发做详细的说明。