开发   论热点   对               ?      kejun
1.     -                                console2.     -            JS            API3.     -          : Microsoft vs. W3C ...
6.      HTML      CSS      JS                       DOM7.     - SPA(Single-Page-Application), WebApp     -     - XSS8.    ...
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"> ...
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         ...
<ul><li>    <a href="/request/#event">8           </a>                 </li><li>    <a href="/request/#online">2          ...
”Infobox”<div class=”infobox”><ul><li>   <a href="/request/#event">8             </a>               </li><li>     <a href=...
CLASS&ID
1.2.                               Block-Level Inline-Level3.     •                          h1-h6, p, em, strong, abbr   ...
HTML     “ ” “              ” <div id=”db-tribe-members” class=”mod”>...</div> <ul class=”list member-list”>...</div>     ...
1.                    “    ”2.                                 ......3. Y!     <div id=”db-xxx” class=”mod”>        <div c...
<!DOCTYPE html><html lang="zh-CN" class="${client_class(request)}"><head>  <meta http-equiv="Content-Type" content="text/h...
http://line25.com/articles/10-html-tag-crimes-you-really-shouldnt-commit
HTML 4 strict/XHTML 1.0 strictblock        block inlinea       inline,             alabel               labelbutton       ...
CSS   HTML&nbsp;
CSS   style
CSS
H1-H6
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.         C...
/*                           */selector { property: value; }/* CSS   At-rules       */@import url(xxx.css);@media print { ...
CSS1.2.3.4.5.
margin-bottom:20px;<div class=”content note-content”>             .content p { margin:0;font-size:14px; }                 ...
ResetCSShttp://www.iecss.com/
<div id=”db-site-note” class=”content note-content”>   <p>      </p></div>                                                ...
.Class/           /                                                                           !important   Style       #ID...
1.                     box                     HTML2. box                     display     inline - inline box     block - ...
boxwidth/height   padding/margin/border
block1.             block                      (block formatting context) box2.                box               margin3. ...
inline1.       inline            (inline formatting context) box2.       margin padding border3.
block                           (block formatting context)                                  block1. float        none2. ove...
IE     hasLayouthttp://www.satzansatz.de/cssd/onhavinglayout.html1.                     IE         bug2.                  ...
CSS2.1        31. Normal flow2. Floats3. Absolute position
normal flow - position:static(      ) -       block        inline         top/left/right/bottom, z-index position:relative ...
Floats - 1.                                                         box 2.             line box, inline box   float box 3. ...
1. clear   - clear:left|right|both;                         clear:both;                                                dis...
Absolute Position -1.2.            box3.4.   box       block-level box                   block formatting context5.     po...
zz-indexposition: absolute|relative|fixedStack Level :Stacking Context :                                                   ...
CSShttp://csslint.net/
JavascriptHTML                CSS
Function
NumberStringBooleanObject - Function - Array - Date - RexExpnullundefined
NumberString        Primitive typeBooleanObject - Function - Array - Date - RexExpnullundefined
NumberString        Primitive typeBooleanObject - Function - Array      Reference type - Date - RexExpnullundefined
1.                                                                    4. 3*3                                              ...
1.    window 2.    var 3.    unload          GC 4.             evil 1. 2.                             GCScope chains (    ...
Scope Chains                                                                                     ➃ Activation Object (    ...
Scope Chainsvar x = 10;                       var x = 10;function foo() {                  (function () {  alert(x);      ...
with, try-catch         scope chainsfunction addImageTitle(options) {  try {    var root = document.getElementById(content...
Variable Object                                            document       (object)                                        ...
Functions    -    -    -‘       ’   OOP
1.2.3.4.        Variable Object5.     function foo(e) {       return e;     }     foo.property = value;     foo.length    ...
➀                             function foo() {                               console.log(foo);                            ...
➀                             function foo() {                               console.log(foo);                            ...
➀                             function foo() {                               console.log(foo);                            ...
1.2.3.   Variable Object4.
➀                       var foo = function() {                         console.log(foo);                       };1.2.3.   ...
➀                       var foo = function() {                         console.log(foo);                       };         ...
➀                       var foo = function() {                         console.log(foo);                       };         ...
function foo(){  console.log(foo);}();function(){   console.log(foo); }();
function foo(){          (function foo(){  console.log(foo);      console.log(foo);}();                     }());function(...
function foo(){              (function foo(){  console.log(foo);          console.log(foo);}();                         }(...
function foo(){              (function foo(){  console.log(foo);          console.log(foo);}();                         }(...
condition ? function(){ console.log(1); }() : function(){ console.log(2); }();(function(){  var i = 1;})();bottom.addEvent...
“ ” OO1.2. OO3. Javascript   OO
1.     this2.          call   apply
sample 1:                           var obj = {                             input: function() {                           ...
function Person(options) { //    var grade = 1;    //    this.name = options.name;    this.job = options.job;    this.age ...
function Person(options) { // this.grade = 1; this.name = options.name; this.job = options.job; this.age = options.age;}//...
function Person(options) {               this.grade = 1;               this.name = options.name;               this.job = ...
function extend(target, source) {                                       for (var i in source) {                           ...
(Closure)                        $(window).bind(scroll, function(){var add = function(){                          var t;  ...
CSS                   HTMLJavascript
1.     -                 Guideline (bit.ly/douban-javascript, bit.ly/douban-css)2.     -     -     -3.     - douban-jslint...
skype: kejunzmail/GTalk: listenpro@gmail.com
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?
前端开发理论热点面对面:从怎么看,到怎么做?
Upcoming SlideShare
Loading in...5
×

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

49,239

Published on

Published in: Technology, Education
7 Comments
161 Likes
Statistics
Notes
  • kejun 豆瓣前端
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • very good
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • i like it
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • css
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • very good
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
49,239
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
1,239
Comments
7
Likes
161
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 前端开发理论热点面对面:从怎么看,到怎么做?

    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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×