前端开发理论热点面对面：从怎么看，到怎么做？

开发论热点对

?

kejun

1.
- console

2.
- JS API

3.
- : Microsoft vs. W3C
- W3C: HTML 4.01, CSS 2.1, DOM Level 2, ...
- ECMA-262 Edition 5, javascript 1.5, 1.6, ...

4.
- CSSHack Fallback
- Hack XSS/CSRF

5. (HTML/CSS/Javascript)

6.
HTML
CSS
JS DOM

7.
- SPA(Single-Page-Application), WebApp
-
- XSS

8.
-
-

9. / /

10.

1. HTML

2. CSS

3. Javascript

4. jQuery

5.

Javascript

HTML CSS

1.

2.

3.
step1: ( )
step2:
step3:
step4:

100%

<div class="top-nav">

<div id="wrapper"> 950px

<div id="header">

<div id="content">

590px 310px

<div class="article"> <div class="aside">

<div id="footer">

Grids

http://developer.yahoo.com/yui/3/cssgrids/
http://www.douban.com/css/grids.css

<a href="/request/#event">8 </a>
<a href="/request/#online">2 </a>
<a href="/contacts/rlist">20 </a>
<a href="/notification/">8 </a>

img, a, object, form, input, button ...

<ul>
<li> <a href="/request/#event">8 </a> </li>
<li> <a href="/request/#online">2 </a> </li>
<li> <a href="/contacts/rlist">20 </a></li>
<li> <a href="/notification/">8 </a></li>
</ul>

ul-li, ol-li, dl-dt-dd, table, p, blockquote...

”Infobox”
<div class=”infobox”>
<ul>
<li> <a href="/request/#event">8 </a> </li>
<li> <a href="/request/#online">2 </a> </li>
<li> <a href="/contacts/rlist">20 </a></li>
<li> <a href="/notification/">8 </a></li>
</ul>
</div>

div, span...

1.
2. Block-Level Inline-Level
3.

• h1-h6, p, em, strong, abbr
• blockquote, q, cite
• address
• form, input, button, label, ﬁeldset, legend, select(optgroup, option), textarea
• code, kbd, pre, samp, var
• table(tr, td, tbody, th, col, colgroup, ...)
• dfn, dl(dt, dd)
• img, object, embed
• ol(li), ul(li)
• div, span

4.
big, hr, small, tt, font, center, dir

5.
blink, marguee

http://hikejun.com/work/qq/spec/html_reference.html

HTML “ ” “ ”

<div id=”db-tribe-members” class=”mod”>...</div>
<ul class=”list member-list”>...</div>

div.mod, ul.list, ul.member-list
div#db-tribe-members

1. “ ”

2.
......

3. Y!
<div id=”db-xxx” class=”mod”>
<div class=”hd”>

</div>
<div class=”bd”>

</div>
<div class=”ft”>

</div>
</div>

<!DOCTYPE html>
<html lang="zh-CN" class="${client_class(request)}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>${self.title(True)}</title>
${self.doc_head()}
</head>
<body>
${self.top_navigation()}
<div id="wrapper">
${self.header()}
${self.mbody()}
${self.footer()}
</div>
${self.bottom_script()}
${self.stat()}
</body>
</html>

base

http://line25.com/articles/10-html-tag-crimes-you-really-shouldnt-commit

HTML 4 strict/XHTML 1.0 strict

block block inline
a inline, a
label label
button a, input, select, textarea, label, button, form, ﬁeldset
form form
pre inline, img, object, sup, sub
address inline
object block inline
img, br, input, hr

ol-li, ul-li, dl-dt+dd
table-caption+colgroup-col+col+thead+tbody+tfoot-tr-td+th
select-option+optgroup-option
object-param

1. CSS - Cascading Style Sheets CSS http://www.mezzoblue.com/zengarden/alldesigns/

2. CSS -
3. CSS 3 -
4. CSS
5. CSSHack

/* */
selector { property: value; }

/* CSS At-rules */
@import url(xxx.css);
@media print { ... }
@charset “UTF-8”;
@font-face { ... }

selector

margin-bottom:20px;
<div class=”content note-content”> .content p { margin:0;font-size:14px; }
font-size:14px
<p> </p> .note-content p { margin:0 0 20px 0; }
</div> margin:0

color:#666
<div class=”content comment-content”> .comment-content p { font-size:12px;color:#666; }
<p> </p> font-size:12px;
</div> font-size:14px
margin:0

<div class=”content note-content note-full”> .note-full p { text-indent:2em;margin-bottom:40px; } margin-bottom:40px
<p> </p>
text-indent:2em
</div>
margin-bottom:20px;
font-size:14px
margin:0

.note-content p,
<div class=”note-content”>
.content p { margin:0;font-size:14px; } margin-bottom:20px;
<p> </p>
.note-content p { margin:0 0 20px 0; }
</div> font-size:14px

margin:0

Reset

CSS
http://www.iecss.com/

<div id=”db-site-note” class=”content note-content”>
<p> </p>
</div> .Class/ /
!important Style #ID

0 0 0 1 1
.content p { color:blue; }
.content { color:red; }
.Class/ /
.note-content p { color:yellow; } !important Style #ID

0 0 0 1 0

.Class/ /
div.content p { color:#000; }
0 0 0 1 2

.Class/ /
#db-site-note p { color:#999; } !important Style #ID

0 0 1 0 1

.Class/ /
<div id=”db-site-note” class=”content note-content” style=”color:green”>
<p> </p>
0 1 0 0 0
</div>

.Class/ /
p { color:#000 !important; }
1 0 0 0 0

1. box HTML

2. box display
inline - inline box
block - block box
inline-block - box block box inline box
none - box box
...... CSS3

3. box block-level box

box

width/height padding/margin/border

block

1. block (block formatting context) box
2. box margin
3. collapsing margins
3-1. block box block box
3-2. block box block box

30px
margin-bottom:30px
margin:30px

30px margin:20px

margin-top:20px

<div style=”margin-bottom:30px;”></div> <div style=”margin-bottom:30px;”>
<div style=”margin-top:20px;”></div> <div style=”margin-top:20px;”></div>
</div>

inline

1. inline (inline formatting context) box
2. margin padding border
3.

block (block formatting context)

block
1. float none
2. overflow visible
3. display ‘table-cell’, ‘table-caption’, ‘inline-block’
4. position static relative
5. IE hasLayout block formatting context

block formatting context
1. collapsing margins
2. float box

float:left; overflow:hidden; float:right;
width:200px; width:300px;

IE hasLayout
http://www.satzansatz.de/cssd/onhavinglayout.html

1. IE bug

2. hasLayout:
position: absolute
float: left|right
display: inline-block (IE6 )
width: value ( auto)
height: value ( auto)
zoom: value ( normal)
writing-mode: tb-rl

IE 7 :
overflow: auto|hidden|scroll
overflow-x|-y: auto|hidden|scroll
position: fixed
min-|max-width: value
min-|max-height: value

width/height inline-level box hasLayout quirks mode
zoom:1

CSS2.1 3

1. Normal ﬂow
2. Floats
3. Absolute position

normal ﬂow -

position:static( ) - block inline top/left/right/bottom, z-index
position:relative - normal ﬂow top/left/right/bottom, z-index
box

position:static

top:-10px;left:-20px

position:relative

top:-20px;left:20px

Floats -

1. box

2. line box, inline box ﬂoat box

3. ﬂoat box

4. box block-level box block formatting context

5. top/left/right/bottom, z-index

1. clear - clear:left|right|both;

clear:both;
display:block;clear:both;

2. block formatting context

Absolute Position -

1.
2. box
3.
4. box block-level box block formatting context
5. position:absolute float
6. position relative absolute
7. position:fixed absolute viewport
8. IE6/Mobile webkit(iOS 3.5 ) position:fixed

viewport
position:absolute; position:fixed;
top:100px; top:10px;
left:100px right:10px

z
z-index
position: absolute|relative|ﬁxed

Stack Level :

Stacking Context : x
z-index auto stacking context
z-index auto box stack level ( IE6/7 )
y

A. z-index:1 A. z-index:auto

B. z-index:999 B. z-index:999

C. z-index:1
C. z-index:1

A, C stacking context A z auto stack level
A B B z C B A B z C C
IE6/7

Number
String
Boolean
Object
- Function
- Array
- Date
- RexExp

null
undeﬁned

Number
String Primitive type
Boolean
Object
- Function
- Array
- Date
- RexExp

null
undeﬁned

Number
String Primitive type
Boolean
Object
- Function
- Array Reference type
- Date
- RexExp

null
undeﬁned

1. 4.
3*'3' 0, “”, NaN, null, undeﬁned false true
>9
!!null
3+'3' > false
> "33" !!undeﬁned
> false
+'3' !![]
>3 > true
!!{}
+new Date > true
> 1314181420537
5. reference
'010'|0
var obj1 = {a:1};
> 10
var obj2 = obj1;
obj2.a
parseInt('010')
>1
>8
obj1.a = 2
obj2.a
parseInt('010',10)
>2
> 10
var obj1 = [1,2,3];
2. "double-precision 64-bit format IEEE 754 values"
var obj2 = obj1;
0.1+0.2 obj1[0] = 99;
> 0.30000000000000004 obj2
> [99, 2, 3]
3. 6. prototype-base
true.toString()
Object.prototype.newMethod = function() {
> "true"
console.log(' ');
(2).toString()
> "2" }
(2).newMethod()
'test'.split('') >“ ”
> ["t", "e", "s", "t"] (2).hasOwnProperty(newMethod)
'test'.charAt(0) > false
> "t"

Number.prototype.length = function(){ return (this + '').length; }
(10086).length()
>5

1. window
2. var
3. unload GC
4. evil

1.
2. GC

Scope chains ( )
-
- Javascript

Scope Chains
➃ Activation Object ( )
Scope Chains

Activation Object
➂ Scope Chains
this context
Scope Chains arguments [items]
[AO ➃].concat([[Scope]])
➀ Execution Context
Scope Chains

Execution Context 0 Global
1 document (object)
[[Scope]]
window (object)
navigator (object)
➁ Execution Context Scope Chains

➄ Global Variable Object

➅ ReferenceError

http://dmitrysoshnikov.com/ecmascript/chapter-4-scope-chain/

Scope Chains

var x = 10; var x = 10;

function foo() { (function () {
alert(x); var x = 20;
}
function foo() {
(function () { alert(x);
var x = 20; }
foo();
})(); foo();
})();

with, try-catch scope chains

function addImageTitle(options) {
try {
var root = document.getElementById('content'),
images = root.getElementsByTagName('img');
for (var i = 0, len = images.length; i < len; i++) {
images[i].addEventListener('mouseover', function(e){
this.title = this.src;
}, false);
}
catch(error) {
log(error);
}
}
Activation Object
addImageTitle Scope Chains this window
[[Scope]] 0 arguments [items]
1 root undefined
images undefined
i undefined
len undefined

Global
document (object)
window (object)
navigator (object)

Variable Object
document (object)

Activation Object
try-catch Scope Chains this window
1 root undefined
2 images undefined
i undefined
len undefined

Global
document (object)
window (object)
navigator (object)

Activation Object
this img
arguments [items]
e (event)

Activation Object
Event Handler Scope Chains this window
1 root undefined
2 images undefined
i undefined
len undefined

Global
document (object)
window (object)
navigator (object)

Functions

-
-
-

‘ ’ OOP

1.
2.

3.
4. Variable Object
5.
function foo(e) {
return e;
}

foo.property = value;

foo.length
>1

foo.name
> "foo"

➀
function foo() {
console.log('foo');
}

1.
2.

3.
4. Variable Object
5.
function foo(e) {
return e;
}


foo.length
>1

foo.name
> "foo"

➀
function foo() {
console.log('foo');
}

1. ➁
function foo() {
2. console.log('foo');
function foo1() {
console.log('foo1');
3. }
}
4. Variable Object
5. if (0) {
function foo1() {
function foo(e) { console.log('foo1');
return e; }
} }
foo1();

foo.length
>1

foo.name
> "foo"

➀
function foo() {
console.log('foo');
}

1. ➁
function foo() {
2. console.log('foo');
function foo1() {
console.log('foo1');
3. }
}
4. Variable Object
5. if (0) {
function foo1() {
function foo(e) { console.log('foo1');
return e; }
} }
foo1();

foo.length ➂➃
>1
foo();
foo.name ...
> "foo" function foo() {
console.log('foo');
}

➀
var foo = function() {
console.log('foo');
};

1.
2.
3. Variable Object
4.

➀
console.log('foo');
};

➁
var foo = function _foo() {
1. console.log(typeof _foo); //function
};
2. _foo(); //ReferenceError: Can't ﬁnd variable: _foo
foo.name
3. Variable Object > “_foo”
4.

➀
console.log('foo');
};

➁
var foo = function _foo() {
1. console.log(typeof _foo); //function
};
2. _foo(); //ReferenceError: Can't ﬁnd variable: _foo
foo.name
3. Variable Object > “_foo”
4.
➂ ➃ = function(callback) {
var foo
callback();
};

foo(function _foo1(){
console.log();
});

var bar = (foo % 2 == 0 ?
function() { alert(0); } :
function() { alert(1); }
);
bar();

➃
foo();
console.log(‘foo’);
};

function foo(){
console.log('foo');
}();

function(){
console.log('foo');
}();

condition ?
function(){ console.log(1); }() :
function(){ console.log(2); }();

(function(){
var i = 1;
})();

bottom.addEventListener(‘click’, function(e){}, false);

var add = function() {
var i = 1;
return function(e) {
i = i + e;
return i;
}
}();

“ ” OO
1.

2. OO
3. Javascript OO

1.
this

2. call apply

sample 1:

var obj = {
input: function() {
return this.handle(arguments[0], arguments[1]);
},
handle: function(inp1, inp2){
return inp1 + inp2;
}
};

1. var obj1 = {
handle: function(inp1, inp2) {
this
return inp1 * inp2;
}
2. call apply }

alert(obj.input(10,20));
alert(obj.input.call(obj1, 10,20));

sample 2:

function A(){
this.method = function() { alert(1); };
}

function B(){
A.call(this, arguments);
}

function C(){
A.call(this, arguments);
}

(new A).method();
(new B).method();
(new C).method();

//
this.grade = 1;
}
//
Person.prototype = {
say: function(s) {
alert(s);
}, member1
upgrade: function() { __proto__
this.grade++;
return this.grade; name ‘ ’
} job ‘f2e’
}; Person.prototype
age 30
say() function

var member1 = new Person({ upgrade() function
name: ' ',
member2
job: 'f2e', prototype
age: 30 __proto__
}); name ‘ ’
var member2 = new Person({ job ‘pm’
name: ' ',
age 25
job: 'pm',
age: 25
});

this.grade = 1;
}

Person.prototype.say = function(s) {
alert(s);
};
Person.prototype.upgrade = function() {
this.grade++;
1. return this.grade;
2. };
3.
function Engineer(options) {
Person.call(this, options);
mixin this.skill = options.skill;
}

Engineer.prototype = Person.prototype;

Engineer.prototype.coding = function(code) {
alert(code);
};

var member1 = new Engineer({
name: ' ',
job: 'f2e',
age: 30,
skill: 'html/css/js'
});

member1.coding('<h1>');
member1.say('Hello');
alert(member1.name);
alert(member1.skill);
alert(member1.upgrade());

(Closure)

$(window).bind('scroll', function(){
var add = function(){
var t;
var i = 0;

return function(e) {
return function(){

if (t) {
return ++i;

clearTimeout(t);
}

}
}();

t = setTimeout(function(){ handle(e); }, 20);

};
}());

CSS
HTML

Javascript

1.
- Guideline (bit.ly/douban-javascript, bit.ly/douban-css)

2.
-
-
-

3.
- douban-jslint, csslint
-

4.
-
-
-

5.
-
- JS/CSS inline

skype: kejunz
mail/GTalk: listenpro@gmail.com

前端开发理论热点面对面：从怎么看，到怎么做？

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie 前端开发理论热点面对面：从怎么看，到怎么做？

Ähnlich wie 前端开发理论热点面对面：从怎么看，到怎么做？ (20)

Mehr von Kejun Zhang

Mehr von Kejun Zhang (9)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

前端开发理论热点面对面：从怎么看，到怎么做？

Hinweis der Redaktion