js取a标签值赋值给另外一个a标签?

JavaScript016

js取a标签值赋值给另外一个a标签?,第1张

首先获取到numlist标签下a标签的href,然后赋值给类名为pull-left的a标签。

var numlist = document.getElementsByClassName("numList")[0]

var list = numlist.getElementsByTagName("li")[0]

var aObj = list.getElementsByTagName("a")[0]

var text = aObj.getAttribute("href")

var pull = document.getElementsByClassName("pull-left")[0]

pull.setAttribute("href", text)

大概是这样,如果有问题我可以测试一下。

websocket 是一种网络通信协议,一般用来进行实时通信会使用到

websocket 协议和 http 协议类似,http 协议有一个缺陷,只能由客户方端发起请求,服务端根据请求 url 和传过去的参数返回对应结果

websocket 是双向通信的,只要 websocket 连接建立起来,可以由客户端给服务端发送数据,也可以由服务端主动给客户端发送数据

websocket 适用场景:聊天室

websocket 相关简介,可以看 阮老师的文章

nodejs 可以通过 nodejs-websocket 来实现创建一个 websocket 的服务

nodejs-websocket 用法

文档地址: https://www.npmjs.com/package/nodejs-websocket

node 创建的 websocket 服务,主要包含三个概念

可以通过 server.on('event', (res) =>{console.log(res)}) 调用

这次使用 websocket 实现一个基本的聊天室功能,个人感觉还比较简单,只是中间会出现一些由于链接异常断开,导致后端服务抛出异常挂掉的情况

记住前端关闭页面或者刷新页面时,先把连接关掉,每次进入页面时创建连接,然后后端将由于异常关闭导致的出错 try/catch 一下,避免抛出异常,阻塞进程

websocket 对于实现聊天室这样的功能,真的很方便,其实还能扩展到多人合作或者网络游戏等功能

在前后端分离的开发模式中,数据需要通过 http 请求异步从服务器端获取,也就是前端开发需要依赖后端接口,如果不能时时保证数据获取通畅,就会造成开发阻塞。这时前端需要一种方式可以来模拟数据请求,从而更多的掌握主动权独立开发项目, mockjs 可以以无侵入的方式拦截 ajax 请求,通过模拟服务器端响应来返回数据

JSRUN

Mockjs 语法规范由数据模板定义规范和数据占位符定义规范组成,在官网的 示例文档 中提供了丰富的模板定义方法,可点击查看

Mockjs 实现的原理是对 XHR 对象的拦截,属于 js 拦截,并没有通过浏览器发出请求,所以一般会碰到以下问题。

为了处理以上问题,引入集成了 mockjs 的 mock server工具 easy-mock ,注册并登录 easy-mock 官网后,会有一个演示项目提供参考,参考演示项目可以轻松创建自己的项目,如下图

创建项目后可以基于当前项目创建请求接口,如下图,创建一个 url 为 \user 的 get 请求,会生成接口为 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/user 的完整地址,点击 用户列表 可查看返回数据,由于 easy-mock 内部集成了 mockjs ,所以在生成数据时可以采用mockjs数据模板来生成,把基础用法中的数据生成模板粘贴过来,可以生成相同数据

浏览器限制跨域访问,所以要访问到接口数据,还需要解决跨域问题,通过 Nginx 解决跨域我在另外一片文章有讨论过,点击可以可查,下面主要介绍下通过 webpack-dev-server 设置代理

假设本地请求的根路径为 http://localhost:8080 ,通过 ajax 请求 用户列表 的完整接口为 http://localhost:8080/proxy/user , webpack-dev-server 通过代理方式将请求转发到我们在 easy-mock 中定义的接口 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/proxy/user ,此时接口地址中多了个代理标志 /proxy , 通过配置参数 pathRewrite: {'^/proxy': ' '} 将 /proxy 去掉即可。