Internet基本协议内容及相关应用

Internet基本协议：如TCP/IP、HTTP、SMTP、FTP等，简单的说就是网络通信协议。

Internet网络互连采用的基本协议是TCP/IP。

TCP/IP（传输控制协议/网间协议）是一种网络通信协议，它规范了网络上的所有通信设备，尤其是一个主机与另一个主机之间的数据往来格式以及传送方式。TCP/IP是INTERNET的基础协议，也是一种电脑数据打包和寻址的标准方法。在数据传送中，可以形象地理解为有两个信封，TCP和IP就像是信封，要传递的信息被划分成若干段，每一段塞入一个TCP信封，并在该信封面上记录有分段号的信息，再将TCP信封塞入IP大信封，发送上网。在接受端，一个TCP软件包收集信封，抽出数据，按发送前的顺序还原，并加以校验，若发现差错，TCP将会要求重发。因此，TCP/IP在INTERNET中几乎可以无差错地传送数据。在任何一个物理网络中,各站点都有一个机器可识别的地址,该地址叫做物理地址.物理地址有两个

特点:

（1）物理地址的长度,格式等是物理网络技术的一部分,物理网络不同,物理地址也不同.

（2）同一类型不同网络上的站点可能拥有相同的物理地址.

以上两点决定了,不能用物理网络进行网间网通讯.

在网络术语中，协议中，协议是为了在两台计算机之间交换数据而预先规定的标准。TCP/IP并不是一个而是许多协议，这就是为什么你经常听到它代表一个协议集的原因，而TCP和IP只是其中两个基本协议而已。TCP/IP理解正确的应该是“用于计算机通信的一个协议集，它包括TCP、IP、ARP、ICMP、UDP、RIP、FTP、SMTP等多种协议”。

OSI参考模型	TCP/IP模型	协议
应用层	应用层	简单电子邮件传输（SMTP）、文件传输协议（FTP）、网络远程访问协议（Telnet）等
表示层
对话层
传输层	传输层	传输控制协议（TCP）、用户数据包协议（UDP）等
网络层	网络层	网际协议（IP）
数据链路层	网络接口层(主机-网络访问层)
物理层

TCP/IP协议图

TCP/IP通讯协议采用了4层的层级结构，每一层都呼叫它的下一层所提供的网络来完成自己的需求。这4层分别为：

应用层：应用程序间沟通的层，如简单电子邮件传输（SMTP）、文件传输协议（FTP）、网络远程访问协议（Telnet）等。

传输层：在此层中，它提供了节点间的数据传送，应用程序之间的通信服务，主要功能是数据格式化、数据确认和丢失重传等。如传输控制协议（TCP）、用户数据包协议（UDP）等，TCP和UDP给数据包加入传输数据并把它传输到下一层中，这一层负责传送数据，并且确定数据已被送达并接收。

互连网络层：负责提供基本的数据封包传送功能，让每一块数据包都能够到达目的主机（但不检查是否被正确接收），如网际协议（IP）。

网络接口层（主机–网络层）：接收IP数据包并进行传输，从网络上接收物理帧，抽取IP数据报转交给下一层，对实际的网络媒体的管理，定义如何使用实际网络（如Ethernet、Serial Line等）来传送数据。

拓展知识：

web2.0由来：

2004年O’ Reilly MediaInc.副总裁Dale Dougherty在公司的一次筹备会上偶然提出了Web2.0一词，全球第一次Web2.0大会于2004年10月在美国旧金山召开。从此，Web2.0这一概念以不可思议的速度在全球传播开来。
Web2.0核心是以人为中心。为用户提供更方便工具，鼓励提供内容。根据用户在互联网上留下的痕迹，组织浏览线索，提供相关的服务，给用户创造新的价值。Web2.0是相对Web1.0的新一类互联网应用的统称。
Web2.0技术主要包括：博客（BLOG）、RSS、百科全书（Wiki）、网摘、社会网络（SNS）、P2P、即时信息（IM）等.

参考文章：
TCP/IP协议及应用

前端开发工程师的必须掌握的基本技能

• DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
• DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
• 事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
• XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
• 严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
• 盒模型——外边距、内边距和边框之间的关系，IE < 8中的盒模型有什么不同。
• 块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
• 浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
• HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
• JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。

附：adam lu前端开发面试题：
HTML && CSS
1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 行内元素有哪些？块级元素有哪些？CSS的盒模型？
2.CSS引入的方式有哪些? link和@import的区别?
3.CSS选择符有哪些？哪些属性可以继承？优先级？内联和important哪个优先级高？
4.经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
5.如何居中一个浮动元素?
6.HTML5和CSS3的了解情况
7.你怎么来实现下面这个设计图

Javascript
1.怎样添加、移除、移动、复制、创建和查找节点
2.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
3.面向对象编程:b怎么继承a
4.看看下面alert的结果是什么
function b(x, y, a) {
arguments[2] = 10;
alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );
5.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象，如：var url = ”http://www.taobao.com/index.php?key0=0&key1=1& key2=2…..”
var obj = parseQueryString(url);
alert(obj.key0)  // 输出0
(来自淘宝网校园招聘笔试题)
6.ajax是什么?  ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
7.什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>
8.最近看的一篇Javascript的文章
9.你如何去实现这个Tabview

10.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
11.性能-Yslow

小结：面试只是一个检测技能的手段，我个人更看重面试者分析问题和解决问题的能力以及对前端的热爱。

为什么需要框架？
1、JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。每一个库都在众多流行的 Web 浏览器的现代版本上进行了可靠的测试，因此，您可以放心地使用这些框架，您的基于 JavaScript 的 RIA 将会在不同浏览器和平台上以类似的方式工作。
2、这些框架极大地简化了开发进程，并带来一致，可靠，以及高度交互性的用户界面。

目前项目中常用的Javascript框架:
JQuery
YUI
Prototype
Mootools

Javascript库主要功能：
1、解决浏览器兼容性
2、快速开发Web应用
3、丰富UI效果

JQuery：

1、宗旨：WRITE LESS,DO MORE
2、轻量级的js库(压缩后只有21k)
3、兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
4、jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
5、jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

YUI:

1、一组采用DOM scripting，Dhtml和Ajax等技术开发的Web UI控件和工具。
2、Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。
3、YUI控件库为你页面提供一组高交互性性的可视化元素。这些元素完全在客户端创建维护，不需要请求服务器进行页面刷新。

Prototype：

prototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。

Mootools:

1、一个简洁，模块化，面向对象的JavaScript框架；
2、它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。
3、Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype.js多，整体设计也比Prototype.js要相对完善，功能更强大，比如增加了动画特效、拖放操作等等。

参考文章：

常用js框架比较

为什么需要框架？
1、JavaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。每一个库都在众多流行的 Web 浏览器的现代版本上进行了可靠的测试，因此，您可以放心地使用这些框架，您的基于 JavaScript 的 RIA 将会在不同浏览器和平台上以类似的方式工作。
2、这些框架极大地简化了开发进程，并带来一致，可靠，以及高度交互性的用户界面。

目前项目中常用的Javascript框架:
JQuery
YUI
Prototype
Mootools

Javascript库主要功能：
1、解决浏览器兼容性
2、快速开发Web应用
3、丰富UI效果

JQuery：

1、宗旨：WRITE LESS,DO MORE
2、轻量级的js库(压缩后只有21k)
3、兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
4、jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
5、jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

YUI:

1、一组采用DOM scripting，Dhtml和Ajax等技术开发的Web UI控件和工具。
2、Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。
3、YUI控件库为你页面提供一组高交互性性的可视化元素。这些元素完全在客户端创建维护，不需要请求服务器进行页面刷新。

Prototype：

prototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。

Mootools:

1、一个简洁，模块化，面向对象的JavaScript框架；
2、它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。
3、Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype.js多，整体设计也比Prototype.js要相对完善，功能更强大，比如增加了动画特效、拖放操作等等。

参考文章：
http://adamlu.com/?p=442

“以人为本”才是好前端

有朋友问我，为什么他去应聘纯粹做js开发，但是总不如意？
我是觉得求职遇到困难应当多思考总结，看看自身有什么不足和应当提高的地方，而不应该发牢骚。另外觉得找不到专做js的企业和团队，也可以换一个角度想一想，会不会是你自己还不知道什么样的企业和团队需要专业的前端开发工程师。
你真的理解了前端开发这个圈子和互联网这个行业吗？
你真的对自己将来的路想明白了吗？
我觉得这些你需要再思考一下……

js只是工具，为什么现在比较“流行”，因为现在web比较流行，为什么web比较流行，因为可以打开浏览器就可以完成你想完成的事情（比如：OA系统，信息获取，webgame之类）而不需要去安装客户端软件，说白了就是为了方便，计算机的出现也是为了方便人们的工作和生活，任何一项发明都会有它的意义。
用户，永远想要通过最简单的方式完成自己想要完成的事，正因为这样，科技才在不断地进步，一切都在“以人为本”。
所以我们用JS不能只考虑到其本身，而要考虑到它能产生的价值，用户用一个系统，不是要求这个系统开发的技术含量有多高，而是它是否满足自己的需求，在体验上好不好。
一门技术，只是在一定的环境下，为需求服务，当然，前提得你要熟悉这门技术，能够运用自如，才能更好地驾驭它。

MVC设计模式

前言：MVC是一种目前广泛流行的软件设计模式，随着网络应用的快速增加,MVC模式对于Web应用的开发无疑是一种非常先进的设计思想，无论你选择哪种语言，无论应用多复杂,它都能为你理解分析应用模型时提供最基本的分析方法，为你构造产品提供清晰的设计框架，为你的软件工程提供规范的依据。

一、MVC设计思想

MVC英文即Model-View-Controller，即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用被分成三个层——模型层、视图层、控制层。

• 视图(View)代表用户交互界面，对于Web应用来说，可以概括为HTML界面，但有可能为XHTML、XML和Applet。随着应用的复杂性和规模性，界面的处理也变得具有挑战性。一个应用可能有很多不同的视图，MVC设计模式对于视图的处理仅限于视图上数据的采集和处理，以及用户的请求，而不包括在视图上的业务流程的处理。业务流程的处理交予模型(Model)处理。比如一个订单的视图只接受来自模型的数据并显示给用户，以及将用户界面的输入数据和请求传递给控制和模型。
• 模型(Model)：就是业务流程/状态的处理以及业务规则的制定。业务流程的处理过程对其它层来说是黑箱操作，模型接受视图请求的数据，并返回最终的处理结果。业务模型的设计可以说是MVC最主要的核心。目前流行的EJB模型就是一个典型的应用例子，它从应用技术实现的角度对模型做了进一步的划分，以便充分利用现有的组件，但它不能作为应用设计模型的框架。它仅仅告诉你按这种模型设计就可以利用某些技术组件，从而减少了技术上的困难。对一个开发者来说，就可以专注于业务模型的设计。MVC设计模式告诉我们，把应用的模型按一定的规则抽取出来，抽取的层次很重要，这也是判断开发人员是否优秀的设计依据。抽象与具体不能隔得太远，也不能太近。MVC并没有提供模型的设计方法，而只告诉你应该组织管理这些模型，以便于模型的重构和提高重用性。我们可以用对象编程来做比喻，MVC定义了一个顶级类，告诉它的子类你只能做这些，但没法限制你能做这些。这点对编程的开发人员非常重要。

  业务模型还有一个很重要的模型那就是数据模型。数据模型主要指实体对象的数据保存（持续化）。比如将一张订单保存到数据库，从数据库获取订单。我们可以将这个模型单独列出，所有有关数据库的操作只限制在该模型中。

• 控制(Controller)可以理解为从用户接收请求, 将模型与视图匹配在一起，共同完成用户的请求。划分控制层的作用也很明显，它清楚地告诉你，它就是一个分发器，选择什么样的模型，选择什么样的视图，可以完成什么样的用户请求。控制层并不做任何的数据处理。例如，用户点击一个连接，控制层接受请求后, 并不处理业务信息，它只把用户的信息传递给模型，告诉模型做什么，选择符合要求的视图返回给用户。因此，一个模型可能对应多个视图，一个视图可能对应多个模型。

MVC的优点

大部分用过程语言比如ASP、PHP开发出来的Web应用，初始的开发模板就是混合层的数据编程。例如，直接向数据库发送请求并用HTML显示,开发速度往往比较快,但由于数据页面的分离不是很直接,因而很难体现出业务模型的样子或者模型的重用性。产品设计弹性力度很小，很难满足用户的变化性需求。MVC要求对应用分层，虽然要花费额外的工作，但产品的结构清晰，产品的应用通过模型可以得到更好地体现。

• 首先，最重要的是应该有多个视图对应一个模型的能力。在目前用户需求的快速变化下，可能有多种方式访问应用的要求。例如，订单模型可能有本系统的订单，也有网上订单，或者其他系统的订单，但对于订单的处理都是一样，也就是说订单的处理是一致的。按MVC设计模式，一个订单模型以及多个视图即可解决问题。这样减少了代码的复制，即减少了代码的维护量，一旦模型发生改变，也易于维护。
  

  MVC设计模型图

• 其次，由于模型返回的数据不带任何显示格式，因而这些模型也可直接应用于接口的使用。
• 再次，由于一个应用被分离为三层，因此有时改变其中的一层就能满足应用的改变。一个应用的业务流程或者业务规则的改变只需改动MVC的模型层。

  控制层的概念也很有效，由于它把不同的模型和不同的视图组合在一起完成不同的请求，因此，控制层可以说是包含了用户请求权限的概念。

• 最后，它还有利于软件工程化管理。由于不同的层各司其职，每一层不同的应用具有某些相同的特征，有利于通过工程化、工具化产生管理程序代码。

MVC的缺点

MVC的设计实现并不十分容易, 理解起来比较容易，但对开发人员的要求比较高。MVC只是一种基本的设计思想，还需要详细的设计规划。
模型和视图的严格分离可能使得调试困难一些，但比较容易发现错误。

总结：

经验表明，MVC由于将应用分为三层，意味着代码文件增多，因此，对于文件的管理需要费点心思。
综合上述，MVC是构筑软件非常好的基本模式，至少将业务处理与显示分离，强迫将应用分为模型、视图以及控制层, 使得你会认真考虑应用的额外复杂性，把这些想法融进到架构中，增加了应用的可拓展性。如果能把握到这一点，MVC模式会使得你的应用更加强壮，更加有弹性，更加个性化。