专栏首页DeveWork《众妙之门:JavaScript 与 jQuery 技术精粹》部分要点摘录

《众妙之门:JavaScript 与 jQuery 技术精粹》部分要点摘录

以下内容来自于《众妙之门:JavaScript 与 jQuery 技术精粹》一书,为本人在阅读的时候感觉有必要记录的地方记录而来。

三重标记法

var d; if(x < 200){ d = 1; } else { d = -1; }   var d = x < 200 ? 1 : -1;

数组的遍历& 性能影响

/* cached outside loop*/ var len = myArray.length; for (var i = 0; i < len; i++) {}   /* cached inside loop */ /* 数组长度在每个循环中都被不必要的重复访问,如此导致程序运行缓慢*/ for (var i = 0, len = myArray.length; i < len; i++){}   /* cached outside loop using while */ var len = myArray.length; while (len--){}

命名空间模式

问题:程序中使用的命名空间是正确的,但对其存在性的检查无效。如下例:

if (!MyNamespace){ MyNamespace = {}; }

执行过程中!MyNamespace 会报错,变量之前么有做声明。较好的处理方式:

方式一

if (!MyNamespace){ MyNamespace = {}; }

方式二

var MyNamespace = MyNamespace || {};

方式三

if( typeof MyNamespace == 'undefined'){ var MyNamespace = {}; }

JavaScript 部件的七部测试法

  1. 当JavaScript 关闭时会发生什么?
  2. 怎样改变外观、感受和内容?
  3. 最终产品的可用性和语义性如何?
  4. 是否明白在发生神马?(当出错时候能否快速定位问题?)
  5. 与其他语言的交互性如何?
  6. 维护人员是否专注?
  7. 是否有测试方案,升级或扩展是否简单易行?

数据类型相关概念

typeof null > "object" //Null 是一个对象   null instanceof Object > false //Null 不是对象的实例   typeof NaN > "number" //NaN 是一个数字   NaN === NaN > false //NaN 不等于任何值   new Array() == false > true //空数组 == false

JavaScript 七宗罪

根源:特定于浏览器的代码

  • 与其他脚本兼容不好
  • 相信取代测试(默认所有东西都是正确的)
  • 使用错误的技术进行设计(不赞同)
  • 依赖于 JavaScript 和特定的输入设备
  • 维护麻烦
  • 未进行文档整理的代码
  • 为机器而非人优化

jQuery 的几个易混淆概念

parent()、parents()、closest()

parent() 用于匹配元素的直接父元素。

parents() 类似于parent(),返回的是多个父元素。

closest() 类似于parents(),但只返回一个父元素或祖先元素,且为最近的元素。

position() 与 offset()

position() 计算相对于偏移父元素(即含有position:relative 的元素的最近父元素,如果没有,相对于文档)

offset() 则总是计算相对于文档的位置。

css('width')与css('height')、width()与height()

前者返回字符型维度,以px 为单位;后者返回整数型维度。

click()、bind()、live()、delegate()

bind()可以一次绑定多个事件,并可以传递回调函数。

var message = "right"; $("a").bind("click contextmenu", { msg: message }, function(e) { alert(e.data.msg); return false; });

live()类似bind(),区别在于可将事件绑定到当前和将来的元素(通过DOM 脚本生成的元素)

delegate() 在jQuery 1.4.2 中出现的未来弥补live()无法直接用于链式结构。

//无效的 $("#test").children("a").live("mouseover", function() { alert("hello"); });   // $("#test").delegate("a", "mouseover", function() { alert("hello"); });

not()、is()、:not()区别

not() 返回不匹配的元素、is()只会返回布尔值、:not()可用于选择器字符串中。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress删除头部wp_head()多余代码

    如果你有查看过你的WordPress博客的“查看源代码”的话,你会发现头部的html代码非常多,而且是密密麻麻,有些像meta name="generator"...

    Jeff
  • WordPress文章版权保护:复制文字自动添加版权信息

    这年头,个人博客抄袭成风;某些博主非常不厚道,常常是原封不动地拿过去,不署名来源是常事,还有更可恨的是说成自己的。本站DeveWork.com 为了不必要的纠纷...

    Jeff
  • WordPress免插件仅代码实现文章归档模板 II

    不多说了,本站目前使用的效果,可以到我的存档页一览,该方法来自zww,感谢原作者,在这之前,建议你: 1、你的博客存档页面地址后面的应该为/articles,而...

    Jeff
  • 三步搞定maven中的mybatis Generator代码生成器

    这边需要修改两个地方: (1)数据库连接的信息:驱动类、连接地址、用户名、密码 (2)指定数据库表

    全栈程序员站长
  • Angular2关于定义一些全局常量,以及在页面中引用

    用户1437675
  • 使用mybatis-generator自动生成工具

    Swingz
  • hive中数据类型的转化CAST

    在《Hive内置数据类型》文章中,我们提到了Hive内置数据类型由基本数据类型和复杂数据类型组成。今天的话题是Hive数据类型之间的转换。同Java语言一样,H...

    学到老
  • 电商网站开发记录(二) mybatis三剑客的引入

    ,在resources下新建generatorConfig.xml,配置文件详细信息如下

    Dar_Alpha
  • hive中数据类型的转化CAST

    在《Hive内置数据类型》文章中,我们提到了Hive内置数据类型由基本数据类型和复杂数据类型组成。今天的话题是Hive数据类型之间的转换。同Java语言一样,H...

    学到老
  • RabbitMq-PhpAmqpLib笔记(注:只做笔记-简易手册使用,不做教程)

    use PhpAmqpLib\Connection\AMQPStreamConnection;

    93年的老男孩

扫码关注云+社区

领取腾讯云代金券