├── base ├── README.md ├── js_tool.md ├── css_tool.md ├── css.md └── js.md ├── node └── README.md ├── site ├── README.md ├── rss.md ├── blog.md └── other.md ├── _book ├── gitbook │ ├── images │ │ ├── favicon.ico │ │ └── apple-touch-icon-precomposed-152.png │ ├── fonts │ │ └── fontawesome │ │ │ ├── FontAwesome.otf │ │ │ ├── fontawesome-webfont.eot │ │ │ ├── fontawesome-webfont.ttf │ │ │ └── fontawesome-webfont.woff │ └── plugins │ │ ├── gitbook-plugin-search │ │ ├── search.css │ │ ├── search.js │ │ └── lunr.min.js │ │ ├── gitbook-plugin-sharing │ │ └── buttons.js │ │ ├── gitbook-plugin-highlight │ │ └── ebook.css │ │ └── gitbook-plugin-fontsettings │ │ ├── buttons.js │ │ └── website.css ├── node │ └── index.html ├── base │ ├── index.html │ ├── js_tool.html │ ├── css_tool.html │ └── css.html ├── site │ ├── index.html │ ├── rss.html │ └── blog.html ├── index.html ├── react │ └── index.html └── performance │ └── index.html ├── SUMMARY.md ├── README.md ├── react └── README.md ├── performance └── README.md ├── mobile └── README.md └── interview └── README.md /base/README.md: -------------------------------------------------------------------------------- 1 | 罗列了一些有关前端基础知识和工具 2 | 3 | * js 4 | * js_tool 5 | * css 6 | * css_tool -------------------------------------------------------------------------------- /node/README.md: -------------------------------------------------------------------------------- 1 | 2 | 1. [package.json](http://mujiang.info/translation/npmjs/files/package.json.html) 关于package的一些介绍 -------------------------------------------------------------------------------- /site/README.md: -------------------------------------------------------------------------------- 1 | 罗列了一些有关前端方法的网站，主要分下面基类 2 | 3 | 4 | * blog[包括了一些前端的个人博客、前端团队的博客] 5 | * rss[用来订阅的rss内容] 6 | * 其他[一些比较好玩的小站等] -------------------------------------------------------------------------------- /_book/gitbook/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/Front-End-Resource/master/_book/gitbook/images/favicon.ico -------------------------------------------------------------------------------- /_book/gitbook/fonts/fontawesome/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/Front-End-Resource/master/_book/gitbook/fonts/fontawesome/FontAwesome.otf -------------------------------------------------------------------------------- /_book/gitbook/fonts/fontawesome/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/Front-End-Resource/master/_book/gitbook/fonts/fontawesome/fontawesome-webfont.eot -------------------------------------------------------------------------------- /_book/gitbook/fonts/fontawesome/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/Front-End-Resource/master/_book/gitbook/fonts/fontawesome/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /_book/gitbook/fonts/fontawesome/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/Front-End-Resource/master/_book/gitbook/fonts/fontawesome/fontawesome-webfont.woff -------------------------------------------------------------------------------- /_book/gitbook/images/apple-touch-icon-precomposed-152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/Front-End-Resource/master/_book/gitbook/images/apple-touch-icon-precomposed-152.png -------------------------------------------------------------------------------- /site/rss.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 一些订阅的网站 ## 4 | 5 | 1. [Startup News](http://news.dbanotes.net/news)一次偶然的机会发现的，一些不错的IT信息 6 | 2. [Hacker News](https://news.ycombinator.com/news)跟前面的那个很类似，不过是外文的 7 | 3. [html5rocks](http://www.html5rocks.com/en/)国外的一个网站 8 | 4. [lostechies](https://lostechies.com/) 9 | 10 | -------------------------------------------------------------------------------- /base/js_tool.md: -------------------------------------------------------------------------------- 1 | ## JavaScript工具 2 | 3 | 1. [代码高亮highlightjs](https://highlightjs.org/) 4 | 2. [grunt插件开发](http://www.ghugo.com/how-to-create-grunt-plugin/) 5 | 3. [jsnice](http://www.jsnice.org/) 6 | 4. [使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能](http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles) -------------------------------------------------------------------------------- /SUMMARY.md: -------------------------------------------------------------------------------- 1 | * [站点](./site/README.md) 2 | - [博客](./site/blog.md) 3 | - [Rss](./site/rss.md) 4 | - [其他](./site/other.md) 5 | * [react&redux](./react/README.md) 6 | * [node](./node/README.md) 7 | * [基础相关](base/README.md) 8 | - [js](base/js.md) 9 | - [js工具](base/js_tool.md) 10 | - [css](base/css.md) 11 | - [css工具](base/css_tool.md) 12 | * [性能](performance/README.md) 13 | * [移动端](mobile/README.md) 14 | * [面试题](interview/README.md) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Font-End-Resource 2 | ================ 3 | 4 | 收集的一些前端的有关的资源 5 | 6 | 7 | ### 站点 8 | 9 | 1. 博客 (update at 2015.7.13 ) 10 | 2. Rss (update at 2015.7.13 ) 11 | 3. 其他 (update at 2015.7.13 ) 12 | 13 | 14 | ### react & redux 15 | (update at 2016.04.03 ) 16 | 17 | ### node 18 | (update at 2015.7.13 ) 19 | 20 | ### 基础相关 21 | (update at 2015.7.13 ) 22 | 23 | ### 性能 24 | (update at 2015.7.13 ) 25 | 26 | ### 移动端 27 | (update at 2015.7.13 ) 28 | 29 | ### 面试题 30 | gmt_modify : 2014.09.14 31 | 32 | 33 | 其他: [boostrap的一些资源清单](http://tankpt.github.io/2014/05/19/20140519_bootstrap/) -------------------------------------------------------------------------------- /_book/gitbook/plugins/gitbook-plugin-search/search.css: -------------------------------------------------------------------------------- 1 | .book .book-summary .book-search { 2 | padding: 6px; 3 | background: transparent; 4 | position: absolute; 5 | top: -50px; 6 | left: 0px; 7 | right: 0px; 8 | transition: top 0.5s ease; 9 | } 10 | .book .book-summary .book-search input, 11 | .book .book-summary .book-search input:focus, 12 | .book .book-summary .book-search input:hover { 13 | width: 100%; 14 | background: transparent; 15 | border: 1px solid transparent; 16 | box-shadow: none; 17 | outline: none; 18 | line-height: 22px; 19 | padding: 7px 4px; 20 | color: inherit; 21 | } 22 | .book.with-search .book-summary .book-search { 23 | top: 0px; 24 | } 25 | .book.with-search .book-summary ul.summary { 26 | top: 50px; 27 | } 28 | -------------------------------------------------------------------------------- /react/README.md: -------------------------------------------------------------------------------- 1 | # React 2 | 1. [react.createclass vs extends react.component](https://toddmotto.com/react-create-class-versus-component/) 3 | 4 | 5 | ---- 6 | 7 | # Redux 8 | 9 | ## 1. Article 10 | 11 | ### 1.1 Main 12 | 1. [深入到源码：解读 redux 的设计思路与用法 - Div.IO](http://div.io/topic/1309) 13 | 2. [使用Redux管理你的React应用](https://github.com/matthew-sun/blog/issues/18) 14 | 3. [Redux 中文文档](https://github.com/camsong/redux-in-chinese) 15 | 4. [深入浅出Redux中间件](http://blog.kazaff.me/2015/10/09/[%E8%AF%91]Redux%E4%B8%AD%E9%97%B4%E4%BB%B6%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BA/) 16 | 5. [redux的middleware詳解](http://huli.logdown.com/posts/294284-javascript-redux-middleware-details-tutorial) 循序渐进。超级不错的 17 | 6. [UNIDIRECTIONAL USER INTERFACE ARCHITECTURES](http://staltz.com/unidirectional-user-interface-architectures.html) 单向用户接口架构 介绍了很多框架的概览 [中文版请点击](http://adoyle.me/blog/unidirectional-user-interface-architectures.html) 18 | 19 | ### 1.2 relative 20 | 1. [Presentational and Container Components](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.xukl7mfhg) 21 | 22 | 23 | ## 2. Demo 24 | 1. [React Redux Example](http://react-redux.herokuapp.com/) 25 | 26 | -------------------------------------------------------------------------------- /site/blog.md: -------------------------------------------------------------------------------- 1 | ## 一些前端相关blog 2 | （排名部分先后～～） 3 | 4 | 1. [司徒正美](http://www.cnblogs.com/rubylouvre/) 5 | 2. [沫鱼](http://www.cnblogs.com/mofish/) 6 | 3. [汤姆大叔的博客](http://www.cnblogs.com/TomXu/) 对js有些东西讲的相当不错 7 | 4. [老赵](http://blog.zhaojie.me/front-end/) 微博上各种黑～～不过知识面真是大 8 | 5. [丸子](http://i.wanz.im/) 用sublime text2激活过程中搜到的 9 | 6. [justjavac(迷渡) ](http://justjavac.com/) 10 | 7. [下一站永远](http://www.cnblogs.com/softlover/) 挺久没更新了。不过内容不错的 11 | 8. [tonyte](http://www.webcjs.com/) 12 | 9. [小胡子哥](http://barretlee.com/) 13 | 10. [颜海镜](http://yanhaijing.com/) 14 | 11. [张鑫旭](http://www.zhangxinxu.com/wordpress/) 你会看到网上搜到很多css的东西都是会到他这边，css研究很多 15 | 12. [堂主](http://www.osmn00.com/) 16 | 13. [阮一峰](http://www.ruanyifeng.com/blog/) 17 | 14. [雨夜带刀](http://stylechen.com/)最近发现的。文章不多，但是写得都有不错 18 | 15. [勾三股四](http://jiongks.name/) 19 | 16. [糖伴西红柿](http://gaowhen.com/) 经常看到这个头像。 20 | 17. [贺师俊](http://hax.iteye.com/) 21 | 18. [doyoe](http://www.doyoe.com/) 超级棒 22 | 19. [张克军](http://hikejun.com/blog/) 23 | 20. [winter](http://winter-cn.cnblogs.com/) 24 | 21. [cssforest](http://blog.cssforest.org/) 25 | 22. [Franky](http://www.cnblogs.com/_franky/) 26 | 23. [周文彬](http://www.zhouwenbin.com/) 这个要支持。。看过很多他的东西不错 27 | 24. [叶小钗](http://www.cnblogs.com/yexiaochai) 28 | 29 | ## 前端团队的博客 30 | 31 | 1. [百度EFE](http://efe.baidu.com/) 32 | -------------------------------------------------------------------------------- /base/css_tool.md: -------------------------------------------------------------------------------- 1 | ## css工具 2 | 3 | 1. [天气的图标](http://darkskyapp.github.io/skycons/) 4 | 2. [icomoon矢量图标](https://icomoon.io/) 5 | 3. [制作css　loading的网站](http://cssload.net/) 6 | 4. [Hover.css](http://ianlunn.github.io/Hover/)各种css的hover 7 | 5. [CSS3 Click Chart](http://css3clickchart.com/) 8 | 6. [iHover](http://gudh.github.io/ihover/dist/index.html) 9 | 7. [Creative Button Styles](http://tympanus.net/Development/CreativeButtons/) 10 | 8. [connoratherton](http://connoratherton.com/) 11 | 9. [anicollection](http://anicollection.github.io/#/)列举了很多css3的动画 12 | 10. [The Shapes of CSS](https://css-tricks.com/examples/ShapesOfCSS/)列举了很多用css完成的类似三角形或者心形 13 | 11. [Single Element CSS Spinners](http://projects.lukehaas.me/css-loaders/)又是一些css loading状态 14 | 12. [Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/)渐变的css生成 15 | 13. [三角形](http://apps.eky.hk/css-triangle-generator/zh-hant) 16 | 14. [图片转ico格式](http://www.favicongenerator.com/) 17 | 15. [cssmenumaker](http://cssmenumaker.com/) 18 | 16. [18 CSS Effect Libraries for Creating Beautiful Animations](https://codegeekz.com/css-effect-libraries-creating-beautiful-animations/)18个css动画的介绍 19 | 17. [Old Browser CSS Hacks](http://www.frontendevelopers.com/old-browser-css-hacks/) 20 | 21 | 22 | ## 手册 23 | 1. [CSS参考手册](http://css.doyoe.com/) 24 | 2. [The Ultimate Guide to CSS](https://www.campaignmonitor.com/css/) 25 | 26 | -------------------------------------------------------------------------------- /base/css.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 一些有关css的中间收集的不错的文章，也许有些会因为时间久了失效 4 | 5 | # 博文 6 | 7 | ## 文本属性 8 | 1. [网页行内排版二三事](http://mzhou.me/article/95491/) 9 | 2. [CSS行高与行对齐精解：line-height 和 vertical-align](http://www.360doc.com/content/10/0119/15/203871_14009121.shtml) 10 | 11 | ### 有关水平/垂直居中 12 | 1. [整理：子容器垂直居中于父容器的方案](http://blog.segmentfault.com/humphry/1190000000381042)　整理的超级不错 13 | 2. [CSS实现垂直居中的5种方法](http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html) 14 | 3. [Centering in CSS: A Complete Guide](http://css-tricks.com/centering-css-complete-guide/)国外的，真是整理的超级牛逼 15 | 4. [由浅入深漫谈margin属性](http://www.planabc.net/2007/03/18/css_attribute_margin/)有关于magin的解析 16 | 5. [不要告诉我你懂margin](http://www.hicss.net/do-not-tell-me-you-understand-margin/) 同4 17 | 18 | ### 其他css 19 | 1. [css选择器的性能问题](http://www.w3cplus.com/css/css-selector-performance) 看完之后顿时跟以前的想法反了 20 | 2. [纯CSS气泡框实现方法探究](http://lyj86.iteye.com/blog/1915009) 21 | 3. [伪类和伪元素区别](http://swordair.com/origin-and-difference-between-css-pseudo-classes-and-pseudo-elements/) 挺不错的。涨知识了，原来以前叫的都是错误的东西 22 | 4. [浅谈html语义化](http://m.oschina.net/blog/135743) 23 | 5. [编写可维护的CSS](http://segmentfault.com/a/1190000000388784) 24 | 6. [有关拟写高效CSS的文章](http://css-tricks.com/efficiently-rendering-css/) 25 | 7. [黑科技loading-css-without-blocking-render](http://keithclark.co.uk/articles/loading-css-without-blocking-render/) 26 | 8. [bootstrap关于一些规范的文章](http://codeguide.bootcss.com/) 27 | 9. [About normalize.css](http://nicolasgallagher.com/about-normalize-css/) 28 | 10. [Dawn CSS Reset](http://www.cnblogs.com/mingelz/archive/2009/08/12/dawn-css-reset.html)一些常见的css reset的对比 29 | 11. [csswg](https://wiki.csswg.org/spec)CSS 规范都可以在这里归类找到 30 | 12. [Demos of open web technologies](https://developer.mozilla.org/en-US/docs/Web/Demos_of_open_web_technologies) 31 | 32 | ## Sass 33 | 1. [保持Sass的简单](http://www.w3cplus.com/preprocessor/keep-sass-simple.html) 34 | 35 | # 教程 36 | 1. [学习css布局](http://zh.learnlayout.com/) -------------------------------------------------------------------------------- /performance/README.md: -------------------------------------------------------------------------------- 1 | performance 2 | ================ 3 | 4 | ## 测试工具 5 | 1. [阿里测](http://alibench.com/) 6 | 2. [百度应用性能监测中心](http://developer.baidu.com/apm/) 7 | 3. [webpagetest](http://www.webpagetest.org/) 8 | 4. [奇云测](http://ce.cloud.360.cn/) 9 | 5. [12 个最好的免费网站速度和性能测试工具](http://segmentfault.com/a/1190000000447171) 10 | 6. [Web页面性能测试工具浅析](http://www.cnblogs.com/fo0ol/p/3297054.html) 11 | 12 | 13 | ## css性能 14 | 1. [csstrigger](http://csstriggers.com/) 15 | 2. [CSS Test Creator](http://stevesouders.com/efws/css-selectors/csscreate.php) 16 | 3. [CSScomb](http://csscomb.com/)对写的css代码进行优化，仅仅是顺序优化，但是对压缩的结果会有影响 17 | 4. [uncss](https://github.com/giakki/uncss)将无用的css移除 18 | 5. [Css shrink](http://cssshrink.com/)css的高级压缩 19 | 6. [StyleStats](http://www.stylestats.org/)评价css的一个网站 20 | 7. [TestMyCSS: Optimize and Check Your CSS Performance](http://www.testmycss.com/)测试css的性能 21 | 8. [个站 CSS 性能优化](http://xinranliu.me/2014-09-27-css-performance-tooling/) 22 | 9. [拆分关键CSS(Critical CSS)](http://xinranliu.me/2014-07-29-%E6%8B%86%E5%88%86Critical-CSS/) 23 | 10. [Authoring Critical Above-the-Fold CSS](https://css-tricks.com/authoring-critical-fold-css/) 24 | 25 | ##　其他文章 26 | 1. [移动前端系列 — 移动页面性能优化](http://www.jingwentian.com/t-526) 27 | 2. [Yahoo前端优化性能规则](http://segmentfault.com/a/1190000000735395) 28 | 3. [After Yahoo 34 Rules -- 网站性能优化新进展](http://www.slideshare.net/leneli/after-yahoo-34-rules-5088505) 29 | 4. [移动H5前端性能优化指南](http://www.jingwentian.com/t-533) 30 | 5. [前端优化](http://dbanotes.net/web-performance)分的挺详细的 31 | 6. [webapp的优化整理](http://www.cnblogs.com/yexiaochai/p/3759959.html) 32 | 7. [前端性能指南](http://browserdiet.com/zh/)一个国外的整理的，这个是中文版的，很形象 33 | 8. [关于浏览器并发数的那些事儿](http://www.cnblogs.com/zldream1106/p/parallelize_downloads_across_hostnames.html) 34 | 9. [Optimizing Page Load Time](http://www.die.net/musings/page_load_time/) 35 | 10. [Maximizing Parallel Downloads in the Carpool Lane](http://yuiblog.com/blog/2007/04/11/performance-research-part-4/) 36 | 11. [载入页面时使用多域名实现资源并行下载](http://wzfjesun.blog.163.com/blog/static/14245693920124148239436/) 37 | 12. [优化性能](https://developers.google.com/web/fundamentals/performance/index?hl=zh-cn)谷歌的性能优化指南。看完还是有很多启发的 -------------------------------------------------------------------------------- /site/other.md: -------------------------------------------------------------------------------- 1 | 2 | ## 一些小站 3 | 4 | 1. [JavaScript秘密花园](http://sanshi.me/articles/JavaScript-Garden-CN/html/#intro) 一些语法糖的细节 5 | 2. [JavaScript 标准参考教程（alpha）](http://javascript.ruanyifeng.com/) 阮一峰老师整理的一个js的有关东西，挺好的 6 | 3. [BROWSERHACKS](http://browserhacks.com/)**一个给出了很多hack方法的网站** 7 | 4. [列举了各种js库的网站，超级超级好](http://www.javascripting.com/) 8 | 5. [前端外刊评论](http://zhuanlan.zhihu.com/FrontendMagazine) 9 | 6. [前端知识体系](http://ecomfe.duapp.com/) 基本是一个手册了由Baidu EFE team创建的 10 | 7. [前端社区导航](http://whycss.com/) 11 | 8. [Web前端实验室](http://demo.doyoe.com/) 12 | 9. [browserscope](http://www.browserscope.org/)列举了很多浏览器的特性对比 13 | 10. [Web技术研究所](http://www.web-tinker.com/) 14 | 11. [w3ctech](http://www.w3ctech.com/) 15 | 12. [web performance today](http://www.webperformancetoday.com/)很多介绍性能的网站 16 | 13. [列举了很多的类库](https://www.awesomes.cn/) 17 | 18 | 19 | 20 | ## 随便看看 21 | 22 | 1. [浏览器开发工具的秘密](http://jinlong.github.io/blog/2013/08/29/devtoolsecrets/) 23 | 2. [浅谈HTTP中Get与Post的区别](http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html) 24 | 3. [HTTP常见错误返回代码](http://jackface.iteye.com/blog/2090184) 25 | 4. [正则表达式的入门](http://deerchao.net/tutorials/regex/regex.htm#mission) 26 | 5. [55分钟学会正则表达式(译)](http://doslin.com/learn-regular-expressions-in-about-55-minutes/) 27 | 6. [XSS 前端防火墙——内联事件拦截](http://fex.baidu.com/blog/2014/06/xss-frontend-firewall-1/) 28 | 7. [关于js float类型的一些问题](http://blog.chewxy.com/2014/02/24/what-every-javascript-developer-should-know-about-floating-point-numbers/) 29 | 8. [前端的各种转义](https://github.com/FrankFang/githublog/blob/master/%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF%E7%9A%84%E5%90%84%E7%A7%8D%E8%BD%AC%E4%B9%89.md) 30 | 9. [语义化版本 2.0.0](http://semver.org/lang/zh-CN/) 31 | 10. [DOM Core](http://quirksmode.org/dom/core/) 32 | 11. [根本原因内容列表](http://w3help.org/zh-cn/causes/) 33 | 12. [The Database of JavaScript Libraries](http://www.javascripting.com/) 34 | 13. [XSS Filter Evasion Cheat Sheet](https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet#Tests) 35 | 14. [species-in-pieces](http://species-in-pieces.com/?utm_source=CSS-Weekly&utm_campaign=Issue-155&utm_medium=web#)掉渣天的动画 36 | 15. [在线工具](http://tool.lu/) 37 | 38 | 最后在引用知乎上的一个链接～ 39 | [前端开发领域有哪些值得推荐的问答？](http://www.zhihu.com/question/20246142/answer/14470387) -------------------------------------------------------------------------------- /_book/gitbook/plugins/gitbook-plugin-sharing/buttons.js: -------------------------------------------------------------------------------- 1 | require(["gitbook", "lodash"], function(gitbook, _) { 2 | var SITES = { 3 | 'facebook': { 4 | 'label': 'Facebook', 5 | 'icon': 'fa fa-facebook', 6 | 'onClick': function(e) { 7 | e.preventDefault(); 8 | window.open("http://www.facebook.com/sharer/sharer.php?s=100&p[url]="+encodeURIComponent(location.href)); 9 | } 10 | }, 11 | 'twitter': { 12 | 'label': 'Twitter', 13 | 'icon': 'fa fa-twitter', 14 | 'onClick': function(e) { 15 | e.preventDefault(); 16 | window.open("http://twitter.com/home?status="+encodeURIComponent(document.title+" "+location.href)); 17 | } 18 | }, 19 | 'google': { 20 | 'label': 'Google+', 21 | 'icon': 'fa fa-google-plus', 22 | 'onClick': function(e) { 23 | e.preventDefault(); 24 | window.open("https://plus.google.com/share?url="+encodeURIComponent(location.href)); 25 | } 26 | }, 27 | 'weibo': { 28 | 'label': 'Weibo', 29 | 'icon': 'fa fa-weibo', 30 | 'onClick': function(e) { 31 | e.preventDefault(); 32 | window.open("http://service.weibo.com/share/share.php?content=utf-8&url="+encodeURIComponent(location.href)+"&title="+encodeURIComponent(document.title)); 33 | } 34 | }, 35 | 'instapaper': { 36 | 'label': 'Instapaper', 37 | 'icon': 'fa fa-instapaper', 38 | 'onClick': function(e) { 39 | e.preventDefault(); 40 | window.open("http://www.instapaper.com/text?u="+encodeURIComponent(location.href)); 41 | } 42 | }, 43 | 'vk': { 44 | 'label': 'VK', 45 | 'icon': 'fa fa-vk', 46 | 'onClick': function(e) { 47 | e.preventDefault(); 48 | window.open("http://vkontakte.ru/share.php?url="+encodeURIComponent(location.href)); 49 | } 50 | } 51 | }; 52 | 53 | 54 | 55 | gitbook.events.bind("start", function(e, config) { 56 | var opts = config.sharing; 57 | 58 | // Create dropdown menu 59 | var menu = _.chain(opts.all) 60 | .map(function(id) { 61 | var site = SITES[id]; 62 | 63 | return { 64 | text: site.label, 65 | onClick: site.onClick 66 | }; 67 | }) 68 | .compact() 69 | .value(); 70 | 71 | // Create main button with dropdown 72 | if (menu.length > 0) { 73 | gitbook.toolbar.createButton({ 74 | icon: 'fa fa-share-alt', 75 | label: 'Share', 76 | position: 'right', 77 | dropdown: [menu] 78 | }); 79 | } 80 | 81 | // Direct actions to share 82 | _.each(SITES, function(site, sideId) { 83 | if (!opts[sideId]) return; 84 | 85 | gitbook.toolbar.createButton({ 86 | icon: site.icon, 87 | label: site.text, 88 | position: 'right', 89 | onClick: site.onClick 90 | }); 91 | }); 92 | }); 93 | }); 94 | -------------------------------------------------------------------------------- /_book/gitbook/plugins/gitbook-plugin-highlight/ebook.css: -------------------------------------------------------------------------------- 1 | pre, 2 | code { 3 | /* http://jmblog.github.io/color-themes-for-highlightjs */ 4 | /* Tomorrow Comment */ 5 | /* Tomorrow Red */ 6 | /* Tomorrow Orange */ 7 | /* Tomorrow Yellow */ 8 | /* Tomorrow Green */ 9 | /* Tomorrow Aqua */ 10 | /* Tomorrow Blue */ 11 | /* Tomorrow Purple */ 12 | } 13 | pre .hljs-comment, 14 | code .hljs-comment, 15 | pre .hljs-title, 16 | code .hljs-title { 17 | color: #8e908c; 18 | } 19 | pre .hljs-variable, 20 | code .hljs-variable, 21 | pre .hljs-attribute, 22 | code .hljs-attribute, 23 | pre .hljs-tag, 24 | code .hljs-tag, 25 | pre .hljs-regexp, 26 | code .hljs-regexp, 27 | pre .ruby .hljs-constant, 28 | code .ruby .hljs-constant, 29 | pre .xml .hljs-tag .hljs-title, 30 | code .xml .hljs-tag .hljs-title, 31 | pre .xml .hljs-pi, 32 | code .xml .hljs-pi, 33 | pre .xml .hljs-doctype, 34 | code .xml .hljs-doctype, 35 | pre .html .hljs-doctype, 36 | code .html .hljs-doctype, 37 | pre .css .hljs-id, 38 | code .css .hljs-id, 39 | pre .css .hljs-class, 40 | code .css .hljs-class, 41 | pre .css .hljs-pseudo, 42 | code .css .hljs-pseudo { 43 | color: #c82829; 44 | } 45 | pre .hljs-number, 46 | code .hljs-number, 47 | pre .hljs-preprocessor, 48 | code .hljs-preprocessor, 49 | pre .hljs-pragma, 50 | code .hljs-pragma, 51 | pre .hljs-built_in, 52 | code .hljs-built_in, 53 | pre .hljs-literal, 54 | code .hljs-literal, 55 | pre .hljs-params, 56 | code .hljs-params, 57 | pre .hljs-constant, 58 | code .hljs-constant { 59 | color: #f5871f; 60 | } 61 | pre .ruby .hljs-class .hljs-title, 62 | code .ruby .hljs-class .hljs-title, 63 | pre .css .hljs-rules .hljs-attribute, 64 | code .css .hljs-rules .hljs-attribute { 65 | color: #eab700; 66 | } 67 | pre .hljs-string, 68 | code .hljs-string, 69 | pre .hljs-value, 70 | code .hljs-value, 71 | pre .hljs-inheritance, 72 | code .hljs-inheritance, 73 | pre .hljs-header, 74 | code .hljs-header, 75 | pre .ruby .hljs-symbol, 76 | code .ruby .hljs-symbol, 77 | pre .xml .hljs-cdata, 78 | code .xml .hljs-cdata { 79 | color: #718c00; 80 | } 81 | pre .css .hljs-hexcolor, 82 | code .css .hljs-hexcolor { 83 | color: #3e999f; 84 | } 85 | pre .hljs-function, 86 | code .hljs-function, 87 | pre .python .hljs-decorator, 88 | code .python .hljs-decorator, 89 | pre .python .hljs-title, 90 | code .python .hljs-title, 91 | pre .ruby .hljs-function .hljs-title, 92 | code .ruby .hljs-function .hljs-title, 93 | pre .ruby .hljs-title .hljs-keyword, 94 | code .ruby .hljs-title .hljs-keyword, 95 | pre .perl .hljs-sub, 96 | code .perl .hljs-sub, 97 | pre .javascript .hljs-title, 98 | code .javascript .hljs-title, 99 | pre .coffeescript .hljs-title, 100 | code .coffeescript .hljs-title { 101 | color: #4271ae; 102 | } 103 | pre .hljs-keyword, 104 | code .hljs-keyword, 105 | pre .javascript .hljs-function, 106 | code .javascript .hljs-function { 107 | color: #8959a8; 108 | } 109 | pre .hljs, 110 | code .hljs { 111 | display: block; 112 | background: white; 113 | color: #4d4d4c; 114 | padding: 0.5em; 115 | } 116 | pre .coffeescript .javascript, 117 | code .coffeescript .javascript, 118 | pre .javascript .xml, 119 | code .javascript .xml, 120 | pre .tex .hljs-formula, 121 | code .tex .hljs-formula, 122 | pre .xml .javascript, 123 | code .xml .javascript, 124 | pre .xml .vbscript, 125 | code .xml .vbscript, 126 | pre .xml .css, 127 | code .xml .css, 128 | pre .xml .hljs-cdata, 129 | code .xml .hljs-cdata { 130 | opacity: 0.5; 131 | } 132 | -------------------------------------------------------------------------------- /_book/gitbook/plugins/gitbook-plugin-search/search.js: -------------------------------------------------------------------------------- 1 | require([ 2 | "gitbook", 3 | "lodash" 4 | ], function(gitbook, _) { 5 | var index = null; 6 | var $searchInput, $searchForm; 7 | 8 | // Use a specific index 9 | function loadIndex(data) { 10 | index = lunr.Index.load(data); 11 | } 12 | 13 | // Fetch the search index 14 | function fetchIndex() { 15 | $.getJSON(gitbook.state.basePath+"/search_index.json") 16 | .then(loadIndex); 17 | } 18 | 19 | // Search for a term and return results 20 | function search(q) { 21 | if (!index) return; 22 | 23 | var results = _.chain(index.search(q)) 24 | .map(function(result) { 25 | var parts = result.ref.split("#") 26 | return { 27 | path: parts[0], 28 | hash: parts[1] 29 | } 30 | }) 31 | .value(); 32 | 33 | return results; 34 | } 35 | 36 | // Create search form 37 | function createForm(value) { 38 | if ($searchForm) $searchForm.remove(); 39 | 40 | $searchForm = $('
', { 41 | 'class': 'book-search', 42 | 'role': 'search' 43 | }); 44 | 45 | $searchInput = $('', { 46 | 'type': 'text', 47 | 'class': 'form-control', 48 | 'val': value, 49 | 'placeholder': 'Type to search' 50 | }); 51 | 52 | $searchInput.appendTo($searchForm); 53 | $searchForm.prependTo(gitbook.state.$book.find('.book-summary')); 54 | } 55 | 56 | // Return true if search is open 57 | function isSearchOpen() { 58 | return gitbook.state.$book.hasClass("with-search"); 59 | } 60 | 61 | // Toggle the search 62 | function toggleSearch(_state) { 63 | if (isSearchOpen() === _state) return; 64 | 65 | gitbook.state.$book.toggleClass("with-search", _state); 66 | 67 | // If search bar is open: focus input 68 | if (isSearchOpen()) { 69 | gitbook.sidebar.toggle(true); 70 | $searchInput.focus(); 71 | } else { 72 | $searchInput.blur(); 73 | $searchInput.val(""); 74 | gitbook.sidebar.filter(null); 75 | } 76 | } 77 | 78 | // Recover current search when page changed 79 | function recoverSearch() { 80 | var keyword = gitbook.storage.get("keyword", ""); 81 | 82 | createForm(keyword); 83 | 84 | if (keyword.length > 0) { 85 | if(!isSearchOpen()) { 86 | toggleSearch(); 87 | } 88 | gitbook.sidebar.filter(_.pluck(search(keyword), "path")); 89 | } 90 | }; 91 | 92 | 93 | gitbook.events.bind("start", function(config) { 94 | // Pre-fetch search index and create the form 95 | fetchIndex(); 96 | createForm(); 97 | 98 | // Type in search bar 99 | $(document).on("keyup", ".book-search input", function(e) { 100 | var key = (e.keyCode ? e.keyCode : e.which); 101 | var q = $(this).val(); 102 | 103 | if (key == 27) { 104 | e.preventDefault(); 105 | toggleSearch(false); 106 | return; 107 | } 108 | if (q.length == 0) { 109 | gitbook.sidebar.filter(null); 110 | gitbook.storage.remove("keyword"); 111 | } else { 112 | var results = search(q); 113 | gitbook.sidebar.filter( 114 | _.pluck(results, "path") 115 | ); 116 | gitbook.storage.set("keyword", q); 117 | } 118 | }); 119 | 120 | // Create the toggle search button 121 | gitbook.toolbar.createButton({ 122 | icon: 'fa fa-search', 123 | label: 'Search', 124 | position: 'left', 125 | onClick: toggleSearch 126 | }); 127 | 128 | // Bind keyboard to toggle search 129 | gitbook.keyboard.bind(['f'], toggleSearch) 130 | }); 131 | 132 | gitbook.events.bind("page.change", recoverSearch); 133 | }); 134 | 135 | 136 | -------------------------------------------------------------------------------- /mobile/README.md: -------------------------------------------------------------------------------- 1 | mobile 2 | ================ 3 | 4 | ## 一. 移动web基础 5 | ### 1.1 关于viewport 6 | 1. [两个viewport的故事（第一部分）](http://weizhifeng.net/viewports.html) 7 | 2. [A tale of two viewports — part one](http://www.quirksmode.org/mobile/viewports.html) 8 | 3. [两个viewport的故事（第二部分）](http://weizhifeng.net/viewports2.html) 9 | 4. [A tale of two viewports — part two](http://www.quirksmode.org/mobile/viewports2.html) 10 | 5. [不是像素的像素不是像素](http://weizhifeng.net/a-pixel-is-not.html) 11 | 6. [两个viewport的故事(二)](http://www.html5dw.com/story-of-two-viewport-part-ii/) 感觉这个版本说的不错．貌似比３好 12 | 7. [csdn 上一个博主关于viewport的整理](http://blog.csdn.net/zhchaoo/article/details/8851394)　分了四篇，前两篇同上，后面两篇不错，可以看看，第四篇貌似加了浏览器底层的原理来介绍；第三篇介绍的是关于position:fix的问题 13 | 8. [此像素非彼像素](http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html)其实跟文章5一样，只不过这里还有译者的一些理解 14 | 9. [Viewport](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html)在苹果官方文档上有关viewport的介绍 15 | 10. [关于两个viewport的答案](http://stackoverflow.com/questions/6333927/difference-between-visual-viewport-and-layout-viewport) 16 | 17 | ### 1.2 字体 18 | 1. [关于webapp中的文字单位的一些捣腾](http://www.html-js.com/article/2400) 19 | 2. [网页字体设置你了解吗？](http://ued.ctrip.com/blog/?p=3589) 20 | 3. [html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式](http://www.cnblogs.com/willian/p/3573353.html) 21 | 4. [IOS、Android、WP移动平台浏览器下常用字体支持度研究](http://www.elonglau.com/119.html) 22 | 23 | 24 | ### 1.3 其他 25 | 1. [移动开发的那些事](http://qingbob.com/RWD-things-about-pixel/) 26 | 2. [DESIGNER'S GUIDE TO DPI](https://github.com/yeol/blog/blob/master/Designer's_guide_to_DPI.md)说的挺详细的，赞 27 | 3. [Retina显示原理探索](http://librajt.github.io/2013/04/03/retina-display/) 28 | 4. [设备像素比devicePixelRatio简单介绍](http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/) 29 | 30 | 31 | ## 二、方案 32 | 1. [Developing Mobile Web Apps: When, Why, and How](http://www.toptal.com/android/developing-mobile-web-apps-when-why-and-how) 33 | 2. CSS中的rem[Font Size Idea: px at the Root, rem for Components, em for Text Elements](http://css-tricks.com/rems-ems/) 34 | 3. [手机淘宝的flexible设计与实现](http://www.html-js.com/article/2402)这个不错，自己做过demo实现，效果很不错 35 | 4. [浅谈移动前端的最佳实践](http://www.cnblogs.com/yexiaochai/p/4219523.html) 36 | 5. [无线Web开发经验谈](http://am-team.github.io/amg/dev-exp-doc.html)推荐，强烈推荐、非常推荐，支付宝那边整理的 37 | 6. [移动开发规范概述](http://alloyteam.github.io/Spirit/modules/Standard/index.html) 38 | 7. [移动端资料/框架/文章 整合](https://www.zybuluo.com/yyman001/note/78552) 39 | 40 | ## 三、工具 41 | 1. [移动端前端开发调试](http://yujiangshui.com/multidevice-frontend-debug/) 42 | 2. [移动设备支持的Api](https://whatwebcando.today/?utm_source=jsgoup) 43 | 44 | 45 | ## 四、参考案例 46 | 1. [app.ft](http://app.ft.com/index_page/home) 47 | 2. [腾讯应用中心](http://a.myapp.com/h/?sid=AWOzn3VaoRxXzO0HmTE-Vktk&g_f=-1#) 48 | 3. [搜狐直播大厅](http://zhibo.m.sohu.com/) 49 | 4. [爱奇艺](http://m.iqiyi.com/index.html?tjsrc=20140714_3004) 50 | 5. [淘宝触屏版](http://h5.m.taobao.com/) 51 | 52 | ## 五、问题 53 | 1. [Mobile Web 开发之百味良药](http://segmentfault.com/a/1190000000339907) 54 | 2. [记mobile web曾经的踩过坑](http://www.html-js.com/article/2278) 55 | 3. [Zepto 使用中的一些注意点](http://chaoskeh.com/blog/some-experience-of-using-zepto.html)注意官网下载的不含有touch模块需要自己build 56 | 57 | 58 | ## 其他 59 | 60 | 1. [原生App vs 移动WebApp](http://www.oschina.net/translate/native-app-vs-mobile-web-app-comparison) 61 | 2. [为什么移动Web应用程序很慢（译）](http://www.cnblogs.com/codemood/p/3213459.html) 62 | 3. [Mobile: Native Apps, Web Apps, and Hybrid Apps](http://www.nngroup.com/articles/mobile-native-apps/) 63 | 4. [wiki](http://en.wikipedia.org/wiki/Mobile_Web) 64 | 5. [w3c](http://www.w3.org/2014/07/mobile-web-app-state/) 65 | 6. [13 essential programming tools for the mobile Web](http://www.infoworld.com/article/2621943/mobile-development/13-essential-programming-tools-for-the-mobile-web.html) 66 | 7. [Build Your Own Web or Mobile App In Minutes With These Cloud Based Tools](http://www.forbes.com/sites/reuvencohen/2013/03/22/build-your-own-web-or-mobile-app-in-minutes-with-these-cloud-based-tools/) 67 | 8. [2015年重视移动端性能的11个理由](http://www.w3ctech.com/topic/781) 68 | 9. [WebAPP与原生APP的交互设计区别](http://www.jianshu.com/p/7c0eac6070b5) 69 | 10. [译文关于移动Web性能的5个神话](http://tech.uc.cn/?p=2013) 70 | 11. [为什么移动Web应用程序很慢（译）](http://www.cnblogs.com/codemood/p/3213459.html) 71 | 12. [Mobile Web App vs. Native App? It's Complicated](http://www.forbes.com/sites/fredcavazza/2011/09/27/mobile-web-app-vs-native-app-its-complicated/) 72 | 13. [Native App vs. Web App: Which Is Better for Mobile Commerce?](http://mashable.com/2011/05/23/mobile-commerce-apps/) -------------------------------------------------------------------------------- /base/js.md: -------------------------------------------------------------------------------- 1 | 2 | ## 一、ECMAScript 3 | ### 1.1 this 4 | 1. [javascript的动态this与动态绑定](http://www.cnblogs.com/rubylouvre/archive/2009/11/13/1602122.html) 5 | 2. [Javascript的this用法](http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html) 6 | 3. [详解JavaScript中的this](http://foocoder.com/blog/xiang-jie-javascriptzhong-de-this.html/) 7 | 4. [understanding-keyword-javascript](http://www.phloxblog.in/understanding-keyword-javascript/#.U1XjPfmSx5h) 8 | 9 | ### 1.2 闭包 10 | 1. [学习Javascript闭包（Closure）](http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html) 11 | 2. [javascript深入理解js闭包](http://blog.csdn.net/qq545923664/article/details/17162711) 12 | 13 | ### 1.3 promise 14 | 1. [JavaScript Promises](http://www.html5rocks.com/zh/tutorials/es6/promises/#toc-async)讲的挺详细的，感觉不错，算是比较通俗易懂的文章了 15 | 2. [JavaScript Promise启示录](http://blog.segmentfault.com/dmyang/1190000000492290) 16 | 3. [pomise](https://www.promisejs.org/) 17 | 4. [JavaScript Promise迷你书](http://liubin.github.io/promises-book/) 18 | 19 | ## 二、javascript DOM 20 | 21 | ### 其他 22 | 1. [innerText和textContent的一些区别](http://stackoverflow.com/questions/19030742/difference-between-innertext-and-innerhtml-in-javascript)　　讲解的超级不错 23 | 2. [事件触发器](http://stylechen.com/trigger.html)　有关于事件的触发 24 | 25 | 26 | ## 三、javascript BOM 27 | 28 | - - - 29 | 30 | ### 3.1 Js 定时器 31 | 1. [JavaScript Event Loop 浅析](http://heroicyang.com/2012/08/28/javascript-event-loop/) 有关js的event loop的 32 | 2. [理解JavaScript定时器：setTimeout和setInterval](http://heroicyang.com/2012/09/06/javascript-timers/) js中定时器的一点细节 33 | 3. [setTimeout()和setInterval() 何时被调用执行](http://www.cnblogs.com/dolphinX/archive/2013/04/05/2784933.html) 34 | 4. [setTimeout和setInterval的区别](http://www.jb51.net/article/26679.htm) 35 | 5. [How JavaScript Timers Work](http://ejohn.org/blog/how-javascript-timers-work/)中文版 36 | 6. [How JavaScript Timers Work](http://www.cnitblog.com/asfman/articles/55714.html)翻译版 37 | 7. [Understanding timers: setTimeout and setInterval](http://javascript.info/tutorial/settimeout-setinterval)同是讲定时器的问题的，图文并茂，还是不错的 38 | 39 | ### 3.2 usagent 40 | 1. [浏览器的用户代理字符串](http://www.cnblogs.com/zoho/archive/2012/04/06/2434777.html) 41 | 2. [用户代理检测](http://csspod.com/archives/user-agent-detection) 42 | 43 | ### 3.3 js跨域 44 | 1. [JSONProxy](https://jsonp.nodejitsu.com/) 一个jsonp的代理 45 | 2. [jsonp](http://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/) 46 | 3. [Javascript跨域详解(1)](http://rolfzhang.com/articles/346.html) 47 | 4. [JavaScript跨域详解(2)](http://rolfzhang.com/articles/380.html) 48 | 5. [window.name实现的跨域数据传输](http://www.cnblogs.com/rainman/archive/2011/02/21/1960044.html) 49 | 6. [JavaScript跨域总结与解决办法](http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html) 50 | 7. [前端解决跨域问题的8种方案](http://blog.csdn.net/tankpt/article/details/20463571) 51 | 8. [跨域请求之jQuery的ajax jsonp的使用解惑](http://www.cnblogs.com/know/archive/2011/10/09/2204005.html) 52 | 9. [深入浅出JSONP--解决ajax跨域问题](http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html) 53 | 10. [SON和JSONP](http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html) 54 | 11. [跨域的理解与实现](http://www.nowamagic.net/ajax/ajax_KonwHowToCrossDomain.php) 55 | 56 | ## 四、其他 57 | ### 4.1 模块 58 | 1. [AMD (中文版)](https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)) 59 | 60 | ### 4.2 重绘重排 61 | 1. [浏览器的重绘(repaints)与重排(reflows)](http://www.css88.com/archives/4991) 62 | 2. [页面重绘和回流以及优化](http://www.css88.com/archives/4996) 63 | 64 | 65 | ### 4.3 Web Components 66 | 1. [A Guide to Web Components](http://css-tricks.com/modular-future-web-components/) 介绍 Web Components 貌似现在比较流行 67 | 2. [Web Components 初探](http://blog.dayanjia.com/2014/06/web-components-introduction/) 写的不错通俗易懂 68 | 69 | ### 4.4 浏览器的原理 70 | 1. [答寒冬九问之讲讲输入完网址按下回车，到看到网页这个过程中发生了什么。](http://www.cnblogs.com/dojo-lzz/p/3983335.html) 回答的比较偏向于前端这边页面的呈现过程 71 | 2. [How browsers work](http://taligarsiel.com/Projects/howbrowserswork1.htm) 72 | 3. [How browsers work中文翻译](http://www.w3ccafe.com/355.html) 73 | 74 | ### 4.5 前端MVC框架 75 | 1. [todomvc](http://todomvc.com/)列举了很多MVC框架实现todo例子的代码 76 | 2. [12种JavaScript MVC框架之比较](http://www.infoq.com/cn/news/2012/05/js-mvc-framework/) 77 | 3. [JavaScript MVC框架PK：Angular、Backbone、CanJS与Ember](http://www.ituring.com.cn/article/38394)图灵社区里的一篇文章 78 | 4. [JavaScript MVC 框架技术选型](http://segmentfault.com/a/1190000000379723) 79 | 5. [Model-View-Controller (MVC) with JavaScript](http://alexatnet.com/articles/model-view-controller-mvc-javascript) 80 | 6. [JavaScript MVC 框架比较](http://inching.org/2014/03/18/javascript-mvc/)一位博主的整理，很全，参考的文章也很多 81 | 7. [【译】2015年JavaScript应用架构趋势](http://melon.github.io/blog/2014/12/16/translation-javascript-application-architecture-on-the-road-to-2015/) 82 | -------------------------------------------------------------------------------- /_book/gitbook/plugins/gitbook-plugin-fontsettings/buttons.js: -------------------------------------------------------------------------------- 1 | require(["gitbook", "lodash", "jQuery"], function(gitbook, _, $) { 2 | var fontState; 3 | 4 | var THEMES = { 5 | "white": 0, 6 | "sepia": 1, 7 | "night": 2 8 | }; 9 | 10 | var FAMILY = { 11 | "serif": 0, 12 | "sans": 1 13 | }; 14 | 15 | // Save current font settings 16 | function saveFontSettings() { 17 | gitbook.storage.set("fontState", fontState); 18 | update(); 19 | } 20 | 21 | // Increase font size 22 | function enlargeFontSize(e) { 23 | e.preventDefault(); 24 | if (fontState.size >= 4) return; 25 | 26 | fontState.size++; 27 | saveFontSettings(); 28 | }; 29 | 30 | // Decrease font size 31 | function reduceFontSize(e) { 32 | e.preventDefault(); 33 | if (fontState.size <= 0) return; 34 | 35 | fontState.size--; 36 | saveFontSettings(); 37 | }; 38 | 39 | // Change font family 40 | function changeFontFamily(index, e) { 41 | e.preventDefault(); 42 | 43 | fontState.family = index; 44 | saveFontSettings(); 45 | }; 46 | 47 | // Change type of color 48 | function changeColorTheme(index, e) { 49 | e.preventDefault(); 50 | 51 | var $book = $(".book"); 52 | 53 | if (fontState.theme !== 0) 54 | $book.removeClass("color-theme-"+fontState.theme); 55 | 56 | fontState.theme = index; 57 | if (fontState.theme !== 0) 58 | $book.addClass("color-theme-"+fontState.theme); 59 | 60 | saveFontSettings(); 61 | }; 62 | 63 | function update() { 64 | var $book = gitbook.state.$book; 65 | 66 | $(".font-settings .font-family-list li").removeClass("active"); 67 | $(".font-settings .font-family-list li:nth-child("+(fontState.family+1)+")").addClass("active"); 68 | 69 | $book[0].className = $book[0].className.replace(/\bfont-\S+/g, ''); 70 | $book.addClass("font-size-"+fontState.size); 71 | $book.addClass("font-family-"+fontState.family); 72 | 73 | if(fontState.theme !== 0) { 74 | $book[0].className = $book[0].className.replace(/\bcolor-theme-\S+/g, ''); 75 | $book.addClass("color-theme-"+fontState.theme); 76 | } 77 | }; 78 | 79 | function init(config) { 80 | var $bookBody, $book; 81 | 82 | //Find DOM elements. 83 | $book = gitbook.state.$book; 84 | $bookBody = $book.find(".book-body"); 85 | 86 | // Instantiate font state object 87 | fontState = gitbook.storage.get("fontState", { 88 | size: config.size || 2, 89 | family: FAMILY[config.family || "sans"], 90 | theme: THEMES[config.theme || "white"] 91 | }); 92 | 93 | update(); 94 | }; 95 | 96 | 97 | gitbook.events.bind("start", function(e, config) { 98 | var opts = config.fontsettings; 99 | 100 | // Create buttons in toolbar 101 | gitbook.toolbar.createButton({ 102 | icon: 'fa fa-font', 103 | label: 'Font Settings', 104 | className: 'font-settings', 105 | dropdown: [ 106 | [ 107 | { 108 | text: 'A', 109 | className: 'font-reduce', 110 | onClick: reduceFontSize 111 | }, 112 | { 113 | text: 'A', 114 | className: 'font-enlarge', 115 | onClick: enlargeFontSize 116 | } 117 | ], 118 | [ 119 | { 120 | text: 'Serif', 121 | onClick: _.partial(changeFontFamily, 0) 122 | }, 123 | { 124 | text: 'Sans', 125 | onClick: _.partial(changeFontFamily, 1) 126 | } 127 | ], 128 | [ 129 | { 130 | text: 'White', 131 | onClick: _.partial(changeColorTheme, 0) 132 | }, 133 | { 134 | text: 'Sepia', 135 | onClick: _.partial(changeColorTheme, 1) 136 | }, 137 | { 138 | text: 'Night', 139 | onClick: _.partial(changeColorTheme, 2) 140 | } 141 | ] 142 | ] 143 | }); 144 | 145 | 146 | // Init current settings 147 | init(opts); 148 | }); 149 | }); 150 | 151 | 152 | -------------------------------------------------------------------------------- /_book/gitbook/plugins/gitbook-plugin-fontsettings/website.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Theme 1 3 | */ 4 | .color-theme-1 .dropdown-menu { 5 | background-color: #111111; 6 | border-color: #7e888b; 7 | } 8 | .color-theme-1 .dropdown-menu .dropdown-caret .caret-inner { 9 | border-bottom: 9px solid #111111; 10 | } 11 | .color-theme-1 .dropdown-menu .buttons { 12 | border-color: #7e888b; 13 | } 14 | .color-theme-1 .dropdown-menu .button { 15 | color: #afa790; 16 | } 17 | .color-theme-1 .dropdown-menu .button:hover { 18 | color: #73553c; 19 | } 20 | /* 21 | * Theme 2 22 | */ 23 | .color-theme-2 .dropdown-menu { 24 | background-color: #2d3143; 25 | border-color: #272a3a; 26 | } 27 | .color-theme-2 .dropdown-menu .dropdown-caret .caret-inner { 28 | border-bottom: 9px solid #2d3143; 29 | } 30 | .color-theme-2 .dropdown-menu .buttons { 31 | border-color: #272a3a; 32 | } 33 | .color-theme-2 .dropdown-menu .button { 34 | color: #62677f; 35 | } 36 | .color-theme-2 .dropdown-menu .button:hover { 37 | color: #f4f4f5; 38 | } 39 | .book .book-header .font-settings .font-enlarge { 40 | line-height: 30px; 41 | font-size: 1.4em; 42 | } 43 | .book .book-header .font-settings .font-reduce { 44 | line-height: 30px; 45 | font-size: 1em; 46 | } 47 | .book.color-theme-1 .book-body { 48 | color: #704214; 49 | background: #f3eacb; 50 | } 51 | .book.color-theme-1 .book-body .page-wrapper .page-inner section { 52 | background: #f3eacb; 53 | } 54 | .book.color-theme-2 .book-body { 55 | color: #bdcadb; 56 | background: #1c1f2b; 57 | } 58 | .book.color-theme-2 .book-body .page-wrapper .page-inner section { 59 | background: #1c1f2b; 60 | } 61 | .book.font-size-0 .book-body .page-inner section { 62 | font-size: 1.2rem; 63 | } 64 | .book.font-size-1 .book-body .page-inner section { 65 | font-size: 1.4rem; 66 | } 67 | .book.font-size-2 .book-body .page-inner section { 68 | font-size: 1.6rem; 69 | } 70 | .book.font-size-3 .book-body .page-inner section { 71 | font-size: 2.2rem; 72 | } 73 | .book.font-size-4 .book-body .page-inner section { 74 | font-size: 4rem; 75 | } 76 | .book.font-family-0 { 77 | font-family: Georgia, serif; 78 | } 79 | .book.font-family-1 { 80 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 81 | } 82 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal { 83 | color: #704214; 84 | } 85 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal a { 86 | color: inherit; 87 | } 88 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h1, 89 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h2, 90 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h3, 91 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h4, 92 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h5, 93 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h6 { 94 | color: inherit; 95 | } 96 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h1, 97 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h2 { 98 | border-color: inherit; 99 | } 100 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal h6 { 101 | color: inherit; 102 | } 103 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal hr { 104 | background-color: inherit; 105 | } 106 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal blockquote { 107 | border-color: inherit; 108 | } 109 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal pre, 110 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal code { 111 | background: #fdf6e3; 112 | color: #657b83; 113 | border-color: #f8df9c; 114 | } 115 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal .highlight { 116 | background-color: inherit; 117 | } 118 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal table th, 119 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal table td { 120 | border-color: #f5d06c; 121 | } 122 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal table tr { 123 | color: inherit; 124 | background-color: #fdf6e3; 125 | border-color: #444444; 126 | } 127 | .book.color-theme-1 .book-body .page-wrapper .page-inner section.normal table tr:nth-child(2n) { 128 | background-color: #fbeecb; 129 | } 130 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal { 131 | color: #bdcadb; 132 | } 133 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal a { 134 | color: #3eb1d0; 135 | } 136 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h1, 137 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h2, 138 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h3, 139 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h4, 140 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h5, 141 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h6 { 142 | color: #fffffa; 143 | } 144 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h1, 145 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h2 { 146 | border-color: #373b4e; 147 | } 148 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal h6 { 149 | color: #373b4e; 150 | } 151 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal hr { 152 | background-color: #373b4e; 153 | } 154 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal blockquote { 155 | border-color: #373b4e; 156 | } 157 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal pre, 158 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal code { 159 | color: #9dbed8; 160 | background: #2d3143; 161 | border-color: #2d3143; 162 | } 163 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal .highlight { 164 | background-color: #282a39; 165 | } 166 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal table th, 167 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal table td { 168 | border-color: #3b3f54; 169 | } 170 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal table tr { 171 | color: #b6c2d2; 172 | background-color: #2d3143; 173 | border-color: #3b3f54; 174 | } 175 | .book.color-theme-2 .book-body .page-wrapper .page-inner section.normal table tr:nth-child(2n) { 176 | background-color: #35394b; 177 | } 178 | .book.color-theme-1 .book-header { 179 | color: #afa790; 180 | background: transparent; 181 | } 182 | .book.color-theme-1 .book-header .btn { 183 | color: #afa790; 184 | } 185 | .book.color-theme-1 .book-header .btn:hover { 186 | color: #73553c; 187 | background: none; 188 | } 189 | .book.color-theme-1 .book-header h1 { 190 | color: #704214; 191 | } 192 | .book.color-theme-2 .book-header { 193 | color: #7e888b; 194 | background: transparent; 195 | } 196 | .book.color-theme-2 .book-header .btn { 197 | color: #3b3f54; 198 | } 199 | .book.color-theme-2 .book-header .btn:hover { 200 | color: #fffff5; 201 | background: none; 202 | } 203 | .book.color-theme-2 .book-header h1 { 204 | color: #bdcadb; 205 | } 206 | .book.color-theme-1 .book-body .navigation { 207 | color: #afa790; 208 | } 209 | .book.color-theme-1 .book-body .navigation:hover { 210 | color: #73553c; 211 | } 212 | .book.color-theme-2 .book-body .navigation { 213 | color: #383f52; 214 | } 215 | .book.color-theme-2 .book-body .navigation:hover { 216 | color: #fffff5; 217 | } 218 | /* 219 | * Theme 1 220 | */ 221 | .book.color-theme-1 .book-summary { 222 | color: #afa790; 223 | background: #111111; 224 | border-right: 1px solid rgba(0, 0, 0, 0.07); 225 | } 226 | .book.color-theme-1 .book-summary .book-search { 227 | background: transparent; 228 | } 229 | .book.color-theme-1 .book-summary .book-search input, 230 | .book.color-theme-1 .book-summary .book-search input:focus { 231 | border: 1px solid transparent; 232 | } 233 | .book.color-theme-1 .book-summary ul.summary li.divider { 234 | background: #7e888b; 235 | box-shadow: none; 236 | } 237 | .book.color-theme-1 .book-summary ul.summary li i.fa-check { 238 | color: #33cc33; 239 | } 240 | .book.color-theme-1 .book-summary ul.summary li.done > a { 241 | color: #877f6a; 242 | } 243 | .book.color-theme-1 .book-summary ul.summary li a, 244 | .book.color-theme-1 .book-summary ul.summary li span { 245 | color: #877f6a; 246 | background: transparent; 247 | font-weight: normal; 248 | } 249 | .book.color-theme-1 .book-summary ul.summary li.active > a, 250 | .book.color-theme-1 .book-summary ul.summary li a:hover { 251 | color: #704214; 252 | background: transparent; 253 | font-weight: normal; 254 | } 255 | /* 256 | * Theme 2 257 | */ 258 | .book.color-theme-2 .book-summary { 259 | color: #bcc1d2; 260 | background: #2d3143; 261 | border-right: none; 262 | } 263 | .book.color-theme-2 .book-summary .book-search { 264 | background: transparent; 265 | } 266 | .book.color-theme-2 .book-summary .book-search input, 267 | .book.color-theme-2 .book-summary .book-search input:focus { 268 | border: 1px solid transparent; 269 | } 270 | .book.color-theme-2 .book-summary ul.summary li.divider { 271 | background: #272a3a; 272 | box-shadow: none; 273 | } 274 | .book.color-theme-2 .book-summary ul.summary li i.fa-check { 275 | color: #33cc33; 276 | } 277 | .book.color-theme-2 .book-summary ul.summary li.done > a { 278 | color: #62687f; 279 | } 280 | .book.color-theme-2 .book-summary ul.summary li a, 281 | .book.color-theme-2 .book-summary ul.summary li span { 282 | color: #c1c6d7; 283 | background: transparent; 284 | font-weight: 600; 285 | } 286 | .book.color-theme-2 .book-summary ul.summary li.active > a, 287 | .book.color-theme-2 .book-summary ul.summary li a:hover { 288 | color: #f4f4f5; 289 | background: #252737; 290 | font-weight: 600; 291 | } 292 | -------------------------------------------------------------------------------- /_book/node/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | node | Font-End-Resource 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 | 54 |
55 | 313 |
314 | 315 |
316 |
317 | 327 | 328 |
329 |
330 | 331 | 332 |
333 | 334 |
    335 |
  1. package.json 关于package的一些介绍
    2. 336 |
337 | 338 | 339 |
340 | 341 | 342 |
343 |
344 |
345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 |
353 |
354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 380 | 381 | 382 | 383 | 384 | 385 | -------------------------------------------------------------------------------- /_book/base/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 基础相关 | Font-End-Resource 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 | 54 |
55 | 313 |
314 | 315 |
316 |
317 | 327 | 328 |
329 |
330 | 331 | 332 |
333 | 334 |

罗列了一些有关前端基础知识和工具

335 |
    336 |
  • js
    • 337 |
  • js_tool
    • 338 |
  • css
    • 339 |
  • css_tool
    • 340 |
341 | 342 | 343 |
344 | 345 | 346 |
347 |
348 |
349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 |
357 |
358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 384 | 385 | 386 | 387 | 388 | 389 | -------------------------------------------------------------------------------- /_book/site/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 站点 | Font-End-Resource 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 | 54 |
55 | 313 |
314 | 315 |
316 |
317 | 327 | 328 |
329 |
330 | 331 | 332 |
333 | 334 |

罗列了一些有关前端方法的网站，主要分下面基类

335 |
    336 |
  • blog[包括了一些前端的个人博客、前端团队的博客]
    • 337 |
  • rss[用来订阅的rss内容]
    • 338 |
  • 其他[一些比较好玩的小站等]
    • 339 |
340 | 341 | 342 |
343 | 344 | 345 |
346 |
347 |
348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 |
356 |
357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 383 | 384 | 385 | 386 | 387 | 388 | -------------------------------------------------------------------------------- /_book/base/js_tool.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | js工具 | Font-End-Resource 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 | 54 |
55 | 313 |
314 | 315 |
316 |
317 | 327 | 328 |
329 |
330 | 331 | 332 |
333 | 334 |

JavaScript工具

335 |
    336 |
  1. 代码高亮highlightjs
    2. 337 |
  2. grunt插件开发
    3. 338 |
  3. jsnice
    4. 339 |
  4. 使用Chrome DevTools的Timeline和Profiles提高Web应用程序的性能
    5. 340 |
341 | 342 | 343 |
344 | 345 | 346 |
347 |
348 |
349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 |
357 |
358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 384 | 385 | 386 | 387 | 388 | 389 | -------------------------------------------------------------------------------- /_book/site/rss.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Rss | Font-End-Resource 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 | 54 |
55 | 313 |
314 | 315 |
316 |
317 | 327 | 328 |
329 |
330 | 331 | 332 |
333 | 334 |

一些订阅的网站

335 |
    336 |
  1. Startup News一次偶然的机会发现的，一些不错的IT信息
    2. 337 |
  2. Hacker News跟前面的那个很类似，不过是外文的
    3. 338 |
  3. html5rocks国外的一个网站
    4. 339 |
  4. lostechies
    5. 340 |
341 | 342 | 343 |
344 | 345 | 346 |
347 |
348 |
349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 |
357 |
358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 384 | 385 | 386 | 387 | 388 | 389 | -------------------------------------------------------------------------------- /_book/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Introduction | Font-End-Resource 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
50 | 51 | 52 |
53 | 311 |
312 | 313 |
314 |
315 | 325 | 326 |
327 |
328 | 329 | 330 |
331 | 332 |

Font-End-Resource

333 |

收集的一些前端的有关的资源

334 |

站点

335 |
    336 |
  1. 博客 (update at 2015.7.13 )
    2. 337 |
  2. Rss (update at 2015.7.13 )
    3. 338 |
  3. 其他 (update at 2015.7.13 )
    4. 339 |
340 |

react & redux

341 |

(update at 2016.04.03 )

342 |

node

343 |

(update at 2015.7.13 )

344 |

基础相关

345 |

(update at 2015.7.13 )

346 |

性能

347 |

(update at 2015.7.13 )

348 |

移动端

349 |

(update at 2015.7.13 )

350 |

面试题

351 |

gmt_modify : 2014.09.14

352 |

其他: boostrap的一些资源清单

353 | 354 | 355 |
356 | 357 | 358 |
359 |
360 |
361 | 362 | 363 | 364 | 365 | 366 |
367 |
368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 394 | 395 | 396 | 397 | 398 | 399 | -------------------------------------------------------------------------------- /interview/README.md: -------------------------------------------------------------------------------- 1 | #js 2 | 3 | ##一、基本知识 4 | 5 | ### 1.基本类型和引用类型 6 | 基本类型就是那些字符串、数字、布尔值以及null和Undefine，他们在传递数值的时候只进行值传递； 7 | 引用类型就是除了上面这些基本类型之外的那些对象，他在传递的过程中，采用的是引用的传递，类似java中的两种类型的值一样 8 | 9 | ### 2.null && undefine 10 | null是一个对象，指代的是一个对象不存在；一般应用在函数的参数来判断不是对象，或者是在原型链中的终点 11 | typeof null -> object 12 | undefine则是一个预定全局变量，表明的是一个变量没有初始化，可以理解就是声明的一个变量但是还没给这个变量赋值的那些情况； 13 | typeof undefine -> undefine 14 | 15 | ### 3. 执行环境和作用域 16 | 执行环境：是一个函数可以访问到的变量和函数 17 | 作用域：是一个函数在执行过程中可以访问到的变量和函数的一个对象链 18 | 19 | 20 | ### 4. 垃圾回收 21 | 当一个函数执行完毕的时候，正常情况下，他内部声明的变量和函数会在函数执行结束后进行释放，常见的有两种处理垃圾回收的方法：一种是引用计数（就是计算引用一个变量的次数，当一个变量他的引用的次数为0的时候就代表了没有其他变量引用他，便可以进行垃圾回收）；还有一种是标记清除（利用一个标记为来清除） 22 | 23 | 24 | ### 5. this 25 | 关于this的指向分为四种，分别对应了函数的四种用法 26 | 1. 当函数作为构造函数的时候，比如new A()，那么此时函数A内部的this指向的是构造函数返回的那个新的实例； 27 | 2. 函数作为一个对象的方法进行调用，比如p.A()，那么此时函数A中的this指向的是该对象P 28 | 3. 函数作为一个普通的函数进行调用，比如就是A()，那么此时A内部的this指向的是全局的window 29 | 4. 函数作为call,apply的方法调用，比如A.call(o,a)，那么此时函数A内部的this指向的是绑定后的对象o 30 | 31 | 32 | ### 6. 闭包 33 | 闭包的作用有两个 34 | 1. 可以读取到函数内部的数值 35 | 2. 可以让一些变量始终保存在内存中（私有变量） 36 | 37 | 关于第一点正常的函数由于作用域链的限制，他只能访问到本身以及他的上一级的函数内部定义的变量，但是不能访问在他内部定义的函数内的变量信息，通过闭包可以将这些信息返回出来 38 | 39 | 关于第二点正常的函数在执行结束之后，由于内部的变量的引用计数都是0，所有函数在执行完毕之后要进行回收，所以执行一次之后就没有了，但是通过闭包，可以将一个变量在结束返回的时候将其返回，那么在函数结束的时候，他的引用计数没有清零，所有将不会被回收掉，这样可以达到可以让他一直存在内存中 40 | 41 | 比如一些全局的计数可以用这个方法来实现 42 | 43 | ### 7. 面向对象 44 | 45 | 46 | 47 | ### 8. arguments 48 | 49 | 是一个类数组，表示符arguments表示的是指向实参对象的引用，还有一个是aguments.callee指代的是当前正在执行的函数，可以使用这个方法来下实现递归的函数调用 50 | 51 | ### 9. Array和String基本用法 52 | 1. Array 53 | * slice():从某个已有的数组返回选定的元素 54 | * join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 55 | * splice():从数组中添加/删除项目，然后返回被删除的项目 56 | 2. String 57 | * slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分 58 | * split()把字符串分割为字符串数组 59 | * substring() 方法用于提取字符串中介于两个指定下标之间的字符 60 | 61 | ### 10. Object.create 62 | Object.create(prototype, descriptors) 63 | 第一个参数是原型链上的属性,后面的参数是挂在对象上的,EC５的功能 64 | 可以通过模拟类似实现（可以再加一些对类似的判断） 65 | 66 | var f = function(){}; 67 | f.prototype = obj; 68 | retunrn new f(); 69 | 70 | 不过只是类似模拟，因为有种object.create(null)没有原型的也可以 71 | 72 | 73 | ### 11. AJAX和Promise/Deferred 74 | 75 | 76 | ## 二、 问题 77 | ### 1. js脚本延迟 78 | js程序在浏览器端的执行分两个步骤： 79 | 1. 载入文档，并执行<\script\>中的代码 80 | 2. 执行异步事件 这个时候就是监听浏览上发生的事件 81 | 82 | 83 | 84 | 在script中有两个属性在支持他们的浏览中可以运行 85 | 1. defer：浏览器延迟脚本的执行，直到文档的载入和解析完成 86 | 2. async：浏览器尽快执行脚本，而不用在下载脚本时阻塞文档解析 87 | 88 | 可以动态创建一个。然后再插入DOM中 89 | 90 | ### 2. 写一个通过的事件处理的函数 91 | 就是要处理下IE的事件处理跟其他的事件处理的兼容 92 | target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。 93 | 94 | ### 3. 常见的http错误代码 95 | 200 - 服务器成功返回网页 96 | 404 - 请求的网页不存在 97 | 503 - 服务不可用 98 | 304 - Not Modified 如果客服端已经完成一个有条件的请求并且请求是允许的，但是这个文档并没有改变，服务器应该返回304状态 99 | 403 - Forbidden 服务器接受请求，但是被拒绝处理。 100 | 101 | 响应码分五种类型，由它们的第一位数字表示： 102 | 1.1xx：信息，请求收到，继续处理 103 | 2.2xx：成功，行为被成功地接受、理解和采纳 104 | 3.3xx：重定向，为了完成请求，必须进一步执行的动作 105 | 4.4xx：客户端错误，请求包含语法错误或者请求无法实现 106 | 5.5xx：服务器错误，服务器不能实现一种明显无效的请求 107 | 108 | ### 4. new一个对象过程中发生的事情 109 | 自定义构造函数，在new过程中发生的事情 110 | 111 | * 创建一个空对象，将它的引用赋给this，并继承函数的原型。 112 | * 通过this将属性和方法添加至这个对象。 113 | * 最后返回this指向的新对象（如果没有手动返回其他的对象）。 114 | 115 | ### 5. **bind函数** 116 | 函数绑定一个简单的bind函数接受一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数，并且就让那个所有参数不变地传过去 117 | 118 | function bind(fn,context){ 119 | return function(){ 120 | return fn.apply(context,argument); 121 | } 122 | } 123 | 124 | ### 6. function与New　Function的区别 125 | 1. new Function()允许js在运行时动态创建并编译函数 126 | 2. 每次调用都会先解析函数体并创建新的函数对象，所以执行的效率比较低（比如在一个循环体中这个定义，每次都会进行解析，而function不用） 127 | 3. Function的作用域在顶层(全局作用域) 128 | 129 | 注：貌似之前在博客中看到过，有一些模版引擎就是通过这个来实现的 130 | 131 | ### 7. js创建一个table 132 | 可能一开始的想法会是如下 133 | 134 | var _table = document.createElement("table"); 135 | _table.innerHTML = "..."; 136 | 137 | 其实这样是有问题的，在于table的innerHTML是只读的属性，（ IE下 COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 这些元素的 innerHTML 属性都是只读的，不能直接操作）不可以写，提供几个方法 138 | 1. 老老实实的先创建一个table，然后在创建一个tbody，然后试用table.appendChild(tbody)这样来 139 | 2. 在table外面裹一个div，那么直接对那个div进行innerHTML 140 | 141 | [附上第一种方法的代码](https://developer.mozilla.org/zh-CN/docs/%E4%BD%BF%E7%94%A8Javascript%E5%92%8CDOM_Interfaces%E6%9D%A5%E5%A4%84%E7%90%86HTML) 142 | 143 | ### 8. 关于跨域的方法 144 | 1. postMessage 145 | 2. 修改window.domain 146 | 3. 修改window.name 147 | 4. 修改hash 148 | 149 | 具体可以参考之前整理的[博文](http://tankpt.github.io/2014/05/28/20140528_cors/) 150 | 151 | ### 9. get 和post方式的区别 152 | 原理上 153 | 1. 根据http规范，GET用于信息获取，而且是安全和幂等 154 | get应该指的是用于获取信息而不是修改信息， 155 | 2. 根据http规范，POST表示可能修改服务器上的资源请求 156 | 157 | 表面现象 158 | 1. GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，参数之间以&相连；而POST把提交的数据则放置在是HTTP包的包体中。 159 | 2. "GET方式提交的数据最多只能是1024字节，理论上POST没有限制，可传较大量的数 160 | (1)其实GET是通过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了 161 | (2)理论上讲，POST是没有大小限制的，HTTP协议规范也没有进行大小限制，说“POST数据量存在80K/100K的大小限制”是不准确的，POST数据是没有限制的，起限制作用的是服务器的处理程序的处理能力。 162 | 163 | 3. 解析的方法不同 164 | (1)在ASP中，服务端获取GET请求参数用Request.QueryString，获取POST请求参数用Request.Form 165 | (2)在JSP中，用request.getParameter(\"XXXX\")来获取，虽然jsp中也有request.getQueryString()方法，但使用起来比较麻烦，比如：传一个test.jsp?name=hyddd&password=hyddd，用request.getQueryString()得到的是：name=hyddd&password=hyddd 166 | (3)在PHP中，可以用_GET和_POST分别获取GET和POST中的数据，而_REQUEST则可以获取GET和POST两种请求中的数据。值得注意的是，JSP中使用request和PHP中使用$_REQUEST都会有隐患 167 | 168 | 4. POST的安全性要比GET的安全性高。注意：这里所说的安全性和上面GET提到的“安全”不是同个概念。上面“安全”的含义仅仅是不作数据修改，而这里安全的含义是真正的Security的含义，比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为(1)登录页面有可能被浏览器缓存，(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击。 169 | 170 | ### 10. js深拷贝 171 | 主要的点在于js对象的赋值，是引用的赋值 172 | 173 | function clone(myObj){ 174 | //传入参数必须对对象才能实现clone出新对象 175 | if(typeof(myObj) != 'object' || myObj == null) return myObj; 176 | var newObj = new Object(); 177 | for(var i in myObj){ 178 | newObj[i]＝clone(myObj[i]); 179 | //对于对象中含有对象情况使用递归调用。 180 | } 181 | return myNewObj; 182 | } 183 | 184 | ### 11. url中取参数 185 | 貌似很多地方都会出现这个问题，写了个自己的 186 | 187 | var getParament = function (_url) { 188 | var paramentArray = _url.split("?")[1].split("&"), 189 | tmpObj = {}; 190 | for(var i=0 ,len = paramentArray.length;iIE浏览器显示的内容，针对IE6及以下版本：\。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。 337 | 338 | background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10*/ 339 | background-color:purple\0; /* IE8, IE9, IE10 */ 340 | background-color:orange\9\0;/*IE9, IE10*/ 341 | *background-color:black; /* ie 6/7 - for ie7 */ 342 | _background-color:green; /* ie 6 - for ie6 */ 343 | 344 | 345 | ------ 346 | 347 | # html 348 | 349 | ## 基础 350 | 1. Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 351 | 标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。 352 | [详见](http://blog.sina.com.cn/s/blog_5f245b8a01019uy7.html) 353 | 2. void的空元素 354 | [见博文](http://ourjs.com/detail/531b2ce89144f4934f00000b) 355 | 356 | --- 357 | 358 | # 其他 359 | 360 | ## cookie 361 | 1. cookie的作用域是通过文档源和文档路径来确定的；而且默认情况下，于创建他的web页面有关，并对该web页面以及和该页面同目录或者子目录的其他web页面可见 362 | 2. 不过cookie可以设置他的作用域 363 | 364 | 365 | ## 兼容问题 366 | 1. 写出几种IE6 BUG的解决方法 367 | 368 | a 双边距BUG float引起的 使用display 369 | b 像素问题 使用float引起的 使用dislpay:inline -3px 370 | c 超链接hover 点击后失效 使用正确的书写顺序 linkvisited hover activen Ie z-index问题 给父级添加position:relative 371 | d Png 透明 使用js代码改 372 | e Min-height 最小高度 ！Important 解决’ 373 | f select 在ie6下遮盖 使用iframe嵌套 374 | g 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08line-height:1px) 375 | -------------------------------------------------------------------------------- /_book/react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | react&redux | Font-End-Resource 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 | 54 |
55 | 313 |
314 | 315 |
316 |
317 | 327 | 328 |
329 |
330 | 331 | 332 |
333 | 334 |

React

335 |
    336 |
  1. react.createclass vs extends react.component
    2. 337 |
338 |
339 |

Redux

340 |

1. Article

341 |

1.1 Main

342 |
    343 |
  1. 深入到源码：解读 redux 的设计思路与用法 - Div.IO
    2. 344 |
  2. 使用Redux管理你的React应用
    3. 345 |
  3. Redux 中文文档
    4. 346 |
  4. 深入浅出Redux中间件
    5. 347 |
  5. redux的middleware詳解 循序渐进。超级不错的
    6. 348 |
  6. UNIDIRECTIONAL USER INTERFACE ARCHITECTURES 单向用户接口架构 介绍了很多框架的概览 中文版请点击
    7. 349 |
350 |

1.2 relative

351 |
    352 |
  1. Presentational and Container Components
    2. 353 |
354 |

2. Demo

355 |
    356 |
  1. React Redux Example
    2. 357 |
358 | 359 | 360 |
361 | 362 | 363 |
364 |
365 |
366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 |
374 |
375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 401 | 402 | 403 | 404 | 405 | 406 | -------------------------------------------------------------------------------- /_book/gitbook/plugins/gitbook-plugin-search/lunr.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 0.5.12 3 | * Copyright (C) 2015 Oliver Nightingale 4 | * MIT Licensed 5 | * @license 6 | */ 7 | !function(){var t=function(e){var n=new t.Index;return n.pipeline.add(t.trimmer,t.stopWordFilter,t.stemmer),e&&e.call(n,n),n};t.version="0.5.12",t.utils={},t.utils.warn=function(t){return function(e){t.console&&console.warn&&console.warn(e)}}(this),t.EventEmitter=function(){this.events={}},t.EventEmitter.prototype.addListener=function(){var t=Array.prototype.slice.call(arguments),e=t.pop(),n=t;if("function"!=typeof e)throw new TypeError("last argument must be a function");n.forEach(function(t){this.hasHandler(t)||(this.events[t]=[]),this.events[t].push(e)},this)},t.EventEmitter.prototype.removeListener=function(t,e){if(this.hasHandler(t)){var n=this.events[t].indexOf(e);this.events[t].splice(n,1),this.events[t].length||delete this.events[t]}},t.EventEmitter.prototype.emit=function(t){if(this.hasHandler(t)){var e=Array.prototype.slice.call(arguments,1);this.events[t].forEach(function(t){t.apply(void 0,e)})}},t.EventEmitter.prototype.hasHandler=function(t){return t in this.events},t.tokenizer=function(t){return arguments.length&&null!=t&&void 0!=t?Array.isArray(t)?t.map(function(t){return t.toLowerCase()}):t.toString().trim().toLowerCase().split(/[\s\-]+/):[]},t.Pipeline=function(){this._stack=[]},t.Pipeline.registeredFunctions={},t.Pipeline.registerFunction=function(e,n){n in this.registeredFunctions&&t.utils.warn("Overwriting existing registered function: "+n),e.label=n,t.Pipeline.registeredFunctions[e.label]=e},t.Pipeline.warnIfFunctionNotRegistered=function(e){var n=e.label&&e.label in this.registeredFunctions;n||t.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",e)},t.Pipeline.load=function(e){var n=new t.Pipeline;return e.forEach(function(e){var i=t.Pipeline.registeredFunctions[e];if(!i)throw new Error("Cannot load un-registered function: "+e);n.add(i)}),n},t.Pipeline.prototype.add=function(){var e=Array.prototype.slice.call(arguments);e.forEach(function(e){t.Pipeline.warnIfFunctionNotRegistered(e),this._stack.push(e)},this)},t.Pipeline.prototype.after=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var i=this._stack.indexOf(e);if(-1==i)throw new Error("Cannot find existingFn");i+=1,this._stack.splice(i,0,n)},t.Pipeline.prototype.before=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var i=this._stack.indexOf(e);if(-1==i)throw new Error("Cannot find existingFn");this._stack.splice(i,0,n)},t.Pipeline.prototype.remove=function(t){var e=this._stack.indexOf(t);-1!=e&&this._stack.splice(e,1)},t.Pipeline.prototype.run=function(t){for(var e=[],n=t.length,i=this._stack.length,o=0;n>o;o++){for(var r=t[o],s=0;i>s&&(r=this._stack[s](r,o,t),void 0!==r);s++);void 0!==r&&e.push(r)}return e},t.Pipeline.prototype.reset=function(){this._stack=[]},t.Pipeline.prototype.toJSON=function(){return this._stack.map(function(e){return t.Pipeline.warnIfFunctionNotRegistered(e),e.label})},t.Vector=function(){this._magnitude=null,this.list=void 0,this.length=0},t.Vector.Node=function(t,e,n){this.idx=t,this.val=e,this.next=n},t.Vector.prototype.insert=function(e,n){this._magnitude=void 0;var i=this.list;if(!i)return this.list=new t.Vector.Node(e,n,i),this.length++;if(en.idx?n=n.next:(i+=e.val*n.val,e=e.next,n=n.next);return i},t.Vector.prototype.similarity=function(t){return this.dot(t)/(this.magnitude()*t.magnitude())},t.SortedSet=function(){this.length=0,this.elements=[]},t.SortedSet.load=function(t){var e=new this;return e.elements=t,e.length=t.length,e},t.SortedSet.prototype.add=function(){var t,e;for(t=0;t1;){if(r===t)return o;t>r&&(e=o),r>t&&(n=o),i=n-e,o=e+Math.floor(i/2),r=this.elements[o]}return r===t?o:-1},t.SortedSet.prototype.locationFor=function(t){for(var e=0,n=this.elements.length,i=n-e,o=e+Math.floor(i/2),r=this.elements[o];i>1;)t>r&&(e=o),r>t&&(n=o),i=n-e,o=e+Math.floor(i/2),r=this.elements[o];return r>t?o:t>r?o+1:void 0},t.SortedSet.prototype.intersect=function(e){for(var n=new t.SortedSet,i=0,o=0,r=this.length,s=e.length,a=this.elements,h=e.elements;;){if(i>r-1||o>s-1)break;a[i]!==h[o]?a[i]h[o]&&o++:(n.add(a[i]),i++,o++)}return n},t.SortedSet.prototype.clone=function(){var e=new t.SortedSet;return e.elements=this.toArray(),e.length=e.elements.length,e},t.SortedSet.prototype.union=function(t){var e,n,i;return this.length>=t.length?(e=this,n=t):(e=t,n=this),i=e.clone(),i.add.apply(i,n.toArray()),i},t.SortedSet.prototype.toJSON=function(){return this.toArray()},t.Index=function(){this._fields=[],this._ref="id",this.pipeline=new t.Pipeline,this.documentStore=new t.Store,this.tokenStore=new t.TokenStore,this.corpusTokens=new t.SortedSet,this.eventEmitter=new t.EventEmitter,this._idfCache={},this.on("add","remove","update",function(){this._idfCache={}}.bind(this))},t.Index.prototype.on=function(){var t=Array.prototype.slice.call(arguments);return this.eventEmitter.addListener.apply(this.eventEmitter,t)},t.Index.prototype.off=function(t,e){return this.eventEmitter.removeListener(t,e)},t.Index.load=function(e){e.version!==t.version&&t.utils.warn("version mismatch: current "+t.version+" importing "+e.version);var n=new this;return n._fields=e.fields,n._ref=e.ref,n.documentStore=t.Store.load(e.documentStore),n.tokenStore=t.TokenStore.load(e.tokenStore),n.corpusTokens=t.SortedSet.load(e.corpusTokens),n.pipeline=t.Pipeline.load(e.pipeline),n},t.Index.prototype.field=function(t,e){var e=e||{},n={name:t,boost:e.boost||1};return this._fields.push(n),this},t.Index.prototype.ref=function(t){return this._ref=t,this},t.Index.prototype.add=function(e,n){var i={},o=new t.SortedSet,r=e[this._ref],n=void 0===n?!0:n;this._fields.forEach(function(n){var r=this.pipeline.run(t.tokenizer(e[n.name]));i[n.name]=r,t.SortedSet.prototype.add.apply(o,r)},this),this.documentStore.set(r,o),t.SortedSet.prototype.add.apply(this.corpusTokens,o.toArray());for(var s=0;s0&&(i=1+Math.log(this.documentStore.length/n)),this._idfCache[e]=i},t.Index.prototype.search=function(e){var n=this.pipeline.run(t.tokenizer(e)),i=new t.Vector,o=[],r=this._fields.reduce(function(t,e){return t+e.boost},0),s=n.some(function(t){return this.tokenStore.has(t)},this);if(!s)return[];n.forEach(function(e,n,s){var a=1/s.length*this._fields.length*r,h=this,l=this.tokenStore.expand(e).reduce(function(n,o){var r=h.corpusTokens.indexOf(o),s=h.idf(o),l=1,u=new t.SortedSet;if(o!==e){var c=Math.max(3,o.length-e.length);l=1/Math.log(c)}return r>-1&&i.insert(r,a*s*l),Object.keys(h.tokenStore.get(o)).forEach(function(t){u.add(t)}),n.union(u)},new t.SortedSet);o.push(l)},this);var a=o.reduce(function(t,e){return t.intersect(e)});return a.map(function(t){return{ref:t,score:i.similarity(this.documentVector(t))}},this).sort(function(t,e){return e.score-t.score})},t.Index.prototype.documentVector=function(e){for(var n=this.documentStore.get(e),i=n.length,o=new t.Vector,r=0;i>r;r++){var s=n.elements[r],a=this.tokenStore.get(s)[e].tf,h=this.idf(s);o.insert(this.corpusTokens.indexOf(s),a*h)}return o},t.Index.prototype.toJSON=function(){return{version:t.version,fields:this._fields,ref:this._ref,documentStore:this.documentStore.toJSON(),tokenStore:this.tokenStore.toJSON(),corpusTokens:this.corpusTokens.toJSON(),pipeline:this.pipeline.toJSON()}},t.Index.prototype.use=function(t){var e=Array.prototype.slice.call(arguments,1);e.unshift(this),t.apply(this,e)},t.Store=function(){this.store={},this.length=0},t.Store.load=function(e){var n=new this;return n.length=e.length,n.store=Object.keys(e.store).reduce(function(n,i){return n[i]=t.SortedSet.load(e.store[i]),n},{}),n},t.Store.prototype.set=function(t,e){this.has(t)||this.length++,this.store[t]=e},t.Store.prototype.get=function(t){return this.store[t]},t.Store.prototype.has=function(t){return t in this.store},t.Store.prototype.remove=function(t){this.has(t)&&(delete this.store[t],this.length--)},t.Store.prototype.toJSON=function(){return{store:this.store,length:this.length}},t.stemmer=function(){var t={ational:"ate",tional:"tion",enci:"ence",anci:"ance",izer:"ize",bli:"ble",alli:"al",entli:"ent",eli:"e",ousli:"ous",ization:"ize",ation:"ate",ator:"ate",alism:"al",iveness:"ive",fulness:"ful",ousness:"ous",aliti:"al",iviti:"ive",biliti:"ble",logi:"log"},e={icate:"ic",ative:"",alize:"al",iciti:"ic",ical:"ic",ful:"",ness:""},n="[^aeiou]",i="[aeiouy]",o=n+"[^aeiouy]*",r=i+"[aeiou]*",s="^("+o+")?"+r+o,a="^("+o+")?"+r+o+"("+r+")?$",h="^("+o+")?"+r+o+r+o,l="^("+o+")?"+i,u=new RegExp(s),c=new RegExp(h),f=new RegExp(a),d=new RegExp(l),p=/^(.+?)(ss|i)es$/,m=/^(.+?)([^s])s$/,v=/^(.+?)eed$/,y=/^(.+?)(ed|ing)$/,g=/.$/,S=/(at|bl|iz)$/,w=new RegExp("([^aeiouylsz])\\1$"),x=new RegExp("^"+o+i+"[^aeiouwxy]$"),k=/^(.+?[^aeiou])y$/,b=/^(.+?)(ational|tional|enci|anci|izer|bli|alli|entli|eli|ousli|ization|ation|ator|alism|iveness|fulness|ousness|aliti|iviti|biliti|logi)$/,E=/^(.+?)(icate|ative|alize|iciti|ical|ful|ness)$/,_=/^(.+?)(al|ance|ence|er|ic|able|ible|ant|ement|ment|ent|ou|ism|ate|iti|ous|ive|ize)$/,F=/^(.+?)(s|t)(ion)$/,O=/^(.+?)e$/,P=/ll$/,N=new RegExp("^"+o+i+"[^aeiouwxy]$"),T=function(n){var i,o,r,s,a,h,l;if(n.length<3)return n;if(r=n.substr(0,1),"y"==r&&(n=r.toUpperCase()+n.substr(1)),s=p,a=m,s.test(n)?n=n.replace(s,"$1$2"):a.test(n)&&(n=n.replace(a,"$1$2")),s=v,a=y,s.test(n)){var T=s.exec(n);s=u,s.test(T[1])&&(s=g,n=n.replace(s,""))}else if(a.test(n)){var T=a.exec(n);i=T[1],a=d,a.test(i)&&(n=i,a=S,h=w,l=x,a.test(n)?n+="e":h.test(n)?(s=g,n=n.replace(s,"")):l.test(n)&&(n+="e"))}if(s=k,s.test(n)){var T=s.exec(n);i=T[1],n=i+"i"}if(s=b,s.test(n)){var T=s.exec(n);i=T[1],o=T[2],s=u,s.test(i)&&(n=i+t[o])}if(s=E,s.test(n)){var T=s.exec(n);i=T[1],o=T[2],s=u,s.test(i)&&(n=i+e[o])}if(s=_,a=F,s.test(n)){var T=s.exec(n);i=T[1],s=c,s.test(i)&&(n=i)}else if(a.test(n)){var T=a.exec(n);i=T[1]+T[2],a=c,a.test(i)&&(n=i)}if(s=O,s.test(n)){var T=s.exec(n);i=T[1],s=c,a=f,h=N,(s.test(i)||a.test(i)&&!h.test(i))&&(n=i)}return s=P,a=c,s.test(n)&&a.test(n)&&(s=g,n=n.replace(s,"")),"y"==r&&(n=r.toLowerCase()+n.substr(1)),n};return T}(),t.Pipeline.registerFunction(t.stemmer,"stemmer"),t.stopWordFilter=function(e){return e&&t.stopWordFilter.stopWords[e]!==e?e:void 0},t.stopWordFilter.stopWords={a:"a",able:"able",about:"about",across:"across",after:"after",all:"all",almost:"almost",also:"also",am:"am",among:"among",an:"an",and:"and",any:"any",are:"are",as:"as",at:"at",be:"be",because:"because",been:"been",but:"but",by:"by",can:"can",cannot:"cannot",could:"could",dear:"dear",did:"did","do":"do",does:"does",either:"either","else":"else",ever:"ever",every:"every","for":"for",from:"from",get:"get",got:"got",had:"had",has:"has",have:"have",he:"he",her:"her",hers:"hers",him:"him",his:"his",how:"how",however:"however",i:"i","if":"if","in":"in",into:"into",is:"is",it:"it",its:"its",just:"just",least:"least",let:"let",like:"like",likely:"likely",may:"may",me:"me",might:"might",most:"most",must:"must",my:"my",neither:"neither",no:"no",nor:"nor",not:"not",of:"of",off:"off",often:"often",on:"on",only:"only",or:"or",other:"other",our:"our",own:"own",rather:"rather",said:"said",say:"say",says:"says",she:"she",should:"should",since:"since",so:"so",some:"some",than:"than",that:"that",the:"the",their:"their",them:"them",then:"then",there:"there",these:"these",they:"they","this":"this",tis:"tis",to:"to",too:"too",twas:"twas",us:"us",wants:"wants",was:"was",we:"we",were:"were",what:"what",when:"when",where:"where",which:"which","while":"while",who:"who",whom:"whom",why:"why",will:"will","with":"with",would:"would",yet:"yet",you:"you",your:"your"},t.Pipeline.registerFunction(t.stopWordFilter,"stopWordFilter"),t.trimmer=function(t){var e=t.replace(/^\W+/,"").replace(/\W+$/,"");return""===e?void 0:e},t.Pipeline.registerFunction(t.trimmer,"trimmer"),t.TokenStore=function(){this.root={docs:{}},this.length=0},t.TokenStore.load=function(t){var e=new this;return e.root=t.root,e.length=t.length,e},t.TokenStore.prototype.add=function(t,e,n){var n=n||this.root,i=t[0],o=t.slice(1);return i in n||(n[i]={docs:{}}),0===o.length?(n[i].docs[e.ref]=e,void(this.length+=1)):this.add(o,e,n[i])},t.TokenStore.prototype.has=function(t){if(!t)return!1;for(var e=this.root,n=0;n 2 | 3 | 4 | 5 | 6 | 7 | 8 | css工具 | Font-End-Resource 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 | 54 |
55 | 313 |
314 | 315 |
316 |
317 | 327 | 328 |
329 |
330 | 331 | 332 |
333 | 334 |

css工具

335 |
    336 |
  1. 天气的图标
    2. 337 |
  2. icomoon矢量图标
    3. 338 |
  3. 制作css　loading的网站
    4. 339 |
  4. Hover.css各种css的hover
    5. 340 |
  5. CSS3 Click Chart
    6. 341 |
  6. iHover
    7. 342 |
  7. Creative Button Styles
    8. 343 |
  8. connoratherton
    9. 344 |
  9. anicollection列举了很多css3的动画
    10. 345 |
  10. The Shapes of CSS列举了很多用css完成的类似三角形或者心形
    11. 346 |
  11. Single Element CSS Spinners又是一些css loading状态
    12. 347 |
  12. Ultimate CSS Gradient Generator渐变的css生成
    13. 348 |
  13. 三角形
    14. 349 |
  14. 图片转ico格式
    15. 350 |
  15. cssmenumaker
    16. 351 |
  16. 18 CSS Effect Libraries for Creating Beautiful Animations18个css动画的介绍
    17. 352 |
  17. Old Browser CSS Hacks
    18. 353 |
354 |

手册

355 |
    356 |
  1. CSS参考手册
    2. 357 |
  2. The Ultimate Guide to CSS
    3. 358 |
359 | 360 | 361 |
362 | 363 | 364 |
365 |
366 |
367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 |
375 |
376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 402 | 403 | 404 | 405 | 406 | 407 | -------------------------------------------------------------------------------- /_book/site/blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 博客 | Font-End-Resource 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 | 54 |
55 | 313 |
314 | 315 |
316 |
317 | 327 | 328 |
329 |
330 | 331 | 332 |
333 | 334 |

一些前端相关blog

335 |

（排名部分先后～～）

336 |
    337 |
  1. 司徒正美
    2. 338 |
  2. 沫鱼
    3. 339 |
  3. 汤姆大叔的博客 对js有些东西讲的相当不错
    4. 340 |
  4. 老赵 微博上各种黑～～不过知识面真是大
    5. 341 |
  5. 丸子 用sublime text2激活过程中搜到的
    6. 342 |
  6. justjavac(迷渡)
    7. 343 |
  7. 下一站永远 挺久没更新了。不过内容不错的
    8. 344 |
  8. tonyte
    9. 345 |
  9. 小胡子哥
    10. 346 |
  10. 颜海镜
    11. 347 |
  11. 张鑫旭 你会看到网上搜到很多css的东西都是会到他这边，css研究很多
    12. 348 |
  12. 堂主
    13. 349 |
  13. 阮一峰
    14. 350 |
  14. 雨夜带刀最近发现的。文章不多，但是写得都有不错
    15. 351 |
  15. 勾三股四
    16. 352 |
  16. 糖伴西红柿 经常看到这个头像。
    17. 353 |
  17. 贺师俊
    18. 354 |
  18. doyoe 超级棒
    19. 355 |
  19. 张克军
    20. 356 |
  20. winter
    21. 357 |
  21. cssforest
    22. 358 |
  22. Franky
    23. 359 |
  23. 周文彬 这个要支持。。看过很多他的东西不错
    24. 360 |
  24. 叶小钗
    25. 361 |
362 |

前端团队的博客

363 |
    364 |
  1. 百度EFE
    2. 365 |
366 | 367 | 368 |
369 | 370 | 371 |
372 |
373 |
374 | 375 | 376 | 377 | 378 | 379 | 380 | 381 |
382 |
383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 409 | 410 | 411 | 412 | 413 | 414 | -------------------------------------------------------------------------------- /_book/base/css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | css | Font-End-Resource 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 | 54 |
55 | 313 |
314 | 315 |
316 |
317 | 327 | 328 |
329 |
330 | 331 | 332 |
333 | 334 |

一些有关css的中间收集的不错的文章，也许有些会因为时间久了失效

335 |

博文

336 |

文本属性

337 |
    338 |
  1. 网页行内排版二三事
    2. 339 |
  2. CSS行高与行对齐精解：line-height 和 vertical-align
    3. 340 |
341 |

有关水平/垂直居中

342 |
    343 |
  1. 整理：子容器垂直居中于父容器的方案　整理的超级不错
    2. 344 |
  2. CSS实现垂直居中的5种方法
    3. 345 |
  3. Centering in CSS: A Complete Guide国外的，真是整理的超级牛逼
    4. 346 |
  4. 由浅入深漫谈margin属性有关于magin的解析
    5. 347 |
  5. 不要告诉我你懂margin 同4
    6. 348 |
349 |

其他css

350 |
    351 |
  1. css选择器的性能问题 看完之后顿时跟以前的想法反了
    2. 352 |
  2. 纯CSS气泡框实现方法探究
    3. 353 |
  3. 伪类和伪元素区别 挺不错的。涨知识了，原来以前叫的都是错误的东西
    4. 354 |
  4. 浅谈html语义化
    5. 355 |
  5. 编写可维护的CSS
    6. 356 |
  6. 有关拟写高效CSS的文章
    7. 357 |
  7. 黑科技loading-css-without-blocking-render
    8. 358 |
  8. bootstrap关于一些规范的文章
    9. 359 |
  9. About normalize.css
    10. 360 |
  10. Dawn CSS Reset一些常见的css reset的对比
    11. 361 |
  11. csswgCSS 规范都可以在这里归类找到
    12. 362 |
  12. Demos of open web technologies
    13. 363 |
364 |

Sass

365 |
    366 |
  1. 保持Sass的简单
    2. 367 |
368 |

教程

369 |
    370 |
  1. 学习css布局
    2. 371 |
372 | 373 | 374 |
375 | 376 | 377 |
378 |
379 |
380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 |
388 |
389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 415 | 416 | 417 | 418 | 419 | 420 | -------------------------------------------------------------------------------- /_book/performance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 性能 | Font-End-Resource 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
52 | 53 | 54 |
55 | 313 |
314 | 315 |
316 |
317 | 327 | 328 |
329 |
330 | 331 | 332 |
333 | 334 |

performance

335 |

测试工具

336 |
    337 |
  1. 阿里测
    2. 338 |
  2. 百度应用性能监测中心
    3. 339 |
  3. webpagetest
    4. 340 |
  4. 奇云测
    5. 341 |
  5. 12 个最好的免费网站速度和性能测试工具
    6. 342 |
  6. Web页面性能测试工具浅析
    7. 343 |
344 |

css性能

345 |
    346 |
  1. csstrigger
    2. 347 |
  2. CSS Test Creator
    3. 348 |
  3. CSScomb对写的css代码进行优化，仅仅是顺序优化，但是对压缩的结果会有影响
    4. 349 |
  4. uncss将无用的css移除
    5. 350 |
  5. Css shrinkcss的高级压缩
    6. 351 |
  6. StyleStats评价css的一个网站
    7. 352 |
  7. TestMyCSS: Optimize and Check Your CSS Performance测试css的性能
    8. 353 |
  8. 个站 CSS 性能优化
    9. 354 |
  9. 拆分关键CSS(Critical CSS)
    10. 355 |
  10. Authoring Critical Above-the-Fold CSS
    11. 356 |
357 |

　其他文章

358 |
    359 |
  1. 移动前端系列 — 移动页面性能优化
    2. 360 |
  2. Yahoo前端优化性能规则
    3. 361 |
  3. After Yahoo 34 Rules -- 网站性能优化新进展
    4. 362 |
  4. 移动H5前端性能优化指南
    5. 363 |
  5. 前端优化分的挺详细的
    6. 364 |
  6. webapp的优化整理
    7. 365 |
  7. 前端性能指南一个国外的整理的，这个是中文版的，很形象
    8. 366 |
  8. 关于浏览器并发数的那些事儿
    9. 367 |
  9. Optimizing Page Load Time
    10. 368 |
  10. Maximizing Parallel Downloads in the Carpool Lane
    11. 369 |
  11. 载入页面时使用多域名实现资源并行下载
    12. 370 |
  12. 优化性能谷歌的性能优化指南。看完还是有很多启发的
    13. 371 |
372 | 373 | 374 |
375 | 376 | 377 |
378 |
379 |
380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 |
388 |
389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 415 | 416 | 417 | 418 | 419 | 420 | --------------------------------------------------------------------------------