griffon-巴以
随着各大互联网公司设立了
Web
前端开发工程师、设计工程师等职位，
web
前端
越
来越得到互联网企业的认可。
而且其重视程度与地位也随着浏
览器
端的富客户端的
体现而日益提高。
<
/p>
眼前对
HTML5
的未来和走向，
业内的预测是会和
Flash
、
Silverlight
等相结合，
从而取代传统的
客户端应用程序。
而实现这个目标的客户端核
心工作是
有
Web
前端工程师
来完成的。
从另一个角度，对于
we
b
产品来说，交互和用户体
验是产品的第一价值，这部分价值的
体现就是在
web
前端。可以说
web
前端是一个
web
产品的长相和谈
吐、行为。
下面就简单的说明一下
web
前端的组
成部分。
1.
UI
设计部分
这是
web
产品化的第一步。这个部分通常在稍大型的
公司里，被单独设立为一个
部门或者一些人来工作。主要是要掌握
Photo, AI,
可以很快的将创意转化为平面设计
图，
并制作
PNG
等小图片。
同时，
UI
设计还要预包含用户交互设计的元素，
如何
和用户交互的基本原型等。
2.
HTML/CSS,
页面静态化
这是
web
产品化的
2
步，就是将
UI
设计师的设计图切成静态页面。这里的
“
切
”
不是
单纯的切，而是使用
css
里面背景色和边框
样式等方式对设计原稿
进行解读，并形
成符合
web
标准的
html
代码。
这里
web
前
端还需要将图片、
html
页面以及
c
ss
样式进
行合理的文件分布安排等
ript, AS
客户端动态化
<
/p>
这是
web
产品化的
3
步，工程师使用
DOM
操作、<
/p>
AJAX
，实现数据和服务端的通信以
及
本地样式的切换。同时，由于
Javascript
、
AS
是一门动态语言，所以这部分的编
码要求
web
前端工程师有较好的编码习惯，
能写高效率的
OOP
代码，并对代码进行
压缩上线以降低带宽消耗等。
、<
/p>
Silverlight
、
Video
多媒体化
这部分针对不同
web
产品有不同的要求，通常要求是可以使用
F
lash
和
web
、
< br>Server
进行交互，并对
Flash
进行设计与开发。
、
Java
等
CGI,
服务端通信基本知识和编码
这部分主
要是更好的使用
Ajax
等技术，了解服务端的工作方式将更有
利于
web
前端
工程师工作的开展。<
/p>
通常优秀的
web
前端工程师都是对服务
端的一
种开发语言很了
解。
6
．
web
开发脚本开发环境
用什么、调试用什么
试过
aptan
a
，现在就用
editplus
调试
肯定用
firebug
，
ie
下看页面
DOM
用
IE
Inspector
web
前端产品的开发流程
答
:
首先根据产品的定位、用户群，确定配色，
然后纸上设计整体布局，然后
png
或
者
psd
出效果图，
切出需要的小图片
，
然后手写代码
div+css
构造出
页面，
然后根据
功能写脚本参考
126
邮箱首页，将所有小图片放到一个图
片中，通过
css
的
backgrou
nd-position
实现页面，还是为了优化，减少
htt
p
连接数
规避
javascript
多人开发函数重名问题
答
:
首先是通过命名规范，比如根据不同的开发人员
实现的功能，在函数名加前缀，
虽然函数名看起来复杂，发布的时候还是可以替换，从而
优化。
还有一种办法是，每个开发人员都把自己的函数封装到
类中，然后调用的时候即使
函数名相同，但是因为是要类
.
函数名来调用，所以也减少了重复的可能性。
IE
、<
/p>
FF
下面
CSS
的解释区别
答：
< br>
透明背景，
FF
下面没有问题，
IE
需要用滤镜通道
2.z-index
在
IE
、
FF
下面的解释问题，
IE
会认为第一个
z-index=0
3.
长字符串，
word-
wrap:break-all
可以解决
IE
< br>，但是
FF
需要
overflo
w:hidden
才行
冯舒娅补充：
1
、有些标签在
ff
中不能用，比如
button
2
、滤镜
3
、鼠标
cursor:hand
cursor:pointer
4
、
div
的高度自适应
5
、对
box
模型解析不一样
6
、
ul
、<
/p>
ol
的
padding
< br>和
margin
IE
都能识别
*
，标准浏览器（如
FF
）不能识别
*
；
IE6
能识别
*
，但不
能识别
!important
；
IE7
能识别
*
，也能识
别
!important
；
FF
不能识别
*
，但能识
别
!important
；
例如
style=”*width:10px;!important
width:20px;”
这样在
I
E6
下宽度为
10px,
在
IE7
下宽度时
20px
web
前端技术的展望
答：
javascript
ajax
；
flash AS
；
Flex
；
Silv
erlight
4
用脚本写去除字符串的前后空格
= function(mode)
{//
前后去空格
if (mode==’left’) {
return (((0) == ” “ && > 0) ?
(1).trim(’left’) : this);
}
else
if (mode == ’right’) {
return ((( -
1) == ” “ && >
0) ? (0,
-
1).trim(’right’)
: this);
} else {
return
(’left’).trim(’right’);
}
};
附上
javascript
正则表达式的基本知识：
g:
全局匹配
i:
忽略大小写
^
匹配一个输入或一行的开头，
/^a/
匹配
”an A”
，而不匹配
”An
a”
$$
匹配一个输入或一行的结尾
，
/a$$/
匹配
”An
a”
，而不匹配
”an
A”
*
匹
配前面元字符
0
次或多次，
/ba*/
将匹配
b,ba,baa,baaa
+
匹配前面元字符
1
次或多次，
/ba*/
将匹配
ba,baa,baaa
?
匹配前面元字符
0
次或
1
次，
/ba*/
将匹配
b,ba
(x)
匹配
x
保存
x
在名为
$$1…$$9
的变量中
x|y
匹配
x
或
y
{n}
精确匹配
n
次
{n,}
匹配
n
次以上
{n,m}
匹配
n-m
次
[xyz]
字符集
(character set)
，匹配这个集合中的任一一个字符
(
或元字符
)
[^xyz]
不匹配这个集合中的任何一个字符
[b]
匹配一个退格符
b
匹配一个单词的边界
B
匹配一个单词的非边界
cX
这儿，
X
是一个控制符，
/cM/
匹配
Ctr
l-M
d
匹配一个字数字符，
/d/ = /[0-9]/
D
匹配一个非字数字符，
/D/ =
/[^0-9]/
n
匹配一个换行符
r
匹配一个回车符
s
匹配一个空白字符，包括
n,r,f,t,v
等
S
匹配一个非空白字符，等于
/[^nfrtv]/
t
匹配一个制表符
v
匹配一个重直制表符
w
匹配一个可以组成单词的字符
(a
lphanumeric
，
这是我的意译，
含数字
)
，
包括下划线，
如
[w]
匹配
”$$5.
98″
中的
5
，等于
< br>[a-zA- Z0-9]
W
匹配一个不可以组成单
词的字符，如
[W]
匹配
”$$5.98
″
中的
$$
，等于
[^a-zA-Z0-9
举例：验证
email
var myReg =
/^[_a-z0-9]+@([_a-z0-9]+.)+[a-z0-9]{2,3}$$/;
if((strEmail)) return true;
1.
< br>如何显示
/
隐藏一个
DOM
元素？
更改元素的
css
style
，设为
display: none
。此外还可以将
visibility
设为
hidden
，透明度设为
0
，
或长、宽设为
0
。
. `7 m: r9 n$$ u7 k& ]
2.
< br>一个定宽网页在浏览器（
IE6
，
IE7
，
Firefox
，
IE5
）中横向居中对齐的布局，请写出主
要的
HTML
标签及
CSS
。
1.
-//W3C//DTD XHTML 1.0
Strict//EN” ”/TR/xhtml1/DTD/xhtml1
-
”>
- u( r, J$$ B' L. k9
R2 w8 I9
M2 ]
2.
-
CN”
lang=”zh
-
CN”>
3.
4.
equiv=”Content
-
Type”
content=”text/html;
charset=utf
-
8″
/>
& O1 f# u& J. g/ L
5.
6.
& @$$ y* b0 H- D9 j8
p+ Q: X
11.
12.
13.
居中
5 Y!
l6 S3 E/ O; N2 d' X
14.
15.
复制代码
3.
< br>CSS
中
margin
和
padding
的区别
$$ Q& n1 o
) P0 |' ]
margin
是
外边距，属于元素之外，相邻元素的
margin
可以融合。<
/p>
4 W5 _+ M1 V J) I. e3 E2 V,
P
padding
是内边距，在元素
之内，相邻元素的
padding
不可融合。
< br>) @2 V9 W1 X7 {7 Y
4.
JavaScript
中如何检测一个变量是一个
String
类
型？请写出函数实现
3 ^5 H3 { |2 v7 E5 F5
x
function(obj)
{
; Z% ]6 f0 J: x5 W t5 x
return typeof(obj) ==
”string”;
$$ B8 P9 B' c' ?: A
}
5.
网页中实现一个计算当年还剩多少时间的倒数计时程序，要
求网页上实时动态显示
“××
年还剩
×
×
天
×
×
时
×
×
分
×
×
秒
”
这个看我论坛右上角的就知道了
…
0
O0 f& I) |+ t, P
6.
如何控制网页在网络传输过程中的数据量
; G- i- a
q) 3 t# j$$ _1 R
题目貌似有问题，应该是减少数据量吧。
; B9 l/ h6
u5 X) x l
最显著的方法是启用
< br>GZIP
压缩。此外保持好的编码习惯，避免重复和
cs
s
、
JavaScript
代码，
多余的
HTML
标签和属性。
0 J
7.
补充代码，是鼠标单击后
Butt
on1
到
Button2
的后面
, c5 [0 }) }# p( @- ~
var parent = Node;
Child(this); Child(this);
$$ Q2 _5 [ x4
g8 k, e
8.
Linux
中，将
a
、
b
打包为
，命令是（
）
不知道＝。＝
; l n3 u3 p4 _6
`
9.
Flash
、
Ajax
各自的优缺点，在使用中如何取舍？
# h1
L% |/ p8 W
Flash
的
缺点是需要客户端安装
Flash
插件，比较大，且更改了默认
的
HTML
页面行为；但可
以方便地实
现很多特效及动画，且具有较高权限。
Ajax
的缺点是编程较为复杂，需要服务器端的支持，能实现的效果只能是
DOM
API
提供的，
权限很低，较难跨域；但可以显著加快页面的载
入速度和用户体验。
此外，二者都不能被搜索引擎索引（
Google
已支持
Flash
文本的索引），不利于
SEO
。
< br>
我的建议是重要和关键部分直接用
HTML
，
交互部分可以使用
Ajax
，
复杂的动画可采用
Flash
。
1,
判
断字符串是否是这样组成的，第一个必须是字母，后面可以是字母、数字、下划线，
总长
度为
5-20
var reg =
/^[a-zA-Z][a-zA-Z_0-9]{4,19}$$/;
(
2
，截取字符串
abcdefg
的
efg
var str =
if (/efg/.test(str)) {
var efg = (f(
alert(efg);
}
3
，判断一个字符串中出现次数最多的字符，统计这个次数
//
将字符串的字符保存在一个
hash table
中，
key
< br>是字符，
value
是这个字符出现的次数
var str =
var obj =
{};
for (var i = 0, l = i < l;
i++) {
var key = str[i];
if (!obj[key])
{
obj[key] = 1;
}
else {
obj[key]++;
}
}
/*
遍历这个
hash table<
/p>
，获取
value
最大的
key
和
value*/
var max = -1;
var max_key =
var key;
for (key in obj) {
if
(max < obj[key]) {
max = obj[key];
max_key = key;
}
}
alert(
4
，
IE
与
FF
脚本兼容性问题
(1)
：
表示当前的事件对象，
IE
有这个对象，<
/p>
FF
没有，
FF
通过给事件处理函数传递事件对象
(2)
获取事件源
IE
用
e[
“
srcElement<
/p>
”
]
获取事件源，而
< br>FF
用
e[
“
< br>target
“
]
获取事件源
(3)
添加，去除事件
IE
：
Event(“onclick”, function)
Event(“onclick”, function)
F
F
：
ntListener(“click”,
function, true) EventListener(“click”, function,
true)
(4)
获取标签的自定义属性
IE
：
或
div1[“va
lue”]
FF
：可用
ribute(“value”)
(5)
mentsByName()
和
[name]
IE
；
mentsByName()
< br>和
[name]
均不能获取
di
v
元素
FF
：可以
(6)
的属性
IE
：
只读
FF
：
可
读写
(7) innerText textContent
outerHTML
IE
：支持
innerText,
outerHTML
FF
：支持
textContent
(8)
是否可用
id
代替
HTML
元素
IE
：可以用
id
来代
替
HTML
元素
FF
：不可以
这里只列出了常见的，还有不少，更多的介绍可以参看
JavaScript
在
IE
浏览器和
Fir
efox
浏览
器中的差异总结
5
，规避
javascript
多人开发函数重名问题
(1)
< br>可以开发前规定命名规范，根据不同开发人员开发的功能在函数前加前缀
(2)
将每个开发人员的函数封装到类中，调用的时候就调用
类的函数，即使函数重名只要类
名不重复就
ok
6
，
javascript
面向对象中继承实现
javascript
< br>面向对象中的继承实现一般都使用到了构造函数和
Prototype
原型链，
简单的代码如
下：
function Animal(name) {
= name;
}
e = function()
{alert()}
function Dog() {};
ype = new Animal(
uctor =
Dog;
var dog = new Dog();
7<
/p>
，
FF
下面实现
outerHTML
FF
不支持
outerHTML
，要实现
outerH
TML
还需要特殊处理
思路如下：
在页面中添加一个新的元
素
A
，克隆一份需要获取
outerH
TML
的元素，将这个元素
append
到
新的
A
中，然后获取
A
的
innerHTML
就
可以了。
SPAN
P
8
，编写一个方法
求一个字符串的字节长度
假设：
一个英文字符占用一个字节，一个中文字符占用两个字节
function GetBytes(str){
var
len =
var bytes = len;
9 <
br>）在 <
br> <
br>关键字
<
br>，网页中实现一个计算当年还剩多少时间的倒数计时程序，要求网页上实时动态显示 <
br>天
for(var i=0; i
if
(deAt(i) > 255) bytes++;
}
return bytes;
}
a
lert(GetBytes(
你好
,as
，编写一个方法
去掉一个数组的重复元素
var
arr = [1 ,1 ,2, 3, 3, 2, 1];
=
function(){
var ret = [];
var
o = {};
var len =
for
(var i=0; i
var v =
this[i];
if (!o[v]){
o[v] = 1;
(v);
}
}
return ret;
};
alert(());
10
，写出<
/p>
3
个使用
this
的典型应用
（
1
html
元素事件属性中使用，如
点击一下
”/>
（
2
）构造函数
function Animal(name, color) {
=
name;
= color;
}
（
3
）
点击一下
（
4
）
CSS
expression
表达式中使用
this
<
/p>
12
，如何显示
/
隐藏一个
DOM
元素？
y =
显示
lity=
y =
隐藏
lity=
el
是要操作的
DOM
元素
区别：<
/p>
visibility
设置为
hidden
时，元素依然占有原来的位置
13<
/p>
，
JavaScript
中如何检测一个
变量是一个
String
类型？请写出函数实现
String
类型有两种生成方式：
(1)Var str = “hello world”;
(2)Var str2 = new String(“hello
world”);
function
IsString(str){
return
(typeof str ==
}
var str =
alert(IsString(1)); //false
alert(IsString(str)); // true
alert(IsString(new String(str))); //
true
14
“××
年还剩
×
×
×
×
时
×
×
分
×
×
秒
”
1
5
，
补充代码，
鼠标单击
Button1
后将
Button1
移动到
Button2
的后面
id
=”button1″ value=”1″ onclick=”???”>
16
，
JavaScript
有哪几种数据类型
简单：
Number
，
Boolean
，
String
，
Null
，
Undefined
复合：
O
bject
，
Array
，
Function
17
，下面
< br>css
标签在
JavaScript
中调用应如何拼写，
border-left-
color
，
-moz-
viewport
borderLeftColor
mozViewport
18
，
JavaScript
中如何对一个对象进行深度
< br>clone
function
cloneObject(o) {
if(!o
|| 'object' !== typeof o) {
return o;
}
var c = 'function' ===
typeof ? [] : {};
var
p, v;
for(p in o) {
if(Property(p)) {
v = o[p];
if(v && 'object'
=== typeof v) {
c[p] = (v);
}
else {
c[p] = v;
}
}
}
return c;
};
19
，如何控制
alert
< br>中的换行
n
alert(“p
np”);
20
，请实现，鼠标点击页面中的任意标签，
alert
该标签的名称．（注意兼容性）