├── LICENSE ├── README.md └── svg.md /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | {description} 294 | Copyright (C) {year} {fullname} 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | {signature of Ty Coon}, 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. 340 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 前言 2 | == 3 | 4 | 我曾经在伯乐在线的社区看到过这样一个问题：《面对技术海洋，如何选择一个属于自己的技术方向？》，楼主是这样说的： 5 | 6 | ``` 7 | “相信很多工作一两年的人都有一个困惑，自己写了不长时间的代码做了一些东西但是都不精通，面对各种层出不穷的 8 | 技术方向不知道如何选择。我就是其中的一员困惑者。希望发起一场讨论看看大家的看法和意见以抛砖引玉。” 9 | ``` 10 | 11 | 这个问题也引发了我自己的一些思考，然后我提出了自己对这个问题的看法： 12 | 13 | ``` 14 | “我的观点有可能是片面的，但我还是想说在工作过程中最重要的不是去精通某个技术方向，而是不断提高自己快速学 15 | 习的能力。 16 | 17 | 一，技术方向本身就是不断变化的。你可能刚刚精通了Struts，可是Struts 2、Spring、Grails又出来了；刚掌 18 | 握了jQuery的精髓，却发现有了HTML5和CSS3，大部分情况下用它多余；刚弄明白线程池等概念，突然流行起单线程 19 | 框架；刚把MySQL学会，MongoDB又火了。基本上大部分技术方向上每年都会出不少新东西，想精通一项技术，然后一 20 | 招鲜吃遍天，恐怕不太现实。 21 | 22 | 二，技术方向的演变方向不容易预见。兄弟我就遇到过这个困惑。想当年在IBM主机开发领域（AS/400, ES/9000） 23 | 兄弟我在国内也算是一把好手，可是离开原来单位出来居然找不到工作，因为除了那几个IBM大客户，谁知道RPG、 24 | COBOL是什么东西啊？只好重头开始学Java，才混了口饭吃。现在包括微软的那些开发平台，也逐渐衰落了。所以光 25 | 是精通一门，也许过几年就落伍了。 26 | 27 | 三，技术方向的选择是个普遍性难题。其实不光是楼主在这方面有困惑，恐怕楼主的老板们更会有，比如NoSQL、 28 | 大数据、云计算这么流行，搞不搞？不搞会不会落后？投资人会不会觉得我们吃老本不思进取？要是搞，咋搞？ 29 | 招牛人还是自己培养几个？一年投入多少钱？万一搞不出名堂怎么善后？就是Steve Jobs当年不也在HTML5 和 30 | Flash 之间斗争么。他们为此都得琢磨个三五年，你看不清方向也是正常的。 31 | 32 | 四，“精通”是关于对一门技术理解的深度，而“技术方向”是对于整个技术理解的广度。没有深度作为基础，所谓 33 | 的广度也是虚的。有不少人喜欢夸夸而谈，什么Map Reduce啦，什么Hadoop啦，什么机器学习啦，未来私有云 34 | 和公有云融合的发展方向啦，说起来头头是道，似乎一下子就能做个顶层架构，但是让他写个二叉树遍历都写不出 35 | 来，这就是too young, too simple，和街头小混混讨论如何收复钓鱼岛差不多意思。 36 | 37 | Talk is cheap。你懂的。 38 | 39 | 所以，楼主提到“很多工作一两年的人都有一个困惑，自己写了不长时间的代码做了一些东西但是都不精通”，这是 40 | 很正常的。既然只是“写了不长时间的代码”，“都不精通”基本是必然的，除非你是天才。想精通就多花时间进去， 41 | 多写代码，多查资料，多思考，先精通一门再说。在此基础上，业余时间多关心行业内的技术动态，了解一些新的 42 | 技术，慢慢积累，这有助于你看清大的趋势。 43 | 44 | 总之我的看法是，先不要急着爬到很高想看清楚方向，不管你手头用的是什么技术，先踏踏实实地精通它。在这个 45 | 过程中，不断提高自主学习的能力。这样即使看不清方向，万一方向变的时候，你总是第一个适应的，那也很不错。” 46 | ``` 47 | 48 | 我本人其实一向都是靠自学的，很少参加技术培训。现在互联网上的资源太丰富了，你只需要一台电脑和网络就可以学习任何技术。我学一种新技术一般只需要有官方文档、源码和stackoverflow就够了，关键是自己勤动手、花时间。我也从来没有跟着在线视频学过东西，因为那样不如自己照着文档动手来得快。我之所以把下面自己有关前端技术的一些思考放在github上分享，也是希望能抛砖引玉，吸引喜欢自学的同学来一起讨论。 49 | 50 | 每次我学会一些新东西，我总是会很兴奋地告诉周围的同事，推荐他们也去学。他们看我的演示觉得很棒，但是很少有人会真的去学。很多码农同事都有一种惰性，他们习惯了躲在自己熟悉的世界里，照着老板的要求按部就班地写着代码，等待着中文版的《21天精通Node.js》之类的书出来。怎么说呢，确实平时的工作压力已经很大了，我们码农都是no money, no life，再花时间学习新技术有时候过于奢侈，这也是可以理解的。但是我觉得，既然选择了码农这样一个苦逼的职业，就只能活到老学到老。 51 | 52 | 像HTML5, CSS3, SVG这些新的技术，还有AngularJS，Node.js这些新框架，NoSQL数据库等等，出来得都很快，可如果要等别人掌握了再写出中文版的教程，可能两三年时间都过去了。我自己则更喜欢自己通过看文档、找例子、SO问答的渠道自学，这样能比别人快很多，也希望把自学的一些经验和大家分享。下面就是我自己的一些总结，还不成熟，谬误之处请多多指点，谢谢！ 53 | 54 | 55 | 一、前端开发自学基础 56 | == 57 | 58 | 59 | 英语读写 60 | -- 61 | 62 | ### 需要达到的水平： 63 | 64 | 1. 能充分理解技术文档的内容，这是自主学习的重要基础。 65 | 66 | 2. 能用英语准确表达技术相关的问题，写出清晰的注释。 67 | 68 | ### 方法： 69 | 70 | 1. 大量阅读，在阅读过程中熟悉单词，熟悉语法结构。 71 | 72 | 2. 多模仿读到的好句子，用它们写文档和注释。 73 | 74 | ### 难点： 75 | 76 | 技术文档中有很多长句子，带有多层嵌套的从句，初学者不容易准确理解句子的意思。遇到这种句子，先搞清楚断句，也就是判断每个从句修饰的主体是哪个，然后再组合起来理解。 77 | 78 | 参考文章：《老码农教你学英语》http://blog.jobbole.com/45296/ 79 | 80 | ### 学习资源： 81 | 82 | https://tools.ietf.org/html/rfc2616 (HTTP协议描述，比较枯燥，但是非常重要，这是web开发的理论基础。不过，马上HTTP/2的RFC要出来了，看新版本的更好。) 83 | 84 | 85 | 86 | 87 | StackOverflow 88 | -- 89 | 90 | ### 需要达到的水平： 91 | 92 | 1. 知道怎么搜索与自己遇到的bug相关的问题。 93 | 94 | 2. 能够在stackoverflow上顺利地提出问题、尝试答案、选出正确答案。 95 | 96 | 3. 尝试在SO上回答问题，帮助其他人。 97 | 98 | ### 方法： 99 | 100 | 注册账号，每天使用，编程中遇到问题自己花时间找答案，多尝试多模仿。 101 | 102 | ### 难点： 103 | 104 | 提高英语水平和debug经验。 105 | 106 | ### 学习资源： 107 | 108 | http://stackoverflow.com/tour 109 | 110 | 111 | 112 | 113 | GitHub 114 | -- 115 | 116 | ### 需要达到的水平： 117 | 118 | 1. 能够在 GitHub 上建立自己的开源项目并管理它。 119 | 120 | 2. 会给项目建立 GitHub pages用于演示。 121 | 122 | 3. 会使用git命令行工具进行代码的版本控制。 123 | 124 | 4. 尝试利用 GitHub 进行多人协作。 125 | 126 | ### 方法： 127 | 128 | 注册账号，每天使用，不会的操作自己查SO寻找答案。 129 | 130 | ### 难点： 131 | 132 | 熟悉git操作。也可以安装一个 GitHub 客户端用来进行可视化的版本控制。 133 | 134 | ### 学习资源： 135 | 136 | https://help.github.com 137 | 138 | 139 | 140 | 141 | 编码规范 142 | -- 143 | 144 | ### 需要达到的水平： 145 | 146 | 1. 理解代码可读性的概念。 147 | 148 | 2. 遵守代码结构、函数与变量命名、注释等规范。 149 | 150 | 3. 培养优化代码逻辑的意识 151 | 152 | ### 方法： 153 | 154 | 找一些经典开源项目，作为学习和模仿的对象，平时对自己严格要求 155 | 156 | ### 学习资源： 157 | 158 | 前端代码规范： https://coderlmn.github.io/code-standards/ 159 | 160 | 前端开发指南： https://coderlmn.github.io/Front-End-Development-Guidelines/ 161 | 162 | 163 | 二、热身小测试 164 | == 165 | 166 | 下面有几个小题目，用来测试一下你当前的水平，都是针对HTML、CSS、Javascript的基本概念，没有偏题难题，全部代码可以写在一个HTML文件里，每题都不会超过50行。记不住的属性可以自己去查。 167 | 168 | 169 | ### 1. 图片位置 170 | 171 | 下面的HTML页面里有三张图片： 172 | 173 | ```html 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | ``` 183 | 184 | 如何让这三张图片依次居左、居中、居右对齐？ 185 | 186 | 187 | ### 2. 表格样式 188 | 189 | 做一个4行x3列的表格，宽度300px，行与行之间的底部画线，列之间不用画，最下面一行底部也不需要线。也就是说，4行中间用3条线隔开。不过不要硬写，行数是可变的哦。 190 | 191 | 192 | ### 3. 图片移动 193 | 194 | 用第一题做好的页面，每次点击任意一张图片，最左边的图片移到最右边，中间的移到左边，右边的移到中间。如果把页面看成一个平放的圆盘，就是说点击后圆盘顺时针移动一格。 195 | 196 | 197 | ### 4. 再来一个选做题 198 | 199 | 给定一个HTML页面： 200 | 201 | ```html 202 | 203 | 204 | 205 |
206 | selected items:
207 | root 208 |
209 | 210 | 211 | ``` 212 | 213 | 要求实现类似于资源管理器的功能，双击可以添加一个下级单选，从而实现多级联动的单选功能。例如： 214 | 215 | ```html 216 | 图书 -小说 -科幻小说 217 | -言情小说 218 | -战争小说 219 | -教材 -计算机教材 -数据结构 -算法设计手册 220 | -编译原理 221 | -英语教材 222 | -儿童读物 223 | ``` 224 | 225 | 给定的HTML页面可以任意修改，增减元素、样式和JS代码。 226 | 227 | 228 | 三、我自己做的参考答案 229 | == 230 | ### 1. 三张图片居左、居中、居右 231 | 232 | ```html 233 | 234 | 235 | 236 | 247 | 248 | 249 |
250 | 251 | 252 | 253 |
254 | 255 | 256 | ``` 257 | 258 | 259 | ### 2. 4行x3列的表格 260 | 261 | ```html 262 | 263 | 264 | 265 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 |
JillSmith50
EveJackson94
JohnDoe80
MonicaJones20
301 | 302 | 303 | ``` 304 | 305 | 306 | ### 3. 图片被点击后，顺序顺时针移动 307 | 308 | ```html 309 | 310 | 311 | 312 | 323 | 331 | 332 | 333 |
334 | 335 | 336 | 337 |
338 | 339 | 340 | ``` 341 | 342 | 343 | ### 4. 可定制多级联动单选 344 | 345 | ```html 346 | 347 | 348 | 349 | 360 | 361 | 362 |
363 | 364 |
selected items:
365 | 371 |
372 | 373 | 429 | 430 | 431 | ``` 432 | 433 | 四、总体架构的思考 434 | == 435 | 436 | 近几年因为HTML5，CSS3的出现并逐渐占据主流位置，web前端开发的整体格局已经有了一个巨大的变化。比如说原先要通过jQuery渲染的一些动画效果，现在用CSS3 animation就轻松搞定了，Drag & Drop这类功能也成为了HTML5的标配。 437 | 438 | 我觉得总体趋势是JS的角色要往后退，主要承担前端逻辑控制和与后端交互的作用，CSS成为前端渲染效果的核心。最近出现的一些前端MVC框架，比如AngularJS，就已经体现了这一趋势。 439 | 440 | 441 | ### 前端渲染效果 442 | 443 | 下面拿jQuery UI的Tabs作为一个例子。它提供了一个mouseover自动切换Tab内容的演示，地址是：http://jqueryui.com/tabs/#mouseover 444 | 445 | 源码如下： 446 | ```html 447 | 448 | 449 | 450 | 451 | jQuery UI Tabs - Open on mouseover 452 | 453 | 454 | 455 | 456 | 463 | 464 | 465 | 466 |
467 | 472 |
473 |

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

474 |
475 |
476 |

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

477 |
478 |
479 |

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

480 |

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.

481 |
482 |
483 | 484 | 485 | ``` 486 | 487 | 可以看到这个效果需要jQuery和jQuery UI的JS库，jQuery UI的CSS，还另外加载了一个演示用的style.css。其实，只需要用CSS加上两句原生JS就很容易实现这个效果。（其实我一直想怎么不用JS实现这个效果，还没想出可行的办法，先将就一下好了。） 488 | 489 | 490 | 下面是我的实现方法： 491 | 492 | ```html 493 | 494 | 495 | 496 | 530 | 531 | 532 | 537 |
538 |

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

539 |

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

540 |

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus. 541 |

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.
542 |

543 |
544 | 545 | 553 | 554 | 555 | ``` 556 | 557 | 其实这里都没有用到CSS3和HTML5。类似的，jQuery UI里边好多效果都可以用更简单的方法实现。另外的一些对应关系例子如下： 558 | ``` 559 | Accordian -- HTML5 details + CSS 560 | Droppable、Draggable -- HTML5 Drag and Drop 561 | Datepicker -- HTML5 562 | Menu -- HTML5 nav + CSS 563 | Progressbar -- HTML5 meter, progress 564 | Selectmenu -- HTML5 datalist + CSS 565 | Effects / jQuery .animate -- CSS3 animate 566 | ``` 567 | 568 | 感兴趣的同学可以自己在里边找一个例子实现一下。 569 | 570 | 571 | ### 前端逻辑控制 572 | 573 | 现在前端交互方式的趋势是局部刷新，单页面应用逐渐会成为web开发的主流方式。在这种情况下，前端的控制逻辑变得越来越复杂，JS的作用在这个领域就变得非常关键了。前面提到，由于HTML5和CSS3提供了非常强大的前端渲染功能，所以从架构的角度来说，能通过HTML和CSS解决的问题就不必惊动JS他老人家了，他有更重要的工作要做。 574 | 575 | 例如AngularJS在前端逻辑控制中提供了一套Route机制，根据url的变化动态加载相应的控制逻辑和html片段，如果去查看它的源代码里的browser.js，就可以发现这套机制的核心是针对hashchange和popstate事件来进行处理的（这样也就理解了为什么在html5Mode == false的时候，angurlajs应用所有的url前面都会带一个'/#'了)。那么，利用原生JS也可以实现类似的功能。 576 | 577 | 578 | 下面的例子构造了三个链接，点击后分别加载不同的html片段放入div#demo中。演示链接：https://coderlmn.github.io/frontEndCourse/ctrlDemo.html 579 | 580 | ```html 581 | 582 | 583 | 584 | home 585 | one 586 | two 587 | 588 |
589 | 590 | 603 | 604 | 605 | ``` 606 | 607 | 608 | 609 | ### 前后端交互 610 | 611 | JS还有一项重要职能，就是负责与后端服务器的交互。具体说就是解析前端url然后向后端发送Ajax请求，后端返回响应后再解析返回的数据并更新DOM相应的元素。大部分JS库都提供了Ajax访问的方法，但是我们也可以直接利用XMLHttpRequest来获取后端的资源。下面就是一个获取github上emoji表情图片集合的例子。 612 | 613 | 614 | ```html 615 | 616 | 617 | 618 | home 619 | one 620 | two 621 | github emojis 622 | 623 | 624 | 658 | 659 | 660 | ``` 661 | 662 | 这里图片的显示用到了HTML5的figure和figcaption标签，它可以把图片和标注放在一起，当然咱们也可以进一步用CSS对它进行美化。 663 | 664 | 665 | 五、有关前端核心技术的思考: 666 | == 667 | 668 | 与后端开发的MVC模式类似，前端开发也需要合理划分内容、样式和控制，这分别是HTML、CSS和JS的任务。 669 | 670 | 671 | ### HTML5 672 | 673 | HTML5提供了很多革命性的特性，除了Drag & Drop、Video、SVG等新的标签丰富了前端元素之外，还有一系列新的event，以及local storage，Speech Synthesis、app Cache等超级强大的基础功能，让开发者能够控制更多的本地资源，做出原来只有本地应用才能实现的功能。 674 | 675 | 这里有个IndexedDB内嵌数据库的例子： 676 | 677 | 演示：https://coderlmn.github.io/offlineDB/ 678 | 679 | 680 | ### CSS3 681 | 682 | CSS3的出现也大大地简化了前端渲染的工作，它推出的text-shadow、@keyframes animation、attribute Selectors等都使得样式的定义和控制更为简单，效果更为丰富。 683 | 684 | 这里有个3D Transform的例子： 685 | 686 | 演示：https://coderlmn.github.io/CSS3dTimeMachine/ 687 | 688 | 689 | ### SVG 690 | 691 | HTML5支持内嵌SVG，SVG又支持嵌入CSS和JS，使得SVG成为了极其强大的渲染工具。比如，你可以用SVG绘制一张地图，并按照用户给出的起始点绘出最佳路线，或者在HTML5视频中加上各种效果的字幕（关于HTML5视频与SVG的配合方面，firefox目前是支持得最好的，safari也有自己定义的一套方法，不过总体来说还不是很成熟，不同浏览器的支持差别比较大）。 692 | 693 | 这里有个SVG动画和根据结构化数据动态绘制SVG图的例子： 694 | 695 | 演示： https://coderlmn.github.io/frontEndCourse/mask.html 696 | 697 | ### JS 698 | 699 | JS主要是融入在前面三部分内容中，另外我觉得DOM树结构及其访问方式比较重要，尤其是树结构及其核心算法。 700 | 701 | 702 | 六、后端RESTful接口和前端的配合 703 | == 704 | 705 | 706 | web开发一共就那么些事，既然我们说前端干的活多了，那后端就能相对省点事。现在流行的前后端通过JSON来交换数据，后端不再需要弄个像JSP那样的东西来负责渲染页面，就可以专注于数据持久化和权限管理这些真正后端的工作。 707 | 708 | 具体地说，后端主要用来处理数据CRUD等请求、定时任务、数据分析统计等等。对于处理的请求中需要权限的操作（比如发布和删除），会事先检查用户身份，如用户未登录或权限不足，则返回401(Unauthorized)，前端可以用个interceptor抓取它并转到相应的提示页面。 709 | 710 | 举个例子，一个RESTful的接口是这么定义的（以Node.js后端为例）： 711 | 712 | ```javascript 713 | app.get('/detail/:id', function (req, res) { 714 | var id = req.params.id; 715 | db.collection('article').findAndModify({_id: new ObjectID(id)}, [], {$inc: {'readCount': 1}}, {}, function (err, data) { 716 | if (err) { 717 | console.log(err); 718 | } 719 | res.setHeader('Content-Type', 'application/json; charset="utf-8"'); 720 | res.end(JSON.stringify(data)); 721 | }); 722 | }); 723 | ``` 724 | 725 | 726 | 前端发送的请求例子： 727 | 728 | ```javascript 729 | var getJson = JSON.parse(getPage(url)); 730 | ...... 731 | function getPage(href) { 732 | var xmlhttp = new XMLHttpRequest(); 733 | xmlhttp.open("GET", href, false); 734 | xmlhttp.send(); 735 | return xmlhttp.responseText; 736 | } 737 | ``` 738 | 739 | 740 | 从前面的例子可以看出，后端api的参数是和前端的XMLHttpRequest.open()调用参数一一对应的。例如在前端的调用： 741 | 742 | ```javascript 743 | var getJson = JSON.parse(getPage('/detail/' + id)); 744 | ``` 745 | 746 | 747 | 对应的就是后端的这个方法： 748 | 749 | ```javascript 750 | app.get('/detail/:id', function (req, res) {...} 751 | ``` 752 | 753 | 754 | 在这个过程中，前端的id作为动态的文章id被加在'/detail/'的后面传递给后端，后端的get('/detail/:id'）函数匹配了这个请求，并取得id去查找mongodb里对应的记录并包装成json返回给前端，前端的回调函数取得json数据赋值给apiJson然后进行下一步的处理。 755 | 756 | 757 | 对于某些需要权限的操作，例如删除文章的函数： 758 | 759 | ```javascript 760 | app.get('/remove/:id', authenticated, function (req, res) {...} 761 | ``` 762 | 763 | 764 | 在参数和回调函数之间加入了一个中间件authenticated，这个中间件会先执行，如果用户没有登录则直接返回401给前端，从而触发前端转向login页面提示用户登录。 765 | 766 | 767 | 演示地址 768 | == 769 | 770 | 以上就是我目前总结的一些体会，相关的演示都在 https://coderlmn.github.io/frontEndCourse/ 里可以看到。推荐用 Chorme 浏览器，因为这些演示代码我主要是在它上面测试的。 771 | 772 | 773 | 另外，对于无框架单页面应用开发，最近我又整理了自己的一些体会，放在单独的一个项目里：https://github.com/coderLMN/framework-free-single-page-app ，供参考。 774 | -------------------------------------------------------------------------------- /svg.md: -------------------------------------------------------------------------------- 1 | 用 SVG 实现产品图片放大镜功能 2 | == 3 | 4 | 电商网站上一个典型的功能就是产品图片的放大镜。当用户鼠标悬停在产品图片上时，能够把鼠标所在位置周边的产品图片进行放大，让用户能够看得更清楚。效果如下图所示： 5 | 6 | ![产品图片放大效果](https://user-images.githubusercontent.com/3234019/29485377-7ba6e66c-8503-11e7-881c-44134edc2291.jpg) 7 | 8 | 我花了点时间看了下京东和淘宝的产品页面，它们都有这个功能，例如：https://detail.tmall.com/item.htm?spm=a230r.1.14.3.Xpop8Z&id=41610798823 和 http://item.jd.com/1217501.html 。如果你没有印象，可以自己去网页上试一试。 9 | 10 | 这个功能是如何实现的呢？京东和淘宝都用了 JS 库和大量的 JS 代码实现这个动态的效果，从原理上说，就是在 DOM 里动态地插入一些元素（比如 `div` ），然后根据鼠标位置计算并截取图片的一部分放入动态插入的元素中。相关的部分代码见下图： 11 | 12 | ### 淘宝： 13 | ![TB](https://user-images.githubusercontent.com/3234019/29485319-ace2b068-8502-11e7-8e38-47384bbe22d8.jpg) 14 | 15 | ### 京东： 16 | ![JD](https://user-images.githubusercontent.com/3234019/29485318-a570e64c-8502-11e7-985a-035ab7c00ec1.jpg) 17 | 18 | 这样的实现方法当然是直观有效的，但是有没有更好、更简单的方法呢？ 19 | 20 | 对于这种需求，`SVG` 就大有用武之地了。有人可能会觉得奇怪：SVG 不是矢量图吗？用来制作动态图表、画一些曲线什么的挺好，可是这里是显示 JPG 图片，和 SVG 有什么关系呢？ 21 | 22 | 实际上，SVG 是一种 XML 的扩展格式，它也支持很多的元素和属性。在这里，它有两个特别好的特性可以用： 23 | 24 | 1. 内嵌 JPG 图片； 25 | 2. 动态修改 `viewBox` ，显示内嵌 JPG 图片的一部分。 26 | 27 | 内嵌图片，也就是让 SVG 内部可以包含传统的图片文件，而不仅仅是矢量。这是由 SVG 自带的 `` 元素来定义的，例如： 28 | ```html 29 | 30 | ``` 31 | 其中的 x 和 y 属性代表内嵌图片在 SVG 内的左上角坐标，width 和 height 属性则表示内嵌图片在 SVG 内占据的宽度和高度， `xlink:href` 定义了图片文件所在的 URL。 32 | 33 | 为什么要把 JPG 放在 SVG 里呢？这样不是多此一举么？这就涉及到 SVG 的 `viewBox` 属性了。 34 | 35 | 大家可以看到， SVG 的起始标签里有不少属性，比如： 36 | ```html 37 | 38 | ``` 39 | 其中的 `x, y, width, height` 含义和前面 `` 元素的类似，表示 SVG 图片在 HTML 网页上的位置和大小。需要注意的就是 `viewBox` 属性了。它是一个字符串，里面带有四个数字，对应的还是 `x, y, width, height`，代表当前的视窗显示的部分。 40 | 41 | 也就是说，SVG 可以只是部分显示在屏幕上。它的 width 和 height 是设定好的，但是屏幕上显示的未必是整个 SVG ，而是在 `viewBox` 里定义的部分。这里的 SVG 中除了要放大的图片，没有其他矢量，所以通过 `viewBox` 就可以对图片进行放大了。 42 | 43 | 现在，SVG 放大镜的思路应该就比较好理解了吧？把要放大的图片放到一个和它大小相同的 SVG 里，然后通过鼠标 `mousemove` 事件获取的坐标，把 `viewBox` 设定为向该坐标点四周延伸设定的宽度，就能在图片原始大小的范围内显示图片的一小部分，从而实现放大的效果。 44 | 45 | 此外，在 SVG 里要实现图片上的水印效果也是很容易的，利用 SVG 的 `` 元素，可以把水印文字加到一个设定的位置，甚至还可以对它应用 `transform` 变换，让它倾斜指定的角度。 46 | 47 | 下面就是全部的代码了。这里我在 `` 元素里用的是和 `` 元素相同的一张图片，所以放大后有点模糊。反正不管是一张还是两张图，实现原理都是一样的啦。 48 | 49 | ```html 50 | 51 | 52 | 53 | 用 SVG 实现图片放大镜的功能 54 | 55 | 56 | 57 | 63 | 78 | 79 | 80 | ``` 81 | 82 | 这种方法的几个优点是： 83 | 84 | 1. 代码量少，逻辑清晰。HTML + JS 原生代码才三十几行，不需要加载任何 JS 库，很难做到更简单了。 85 | 2. 兼容性好。主流的浏览器（包括 IE 8 以上版本）都支持 SVG。 86 | 3. 资源管理简单，可以只用一张图片，无需缩略图。 87 | 4. 性能更好。代码量少，执行的逻辑简单，无需进行 DOM 元素的动态增减，也无需反复读取图片文件，响应的速度会更快。 88 | 89 | 【注】演示地址是： http://coderlmn.github.io/frontEndCourse/zoom.html 90 | --------------------------------------------------------------------------------