温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

5个提升你JavaScript编码水平的实例是怎样的

发布时间:2021-09-30 17:28:50 阅读:171 作者:柒染 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章给大家介绍5个提升你JavaScript编码水平的实例是怎样的,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

虽然 2020 的今天,各种前端框架、工具林立,而这些框架跟工具也帮我们提前解决了不少麻烦的问题,但是工具始终是工具,扎实的基本功才是最核心的,现在一起来通过几个实际的代码片段来提高我们原生 JS 的编码水平。

判断数据类型

首先来提问一个:typeof是否能正确判断类型?

答案是:不可以,因为由于历史原因,在判断原始类型时,typeof null会等于object。而且对于对象来说,除了函数,都会转换成object。例子如下:

typeof 1; // 'number'typeof "1"; // 'string'typeof null; //typeof []; // 'object'typeof {}; // 'object'typeof window.alert; // 'function'

再来提问一个,instanceof是否能正确判断类型?

答案是:还是不可以,虽然instanceof是通过原型链来判断的,但是对于对象来说,Array也会被转换成Object,而且也不能区分基本类型string和boolean。例如:

function Func() {}const func = new Func();console.log(func instanceof Func); // trueconst obj = {};const arr = [];obj instanceof Object; // truearr instanceof Object; // truearr instanceof Array; // trueconst str = "abc";const str2 = new String("abc");str instanceof String; // falsestr2 instanceof String; // true

所以该怎么办呢?

这时候我们可以使用:Object.prototype.toString.call()

所以为什么?

因为每个对象都有一个toString()方法,当要将对象表示为文本值或以预期字符串的方式引用对象时,会自动调用该方法。默认情况下,从Object派生的每个对象都会继承toString()方法。如果此方法未在自定义对象中被覆盖,则toString()返回[Object type],其中type是对象类型。所以就有以下例子:

Object.prototype.toString.call(new Date()); // [object Date]Object.prototype.toString.call("1"); // [object String]Object.prototype.toString.call(1); // [object Numer]Object.prototype.toString.call(undefined); // [object Undefined]Object.prototype.toString.call(null); // [object Null]

所以综合上述知识点,我们可以封装出以下通用类型判断方法:

var type = function(data) {        var toString = Object.prototype.toString;        var dataType = data instanceof Element                            ? 'element' // 为了统一DOM节点类型输出                            : toString                                .call(data)                                .replace(/\[object\s(.+)\]/, ''$1')                                         .toLowerCase()        return dataType}

使用方法如下:

type("a"); // stringtype(1); // numbertype(window); // windowtype(document.querySelector("h2")); // element

通用的数组/类数组对象封装

如果我们使用 ES5/ES6+的数组 API,很容易就能够对数组进行各类的循环操作,但是如果我们要循环一个类数组对象呢?

例如NodeList。直接循环是会报错的:

document.querySelectorAll("div").map(e => e); // Uncaught TypeError: document.querySelectorAll(...).map is not a function

当然我们可以用扩展运算符:

[...document.querySelectorAll("div")].map(e => e);

那如果我们不用扩展运算符呢?

那么我们就可以利用call的特性,将NodeList里的元素一个一个的插入到数组中,例子如下:

var listMap = function(array, type, fn) {    return !fn ? array : Array.prototype[type]["call"](array, fn);};

使用方法如下:

var divs = document.querySelectorAll("div");listMap(divs, "forEach", function(e) {    console.log(e);});

获取 dom 元素节点的偏移量

如果有用过jQuery的童鞋,就一定不会忘记$('').offset()这个 api 的强大功能,这个 api 可以轻易获取元素的偏移量,那么如果我们不用jQuery该怎么实现呢?

我们先来看看例子:

var getOffset = function(el) { 
  var scrollTop = 
      el.getBoundingClientRect().top +          document.body.scrollTop +          document.documentElement.scrollTop;    var scrollLeft =          el.getBoundingClientRect().left +          document.body.scrollLeft +          document.documentElement.scrollLeft;    return {        top: scrollTop,        left: scrollLeft    };};

首先我们先来看getBoundingClientRect()这个方法。

getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。返回值是一个 DOMRect 对象,是与该元素相关的 CSS 边框集合 。

然后就是document.body.scrollTop 跟 document.documentElement.scrollTop这两个是一个功能,只不过在不同的浏览器下会有一个始终为 0,所以做了以上的兼容性处理。所以当我们做拖拽功能的时候,就可以依赖上以上属性。

使用方法如下:

var el = document.querySelector(".moveBox");getOffset(el); // {top: xxx, left: xxx}

5个提升你JavaScript编码水平的实例是怎样的

我们可以看上面的摇杆效果,这里就是利用了offset()去做位置判断。具体实现代码可以看:https://codepen.io/krischan77/pen/zYxPNPy

Fade 特效

// Fade invar fadeIn = function (el) {      el.style.opacity = 0      var last = +new Date()      var tick = function() {            el.style.opacity = +el.style.opacity + (new Date() - last) / 400            last = +new Date()            if (+el.style.opacity < 1) {                  requestAnimationFrame(tick))            }      }      tick()}// Fade outvar fadeOut = function (el) {   
  el.style.opacity = 1      var last = +new Date()      var tick = function() {            el.style.opacity = +el.style.opacity - (new Date() - last) / 400            last = +new Date()            if (+el.style.opacity > 0) {                  requestAnimationFrame(tick)            }      }      tick()}

上述是淡入淡出效果的具体实现,这里是利用requestAnimationFrame对opacity通过递归的方式进行修改。

其实这里需要提一个概念,就是时间分片。

这是一个非常重要的概念,例如 React 的 Fiber 核心实现就是时间分片。它会将一个长任务切分成一个含有若干小任务的任务队列,然后一个接着一个的执行。

requestAnimationFrame就是这样一个 API,它可以根据系统来决定回调函数的执行时机,其实也就是在下一次重绘之前更新动画帧,因为有这样的机制,所以能防止丢帧。

利用队列的概念进行数据操作

队列(queue),是先进先出(FIFO, First-In-First-Out)的线性表。在具体应用中通常用链表或者数组来实现。队列只允许在后端(称为 rear)进行插入操作,在前端(称为 front)进行删除操作。

虽然很多人觉得了解数据结构对前端作用不大,但是如果我们懂一些基础的概念,是否在编码时能够更加扩散我们的思维呢?我们看下面两个例子:

获取节点在该父节点下的坐标。

如果我们要操作原生 DOM,那么是绕不开获取节点在该父节点的下标的这个功能的,那么我们该如何实现呢?

当然就是利用我们的循环啦,对子元素集合进行遍历,直到确定下标为止,代码如下:

var index = function(el) {    if (!el) {        return -1;    }    var i = 0;    while ((el = el.previousElementSibling)) {        i++;    }    return i;};

清空子节点

如果我们要清空某个 DOM 节点的子节点,我们有以下的方法:

var empty = function(el) {    while (el.firstChild) {        el.removeChild(el.firstChild);    }};

上面只是提供一个思路,其实el.innerHTML = ''会更简洁。

利用 reduce 进行数据优化

数组去重

没错,又是一个老生常谈的问题,数组去重,但是我们这次去除的不仅仅是单个的数据,而是拥有某个相同键值的对象集合。例如下面的例子,我们有以下的数据:

牛逼的 reduce

数据去重

首先我们来看看一个老生常谈的问题,我们假设有这样的一个对象:

const data = [    {        name: "Kris",    age: "24"    },    {        name: "Andy",    age: "25"    },    {        name: "Kitty",    age: "25"    },    {        name: "Andy",    age: "25"    },    {        name: "Kitty",    age: "25"    },    {        name: "Andy",    age: "25"    },    {        name: "Kitty",    age: "25"    }];

现在我们要去重里面name重复的对象,这时候我们可以利用reduce,例子如下:

const dataReducer = (prev, cur, idx) => {    let obj = {};    const { name } = cur;    obj[name] = cur;    return {        ...prev,        ...obj    };};const reducedData = data.reduce(dataReducer, {});let newData = Object.values(reducedData);

批量生成对象元素

在鱼头的实际业务中,有一个操作是需要对类似以下的对象进行操作的:

{      a1: 'data',      a2: 'data',   
  ...,      an: 'data'}

像我这么懒的鱼,肯定不会一个个手写,所以就有了以下方法

const createList = (item, idx) => {    let obj = {};    obj[`a${idx}`] = "data";    return obj;};const listReducer = (acc, cur) => (!acc ? { ...cur } : { ...cur, ...acc });const obj = Array.from(new Array(20), createList).reduce(listReducer);

关于5个提升你JavaScript编码水平的实例是怎样的就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:http://blog.itpub.net/69940844/viewspace-2681610/

AI

开发者交流群×