安静
PHP技术博客

150107 小彩蛋JS

张 清月阅读(761)

看到酷壳上有个小彩蛋JS,觉得挺有意思,做个摘录,不过代码做了压缩代码看上去不是很容易看懂.

javascript: (function() {
function c() {
var e = document.createElement("link");
e.setAttribute("type", "text/css");
e.setAttribute("rel", "stylesheet");
e.setAttribute("href", f);
e.setAttribute("class", l);
document.body.appendChild(e)
}
function h() {
var e = document.getElementsByClassName(l);
for (var t = 0; t < e.length; t++) {
document.body.removeChild(e[t])
}
}
function p() {
var e = document.createElement("div");
e.setAttribute("class", a);
document.body.appendChild(e);
setTimeout(function() {
document.body.removeChild(e)
}, 100)
}
function d(e) {
return {
height: e.offsetHeight,
width: e.offsetWidth
}
}
function v(i) {
var s = d(i);
return s.height > e && s.height < n && s.width > t && s.width < r
}
function m(e) {
var t = e;
var n = 0;
while (!!t) {
n += t.offsetTop;
t = t.offsetParent
}
return n
}
function g() {
var e = document.documentElement;
if (!!window.innerWidth) {
return window.innerHeight
} else if (e && !isNaN(e.clientHeight)) {
return e.clientHeight
}
return 0
}
function y() {
if (window.pageYOffset) {
return window.pageYOffset
}
return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
}
function E(e) {
var t = m(e);
return t >= w && t <= b + w
}
function S() {
var e = document.createElement("audio");
e.setAttribute("class", l);
e.src = i;
e.loop = false;
e.addEventListener("canplay", function() {
setTimeout(function() {
x(k)
}, 500);
setTimeout(function() {
N();
p();
for (var e = 0; e < O.length; e++) {
T(O[e])
}
}, 15500)
}, true);
e.addEventListener("ended", function() {
N();
h()
}, true);
e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
document.body.appendChild(e);
e.play()
}
function x(e) {
e.className += " " + s + " " + o
}
function T(e) {
e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
}
function N() {
var e = document.getElementsByClassName(s);
var t = new RegExp("\\b" + s + "\\b");
for (var n = 0; n < e.length;) {
e[n].className = e[n].className.replace(t, "")
}
}
var e = 30;
var t = 30;
var n = 350;
var r = 350;
var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
var s = "mw-harlem_shake_me";
var o = "im_first";
var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
var a = "mw-strobe_light";
var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
var l = "mw_added_css";
var b = g();
var w = y();
var C = document.getElementsByTagName("*");
var k = null;
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
if (E(A)) {
k = A;
break
}
}
}
if (A === null) {
console.warn("Could not find a node of the right size. Please try a different page.");
return
}
c();
S();
var O = [];
for (var L = 0; L < C.length; L++) {
var A = C[L];
if (v(A)) {
O.push(A)
}
}
})()

141212 php的cli简介

admin阅读(598)

所有的PHP发行版,不论是编译自源代码的版本还是预创建的版本,都在默认情况下带有一个PHP可执行文件。这个可执行文件可以被用来运行命令行的PHP程序。

要在你的系统上找到这个可执行文件,就要遵照下面的步骤:
在Windows操作系统里,它被放在PHP主安装目录下,文件名是php.exe或者(在老版本的PHP里)是php-cli.exe。
在Linux操作系统里,它被保存在PHP安装目录的bin/子目录下。

不论是在哪一个操作系统里,你都需要对它进行测试,以保证它能够正常运行,方法是用-v参数调用它:

shell> /path/to/php -v
PHP 5.0.0 (cli) (built: Jun 1 2005 18:32:10)
Copyright (c) 1997-2004 The PHP Group
Zend Engine v2.0.0, Copyright (c) 1998-2004 Zend Technologies

它应该会返回PHP的版本号。

一个简单的PHP CLI程序
一旦找到了这个CLI可执行文件,你就可以用一个简单的程序来使用一下。创建一个简单的文本文件,其中包含有以下PHP代码,并把它保存为hello.php:

<?php
echo "Hello from the CLI";
?>

现在,试着在命令行提示符下运行这个程序,方法是调用CLI可执行文件并提供脚本的文件名:

shell> /path/to/phphello.php
Hello from the CLI

使用标准的输入和输出

PHP CLI会定义三个常量,以便让在命令行提示符下与解释器进行交互操作更加容易。这些常量见表格A。

表格A

常量 说明
STDIN 标准的输入设备
STDOUT 标准的输出设备
STDERR 标准的错误设备

你可以在自己的PHP脚本里使用这三个常量,以接受用户的输入,或者显示处理和计算的结果。要更好地理解这一点,可以看看下面的脚本(列表A):

列表A

<?php
// ask for input
fwrite(STDOUT, "Enter your name: ");
// get input
$name = trim(fgets(STDIN));
// write input back
fwrite(STDOUT, "Hello, $name!");
?>
Look what happens when you run it:
shell> /path/to/phphello.php
Enter your name: Joe
Hello, Joe!

在这个脚本里,fwrite()函数首先会向标准的输出设备写一条消息,询问用户的姓名。然后它会把从标准输入设备获得的用户输入信息读取到一个PHP变量里,并它把合并成为一个字符串。然后就用fwrite()把这个字符串打印输出到标准的输出设备上。

使用命令行自变量
在命令行里输入程序参数来更改其运行方式是很常见的做法。你也可以对CLI程序这样做。PHP CLI带有两个特殊的变量,专门用来达到这个目的:一个是$argv变量,它通过命令行把传递给PHP脚本的参数保存为单独的数组元素;另一个是$ argc变量,它用来保存$argv数组里元素的个数。

用PHP脚本编写一段读取$argv并处理它所含参数的代码是很简单的。试试列表B里的示例脚本,看看它是如何工作的:

列表B

<?php
print_r($argv);
?>
Run this script by passing it some arbitrary values, and check the output:
shell> /path/to/phptest.php chocolate 276 "killer tie, dude!"
Array
( [0] => test.php
[1] => chocolate
[2] => 276
[3] => killer tie, dude!
)

正如你可以从输出的结果看到的,传递给test.php的值会自动地作为数组元素出现在$argv里。要注意的是,$argvis的第一个自变量总是脚本自己的名称。

下面是一个更加复杂的例子(列表C):

列表C

<?php
// check for all required arguments
// first argument is always name of script!
if ($argc != 4) {
die("Usage: book.php <check-in-date> <num-nights> <room-type> ");
}
// remove first argument
array_shift($argv);
// get and use remaining arguments
$checkin = $argv[0];
$nights = $argv[1];
$type = $argv[2];
echo "You have requested a $type room for $nights nights, checking in on $checkin. Thank you for your order! ";
?>

下面是其用法的示例:

shell> /path/to/phpbook.php 21/05/2005 7 single
You have requested a single room for 7 nights, checking in on 21/05/2005. Thank you for your order!

在这里,脚本首先会检查$argc,以确保自变量的数量符合要求。它然后会从$argv里提取出每一个自变量,把它们打印输出到标准的输出设备上。

注意:你可以用Console_Getopt PEAR类向PHP增加更加复杂的命令行参数。

使用CLI参数
除了用命令行传递PHP脚本参数,你还可以传递PHP CLI参数以更改其工作方式。表格B就是一些重要参数的列表:

表格B

参数 说明
-a 交互式运行Run interactively
-c path 从path读取php的.ini文件
-n 不用读取php的.ini文件就直接运行
-m 列出经过编译的模块
-i 显示有关PHP构建的信息
-l 检查PHP脚本的句法
-s 以彩色方式显示源代码
-w 显示去掉注释之后的源代码
-h 显示帮助

交互模式
你还可以以交互方式使用PHP CLI,也就是输入命令,马上获得结果。要得到这种效果,只需要使用一个参数调用CLI可执行文件就行了,就像下面这样:

shell> /path/to/php -a

你会看到一个空行,你可以在里面输入PHP代码。看看:

shell> /path/to/php -a
Interactive mode enabled
<?php
echo mktime();
1121187283
echo 2+2;
4
exit();
shell>

或者,你可以不使用-a参数就调用CLI可执行文件,直接输入完整的脚本或者代码段。用-D来结束代码段,并让CLI来执行它。见下面的例子:

shell> /path/to/php
<?php
echo date("d-M-Y h:i:s", time());
?>
<Ctrl-D>
12-Jul-2005 06:54:04

这就是PHP的命令行,现在你应该已经对PHP CLI有了足够的了解,并开始使用它了。

141211 百度地图API获取点击对象属性

admin阅读(546)

先看看地图有哪些事件,查看官网类参考,翻到事件

大家看到这里的参数了麽?

其实,在点击物体时,通过这些参数就能够判断所点击的物体是什么了。

用marker举例:

先创建一个marker

//覆盖物Marker
var pmk = new BMap.Point(116.249472,39.946583);
var mk = new BMap.Marker(pmk);
map.addOverlay(mk);

然后对地图添加点击事件,如果判断出来是覆盖物,就弹出相应的对话框。

map.addEventListener("click",function(e){
if(e.overlay){
alert('你点击的是覆盖物:'+e.overlay.toString());   
}else{
alert('你点击的是地图');
}
});

添加一堆覆盖物,然后给每个覆盖物写点击事件。

比如我点击了多边形,就会弹出这个。

全部源代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击事件</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=v=1.3"></script>
</head>
<body>
<!--百度地图容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
var map = new BMap.Map("dituContent");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
map.enableScrollWheelZoom();
map.addEventListener("click",function(e){
if(e.overlay){
alert('你点击的是覆盖物:'+e.overlay.toString());   
}else{
alert('你点击的是地图');
}
});
//覆盖物Marker
var pmk = new BMap.Point(116.249472,39.946583);
var mk = new BMap.Marker(pmk);
map.addOverlay(mk);
//覆盖物Label
var plb = new BMap.Point(116.408149,39.958087);
var lb = new BMap.Label('我是覆盖物Label',{point:plb});
map.addOverlay(lb);
//覆盖物Polyline
var pl = new BMap.Polyline([new BMap.Point(116.250047,39.919583),new BMap.Point(116.441494,39.919583)],{strokeWeight:10})
map.addOverlay(pl);
//覆盖物Polygon
var pg = new BMap.Polygon([new BMap.Point(116.248323,39.893016),new BMap.Point(116.440344,39.893016),new BMap.Point(116.440344,39.811036),new BMap.Point(116.248323,39.811036)]);
map.addOverlay(pg);
</script>
</html>

更多关于百度地图的完整Demo: http://www.80aj.com/demo/map.php

141208 PHP获取用户有效IP

张 清月阅读(587)

oschina看到一篇关于爆discuz后台的文章,一想不太对, discuz本身通过代码做了一层密码尝试过多干掉ip的功能,也就是表 pre_common_failedlogin

实际拿了代码跑了下竟然是可以的,具体看了下discuz代码.

source/class/discuz/discuz_application.php中:

private function _get_client_ip() {
$ip = $_SERVER['REMOTE_ADDR'];
if (isset($_SERVER['HTTP_CLIENT_IP']) && preg_match('/^([0-9]{1,3}\.){3}[0-9]{1,3}$/', $_SERVER['HTTP_CLIENT_IP'])) {
$ip = $_SERVER['HTTP_CLIENT_IP'];
} elseif(isset($_SERVER['HTTP_X_FORWARDED_FOR']) AND preg_match_all('#\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}#s', $_SERVER['HTTP_X_FORWARDED_FOR'], $matches)) {
foreach ($matches[0] AS $xip) {
if (!preg_match('#^(10|172\.16|192\.168)\.#', $xip)) {
$ip = $xip;
break;
}
}
}
return $ip;
}

获取ip的最后一段是根据头部x_forwarded_for做ip设置,所以在发送模拟post的时候增加HTTP_X_FORWARDED_FOR就能轻松跳过ip failed.

找了下资料在这里扒皮说下:

一、没有使用代理服务器的PHP获取客户端IP情况:
REMOTE_ADDR = 客户端IP
HTTP_X_FORWARDED_FOR = 没数值或不显示
二、使用透明代理服务器的情况:Transparent Proxies
REMOTE_ADDR = 最后一个代理服务器 IP
HTTP_X_FORWARDED_FOR = 客户端真实 IP (经过多个代理服务器时,这个值类似:221.5.252.160, 203.98.182.163, 203.129.72.215)
这类代理服务器还是将客户端真实的IP发送给了访问对象,无法达到隐藏真实身份的目的.
三、使用普通匿名代理服务器的PHP获取客户端IP情况:Anonymous Proxies
REMOTE_ADDR = 最后一个代理服务器 IP
HTTP_X_FORWARDED_FOR = 代理服务器 IP (经过多个代理服务器时,这个值类似:203.98.182.163, 203.98.182.163, 203.129.72.215)
这种情况下隐藏了客户端的真实IP,但是向访问对象透露了客户端是使用代理服务器访问它们的.
四、使用欺骗性代理服务器的情况:Distorting Proxies
REMOTE_ADDR = 代理服务器 IP
HTTP_X_FORWARDED_FOR = 随机的 IP(经过多个代理服务器时,这个值类似:220.4.251.159, 203.98.182.163, 203.129.72.215)
这种情况下同样透露了客户端是使用了代理服务器,但编造了一个虚假的随机IP(220.4.251.159)代替客户端的真实IP来欺骗它.
五、使用高匿名代理服务器的PHP获取客户端IP情况:High Anonymity Proxies (Elite proxies)
REMOTE_ADDR = 代理服务器 IP
HTTP_X_FORWARDED_FOR = 没数值或不显示
无论是REMOTE_ADDR还是HTTP_FORWARDED_FOR,这些头消息未必能够取得到,因为不同的浏览器不同的网络设备可能发送不同的IP头消息.因此PHP使用$_SERVER["REMOTE_ADDR"] 、$_SERVER["HTTP_X_FORWARDED_FOR"] 获取的值可能是空值也可能是“unknown”值.

在我们实际使用过程中,我们会有更多的选择如:

HTTP_X_REAL_IP

HTTP_CLIENT_IP

HTTP_X_FORWARDED_FOR

REMOTE_ADDR

推荐检查顺序从上往下, 最靠谱的是REMOTE_ADDR

文章参考:

修复discuz获取用户ipbug
HTTP_X_FORWARDED_FOR,REMOTE_ADDR区别
推荐get_real_ip()
暴力破解dz密码

141119 社区单点SSO登录

admin阅读(481)

 

单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任。单点登录在大型网站里使用得非常频繁,例如像阿里巴巴这样的网站,在网站的背后是成百上千的子系统,用户一次操作或交易可能涉及到几十个子系统的协作,如果每个子系统都需要用户认证,不仅用户会疯掉,各子系统也会为这种重复认证授权的逻辑搞疯掉。实现单点登录说到底就是要解决如何产生和存储那个信任,再就是其他系统如何验证这个信任的有效性,因此要点也就以下几个:

 

  • 存储信任
  • 验证信任

 

只要解决了以上的问题,达到了开头讲得效果就可以说是SSO。最简单实现SSO的方法就是用Cookie,实现流程如下所示:

 

不然发现以上的方案是把信任存储在客户端的Cookie里,这种方法虽然实现方便但立马会让人质疑两个问题:

 

  • Cookie不安全
  • 不能跨域免登

 

对于第一个问题一般都是通过加密Cookie来处理,第二个问题是硬伤,其实这种方案的思路的就是要把这个信任关系存储在客户端,要实现这个也不一定只能用Cookie,用flash也能解决,flash的Shared Object API就提供了存储能力。

 

一般说来,大型系统会采取在服务端存储信任关系的做法,实现流程如下所示:

 

以上方案就是要把信任关系存储在单独的SSO系统(暂且这么称呼它)里,说起来只是简单地从客户端移到了服务端,但其中几个问题需要重点解决:

 

  • 如何高效存储大量临时性的信任数据
  • 如何防止信息传递过程被篡改
  • 如何让SSO系统信任登录系统和免登系统

 

对于第一个问题,一般可以采用类似与memcached的分布式缓存的方案,既能提供可扩展数据量的机制,也能提供高效访问。对于第二个问题,一般采取数字签名的方法,要么通过数字证书签名,要么通过像md5的方式,这就需要SSO系统返回免登URL的时候对需验证的参数进行md5加密,并带上token一起返回,最后需免登的系统进行验证信任关系的时候,需把这个token传给SSO系统,SSO系统通过对token的验证就可以辨别信息是否被改过。对于最后一个问题,可以通过白名单来处理,说简单点只有在白名单上的系统才能请求生产信任关系,同理只有在白名单上的系统才能被免登录。

141017 PHP单链表结构

张 清月阅读(540)

单链表结构(建议最后阅读):

链表中的数据是以节点来表示的,每个节点的构成:元素(数据元素的映象) + 指针(指示后继元素存储位置),元素就是存储数据的存储单元,指针就是连接每个节点的地址数据。

以“结点的序列”表示线性表称作线性链表(单链表)

单链表是链式存取的结构,为找第 i 个数据元素,必须先找到第 i-1 个数据元素。
因此,查找第 i 个数据元素的基本操作为:移动指针,比较 j 和 i

1秒看懂单链结构

object(singelLinkList)#1 (1) {
["header":"singelLinkList":private]=>
object(node)#2 (3) {
["id"]=>
NULL
["name"]=>
NULL
["next"]=>
object(node)#4 (3) {
["id"]=>
int(1)
["name"]=>
string(6) "aaaaaa"
["next"]=>
object(node)#8 (3) {
["id"]=>
int(2)
["name"]=>
string(6) "bbbbbb"
["next"]=>
object(node)#7 (3) {
["id"]=>
int(3)
["name"]=>
string(6) "cccccc"
["next"]=>
object(node)#6 (3) {
["id"]=>
int(4)
["name"]=>
string(6) "dddddd"
["next"]=>
object(node)#3 (3) {
["id"]=>
int(5)
["name"]=>
string(6) "eeeeee"
["next"]=>
object(node)#5 (3) {
["id"]=>
int(6)
["name"]=>
string(6) "ffffff"
["next"]=>
NULL
}
}
}
}
}
}
}
}

PHP理解单链表应用

//链表节点 
class node { 
public $id; //节点id 
public $name; //节点名称 
public $next; //下一节点 
public function __construct($id, $name) { 
$this->id = $id; 
$this->name = $name; 
$this->next = null; 
} 
} 
//单链表 
class singelLinkList { 
private $header; //链表头节点 
//构造方法 
public function __construct($id = null, $name = null) { 
$this->header = new node ( $id, $name, null ); 
} 
//获取链表长度 
public function getLinkLength() { 
$i = 0; 
$current = $this->header; 
while ( $current->next != null ) { 
$i ++; 
$current = $current->next; 
} 
return $i; 
} 
//添加节点数据 
public function addLink($node) { 
$current = $this->header; 
while ( $current->next != null ) { 
if ($current->next->id > $node->id) { 
break; 
} 
$current = $current->next; 
} 
$node->next = $current->next; 
$current->next = $node; 
} 
//删除链表节点 
public function delLink($id) { 
$current = $this->header; 
$flag = false; 
while ( $current->next != null ) { 
if ($current->next->id == $id) { 
$flag = true; 
break; 
} 
$current = $current->next; 
} 
if ($flag) { 
$current->next = $current->next->next; 
} else { 
echo "未找到id=" . $id . "的节点!\n\r"; 
} 
} 
//获取链表 
public function getLinkList() { 
$current = $this->header; 
if ($current->next == null) { 
echo ("链表为空!"); 
return; 
} 
while ( $current->next != null ) { 
echo 'id:' . $current->next->id . '   name:' . $current->next->name . "\n\r"; 
if ($current->next->next == null) { 
break; 
} 
$current = $current->next; 
} 
} 
//获取节点名字 
public function getLinkNameById($id) { 
$current = $this->header; 
if ($current->next == null) { 
echo "链表为空!"; 
return; 
} 
while ( $current->next != null ) { 
if ($current->id == $id) { 
break; 
} 
$current = $current->next; 
} 
return $current->name; 
} 
//更新节点名称 
public function updateLink($id, $name) { 
$current = $this->header; 
if ($current->next == null) { 
echo "链表为空!"; 
return; 
} 
while ( $current->next != null ) { 
if ($current->id == $id) { 
break; 
} 
$current = $current->next; 
} 
return $current->name = $name; 
} 
} 
$lists = new singelLinkList (); 
$lists->addLink ( new node ( 5, 'eeeeee' ) ); 
$lists->addLink ( new node ( 1, 'aaaaaa' ) ); 
$lists->addLink ( new node ( 6, 'ffffff' ) ); 
$lists->addLink ( new node ( 4, 'dddddd' ) ); 
$lists->addLink ( new node ( 3, 'cccccc' ) ); 
$lists->addLink ( new node ( 2, 'bbbbbb' ) ); 
echo "\n\r-----------PHP数组--------------\n\r"; 
var_dump($lists);
echo "\n\r-----------节点列表--------------\n\r"; 
$lists->getLinkList (); 
echo "\n\r-----------删除节点--------------\n\r"; 
$lists->delLink ( 5 ); 
$lists->getLinkList (); 
echo "\n\r-----------更新节点名称--------------\n\r"; 
$lists->updateLink ( 3, "222222" ); 
$lists->getLinkList (); 
echo "\n\r-----------获取节点名称--------------\n\r"; 
echo $lists->getLinkNameById ( 5 ); 
echo "\n\r-----------获取链表长度--------------\n\r"; 
echo $lists->getLinkLength (); 

一句话

单链结构即查找数据是依据指针移动实现

141008 PHP全局变量global详解

admin阅读(514)

简单的代码:为什么输出的却是0?!!

在用户自定义函数中,一个局部函数范围将被引入。任何用于函数内部的变量按缺省情况将被限制在局部函数范围内(包括include 和 require 导入的文件内的变量)!
解释:A.php文件的内Test_Global是定义好的第三方函数,该函数用include导入了B.php文件内的$a的global全局变量,所以$a被限制在Test_Global局部函数范围内,所以B.php文件内的$a的作用范围都在Test_Global内,而不是作用了整个A.php内….

解决方案:

冲出局部函数

//A.php 文件
<?php
function Test_Global()
{  
Test();  
}  
include 'B.php';   //将include 从局部Test_Global函数中移出
$a = 0 ;
Test_Global();
echo $a;
?> 
//B.php 文件
<?php
function Test()
{
global $a;
$a =1;
}
?>

优秀的访问器

//A.php 文件
<?php
include 'B.php'; 
$a =0;
Set_Global($a);
echo $a;
?> 
//B.php 文件
<?php
function Set_Global(&$var)
{
$var=1;
}
?>

140928 discuz应用更新提醒窗口的关闭方法

admin阅读(693)

导读: 用管理员帐号登录discuz的时候总有这个应用更新提示的小窗口, 因为不想更新所以觉得很烦. 决定把这个小窗口删除.关闭应用更新提醒窗口只要注释几行代码就可以了.

每次用管理员帐号登录discuz的时候总有这个应用更新提示的小窗口, 因为不想更新所以觉得很烦. 决定把这个小窗口删除.

关闭应用更新提醒窗口的方法:

打开 discuz网站目录/source/module/misc/misc_patch.php, 把if($newversion) {…}这里的代码全部注释掉, 保存上传, 更新一下缓存, 那个应用的更新提示就屏蔽了.

if($newversion) {
$lang = lang('forum/misc');
echo '<div "bm"><div "bm_h cl"><a href="javascript:;" "$('plugin_notice').style.display='none';setcookie('pluginnotice', 1, 86400)" "y" title="'.$lang['patch_close'].'">'.$lang['patch_close'].'</a>';
echo '<h2 "i">'.$lang['plugin_title'].'</h2></div><div "bm_c">';
echo '<div "cl bbda pbm">'.lang('forum/misc', 'plugin_memo', array('number' => $newversion)).'</div>';
echo '<div "ptn cl"><a href="admin.php?action=plugins" "xi2 y">'.$lang['plugin_link'].' &raquo;</a></div>';
echo '</div></div>';
}

注释代码的方法: 在每行前面加上双斜杠就表示屏蔽了.

140917 discuz解决开启远程静态文件无法适用复制功能

admin阅读(510)

最近发现discuz使用webkit内核的浏览器(火狐、Chrome、Safari等webkit内核的浏览器)来点击帖子的  [复制链接]  ,复制到剪切板的内容不是帖子标题和链接 ,而是:_level0.str

考虑到Discuz X2使用的是 [复制链接] 功能是使用了一个swf文件,而论坛刚刚好开启远程静态文件负载,这个swf文件就在远程服务器上了,考虑到了是不是因为这个原因导致这个功能在相应内核的浏览器上有些小问题呢?

接着测试而IE浏览器下却是正常的,关于这个我找了5个多小时的资料,都找不到解决方法。

最后做了尝试,把这个clipboard.swf文件放回 /static/image/common/ 目录里面去,接着修改/static/js/common_extra.js文件,

  1. var msg = ‘<div class=”c”><div style=”width: 200px; text-align: center; text-decoration:underline;”>点此复制到剪贴板</div>’ +
  2. AC_FL_RunContent(‘id’, ‘clipboardswf’, ‘name’, ‘clipboardswf’, ‘devicefont’, ‘false’, ‘width’, ’200′, ‘height’, ’40′, ‘src’, STATICURL + ‘image/common/clipboard.swf’, ‘menu’, ‘false’,  ‘allowScriptAccess’, ‘sameDomain’, ‘swLiveConnect’, ‘true’, ‘wmode’, ‘transparent’, ‘style’ , ‘margin-top:-20px’) + ‘</div>’;
  3. showDialog(msg, ‘info’);
  4. text = text.replace(/[\xA0]/g, ‘ ‘);
  5. CLIPBOARDSWFDATA = text;

复制代码

修改为:

  1. var msg = ‘<div class=”c”><div style=”width: 200px; text-align: center; text-decoration:underline;”>点此复制到剪贴板</div>’ +
  2. AC_FL_RunContent(‘id’, ‘clipboardswf’, ‘name’, ‘clipboardswf’, ‘devicefont’, ‘false’, ‘width’, ’200′, ‘height’, ’40′, ‘src’,  ‘/static/image/common/clipboard.swf’, ‘menu’, ‘false’,  ‘allowScriptAccess’, ‘sameDomain’, ‘swLiveConnect’, ‘true’, ‘wmode’, ‘transparent’, ‘style’ , ‘margin-top:-20px’) + ‘</div>’;
  3. showDialog(msg, ‘info’);
  4. text = text.replace(/[\xA0]/g, ‘ ‘);
  5. CLIPBOARDSWFDATA = text;

复制代码

即可解决问题。

140916 discuz对不起,您安装的不是正版应用修改

admin阅读(624)

Discuz! X2.5安装插件出现:对不起,您安装的不是正版应用的解决方法

discuz 社区在更新到2.0以上后,增加了对插件的版本检测,在安装时,可能会出现:“对不起,您安装的不是正版应用,安装程序无法继续执行”的提示,要解决这个其实挺容易的,找到以下文件:

/source/function/function_cloudaddons.php

找到文件中的cloudaddons_validator这个处理过程,将中间提示部份注释掉,改为像以下这样即可大功告成。。

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

function cloudaddons_validator($addonid) {
$array = cloudaddons_getmd5($addonid);
if(cloudaddons_open('&mod=app&ac=validator&addonid='.$addonid.($array !== false ? '&rid='.$array['RevisionID'].'&sn='.$array['SN'].'&rd='.$array['RevisionDateline'] : '')) === '0') {
/**
cpmsg('cloudaddons_genuine_message', '', 'error', array('addonid' => $addonid));
*/
}
}

 

140911 什么是CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI?

admin阅读(647)

什么是CGI

CGI全称是“公共网关接口”(Common Gateway Interface),HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具,其程序须运行在网络服务器上。

CGI可以用任何一种语言编写,只要这种语言具有标准输入、输出和环境变量。如php, perl, tcl

什么是FastCGI

FastCGI像是一个常驻(long-live)型的CGI,它可以一直执行着,只要激活后,不会每次都要花费时间去fork一次(这是CGI最为人诟病的fork-and-execute 模式)。它还支持分布式的运算, 即 FastCGI 程序可以在网站服务器以外的主机上执行并且接受来自其它网站服务器来的请求。

FastCGI是语言无关的、可伸缩架构的CGI开放扩展,其主要行为是将CGI解释器进程保持在内存中并因此获得较高的性能。众所周知,CGI解释器的反复加载是CGI性能低下的主要原因,如果CGI解释器保持在内存中并接受FastCGI进程管理器调度,则可以提供良好的性能、伸缩性、Fail- Over特性等等。

FastCGI与CGI特点

  1. 如CGI,FastCGI也具有语言无关性.
  2. 如CGI, FastCGI在进程中的应用程序,独立于核心web服务器运行,提供了一个比API更安全的环境。(APIs把应用程序的代码与核心的web服务器链接在一起,这意味着在一个错误的API的应用程序可能会损坏其他应用程序或核心服务器; 恶意的API的应用程序代码甚至可以窃取另一个应用程序或核心服务器的密钥。)
  3. FastCGI技术目前支持语言有:C/C++、Java、Perl、Tcl、Python、SmallTalk、Ruby、php等。相关模块在Apache, ISS, Lighttpd等流行的服务器上也是可用的。
  4. 如CGI,FastCGI的不依赖于任何Web服务器的内部架构,因此即使服务器技术的变化, FastCGI依然稳定不变。

FastCGI的工作原理

  1. Web Server启动时载入FastCGI进程管理器(IIS ISAPI或Apache Module)
  2. FastCGI进程管理器自身初始化,启动多个CGI解释器进程(可见多个php-cgi)并等待来自Web Server的连接。
  3. 当客户端请求到达Web Server时,FastCGI进程管理器选择并连接到一个CGI解释器。Web server将CGI环境变量和标准输入发送到FastCGI子进程php-cgi。
  4. FastCGI子进程完成处理后将标准输出和错误信息从同一连接返回Web Server。当FastCGI子进程关闭连接时,请求便告处理完成。FastCGI子进程接着等待并处理来自FastCGI进程管理器(运行在Web Server中)的下一个连接。 在CGI模式中,php-cgi在此便退出了。

在上述情况中,你可以想象CGI通常有多慢。每一个Web请求PHP都必须重新解析php.ini、重新载入全部扩展并重初始化全部数据结构。使用FastCGI,所有这些都只在进程启动时发生一次。一个额外的好处是,持续数据库连接(Persistent database connection)可以工作。

FastCGI的不足

因为是多进程,所以比CGI多线程消耗更多的服务器内存,PHP-CGI解释器每进程消耗7至25兆内存,将这个数字乘以50或100就是很大的内存数。

Nginx 0.8.46+PHP 5.2.14(FastCGI)服务器在3万并发连接下,开启的10个Nginx进程消耗150M内存(15M*10=150M),开启的64个php-cgi进程消耗1280M内存(20M*64=1280M),加上系统自身消耗的内存,总共消耗不到2GB内存。如果服务器内存较小,完全可以只开启25个php-cgi进程,这样php-cgi消耗的总内存数才500M。

上面的数据摘自Nginx 0.8.x + PHP 5.2.13(FastCGI)搭建胜过Apache十倍的Web服务器(第6版)

什么是PHP-CGI

PHP-CGI是PHP自带的FastCGI管理器。

启动PHP-CGI,使用如下命令:

1
php-cgi -b 127.0.0.1:9000

PHP-CGI的不足

  1. php-cgi变更php.ini配置后需重启php-cgi才能让新的php-ini生效,不可以平滑重启
  2. 直接杀死php-cgi进程,php就不能运行了。(PHP-FPM和Spawn-FCGI就没有这个问题,守护进程会平滑从新生成新的子进程。)

什么是PHP-FPM

PHP-FPM是一个PHP FastCGI管理器,是只用于PHP的,可以在 http://php-fpm.org/download下载得到.

PHP-FPM其实是PHP源代码的一个补丁,旨在将FastCGI进程管理整合进PHP包中。必须将它patch到你的PHP源代码中,在编译安装PHP后才可以使用。

现在我们可以在最新的PHP 5.3.2的源码树里下载得到直接整合了PHP-FPM的分支,据说下个版本会融合进PHP的主分支去。相对Spawn-FCGI,PHP-FPM在CPU和内存方面的控制都更胜一筹,而且前者很容易崩溃,必须用crontab进行监控,而PHP-FPM则没有这种烦恼。

PHP5.3.3已经集成php-fpm了,不再是第三方的包了。PHP-FPM提供了更好的PHP进程管理方式,可以有效控制内存和进程、可以平滑重载PHP配置,比spawn-fcgi具有更多有点,所以被PHP官方收录了。在./configure的时候带 –enable-fpm参数即可开启PHP-FPM。

使用PHP-FPM来控制PHP-CGI的FastCGI进程

1
2
3
4
5
6
/usr/local/php/sbin/php-fpm{start|stop|quit|restart|reload|logrotate}
--start 启动php的fastcgi进程
--stop 强制终止php的fastcgi进程
--quit 平滑终止php的fastcgi进程
--restart 重启php的fastcgi进程
--reload 重新平滑加载php的php.ini --logrotate 重新启用log文件

什么是Spawn-FCGI

Spawn-FCGI是一个通用的FastCGI管理服务器,它是lighttpd中的一部份,很多人都用Lighttpd的Spawn-FCGI进行FastCGI模式下的管理工作,不过有不少缺点。而PHP-FPM的出现多少缓解了一些问题,但PHP-FPM有个缺点就是要重新编译,这对于一些已经运行的环境可能有不小的风险(refer),在php 5.3.3中可以直接使用PHP-FPM了。

Spawn-FCGI目前已经独成为一个项目,更加稳定一些,也给很多Web 站点的配置带来便利。已经有不少站点将它与nginx搭配来解决动态网页。

最新的lighttpd也没有包含这一块了(http://www.lighttpd.net/search?q=Spawn-FCGI),但可以在以前版本中找到它。在lighttpd-1.4.15版本中就包含了(http://www.lighttpd.net/download/lighttpd-1.4.15.tar.gz)

目前Spawn-FCGI的下载地址是http://redmine.lighttpd.net/projects/spawn-fcgi,最新版本是http://www.lighttpd.net/download/spawn-fcgi-1.6.3.tar.gz

注:最新的Spawn-FCGI可以到lighttpd.net网站搜索“Spawn-FCGI”找到它的最新版本发布地址

下面我们就可以使用Spawn-FCGI来控制php-CGI的FastCGI进程了

1
/usr/local/bin/spawn-fcgi -a 127.0.0.1 -p 9000 -C 5 -u www-data -g www-data -f /usr/bin/php-CGI

参数含义如下:

  • -f 指定调用FastCGI的进程的执行程序位置,根据系统上所装的PHP的情况具体设置
  • -a 绑定到地址addr
  • -p 绑定到端口port
  • -s 绑定到unix socket的路径path
  • -C 指定产生的FastCGI的进程数,默认为5(仅用于PHP)
  • -P 指定产生的进程的PID文件路径
  • -u和-g FastCGI使用什么身份(-u 用户 -g 用户组)运行,Ubuntu下可以使用www-data,其他的根据情况配置,如nobody、apache等

PHP-FPM与spawn-CGI对比测试

PHP-FPM的使用非常方便,配置都是在PHP-FPM.ini的文件内,而启动、重启都可以从php/sbin/PHP-FPM中进行。更方便的是修改php.ini后可以直接使用PHP-FPM reload进行加载,无需杀掉进程就可以完成php.ini的修改加载
结果显示使用PHP-FPM可以使php有不小的性能提升。PHP-FPM控制的进程cpu回收的速度比较慢,内存分配的很均匀。

Spawn-FCGI控制的进程CPU下降的很快,而内存分配的比较不均匀。有很多进程似乎未分配到,而另外一些却占用很高。可能是由于进程任务分配的不均匀导致的.而这也导致了总体响应速度的下降。而PHP-FPM合理的分配,导致总体响应的提到以及任务的平均。

PHP-FPM与Spawn-FCGI功能比较

http://php-fpm.org/about/

PHP-FPM、Spawn-FCGI都是守护php-cgi的进程管理器。

参考文档:

140829 worpdress WPSuperCache之Nginx设置[转载]

admin阅读(961)

WP Super Cache 米饭个人是比较喜欢的,因为设置起来比 W3TC 要简单的多了,不过捏矛盾总是在的,折腾 VPS 的玩 Nginx 居多,不过WP Super Cache 中最好的缓存模式mod_rewrite偏偏只对支持.htaccess友好啊,不过现在么,时代发展了,口黑口黑。

设置规则

修改你的 .conf 文件,一般是/usr/local/nginx/conf/wordpress.conf文件。不要原来的拉,直接替换成新的!

注: set $supercache_file /wp-content/cache/supercache/$http_host$1/index${ihttp_host}.html; 必须是实际路径;如果固定链接中含有index.php,去掉。

location / {
if (-f $request_filename) {
break;
}
set $supercache_file '';
set $supercache_uri $request_uri;
set $supercache 1;
set $ihttp_host '';
if ($request_method = POST) {
set $supercache 0;
}
set $qs 0;
if ($query_string) {
set $qs 1;
}
if ($query_string ~* "^utm_source=([^&]+)&utm_medium([^&]+)&utm_campaign=([^&]+)(&utm_content=([^&]+))?$") {
set $qs 0;
set $supercache_uri $document_uri;
}
if ($qs = 1) {
set $supercache 0;
}
# 针对已登录用户(发表过评论),可以不静态化。在访问量高峰时可注释掉
if ($http_cookie ~* "comment_author_|wordpress|wp-postpass_" ) {
set $supercache 0;
}
#结束
if ($http_user_agent ~* '(iphone|ipod|aspen|incognito|webmate|android|dream|cupcake|froyo|blackberry9500|blackberry9520|blackberry9530|blackberry9550|blackberry 9800|webos|s8000|bada)') {
set $ihttp_host '-mobile';
}
if ($supercache = 0) {
set $supercache_uri '';
}
if ($supercache_uri ~ ^(.+)$) {
set $supercache_file /wp-content/cache/supercache/$http_host$1/index${ihttp_host}.html;
}
if (-f $document_root$supercache_file) {
#rewrite ^(.*)$ $supercache_file break;
rewrite ^ $supercache_file last;
}
if (!-e $request_filename) {
rewrite . /index.php last;
}
}

设置插件

这里是重点,因为规则也不是非常的全,所以我们能使用的功能仅有一下四项(意思就是除了这四项都不能选择,推荐选项也不能):

  • mod_rewrite 缓存模式(必选)
  • 当某页面有新评论时,只刷新该页面的缓存(必选)
  • “缓存重建”和“移动设备支持”(可选)
  • 当有新文章或页面的发布或更新时清除之前的缓存文件(可选)
  • 将底部的垃圾回收期缓存超时时间更改为0秒:

其他

重启你的 VPS 。

不过,

碍眼不?将下面的代码加入 functions.php 就好了

add_filter('got_rewrite', 'nginx_has_rewrites');
function nginx_has_rewrites() {
return true;
}

140828 2014年最新前端开发面试题

admin阅读(670)

目录

  1. 前言
  2. HTML 部分
  3. CSS 部分
  4. JavaScript 部分
  5. 其他问题
  6. 优质网站推荐

前言

本文总结了一些优质的前端面试题(多数源于网络),初学者阅后也要用心钻研其中的原理,重要知识需要系统学习,透彻学习,形成自己的知识链。万不可投机取巧,只求面试过关是错误的!

面试有几点需注意:(来源程劭非老师 github:@wintercn)

  1. 面试题目: 根据你的等级和职位变化,入门级到专家级:范围↑、深度↑、方向↑。
  2. 题目类型: 技术视野、项目细节、理论知识题,算法题,开放性题,案例题。
  3. 进行追问: 可以确保问到你开始不懂或面试官开始不懂为止,这样可以大大延展题目的区分度和深度,知道你的实际能力。因为这种关联知识是长时期的学习,绝对不是临时记得住的。
  4. 回答问题再棒,面试官(可能是你的直接领导面试),会考虑我要不要这个人做我的同事?所以态度很重要。(感觉更像是相亲)
  5. 资深的工程师能把absolute和relative弄混,这样的人不要也罢,因为团队需要的你这个人具有可以依靠的才能(靠谱)。

前端开发面试知识点大纲:

HTML&CSS:
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应
JavaScript:  
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。
其他:
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯

作为一名前端工程师,无论工作年头长短都应该必须掌握的知识点

此条由 王子墨 发表在 前端随笔

    1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
2、DOM操作  ——如何添加、移除、移动、复制、创建和查找节点等。
3、事件    —— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。
4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
5、严格模式与混杂模式 —— 如何触发这两种模式,区分它们有何意义。
6、盒模型 —— 外边距、内边距和边框之间的关系,及IE8以下版本的浏览器中的盒模型
7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
9、HTML与XHTML——二者有什么区别,你觉得应该使用哪一个并说出理由。
10、JSON  —— 作用、用途、设计结构。

备注:

根据自己需要选择性阅读,面试题是对理论知识的总结,让自己学会应该如何表达。

资料答案不够正确和全面,欢迎补充答案、题目;最好是现在网上没有的。

格式不断修改更新中。

HTML

  • Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
    (1)、<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,
    用什么文档类型 规范来解析这个文档。
    (2)、严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。
    (3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
    (4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
    
  • 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
    (1)CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,
    比如div默认display属性值为“block”,成为“块级”元素;
    span默认display属性值为“inline”,是“行内”元素。
    (2)行内元素有:a b span img input select strong(强调的语气) 
    块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
    (3)知名的空元素: 
    <br> <hr> <img> <input> <link> <meta> 
    鲜为人知的是: 
    <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
    
  • link 和@import 的区别是?
    (1)link属于XHTML标签,而@import是CSS提供的;
    (2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
    (3)import只在IE5以上才能识别,而link是XHTML标签,无兼容问题;
    (4)link方式的样式的权重 高于@import的权重.
    
  • 浏览器的内核分别是什么?
     * IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto,现为Blink;
    
  • 常见兼容性问题?
    * png24位的图片在iE6浏览器上出现背景,解决方案是做成PNG8.
    * 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
    * IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。
    浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
    这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
    渐进识别的方式,从总体中逐渐排除局部。
    首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。 
    接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
    css
    .bb{
    background-color:#f1ee18;/*所有识别*/
    .background-color:#00deff\9; /*IE6、7、8识别*/
    +background-color:#a200ff;/*IE6、7识别*/
    _background-color:#1e0bd1;/*IE6识别*/ 
    }
    *  IE下,可以使用获取常规属性的方法来获取自定义属性,
    也可以使用getAttribute()获取自定义属性;
    Firefox下,只能使用getAttribute()获取自定义属性. 
    解决方法:统一通过getAttribute()获取自定义属性.
    * IE下,even对象有x,y属性,但是没有pageX,pageY属性; 
    Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
    * 解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。
    * Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 
    可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
    超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
    L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}
    
  • html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和
    HTML5?

    * HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
    * 绘画 canvas  
    用于媒介回放的 video 和 audio 元素 
    本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
    sessionStorage 的数据在浏览器关闭后自动删除
    语意化更好的内容元素,比如 article、footer、header、nav、section 
    表单控件,calendar、date、time、email、url、search  
    新的技术webworker, websockt, Geolocation
    * 移除的元素
    纯表现的元素:basefont,big,center,font, s,strike,tt,u;
    对可用性产生负面影响的元素:frame,frameset,noframes;
    支持HTML5新标签:
    * IE8/IE7/IE6支持通过document.createElement方法产生的标签,
    可以利用这一特性让这些浏览器支持HTML5新标签,
    浏览器支持新标签后,还需要添加标签默认的样式:
    * 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
    <!–[if lt IE 9]> 
    <script> src=”http://html5shim.googlecode.com/svn/trunk/html5.js”</script> 
    <![endif]–> 
    如何区分: DOCTYPE声明\新增的结构元素\功能元素
  • 语义化的理解?
    用正确的标签做正确的事情!
    html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
    在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。
    搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。
    使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
    
  • HTML5的离线储存?
    localStorage    长期存储数据,浏览器关闭后数据不丢失;
    sessionStorage  数据在浏览器关闭后自动删除。
    
  • (写)描述一段语义的html代码吧。
    (HTML5中新增加的很多标签(如:<article>、<nav>、<header>和<footer>等)
    就是基于语义化设计原则)  
    < div id=”header”> 
    < h1>标题< /h1> 
    < h2>专注Web前端技术< /h2> 
    < /div>
  • iframe有那些缺点?
    *iframe会阻塞主页面的Onload事件;
    *iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
    使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript
    动态给iframe添加src属性值,这样可以可以绕开以上两个问题。
    
  • 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
    cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
    sessionStorage和localStorage的存储空间更大;
    sessionStorage和localStorage有更多丰富易用的接口;
    sessionStorage和localStorage各自独立的存储空间;
    
  • 如何实现浏览器内多个标签页之间的通信? (阿里)
    调用localstorge、cookies等本地存储方式
    
  • webSocket如何兼容低浏览器?(阿里)
    Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
    

CSS

  • 介绍一下CSS的盒子模型?
    (1)有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;
    (2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).
    
  • CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?
    *   1.id选择器( # myid)
    2.类选择器(.myclassname)
    3.标签选择器(div, h1, p)
    4.相邻选择器(h1 + p)
    5.子选择器(ul < li)
    6.后代选择器(li a)
    7.通配符选择器( * )
    8.属性选择器(a[rel = “external”])
    9.伪类选择器(a: hover, li: nth - child)
    *   可继承的样式: font-size font-family color, UL LI DL DD DT;
    *   不可继承的样式:border padding margin width height ;
    *   优先级就近原则,同权重情况下样式定义最近者为准;
    *   载入样式以最后载入的定位为准;

    优先级为:

       !important >  id > class > tag
    important 比 内联优先级高
    

    CSS3新增伪类举例:

    p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
    :enabled  :disabled 控制表单控件的禁用状态。
    :checked        单选框或复选框被选中。
    
  • 如何居中div?如何居中一个浮动元素?
    • 给div设置一个宽度,然后添加margin:0 auto属性
      div{
      width:200px;
      margin:0 auto;
      }
      
    • 居中一个浮动元素
        确定容器的宽高 宽500 高 300 的层
      设置层的外边距
      .div { 
      Width:500px ; height:300px;//高度可以不设
      Margin: -150px 0 0 -250px;
      position:relative;相对定位
      background-color:pink;//方便看效果
      left:50%;
      top:50%;
      }
      
  • 列出display的值,说明他们的作用。position的值, relative和absolute定位原点是?
      1.   
    block 象块类型元素一样显示。
    none 缺省值。象行内元素类型一样显示。
    inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
    list-item 象块类型元素一样显示,并添加样式列表标记。
    2. 
    *absolute 
    生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
    *fixed (老IE不支持)
    生成绝对定位的元素,相对于浏览器窗口进行定位。
    *relative 
    生成相对定位的元素,相对于其正常位置进行定位。
    * static  默认值。没有定位,元素出现在正常的流中
    *(忽略 top, bottom, left, right z-index 声明)。
    * inherit 规定从父元素继承 position 属性的值。
    
  • CSS3有哪些新特性?
      CSS3实现圆角(border-radius:8px),阴影(box-shadow:10px),
    对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
    transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
    增加了更多的CSS选择器  多背景 rgba
    
  • 一个满屏 品 字布局 如何设计?
  • 经常遇到的CSS的兼容性有哪些?原因,解决方法是什么?
  • 为什么要初始化CSS样式。
    - 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
    - 当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
    *最简单的初始化方法就是: * {padding: 0; margin: 0;} (不建议)
    淘宝的样式初始化: 
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
    h1, h2, h3, h4, h5, h6{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    small{ font-size:12px; }
    ul, ol { list-style:none; }
    a { text-decoration:none; }
    a:hover { text-decoration:underline; }
    sup { vertical-align:text-top; }
    sub{ vertical-align:text-bottom; }
    legend { color:#000; }
    fieldset, img { border:0; }
    button, input, select, textarea { font-size:100%; }
    table { border-collapse:collapse; border-spacing:0; }
    
  • absolute的containing block计算方式跟正常流有什么不同?
  • position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?
  • 对BFC规范的理解?
    (W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。)
    
    • css定义的权重

      以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:

      /权重为1/
      div{
      }
      /权重为10/
      .class1{
      }
      /权重为100/

      id1{

      }
      /权重为100+1=101/

      id1 div{

      }
      /权重为10+1=11/
      .class1 div{
      }
      /权重为10+10+1=21/
      .class1 .class2 div{
      }

      如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现

  • 解释下浮动和它的工作原理?清除浮动的技巧
  • 用过媒体查询,针对移动端的布局吗?
  • 使用 CSS 预处理器吗?喜欢那个?
    SASS
    
  • 如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)
    多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms
    
  • display:inline-block 什么时候会显示间隙?(携程)
    移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
    

JavaScript

  • JavaScript原型,原型链 ? 有什么特点?
  • eval是做什么的?
    它的功能是把对应的字符串解析成JS代码并运行;
    应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)。
    
  • null,undefined 的区别?
  • 写一个通用的事件侦听器函数。
        // event(事件)工具集,来源:github.com/markyun
    markyun.Event = {
    // 页面加载完成后
    readyEvent : function(fn) {
    if (fn==null) {
    fn=document;
    }
    var oldonload = window.onload;
    if (typeof window.onload != ‘function’) {
    window.onload = fn;
    } else {
    window.onload = function() {
    oldonload();
    fn();
    };
    }
    },
    // 视能力分别使用dom0||dom2||IE方式 来绑定事件
    // 参数: 操作的元素,事件名称 ,事件处理程序
    addEvent : function(element, type, handler) {
    if (element.addEventListener) {
    //事件类型、需要执行的函数、是否捕捉
    element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
    element.attachEvent(‘on’ + type, function() {
    handler.call(element);
    });
    } else {
    element[‘on’ + type] = handler;
    }
    },
    // 移除事件
    removeEvent : function(element, type, handler) {
    if (element.removeEnentListener) {
    element.removeEnentListener(type, handler, false);
    } else if (element.datachEvent) {
    element.detachEvent(‘on’ + type, handler);
    } else {
    element[‘on’ + type] = null;
    }
    }, 
    // 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)
    stopPropagation : function(ev) {
    if (ev.stopPropagation) {
    ev.stopPropagation();
    } else {
    ev.cancelBubble = true;
    }
    },
    // 取消事件的默认行为
    preventDefault : function(event) {
    if (event.preventDefault) {
    event.preventDefault();
    } else {
    event.returnValue = false;
    }
    },
    // 获取事件目标
    getTarget : function(event) {
    return event.target || event.srcElement;
    },
    // 获取event对象的引用,取到事件的所有信息,确保随时能使用event;
    getEvent : function(e) {
    var ev = e || window.event;
    if (!ev) {
    var c = this.getEvent.caller;
    while (c) {
    ev = c.arguments[0];
    if (ev && Event == ev.constructor) {
    break;
    }
    c = c.caller;
    }
    }
    return ev;
    }
    };
  • Node.js的适用场景?
    高并发、聊天、实时消息推送
    
  • 介绍js的基本数据类型。
    number,string,boolean,object,undefined
    
  • Javascript如何实现继承?
    通过原型和构造器
    
  • [“1”, “2”, “3”].map(parseInt) 答案是多少?
     [1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix) 但 map 传了 3 个 (element, index, array)
    
  • 如何创建一个对象? (画出此对象的内存图)
      function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sing = function() { alert(this.name) } 
    }
    
  • 谈谈This对象的理解。
    this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。
    但是有一个总原则,那就是this指的是调用函数的那个对象。
    this一般情况下:是全局对象Global。 作为方法调用,那么this就是指这个对象
    
  • 事件是?IE与火狐的事件机制有什么区别? 如何阻止冒泡?
     1. 我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。  
    2. 事件处理机制:IE是事件冒泡、火狐是 事件捕获;
    3. ev.stopPropagation();
    
  • 什么是闭包(closure),为什么要用它?
    执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源,因为say667()的内部函数的执行需要依赖say667()中的变量。这是对闭包作用的非常直白的描述.
    function say667() {
    // Local variable that ends up within closure
    var num = 666;
    var sayAlert = function() { alert(num); }
    num++;
    return sayAlert;
    }
    var sayAlert = say667();
    sayAlert()//执行结果应该弹出的667
    
  • “use strict”;是什么意思 ? 使用它的好处和坏处分别是什么?
  • 如何判断一个对象是否属于某个类?
      使用instanceof (待完善)
    if(a instanceof Person){
    alert(‘yes’);
    }
    • new操作符具体干了什么呢?
       1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
      2、属性和方法被加入到 this 引用的对象中。
      3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。
      

      var obj = {};
      obj.proto = Base.prototype;
      Base.call(obj);

  • Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?
    hasOwnProperty
    
  • JSON 的了解?
    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
    它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
    {‘age’:‘12’, ‘name’:’back’}
  • js延迟加载的方式有哪些?
    defer和async、动态创建DOM方式(用得最多)、按需异步载入js
    
  • ajax 是什么?
  • 同步和异步的区别?
  • 如何解决跨域问题?
    jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面
    
    • 模块化怎么做?

    立即执行函数,不暴露私有成员

        var module1 = (function(){
        var _count = 0;
        var m1 = function(){
          //…
        };
        var m2 = function(){
          //…
        };
        return {
          m1 : m1,
          m2 : m2
        };
      })();
  • AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)规范区别?
  • 异步加载的方式有哪些?
      (1) defer,只支持IE
    (2) async:
    (3) 创建script,插入到DOM中,加载完毕后callBack
    
  • documen.write和 innerHTML的区别

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

  • .call() 和 .apply() 的区别?
      例子中用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);
    注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
    function add(a,b)
    {
    alert(a+b);
    }
    function sub(a,b)
    {
    alert(a-b);
    }
    add.call(sub,3,1);
    
  • Jquery与jQuery UI 有啥区别?
    *jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。
    *jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。
    提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等
    
  • JQuery的源码看过吗?能不能简单说一下它的实现原理?
  • jquery 中如何将数组转化为json字符串,然后再转化回来?

jQuery中没有提供这个功能,所以你需要先编写两个jQuery的扩展:

    $.fn.stringifyArray = function(array) {
return JSON.stringify(array)
}
$.fn.parseArray = function(array) {
return JSON.parse(array)
}
然后调用:
$(“”).stringifyArray(array)
  • 针对 jQuery 的优化方法?
    *基于Class的选择性的性能相对于Id选择器开销很大,因为需遍历所有DOM元素。
    *频繁操作的DOM,先缓存起来再操作。用Jquery的链式调用更好。   
    比如:var str=$(“a”).attr(“href”);
    *for (var i = size; i < arr.length; i++) {}
    for 循环每一次循环都查找了数组 (arr) 的.length 属性,在开始循环的时候设置一个变量来存储这个数字,可以让循环跑得更快: 
    for (var i = size, length = arr.length; i < length; i++) {}
  • JavaScript中的作用域与变量声明提升?
  • 如何编写高性能的Javascript?
  • 那些操作会造成内存泄漏?
    内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
    垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。
    setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
    闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
    
  • JQuery一个对象可以同时绑定多个事件,这是如何实现的?
  • 如何判断当前脚本运行在浏览器还是node环境中?(阿里)
    通过判断Global对象是否为window,如果不为window,当前脚本没有运行在浏览器中
    

其他问题

  • 你遇到过比较难的技术问题是?你是如何解决的?
  • 常使用的库有哪些?常用的前端开发工具?开发过什么应用或组件?
  • 页面重构怎么操作?
  • 列举IE 与其他浏览器不一样的特性?
  • 99%的网站都需要被重构是那本书上写的?
  • 什么叫优雅降级和渐进增强?
  • WEB应用从服务器主动推送Data到客户端有那些方式?
  • 对Node的优点和缺点提出了自己的看法?
    *(优点)因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,
    因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
    此外,与Node代理服务器交互的客户端代码是由javascript语言编写的,
    因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
    *(缺点)Node是一个相对新的开源项目,所以不太稳定,它总是一直在变,
    而且缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子。
    
  • 你有哪些性能优化的方法?
     (看雅虎14条性能优化原则)。
    (1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
    (2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
    (3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
    (4) 当需要设置的样式很多时设置className而不是直接操作style。
    (5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
    (6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
    (7) 图片预加载,将样式表放在顶部,将脚本放在底部  加上时间戳。
    (8) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。
    
  • http状态码有那些?分别代表是什么意思?
    100-199 用于指定客户端应相应的某些动作。 
    200-299 用于表示请求成功。 
    300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。 
    400-499 用于指出客户端的错误。400  1、语义有误,当前请求无法被服务器理解。401 当前请求需要用户验证 403  服务器已经理解请求,但是拒绝执行它。
    500-599 用于支持服务器错误。 503 – 服务不可用
    
  • 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)
        查找浏览器缓存 
    DNS解析、查找该域名对应的IP地址、重定向(301)、发出第二个GET请求
    进行HTTP协议会话
    客户端发送报头(请求报头)
    服务器回馈报头(响应报头)
    html文档开始下载
    文档树建立,根据标记请求所需指定MIME类型的文件
    文件显示
    [
    浏览器这边做的工作大致分为以下几步:
    加载:根据请求的URL进行域名解析,向服务器发起请求,接收文件(HTML、JS、CSS、图象等)。
    解析:对加载到的资源(HTML、JS、CSS等)进行语法解析,建议相应的内部数据结构(比如HTML的DOM树,JS的(对象)属性表,CSS的样式规则等等)
    }
    
    • 除了前端以外还了解什么其它技术么?你最最厉害的技能是什么?
  • 你常用的开发工具是什么,为什么?
  • 对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
         前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。
    1、实现界面交互
    2、提升用户体验
    3、有了Node.js,前端可以实现服务端的一些事情
    前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好,
    参与项目,快速高质量完成实现效果图,精确到1px;
    与团队成员,UI设计,产品经理的沟通;
    做好的页面结构,页面重构和用户体验;
    处理hack,兼容、写出优美的代码格式;
    针对服务器的优化、拥抱最新前端技术。
    
    • 加班的看法?

      加班就像借钱,原则应当是——救急不救穷

  • 平时如何管理你的项目?
            先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等;
    编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);
    标注样式编写人,各模块都及时标注(标注关键样式调用的地方);
    页面进行标注(例如 页面 模块 开始和结束);
    CSS跟HTML 分文件夹并行存放,命名都得统一(例如style.css);
    JS 分文件夹存放 命名以该JS功能为准的英文翻译。
    图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理
    
    • 如何设计突发大规模并发架构?
  • 说说最近最流行的一些东西吧?常去哪些网站?
        Node.js、Mongodb、npm、MVVM、MEAN、three.js
    
  • 移动端(Android IOS)怎么做好用户体验?
        清晰的视觉纵线、信息的分组、极致的减法、
    利用选择代替输入、标签及文字的排布方式、
    依靠明文确认密码、合理的键盘利用、
    
  • 你在现在的团队处于什么样的角色,起到了什么明显的作用?
  • 你认为怎样才是全端工程师(Full Stack developer)?
  • 介绍一个你最得意的作品吧?
  • 你的优点是什么?缺点是什么?
  • 如何管理前端团队?
  • 最近在学什么?能谈谈你未来3,5年给自己的规划吗?
  • 想问公司的问题?
        问公司问题:
    目前关注哪些最新的Web前端技术(未来的发展方向)?
    前端团队如何工作的(实现一个产品的流程)?
    公司的薪资结构是什么样子的?
    

优质网站推荐

  1. 极客标签: http://www.gbtags.com/
  2. 码农周刊: http://weekly.manong.io/issues/
  3. 前端周刊: http://www.feweekly.com/issues
  4. 极客头条: http://geek.csdn.net/
  5. Startup News:http://news.dbanotes.net/
  6. Hacker News: https://news.ycombinator.com/news
  7. InfoQ: http://www.infoq.com/
  8. w3cplus: http://www.w3cplus.com/
  9. Stack Overflow: http://stackoverflow.com/
  10. Atp: http://atp-posts.b0.upaiyun.com/posts/

the last time that refresh: 2014/4/5 15:12:43

140828 详细比较三个CSS预处理器(框架)Sass,LESS和Stylus

admin阅读(554)

CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架。本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass、Less CSS、Stylus。

首先我们来简单介绍下什么是 CSS 预处理器,CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处。

不要再停留在石器时代了,下面让我们开始 CSS 预处理器之旅。

我们将会从语法、变量、嵌套、混入(Mixin)、继承、导入、函数和操作符等方面分别对这三个框架进行比较介绍。

语法

在使用 CSS 预处理器之前最重要的是理解语法,幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。

首先 Sass 和 Less 都使用的是标准的 CSS 语法,因此如果你可以很方便的将已有的 CSS 代码转为预处理器代码,默认 Sass 使用 .sass 扩展名,而 Less 使用 .less 扩展名。

下面是这二者的语法:

1
2
3
4
/* style.scss or style.less */
h1 {
  color: #0982C1;
}

你注意到了,这是一个再普通不过的,不过 Sass 同时也支持老的语法,就是不包含花括号和分号的方式:

1
2
3
/* style.sass */
h1
  color: #0982c1

而 Stylus 支持的语法要更多样性一点,它默认使用 .styl 的文件扩展名,下面是 Stylus 支持的语法:

1
2
3
4
5
6
7
8
9
10
11
12
/* style.styl */
h1 {
  color: #0982C1;
}
 
/* omit brackets */
h1
  color: #0982C1;
 
/* omit colons and semi-colons */
h1
  color #0982C1

你也可以在同一个样式单中使用不同的变量,例如下面的写法也不会报错:

1
2
3
4
5
h1 {
  color #0982c1
}
h2
  font-size: 1.2em

变量

你可以在 CSS 预处理器中声明变量,并在整个样式单中使用,支持任何类型的变量,例如颜色、数值(不管是否包括单位)、文本。然后你可以任意引用该变量。

Sass 的变量必须是 $ 开始,然后变量名和值使用冒号隔开,跟 CSS 的属性一致:

1
2
3
4
5
6
7
8
9
$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
 
body {
  color: $mainColor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;
}

而 Less 的变量名使用 @ 符号开始:

1
2
3
4
5
6
7
8
9
@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
 
body {
  color: @mainColor;
  border: 1px @borderStyle @mainColor;
  max-width: @siteWidth;
}

Stylus 对变量名没有任何限定,你可以是 $ 开始,也可以是任意的字符,而且与变量值之间可以用冒号、空格隔开,需要注意的是 Stylus (0.22.4) 将会编译 @ 开始的变量,但其对应的值并不会赋予该变量,换句话说,在 Stylus 的变量名不要用 @ 开头。

1
2
3
4
5
6
7
8
mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
 
body
  color mainColor
  border 1px $borderStyle mainColor
  max-width siteWidth

上面的三种不同的 CSS 预处理器的写法,最终都将产生相同的结果:

1
2
3
4
5
body {
  color: #0982c1;
  border: 1px dotted #0982c1;
  max-width: 1024px;
}

你可以想象,加入你的 CSS 中使用了某个颜色的地方多达数十次,那么要修改颜色时你必须找到这数十次的地方并一一修改,而有了 CSS 预处理器,修改一个地方就够了!

嵌套

如果我们需要在CSS中相同的 parent 引用多个元素,这将是非常乏味的,你需要一遍又一遍地写 parent。例如:

1
2
3
4
5
6
7
8
9
10
11
12
section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

而如果用 CSS 预处理器,就可以少些很多单词,而且父子节点关系一目了然。我们这里提到的三个 CSS 框架都是允许嵌套语法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
section {
  margin: 10px;
 
  nav {
    height: 25px;
 
    a {
      color: #0982C1;
 
      &amp;:hover {
        text-decoration: underline;
      }
    }
  }
}

最终生成的 CSS 结果是:

1
2
3
4
5
6
7
8
9
10
11
12
section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

非常之方便!

Mixins (混入)

Mixins 有点像是函数或者是宏,当你某段 CSS 经常需要在多个元素中使用时,你可以为这些共用的 CSS 定义一个 Mixin,然后你只需要在需要引用这些 CSS 地方调用该 Mixin 即可。

Sass 的混入语法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */
@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  @ include error(); /* Applies styles from mixin error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  @ include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/
}

Less CSS 的混入语法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */
.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  .error(); /* Applies styles from mixin error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
}

Stylus 的混入语法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Stylus mixin error with (optional) argument borderWidth which defaults to 2px if not specified */
error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* Applies styles from mixin error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */
}

最终它们都将编译成如下的 CSS 样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
.generic-error {
  padding: 20px;
  margin: 4px;
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  border: 5px solid #f00;
  color: #f00;
}

继承

当我们需要为多个元素定义相同样式的时候,我们可以考虑使用继承的做法。例如我们经常需要:

1
2
3
4
5
p,
ul,
ol {
  /* styles here */
}

在 Sass 和 Stylus 我们可以这样写:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.block {
  margin: 10px 5px;
  padding: 2px;
}
 
p {
  @extend .block; /* Inherit styles from '.block' */
  border: 1px solid #EEE;
}
ul, ol {
  @extend .block; /* Inherit styles from '.block' */
  color: #333;
  text-transform: uppercase;
}

在这里首先定义 .block 块,然后让 p 、ul 和 ol 元素继承 .block ,最终生成的 CSS 如下:

1
2
3
4
5
6
7
8
9
10
11
.block, p, ul, ol {
  margin: 10px 5px;
  padding: 2px;
}
p {
  border: 1px solid #EEE;
}
ul, ol {
  color: #333;
  text-transform: uppercase;
}

在这方面 Less 表现的稍微弱一些,更像是混入写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.block {
  margin: 10px 5px;
  padding: 2px;
}
 
p {
  .block; /* Inherit styles from '.block' */
  border: 1px solid #EEE;
}
ul, ol {
  .block; /* Inherit styles from '.block' */
  color: #333;
  text-transform: uppercase;
}

生成的 CSS 如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  margin: 10px 5px;
  padding: 2px;
  border: 1px solid #EEE;
}
ul,
ol {
  margin: 10px 5px;
  padding: 2px;
  color: #333;
  text-transform: uppercase;
}

你所看到的上面的代码中,.block 的样式将会被插入到相应的你想要继承的选择器中,但需要注意的是优先级的问题。

导入 (Import)

很多 CSS 开发者对导入的做法都不太感冒,因为它需要多次的 HTTP 请求。但是在 CSS 预处理器中的导入操作则不同,它只是在语义上包含了不同的文件,但最终结果是一个单一的 CSS 文件,如果你是通过 @ import "file.css"; 导入 CSS 文件,那效果跟普通的 CSS 导入一样。注意:导入文件中定义的混入、变量等信息也将会被引入到主样式文件中,因此需要避免它们互相冲突。

reset.css:

1
2
3
4
/* file.{type} */
body {
  background: #EEE;
}

main.xxx:

1
2
3
4
5
6
@ import "reset.css";
@ import "file.{type}";
 
p {
  background: #0982C1;
}

最终生成的 CSS:

1
2
3
4
5
6
7
@ import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}

颜色函数

CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理,例如加亮、变暗、颜色梯度等。

Sass:

1
2
3
4
5
6
7
8
9
10
11
lighten($color, 10%); /* returns a color 10% lighter than $color */
darken($color, 10%);  /* returns a color 10% darker than $color */
 
saturate($color, 10%);   /* returns a color 10% more saturated than $color */
desaturate($color, 10%); /* returns a color 10% less saturated than $color */
 
grayscale($color);  /* returns grayscale of $color */
complement($color); /* returns complement color of $color */
invert($color);     /* returns inverted color of $color */
 
mix($color1, $color2, 50%); /* mix $color1 with $color2 with a weight of 50% */

上面只是简单列了 Sass 的一些基本颜色处理函数,完整的列表请看 Sass Documentation.

下面是一个具体的例子:

1
2
3
4
5
6
$color: #0982C1;
 
h1 {
  background: $color;
  border: 3px solid darken($color, 50%);
}

Less CSS:

1
2
3
4
5
6
7
8
9
10
lighten(@color, 10%); /* returns a color 10% lighter than @color */
darken(@color, 10%);  /* returns a color 10% darker than @color */
 
saturate(@color, 10%);   /* returns a color 10% more saturated than @color */
desaturate(@color, 10%); /* returns a color 10% less saturated than @color */
 
spin(@color, 10);  /* returns a color with a 10 degree larger in hue than @color */
spin(@color, -10); /* returns a color with a 10 degree smaller hue than @color */
 
mix(@color1, @color2); /* return a mix of @color1 and @color2 */

LESS 完整的颜色函数列表请看 LESS Documentation.

LESS 使用颜色函数的例子:

1
2
3
4
5
6
@color: #0982C1;
 
h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}

Stylus:

1
2
3
4
5
lighten(color, 10%); /* returns a color 10% lighter than 'color' */
darken(color, 10%);  /* returns a color 10% darker than 'color' */
 
saturate(color, 10%);   /* returns a color 10% more saturated than 'color' */
desaturate(color, 10%); /* returns a color 10% less saturated than 'color' */

完整的颜色函数列表请阅读 Stylus Documentation.

实例:

1
2
3
4
5
color = #0982C1
 
h1
  background color
  border 3px solid darken(color, 50%)

运算符

你可以直接在 CSS 预处理器中进行样式的计算,例如:

1
2
3
4
5
6
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 100px - 50px;
  left: 10 * 10;
}

一些跟具体浏览器相关的处理

这是宣传使用预处理的原因之一,并且是一个很好的理由,这样可以节省的大量的时间和汗水。创建一个mixin来处理不同浏览器的CSS写法是很简单的,节省了大量的重复工作和痛苦的代码编辑。

Sass

1
2
3
4
5
6
7
8
9
@mixin border-radius($values) {
  -webkit-border-radius: $values;
     -moz-border-radius: $values;
          border-radius: $values;
}
 
div {
  @ include border-radius(10px);
}

Less CSS

1
2
3
4
5
6
7
8
9
.border-radius(@values) {
  -webkit-border-radius: @values;
     -moz-border-radius: @values;
          border-radius: @values;
}
 
div {
  .border-radius(10px);
}

Stylus

1
2
3
4
5
6
7
8
9
border-radius(values) {
  -webkit-border-radius: values;
     -moz-border-radius: values;
          border-radius: values;
}
 
div {
  border-radius(10px);
}

编译结果:

1
2
3
4
5
div {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

3D文本

要生成具有 3D 效果的文本可以使用 text-shadows ,唯一的问题就是当要修改颜色的时候就非常的麻烦,而通过 mixin 和颜色函数可以很轻松的实现:

Sass

1
2
3
4
5
6
7
8
9
10
11
12
13
@mixin text3d($color) {
  color: $color;
  text-shadow: 1px 1px 0px darken($color, 5%),
               2px 2px 0px darken($color, 10%),
               3px 3px 0px darken($color, 15%),
               4px 4px 0px darken($color, 20%),
               4px 4px 2px #000;
}
 
h1 {
  font-size: 32pt;
  @ include text3d(#0982c1);
}

Less CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
.text3d(@color) {
  color: @color;
  text-shadow: 1px 1px 0px darken(@color, 5%),
               2px 2px 0px darken(@color, 10%),
               3px 3px 0px darken(@color, 15%),
               4px 4px 0px darken(@color, 20%),
               4px 4px 2px #000;
}
 
span {
  font-size: 32pt;
  .text3d(#0982c1);
}

Stylus

1
2
3
4
5
6
text3d(color)
  color: color
  text-shadow: 1px 1px 0px darken(color, 5%), 2px 2px 0px darken(color, 10%), 3px 3px 0px darken(color, 15%), 4px 4px 0px darken(color, 20%), 4px 4px 2px #000
span
  font-size: 32pt
  text3d(#0982c1)

生成的 CSS

1
2
3
4
5
6
7
8
9
span {
  font-size: 32pt;
  color: #0982c1;
  text-shadow: 1px 1px 0px #097bb7,
               2px 2px 0px #0875ae,
               3px 3px 0px #086fa4,
               4px 4px 0px #07689a,
               4px 4px 2px #000;
}

效果图:

列 (Columns)

使用数值操作和变量可以很方便的实现适应屏幕大小的布局处理。

Sass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$siteWidth: 1024px;
$gutterWidth: 20px;
$sidebarWidth: 300px;
 
body {
  margin: 0 auto;
  width: $siteWidth;
}
.content {
  float: left;
  width: $siteWidth - ($sidebarWidth+$gutterWidth);
}
.sidebar {
  float: left;
  margin-left: $gutterWidth;
  width: $sidebarWidth;
}

Less CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@siteWidth: 1024px;
@gutterWidth: 20px;
@sidebarWidth: 300px;
 
body {
  margin: 0 auto;
  width: @siteWidth;
}
.content {
  float: left;
  width: @siteWidth - (@sidebarWidth+@gutterWidth);
}
.sidebar {
  float: left;
  margin-left: @gutterWidth;
  width: @sidebarWidth;
}

Stylus

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
siteWidth = 1024px;
gutterWidth = 20px;
sidebarWidth = 300px;
 
body {
  margin: 0 auto;
  width: siteWidth;
}
.content {
  float: left;
  width: siteWidth - (sidebarWidth+gutterWidth);
}
.sidebar {
  float: left;
  margin-left: gutterWidth;
  width: sidebarWidth;
}

实际效果

1
2
3
4
5
6
7
8
9
10
11
12
13
body {
  margin: 0 auto;
  width: 1024px;
}
.content {
  float: left;
  width: 704px;
}
.sidebar {
  float: left;
  margin-left: 20px;
  width: 300px;
}

错误报告

如果你经常 CSS 你会发现很难找到 CSS 中错误的地方,这也是预处理框架的好处,它会报告错误,你可以从这文章中学习如何让 CSS 框架错误报告。

注释

以上三种框架都支持形如 /* */ 的多行注释以及 // 的单行注释。

英文原文,OSCHINA 原创翻译