CSS最佳实践

使用最短最优最语义化的css代码对提升工作效率帮助非常大,小赖对常见的好方法总结在这里。(最后更新于 2014/08/13)

  • 使用 normalize.css 而不是 reset.css

    后者清零了所有浏览器的样式,而前者则是统一设置了所有浏览器的样式,省去不少重写样式的时间。

  • 使用clearfix来清除浮动,减少不必要的 html 标签:

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 现代浏览器 */
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
/* IE6/7 触发hasLayout */
.clearfix {
zoom: 1;
}
  • 如果不想使用 clearfix 来清除浮动,可用 overflow 来清除:
1
2
3
4
5
.container {
overflow: auto; /* 清除浮动 */
zoom: 1; /* IE触发hasLayout */
display: block; /* 保证容器是块元素 */
}
  • 使用 hr 元素加上样式来做分隔线,更加语义化:
1
<hr class="divider">
1
2
3
4
.divider {
border-top: 1px solid #eee;
clear: both;
}
  • text-indent 隐藏文字不要设定为类似 999999em 这么大,以提高移动设备上的性能:
1
2
3
4
5
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
  • 使用 box-sizing 属性解决盒模型问题

既然 IE8+ 支持这个属性,那我们就大胆的用吧,设置后元素就不会因为被设定的内边距或者边框而挤爆容器了。

1
2
3
4
5
6
7
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

wordpress for SAE 搬家心得

原来laispace.com 用的便宜香港空间,速度实在太慢忍受不了了!小赖尝试将wordpress从自己主机上搬迁到SAE上,提高访问速度,总结步骤如下:

1.备份文章内容

进入laispace【后台】-【工具】-【导出】,选择【所有内容】-【下载导出的文件】生成一个laispace.xml文件到本地

2.备份数据库内容

进入laispace phpMyAdmin 【数据库名】-【导出】,生成一个laispace.sql文件到本地

阅读全文

jQuery碎片积累

-

td:last与td:last-child的区别

$(‘td:last’)选择所有td元素中的最后一个

$(‘td:last-child’)选择tr下最后一个子元素td,有多个

-
让页面内所有的外链都是在新窗口中打开
[javascript]

$(‘a[href^="http://"]').attr("target","_blank&quot;);
[/javascript]

-
禁用表单的提交按钮
[javascript]

$("form").submit(function(){
$(":submit",this).attr("disabled","disabled");
});
[/javascript]

-
绝对定位与相对定位
W3CFUNS解释
属性为relative的元素可以用来布局页面,属性为absolute的元素用来定位某元素在父级中的位置
W3CFUNS实例
-
如果用定位来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding的属性影响,当然你也可以用 relative,计算的时候不要忘记计算padding的值。
-
-
$(“#test”).each(i,item)方法:
函数中的this关键字指向一个不同的DOM元素
返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。
利用each给元素设置不同样式:
$(“.laispace”).each(function(i){this.style.color=[‘#f00’,’#0f0’,’#00f’][i]});
$.each(obj, fn)
通用例遍方法,可用于例遍对象和数组。
-DOM和JQ对象互转时要注意:

$(document.getElementById(‘test’)) 相当于$(“#test”);
$(“#test”)[0]或者$(“#test”).get(0)
注意:eq()返回JQ对象,get()返回DOM对象,而JQ对象只能调用JQ方法,DOM对象同理
$(“div”).eq(2).html();//调用jquery对象的方法
$(“div”).get(2).innerHTML;//调用dom的方法属性-$(“$bt1”).click(function(){
$(“#bt2”).click(); //点击按钮1时也触发按钮2
})
-
扩展自定义功能:
[javascript]

$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
});//为在jquery的命名空间中扩展了min,max两个方法
//可以像下面这样使用
var a = 10,b=20;
var max = $.max(a,b);//20
var min = $.min(a.b);//10
[/javascript]

Javascript碎片积累

-
JS中的Image对象:

[javascript]
function getImageSize(imageEl) {
var i = new Image();
i.src = imageEl.src;
return new Array(i.width, i.height);
}
[/javascript]

image对象现在一般常用来预加载一些图片,先将其装入 DOM,等到需要的时候,直接调用,省掉等待的时间,直接显示出来。
需要注意的是:src 属性一定要写到 onload 的后面,否则程序在 IE 中会出错。
-
for 和 class 是 JavaScript 中的关键字,所以在 JavaScript 中这两个属性名称分别用 htmlFor 和 className 代替。

[javascript]
function getAttr(el, attrName){
var attr = {‘for’:’htmlFor’, ‘class’:’className’}[attrName] || attrName;
}
[/javascript]

-
交换两个变量值的巧妙方法,利用数组:
foo = [bar, bar=foo][0]; // 多巧妙啊!编程的时候不要忘记思考,否则你就只是一个完成工作的机器。
-
双感叹号的用法:!! 一般用来将后面的表达式强制转换为布尔类型的数据(boolean),也就是只能是true或者false。
-
注意一些类型转换:

[javascript]
a=parseInt(“1234″)
a=”1234″-0 //转换为数字
b=1234+”" //转换为字符串
c=someObject.toString() //将对象转换为字符串
[/javascript]

其中第1种、第4种为显式转换,2、3为隐式转换
布尔型的转换,javascript约定规则为
false、undefinded、null、0、”” 为 false
true、1、”somestring”、[Object] 为 true
-
在标准的事件绑定中绑定事件的方法函数为 addEventListener,而IE使用的是attachEvent
-
jQuery.trim()去除字符串前后的空格
-
jQuery.inArray()判断元素是否在数组中

[javascript]
var arr = ["html", "css", "js", "jquery"];
$.inArray(‘js’,arr);
[/javascript]

-
编写一个简单的 jQuery 插件(模板)

[javascript]
//You need an anonymous function to wrap around your function to avoid conflict
(function($){
//Attach this new method to jQuery
$.fn.extend({
//This is where you write your plugin’s name
pluginname: function() {
//options
var defaults = {
option1: "default_value"
}
var options = $.extend(defaults, options);
//a public method
this.methodName: function () {
//call this method via $.pluginname().methodName();
}
//Iterate over the current set of matched elements
return this.each(function() {
var o = options;
//code to be inserted here
});
}
});
//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we’ll stick to $ (I like dollar sign: ) )
})(jQuery);
[/javascript]

-
小技巧:在浏览器地址栏中输入一行代码:data:text/html, <html contenteditable> ,回车即可把浏览器变临时编辑器(需要浏览器支持 HTML5 属性 contenteditable) 原文
-
所有JS对象共享的方法是toString(),返回该对象序列化格式后的字符串
-
元素的client属性(只读)指元素的内容部分再加上padding的大小,不包括border和滚动条占用的空间,故document元素的clientHeight和clientWidth属性,就代表了网页的相对大小。

[javascript]
// 获得网页的相对大小
function getViewport(){ // 页面加载完成后才能运行
    if (document.compatMode == "BackCompat"){
      return {
// IE6 quirks模式
        width: document.body.clientWidth,
        height: document.body.clientHeight
      }
    } else {
      return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
      }
    }
  }
[/javascript]

 

[javascript]
// 获取网页的绝对大小
// 如果网页内容能够在浏览器窗口中全部显示,不同浏览器有不同的处理,这两个值未必相等,要取它们之中较大的那个值
function getPagearea(){
if (document.compatMode == "BackCompat"){
return {
width: Math.max(document.body.scrollWidth,
document.body.clientWidth),
height: Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} else {
return {
width: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),

height: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
[/javascript]

-
每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离。所以,只需要将这两个值进行累加,就可以得到该元素的绝对坐标。

// 获取绝对位置的横坐标和纵坐标
// 由于在表格和iframe中,offsetParent对象未必等于父容器,所以以下函数对于表格和iframe中的元素不适用。

[javascript]
function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
      actualLeft += current.offsetLeft;
      current = current.offsetParent;
    }
    return actualLeft;
  }
  function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
      actualTop += current.offsetTop;
      current = current.offsetParent;
    }
    return actualTop;
  }
[/javascript]

// 获取网页元素的相对位置:绝对坐标减去滚动条滚动的距离

[javascript]
function getElementViewLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while (current !== null){
      actualLeft += current.offsetLeft;
      current = current.offsetParent;
    }
    if (document.compatMode == "BackCompat"){
      var elementScrollLeft=document.body.scrollLeft;
    } else {
      var elementScrollLeft=document.documentElement.scrollLeft;
    }
    return actualLeft-elementScrollLeft;
  }
  function getElementViewTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
      actualTop += current. offsetTop;
      current = current.offsetParent;
    }
     if (document.compatMode == "BackCompat"){
      var elementScrollTop=document.body.scrollTop;
    } else {
      var elementScrollTop=document.documentElement.scrollTop;
    }
    return actualTop-elementScrollTop;
  }
// scrollTop和scrollLeft属性是可以赋值的
[/javascript]

-
-
object.prop和object[‘prop’]是等价的,当属性是带空格的string时就只能用方括号了:person[‘first name’];
-
for…in 循环输出的属性名顺序不可预测,使用之前先检测对象是否为null 或者 undefined
-
hasOwnProperty是js中唯一一个处理属性但是不查找原型链的函数

[javascript]
Object.prototype.prop = ‘propsss’;
var obj = {und:undefined};
obj.prop; // propsss
‘und’ in obj; // true
obj.hasOwnProperty(‘prop’); // false
obj.hasOwnProperty(‘und’); // true
//只有hasOwnProperty可以给出正确和期望的结果,尤其在遍历一个对象时
//除了hasOwnProperty外,没有其他方法可以排除原型链上的属性(不是定义在对象自身上的属性)
//如果hasOwnProperty被占用呢?来看:
var obj = {
hasOwnProperty: function(){
return false;
},
prop: ‘this is bad…’
};
obj.hasOwnProperty(‘prop’); // 总是返回false
//这样解决:
{}.hasOwnProperty.call(obj,’prop’); // 返回true
[/javascript]

-
Object的每个实例都具有下列属性方法:
1.Constructor:保存着用于创建当前对象的函数 上面例子 构造函数就是 Object()
2.hasOwnProperty(prop):检查给定的属性是否在当前对象实例中(而不是在实例的原型中)。作为参数的属性必须以string形式指定
3.isPrototypeOf(object):用于检查传入的对象是否是另一个对象的原型。
4.propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for in语句
5.toLocaleString():返回对象的字符串表示,与环境的地区对应
6.toString():同上
7.valueOf(): 返回对象的字符串、number、Boolean表示。通常与toString()相同
-
javascript中的乘法问题:
可用 10000 作为基数确保精度,如 31.12 10000 9.7 / 10000
-
function语句在解析时会被提升,对代码求值时js引擎在第一遍会声明函数并将它们放到源代码树的顶部。

[javascript]
alert(sum(10,10))
function sum(n1,n2){
return n1+n2;
}
//单独使用下面代码时,函数表达式会出错:
alert(sum(10,10));
var sum = function (n1,n2){
return n1+n2;
}
[/javascript]

命名函数表达式即被认为是函数声明也被认为是函数表达式

[javascript]
typeof g; // "function"
var f = function g(){};
//上面这个例子论证了 jScript 是如何把一个命名函数表达式处理成一个函数声明的
//在函数声明发生之前就把 g 给解析了 【在IE中检测】
[/javascript]

-
this是在函数调用时才被确定的而不是定义的时候

[javascript]
var Dog = {
toString: function() { return ‘dog’;},
fn: function() { alert(this);},
};
var Cat = {
toString: function() { return ‘cat’;}
};
Dog.fn(); // dog
Dog‘fn’ // dog
Cat.fn = Dog.fn;
Cat.fn(); // cat
var func = Dog.fn;
func(); // window
[/javascript]

-

apply和call的区别,在于apply用数组传递参数,而call用多参数逗号传递参数:

[javascript]

function myFunc(arg1,arg2,arg3){

// code …

}

myFunc.apply(null,[arg1,arg2,aeg3]);

myFunc.call(null,arg1,arg2,arg3);

// 第一个参数指定调用函数myFunc的对象

[/javascript]

-

构造函数的理解:当new修饰符修饰函数时,this就会指向新对象,该对象会自动返回,称之为构造函数:

[javascript]
function Person(name){
this.name = name;
this.sayName = function(){
alert("我的大名是:" + this.name);
}
}

var person1 = new Person("xiaolai"); // 构造函数返回一个对象,赋值给变量 xiaolai
person1.sayName(); // 『我的大名是:xiaolai』
[/javascript]

-
March 6, 2014—添加—

  • 获取元素的classList:

[javascript]
selector.classList 获取所有的class
selector.clasList.add(value); // 添加类
selector.clasList.remove(value); // 删除类
selector.clasList.toggle(value); // 切换类
selector.clasList.contains(value); // 判断是否包含类
[/javascript]

  • 获取DOM中获得了焦点的元素

[javascript]
document.activeElement
[/javascript]

  • 判断DOM是否加载完成

[javascript]
document.readyState // ‘complete’ or ‘loading’
[/javascript]

  • 判断浏览器采用了哪种渲染模式

[javascript]
document.compatMode // ‘CSS1Compat’ 为标准模式,’BackCompat’ 为混杂模式
[/javascript]

  • 判断浏览器采用的字符集

[javascript]
document.defaultCharset // 默认字符集
document.charset // 采用的字符集
[/javascript]

  • 访问所有自定义属性

[javascript]
selector.dataset.myid; // 获取div[data-myid=‘100’]中的100
[/javascript]

  • 将某个元素调入视窗内

[javascript]
selector.scrollIntoView()
[/javascript]

  • 返回元素的子元素节点(不包括其他节点)

[javascript]
selector.children // 是HTMLCollection的一个实例
[/javascript]

  • 获取视窗大小
    [javascript]
    function getViewport() {
    // 判断是否混杂模式
    if (document.compatMode == ‘BackCompat’) {
    return {
    width: document.body.clientWidth,
    height: document.body.clientHeight
    }
    } else {
    return {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
    }
    }
    }
    [/javascript]

  • 获取元素在视窗内的位置
    [javascript]
    selector.getBoundingClientRegt() // 返回对象含属性 left right top bottom
    [/javascript]

  • 获取页面的样式表
    [javascript]
    document.styleSheets;
    document.styleSheets[0].disabled = true; // 禁用第一个样式表
    [/javascript]

Goagent使用心得

Goagent实在是太棒了,可畅游被Qiang了的网站。初次安装可详见 https://code.google.com/p/goagent/wiki/InstallGuide


小赖使用总结:

1.goagent突然上不去了?

可能是国内cn的代理IP被封了,这时候可打开 local/proxy.ini 修改profile = google_cn 为 profile = google_hk


2.翻Qiang点击切换按钮麻烦?

打开 SwitchySharp ->选项->切换规则,点击【新建规则】,编写如下:注意 ://.twitter.com/ 里的是通配符,指可匹配任意字符



3.手动切换代理很麻烦?

按2的设置后,点击 SwitchySharp->自动切换模式,那么每次浏览时,goagent就会按建立好的切换规则来选择是否使用代理来翻Qiang了



4.打开goagent.exe麻烦?

找到goage.exe右键创建快捷方式,把它放到 开始菜单-所有程序-启动 的文件夹里(win7下即C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup)


5.还想开机自启动?

按3和4设置后,每次只要一开机,goagent就启动了,每次只要一翻Qiang,goagent就自动代理了。

打开local/proxy.ini 找到visible = 1改为visible = 0可将goagent隐藏在任务栏


6.看完一部片(别邪恶啊)就上不去了?

Goagent一个APPID有1G/天的流量使用,刷刷twitter玩玩facebook就够了,可要是在youtube上看视频耗掉了流量,1G耗完就会显示 “goagent 服务器未发送任何数据,因此无法加载该网页“,这并不是像1所说的代理IP被封了或者goagent自己抽风了,而是当前APPID的1G流量已经用完。打开https://appengine.google.com/dashboard?&app_id=s~**yourAppid** 就可以看到Outgoing Bandwidth为100%啦!


7.出现了6所说的情况流量不够用?

可回到https://appengine.google.com/,点击【Create Application】,输入Application Identifier 如myappid-2(要check Availability),输入Application Title(可任填),然后再次点击【Create Application】。然后打开 local/proxy.ini 编辑 appid = myappid-1 | myappid-2 (添加myappid-2,用 | 隔开,再打开servr/uploader.bat 输入 myappid-2,就可以将这个新的配置上传了,打开https://appengine.google.com会发现myappid-2在Running,代表新增的myappid-2已经激活,重启goagent.exe,打开浏览器,又可以继续翻Qiang啦!


以此类推,可最多申请十个APPID,共10G的流量。

2013-05-瀑布流效果的制作

这个图片墙是动态瀑布流,思路是:

1.动态计算用户视窗的宽度,计算出可显示多少列的图片;

2.监听滚动条的变化,动态算出滚动时最短的是哪一列,当最短列底部露出后,用$.getJSON()方法获取新的一批图片,并遍历每一个图片,将新图片添加到最短列中(这时最短列是动态的啦)。

3.监听视窗大小变化,动态算出窗口的新宽度值,重新对图片进行排列,并使用了动画效果。

核心代码也有点长,就不贴出来了,直接看源码呗,我写满了注释O(∩_∩)O~ Demo

//—2013-05-09-优化————————————————————————————————————————————

上面这个Demo,有一个细节,就是图片原始大小,是json文件里定义好的,即原图片大小本地计算好后写在json里,调用时直接使用了jData.width和jData.height属性,可我这样就没有灵活性了。

合理的思路是这样的:json只存储图片路径,然后使用JS去获取图片的原始尺寸进行等比例缩放。

查阅资料后确实JS发现有Image()对象,可以获得图片的原始尺寸:

[javascript]
var objImg = new Image();// 新建Image对象,获得原始图片的尺寸,增大了灵活性
objImg.onload = function() {
var iHeight = objImg .height * (iWidth / objImg .width); // iWidth恒定,使用原图片尺寸计算并设置等比例缩放后的图片高度</p>
}
[/javascript]

需要注意的是,这些计算需要放在onload函数中,保证计算时,图片已经加载完成,否则会得到iHeight为0。

可直接看源码,找到修改的地方理解,Demo2

天酬勤·笨先飞

 

天道酬勤,一直坚信这个道理。

笨鸟先飞,一直坚持这个姿态。

我一直在模仿理想中的自己,却从未超越过。

也许,这就是动力。

 

 

我二十一了。

昨天凌晨零点,@大花 一句准时的「生日快乐」把我吓到,因为我真忘了。

弱冠已过,责任更多。我不想阐述自己的家境去获取支持,只想尽快获得一股力量,在日后能维护这篇支离破碎。

希望不再增悲。

 

我二十一了。

今天晚上十点,我刚从北校回到宿舍,收到几条生日祝福的短信,想想,就这么过了。

青春将逝,年华不悔。我真希望自己的努力付出能早日获得回报,让我有份信心能承起一些担当。

希望如愿以偿。

 

我二十一了。

我还一无所有,我仍一无所获,我仍一无所知,我仍是一直笨鸟。

但,我一直在坚持,坚持一个信仰。

等我羽翼丰满,我再亮英姿。