Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

前端开发理论热点面对面:从怎么看,到怎么做?

51.517 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie, Bildung
  • Sex in your area is here: ♥♥♥ http://bit.ly/2Q98JRS ♥♥♥
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating direct: ❤❤❤ http://bit.ly/2Q98JRS ❤❤❤
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Sex in your area is here: ♥♥♥ http://bit.ly/33tKWiU ♥♥♥
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating direct: ❶❶❶ http://bit.ly/33tKWiU ❶❶❶
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

前端开发理论热点面对面:从怎么看,到怎么做?

  1. 1. 开发 论热点 对 ? kejun
  2. 2. 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)
  3. 3. 6. HTML CSS JS DOM7. - SPA(Single-Page-Application), WebApp - - XSS8. - -9. / /10.
  4. 4. 1. HTML2. CSS3. Javascript4. jQuery5.
  5. 5. JavascriptHTML CSS
  6. 6. 1.2.3. step1: ( ) step2: step3: step4:
  7. 7. 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">
  8. 8. Gridshttp://developer.yahoo.com/yui/3/cssgrids/http://www.douban.com/css/grids.css
  9. 9. 8220 8
  10. 10. <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 ...
  11. 11. <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...
  12. 12. ”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...
  13. 13. CLASS&ID
  14. 14. 1.2. Block-Level Inline-Level3. • h1-h6, p, em, strong, abbr • blockquote, q, cite • address • form, input, button, label, fieldset, 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
  15. 15. 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
  16. 16. 1. “ ”2. ......3. Y! <div id=”db-xxx” class=”mod”> <div class=”hd”> </div> <div class=”bd”> </div> <div class=”ft”> </div> </div>
  17. 17. <!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
  18. 18. http://line25.com/articles/10-html-tag-crimes-you-really-shouldnt-commit
  19. 19. HTML 4 strict/XHTML 1.0 strictblock block inlinea inline, alabel labelbutton a, input, select, textarea, label, button, form, fieldsetform 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
  20. 20. CSS HTML&nbsp;
  21. 21. CSS style
  22. 22. CSS
  23. 23. H1-H6
  24. 24. marguee
  25. 25. DHTML / XHTML / HTML / HTML5
  26. 26. JavascriptHTML CSS
  27. 27. 1. CSS - Cascading Style Sheets CSS http://www.mezzoblue.com/zengarden/alldesigns/2. CSS -3. CSS 3 -4. CSS5. CSSHack
  28. 28. /* */selector { property: value; }/* CSS At-rules */@import url(xxx.css);@media print { ... }@charset “UTF-8”;@font-face { ... } selector
  29. 29. CSS1.2.3.4.5.
  30. 30. 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
  31. 31. ResetCSShttp://www.iecss.com/
  32. 32. <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
  33. 33. .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
  34. 34. 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
  35. 35. boxwidth/height padding/margin/border
  36. 36. 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>
  37. 37. inline1. inline (inline formatting context) box2. margin padding border3.
  38. 38. 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;
  39. 39. 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
  40. 40. CSS2.1 31. Normal flow2. Floats3. Absolute position
  41. 41. normal flow - position:static( ) - block inline top/left/right/bottom, z-index position:relative - normal flow top/left/right/bottom, z-index box position:static top:-10px;left:-20px position:relative top:-20px;left:20px
  42. 42. Floats - 1. box 2. line box, inline box float box 3. float box 4. box block-level box block formatting context 5. top/left/right/bottom, z-index
  43. 43. 1. clear - clear:left|right|both; clear:both; display:block;clear:both;2. block formatting context
  44. 44. 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
  45. 45. zz-indexposition: absolute|relative|fixedStack 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
  46. 46. CSShttp://csslint.net/
  47. 47. JavascriptHTML CSS
  48. 48. Function
  49. 49. NumberStringBooleanObject - Function - Array - Date - RexExpnullundefined
  50. 50. NumberString Primitive typeBooleanObject - Function - Array - Date - RexExpnullundefined
  51. 51. NumberString Primitive typeBooleanObject - Function - Array Reference type - Date - RexExpnullundefined
  52. 52. 1. 4. 3*3 0, “”, NaN, null, undefined false true >9 !!null 3+3 > false > "33" !!undefined > 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
  53. 53. 1. window 2. var 3. unload GC 4. evil 1. 2. GCScope chains ( ) - - Javascript
  54. 54. 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/
  55. 55. 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(); })();
  56. 56. 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)
  57. 57. 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)
  58. 58. Functions - - -‘ ’ OOP
  59. 59. 1.2.3.4. Variable Object5. function foo(e) { return e; } foo.property = value; foo.length >1 foo.name > "foo"
  60. 60. ➀ 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"
  61. 61. ➀ 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"
  62. 62. ➀ 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); }
  63. 63. 1.2.3. Variable Object4.
  64. 64. ➀ var foo = function() { console.log(foo); };1.2.3. Variable Object4.
  65. 65. ➀ var foo = function() { console.log(foo); }; ➁ var foo = function _foo() {1. console.log(typeof _foo); //function };2. _foo(); //ReferenceError: Cant find variable: _foo foo.name3. Variable Object > “_foo”4.
  66. 66. ➀ var foo = function() { console.log(foo); }; ➁ var foo = function _foo() {1. console.log(typeof _foo); //function };2. _foo(); //ReferenceError: Cant find 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’); };
  67. 67. function foo(){ console.log(foo);}();function(){ console.log(foo); }();
  68. 68. function foo(){ (function foo(){ console.log(foo); console.log(foo);}(); }());function(){ console.log(foo); 1,function(){ }(); console.log(foo); }(); !function(){ console.log(foo); }(); +function(){ console.log(foo); }();
  69. 69. function foo(){ (function foo(){ console.log(foo); console.log(foo);}(); }()); > foofunction(){ console.log(foo); 1,function(){ }(); console.log(foo); }();> SyntaxError: Parse error > foo !function(){ console.log(foo); }(); > foo +function(){ console.log(foo); }(); > foo
  70. 70. function foo(){ (function foo(){ console.log(foo); console.log(foo);}(); }()); > foofunction(){ console.log(foo); 1,function(){ }(); console.log(foo); }();> SyntaxError: Parse error > foo !function(){ console.log(foo); }(); > foo +function(){ console.log(foo); }(); > foo
  71. 71. 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; }}();
  72. 72. “ ” OO1.2. OO3. Javascript OO
  73. 73. 1. this2. call apply
  74. 74. 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();
  75. 75. function Person(options) { // var grade = 1; // this.name = options.name; this.job = options.job; this.age = options.age; // this.say = function(s) { alert(s); }; this.upgrade = function() { grade++; return grade; };}//var member1 = new Person({ member1 name: , name ‘ ’ job: f2e, job ‘f2e’ age: 30 }); age 30 say() functionmember1.say(Hello);alert(member1.get(name)); upgrade() functionalert(member1.upgrade());
  76. 76. function Person(options) { // this.grade = 1; this.name = options.name; this.job = options.job; this.age = options.age;}//Person.prototype = { say: function(s) { alert(s); }, member1 upgrade: function() { __proto__ this.grade++; return this.grade; name ‘ ’ } job ‘f2e’}; Person.prototype age 30 say() functionvar 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 });
  77. 77. function Person(options) { this.grade = 1; this.name = options.name; this.job = options.job; this.age = options.age; } 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());
  78. 78. function extend(target, source) { for (var i in source) { if (source.hasOwnProperty(i)) { target[i] = source[i]; } } } function Person(options) { this.grade = 1; this.name = options.name; this.job = options.job; this.age = options.age; mixin } Person.prototype = { say: function(s) { alert(s); member1.coding(<h1>); }, member1.prd(update); upgrade: function(s) { member1.say(Hello); this.grade++; alert(member1.name); return this.grade; alert(member1.skill); } alert(member1.upgrade()); }; Person.prototype.say = function() {};function PM(options) { function Engineer(options) { member1.say(hi); // Person.call(this, options); Person.call(this, options); this.skill = options.skill; this.skill = options.skill;} }PM.prototype.prd = function(prd) { Engineer.prototype.coding = function(code) { alert(prd); alert(code);}; }; extend(Engineer.prototype, Person.prototype); extend(Engineer.prototype, PM.prototype); var member1 = new Engineer({ name: , job: f2e, age: 30, skill: html/css/js });
  79. 79. (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); }; }());
  80. 80. CSS HTMLJavascript
  81. 81. 1. - Guideline (bit.ly/douban-javascript, bit.ly/douban-css)2. - - -3. - douban-jslint, csslint -4. - - -5. - - JS/CSS inline
  82. 82. skype: kejunzmail/GTalk: listenpro@gmail.com

×