4月, 2013 | 奶牛博客

my blog my blog

Monthly 4月 2013

CSS之使用clearfix清除浮动

好多东西，现用现学现查，然后记录下来，这几年都是这样子。看过很多东西，但是未必都记住了，有点儿印象，然后需要的时候再现学。今天分享下clearfix。

首先，奶牛直接copy下bootstrap里面的写法：

.clearfix { 
  *zoom: 1; 
} 
 
.clearfix:before, 
.clearfix:after { 
  display: table; 
  line-height: 0; 
  content: ""; 
} 
 
.clearfix:after { 
  clear: both; 
}

在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹，可以保证外部div的height，即清除"浮动元素脱离了文档流，包围图片和文本的 div 不占据空间"的问题。

看到”闲聊CSS之关于clearfix–清除浮动“ （http://www.indievox.com/e2ghost/post/50238）的文章给了一个比较清晰的分析：

构成Block Formatting Context的方法有下面几种： 
 
    float的值不为none。 
    overflow的值不为visible。 
    display的值为table-cell, table-caption, inline-block中的任何一个。 
    position的值不为relative和static。 
 
很明显，float和position不合适我们的需求。那只能从overflow或者display中选取一个。
因为是应用了.clearfix和.menu的菜单极有可能是多级的，所以overflow: hidden或overflow: auto也不满足需求
（会把下拉的菜单隐藏掉或者出滚动条），那么只能从display下手。 
 
我们可以将.clearfix的display值设为table-cell, table-caption, inline-block中的任何一个
但是display: inline-block会产生多余空白，所以也排除掉。
剩下的只有table-cell, table-caption，为了保证兼容可以用display: table来使.clearfix形成一个Block Formatting Context
因为display: table会产生一些匿名盒子，这些匿名盒子的其中一个（display值为table-cell）会形成Block Formatting Context。
这样我们新的.clearfix就会闭合内部元素的浮动。

这就是为什么选择display:table的原因。

奶牛 | 2013年04月28日 0

Java

Java Date类型数据格式化输出

Java的Date直接输出样子十分不爽，借助SimpleDateFormat可以输出为自己希望的格式，而且十分方便。

日期和时间模式	结果
`"yyyy.MM.dd G 'at' HH:mm:ss z"`	`2001.07.04 AD at 12:08:56 PDT`
`"EEE, MMM d, ''yy"`	`Wed, Jul 4, '01`
`"h:mm a"`	`12:08 PM`
`"hh 'o''clock' a, zzzz"`	`12 o'clock PM, Pacific Daylight Time`
`"K:mm a, z"`	`0:08 PM, PDT`
`"yyyyy.MMMMM.dd GGG hh:mm aaa"`	`02001.July.04 AD 12:08 PM`
`"EEE, d MMM yyyy HH:mm:ss Z"`	`Wed, 4 Jul 2001 12:08:56 -0700`
`"yyMMddHHmmssZ"`	`010704120856-0700`
`"yyyy-MM-dd'T'HH:mm:ss.SSSZ"`	`2001-07-04T12:08:56.235-0700`

这是SimpleDateFormat支持的输出格式，其实通过第一条我们就可以随便定义我们的输出了，只要知道年月日时分秒，然后自己添加词到输出的String就可以了。直接上一个例子就都明白了。

import java.text.SimpleDateFormat; 
import java.util.Date; 
 
public class dateformat { 
 
    public static void main(String[] args) { 
        // TODO Auto-generated method stub 
        Date date = new Date(); 
        String sdf = new SimpleDateFormat("yyyy'年'MM'月'dd'日' HH:mm:ss") 
                .format(date); 
        System.out.print(sdf); 
 
    } 
 
}

输出结果是：2013年04月26日 18:11:12

(奶牛时间，格式自己定就ok了，直接用‘’将文字分隔开就可以了，很方便)

奶牛 | 2013年04月26日 0

Windows

Word 卡cpu 的解决方案！

最近一直被word excel 卡cpu的事整的很烦恼，因为我的电脑还是奔4的老牛车，补经折腾啊，经过下面方法修改后马上加快速度。

打开word最上面工具—选项，找到拼写和语法去掉下面几项的勾勾

键入时检查拼写

总提出更正建议

键入时检查语法

最后备注一下这个是window下的word2003

很久很久没来这里码字了，今天就马几个字献给大家把

奶牛 | 2013年04月25日 1

建站心得网络杂记

TinyMCE多输入框手动激活解决方案

昨晚弄那个TinyMCE编辑器，对于单输入框的时候还是比较好处理的，直接自动生成实例就激活了，但是当一个页面有多个输入框的时候就变得很复杂了。比如有三个四个的输入框，默认生成实例激活的话会很难看很乱，我们的目标是当一个输入框onfocus状态的时候激活TinyMCE编辑器，激活另一个输入框onfocus状态的时候，已激活的TinyMCE编辑器关闭，并在新的输入框中显示编辑器。

对于已经初始化好的textarea我们可以通过如下调用textarea id的方法进行显示和关闭：

tinyMCE.get('nenew').show(); 
tinyMCE.get('nenew').hide();

但是如果直接在tinymce的tinymce.init()之后调用会发生error，因为tinymce的实例可能还并没有初始化完成，所以我们需要一个回调，TinyMCE的API还是很全面的，虽然昨晚用的那个API有点儿小麻烦，不过已经折腾成功，经验分享下。

This option should contain a function name to be executed each time a editor instance is initialized. The format of this function is: initInstance(inst) where inst is the editor instance object reference.

Example of usage of the init_instance_callback option:

function myCustomInitInstance(inst) { 
        alert("Editor: " + inst.editorId + " is now initialized."); 
} 
tinyMCE.init({ 
        ... 
        init_instance_callback : "myCustomInitInstance" 
});

上面是init_instance_callback的回调接口，但是还是得仔细读读那段说明：“这个选项在每个编辑器实例初始化完成后都要执行一次，这个function的格式是function callback(inst)，而这个inst就是刚刚初始化完成的实例。”

可能看到上面的话你会觉得有些绕，对于后半句的那个功能是针对实例初始化完成后调用的，这是我们所需要的，但是请注意，这个回调是在每个实例初始化完成后都执行的，换句话说，你有4个textarea这个callback就要执行四次，但是如果你在这个callback中执行了针对未初始化的实例的操作，就会发生错误导致js无法继续进行初始化。

针对我们上面所说的，我们的目的是在所有textarea实例初始化完成后执行对于实例的隐藏，所以如果我们有三个实例的话，我们只要在第三个实例初始化完成后执行一次就可以了。直接上代码：

<form> 
<textarea id="1"  
onfocus="tinyMCE.get('1').show();tinyMCE.get('1').focus();tinyMCE.get('2').hide();tinyMCE.get('3').hide();"> 
</textarea> 
<textarea id="2"  
onfocus="tinyMCE.get('2').show();tinyMCE.get('2').focus();tinyMCE.get('1').hide();tinyMCE.get('3').hide();"> 
</textarea> 
<textarea id="3"  
onfocus="tinyMCE.get('3').show();tinyMCE.get('3').focus();tinyMCE.get('1').hide();tinyMCE.get('2').hide();"> 
</textarea> 
</from>

这个是表单的形式，也就是在每次onfocus状态的时候tinymce的激活关闭与选中，下面是javascript的初始化

<script src="editor/tinymce.min.js"></script> 
<script type="text/javascript"> 
    tinymce 
            .init({ 
                selector : "textarea", 
                plugins : [ 
                        "advlist autolink lists link image charmap print preview anchor", 
                        "searchreplace visualblocks code fullscreen", 
                        "insertdatetime media table contextmenu paste" ], 
                toolbar : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
                autosave_ask_before_unload : false, 
                max_height : 200, 
                min_height : 160, 
                height : 180, 
                init_instance_callback : "hidetinymce" 
 
            }); 
    var i = 3; 
    function hidetinymce(inst) { 
        if (--i == 0) { 
            try { 
                tinyMCE.get('1').hide(); 
                tinyMCE.get('2').hide(); 
                tinyMCE.get('3').hide(); 
            } catch (error) { 
 
            } 
        } 
    } 
</script>

我们用一个变量i来做计数器，当实例3初始化完成后执行try内的内容，然后即可完成实例初始化完成后执行隐藏。

PS：tinymce的新版本还是蛮好看的，跟bootstrap的白色主题很搭，让人很喜欢。

奶牛 | 2013年04月21日 0

Java 网络杂记

Hibernate一对多查询方法小记

其实，这个地方我真心不是太明白，甚至说很混乱，但是有DAO和VO就啥都当对象来吧。

比如两个表User和Profile，通过外键将其关联起来，user的主键为profile的外键，通过Hibernate生成DAO和VO，则userDAO中会有很多查询user的方法，而user的VO会多一个set类的getProfiles()，如何通过这个set来查询VO的profile信息呢，查了一些资料，算是知道怎么回事儿了。

public Set getProfiles() { 
        return this.profiles; 
}

user VO的get方法得到的是profile类型的set，也就是说这个set迭代出来的是profile对象。使用方法可以是：

User user = new User(); 
Set<Profile> profileset = user.getProfiles(); 
Iterator<Profile> iterator = profileset.iterator(); 
While(iterator.hasNext()){ 
        Profile profile = iterator.next(); 
        System.out.print(profile.getEmail); 
}

这样子就迭代出来了。

对于profile的VO也同样有public User getUser()方法，可以直接返回user VO对象。

ProfileDAO如何通过外键来查找vo对象的方法：

ProfileDAO profiledao = new ProfileDAO(); 
Iterator<Profile> i = profiledao.findByProperty("user.id",1).iterator(); 
while(i.hasNext()){ 
     Profile p = i.next(); 
     System.out.print(p.getEmail); 
}

有了上面的互相查询的方法，这个看着仿佛是多此一举，不过也还算可用。

奶牛 | 2013年04月19日 0

建站心得

关于XMLHttpRequest状态的讨论及处理方法

这两天把html5的Drag 、File API 和XMLHttpRequest Level 2的一些东西看了下，写了几个小demo，可以实现文件拖放进入浏览器，文件预览以及文件上传，打算过几天好好整理下，然后推到github上做个开源小项目。

今天主要是讨论下XMLHttpRequest的响应状态问题。我们知道，XMLHttpRequest的响应阶段有5个，分别是：

 请求未初始化 
 服务器连接已建立 
 请求已接收 
 请求处理中 
 请求已完成，且响应已就绪

我们是通过onreadystatechange来进行判断的，我们可以得到的状态只有4个。就是从服务器链接已建立到请求完成。昨天也搜索了下网络，对这个状态的分析并不是很多，奶牛自己测试了下，分享下。

首先，正常情况下，我们可以得到4个阶段的情况，一个成功的请求并得到响应的readyState及status如下：

 readyState:1   status:0 
 readyState:2   status:200 
 readyState:3   status:200 
 readyState:4   status:200

也就是说，当请求到达“请求已接收”阶段的时候就已经反馈回来了http status，就是我们看到的200，这个是正常的状态。

我们来设想这样一种情景：我们请求交互的服务器与我们的网络并不连通，或者说目标服务器已经下线、服务器无响应，会是种什么状态呢？应该如何处理呢？这是不是响应超时呢？我们来测试下：

 readyState:1   status:0 
 POST http://127.0.0.1/upload 
 readyState:2   status:0 
 readyState:4   status:0

通过结果我们可以看出，我们的请求已经发出，但是由于服务器对接收到的请求并没有应答，因此我们并没有得到服务器的响应状态，并且服务器的处理状态我们也不得而知，也就是为什么没有readyState3的原因，而在readyState4的阶段，我们得到的status是0，这也就是我们需要来处理的状态，即readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)，这个状态我们应该归结为error、abort、timeout还是其它呢？

奶牛把它分类到其它里面，处理方法在onreadystatechange里面处理。

 xhr.onreadystatechange = function() { 
      console.log("readyState:"+xhr.readyState+"   status:"+xhr.status); 
      if (xhr.readyState == 4 && xhr.status == 200) { 
           console.log("Request successful!");}; 
      if(xhr.readyState == 4 && xhr.status == 0){ 
           console.log("No response from server!"); 
      }; 
 };

对于服务器无应答无响应或者错误状态的处理方法都应放在onreadystatechange，http status有很多，可参考http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html

在XMLHttpRequest Level 2里面有新增加一个timeout的设置及处理方法，超时是指request请求并没有在规定的时间内完成的一种情况，设置方法如下：

 xhr.timeout = 3000; 
 xhr.ontimeout = function(event){ 
     　　　　alert('time out !'); 
     　　}

这样子，如果在3秒内交互未完成，则提示超时并终止，我们假设一种极端的情况，既在1ms内服务器未能完成请求，这种状态很容易得到，我们来看下反馈信息：

 readyState:1   status:0 
 POST http://127.0.0.1/upload 
 readyState:4   status:0

当然，在非极端的情况下，也就是说在变化阶段2、3的时候如果超时，则readyState == 4的时候也有 status ==0 ，所以，我们可以把超时归结到readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态，但是并不能把readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态说是超时，因为超时是在服务器有反馈的时候才有效的，即在readyState ==2 时候status有具体响应值的时候，所以readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态是包含超时状态的。

而对于readyState == 4 && status == 0(xhr.readyState == 4 && xhr.status == 0)的状态可以用上文中的方法进行处理。

奶牛 | 2013年04月15日 0

Java Linux Ubuntu Windows

github使用的基本方法

好吧，只说最基本的。

1.安装git环境

2.建立repo，从github的个人页面建立

3.初始化

mkdir nenew 
cd nenew 
touch README.md 
vim README.md 
git init 
git add README.md 
git commit -m "set up git repo by nenew" 
git remote add origin https://github.com/xxxx/nenew.git 
git push -u origin master

这时候你的第一条readme就已经更新到了你的repo。

4.之后的使用

touch a,b,c,d 
git add ./ 
git commit -a -m "a b c d files added" 
git push origin master

这是最基本的使用方法，当然，git提供了众多功能，可以参考：https://gitcafe.com/GitCafe/Help

奶牛 | 2013年04月12日 0

建站心得

JavaScript forEach方法

最近看了一些html5和js方面的书，受益匪浅，因为看的东西比较多，却都没有怎么静心来做整理，慢慢来吧，可能最近自己有点儿小紧张。今天跟大家分享下JavaScript的forEach方法（其实是从《HTML5程序设计》这本书里看到的一种方法）。

首先说下JavaScript的forEach的标准格式。

为数组中的每个元素执行指定操作。

array1.forEach(callbackfn[, thisArg])

参数	定义
array1	必需。一个数组对象。
callbackfn	必需。一个接受最多三个参数的函数。对于数组中的每个元素，forEach 都会调用 callbackfn 函数一次。
thisArg	可选。可在 callbackfn 函数中为其引用 this 关键字的对象。如果省略 thisArg，则 undefined 将用作 this 值。

如果 callbackfn 参数不是函数对象，则将引发 TypeError 异常。

对于数组中的每个元素，forEach 方法都会调用 callbackfn 函数一次（采用升序索引顺序）。不为数组中缺少的元素调用该回调函数。

除了数组对象之外，forEach 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。

回调函数语法

回调函数的语法如下所示：

function callbackfn(value, index, array1)

可使用最多三个参数来声明回调函数。

回调函数的参数如下所示。

回调参数	定义
value	数组元素的值。
index	数组元素的数字索引。
array1	包含该元素的数组对象。

修改数组对象

forEach 方法不直接修改原始数组，但回调函数可能会修改它。

好吧，上面是从微软的http://technet.microsoft.com/zh-cn/ff679980%28v=vs.85%29页面copy过来的，有兴趣的直接去那里看就好了。也就是说一般方法的格式是：

arrayx.forEach(function(value,index,arrayy){…})

但对于NodeList要用下面的写法。

[].forEach.call(lists,function(valule.index.arrayy){…})

Why can’t I use forEach or map on a NodeList?

NodeList are used very much like arrays and it would be tempting to use Array.prototype methods on them. This is, however, impossible.

JavaScript has an inheritance mechanism based on prototypes. Array instances inherit array methods (such as forEach or map) because their prototype chain looks like the following:

myArray --> Array.prototype --> Object.prototype --> null (the prototype chain of an object can be obtained by calling several times Object.getPrototypeOf)

forEach, map and the likes are own properties of the Array.prototype object.

Unlike arrays, NodeList prototype chain looks like the following:

myNodeList --> NodeList.prototype --> Object.prototype --> null

NodeList.prototype contains the item method, but none of the Array.prototype methods, so they cannot be used on NodeLists.

实例

[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) { 
  localStorage['bucket' + i] = elem.getAttribute('data-bucket'); 
});

奶牛 | 2013年04月12日 1

Java

hibernate真心挺折腾的

还是比较习惯mysql直接用sql语句来查询，HQL还需要习惯习惯再习惯哇。

这两天折腾Hibernate真的挺纠结的，可能我对于对象这东西的理解太水了，先ermaster做了数据库，然后用hibernate的逆向工程生成了hibernate的对象类，然后就sb了。

映射那里仔细看下，才知道，表b外键关联表a主键的时候，并木有在表b的对象类中直接生成表a主键，而是直接把表a的对象给引入进去了。呃，解释有点儿混乱。这样子，就说设计的两个表吧，主表是main，有主键id，生成的对象类是Main，然后副表是profile，有主键profileid和外键id，生成的副表对象类是Profile。

Profile p = new Profile(); 
Main m = new Main(); 
p.setMain (m); 
session.saveOrUpdate(p)

这样子就把一个新的profile对象存上了，但是p并没有外键属性id，因此无法用HQL的from Profile where id = x来查询，但是其实p是有p.main的，所以要查询的时候使用from Profile where main.id = x来获得已添加的p对象。挺绕的。可能map映射改下就不用那么麻烦了。可能数据库的结构还要变，把isxxx的判断都放到main表中，明天再思考这个问题。

还有那个from xxx.class 1这个东东，明天再查查。

奶牛 | 2013年04月9日 3

Java Linux Windows

设计数据库ER模型图利器ERMaster

ERMaster是eclipse的一个插件，用于设计ER模型图。提供的功能包括：从数据库导入关系生成ER图，导出设计图，导出DDL数据定义语句等。目前完整支持的数据库包括 MySQL、PostgreSQL 和Oracle (developing) DB2 (developing) HSQLDB (developing) SQLITE (developing) SQLServer (developing)。

安装方法很简单，只要在eclipse的插件里面添加地址就可以安装了

http://ermaster.sourceforge.net/update-site/

使用也很方便，table直接拖出来，然后1toN NtoN之类的关系都可以直接搞定，并且可以导出ddl，在mysql下直接source下就生成数据表了，ermaster还可以生成测试数据，但是需要自己配置下，比如enum跟boolean的值会有问题。

总之还是很好用的，推荐下。

奶牛 | 2013年04月6日 0

Example of usage of the init_instance_callback option:

回调函数语法

修改数组对象

Why can’t I use forEach or map on a NodeList?

实例

分类

文章归档