JavaScript | LongSheng

html直接引用vue和element-ui的方法

代码如下所示：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<el-button round @click="visible = true">圆角按钮</el-button>

<br>

<el-dialog :visible.sync="visible" title="Hello world">

<p>Try Element</p>

</el-dialog>

<br>

<el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费">

</el-switch>

<el-switch style="display: block" v-model="value2" active-color="#13ce66" inactive-color="#ff4949"

active-text="按月付费" inactive-text="按年付费">

</el-switch>

<br>

<el-time-picker is-range v-model="value1" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"

placeholder="选择时间范围">

</el-time-picker>

<el-time-picker is-range arrow-control v-model="value2" range-separator="至" start-placeholder="开始时间"

end-placeholder="结束时间" placeholder="选择时间范围">

</el-time-picker>

<br>

<el-progress type="circle" :percentage="0"></el-progress>

<el-progress type="circle" :percentage="25"></el-progress>

<el-progress type="circle" :percentage="100" status="success"></el-progress>

<el-progress type="circle" :percentage="70" status="warning"></el-progress>

<el-progress type="circle" :percentage="50" status="exception"></el-progress>

<br>

<el-row>

<el-button icon="el-icon-search" circle></el-button>

<el-button type="primary" icon="el-icon-edit" circle></el-button>

<el-button type="success" icon="el-icon-check" circle></el-button>

<el-button type="info" icon="el-icon-message" circle></el-button>

<el-button type="warning" icon="el-icon-star-off" circle></el-button>

<el-button type="danger" icon="el-icon-delete" circle></el-button>

</el-row>

<br>

<el-steps :active="1" finish-status="success">

<el-step title="已付款"></el-step>

<el-step title="退款中"></el-step>

<el-step title="已退款"></el-step>

<el-step title="待结算"></el-step>

<el-step title="已结算"></el-step>

</el-steps>

</div>

</body>

new Vue({

el: '#app',

data: function () {

return { visible: false }

}

})

</script>

</html>

效果如图：总结到此这篇关于html直接引用vue和element-ui的方法的文章就介绍到这了,更多相关html引用vue和element-ui内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！ from:https://www.jb51.net/web/743299.html

龙生 24 Mar 2021

View Details

*** 只有 0-9[a-Z] $ – _ . + ! * ' ( ) , 以及某些保留字，才能不经过编码直接用于 URL。 ***例如：搜索的中文关键字，复制网址之后再粘贴就会发现该URL已经被转码。 1、escape 和 unescape 原理：对除ASCII字母、数字、标点符号 @ * _ + – . / 以外的其他字符进行编码。编码：escape('http://www.baidu.com?name=zhang@xiao@jie&order=1') 结果："http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1" escape('张') 结果："%u5F20" 解码：unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1") 结果："http://www.baidu.com?name=zhang@xiao@jie&order=1" unescape("%u5F20") 结果："张" 2、encodeURI 和 decodeURI 原理：返回编码为有效的统一资源标识符 (URI) 的字符串，不会被编码的字符：! @ # $ & * ( ) = : / ; ? + ' encodeURI()是Javascript中真正用来对URL编码的函数。编码：encodeURI('http://www.baidu.com?name=zhang@xiao@jie&order=1') 结果："http://www.baidu.com?name=zhang@xiao@jie&order=1" 解码：decodeURI("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1") 结果："http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1" 3、encodeURIComponent 和 decodeURIComponent 原理：对URL的组成部分进行个别编码，而不用于对整个URL进行编码编码：encodeURIComponent('http://www.baidu.com?name=zhang@xiao@jie&order=1') 结果："http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1" 解码：decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1") 　　　"http://www.baidu.com?name=zhang@xiao@jie&order=1" from:https://www.cnblogs.com/z-one/p/6542955.html

龙生 04 Mar 2021

View Details

WebRTC 成为 W3C 和 IETF 正式标准

2021年1月26日，W3C（万维网联盟）和 IETF （互联网工程任务组）同时宣布 WebRTC（Web Real-Time Communications，Web 实时通信）现发布为正式标准，将音视频通信带到 Web 上任何地方。 WebRTC 由用于 Web 实时通信的 JavaScript API 和一组通信协议构成，支持网络上的任何已连接设备成为 Web 上潜在的通信端点。WebRTC 已成为线上通信及协作服务的基石。目前全球都面临着 COVID-19 疫情，WebRTC 让数十亿人无论其设备或地域如何，在 COVID-19 疫情期间也能保持联络。WebRTC 的使用已经超越了最初的核心设计，即在浏览器和其他生态（例如本地应用）中支持视频会议和协作系统。现在需要更多的特性和优化。 IETF WebTransport (WEBTRANS) 和 WebRTC Ingest Signaling over HTTPS (WISH) 工作组已经在开展工作，在 IETF 其他工作组的基础上进一步协调、拓展相关工作。其中包括 QUIC（定义支持 WebTransport API 开发的新协议）和 HTTPBIS（指定简单、可扩展的、基于 HTTPS 的信令协议），以在广播工具和实时媒体广播网之间建立基于 WebRTC 的单向视听会话。 W3C WebRTC 工作组已经开始研究 WebRTC Next Version Use Cases，规划 WebRTC 的未来，特别是：在服务器介导的视频会议中的端到端加密即时处理音视频材料，包括通过机器学习物联网（例如 IoT 传感器维持长期连接并寻求最小功耗） WebRTC 工作组正对现有及新的用例进行迭代，重点理解全部需求及其优先级。W3C 近期开始的 WebTransport 和 Web Codecs 工作预计将低延迟流媒体的优势引入更广大的媒体和娱乐生态系统。 WebRTC 成为 W3C 为应用程序开发定义开放 Web 平台的众多标准之一，具有前所未有的潜力。其让开发人员能够构建丰富的交互体验，由巨大的数据存储提供动力，可用于任何设备以及环境。 WebRTC 标准文档：https://www.w3.org/TR/webrtc/ from:https://www.oschina.net/news/128093/webrtc-standard

龙生 28 Jan 2021

View Details

JS删除对象中的某一属性(delete)

1

2

3

4

5

6

7

8

9

10

11

12

var obj= {

height: 180,

long: 180,

weight: 180,

hobby: {

ball: 'good',

music: 'nice'

}

delete obj.hobby

// 已声明的对象不可删除, 对象中的对象属性可以删除

from:https://www.cnblogs.com/juewuzhe/p/11451362.html

龙生 27 Jan 2021

View Details

H5与App的通讯方式

前言现在不管是桌面客户端还是移动客户端，都会夹杂着一部分H5页面，这种混合式的应用也是我们常说的Hybrid App。为什么会出现Hybrid App呢，早期是因为开发一个Android或iOS的客户端，需要的人力成本比较大，开发周期比较长，后来有些团队就通过将部分页面拆分出来，由前端来完成，再通过在客户端里的Webview来展示。由于小编我半路转行当程序猿，只对前端领域有所了解，对其他编程领域接触较少，故不探讨Webview的实现原理和与H5页面交互的原理。有兴趣的小伙伴自行百度搜索JSBridge的相关知识，或请教下客户端(Windows、MacOS、Android、iOS)开发的同学，看看如何桥接JS与其他编程语言之间的联系。优缺点凡事都是有好有坏，没有绝对的解决方案。下面我总结下Hybrid App在开发过程中存在的优缺点，各位同学可自行判断Hybrid App的好坏。优点 H5页面交由前端进行开发，页面模块之间分开开发和维护，有效减少App的开发周期 H5页面不受限于应用商店繁琐的审核流程和冗长的等待时间，新增页面和功能、修复缺陷都可随时部署到线上 H5页面在有需要时才加载，减小App打包后的大小，缩短App在应用商店下载的时间和减少本地占用手机的空间 H5页面接入App Webview中，不再受限于浏览器，可通过与App交互调用设备更多底层的API来完善更多原本浏览器无法完成的操作缺点协定好H5和App之间的通讯协议，定义好全局属性和全局方法在两者之间如何调用 H5页面接入App Webview中，可能会出现很多兼容问题，需要前端和客户端多加注意开发前需按照需求和交互进行页面划分，哪些页面归前端开发，哪些页面归客户端开发页面出现Bug有时候很难发现是在哪个环节出错，需要前端和客户端共同调试找出问题所在(可能各抒己见，打架都有份) 通讯方式以下代码全部基于前端(React)进行演示，客户端如何实现JS交互我就不多说了，可以找客户端开发的同学了解下。通讯方式有如下两种，都是使用JS代码来完成，兼容性还是挺不错的。前端通知客户端：拦截客户端通知前端：注入前端通知客户端在H5页面里触发链接跳转，App Webview检测到链接跳转再进行拦截，因此可以通过URL上携带参数来告知App下一步应该做些什么。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

import React, { Component } from "react";

export default class App extends Component {

componentDidMount() {

location.href = "lsbox://toast?msg=页面加载完毕"; // 通知App

}

render() {

return (

</app>

);

}

openMask() {

location.href = "lsbox://mask?toggle=1"; // 通知App

}

以上执行了location.href = "lsbox://mask?toggle=1"来通知App打开遮罩层 lsbox：前端和客户端统一定义链接跳转的协议(喜欢怎样定义协议都行) mask：App需要执行的动作(喜欢怎样定义动作都行) toggle=1：动作执行参数(自定义参数，用于告知App怎样做) 如果同步触发两个或以上的location.href(下一个location.href接着上一个location.href)，App可能只会接收到一个location.href发出的通知，所以需要对下一个location.href使用setTimeout设置通知时间间隔(可使用Async/Await封装优化)

1

2

3

4

5

6

7

location.href = "lsbox://toast?msg=one";

setTimeout(() => {

location.href = "lsbox://toast?msg=two";

setTimeout(() => {

location.href = "lsbox://toast?msg=three";

}, 100);

客户端通知前端注入一些全局方法，App Webview直接操作全局方法来控制H5页面，使用window.handleFunc = function() {}这样的形式来定义注入的方法。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

import React, { Component } from "react";

export default class App extends Component {

constructor(props) {

super(props);

this.state = {

list: [0, 1, 2, 3, 4]

};

}

componentDidMount() {

window.addNum = this.addNum.bind(this); // 暴露方法给App

}

render() {

return (

<ul>{this.state.list.map(v => <li key={v}>{v}</li>)}</ul>

</div>;

);

}

addNum(num) {

this.setState(prevState => ({

list: prevState.list.concat(num);

}));

}

以上在组件加载完成后通过window.addNum = this.addNum.bind(this)将指定方法全局暴露到window上，App Webview可直接操作这些方法来控制H5页面。作者：JowayYoung 链接：https://juejin.cn/post/6844904020201455624 来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

龙生 27 Jan 2021

View Details

中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

前言不知不觉在网易已有三年半，占了一半时间都在与移动端打交道，整个阶段都是遇坑填坑的学习过程。移动端开发在前端里像神一样地存在，不是说它多难而是说它坑位实在太多了，怎样填都填不完。Android和iOS各显神通，Android的系统版本和屏幕分辨率多得难以一招兼容，iOS的顽固标准和未知特性多得难以快速掌握。三年半沉淀通过本文记录下所遇到的坑位，或许有些坑位还未遇到，但本文记录的40条坑位绝对能让同学们少走很多弯路，特别是前端小白。为了减少废话提高本文质量，对以下内容做一些约定。提及的安卓系统包括Android和基于Android开发的系统提及的苹果系统包括iOS和iPadOS 本文针对的开发场景是移动端浏览器，因此大部分坑位的解决方案在桌面端浏览器里不一定有效解决方案若未提及适用系统就默认在安卓系统和苹果系统上都适用，若提及适用系统则会详细说明 Webkit及其衍生内核在移动端浏览器市场占有率里达到惊人的97%，因此无需太过担心CSS3、ES6和浏览器新特性的兼容性每次填坑都是一次实践过程，全部坑位的源码都按语言方向记录在笔者Github上，若有未记录的坑位可提PR让笔者合并，给个Star支持下咧！本来想为每个坑位都截图或录播GIF作为演示，但考虑到目前掘金的Markdown编辑器操作图片还存在缺陷就放弃了，每次上传图片都会花费很多时间甚至上传失败(望掘金的产品小姐姐和程序小哥哥优化喔)。若需演示只能自行复制代码了。 HTML方向调用系统功能使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能，使用<input>能快速调用移动设备的的图库/文件。这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<a href="tel:10086">拨打电话给10086小姐姐</a>

<a href="sms:10086">发送短信给10086小姐姐</a>

<a href="mailto:young.joway@aliyun.com">发送邮件给JowayYoung</a>

忽略自动识别有些移动端浏览器会自动将数字字母符号识别为电话/邮箱并将其渲染成上述调用系统功能里的<a>。虽然很方便却有可能违背需求。

1

2

3

4

5

6

7

8

弹出数字键盘使用<input type="tel">弹起数字键盘会带上#和*，适合输入电话。推荐使用<input pattern="\d*">弹起数字键盘，适合输入验证码等纯数字格式。

1

2

3

4

5

唤醒原生应用通过location.href与原生应用建立通讯渠道，这种页面与客户端的通讯方式称为URL Scheme，其基本格式为scheme://[path][?query]，笔者曾经发表过《H5与App的通讯方式》讲述URL Scheme的使用。 scheme：应用标识，表示应用在系统里的唯一标识 path：应用行为，表示应用某个页面或功能 query：应用参数，表示应用页面或应用功能所需的条件参数 URL Scheme一般由前端与客户端共同协商。唤醒原生应用的前提是必须在移动设备里安装了该应用，有些移动端浏览器即使安装了该应用也无法唤醒原生应用，因为它认为URL Scheme是一种潜在的危险行为而禁用它，像Safari和微信浏览器。还好微信浏览器可开启白名单让URL Scheme有效。若在页面引用第三方原生应用的URL Schema，可通过抓包第三方原生应用获取其URL。

1

2

3

4

5

6

7

8

9

10

11

<a href="alipays://">打开支付宝</a>

<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>

<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

禁止页面缩放在智能手机的普及下，很多网站都具备桌面端和移动端两种浏览版本，因此无需双击缩放查看页面。禁止页面缩放可保障移动端浏览器能无遗漏地展现页面所有布局。

1	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">

禁止页面缓存 Cache-Control指定请求和响应遵循的缓存机制，不想使用浏览器缓存就禁止呗！

1	<meta http-equiv="Cache-Control" content="no-cache">

禁止字母大写有时在输入框里输入文本会默认开启首字母大写纠正，就是输入首字母小写会被自动纠正成大写，特么的烦。直接声明autocapitalize=off关闭首字母大写功能和autocorrect=off关闭纠正功能。

1	<input autocapitalize="off" autocorrect="off">

针对Safari配置贴一些Safari较零散且少用的配置。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

针对其他浏览器配置贴一些其他浏览器较零散且少用的配置，主要是常用的QQ浏览器、UC浏览器和360浏览器。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

让:active有效，让:hover无效有些元素的:active可能会无效，而元素的:hover在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给<body>注册一个空的touchstart事件可将两种状态反转。

1	<body ontouchstart></body>

CSS方向自动适应布局针对移动端，笔者通常会结合JS依据屏幕宽度与设计图宽度的比例动态声明<html>的font-size，以rem为长度单位声明所有节点的几何属性，这样就能做到大部分移动设备的页面兼容，兼容出入较大的地方再通过媒体查询做特别处理。笔者通常将rem布局比例设置成1rem=100px，即在设计图上100px长度在CSS代码上使用1rem表示。

1

2

3

4

5

6

7

8

9

10

function AutoResponse(width = 750) {

const target = document.documentElement;

if (target.clientWidth >= 600) {

target.style.fontSize = "80px";

} else {

target.style.fontSize = target.clientWidth / width * 100 + "px";

}

AutoResponse();

window.addEventListener("resize", () => AutoResponse());

当然还可依据屏幕宽度与设计图宽度的比例使用calc()动态声明<html>的font-size，这样就能节省上述代码。不对，是完全代替上述代码。

1

2

3

html {

font-size: calc(100vw / 7.5);

}

若以iPad Pro分辨率1024px为移动端和桌面端的断点，还可结合媒体查询做断点处理。1024px以下使用rem布局，否则不使用rem布局。

1

2

3

4

5

@media screen and (max-width: 1024px) {

html {

font-size: calc(100vw / 7.5);

}

自动适应背景使用rem布局声明一个元素背景，多数情况会将background-size声明为cover。可能在设计图对应分辨率的移动设备下，背景会完美贴合显示，但换到其他分辨率的移动设备下就会出现左右空出1px到npx的空隙。此时将background-size声明为100% 100%，跟随width和height的变化而变化。反正width和height都是量好的实际尺寸。

1

2

3

4

5

.elem {

width: 1rem;

height: 1rem;

background: url("pig.jpg") no-repeat center/100% 100%;

}

监听屏幕旋转你还在使用JS判断横屏竖屏调整样式吗？那就真的Out了。

1

2

3

4

5

6

7

8

/* 竖屏 */

@media all and (orientation: portrait) {

/* 自定义样式 */

}

/* 横屏 */

@media all and (orientation: portrait) {

/* 自定义样式 */

}

[…]

龙生 27 Jan 2021

View Details

这些一行 JS 实现功能的代码，让你看起来像一个前端专家

JavaScript 可以做很多神奇的事情！从复杂的框架到处理 API，有太多的东西需要学习。但是，它也能让你只用一行代码就能做一些了不起的事情。看看这 13 句 JavaScript 单行代码，会让你看起来像个专家! 1. 获取一个随机布尔值 (true/false) 这个函数使用 Math.random() 方法返回一个布尔值（true 或 false）。Math.random 将在 0 和 1 之间创建一个随机数，之后我们检查它是否高于或低于 0.5。这意味着得到真或假的几率是 50%/50%。

1

2

3

const randomBoolean = () => Math.random() >= 0.5;

console.log(randomBoolean());

// Result: a 50/50 change on returning true of false

2. 检查日期是否为工作日使用这个方法，你就可以检查函数参数是工作日还是周末。

1

2

3

4

5

const isWeekday = (date) => date.getDay() % 6 !== 0;

console.log(isWeekday(new Date(2021, 0, 11)));

// Result: true (Monday)

console.log(isWeekday(new Date(2021, 0, 10)));

// Result: false (Sunday)

3. 反转字符串有几种不同的方法来反转一个字符串。以下代码是最简单的方式之一。

1

2

3

const reverse = str => str.split('').reverse().join('');

reverse('hello world');

// Result: 'dlrow olleh'

4. 检查当前 Tab 页是否在前台我们可以通过使用 document.hidden 属性来检查当前标签页是否在前台中。

1

2

3

const isBrowserTabInView = () => document.hidden;

isBrowserTabInView();

// Result: returns true or false depending on if tab is in view / focus

5. 检查数字是否为偶数最简单的方式是通过使用模数运算符（%）来解决。如果你对它不太熟悉，这里是 Stack Overflow 上的一个很好的图解。

1

2

3

4

5

const isEven = num => num % 2 === 0;

console.log(isEven(2));

// Result: true

console.log(isEven(3));

// Result: false

6. 从日期中获取时间通过使用 toTimeString() 方法，在正确的位置对字符串进行切片，我们可以从提供的日期中获取时间或者当前时间。

1

2

3

4

5

const timeFromDate = date => date.toTimeString().slice(0, 8);

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));

// Result: "17:30:00"

console.log(timeFromDate(new Date()));

// Result: will log the current time

7. 保留小数点（非四舍五入）使用 Math.pow() 方法，我们可以将一个数字截断到某个小数点。

1

2

3

4

5

6

7

8

const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);

// Examples

toFixed(25.198726354, 1); // 25.1

toFixed(25.198726354, 2); // 25.19

toFixed(25.198726354, 3); // 25.198

toFixed(25.198726354, 4); // 25.1987

toFixed(25.198726354, 5); // 25.19872

toFixed(25.198726354, 6); // 25.198726

8. 检查元素当前是否为聚焦状态我们可以使用 document.activeElement 属性检查一个元素当前是否处于聚焦状态。

1

2

3

const elementIsInFocus = (el) => (el === document.activeElement);

elementIsInFocus(anyElement)

// Result: will return true if in focus, false if not in focus

9. 检查浏览器是否支持触摸事件

1

2

3

4

5

const touchSupported = () => {

('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);

}

console.log(touchSupported());

// Result: will return true if touch events are supported, false if not

10. 检查当前用户是否为苹果设备我们可以使用 navigator.platform 来检查当前用户是否为苹果设备。

1

2

3

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);

console.log(isAppleDevice);

// Result: will return true if user is on an Apple device

11. 滚动到页面顶部 […]

龙生 26 Jan 2021

View Details

JS数据类型转换

显式转换其他数据类型转换成Number 将其他数据类型的值转化为数值时，有几种方法？ Number() parseInt() parseFloat() +/- （一元操作符）说一说上面方法的异同？它们都是可以将非数值转化为数值，不同点如下：

1

2

3

4

5

1. Number() 可以处理Boolean、null、undefined，Object而parseInt不可以

2. 在处理字符串时

- number能处理数字字符串（正负），包括十六进制的数字以及空字符串；

- parseInt是从第一个非空格字符开始解析，直到遇到一个非数字字符串，如果第一个不是数字或者负号，parseInt就会返回NaN

3. parseFloat()与parseInt()类似，+/-与Number()类似

规则除以下情况外能正常转化为数字，其余全为NaN

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

1. Boolean值, true--->1 false--->0

2. null--->0

3. 空字符串（''）---> 0

4. 数字字符串（'123', '1.23', '0xf'）---> 123, 1.23, 15

5. 对象则是先调用valueOf方法，看该方法的返回值是否能转化成数字，如果不行则基于这个返回值调用toString方法，再测试改返回值能不能转化成数字

var a = {

valueOf: function() {

return 'xyxy';

},

toString: function() {

return 1;

}

};

Number(a) // NaN

其他数据类型转换成String 将其他数据类型的值转化为字符串时，有几种方法？其他数据类型的值.toString() String(其它数据类型的值) 说一说上面方法的异同？

1	null与undefined上没有toString()方法

规则字符串拼接时，加号两边如果出现字符串或者引用类型的值({}、[]、function(){})，都会变成字符串拼接(因为原本应该是把引用类型的值转为数字，但是需要先转为字符串，遇到字符串就直接变成字符串拼接了)

1

2

3

4

{} => "[object Object]"

function(){} =>"function(){}"

{}+0; //0 没有变成字符串拼接的原因：把{}当做块处理了，不参与数学运算

({}+0); //"[object Object]0" 用括号运算符包起来就是数学运算了

1

2

3

4

5

6

// 做个题目吧

let result =10 + false +undefined+[]+'Tencent'+null+true+{};

//(10+0+NaN)+''+'Tencent' +'null' +'true' + '[object Object]'

//"NaNTencentnulltrue[object Object]"

console.log(result)

其他数据类型转换成Boolean 将其他数据类型的值转化为布尔值时，有几种方法？ ! 转换为布尔类型后取反 !! 转换为布尔类型 Boolean 规则？

1	只有 0、NaN、空字符串、undefined、null 五个值会变为false，其余都是true

隐式转换 isNaN、Math方法

1	参考显式转换成Number的规则

+ 操作

1 2	两边的数据有一个是字符串类型则选用字符串拼接操作，之后才是考虑数学计算的加操作

== 「类型一样的几个特殊点」

1

2

3

{} == {} : false 说明：对象（引用类型的值）比较的是堆内存的地址

[] == [] : false 同上

NaN == NaN : false

2.「类型不一样的转换规则」

1

2

3

4

5

6

1. null == undefined : true

2. null、undefined和其他任何值都不相等即在比较相等性之前，不能将null与undefined转换成其他任何职

3. 字符串 == 对象要把对象转换为字符串

4. 剩下如果==两边数据类型不一致，都是需要转换为数字再进行比较

5.注意点：

虽然Number(null)的结果是0，但是null和0 ==比较时并不是转为数字比较的，即验证3中所说

作者：妍等等xy 链接：https://juejin.cn/post/6920236688224550925 来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

龙生 25 Jan 2021

View Details

js实现保存文件到本地

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

function fake_click(obj) {

var ev = document.createEvent("MouseEvents");

ev.initMouseEvent(

"click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null

);

obj.dispatchEvent(ev);

}

function download(name, data) {

var urlObject = window.URL || window.webkitURL || window;

var downloadData = new Blob([data]);

var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")

save_link.href = urlObject.createObjectURL(downloadData);

save_link.download = name;

fake_click(save_link);

}

//调用方法

download("save.txt","内容");

from:https://www.cnblogs.com/frost-yen/p/10226705.html

龙生 19 Jan 2021

View Details

js解析websocket二进制数据包

js解释数据包做一个项目,服务器要给我发一个数据包,格式为,前面16位short,后32位int,后面就全是string,我用javascript怎么去把这个数据包解读出来? 用WebSocket,接收到的就是一个Blob对象.而我要给服务器返回的也是这种格式,我又怎么把我的数据封装成这样的数据包? ——解决方案——————--

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

var reader = {

readAs: function(type,blob,cb){

var r = new FileReader();

r.onloadend = function(){

if(typeof(cb) === 'function') {

cb.call(r,r.result);

}

try{

r['readAs'+type](blob);

}catch(e){}

}

function parseBlob(blob){

var shortVar, intVar, stringVar;

reader.readAs('ArrayBuffer',blob.slice(0,2),function(arr){

shortVar = (new Int16Array(arr))[0];

console.log(shortVar);

});

reader.readAs('ArrayBuffer',blob.slice(2,6),function(arr){

intVar = (new Int32Array(arr))[0];

console.log(intVar);

});

reader.readAs('Text',blob.slice(6,blob.size,'text/plain;charset=UTF-8'),function(result){

stringVar = result;

console.log(stringVar);

});

}

var buffer = new ArrayBuffer(6);//建立6个字节的缓冲，前两个字节是short，后四个是int

var bufferView = new Int16Array(buffer); //建立16位的视图,那么视图的长度应该是3

bufferView[0] = 32767;

bufferView[1] = 0;

bufferView[2] = 1;

//现在buffer中的内容由低位到高位应该是

//11111111 11111110 00000000 00000000 100000000 00000000

var blob = new Blob([bufferView,"words words 文本文本文本文本"]);

//构造这个blob类型

//测试一下parseBlob函数是否正确

parseBlob(blob);

//32767

//65536

//words words 文本文本文本文本

//第一个short是32767

//第二个int，前16位为0，第17位为1，所以结果是65536

//第三个字符串，和我们构造blob的时候一样

from:https://blog.csdn.net/woxingwosu0100/article/details/51273523/

龙生 16 Jan 2021

View Details

Category Archives: JavaScript

html直接引用vue和element-ui的方法

js对url进行编码和解码（三种方式区别）

WebRTC 成为 W3C 和 IETF 正式标准

JS删除对象中的某一属性(delete)

H5与App的通讯方式

中高级前端必须注意的40条移动端H5坑位指南 | 网易三年实践

这些一行 JS 实现功能的代码，让你看起来像一个前端专家

JS数据类型转换

js实现保存文件到本地

js解析websocket二进制数据包