开发笔记 第773页

3、Field配置所产生的效果

索引数据，简单的代码，只要两个方法就搞定了，而在索引过程中用到的一些类里最简单，作用也不小的就是Field，接下来看看Field的各项设置都会有什么样的效果。

代码 3.1

Code

代码3.1就是准备好的索引过程。运行，然后呢？这里要说到一个工具，luke(lukeall)这是一个java平台下的Lucene索引管理工具。抽空，我实现了一个简单的dotNet版本的，详细请查看 NLuke版本更新信息 。接下来的索引，会用这个软件对索引进行分析。

现在就可以开始调整AddDocument方法中Field实例化时的参数了，看看调整后会对索引造成什么样的影响。这里以title对应的Field为例。

3.1 Field.Stroe选项

这个选项有3个值，下面来分析下效果。

3.1.1 Field.Stroe.Yes

刚好，默认的就是这个。用这选项建完索引，然后用NLuke查看，发现，title这个字段有，而且有8个Term。切换到文档区域，发现文档的title有内容。这个选项表示的就是存储，所以，这些是正常状态。

3.1.2 Field.Stroe.No

title也有8个Term，但是文档中没有字段了。也就是说现在可以用这个字段来搜索，但是搜索结果Hits中，不能用Document实例的Get方法来取得字段的内容了。那就是字段内容没有被存储。

3.1.3 Field.Store.COMPRESS

设置为COMPRESS，报错了，错误信息%26ldquo;Compression support not configured%26rdquo;，是个配置错误。这个错误在SupportClass，CheckCompressionSupport方法被抛 出。这里读取了一个配置文件，然后根据配置文件指定的类名来创建实例。这个类必须实现接口 SupportClass.CompressionSupport.ICompressionAdapter。在Lucene.Net中内置了一 个%26ldquo;SharpZipLibAdapter%26rdquo;，但是需要有编译符号SHARP_ZIP_LIB才能编译进去。为了看看效 果，所以给项目添加SHARP_ZIP_LIB符号，然后增加app.config配置文件，在appseting中添加 Lucene.Net.CompressionLib.class键，值是SharpZipLibAdapter。然后下载 ICSharpCode.SharpZipLib.dll,这个dll才是真正实现压缩算法的。下载地址： http://sourceforge.net/project/downloading.php?groupname=sharpdevelop%26amp;filename=SharpZipLib_0855_Bin.zip%26amp;use_mirror=nchc

把ICSharpCode.SharpZipLib.dll引入项目，就可以使用COMPRESS这个选项了。效果与Yes是一样的。

3.1.4 效果对比

对于Field.Stroe.Yes，产生字节大小是：627字节

Field.Stroe.COMPRESS是：661字节

Field.Stroe.No是：579字节

使用Field.Stroe.COMPRESS反而是占用空间最大，这不符合原先的设想。那是因为我们索引的文本太小，你可以试试看增加索引的内容，再对比小效果。

3.2 Field.Index选项

现在把Field.Stroe设置为Field.Stroe.Yes，接着来看看Field.Index的效果。

3.2.1 Field.Index.TOKENIZED

这个选项是用来控制分词的，TOKENIZED表明需要分词。运行后title有8个Term，没有问题。

3.2.2 Field.Index.UN_TOKENIZED

运行后只有4个Term，而且Term是原先写入的内容，和存储的完整内容没有区别。

3.2.3 Field.Index.NO

和预想的一样，title的Term一个也没有了。

3.2.4 Field.Index.NO_NORMS

效果似乎和Field.Index.UN_TOKENIZED一样，但是它把词条的附加信息全去掉了。比如，它将不再记录词的正太分布数据一类的东 西。这样可以减少占用的空间。而且这个用法也有一个条件，就是只要开启，就要全部开启，否则会失效。比如索引了四条数据没使用NO_NORMS，而接下来 的两条使用了NO_NORMS，那么前面四条的数据效果，那么接下来的两条数据实际上并没有产生NO_NORMS的效果。

3.2.5 效果分析

1，2，4三种情况虽然不同，但是都可以搜索，而第三种情况，也就是设置为NO，则不可以搜索。第一种情况，可以分词搜索，并且可以排序。而2，4则不能分词搜索，第四种情况不可以排序（不可以排序指，不能按照词出现的频率进行排序）。

从上面也可以看出，假设Field.Store设置为NO,而Field.Index也设置为NO，那就和没添加是一样的了。 Field.Store是给你取完整数据用的，而Field.Index则是给搜索用的。在极端的情况下，可以设置Field.Store为NO，而 Field.Index可以搜索，等取数据的时候再从数据源（比如数据库），它们中间有个关联法则，那样可以有效的减轻Lucene的工作压力。

3.3 Field.TermVector

Field.TermVector选项，现在工具还没实现这个功能，不过可以自己编码来实现。

…….. 前言

  在 ASP.NET MVC 中，开发人员要花费大量的心思在 Controller 的设计上；当用户发起 Http 请求时，Controller 首先获得响应。

试想：用户发出请求 http://hostname:80/AzureApps/BookStore

        问自己以下两个问题:

  1).  MVC 是怎样定位 ZureAppsController 的 ？

  2).  URI 里确实指明了Controller 为 AzureApps，但命名Controller类时，为什么一定要将其命名为: AzureAppsController ?

…….. 预备知识

 [1].  下载 Reflector http://www.red-gate.com/products/reflector/ , 并 Reflect 类 UrlRoutingModule : IHttpModule。

                                                                                    图 1： Reflect UrlRoutingModule

 [2].  下载 MVC 源码 http://www.microsoft.com/downloads/details.aspx?FamilyID=53289097-73ce-43bf-b6a6-35e00103cb4b&displaylang=en ，

 并打开类 MvcHandler:                  

             

      图 2： MvcHandler

…….. Q1:        MVC 是怎样定位 ZureAppsController 的 ？

  图2清楚地告诉我们，哦，原来Controller 是 MvcHandler 通过 URI 传递的 controllerName 找到的。

但我们并未在 Web.config 中 配置 MvcHandler 啊?

  MVC 巧用 MvcRouteHandler 在 RoutingModule 中将 MvcHanlde 带了进来。

 

 但我们也没有配置 "MvcRouteHandler" 啊？

 哈哈， 你在配置 Route ，调用扩展方法 MapRoute 时，MVC 做了手脚.  

 

 

 此时，打开 Reflector,  可以清楚地看到 UrlRoutingModule 在初始化模块时，注册了 OnApplicationPostMapRequestHandler 。

OnApplicationPostMapRequestHandler 通过 MapRoute 指定的 MvcRouteHandler， 取得了 MvcHandler.

MvcHandler 在 ProcessRequest 时，根据 controllerName 找到了对应的 Controller ，并实例化之。

…….. 总结

  希望本文对和我一样，对第一个问题起初不太清楚的同仁，有些帮助。

  下一个问题： 

                     Q2:         命名Controller类时，为什么一定要将其命名为: ZureAppsController ? 

  因时间有限，留作下次吧。

      书接上文，昨天我们写了一个简单的注册，今天我们来改写一下，改成像是MVC框架的样子，或者说本来就应该这么写。

      先来看看UserController里面，我们在昨天写了两个属性，是用来从表单中取值的：

      如果是以前写WebForm写习惯了的朋友，这么写其实很常见，或者说我们大部分都是这么写的，现在在MVC中，我们从表单中获取数据就更加方便了，直接在Action中添加两个参数就OK了：

      这里你要注意的是Action后面的参数必须要和你表单元素的名字一致，不然是获取不到的。但是MCV框架提供了一种更简便的方式，我们来看下：

      这种写法也是有要求的，那就是你表单中元素的名称，必须要和你绑定的对象中的属性一致，比如说这个注册，如果我要这么写的话，表单中元素的命名必须为UserName和UserPwd，这样才能获取到绑定的对象。
      现 在Action貌似是改好了，可是现在问题又来了，当你点击首页的注册链接的时候，就会报错，因为首页的连接是没有传递任何参数进来的。解决这个问题的办 法当然也不是唯一的，你可以新写一个无参的Action，然后返回View("Register")。下面我要说的是另外一种方法，我在 UserController中新添加一个Action：

      这么一看，貌似是重载了Action，但其实运行的时候会报错，这也很好理解，因为在Routing规则中是提交到了Register 中，但是从名字上来说是一模一样的，使得指代不明确。那么我们如何解决这个问题，其实也很简单，只需要在这个处理表单的Action上加一个特性就好了：

      这个特性的意思是说，只有当处理Post请求的时候才会调用它，很显然首页的超链接是个Get请求，这样我们就把它们区分开来了。

      再来说View。这是我们昨天写的View：

      在实际开发中，页面实际上时美工做好了的，对于美工来说，表单中的元素都是像这样的<input type="text" />，难到说我们拿到页面之后第一件事就是把所有元素拿来改成咱们昨天写的那个样子吗？相信这是个不小的工作量，那么我们就干脆换成Html标签的 样子好了：

      运行一下也没什么问题，但是这么写有一个缺陷，万一哪天Routing规则变了，你这里还要改Action，为了一劳永逸，我们就干脆这么写：

      这样写的好处是，对于Routing的修改没有影响，然后不影响美工的开发，自己也不用多干好多事儿了。那么如果你一定要用昨天写的方式来做，可能会设计到元素样式的问题，我们大概写一下：

      这样就写成了一个细边框样式的文本框，如果要用类选择器来写，可以这样：

      今天就改到这里吧~谢谢大家捧场:)

代码在这里

Selected Search是一个新的Firefox扩展,它可以帮助你快速搜索内容,以往搜索我们需要在搜索框中填写内容,或者从外部复制内容.
而拥有了这一扩展以后,您只需要用鼠标选中要搜索的字,然后程序就会弹出菜单让你选择相应的搜索引擎,懒人最爱.

访问:Selected Search 0.1

一、
…………………………………………………………  
使用 开始->运行，在运行输入框中输入 “regsvr32 c:\windows\system32\pngfilt.dll”（然后点击确定）
　 　注意，这个pngfilt.dll在有的系统中是在 c:\windows\system中的，要自己查看一下这文件在哪里，根据自己的系统修改一下路径。如果在注册时出现 “已加载 c:\windows\system32\pngfilt.dll，但没有找到DllRegisterSever 输入点。无法注册这个文件”，则表明这个文件可能损坏了，你要去别的机子去Copy一个好的过来。再进行一次注册。
二、
………………………………………………………..  
    有些人是因为自己系统的设置问题，即任意打开一个文件夹，在上方菜单上选择“工具”->“文件夹选项”->“文件类型”，选择下方的“还原”按钮。（如插图１）。
三、  
   
……………………………………………………………………
    开始 -> 运行，在运行输入框中输入“Regedit”，到这个路径“HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft \Windows\CurrentVersion\Internet Settings\Accepted Documents
”，在右边右键“新建”->“字符串值” 紧接着最大的数字命名，我这里是3，故命名为4，并赋值为“image/png”。（见插图２）。
四  
………………………………………………………………………..  
    我打开Regedit，去到 ［HKEY_CLASSES_ROOT\MIME\Database］一看，天哪！！！我这个键完全是空的！！！什么都没有！我再去朋友正常的机子(与我 一样是WinXPSP2)上一看，这个键里的项目不止一百项………………郁闷哪！于是我把他机子的［HKEY_CLASSES_ROOT\MIME］整个 键导出到mime.reg，再到我机子导入，咦，奇怪，什么都没有改变？？什么都没有增加！！这里我想到了键的权限问题，在MIME键上右键，发现，权限 里居然一个人都没有！于是我把MIME项整个删除，导入，再右键查看权限，正常（自己账号是全权控制的）！
五  
…………………………………………………………………….  
    安装SP2后，大多数用户发现在访问某些需要填写验证码的地方，都无法显示验证码图片(显示为一个红色小叉)，这是一个非常严重的BUG。解决办法为:运 行“Regedit”命令打开注册表编辑器，依次定位到“[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft \Internet Explorer\Security]”，在窗口右边新建一个名为“BlockXBM”的REG_DWORD值，将其值设置为“0”(十六进值)。
六   
..  …………………………………………………………………..
   首先注册文件dll 运行 regsvr32 pngfilt.dll
然后进行以下操作:
1.在WINDOWS开始/执行打入REGEDIT
2.到HKEY_LOCAL_MACHINE/SOFTWARE/MICROSOFT/INTERNET EXPLORER/EMBEDEXTNTOCLSIDMAPPINGS/.PNG
看存不存在.
3.假若不存在.
MOUSE点它的上一层,也就是EMBEDEXTNTOCLSIDMAPPINGS
4.然后按MOUSE右键新增机码,输入.PNG
5.然后MOUSE在.PNG反白,
按MOUSE右键新增字串值(预设值)
6.对着预设值按MOUSE右键,选择上面的"修改",
7.输入
clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B
8.按确定.
假如.PNG存在,则检查它是否有个预设值的字串值.
里面是否有
clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B
保存后关闭IE浏览器,重新打开IE,这时png图片就能正常显示了.

现在JQuery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了,  比如我.  JQuery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的JavaScript开发, 性能问题还是需要引起重视的. 在twitter上发现了<jQuery Performance Rules>这篇文章, 简单的摘译了一下:

1. 总是从ID选择器开始继承
2. 在class前使用tag
3. 将jQuery对象缓存起来
4. 掌握强大的链式操作
5. 使用子查询
6. 对直接的DOM操作进行限制
7. 冒泡
8. 消除无效查询
9. 推迟到 $(window).load
10. 压缩js
11. 全面掌握jQuery库

1. 总是从ID选择器开始继承

在jQuery中最快的选择器是ID选择器. 因为它直接来自于JavaScript的getElementById()方法.

<div id=“content”>
<form method=“post” action=“/”>
<h2>Traffic Light</h2>
<ul id=“traffic_light”>
<li><input type=“radio” class=“on” name=“light” value=“red” /> Red</li>
<li><input type=“radio” class=“off” name=“light” value=“yellow” /> Yellow</li>
<li><input type=“radio” class=“off” name=“light” value=“green” /> Green</li>
</ul>
<input class=“button” id=“traffic_button” type=“submit” value=“Go” />
</form>
</div>

像这样选择按钮是低效的:

var traffic_button = $(‘#content .button’);

用ID直接选择按钮效率更高:

var traffic_button = $(‘#traffic_button’);

选择多个元素

提到多元素选择其实是在说DOM遍历和循环, 这些都是比较慢的东西.为了提高性能, 最好从就近的ID开始继承.

var traffic_lights = $(‘#traffic_light input’); 

2. 在class前使用tag

第二快的选择器是tag选择器($(’head’)). 同理,因为它来自原生的getElementsByTagName() 方法.

<div id=“content”>
<form method=“post” action=“/”>
<h2>Traffic Light</h2>
<ul id=“traffic_light”>
<li><input type=“radio” class=“on” name=“light” value=“red” /> Red</li>
<li><input type=“radio” class=“off” name=“light” value=“yellow” /> Yellow</li>
<li><input type=“radio” class=“off” name=“light” value=“green” /> Green</li>
</ul>
<input class=“button” id=“traffic_button” type=“submit” value=“Go” />
</form>
</div>;

总是用一个tag name来限制(修饰)class (并且不要忘记就近的ID):

var active_light = $(‘#traffic_light input.on’);

注意: 在jquery中Class是最慢的选择器. IE浏览器下它会遍历所有DOM节点不管它用在那里.

不要用用tag name来修饰ID. 下面的例子将会遍历所有的div元素来查找id为’content’的哪一个节点:

var content = $(‘div#content’);

用ID修饰ID也是画蛇添足:

var traffic_light = $(‘#content #traffic_light’);

3.将jquery对象缓存起来

要养成将jquery对象缓存进变量的习惯.

永远不要这样做:

$(‘#traffic_light input.on).bind(’click‘, function(){…});
$(’#traffic_light input.on).css(‘border’, ‘3px dashed yellow’);
$(‘#traffic_light input.on).css(’background-color‘, ‘orange‘);
$(’#traffic_light input.on).fadeIn(’slow’);

最好先将对象缓存进一个变量然后再操作:

var $active_light = $(‘#traffic_light input.on’);
$active_light.bind(‘click’, function(){…});
$active_light.css(‘border’, ‘3px dashed yellow’);
$active_light.css(‘background-color’, ‘orange’);
$active_light.fadeIn(’slow’);

为了记住我们本地变量是jquery的封装, 通常用一个$作为变量前缀. 记住,永远不要让相同的选择器在你的代码里出现多次.

缓存jquery结果,备用

如果你打算将jquery结果对象用在程序的其它部分,或者你的function会多次执行, 那么就将他们缓存到一个全局变量中.

定义一个全局容器来存放jquery结果, 我们就可以在其它函数引用它们:

// 在全局范围定义一个对象 (例如: window对象)
window.$my =
{
// 初始化所有可能会不止一次要使用的查询
head : $(‘head’),
traffic_light : $(‘#traffic_light’),
traffic_button : $(‘#traffic_button’)
};

function do_something()
{
// 现在你可以引用存储的结果并操作它们
var script = document.createElement(’script’);
$my.head.append(script);

// 当你在函数内部操作是, 可以继续将查询存入全局对象中去.
$my.cool_results = $(‘#some_ul li’);
$my.other_results = $(‘#some_table td’);

// 将全局函数作为一个普通的jquery对象去使用.
$my.other_results.css(‘border-color’, ‘red’);
$my.traffic_light.css(‘border-color’, ‘green’);
}

4. 掌握强大的链式操作

上面的例子也可以写成这样:

var $active_light = $(‘#traffic_light input.on’);$active_light.bind(‘click’, function(){…})
.css(‘border’, ‘3px dashed yellow’)
.css(‘background-color’, ‘orange’)
.fadeIn(’slow’);

这样可以写更少的代码, 让我们的js更轻量.5.使用子查询

jQuery 允许我们对一个已包装的对象使用附加的选择器操作. 因为我们已经在保存了一个父级对象在变量里, 这样大大提高对其子元素的操作:

<div id=“content”>
<form method=“post” action=“/”>
<h2>Traffic Light</h2>
<ul id=“traffic_light”>
<li><input type=“radio” class=“on” name=“light” value=“red” /> Red</li>
<li><input type=“radio” class=“off” name=“light” value=“yellow” /> Yellow</li>
<li><input type=“radio” class=“off” name=“light” value=“green” /> Green</li>
</ul>
<input class=“button” id=“traffic_button” type=“submit” value=“Go” />
</form>
</div>

例如, 我们可以用子查询的方法来抓取到亮或不亮的灯, 并缓存起来以备后续操作.

var $traffic_light = $(‘#traffic_light’),
$active_light = $traffic_light.find(‘input.on’),
$inactive_lights = $traffic_light.find(‘input.off’);

提示: 你可以用逗号分隔的方法一次声明多个局部变量–节省字节数

6.对直接的DOM操作进行限制

这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM 。这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢。

例如,你想动态的创建一组列表元素, 千万不要这么做:

var top_100_list = […], // 假设这里是100个独一无二的字符串
$mylist = $(‘#mylist’); // jQuery 选择到 <ul> 元素

for (var i=0, l=top_100_list.length; i<l; i++)
{
$mylist.append(‘<li>’ + top_100_list[i] + ‘</li>’);
}

我们应该将整套元素字符串在插入进dom中之前全部创建好:

var top_100_list = […],
$mylist = $(‘#mylist’),
top_100_li = “”; // 这个变量将用来存储我们的列表元素

for (var i=0, l=top_100_list.length; i<l; i++)
{
top_100_li += ‘<li>’ + top_100_list[i] + ‘</li>’;
}
$mylist.html(top_100_li);

我们在插入之前将多个元素包裹进一个单独的父级节点会更快:

var top_100_list = […],
$mylist = $(‘#mylist’),
top_100_ul = ‘<ul id=”#mylist”>’;

for (var i=0, l=top_100_list.length; i<l; i++)
{
top_100_ul += ‘<li>’ + top_100_list[i] + ‘</li>’;
}
top_100_ul += ‘</ul>’; //关闭无序列表
$mylist.replaceWith(top_100_ul);

如果你做了以上几条还是担心有性能问题,那么:

• 试试jquery的 clone() 方法, 它会创建一个节点树的副本, 它允许以”离线”的方式进行dom操作, 当你操作完成后再将其放回到节点树里.
• 使用 DOM DocumentFragments. 正如jQuery作者所言, 它的性能要明显优于直接的dom操作.

  7. 冒泡

  除非在特殊情况下, 否则每一个js事件(例如:click, mouSEOver, 等.)都会冒泡到父级节点. 当我们需要给多个元素调用同个函数时这点会很有用.

  代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次, 并且可以计算出哪个节点触发了事件.

  例如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class

  像这样绑定事件是低效的:

  $(‘#entryform input).bind(’focus‘, function(){
  $(this).addClass(’selected‘);
  }).bind(’blur‘, function(){
  $(this).removeClass(’selected‘);
  });

  我们需要在父级监听获取焦点和失去焦点的事件:

  $(‘#entryform’).bind(‘focus’, function(e){
  var cell = $(e.target); // e.target grabs the node that triggered the event.
  cell.addClass(’selected’);
  }).bind(‘blur’, function(e){
  var cell = $(e.target);
  cell.removeClass(’selected’);
  });

  父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件. 如果你发现你给很多元素绑定了同一个事件监听, 那么你肯定哪里做错了.

  8.消除无效查询

  尽管jquery可以很优雅的处理没有匹配元素的情况, 但它还是需要花费时间去寻找. 如果你整站只有一个全局js, 那么极有可能把所有的jquery函数塞进$(document)ready(function(){//所有你引以为傲的代码})里.

  只运行在页面里用到的函数. 大多数有效的方法就是使用行内初始化函数, 这样你的模板就能准确的控制何时何处该执行js.

  例如, 你的”文章”页面模板, 你可能会引用如下的代码在body结束处:

  <script type=“text/javascript>
  mylib.article.init();
  </script>
  </body>

  如果你的页面模板包含一些多变的模块可能不会出现在页面中, 或者为了视觉呈现的原因你需要它们能够快速加载, 你可以将初始化函数紧跟在模块之后.

  <ul id=“traffic_light”>
  <li><input type=“radio” class=“on” name=“light” value=“red” /> Red</li>
  <li><input type=“radio” class=“off” name=“light” value=“yellow” /> Yellow</li>
  <li><input type=“radio” class=“off” name=“light” value=“green” /> Green</li>
  </ul>
  <script type=“text/javascript>
  mylib.traffic_light.init();
  </script>

  你的全局js库可能会是这样子的:

  var mylib =
  {
  article_page :
  {
  init : function()
  {
  // Article 特有的jQuery函数.
  }
  },
  traffic_light :
  {
  init : function()
  {
  // Traffic light 特有的jQuery函数.
  }
  }
  }

  9. 推迟到 $(window).load

  jquery对于开发者来说有一个很诱人的东西, 可以把任何东西挂到$(document).ready下冒充事件. 在大多数例子中你都会发现这样的情况.

  尽管$(document).rady 确实很有用, 它可以在页面渲染时,其它元素还没下载完成就执行. 如果你发现你的页面一直是载入中的状态, 很有可能就是$(document).ready函数引起的.

  你可以通过将jquery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率. 它会在所有的html(包括<iframe>)被下载完成后执行.

  $(window).load(function(){
  // 页面完全载入后才初始化的jQuery函数.
  });

  多余的功能例如拖放, 视觉特效和动画, 预载入隐藏图像,等等. 都是适合这种技术的场合.

  10. 压缩js

  推荐一个js在线压缩地址:  http://dean.edwards.name/packer/ 

  11. 全面掌握jquery库

  知己知彼, 百战百胜.  只有更深入的了解jQuery才能更灵活的使用它.  这里提供一个jQuery的速查手册, 可以打印出来随身携带.  要是有能力将jQuery源码通读一遍那就更好了.

  原文来自：jQuery Performance Rules ; 译文来自：Rlog.cn . 若转载请注明出处, 谢谢

  本文链接：http://www.blueidea.com/tech/web/2009/6737.asp　

连连看作为一个经典的游戏受到很多上班族的喜爱

我老婆就很喜欢玩这个游戏，好，给她做一个

做起来也不难，只要知道实现的原理，不管用什么语言都很容易实现

先看效果

 

 

怎么去实现呢？一下是我的实现原理

1. 加载图片将图片

2. 创造一个二维数组，保存成对的随机图片，并显示在屏幕上

3. 连接算法。

算法是关键，我的思路很简单，首先判断是不是在一条直线上

然后再判断经过两个折线是不是能连接，最后判断经过三条折线是不是能够连接

以下是核心代码

 

 

代码还未优化，仅供参考

Css Reset是什么? 有些同行叫 "css复位",有些可能叫 "默认css"…..
相信看完全文您会对Css Reset有个重新的认识

原文地址:
http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/

PS：

* {   
 padding: 0;   
 margin: 0;   
 } 

这就是最常用的Css Reset，但是这里会有很多问题。

原文前部分说了很多关于Css,以及各浏览器的css规则的不同,而制定"Css Reset"也是为了兼容与统一,正确有效的使用"Css Reset"可以在某种程度上节约时间与金钱.

非常感谢Perishable的整理与归纳

下面是关于几类Css Reset的简单介绍,本人能力有限.只能理解大概意思,还请各位看官见谅.

Minimalistic Reset [ Version 1 ]
相信这一段你经常看到.而且也是我们经常用到的

* {   
 padding: 0;   
 margin: 0;   
 }  

Minimalistic Reset [ Version 2 ]
border:0的设计有些不靠谱了

* {   
 padding: 0;   
 margin: 0;   
 border: 0;   
 }

Minimalistic Reset [ Version 3 ]
当然这个也是不推荐的.会跟某些默认样式有冲突

* {   
 outline: 0;   
 padding: 0;   
 margin: 0;   
 border: 0;   
 }   

Condensed Universal Reset
这是作者当前比较钟意的一种写法.保证了相对普遍浏览器样式的统一性.

* {   
 vertical-align: baselinebaseline;   
 font-weight: inherit;   
 font-family: inherit;   
 font-style: inherit;   
 font-size: 100%;   
 border: 0 none;   
 outline: 0;   
 padding: 0;   
 margin: 0;   
 }  

Poor Man’s Reset
其实这也是我们常用的一类Css Reset.对字体的大小复位,以及图片链接的边框处理.
也经常在某些站点看到

html, body {   
 padding: 0;   
 margin: 0;   
 }   
html {   
 font-size: 1em;   
 }   
body {   
 font-size: 100%;   
 }   
a img, :link img, :visited img {   
 border: 0;   
 }   

Shaun Inman’s Global Reset
作者认为Shaun写这类的Css Reset是有某种目的性.
而且这类规则是针对的是某些重要的常用浏览器.
比如ie,firefox等

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,    
form, fieldset, input, p, blockquote, table, th, td, embed, object {   
 padding: 0;   
 margin: 0;    
 }   
table {   
 border-collapse: collapse;   
 border-spacing: 0;   
 }   
fieldset, img, abbr {   
 border: 0;   
 }   
address, caption, cite, code, dfn, em,    
h1, h2, h3, h4, h5, h6, strong, th, var {   
 font-weight: normal;   
 font-style: normal;   
 }   
ul {   
 list-style: none;   
 }   
caption, th {   
 text-align: left;   
 }   
h1, h2, h3, h4, h5, h6 {   
 font-size: 1.0em;   
 }   
q:before, q:after {   
 content: '';   
 }   
a, ins {   
 text-decoration: none;   
 }   

Yahoo CSS Reset
yahoo这帮家伙写的Reset个人觉得可以推荐

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td {    
 padding: 0;   
 margin: 0;   
 }   
table {   
 border-collapse: collapse;   
 border-spacing: 0;   
 }   
fieldset,img {    
 border: 0;   
 }   
address,caption,cite,code,dfn,em,strong,th,var {   
 font-weight: normal;   
 font-style: normal;   
 }   
ol,ul {   
 list-style: none;   
 }   
caption,th {   
 text-align: left;   
 }   
h1,h2,h3,h4,h5,h6 {   
 font-weight: normal;   
 font-size: 100%;   
 }   
q:before,q:after {   
 content:'';   
 }   
abbr,acronym { border: 0;   
 }

Erik Meyer’s CSS Reset
作者将Erik Meyer的代码重新整理了.但功能上还是一样的
这套Css Reset是业内是使用最多的

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,    
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,    
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,    
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {   
 vertical-align: baselinebaseline;   
 font-family: inherit;   
 font-weight: inherit;   
 font-style: inherit;   
 font-size: 100%;   
 outline: 0;   
 padding: 0;   
 margin: 0;   
 border: 0;   
 }   
/* remember to define focus styles! */  
:focus {   
 outline: 0;   
 }   
body {   
 background: white;   
 line-height: 1;   
 color: black;   
 }   
ol, ul {   
 list-style: none;   
 }   
/* tables still need cellspacing="0" in the markup */  
table {   
 border-collapse: separate;   
 border-spacing: 0;   
 }   
caption, th, td {   
 font-weight: normal;   
 text-align: left;   
 }   
/* remove possible quote marks (") from <q> & <blockquote> */  
blockquote:before, blockquote:after, q:before, q:after {   
 content: "";  
 }  
blockquote, q {  
 quotes: "" "";   
 }   

Condensed Meyer Reset
总的来说这是对Erik Meyer的Css Reset的修改与提升.

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,    
pre, form, fieldset, input, textarea, p, blockquote, th, td {    
 padding: 0;   
 margin: 0;   
 }   
fieldset, img {    
 border: 0;   
 }   
table {   
 border-collapse: collapse;   
 border-spacing: 0;   
 }   
ol, ul {   
 list-style: none;   
 }   
address, caption, cite, code, dfn, em, strong, th, var {   
 font-weight: normal;   
 font-style: normal;   
 }   
caption, th {   
 text-align: left;   
 }   
h1, h2, h3, h4, h5, h6 {   
 font-weight: normal;   
 font-size: 100%;   
 }   
q:before, q:after {   
 content: '';   
 }   
abbr, acronym {    
 border: 0;   
 }   

最后有份关于Css Reset的使用者调查
http://css-tricks.com/poll-results-what-css-reset-do-you-use/

本文链接：http://www.blueidea.com/tech/web/2008/6165.asp　

2.1浏览器的差异在何处

 

     我想写CSS的人大多遇见过在IE里写的页面美轮美奂，而用FF打开却是分崩离析，反之亦然.这种痛苦是因为IE和FF对一些默认样式的解析并不相同所导致.

      网上有很多为何不一样的例子，下面链接是一个比较全的不同之处，大家可以进去看看。

     http://hi.baidu.com/css%D6%AE%C3%C0/blog/item/f44628e6a506c229b83820ef.html

 

2.2如何实现跨浏览器

2.2.1实现原理

     既然问题出在FF和IE对各种不同HTML元素的解析上所有偏差.更不用说一些其他小市场份额的浏览器上.我们只需要针对性的把页面里大多数HTML元素重置即可.这样在各种浏览器里面显示的效果会是相同的.

2.2.2实现方式

     重置我们选择的名称和大多数框架一样,reset.css,用我们Develper的思想理解——–框架中所有元素的基类,就像.net里的Object对象一样。

     下面我们来说说reset.css的构成.

1.       首先定义最基本的body,因为所有其他元素都由此继承.我喜欢的框架遵循“尽量保持小”的原则，所以我只简单清除padding和margin,以及设置字体(设置成具体数值，因为在后面用’em’做单位的时候都要以这里做比较,页面风格需要整体变化时,重载这里.)

2.       将大量浏览器预定义的块状元素清除magin和padding(块装元素即在未定义样式的情况下浏览器render出来的方式为display:block;的元素)

3.       让列表前面的符号消失,图片边框消失,p的上下边距为一行字.

     我喜欢reset.css尽量保持简洁.只要实现了基本的重置即可.

     PS:不过也不能过于简洁.记得曾经的框架喜欢对”*”这个CSS选择符重置.可是这个杀伤力太大，往往是杀敌1000自伤800，遇到input之类的表单元素时还得重置回来.最后据传说这样还有性能问题-.-!!不过难以考证…

     下面是满足上面条件最基本的reset.css

 

 

 

   这个reset.css是目前我个人最喜欢，因为reset.css就像.net中的Framework中的Object类一样，应该尽量保持精简,这个精简了很多.只留下了必要的重置.

   在这里值得一说的是：在body里将font的大小和字体设置了具体的值,在其他元素里通过继承的方式来重写这样的方式是我最喜欢的，这样可以很容易的保持页面整体风格的统一

2.3一些注意事项

   Reset.css一经写好，除了BUG之外.永远不要去修改它.而是在其它页面中重载它（不知道用OO的方式理解CSS是否正确，即利用CSS的优先级特性覆盖.这个在下一章说到.）