原生html单页应用,小白篇 -- 原生 js 实现单页应用的初探
一、前言
我们一直使用各种框架来实现单页应用,常用的有 React、 Vue、 AngularJS 。
那么我们来实现一个简单的 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.jsconst express = require('express');const app = express();
app.use(express.static(__dirname + '/public'));
app.listen(3000, function() { console.log('服务器已启动...');
});复制代码
3. 在 /public/index.html 引入 jQuery 和 入口文件html>
单页应用Demo
复制代码
4. /public/index.jsimport Nav from "./Nav.js";new Nav;复制代码
5. /public/Nav.jsimport LoginIn from "./loginIn.js";import LoginUp from "./LoginUp.js";//页面的导航栏export default class Nav { constructor() {this.render()this.handle()
} //渲染函数
render() {let template = `
功能选择
登录
注册
`$('#root').html(template)
} handle() {
$('#loginInBtn').click(function () { new LoginIn()
})
$('#loginUpBtn').click(function () { new LoginUp()
})
}
}复制代码
6. /public/LoginIn.jsimport LoginUp from './LoginUp.js'export default class LoginIn { constructor() {this.render()this.handle()
} //渲染函数
render() {let template = `
账号:
密码:
`$('#container').html(template)
} handle() {
$('#backLoginUp').click(() => { new LoginUp()
})
}
}复制代码
7. /public/LoginUp.jsimport LoginIn from './LoginIn.js'export default class LoginUp { constructor() {this.render();this.handle();
} //渲染函数
render(){ let template=`
账号:
密码:
电话号码:
`;
$("#container").html(template);
} handle() {
$('#backLoginUp').click(() => {
new LoginIn();
})
}
};复制代码
四、后言
本 demo 简单示例下单页应用的实现,望多多指教,还有什么原生 js 实现路由啥的可以网上搜索看看。
原生html单页应用,小白篇 -- 原生 js 实现单页应用的初探相关推荐
- JS表单验证-12个常用的JS表单验证
JS表单验证-12个常用的JS表单验证 表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1.长度限制 <p>1. 长度限制</p&g ...
- 深入理解表单脚本系列第一篇——表单对象
前面的话 javascript最初的一个应用就是分担服务器处理表单的责任,打破处处依赖服务器的局面.尽管目前的web和javascript已经有了长足的发展,但web表单的变化并不明显.由于web表单 ...
- html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码
一.滚轮事件 当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Sa ...
- 我们为什么需要云原生?看完这一篇就够了
作者 | 侯淼淼 出品 | CSDN(ID:CSDNnews) 云原生这个词对于业内大多数人来说都不陌生,伴随着云计算的蓬勃发展,大有愈演愈烈之势,已经赫然成为企业数字化转型的重要基石.与此同时,无数 ...
- 星级评价的代码php,JavaScript_使用jQuery实现星级评分代码分享,前面有一篇原生js实现星级评 - phpStudy...
使用jQuery实现星级评分代码分享 前面有一篇原生js实现星级评分 .可能覆盖面不是很广,现在给出一个jquery实现的星级评分. http://s.thsi.cn/js/jquery-1.7.2. ...
- 原生JDK网络编程之NIO篇
原生JDK网络编程之NIO篇 一.NIO是什么 NIO库是在JDK1.4中引入的.NIO弥补了原来的I/O的不足,它在标准Java代码中提供了高速的.面向块的I/O. NIO可以称为 no-b ...
- 【云原生微服务>SCG网关篇十二】Spring Cloud Gateway集成Sentinel API实现多种限流方式
文章目录 一.前言 二.Gateway集成Sentinel API 0.集成Sentinel的核心概念 1)GatewayFlowRule 和 ApiDefinition 2)GatewayFlowR ...
- 第五期(2022-2023)传统行业云原生技术落地调研报告——金融篇
随着数字化浪潮的来临,云原生技术正在改变着各行各业,通过IT变革驱动业务创新发展,促进企业自身以及产业生态的转型升级. 因此,灵雀云联合云原生技术实践联盟(CNBPA)和行业内头部厂商F5,共同发起了 ...
- 《第四期(2021-2022)传统行业云原生技术落地调研报告——金融篇》正式发布
一.前言 随着数字化浪潮的来临,以容器.微服务为代表的云原生技术带来了一种全新的方式来开发.交付.迭代企业应用,重塑着传统行业的业务体系,加速着企业自身.以及产业生态的转型升级. 在此背景下,云原生技 ...
最新文章
- 数据治理在业务中台的实践
- 前端还是后端?这些公号教你一锅端!
- 小狗扫地机器人与石头_石头扫地机器人 T7:使用一周后的真实测评报告
- 高性能mysql 附录D explain执行计划详解
- css不定高度实现垂直居中
- 55个高质量的Magento主题,助你构建电子商务站点
- 数据结构学习笔记06排序 (快速排序、表排序、基数排序)
- axios 同时多个请求_Axios是什么?用在什么场景?如何使用?
- 高等数学在计算机中的应用论文1500字,高等数学论文1500字_大一高等数学论文3000字_高等数学论文三千...
- JavaScript基础知识1
- 和平精英体验服服务器怎么样维护,和平精英体验服账号怎么弄_体验服官网申请教程_3DM手游...
- 算法竞赛命题指南(命题流程、Polygon的使用等)
- dialogfragment监听返回键
- 【Java开发】 Spring 09 :Spring Data REST 实现并访问简单的超媒体服务
- centos安装 docker的教程
- 黑帽seo 模板生成php,全自动无限生成关键词页面(黑帽SEO优化终极方法)
- 玳鸽信息:近一年多数产业端对于转型升级有了明确的需求 | FBEC 2020特别策划...
- SqlServer 查看表结构
- JMeter之MQTT请求
- ISO的国家代码和语言代码
热门文章
- OpenHarmony 3.1 Release初体验 润和DAYU200开发套件
- 学习前端开发常用网站网址及介绍(全部开源、免费,链接直达)
- 计算机进制的转换(任意进制)详解
- xposed android_art,[原创]Art 模式实现XposedNativeHook兼容Android10
- 博士的待遇真的有那么好吗?
- omf多路径 oracle_Oracle OMF管理数据文件
- 三大微分中值定理证明方法(罗尔定理、拉格朗日中值定理、柯西中值定理)
- Python 安装skimage
- 《断章》---卞之琳
- Sublime Text4 最新PackageControll 配置教程