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

开发论热点对 ? kejun

1. - console2. - JS API3. - : 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/CSRF5. (HTML/CSS/Javascript)

6. HTML CSS JS DOM7. - SPA(Single-Page-Application), WebApp - - XSS8. - -9. / /10.

1. HTML2. CSS3. Javascript4. jQuery5.

JavascriptHTML 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">

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

8220 8

<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...

CLASS&ID

1.2. Block-Level Inline-Level3. • 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, span4. big, hr, small, tt, font, center, dir5. 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 strictblock block inlinea inline, alabel labelbutton a, input, select, textarea, label, button, form, ﬁeldsetform formpre inline, img, object, sup, subaddress inlineobject block inlineimg, 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

CSS HTML

CSS style

marguee

DHTML / XHTML / HTML / HTML5

JavascriptHTML CSS

1. CSS - Cascading Style Sheets CSS http://www.mezzoblue.com/zengarden/alldesigns/2. CSS -3. CSS 3 -4. CSS5. CSSHack

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

CSS1.2.3.4.5.

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

ResetCSShttp://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/ / !important Style #IDdiv.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/ / !important Style #ID<div id=”db-site-note” class=”content note-content” style=”color:green”> <p> </p> 0 1 0 0 0</div> .Class/ / !important Style #IDp { color:#000 !important; } 1 0 0 0 0

1. box HTML2. box display inline - inline box block - block box inline-block - box block box inline box none - box box ...... CSS33. box block-level box

boxwidth/height padding/margin/border

block1. block (block formatting context) box2. box margin3. 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>

inline1. inline (inline formatting context) box2. margin padding border3.

block (block formatting context) block1. float none2. overflow visible3. display ‘table-cell’, ‘table-caption’, ‘inline-block’4. position static relative5. IE hasLayout block formatting contextblock formatting context1. collapsing margins2. float box float:left; overflow:hidden; float:right; width:200px; width:300px;

IE hasLayouthttp://www.satzansatz.de/cssd/onhavinglayout.html1. IE bug2. 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 31. Normal ﬂow2. Floats3. 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. box3.4. box block-level box block formatting context5. position:absolute float6. position relative absolute7. position:fixed absolute viewport8. IE6/Mobile webkit(iOS 3.5 ) position:fixed viewport position:absolute; position:fixed; top:100px; top:10px; left:100px right:10px

zz-indexposition: absolute|relative|ﬁxedStack Level :Stacking Context : xz-index auto stacking contextz-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

CSShttp://csslint.net/

JavascriptHTML CSS

Function

NumberStringBooleanObject - Function - Array - Date - RexExpnullundeﬁned

NumberString Primitive typeBooleanObject - Function - Array - Date - RexExpnullundeﬁned

NumberString Primitive typeBooleanObject - Function - Array Reference type - Date - RexExpnullundeﬁ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. GCScope 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 Chainsvar 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 chainsfunction 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 [[Scope]] 0 arguments [items] 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[[Scope]] 0 arguments [items] 1 root undefined 2 images undefined i undefined len undefined Global document (object) window (object) navigator (object)

Functions - - -‘ ’ OOP

1.2.3.4. Variable Object5. function foo(e) { return e; } foo.property = value; foo.length >1 foo.name > "foo"

➀ function foo() { console.log(foo); }1.2.3.4. Variable Object5. function foo(e) { return e; } foo.property = value; 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 Object5. if (0) { function foo1() { function foo(e) { console.log(foo1); return e; } } } foo1(); foo.property = value; 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 Object5. if (0) { function foo1() { function foo(e) { console.log(foo1); return e; } } } foo1(); foo.property = value; foo.length ➂➃ >1 foo(); foo.name ... > "foo" function foo() { console.log(foo); }

1.2.3. Variable Object4.

➀ var foo = function() { console.log(foo); };1.2.3. Variable Object4.

➀ var foo = function() { console.log(foo); }; ➁ var foo = function _foo() {1. console.log(typeof _foo); //function };2. _foo(); //ReferenceError: Cant ﬁnd variable: _foo foo.name3. Variable Object > “_foo”4.

➀ var foo = function() { console.log(foo); }; ➁ var foo = function _foo() {1. console.log(typeof _foo); //function };2. _foo(); //ReferenceError: Cant ﬁnd variable: _foo foo.name3. 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(); var foo = function() { 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; }}();

“ ” OO1.2. OO3. Javascript OO

1. this2. 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); this.method = function() { alert(2); }; } function C(){ A.call(this, arguments); this.method = function() { alert(3); }; } (new A).method(); (new B).method(); (new C).method();

(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 HTMLJavascript

1. - Guideline (bit.ly/douban-javascript, bit.ly/douban-css)2. - - -3. - douban-jslint, csslint -4. - - -5. - - JS/CSS inline

skype: kejunzmail/GTalk: listenpro@gmail.com

http://hikejun.com	14113
http://gulangfish.com	441
http://www.tsewah.info	234
http://www.nightlyjobs.com	166
http://www.waibo.net	114
http://www.techgig.com	101
http://www.elftail.com	92
http://feeds.feedburner.com	82
http://waibo.net	80
http://blog.hikejun.com	79
http://blog.15shop.cn	76
http://blog.mobantop.com	71
http://66.147.244.89	71
http://www.tetgo.com	61
http://www.cnblogs.com	50
http://www.smallni.com	42
http://xianguo.com	27
http://cache.baidu.com	22
http://sunwei.me	16
http://ioshome.sinaapp.com	11
http://archive.cnblogs.com	11
http://twitter.com	9
http://leechan.me	8
http://3whacks.com	6
http://www.mysjtu.com	5
http://uednotes.net	5
http://nightlyjobs.com	4
http://www.zhuaxia.com	4
http://www.sunwei.me	4
http://dmitrysoshnikov.com	3
http://xnny.net	3
http://www.cosdiv.com	3
http://www.xfruits.com	3
http://localhost:1979	3
http://www.byywee.com	3
http://webcache.googleusercontent.com	2
http://translate.googleusercontent.com	2
http://blog.waibo.net	2
http://cnc.exmail.qq.com	2
http://flavors.me	2
http://www.sunwei.me HTTP	1
http://cache.baiducontent.com	1
http://phpcms.waibo.net	1
http://drupal.waibo.net	1
http://www.cnpetweb.com	1
http://1.waibo.net	1
http://exmail.qq.com	1
https://twitter.com	1
http://translate.google.cn	1
http://t.waibo.net	1
http://tiny5.org	1

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

by Kejun Zhang

Accessibility

Categories

Upload Details

Usage Rights

56 Embeds 16,049

Statistics

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