协助Angular开拓者使用云数据

多年来,作者付出一个类型 Angular Cloud Data
Connector,
帮助Angular开采者使用云数据,极其是 Azure移动服务,
使用WEB标准,像索引数据库(indexed
DB卡塔尔。笔者尝试创造少年老成种艺术,使得JavaScript开采者能将民用成员嵌入到一个对象中。

本身消灭那个主题材料的本领运用了自家取名的闭包空间(closure
space)。在此篇入门文章中,小编要享受的是哪些在你的花色中用它,及它对主流浏览器的属性和内部存款和储蓄器的影响。

在深远学习前,我们先说下,你干什么必要选择私有成员(private members),
还会有豆蔻年华种代替方式来效仿私有成员。

倘使你想点评本文,尽情推(twitterState of Qatar作者:
@deltakosh。

1. 为何要用私有成员(Private Members)

当您用JavaScript 创立一个对象时,能够注明值成员(value members)。
要是您准备调节对它们的读/写访谈操作,能够如下宣示:

var entity = {};

entity._property = "hello world";
Object.defineProperty(entity, "property", {
    get: function () { return this._property; },
    set: function (value) {
        this._property = value;
    },
    enumerable: true,
    configurable: true
});

那般实现,你能完全调节读和写操作。难点在于_property
成员照旧能够直接访问和改造。

那也正是干什么大家必要进一层平静可信的法子,表明私有成员,它智能通过对象的点子来做客。

2. 应用闭包空间(Closure Space)

消除方法是选取闭包空间。每当内部函数 (inner fanction卡塔尔访谈来自外界函数功用域的变量时,浏览器为您分配大器晚成段内部存款和储蓄器空间。一时很取巧,可是就我们的标题来讲,那终究三个康健的实施方案。

我们在上个代码版本中添加这个特性:
var createProperty = function (obj, prop, currentValue) 
{
    Object.defineProperty(obj, prop, 
    {
            get: function () { return currentValue; },
            set: function (value) {
            currentValue = value;
                    },
                    enumerable: true,
                    configurable: true    });
                    } 
var entity = {}; 
var myVar = "hello world";createProperty(entity, "property", myVar);

演示中,createProperty 函数有贰个 currentValue 变量,存在 get 和 set
方法。此变量会保留到 get 和 set
函数的闭包空间中。现在,唯有这七个函数能看出和更新 currentValue 变量!
职分成功!

唯后生可畏须求警惕 caveat,警示,注意)的是源值 (myVarState of Qatar仍可访谈。上面给出另贰个更健康的版本(保养 myVar 变量):

var createProperty = function (obj, prop) {
    var currentValue = obj[prop];
    Object.defineProperty(obj, prop, {
        get: function () { return currentValue; },
        set: function (value) {
            currentValue = value;
        },
        enumerable: true,
        configurable: true
    });
}

var entity = {
    property: "hello world"
};

createProperty(entity, "property");

使用该函数,
就算源值都销毁(destructed,注:意思是无法直接赋值卡塔尔国了。到此马到成功了!

3. 质量思忖Performance Considerations

这段时间我们看看质量。

很扎眼,比起三个简洁明了的变量,闭包空间,甚或(对象)属性要慢的多,且更费用能源。那正是本文越多关心普通情势和闭包空间机制差别的原因。

为求证闭包空间机制并不如典型方法更花销能源, 作者写了上面代码做个标准化测量检验:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<style>
    html {
        font-family: "Helvetica Neue", Helvetica;
    }
</style>
<body>
    <div id="results">Computing...</div>
    <script>
        var results = document.getElementById("results");
        var sampleSize = 1000000;
        var opCounts = 1000000;

        var entities = [];

        setTimeout(function () {
            // Creating entities
            for (var index = 0; index < sampleSize; index++) {
                entities.push({
                    property: "hello world (" + index + ")"
                });
            }

            // Random reads
            var start = new Date().getTime();
            for (index = 0; index < opCounts; index++) {
                var position = Math.floor(Math.random() * entities.length);
                var temp = entities[position].property;
            }
            var end = new Date().getTime();

            results.innerHTML = "<strong>Results:</strong><br>Using member access: <strong>" + (end - start) + "</strong> ms";
        }, 0);

        setTimeout(function () {
            // Closure space =======================================
            var createProperty = function (obj, prop, currentValue) {
                Object.defineProperty(obj, prop, {
                    get: function () { return currentValue; },
                    set: function (value) {
                        currentValue = value;
                    },
                    enumerable: true,
                    configurable: true
                });
            }
            // Adding property and using closure space to save private value
            for (var index = 0; index < sampleSize; index++) {
                var entity = entities[index];

                var currentValue = entity.property;
                createProperty(entity, "property", currentValue);
            }

            // Random reads
            var start = new Date().getTime();
            for (index = 0; index < opCounts; index++) {
                var position = Math.floor(Math.random() * entities.length);
                var temp = entities[position].property;
            }
            var end = new Date().getTime();

            results.innerHTML += "<br>Using closure space: <strong>" + (end - start) + "</strong> ms";
        }, 0);

        setTimeout(function () {
            // Using local member =======================================
            // Adding property and using local member to save private value
            for (var index = 0; index < sampleSize; index++) {
                var entity = entities[index];

                entity._property = entity.property;
                Object.defineProperty(entity, "property", {
                    get: function () { return this._property; },
                    set: function (value) {
                        this._property = value;
                    },
                    enumerable: true,
                    configurable: true
                });
            }

            // Random reads
            var start = new Date().getTime();
            for (index = 0; index < opCounts; index++) {
                var position = Math.floor(Math.random() * entities.length);
                var temp = entities[position].property;
            }
            var end = new Date().getTime();

            results.innerHTML += "<br>Using local member: <strong>" + (end - start) + "</strong> ms";
        }, 0);

    </script>
</body>
</html>

自身创设了一百万个对象,都有总体性成员。要到位上面八个测验:

  • 奉行 1百万次随机访谈属性。
  • 进行1百万次随机访谈闭包空间完成版本。
  • 实行1百万次随机拜谒常规get/set完毕版本。

测量检验结果参见下边表格和图纸:

图片 1图片 2

咱俩开掘,闭包空间完结连接快于常规完毕,依据浏览器的差别,还足以做越来越习性优化。

Chrome 上的属性表现低于预期。大概存在 bug,由此,为确认(存在
bug),作者联系了 Google 项目组,描述发生的病症。还大概有,倘令你希图测验在
Microsoft
Edge
—微软新颁发的浏览器,在windows10中暗中认可安装—中的品质表现,你能够点击下载 。

唯独,假诺留神斟酌,你会开掘,使用闭包空间或质量比直接访谈变量成员要10倍左右。 因而,使用要适当且稳重。

图片 3

4. 内部存款和储蓄器占用(Memory Footprint)

大家也得验证该技巧不会成本过多内部存款和储蓄器。为测量检验内存占用基准情状,作者写了下边代码段:

直接属性引用版本(Reference Code)

var sampleSize = 1000000;
 var entities = []; 
// Creating entities
for (var index = 0; index < sampleSize; index++) {
    entities.push({
            property: "hello world (" + index + ")"
});}

正规格局版本(Regular Way,get/set)

var sampleSize = 1000000;

var entities = [];

// Adding property and using local member to save private value
for (var index = 0; index < sampleSize; index++) {
    var entity = {};

    entity._property = "hello world (" + index + ")";
    Object.defineProperty(entity, "property", {
        get: function () { return this._property; },
        set: function (value) {
            this._property = value;
        },
        enumerable: true,
        configurable: true
    });

    entities.push(entity);
}

闭包空间版本(Closure Space Version)

var sampleSize = 1000000;

var entities = [];

var createProperty = function (obj, prop, currentValue) {
    Object.defineProperty(obj, prop, {
        get: function () { return currentValue; },
        set: function (value) {
            currentValue = value;
        },
        enumerable: true,
        configurable: true
    });
}

// Adding property and using closure space to save private value
for (var index = 0; index < sampleSize; index++) {
    var entity = {};

    var currentValue = "hello world (" + index + ")";
    createProperty(entity, "property", currentValue);

    entities.push(entity);
}

其后,笔者(在八个主流浏览器上)运维具备的三段代码,运转(浏览器)内嵌的内部存款和储蓄器品质深入分析器(本示例中使用
F12 工具条):

图片 4

自家Computer上运营的结果如下图表:

图片 5

就闭包空间和例行方式,独有 Chrome上,闭包空间(内部存款和储蓄器占用)表现稍好,在
IE11 和
Firefox上攻陷内部存款和储蓄器反而扩展,不过浏览器的可比结实e—对于现代浏览器,客商很也许不会在意那一点间距。

更多 JavaScript 实践

恐怕你会大惊失色,微软提供了一群关于开源 Javascript
核心的免费学习材质, 大家正在发起叁个职务,关于创建更加多 Microsoft Edge
来临
种类。 查看本人的篇章:

  • 基于HTML5

    Babylon.JS
    开发 WebGL 3D 基础
  • 塑造单页面应用,基于 ASP.NET 和
    AngularJS
  • HTML
    高端图像本领

要么大家组织体系:

  • HTML/JavaScript
    品质优化利用本事 (该种类有7某个,从响应式设计到休闲游戏的性子优化卡塔尔国
  • 今世 Web
    平台飞速运营
    ( HTML, CSS, and JS基础)
  • 支出通用的 Windows Apps,使用 HTML 和 JavaScript
    火速运转
    (使用你本人的JS构建app卡塔尔国

以致一些无偿工具:Visual Studio
社区,Azure
试用版和跨浏览器测验工具用于
Mac, Linux, 或者 Windows。

结论(Conclusion)

如你所见,对于开创真正的私房数据来说,闭包空间属性(机制)是四个很棒的做法。可能你得面对内部存款和储蓄器消耗大幅度扩大(难题),但就作者的观点,那却很合理 (那个代价能够换取绝对于健康办法更加高的性质增加State of Qatar。

带走说一句,
假诺你要团结动手试试,所以代码能够在 here下载。 推荐风华正茂篇不错的稿子, “how-to”
on Azure Mobile Services
here。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website