金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 是真的美,到底是干什么的

是真的美,到底是干什么的

发布时间:2019-11-01 17:35编辑:web前端浏览(151)

    H5 Crash 测试结果

    测试结果:

    • 通过 opacity、animation、positon 等方式创建层,即便是 1w 个,页面也没有明显变化;但是使用 transform 创建 2k~5k 个层,页面会卡顿几秒后立即闪退;
    • 内存是条红线,测试发现,一次性消耗 20M 的内存,会导致客户端立即闪退;
    • 并发请求也是存在响应问题的,Fetch API 和 CSS Resource 并发 1k 请求没有出现问题,但是 XHR 和 Script Resource 请求,问题特别明显,虽然没有导致页面闪退,但是页面已经进入了假死状态。

    以上临界值还可以继续精确。

    制造一百个士兵

    如果需要制造 100 个士兵怎么办呢?

    循环 100 次吧:

    JavaScript

    var 士兵们 = [] var 士兵 for(var i=0; i<100; i++){ 士兵 = { ID: i, // ID 不能重复 兵种:"美国大兵", 攻击力:5, 生命值:42, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } } 士兵们.push(士兵) } 兵营.批量制造(士兵们)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    var 士兵们 = []
    var 士兵
    for(var i=0; i<100; i++){
      士兵 = {
        ID: i, // ID 不能重复
        兵种:"美国大兵",
        攻击力:5,
        生命值:42,
        行走:function(){ /*走俩步的代码*/},
        奔跑:function(){ /*狂奔的代码*/  },
        死亡:function(){ /*Go die*/    },
        攻击:function(){ /*糊他熊脸*/   },
        防御:function(){ /*护脸*/       }
      }
      士兵们.push(士兵)
    }
     
    兵营.批量制造(士兵们)

    哎呀好简单。

    闭包,是真的美

    2018/04/11 · JavaScript · 闭包

    原文出处: 张建成   

    欢迎评论和star

    写这篇文章时的心情是十分忐忑的,因为对于我们今天的主角:闭包,很多小伙伴都写过关于它的文章,相信大家也读过不少,那些文章到底有没有把JS中这个近似神话的东西讲清楚,说实心里,真的有,但为数不多。

    写这篇文章的初衷:让所有看到这篇文章的小伙伴都彻彻底底的理解闭包 => 提高JS水平 => 能够写出更高质量的JS代码。

    开文之所以说心情是忐忑的,就是怕达不到我写该文的初衷,但是我有信心同时我也会努力的完成我的目标。如行文中有丝毫误人子弟的陈述,欢迎大家指正,在这感激不尽。

    我们开始吧:

    相信众多JS的lovers都听说过这句话:闭包很重要但是很难理解

    我起初也是这么觉得,但是当我努力学习了JS的一些深层的原理以后我倒觉得闭包并不是那么不好理解,反倒是让我感觉出一种很美的感觉。当我彻底理解闭包的那一刹那,心中油然产生一种十分愉悦感觉,就像**”酒酣尚醉,花未全开”**那种美景一样。

    H5 Crash 研究

    2016/05/31 · HTML5 · Crash

    原文出处: 小胡子哥(@Barret李靖)   

    我们知道,支撑页面在 webview 上良好运转的前提是具备一个高效并且稳定的 webview 容器,而容器的高效稳定不仅仅由容器提供方来保障,也需要容器使用者遵守一些基本准则,否则就有可能出现页面 Crash 的情况,这些准则是什么?什么样的上层代码会引起容器异常退出?这是本文需要阐述的内容。

    注意 constructor 属性

    new 操作为了记录「临时对象是由哪个函数创建的」,所以预先给「士兵.prototype」加了一个 constructor 属性:

    JavaScript

    士兵.prototype = { constructor: 士兵 }

    1
    2
    3
    士兵.prototype = {
      constructor: 士兵
    }

    如果你重新对「士兵.prototype」赋值,那么这个 constructor 属性就没了,所以你应该这么写:

    JavaScript

    士兵.prototype.兵种 = "美国大兵" 士兵.prototype.攻击力 = 5 士兵.prototype.行走 = function(){ /*走俩步的代码*/} 士兵.prototype.奔跑 = function(){ /*狂奔的代码*/ } 士兵.prototype.死亡 = function(){ /*Go die*/ } 士兵.prototype.攻击 = function(){ /*糊他熊脸*/ } 士兵.prototype.防御 = function(){ /*护脸*/ }

    1
    2
    3
    4
    5
    6
    7
    士兵.prototype.兵种 = "美国大兵"
    士兵.prototype.攻击力 = 5
    士兵.prototype.行走 = function(){ /*走俩步的代码*/}
    士兵.prototype.奔跑 = function(){ /*狂奔的代码*/  }
    士兵.prototype.死亡 = function(){ /*Go die*/    }
    士兵.prototype.攻击 = function(){ /*糊他熊脸*/   }
    士兵.prototype.防御 = function(){ /*护脸*/       }

    或者你也可以自己给 constructor 重新赋值:

    JavaScript

    士兵.prototype = { constructor: 士兵, 兵种:"美国大兵", 攻击力:5, 行走:function(){ /*走俩步的代码*/}, 奔跑:function(){ /*狂奔的代码*/ }, 死亡:function(){ /*Go die*/ }, 攻击:function(){ /*糊他熊脸*/ }, 防御:function(){ /*护脸*/ } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    士兵.prototype = {
      constructor: 士兵,
      兵种:"美国大兵",
      攻击力:5,
      行走:function(){ /*走俩步的代码*/},
      奔跑:function(){ /*狂奔的代码*/  },
      死亡:function(){ /*Go die*/    },
      攻击:function(){ /*糊他熊脸*/   },
      防御:function(){ /*护脸*/       }
    }

    完。

    2 赞 6 收藏 4 评论

    图片 1

    闭包的应用

    1. 模块一个模块应该具有私有属性、私有方法和公有属性、公有方法。而闭包能很好的将模块的公有属性、方法暴露出来。
    var myModule = (function (window, undefined) { let name = "echo";
    function getName() { return name; } return { name, getName }
    })(window); console.log( myModule.name ); // echo console.log(
    myModule.getName() ); // echo
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6bea87da9603634463-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87da9603634463-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bea87da9603634463-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87da9603634463-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bea87da9603634463-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87da9603634463-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bea87da9603634463-7">
    7
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87da9603634463-8">
    8
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bea87da9603634463-9">
    9
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87da9603634463-10">
    10
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bea87da9603634463-11">
    11
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87da9603634463-12">
    12
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bea87da9603634463-13">
    13
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87da9603634463-14">
    14
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bea87da9603634463-15">
    15
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6bea87da9603634463-1" class="crayon-line">
    var myModule = (function (window, undefined) {
    </div>
    <div id="crayon-5b8f6bea87da9603634463-2" class="crayon-line crayon-striped-line">
     let name = &quot;echo&quot;;
    </div>
    <div id="crayon-5b8f6bea87da9603634463-3" class="crayon-line">
    
    </div>
    <div id="crayon-5b8f6bea87da9603634463-4" class="crayon-line crayon-striped-line">
     function getName() {
    </div>
    <div id="crayon-5b8f6bea87da9603634463-5" class="crayon-line">
     return name;
    </div>
    <div id="crayon-5b8f6bea87da9603634463-6" class="crayon-line crayon-striped-line">
     }
    </div>
    <div id="crayon-5b8f6bea87da9603634463-7" class="crayon-line">
    
    </div>
    <div id="crayon-5b8f6bea87da9603634463-8" class="crayon-line crayon-striped-line">
     return {
    </div>
    <div id="crayon-5b8f6bea87da9603634463-9" class="crayon-line">
     name,
    </div>
    <div id="crayon-5b8f6bea87da9603634463-10" class="crayon-line crayon-striped-line">
     getName
    </div>
    <div id="crayon-5b8f6bea87da9603634463-11" class="crayon-line">
     }
    </div>
    <div id="crayon-5b8f6bea87da9603634463-12" class="crayon-line crayon-striped-line">
    })(window);
    </div>
    <div id="crayon-5b8f6bea87da9603634463-13" class="crayon-line">
     
    </div>
    <div id="crayon-5b8f6bea87da9603634463-14" class="crayon-line crayon-striped-line">
    console.log( myModule.name ); // echo
    </div>
    <div id="crayon-5b8f6bea87da9603634463-15" class="crayon-line">
    console.log( myModule.getName() ); // echo
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    “return”关键字将对象引用导出赋值给myModule,从而应用到闭包。
    
    1. 延时器(setTimeout)、计数器(setInterval)这里简单写一个常见的关于闭包的面试题。
    for( var i = 0; i &lt; 5; i++ ) { setTimeout(() =&gt; { console.log(
    i ); }, 1000 * i) }
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6bea87dad912221241-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87dad912221241-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bea87dad912221241-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87dad912221241-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bea87dad912221241-5">
    5
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6bea87dad912221241-1" class="crayon-line">
    for( var i = 0; i &lt; 5; i++ ) {
    </div>
    <div id="crayon-5b8f6bea87dad912221241-2" class="crayon-line crayon-striped-line">
     setTimeout(() =&gt; {
    </div>
    <div id="crayon-5b8f6bea87dad912221241-3" class="crayon-line">
     console.log( i );
    </div>
    <div id="crayon-5b8f6bea87dad912221241-4" class="crayon-line crayon-striped-line">
     }, 1000 * i)
    </div>
    <div id="crayon-5b8f6bea87dad912221241-5" class="crayon-line">
    }
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    答案大家都知道:**每秒钟输出一个5,一共输出5次**。
    
    那么如何做到**每秒钟输出一个数,以此为0,1,2,3,4**呢?
    
    我们这里只介绍闭包的解决方法,其他类似块作用域等等的解决方法,我们这里不讨论。
    
    
    
    for( var i = 0; i &lt; 5; i++ ) { ((j) =&gt; { setTimeout(() =&gt; {
    console.log( j ); }, 1000 * j) })(i) }
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6bea87db1013292990-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87db1013292990-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bea87db1013292990-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87db1013292990-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bea87db1013292990-5">
    5
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87db1013292990-6">
    6
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bea87db1013292990-7">
    7
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6bea87db1013292990-1" class="crayon-line">
    for( var i = 0; i &lt; 5; i++ ) {
    </div>
    <div id="crayon-5b8f6bea87db1013292990-2" class="crayon-line crayon-striped-line">
     ((j) =&gt; {
    </div>
    <div id="crayon-5b8f6bea87db1013292990-3" class="crayon-line">
     setTimeout(() =&gt; {
    </div>
    <div id="crayon-5b8f6bea87db1013292990-4" class="crayon-line crayon-striped-line">
     console.log( j );
    </div>
    <div id="crayon-5b8f6bea87db1013292990-5" class="crayon-line">
     }, 1000 * j)
    </div>
    <div id="crayon-5b8f6bea87db1013292990-6" class="crayon-line crayon-striped-line">
     })(i) 
    </div>
    <div id="crayon-5b8f6bea87db1013292990-7" class="crayon-line">
    }
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    
    “setTimeout”方法里应用了闭包,使其内部能够记住每次循环所在的词法作用域和作用域链。
    
    由于setTimeout中的回调函数会在当前任务队列的尾部进行执行,因此上面第一个例子中每次循环中的setTimeout回调函数记住的i的值是for循环作用域中的值,此时都是5,而第二个例子记住的i的数为setTimeout的父级作用域自执行函数中的j的值,依次为0,1,2,3,4。
    
    1. 监听器
    var oDiv = document.querySeletor("#div");
    oDiv.addEventListener('click', function() { console.log( oDiv.id );
    })
    
    <table>
    <colgroup>
    <col style="width: 50%" />
    <col style="width: 50%" />
    </colgroup>
    <tbody>
    <tr class="odd">
    <td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
    <div class="crayon-num" data-line="crayon-5b8f6bea87db4035872148-1">
    1
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87db4035872148-2">
    2
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bea87db4035872148-3">
    3
    </div>
    <div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6bea87db4035872148-4">
    4
    </div>
    <div class="crayon-num" data-line="crayon-5b8f6bea87db4035872148-5">
    5
    </div>
    </div></td>
    <td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
    <div id="crayon-5b8f6bea87db4035872148-1" class="crayon-line">
    var oDiv = document.querySeletor(&quot;#div&quot;);
    </div>
    <div id="crayon-5b8f6bea87db4035872148-2" class="crayon-line crayon-striped-line">
     
    </div>
    <div id="crayon-5b8f6bea87db4035872148-3" class="crayon-line">
    oDiv.addEventListener('click', function() {
    </div>
    <div id="crayon-5b8f6bea87db4035872148-4" class="crayon-line crayon-striped-line">
     console.log( oDiv.id );
    </div>
    <div id="crayon-5b8f6bea87db4035872148-5" class="crayon-line">
    })
    </div>
    </div></td>
    </tr>
    </tbody>
    </table>
    

    =- 关于闭包,我觉得我说清楚了,你看清楚了吗?留言告诉我吧 -=

    如果你觉得写的还不是很烂,请关注我的 github 吧,让我们一起成长。。。

    1 赞 3 收藏 评论

    图片 2

    H5 Crash 问题概况

    下图是 H5 Crash 的大致流程图:

    图片 3

    由于前端没办法捕捉到页面 Crash 的状态和堆栈,但是 H5 页面上发生的错误会传递到 Java 和更底层的 Native 直到容器异常退出,在退出的那一刻,容器会将堆栈写入到日志中,当下次打开容器时(也可能是定时上报)就会上报这些堆栈信息。

    质疑

    上面的代码存在一个问题:浪费了很多内存。

    1. 行走、奔跑、死亡、攻击、防御这五个动作对于每个士兵其实是一样的,只需要各自引用同一个函数就可以了,没必要重复创建 100 个行走、100个奔跑……
    2. 这些士兵的兵种和攻击力都是一样的,没必要创建 100 次。
    3. 只有 ID 和生命值需要创建 100 次,因为每个士兵有自己的 ID 和生命值。

    闭包的艺术性

    我相信这个世界上最美的事物往往就存在我们身边,通常它并不是那么神秘,那么不可见,只是我们缺少了一双发现美的眼睛。

    生活中,我们抽出一段时间放慢脚步,细细品味我们所过的每一分每一秒,会收获到生活给我们的另一层乐趣。

    闭包也一样,它不是很神秘,反而是在我们的程序中随处可见,当我们静下心来,品味闭包的味道,发现它散发出一种艺术的美,朴实、精巧又不失优雅。

    图片 4

    细想,在我们作用域气泡模型中,作用域链让我们的内部bar气泡能够”看到”外面的世界,而闭包则让我们的外部作用域能够”关注到”内部的情况成为可能。可见,只要我们愿意,内心世界和外面世界是可以相通的

    本文由金沙国际官网发布于web前端,转载请注明出处:是真的美,到底是干什么的

    关键词:

上一篇:没有了

下一篇:没有了