小白篇 -- 原生 js 实现单页应用的初探

1,202 阅读1分钟

一、前言

我们一直使用各种框架来实现单页应用,常用的有 ReactVueAngularJS

那么我们来实现一个简单的 spa 应用,主要看下思路。

二、准备

新建一个名为 spa 的文件夹;

mkdir spa
cd spa

初始化

npm init -y

安装 express 来启动项目;

npm i express

三、新建

1. 项目目录结构

spa
├── package.json
├── public
│   ├── LoginIn.js
│   ├── LoginUp.js
│   ├── Nav.js
│   ├── index.html
│   └── index.js
└── server.js

2. 在根目录新建 server.js

const express = require('express');
const app = express();

app.use(express.static(__dirname + '/public'));

app.listen(3000, function() {
  console.log('服务器已启动...');
});

3. 在 /public/index.html 引入 jQuery入口文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单页应用Demo</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="./index.js" type="module"></script>
  </body>
</html>

4. /public/index.js

import Nav from "./Nav.js";
new Nav;

5. /public/Nav.js

import LoginIn from "./loginIn.js";
import LoginUp from "./LoginUp.js";

//页面的导航栏
export default class Nav {
  constructor() {
    this.render()
    this.handle()
  }
  //渲染函数
  render() {
    let template = `
            <div>
                功能选择
                <a href="#" id="loginInBtn">登录</a>
                <a href="#" id="loginUpBtn">注册</a>
            </div>
            <div id="container"></div>
        `
    $('#root').html(template)
  }
  handle() {
    $('#loginInBtn').click(function () {
      new LoginIn()
    })
    $('#loginUpBtn').click(function () {
      new LoginUp()
    })
  }
}

6. /public/LoginIn.js

import LoginUp from './LoginUp.js'

export default class LoginIn {
  constructor() {
    this.render()
    this.handle()
  }
  //渲染函数
  render() {
    let template = `
      <div>
      <p>
          <span> 账号:</span>
          <input type="text">
      </p>
      <p>
          <span> 密码:</span>
          <input type="password">
      </p>
      <p>
          <input  id="LoginIn" type="button" value="登录">
          <input id='backLoginUp' type="button" value="回到注册">
      </p>
  </div>
      `
    $('#container').html(template)
  }

  handle() {
    $('#backLoginUp').click(() => {
      new LoginUp()
    })
  }
}

7. /public/LoginUp.js

import LoginIn from './LoginIn.js'

export default class LoginUp {
  constructor() {
    this.render();
    this.handle();
  }
  //渲染函数
  render(){
      let template=`
      <div>
      <p>
          <span> 账号:</span>
          <input type="text">
      </p>
      <p>
          <span> 密码:</span>
          <input type="password">
      </p>
      <p>
      <span> 电话号码:</span>
      <input type="text">
       </p>
      <p>
          <input id="LoginIn" type="button" value="注册">
          <input id='backLoginUp' type="button" value="回到登录">
      </p>
  </div>
      `;
      $("#container").html(template);
  }

  handle() { 
    $('#backLoginUp').click(() => { 
      new LoginIn();
    })
  }
};

四、后言

本 demo 简单示例下单页应用的实现,望多多指教,还有什么原生 js 实现路由啥的可以网上搜索看看🤣🤣🤣。