单页开发

最新推荐文章于 2023-11-14 16:45:39 发布

薄荷味de糖

最新推荐文章于 2023-11-14 16:45:39 发布

阅读量309

点赞数

本文链接：https://blog.csdn.net/Tang_xiaochao/article/details/112151234

版权

jqurey加前端路由单页开发
单页开发简介
单页开发采用了异步无刷新技术，采用单体模块的开发，此开发方式不需要重新刷新页面，能够提高用户的体验，此开发方式采用前后端分离开发有利于后期的维护。
优点
提升用户的体验
缺点
对搜索引擎不友好，服务器的首页是一个空白页
常见的单页开发方式
hash：利用hash值来改变页面的跳转在url中hash值变化http不会重新发送请求
history:使用 HTML5 的pushstate 来驱动页面的变化.
代码如下

  <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      body {
          height: 500px;
          width: 100%;
          margin: 0;
          padding: 0;
      }

      div {
          width: 100%;
          height: 100%;
          position: absolute;
          font-size: 500px;
          text-align: center;
          display: none;
      }

      .a {
          background-color: pink;
          display: block;
      }

      .b {
          background-color: red;
      }

      .c {
          background-color: gray;
      }
  </style>
</head>

<body>
  <div id="A" class="a">A</div>
  <div id="B" class="b">B</div>
  <div id="C" class="c">C</div>
</body>
<script>
  function hashChanged(e) {
  console.log(e); // 事件对象 HashChangeEvent
  // 变化之后的 url
  let newhash = e.newURL.split('#')[1];
  // 变化之前的 url
  // [file:///Users/Jie/Desktop/index.html,C]
  let oldhash = e.oldURL.split('#')[1];
  // 处理第一次 url
  if (!oldhash) {
      oldhash = "A";
  }
  // 将对应的 hash 下界面显示和隐藏
  document.getElementById(oldhash).style.display = 'none';
  document.getElementById(newhash).style.display = 'block';
  }
  //监听路由变化
  window.onhashchange = hashChanged;
</script>

</html>

前端路由
前端路由通俗易懂就前端用的路由的跳转。前端路由最重要的就是分发模块
以模块组合的方式实现单页应用以单一的模块请求不同的数据

首先是前端路由库
. director.js
在引入前端路由库之后通过如下代码配置路由的跳转对应的模块

 const routes = {
    '/' : ()=>{ new Nav },
    '/login' : ()=>{ new Login },
    '/register' : ()=>{ new Register },
};
 
```
通过export.default导出对应的模块
接收就用 import  +名字   form +地址    
具体实现见代码
```js
首先第一步，我们需要通过 cdn 的形式来引入这个库。
<body>
    <div id="app"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Director/1.2.8/director.min.js"></script>
    <script src="./index.js" type="module"></script>
</body>

接下来在入口 js 文件，我们就可以做前端路由的配置。
// 在入口 js 文件，我们就需要做前端路由的配置
// 1. 引入所有的模块
import Nav from './modules/nav.js'
import Login from "./modules/login.js";
import Register from "./modules/register.js";

// 2. 配置默认的路由处理
location.hash = location.hash || '/'

// 3. 配置模块的映射关系

const routes = {
    '/' : ()=>{ new Nav },
    '/login' : ()=>{ new Login },
    '/register' : ()=>{ new Register },
};

// 4. 使用这个映射关系
Router(routes).configure({recurse : 'forward'}).init();
最后在 nav 里面，就不用在使用事件的形式来进行跳转了
// 引入其他模块
export default class Nav{
    constructor(){
        this.render(); // 负责渲染视图
    }
    render(){
        let template = `
            <div>
                功能选择
                <a href="#/login" id="login">登陆</a>
                <a href="#/register" id="register">注册</a>
            </div>
            <div id="container"></div>
        `;
        $('#app').html(template);
    }
}

如果是模块里面的按钮要实现点击跳转，直接修改 hash 值即可，例如 login.js
export default class Login{
    constructor(){
        this.render();
        this.handle();
    }
    render(){
        let template = `
            <div>
                <h1>登陆</h1>
                <div>
                    <input type="text" id="phone" placeholder="请输入手机号"/>
                </div>
                <div>
                    <input type="password" id="password" placeholder="请输入密码"/>
                </div>
                <div>
                    <input type="button" value="登陆"/>
                    <input id="registerBtn" type="button" value="注册"/>
                </div>
            </div>
        `;
        // 将这个模板进行挂载
        $('#container').html(template)
    }
    handle(){
        $('#registerBtn').click(function(){
            location.hash = '/register';
        })
    }
}

薄荷味de糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单页开发

jqurey加前端路由单页开发单页开发简介单页开发采用了异步无刷新技术，采用单体模块的开发，此开发方式不需要重新刷新页面，能够提高用户的体验，此开发方式采用前后端分离开发有利于后期的维护。优点提升用户的体验缺点对搜索引擎不友好，服务器的首页是一个空白页常见的单页开发方式hash：利用hash值来改变页面的跳转在url中hash值变化http不会重新发送请求history:使用 HTML5 的pushstate 来驱动页面的变化.代码如下 <!DOCTYPE html>
复制链接

扫一扫

单页开发

“相关推荐”对你有帮助么？