javascript之with的使用(阿里云、淘宝使用代码分析)

记得还在懵懂学习JavaScript基础之时，坊间便有传言“with语句是低效率语句，若非必要，请不要使用该语句”，同时， ECMAScript 5 的strict mode下是禁止使用with语句的，所以一直以来我对with语句一直没啥好感。

今天在知乎有个话题大概说的是“你觉得什么东西相当有B格”之类的，然后就有人贴了这段代码：

with(document)with(body)with(insertBefore(createElement("script"), firstChild))setAttribute("exparams","category=&userid=68497352&aplus&yunid=", id = "tb-beacon-aplus", src = (location > "https" ? "//s": "//a") + ".tbcdn.cn/s/aplus_v2.js")

代码拆解：

with(document)
with(body)
with(insertBefore(createElement("script"), firstChild))
setAttribute("exparams","category=&userid=68497352&aplus&yunid=",
id = "tb-beacon-aplus",
src = (location > "https" ? "//s": "//a") + ".tbcdn.cn/s/aplus_v2.js"
)

再拆开

var script = document.createElement("script");
document.body.insertBefore(script, document.body.firstChild);

script.setAttribute("exparams","category=&userid=68497352&aplus&yunid=",
script.id = "tb-beacon-aplus",
script.src = (location > "https" ? "//s": "//a") + ".tbcdn.cn/s/aplus_v2.js"
);

因为在 JavaScript 里，可以给函数多传一些无用参数的。
因此，最后这句话完全可以理解为：
script.id = "tb-beacon-aplus";
script.src = (location > "https" ? "//s": "//a") + ".tbcdn.cn/s/aplus_v2.js";
script.setAttribute("exparams","category=&userid=68497352&aplus&yunid=");

如果赋值的不是标准属性，就不会写出到标签的 attribute 里了，所以分开赋值能让加载的外部脚本读取到这里的附加参数。

据说是淘宝首页的，好奇心使然，果断跑去淘宝看了下，有图有真相哪：

淘宝这种大项目一般是十分讲究效率的，居然会使用传说中的低效率代码？

我们试着用正常代码来达到上面的功能：

var s = document.createElement("script");
s.setAttribute("exparams","category=&userid=68497352&aplus&yunid=");
s.setAttribute("src",(location>"https"?"//s":"//a")+".tbcdn.cn/s/aplus_v2.js");
s.id="tb-beacon-aplus";
document.body.insertBefore(s,document.body.firstChild)

这是我能写出的最简单的代码了，当然，您可以尝试像淘宝那代码一样setAttribute，不过结果会让你很受伤！！！经过我的测试，他那样带3个以上的参数设置节点属性仅在with语句下有效，而且第三个及以后参数所设置的属性只能是HTML标准属性。原因我也不知道，有大牛愿意指教么？

代码压缩后，淘宝代码224字节，我写的代码264字节。

我得出的结论是：大的网站惜字节如金，特别是像淘宝这种每天流量巨大的网站，为了节省流量（别看只有几个字节，乘以个大的访问量后结果还是挺惊人的）而稍微牺牲下用户代码运行的效率是完全值得的。况且，在浏览器代码执行效率日新月异的今天，with语句效率真有那么低么？

秉承一颗探索的心（此刻内心略为激动。。），做了如下代码测试，

html代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div id="one" data="test data"></div>
</body>
</html>

with语句获取div#data值

var now = +new Date;
for(var i=0;i<1000000;i++){
   with(document)with(getElementById("one"))getAttribute("data")
}
console.log(new Date-now)

一般代码获取div#one的data值

var now = +new Date;
for(var i=0;i<1000000;i++){
   document.getElementById("one").getAttribute("data")
}
console.log(new Date-now)

获取属性值的代码均循环运行100W次，输出运行时间，测试浏览器为Chrome 35与IE 11：

申明：谁特么说我是IE黑，我和谁急！！！

Chrome 35 数值单位：ms
第1次 第2次 第3次 第4次 第5次 第6次 第7次 第8次 第9次 第10次 平均值 10W次差值 单次差值
一般代码 1362 1358 1379 1377 1372 1411 1371 1341 1356 1339 1366.6 888.7 0.89μs
IE 11 单位：ms
第1次 第2次 第3次 第4次 第5次 第6次 第7次 第8次 第9次 第10次 平均值 10W次差值 单次差值
正常情况 2352 2332 2321 2347 2342 2339 2365 2373 2353 2343 2346.7 861.7 0.86μs

由于其它软件运行的影响及两种代码运行的先后顺序，结果可能不是十分严谨，但个人认为还是不会影响我们得出最终的结论：with语句在不是嵌套十分复杂的情况下，相比于一般代码对执行效率的影响其实微乎其微。

我想ECMAScript 5 的strict mode下禁用with语句的主要原因应该是with语句让个对象与方法与属性的关系变得更模糊， 不利于JavaScript向面向对象编程靠拢吧。

我们小编补充：虽然有B格但不论是易于阅读还是考虑性能的目的，很多网站还是使用普通的方式加载。

赞 (0)

相关推荐

  • javascript简单事件处理和with用法介绍

    这一期介绍一些简单的事件处理: 1.鼠标点击 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name="Gene

  • JavaScript严格模式禁用With语句的原因

    看了很多遍JavaScript严格模式,其中有说"禁用With语句",以前看到这都是骑马观花,一带而过,因为平时就很少用到这个语句,禁不禁用对自己关系都不是很大.今天禁不住想知道为何"严格模式"就容不下with语句呢? EcmaScript规范上说"with 语句用于设置代码在特定对象中的作用域",可以看出,With语句改变了作用域链. function Person(name,age,sex){ this.name = name; this.a

  • js的with语句使用方法

    1)简要说明         with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性.要给对象创建新的属性,必须明确地引用该对象. 2)语法格式  with(object instance)  {          //代码块  }         有时候,我在一个程序代码中,多次需要使用某对象的属性或方法,照以前的写法,都是通过:对象.属性或者对象.方法这样的方式来分别获得该对象的属性和方法,着实有点麻烦,学习了with语句后,可以通过类似如下的方式来实现:  w

  • javascript下with 的简化代码写法

    with (object) statements 参数 object 新的默认对象. statements 一个或多个语句,object 是该语句的默认对象. 说明 with 语句通常用来缩短特定情形下必须写的代码量.在下面的例子中,请注意 Math 的重复使用: x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10) y = Math.tan(14 * Math.E) 当使用 with 语句时,代码变得更短且更易读: 复制代码 代码如下: with (M

  • JavaScript的strict模式与with关键字介绍

    2009年12月,ECMAScript发布了ECMAScript 5,这距离上一个版本的ECMAScript 3标准发布已经整整十年了,其间JavaScript虽然大行于web编程,ECMAScript 4却最终因为利益相关的各大厂商和组织在此语言的复杂性(即是否增加大量特性以扩展ECMAScript的功能)上的分歧而夭折,使得ECMAScript新标准的制订大大落后于编程的实践.ECMAScript 5在目标上没有那么雄心勃勃,除去新增了对JSON的支持和反射的更全面的控制,一项重要改进就是引

  • 关于JavaScript的with 语句的使用方法

    用过 Java 和 .NET 的同学对包或命名空间的概念应该不会陌生, 正因为有这个概念, 使代码的简洁易读得到了保证. 不知 JavaScript 设计之初是如何定位 with 语句的, 个人觉得它们之间有一定的相似度. 如: 复制代码 代码如下: apple.banana.candy.dog.egg.fog.god.huh.index = 0; doSomething(apple.banana.candy.dog.egg.fog.god.huh.index); 利用 with 语句, 可以写

  • javascript中with()方法的语法格式及使用

    内容导读: 有了 With 语句,在存取对象属性和方法时就不用重复指定参考对象,在 With 语句块中,凡是 JavaScript 不识别的属性和方法都和该语句块指定的对象有关.With 语句的语法格式如下所示: With Object { Statements } 对象指明了当语句组中对象缺省时的参考对象,这里我们用较为熟悉的 Document 对象对 With 语句举例.例如 当使用与 Document 对象有关的 write( )或 writeln( )方法时,往往使用如下形式: docu

  • JavaScript学习小结之被嫌弃的eval函数和with语句实例详解

    前面的话 eval和with经常被嫌弃,好像它们的存在就是错误.在CSS中,表格被嫌弃,在网页中只是用表格来展示数据,而不是做布局,都可能被斥为不规范,矫枉过正.那关于eval和with到底是什么情况呢?本文将详细介绍eval()函数和with语句 eval 定义 eval()是一个全局函数,javascript通过eval()来解释运行由javascript源代码组成的字符串 var result = eval('3+2'); console.log(result,typeof result)

  • Javascript中With语句用法实例

    本文实例讲述了Javascript中With语句用法.分享给大家供大家参考.具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>With语句(类似于VB中的)</title>

  • 在js中使用"with"语句中跨frame的变量引用问题

    在脚本编程时使用with语句,可以大大的缩减使用多级对象引用代码行的长度,这是JScript提供给我们的一个Syntax Sugar.当然不使用with,使用临时变量也可以达到同样的效果.不过创建变量时起名确实不是一件很遐意的事,就连MASM高版本中也提供了一个@@(以及@F和@B)来处理临时标号的问题,看来大家都是比较懒得啦. 我也挺喜欢用with语句的,确实可以省不少的事情,而且可以让代码变得也清晰些,特别是在处理跨frame的变量引用时,更加显得方便.这不今天就因为贪图方便又撞到枪口上了,

  • javaScript中with函数用法实例分析

    本文实例讲述了javaScript中with函数用法.分享给大家供大家参考.具体分析如下: javaScript 中的 with 函数 ,即所谓的with 语句,可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性,要给对象创建新的属性,必须明确地引用该对象. with 函数,为语句设定默认对象. with (object)   statements 参数: object 新的默认对象. statements 一个或多个语句,object 是该语句的默认对象. 说明: with

  • js批量设置样式的三种方法不推荐使用with

    一般我们都用css来批量设置样式,现在我们用js也可以批量设置样式: 总结三种方法如下 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> #div1{

  • 理解javascript中的with关键字

    说起js中的with关键字,很多小伙伴们的第一印象可能就是with关键字的作用在于改变作用域,然后最关键的一点是不推荐使用with关键字.听到不推荐with关键字后,我们很多人都会忽略掉with关键字,认为不要去管它用它就可以了.但是有时候,我们在看一些代码或者面试题的时候,其中会有with关键字的相关问题,很多坑是你没接触过的,所以还是有必要说说with这一个关键字. 一.基本说明 在js高级程序设计中是这样描述with关键字的:with语句的作用是将代码的作用域设置到一个特定的作用域中,基本

  • 深入浅析JavaScript中with语句的理解

    深入浅析JavaScript中with语句的理解

    JavaScript 有个 with 关键字, with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象. with语句的作用是暂时改变作用域链.减少的重复输入. 其语法结构为: with(object){ //statements } 举一个实际例子吧: with(document.forms[]){ name.value = "lee king"; address.value = "Peking";

随机推荐