Developing Large Web Applications- P30

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:10

Thêm vào BST

Báo xấu

62
lượt xem 5
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Developing Large Web Applications- P30:This book presents a number of techniques for applying established practices of good software engineering to web development—that is, development primarily using the disparate technologies of HTML, CSS, JavaScript, and server-side scripting languages. Whereas there are many books on how to use languages, how to use libraries, and how to approach software engineering, this is the first book to codify many of the techniques it presents. These techniques will make the components of your own web applications more reusable, maintainable, and reliable....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Developing Large Web Applications- P30

Index Symbols and Numbers support for, 35, 188 testing requests, 201 $instance (PHP), 8 using Expires headers, 233 $path members (PHP), 158 aka “also-known-as” path, 235, 237 * asterisk, number of instances in UML class Akamai, 237 diagram, 10 Alternative PHP Cache (APC), 127, 230 . (dot) apply CSS to class, 55 Amazon.com CloudFront, 237 2×1 container, 80–82 animation, 102–105 :: scope operator (PHP), 17, 159 APC (Alternative PHP Cache), 127, 230 ; semicolon (JavaScript statement termination), APIs (application programming interfaces), 50, 23 131 appendChild method (DOM), 93 A architecture, application abandon (MVC), 211 maintenance, 258–269 abort action (MVC), 202, 211 overview, 247 absolute positioning (CSS), 68 page, 256–258 abstract interface, 163, 209, 211 section, 254 accessibility, 36 sitewide, 248 accordion lists, 215–219, 231–233 association, 10 add_to_css (PHP), 142, 268 associative arrays (PHP), 116, 198 add_to_css_linked (PHP), 142, 268 attach (MVC), 209 add_to_js (PHP), 143, 268 attribute value syntax (XHTML), 44 add_to_js_linked (PHP), 143, 268 attributes (DOM libraries), 92–98 aggregation (PHP), 122, 137 autocompletion, 202 Ajax (Asynchronous JavaScript and XML), 35 (see also MVC) B and HTML, 202 backend developers, 115 and JSON, 132, 185, 188, 196 background images, 63 caching with, 231–233 backgroundColor property, 95 chained selection lists, 105 backward compatibility (HTML), 35 in the browser, 186–194 bandwidth requirements, 36 libraries, 189–194 behavior layer, 87, 90, 98 modular, 198 binding, 91 on the server, 194–200 block-level elements (CSS), 67 request example, 186 body tag (HTML), 88, 136, 141, 147 We’d like to hear your suggestions for improving our indexes. Send email to index@oreilly.com. 271
border (CSS), 66 Connect object (MVC), 210 box model (CSS), 66 _construct, 16, 159 Browser Reset CSS, 83–84 constructors (JavaScript), 22, 23 browsers, 27 constructors (PHP), 16 (see also caching) containers Ajax in, 186–194 compared to layouts, 177 displaying CSS boxes, 66 as modules, 248, 252 event handling, 98 CSS, 71, 80–82 font normalization in, 85–86 UML, 11 interoperability issues, 27, 188 containing block, 68 older, 37, 188 content area (CSS), 66 Reset CSS, 83–84 content delivery networks, 237 and special characters embedded in HTML, continuous availability, 2 44 controllers (MVC), 200, 214 busting the cache, 88 cookies, 133 create (PHP), 136, 141, 163 createElement method (DOM), 93 C createTextNode method (DOM), 93 C++ and PHP support, 142, 143 create_css (PHP), 148 caching create_css_linked (PHP), 148 CSS and JavaScript, 36, 222–227 create_js (PHP), 148 for pages, 231 create_js_linked (PHP), 148 linking and, 52, 88 Crockford, Douglas, 22, 24, 235 modules, 227–230 cross-site scripting (XSS), 197 with Ajax, 231–233 CSS (cascading style sheets) cascading, 3, 57, 64 aggregating in PHP, 137, 147 cascading style sheets (CSS) (see CSS) applying, 55–57 chained selection lists (JavaScript), 105–114 better and best examples of, 30–32 Change policy (MVC), 202 caching, 222–227 cite element (HTML), 32 combining with JavaScript files, 224–227 class-based language, 7 cuts across module boundaries, 3 classes, 162 dynamic, 182 (see also Module class; Page class) embedded, 44, 163 data members, 8, 24 HTTP requests for, 238 HTML, 40, 55 linking, 52, 142, 163, 222 methods, 8, 24 managing through PHP, 142, 144, 163, overview, 8 167 PHP, 15–21, 122 media types, 225 public interface for, 141–144 minimizing HTTP requests for, 238 click (YUI JavaScript), 99 overview, 51 Client URL (cURL), 131, 197 positioning techniques, 65–71 CloudFront, 237 refactoring, 260 cohesiveness, 14 versioning, 223 color property, 94 visual consistency/control, 36 color transition animations (YUI JavaScript), where to place files, 253 104 cURL (PHP), 131, 197 comment codes, 44 custom events (JavaScript), 101 common directory, 252 complexity, addressing, 2 concatenating files, 225 272 | Index
D encapsulation, 3, 90, 140, 211, 258 eval (JSON), 186 data action (MVC), 202 event handling, 89, 98–102 data interfaces, 15, 18, 115, 120 exchange formats, 194 data managers, 117–123 Expires headers, 233 accessing XML data, 127–130 extending a class in PHP, 19, 122 creating, 120, 254 extending, 121–123 handling data source changes, 266–268 F modular Ajax and, 198 factory methods, 136 passing flags to, 133 fail action (MVC), 202 using cURL inside, 131 faster rendering, 35 databases, connecting to, 121, 123–126 final keyword (PHP), 21 date stamps, 53, 88 final methods (PHP), 21 degrading gracefully, 37 fixed-width layouts/containers (CSS), 71 dependencies in class diagrams, 14 Flanagan, David, 22 descendants (CSS), 56 Flash, JavaScript alternatives to, 102 DHTML, and MVC, 201 floating elements (CSS), 70 directory structure, 252 font normalization across browsers, 85–86 display attribute (CSS), 73 footers, 63, 77, 146, 264 diversity of web interfaces, 2 forms, 133, 134 divisions of modules, 63 forward compatibility (HTML), 36 DNS lookups, 237, 239 document flow (CSS), 67 Document Object Model (see DOM) G Dojo JavaScript library, 94, 189 general page information, 147 DOM (Document Object Model) generalization, 10 common methods, 91, 92 $_GET array (PHP), 134 and faster rendering, 35, 234 GET requests (Ajax), 189–194 JavaScript libraries for, 93–98 getElementById method (DOM), 91, 195 and request handling, 186 getElementsByTagName method (DOM), 93, XHTML and, 42 186, 195 XML responses in, 195 getState (MVC), 206 Domain Name Service (DNS) lookups, 237, get_all_css (PHP), 142 239 get_all_js (PHP), 143 double margin bug (IE), 73 get_cache_vars (PHP), 230 DTD, strict, 45 get_content (PHP page class), 137 Dublin Core vocabulary, 46 get_content (PHP), 146, 162, 164, 216 duplicate files, removing, 235 get_css (PHP), 144, 162, 163, 181, 182 dynamic data, 115, 145 get_css_common (PHP), 144, 157, 163 dynamic modules, 116 get_css_linked (PHP), 144, 161, 163, 222 get_data (PHP), 117, 121, 123, 198, 266 get_doctype (PHP), 142 E get_footer (PHP), 146, 157, 161, 264 edges, 10 get_header (PHP), 146, 157, 161, 264 elements (CSS), 56 get_js (PHP), 145, 162, 164, 182, 216 elements (DOM), 92 get_js_common (PHP), 143, 145, 157 embedding (CSS), 53 get_js_linked (PHP), 145, 161, 164, 216, 222, embedding (JavaScript), 89 234, 236 empty tags (XHTML), 43 get_meta (PHP), 142 Index | 273
get_page (PHP), 136, 141, 143, 231, 234 Ignore policy (MVC), 202 get_section (PHP Layout class), 177 image files, 239, 254 get_title (PHP), 142 importance (CSS), 57 global data in event handlers, 98 information architecture, 27 Google Analytics, 158, 241–243 information hiding (JavaScript), 24 Google Maps, 87 information hiding (PHP), 16 grid-based layouts/containers (CSS), 71 inheritance (JavaScript), 25 grouping selectors (CSS), 57 inheritance (PHP), 19, 122, 258 init (MVC), 206 inlining (CSS), 54, 67 H inlining (JavaScript), 89 handleConnect method (Ajax), 186 innerHTML property (HTML DOM), 93 handler method (YUI JavaScript), 99 input element (CSS), 32 handleRequest method (Ajax), 186 instance of a class, 8 “has-a” relationship, 10 interfaces, 15, 18, 115, 120 headers, 63, 72, 75, 146, 264 internationalization, 36 height property (CSS), 67 interoperability issues, 27, 188 High Performance Web Sites (Souders), 221, “is-a” relationship, 10 238 hooks, 31 hostnames, 237 J HTML JavaScript, 108 aggregating in PHP, 137 (see also JSON) and Ajax, 202 aggregating in PHP, 137, 147 bad tags, 37 caching, 222–227 benefits of good, 35 chained selection lists, 105–114 caching, 222 combining with CSS files, 224–227 chained selection lists, 105 cookies, 133 class attribute, 40 creating an object in, 22 embedding/inlining JavaScript into, 89 duplicate files, 235 good and bad examples of, 28–32 dynamic, 182 good tags, 38–40 embedding, 44, 89, 163 ID attribute, 40 establishing server connections, 186 and JSON, 198 HTTP requests for, 225, 238 name attribute, 41 information hiding in, 24 overview, 27 inlining, 89 retrieving header, footer, content markup, linking, 88, 161, 163, 222 146 managing through PHP, 143, 145, 163, semantically meaningful, 31 167 versions, 41, 45, 49 methods in, 24, 90 and XHTML, 41 minification, 234 HTTP requests, 225, 238 modularity, 88, 101 object orientation in, 7, 22–26 overview, 87 I for Picture Slider example, 171–176 icons, spriting, 239 placement of, 234 ID refactoring, 260 HTML/CSS, 40, 55, 58, 91 scoping, 90–92 version, 223, 239 stubs, 89 iframe element (Ajax), 188 using events instead of method calls, 101 274 | Index
versioning, 223 methods, 8, 16, 24 where to place files, 253 microformats, 45, 63 JavaScript Object Notation (see JSON) minification (JavaScript), 234 JavaScript: The Definitive Guide (Flanagan), Model-View-Controller (see MVC) 22 modeling a web page, 11–14 JavaScript: The Good Parts (Crockford), 22 models (MVC), 200 jQuery JavaScript library, 95, 190 modularity JSON (JavaScript Object Notation), 108, 132, adding module variations, 261–263 185–188, 196 Ajax, 198 application architecture, 247 K benefits of, 4 and caching, 227–230 Keep-Alive feature, 237 cookie conflicts, 133 CSS, 52, 58, 63–65 L duplicate files, 235 label element (HTML), 32 event handlers, 100 large user base, 2 form data conflicts, 134 latency, 140 grouping modules into divisions, 63 laydtl example layout, 77–79 HTML, 35 Layout base class, 165 ID numbers (HTML/CSS), 40, 55, 58, 91 layouts, 11, 71, 177, 248, 252 JavaScript, 88, 101 layres sections (CSS), 72 making widespread changes, 263–265 leaders, 75 multiple instances, 181 libraries, 83 nesting of modules, 64–65, 182 (see also YUI) overview, 3, 162 Ajax, 189–194 reorganizing module use, 258–260 cURL, 131 of test data, 243–246 DOM, 93–98 UML, 14 prototype objects, 91 version IDs, 223, 239 lighter page weight, 35 web pages (PHP), 136–140 linking (CSS), 52, 142, 161 Module class (PHP) linking (JavaScript), 88, 161 abstract interface for, 163 $load members (PHP), 145 extending, 165 load_data (PHP), 117, 137, 145, 162 implementation of, 164 local action (MVC), 201 Picture Slider/Viewer example, 165–177, local path, 235 261–263 longevity of web applications, 2 public interface for, 162 loose coupling, 4, 14 slideshow example, 165–177 module, defined, 135 motion animations, 102 M multiple environments, 2 magic methods (PHP), 16 multiple instances of selection object maintainability, 4 (JavaScript), 105–114 manage_css_linked (PHP), 147 MVC (Model-View-Controller) manage_js_linked (PHP), 148, 236 accordion lists, 215–219 managing complexity, 1–4 chained selection list, 105–114 margin (CSS), 66 Connect object, 210–214 media attribute (CSS), 52 controllers, 214 media support, 36, 225 Model object, 206–209 meta information, web page, 142, 147 Index | 275
overview, 200 using Ajax with, 201–206 O View object, 209 obfuscation (JavaScript), 234 object-based language, 7, 22 onclick handlers (JavaScript), 89, 216 N OOP (object-oriented programming) name attribute (HTML), 41 achieving modularity with, 14, 140 namespaces, 47, 90, 133, 147 data managers, 117 naming conventions (HTML), 41 event handlers, data in, 100 nested modules, 64–65 in JavaScript, 7, 22–26 nesting of tags (XHTML), 42 in PHP, 7, 15–21, 135, 140 New Car Reviews examples overview, 8 accordion lists, 215–219, 231–233 RDFa, 45 Ajax request, 198 outer wrapper, 72, 75 associative array, 116, 133 overflow attribute (CSS), 71, 73 bad, better, best HTML coding, 28–32 overrideContext (YUI JavaScript), 99 chained selection list, 105–114 cookie management in, 133 creating slideshow modules, 176 P data padding (CSS), 66 accessing SQL, 124–126 Page class (PHP) accessing XML, 127–130 abstract interface for, 144–147 extending via aggregation, 122 extending, 157–162 extending via inheritance, 122 general page information, 147 JSON, 133 implementation of, 147–157 loading and saving, 117–120 public interface for, 141–144 test, 245 register_links, 147, 157, 161, 223, 235 generating list items dynamically, 116 $page member (PHP), 137 headers and footers, 264 page types (UML), 11 modularity, 64, 136, 138–140, 248, 259 page weight, 35 MultiSelect object, 105 page-specific classes, 162 navigation bar, 239, 252, 257 pages (see web pages) nesting, 64, 183 paginators, 181, 182 pages, single, 255 parent::_construct (PHP), 19 Picture Slider/Viewer example, 91, 165– pass-throughs, handling, 197 177, 261–263 paths, defining, 237 positioning, absolute, 69 payload, 102 presentation, 33, 60 performance RDFa module annotation, 46–49 caching opportunities, 222 scoping, 58 control over site metrics, 241–243 spriting, 239 distribution of assets, 237–241 variations, 180 managing JavaScript, 234–236 web service, using cURL to access, 131 modular testing, 243–246 “Green Search”, 89 overview, 221 new keyword (JavaScript), 15 using Expires headers, 233 nodes, 9, 93 PHP, 162 notify (MVC), 206 (see also Module class; Page class) notify (Publisher-Subscriber), 200 abstract interface, 144–147 nudging (CSS), 68 Ajax, 186, 194 associative arrays, 116, 198 276 | Index
cookies, 133 pseudoclasses (CSS), 56 CSS management, 53, 142, 144 public interface, 141–140, 162, 206, 209, 210 data managers, 117–123 public visibility (PHP), 16 declaring a class, 15, 20 Publisher-Subscriber, 200 extending classes, 19, 122, 157–162 from a class diagram, 12 generating pages in, 136–140 R handling module variations, 180 RDFa (Resource Description Framework with implementation of classes, 147–157 Attributes), 45–49 implementing nested modules, 182 real-time updates, 2 information hiding in, 16 recover (MVC), 211 inheritance in, 19 redesign, efficiency in, 37 JavaScript management, 143, 145, 163, refactoring, 260 167 register_links (PHP), 147, 157, 161, 224, 235 JSON management, 132 relative positioning (CSS), 68 methods, 16, 21 reliability, 4 modular web pages, 136–140, 162, 181 remote action (MVC), 202 object orientation in, 7, 8, 15–21, 135, 140 removeChild (DOM), 93 public interface, 141–140 rendering, faster, 35 simple class in, 8 reorganizing modules, 258–260 using Expires headers, 233 $_REQUEST array (PHP), 134, 267 versions, 15, 24, 135 require_once (PHP), 140, 259 PHP Client URL (cURL) library, 131 Resource Description Framework with picture slider example, 90–92, 100 Attributes (see RDFa) Picture Slider/Viewer example, 91, 165–177, reusability, 4, 35, 71 261–263 piece-by-piece delivery, 2 pixels to percentages table, 85 S same-origin policy, 197 plain-text exchange format, 194 save_data (PHP), 119, 146, 162 policy action (MVC), 202 scope operator :: (PHP), 17, 159 pop-up menu (JavaScript and CSS), 54 scoping positioning techniques (CSS), 65–71 event handlers, 100 $_POST array (PHP), 134 HTML, 40 POST requests (Ajax), 189–194 JavaScript, 90–92 predicate (RDFa), 45 at page level, 59, 67, 181 prefix path, 158 within modules, 58, 257 presentation markup (CSS), 33 script nodes (Ajax), 188 presentation markup (HTML), 28–30 script tag (HMTL), 88 presentation switching (CSS), 60, 263 search engine optimization, 36 previews, 267 section architecture, 254 private visibility (PHP), 16 sectional page classes, 161 privileged visibility (JavaScript), 24 sections, 177 properties (JavaScript), 22 selectors (CSS), 55–57 protected visibility (PHP), 16 self keyword (PHP), 17 Prototype JavaScript library, 191 semantic gap, narrowing, 7, 9 Prototype library, 96 Semantic Web, 45 prototype objects, grouping into libraries, 91 semantically meaningful HTML, 31 prototype property (JavaScript), 24, 25–26 semicolon insertion (JavaScript), 23 prototype-based language, 7 sequence numbers, 53, 88 Index | 277
server proxies (Ajax), 197 tenet 2: object orientation, 7 server-side scripting languages, 7 tenet 3: large-scale HTML, 27 servers, 186, 194–200, 237 tenet 4: large-scale CSS, 51 setCollisionPolicy (MVC), 211 tenet 5: large-scale JavaScript, 87 setState (MVC), 206 tenet 6: data management, 115, 135 setter methods, 120, 180, 261 tenet 7: reusability, 135 setTimeout (MVC), 211 tenet 8: large-scale Ajax, 185 set_cache_clr (PHP), 230 tenet 9: performance, 221 set_cache_ttl (PHP), 230 test data, 243–246 set_css_common (PHP), 148 text nodes (DOM HTML), 93 set_css_id (PHP), 147, 162 $this, 8, 18 set_css_page (PHP), 148 this keyword (JavaScript), 23 set_data (PHP), 119, 121, 134 thrashing, 231 set_full_listings (PHP), 120 time-to-live value, 230, 237 set_instance (PHP), 181 timeout action (MVC), 202 set_js top (PHP), 143, 234 title information, web page, 142, 147 set_js_common (PHP), 148 Triples (RDFa), 45 set_js_page (PHP), 148 troubleshooting set_meta (PHP), 147, 162 JavaScript, semicolon insertion, 23 set_title (PHP), 147, 162 JSON eval susceptible to malware, 187 shorthand for empty tags (XHTML), 43 must honor HTML-level display in CSS, 68 side-by-side presentation (CSS), 69, 70, 80 must let browser control sizing/flow, 71 sitewide architecture, 248, 260 PHP, cannot use $this within static method, sitewide page class, 157–161, 238, 241 18 sizing animations (YUI JavaScript), 103 type display, normalizing, 85–86 sizing in browser display, 85 type method (YUI JavaScript), 99 sizing properties (CSS), 66 slideshow module example, 90–92, 100, 165– 177 U Souders, Steve, 221 ul element (HTML), 32 special characters, embedding, 44 Unified Modeling Language (UML), 9 specificity (CSS), 57 unsubscribe (MVC), 206 spriting image files, 239 unsubscribe (Publisher-Subscriber), 200 SQL, databases using, 123–126 update (MVC), 207, 211 src attribute (HMTL), 88 update (Publisher-Subscriber), 200 standard module formats (CSS), 63–65 URLs static data, 17, 115 Dojo library, 94, 189 static positioning (CSS), 68 Douglas Crockford’s utilities, 22, 235 stubs (JavaScript), 89 JavaScript resources, 22, 24 styles (DOM libraries), 93–98 jQuery library, 95, 190 subject (RDFa), 45 JSON resources, 132, 185 subscribe (MVC), 206 microformats, 63 subscribe (Publisher-Subscriber), 200 namespace for Dublin Core vocabulary, 47 object orientation in PHP 5, 15 O’Reilly Media, Inc., xvi, 221 T Prototype library, 96, 191 tables (HTML), 30 Safari Books Online, xvi tenets for large web applications, 4 for this book, xvi tenet 10: application architecture, 247 W3C’s HTML tag descriptions index, 37 tenet 1: large web applications, 4 YUI libraries, 97, 171, 235, 239 278 | Index
user base, 2 Z zoom attribute (CSS), 71 V variable height layouts/containers (CSS), 71 version IDs, 53, 88, 223, 239 views (MVC), 200 visibility CSS, 68 JavaScript, 24 PHP, 16 visual consistency/control (CSS), 36 visual models, 9 vocabularies, defining (RDFa), 46 W warnings (see troubleshooting) web browsers (see browsers) web pages defined, 135 generating modular, 136–140, 268 implementing, 256 modeling, 11–14 page types (UML), 11 page weight, 35 performance of PHP, 140 web services, 131 width property (CSS), 67 X XHTML, 41–45 XML, 127–130, 195 XMLHttpRequest (JavaScript), 185 XSS (cross-site scripting), 197 Y YUI (Yahoo! User Interface), 97 Ajax, 192, 201 browser display, 85–86 browser event handling, 99 libraries, 83–86, 97 motion animation, 102 onDOMReady, 234 versions, 97, 193 YUI Connection Manager, 207 Index | 279