标签 JavaScript 下的文章

2023-04-26

解决 JavaScript XHR 过早 return 导致返回 null 的问题

在 XHR 中，由于异步特性，导致变量在被赋值前被 return，此时将导致返回值为空。

2022-03-02

JavaScript 从服务器获取数据

let request = new XMLHttpRequest();
request.open('GET', url);

request.onload = function() {
  //request.response 可以获得返回的数据
  //在这里继续要进行的操作
};

request.send();

参考链接：

从服务器获取数据 - MDN

2021-09-10

JavaScript 的字符串单字符分割问题解决方案

在通常情况下，对于

let str = 'abcd';

有str.length = 4。

但是，若

str = '👨‍👩‍👧‍👦👵🏻';

此时有str.length = 15，仅仅 2 字符就占了 15 个常规字符位。这是由于单个 Emoji 等字符拥有两个及以上的常规字符位造成的。

此时用indexOf()等函数无法确切定位到字符串中的字符位置。

为什么有 Emoji 字符占用多的这种问题？如果你感兴趣，可以拉到文章末尾，我先介绍解决方案。

方案一使用工具处理

我们这里使用开源项目orling/grapheme-splitter处理。

下载仓库内的 index.js，引入网页等。

var splitter = new GraphemeSplitter();
var graphemes = splitter.splitGraphemes(string);

这样得到的graphemes就是目标字符串（数组）。

graphemes = ['👨‍👩‍👧‍👦','👵🏻']

方案二手工分组

str = ['👨‍👩‍👧‍👦','👵🏻'];

问题来源

这是由于复杂的 Emoji 符号由基础 Emoji 符号拼凑而成。

例如，符号“👨‍👩‍👧‍👦”由 15 字符组成，分别是：

👨 男人（Man）2 字符
‍ 零宽连字（Zero Width Joiner, ZWJ）
👩 女人（Woman）2 字符
‍ 零宽连字（Zero Width Joiner, ZWJ）
👧 女孩（Girl）2 字符
‍ 零宽连字（Zero Width Joiner, ZWJ）
👦 男孩（Boy）2 字符

在这个符号里，ZWJ 符号把四个基础的表情符号联系到一起，组成新的字符。

又比如符号“👵🏻”由 4 字符组成，分别是：

👵 老奶奶（Old Woman）2 字符
‍ 零宽连字（Zero Width Joiner, ZWJ）
🏻 浅肤色（Light Skin Tone）1 字符

所以，依靠charAt()无法准确地逐字输出他们。

2020-06-26

JavaScript 实现图片懒加载 (Lazyload)

本文代码来自知乎 / Daotin : 3分钟搞定图片懒加载

之前找到许多懒加载的源码都需要手动定义图片大小，这对于一部分页面来讲很困难。以下的代码则可以绕过这一步骤，从而更加容易添加到网站上。

首先需要将图片调整为 data-src 属性进行加载，并根据自己需要添加 class

<img data-src="./images/1.jpg">

在网页末尾，引用 jQuery 和相关代码

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
    $(function () {
        // 第一次需要先加载一次
        lazyLoad();

        $(window).scroll(lazyLoad);

        function isInSight(el) {
            const bound = el.getBoundingClientRect();
            const clientHeight = $(window).height(); // 可视区高度
            return bound.top <= clientHeight + 100; // 这里有个+100是为了提前加载。（推荐数值大于一个屏幕高度 px ，只 +100px 在实践中略显滞后。——摘者按）
        }
        function lazyLoad() {
            $.each($('img'), (index,item)=>{ //选择器这里可以加入自己设置的 class（摘者按）
                if(isInSight(item)) {
                    $(item).attr('src', $(item).attr('data-src'));
                }
            });
        }
    });
</script>

2020-05-01

利用 JavaScript 根据分辨率大小玩“双标”

本文中代码援引 CSDN 用户@天际的海浪
原文地址 https://bbs.csdn.net/topics/392184885

代码

<script type="text/javascript">
if (screen.width<640)
    document.write('<script type="text/javascript" src="1.js"><\/script>');
else
    document.write('<script type="text/javascript" src="2.js"><\/script>');
</script>

原理

依据 JavaScript 的 Screen 对象之 Width 属性读取屏幕宽度。

相关阅读
Screen 对象 | 菜鸟教程 - https://www.runoob.com/jsref/obj-screen.html
Screen width 属性 | 菜鸟教程 - https://www.runoob.com/jsref/prop-screen-width.html