来自Chart.js的几个JS helper function

Kross 发布于2019-08-20 16:15 / 2227人阅读

摘要：最近兼职的项目里面因为要用进行数据的交互式可视化，用比较多，也踩了不少坑。内部用这个进行之类的时，先深拷贝然后再扩展，比较方便。可以看出直接给原型进行扩展，写起来非常简洁。

最近兼职的项目里面因为要用charts进行数据的交互式可视化，用Chart.js比较多，也踩了不少坑。
为了改bug提pr外加学习一下提高姿势水平花了一点时间看了下源码，发现一些比较有用简介的helper function很值得学习及日常使用。

代码

var helpers = {};

// -- Basic js utility methods
helpers.each = function(loopable, callback, self, reverse) {
    // Check to see if null or undefined firstly.
    var i, len;
    if (helpers.isArray(loopable)) {
        len = loopable.length;
        if (reverse) {
            for (i = len - 1; i >= 0; i--) {
                callback.call(self, loopable[i], i);
            }
        } else {
            for (i = 0; i < len; i++) {
                callback.call(self, loopable[i], i);
            }
        }
    } else if (typeof loopable === "object") {
        var keys = Object.keys(loopable);
        len = keys.length;
        for (i = 0; i < len; i++) {
            callback.call(self, loopable[keys[i]], keys[i]);
        }
    }
};
helpers.clone = function(obj) {
    var objClone = {};
    helpers.each(obj, function(value, key) {
        if (helpers.isArray(value)) {
            objClone[key] = value.slice(0);
        } else if (typeof value === "object" && value !== null) {
            objClone[key] = helpers.clone(value);
        } else {
            objClone[key] = value;
        }
    });
    return objClone;
};
helpers.extend = function(base) {
    var setFn = function(value, key) {
        base[key] = value;
    };
    for (var i = 1, ilen = arguments.length; i < ilen; i++) {
        helpers.each(arguments[i], setFn);
    }
    return base;
};

使用场景 helpers.each

提供了数组和Object统一的遍历函数，实际使用举例：

helpers.each(scalesOptions.xAxes, function(xAxisOptions, index) {
  xAxisOptions.id = xAxisOptions.id || ("x-axis-" + index);
});

helpers.clone

提供了完整的深拷贝函数，与常用的JSON.parse(JSON.stringify(obj))的区别在于这个函数可以深拷贝对象内的函数。

Chart.js内部用这个进行config之类的merge时，先深拷贝然后再扩展，比较方便。

var base = helpers.clone(_base);

helpers.extend

Chart.js的设计思想包含了很多plugin形式，本身的Chart的核心功能也都有扩展的方式定义的，关键就在extend。

helpers.extend(Chart.prototype, /** @lends Chart */ {
  /**
    * @private
    */
  construct: function(item, config) {
    // ...
  },

  /**
    * @private
    */
  initialize: function() {
    // ...
  },
  // ...
}

可以看出直接给原型进行扩展，写起来非常简洁。

阅读原文

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82815.html

编写javascript模板引擎的几个步骤

摘要：先推荐一个我自己写的模板引擎，项目地址。下面就是总结的编写模板引擎的几个步骤例如一个模板为最终会编译成为一个函数可以观察到模板中的所有的变量名都被指定成了参数对象的属性，并且该函数自始至终只做了一件事，就是构建字符串，并将其返回。 showImg(https://segmentfault.com/img/remote/1460000007498588?w=300&h=113); 先推荐...

xiaoxiaozi 2019-08-20 12:20 评论0 收藏0
声明式与响应式——前端新一代数据可视化方案

摘要：数据可视化图表图表作为数据可视化最常见的表现形式之一，往往被以偏概全的认为图表就是数据可视化。严格来说，数据可视化应该是连接数据与视觉的一个映射关系，将数据映射成人更容易感知其规律的可视化结果。题目中的新一代是个相对的概念，事实上本文即将介绍的方法已经有了生产环境可用的实现方案（这也侧面佐证了其可行性），但考虑到此方法与现在大部分前端项目中所使用的数据可视化方案相比仍有一些优势，因此...

xuhong 2019-08-20 12:34 评论0 收藏0
js函数调用模式和常用的几个方法

摘要：一函数调用的种模式方法调用模式当一个函数被保存为对象的一个属性时，我们称它为一个方法。二函数常用的三个方法在指定值和参数参数以数组或类数组对象的形式存在的情况下调用某个函数。当绑定函数被调用时，该参数会作为原函数运行时的指向。一、函数调用的4种模式 (1) 方法调用模式当一个函数被保存为对象的一个属性时，我们称它为一个方法。当一个方法被调用时，this 被绑定到该对象。如果调用表达...

zhigoo 2019-08-19 18:32 评论0 收藏0
前端开发者常用的9个JavaScript图表库

摘要：使用来呈现图表。允许用户在应用程序中创建美观的可复用的图表。它是基于创建的，是一个以数据为中心的图表库，可以改进数据可视化的效果。非常轻巧，并使用元素来创建很奇特的图表。是库中较为古老的图表库之一。总结以上介绍的库都是高质量的图表库。当前，数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据，都需要经过适当的可视化处理，以便更好的呈现给用户读取和分析。对任何一个...

luck 2019-08-22 11:21 评论0 收藏0
利用h5,chart.js监测手机三轴加速度，用以研究计步算法等

摘要：用来判断手机浏览器是否支持访问硬件资源，通过上一句代码来对该事件进行监听，第一个参数是事件类型，第二个参数是一个对事件的处理，在总通过获得加速器对象，分别获取传感器三个分量的参数，这样就完成了参数的获取。用window.DeviceMotionEvent来判断手机浏览器是否支持访问硬件资源，window.addEventListener(devicemotion,deviceMoti...

crossoverJie 2019-08-20 17:48 评论0 收藏0