《jQuery技術內幕：深刻解析jQuery架構設計與實現原理》

《jQuery技術內幕：深刻解析jQuery架構設計與實現原理》

基本信息

做者： 高雲   

出版社：機械工業出版社

ISBN：9787111440826

上架時間：2014-1-10

出版日期：2014 年1月

開本：16開

頁碼：1

版次：1-1

所屬分類：計算機

更多關於》》》 《jQuery技術內幕：深刻解析jQuery架構設計與實現原理》

 

內容簡介

    書籍

    計算機書籍

　　《jquery技術內幕：深刻解析jquery架構設計與實現原理》由阿里巴巴資深前端開發工程師撰寫，從源代碼角度全面而系統地解讀了jquery的17個模塊的架構設計理念和內部實現原理，旨在幫助讀者參透jquery中的實現技巧和技術精髓，同時本書也對廣大開發者如何經過閱讀源代碼來提高編碼能力和軟件架構能力提供了指導。

　　《jquery技術內幕：深刻解析jquery架構設計與實現原理》首先經過「整體架構」梳理了各個模塊的分類、功能和依賴關係，讓你們對jquery的工做原理有大體的印象；進而經過「構造jquery對象」章節分析了構造函數jquery()的各類用法和內部構造過程；接着詳細分析了底層支持模塊的源碼實現，包括：選擇器sizzle、異步隊列deferred、數據緩存data、隊列queue、瀏覽器功能測試support；最後詳細分析了功能模塊的源碼實現，包括：屬性操做attributes、事件系統events、dom遍歷traversing、dom操做manipulation、樣式操做css、異步請求ajax、動畫effects。

　　《jquery技術內幕：深刻解析jquery架構設計與實現原理》在分析每一個模塊時均採用由淺入深的方式，先概述功能、用法、結構和實現原理，而後介紹關鍵步驟和分析源碼實現。讓讀者不只知其然，並且知其因此然。事實上，本書的根本價值在於傳達一種經過閱讀源碼快速成長的方式。不管是前端新人，仍是經驗豐富的老手，只要是對javascript感興趣的開發人員，都會從本書中受益。

 

目錄

《jquery技術內幕：深刻解析jquery架構設計與實現原理》

前言

第一部分　整體架構

第1章　整體架構 2

1.1　設計理念 2

1.2　整體架構 2

1.3　自調用匿名函數 4

1.4　總結 6

第二部分　構造jquery對象

第2章　構造jquery對象 8

2.1　構造函數jquery() 8

2.1.1　jquery( selector [, context] ) 9

2.1.2　jquery( html [, ownerdocument] )、jquery( html, props ) 9

2.1.3　jquery( element )、jquery( elementarray ) 10

2.1.4　jquery( object ) 10

2.1.5　jquery( callback ) 11

2.1.6　jquery( jquery object ) 11

2.1.7　jquery() 11

2.2　整體結構 11

2.3　jquery.fn.init( selector, context, rootjquery ) 13

 

.2.3.1　12個分支 13

2.3.2　源碼分析 14

2.3.3　小結 21

2.4　jquery.buildfragment( args, nodes, scripts ) 22

2.4.1　實現原理 22

2.4.2　源碼分析 22

2.4.3　小結 26

2.5　jquery.clean( elems, context, fragment, scripts ) 27

2.5.1　實現原理 27

2.5.2　源碼分析 27

2.5.3　小結 39

2.6　jquery.extend()、jquery.fn.extend() 40

2.6.1　如何使用 40

2.6.2　源碼分析 40

2.7　原型屬性和方法 43

2.7.1　.selector、.jquery、.length、.size() 44

2.7.2　.toarray()、.get( [index] ) 45

2.7.3　.each( function(index, element) )、jquery.each( collection, callback (indexinarray, valueofelement) ) 46

2.7.4　.map( callback(index, domelement) )、jquery.map( arrayorobject, callback(value, indexorkey) ) 47

2.7.5　.pushstack( elements, name, arguments ) 49

2.7.6　.end() 51

2.7.7　.eq( index )、.first()、.last()、.slice( start [, end] ) 51

2.7.8　.push( value, ... )、.sort( [orderfunc] )、.splice( start,deletecount, value, ... ) 52

2.7.9　小結 53

2.8　靜態屬性和方法 54

2.8.1　jquery.noconflict( [removeall] ) 55

2.8.2　類型檢測：jquery.isfunction( obj )、jquery.isarray( obj )、jquery.iswindow( obj )、jquery.isnumeric( value )、jquery.type( obj )、jquery.isplainobject( object )、jquery.isemptyobject( object ) 56

2.8.3　解析json和xml：jquery.parsejson( data )、jquery.parsexml( data ) 60

2.8.4　jquery.globaleval( code ) 65

2.8.5　jquery.camelcase( string ) 65

2.8.6　jquery.nodename( elem, name ) 66

2.8.7　jquery.trim( str ) 67

2.8.8　數組操做方法：jquery.makearray( obj )、jquery.inarray( value, array [, fromindex] )、jquery.merge( first, second )、jquery.grep( array, function(elementofarray, indexinarray) [, invert] ) 68

2.8.9　jquery.guid、jquery.proxy( function, context ) 72

2.8.10　jquery.access( elems, key, value, exec, fn( elem, key, value ), pass ) 74

2.8.11　jquery.error( message )、jquery.noop()、jquery.now() 75

2.8.12　瀏覽器嗅探：jquery.uamatch( ua )、jquery.browser 76

2.8.13　小結 77

2.9　總結 77

第三部分　底層支持模塊

第3章　選擇器sizzle 80

3.1　整體結構 81

3.2　選擇器表達式 83

3.3　設計思路 84

3.4　sizzle( selector, context, results, seed ) 86

3.5　正則chunker 94

3.6　sizzle.find( expr, context, isxml ) 94

3.7　sizzle.filter( expr, set, inplace, not ) 99

3.8　sizzle.selectors.relative 103

3.8.1　"+" 105

3.8.2　"]" 106

3.8.3　"" 108

3.8.4　"~" 108

3.8.5　dircheck( dir, cur, donename, checkset, nodecheck, isxml ) 109

3.8.6　dirnodecheck( dir, cur, donename, checkset, nodecheck, isxml ) 111

3.9　sizzle.selectors 112

3.9.1　sizzle.selectors.order 112

3.9.2　sizzle.selectors.match/leftmatch 113

3.9.3　sizzle.selectors.find 122

3.9.4　sizzle.selectors.prefilter 123

3.9.5　sizzle.selectors.filters 129

3.9.6　sizzle.selectors.setfilters 132

3.9.7　sizzle.selectors.filter 133

3.10　工具方法 140

3.10.1　sizzle.uniquesort( results ) 140

3.10.2　sortorder( a, b ) 141

3.10.3　sizzle.contains( a, b ) 144

3.10.4　sizzle.error( msg ) 145

3.10.5　sizzle.gettext( elem ) 145

3.11　便捷方法 146

3.11.1　sizzle.matches( expr, set ) 146

3.11.2　sizzle.matchesselector( node, expr ) 146

3.12　jquery擴展 147

3.12.1　暴露sizzle給jquery 147

3.12.2　.find( selector ) 148

3.12.3　.has( target ) 149

3.12.4　.not( selector )、.filter( selector ) 150

3.12.5　.is( selector ) 152

3.12.6　.closest( selectors, context ) 153

3.12.7　.index( elem ) 154

3.12.8　.add( selector, context ) 155

3.12.9　jquery.filter( expr, elems, not ) 156

3.12.10　:animated 157

3.12.11　hidden、:visible 157

3.13　總結 158

第4章　異步隊列deferred object 160

4.1　jquery.callbacks( flags ) 161

4.1.1　實現原理和整體結構 162

4.1.2　源碼分析 163

4.1.3　小結 174

4.2　jquery.deferred( func ) 174

4.2.1　實現原理和整體結構 176

4.2.2　源碼分析 177

4.2.3　小結 183

4.3　jquery.when( deferreds ) 184

4.3.1　實現原理 185

4.3.2　源碼分析 185

4.4　異步隊列在jquery中的應用 187

4.5　總結 188

第5章　數據緩存data 189

5.1　實現原理 189

5.1.1　爲dom元素附加數據 189

5.1.2　爲javascript對象附加數據 191

5.2　整體結構 192

5.3　jquery.acceptdata( elem ) 193

5.4　jquery.data( elem, name, data, pvt )、jquery._data( elem, name, data, pvt ) 194

5.4.1　如何使用 194

5.4.2　源碼分析 194

5.4.3　jquery._data( elem, name, data ) 199

5.4.4　小結 201

5.5　.data( key,value ) 201

5.5.1　如何使用 201

5.5.2　源碼分析 202

5.5.3　小結 206

5.6　jquery.removedata( elem,name,pvt )、.removedata( key ) 207

5.6.1　如何使用 207

5.6.2　源碼分析 207

5.6.3　小結 212

5.7　.removedata( key ) 213

5.8　jquery.cleandata( elems ) 213

5.8.1　應用場景 213

5.8.2　源碼分析 214

5.8.3　小結 217

5.9　jquery.hasdata( elem ) 217

5.10　總結 218

第6章　隊列queue 219

6.1　如何使用 219

6.1.1　ajax隊列 220

6.1.2　動畫隊列+ ajax隊列 220

6.1.3　基於javascript對象 221

6.2　實現原理 221

6.3　整體結構 222

6.4　jquery.queue( elem,type,data ) 223

6.5　jquery.dequeue( elem,type ) 224

6.6　.queue( type,data ) 227

6.7　.dequeue( type ) 228

6.8　.delay( time,type ) 229

6.9　.clearqueue( type ) 230

6.10　jquery._mark( elem,type )、jquery._unmark( force,elem,type ) 230

6.11　.promise( type,object ) 232

6.11.1　如何使用 232

6.11.2　實現原理 233

6.11.3　源碼分析 233

6.11.4　handlequeuemarkdefer( elem,type,src ) 235

6.12　總結 237

第7章　瀏覽器功能測試support 238

7.1　整體結構 238

7.2　dom測試（15項） 241

7.2.1　leadingwhitespace 241

7.2.2　tbody 242

7.2.3　htmlserialize 243

7.2.4　hrefnormalized 245

7.2.5　checkon 246

7.2.6　noclonechecked 248

7.2.7　optselected 250

7.2.8　optdisabled 251

7.2.9　getsetattribute 253

7.2.10　deleteexpando 256

7.2.11　enctype 258

7.2.12　html5clone 259

7.2.13　radiovalue 261

7.2.14　checkclone 263

7.2.15　appendchecked 264

7.3　樣式測試（3項） 266

7.3.1　style 266

7.3.2　opacity 268

7.3.3　cssfloat 272

7.4　盒模型測試（10項） 273

7.4.1　reliablemarginright 273

7.4.2　reliablehiddenoffsets 276

7.4.3　boxmodel 278

7.4.4　inlineblockneedslayout 280

7.4.5　shrinkwrapblocks 282

7.4.6　doesnotaddborder、doesaddborderfortableandcells 285

7.4.7　fixedposition 287

7.4.8　subtractsborderforoverflownotvisible 290

7.4.9　doesnotincludemargininbodyoffset 292

7.5　事件測試（4項） 294

7.5.1　nocloneevent 294

7.5.2　submitbubbles、changebubbles、focusinbubbles 296

7.6　ajax測試（2項） 298

7.6.1　ajax 298

7.6.2　cors 300

7.7　總結 301

第四部分　功能模塊

第8章　屬性操做attributes 306

8.1　整體結構 307

8.2　jquery.attr( elem, name, value, pass ) 308

8.2.1　源碼分析 308

8.2.2　boolhook 311

8.2.3　nodehook 313

8.2.4　jquery.attrhooks 314

8.2.5　小結 319

8.3　.attr( name, value ) 319

8.4　jquery.removeattr( elem, value ) 321

8.4.1　源碼分析 321

8.4.2　小結 322

8.5　.removeattr( name ) 323

8.6　jquery.prop( elem, name, value ) 323

8.6.1　源碼分析 323

8.6.2　jquery.prophooks 325

8.6.3　小結 326

8.7　.prop( name, value ) 327

8.8　.removeprop( name ) 327

8.9　.addclass( classname ) 328

8.9.1　源碼分析 328

8.9.2　小結 330

8.10　.removeclass( [classname] ) 330

8.10.1　源碼分析 331

8.10.2　小結 333

8.11　.toggleclass( [classname][, switch] ) 333

8.11.1　源碼分析 334

8.11.2　小結 336

8.12　.hasclass( selector ) 336

8.12.1　源碼分析 336

8.12.2　小結 337

8.13　.val( [value] ) 338

8.13.1　源碼分析 338

8.13.2　jquery.valhooks 340

8.13.3　小結 343

8.14　總結 344

第9章　事件系統events 346

9.1　整體結構 346

9.2　實現原理 350

9.3　jquery 事件對象 353

9.3.1　構造函數jquery.event( src, props ) 355

9.3.2　原型對象jquery.event.prototype 357

9.3.3　事件屬性修正方法jquery.event.fix( event ) 360

9.4　綁定事件 367

9.4.1　.on( events [, selector] [, data] , handler( eventobject ) ) 367

9.4.2　jquery.event.add( elem, types, handler, data, selector ) 370

9.5　移除事件 379

9.5.1　.off( events [, selector] [, handler( eventobject ) ] ) 379

9.5.2　jquery.event.remove( elem, types, handler, selector, mappedtypes ) 382

9.6　事件響應 388

9.6.1　主監聽函數 388

9.6.2　jquery.event.dispatch( event ) 390

9.7　手動觸發事件 396

9.7.1　.trigger( eventtype [, extraparameters] )、.triggerhandler( eventtype [, extraparameters] ) 396

9.7.2　jquery.event.trigger( event, data, elem, onlyhandlers ) 397

9.8　事件修正和模擬jquery.event.special 406

9.8.1　ready 408

9.8.2　load 408

9.8.3　focus、blur 409

9.8.4　beforeunload 409

9.8.5　mouseenter、mouseleave 410

9.8.6　submit 412

9.8.7　change 413

9.8.8　focusin、focusout 416

9.8.9　jquery.event.simulate( type, elem, event, bubble ) 417

9.9　事件便捷方法 418

9.10　組合方法 419

9.10.1　.toggle( handler( eventobject ), handler( eventobject ) [, handler( eventobject )] ) 419

9.10.2　.hover( handlerin( eventobject ) [, handlerout( eventobject )] ) 421

9.11　ready 事件 421

9.11.1　整體結構 421

9.11.2　.ready( handler ) 424

9.11.3　jquery.bindready() 424

9.11.4　jquery.holdready( hold ) 427

9.11.5　jquery.ready( wait ) 428

9.12　總結 430

第10章　dom遍歷traversing 433

10.1　整體結構 434

10.2　遍歷函數 435

10.3　工具函數 437

10.3.1　jquery.dir( elem, dir, until ) 437

10.3.2　jquery.nth( cur, result, dir, elem ) 439

10.3.3　jquery.sibling( n, elem ) 440

10.4　模板函數 441

10.5　總結 443

第11章　dom操做manipulation 444

11.1　整體結構 444

11.2　插入元素 445

11.2.1　核心方法.dommanip( args, table, callback ) 445

11.2.2　.append( content [, content] ) 451

11.2.3　.prepend( content [, content] ) 452

11.2.4　.before( content [, content] ) 452

11.2.5　.after( content [, content] ) 452

11.2.6　.appendto( target )、.prependto( target )、.insertbefore( target )、.insertafter( target ) 453

11.2.7　.html( [value] ) 454

11.2.8　.text( [text] ) 458

11.3　刪除元素 459

11.3.1　.remove( selector, keepdata ) 459

11.3.2　.empty() 460

11.3.3　.detach( selector ) 460

11.4　複製元素 461

11.4.1　.clone( dataandevents, deepdataandevents ) 461

11.4.2　jquery.clone( elem, dataandevents, deepdataandevents ) 461

11.4.3　clonefixattributes( src, dest ) 465

11.5　替換元素 467

11.5.1　.replacewith( value ) 467

11.5.2　.replaceall( target ) 469

11.6　包裹元素 469

11.6.1　.wrapall( html ) 469

11.6.2　.wrapinner( html ) 470

11.6.3　.wrap( html ) 471

11.6.4　.unwrap() 471

11.7　總結 472

第12章　樣式操做css 474

12.1　內聯樣式、計算樣式 475

12.1.1　整體結構 475

12.1.2　.css( name, value ) 476

12.1.3　jquery.style( elem, name, value, extra ) 477

12.1.4　jquery.css( elem, name, extra ) 481

12.1.5　curcss( elem, name )、getcomputedstyle( elem, name )、currentstyle( elem, name ) 483

12.1.6　jquery.csshooks 486

12.2　座標offset 492

12.2.1　整體結構 492

12.2.2　.offset( options ) 493

12.2.3　jquery.offset.setoffset( elem, options, i ) 498

12.2.4　jquery.offset.bodyoffset( body ) 500

12.2.5　.position() 501

12.2.6　.offsetparent() 502

12.2.7　.scrollleft( val )、.scrolltop( val ) 503

12.3　尺寸dimensions 504

12.3.1　整體結構 504

12.3.2　getwh( elem, name, extra ) 505

12.3.3　.innerheight()、.innerwidth() 508

12.3.4　.outerheight( margin )、.outerwidth( margin ) 509

12.3.5　.height( size )、.width( size ) 509

12.3.6　小結 513

12.4　總結 513

第13章　異步請求ajax 516

13.1　整體結構 517

13.2　jquery.ajax( url, options ) 519

13.3　前置過濾器、請求發送器的初始化和執行 540

13.3.1　初始化 540

13.3.2　執行 543

13.4　前置過濾器 545

13.4.1　json、jsonp 545

13.4.2　script 548

13.4.3　小結 549

13.5　請求發送器 549

13.5.1　script 549

13.5.2　xmlhttprequest 552

13.5.3　小結 560

13.6　數據轉換器 561

13.6.1　初始化 561

13.6.2　執行 562

13.6.3　小結 566

13.7　ajax事件 567

13.8　便捷方法 568

13.8.1　jquery.get( url, data, callback, type )、jquery.post( url, data, callback, type ) 569

13.8.2　jquery.getjson( url, data, callback )、jquery.getscript( url, callback ) 569

13.8.3　.load( url, params, callback ) 570

13.9　工具方法 573

13.9.1　.serialize() 573

13.9.2　jquery.param( a, traditional ) 574

13.9.3　.serializearray() 577

13.10　總結 579

第14章　動畫effects 582

14.1　整體結構 583

14.2　動畫入口 586

14.2.1　.animate( prop, speed, easing, callback ) 586

14.2.2　jquery.speed( speed, easing, fn ) 588

14.2.3　doanimation() 590

14.2.4　jquery.fx( elem, options, prop ) 595

14.2.5　jquery.fx.prototype.show() 595

14.2.6　jquery.fx.prototype.hide() 596

14.2.7　小結 596

14.3　動畫執行 597

14.3.1　jquery.fx.prototype.custom( from, to, unit ) 598

14.3.2　jquery.fx.tick() 599

14.3.3　jquery.fx.prototype.step( gotoend ) 600

14.3.4　jquery.easing 604

14.3.5　jquery.fx.prototype.update() 604

14.3.6　jquery.fx.step 605

14.4　中止動畫.stop( type, clearqueue, gotoend ) 606

14.5　便捷方法 609

14.5.1　生成動畫樣式集genfx( type, num ) 609

14.5.2　顯示隱藏.show/hide/toggle() 610

14.5.3　漸顯漸隱.fadein/fadeout/fadeto/fadetoggle() 613

14.5.4　滑入滑出.slidedown/slidup/slidetoggle() 614

14.6　總結 615

 

本圖書信息來源：互動出版網