IT概念解析

【HTML】
理解：一个文档用不同标签修饰不同的文本， 客户端(浏览器)发送http请求到服务端返回一个index.html到浏览器解析
<meta keywords="购物，手机" />  //谷歌爬虫根据keywords来搜索

标签：<类型 属性="值" > </类型>

行内元素不会独占一行,相邻的行内元素会排列在同一行里,
直到一行排不下,才会换行,其宽度随元素的内容而变化.
行级标签<span>：设置width,height属性无效 display:inline

特殊符号：空格&nbsp;  引号&quot;  小于号&lt;  大于号&gt  版权号&copy;  &amp;

表格table
tr 行
td 列  
内边距=padding
外边距=margin
单元格间距=cellspacing
单元格边距=cellpadding  内容与单元格边沿(上、左、下)之间的空白
CSS盒子模型：
padding-border-margin-width
colspan 规定单元格可横跨的列数
rowspan 规定单元格可横跨的行数
  
GET：表单的内容会通过URL明文传输,参数传递
POST：一般用作传递大对象，不会明文传输，比较安全，但是通过其他TCP工具也能查看到
抓包工具：iptool 捕包网卡 端口过滤

<input>
文本框type="text"
密码框type="password"
单选框type="radio"
复选框type="checkbox"
按钮type="button"
文件上传type="file"
文本域<textarea>
下拉列表<select><option></option></select>

-------------------------------------------------------

【JSON(JavaScript Object Notation) 】是一种轻量级的数据交换格式

1、语法
数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组

"firstName":"John" 等价于 firstName="John"

2、值
JSON 值可以是：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

3、
JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，
然后就可以在函数之间轻松地传递这个字符串，
或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。
JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

4、
修改数据
正如可以用点号和方括号访问数据，也可以按照同样的方式轻松地修改数据：
people.musicians[1].lastName="Rachmaninov";
在将字符串转换为 JavaScript 对象之后，就可以像这样修改变量中的数据

5、
此Json对象包括了一个学生数组，而学生数组中的值又是两个Json对象。
字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义

6、和XML的比较
用XML表示中国部分省市数据如下：
<?xml version="1.0" encoding="utf-8"?>
<country>   
 <name>中国</name>   
 <province>       
  <name>黑龙江</name>       
   <cities>           
    <city>哈尔滨</city>           
    <city>大庆</city>       
   </cities>   
 </province>  
 <province>       
  <name>广东</name>       
  <cities>           
   <city>广州</city>           
   <city>深圳</city>           
   <city>珠海</city>       
  </cities>   
 </province>    
</country>
用JSON表示如下：
{   
 "name": "中国",   
 "province": [{       
  "name": "黑龙江",       
  "cities": {           
   "city": ["哈尔滨", "大庆"]       
  }   
 }, {       
  "name": "广东",       
  "cities": {           
   "city": ["广州", "深圳", "珠海"]       
  }   
 }]
}

7、JSON校验工具：BeJson功能强大

--------------------------------------------

1、C/S与B/S区别
首先必须强调的是C/S和B/S并没有本质的区别：B/S是基于特定通信协议(HTTP)的C/S架构，也就是说B/S包含在C/S中，是特殊的C/S架构。
之所以在C/S架构上提出B/S架构，是为了满足瘦客户端、一体化客户端的需要，最终目的节约客户端更新、维护等的成本，及广域资源的共享。
（1）B/S属于C/S，浏览器只是特殊的客户端；
（2）C/S可以使用任何通信协议，而B/S这个特殊的C/S架构规定必须实现HTTP协议；
（3）浏览器是一个通用客户端，本质上开发浏览器，还是实现一个C/S系统。

2、http://blog.jobbole.com/62941/——徐飞：我在中兴软创的这九年
ZTEsoft前端发展史
用 table 布局，里面放些 form，极少量的 JavaScript 代码，更谈不上用 CSS。

最开始大家都是把数据用 submit 按钮提交给服务端的，但是提交就会刷新整页，效果不好

传输的原理就是在前端把表单数据序列化成 XML，通过 XMLHTTP 传给后端的 Servlet，当然，那时候用的是同步传输，传的时候界面会卡一会

为了通用性，前端封装了一个方法叫 callRemoteFunction，三个参数，分别是后端的 Java 类名，方法名和参数对象，用 XMLHTTP 发送到后端的 Servlet 之后，通过前两者反射得到对应的 Java 方法，执行结果再返回给前端。这样，在 JavaScript 里“调用”后端代码，就像调用普通的 JS 函数那么方便。也有这样调用动态 SQL 的，后来这两者统一成服务，只要传入唯一的服务名和参数，不用管是 Java 服务还是 SQL 服务。

技术选型：用JavaScript 基础库，然后在上面自己做控件，流行的有 Prototype，Mootools，jQuery

设计思路改变：
1、控件选中行用点击，由于键盘方向键也可以改变选中行，这时业务方需要监听2种事件做选中行变更操作
---只给业务方开放change事件

2、TreeGrid控件作了懒加载

3、前端与后端开发方式的一个本质差异是引入任何东西的代价都比较大，
因为你的代码要先经过一次网络传输才能执行到，而且还要注意避免冲突

---
随着AJAX的出现，Web2.0的兴起，人们可以在页面上做比较复杂的事情了，然后前端框架才真正出现了，以jQuery为代表，针对界面上常见的DOM操作，远程请求，数据处理等作了封装，也有专注于处理数据的Underscore，严格来说，这些都不能算框架，而是算库

库和框架是有一些区别的：库是一种工具，我提供了，你可以不用，即使你用了，也没影响你自己的代码结构。框架则是面向一个领域，提供一套解决方案，如果你用我，就得按照我的方式办事。按照这个定义，jQuery和Underscore都只能算是库，ExtJS和dojo算框架。

jQuery的思维方式是：以DOM操作为中心
MV*框架的思维方式是：以模型为中心，DOM操作只是附加

---
前端MVC

---
前端开发人员需要了解的CSS原理
CascadingStyleSheets（层叠样式表）
HTTPS（以SSL加密的HTTP）
URL（统一资源定位符）

渲染效率与下面三点有关：
1. css选择器的查询定位效率
2. 浏览器的渲染模式和算法
3. 要进行渲染内容的大小

不需要编译，浏览器解释语言

---
框架基本原理：

初始化自身（bootstrap）
异步加载可能尚未引入的JavaScript代码（require）
解析定义在HTML上的规则（template parser）
实例化模型（scope）
创建模型和DOM的关联关系（binding, injection）

【FLEX】
1、通常开发flex需要写*.mxml*.as
*.mxml相当于你们写的.jsp或者.html
.as相当于.js
ActionScript语言名称AS语言
flex用的SDK相当于JDK的东西叫FLEXSDK3.5
前端框架为框架的flex库文件和flexSDK3.5
业务代码通常都是一个module.mxml一个view.mxml一个view.as一个action.as
一个module里面包含多个view
一个view里面放一些东西然后对应一个*.as里面写一下onOkClick
view.as里面实例化一个action.as（定义一个class）对象调用增删改查
action.as就是封装一个类里面调用服务

【ActionScript】
ActionScript3.0运用在flash上的脚本语言
最初是一种简单的脚本语言，现在最新版本ActionScript3.0，是一种完全的面向对象的编程语言，功能强大，
类库丰富，语法类似JavaScript，多用于Flash互动性、娱乐性、实用性开发，网页制作和RIA（因特网应用程序）开发。
实例是属于某个类的对象,一个类的每一个实例都包含类的所有属性和方法.
Actions(动作)：就是程序语句，它是actionscript脚本语言的灵魂和核心．
Events(事件)：简单的说，要执行某一个动作，必须提供一定的条件，如需要某一个事件对该动作进行的一种触发，那么这个触发功能的部分就是actionscript中的事件．
Class(类)：是一系列相互之间有联系的数据的集合，用来定义新的对象类型．
Constructor(构造器)：用于定义类的属性和方法的函数．
Expressions(表达式)：语句中能够产生一个值的任一部分．
Function.(函数)：指可以被传送参数并能返回值的以及可重复使用的代码块．
Identifiers(标示符)：用于识别某个变量，属性，对象，函数或方法的名称．
Instances(实例):实例是属于某个类的对象,一个类的每一个实例都包含类的所有属性和方法.
Variable(变量):变量是储存任意数据类型的值的标示符.
Instancenames(实例名):是在脚本中指向影片剪辑实例的唯一名字.
Methods(方法):是指被指派给某一个对象的函数,一个函数被分配后,它可以作为这个对象的方法被调用.
Objects(对象):就是属性的集合.每个对象都有自己的名字和值,通过对象可以自由访问某一个类型的信息.
Property(特性):对象具有的独特属性.

文档呈现语言：HTML
样式格式描述语言：CSS
客户端交互技术：AJAX、Flex
客户端脚本语言：JavaScript
标识定位语言：URL
动态网页技术：JSP

【FISH】大漠穷秋博客http://damoqiongqiu.iteye.com
参与公司前端框架技术选型讨论；
AngularJS、NodeJS技术预研；
引入各种基于NodeJS的前端开发工具；

1、
Front-end Integrated Solution Hub（前端开发集成解决方案）
特点：开源与共享、多终端支持、全新的前端开发工具、支IE8+/FireFox/Chrome
描述：FISH是一套完整的前端开发解决方案，包括3大块内容：桌面控件库FishDesktop、移动控件库FishMobile、前端开发工具集。
2、
FISH提供了完整的前端开发工具：
我们引入了轻量级的代码编辑器Sublime；
引入了目前业界最火的NodeJS，并在此基础上实现了前端代码的模块化，包括代码压缩合并、前端自动化测试、模拟和调试工具；
我们还引入了css预编译器LESS，从此我们可以像写程序一样去写CSS了。
3、
FishDesktop是一组桌面端UI套件，基于jQuery1.8.3和Bootstrap3.2设计。

【UI】
1、长期以来UI设计师就是指交互设计师
2、UI控件的三要素：绘制、数据、控制。
绘制：每个控件都有自己的样子，TableView是一张数据表，又比如DatePicker是一个时间选择器
数据：没有数据控件使用没意义，比如label，需要显示文字的数据，比如imageView需要显示图片的数据
控制：例如button，scrollview可以滑动加载数据
3、基本UI控件
WebUI控件：图表和图形、日期和日历、组合框、对话框、进度条、所见即所得编辑器等。
iOS基本UI控件：Button控件、开关控件、滑块控件、工具栏、WebView等。
安卓UI控件：文本控件、按钮控件、状态开关控件、单选与复选按钮、图片控件、时钟控件、日期与时间选择控件等。
4、设计规范
一致性：字体、对齐、表达录入、鼠标手势、保持功能及内容描述一致
准确性：
（避免使用文本输入框来放置不可编辑的文字内容，不要将文本输入框当成标签使用）
布局合理化：菜单、按钮、功能、排版、表格数据列表、滚动条、页面导航、信息提示
（所有文字内容排版避免贴边显示（页面边缘），尽量保持10-20像素的间距并在垂直方向上居中对齐；各控件元素间也保持至少10像素以上的间距，并确保控件元素不紧贴于页面边沿。）
操作合理性：
（信息提示窗口的“确认”及“取消”按钮需要分别映射键盘按键“Enter”和“ESC”）
响应时间：

【github】作为开源代码库以及版本控制系统
随着越来越多的应用程序转移到了云上，Github已经成为了管理软件开发以及发现已有代码的首选方法
作为一个分布式的版本控制系统，在Git中并不存在主库这样的概念，
每一份复制出的库都可以独立使用，任何两个库之间的不一致之处都可以进行合并。
【gitLab】是一个用于仓库管理系统的开源项目。使用Git作为代码管理工具，并在此基础上搭建起来的web服务。
gitlab整体风格几乎和github一模一样项目列表、issues、提交历史、buglist、wiki
在gitlab上创建项目
下载并安装git客户端
下载并安装git小乌龟
生成SSH私钥和公钥
初始化本地项目库
克隆项目到本地

【FishDesktop】
引入了RequireJS来支持AMD模式，引入了Backbone来支持MVC，使用了FishDesktop内部打包好的HandleBars来支持HTML片段化和模板化。

【API】
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，
目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，
而又无需访问源码，或理解内部工作机制的细节。

例如凡是在 Windows工作环境底下执行的应用程序，都可以调用Windows API。

FishDesktop是一组桌面端UI套件，基于jQuery1.8.3和Bootstrap3.2设计。