ry

2009

• V8 很快, 很专业.
• V8 是用 C++ 写的.

历史上曾经出现过运行在 JVM 上的 Rhino, .Net 上的 JScript, 以及其他五花八门的实现.

Node.js

Deno

Bun

JavaScript reference

• Built-ins
• Statements
• Expressions and operators
• Functions
• Classes
• Additional reference pages

        /* https://tc39.es */

        @Get('/users') getUsers() {};
      
    

        let result = do {
          let v = f();
          v * v + 1
        };
      

        let data = url
          |> await fetch
          |> await %.json();
      

        const res = await fetch(api);
        match (res) {
          when ({
            status: 200, headers: { 'Content-Length': size }
          }):
            console.log('size is', size);
          when ({ status: 404 }):
            console.log('API not found');
          when ({ status }) if (status >= 400): do {
            throw new RequestError(res);
          }
        };
      

文件操作

读写文件能做很多事, 例如

      const fs = require('fs/promises');

      fs.readFile('App.jsx');

      // transform code

      fs.writeFile('App.js');
    

JavaScript 版本

ECMAScript 是标准, JavaScript 是实现.

ES3 ES5 ES6
ES2015 ES2016 ... ES2022 ESNext

Babel 可以把高版本代码编译到低版本.

ESNext ES2015

对比其他语言

• Python/Go 体验新特性需要安装 beta 版.
• Java 项目往往停留在 JDK8.
• .Net framework 很大, 安装很慢.

为什么前端需要构建?

• JS 编译是指语法降级.
• 压缩节省带宽.
• 打包是因为 HTTP 2.0 还未普及.

http server

              const http = require('http');

              const server = http.createServer((req, res) => {
                const time = new Date();
                const json = JSON.stringify({ time });

                res.statusCode = 200;
                res.setHeader('Content-Type', 'application/json');
                res.end(json);
              });

              server.listen(3000);
            
        

express

              const express = require('express');

              const app = express();

              app.get('/', (req, res) => {
                res.send('<h1>Hello express!</h1>');
              })

              app.listen(3000);
            
        

koa

              const Koa = require('koa');
              const app = new Koa();

              app.use(async ctx => {
                ctx.body = '<h1>Hello koa!</h1>';
              });

              app.listen(3000);
            
        

Nest

        import { Get, Controller, Render } from '@nestjs/common';
        import { PostsService } from './posts/posts.service';

        @Controller()
        export class AppController {
          constructor(private readonly postsService: PostsService) {}

          @Get('/posts')
          @Render('posts')
          render() {
            const posts = this.postsService.getPosts();
            return { posts };
          }
        }
      

View Templates

把变量塞进模板, 输出 HTML.

        import ejs from 'ejs';

        const template = '<h1>Hello {<%= name %>!</h1>';

        /* <h1>Hello ejs!</h1> */
        ejs.render(template, { name: 'ejs' });
      

拼接字符串? 类似, 但不完全是.

        const name = 'world';

        `<h1>Hello ${name}!</h1>`;
      

ejs 语法

        <!-- 条件 -->
        <% if (user) { %>
          <h2><%= user.name %></h2>
        <% } %>

        <!-- 循环 -->
        <ul>
          <% users.forEach(function(user){ %>
            <!-- 引用 -->
            <%- include('user/show', {user: user}); %>
          <% }); %>
        </ul>
      

pug 语法

        <!-- 缩进 -->
        #root.container.m-auto
          h1.text-red Hello pug!
      

        <div id="root" class="container m-auto">
          <h1 class="text-red">Hello pug!</h1>
        </div>
      

多如牛毛的 template engines

        {
          ejs:      '<h1>Hello {<%= name %>!</h1>',
          pug:      'h1 Hello #{ name }!',
          lodash:   '<% _.forEach(l, function(n) { %><li><%- n %></li><% }); %>',
          mustache: '{{title}} spends {{calc}}',
          nunjucks: '{% block nav %} <h1>{{ logo }}</h1> {% endblock %}'
          react:    '<App title={title} />',
        }
      

Html Webpack Plugin 示例