稚子的成长博客 | 记录网站开发解决方案｜IT业界动态｜生活随想…

jQuery中$.extend()与$.fn.extend()插件的理解

发表于2015 年 12 月 29 日由稚子

插件开发包括两种：1.类级别的插件开发，即$.extend()扩展jquery对象本身；2.对象级别的插件开发，即$.fn.extend()扩展jquery元素集来提供新的方法。

1.类级别的插件开发

(function($){
$.extend({
hello:function(){alert("hello world");},
world:function(){alert(hello world);}
})
})(jQuery)

(function($){

$.extend({

hello:function(){alert("hello world");},

world:function(){alert(hello world);}

})

})(jQuery)

调用：$.hello(),$.world()

2.采用命名空间

(function($){
$.myExtend({
hello:function(){alert("hello world");},
world:function(){alert(hello world);}
})
})(jQuery)

(function($){

$.myExtend({

hello:function(){alert("hello world");},

world:function(){alert(hello world);}

})

})(jQuery)

调用：$.myExtend.hello(),$.myExtend.world()

2.对象级别的插件开发

(function($){
$.fn.extend({
myAnimate:function(){}
})
})(jQuery)

(function($){

$.fn.extend({

myAnimate:function(){}

})

})(jQuery)

调用：$(“#myAnimate”).myAnimate()

(function($){
$.fn.myAnimate=function(){}
})(jQuery)

(function($){

$.fn.myAnimate=function(){}

})(jQuery)

调用：$(“#myAnimate”).myAnimate()

3.$.extend()有两种用法

一种是扩展方法，如上述所示。

另一种是合并对象获得一个新的对象，$([deep],target,options,defaluts,…),

例如：

var settings={validate:false,limit:5,name:"sm"};
var defaults={validate:true,limit:2}
var settings=$.extend(settings,defaults);

var settings={validate:false,limit:5,name:"sm"};

var defaults={validate:true,limit:2}

var settings=$.extend(settings,defaults);

结果：settings={validate:true,limit:2,name:”sm”}

var empty={};
var options={validate:false,limit:5,name:"sm"};
var defaults={validate:true,limit:2}
var settings=$.extend(empty,options,defaults);

var empty={};

var options={validate:false,limit:5,name:"sm"};

var defaults={validate:true,limit:2}

var settings=$.extend(empty,options,defaults);

结果：settings={validate:true,limit:2,name:”sm”};

deep可以为ture或false

var result={true,{},name:"a",num:3,location:{city:"H",county:"A"},location:{state:"D",county:"CH"}}

1	var result={true,{},name:"a",num:3,location:{city:"H",county:"A"},location:{state:"D",county:"CH"}}

结果：result={name:”a”,num:3,location:{city:”H”,state:”D”,county:”CH”}}

var result={false,{},name:"a",num:3,location:{city:"H",county:"A"},location:{state:"D",county:"CH"}}

1	var result={false,{},name:"a",num:3,location:{city:"H",county:"A"},location:{state:"D",county:"CH"}}

结果：result={name:”a”,num:3,location:{state:”D”,county:”CH”}}

4.匿名函数(最大的用途是创建闭包)

例如：(function($){})(jQuery)等价于!function(){}(jQuery)<这个用在bootstrp框架中>

5.回到顶部的例子

(function($){
    $.extend({
        myScrollUp:function(options){
            var defaults={
                    scrollName:"scrollUp",
                    topDistance:"300",
                    topSpeed:300,
                    animation:"slide",
                    animationInSpeed:200,
                    animationOutSpeed:200,
                    scrollText:"回到顶部",
                    activeOverlay:false
                }
            var defaults=$.extend(defaults,options);
            var sn="#"+defaults.scrollName,
                td=defaults.topDistance,
                ts=defaults.topSpeed,
                an=defaults.animation,
                is=defaults.animationInSpeed,
                os=defaults.animationOutSpeed,
                st=defaults.scrollText,
                ao=defaults.activeOverlay;
            $("<a/>",{id:defaults.scrollName,title:st,text:st,herf:"#top"}).appendTo("body");
            $(sn).css({"position":"fixed","display":"none","z-index":"123456789"});
            if(ao)
            {
                $("body").append("<div id='"+defaults.scrollName+"-active'></div>");
                $(sn+"-active").css({"position":"absolute","top":td+"px","width":"100%","border-top":"1px dotted "+ao,"z-index":"2147483647"})
            }
            $(window).scroll(function(){
                if(an==="fade")
                    $($(window).scrollTop()>td?$(sn).fadeIn(is):$(sn).fadeOut(os));
                else if(an==="slide")
                    $($(window).scrollTop()>td?$(sn).slideDown(is):$(sn).slideUp(os));
                else
                    $($(window).scrollTop()>td?$(sn).show():$(sn).hide());
            });
            $(sn).click(function(event){
                $("html, body").animate({scrollTop:0},ts);
                return false
            })
        }
    })
})(jQuery);

(function($){

$.extend({

myScrollUp:function(options){

var defaults={

scrollName:"scrollUp",

topDistance:"300",

topSpeed:300,

animation:"slide",

animationInSpeed:200,

animationOutSpeed:200,

scrollText:"回到顶部",

activeOverlay:false

}

var defaults=$.extend(defaults,options);

var sn="#"+defaults.scrollName,

td=defaults.topDistance,

ts=defaults.topSpeed,

an=defaults.animation,

is=defaults.animationInSpeed,

os=defaults.animationOutSpeed,

st=defaults.scrollText,

ao=defaults.activeOverlay;

$("<a/>",{id:defaults.scrollName,title:st,text:st,herf:"#top"}).appendTo("body");

$(sn).css({"position":"fixed","display":"none","z-index":"123456789"});

if(ao)

{

$("body").append("<div id='"+defaults.scrollName+"-active'></div>");

$(sn+"-active").css({"position":"absolute","top":td+"px","width":"100%","border-top":"1px dotted "+ao,"z-index":"2147483647"})

}

$(window).scroll(function(){

if(an==="fade")

$($(window).scrollTop()>td?$(sn).fadeIn(is):$(sn).fadeOut(os));

else if(an==="slide")

$($(window).scrollTop()>td?$(sn).slideDown(is):$(sn).slideUp(os));

else

$($(window).scrollTop()>td?$(sn).show():$(sn).hide());

});

$(sn).click(function(event){

$("html, body").animate({scrollTop:0},ts);

return false

})

}

})

})(jQuery);

发表在 Web前台开发技术 | 标签为 extend, jQuery | 留下评论

47种常见的浏览器兼容性问题大汇总

发表于2015 年 12 月 29 日由稚子

JavaScript

1. HTML对象获取问题
FireFox：document.getElementById(“idName”);
ie:document.idname或者document.getElementById(“idName”).
解决办法：统一使用document.getElementById(“idName”);

2. const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.
解决方法：统一使用var关键字来定义常量.

3. event.x与event.y问题
说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

4. window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.
解决方法：使用window.location来代替window.location.href.

5. frame问题
以下面的frame为例：

(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName可以同名。
Firefox:只能使用window.frameName来访问这个frame对象.
另外，在IE和Firefox中都可以使用window.document.getElementById(“frameId”)来访问这个frame对象.
(2)切换frame内容:
在 IE和Firefox中都可以使用window.document.getElementById(“testFrame”).src = “xxx.html”或window.frameName.location = “xxx.html”来切换frame的内容.
如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，可以在frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value=”Aqing”;

6. 模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.
例如：var parWin = window.opener; parWin.document.getElementById(“Aqing”).value = “Aqing”;

7. firefox与IE的父元素(parentElement)的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.

8. document.formName.item(”itemName”) 问题
问题说明：IE下，可以使用document.formName.item(”itemName”) 或document.formName.elements [“elementName”]；Firefox 下，只能使用document.formName.elements[“elementName”]。
解决方法：统一使用document.formName.elements[“elementName”]。

9. 集合类对象问题
问题说明：IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ]获取集合类对象。
解决方法：统一使用 [] 获取集合类对象。

10. 自定义属性问题
问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute() 获取自定义属性；Firefox下，只能使用getAttribute() 获取自定义属性。
解决方法：统一通过getAttribute() 获取自定义属性。

11. input.type属性问题
问题说明：IE下input.type属性为只读；但是Firefox下input.type属性为读写。
解决办法：不修改input.type属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。

12. event.srcElement问题
问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
解决方法：使用srcObj = event.srcElement ?event.srcElement : event.target;
如果考虑第8条问题，就改用myEvent代替event即可。

13. body载入问题
问题说明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则必须在body标签被浏览器完全读入之后才存在。
[注] 这个问题尚未实际验证，待验证后再来修改。
[注] 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。

14. 事件委托方法
问题说明：IE下，使用document.body.onload = inject; 其中function inject()在这之前已被实现；在Firefox下，使用document.body.onload = inject();
解决方法：统一使用document.body.onload=new Function(’inject()’); 或者document.body.onload = function(){/* 这里是代码 */}
[注意] Function和function的区别。

15. Table操作问题
问题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。
解决方法：//向table追加一个空行：
var row = otable.insertRow(-1);var cell = document.createElement(“td”);cell.innerHTML = “”;cell.className = “XXXX”;row.appendChild(cell);[注] 由于俺很少使用JS直接操作表格，这个问题没有遇见过。建议使用JS框架集来操作table，如JQuery。

16. 对象宽高赋值问题
问题说明：FireFox中类似obj.style.height = imgObj.height的语句无效。

CSS

1. cursor:hand VS cursor:pointer
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer

2. innerText在IE中能正常工作，但在FireFox中却不行.
需用textContent。
解决方法:

if(navigator.appName.indexOf("Explorer")   >   -1){
    document.getElementById('element').innerText = "my   text";
}else{
    document.getElementById('element').textContent = "my   text";
}

if(navigator.appName.indexOf("Explorer") > -1){

document.getElementById('element').innerText = "my text";

}else{

document.getElementById('element').textContent = "my text";

}

3. CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
opacity 透明，子元素会继承透明属性。解决方式：

(1)使用 background:rgba(0,0,0,.6) //IE8及以下无效果。
(2)使用定位，背景色与子元素处于同级关系。

4. css中的width和padding
在IE7和FF中width宽度不包括padding，在Ie6中包括padding.

5. FF和IEBOX模型解释不一致导致相差2px
box.style{width:100;border 1px;}
ie理解为box.width = 100
ff理解为box.width = 100 + 1*2 = 102 //加上边框2px

解决方法：div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

6. IE5 和IE6的BOX解释不一致
IE5下div{width:300px;margin:0 10px 0 10px;}
div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

7. ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

8. 元素水平居中问题
FF: margin:0 auto;

IE: 父级{ text-align:center; }

9. Div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高：line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。

10. margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

例如：

<div id=”imfloat”>
相应的css为

#imfloat{
    float:left;
    margin:5px;/*IE下理解为10px*/
    display:inline;/*IE下再理解为5px*/
}

#imfloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/

}

11. IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

1	#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

12. 页面的最小宽度
如上一个问题，IE不识别min，要实现最小宽度，可用下面的方法：

#container{ min-width: 600px; width:expression(document.body.clientWidth＜ 600? “600px”: “auto” );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

13. DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

<style>
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
</style>
<div id="box">
<div id="left">＜/div>
<div id="right">＜/div>
</div>

<style>

#box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

*html #left{ margin-right:-3px; //这句是关键}

</style>

</div>

14. IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

15. float的div闭合;清除浮动;自适应高度
① 例如：＜div id=”floatA”>＜div id=”floatB”>＜div id=”NOTfloatC”>

这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)

这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在＜div class=”floatB”>＜div class=”NOTfloatC”>之间加上＜div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可：.clear{clear:both;}

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：

.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

<div id=”page”>

<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>

</div>

</div>

比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决：

<div id=”page”>

<div id=”bg” style=”float:left;width:100%”>

<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>

</div>

</div>

</div>

再嵌入一个float left而宽度是100%的DIV解决之。

或者另一种方法：用选择器（：after）在page之后插入一个空标签,并清除浮动

.page:after {  content: ""; display: table; clear: both; }

1	.page:after { content: ""; display: table; clear: both; }

④万能float 闭合(非常重要!)

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix” 即可,屡试不爽。

/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */

/* Clear Fix */

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

.clearfix { display:inline-block; }

/* Hide from IE Mac */

.clearfix {display:block;}

/* End hide from IE Mac */

/* end of clearfix */

或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}

16. 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding时。

例：

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p对象中的内容＜/p>
</div>

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

<p>p对象中的内容＜/p>

</div>

解决技巧：在P对象上下各加2个空的div对象CSS代码{height:0px;overflow:hidden;}或者为DIV加上border属性。

17. IE6下图片下有空隙产生
解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom 都可以解决.

18. 对齐文本与文本输入框
加上vertical-align:middle;

<style type="text/css">
<!--
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
-->
</style>

<!--

input {

width:200px;

height:30px;

border:1px solid red;

vertical-align:middle;

}

-->

</style>

经验证，在IE下任一版本都不适用，而ff、opera、safari、chrome均OK！

19. LI中内容超过长度后以省略号显示
此技巧适用与IE、Opera、safari、chrom浏览器，FF暂不支持。

<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}

-->
</style>

<!--

li {

width:200px;

white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

overflow: hidden;

}

-->

</style>

20. 为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--

html {

scrollbar-face-color:#f6f6f6;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eeeeee;

scrollbar-3dlight-color:#eeeeee;

scrollbar-arrow-color:#000;

scrollbar-track-color:#fff;

scrollbar-darkshadow-color:#fff;

}

-->

</style>

21. 为什么无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多：

例如:overflow:hidden　 zoom:0.08 　 line-height:1px

22.怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明

23. 链接(a标签)的边框与背景
a链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照menubar, 给 a 和menubar设置高度是为了避免底边显示错位, 若不设 height, 可以在menubar中插入一个空格。

24. 超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

Code:

<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>

<!--

a:link {}

a:visited {}

a:hover {}

a:active {}

-->

</style>

25. FORM标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}。

26. 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

27. 为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

{
height:auto!important;
height:200px;
min-height:200px;
}

{

height:auto!important;

height:200px;

min-height:200px;

}

28. IE和FireFox 对空格的尺寸解释不同
FireFox为4px,IE为8px; FireFox对div与div之间的空格是忽略的，但是IE是处理的。因此在两个相邻div之间不要有空格跟回车，否则可能造成不同浏览间之间格式不正确，比如著名的3px偏差（多个img标签连着，然后定义float: left;结果在firefox里面正常，而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。解决方法是在img外面套li，并且对li定义margin: 0; 避免方式：在必要的时候不要无视 list 标签）而且原因难以查明。

29. 条件注释

<link rel="stylesheet" type="text/css" href="css.css" />

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

<!--[if IE 7]>

<![endif]-->

<!--[if lte IE 6]>

<![endif]-->

lte — 小于等于
lt  — 小于
gte —  大于等于
gt  —  大于
！ —  不等于

30.强制渲染

<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>    //这句话的意思是强制使用IE7模式来解析网页代码！

<meta http-equiv=“X-UA-Compatible” content=“IE=8″>

<meta http-equiv=“X-UA-Compatible” content=“chrome=1″ />    //Google Chrome Frame也可以让IE用上Chrome的引擎

<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″><!– IE7 mode –> 或者 <meta http-equiv=“X-UA-Compatible” content=“IE=7″><!– IE7 mode –>       //强制IE8使用IE7模式来解析

<meta http-equiv=“X-UA-Compatible” content=“IE=6″><!– IE6 mode –>   <meta http-equiv=“X-UA-Compatible” content=“IE=5″><!– IE5 mode –>   //强制IE8使用IE6或IE5模式来解析

<meta http-equiv=“X-UA-Compatible” content=“IE=5; IE=8″ />   //一个特定版本的IE支持所要求的兼容性模式多于一种

31.js兼容文件

使IE5,IE6兼容到IE7模式（推荐）

<!–[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7兼容到IE8模式

<!–[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7,IE8兼容到IE9模式

<!–[if lt IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]–>

<!–[if lt IE 7]>

<![endif]–>

使IE5,IE6,IE7兼容到IE8模式

<!–[if lt IE 8]>

<![endif]–>

使IE5,IE6,IE7,IE8兼容到IE9模式

<!–[if lt IE 9]>

<![endif]–>

32. 浏览器识别符

p{ _color:red; }           IE6 专用
*html p{ color:#red; }  IE6 专用
p{ +color:red; }           IE6,7 专用
p{ *color:red; }           IE6,7 专用
*html p{ color:red; }    IE6,7 专用
p{*+color: red;}          IE7 专用
Body> p{ color: red; }  屏蔽 IE6
p{ color:red\9; }          IE8

Firefox: -moz-
Safari: -webkit-
Opera: -o-
IE: -ms-

p{ _color:red; } IE6 专用

*html p{ color:#red; } IE6 专用

p{ +color:red; } IE6,7 专用

p{ *color:red; } IE6,7 专用

*html p{ color:red; } IE6,7 专用

p{*+color: red;} IE7 专用

Body> p{ color: red; } 屏蔽 IE6

p{ color:red\9; } IE8

Firefox: -moz-

Safari: -webkit-

Opera: -o-

IE: -ms-

发表在 Web前台开发技术 | 标签为兼容性 | 留下评论

移动设备wap手机网页html5通过特殊链接：打电话，发短信，发邮件等

发表于2015 年 12 月 29 日由稚子

在移动浏览器中实现拨打电话，调用sms发短信，发送email等功能，移动手机WEB页面(HTML5)Javascript提供的接口是一个好办法。

采用url href链接的方式，实现在Safari ios，Android 浏览器，webos浏览器，塞班浏览器，IE，Operamini等主流浏览器，进行拨打电话功能。

1. 拨打电话

在电话号码前面可以加上 + （加号）表示国际号码。如：

最常用WEB页面JS实现一键拨号的电话拨打功能

例子：

使用wtai协议进行拨打电话

2. 发送短信

如果是需要调用短信的接口，可以将链接写成下面的格式：

sms:<phone_number>[,<phone-number>]*[?body=<message_body>]

例如：

（1）给 10086 发短信：

（2）给 10086 发送内容为”cxye”的短信：

（3）给 10086 和 10010 发送内容为”cxye”的短信：

3. Mail 发送邮件

就和普通的html一样使用mailto

（1）给[email protected]发送邮件：

（2）给[email protected]和[email protected]发送邮件：
<a href=”mailto:[email protected],[email protected]”>mail</a>

（2）给[email protected]发送主题为“testing”的邮件：

（2）给[email protected]发送主题为“testing”的邮件，并抄送给[email protected]：

4. Android Market

如果希望一个链接能够激活Android市场的功能，可以把链接写成：

<a href=”market://search?q=[query]”>Android Market link</a>

其中<query>就是搜索的内容，你应用的名称

例子：

<a href=”market://search?q=MyApp”>MyApp</a>

5. GPS地图定位

例如：

发表在 Web前台开发技术 | 标签为 html5, 发短信, 发邮件, 打电话 | 留下评论

一段CSS居然让chrome崩溃了

发表于2015 年 12 月 29 日由稚子

@-webkit-keyframes aaa{
        from{
                -webkit-filter:opacity(1);
        }
        to{
                -webkit-filter:opacity();
        }
}

@-webkit-keyframes aaa{

from{

-webkit-filter:opacity(1);

}

to{

-webkit-filter:opacity();

}

靠近我试试

发表在 Web前台开发技术 | 标签为崩溃 | 留下评论

三步解决自建Git服务器Git Windows客户端保存用户名密码问题

发表于2015 年 12 月 25 日由稚子

最近公司搭建了gitlab服务器来管理代码。

初步体验了一下，感觉git确实比svn要效率一些。

但有一个地方不爽，很不爽：每次Pull或Push时都要输入用户名与密码，无法保存用户名与密码。

故开始在网上寻找解决方案。功夫不负有心人呐，终于找到了！

本地git客户端为

msysgit+TortoiseGit，TortoiseGit只是壳，msysgit才是核心。

修改步骤：

方法一：

1、在Windows中添加一个HOME环境变量，值为%USERPROFILE%，如下图：

2、在“开始->运行”中打开%Home%，新建一个名为“_netrc”的文件。(注意不要保存扩展名)

3、用记事本打开_netrc文件，输入Git服务器名、用户名、密码，并保存。示例如下：

machine git.xxx.com
login git_user
password git_pwd

machine git.xxx.com

password git_pwd

方法二：

进入TortoiseGit的设置页面，点击“设置 -> git 编辑本地 .git/config”。如下图：

增加
[credential]
helper = store

重新尝试一下git的pull和push，是不是更给力了？

发表在应用工具软件 | 标签为 git, gitlab, 记住密码 | 留下评论

php中大括号的用法和意义{}

发表于2015 年 12 月 23 日由稚子

在PHP中，大括号“{}”可以起到如下作用：（PHP变量放在大括号里面的含义）

一、不管什么程序，function name(){}, for(){}, ….太多了，不说也知道做什么用了。

二、$str{4}在字符串的变量的后面跟上{}刚大括号和中括号一样都是把某个字符串变量当成数组处理。

三、{$val}这时候大括号起的作用就是，告诉PHP，括起来的要当成变量处理。

$arr=array(0=>123, 'name'=>'你好'); 
foreach($array as $k=>$v){ 
    echo "select * from blog_blogs where blog_tags like '%{$arr[$k]}%' order by blog_id"; //加一个大括号只是将作为变量的标志符 
} 
echo '<br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >'; 
foreach($array as $k=>$v){ 
    echo "select * from blog_blogs where blog_tags like '%{{$arr[$k]}}%' order by blog_id"; //加两个大括号，外层的将作为普通的字符 
} 
//用大括号来区分变量 
//echo "$arr['name']"; //用此句会报语法错误 
echo "{$arr['name']}"; //此句正常，大括号内的字符将作为变量来处理 
//$str{4} 在字符串的变量的后面跟上{} 大括号和中括号一样都是把某个字符串变量当成数组处理 
$str = 'abcdefg'; 
echo $str{4};

$arr=array(0=>123, 'name'=>'你好');

foreach($array as $k=>$v){

echo "select * from blog_blogs where blog_tags like '%{$arr[$k]}%' order by blog_id"; //加一个大括号只是将作为变量的标志符

}

echo '<br/ ><br/ ><br/ ><br/ ><br/ ><br/ ><br/ >';

foreach($array as $k=>$v){

echo "select * from blog_blogs where blog_tags like '%{{$arr[$k]}}%' order by blog_id"; //加两个大括号，外层的将作为普通的字符

}

//用大括号来区分变量

//echo "$arr['name']"; //用此句会报语法错误

echo "{$arr['name']}"; //此句正常，大括号内的字符将作为变量来处理

//$str{4} 在字符串的变量的后面跟上{} 大括号和中括号一样都是把某个字符串变量当成数组处理

$str = 'abcdefg';

echo $str{4};

如:$sql = “insert into article (channel_id,title,detail,pub_time) values (‘{$cid}’,'{$title}’,'{$detail}’,'{$time}’);”;

不加似乎也可以,加{}是什么意思呢?

还有字段名为什么要以包括呢?

至少便于阅读嘛~~~”是insert into语句要求的，因为字符串要成对出现嘛

加{}有时候是为了防止变量名和后面的字符串连在一起嘛

例如

{$cid}dd

{$cid}dd

如果cid=aa

那么{$cid}dd=aadd

不加的话你自己看看了$ciddd，岂不变成了ciddd变量了~~

// The   following   is   okay   as   it's   inside   a   string.     Constants   are   not        
// looked   for   within   strings   so   no   E_NOTICE   error   here        
print   "Hello   $arr[fruit]";             //   Hello   apple        
         
// With   one   exception,   braces   surrounding   arrays   within   strings        
// allows   constants   to   be   looked   for        
print "Hello   {$arr[fruit]}";         //   Hello   carrot        
print "Hello   {$arr['fruit']}";     //   Hello   apple

// The following is okay as it's inside a string. Constants are not

// looked for within strings so no E_NOTICE error here

print "Hello $arr[fruit]"; // Hello apple

// With one exception, braces surrounding arrays within strings

// allows constants to be looked for

print "Hello {$arr[fruit]}"; // Hello carrot

print "Hello {$arr['fruit']}"; // Hello apple

PHP 变量后面加上一个大括号{}，里面填上数字，就是指 PHP 变量相应序号的字符。

例如：

$str = 'hello'; 
echo $str{0}; // 输出为 h 
echo $str{1}; // 输出为 e

$str = 'hello';

echo $str{0}; // 输出为 h

echo $str{1}; // 输出为 e

如果要检查某个字符串是否满足多少长度，可以考虑用这种大括号（花括号）加 isset 的方式替代 strlen 函数，因为 isset 是语言结构，strlen 是函数，所以使用 isset 比使用 strlen 效率更高。

比如判断一个字符串的长度是否小于 5：

if ( !isset ( $str{5} ) ) 就比 if ( strlen ( $str ) < 5 ) 好。

下面几个比较能说明原因的解释是:

表示{}里面的是一个变量 ,执行时按照变量来处理在字符串中引用变量使用的特殊包括方式，这样就可以不使用.运算符，从而减少代码的输入量了。

其实输出那块是等同于print “hello “.$arr[‘fruit’];

一、使用大括号的变量

使用如下的语法会报PHP Notice警告

switch (${action}.'_'.${child}) {

1	switch (${action}.'_'.${child}) {

初看并没有什么问题。如下是细致分析

1、可变变量的情况

与大部分资料一样，变量使用大括号的情况，在PHP手册上关于“可变变量”（Variable variables）。其中提到：

引用

In order to use variable variables with arrays, you have to resolve an ambiguity problem. That is, if you write $$a[1] then the parser needs to know if you meant to use $a[1] as a variable, or if you wanted $$a as the variable and then the [1] index from that variable. The syntax for resolving this ambiguity is: ${$a[1]} for the first case and ${$a}[1] for the second.

也就是说，为了在数组环境中也可以使用可变变量，因此，需要根据不同的情况，恰当的使用大括号{}限制变量的范围。${$a[1]} 与${$a}[1] 是完全不同的：

引用

${$a[1]} 这里$a[1]是一个变量；
${$a}[1] 这里$a是一个变量；

2、定界、避免歧义

实际上，这情况与可变变量时类似。例如，若使用“.”连接符，连接一个字符串，可能是这样：

echo $str.'_2010';

1	echo $str.'_2010';

用大括号来写，可能更简单：

echo "${str}_2010";

1	echo "${str}_2010";

可见，如果没有大括号，则可能把$str_2010整个作为一个变量来处理。当然，这样的写法，只能用在双引号中，单引号里面是不会执行变量替换的。

3、字符串变量中的单个字符

例如：

<?php 
$str='000'; 
$str{0}='1'; 
echo $str; //输出为100 
?>

<?php

$str='000';

$str{0}='1';

echo $str; //输出为100

这不难理解，与中括号[]的作用是一致的，有点类似Python中把字符串看成对象的情况。所以，下面的语句功能相同：

<?php 
$str='000'; 
$str[0]='1'; 
echo $str; //也是输出100 
?>

<?php

$str='000';

$str[0]='1';

echo $str; //也是输出100

不过，这些都不是我想说明的内容，真正想描述的情况，请见下面。

二、变量使用大括号的异同

首先，把PHP的错误信息输出全部打开，即/etc/php.ini 为：

error_reporting = E_ALL
display_errors = On

1 2	error_reporting = E_ALL display_errors = On

然后，打开测试页面，其中代码为：

<?php 
$test='123'; 
echo $test; 
echo "${test}"; 
echo "{$test}"; 
echo ${test}.'_'; 
echo ${test}; 
?>

<?php

$test='123';

echo $test;

echo "${test}";

echo "{$test}";

echo ${test}.'_';

echo ${test};

你会看到如下的结果：

123123123
Notice: Use of undefined constant test – assumed ‘test’ in /var/www/html/phpcrm/testpages/variables.php on line 6
123_
Notice: Use of undefined constant test – assumed ‘test’ in /var/www/html/phpcrm/testpages/variables.php on line 7
123

这说明什么？

1、可接受的写法

从输出结果中“123123123”，表明前面三行的echo语句都是正常的：

echo $test; 
echo "${test}"; 
echo "{$test}";

echo $test;

echo "${test}";

echo "{$test}";

2、不建议的写法

后面的两行都有Notice警告，也就是曾把test变量看成常量，只是后来才假设为变量来处理的。因此，为了避免歧义和冲突，不建议这样写：

echo ${test}.'_'; 
echo ${test};

1 2	echo ${test}.'_'; echo ${test};

不过，可以有一种变通的写法

echo ${'test'}.'_'; 
echo ${'test'};

1 2	echo ${'test'}.'_'; echo ${'test'};

这样写的话就不会报错了

3、不正确的写法

网上不少资料介绍，${var}与{$var}的作用是一样的。但是，如果你再加入一句：

echo {$test};

1	echo {$test};

那么，你将会得到以下错误信息：

Parse error: syntax error, unexpected ‘{‘ in /var/www/html/phpcrm/testpages/variables.php on line 8

这可不是Notice警告，是错误，因解析问题，程序将不能正常运行。

三、总结

结合前面两部分的内容，我相信，对于变量引用时使用大括号，应遵循以下原则：

1、正确的写法为：${var} 的形式；
2、与双引号一同使用；
3、根据需表达的意思进行定界。

所以，最后我把switch一行改为：

switch ("${action}_${child}") {

1	switch ("${action}_${child}") {

即不再出现Notice警告。

发表在 BS架构后台语言 | 标签为 php | 留下评论

在CentOS上安装GitLab

发表于2015 年 12 月 23 日由稚子

环境 – Requirements

软件	版本
CentOS	6.6
Python	2.6
Ruby	2.1.5
Git	1.7.10+
Redis	2.0+
MySQL
GitLab	7-8-stable
GitLab Shell	v2.6.0

yum源

为了提高软件安装速度，将yum源设置为阿里云开源镜像

$ cd /etc/yum.repos.d
$ wget -O CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-6.repo

1 2	$ cd /etc/yum.repos.d $ wget -O CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-6.repo

必要软件包

$ yum -y install libicu-devel patch gcc-c++ readline-devel zlib-devel libffi-devel openssl-devel make autoconf automake libtool bison libxml2-devel libxslt-devel libyaml-devel zlib-devel openssl-devel cpio expat-devel gettext-devel curl-devel perl-ExtUtils-CBuilder perl-ExtUtils-MakeMaker

1	$ yum -y install libicu-devel patch gcc-c++ readline-devel zlib-devel libffi-devel openssl-devel make autoconf automake libtool bison libxml2-devel libxslt-devel libyaml-devel zlib-devel openssl-devel cpio expat-devel gettext-devel curl-devel perl-ExtUtils-CBuilder perl-ExtUtils-MakeMaker

安装Git

// 查看当前git版本
$ git --version

// 如果小于1.7.10则先卸载
$ yum remove git

// 下载最新的git并安装
$ wget -O git-src.zip https://github.com/git/git/archive/master.zip
$ unzip git-src.zip
$ cd git-src
$ make prefix=/usr/local all
$ make prefix=/usr/local install
$ ln -fs /usr/local/bin/git* /usr/bin/

// 查看当前git版本

$ git --version

// 如果小于1.7.10则先卸载

$ yum remove git

// 下载最新的git并安装

$ wget -O git-src.zip https://github.com/git/git/archive/master.zip

$ unzip git-src.zip

$ cd git-src

$ make prefix=/usr/local all

$ make prefix=/usr/local install

$ ln -fs /usr/local/bin/git* /usr/bin/

安装Ruby环境

$ mkdir /tmp/ruby && cd /tmp/ruby
$ curl --progress ftp://ftp.ruby-lang.org/pub/ruby/ruby-2.1.5.tar.gz | tar xz
$ cd ruby-2.1.5
$ ./configure --disable-install-rdoc
$ make && make install

$ ln -s /usr/local/bin/ruby /usr/bin/ruby
$ ln -s /usr/local/bin/gem /usr/bin/gem
$ ln -s /usr/local/bin/bundle /usr/bin/bundle

// 设置ruby gem源为淘宝
$ gem source -r https://rubygems.org/
$ gem source -a http://ruby.taobao.org/

$ gem install bundler --no-ri --no-rdoc

$ mkdir /tmp/ruby && cd /tmp/ruby

$ curl --progress ftp://ftp.ruby-lang.org/pub/ruby/ruby-2.1.5.tar.gz | tar xz

$ cd ruby-2.1.5

$ ./configure --disable-install-rdoc

$ make && make install

$ ln -s /usr/local/bin/ruby /usr/bin/ruby

$ ln -s /usr/local/bin/gem /usr/bin/gem

$ ln -s /usr/local/bin/bundle /usr/bin/bundle

// 设置ruby gem源为淘宝

$ gem source -r https://rubygems.org/

$ gem source -a http://ruby.taobao.org/

$ gem install bundler --no-ri --no-rdoc

安装MySQL及初始化GitLab库

$ yum install mysql mysql-devel mysql-server -y
$ /etc/init.d/mysqld start
$ chkconfig mysqld on

// 登录mysql创建gitab的帐号和数据库
mysql> CREATE USER 'gitlab'@'localhost' IDENTIFIED BY 'gitlab';
mysql> CREATE DATABASE IF NOT EXISTS `gitlabhq_production` DEFAULT CHARACTER SET `utf8` COLLATE `utf8_unicode_ci`;
mysql> GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, INDEX, ALTER ON `gitlabhq_production`.* TO 'gitlab'@'localhost';

//测试是否可以用git帐号登录数据库
sudo -u git -H mysql -u gitlab -p -D gitlabhq_production

$ yum install mysql mysql-devel mysql-server -y

$ /etc/init.d/mysqld start

$ chkconfig mysqld on

// 登录mysql创建gitab的帐号和数据库

mysql> CREATE USER 'gitlab'@'localhost' IDENTIFIED BY 'gitlab';

mysql> CREATE DATABASE IF NOT EXISTS `gitlabhq_production` DEFAULT CHARACTER SET `utf8` COLLATE `utf8_unicode_ci`;

mysql> GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP, INDEX, ALTER ON `gitlabhq_production`.* TO 'gitlab'@'localhost';

//测试是否可以用git帐号登录数据库

sudo -u git -H mysql -u gitlab -p -D gitlabhq_production

安装Redis

$ yum -y install redis
$ /etc/init.d/redis start
$ chkconfig redis on

$ yum -y install redis

$ /etc/init.d/redis start

$ chkconfig redis on

添加git帐号并允许sudo

$ useradd --comment 'GitLab' git
$ echo "git ALL=(ALL)       NOPASSWD: ALL" >>/etc/sudoers

1 2	$ useradd --comment 'GitLab' git $ echo "git ALL=(ALL) NOPASSWD: ALL" >>/etc/sudoers

安装GitLab

$ /home/git
$ sudo -u git -H git clone https://gitlab.com/gitlab-org/gitlab-ce.git -b 7-8-stable gitlab
$ cd /home/git/gitlab
$ sudo -u git -H cp config/gitlab.yml.example config/gitlab.yml

// 编辑git路径, gitlab的host:port
$ vim config/gitlab.yml
// bin_path: /usr/local/bin/git
// host: localhost
// port: 80 

// 给文件夹添加相应的权限
$ chown -R git log/
$ chown -R git tmp/
$ chmod -R u+rwX  log/
$ chmod -R u+rwX  tmp/

// 创建必要的文件夹，以及复制配置文件
$ sudo -u git -H mkdir /home/git/gitlab-satellites
$ sudo -u git -H mkdir tmp/pids/
$ sudo -u git -H mkdir tmp/sockets/
$ sudo chmod -R u+rwX  tmp/pids/
$ sudo chmod -R u+rwX  tmp/sockets/
$ sudo -u git -H mkdir public/uploads
$ sudo chmod -R u+rwX  public/uploads
$ sudo -u git -H cp config/unicorn.rb.example config/unicorn.rb
$ sudo -u git -H cp config/initializers/rack_attack.rb.example
 config/initializers/rack_attack.rb

// 配置数据库连接信息
$ sudo -u git cp config/database.yml.mysql config/database.yml
$ sudo -u git -H vim  config/database.yml
$ vim config/database.yml
// production:
//     username: gitlab
//     password: "gitlab"

$ /home/git

$ sudo -u git -H git clone https://gitlab.com/gitlab-org/gitlab-ce.git -b 7-8-stable gitlab

$ cd /home/git/gitlab

$ sudo -u git -H cp config/gitlab.yml.example config/gitlab.yml

// 编辑git路径, gitlab的host:port

$ vim config/gitlab.yml

// bin_path: /usr/local/bin/git

// host: localhost

// port: 80

// 给文件夹添加相应的权限

$ chown -R git log/

$ chown -R git tmp/

$ chmod -R u+rwX log/

$ chmod -R u+rwX tmp/

// 创建必要的文件夹，以及复制配置文件

$ sudo -u git -H mkdir /home/git/gitlab-satellites

$ sudo -u git -H mkdir tmp/pids/

$ sudo -u git -H mkdir tmp/sockets/

$ sudo chmod -R u+rwX tmp/pids/

$ sudo chmod -R u+rwX tmp/sockets/

$ sudo -u git -H mkdir public/uploads

$ sudo chmod -R u+rwX public/uploads

$ sudo -u git -H cp config/unicorn.rb.example config/unicorn.rb

$ sudo -u git -H cp config/initializers/rack_attack.rb.example

config/initializers/rack_attack.rb

// 配置数据库连接信息

$ sudo -u git cp config/database.yml.mysql config/database.yml

$ sudo -u git -H vim config/database.yml

$ vim config/database.yml

// production:

// username: gitlab

// password: "gitlab"

安装GitLab-Shell

$ cd /home/git
$ sudo -u git -H git clone https://gitlab.com/gitlab-org/gitlab-shell.git -b v2.6.0
$ cd gitlab-shell/
$ sudo -u git -H cp config.yml.example config.yml

// 编辑配置文件, 设置gitlab_url, redis-cli, log-level...
$ vim config.yml
// gitlab_url: "http://localhost/"
// /usr/bin/redis-cli

// 安装git-shell
$ sudo -u git -H ./bin/install

$ cd /home/git

$ sudo -u git -H git clone https://gitlab.com/gitlab-org/gitlab-shell.git -b v2.6.0

$ cd gitlab-shell/

$ sudo -u git -H cp config.yml.example config.yml

// 编辑配置文件, 设置gitlab_url, redis-cli, log-level...

$ vim config.yml

// gitlab_url: "http://localhost/"

// /usr/bin/redis-cli

// 安装git-shell

$ sudo -u git -H ./bin/install

安装需要ruby的gems

$ cd /home/git/gitlab
$ sudo -u git -H bundle install --deployment --without development test postgres aws

1 2	$ cd /home/git/gitlab $ sudo -u git -H bundle install --deployment --without development test postgres aws

初始化数据库(创建GitLab相关表)

$ sudo -u git -H bundle exec rake gitlab:setup RAILS_ENV=production

1	$ sudo -u git -H bundle exec rake gitlab:setup RAILS_ENV=production

安装启动文件以及日志切割文件

cp lib/support/init.d/gitlab /etc/init.d/gitlab
cp lib/support/init.d/gitlab.default.example /etc/default/gitlab
cp lib/support/logrotate/gitlab /etc/logrotate.d/gitlab

cp lib/support/init.d/gitlab /etc/init.d/gitlab

cp lib/support/init.d/gitlab.default.example /etc/default/gitlab

cp lib/support/logrotate/gitlab /etc/logrotate.d/gitlab

设置git帐号信息

$ sudo -u git -H git config --global user.name "Troy Zhang"
$ sudo -u git -H git config --global user.email "troyz@synnex.com"
$ sudo -u git -H git config --global core.autocrlf input

$ sudo -u git -H git config --global user.name "Troy Zhang"

$ sudo -u git -H git config --global user.email "[email protected]"

$ sudo -u git -H git config --global core.autocrlf input

安装Nginx

$ yum -y install nginx
$ vim /etc/nginx/nginx.conf
user              root git;
worker_processes  2;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
# GITLAB
# Maintainer: @randx
# App Version: 5.0

upstream gitlab {
  server unix:/home/git/gitlab/tmp/sockets/gitlab.socket;
}

server {
  listen *:80 default_server;         # e.g., listen 192.168.1.1:80; In most cases *:80 is a good idea
  server_name YOUR_SERVER_FQDN;     # e.g., server_name source.example.com;
  server_tokens off;     # don't show the version number, a security best practice
  root /home/git/gitlab/public;

  # Set value of client_max_body_size to at least the value of git.max_size in gitlab.yml
  client_max_body_size 5m;

  # individual nginx logs for this gitlab vhost
  access_log  /var/log/nginx/gitlab_access.log;
  error_log   /var/log/nginx/gitlab_error.log;

  location / {
    # serve static files from defined root folder;.
    # @gitlab is a named location for the upstream fallback, see below
    try_files $uri $uri/index.html $uri.html @gitlab;
  }

  # if a file, which is not found in the root folder is requested,
  # then the proxy pass the request to the upsteam (gitlab unicorn)
  location @gitlab {
    proxy_read_timeout 300; # https://github.com/gitlabhq/gitlabhq/issues/694
    proxy_connect_timeout 300; # https://github.com/gitlabhq/gitlabhq/issues/694
    proxy_redirect     off;

    proxy_set_header   X-Forwarded-Proto $scheme;
    proxy_set_header   Host              $http_host;
    proxy_set_header   X-Real-IP         $remote_addr;
    proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;

    proxy_pass http://gitlab;
  }
}
}

$ yum -y install nginx

$ vim /etc/nginx/nginx.conf

user root git;

worker_processes 2;

pid /var/run/nginx.pid;

events {

worker_connections 1024;

}

http {

include /etc/nginx/mime.types;

default_type application/octet-stream;

log_format main '$remote_addr - $remote_user [$time_local] "$request" '

'$status $body_bytes_sent "$http_referer" '

'"$http_user_agent" "$http_x_forwarded_for"';

# GITLAB

# Maintainer: @randx

# App Version: 5.0

upstream gitlab {

server unix:/home/git/gitlab/tmp/sockets/gitlab.socket;

}

server {

listen *:80 default_server; # e.g., listen 192.168.1.1:80; In most cases *:80 is a good idea

server_name YOUR_SERVER_FQDN; # e.g., server_name source.example.com;

server_tokens off; # don't show the version number, a security best practice

root /home/git/gitlab/public;

# Set value of client_max_body_size to at least the value of git.max_size in gitlab.yml

client_max_body_size 5m;

# individual nginx logs for this gitlab vhost

access_log /var/log/nginx/gitlab_access.log;

error_log /var/log/nginx/gitlab_error.log;

location / {

# serve static files from defined root folder;.

# @gitlab is a named location for the upstream fallback, see below

try_files $uri $uri/index.html $uri.html @gitlab;

}

# if a file, which is not found in the root folder is requested,

# then the proxy pass the request to the upsteam (gitlab unicorn)

location @gitlab {

proxy_read_timeout 300; # https://github.com/gitlabhq/gitlabhq/issues/694

proxy_connect_timeout 300; # https://github.com/gitlabhq/gitlabhq/issues/694

proxy_redirect off;

proxy_set_header X-Forwarded-Proto $scheme;

proxy_set_header Host $http_host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_pass http://gitlab;

}

更改权限，启动nginx

$ nginx -t
$ chown -R git:git /var/lib/nginx/
$ /etc/init.d/nginx start

$ nginx -t

$ chown -R git:git /var/lib/nginx/

$ /etc/init.d/nginx start

检测当前环境

sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production

1	sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production

拉取gitlab静态资源文件

$ sudo -u git -H bundle exec rake assets:precompile RAILS_ENV=production

1	$ sudo -u git -H bundle exec rake assets:precompile RAILS_ENV=production

启动gitlab

$ /etc/init.d/gitlab start

1	$ /etc/init.d/gitlab start

检测各个组件是否正常工作

$ sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production

1	$ sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production

发表在应用工具软件, 操作系统相关 | 标签为 gitlab | 留下评论

苹果开发者账号（公司级）和邓白氏编码（D-U-N-S）申请步骤

发表于2015 年 12 月 7 日由稚子

第一次接触苹果开发者账号申请，记录下

一、简单介绍

详情介绍请看官方链接 https://developer.apple.com/cn/programs/which-program/

Apple 开发者类型有四种:

个人开发者 Individual

费用￥688 / 年，可以发布到Apple store，对应一个开发者，

应用署名是注册时个人信息，最多添加100个设备UDID测试。

公司开发者 Company

费用￥688 / 年，可以发布到Apple store，提供团队开发模式，可以添加多个开发者，设置不同的管理权限，

应用署名是公司或组织，最多添加100个设备UDID测试。

申请时需要邓白氏编码 D-U-N-S

企业开发者 Enterprise

费用￥1988 / 年，不可以发布到Apple store，只能企业内部使用，测试设备UDID不限，因为这个特点被大量使用滥用。

申请时需要邓白氏编码 D-U-N-S

高校开发者 University

免费使用，不可以发布到Apple store，高校内部使用。

其它：

费用

之前是99美元，2014年初中国区开始支持人民币付款，调整为688元，按现在的汇率算，变贵了

设备 UDID 码

唯一设备识别码，由字母和数字组成的40位数字符串，用于标识不同的IOS设备，

个人和公司账号开发的应用没有发布前，只有添加了设置UDID到账号上，该设备才能安装测试

邓白氏编码 D-U-N-S

全球唯一的9位数编码，用于标识不同的企业，相对于企业的身份证，可以免费申请

二、创建Apple ID账号

首先，要有一个Apple ID账号，如果没有，请先创建一个账号

如果已有账号注册了企业开发者，则不能同时注册公司开发者，需要重新创建Apple ID

https://appleid.apple.com/account

苹果部分页面有提供中文支持，修改为中文显示（右下角），有好处的，比如说姓名填写不用写中间名；密保问题记录下，找回密码时会用到。

201506301104158202-

三、申请邓白氏编码 D-U-N-S

申请公司开发者账号需要用到邓白氏编码，没有的话要申请，

如果申请个人开发者，请跳过此步骤

https://developer.apple.com/program/enroll/dunsLookupForm.action

201506301104164642-

1. 选择 “中国”，提示只能使用罗马字符，也就是说，要写英文字符，名字就用拼音

2. Legal Entity Name 填写完整的公司英文名称，没有英文的用拼音代替，(Co., Ltd.) 有限公司，空格、点都不能少

3. Tradestyle or DBA 不填

4. Headquarters address of your company / organization 公司总部信息

Street Address 街道

City / Town 城市

State / Province 省

Postal Code 邮编

Phone Number 电话（国家编码区号-电话号码）如：086 0755-1234567

5. Mailing address of your company / organization 公司的联系信息

如果同上就勾选 Same as headquarters address

6. Your work contact information 你的联系信息

Given Name 你的名

Family Name 你的姓

Job Title 你的职位，我写的是 IOS developer

Phone Number 你的电话，可以写手机号

Work Email 你的工作邮箱

7. 完成后点 “继续”，信息会提交到服务器查询，

这里会有两种跳转，一种是已有记录，让你选自己公司地址；另一种是没有记录，提交到服务器。

选择地址后提交，会收到一封包含邓白氏编码的邮件。

正常情况下，应该到此为止，如果有问题，参看我的申请过程流水记录。

四、申请公司开发者计划

apple developer 网站在六月份改版，坑了我一把

开发者计划介绍 https://developer.apple.com/support/compare-memberships/cn/

1. 打开链接 https://developer.apple.com/programs/enroll/

2. 选择 “Start Your Enrollment”，开始登记，同意协议

3. 选择 “Company / Organization” 公司类型

4. 填写法人信息和公司信息，英文填写，人名使用拼音代替

这里用到之前申请的邓白氏编码

I am the owner/founder and have the authority to bind my organization to legal agreements. 公司创始人/法人选这个
My organization has given me the authority to bind it to legal agreements. 非法人选这个

Verification Contact 验证法人信息

First name 名字

Last name 姓

Job Title 职位，比如 CEO

Email 邮箱

Phone 电话，中国区 code 是 86

Organization Information 组织信息

Legal Entity Name 公司的英文全称，填写申请邓白氏时用的公司名

D-U-N-S® Number 公司的邓白氏编码

Website 公司网站

Headquarters Phone 电话

Your Work Email 你的工作邮箱

5. 回顾确认提交的信息，勾选“This is the correct headquarters address for my organization” ，确认公司地址

6. 提交成功，提示正在办理，编码为XXX，

发表在生活随笔 | 标签为 D-U-N-S | 一条评论

IIS7/IIS7.5 URL 重写 HTTP 重定向到 HTTPS

发表于2015 年 11 月 17 日由稚子

1、购买SSL证书，参考：http://www.cnblogs.com/yipu/p/3722135.html

2、IIS7 / IIS 7.5 下绑定 HTTPS 网站（购买Wildcard SSL泛域名证书可绑定多个子域名）参考上文

3、下载安装URL重写模块：Microsoft URL Rewrite Module

32位：http://download.microsoft.com/download/4/9/C/49CD28DB-4AA6-4A51-9437-AA001221F606/rewrite_x86_zh-CN.msi

64位：http://download.microsoft.com/download/4/E/7/4E7ECE9A-DF55-4F90-A354-B497072BDE0A/rewrite_x64_zh-CN.msi

4、取消勾选“SSL设置”-》“要求 SSL”

5、ASP.NET站可直接修改web.config（与“6、IIS配置图示”效果相同），例如：见<rewrite>…</rewrite>节点

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="HTTP to HTTPS redirect" stopProcessing="true">
          <match url="(.*)" />
          <conditions>
            <add input="{HTTPS}" pattern="off" ignoreCase="true" />
          </conditions>
          <action type="Redirect" redirectType="Found" url="https://{HTTP_HOST}/{R:1}" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

<?xml version="1.0" encoding="utf-8"?>

<system.webServer>

<rules>

</conditions>

</rule>

</rules>

</rewrite>

</system.webServer>

</configuration>

6、IIS配置图示（图形化的操作过程，与上步效果相同，适用于asp/php等站）

选择要配置的网站，如：，找到“URL重写”，没有的话看上面第3步

进入“URL重写”模块，点击“添加规则”

选择“空白规则”

名称：HTTP to HTTPS redirect

模式：(.*)

条件输入：{HTTPS}

模式：off 或 ^OFF$

或

重定向URL：https://{HTTP_HOST}/{R:1}

重定向类型：已找到(302) 或参阅其它(303)

或

配置完成后“应用”到当前站点：

URL重写配置结果：

至此配置完成！

参考网站：

http://www.iis-aid.com/articles/how_to_guides/redirect_http_to_https_iis_7

http://www.jppinto.com/2010/03/automatically-redirect-http-requests-to-https-on-iis7-using-url-rewrite-2-0/

http://webactivedirectory.com/iis-microsoft/redirect-http-to-https-on-microsoft-iis-7-and-7-5/

http://blog.csdn.net/xuhuojun/article/details/6137154

发表在应用工具软件, 操作系统相关 | 标签为 HTTPS, IIS, Redirect | 留下评论

mysql merge engine 介绍

发表于2015 年 11 月 3 日由稚子

最近由于项目需求，使用了Merge Engine这个Mysql数据库引擎，看着官方文档对其了解了一下。总结加翻译一下～

MERGE引擎初体验

MERGE存储引擎又叫MRG_MyISAM存储引擎，可以把许多相同的MyISAM表可以聚集到一个表来使用。“相同”的意思是所有的表要有相同的列和相同的索引信息。
MERGE引擎的另一个代替方案是分割(partitioned)表(把一个独立的分割后的表放到一个单独的文件中)。分割表是一个比MERGE更好的方案，具体请参考第18章Partitioning的内容。
当建立一个MERGE引擎表时，会产生两个文件：.frm文件存储的是表的格式,.MRG文件包含的是这个MERGE表所包含的MyISAM表的名字(这些表可以不在同一个数据库中)。
MERGE表中可以使用 SELECT, DELETE, UPDATE, 和INSERT等数据库操作语言。前提是对每个包含的表都有这些权限。

注意:
如果一个用户有权限操作数据表t, 那么可以建立一个MERGE表m来访问t, 这时如果用户对t的权限没有了，仍然可以通过m来操作t。

如果对MERGE使用DROP TABLE那么只是删除了MERGE表，对MERGE表包含的表没有任何影响。
建立一个MERGE表的时候可以使用参数INSERT_METHOD来决定INSERT一条数据是是如何插入MERGE表所包含的表的。

INSERT_METHOD = last: 当插入一个记录时，实际插入的是union的最后一个table。
INSERT_METHOD = first: 当插入一个记录时，实际插入的是union的第一个table。
INSERT_METHOD = no: MERGE表不允许插入数据。

如果MERGE表包含的数据表结构或者个数有变化，需要重新建立MERGE表，建立一个新的映射关系，方法有下面两种：

删除这个MERGE表，重新create一个。
使用ALTER TABLE tbl_name UNION=(...), 改变所包含的表。

MERGE实现原理

由于文档没有说MERGE的内部实现原理，根据我的猜测应该是这样的，MERGE表只是记录了所包含的每个表的名字和表共同的结构，当我对表的内容进行检索时，其实MERGE是分别对它包含的每个表进行了检索，然后输出了结果，这个可以做个验证：
t是表t1，t2的MERGE表，一条记录分别在t1和t里检索

mysql&gt; explain select * from t1 where a =1;
+----+-------------+-------+-------+---------------+---------+---------+-------+------+-------+
| id | select_type | table | type  | possible_keys | key     | key_len | ref   | rows | Extra |
+----+-------------+-------+-------+---------------+---------+---------+-------+------+-------+
|  1 | SIMPLE      | t1    | const | PRIMARY       | PRIMARY | 4       | const |    1 |       |
+----+-------------+-------+-------+---------------+---------+---------+-------+------+-------+
 row in set (0.00 sec)
mysql&gt; explain select * from t where a =1;
+----+-------------+-------+------+---------------+------+---------+-------+------+-------+
| id | select_type | table | type | possible_keys | key  | key_len | ref   | rows | Extra |
+----+-------------+-------+------+---------------+------+---------+-------+------+-------+
|  1 | SIMPLE      | t     | ref  | a             | a    | 4       | const |    2 |       |
+----+-------------+-------+------+---------------+------+---------+-------+------+-------+

mysql> explain select * from t1 where a =1;

+----+-------------+-------+-------+---------------+---------+---------+-------+------+-------+

+----+-------------+-------+-------+---------------+---------+---------+-------+------+-------+

| 1 | SIMPLE | t1 | const | PRIMARY | PRIMARY | 4 | const | 1 | |

+----+-------------+-------+-------+---------------+---------+---------+-------+------+-------+

row in set (0.00 sec)

mysql> explain select * from t where a =1;

+----+-------------+-------+------+---------------+------+---------+-------+------+-------+

+----+-------------+-------+------+---------------+------+---------+-------+------+-------+

| 1 | SIMPLE | t | ref | a | a | 4 | const | 2 | |

+----+-------------+-------+------+---------------+------+---------+-------+------+-------+

发现，对于主键进行检索时，MERGE的检索此时总是等于它包含的表的数量，而单个表进行检索时是直接在本表进行检索的。也就是说其实MERGE表只是一个聚合结构，并不含索引和数据，其操作都是在它包含的表中逐个进行的，其复杂度是单个表的和。

MERGE 优缺点

优点：

对分表的管理更加简单。比如log表,可以根据时间进行分别，然后对其进行压缩，最后通过建立MERGE表来操作数据。
获取更快的速度。可以把一个很大的只读表拆分为多个独立的表，放到不同的磁盘上，通过MERGE表结构来查询的速度要比查一个大表快的多。
更有效的搜索。如果知道要搜索的数据在哪个表里，可以直接进行搜索，否则就可以在MERGE表中搜索，不需要对每个表都分别搜索。
及时映射所有包含的表。MERGE表不需要包含索引，因为它用的是包含的表的索引。
如果需要建立一个很大的表，可以见多个表然后再使用MERGE表。这样更加快而且更加节省空间（应该是索引所消耗的空间）。
可以突破MyISAM表大小的限制。每个MyISAM表都有大小的限制，但是MERGE没有。
对一个表也可以建立MERGE表，但是对性能并没有什么提升。only a couple of indirect calls and memcpy() calls for each read （这句话不知道如何翻译）

缺点：

MERGE表只能对MyISAM引擎的表建立。
MERGE引擎不支持MyISAM引擎的一些特性。例如不能建立FULLTEXT索引，可以在MyISAM上建立，但是不能通过MERGE表来使用。
如果MERGE表不是临时的，那么它包含的表也不能是临时的，如果MERGE表是临时的，那么它包含的表可以是任何临时和不临时的表的组合。
MERGE表比MyISAM表需要更多的文件描述。 If 10 clients are using a MERGE table that maps to 10 tables, the server uses (10 × 10) + 10 file descriptors. (10 data file descriptors for each of the 10 clients, and 10 index file descriptors shared among the clients.)，这个也不太明白。
读索引比较慢。当使用索引时，MERGE需要对它包含的每个表进行查询。这让MERGE表在eq_ref搜索时很慢，但是在ref搜索时不会太慢。

MERGE 存在的问题

捡总要的说了

如果改变一个原来是MERGE引擎的表为非MERGE引擎，那么MERGE表的映射就没有了，所包含的表的所有数据都会copy的修改后的表中。
MyISAM里的AUTO_INCREMENT字段对于MERGE来说没有用
MERGE不能保持唯一索引，在MyISAM中是可以的。

发表在数据库相关技术 | 标签为 merge, MySQL | 一条评论

JavaScript

CSS

环境 – Requirements

yum源

必要软件包

安装Git

安装Ruby环境

安装MySQL及初始化GitLab库

安装Redis

添加git帐号并允许sudo

安装GitLab

安装GitLab-Shell

安装需要ruby的gems

初始化数据库(创建GitLab相关表)

安装启动文件以及日志切割文件

设置git帐号信息

安装Nginx

更改权限，启动nginx

检测当前环境

拉取gitlab静态资源文件

启动gitlab

检测各个组件是否正常工作

MERGE引擎初体验

MERGE实现原理

MERGE 优缺点

优点：

缺点：

MERGE 存在的问题

归档

功能