All posts by dotte

Introduction to Indexes

SQL Server

Good indexes are the key to good performance in SQL Server and the key to creating good indexes is to understand what indexes are and how SQL Server uses them to evaluate queries.

In this first part of a three part series, I’m going to look at the very basics of what indexes are, what types exist in SQL and how they’re used.

  What is an index?

An index is a structure within SQL that is used to quickly locate specific rows within a table. It can be useful to imaging an index at the back of a textbook when thinking about SQL indexes. They both serve the same purpose – to find specific information quickly.

  General Structure

An index is defined on one or more columns, called key columns. The key columns (also referred to as the index key) can be likened to the terms listed in a book index. They are the values that the index will be used to search for. As with the index found at the back of a text book (see figure 1), the index is sorted by the key columns.

Index sample

Figure 1: Book index.             Image copyright Simple Talk publishing.

If an index is created with more than one key column, it is known as a composite index.

The general structure of an index is that of a balanced tree (b-tree). The index will have a single root page, zero or more intermediate levels and then a leaf level. A page is an 8 kilobyte chunk of the data file, with a header and footer and is identified by a combination of File ID and Page number.

Index Structure

            Figure 2: Index Structure

Note: Commonly the root page is shown at the top of the tree diagram and the leaf pages at the bottom. Think of it as an inverted tree.

In the leaf level, there’s one entry for each row in the index1. The entries in the index are ordered logically2 in the order of the index key.

The non-leaf levels of the index contain one row per page of the level below, referencing the lowest index key value on each page.  If all of those rows fit onto a single page, then that page is considered the root and the index is only two levels deep. If all of those rows will not fit on a single page, then one (or more) intermediate levels are added to the index.

The number of levels in an index is referred to as the depth of the index. This is an important consideration for evaluating the efficiency of the index. The index illustrated in figure 2 has a depth of 3.

(1)   With the exception of SQL 2008’s filtered indexes, an index will have the same number of rows at the leaf level as the table.

(2)   I’m using the phrase ‘logically ordered’ because the index does not necessarily define the physical storage of the rows. The rows are stored in a way that SQL can retrieve them ordered.

  Clustered and nonclustered

There are two main types of indexes in SQL Server, the clustered index and the nonclustered index

Clustered indexes define the logical order of the table. The leaf level of the clustered index has the actual data pages of the table. Because of this there can only be one clustered index per table. A table that does not have a clustered index is referred to as a heap.

Nonclustered indexes are separate from the table. The leaf level of a nonclustered index has a pointer as part of each index row. That pointer is either the clustered index key in the cases where the base table has a clustered index or the RID (Row Identifier) in the cases where the table is a heap. The RID is an 8-byte structure comprised of File ID, Page Number and Slot Index and will uniquely identify a row in the underlying heap. Either way, the each row of a nonclustered index has a reference to the complete data row.

  Index Limits

There are a number of built-in limitations on indexes

Key size

The size of an index key is limited to a maximum of 900 bytes and a maximum of 16 columns. This is definitely a limit, not a goal, as the larger the index key gets, the more pages in the index and the deeper the index tree. As the number of pages and the depth of the tree increases so the index becomes less efficient to use. Larger indexes also use more storage space and result in less efficient use of SQL’s data cache.

Number of indexes

In SQL 2005 and earlier there was a limitation of 250 indexes per table, one clustered and 249 non-clustered. In SQL 2008, with the addition of filtered indexes, that limitation was increased to 1000, one clustered and 999 non-clustered indexes.

Both of these limits are very high and there are few circumstances where a well-designed system should approach that limit.

The reason for this is twofold.

·        As the number of indexes increases so the total size occupied by the table (with all of its indexes) increases. Sure, hard drives are cheap and storage is abundant but increasing the size of a database has other effects, Maintenance operations (backups, restores, consistency checks and index rebuilds) all take longer as the size of a database increases.

·        Indexes have to be kept up to date as data changes and the more indexes there are on a table, the more places the data has to be changed. If there are 10 nonclustered indexes on a table, an insert must be done in 11 places (the table and each of those nonclustered indexes). On databases that are mostly read-only (decision support, data warehouses) that may be acceptable. On databases that have frequent inserts, updates and deletes (OLTP systems), the overhead impose by multiple indexes may not be acceptable

  How SQL uses indexes

If a table does not have index, the only way to find all occurrences of a value within a table is to read the entire table. If a table has an index, it speeds up the locating of values within that index in two ways.

1.      The index is sorted in the order of the key columns. This means that once all the matching values have been found, the remaining portion of the table can be ignored. This is the same as a telephone directory, where once all entries with a particular surname have been found, the rest of the book can be ignored as no further matches are possible

2.      The tree structure of the index allows a divide-and-conquer approach to locating rows, where large portions of the table can be quickly excluded from the search. This is illustrated in Figure 3

There are four basic operations that SQL can do on an index. It can scan the index, it can seek on the index, it can do lookups to the index and it can update the index

  Scans

An index scan is a complete read of all of the leaf pages in the index. When an index scan is done on the clustered index, it’s a table scan in all but name.

When an index scan is done by the query processor, it is always a full read of all of the leaf pages in the index, regardless of whether all of the rows are returned. It is never a partial scan.

A scan does not only involve reading the leaf levels of the index, the higher level pages are also read as part of the index scan.

  Seeks

An index seek is an operation where SQL uses the b-tree structure to locate either a specific value or the beginning of a range of value. For an index seek to be possible, there must be a SARGable3 predicate specified in the query and a matching (or partially matching) index. A matching index is one where the query predicate used a left-based subset of the index columns. This will be examined in much greater detail in a part 3 of this series.

The seek operation is evaluated starting at the root page. Using the rows in the root page, the query processor will locate which page in the next lower level of the index contains the 1st row that is being searched for. It will then read that page. If that is the leaf level of the index, the seek ends there. If it is not the leaf then the query processor again identifies which page in the next lower level contains the specified value. This process continues until the leaf level is reached.

Once the query processor has located the leaf page containing either the specified key value or the beginning of the specified range of key values then it reads along the leaf pages until all rows that match the predicate have been returned. Figure 2 shows how a seek would be done on an index when searching for the value 4.

Index Seek

If the index contains all the columns that the query needs, then the index is said to be covering for that query. If the index does not contain all the columns then SQL will do a lookup to the base table to fetch the other columns in order to process the query.

(3)   SARGable is a made-up word, constructed from the phrase Search ARGument. It refers to a predicate that is of a form that SQL can use for an index seek. For more details see: http://www.sql-server-performance.com/tips/t_sql_where_p2.aspx

  Lookups

Lookups occur when SQL uses an index to locate rows affected by a query but that index does not contain all the columns required to satisfy the query, that is the index is not covering for that query. To fetch the remaining columns, SQL does a lookup to either the clustered index or heap.

A lookup to a clustered index is essentially a single row clustered index seek and it is always a single row seek. So if a lookup is needed for 500 rows, that involves 500 individual clustered index seeks.

  Updates

Anytime that a row is changed, those changes must be made not only in the base table (clustered index or heap) but also in any index that contains the columns that were affected by the change.  This applies to insert, update and delete operations.

  Considerations for creating indexes

I’ll be going into more detail on considerations for indexes in the next two parts, but in general:

  •     Clustered index should be narrow, because the clustering key is part of all nonclustered indexes.
  •     Composite nonclustered indexes are generally more useful than single column indexes, unless all queries against the table filter on one column at a time.
  •     Indexes should be no wider than they have to be. Too many columns wastes space and increases the amount of places that data must be changed when an insert/update/delete occurs.
  •     If an index is unique, specify that it is unique. The optimiser can sometimes use that information to generate more optimal execution plans.
  •     Be careful of creating lots of indexes on frequently modified tables as it can slow down data modifications.

In part 2 of this series I’ll be looking in more detail into clustered indexes. What they are, how they differ from nonclustered indexes and what the considerations are for creating a clustered index.

  The Series

Be sure you read all parts of this series:

from:http://www.sqlservercentral.com/articles/Indexing/68439/

Mary Meeker 2014互联网趋势报告 [收藏版]

Web

（更新完整演讲视频）Mary Meeker 2014互联网趋势报告 [收藏版]

KPCB 的互联网女皇 Mary Meeker 所发布的 2014 版互联网趋势报告长达 164 页，通篇包含了来源众多的翔实数据以及 Meeker 的个人展望。本文完全编译自 Meeker 的 2014 版趋势报告。为了阅读方便，本文做出了顺序上的适当调整（比如未摘录涉及美国移民数据的 Immigration Update ）与内容上的选择（还有极少来自其它来源的信息），如果你希望读到未经处理的原文，可以在此处下载 PDF 文件或在其官网上观看。

（2014 5.31 08:20）更新了Mary Meeker 在Code Conference 上解读该趋势报告的完整演讲视频，强烈推荐一看！

视频地址在此

互联网关键趋势

移动端的巨大势能将为增速逐渐下降的互联网提供动力，而在线视频则将是推动移动数据增长的动力来源。2013 年全球互联网用户数量增长了 9%，作为对比，2012 的数字为 11%。未来这种增长还将继续减速。

移动端网络流量占全球互联网流量的比例以每年 1.5 倍的速度增长，这一增速没有延缓的趋势。

1）数据消耗以及用户增长的主要趋势包括：

  •   从整体上来看，互联网的年同比增长或衰减率小于 10%。那些盈利较为困难的发展中市场有着最高的互联网增长率。
  •   智能手机用户群体以 20% 的速率增长（但增速在放缓），主要来自于中国、印度和巴西等新兴地区
  •   平板电脑仍然处于发展早期，增速高达 52%
  • 移动数据流量的规模正以 81% 的惊人速度暴涨，视频是强劲动力的来源

2）智能手机

从大约 2010 年第二季度开始，全球范围智能手机用户数量在整体手机用户数量中的比重开始稳步增长，截止 2013 年第四季度，这个数字已经达到 30%。全球手机用户数量为 52 亿。智能手机的增长空间依旧可观，业界普遍认为新兴市场的中低端机型是主要增长点。

2013 年第四季度全球智能手机发货量为 3.15 亿，作为对比，2009 年第四季度的数字为 0.54 亿，增幅约为 480%。

3）平板电脑

平板电脑 2013 年发货量增长达到了 52%，结合包括台式及笔记本电脑在内的 PC 增长曲线来看，平板电脑的增长速率是空前的。即使如此，这种增长势头还将继续，2013 年平板电脑用户数量（4.39 亿）仅为笔记本电脑（7.89 亿）的 56%，智能手机（16 亿）的 28% 或电视（55亿）的 8%。这意外的平板市场还蕴藏着巨大的增长空间。

4）持续增长中的移动互联网

终端数量的增长自然而然地导致移动网络流量的持续上升，2014 年 5 月，全球移动互联网流量已经占据互联网整体流量的 25%。去年同期的数据为 14%。非洲地区的移动／互联网比例最高，为 38％，而南美地区则是这一数字增长最快的市场。

4）移动 OS，美国制造

纵观全球移动操作市场份额，美国制造的 iOS、Windows Phone 以及安卓几乎垄断了整个市场。从 2005 至 2013 的八年间，这三个操作系统的市场份额从 5% 增长至 97%，安卓系统的增长尤为惊人。

5）移动平台的潜力

根据摩根斯坦利的报告，每一个计算平台的规模都是上一代的 10 倍。包括智能手机、平板电脑、家庭娱乐系统在内的新型设备将在移动互联网时代网络达到 100 亿的惊人规模。这不仅要归功于全新种类的设备，深层次多方面的软硬件整合也起到了重要作用。

* *

诱人的广告

在线广告业务依旧强势，从 09 年开始便以明显的年同比增长，去年增长了 16%。移动端广告业务更是如此，移动广告占整体的比例在过去一年里提高了近一半，达到 11% 的水平。

通过数据分析 Google、Facebook 以及 Twitter 的移动广告盈利情况，对比三者今年第一季度平均每用户产生收入（ARPU）的水平可以发现，Google 以 45 美元遥遥领先，Facebook 则是 7.24 美元，Twitter 3.55 美元，后两者正以惊人的速度增长。

用户对平台的依赖程度不断加深也是移动平台持续爆发的原因之一。2013 年美国用户网上观看多媒体的时间增长了 25%，花在广告上的时间也有 22% 的增幅。而在移动端观看多媒体的时长则增长了 20%，移动广告 4%，预计光是美国市场的移动端广告业务潜在价值就达到 300 亿美元以上。

移动广告业务炙手可热，各大公司都推出及改良了各自的广告网络，但数据却显示，应用程序在整个移动端盈利模式中所占的份额仍远高于广告业务，2013 年两者共同价值约 380 亿美元，移动应用占据了 68%。

* *

网络安全问题需要引起注意

活跃的攻击组织的数量持续上升，95% 网络系统在某些方面存在漏洞，而移动平台的崛起也将导致更多的直接攻击。

网络公司甚至是传统零售连锁的客户数据遭受窃取的新闻在过去一年里不断出现，中国有携程信用卡泄密，小米被拖库等例子，美国则有 Target 信用卡泄露和 eBay 遭受攻击事件。甚至连物联网的安全问题也开始进入人们视线。

* *

科技股，教育与医疗

1）科技公司

Facebook 190 亿美元收购 WhatsApp，Snapchat 拒绝各巨头天价收购邀请，以及中国科技公司纷纷赴美上市的新闻让很多人开始产生疑问：这些科技公司的价值明显被高估了吧？

从账面看，也许是的，但结合历史记录的话…

2013 年全球科技股 IPO 的数额（80 亿美元）只有 1999 年峰值（310 亿美元）的 17%，IPO 数量（41 起）也只有同年峰值（310 起）的 13%。

2013 年美国科技公司收到的风投数量与金额也难以与 2000 年高峰相比。

科技公司占标普 500 指数价值份额也从 2000 年的 35% 下降到如今的 19%。

2）教育市场（美国）也将迎来可能的爆发，原因如下：

  •   大部分人认同教育的重要性，十个人中有八人认为接受教育对他们具有极其重要的意义
  •   互联网让更高效更便宜的个性化教学成为可能
  •   与教育有关的创业成本开始下降，而传播渠道又开始扩张

更多与教育有关的数据：2500 万人通过 Duolingo 学习新语言（学习乐趣增加），1200 万师生家长通过 Rmind 101 发送了 5 亿多条信息（沟通变方便），3500 万师生家长通过 ClassDojo 来帮助学生建立行为规范（反馈变得及时），另外还有 Coursera 的 700 万在线学生，iTunues U Open University 的 6500 万次课程下载等等。

3）资源浪费、雇主负担加重及不健康的生活习惯引起的健康问题开始增加的状况，加上科技发展的客观条件，使得美国健康医疗市场即将引来重大改变。

对科技公司来说，这是一件好事，互联网、可穿戴以及量化自我等软硬件公司都可以从这次改变中获益。另一方面，来自政府的帮助也会起到推波助澜的作用。

* *

继续重新想像…

1）即时通信应用

全球 OTT 通信服务在 5 年时间内收获超过 10 亿用户。

如果把每名用户想像成一个点，两者之间的关系想像成一条线的话，那么以 Facebook 为代表的传统社交网络会是一张更广泛而脆弱的网，而微信与 WhatsApp 等应用所编织的则是更小更坚固的网络。后者的用户之间的交流更加频繁与私人，两点之间的链接也就更加牢固。

一图胜千言。图片及视频分享服务正在迅速成长为取代传统文字信息的新交流形式，与移动终端的普及相结合，Pinterest、Instagram 和 Snapchat 等服务的增长更是大幅度推动了网络流量的增长。

2）应用程序

以 Facebook 为代表，“一个万能应用” 的策略开始让位于 “多个各司其职的移动应用” 策略。如今，Facebook 旗下已经拥有至少六款负责不同功能的移动程序：图片分享 Instagram，即时通信 Facebook Messenger 与 WhatsApp （马扎认为这两个的应用场景不同）以及新闻阅读 Paper 等。

这种 “解压缩” 还在继续，最新的例子是签到鼻祖 Foursquare 将其招牌签到功能剥离出来成立了专司签到及社交的移动程序 Swarm。TechCrunch 的 Matthew Panzarino 认为未来的应用程序将是严格按照其功能而生的，用户启动它们的同时就已经明确知道自己需要的是什么功能。在有用时这些细分应用挺身而出，否则就应该隐身做好备胎。另外，越来越多的感应器的陪伴也使得这些程序在后台实时感知着不同场景，以更人性化的方式预估用户行为并做出针对性反应。

3）内容和分发渠道

社交网络已经成了内容传播的高效渠道，Shareaholic 的最新数据显示，Facebook、Pinterest 和 Twitter 导引的流量份额分别达到了 21%，7% 和 1%。这些内容在 Twitter 上平均只需要 6.5 小时就能完成一半的导引流量，而在 Facebook 上则需要 9 个小时。

利用社交网络发布新闻已经成为许多传统及新兴内容发布商的首选，BuzzFeed 与 BBC 分别在Facebook 与 Twitter 上拔得头筹。

4）日常活动

吃穿住行娱乐，我们的日常生活受到的来互联网的影响也愈发明显。

在美国，已经有超过 47％ 的在线交易免收运费。当地当日送达将成为下一个爆发点，Amazon 与 Google 等巨头早已开始在一些城市进行试验。

音乐流媒体增长迅速，2013 年美国市场增幅达到了 32%，以 Spotify 为首的在线音乐服务开始扩张。同时，数字音乐的销售也迎来了 -6% 的首次年同比下降，美国市场的全年销量为 13 亿首。

5）数字钱币

500 万个比特币钱包证明了数字钱币仍有很大用户基础

6）垂直产业

内容＋社区＋商业模式＝互联网铁三角

连接房主，设计师和施工方的 Houzz 所打造的铁三角：图片＋专业人士与消费者组成的社区＋解决方案等产品

* *

所有重新想像的核心：移动设备与众多传感器带来的数据井喷

移动终端在数量和精密程度上的进步，与移动网络的飞速发展，使我们能够收集到空前数量的用户数据。即时分享和沟通使得探索用户行为模式变得可能，但涉及到隐私的问题也开始变得尖锐。同理，通过分析海量数据，让我们得以解决过去不曾有可能解决的难题，但个人利益如何得到保障也是该被重视的问题。

1）大数据趋势：

可上传／可共享／可寻迹的实时数据快速增加。在几个主流平台上，人们每天上传分享超过 18 亿张照片，更多新服务的崛起使这个数字继续增长。

可上传／可共享／不可寻迹的数据

“爆炸中” 的信息总量，2016 年将达到 13 ZB

成本下降为各式感应器在移动设备中的大量采用提供了条件，几年前被 iPhone 内置罗盘惊艳到的消费者现在则开始尝试用手机测心率了。

去年全球数码设备中所使用的 MEMS 传感器数量达到了 80 亿个，增幅 32％，其中手机占据了绝大多数，其次则是平板电脑。

2）计算成本的下降与 “云” 的兴起

技术发展，使计算处理成本、存储成本、带宽成本以及移动手机等设备的制造成本飞速下降。基础设施的完善也使得云计算开始变得唾手可得。

3）新交互界面有利于挖掘数据

Mary Meeker 认为新设备加新交互形式将让那些原本与我们生活息息相关的事物成为有巨大潜力的商业机遇，这其中的根本原因在于数据的挖掘与利用变得简单直接。

人们吃穿住行的模式都难以避免的被重塑。

4）数据挖掘与分析的重要性

据 IDC 统计，通用数据中大约有 34% 的信息具备研究价值，它们来源于社交媒体、图像音频以及数据处理等各式源头。只有 7% 的数据被做了标记，很大一部分来自目前碎片化严重的物联网，这类信息具备极高的分析价值。而在所有通用数据中，只有 1% 被分析过。

数据获取固然重要，但在缺乏分析工具的情况下数据将变得毫无意义。一些依靠解读数据提供解决方案的新型服务开始出现。大数据解决大问题的趋势开始出现。

等待着大展身手的多屏分化和在线视频

如Netflix 创始人和CEO Reed Hastings 所言，电视的未来有四个趋势。

1）屏幕分化

2013 移动设备（智能手机＋平板电脑）出货量已经是电视与 PC 总和的 4～5 倍，这一切只花了十年时间。随着新兴市场移动设备的渗透率不断升高，这一趋势还将继续下去。

智能手机是大部分地区消费者最常用的电子媒介，其次则是电视或者 PC。越来越多的用户会在同一时间使用一种以上设备，比如在看电视时使用智能手机或者平板电脑查看与节目内容有关的信息或与朋友进行互动，这一人群的比例已经在过去两年内翻了三番，达到了 84%。

这不仅意味着屏幕数量的增加，用户的参与度也被提高到了全新的高度。根据统计，在 2012 年奥运会期间，用户在电视、PC、手机以及平板四种屏幕上所花的时间要比单一花在电视上的时间多出一倍。

现在他们可以通过更少的时间获取更多的内容。

2）传统遥控方式的消失

个性化搜索引擎将取代传统电视遥控器，智能电视或者智能电视解决方案将像智能手机颠覆功能手机一样取代传统电视服务。

电视盒子作为一种智能电视解决方案已经收获了数千万用户，新晋者如 Chromecast（多屏播放）和 Fire TV（语音搜索）制定了新的行业标准。

智能电视出货量占电视机整体出货量的份额正在不断攀升，2013 年的数字为 39％，但使用率却处于 10% 以下。

3）频道被应用所取代

电视频道开始变成一个个点播程序，传统电视节目单演化成应用内搜索功能。尽管如此，大部分电视点播应用却依旧需要用户先成为传统电视网络的付费用户，也就说点播应用只是方便用户观看电视频道的工具而尚未成为替代品。

但是以 YouTube 为代表的新内容传播渠道也在高速发展，比起传统渠道，这些网络的能将内容传播到更广的人群。

新的媒介造就了新的内容制作群体，他们可以是大型工作室，更可以是和你我一样的普通个体。消费者对长视频保持热度的同时也越来越欢迎高质量的短视频。YouTube 排名前十的视频的平均长度为 7 分钟。

不仅内容制作者可以从中收益，在线广告的精准度与有效性也得到了大幅提高。

消费者喜欢制作精良的广告短片。

作为传播渠道的 YouTube 也可以通过用户行为数据分析反过来为后者提供更好的用户体验，为厂商提供更好的解决方案。

对于传统电视来说，观看节目的是观众，而在互联网电视的世界，观看者变成了粉丝。粉丝具有更高的参与度和忠诚度，同时其行为模式也更加容易预测。节目结束时，观众会离场，而粉丝会进行评论、收藏、分享。

受众的共性催生新的媒体内容，比如游戏直播。

社交属性带来广告效果的明显提升。在有 Twitter 参与的情况下，电视广告的给品牌的好感度与消费者购买意图的影响程度均能得到提升。

消费者开始根据个人喜好选择内容，以 Netflix 为代表的服务为不同用户设立不同的档案。年轻用户喜爱在网上观看视频，千禧年一代在花 34% 的时间观看在线视频。

4）互联网电视取代传统电视

互联网电视在使用场景、观看内容与播放设备等方面提供个性化选择，这与用户需求相符。

移动视频消耗量占在线视频总量的比例持续上升，2013 年已达 22%。

* *

中国的崛起

中国拥有 5 亿移动互联网用户，占全体互联网用户的 80%，这是全球最高的比例。

根据月独立访问量，2013 年 1 月，全球十大互联网服务中有 9 个来自美国，腾讯是唯一一个非美国公司。而 2014 年 3 月的数据显示，全球十大互联网服务中来自中国的公司已经增加到 4 家，按照排名，它们分别是阿里巴巴，百度，腾讯和搜狐。其余 6 家均来自美国。

中国公司引领移商务创新。微信在服务集成以及个人通讯、客户关系管理以及交易支付等环节的融合方面所做的创新被当作了例子。

Google、Facebook、腾讯和阿里巴巴四家科技公司在 2012-2014 期间共在并购及投资方面注入了 500 亿美元。Facebook 的写给 WhatsApp 的 190 亿美元支票无人能敌。

from:http://www.36kr.com/p/212449.html

jQuery – .bind(), .live(), .delegate(), .on() ( and also .unbind(), .die(), .undelegate(), .off() )

JS,

jQuery - .bind(), .live(), .delegate(), .on(), .off(), .undelegate(), die(), .unbind()

All these functions are used to attach an event handler function to the selected elements or selectors. In this article I will take you through all the four set of functions to get an idea of what it is.

To start with, let me list down all the functions with short description and release details.

 

Method Short Description Added In Deprecated In Removed In
.bind() Attach a handler to an event for the elements. 1.0
.unbind()
Remove a previously-attached event handler from the elements.
 1.0
.live() Attach an event handler for all elements which match the current selector, now and in the future. 1.3 1.7 1.9
.die() Remove event handlers previously attached using .live() from the elements. 1.3 1.7 1.9
.delegate() Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements. 1.4.2
.undelegate()
Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
 1.4.2
.on()
Attach an event handler function for one or more events to the selected elements.
 1.7
.off() Remove an event handler. 1.7

Which function to use? confused Confused, Which one to use, jQuery .bind(), .live(), .delegate(), .on() - Shemeer let’s go through the below details then you will be in a good position to decide which one to use and when.

.bind() and .unbind()

The .bind() method is used to register an events to existing html elements and .unbind() method is used to remove events, that are registered by .bind() method.

Syntax:-

 

Method Syntax Available from version
.bind() .bind( eventType [, eventData ], handler(eventObject) ) 1.0
.bind( eventType [, eventData ], preventBubble )
 1.4.3
.bind( events ) 1.4
Parameter details are given below,

  • eventType:- A string containing one or more DOM event types, such as “click” or “submit,” or custom event names.
  • eventData:- An object containing data that will be passed to the event handler.
  • handler(eventObject):- A function to execute each time the event is triggered.
  • preventBubble:- Setting the third argument to false will attach a function that prevents the default action from occurring and stops the event from bubbling. The default is true.
  • events:- An object containing one or more DOM event types and functions to execute for them.
.unbind() .unbind( [eventType ] [, handler(eventObject) ] ) 1.0
.unbind( eventType, false ) 1.4.3
.unbind( event )
 1.4
Parameter details are given below,

  • eventType:- A string containing a JavaScript event type, such as click or submit.
  • handler(eventObject): The function that is to be no longer executed.
  • false: Unbinds the corresponding ‘return false’ function that was bound using .bind( eventType, false ).
  • event: A JavaScript event object as passed to an event handler.

Sample : –

Collapse | Copy Code
 $( document ).ready(function() {
  $( "#foo" ).bind( "click", function( event ) {
    alert( "The mouse cursor is at (" +
      event.pageX + ", " + event.pageY +
      ")" );
  });
});

The above code will cause a click on the element with ID foo to report the page coordinates of the mouse cursor at the time of the click.

Read more from http://api.jquery.com/bind/, http://api.jquery.com/unbind/

.live() and .die()

.live() method is used to add event handler to elements that are currently available in the page or dynamically added to the page whereas .die() is used to remove any handler that has been attached with .live().

Note: .live() and .die() are removed from jQuery version 1.9.

Method Syntax Available from version
.live() .live( events, handler(eventObject) ) 1.3
.live( events, data, handler(eventObject) )
 1.4
.live( events ) 1.4.3
Parameter details are given below,

  • events:- A string containing a JavaScript event type, such as “click” or “keydown.” As of jQuery 1.4 the string can contain multiple, space-separated event types or custom event names. If events is the only parameter then events will be A plain object of one or more JavaScript event types and functions to execute for them.
  • data:- An object containing data that will be passed to the event handler.
  • handler(eventObject):- A function to execute each time the event is triggered.
.die() .die( eventType [, handler ] ) 1.3
.die() 1.4.1
.die( events )
 1.4.3
Parameter details are given below,

  • eventType:- A string containing a JavaScript event type, such as click or keydown.
  • events:- A plain object of one or more event types, such as click or keydown and their corresponding functions that are no longer to be executed.

Sample:-

Collapse | Copy Code
<a class="link">Link Static</a>
<button id="addmore" type="button">Add more</button> 

 $(document).ready(function() {
   $('#addmore').click(function() {
      $('body').append(' <a class="link">Link Dynamic</a>');
        return false; 
  }); 
   $("a.link").bind('click', function() {
      alert('I am clicked');
   });
  });

As per the above code, when ever we click on the hyper-link (<a>) it will show an alert message.. We can add hyper-links dynamically using the button. but dynamically added links will not have click event attached. To make it work for both static control and dynamic we need to rewrite the code using live() as below,

Collapse | Copy Code
<a class="link">Link Static</a>
<button id="addmore" type="button">Add more</button> 

 $(document).ready(function() {
   $('#addmore').click(function() {
      $('body').append(' <a class="link">Link Dynamic</a>');
        return false; 
  }); 
   $("a.link").live('click', function() {
      alert('I am clicked');
   });
  });

Now all the static and dynamically created links will have the alert method event attached.

Read more from http://api.jquery.com/live/, http://api.jquery.com/die/

.delegate() and .undelegate()

.delegate() method behaves in a similar fashion to the .live() method, but the major difference is that It attaches the event handler to the context , rather than the document. The .undelegate() method is a way of removing event handlers that have been bound using .delegate().

Method Syntax Available from version
.delegate() .delegate( selector, eventType, handler(eventObject) ) 1.4.2
.delegate( selector, eventType, eventData, handler(eventObject) )
 1.4.2
.delegate( selector, events ) 1.4.3
Parameter details are given below,

  • selector:- A selector to filter the elements that trigger the event.
  • eventType:- A string containing one or more space-separated JavaScript event types, such as “click” or “keydown,” or custom event names
  • eventData:- An object containing data that will be passed to the event handler.
  • handler(eventObject):- A function to execute each time the event is triggered.
  • events:- A plain object of one or more event types and functions to execute for them.
.undelegate() .undelegate() 1.4.2
.undelegate( selector, eventType ) 1.4.2
.undelegate( selector, eventType, handler(eventObject) )
 1.4.2
.undelegate( selector, events ) 1.4.3
.undelegate( namespace ) 1.6
Parameter details are given below,

  • selector:- A selector which will be used to filter the event results.
  • eventType:- A string containing a JavaScript event type, such as “click” or “keydown”.
  • handler(eventObject):- A function to execute at the time the event is triggered.
  • events:- An object of one or more event types and previously bound functions to unbind from them.
  • namespace:- A string containing a namespace to unbind all events from.

Sample :-

Collapse | Copy Code
$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});

Read more from http://api.jquery.com/delegate/, http://api.jquery.com/undelegate/

.on() and .off()

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. The .on() method provides all functionality required for attaching event handlers. The .off() method removes event handlers that were attached with .on().

Method Syntax Available from version
.on() .delegate( selector, eventType, handler(eventObject) ) 1.4.2
.delegate( selector, eventType, eventData, handler(eventObject) )
 1.4.2
.delegate( selector, events ) 1.4.3
Parameter details are given below,

  • selector:- A selector to filter the elements that trigger the event.
  • eventType:- A string containing one or more space-separated JavaScript event types, such as “click” or “keydown,” or custom event names
  • eventData:- An object containing data that will be passed to the event handler.
  • handler(eventObject):- A function to execute each time the event is triggered.
  • events:- A plain object of one or more event types and functions to execute for them.
.off() .off( events [, selector ] [, handler(eventObject) ] ) 1.7
.off( events [, selector ] ) 1.7
Parameter details are given below,

  • selector:- A selector which should match the one originally passed to .on() when attaching event handlers.
  • events:- An object where the string keys represent one or more space-separated event types and optional namespaces, and the values represent handler functions previously attached for the event(s).

Sample:-

Collapse | Copy Code
$("p").on("click",function(){
  alert("The paragraph was clicked.");
});

The above code will be attaching the specified event to all (current and future) <p>.

Below code block is taken from jQuery 1.7.1.

You can see that for all the above listed methods the .on() method is being “overloaded” with different signatures, which in turn changes how the event binding is wired-up. The .on() method bring a lot of consistency to the API and hopefully makes things slightly less confusing.

Collapse | Copy Code
bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
    return this.off( types, null, fn );
},

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
die: function( types, fn ) {
    jQuery( this.context ).off( types, this.selector || "**", fn );
    return this;
},

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
    return arguments.length == 1 ? 
        this.off( selector, "**" ) : 
        this.off( types, selector, fn );
},

// ... more code ...

Read more from http://api.jquery.com/on/, http://api.jquery.com/off/

Comparison

The .bind() method registers the type of event and an event handler directly to the DOM element. The .bind() doesn’t work for elements added dynamically that matches the same selector. This method is pretty easy and quick to wire-up event handlers. The shorthand methods like .click(), .hover(), etc make it even easier to wire-up event handlers. There is a performance issue while working with large selection as the method attaches the same event handler to every matched element in the selection.The attachment is done upfront which can have performance issues on page load.

The basic difference between .bind() and .live() is bind will not attach the event handler to those elements which are added/appended after DOM is loaded and there is only one event handler registered instead of the numerous event handlers that could have been registered with the .bind() method. When using .live() events always delegate all the way up to the document. This can affect performance if your DOM tree is deep. Chaining is not properly supported using .live() method. Using event.stopPropagation() is no longer helpful because the event has already delegated all the way up to the document. .live() method is deprecated as of jQuery 1.7 and removed from jQuery 1.9.

The .delegate() method is very powerful, The difference between .live() and .delegate() is, live function can’t be used in chaining. live function needs to be used directly on a selector/element. Also .delegate() works on dynamically added elements to the DOM where the selectors match. Chaining is supported correctly in .delegate().

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers. Brings uniformity to the various event binding methods. but as the the way we call .on() method the behaviour also changes.

Note: If you are using jQuery 1.7+ then its advised to use .on() for attaching events to elements or selectors.

Conclusion

All the these jQuery functions are used to attach events to selectors or elements. Some methods performs better in some situations. If you are using jQuery 1.7+ then its advised to use .on() over all the event binding methods.

References

Summary

In this article I have given detailed explanation of jQuery methods that’s used for attaching/removing event handlers. I hope you have enjoyed this article and got some value addition to your knowledge.

from: http://www.codeproject.com/Articles/778374/JQUERY-JSON-and-Angular-Interview-questions

JQUERY, JSON and Angular Interview questions

Interview, JS,

What is Jquery ?

So will jquery replace javascript ?

So how do we use these reusable jquery libraries?

What is CDN (Content delivery network)?

For Jquery files which are the popular CDN’s?

How can we reference local Jquery files if CDN fails?

What is the difference between Jquery.js and Jquery.min.js file?

When should we use jquery.js over jquery.min.js ?

What is the use jquery.vsdoc.js ?

How does the basic syntax of Jquery looks like?

What is the “$” sign in Jquery ?

WhenshouldweuseJquery.noConflict()

What are the different ways by which you can select a HTML element in JQuery ?

What is the use of Document.ready in Jquery ?

Can we have two document.ready in a webpage?

What is JSON?

Do all technologies support JSON?

How can you make a JSON call using Jquery ?

How can we post JSON to Server?

How can we post a complete HTML form in JSON format?

How can we convert JSON string in to c# object?

What are single page applications (SPA)?

What is Angular JS ?

What is the need of ng-model, ng-expression and ng-app in Angular?

How is the data binding in Angular?

What is Jquery ?

Jquery is a reusable javascript library which simplifies javascript coding. So rather than writing length javascript code as below.

Collapse | Copy Code
document.getElementById("txt1").value = "hello";

By jquery the above javascript code is now simplified as below.

Collapse | Copy Code
$("#txt1").val("Hello");

If you want to kick start with Jquery start with the below video which is created by www.questpond.com

So will jquery replace javascript ?

No, Jquery is not meant to replace javascript. Jquery is a library while javascript is a language. Jquery sits on the top of javascript to make your development easy.

So how do we use these reusable jquery libraries?

You need to download Jquery.js file from jquery.com and include the same in your web pages. The jquery files are named with version number like “jquery-1.4.1.js” where 1.4.1 is the version of the JS file. So at the top of your web page you need to include the javascript as shown in the below code.

Collapse | Copy Code
<script src="file:///C:/Documents%20and%20Settings/admin/Documents/My%20Web%20Sites/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

What is CDN (Content delivery network)?

In CDN multiple copies of the website is copied on different geographical servers. When users request website content which have CDN enabled depending on their geographical location , content is served from the nearest geographical location server of the user.

So if a user is from India, the Indian CDN server will serve request for Indian users. This leads to faster delivery of data.

For Jquery files which are the popular CDN’s?

There are two popular CDN’s Microsoft and google.

If you want to reference google CDN Jquery files you can use the below script.

Collapse | Copy Code
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

If you want to use Microsoft CDN you can use the below javascript.

Collapse | Copy Code
<script type="text/javascript"
    src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js">
</script>

How can we reference local Jquery files if CDN fails?

Many times it’s possible that Microsoft and google servers can go down for some time. So in those situations you would like your page to reference jquery files from local server.

So to implement a CDN fallback is a two-step process:-

First reference the CDN jquery. In the below code you can see we have reference Microsoft CDN jquery file.

Collapse | Copy Code
http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js "></script>

Now if Microsoft CDN is down then the Jquery value will be “undefined”. So you can see in the below code we are checking if the Jquery is having “undefined” value then do a document write and reference your local Jquery files.

Collapse | Copy Code
if (typeof jQuery == 'undefined')
{
  document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}

Below is the full code for the same.

Collapse | Copy Code
<script type="text/javascript" src="file:///C:/Documents%20and%20Settings/admin/Documents/My%20Web%20Sites/%20http:/ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js%2520"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined')
{
  document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

What is the difference between Jquery.js and Jquery.min.js file?

First thing both the files provide the same jquery functionalities. One is a long version and the other is compressed / minified version. The minified version is compressed to save bandwidth and space by compressing and removing all the white spaces.

Below is the view of Jquery.js.

Below this is view of Jquery.min.js file (compressed and minified).

When should we use jquery.js over jquery.min.js ?

When you are doing development use “jquery.js” file because you would like to debug, see the javascript code etc. Use “Jquery.min.js” for production environment. In production / live environment we would like to consume less bandwidth, we would like to our pages to load faster.

What is the use jquery.vsdoc.js ?

This file you can include if you want to enable intellisense in visual studio for Jquery.

How does the basic syntax of Jquery looks like?

Jquery syntax structure can be broken down in to four parts:-

  • All Jquery commands start with a “$” sign.
  • Followed by the selection of the HTML element. For example below is a simple image where we are selecting a HTML textbox by id “txt1”.
  • Then followed by the DOT (.) separator. This operator will separate the element and the action on the element.
  • Finally what action you want to perform on the HTML element. For instance in the below Jquery code we are setting the text value to “Hello JQuery’.

What is the “$” sign in Jquery ?

The “$” sign is an alias for jquery.

When should we use Jquery.noConflict()?

There are many javascript frameworks like MooTools, Backbone, Sammy, Cappuccino, Knockout etc. Some of these frameworks also use “$” sign so this can lead to conflict with Jquery framework.

So you can use the “noConflict” method and release the jquery “$” sign as shown in the below code.

Collapse | Copy Code
$.noConflict();
jQuery("p").text("I am jquery and I am working&hellip;");

You can also create your own jquery shortcut as shown below.

Collapse | Copy Code
var jq = $.noConflict();
jq("p").text("I am invoked using jquery shortcut&hellip;");

What are the different ways by which you can select a HTML element in JQuery ?

You can select Jquery elements in the following ways:-

Select all

Below is a simple code snippet which selects all paragraph tags and hides them.

Collapse | Copy Code
$("p").hide();

Select by ID

Collapse | Copy Code
$("#Text1").val("Shiv");

Select using Equal method

Select using Find method

Select using Filter method

What is the use of Document.ready in Jquery ?

“Document.Ready” event occurs once the complete HTML DOM is loaded. So the next question is when do we actually need this event?. Consider the below simple code where we are trying to set a text box “text1” with value “Sometext”.

Now at the point when Jquery code tries set the textbox value , at that moment that text box is not available in the HTML DOM. So it throws an exception for the same.

Collapse | Copy Code
<script>
      $("#text1").val("Sometext"); // Throws exception as the textbox is not //accessible at this moment
</script>
</head>
<body>
<input type="text" id="text1" />
</body>

So we would like to execute the Jquery code which sets the textbox value only when all the HTML objects are loaded in DOM. So you can replace the code of setting text box value to something as shown below.

Collapse | Copy Code
<script>
       $(document).ready(function(){
           $("#text1").val("Sometext");
       });
</script>

Here is a nice detail article with a video which explains Jquery Ready event in a more detail manner http://www.dotnetinterviewquestions.in/article_jquery-interview-questions:-when-do-we-need-documentreadyevent-_230.html 

 

Can we have two document.ready in a webpage?

Yes.

How can we attach a method to a HTML element event using Jquery ?

Below is a simple code which attaches a function to click event of a button.

Collapse | Copy Code
$("button").click(function(){
$("p").toggle();
});

Below is one more example where we have attached the a function to a mouse enter event of a paragraph.

Collapse | Copy Code
$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

How can we add a style using Jquery?

$(“li”).filter(“.middle”).addClass(“selected”);

Collapse | Copy Code
<style>
      .selected { color:red; }
</style>

What is JSON?

JSON (JavaScript object notation) helps us to present and exchange data in a self-descriptive, independent and light way. This data can then be easily consumed and transformed in to javascript objects.

Below is a simple example of JSON format looks. You can understand from the format how lightweight and easy the format looks.

Figure :- JSON

The biggest advantage of JSON format is it can be evaluated to a javascript object. For instance you can see in the below code snippet we have a JSON format data which has “name”,”street”,”age” and “phone”. Now this data can be consumed as shown in the code snippet below, evaluated to a javascript object and invoked as anobject property.

You can see how we have called the “name” property using an object “JSONObject.name”.

Collapse | Copy Code
<script type="text/javascript">

var JSONObject= {
"name":"John Johnson",
"street":"Oslo West 555", 
"age":33,
"phone":"555 1234567"};

alert(JSONObject.name); 
</script>

Was not SOAP meant to do the same thing which JSON does?

SOAP is heavy due to XML tags. For example a SOAP message “Shiv” will become short , sweet and light in JSON like “Name” : “Shiv”. Second most important it evaluates as javascript object. To convert the complicated SOAP XML in to javascript JSON object would be a tough and tedious task.

Figure 11.11:- SOAP meant to do the same thing

Do all technologies support JSON?

Yes , Almost all technologies who deal with exchange of data support JSON. For instance if you want to that your WCF service should send JSON message rather than SOAP you can set the “ResponseFormat” as “WebMessageFormat.Json” on your operation contract.

Collapse | Copy Code
[OperationContract]
[WebInvoke(Method="GET", UriTemplate="/GetData", RequestFormat=WebMessageFormat.Json,
           ResponseFormat=WebMessageFormat.Json)]
string GetData();

If you want your MVC to emit out JSON data you can return “JsonResult” as shown below. If you call the below action it will emit out Customer objects in Json format.

Collapse | Copy Code
public JsonResult  CustomerJson()
{
     List<Customer> obj1 = new List<Customer>();
     Thread.Sleep(5000);
            Customer obj = new Customer();
            obj.CustomerCode = "1001";
            obj1.Add(obj);
            return Json(obj1,JsonRequestBehavior.AllowGet);
}

If you want to emit JSON using ASP.NET we need to use the “DataContractJsonSerializer” class as shown in the below code.”myPerson” is the class.

Collapse | Copy Code
DataContractJsonSerializer serializer = new DataContractJsonSerializer(myPerson.GetType());
MemoryStream ms = new MemoryStream();
serializer.WriteObject(ms, myPerson);
string json = System.Text.Encoding.UTF8.GetString(ms.ToArray());
Response.Clear();
Response.ContentType = "application/json;charset=utf-8";
Response.Write(json);
Response.End();

How can you make a JSON call using Jquery ?

Let’s assume you have a MVC controller action “getEmployee” which emits out employee JSON object as shown in the below code. Please note you can always emit JSON from any server technology like WCF , ASP.NET , MVC etc as discussed in the previous questions.

Collapse | Copy Code
public JsonResult  getEmployee()
{
Emp obj = new Emp();
obj.empcode = "1001";
return Json(obj,JsonRequestBehavior.AllowGet);
}

To make a call to the above MVC action using Jquery we need to use “getJSON” method. Below is the simple code for the same. It has three parameters:-

  1. The first parameter is the URL which emits out JSON. For instance in the below code the URL is “/Employee/getEmployee”.
  2. The next parameter helps us to pass data to the resource which emits out JSON currently it’s the MVC action. Currently we are only doing a get so the second parameter is NULL for now.
  3. The last parameter is the call back function which will be invoked once the MVC action returns data. You can see how the “getData” function just displays the “empcode” property. Because the output is in JSON it automatically converts the JSON data to javascript object.
Collapse | Copy Code
$.getJSON("/Employee/getEmployee", null, getData);
function getData(data)
{
alert(data.empcode);
}

How can we post JSON to Server?

We can use the “post” method of jquery to send data to the server. Below is how the post method call looks like. First parameter is the URL which will accept JSON data, second is the data which we want to send and the final parameter is the call back function where we receive the response.

Collapse | Copy Code
var mydata ={name:"Shiv",city:"Mumbai"};

$.post("/Send/Request", // URL
mydata , // Data to be sent
function(data,status){alert(data + &ldquo; &ldquo; + status);}); // Call back function

How can we post a complete HTML form in JSON format?

To post a complete HTML form we need to call “serialize” function as shown in the below code. “form1” is a HTML form. The data given by the function can then be passed to the “post” method of Jquery.”DisplayData” is a callback function to handle the output given by the server.

Collapse | Copy Code
var Mydata = $("#form1").serialize();
$.post("/Customer/getCustomer",JSON. stringify (MyData), DisplayData);

The above posted JSON string is received at the server side “request.inputstream” , below is a simple sample code for the same.

Collapse | Copy Code
System.IO.Stream body = Request.InputStream;
System.IO.StreamReader reader = new System.IO.StreamReader(body);
string s =   reader.ReadToEnd() ;

How can we convert JSON string in to c# object?

To convert a JSON string to a c# object we need to use the “JavascriptSerializer” class as shown in the below code.

“JsonString” is the string which has the JSON value and by using “Deserialize” we are converting the string to a c# object. Now this object which we receive is a collection of “key” and “value” pair which can be browsed and accessed in c#.

Collapse | Copy Code
var jsonser = new JavaScriptSerializer()
var obj = jsonser.Deserialize<dynamic>(JsonString);
foreach (var x in obj)
{
    String strvalue = x[&ldquo;value&rdquo;];
}

What are single page applications (SPA)?

SPA means you web page has the following :-

  • Utilize the browser client power to the maximum by executing the maximum code on the client side by using javascript , HTML and CSS.
  • Rather than loading the complete page necessary HTML fragments or JSON data is loaded as the user demands.
  • Javascript which handles DOM manipulation, binding, Ajax calls are separated in to controllers thus separating views and models.
  • DOM manipulations are replaced by declarative programming.

What is Angular JS ?

Angular JS is JavaScript framework to create SPA applications. It simplifies complex javascript DOM manipulation code by providing declarative tags. This provides a clean separation between DOM manipulation logic and the HTML view.

For example below is a simple Angular code which helps us to display textbox data in the DIV tag when the user types in the textbox.

Collapse | Copy Code
<input type=text ng-model="name">
<div>
Current user's name: {{name}}

Below is a simple video which explain Angular in 5 minutes with an example: –

 

ANGULAR JS Video

What is the need of ng-model, ng-expression and ng-app in Angular?

“ng-model” helps to store data which is typed in the HTML elements while expression helps to display the model data on the page. “ng-app” defines the root element for angular.

Below is a simple angular code which has all the three things: –

  • So whatever is typed in the textbox gets stored in the model.
  • The model is displayed by an expression {{}}.
  • “ng-app” defines the root.
Collapse | Copy Code
<div ng-app>
<input type=text ng-model="name">
Current user's name: {{name}}
</div>

How is the data binding in Angular?

Its two way binding. So whenever you make changes in one entity the other entity also gets updated.

from: http://www.codeproject.com/Articles/778374/JQUERY-JSON-and-Angular-Interview-questions

震撼41张组图 揭秘科学难解之谜

Life

当我们看到十亿光年以外的星星时，映入我们眼帘的那束星光已经在茫茫宇宙间飞奔了十亿年。换句话说，我们现在看到的仅仅是它十亿年之前的样子！现在的它究竟如何我们只有再等待十亿年才能看到……宇宙的无穷无尽，停留在纸上，今天，让我们用自己的眼睛来体验！

这是一次高速旅行，每次都以10倍的速度跳跃。从10的0次方开始（也就是1米），然后每次按照10的乘方增加。从10米，100米，1000米，以此类推，直至巨视世界的无尽。

1米

花园里，从1米的距离看一束树叶。

10米

将我们的视线向上移，我们看到的是一片植物 。

100米

在这个距离，我们看到了树林的边界。

1公里

现在我们将从米进入到公里……有可能需要降落伞了……

10公里

我们由此可以看到整个城市的面貌，但是我们确实已经看不清每栋房子了。

100公里

从这个高度，可以看到美国佛罗里达州……

1000公里

这是典型的从人造卫星的视野。

1万公里

北半球，和南美洲的部份。

10万公里

此刻，地球看起来很小了……

100万公里

地球和月亮的运行轨道（白色的线）。

1000万公里

蓝色区域是地球轨道的一部份。

1亿公里

金星和地球的轨道……

10亿公里

水星、金星、地球和木星的轨道。

100亿公里

从这个高度，我们能看到太阳系和行星运行的轨道。

1000亿公里

太阳系看起来变得有点小了……

1万亿公里

此刻，太阳看起来就是众多恒星中的一颗……

1光年（10万亿公里）

从1光年的距离看，太阳看起来很小了。

10光年

在这个无穷大的宇宙里，我们几乎看不到太阳系……

100光年

“什么也没有”看到的仅剩下恒星和星云……

1000光年

从这个距离，我们开始在银河和银河系旅行了。

1万光年

我们继续在银河系中遨游。

10万光年

我们开始接触银河系的外围了。

100万光年

银河系看起来就像佛教的“卍”字符，还能看到其他的星系了……

1000万光年

从这个距离看，所有的星系看起来都变得很小，星系之间相距遥远.同样的法则统治着宇宙的每一个组成部份。

其大无外，其小无内！

现在我们再回到一开始我们地球上那片树叶的画面上，看看微观世界的景象，然后再朝一个相反的方向，以10的乘方减少我们的旅行距离，直至一个神奇的微视世界。请仔细观察宇宙恒定不变的规律，也请想一想作为人类还有多少是需要我们学习的……

1米

现下我们回到了本次旅行的起点，这个距离我们能用我们的手臂够到……

10cm

逐渐靠近直到10cm的距离，我们能描绘树叶的样子了。

1cm

从这个距离，我们能观察到树叶的结构。

1mm

细胞组织开始得以展现……

100微米

此时，细胞得以清晰的展现。你可以看到细胞之间是怎样结合起来的。

10微米

我们的旅行将进入到细胞内部……

1微米

可以看到细胞的核子。

1000埃（1亿分之1厘米）

我们再次更改我们的测量单位来观察更微小的事物。现下你可以看到细胞的染色体了。

100埃

在这个微观世界里，可以看到细胞DNA链。

10埃

可以开始研究染色体块了。

1埃

这看起来像是电子的云丛，这些是形成我们世界的碳原子。你会发现微视世界的景观和巨视世界的景观是如此相似……

10皮克米

在这个迷你世界里，我们能观察到电子围绕原子运行。

1皮克米

核子和电子运行轨道之间是一个无限的空阔的世界……

100飞米

从这个难以置信的微观世界里，我们可以观察到原子核。

10飞米

现下我们可以观察到碳原子核。

1飞米

现下我们进入科学想像的领域，与质子面对面了。

1/10飞米

仔细研究一下夸克粒子，现在我们没办法再走近了……我们已经处于目前的科学能到达的边界了。但它肯定还不是真理的边界。

夸克再往下就是一股无形的能量了。组成这个世界的不是物质而是能量，而能量又是怎么来的，如何运作的呢？

佛陀说，一沙一世界，又说，万法皆空。那么现在想想……你是宇宙的中心吗？你是世界万物中的一个特殊的创造物吗？在这些边界外是什么东西呢？有所谓 的“边界”吗？请注意，往“下”我们只能走到10的16次方的距离，然后到达事物的边界（我们目前的知识所能到达的边界）……但是往上，我们到了10的23次方的距离然后停下来了……

那么，谁能说我们的科学已经能破解所有宇宙和生命的奥秘？也许，今天的科学只是认知世界的初级阶段，比起几百年前科学证实地球是圆的，是绕着太阳转的阶段进步了一点点而已。终极真理或许需要从另一个方向：哲学乃至宗教才能获得。