├── README.md ├── scaffolds ├── draft.md ├── page.md └── post.md ├── themes └── landscape │ ├── layout │ ├── page.ejs │ ├── tag.ejs │ ├── index.ejs │ ├── post.ejs │ ├── category.ejs │ ├── archive.ejs │ ├── _partial │ │ ├── post │ │ │ ├── tag.ejs │ │ │ ├── date.ejs │ │ │ ├── category.ejs │ │ │ ├── gallery.ejs │ │ │ ├── title.ejs │ │ │ └── nav.ejs │ │ ├── mobile-nav.ejs │ │ ├── archive-post.ejs │ │ ├── footer.ejs │ │ ├── sidebar.ejs │ │ ├── google-analytics.ejs │ │ ├── after-footer.ejs │ │ ├── archive.ejs │ │ ├── header.ejs │ │ ├── head.ejs │ │ └── article.ejs │ ├── _widget │ │ ├── tag.ejs │ │ ├── archive.ejs │ │ ├── tagcloud.ejs │ │ ├── category.ejs │ │ └── recent_posts.ejs │ └── layout.ejs │ ├── source │ ├── favicon.ico │ ├── fancybox │ │ ├── blank.gif │ │ ├── fancybox_loading.gif │ │ ├── fancybox_overlay.png │ │ ├── fancybox_sprite.png │ │ ├── fancybox_loading@2x.gif │ │ ├── fancybox_sprite@2x.png │ │ ├── helpers │ │ │ ├── fancybox_buttons.png │ │ │ ├── jquery.fancybox-thumbs.css │ │ │ ├── jquery.fancybox-buttons.css │ │ │ ├── jquery.fancybox-buttons.js │ │ │ ├── jquery.fancybox-thumbs.js │ │ │ └── jquery.fancybox-media.js │ │ └── jquery.fancybox.css │ ├── css │ │ ├── images │ │ │ └── banner.jpg │ │ ├── fonts │ │ │ ├── FontAwesome.otf │ │ │ ├── fontawesome-webfont.eot │ │ │ ├── fontawesome-webfont.ttf │ │ │ └── fontawesome-webfont.woff │ │ ├── _partial │ │ │ ├── comment.styl │ │ │ ├── footer.styl │ │ │ ├── sidebar-bottom.styl │ │ │ ├── mobile.styl │ │ │ ├── sidebar-aside.styl │ │ │ ├── sidebar.styl │ │ │ ├── archive.styl │ │ │ ├── header.styl │ │ │ ├── highlight.styl │ │ │ └── article.styl │ │ ├── _util │ │ │ ├── mixin.styl │ │ │ └── grid.styl │ │ ├── _extend.styl │ │ ├── _variables.styl │ │ └── style.styl │ └── js │ │ └── script.js │ ├── package.json │ ├── _config.yml │ ├── scripts │ └── fancybox.js │ ├── LICENSE │ ├── Gruntfile.js │ └── README.md ├── .gitignore ├── source └── _posts │ ├── 20150403_sum.md │ ├── 20160403-sum.md │ ├── 20140520_sum.md │ ├── 20140518_sum.md │ ├── 20140921_sum.md │ ├── 20150607_summary.md │ ├── 20151017-sum.md │ ├── 20150625_graduate.md │ ├── 20141009_browser.md │ ├── 20140716_metaviewport.md │ ├── 20141123_sum.md │ ├── 20140210_extend.md │ ├── 20150103_sum.md │ ├── 20140713_sum.md │ ├── 20150403_summary.md │ ├── 20150609_sum.md │ ├── 20140817_blockinline.md │ ├── 20140916_middle.md │ ├── 20140713_summarize.md │ ├── 20140210_block.md │ ├── 20141010_interview.md │ ├── 20150227_sum.md │ ├── 20140124_proto.md │ ├── 20160609-packagejson-md.md │ ├── 20140519_bootstrap.md │ ├── 20140210_this.md │ ├── 20140621_bfc.md │ ├── 20140914_performance.md │ ├── 20140528_cors.md │ ├── 20150203_viewport.md │ ├── 20140826_summary.md │ ├── 20140524_timeoutandinterval.md │ └── 20150713-performance.md ├── package.json └── _config.yml /README.md: -------------------------------------------------------------------------------- 1 | # tankptBlog 2 | hexo blog inital 3 | -------------------------------------------------------------------------------- /scaffolds/draft.md: -------------------------------------------------------------------------------- 1 | title: {{ title }} 2 | tags: 3 | --- 4 | -------------------------------------------------------------------------------- /scaffolds/page.md: -------------------------------------------------------------------------------- 1 | title: {{ title }} 2 | date: {{ date }} 3 | --- 4 | -------------------------------------------------------------------------------- /scaffolds/post.md: -------------------------------------------------------------------------------- 1 | title: {{ title }} 2 | date: {{ date }} 3 | tags: 4 | --- 5 | -------------------------------------------------------------------------------- /themes/landscape/layout/page.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/article', {post: page, index: false}) %> -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Thumbs.db 3 | db.json 4 | *.log 5 | node_modules/ 6 | public/ 7 | .deploy*/ -------------------------------------------------------------------------------- /themes/landscape/layout/tag.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/archive', {pagination: config.tag, index: true}) %> -------------------------------------------------------------------------------- /themes/landscape/layout/index.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/archive', {pagination: 2, index: true, hasShare:false}) %> -------------------------------------------------------------------------------- /themes/landscape/layout/post.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/article', {post: page, index: false, hasShare: true}) %> -------------------------------------------------------------------------------- /themes/landscape/layout/category.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/archive', {pagination: config.category, index: true}) %> -------------------------------------------------------------------------------- /themes/landscape/layout/archive.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/archive', {pagination: config.archive, index: true,hasShare:false}) %> -------------------------------------------------------------------------------- /themes/landscape/source/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/tankptBlog/master/themes/landscape/source/favicon.ico -------------------------------------------------------------------------------- /themes/landscape/source/fancybox/blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/tankptBlog/master/themes/landscape/source/fancybox/blank.gif -------------------------------------------------------------------------------- /themes/landscape/source/css/images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/tankptBlog/master/themes/landscape/source/css/images/banner.jpg -------------------------------------------------------------------------------- /themes/landscape/source/css/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/tankptBlog/master/themes/landscape/source/css/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /themes/landscape/source/fancybox/fancybox_loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/tankptBlog/master/themes/landscape/source/fancybox/fancybox_loading.gif -------------------------------------------------------------------------------- /themes/landscape/source/fancybox/fancybox_overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/tankptBlog/master/themes/landscape/source/fancybox/fancybox_overlay.png -------------------------------------------------------------------------------- /themes/landscape/source/fancybox/fancybox_sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/tankptBlog/master/themes/landscape/source/fancybox/fancybox_sprite.png -------------------------------------------------------------------------------- /themes/landscape/source/fancybox/fancybox_loading@2x.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/tankptBlog/master/themes/landscape/source/fancybox/fancybox_loading@2x.gif -------------------------------------------------------------------------------- /themes/landscape/source/fancybox/fancybox_sprite@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/tankptBlog/master/themes/landscape/source/fancybox/fancybox_sprite@2x.png -------------------------------------------------------------------------------- /themes/landscape/source/css/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/tankptBlog/master/themes/landscape/source/css/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /themes/landscape/source/css/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/tankptBlog/master/themes/landscape/source/css/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /themes/landscape/source/css/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/tankptBlog/master/themes/landscape/source/css/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /themes/landscape/source/fancybox/helpers/fancybox_buttons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Tankpt/tankptBlog/master/themes/landscape/source/fancybox/helpers/fancybox_buttons.png -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/post/tag.ejs: -------------------------------------------------------------------------------- 1 | <% if (post.tags && post.tags.length){ %> 2 | <%- list_tags(post.tags, { 3 | show_count: false, 4 | class: 'article-tag' 5 | }) %> 6 | <% } %> -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/mobile-nav.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /themes/landscape/layout/_widget/tag.ejs: -------------------------------------------------------------------------------- 1 | <% if (site.tags.length){ %> 2 |
3 |

Tags

4 |
5 | <%- list_tags() %> 6 |
7 |
8 | <% } %> -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/post/date.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /themes/landscape/layout/_widget/archive.ejs: -------------------------------------------------------------------------------- 1 | <% if (site.posts.length){ %> 2 |
3 |

Archives

4 |
5 | <%- list_archives() %> 6 |
7 |
8 | <% } %> -------------------------------------------------------------------------------- /themes/landscape/layout/_widget/tagcloud.ejs: -------------------------------------------------------------------------------- 1 | <% if (site.tags.length){ %> 2 |
3 |

Tag Cloud

4 |
5 | <%- tagcloud() %> 6 |
7 |
8 | <% } %> -------------------------------------------------------------------------------- /themes/landscape/layout/_widget/category.ejs: -------------------------------------------------------------------------------- 1 | <% if (site.categories.length){ %> 2 |
3 |

Categories

4 |
5 | <%- list_categories() %> 6 |
7 |
8 | <% } %> -------------------------------------------------------------------------------- /themes/landscape/source/css/_partial/comment.styl: -------------------------------------------------------------------------------- 1 | #comments 2 | background: #fff 3 | box-shadow: 1px 2px 3px #ddd 4 | padding: article-padding 5 | border: 1px solid color-border 6 | border-radius: 3px 7 | margin: block-margin 0 8 | a 9 | color: color-link -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/post/category.ejs: -------------------------------------------------------------------------------- 1 | <% if (post.categories && post.categories.length){ %> 2 |
3 | <%- list_categories(post.categories, { 4 | show_count: false, 5 | class: 'article-category', 6 | style: 'none', 7 | separator: '►' 8 | }) %> 9 |
10 | <% } %> -------------------------------------------------------------------------------- /themes/landscape/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hexo-theme-landscape", 3 | "version": "0.0.1", 4 | "private": true, 5 | "devDependencies": { 6 | "grunt": "~0.4.2", 7 | "load-grunt-tasks": "~0.2.0", 8 | "grunt-git": "~0.2.2", 9 | "grunt-contrib-clean": "~0.5.0", 10 | "grunt-contrib-copy": "~0.4.1" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /themes/landscape/source/css/_partial/footer.styl: -------------------------------------------------------------------------------- 1 | #footer 2 | background: color-footer-background 3 | padding: 50px 0 4 | border-top: 1px solid color-border 5 | color: color-grey 6 | a 7 | color: color-link 8 | text-decoration: none 9 | &:hover 10 | text-decoration: underline 11 | 12 | #footer-info 13 | line-height: line-height 14 | font-size: 0.85em -------------------------------------------------------------------------------- /themes/landscape/source/css/_partial/sidebar-bottom.styl: -------------------------------------------------------------------------------- 1 | .widget-wrap 2 | margin-bottom: block-margin !important 3 | @media mq-normal 4 | column(sidebar-column) 5 | 6 | .widget-title 7 | color: #ccc 8 | text-transform: uppercase 9 | letter-spacing: 2px 10 | margin-bottom: 1em 11 | line-height: 1em 12 | font-weight: bold 13 | 14 | .widget 15 | color: color-grey -------------------------------------------------------------------------------- /themes/landscape/_config.yml: -------------------------------------------------------------------------------- 1 | # Header 2 | menu: 3 | 首页: / 4 | 存档: /archives 5 | rss: /atom.xml 6 | 7 | # Content 8 | excerpt_link: 阅读全文 9 | fancybox: true 10 | 11 | # Sidebar 12 | sidebar: right 13 | widgets: 14 | - category 15 | - tag 16 | - tagcloud 17 | - archive 18 | - recent_posts 19 | 20 | # Miscellaneous 21 | google_analytics: 22 | favicon: /favicon.ico 23 | twitter: 24 | google_plus: 25 | -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/archive-post.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | <%- partial('post/date', {class_name: 'archive-article-date', date_format: 'MMM D'}) %> 5 | <%- partial('post/title', {class_name: 'archive-article-title'}) %> 6 |
7 |
8 |
-------------------------------------------------------------------------------- /themes/landscape/source/css/_partial/mobile.styl: -------------------------------------------------------------------------------- 1 | #mobile-nav 2 | position: absolute 3 | top: 0 4 | left: 0 5 | width: mobile-nav-width 6 | height: 100% 7 | background: color-mobile-nav-background 8 | border-right: 1px solid #fff 9 | 10 | .mobile-nav-link 11 | display: block 12 | color: color-grey 13 | text-decoration: none 14 | padding: 15px 20px 15 | font-weight: bold 16 | &:hover 17 | color: #fff 18 | -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/post/gallery.ejs: -------------------------------------------------------------------------------- 1 | <% if (post.photos && post.photos.length){ %> 2 |
3 |
4 | <% post.photos.forEach(function(photo, i){ %> 5 | 6 | 7 | 8 | <% }) %> 9 |
10 |
11 | <% } %> -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/footer.ejs: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /themes/landscape/layout/_widget/recent_posts.ejs: -------------------------------------------------------------------------------- 1 | <% if (site.posts.length){ %> 2 |
3 |

Recents

4 |
5 | 12 |
13 |
14 | <% } %> -------------------------------------------------------------------------------- /source/_posts/20150403_sum.md: -------------------------------------------------------------------------------- 1 | title: 去年今天 2 | date: 2015-04-03 22:37:37 3 | tags: 感悟 4 | --- 5 | 6 | 关于今天 7 | 8 | 9 | ##关于今天## 10 | 去年的今天早上我先坐了一趟公交再一趟地铁,最后再一趟公交到达实习的公司,被hr还吭了一把,竟然忘记把我列在访客名单里面,结果在公司门口傻站了半小时,后来好多事情也证明了这个HR是相当不靠谱的。然后签了协议最后被老大领到部门去,带我的师姐带我去领电脑,开始各种配环境。 11 | 12 | 这是人生中第一家实习的公司,回想起来还是很怀念的。现在想想,在这家公司涨了很多的眼界,看到了很多的的东西学到了很多的东西,认识了很多人,真的很感激在那里遇到的各位。视觉姐姐、老大、后端、楠哥、测试姐姐们,真的很感谢你们。一年的时间说长不长,说短也不短,转眼就过去了,我猜以我的性格估计会记着很久吧。怀念我以前的座位,组内无节操的玩笑,公司的早餐,还有公司坑爹的班车,公司里面的游戏厅,还有做过两次就被肌肉拉伤的健身房,一起实习的小伙伴们。 13 | 14 | 祝大家顺利,希望下一个一年更精彩 -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/sidebar.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/post/title.ejs: -------------------------------------------------------------------------------- 1 | <% if (post.link){ %> 2 |

3 | 4 |

5 | <% } else if (post.title){ %> 6 | <% if (index){ %> 7 |

8 | <%= post.title %> 9 |

10 | <% } else { %> 11 |

12 | <%= post.title %> 13 |

14 | <% } %> 15 | <% } %> -------------------------------------------------------------------------------- /themes/landscape/layout/layout.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/head') %> 2 | 3 |
4 |
5 | <%- partial('_partial/header') %> 6 |
7 |
<%- body %>
8 | <% if (theme.sidebar && theme.sidebar !== 'bottom'){ %> 9 | <%- partial('_partial/sidebar') %> 10 | <% } %> 11 |
12 | <%- partial('_partial/footer') %> 13 |
14 | <%- partial('_partial/mobile-nav') %> 15 | <%- partial('_partial/after-footer') %> 16 |
17 | 18 | -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/google-analytics.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.google_analytics){ %> 2 | 13 | <% } %> -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hexo-site", 3 | "version": "0.0.0", 4 | "private": true, 5 | "hexo": { 6 | "version": "3.1.1" 7 | }, 8 | "dependencies": { 9 | "hexo": "^3.0.1", 10 | "hexo-generator-archive": "^0.1.0", 11 | "hexo-generator-category": "^0.1.0", 12 | "hexo-generator-index": "^0.1.0", 13 | "hexo-generator-tag": "^0.1.0", 14 | "hexo-renderer-ejs": "^0.1.0", 15 | "hexo-renderer-stylus": "^0.2.0", 16 | "hexo-renderer-marked": "^0.2.4", 17 | "hexo-server": "^0.1.2", 18 | "hexo-deployer-git": "0.0.4", 19 | "hexo-generator-sitemap": "^1.0.1", 20 | "hexo-generator-feed": "^1.0.1" 21 | } 22 | } -------------------------------------------------------------------------------- /themes/landscape/source/css/_partial/sidebar-aside.styl: -------------------------------------------------------------------------------- 1 | #sidebar 2 | @media mq-normal 3 | column(sidebar-column) 4 | 5 | .widget-wrap 6 | margin: block-margin 0 7 | 8 | .widget-title 9 | @extend $block-caption 10 | 11 | .widget 12 | color: color-sidebar-text 13 | text-shadow: 0 1px #fff 14 | background: color-widget-background 15 | box-shadow: 0 -1px 4px color-widget-border inset 16 | border: 1px solid color-widget-border 17 | padding: 15px 18 | border-radius: 3px 19 | a 20 | color: color-link 21 | text-decoration: none 22 | &:hover 23 | text-decoration: underline 24 | ul, ol, dl 25 | ul, ol, dl 26 | margin-left: 15px 27 | list-style: disc -------------------------------------------------------------------------------- /themes/landscape/source/css/_partial/sidebar.styl: -------------------------------------------------------------------------------- 1 | if sidebar is bottom 2 | @import "sidebar-bottom" 3 | else 4 | @import "sidebar-aside" 5 | 6 | .widget 7 | @extend $base-style 8 | line-height: line-height 9 | word-wrap: break-word 10 | font-size: 0.9em 11 | ul, ol 12 | list-style: none 13 | margin: 0 14 | ul, ol 15 | margin: 0 20px 16 | ul 17 | list-style: disc 18 | ol 19 | list-style: decimal 20 | 21 | .category-list-count 22 | .tag-list-count 23 | .archive-list-count 24 | padding-left: 5px 25 | color: color-grey 26 | font-size: 0.85em 27 | &:before 28 | content: "(" 29 | &:after 30 | content: ")" 31 | 32 | .tagcloud 33 | a 34 | margin-right: 5px -------------------------------------------------------------------------------- /themes/landscape/scripts/fancybox.js: -------------------------------------------------------------------------------- 1 | var rUrl = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[.\!\/\\w]*))?)/; 2 | 3 | /** 4 | * Fancybox tag 5 | * 6 | * Syntax: 7 | * {% fancybox /path/to/image [/path/to/thumbnail] [title] %} 8 | */ 9 | 10 | hexo.extend.tag.register('fancybox', function(args){ 11 | var original = args.shift(), 12 | thumbnail = ''; 13 | 14 | if (args.length && rUrl.test(args[0])){ 15 | thumbnail = args.shift(); 16 | } 17 | 18 | var title = args.join(' '); 19 | 20 | return '' + 21 | '' + title + '' 22 | '' + 23 | (title ? '' + title + '' : ''); 24 | }); -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/post/nav.ejs: -------------------------------------------------------------------------------- 1 | <% if (post.prev || post.next){ %> 2 | 22 | <% } %> -------------------------------------------------------------------------------- /themes/landscape/source/css/_util/mixin.styl: -------------------------------------------------------------------------------- 1 | // http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ 2 | hide-text() 3 | text-indent: 100% 4 | white-space: nowrap 5 | overflow: hidden 6 | 7 | // http://codepen.io/shshaw/full/gEiDt 8 | absolute-center(width, height = width) 9 | // margin: auto 10 | // position: absolute 11 | // top: 50% 12 | // top: 0 13 | // left: 0 14 | // bottom: 0 15 | // right: 0 16 | // width: width 17 | // height: height 18 | // overflow: auto 19 | width: width 20 | height: height 21 | position: absolute 22 | top: 50% 23 | left: 50% 24 | margin-top: width * -0.5 25 | margin-left: height * -0.5 26 | 27 | avoid-column-break() 28 | vendor("column-break-inside", avoid, only: webkit) 29 | page-break-inside: avoid // for firefox 30 | overflow: hidden // fix for firefox 31 | break-inside: avoid-column 32 | -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/after-footer.ejs: -------------------------------------------------------------------------------- 1 | <% if (config.disqus_shortname){ %> 2 | 15 | <% } %> 16 | 17 | 18 | 19 | <% if (theme.fancybox){ %> 20 | 21 | 22 | <% } %> 23 | 24 | <%- js('js/script') %> -------------------------------------------------------------------------------- /themes/landscape/source/fancybox/helpers/jquery.fancybox-thumbs.css: -------------------------------------------------------------------------------- 1 | #fancybox-thumbs { 2 | position: fixed; 3 | left: 0; 4 | width: 100%; 5 | overflow: hidden; 6 | z-index: 8050; 7 | } 8 | 9 | #fancybox-thumbs.bottom { 10 | bottom: 2px; 11 | } 12 | 13 | #fancybox-thumbs.top { 14 | top: 2px; 15 | } 16 | 17 | #fancybox-thumbs ul { 18 | position: relative; 19 | list-style: none; 20 | margin: 0; 21 | padding: 0; 22 | } 23 | 24 | #fancybox-thumbs ul li { 25 | float: left; 26 | padding: 1px; 27 | opacity: 0.5; 28 | } 29 | 30 | #fancybox-thumbs ul li.active { 31 | opacity: 0.75; 32 | padding: 0; 33 | border: 1px solid #fff; 34 | } 35 | 36 | #fancybox-thumbs ul li:hover { 37 | opacity: 1; 38 | } 39 | 40 | #fancybox-thumbs ul li a { 41 | display: block; 42 | position: relative; 43 | overflow: hidden; 44 | border: 1px solid #222; 45 | background: #111; 46 | outline: none; 47 | } 48 | 49 | #fancybox-thumbs ul li img { 50 | display: block; 51 | position: relative; 52 | border: 0; 53 | padding: 0; 54 | max-width: none; 55 | } -------------------------------------------------------------------------------- /themes/landscape/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Tommy Chen 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /source/_posts/20160403-sum.md: -------------------------------------------------------------------------------- 1 | title: Back 2 | date: 2016-04-03 10:54:25 3 | tags: 总结 4 | --- 5 | 6 | 最近好像得了懒癌综合症,都快大半年没有在gitbub上有过push,终究应了那句话,人是倾向于懒散的状态,貌似所有的物质都是这样的趋于一种懒散的状态,难得假期,外面淅淅沥沥下着下雨 7 | 8 | 9 | 10 | 11 | ## 关于工作 12 | 13 | 这半年来,到年前为止主要做的是一个项目,算是一个从入职以来一直跟随的项目,归属感还是蛮强的,项目的实现还是蛮有意思的,虽然这一过程中还是做的挺累的,三个人维护的项目,最后到我手里一个人来维护,扛起大旗,项目一开始接手的过程中,都是各种吐槽,没有文档没有注释,而且项目里面使用的一个框架是其中一个人自己的一个很轻量级的类库,看懂这个项目,还花了点时间去了解这样的设计思路,后续会简单介绍下这样的实现思路 14 | 15 | 16 | 貌似现在回想起来这半年一直都是忙忙忙,没怎么留下时间给自己去思考去折腾去研究新东西,所以最近强制自己去看以前的一些订阅文章,知识面的东西还是不能落后,而且前端这个领域真的不得不说,更新尼玛太快了,一段时间不去看,貌似很容易会落伍,强制玩起了twitter,看看国外的开发者的分享,这点感觉确实国人学习新技术,语言上面还是有一定的成本,不是说看不懂,而且理解需要一定的成本,这也许可以解释,为啥前端的东西基本上都是国外的领跑 17 | 18 | 19 | ## 碎碎念 20 | 21 | 看看了我的github的提交记录,最近的一次是在去年的10月6号,咳咳,不知道怎么表达我嫌弃自己的情绪了,跟以前完全不是一个风格,不过确实也是忙的,没时间做点自己想玩的东西了,一回到家就不想动,就想躺着。 22 | 23 | 不过这半年来,也算是学了点皮毛,虽然我自己感觉还在入门阶段,react、redux,webpack,node,koa,sequlize都接触了点点,越来越觉得自己好菜,好多东西都不会,而边上的老大真是叼咂天,偷听过几次他的面试,他面别人,问的问题,我也不会,好尴尬,深度也是蛮大的,反思下,貌似很多的下,仅仅停留在的会用上,原理底层的东西还是不知道 24 | 25 | ## 欠缺的东西 26 | 27 | 与人与业务方相处还是需要蛮大的能力的,技术上也还有欠缺的挺多的,后端的东西,react,redux,打包,shell脚本,好歹现在所处的环境都有比较大的机会来训练学习 28 | 29 | 30 | 31 | end~ -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/archive.ejs: -------------------------------------------------------------------------------- 1 | <% if (pagination == 2){ %> 2 | <% page.posts.each(function(post){ %> 3 | <%- partial('article', {post: post, index: true ,hasShare: hasShare || false}) %> 4 | <% }) %> 5 | <% if (page.total > 1){ %> 6 | 12 | <% } %> 13 | <% } else { %> 14 | <% var last; %> 15 | <% page.posts.each(function(post, i){ %> 16 | <% var year = post.date.year(); %> 17 | <% if (last != year){ %> 18 | <% if (last != null){ %> 19 | 20 | <% } %> 21 | <% last = year; %> 22 |
23 |
24 | <%= year %> 25 |
26 |
27 | <% } %> 28 | <%- partial('archive-post', {post: post, even: i % 2 == 0}) %> 29 | <% }) %> 30 | <% if (page.posts.length){ %> 31 |
32 | <% } %> 33 | <% } %> -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/header.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /themes/landscape/source/css/_extend.styl: -------------------------------------------------------------------------------- 1 | $block-caption 2 | text-decoration: none 3 | text-transform: uppercase 4 | letter-spacing: 2px 5 | color: color-grey 6 | margin-bottom: 1em 7 | margin-left: 5px 8 | line-height: 1em 9 | text-shadow: 0 1px #fff 10 | font-weight: bold 11 | 12 | $block 13 | background: #fff 14 | box-shadow: 1px 2px 3px #ddd 15 | border: 1px solid color-border 16 | border-radius: 3px 17 | 18 | $base-style 19 | h1 20 | font-size: 2em 21 | h2 22 | font-size: 1.5em 23 | h3 24 | font-size: 1.3em 25 | h4 26 | font-size: 1.2em 27 | h5 28 | font-size: 1em 29 | h6 30 | font-size: 1em 31 | color: color-grey 32 | hr 33 | border: 1px dashed color-border 34 | strong 35 | font-weight: bold 36 | em, cite 37 | font-style: italic 38 | sup, sub 39 | font-size: 0.75em 40 | line-height: 0 41 | position: relative 42 | vertical-align: baseline 43 | sup 44 | top: -0.5em 45 | sub 46 | bottom: -0.2em 47 | small 48 | font-size: 0.85em 49 | acronym, abbr 50 | border-bottom: 1px dotted 51 | ul, ol, dl 52 | margin: 0 20px 53 | line-height: line-height 54 | ul, ol 55 | ul, ol 56 | margin-top: 0 57 | margin-bottom: 0 58 | ul 59 | list-style: disc 60 | ol 61 | list-style: decimal 62 | dt 63 | font-weight: bold -------------------------------------------------------------------------------- /source/_posts/20140520_sum.md: -------------------------------------------------------------------------------- 1 | title: 开心?健康?选择 2 | date: 2014-05-21 00:18:52 3 | tags: 感悟 4 | --- 5 | 6 | 下班路上听到一个员工的一些感悟。恩,挺有道理 7 | 8 | 9 | ##健康## 10 |   昨晚晚上九点下班,坐在公司的班车上,听到边上一个大叔,也许不是大叔,看他的皮肤声音什么的感觉应该差不多是30多岁的感觉,但是看他头发什么的感觉好老了,也许就是程序员的苦逼吧。快下车的时候听到大叔说了个冷笑话,说他以前是在某加班很猛的公司工作的,他说工资给的确实是很多,多的比其他一般的公司要高一两倍,不过加班确实挺多,有时候项目急的时候,都需要连着工作几天,然后说加班熬夜什么的对人的内脏还是什么的肾还是很伤的,头发都会掉很多的,然后说了一个冷笑话如下:一个名人说他比不过它身边的人,只能跟他们比身体了,看谁活的长,以后到他们的墓前来见他们,恩,笑话完毕,总结起来就是健康第一。 11 | ##开心## 12 |   前段时间跟同在实习的一个舍友聊天,谈到现在实习小组的氛围,他的反馈是他那边的人工作的氛围很死,他们就是把工作当做一个任务在做,每天做完就走了,跟身边的同事交流很少。相比起来,我这边倒是还是挺好的了,只是貌似多多少少有那么一点重女轻男的感觉了,不过也没啥,这个我也好体谅,换做是我去招人什么的,我也喜欢妹子的,氛围还是很nice,私下他们经常在群里聊天开玩笑,看着也挺有意思的。但不知道为啥,还是多多少少有那么一点没融进去,现在实习快俩个月了,也不知道自己提升了多少,不过继续努力吧。记得组长在有一次的开会中提到了一个问题,就是要发挥自己的能动性,带动周围的人,提高自己个人的影响力,还有一点就是最重要的就是快乐的工作,真的很nice。 13 | ##选择## 14 |   这段时间周围的同学好多在谈论实习跳槽的问题,有几个都在实习的过程中找好了下家,然后跳来跳去,也完全忽略了之前入职之前签的约定,虽然说实习生那个约定却是没有任何的效应,但是我个人的价值观什么的都是不会让我自己这么去做,感觉这是一种失去诚偌的感觉,最夸张的一个同学刚入职俩周不到,就跳到某公司去了,还有一个同学都开始在计划下面俩家了,每家都呆一段时间,不晓得他是为了混简历上的内容还是为了啥,感觉有点欺骗公司的感觉,这些都是在招用你前的时候就会向你确认的实习时间,而这样跳来跳去不是在骗么。虽说是为了个人利益,但是有点掉人品吧,欺骗。 15 | ##结尾## 16 |   也许是吐槽,也许是嫉妒别人,记得之前看过一句话,他强由他强,做好自己即可,毕竟感觉技术的东西都是需要时间来堆积的,比不上别人学一个领域多年积累,自己只能花时间去填补不足,这也有点稍稍感叹下以前自己本科有点太荒废时间了,恩,珍惜当下。 17 |   惊闻一个同学今天拿到某国内一流游戏公司的offer,祝福他,一会混的更好,是金子总是可以发光的,只是可能时间需要比较长。 18 | 19 | 20140521 00:21 20 | by tankpt 21 | hangzhou 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /themes/landscape/source/css/_util/grid.styl: -------------------------------------------------------------------------------- 1 | ///////////////// 2 | // Semantic.gs // for Stylus: http://learnboost.github.com/stylus/ 3 | ///////////////// 4 | 5 | // Utility function — you should never need to modify this 6 | // _gridsystem-width = (column-width + gutter-width) * columns 7 | gridsystem-width(_columns = columns) 8 | (column-width + gutter-width) * _columns 9 | 10 | // Set @total-width to 100% for a fluid layout 11 | // total-width = gridsystem-width(columns) 12 | total-width = 100% 13 | 14 | ////////// 15 | // GRID // 16 | ////////// 17 | 18 | body 19 | clearfix() 20 | width: 100% 21 | 22 | row(_columns = columns) 23 | clearfix() 24 | display: block 25 | width: total-width * ((gutter-width + gridsystem-width(_columns)) / gridsystem-width(_columns)) 26 | margin: 0 total-width * (((gutter-width * .5) / gridsystem-width(_columns)) * -1) 27 | 28 | column(x, _columns = columns) 29 | display: inline 30 | float: left 31 | width: total-width * ((((gutter-width + column-width) * x) - gutter-width) / gridsystem-width(_columns)) 32 | margin: 0 total-width * ((gutter-width * .5) / gridsystem-width(_columns)) 33 | 34 | push(offset = 1) 35 | margin-left: total-width * (((gutter-width + column-width) * offset) / gridsystem-width(columns)) 36 | 37 | pull(offset = 1) 38 | margin-right: total-width * (((gutter-width + column-width) * offset) / gridsystem-width(columns)) -------------------------------------------------------------------------------- /themes/landscape/Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt){ 2 | grunt.initConfig({ 3 | gitclone: { 4 | fontawesome: { 5 | options: { 6 | repository: 'https://github.com/FortAwesome/Font-Awesome.git', 7 | directory: 'tmp/fontawesome' 8 | }, 9 | }, 10 | fancybox: { 11 | options: { 12 | repository: 'https://github.com/fancyapps/fancyBox.git', 13 | directory: 'tmp/fancybox' 14 | } 15 | } 16 | }, 17 | copy: { 18 | fontawesome: { 19 | expand: true, 20 | cwd: 'tmp/fontawesome/fonts/', 21 | src: ['**'], 22 | dest: 'source/css/fonts/' 23 | }, 24 | fancybox: { 25 | expand: true, 26 | cwd: 'tmp/fancybox/source/', 27 | src: ['**'], 28 | dest: 'source/fancybox/' 29 | } 30 | }, 31 | _clean: { 32 | tmp: ['tmp'], 33 | fontawesome: ['source/css/fonts'], 34 | fancybox: ['source/fancybox'] 35 | } 36 | }); 37 | 38 | require('load-grunt-tasks')(grunt); 39 | 40 | grunt.renameTask('clean', '_clean'); 41 | 42 | grunt.registerTask('fontawesome', ['gitclone:fontawesome', 'copy:fontawesome', '_clean:tmp']); 43 | grunt.registerTask('fancybox', ['gitclone:fancybox', 'copy:fancybox', '_clean:tmp']); 44 | grunt.registerTask('default', ['gitclone', 'copy', '_clean:tmp']); 45 | grunt.registerTask('clean', ['_clean']); 46 | }; -------------------------------------------------------------------------------- /source/_posts/20140518_sum.md: -------------------------------------------------------------------------------- 1 | title: 一点小感 2 | date: 2014-05-18 17:16:42 3 | tags: 感悟 4 | --- 5 | 6 | 难得一个安逸的周末,静下来整理下心情,继续出发 7 | 8 | 9 | 10 | # 感想 11 | 12 | --- 13 | 14 |   难得一个安逸的周末,从四月实习到现在,一个半月了,貌似都没有好好呆着的周末,两次回学校答辩,两次遇上五一清明回家,还有几次跟亲人出去玩,刚好这俩天天气也不错,绵绵小雨,最爱。寝室呆了一天,图书馆半天,宅了下。
15 |   貌似很久都没写过什么东西,之前在考研一周年的时候,当时感情特别的强烈,回忆了去年当时自己的经历,本来想写个文章,可因为各种事情又加自己懒惰了,就然后没然后了。现在想起来也想不起之前自己的那种情感,上周回学习打包了自己的所有东西,跟实验室的几个小伙伴一起最后的聚会,貌似也是难得的一个实验室的四个人,从去年的暑假开始一直至今,记得当时带我们的一个罗boss说过一句话,几个人在茫茫人海中相遇也是一种缘分。恩,大师栋爷and小米,最后一起吃了顿饭,我记得有螺丝,烤鱼,坑爹的西红柿,鸡块,还有一个菜忘记了,然后去了金逸去看电影,到了竟然电影院系统维护停止播放了,真是运气坎坷,这都能遇到,后台又去了来福士貌似,看蜘蛛侠,电影一般,环境比较吭,太闷了。第二天大师早早的走了,下午我也收拾了下大概三四点也回杭州了,回来看到小米发了一个短信,“本来也不觉得冷清,我们这一会去然后又走,突然觉得有点冷清”。想想也是的,那边留下的也没几个同学了。离开的时候还是感慨多多的,不过时间一久就会忘记了,所以以后有感觉的时候一定要及时记录下来,过去了就过去了。
16 |   再说说实习这一个半月来的感受,整个team真的氛围很nice,点赞,团队文化么。我总结起来就是没节操。哈哈,挺符合我的style的,可惜团队这边人挺多的,应该最后留下的机会挺少的,anyway还是要好好努力学东西,感觉整个组里的都挺厉害的,组长真是低调的大神,感觉能钓起整个组的氛围还有凝聚力,真是厉害,管理加技术都好。这一个多月里,学到了挺多的东西,而且一开始接受东西的强度也挺大的。不过真心觉得自己有点怂,学东西好慢,跟同学比起来还是有点不行,anyway加油,慢慢积累,感觉技术的东西都是需要用时间来积累的,加油了,不过确实想吐槽下这个js库真是好难入手,有点略坑。
17 |   这一个月来,很多东西都荒废了,demo好久没做了,博客好久没写了。积累的东西好久没总结了,接口太多了,准备尝试着给自己列一个计划,规定一个日期做完,这样好有监督作用,一周一个list,之前看到博客上也有人这么做的,坚持吧,今天看到一个文章,里面说着现在做事情根本就还轮不到拼天赋的时候,因为现在身边的人能做到勤奋都已经很不容易了,所以不要用什么别人比你聪明扯淡的话了。 18 | 19 | 1.完成邮件模块博客 20 | 2.完成js定时器博客 21 | 3.完成js文章推荐博客 22 | 4.将之前的bootstrap的资源整理下 23 | 5.有时间写一点banckbone.js的demo 24 | 25 | 26 |   刚打开人人网,看了下状态看到学弟学妹们在转发一些毕业季的照片了,还没毕业在准备毕业的东西了,好怀念大学,一下子感情又涌出来了,恩,差点眼泪都出来了,也许前二十年里最美好的年华就是大学本科了,至少我现在是这么想的,祝远在各地的同学幸福健康。 27 | 28 | 2014.05.18 29 | 30 | hangzhou 31 | 32 | by Tankpt 33 | -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/head.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <% 6 | var title = page.title; 7 | 8 | if (is_archive()){ 9 | title = 'Archives'; 10 | 11 | if (is_month()){ 12 | title += ': ' + page.year + '/' + page.month; 13 | } else if (is_year()){ 14 | title += ': ' + page.year; 15 | } 16 | } else if (is_category()){ 17 | title = 'Category: ' + page.category; 18 | } else if (is_tag()){ 19 | title = 'Tag: ' + page.tag; 20 | } 21 | %> 22 | <% if (title){ %><%= title %> | <% } %><%= config.title %> 23 | 24 | 25 | 26 | 27 | 28 | <%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus}) %> 29 | <% if (theme.rss){ %> 30 | 31 | <% } %> 32 | <% if (theme.favicon){ %> 33 | 34 | <% } %> 35 | 36 | <%- css('css/style') %> 37 | 38 | <%- partial('google-analytics') %> 39 | -------------------------------------------------------------------------------- /themes/landscape/source/css/_variables.styl: -------------------------------------------------------------------------------- 1 | // Colors 2 | color-default = #555 3 | color-grey = #999 4 | color-border = #ddd 5 | color-link = #258fb8 6 | color-background = #eee 7 | color-sidebar-text = #777 8 | color-widget-background = #ddd 9 | color-widget-border = #ccc 10 | color-footer-background = #262a30 11 | color-mobile-nav-background = #191919 12 | color-twitter = #00aced 13 | color-facebook = #3b5998 14 | color-pinterest = #cb2027 15 | color-google = #dd4b39 16 | 17 | // Fonts 18 | font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif 19 | font-serif = Georgia, "Times New Roman", serif 20 | font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace 21 | font-icon = FontAwesome 22 | font-icon-path = "fonts/fontawesome-webfont" 23 | font-icon-version = "4.0.3" 24 | font-size = 14px 25 | line-height = 1.6em 26 | line-height-title = 1.1em 27 | 28 | // Header images/banner.jpg 29 | logo-size = 40px 30 | subtitle-size = 16px 31 | banner-height = 350px 32 | banner-url = "//7vzsgl.com1.z0.glb.clouddn.com/blogbanner.jpg?imageMogr2/crop/!1920x530a0a66" 33 | 34 | sidebar = hexo-config("sidebar") 35 | 36 | // Layout 37 | block-margin = 50px 38 | article-padding = 20px 39 | mobile-nav-width = 280px 40 | main-column = 9 41 | sidebar-column = 3 42 | 43 | if sidebar and sidebar isnt bottom 44 | _sidebar-column = sidebar-column 45 | else 46 | _sidebar-column = 0 47 | 48 | // Grids 49 | column-width = 80px 50 | gutter-width = 20px 51 | columns = main-column + _sidebar-column 52 | 53 | // Media queries 54 | mq-mobile = "screen and (max-width: 479px)" 55 | mq-tablet = "screen and (min-width: 480px) and (max-width: 767px)" 56 | mq-normal = "screen and (min-width: 768px)" -------------------------------------------------------------------------------- /themes/landscape/source/css/_partial/archive.styl: -------------------------------------------------------------------------------- 1 | .archives-wrap 2 | margin: block-margin 0 3 | 4 | .archives 5 | clearfix() 6 | 7 | .archive-year-wrap 8 | margin-bottom: 1em 9 | 10 | .archive-year 11 | @extend $block-caption 12 | 13 | .archives 14 | column-gap: 10px 15 | @media mq-tablet 16 | column-count: 2 17 | @media mq-normal 18 | column-count: 3 19 | 20 | .archive-article 21 | avoid-column-break() 22 | 23 | .archive-article-inner 24 | @extend $block 25 | padding: 10px 26 | margin-bottom: 15px 27 | 28 | .archive-article-title 29 | text-decoration: none 30 | font-weight: bold 31 | color: color-default 32 | transition: color 0.2s 33 | line-height: line-height 34 | &:hover 35 | color: color-link 36 | 37 | .archive-article-footer 38 | margin-top: 1em 39 | 40 | .archive-article-date 41 | color: color-grey 42 | text-decoration: none 43 | font-size: 0.85em 44 | line-height: 1em 45 | margin-bottom: 0.5em 46 | display: block 47 | 48 | #page-nav 49 | clearfix() 50 | margin: block-margin auto 51 | background: #fff 52 | box-shadow: 1px 2px 3px #ddd 53 | border: 1px solid color-border 54 | border-radius: 3px 55 | text-align: center 56 | color: color-grey 57 | overflow: hidden 58 | a, span 59 | padding: 10px 20px 60 | a 61 | color: color-grey 62 | text-decoration: none 63 | &:hover 64 | background: color-grey 65 | color: #fff 66 | .prev 67 | float: left 68 | .next 69 | float: right 70 | .page-number 71 | display: inline-block 72 | @media mq-mobile 73 | display: none 74 | .current 75 | color: color-default 76 | font-weight: bold 77 | .space 78 | color: color-border -------------------------------------------------------------------------------- /source/_posts/20140921_sum.md: -------------------------------------------------------------------------------- 1 | title: 九月小结 2 | date: 2014-09-21 21:44:22 3 | tags: 感悟 4 | --- 5 | 6 | 九月开学了,周围的学生也慢慢开始多了起来,暑假过去了,貌似想想以后都不会有暑假了,差不多是告别了学生的时代的感觉了,最近的身边的事还是发生了好多,改缕缕整理下了。 7 | 8 | 9 | ##关于工作## 10 | ###没好好用心### 11 | 平时天天还在公司里实习,这俩天工作有点多,其实想想也不多,貌似就是自己的能力不行,很多东西都没有好好去理解,心里还是有点想着在这段时间好好准备找工作的事情,然后那些业务的东西说真的没有好好去用心,恩,早点把工作的事情确定下来,好安心地投入进去 12 | 13 | ###细节把握不好,态度还需加强### 14 | 这俩天感觉有点乱了手脚了,bug老出,这一方面对自己的信心不好,另一方面让测试也不好,这样有一个恶性循环的过程,不过其中也有不错的收获的地方,就是又踩到了几个坑,恩,感觉工作久的那些走过的路,看过的东西多就多在了经验上,这点我还是决定挺开心的,不停实践,学到其中的坑是最好的收获 15 | 16 | ###将心比心,态度### 17 | 那天发生了一个事情,大概是这样的,老大问了大家十一请假不,然后一堆人一直都没回复,老大那天不开心,说了一句话“如果向期望别人对你热心点,那你怎么不先热情点呢?”。这句话还是挺受用的,与人于己都是好的 18 | 19 | ###主动!!### 20 | 那天遇到一个事情,就是向他们要一个链接,我向分给我工作的人A询问,他说问B,问了B之后说问C,C又说问D,反正这个东西问了一圈都不知道,然后建了一个群,问了他们,结果我冷场了没人理我,挺尴尬的,关于这个问题,想了下,一方面确实是他们做事的不对,这样的踢皮球的行为确实不太好,对工作的效率很影响,不过另一方面,于己,在问了他们没反应后,我也没有主动过去问,处于了一个等待的过程中,**很被动**,这是病,要治。 21 | 22 | 23 | ##生活## 24 | 25 | ###朋友--人生苦短,及时行乐,珍惜身边的朋友和亲人### 26 | 这周末大学的舍长结婚了,很遗憾没去,说个良心话,不是不想去,是下周有个面试,我也很看重那个面试,想好好准备,来回的时间有点短而折腾,所以那天拍了一个祝福视频发过去,说实话,好紧张,那个视频我自己大概拍了有十遍吧,还是很不自然,会紧张,傻傻的笑,好丢人,感觉在大学的时光里,我错过了很多,错过了很多跟他们一起玩的时光,我当时傻傻的在自习室里看逗比的书,发呆睡觉,那效率现在想想真是可笑。然后跟他们在一起,我会不知道怎么跟他们搭话,貌似看的东西跟他们的很不同 27 | **但是我真的真的很享受跟他们在一起的时光,大学舍友,不曾忘记,剩下的我只能做到的是努力不错过他们每个人的婚礼。** 28 | 29 | 30 | ###身体### 31 | 最近有点忙,对身体有点亏待了,最近的腰有点不舒服,估计是腰肌劳损,哎,IT的就是这样。身体永远是第一,多多锻炼,周末去打球跑步了,来弥补下缺少的运动 32 | 33 | 34 | ##周围## 35 | 36 | ###关于阿里马云### 37 | 这周阿里上市了,股票飚的飞起,让阿里里面多少人一夜之间变成了千万过亿的土豪,很多人都羡慕不已,感叹自己为啥没有在阿里,或者感叹自己为啥不是那些初始的创始人,或者是早年进去阿里的人,我也这么感叹,但是后来看了一个视频突然就不感叹了,大概就是说了几个初始人之前是怎么走过来的,那时多么的不容易,突然就可以想通了,大家就看到了他们现在风光,没看到他们过去的艰难,他们能走过以前那个坎,现在所得的都是他们deserve 38 | 39 | 所有能熬过最艰难的时刻的人,最后成功了也是他们应得的,貌似有句话是这样说的,**每一个人的选择都不是对的,但是他们能做的可以在一会努力去让他们的选择变为正确**,所以没有什么好羡慕的,换成你,你也做不到那样的心态。 40 | 41 | ###关于多隆码神### 42 | 还有一个关于阿里的是最近听说的阿里的码神-多隆,码到了p11,成为了合伙人,从一开始初创的时候就在里面了,一直到现在为止,想想现在的人呢,还是很浮躁的,一个地方待了一段时间就会想着跳槽什么的,而他确是一口气在里面做了这么多年,你可以么? 43 | 44 | 45 | the end 46 | 47 | by tankpt 48 | 49 | 20140921 hangzhou xixi -------------------------------------------------------------------------------- /source/_posts/20150607_summary.md: -------------------------------------------------------------------------------- 1 | title: 写在实习满三个月 2 | date: 2015-06-07 22:40:41 3 | tags: 感悟 4 | --- 5 | 6 | 最近三个月来的总结。 7 | 8 | 9 | 10 | 11 | ### 实习三个月总结 12 | 13 |   来到新公司差不多也快有三个月了,接了几个移动客户端上的项目,感觉确实是移动端的页面还是挺蛋疼的,业务上面的东西也能并不是很难,但是兼容性的问题确实好麻烦,各种奇葩的安卓手机还有IOS,以及不完备的客户端。 14 |   三个月以来想想自己貌似没啥特别多的产出,相反总感觉自己做的东西好少,不知道为啥会这样,总感觉接到的完成的项目好少,有点点以数量为主的观念了。 15 |   不过确实有一点也是真的,这三个月来做的东西,抽离出来的组件的东西比以往任何时候都多了: 16 |   1. 抽取了一个下来加载的组件,中间遇到了几个还是比较有意思的问题,控制何时切换没有更多的文案、控制好何时触发这个加载请求的时机 17 |   2. 抽取了一个日历:这个其实是参考了网上开源的一个项目,本身也很简短,我这边把其进行进一步的简化处理,然后结合业务制作了一个新的日历控件,做完了觉得好像没有一开始想象的那么困难[小马过河的一种感觉] 18 |   3. 做了一个[slide](https://github.com/Tankpt/slide)的东西,类似ppt一样可以进行切换,用了animate.css的基础库,进行了简单的配对,然后组合了差不多有30中动画的效果,后来又将css打包的功能进行了优化,做到只把用到动画内容加载进去 19 |   4. 针对后来好多页面进行发布的时候,出现了需要手动替换内容,以及手动配置打点信息,资源路径替换的问题,经常需要好久才能替换好,这个过程笔记费时间,而且可以在可见的未来遇见这个项目的东西还会继续增长,所以做了三个打包的插件,分别处理这几个问题[grunt-auto-spm](https://github.com/Tankpt/grunt-auto-spm)自动配置打点信息、[grunt-combo-reverse](https://github.com/Tankpt/grunt-combo-reverse)把那些combo形式的资源进行逆解析、[grunt-urlformate](https://github.com/Tankpt/grunt-urlformate)把页面中的相对路径转化为项目的绝对路径,并同时可以配置cnd路径,熟悉了下npm的发布以及吊砸天的正则 20 |   总结一下就是感觉踩吭踩的飞起,感觉一些客户端的提供的api差距还是相当的大,要是他们可以合力推动,这样也许会给基于他们的开发更为便利,提供一整套一样的api,不过还好有厉害的同学将他们进行了封装。还有一点就是之前遇到position:fix与虚拟键盘的问题,确实折腾了好久,后来最终都没有找到一个好的解决方案,然后绕开试用这个属性来解决。这也未尝不是一种不错的解决方案。避开绕开bug雷区 21 | 22 | ### D-Day 23 | 24 | 机智的我在四月多1折买了门票,然后看完感觉没啥特别大的收获,可能他们说的东西自己也没多大的学习,不过见到了好多业内的出名的人,不过还是有几个点觉得比较有意思 25 | 1. 小胖的ppt的形式不错,手写还真是有心意 26 | 2. 不四大大的关于0.0.0三位版本号的解释给我一点点启发,哈哈,已经用在项目中了,还有就是他说的几个神一样的js的问题{}-[] []-{} []+{} {}+[]真是无法理解。。。 27 | 28 | ### 插件 29 | 30 | 这次也是偶然的机会,然后自己尝试了下grunt插件的开发,一开始还真是不太习惯,不过写了一个后就顺手多了,三个都发布到npm上面去了,真是好忐忑,突破了0,也尝试了一些node文件流的操作,感觉还挺有意思的。不过这次做的三个插件都是比较水的,说白了只要用正则都可以解决的问题,后面的就是简单的replace工作,正则真是好蛋疼,差不多有一半的时间折腾在了正则上面,不过貌似也学了点皮毛。以后慢慢深入 31 | 32 | ### 计划 33 | 34 | 想了几个简答的计划不知道能不能完成,哈哈。画个大饼也不错 35 | 1. position:fix与虚拟键盘问题的整理 36 | 2. angular对原来项目重写一次,顺便好好学下 37 | 3. node做一个聊天室 38 | 4. node来一个git star的东西 -------------------------------------------------------------------------------- /source/_posts/20151017-sum.md: -------------------------------------------------------------------------------- 1 | title: 新的起点 2 | date: 2015-10-17 21:38:13 3 | tags: 总结 4 | --- 5 | 6 | 灵感一现,写点东西 7 | 8 | 9 | 10 | 11 | ## 关于工作 12 | 13 | 好久没有写博客,不过前几天刚刚顺利入职转正了,开始了一段新的历程,关于最近也确实是忙,不过自己也确实是变懒了,少了以前在学校时光里的那种折腾琢磨和执着。 14 | 15 | 看了日子,今天是入职以来的第96天貌似,马上就要100天了。想想真是好快,离开校园走向职场,慢慢开始做各种不同的项目,少了学校里的几分单纯和简单,多了几分生活中的压力。 16 | 17 | 身边的同事都挺nice的,对于我这样的同学还是会很耐心的指导我,遇到的一些后端也很nice,在这样的氛围里真的挺好的。真是公司的规模确实有点太大,有些合作起来资源配合还是很麻烦的,效率也很低,不过这也没办法。 18 | 19 | ## 关于最近的项目 20 | 21 | 手指算了算,从入职以来到现在,差不多做了有四五个+的项目,感受还是蛮多的 22 | 23 | ### 一个老项目 24 | 25 | 当时也只是leader随手分配的一个任务,没想到在这一段时间里,大大小小维护了三期,改版了三次,总结起来就是坑~~ 26 | 27 | 前人的老代码,不知道多了过久了,也不知道中间是否还有人去维护过,里面混杂的好恶心的逻辑,而且最后重构完发现还有一些多余的东西,这不是明摆着加大后期人员维护的难度么 28 | 29 | ### 一个作为支援方的项目 30 | 31 | 这个项目的就是感觉前期的准备不充分,一开始的时候计划的很美好,到实践起来的时候发现,各种组件不能调用,同样的一段逻辑,提供给三方跟二方的竟然需要写两套。原来的类库设计者也没考虑好,这个真是坑出翔了 32 | 33 | 还有就是每个人同时都在做几个并行的东西,无力顾及这个项目,感觉自己在其中也做了一会推动者的感觉,感觉虽然很累,但是还是很有成就感,感觉在项目中主动去推动他发展比被动等待资源要好的太多了,不过需要多跑跑,多问问。而且全部的开发之间需要信息的沟通及时畅通,这次就遇到了互相不知道信息的情况 34 | 35 | ### 一个另类角度的项目 36 | 37 | 其实用另类角度这个词也不太对,只是里面代码写法以及组织方式跟自己的风格很不一样,对于我来说是一个完全的新事物,三个人写了三个端,目测以后我要一个人来hold住,要统一三个人的代码也是蛮刺激的,学习新东西的过程总是痛苦而刺激的 38 | 39 | 感觉整体的设计风格,虽然还没领悟到,但是他的实现方式就是继承的方式,这个我还是觉得非常亲切的,同时也比较支持这样的方式,虽然学习的成本有点大,但是非常方便。同时也吐槽下这个项目,一开始的设计没考虑到需要给其他人看吧,0注释也是醉了 40 | 41 | ### 总结 42 | 43 | 1. 对于恶心的代码,趁早重构!现在不改拖到后期只会让你更加恶心,小病不除,积累到大病就难了。别抱着这次的需求不涉及到就不改,因为很有可能以后还是你维护,至少自己看到了主动去重构也算是一个攒人品吧 44 | 2. 关于注释,其实我后来看到老大还特意邮件里提到了,注释里需要写的不是what而是更多的why,嗯,我赞同同时也不太赞同,我觉得就是一些稍微复杂的地方需要都写上,节省以后人的维护 45 | 3. 良好的css规范是非常重要的,比较好的语意化同时可以避免冲突,关于这点对于一个多人维护的大型项目是很重要的 46 | 4. 主动去推动项目的发展比被动等待资源要好的太多 47 | 5. 实现一个东西的方法有很多种,我们会经常习惯于自己最熟悉的东西,而不会去尝试新的,换个角度去看问题也许会很不错 48 | 49 | 50 | ## 关于计划 51 | 52 | 想了想一个最近阶段性的计划 53 | 54 | 1. 好好hold住这个“另类”的项目,重构代码,从中吸取三个人的精华,好好总结,重构只是其中的一步。 55 | 2. 身体真的需要长期投资,好好工作,好好生活,偶尔也需要停停脚步思考下,调整下自己,多陪陪接人 56 | 3. 多关注些互联网的信息,增加知识面,懂点产品用研的东西,对于长期维护的项目,可以从产品的角度去推动发展他 57 | 58 | 59 | 60 | 61 | 写在最后,希望等我入职一周年的时候,可以想起来当初给自己留的话:极致,好奇心。要把手里的事情做到极致,永远保持一颗向上的好奇心,探索挖掘 -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Hexo Configuration 2 | ## Docs: http://hexo.io/docs/configuration.html 3 | ## Source: https://github.com/hexojs/hexo/ 4 | 5 | # Site 6 | title: Tankpt's blog 7 | subtitle: 8 | description: 9 | author: Tankpt 10 | language: zh-CN 11 | timezone: 12 | 13 | # URL 14 | ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' 15 | url: http://tankpt.github.io/ 16 | root: / 17 | permalink: :year/:month/:day/:title/ 18 | permalink_defaults: 19 | 20 | # Directory 21 | source_dir: source 22 | public_dir: public 23 | tag_dir: tags 24 | archive_dir: archives 25 | category_dir: categories 26 | code_dir: downloads/code 27 | i18n_dir: :lang 28 | skip_render: 29 | 30 | # Writing 31 | new_post_name: :title.md # File name of new posts 32 | default_layout: post 33 | titlecase: false # Transform title into titlecase 34 | external_link: true # Open external links in new tab 35 | filename_case: 0 36 | render_drafts: false 37 | post_asset_folder: false 38 | relative_link: false 39 | future: true 40 | highlight: 41 | enable: true 42 | line_number: true 43 | tab_replace: 44 | 45 | # Category & Tag 46 | default_category: uncategorized 47 | category_map: 48 | tag_map: 49 | 50 | # Date / Time format 51 | ## Hexo uses Moment.js to parse and display date 52 | ## You can customize the date format as defined in 53 | ## http://momentjs.com/docs/#/displaying/format/ 54 | date_format: YYYY-MM-DD 55 | time_format: HH:mm:ss 56 | 57 | # Pagination 58 | ## Set per_page to 0 to disable pagination 59 | per_page: 10 60 | pagination_dir: page 61 | 62 | # Extensions 63 | ## Plugins: http://hexo.io/plugins/ 64 | ## feed 65 | feed: 66 | type: atom 67 | path: atom.xml 68 | limit: 20 69 | ## sitemap 70 | sitemap: 71 | path: sitemap.xml 72 | ## Themes: http://hexo.io/themes/ 73 | theme: landscape 74 | 75 | # Deployment 76 | ## Docs: http://hexo.io/docs/deployment.html 77 | deploy: 78 | type: git 79 | repository: https://github.com/Tankpt/Tankpt.github.io.git 80 | branch: master -------------------------------------------------------------------------------- /source/_posts/20150625_graduate.md: -------------------------------------------------------------------------------- 1 | title: 致我将要逝去的学生时代 2 | date: 2015-06-25 22:07:39 3 | tags: 感悟 4 | --- 5 | 6 | 心里数数离毕业的时光也没几天了。有点淡淡的忧伤,致我将要逝去的学生狗生活 7 | 8 | 9 | 10 | ## 0. 开始 11 | 前几天见老同学一起吃了个饭,不知道为啥又突然聊起了,问自己读的这个研究生怎么样的感觉,我差不多是不假思索的回答:不要太爽,嗯啊。真的是跟自己原来脑中所想的计划的所要的生活不太一样,原来理解的读研生活就是天天躲在实验室里面,跟一群小伙伴,coding,看paper发paper,打dota,但是实际上是读研的时间里面,有大部分时光都是在外面实习,辗转了两家公司,见过了很多的人,想想这两年的时光里面,我们处于半学生半工作的状态(其实是全职的实习,但是又可以比较自由的请假),所以跟一般的学生也确实不太一样,感受了很多,总结起来就是学生狗最好了,但是答辩的时候跟实验室的导师这么聊起来,他回了一句"但是就是学生经济不能独立",我竟无法反驳。 12 | 后来我跟我同学又说,幸好当年考研没考上心想的那个学院(感谢当年考试那个咳嗽磕到死的同学,让我考英语烦燥成了傻逼,差一点点就弃考重来一年,意料之中的挂了单科),调剂到了现在的这个学院,要是当时考上了也许此时此刻正在苦逼看论文,怎么说呢,各有好坏,两年的时间混到了一个文凭,但是说实话质量不高,这个也承认。还好运气好,从实习到工作一路真的很顺,感谢眷顾我的运气以及一路帮忙罩着我的同学、同事、亲人,只能送一个么么哒。anyway,顺其自然,因上努力,果上随缘。 13 | 14 | ## 1. 关于过去## 15 | 昨晚习惯性的睡前刷刷手机, 看到一个同学发了个状态说:今年的毕业季,然。。并没有多少感觉。 16 | 想想也是,本科毕业的时候,最近几天应该是纸醉金迷吧,喝喝喝不停吃喝,人生第一次喝吐也是献给了大学毕业,唱k,貌似最后都会来一首华健小哥的《朋友》来伤感一把,要是记得没错,我当时是最后一个走的(虽然被舍长来一把回马枪,然后用我留下的刮胡啫喱在寝室重要的柯南不挂科头像上面画了一个logo 122,看完好伤感,貌似这个头像一点没用,好歹当年电路期中考试考了个52挂了一次)。 17 | 当时最后的几天是把同学一个个都送别,校门口,然后默默的忍不住泪点,我的泪点其实很低的,那天送峰哥哥,睡了四年的一个屋子的舍友,百年修的同船渡,千牛修的共枕眠,我猜,我跟所有舍友们应该刚好修了500年。走的时候,最后一拥,我也受不了,泪点出来了。 18 | 离开西安的那天,是小崔还有肖博士(哈哈~),一起送的,把我和玉佩一直送到了火车上,最后离别的时候挥了挥手,记得当时玉佩都不敢看窗外,一看泪就出来,但是我敢看,因为眼睛大,可以装一会泪。 19 | 嗯,我就是这么怀旧,怎么了。过去的好。我不敢忘记,坏的早已淡去,可是发现年纪越来越大,不敢忘记的也会记不起来记性跟不上了,不过相信要是有一天大家又聚在了一起,一定又是喝酒吹牛逼,各位估计好多都已成家,家里贤妻估计还有小娃娃,啊哈哈。祝过去的一直很好。 20 | 21 | ## 2. 关于现在 22 | 这几天开始忙忙碌碌的毕业收尾工作,论文的收尾,一些离校手续的办理,还有房子也还没找,东西还杂乱的堆在寝室,毕业旅行也还没开始,想想我也真是一个超级拖延晚期患者,这个病什么时候才会好。 23 | 现在的毕业季,竟一点没有任何感觉,也许比起以前的毕业少了一份那种离别的感觉(想想以前的舍友,八个人没有俩是在一个地方的),而如今最好的几个小伙伴,全部都是在杭州,想见了只要公交过去,便可以去他们的豪宅们坐坐,少了几分那种散步天涯的感觉。两年的时间,说句实话,班里的人认识很少,在实验室混,就认识了几个实验室的同学,班里的估计也就是几个比较活跃的认识点。很多估计名字都说不上来,好尴尬。 24 | 25 | ## 3. 关于未来 26 | 好歹时光永远是公平的一维性。逝去便不会再回来,再怎么纠结,我还是变成了老的学生狗,传说中的老狗么?曾经在老公司实习的时候,好歹在开发组里也是最年轻的一枚孩子,还可以跟视觉交互卖萌来讨价还价,还可以赢得好喝不上火的加多宝一罐,可是现在发现已经老了,很多93or更年轻的孩子都来了,真是感慨时光都去哪里了,已经卖不动了,年轻就是最大的资本,可以比你多两年的时间来尝试,真是羡慕哇。 27 | 考虑到我打死也不要读博,也肯定考不上,纪念我逝去的学生狗的日子,一去肯定没了。 28 | 希望以后的日子也能够顺利,可以同事小伙伴请务必继续罩我,我也会争取三好,好好生活,好好工作,好好学习。 29 | 30 | 31 | 谨此献给此刻6.25的我,期待下一个阶段不同的我 32 | -------------------------------------------------------------------------------- /themes/landscape/source/css/style.styl: -------------------------------------------------------------------------------- 1 | @import "nib" 2 | @import "_variables" 3 | @import "_util/mixin" 4 | @import "_util/grid" 5 | 6 | global-reset() 7 | 8 | input, button 9 | margin: 0 10 | padding: 0 11 | &::-moz-focus-inner 12 | border: 0 13 | padding: 0 14 | 15 | @font-face 16 | font-family: FontAwesome 17 | font-style: normal 18 | font-weight: normal 19 | src: url(font-icon-path + ".eot?v=#" + font-icon-version) 20 | src: url(font-icon-path + ".eot?#iefix&v=#" + font-icon-version) format("embedded-opentype"), 21 | url(font-icon-path + ".woff?v=#" + font-icon-version) format("woff"), 22 | url(font-icon-path + ".ttf?v=#" + font-icon-version) format("truetype"), 23 | url(font-icon-path + ".svg#fontawesomeregular?v=#" + font-icon-version) format("svg") 24 | 25 | html, body, #container 26 | height: 100% 27 | 28 | body 29 | background: color-background 30 | font: font-size font-sans 31 | 32 | .outer 33 | clearfix() 34 | max-width: (column-width + gutter-width) * columns + gutter-width 35 | margin: 0 auto 36 | padding: 0 gutter-width 37 | 38 | .inner 39 | column(columns) 40 | 41 | .left, .alignleft 42 | float: left 43 | 44 | .right, .alignright 45 | float: right 46 | 47 | .clear 48 | clear: both 49 | 50 | #container 51 | position: relative 52 | 53 | .mobile-nav-on 54 | overflow: hidden 55 | 56 | #wrap 57 | height: 100% 58 | width: 100% 59 | position: absolute 60 | top: 0 61 | left: 0 62 | transition: 0.2s ease-out 63 | z-index: 1 64 | background: color-background 65 | .mobile-nav-on & 66 | left: mobile-nav-width 67 | 68 | if sidebar and sidebar isnt bottom 69 | #main 70 | @media mq-normal 71 | column(main-column) 72 | 73 | if sidebar is left 74 | #main 75 | float: right 76 | 77 | @import "_extend" 78 | @import "_partial/header" 79 | @import "_partial/article" 80 | @import "_partial/comment" 81 | @import "_partial/archive" 82 | @import "_partial/footer" 83 | @import "_partial/highlight" 84 | @import "_partial/mobile" 85 | 86 | if sidebar 87 | @import "_partial/sidebar" -------------------------------------------------------------------------------- /source/_posts/20141009_browser.md: -------------------------------------------------------------------------------- 1 | title: 从输入 URL 到页面加载完的过程中都发生了什么事情 2 | date: 2014-10-09 23:58:42 3 | tags: 总结 4 | --- 5 | 6 | 整理了关于输入url后的发生事件,未完待续,现在主要整理了dns还有解析html部分 7 | 8 | 9 | 10 | 11 | ##一、当在浏览器中输入一个网址的时候,首先会对输入的url进行判断,看他是否是一个标准的ip地址或者是域名;## 12 | 把URL分割成几个部分:协议、网络地址、资源路径。其中网络地址指示该连接网络上哪一台计算机,可以是域名或者IP地址,可以包括端口号;协议是从该计算机获取资源的方式,常见的是HTTP、FTP,不同协议有不同的通讯内容格式;资源路径指示从服务器上获取哪一项资源。 13 | 例如:http://www.guokr.com/question/554991/ 14 | 协议部分:http 15 | 网络地址:www.guokr.com 16 | 资源路径:/question/554991/ 17 | 18 | (1)如果输入的是域名,那么就要发生dns的查询 19 | 首先会查询浏览器中的缓存,然后再查看系统的缓存,接着还会查看路由器的缓存,关于dns的查找,请看博文[DNS原理及其解析过程精彩剖析](http://369369.blog.51cto.com/319630/812889/) 20 | 大致先查找本地host文件,再查找本地DNS解析器缓存,再查找首选DNS服务器 21 | 22 | (迭代查询方式:查考自王道的网络书籍) 23 | a.客户机向本地域名服务器发出DNS请求报文, 24 | b.本地域名服务器受到请求后,查询本地缓存,若没该记录,以nds客户的身份向**根域名服务器**发出解析请求 25 | c.根域名服务器受到请求后,判断是否属于.com域,将对应的**顶级域名服务器**的地址返回给本地域名服务器 26 | d.本地域名服务器向顶级域名服务器dns.com发起解析请求报文 27 | e.顶级域名服务器收到请求后,判断是否属于abc.com域,固将对应的**授权域名服务器**的地址返回给本地域名服务器 28 | f.本地域名服务器向授权域名服务器发起解析请求报文 29 | g.授权域名服务器受到请求后,将查询结果返回给本地域名服务 30 | h.本地域名服务器将查询的结果保存到本地的缓存中,同时返回给客户机 31 | 32 | ##二、浏览器向web服务器发起一个http的请求## 33 | 在这里有建立tcp链接的过程 34 | ##三、服务器的永久重定向响应## 35 | (从 http://example.com 到 http://www.example.com) 36 | 37 | ##四、浏览器跟踪重定向地址 浏览器向这个重定向的地址发起请求## 38 | ##五、服务器处理请求## 39 | ##六、服务器返回一个 HTTP 响应## 40 | ##七、浏览器显示 HTML## 41 | ###1 解析HTML以构建dom树### 42 | 解析html,将标签转化为内容树中的dom结点 43 | ###2 构建render树### 44 | render树是由一些含有颜色和大小等属性的矩阵组成 45 | 46 | (1) DOM树创建完成后DOMContentLoaded事件即触发,这时候可以用过script来操作DOM节点。在这里会涉及到css属性的重叠计算,就是计算出优先级的顺序; 47 | (2)css样式应用到DOM节点上,呈现树的每一个节点即为与其相对应的DOM节点的CSS框,框的类型与DOM节点的display属性有关,block元素生成block框,inline元素生成inline框。每一个呈现树节点都有与之相对应的DOM节点,但DOM节点不一定有与之相对应的呈现树节点,比如display属性为none的DOM节点,而且呈现树节点在呈现树中的位置与他们在DOM树中的位置不一定相同,比如float与绝对定位元素。 48 | ###3 布局render树### 49 | 看了一个博文中的介绍提到了在这一步中,貌似布局这点第二步确实是把css附着到了节点上去,不过有些布局是需要通过浏览器的窗口来进行计算的,比如那种设定好width && margin: 0 auto居中的元素,这一步做的应该都是把这些布局处理好,这一步是计算了具体的位置 50 | 51 | 注:当窗口在onresize的时候,会触发重绘 52 | 53 | ###4 绘制render树### 54 | 绘制应该就是把这些节点最后绘制在浏览中,包括了 55 | (1) 背景颜色 56 | (2) 背景图片 57 | (3) 边框 58 | (4) 子呈现树节点 59 | (5) 轮廓 60 | ##8.浏览器发送请求获取嵌入在HTML中的资源(如图片、音频、视频、CSS、JS等等)## 61 | ##9.浏览器发送异步请求## -------------------------------------------------------------------------------- /source/_posts/20140716_metaviewport.md: -------------------------------------------------------------------------------- 1 | title: 关于meta中viewportt 2 | date: 2014-07-16 16:57:47 3 | tags: js 4 | --- 5 | 6 | 之前做了一个手机端的页面。真是被吭出祥了,特比mark 7 | 8 | 9 | 10 | 11 | ###1.1 关于viewport### 12 | 有两个viewport的概念: 13 | 1.visual viewport:字面意思就是可视的view 14 | 2.layout viewport:字面的意思就是布局的view 15 | 在meta中设置的viewport中的width其实设置的是layout的数值 16 | 17 | 在Apple实现viewport后,其他浏览器也加入了对viewport meta的支持,但彼此间还是有些差异,差异最大的是layout viewport的表现:Safari iPhone: 980px,Opera: 850px,Android WebKit: 800px,IE: 974px 18 | 19 | ###1.2 visual viewport### 20 | 暂时的理解就是能看到的屏幕的宽度 21 | 22 | ###1.3 layout viewport### 23 | layout viewport不是指的页面在手机上最终显示的像素,而是指的整个页面所要显示的宽度,这个宽度到移动端最终显示出来的结果中间还会进行适当的处理;可以这么理解,layout viewport是你最初的页面宽度(比如是整个body的宽度,一般可能是设计稿中量出来的像素),然后移动端要将这个页面投影到手机的屏幕上去,如果屏幕的宽度是320,那么他会进行适当的缩放,使这个layout viewport的内容显示在屏幕上。 24 | 把一张原始的页面放到移动端,首先,你先要把那个页面放到一个容器里面去,而这个layout viewport就是这个容器的宽度,放进去之后,这个容器会进行根据移动端屏幕进行缩放。 25 | 26 | 这里涉及到像素的问题,就是设计稿中写的1px,跟手中显示屏中的物理1px,其实是俩回事,当你在对页面进行用手指放大或者是缩小的时候(前提是页面里允许你缩放),当你进行放大设计中的1px会占用物理的不止1px,反之缩小的时候,物理的1px其实放了设计中的不止1px的东西,具体的可以看看[这个文章][1] 27 | 28 | 所以如果在移动端的页面中要是写有定宽的比如640px,那么在meta中,要设置width要大于等于这个值,这点也很好理解,你要用一个容器去装这个页面,但是容器怎么可以比页面还小呢?(这里我也遇到过一次坑,就是试用了width=device-width,这里一般的都会是设备的宽度,都是320,当然要出问题了) 29 | 30 | ###1.4 其他### 31 | 不过貌似现在的移动端的写法都是width=device-width,而且之前看了几篇文章都是建议在移动端写东西不要进行定宽,为了自适应也许,关于这点可以看下[自适应网页设计][2],他就提倡不进行定宽,在我现有只是水平内,之前的那个问题暂时不知道怎么解决,就是定宽加width=device-width出现问题的情况。 32 | 对于不采用定宽,那就只能用百分比进行定位,那些出现的背景图,需要加一个background-position:contain撑满;或者用imag 33 | 34 | 最后来一个感觉不错的参考list 35 | 1.[两个viewport的故事(第二部分)][3] 貌似这个文章是很多写viewport的鼻祖,原文里也有英文的链接 36 | 2.[对于移动设备页面尺寸的理解][4] 看了很多文章一直都是晕的,看完这个就明了了很多 37 | 3.[探索viewport][5]相当不错 38 | 4.[坑爹的viewport][6] 39 | 40 | 41 | ps:从来没意识到meta是这么叼~~,再附上一个meta的其他属性 42 | [META http-equiv 大全][7] 43 | 44 | [1]:http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html 45 | [2]:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 46 | [3]:http://weizhifeng.net/viewports2.html 47 | [4]:http://blog.segmentfault.com/fishenal/1190000000495454?page=1 48 | [5]:http://librajt.github.io/2013/03/18/how-web-pages-show-on-mobile/ 49 | [6]:http://hax.iteye.com/blog/978184 50 | [7]:http://www.cnblogs.com/jerryshi/archive/2008/10/14/1310611.html -------------------------------------------------------------------------------- /source/_posts/20141123_sum.md: -------------------------------------------------------------------------------- 1 | title: 关于最近的一些想法 2 | date: 2014-11-23 12:28:18 3 | tags: 感悟 4 | --- 5 | 6 | 11月的一些感受 7 | 8 | 9 | 10 |   慵懒的周末,自然醒后去图书馆,看了会淘宝准备换个钢笔的吸墨器,然后给自己列了个表,最近貌似开始在催着交三方了,人也到了不得不做选择的时候了,感觉之前真是超级懒and太会逃避没有执行力,这也是病 11 | 12 | ##关于人心## 13 |   坐下来好好想了想,可能确实是第一份工作把,感觉不好抉择,也许给其他一些同学,他们反而会很知足,恩,其实刚毕业的时候,我觉得作为一个刚毕业的学生,既没工作经验也没资历,又何德何能给自己定一个很好的身价呢?当时我觉得毕业的时候,差不多月薪给我8K,我都会很满足了,不过受到之后遇到的一些同学的影响,慢慢开始"贪婪"了,不再满足于这个 14 |   恩,这就是人心把,永远不会有一个终点,当你小时候的时候,会觉得能买一辆赛车就是一种很幸福奢侈的事,长大一会估计是买一辆山地越野的自行车,再长大估计又是豪车...无止无尽 15 |   其实自己深知自己能力达到什么水平,能遇到这样的公司,都是运气好,毕竟才学一年的时间,又能达到什么水平呢,东西的积累远远还没达到那个量的积累 16 | 17 | ##关于纠结## 18 |   我一直都有一种选择恐惧症,当时毕业选择考研保研的时候,真是纠结,纠结的那个时间段里面,问了很多的人,看了很多的东西,折腾了半天,以至于那段时间里看书的效率很低,白天会纠结,晚上会纠结.最后还是自己做的选择咯,很多事情,别人只能给你一个参考,但是最后的选择都是自己要做的,毕竟这条路以后都是你一个人走完的. 19 |   前几天看到kindle中推送了一个文章,说的是我这类的纠结综合征,其实呢人之所以会纠结,因为这俩选择都差不多,应该都不错,就像天平两边的东西一样,你考虑到一个问题的时候一边重,考虑到另一个东西的时候另一边又重,文中甚至说了,对于这样的选择随便选一个都可以,因为他们都不会差,做好选择之后以后就是要靠你自己去坚持走下去,有点夸张其实,不过也差不多,自己好好考虑下就做个选择 20 |   昨天跟一个同学也谈到这个问题,他说了一句话感觉挺有道理的,就是遇到这样的选择,无论你选择哪个,最后你都会遗憾的,特别是在你走在你选择的道路上遇到挫折不顺的时候,抑或是看到别人走在你选择的那条道路上很顺利的时候,这些都是需要心态的问题了 21 |   想起来以前给自己写的话:**自己选择的路,就算跪也要把它跪完**,当时选择考研路上遇到不顺的时候就看看这句话,会好点,不停勉励自己 22 | 23 | ##关于工作## 24 |   上午坐在图书馆里,一开始是想给自己列一个表格,对不同的需求点进行打分,最后计算一个加权的数值进行评估来进行选择,其实我猜测到时候就算选择出来也不会特别干扰我的选择,按照自己的想法我给列了几点自己决定在工作上的一些评估点 25 | 26 | 1. 薪资 27 | 2. 工作环境,同事氛围 28 | 3.技术氛围 29 | 4.加班程度,生活 30 | 5.leader 31 | 6.产品的前景 32 | 7.成长空间 33 | 8.公司的平台 34 | 35 |   我也没按照重要性来排序,只是按照自己想出来的顺序依次排列了,不同的人对以上的几点有不同的排序,都是很直接的关系到自己的工作的,比如8,7等等这些,我以前对于工作的态度就是找一份工作一直干到退休,后来在同学的指导下慢慢改观了,这个互联网的行业里面这样的做法不太现实,一般都是干几年需要跳槽,也许把,不知道以后我会怎么样 36 |   还有一点也是最近看到的文章对我的影响很大的,就是关于工作和生活,我是一个比较偏激的人,感觉会很容易变成工作狂那类的人,所以以前根本不在意加班这种事情,但是后来看到一个文章介绍了下,**人之所以工作是为了什么呢**,很少部分的人是为了爱好把,更多的人是为了更好的生活,所以,如果以牺牲生活来工作,这样是不是又有点矛盾了,恩,以上都是不同人会有不同的选择 37 |   其实想了想,自己之所以会那么纠结是感觉身边的同学都是选择了另一条路,感觉那条路走的会很好,很光明,而就我选择这条路,总觉得自己比别人要低人一等的那种感觉,我内心又有那么一点点的不甘服输 38 | 39 | ##关于计划## 40 | 41 |   现在的执行力感觉不是0了,是负数了,一找完工作,感觉整个人都颓下去了,手里的能力也慢慢块退化了,前段时间有压力的时候,还是会不停的在回来的时间里动手折腾东西,而现在github上面.我看了下貌似有一个月没提交的空白了,哎,人的惰性,貌似有个科学原理解释到,所有的物质都是向着懒散的状态靠近的,果然确实是这样,人就跟机器一样,一段时间不动,估计要钝,刀会变钝 42 |   感觉之前给自己定了很多的计划,但是都只是计划,都没有付诸实施,然后就没有然后了,时间都是这样耗过去的,一小时一天一周一年~~,好好利用碎片时间吧 43 | 44 | 45 | 给下周列一个计划希望可以做完 46 | 47 | 1. 聊天工具 48 | 2. 研究HTML5中的媒体部分内容 49 | 3. 完成一个总结 -------------------------------------------------------------------------------- /source/_posts/20140210_extend.md: -------------------------------------------------------------------------------- 1 | title: js整理三:关于继承的方法 2 | date: 2014-11-10 00:15:57 3 | tags: js 4 | --- 5 | 6 | 写一些看到的继承的方法 7 | 8 | 9 | 10 | ##3.1简单的继承## 11 | 12 | 这个是参考了javascript高级程序设计一书上的继承方法,上一段代码如下 13 | 14 | function SuperType(){ 15 | this.name ="person"; 16 | } 17 | SuperType.prototype.getname = function(){ 18 | console.log(this.name); 19 | }; 20 | function Subtype(){ 21 | this.name = "man"; 22 | } 23 | Subtype.prototype = new SuperType(); 24 | var instance1 = new Subtype(); 25 | 26 | 然后再上一个图 27 | ![exten1](http://7vzsgl.com1.z0.glb.clouddn.com/blog20140210_extend1.jpg) 28 | 根据原型链的概念,SubType可以通过原型链去访问在SuperType中的方法getname,这就也差不多实现了继承的思想,最关键就是Subtype.prototype= new SuperType();这句话让Subtype.prototype为一个新建的SuperType对象,换个方式去理解,每次新建一个对象的时候,新的那个对象的__proto__属性都会指向构造这个对象的那个构造函数的原型,上述代码中,就是Subtype.prototype中的__proto__由原来指向objec.prototype变成了指向了SuperType.prototype,由此之后变可以通过原型链访问父类的属性。 29 | 还有一点需要注意的就是在这里name属性,在父类也有,在子类也有,子类会把父类的name给覆盖掉,对外呈现的就是在实例中的name,上述代码就是man。 30 | 31 | ##3.2稍微复杂点的继承## 32 | 先一个代码的部分 33 | 34 | function SuperType(name){ 35 | this.name = name; 36 | this.colors = ["red","blue","green"]; 37 | } 38 | SuperType.prototype.sayName = function(){ 39 | console.log(this.name); 40 | }; 41 | function SubType (name ,age){ 42 | SuperType.call(this,name); 43 | this.age = age; 44 | } 45 | SubType.prototype = new SuperType(); 46 | //SubType.prototype.constructor = SubType; 47 | SubType.prototype.sayAge = function(){ 48 | console.log(this.age); 49 | }; 50 | var instance1 = new SubType("niki",29); 51 | instance1.hasOwnProperty("name");//true 52 | instance1.hasOwnProperty("colors");//true 53 | instance1.hasOwnProperty("age");//true 54 | SubType.prototype.hasOwnProperty("name");//true 55 | SubType.prototype.hasOwnProperty("sayAge");//true 56 | SubType.prototype.hasOwnProperty("colors");//true 57 | 58 | 然后也上一个图片 59 | ![extend2](http://7vzsgl.com1.z0.glb.clouddn.com/blog20140210_extend2.jpg) 60 | 这个例子呢,其实继承的方式都是一样的,只不过在定义子类的方法中用到了call的方法,这里就是调用了SuperType的构造方法,还有一点需要注意的是SubType.prototype = new SuperType();会使得SubType.prototype的constructor属性指向父类的构造函数,如果需要让他指向SubType需要对他进行修改 61 | 62 | //==貌似在博客上看到过其他的,下次看完了一起补上 -------------------------------------------------------------------------------- /source/_posts/20150103_sum.md: -------------------------------------------------------------------------------- 1 | title: 2014总结 2 | date: 2015-01-03 19:47:49 3 | tags: 感悟 4 | --- 5 | 6 | 貌似本来想着跨年晚上就写这个总结的,但是拖延症又犯了,然后就拖来拖去,拖到了今天 7 | 8 | 9 | 10 | ##关于元旦## 11 | 元旦本来计划要回一趟母校.后来也慢慢被搁置了,没有去成,试试年前去一次.元旦三天的假期,头一天宅着睡觉看动漫,第二天陪姐姐去置办家具,晚上一起看了个电影,感觉一般,不过也有些两点,把一部抗战的电影能拍成这样,也真是不容易,确实徐克有才,第三天起来便一天置身去爬宝石山,说实话来这边半年多了,都还没去这边爬山过,而且就是在学校的门口 12 | 13 | 爬山的过程中还挺有意思的,感觉可以作为一个计划,没两个月或者一个月去爬爬山,感觉跟跑步是完全两个感觉,起初还是体力有点不适应,不过后来也慢慢变好了,爬山的过程中遇到几个挺有意思的事情 14 | 15 | 1. 在黄龙洞那边过去的路上,远远的听到一个老奶奶在唱歌,唱的都是一些感觉宋主英那类的歌曲,真是难得,一开始听声音,以为是个40左右的大妈,后来边上一个老爷爷搭讪了下,说这个大妈都80了,真是厉害,不容易,有这样的心态,常保年轻态 16 | 2. 第二个是爬到一个山顶的时候,看到一个大爷貌似类似在瑜伽一样,坐在瑜伽垫上面,但是听着佛教的音乐,然后感觉是在练拈花神功,哈哈,好有意思,周围很多人在围观,但是他依然可以沉醉在自己的神功中,难得 17 | 3. 第三个是在下山的时候,看到了一个小伙子,看样子应该跟我相仿,在爆爆米花,就是那种小时候才能看到的那种机器,出锅的时候,还跟周围的吆喝到:'出锅咯,要捂耳朵了',哈哈,一开始还没反应过来,后来才明白,然后捂住耳朵,崩的一声,爆米花,我过去买了一袋,为的一种情怀还有小时的记忆,我过去说,这个东西现在很少见咯,他说是呀,笑的很甜很干净,恩,就是跟小孩子脸上那种笑容一样,那一刻真是有点淡淡的触动,感觉应该一天的生意也不错,也许他真的是在做着自己喜欢做的事情,不为任何东西,祝小伙子以后更好 18 | 4. 中间还见到几个小盆友,哈哈,好可爱,特别是小女孩==!真是我的萌点,遇到一个母女,小女孩很可爱,妈妈跟爸爸电话的时候,小娃娃转头过去说,快给我说,然后就跟爸爸说:'爸爸,晚上带我去看电影好不好';真是心都化掉了 19 | 20 | ##关于工作## 21 | 咳咳,貌似最近的一些思考还有总结都会涉及到这个,也许真的是已经接触了工作了,所有经常会有一些想法,好歹这个时候工作的事情也确定了,恩,最后的决定是没留在实习的那边,说实话呢,我真的是纠结了很久很久,大概从拿到俩offer开始就纠结了,最后的决定也是差不多在一两天内决定的,差不多跟原计划反了一番,我也自己吓了一跳,不过决定之后人真的一下子很释然,很安静很平静,恩,我应该选了一个有挑战性的方向,剩下的就需要我自己充电加油,补上空缺的东西 22 | 23 | 前几天看到一句话,说的是人做事情,就跟跑步一样,貌似慢跑比跑跑停停要好的多,恩,想了下,最近这个渣状态也需要改改了,学习还是需要长时间的积累,貌似不是有一个3w小时的定律么?恩,每天需要拿出一个半小时的时间去学习,一小时专业的东西,半小时需要去接触一些专业外的,比如人文等等的东西,感觉理性思维还是需要跟感性的思维进行一个平衡,阴阳调和下,加油,看看能坚持多久 24 | 25 | ##关于这一年## 26 | 2014年怎么说呢,对我还是很重要的,这一年实现了从学生慢慢向工作转型的过程,感觉真的很不容易,第一次体会到了工作的压力,工作的疲惫,工作的责任,工作的协调,工友的相处,我发现我在人际方面还真的很欠缺(情商拙计) 27 | 28 | 有一天我突然想到,曾经13年考研失败的时候,我是多少不服调剂,心理是有多少的不甘心,当时去了那边真是心理多少的不平衡,差那么一点点就可以去一个更高的平台,恩,当时我真的是特别的不甘心,可现在回过头去想想,现在貌似混的也凑合,也许当时走那条路,我可能还没现在这么好,不是么? 不一定,哈哈,总的说来呢,条条大陆同罗马,走在自己的路上,就好好思考好好总结,走好自己的路,选择什么路并不重要,也不关键,重要厉害的是把每一条路都是走到成功的点,这样的人才不容易. 29 | 30 | 话说回来,平台这个东西的力量真是不容小觑,还有机缘,我真是算是见识到了,一个人要想把事做好,做成功,除了自己要努力,还有就是需要有机缘,人,还有平台的力量. 31 | 32 | 这一年我走的真的很顺说实话,真的没怎么遇到过挫折磨难,相比身边的几个同学,我貌似应该是最幸运的,实习中遇到的那些问题其实都不算是问题了,从找实习还有工作真是顺,不知道应该感谢谁,感谢周围的小伙伴,同学,还有导师,人超级好,教了很多道理,还有好多福利,嘿嘿,没有导师引的好头,后面估计也不会那么顺,真心感激,记得开题那天他说了一句话,工作么,开心最重要了,恩,很对;还有就是家人&&实习过程中的小盆友,谢谢你们,我才会这么幸运(关于实习的那部分,下次会特别写一篇,因为这占据了这大半年所有的时光,了了几子真是表达不清) 33 | 34 | ##关于检讨## 35 | 36 | 喂.说好的计划呢,都被丢哪里去了?为何这么得瑟,这么嚣张,渣渣还这么不肯努力,本来已经掉了别人几条街了,怎么还想再落后?既渣又懒,前途未卜 37 | 38 | 恩,毕设没做,恩,之前计划的聊天室也没做,之前信誓旦旦买了几本技术书,貌似就压在书架那边,一页没看,还经常玩手机,订阅的杂志呢?要不是元旦用一个下午那全部看完,都积累了一周没看了,哦,貌似订阅的邮件有71封了,恩,还是说出来让自己自卑下好了 39 | 40 | 以前那种拼认真的劲需要赶紧照回来,继续 41 | 42 | 43 | 2015.1.3于西溪田家炳书院 44 | by tankpt -------------------------------------------------------------------------------- /source/_posts/20140713_sum.md: -------------------------------------------------------------------------------- 1 | title: 实习三个月小感 2 | date: 2014-07-13 04:03:06 3 | tags: 感悟 4 | --- 5 | 6 | 实习三个月来的点点感受,收获很多,特此mark 7 | 8 | 9 | 10 | ##原来我是这么混进来的## 11 | 时间好快,从四月初开始出来实习到现在有三个月多10天了,还是挺感激之前能有这个机会来现在的公司实习的,自己那么渣渣,幸得导师的推荐以及遇到一个开明的老大,据说当时就是看我性格还不错就要我了==!现在想想还真是随便,阿里的面试都没有过过一面的,可见我的水平有多拙计了,不过话说回来,我的性格不少很差诶,哈哈~~ 12 | 13 | 14 | ##蹭饭以及无节操## 15 | 记得出来这个部门的时候,老规矩出来吃了一顿新人餐~~没错,就是有名的兰州拉面,小组里面有俩都是之前的学长学姐,感激挺不错的,可惜自己貌似融入集体的能力有点弱,一开始感激都跟他们没融一起,感激地理位置也是一个问题,没跟他们坐在一起,平时也只有遇到问题才跟他们交流,生活上的问题交流的好少==真是失败,而且之前被小伙伴戴起来,中午吃饭都跟同学去吃,没有跟组里的人一起吃,感激失去了很多无形中的交流机会,现在我又不好意思抛弃小伙伴他们,现在也不好突然跟组里的人说跟他们一起去吃饭,哎,一个大的失败点;以后要注意跟组里的人多扯扯,生活的东西也多聊聊。 16 | 17 | 18 | 三个月里蹭了组里不少的饭~~两次小组的人的生日,一次ios端人员的请客,一次一个QA大大要离职去阿里的告别,还有一次是小组送走另一个实习生的聚餐,慢慢的感觉也还好了,跟后台的开发人员,跟测试的人员接触多了,感觉这个部门整体的氛围真的很nice,可能是几个领导领导的好吧,人员比较和谐,而且也比较无节操,比较搞笑,主要我还是实习生而已,有些玩笑我也不好乱开,哈哈,不过挺合我的style的。 19 | 20 | 21 | ##几次经历## 22 | 说几次让我笔记难忘的经历 23 | 24 | 25 | ###刚来的几天### 26 | 刚开的那天比较紧张,不知道怎么跟他们说话,笨笨的,一开始去领电脑,是带我一姐一起去领的,领回来,一个下午我自己在那里装电脑折腾(ps:据说一起的另外一个实习生妹纸,当时来的时候,是他们帮她一手装好的==!男女有别吗),电脑光配置环境我就折腾了俩天,俩天装这个装那个,配置环境,跑代码,因为自己后一点不会,真是拙计,感觉好糗~~幸好楠哥能耐心指导菜鸟。第三天开始干活,做了一个简单的事情,就是填一些类似帮助的文档说明,难度一点不大,但是一共有50+个条目,所以就做了一天多,好累的感觉。 27 | 28 | 29 | ###第一次独立做专题### 30 | 我还记得专题的名字txwx,啧啧,怎么会忘记,说实话我之前是一点都不会切图,我是渣渣,当时就是让他们教了下看图层,量像素,剪切以及看字体和颜色等几个技巧,就开始直接上手了,真是压力山大,第一次开始把psd图做页面,而且第一次竟然就做一个专题活动,记得那天做尴尬的事情来了,一个bug,然后做了很久,然后活动又要急着上线,最后的情况是中午块吃饭的时候,背后站了一个测试一个后台开发,问我改好了么?我说大概半小时吧,开发说:半小时都中午了,然后又拖下午,这样得什么时候,那时我真是尴尬死了,我也没办法只能说尽力。 31 | 32 | 33 | 好囧的一次专题,归根结底我太水了= 34 | 35 | 36 | ###改代码### 37 | 有一天小组的人都走了,然后突然一个qa问了我说我来试试看改一个bug,我说可以试试看,在改的过程中,我才知道,原来,我那天是直接在master主分支上改代码的,想想都吓尿我了,她又说没事的,前端的代码就算错了,也影响不大的,我想了下貌似也是的,然后改完提交push,她就开始发布了,我很忐忑==很惆怅,怕死的节奏,然后点击那个页面的时候,突然悲剧崩溃了。我顿时吓尿了,真的是吓尿了,又来她说是在预发上看的,我稍微缓了下,马上检查代码,看那里出错了,后来发现多打了一个分号,真是紧张啊~~后来改好提交,完成了 38 | 39 | 40 | ###任务做不完了### 41 | 42 | 43 | 这个事就发生在前三周吧,连续两周三天一刻不停的有活,经常处于手里还在做一个活,然后上面分下来一个新需求,我貌似记得最夸张的时候是做了一个,手里还堆了三个,我的天,真是压力大成马了,这样持续了两周,还好这周慢慢没新加的活了,然后顺利点 44 | 45 | 46 | ###第一次周末来加班### 47 | 其实也发生在任务做不完的那段期间里,做的一个是手机端的页面,当时没经验,以为就跟网页版的一样,然后就那么做了还决定应该不难,然后切好图测试,结果晚上测试手机的时候,发现挂掉了,我的天,竟然挂了我还找不到原因,当时带我的那个人刚好右回家了,其他人也没怎么做过我这个东西,然后我就一直调到晚上回家做班车的时候,还是不行,刚好是周五,那天一路上都想不通这是什么原因,晚上睡觉的时候也是这样,第二天醒来模糊地还在想这个问题,后来脑子一热就直接做公交地铁加打的去公司了,到了公司了发现刚好他们今天也很多人在,好巧~~ 48 | 折腾了一天,到下午,终于做好了,真是开心,因为要是这样来加班还是没完成的话,真的是我不知道第二天周日会不会再来,还好完成了。 49 | 50 | 51 | ##总结## 52 | 三个月来学到了东西还是挺多的,比自己在那里瞎折腾好很多了,马上要开始校招了,得开始慢慢准备了,这几天自己在每天来回的班车上也在看书,补东西。有时候是人文的东西有时候是基础的东西,好好准备,加油了,期待后面的三个月的实习 53 | 54 | 55 | 给自己列个周计划,发现这样会比较有执行力,否则真是太懒惰,博文要开始努力更新了 56 | 1.每天花大概半小时的时候整理下书签收藏的东西,因为现在github上有一个项目就是要维护下一些收集的资源 57 | 2.看两三个杭js的视频,优先看玉伯 鬼道的视频还有芋头的 58 | 3.完成meta的博文 59 | 4.完成scroll的整理 60 | 5.每天要半小时的node,再不node就晚了~~ 61 | 62 | 63 | by tankpt 64 | 20140713 hangzhou yuquan 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /themes/landscape/README.md: -------------------------------------------------------------------------------- 1 | # Landscape 2 | 3 | A brand new default theme for [Hexo]. 4 | 5 | - [Preview](http://zespia.tw/hexo-theme-landscape/) 6 | 7 | ## Installation 8 | 9 | ### Install 10 | 11 | ``` bash 12 | $ git clone https://github.com/tommy351/hexo-theme-landscape.git themes/landscape 13 | ``` 14 | 15 | **Landscape requires Hexo 2.4 and above.** 16 | 17 | ### Enable 18 | 19 | Modify `theme` setting in `_config.yml` to `landscape`. 20 | 21 | ### Update 22 | 23 | ``` bash 24 | cd themes/landscape 25 | git pull 26 | ``` 27 | 28 | ## Configuration 29 | 30 | ``` yml 31 | # Header 32 | menu: 33 | Home: / 34 | Archives: /archives 35 | rss: /atom.xml 36 | 37 | # Content 38 | excerpt_link: Read More 39 | fancybox: true 40 | 41 | # Sidebar 42 | sidebar: right 43 | widgets: 44 | - category 45 | - tag 46 | - tagcloud 47 | - archives 48 | - recent_posts 49 | 50 | # Miscellaneous 51 | google_analytics: 52 | favicon: /favicon.png 53 | twitter: 54 | google_plus: 55 | ``` 56 | 57 | - **menu** - Navigation menu 58 | - **rss** - RSS link 59 | - **excerpt_link** - "Read More" link at the bottom of excerpted articles. `false` to hide the link. 60 | - **fancybox** - Enable [Fancybox] 61 | - **sidebar** - Sidebar style. You can choose `left`, `right`, `bottom` or `false`. 62 | - **widgets** - Widgets displaying in sidebar 63 | - **google_analytics** - Google Analytics ID 64 | - **favicon** - Favicon path 65 | - **twitter** - Twiiter ID 66 | - **google_plus** - Google+ ID 67 | 68 | ## Features 69 | 70 | ### Fancybox 71 | 72 | Landscape uses [Fancybox] to showcase your photos. You can use Markdown syntax or fancybox tag plugin to add your photos. 73 | 74 | ``` 75 | ![img caption](img url) 76 | 77 | {% fancybox img_url [img_thumbnail] [img_caption] %} 78 | ``` 79 | 80 | ### Sidebar 81 | 82 | You can put your sidebar in left side, right side or bottom of your site by editing `sidebar` setting. 83 | 84 | Landscape provides 5 built-in widgets: 85 | 86 | - category 87 | - tag 88 | - tagcloud 89 | - archives 90 | - recent_posts 91 | 92 | All of them are enabled by default. You can edit them in `widget` setting. 93 | 94 | ## Development 95 | 96 | ### Requirements 97 | 98 | - [Grunt] 0.4+ 99 | - Hexo 2.4+ 100 | 101 | ### Grunt tasks 102 | 103 | - **default** - Download [Fancybox] and [Font Awesome]. 104 | - **fontawesome** - Only download [Font Awesome]. 105 | - **fancybox** - Only download [Fancybox]. 106 | - **clean** - Clean temporarily files and downloaded files. 107 | 108 | [Hexo]: http://zespia.tw/hexo/ 109 | [Fancybox]: http://fancyapps.com/fancybox/ 110 | [Font Awesome]: http://fontawesome.io/ 111 | [Grunt]: http://gruntjs.com/ -------------------------------------------------------------------------------- /themes/landscape/source/fancybox/helpers/jquery.fancybox-buttons.css: -------------------------------------------------------------------------------- 1 | #fancybox-buttons { 2 | position: fixed; 3 | left: 0; 4 | width: 100%; 5 | z-index: 8050; 6 | } 7 | 8 | #fancybox-buttons.top { 9 | top: 10px; 10 | } 11 | 12 | #fancybox-buttons.bottom { 13 | bottom: 10px; 14 | } 15 | 16 | #fancybox-buttons ul { 17 | display: block; 18 | width: 166px; 19 | height: 30px; 20 | margin: 0 auto; 21 | padding: 0; 22 | list-style: none; 23 | border: 1px solid #111; 24 | border-radius: 3px; 25 | -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); 26 | -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); 27 | box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); 28 | background: rgb(50,50,50); 29 | background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%); 30 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51))); 31 | background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); 32 | background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); 33 | background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); 34 | background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); 35 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 ); 36 | } 37 | 38 | #fancybox-buttons ul li { 39 | float: left; 40 | margin: 0; 41 | padding: 0; 42 | } 43 | 44 | #fancybox-buttons a { 45 | display: block; 46 | width: 30px; 47 | height: 30px; 48 | text-indent: -9999px; 49 | background-color: transparent; 50 | background-image: url('fancybox_buttons.png'); 51 | background-repeat: no-repeat; 52 | outline: none; 53 | opacity: 0.8; 54 | } 55 | 56 | #fancybox-buttons a:hover { 57 | opacity: 1; 58 | } 59 | 60 | #fancybox-buttons a.btnPrev { 61 | background-position: 5px 0; 62 | } 63 | 64 | #fancybox-buttons a.btnNext { 65 | background-position: -33px 0; 66 | border-right: 1px solid #3e3e3e; 67 | } 68 | 69 | #fancybox-buttons a.btnPlay { 70 | background-position: 0 -30px; 71 | } 72 | 73 | #fancybox-buttons a.btnPlayOn { 74 | background-position: -30px -30px; 75 | } 76 | 77 | #fancybox-buttons a.btnToggle { 78 | background-position: 3px -60px; 79 | border-left: 1px solid #111; 80 | border-right: 1px solid #3e3e3e; 81 | width: 35px 82 | } 83 | 84 | #fancybox-buttons a.btnToggleOn { 85 | background-position: -27px -60px; 86 | } 87 | 88 | #fancybox-buttons a.btnClose { 89 | border-left: 1px solid #111; 90 | width: 35px; 91 | background-position: -56px 0px; 92 | } 93 | 94 | #fancybox-buttons a.btnDisabled { 95 | opacity : 0.4; 96 | cursor: default; 97 | } -------------------------------------------------------------------------------- /source/_posts/20150403_summary.md: -------------------------------------------------------------------------------- 1 | title: 关于前端一些想法 2 | date: 2015-04-03 22:35:33 3 | tags: 总结 4 | --- 5 | 6 | 学前端也有一段时间了。偶尔会看看一些文章,最近来到新的公司实习,看了跟之前老公司的对比,还是有点感触的。 7 | 8 | 9 | 10 | ##1. 前后端分离## 11 | 感觉这个词汇貌似是从node开始火了之后,开始慢慢出现到我们眼前的,新公司的这边的前段端感觉分离的还是相当的彻底的,这边的前端开发完全可以不依赖与后端,开发的流程完全可以前端先行,对于数据的依赖程度现在已经有一些比较成熟的工具可以来替代,比如mock.js,或者grunt里面也有类似的插件,通过拦截类似jQuery的ajax的方法,通过不修改借口名字的方法,去读自己的模拟数据。这边不同于以前,可能要做的一点就是接口先行,前后端的同学需要把彼此的接口的名称还有相关的数据字段都定义好,这样到时候两边同学的联调可以基本不用修改原有的代码,比较方法。 12 | 关于模板,现在的公司这边模板的东西是由后端进行维护的,感觉不是很好,前端做完demo之后给后端,然后有时候后端会问,这个页面里面那些地方前端进行了修改了,要是修改的地方少,那也还好,要是多了则该起来相当不方便,前后端关于模板修改的交涉就要花费一些时间。 13 | 而在老公司那边,前后端没分离的那么彻底,前后端的代码都是在一个仓库里面,经常更新代码之后本地启服务会遇到服务挂掉,这样都相当影响前端的开发效率,还有一点就是每次本地起服务的时间也是需要一定的代价的,其实前端关心的不是后台服务能不能跑起来,前端只管输入url后可以看到相关的页面可以展现出来。所以这样的开发模式会需要消耗很多的事件在等待后端上,不过那边好的一点就是模板引擎freemarker是由前端进行维护的,这让前端很爽,我们只要知道后端这个control中会填哪些数据即可,从页面在后端渲染完之后都是由前端来进行控制。省去这个模板维护的代价。 14 | 15 | ##2. 代码的复用 16 | 原来公司用的一个前端框架算是内部的一个框架,应该除了公司以外其他的地方很少有人用吧,但是说实话,我觉得真的很厉害,算是一条龙的服务都有,好了回归正题,来谈谈代码的服用的一些想法。 17 | 理论上,代码要尽量可以做到复用性,为啥呢。其实最可以理解的就是不要重复造轮子,要把时间会在刀刃上,还有的一个好处就是要是进行组建的全局的修改只需要修改一个base的组件即可,但是要做到很好的复用性其实还是比较费时间的。你可能需要更多的时间放在这个组件的设计上,要做到一个比较好的可扩展性,特别是那些作为基础的组件尤其重要,这也非常考验写代码人的思维,既好用又可扩展性强,那真是爽了,问题是所有这些东西都是需要做一个权衡的,在可用性和扩展性,我个人感觉其实还是需要有一个权衡的,要是把一个组件设计的跟业务粘合的很紧,那么开发可能是爽歪歪了,一调用就解决问题,但是这样的组件一般可扩展性都会受到约束。 18 | 其实这里就是涉及到你对一个功能的拆分的粒度的细分,个人觉得还是很纠结的有时候 19 | 20 | ##3. 代码工程化 21 | 感谢node的出现,多了grunt还有gulp,让前端的很多工作都可以解放出来,只需要在搭建整个工程的开始阶段费的时间陪下各个工具还有相关的参数,当完成之后,每次跑工程只需要一个命令就可以一键到位,还有watch liveload也真是大大帮忙了。 22 | 还有一些工具,比如git,做的好的话可以当开发者每次push自己的代码的时候就讲这类代码发布到cnd上,只要按照一定的命名规范,还是可以相当方便的。 23 | 24 | ##4. 分层思想 25 | 26 | 工程项目一大,代码的维护量就会呈现很陡的曲线上升,特别是大的项目一般不会是仅仅一个人做的,所以同样的代码很可能今天是你写,过几天由别人来修改你的代码,这里就是涉及到了代码的注释可维护性的问题了。 27 | 我看了下原来的部门跟现在的部门,可能两边做的项目的性质的不同,一边是多人做一个项目,一边是基本一个人会长期维护一个项目,所以在代码的层次结构上面可以比较明显的感觉到原来的部门的规范性,一般你只要知道他们习惯,你可以很容易的找到定位到相应的代码目录还有具体的文件内容。 28 | 说白了就是代码还是要规范点好,别让别人来踩你的吭,至少也要让别人好找你挖的吭 29 | 30 | 31 | ##5. 阻止前端进步的兼容性 32 | 这是个头疼的问题,要是没有兼容性问题,也许世界会更加的美好,可惜就是这么多浏览器,不过比较好的事情就是微软现在貌似慢慢和中国的一些公司合作,慢慢吧一些老的XPIe淘汰。他们也准备使用新的浏览器了,虽然可能需要兼容新的浏览器了。。但是我觉得应该还是比IE好把。这也是一个福音 33 | 新老部门里面最大的差别应该就在这里了,这边可以尝试的东西还是超级多的,很多新的特性在原来的部门是没机会用的,这边还是提供了很多的机会来尝鲜的,这个真心不错 34 | 35 | 36 | ##6. css的一点想法 37 | 其实在前端领域里面,感觉css是一个比较蛋疼的块,不想其他程序语言一样有着正规的程序逻辑可言,很多东西完全只是一个规则,没错,就是规则,至于为什么,答案就是。规范里就是这么规定的。我竟无法反驳 38 | 39 | 个人觉得网易的那套nec还是相当不错的规范,模块,组件的命名规则,以及一些类似功能性的css,比如f-cb就是清除浮动,f-fl就是向左浮动 40 | 今天下午跟带我的师兄进行了一些讨论,讨论的结果当然是谁都没说服谁,其实这个根本就没有一个固定的答案,只是两种 解决方案各有好坏。我的一个想法就是将整个页面中的一些例如f-cb这样的css抽取出来,放到页面的节点中去,我先说下几点好处 41 | 1. 这样理论上可以做到,在整个打包完的css文件中可以只有唯一的一个float:left。最简单的就是打包完的css比较简洁嘛 42 | 2. 把这些带有明显语义化的类放到标签中去,带来的好处就是一看这个class我就知道他是什么结构,其实有点语义化比较好的感觉 43 | 3. 还有一点比较扯淡的就是这样的话有点可以对节点的样式进行拆分组装的感觉 44 | 45 | 不好的地方: 46 | 1. 挺折腾的。师兄觉得类似那类清除浮动的直接可以写在类似less或者sass的minxin中去,直接作为函数来引,反正预处理什么的问题都是工具来做了, 47 | 2. 至于css可以变小,其实说实话小不了多少,而且全部这类放在html结构中,本身页面也会变大,而且,有时候可能需要用到多个f=*的时候,一个class后面会跟一堆,书写一不方便 48 | 49 | 50 | ## 最后 51 | 52 | 无论什么东西都没有一个最好的银弹,每个解决方案都是需要最一个折中的处理,有舍有得,做好选择,而且每个人判断的方法也不一样,做出的选择还是有区别的。 53 | 54 | 前端是个造轮子神马最快最多的地方,东西也是井喷似的出现,所以需要调整好心态,抓住不变的来迎接万变。 -------------------------------------------------------------------------------- /source/_posts/20150609_sum.md: -------------------------------------------------------------------------------- 1 | title: "好多坑" 2 | date: 2015-06-09 10:12:16 3 | tags: 总结 4 | --- 5 | 6 | 移动端走到的几个吭 7 | 8 | 9 | 10 | 11 | ### 1. button 12 | 对于botton在IOS上会有一个margin。需要进行重置 13 | 14 | ### 2. 滚动到底部 15 | 之前做的一个插件,当滚动到底部的时候检测然后进行新的内容的加载,但是经常会出现失效的情况(之所以这样是因为考虑到性能,窗口大小的获取之获取了一次,然后缓存起来),后来看了下,同样的一个页面,窗口的大小,从页面一开始进来的大小和在本页进行刷新,所获取的窗口大小是不一致的,解决方案有两种 16 | 17 | ``` 18 | 1. 对于获取窗口大小,每次检测的时候进行一次计算,这样就不 19 | 会有计算失误的情况 20 | 2. 第一次获取的时候讲整体的代码延迟处理,setTimeout(f,0) 21 | 即可 22 | 23 | ``` 24 | 25 | ### 3.ios滚动 26 | 出现了一个比较神奇的问题,就是当用户按住屏幕进行滚动后,比如出发了加载更多的一个loading动画,然后此时用手按住屏幕,会发现动画暂停了 27 | 28 | ### 4.input输入框 29 | 设置input类型为number的时候,当输入的number的类型不合法的时候,input会自动过滤为空 30 | 31 | ### 5.ios宽度百分比问题 32 | 在5c上,具体的版本号忘记了,比较老的也,对宽度的处理有点异常,对宽度比如算出来是45.8.都会舍成45,很容易造成布局的乱 33 | 34 | ### 6.scroll事件 35 | DOM元素中塞内容的时候会触发一次scroll。应该是节点变多之后的效果,这个也可以理解 36 | 37 | ### 7.ios点击闪烁 38 | ios上点击一个区域会出现闪烁的问题,可以对那个闪烁的元素加一个 39 | ``` 40 | -webkit-tap-highlight-color: rgba(0,0,0,0); 41 | ``` 42 | 43 | ### 8.input placehold问题 44 | input placehold在老的安卓机子上面。计算原来设置了text-align:right也不会居中,有一个办法使用 45 | ``` 46 | ::-webkit-input-placeholder{text-aligh:right} 47 | ``` 48 | 可以,但是再旧点的版本就不行了,不过还可以使用 49 | ``` 50 | ::-webkit-input-placeholder {direction: rtl;} 51 | ``` 52 | 53 | ### 9.刷新字体大小变小 54 | 有些手机上(小米+魅族)一开始进入的时候正常,但是进行一些操作之后会出现字体的变小,貌似都是那些body下的父元素没有设置过字体大小的元素会出现,解决的办法就是强制给一个字体大小 55 | 56 | ### 10.js关闭键盘 57 | 对于一些场景需要用js来关闭那些唤起的键盘。可以通过document.activeElement.blur();来将键盘关闭 58 | 59 | ### 11.缩放问题 60 | 对于一些页面在meta中设置了user-scalable=no的页面,发现在oppo上meta没有用。可以继续缩放,这个奇葩问题暂无解决方案 61 | 62 | ### 12.浮动的处理 63 | 左边是浮动,右边一个bfc的时候不需要加margin-left。在一些手机上会以浮动元素的右侧开始计算。会容易有益处,比如华为安卓 64 | 65 | 66 | ##总结 67 | 1. 经常做一些内嵌页面的时候,会受到客户端的影响,有时候遇到的一些奇葩问题也许不是前端的,是客户端的,找到果断报 68 | 2. 感觉最近做的俩移动的页面,其实难度并不大,但是兼容的问题真是好折腾,基本上整体的时间算下来,应该是后期测试联调改bug的时间大于前期的开发时间,而且一旦涉及到一些自己引组建资源问题的时候,需要找对应的开发也比较耗费时间 69 | 3. 移动端有时候的联调,真是不方便,虽然有各种各样的联调方式,但是总会跟客户端的浏览器有点差异,打个log也相当的蛋疼,看到一个native开发的也在debug版本中顶部加了一个log的小窗口,所以自己也做了一个雷同的,还有比较大的优化空间,先贴代码 70 | 71 | 4. 做好工程化还是很有必要的,其实也就是grunt这类的打包,前期比较折腾比较累,但是一旦配置好之后,后期就是爽歪歪的享受,大大节省开发的时间 72 | 5. 整体项目的分层结构设计还是比较考验人的,一般不太会一蹴而就的,都是需要开发了多次之后慢慢修改,然后磨合调整修改到一个比较舒服的状态,对于一些旧的代码,千万不要心软偷懒放任不管,要是一开始就放任了,第二次第三次就更加不会去处理了,最夸张的情况下,就是这个页面经历了多个人的手,最后每个人都不敢在前人的代码上进行修改,一些老旧的代码越叠越多,还是很容易出问题的,到时候排查也是一个超级累的过程 73 | 6. 关于一些组件的抽取,感觉这个力度还是很难把控的,松的耦合度可以让这个组件可以有更大的普适度去黏合各种场景,但是相应的代价就是可能这个组件里面本身完成事情就不多,很多的工作需要附加在使用这个组件的场景里去完成。 而其实,作为开发者,最喜欢的就是写完一个组件之后,我在我的应用场景里面仅仅做一个最简单的调用就可以完成这个功能那是最爽的了,不过一般这样的组件相应的就会有比较强的耦合性,这个也是比较纠结的一件事情 74 | 7. 对于在客户端遇到需要处理一些多页面链路的问题,比如A-B—C这样的链路,但是从C返回B的过程中,需要将从C一些信息带回到B,在做的时候考虑想到了三个方案 75 | 76 | (1) url里加参数 77 | (2) postMessage 78 | (3) 本地存储 79 | 80 | A. 对于url里加参数,有点恶心,不好处理A-B中url里面也有参数的问题,虽然可以通过命名不一样的参数名字来绕开,但是感觉还是太奇怪了,而且这样的链路页面会跳的时候,感觉最好使用history.back()来处理(对于A—B-C,正常的逻辑,回到B页面后点击回退到A,要是用open方式打开用户手点到回退按钮,就会回到C),这样的情况下感觉就不是很合适了 81 | B. postMessage,在浏览器端还是不错的支持度,但是在移动端上,兼容性并不能得到保证,为了求稳还是没有使用 82 | C. 本地存储,这是最终采用的方案,使用的过程中唯一需要注意的就是要缕清楚不同页面直接跳转过程中,何时读取存储内容的时机,以及清除存储内容的时机,而且有一个不好地方就是,本地存储会一直有,要是A-B—C这样的链路走,这是正常的流程,对于一些直接跳转到B页面的这样的异常流程需要多多注意 -------------------------------------------------------------------------------- /source/_posts/20140817_blockinline.md: -------------------------------------------------------------------------------- 1 | title: 有关视觉格式化 2 | date: 2014-08-17 11:14:33 3 | tags: css 4 | --- 5 | 6 | 有关格式化的一些笔记,主要来自于css权威指南,还有一些是自己的理解 7 | 8 | 9 | ##一、基本信息## 10 | 1. 非替换元素:元素的内容包含在文档中(比如< p >< /p >内容就在文档的内部) 11 | 2. 替换元素:用作其他内容占位符的一个元素(典型的有img < input >) 12 | 3. 块级元素:元素在正常流中会在其边框之前和之后生成换行[display:block] 13 | 4. 行内元素:元素在之前后之后不会生生换行[display:inline] 14 | 5. 包含块:一般由最近的块级祖先框、表单元格或者是行内快祖先框的内容边界构成 15 | 16 | ##二、行内元素## 17 | 18 | ###2.1 基本信息### 19 | 1. 内容区、行内框、行框 (根据是否为替换元素分别有不同的情况) 20 | 21 | ###2.2 非替换元素的行内格式化### 22 | ####2.2.1 基本信息##### 23 | 1. 内容区:可以简单理解为就是由文本框内部的字符所构成的一个框,差不多就是字符框的意思 24 | 2. 行间距:由font-size和line-height来决定,有两个数值的差值分别应用到内容框的上下部分 25 | 3. 行内框:通过改变line-height来改变行间距来进行变化,他的行内框的大小等于line-height的数值 26 | 4. 行框:包含该行中出现的行内框的最高点和最底点的最小框 27 | 28 | ####2.2.2 构建过程#### 29 | 30 | step1:首先得到line-height数值(通过继承或者是本身计算,如是百分比之类的则是根据本身的font-size进行计算;如果是继承父元素的em之类的单位,则以父元素font-size进行计算,可以通过继承line-height:1这样的倍数) 31 | 32 | step2:构建行内框,计算方式(line-height - font-size)/2分别应用到内容框的上下两侧,注意这个数值可能为负,所以会出现如下两种情况 33 | ------   ------ 34 | 行-----   内---- 35 |  内容区     行高 36 | 高-----   容---- 37 | ------   ------ 38 | 行内框决定了行框的的排步 39 | 40 | step3:vertical-align定义行内元素的基线相对于钙元素所在行的基线的垂直方式,会影响行内框的顶部或者底部的偏移像素;基线不是汉字下断沿而是英文字母的下端沿。 41 | ---顶线--- 42 | ---中线--- 43 | ---基线--- 44 | ---底线--- 45 | 其中的属性vertical-align:bottom是将元素的行内框的底端与行框的底端对齐 46 | ####2.2.3 其他#### 47 | 1. 行内元素的边框边界由font-size而不是line-height决定,边框由内容决定 48 | 2. 内边距、外边距、边框不会影响行高(当然是垂直的方向,对于左右两侧的方向则是还是会有影响的) 49 | 3. 行内元素的背景应用于内容区以及所有内边距,行内元素的边框要包围内容区及所有内边距和边框;所以行内元素内边距会影响到该元素边框所包围的区域,但是不会影响到行内框的高度 50 | 51 | ###2.3 替换元素的行内格式化### 52 | 53 | ####2.3.1 基本信息#### 54 | 1. 内容区:元素周围固有的高度再加上可能有的外边距、边框、内边距 55 | 2. 行间距:不应用到非替换元素 56 | 3. 行内框:就是内容区的高度 57 | 4. 行框:同前面提到的行框一样padding: 14px; 58 | 59 | ###2.3.2 细节### 60 | 1. 由于内容区是由内外边+边框决定,所以都会影响到行框的形成 61 | 2. 对于替换元素的line-height虽然对行框的形成没有多少影响,但是这个数值在后续如果进行设置vertical-aligin会有影响,因为vertical-align是由line-height进行计算的 62 | 3. 默认的行内替换元素位于基线上 63 | 64 | ##三、块级元素## 65 | ###3.1 水平格式化### 66 | 1. 规则:margin[left+right] + border[left+right] +padding[left+right] +width应为父元素的内容区 67 | 2. 使用auto(只有俩margin和width可以设定) 68 | (1)三个都为非auto,当格式化属性过分受限的时候,调整margin-right进行适应;(2)margin为非auto,width为auto,调整width来满足前面的规则; 69 | (3)某一个外边距以及width为auto,则设置auto的那个外边距调整为0; 70 | (4)全为auto,则宽尽可能宽 71 | (5)俩margin auto,则居中 72 | 3. 负外边距 73 | 总体还是需要满足规则,若水平属性过分受限,重置外边距 74 | 4. 替换元素 75 | 不同的一点,若width为auto,则元素的宽度则是内容的固有宽度 76 | 77 | ###3.2 垂直格式化### 78 | 79 | padding要是一个非负数,对于内容需要的高度大于所设定的高度的时候,由用户代理的具体行为将取决于overflow的属性的设定 80 | 81 | 1. 垂直属性 82 | (1)对于正常流中的一个块元素的margin-top或者是margin-bottom设置为auto,它会自动计算为0,所以达不到居住的效果,(但对于那些定位的元素来说,上下边距为auto的时候,它所处理的方式不同) 83 | (2)百分数高度:对于height的百分数是相对于父元素的height进行计算的,而margin-top和margin-bottom则是按照父元素的width进行计算的。这点需要注意!! 84 | 2. auto高度 85 | (1).若正常流元素设置为height:auto那么显示时高度将恰好足以包含其内联内容包括文本的行盒 86 | (2).若正常流元素设置为height:auto,而且有块级子元素 87 |  a.若子元素有上下外边框或上下内边距,则告诉是从其最高子元素的上外边距边界到最低子元素的下外边距; 88 |  b.否则,高度则是从子元素的最高外边框边界到最低子元素的外边框距离,此时会出现子元素的外边距超出包含这些子元素的元素 89 | 3. 合并垂直外边距 90 | 只应用于外边距的合并,如果元素有内边距或者是边框,那么就不会发生合并的现象 91 | 4. 负外边距 92 | (1).若垂直外边距都设置为负数,那么浏览器会取俩外边距绝对值的最大值 93 | (2).若一个正外边距与一个负外边距合并,会从正外边距减去这个负外边距的绝对值 94 | (3).如果有多个正或者负的边距叠加(大于两个的),此时应该先取出其中最大的一个正的和负的进行计算,而不是单纯的将几个进行叠加 95 | (4).对于那些由于负外边距而导致元素重叠的情况下,如果有背景色,那么浏览器会按照这些元素在文档中先后出现的顺序进行显示 96 | 97 | 98 | 参考资料:《css权威指南》 -------------------------------------------------------------------------------- /source/_posts/20140916_middle.md: -------------------------------------------------------------------------------- 1 | title: 一些关于居中的整理 2 | date: 2014-09-16 22:42:50 3 | tags: css 4 | --- 5 | 6 | 关于这类居中的问题,貌似各种考的会很多,然后生产实践中也确实会遇到很多,网上随便一搜也能找到很多狠多的例子,这里就简单整理一下自己到现在用过的一些方法,都算是比较简单的然后兼容问题较好的,能大部分解决遇到的问题,但是对于一些极端变态的情况,这里的貌似有些力不从心。 7 | 8 | 9 | ##一、水平居中## 10 | 11 | ###1. 文字居中### 12 | 对于一些文字向让他在一个块内居中,最简单的方法就是可以对父元素进行设置 13 | 14 | .center{text-align:center;} 15 |
16 | 一些居中的内容 17 |
18 | 19 | ###2. 定宽的块居中(父元素宽度未知)### 20 | 适用于一个有着定宽的块,让他居中,这个情况还是很常见的,比如在切图的时候,要中间设置一个width:960px的块,让他始终都居中,无论浏览器的宽度被拉到多大 21 | 22 | .center{margin:0 auto;width:960px;background-color:red;} 23 |
24 | 始终居中的块 25 |
26 | 27 | ###3. 定宽的块(父元素的宽度已知)### 28 | 对于这种情况可以简单粗暴的方法来解决,大致的思路就是既然都知道了让这个块居中时,它的左偏移的距离了,那么用定位(或者内边距)来解决, 29 | 30 | .demo3{width: 400px;} 31 | .demo3 .child{width: 100px;margin-left: 150px;} 32 |
33 |
I'm child Block
34 |
35 | 36 | 或者是下面的方法 37 | 38 | .child1{position: relative;left: 50%;margin-left: -50px;width: 100px;} 39 |
40 |
I'm child Block
41 |
42 | 43 | 44 | 不过这样应用的场景不会很多,毕竟也太如意了 45 | 46 | ###4. table的方法### 47 | 48 | 关于table的方法,大家在试用表格的时候也看到了,在表格里面的元素可以很简单的居中,所以在display的属性里面也有设置父元素display:table,然后再设置子元素为display:table-cell,不过这种方式考虑到这个兼容性的问题,自己平时没用到,例子就省去了 49 | 50 | 下面贴上几个水平的例子效果 51 | ![水平居中](http://7vzsgl.com1.z0.glb.clouddn.com/blog20140916_middle1.png) 52 | 53 | ##二、垂直居中## 54 | 55 | ###1. line-height只有一行文字### 56 | 对于有些块,需求需要让他垂直居中,然后比较特殊的是他里面的内容只会在一行里出现,最常见的就是要放置一个按钮的时候了,要让里面的内容简单的居中,针对这类问题最简单的就是设置line-height==父元素的高度 57 | 58 | .demo1{width: 150px;font-size: 20px;height: 50px;line-height: 50px;text-align: center;} 59 |
60 | button 61 |
62 | 63 | 这里的原理涉及到行框的形成 64 | 65 | ###2. vertain-align+line-height### 66 | 这个方法是直接摘录自博客了,里面有两点需要注意 67 | 1. 父元素font-size需要设置为0,这个跟vertain-align:middle的定义有关,可以具体看参考博文1; 68 | 2. 还有一点比较重要的是要对子元素的line-height进行重置,因为line-height会有继承的效果,所以如果不重置,大家可以看看效果 69 | 70 | 71 | .outer { line-height: 100px; height: 100px; font-size: 0; } 72 | .inner { display:inline-block; vertical-align:middle; font-size: 16px;height: 50px;width: 100%;line-height: normal; } 73 |
74 |
child
75 |
76 | 77 | 78 | ###3. 类似水平居中的3(父元素的高度已知)### 79 | 同上面的3一样只过不过这回修改的top 还有height的属性而已 80 | 81 | ###4. 绝对定位外边距为auto可以得到垂直居中### 82 | 这个方法是在《css权威指南》的时候看到的,大体的思路就是让一个绝对定位的元素eft: 0; top: 0; right: 0; bottom: 0; 83 | 84 | .demo3{position: relative;height: 200px;width: 400px;} 85 | .demo3 .child{position: absolute;margin: auto 0;width: 200px;height: 100px;absolute; left: 0; top: 0; right: 0; bottom: 0;} 86 |
87 |
test
88 |
89 | 90 | ![水平居中](http://7vzsgl.com1.z0.glb.clouddn.com/blog20140916_middle2.png) 91 | 92 | 其实还有很多的方法,比如css3上面就有很多,不过自己平时也没怎么使用,所以也就不加了 93 | 附上[代码gist](https://gist.github.com/7f624c4d82ccd99c5ccf.git) 94 | 95 | 参考博文 96 | [整理:子容器垂直居中于父容器的方案](http://blog.segmentfault.com/humphry/1190000000381042) 整理的超级不错 97 | [CSS实现垂直居中的5种方法](http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html) -------------------------------------------------------------------------------- /source/_posts/20140713_summarize.md: -------------------------------------------------------------------------------- 1 | title: 实习中遇到的坑 2 | date: 2014-07-13 10:39:46 3 | tags: 总结 4 | --- 5 | 6 | 实习三个月来的遇到了各种坑,忘记了一些,记下了一些,特此mark 7 | 8 | 9 | 10 | 转眼间实习了一半的时间,三个月了,三个月里学到了不少的东西,也遇到了不少的坑。记录下,三个月遇到的坑 11 | 12 | ##1. IE浏览器对tbody不可修改的问题## 13 | 查了下网上, IE下 COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR 这些元素的 innerHTML 属性都是只读的,不能直接操作。在本地测试了下,貌似IE9就不能操作了,但是IE10是可以的;不过TD 的innerHTML 还是可以操作的. 14 | 15 | ##2. 注意宽屏的显示器## 16 | 一般设计切的图,大多都是1680的宽度,但是一些类似大mac上面的显示器明显宽度超出了,所以作为保险应该在背景设置一个图层,然后center居中下 17 | 18 | ##3.关于在浏览器中的imag的src属性## 19 | 之前也没遇到过这样的情况,如果这个属性里面没有数值,在dom标签里看去是一个空的,但是当用js来调用的时候,_imag.src的值**竟然等于当页面的url数值**,这点确实让人很意外,而且这个坑还远远不止这点。后来网上搜索了下有关的东西,,貌似不处理好这些为空的src,会在一些性能上面有影响,而且不同的浏览器上所呈现的效果还不一样,具体可以见[博客][1]中的介绍,里面还给了几个额外链接的介绍 20 | 21 | 一点建议:现在的浏览器貌似都会对图片进行缓存,所以我的做法就是预设值一个默认的为空的图片,每次替换这个默认的图片。 22 | 23 | ##4. 关于console.log的问题## 24 | 平时调试的时候需要,经常会在一些代码的关键的地方加console.log的方法; 以前以为这个是没有兼容性问题的,后来查了下才知道低版本的IE上不支持。 否则遇到不兼容的,后续的js都会挂了 25 | 26 | ##5. 有关于mouseover和mouseout的问题## 27 | 28 | 上一段权威指南里的有关这俩属性的介绍 29 | 1.mouseover:当鼠标进入目标元素时触发,relatedTarget(IE中是fromELement)指的是鼠标来自的元素; 30 | 2.mouseout:当鼠标离开元素的时候触发,relatedTarget(IE是toElement)指的是鼠标去往的元素 31 | 3.mouseover:类似mouseouver,但**不发生冒泡**,尚未广泛实现 32 | 4.mouseleave:类似mouseleave,但**不发生冒泡**,尚未广泛实现 33 | 34 | 很明显考虑到兼容性的问题,必须要用前面一对,但是要注意的是这个冒泡问题,太严重了,之前都没这样遇到过,举个例子,比如一些网站会在右上角有一个登录的菜单列表,鼠标hover上去你要去触发一次mouseover的事件,将下拉给显示出来,然后当鼠标离开这个下拉节点时候要触发一次mouseout事件; 35 | 不过这只是理论上的,当那个下拉的节点里面有好几层的内容时,当你从最里面的一层节点离开的时候就会触发一次这样的mouseout事件,然后传播到父节点上,然后就会发生你还没移到这个下拉的节点外,节点就消失了的情况 36 | 37 | 解决的方法:不能说是最好的,但也能实现所需要的效果,就是在mouseout事件里面,设置一个定时器,比如延迟200ms后执行隐藏下拉的情况;然后在mouseover的事件里面检测一下有没有setTimeout的这个一个对象,有的话清除掉,这就可以实现所需要的效果了 38 | 39 | ##6. 关于float跟li## 40 | 一般这俩属性结合在一起的时候,会做一些水平的导航栏什么的,一般都会设置li的list-style-type为none。也不会在意这点,但是当需要的时候就出现问题了:当他们二个同时出现时,在ie下面呢,li前面的小黑块不见了,但是在firefox下面是好的 41 | 在写的时候本机里测试,IE低版本会有问题,然后chrome也有问题,可以参考下[博文][2] 42 | 43 | ##7. 浏览器的内置属性!!## 44 | 以前也只是知道过,但是没那么深的体会,这回在做一个web手机端的时候就遇到了body内置了margin属性,导致计算宽度的时候出现了问题,所以一般的都会在浏览的开始引如一些重置reset css的样式 45 | 46 | ##8. imag 下面几像素的高度空隙## 47 | 比如一个div里面单纯的放了一个img的元素,不仔细看是看不出的。仔细看就会发现img离div的底部有大概3px左右的像素空隙;一些解决的方法就是: 48 | 1.img 设置为display:block 49 | 2.vertical-align: bottom; 50 | 51 | 原因是:原因在于块级元素内部默认有行框,行框撑高了块级元素。img和其他块级元素并列的时候,由于img默认是display:inline-block,因此也会产生匿名块框包裹img,匿名块框内部生成了行框,多余了几个像素。这也是为何把图片添加上display:block,或者父层级font-size、line-height能够解决这个的原因。(取自[sf社区][3]) 52 | 53 | ##9. innerText在ff浏览器下问题## 54 | ff浏览器不支持该方法,改用textContent来替代 55 | 56 | ##10. 获取页面的垂直滚动条的位置兼容问题## 57 | 针对获取页面的垂直滚动条的位置,IE Firefox Opera 标准模式下使用 document.documentElement.scrollLeft 获取页面的水平滚动条位置,而混杂模式下则是使用 document.body.scrollLeft。Chrome Safari 在两种文档模式下均使用 document.body.scrollLeft 获取页面的水平滚动条位置。 58 | 摘自[w3c help][4] 59 | 解决办法: 60 | var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 61 | var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; 62 | 63 | ##11. 邮件模版## 64 | 在邮件中的html有些比较严格的要求,要出来图片布局等等的问题,样式需要进行内联,因为是嵌套在其他的邮箱的页面下面,要写成以一个div为根节点的模块 65 | 具体的自己也整理了[一篇博文][5] 66 | 67 | ##12. xss过滤## 68 | 关于这点也只是初次的遇到,知道了xss是怎么一回事,详细的还需要以后多多研究,大概就是一些提供给用户输入信息的地方需要进行转义 ,防止插入一些恶意的脚本 69 | 70 | ##其他## 71 | 1.布局的时候首先考虑用display:block 、float 浮动,不行再考虑用其他的display,最后再考虑用position 72 | 2.浮动先行 73 | 3.一个页面h1只有一个,注意语意 74 | 75 | [1]:http://www.cnblogs.com/pkurain/archive/2009/12/15/1624672.html 76 | [2]:http://blog.51yip.com/htmlcss/858.html 77 | [3]:http://segmentfault.com/q/1010000000441100 78 | [4]:http://www.w3help.org/zh-cn/causes/BX9008 79 | [5]:http://blog.csdn.net/tankpt/article/details/24602087 -------------------------------------------------------------------------------- /source/_posts/20140210_block.md: -------------------------------------------------------------------------------- 1 | title: js整理四:闭包[转载多] 2 | date: 2014-11-10 00:23:37 3 | tags: js 4 | --- 5 | 6 | 闭包 7 | 8 | 9 | 10 | 很多是参考了一篇文章==可不幸忘记源地址了。对不住源作者了,如果看到请高手我,我好修正,谢谢 11 | 12 | ##4.1关于js中的作用域链## 13 | 在博客上看到的理解: 14 | (1)首先是JavaScript引擎可以访问的一个内部的属性[[scope]](仅供js引擎访问),里面保存的是函数被创建的时作用域中对象的集合,也被称为函数的作用域链,它决定了那些数据可以被函数访问。 15 | 16 | (2)然后再来介绍下,一个函数创建的过程。当一个函数被创建后,它的作用域链会被创建该函数的作用域中可以访问的数据对象填充,例如 17 | 18 | function add(num1,num2){ 19 | var sum= num1 + num2; 20 | return sum; 21 | } 22 | 23 | 在函数add创建的时候,他的作用域链中会填入一个全局的对象,包含了所有的全局的变量 24 | 25 | ![pic1](http://7vzsgl.com1.z0.glb.clouddn.com/blog20140210_block1.jpg) 26 | 27 | (3) 接着当该函数在被执行的时候 28 | var total= add(5,10); 29 | 执行此函数时会创建一个称为“运行期上下文(execution context)”的内部对象,运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链,用于标识符解析,当运行期上下文被创建时,而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。 30 | 这些值按照它们出现在函数中的顺序被复制到运行期上下文的作用域链中。它们共同组成了一个新的对象,叫“活动对象(activation object)”,该对象包含了函数的所有局部变量、命名参数、参数集合以及this,然后此对象会被推入作用域链的前端,当运行期上下文被销毁,活动对象也随之销毁。新的作用域链如下图所示: 31 | ![pic2](http://7vzsgl.com1.z0.glb.clouddn.com/blog20140210_block2.jpg) 32 | 33 | 在函数执行过程中,没遇到一个变量,都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部,也就是从活动对象开始搜索,查找同名的标识符,如果找到了就使用这个标识符对应的变量,如果没找到继续搜索作用域链中的下一个对象,如果搜索完所有对象都未找到,则认为该标识符未定义。函数执行过程中,每个标识符都要经历这样的搜索过程。 34 | 35 | //JS高级 36 | 当调用函数的时候,会被函数创建一个执行环境,然后通过赋值函数的内部属性[[scope]]]中的对象构建起的执行环境的作用域链。 37 | 38 | (4)关于函数内部嵌套的问题 39 | 如果在一个函数A内部再定义了一个函数B,那么在函数B的作用域链中会将函数A(外部函数)的活动对象添加到B的作用域链中去, 40 | 41 | ##4.2关于闭包## 42 | 43 | 在阮一峰的博客中提到了闭包的两个用途,分别如下: 44 | (1)可以读取函数内部的变量; 45 | (2)让这些变量的值始终保持在内存中 46 | 注(貌似在其他的博客上看到过闭包的另外一个用途就是当你要声明一个私有变量的时候,你可以利用闭包的特性使外部对象不能访问这个变量,就是类似private的感觉) 47 | 48 | 闭包的注意点: 49 | 1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。 50 | 2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。 51 | 52 | //---------------------------分割线----------------------------------- 53 | 个人对闭包的理解:先看一小段代码 54 | 55 | function A (){ 56 | var i = 0 ; 57 | var B =function (){ 58 | console.log(i); 59 | } 60 | return B; 61 | } 62 | 63 | 很简短的一段,我理解的闭包就是上诉代码中,在一个函数中返回了内部定义的一个函数,这样的作用是什么呢?正常的情况下,一个函数结束后,他内部定义的变量什么的会被回收掉,但是有了这个闭包的东西就会出现例外,用到前面讲到的那个作用域链的理论来解释下,B的scope chain中有着函数A的活动对象,正是由于这点,函数B可以使用读取变量i的数值,现在这种情况下,当函数阶数后,返回了函数B,那么B就被引用着,所以他不会被回收这点毫无疑问,然后看A,A活动对象中的i变量现在被B引用着,所以他的活动对象会留着没被回收,以上都是个人的一点理解不知道对不对,若有不对的地方,希望能指出~ 64 | 65 | ##4.3闭包与变量## 66 | 在js高级程序设计中提到了有关这个的问题 67 | (1)问题的引出:代码如下 68 | 69 | function createFunctions(){ 70 | var result = new Array(); 71 | for(var i =0;i<10 ;i++){ 72 | result[i] = function(){ 73 | return i; 74 | } 75 | } 76 | return result; 77 | } 78 | 79 | 原本预期应该觉得输出的是0到9之间的数字保存在result之中,但是实际上,里面保存的值都是10;理解的方式就是每个函数的作用域链中都保存着createFunctions函数的活动对象,所以他们引用的是同一个i对象 80 | 81 | 注(可以这么理解,想象一下一共有十个函数在createFunctions里声明着,名字分别可以是result[0]等等的,然后在他们的scope链中都有这么一个指针指向他们的上级函数就是createFunctions的活动对象,里面有变量i,他们是指向同一个活动对象的,所以他们共享着这个i) 82 | //------------------分割线----------------------------------------- 83 | 不过有方法可以强制改变这种情况,具体如下 84 | 85 | function createFunctions(){ 86 | var result = new Array(); 87 | for(var i ;i<10 ;i++){ 88 | result[i] = function(num){ 89 | return function(){ 90 | return num; 91 | }; 92 | }(i); 93 | } 94 | return result; 95 | } 96 | 97 | 现在这种情况呢,就不会出现内部的函数还一直占有函数createFunctions活动对象的情况了。 -------------------------------------------------------------------------------- /themes/landscape/layout/_partial/article.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 | <%- partial('post/date', {class_name: 'article-date', date_format: null}) %> 4 | <%- partial('post/category') %> 5 |
6 |
7 | <%- partial('post/gallery') %> 8 | <% if (post.link || post.title){ %> 9 |
10 | <%- partial('post/title', {class_name: 'article-title'}) %> 11 |
12 | <% } %> 13 |
14 | <% if (post.excerpt && index){ %> 15 | <%- post.excerpt %> 16 | <% if (theme.excerpt_link){ %> 17 |

18 | <%= theme.excerpt_link %> 19 |

20 | <% } %> 21 | <% } else { %> 22 | <%- post.content %> 23 | <% } %> 24 |
25 | 56 |
57 | 58 | <% if (!index){ %> 59 | <%- partial('post/nav') %> 60 | <% } %> 61 |
62 | 63 | <% if (!index ){ %> 64 |
65 | 66 |
67 | 68 | 69 | 80 | 81 |
82 | <% } %> -------------------------------------------------------------------------------- /themes/landscape/source/css/_partial/header.styl: -------------------------------------------------------------------------------- 1 | #header 2 | height: banner-height 3 | position: relative 4 | border-bottom: 1px solid color-border 5 | &:before, &:after 6 | content: "" 7 | position: absolute 8 | left: 0 9 | right: 0 10 | height: 40px 11 | &:before 12 | top: 0 13 | background: linear-gradient(rgba(0, 0, 0, 0.2), transparent) 14 | &:after 15 | bottom: 0 16 | background: linear-gradient(transparent, rgba(0, 0, 0, 0.2)) 17 | 18 | #header-outer 19 | height: 100% 20 | position: relative 21 | 22 | #header-inner 23 | position: relative 24 | overflow: hidden 25 | 26 | #banner 27 | position: absolute 28 | top: 0 29 | left: 0 30 | width: 100% 31 | height: 100% 32 | background: url(banner-url) center 10% #000 33 | background-size: cover 34 | z-index: -1 35 | 36 | #header-title 37 | text-align: center 38 | height: logo-size 39 | position: absolute 40 | top: 50% 41 | left: 0 42 | margin-top: logo-size * -0.5 43 | 44 | $logo-text 45 | text-decoration: none 46 | color: #fff 47 | font-weight: 300 48 | text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) 49 | 50 | #logo 51 | @extend $logo-text 52 | font-size: logo-size 53 | line-height: logo-size 54 | letter-spacing: 2px 55 | 56 | #subtitle 57 | @extend $logo-text 58 | font-size: subtitle-size 59 | line-height: subtitle-size 60 | letter-spacing: 1px 61 | 62 | #subtitle-wrap 63 | margin-top: subtitle-size 64 | 65 | #main-nav 66 | float: left 67 | margin-left: -15px 68 | 69 | $nav-link 70 | float: left 71 | color: #fff 72 | opacity: 0.6 73 | text-decoration: none 74 | text-shadow: 0 1px rgba(0, 0, 0, 0.2) 75 | transition: opacity 0.2s 76 | display: block 77 | padding: 20px 15px 78 | &:hover 79 | opacity: 1 80 | 81 | .nav-icon 82 | @extend $nav-link 83 | font-family: font-icon 84 | text-align: center 85 | font-size: font-size 86 | width: font-size 87 | height: font-size 88 | padding: 20px 15px 89 | position: relative 90 | cursor: pointer 91 | 92 | .main-nav-link 93 | @extend $nav-link 94 | font-weight: 300 95 | letter-spacing: 1px 96 | @media mq-mobile 97 | display: none 98 | 99 | #main-nav-toggle 100 | display: none 101 | &:before 102 | content: "\f0c9" 103 | @media mq-mobile 104 | display: block 105 | 106 | #sub-nav 107 | float: right 108 | margin-right: -15px 109 | 110 | #nav-rss-link 111 | &:before 112 | content: "\f09e" 113 | 114 | #nav-search-btn 115 | &:before 116 | content: "\f002" 117 | 118 | #search-form-wrap 119 | position: absolute 120 | top: 15px 121 | width: 150px 122 | height: 30px 123 | right: -150px 124 | opacity: 0 125 | transition: 0.2s ease-out 126 | &.on 127 | opacity: 1 128 | right: 0 129 | @media mq-mobile 130 | width: 100% 131 | right: -100% 132 | 133 | .search-form 134 | position: absolute 135 | top: 0 136 | left: 0 137 | right: 0 138 | background: #fff 139 | padding: 5px 15px 140 | border-radius: 15px 141 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) 142 | 143 | .search-form-input 144 | border: none 145 | background: none 146 | color: color-default 147 | width: 100% 148 | font: 13px font-sans 149 | outline: none 150 | &::-webkit-search-results-decoration 151 | &::-webkit-search-cancel-button 152 | -webkit-appearance: none 153 | 154 | .search-form-submit 155 | position: absolute 156 | top: 50% 157 | right: 10px 158 | margin-top: -7px 159 | font: 13px font-icon 160 | border: none 161 | background: none 162 | color: #bbb 163 | cursor: pointer 164 | &:hover, &:focus 165 | color: #777 -------------------------------------------------------------------------------- /themes/landscape/source/fancybox/helpers/jquery.fancybox-buttons.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Buttons helper for fancyBox 3 | * version: 1.0.5 (Mon, 15 Oct 2012) 4 | * @requires fancyBox v2.0 or later 5 | * 6 | * Usage: 7 | * $(".fancybox").fancybox({ 8 | * helpers : { 9 | * buttons: { 10 | * position : 'top' 11 | * } 12 | * } 13 | * }); 14 | * 15 | */ 16 | ;(function ($) { 17 | //Shortcut for fancyBox object 18 | var F = $.fancybox; 19 | 20 | //Add helper object 21 | F.helpers.buttons = { 22 | defaults : { 23 | skipSingle : false, // disables if gallery contains single image 24 | position : 'top', // 'top' or 'bottom' 25 | tpl : '
' 26 | }, 27 | 28 | list : null, 29 | buttons: null, 30 | 31 | beforeLoad: function (opts, obj) { 32 | //Remove self if gallery do not have at least two items 33 | 34 | if (opts.skipSingle && obj.group.length < 2) { 35 | obj.helpers.buttons = false; 36 | obj.closeBtn = true; 37 | 38 | return; 39 | } 40 | 41 | //Increase top margin to give space for buttons 42 | obj.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30; 43 | }, 44 | 45 | onPlayStart: function () { 46 | if (this.buttons) { 47 | this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn'); 48 | } 49 | }, 50 | 51 | onPlayEnd: function () { 52 | if (this.buttons) { 53 | this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn'); 54 | } 55 | }, 56 | 57 | afterShow: function (opts, obj) { 58 | var buttons = this.buttons; 59 | 60 | if (!buttons) { 61 | this.list = $(opts.tpl).addClass(opts.position).appendTo('body'); 62 | 63 | buttons = { 64 | prev : this.list.find('.btnPrev').click( F.prev ), 65 | next : this.list.find('.btnNext').click( F.next ), 66 | play : this.list.find('.btnPlay').click( F.play ), 67 | toggle : this.list.find('.btnToggle').click( F.toggle ), 68 | close : this.list.find('.btnClose').click( F.close ) 69 | } 70 | } 71 | 72 | //Prev 73 | if (obj.index > 0 || obj.loop) { 74 | buttons.prev.removeClass('btnDisabled'); 75 | } else { 76 | buttons.prev.addClass('btnDisabled'); 77 | } 78 | 79 | //Next / Play 80 | if (obj.loop || obj.index < obj.group.length - 1) { 81 | buttons.next.removeClass('btnDisabled'); 82 | buttons.play.removeClass('btnDisabled'); 83 | 84 | } else { 85 | buttons.next.addClass('btnDisabled'); 86 | buttons.play.addClass('btnDisabled'); 87 | } 88 | 89 | this.buttons = buttons; 90 | 91 | this.onUpdate(opts, obj); 92 | }, 93 | 94 | onUpdate: function (opts, obj) { 95 | var toggle; 96 | 97 | if (!this.buttons) { 98 | return; 99 | } 100 | 101 | toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn'); 102 | 103 | //Size toggle button 104 | if (obj.canShrink) { 105 | toggle.addClass('btnToggleOn'); 106 | 107 | } else if (!obj.canExpand) { 108 | toggle.addClass('btnDisabled'); 109 | } 110 | }, 111 | 112 | beforeClose: function () { 113 | if (this.list) { 114 | this.list.remove(); 115 | } 116 | 117 | this.list = null; 118 | this.buttons = null; 119 | } 120 | }; 121 | 122 | }(jQuery)); 123 | -------------------------------------------------------------------------------- /themes/landscape/source/css/_partial/highlight.styl: -------------------------------------------------------------------------------- 1 | // https://github.com/chriskempson/tomorrow-theme 2 | highlight-background = #2d2d2d 3 | highlight-current-line = #393939 4 | highlight-selection = #515151 5 | highlight-foreground = #cccccc 6 | highlight-comment = #999999 7 | highlight-red = #f2777a 8 | highlight-orange = #f99157 9 | highlight-yellow = #ffcc66 10 | highlight-green = #99cc99 11 | highlight-aqua = #66cccc 12 | highlight-blue = #6699cc 13 | highlight-purple = #cc99cc 14 | 15 | $code-block 16 | background: highlight-background 17 | margin: 0 article-padding * -1 18 | padding: 15px article-padding 19 | border-style: solid 20 | border-color: color-border 21 | border-width: 1px 0 22 | overflow: auto 23 | color: highlight-foreground 24 | line-height: font-size * line-height 25 | 26 | $line-numbers 27 | color: #666 28 | font-size: 0.85em 29 | 30 | .article-entry 31 | pre, code 32 | font-family: font-mono 33 | code 34 | background: color-background 35 | text-shadow: 0 1px #fff 36 | padding: 0 0.3em 37 | pre 38 | @extend $code-block 39 | code 40 | background: none 41 | text-shadow: none 42 | padding: 0 43 | .highlight 44 | @extend $code-block 45 | pre 46 | border: none 47 | margin: 0 48 | padding: 0 49 | table 50 | margin: 0 51 | width: auto 52 | td 53 | border: none 54 | padding: 0 55 | figcaption 56 | clearfix() 57 | font-size: 0.85em 58 | color: highlight-comment 59 | line-height: 1em 60 | margin-bottom: 1em 61 | a 62 | float: right 63 | .gutter pre 64 | @extend $line-numbers 65 | text-align: right 66 | padding-right: 20px 67 | .gist 68 | margin: 0 article-padding * -1 69 | border-style: solid 70 | border-color: color-border 71 | border-width: 1px 0 72 | background: highlight-background 73 | padding: 15px article-padding 15px 0 74 | .gist-file 75 | border: none 76 | font-family: font-mono 77 | margin: 0 78 | .gist-data 79 | background: none 80 | border: none 81 | .line-numbers 82 | @extend $line-numbers 83 | background: none 84 | border: none 85 | padding: 0 20px 0 0 86 | .line-data 87 | padding: 0 !important 88 | .highlight 89 | margin: 0 90 | padding: 0 91 | border: none 92 | .gist-meta 93 | background: highlight-background 94 | color: highlight-comment 95 | font: 0.85em font-sans 96 | text-shadow: 0 0 97 | padding: 0 98 | margin-top: 1em 99 | margin-left: article-padding 100 | a 101 | color: color-link 102 | font-weight: normal 103 | &:hover 104 | text-decoration: underline 105 | 106 | pre 107 | .comment 108 | .title 109 | color: highlight-comment 110 | .variable 111 | .attribute 112 | .tag 113 | .regexp 114 | .ruby .constant 115 | .xml .tag .title 116 | .xml .pi 117 | .xml .doctype 118 | .html .doctype 119 | .css .id 120 | .css .class 121 | .css .pseudo 122 | color: highlight-red 123 | .number 124 | .preprocessor 125 | .built_in 126 | .literal 127 | .params 128 | .constant 129 | color: highlight-orange 130 | .class 131 | .ruby .class .title 132 | .css .rules .attribute 133 | color: highlight-green 134 | .string 135 | .value 136 | .inheritance 137 | .header 138 | .ruby .symbol 139 | .xml .cdata 140 | color: highlight-green 141 | .css .hexcolor 142 | color: highlight-aqua 143 | .function 144 | .python .decorator 145 | .python .title 146 | .ruby .function .title 147 | .ruby .title .keyword 148 | .perl .sub 149 | .javascript .title 150 | .coffeescript .title 151 | color: highlight-blue 152 | .keyword 153 | .javascript .function 154 | color: highlight-purple -------------------------------------------------------------------------------- /source/_posts/20141010_interview.md: -------------------------------------------------------------------------------- 1 | title: 面试整理 2 | date: 2014-10-10 22:33:23 3 | tags: 总结 4 | --- 5 | 6 | 整理了俩最近的面试,一直想总结的,怕越托忘记的越多 7 | 8 | 9 | ##面试一## 10 | 11 | ###一面### 12 | 时间有点久了,所以记得也有点不太清楚了,只是感觉运气还是挺好的。基本上的问题都还是回答出来的 13 | 14 | 1. 跨域的几种方法,回答了四五种,然后稍微解释了下用hash的方法以及存在的一些问题,还介绍了jsonp的原理 15 | 2. 关于js继承的问题 16 | 先是介绍了比较熟悉的原型链的方法,然后还有一个方法就是如下 17 | 18 | function inherite(obj){ 19 | function f(){} 20 | f.prototype = obj; 21 | return new f(); 22 | } 23 | 24 | 然后后面估计是面试官突然想到的,他说有一个函数p,内部定义了很多方法和对象,然后在构造的过程中比较消耗,问我怎么办,我当时理解的就是函数p以及他上面的原型链上都包含了很多的东西,就想不到怎么回答,后来问了。面试官的意思就是用上面的办法。只是我没听清除,这个只是函数本身比较复杂,对于原型上还是比较简单的 25 | 中间还问了一些原型的问题,我就拿着笔在纸上画了一些理解的东西给他看 26 | 3. 问了一个最简单的正则的问题,我回答平时只是用的时候会去查查,然后问了俩简单的。刚好会 27 | 4. css的盒子模型,正常跟不正常的两种 28 | 5. 由于中间我提到了一些自己对于性能的问题的理解,他就让我说一些性能的优化,我说自己整理过一些,看过那个《网站建设指南》,里面一些基本的东西,自己平时还会注意比如变量的缓存,闭包,setTimeout的问题,还有就是图片最好一开始设置大小。防止后面突然加载进来之后的重绘的操作,然后还说了一些对于那些经常触发的事件,要控制好频率,比如onresize的事件,然后面试官让我写一些代码。然后==!很尴尬一下子卡住了 29 | 6. 浏览器输入url后发生的事情,比较老套的问题,把我知道的都说给他听了,从dns开始查询。中间他问道有个建立链接的过程呢,我说是不是三次握手四次放手,然后补上细节的东西确实没有细学 30 | 7. 然后我扯了一堆自己关于前端的想法还有感受 31 | 8. 还问了几个老套的关于布局的问题。比如左边定宽右边自适应等等的问题 32 | 9. 貌似还提到了bfc的用处还有就是bfc的原理 33 | 10. 问了我平时是怎么学习前端的知识的。如何在后期稳定持续的学习上去,如何来提高自己的编码能力 34 | 35 | 总结:感觉回答的挺好的,技术问题准确说来应该就一个没回答上来,然后还跟面试官扯了一些自己的体会跟想法,貌似把他忽悠住了 36 | 37 | ###二面### 38 | 这面比较神奇,因为遇到了一个很特别的面试官,他主要做的就是你来选点,他来问你你是怎么发现这个问题,怎么解决这个问题 39 | 1. 当时一看到我有一个整理的博客,然后就说直接看你写的东西好了,问你现在最想介绍这里面的哪个文章给我,我就说我印象中比较深的一点事情,然后了博文中整理的那个关于setTimeout的这个点的发现,有点印象很深刻 40 | 2. 问到如何把一件产品做的更好,你会怎么做,我想了一下,首先说了一点前端需要做好一些技术上工作做好性能的优化,然后再提到应该参与到产品里的工作,提出自己的想法,然后就一点一点来问。我具体是怎么做的,有什么例子可以来说明你做了这些工作 41 | 3. 最后我也向他问了下他们在node这方面是怎么在做的,他很nice,细心给我解答了一些他们的工作,一些里面用的技术细节,比如ps里面的东西可以用js来操作等等 42 | 43 | 这面很奇怪更多是在跟面试官探讨一些东西,至于边上的hr。貌似就是在打酱油,最后随便问了家里情况。 44 | 45 | 总结:我还是相当喜欢这样的面试官,给人感觉很nice,毕竟技术的东西再怎么样总有你不会的盲点,最后顺利拿下了offer,最狗屎的一个 46 | 47 | 48 | 49 | ##面试二## 50 | 51 | ###笔试### 52 | 下班后跟小伙伴打车过去打了个酱油,题目还是很正规的那种,全是前端的题目,不像某公司的笔试,前端做哭了,感觉还不错,有关于闭包的东西,有关于移动端的东西就是手机端如果可以无限内容如何不让手机崩溃(这个我是随便猜的,不过最后看了结果,貌似猜对了),还有关于opcity,还有console等等的东西,题目感觉还是很基础的,最后貌似看到成绩==!50多分,但是面试官说貌似还不错的成绩 53 | ###面试一### 54 | 果然是做技术的公司就是不一样,深深被折服了 55 | 1. 问了有关position的问题,由于之前准备过了,所以按自己的理解解释了一遍 56 | 2. 盒子模型 57 | 3. 对笔试试卷中的一个有关闭包的问题进行的引申,主体是关于缓存的机制,我说用闭包保存参数还有结果;接着面试官又提到那如果现在这个函数应用到很频繁的情况下,还是要经常计算,效率不高吧;我说要不用一个数组来保存这些对象,然后她说那有可能连续很多都没重复不是也不高么,我突然接了一句。我说把数组定长,然后满了的时候把那些最少用的给剔除,他说怎么来实现呢,我回答用个conut来标记下,每次排序去掉最小的,他说每次么,效率不高诶,我后来想了想说就慢的时候,用一次的遍历来查找。貌似他感觉还好,但还不是他满意的答案。她说关于缓存的东西操作系统里应该会教过的==!我说真没印象了 58 | 4. 然后又问了个给你个节点。你把所有的节点遍历出来,然后我就写了一个,,他看了下,说这样是可以,那如果我现在的节点很多,只要找到其中一个节点就可以停止了,你怎么做;我想了下问是类似递归么?他说可以,写完之后他说你这样貌似是深度优先做的,那写一个广度优先的,然后我写了一下。大致写了主要是思想,这个题目貌似答的还不错 59 | 5. 问了点性能优化,然后我就按照自己的印象说了一些,我又说其实我之前有整理过的一些,他说,他知道++!在看,好紧张 60 | 6. 问了事件的代理,我怎么来做,我给他解释了下我的思路,然后他想了一个应用的场景给我,我大概说给需要绑定的事件加个class再来判断,貌似没有让他很满意,然后我说下我如果遇到这样的场景会怎么来是实现,貌似还行 61 | 7. 62 | 63 | 总结:果然是风格不一样,偏重于编程能力还有算法,跟上面的偏重于产品什么的不一样,技术为主,感觉面的还是挺顺利的 64 | 65 | ###面试二### 66 | 面的不好,应该是挂了,面试官人超级赞,了解下我的情况,跟我聊了聊其他的东西,然后我也说了。缓解了下紧张,由于一开始犯2了,提了下用过他们公司的一个库,然后他问你知道那个是谁写的么,我说难道就是你们?他说对,还有昨天面试的那个一面面试官几个人一起的,我去,刚好撞上了,ps:第一次离开源库的作者这么近的距离 67 | 68 | 他说既然你提到这个库了,问了个问题,关于数学的。给跪了,他让我用程序的角度去实现,一直不开窍,最后他说了出来,真是跪了。这样风格的问题,真是想不到 69 | 1. 让我实现一个居中,先说父元素是定宽高的,我说直接position :aosulute,父元素position:relative,她说为什么要父元素设置呢,我回答了下,然后又继续问那父元素不是定宽高的怎么办,我又说了个方法,不过貌似回答的不是很好,而且有点忘记了==! 之前还整理过的。唉。 70 | 2. 然后又问了下单行字符过多的时候用省略号的时候怎么实现==!,我之前做的时候都是临时找,没有好好记,这回吃亏了吧 71 | 3. 问了haslayout的问题,我说我看过但是没有很理解,意思就是让他别问了==!我说我看过一点bfc的东西 72 | 4. 问我会那些hack,我写了俩,然后说还有呢,我说我基本不用hack,她说确实实际不怎么用 73 | 5. 问我会正则么。我说基本不用,用的时候再去查找 74 | 6. 给我一个字符串[1,2,2,5,'5','']怎么去重,我说我遍历两次,第一次放到一个对象中,类似key-value的map的方式来存储;面试官说那这个5跟'5'你还能区分出来么?我说哎呀没看清,然后我又想了一会,说要不直接给每个KEY数值+1,这样可以区分5跟'5',面试官说可以么?==我又不确定了,然后她说笔试题里的那个console的题目做的很差,我说恩;他提示到这个keymap的方式是对的,后来我又想了一会,说我有个馊主意,不知道可以否,说对于这些key值,我采用字符串拼接的方法typeof key +key的形式,他回答说可以 75 | 7. 然后问我随即生成1-100之间的随机数,我说math.random里生成0-1之间的随机数,然后取整,但是我没记得具体的函数的名称==,好尴尬,然后说让我排序下,我说对整个array进行一次sort,他说这样sort对么?我说对,她说不对,这样的按照字符的进行排序,我说那可以在sort传一个具体的排序函数,他让我写下,我说我只知道这个点,但是没试过,所以忘记了 76 | 8. 还问了一个this的问题,我觉得好失败==,这类的问题都挂了,估计给面试官的印象超级不好了把 77 | 78 | 79 | 总结:面试官最后问了我下,你感觉面的怎么样,我说不好,他说也不好==!恩,这就是挂的节奏了,他说我的笔试跟一面都挺不错的,但是这二面的水平,估计换成一面也要挂,说我基础还是略虚,特别是css方面 -------------------------------------------------------------------------------- /source/_posts/20150227_sum.md: -------------------------------------------------------------------------------- 1 | title: 14年下半年遇到的问题总结 2 | date: 2015-02-27 16:37:16 3 | tags: 总结 4 | --- 5 | 6 | 稍微整理下一些走过的问题 7 | 8 | 9 | 10 | ###1. 关于事件的解除绑定### 11 | 如果业务的需求或者是切换router的时候,需要将一些事件解除原来的绑定, 12 | 13 | var eventFunc = function (){ 14 | /*Event function*/ 15 | } 16 | $("#a").bind("click",eventFunc); 17 | $("#a").unbind("click",eventFunc); 18 | 19 | 一般的情况这样即可,但是如果要将eventFunc绑定下一个this的作用域呢,可能会直接的eventFunc.bind(this),这样来写了,可后来测试了下没有用,其实原因就在于bind函数的问题,在MDN上给bind的解释是 20 | 21 | bind()方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入 22 | bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数 23 | 运行时本身的参数按照顺序作为原函数的参数来调用原函数. 24 | 25 | 大致的情况就是每次bind都是返回一个新的函数,所以类似eventFunc.bind(this)===eventFunc.bind(this)返回的是false,解决的办法可以声明一个eventFunc2 = eventFunc.bind(this),然后每次绑定和解除绑定都使用这个 26 | 27 | ###2. 关于usagent的正则匹配 28 | 29 | 一般做一些简单的在移动端做一些usagent的检测用正则来检测,比如来监测android,会写 30 | 31 | var testAndroid = /(android)/ig; 32 | testAndroid.test(navigator.userAgent.toLowerCase()); 33 | 来进行判断,类似这样的头 34 | 35 | "mozilla/5.0 (linux; android 4.2.1; en-us; nexus 4 build/jop40d) applewebkit/535.19 (khtml, like gecko) chrome/18.0.1025.166 mobile safari/535.19" 36 | 37 | 当然会返回true,但是要是在运行一次testAndroid.test(navigator.userAgent.toLowerCase());结果却是**false** 38 | 39 | 原因是每个正则表达式都有一个 lastIndex 属性,用于记录上一次匹配结束的位置,所以第二次匹配的时候不是从0开始,解决的办法就是testAndroid.lastIndex=0设置下 40 | 41 | **正则有时间必须要好好深入看看** 42 | 43 | ###3. 关于location.reload() 44 | 45 | window.location.reload(),一直使用的时候,都没注意里面的参数,直到上次在FF下遇到一个类似缓存的问题了,才看了下貌似有这么一段东西 46 | 47 | 如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上 48 | 的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存 49 | 中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。 50 | 51 | 如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下 52 | 载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。 53 | 54 | 偶尔间看到一个好玩的[535 ways to reload ](http://www.phpied.com/files/location-location/location-location.html) 55 | 56 | ###4. 浮动元素并排放兼容问题 57 | IE7 下浮动元素并排放置不设置高度会错位,这个原因还未知,但是也是通过这个方法得到了解决 58 | 59 | ###5. 关于IE7下的tr 60 | IE7下不能设置tr的border。解决的方法及就是用td来设置 61 | 62 | 关于这种兼容性的问题,也真是头疼,只能遇到一个解决一个,可惜没有一个银弹,推荐的是一个网站can I use 自行google,里面有很多详细的兼容介绍 63 | 64 | ###6. IE下有些margin属性的问题 65 | IE下有些margin-left为负数没有用(查看下IEbug里面是否有这样的案例)zoom:1触发下haslayout就好了,貌似网上找到了一个例子可以看看[RB1001](http://w3help.org/zh-cn/causes/RB1001) 66 | 67 | ###7. float 左右布局,左右div等高 68 | 关于实现float 左右布局,左右div等高的方法有,很多种,具体的可以看[博文](http://blog.csdn.net/wodetiankong516/article/details/12010121) 69 | 70 | 这个方法的原理是事先通过正内边距来使其拥有足够高的布局控件,然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏,我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度,从而实现了等高。 当一列不浮动搭配正内边距加负外边距,父元素溢出隐藏,它的高度跟还是由内在元素来决定。css的精华在于,总容器里面加:overflow:hidden; 多列容器里面加:padding-bottom:32767px; margin-bottom:-32767px; 71 | 72 | ###8. 关于遇到一些多选的问题 73 | 对于一些表单,有很多多选题的时候,有一个比较投机的处理办法,就是使用位运算来进行区分1 2 4 8 类似0001 0010 0100 1000 74 | 一个不错的办法 75 | 76 | ###9. 关于一些情况下的margin 77 | 如下一段代码 78 | 79 | /*css*/ 80 | .container{width: 700px;height: 500px;background-color: red;} 81 | /*html*/ 82 |
83 |
11212
84 |
85 | 86 | 效果如下![pic1](http://7vzsgl.com1.z0.glb.clouddn.com/blog20150227_sum1.png) 87 | 88 | 然后我们在给body加点样式 89 | 90 | /*css*/ 91 | .body1{margin-top:50px;} 92 | 效果如下![pic2](http://7vzsgl.com1.z0.glb.clouddn.com/blog20150227_sum2.png) 93 | 可以发现父元素设置的背景色,还是跟子元素里面的内容紧贴,虽然确实是有margin的效果,但是父元素的背景色却没有将子元素的margin的间隙填满,这个效果出现的原因是**父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding,就会不断一层一层的找自己祖先元素** 94 | 个人的理解是发生了margin的重叠,子元素的margin跟父元素的margin-top进行叠加,最后将整体的margin体现在父元素上,对于解决的方案也有几种 95 | 1. 将父元素构建一个bfc 96 | 2. 给父元素加上border-top或者padding-top 97 | 3. 对子元素试用padding-top 98 | 99 | 顺便提到一篇文章关于[magin](http://www.hicss.net/do-not-tell-me-you-understand-margin/)的很不错 100 | 101 | ###10. 关于windows.open 102 | 之前做过一个功能,大致是这样的情况,用于点击一个按钮,然后向服务端发起请求,如果请求成功则打开一个新的页面,记得当时测试的时候,在chrome浏览器中会出现,请求成功但是没有成功打开新的窗口的功能,貌似这个打开的被浏览器拦截。后来将这个异步的请求修改为同步之后就又可以了。这个应该是跟浏览器内部的安全机制有关。 103 | 具体可以看看这个文章[window.open为何会被浏览器拦截](http://www.520ued.com/article/5417ef368d31c11e3b0003ff) 104 | 105 | ###其他 106 | 107 | 1. 如果在页面做一个设备的识别然后进行调转。如果页面中 有加载图片的过程,可能会出现的是图片还没加载完毕,然后就进行链接的跳转的,这样的结果是看到的图片还没加载完毕就会被打断,然后看不到图片 -------------------------------------------------------------------------------- /source/_posts/20140124_proto.md: -------------------------------------------------------------------------------- 1 | title: js整理一:原型的理解 2 | date: 2014-11-10 23:54:06 3 | tags: js 4 | --- 5 | 6 | 自己对js中原型的理解整理 7 | 8 | 9 | 10 | 先介绍下几个属性,都是自己看着书上然后对这个概念的个人理解,如果有不对的地方,还请指出交流下~~,具体的参考见文章最下面 11 |   12 | ##1.1每个对象中的proto介绍## 13 | 14 | 关于在函数的创建过程中,每一个实体都是一个对象,而每一个对象都有一个属性proto,有些浏览器不可以查看他,不过测试了下IE11下是可以查看的,不过可以用另外的方法来替代他,比如isPrototypeOf()的方法来确定对象之间是否存在某种关系,如果a的proto指向b,那么b.isPrototypeOf(a)将会返回true的结果。 15 | 在加一点个人对proto的一点理解,这个属性是原型链的关键,所有之后要做的原型链的属性的搜索正式靠这个指针不停往上搜索的。 16 | 17 | ##1.2每个函数中的prototype属性## 18 | 19 | 在js中函数也是一个对象,所有他也有前面所提到的__proto__属性,然后他还有他自己的一个特有的属性,就是prototype属性,这个属性跟__proto__一样可以理解为一个指针的形式,prototype指向了函数的函数原型对象,说了这么多,来一个具体的例子试试 20 | 21 | function fTest(name){ 22 | this.name = name; 23 | } 24 | fTest.prototype.getname = function(){ 25 | console.log(this.name); 26 | }; 27 | var oTest = new fTest("hello"); 28 | 29 | ![pic1](http://7vzsgl.com1.z0.glb.clouddn.com/blog20140124_proto1.png) 30 | 图中还写了俩个新的对象,一个是function.prototype,Object.prototype 31 |   (1)function.prototype:按照前面提到的__proto__的理解,既然fTest是一个函数,那么他应有有函数所有的方法,所有它的__proto__当然是指向了function.prototype,这里面有函数的一些基本的方法;同理对于fTest.prototype属性,他是一个Object对象,所以他也有一些对象的基本的方法,所以fTest.prototype指向的是Object.prototype;然后对于function.prototype他也是一个对象所以同上也指向了Object.prototype。然后关于一个新的指针constructor,这个在后面再提到。 32 |   (2) 当然Object.prototype已经是顶点了,他的__proto__就是NULL了。 33 |    34 | ##1.3理解下组合使用构造函数和原型模式## 35 | 在上面的代码中function fTest中声明了一个变量name这个变量可以理解为是一个针对一个实例声明的变量,而在fTest.prototype中声明的getname方法是一个公用的方法,再看下面的代码 36 | 37 | function fTest(name){ 38 | this.name = name; 39 | } 40 | fTest.prototype.getname = function(){ 41 | console.log(this.name); 42 | }; 43 | var oTest1 = new fTest("hello"); 44 | var oTest2 = new fTest("hi"); 45 | //oTest1.getname === oTest2.getname true 46 | //oTest1.name === oTest2.name false 47 | 48 | 可以理解为getname方法是共有的,而属性name是私有的,这个的话个人的理解是由于原型链的存在,当你使用oTest1.name的时候,他首先会在实例oTest1中去寻找name这个属性,如果找到了就停止,否则会继续沿着原型链向上寻找,比如getname这个方法,他不再实例中,所以要向上搜寻一次,然后便找到了这个方法,但是他是在两个实例所共享的一个fTest.prototype中的一个方法,所以他们的getname方法其实指向的是同一个方法,可以oTest1.getname === oTest2.getname测试下,返回为true。 49 | 50 | ##1.4原型链的实现## 51 | 52 | 在原型链的实现上,1.3中已经提到过一些了,现在稍微整理一下,(参考了javascript高级程序设计中的一些话),每当代码读取某一个对象的属性的时候,都会执行一次搜索,目标是具有给定名字的属性,首先在实例本身开始,如果实例中存在,则返回属性的值,否则继续搜索他指针指向的原型对象。 53 |   当然如果在原来的基础上,如果实例添加了一个属性,而这个属性在原型中也有,此时他会覆盖在原型中的那个原来的属性,再看下面的代码,很多是看js高级程序设计上面的内容的 54 | 55 | function fTest(name){} 56 | fTest.prototype.name = "hello"; 57 | fTest.prototype.getname = function(){ 58 | console.log(this.name); 59 | }; 60 | var oTest1 = new fTest(); 61 | var oTest2 = new fTest(); 62 | oTest1.hasOwnProperty("name");//false 63 | oTest2.hasOwnProperty("name");//false 64 | oTest1.__proto__ === oTest2.__proto__;//true 65 | console.log(oTest1.getname());//hello 66 | console.log(oTest2.getname());//hello 67 | //下面开始变化了 68 | oTest1.name = "hi"; 69 | console.log(oTest1.getname());//hi 70 | console.log(oTest2.getname());//hello 71 | oTest1.hasOwnProperty("name");//true 72 | oTest2.hasOwnProperty("name");//false 73 | delete oTest1.name;//删除实例中的name属性 74 | console.log(oTest1.getname());//hello 75 | console.log(oTest2.getname());//hello 76 | oTest1.hasOwnProperty("name");//false 77 | oTest2.hasOwnProperty("name");//false 78 | 79 | 此时将这个状态定义为State1好了,这个时候的图如下所示: 80 | ![pic2](http://7vzsgl.com1.z0.glb.clouddn.com/blog20140124_proto2.png) 81 | 对上诉代码大概的进行解释以下,前几步都是跟之前一样的风格跟理解,此时oTest1. __proto__和oTest2. __proto__都指向fTest.prototype,所以他们公用一个name属性,然后这里用了hasOwnProperty方法来测试,在实例oTest1中是否有name的属性,结果是没有。oTest2同理。 82 | 然后下一个状态定义为State2 83 | ![pic3](http://7vzsgl.com1.z0.glb.clouddn.com/blog20140124_proto3.png) 84 | 然后再执行oTest1.name = "hi";这个话使得在实例oTest1中添加了name属性,这一点可以通过oTest1.hasOwnProperty("name");来证明,测试结果返回的是true,根据前面提到js查找一个变量的方法,现在他先找到了实例中的name属性,所以console.log(oTest1.getname());结果是hi,而console.log(oTest2.getname());任然为hello,因为在实例oTest2中并没有属性name,所以在原型链的查找过程中很自然的找到的是在fTest.prototype中的name属性。 85 | 86 | 最后又执行了delete oTest1.name;删除实例中的name属性,是这些都回复到了状态1中~~ 87 | 88 | 最后送上一个牛逼的图,作者貌似就是图最上面的那行 89 | ![pic4](http://7vzsgl.com1.z0.glb.clouddn.com/blog20140124_proto4.jpg) 90 | -------------------------------------------------------------------------------- /themes/landscape/source/js/script.js: -------------------------------------------------------------------------------- 1 | (function($){ 2 | // Search 3 | var $searchWrap = $('#search-form-wrap'), 4 | isSearchAnim = false, 5 | searchAnimDuration = 200; 6 | 7 | var startSearchAnim = function(){ 8 | isSearchAnim = true; 9 | }; 10 | 11 | var stopSearchAnim = function(callback){ 12 | setTimeout(function(){ 13 | isSearchAnim = false; 14 | callback && callback(); 15 | }, searchAnimDuration); 16 | }; 17 | 18 | $('#nav-search-btn').on('click', function(){ 19 | if (isSearchAnim) return; 20 | 21 | startSearchAnim(); 22 | $searchWrap.addClass('on'); 23 | stopSearchAnim(function(){ 24 | $('.search-form-input').focus(); 25 | }); 26 | }); 27 | 28 | $('.search-form-input').on('blur', function(){ 29 | startSearchAnim(); 30 | $searchWrap.removeClass('on'); 31 | stopSearchAnim(); 32 | }); 33 | 34 | // Share 35 | /*$('body').on('click', function(){ 36 | $('.article-share-box.on').removeClass('on'); 37 | }).on('click', '.article-share-link', function(e){ 38 | e.stopPropagation(); 39 | 40 | var $this = $(this), 41 | url = $this.attr('data-url'), 42 | encodedUrl = encodeURIComponent(url), 43 | id = 'article-share-box-' + $this.attr('data-id'), 44 | offset = $this.offset(); 45 | 46 | if ($('#' + id).length){ 47 | var box = $('#' + id); 48 | 49 | if (box.hasClass('on')){ 50 | box.removeClass('on'); 51 | return; 52 | } 53 | } else { 54 | var html = [ 55 | '
', 56 | '', 57 | '
', 58 | '', 59 | '', 60 | '', 61 | '', 62 | '
', 63 | '
' 64 | ].join(''); 65 | 66 | var box = $(html); 67 | 68 | $('body').append(box); 69 | } 70 | 71 | $('.article-share-box.on').hide(); 72 | 73 | box.css({ 74 | top: offset.top + 25, 75 | left: offset.left 76 | }).addClass('on'); 77 | }).on('click', '.article-share-box', function(e){ 78 | e.stopPropagation(); 79 | }).on('click', '.article-share-box-input', function(){ 80 | $(this).select(); 81 | }).on('click', '.article-share-box-link', function(e){ 82 | e.preventDefault(); 83 | e.stopPropagation(); 84 | 85 | window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450'); 86 | });*/ 87 | 88 | // Caption 89 | $('.article-entry').each(function(i){ 90 | $(this).find('img').each(function(){ 91 | if ($(this).parent().hasClass('fancybox')) return; 92 | 93 | var alt = this.alt; 94 | 95 | if (alt) $(this).after('' + alt + ''); 96 | 97 | $(this).wrap(''); 98 | }); 99 | 100 | $(this).find('.fancybox').each(function(){ 101 | $(this).attr('rel', 'article' + i); 102 | }); 103 | }); 104 | 105 | if ($.fancybox){ 106 | $('.fancybox').fancybox(); 107 | } 108 | 109 | // Mobile nav 110 | var $container = $('#container'), 111 | isMobileNavAnim = false, 112 | mobileNavAnimDuration = 200; 113 | 114 | var startMobileNavAnim = function(){ 115 | isMobileNavAnim = true; 116 | }; 117 | 118 | var stopMobileNavAnim = function(){ 119 | setTimeout(function(){ 120 | isMobileNavAnim = false; 121 | }, mobileNavAnimDuration); 122 | } 123 | 124 | $('#main-nav-toggle').on('click', function(){ 125 | if (isMobileNavAnim) return; 126 | 127 | startMobileNavAnim(); 128 | $container.toggleClass('mobile-nav-on'); 129 | stopMobileNavAnim(); 130 | }); 131 | 132 | $('#wrap').on('click', function(){ 133 | if (isMobileNavAnim || !$container.hasClass('mobile-nav-on')) return; 134 | 135 | $container.removeClass('mobile-nav-on'); 136 | }); 137 | })(jQuery); -------------------------------------------------------------------------------- /source/_posts/20160609-packagejson-md.md: -------------------------------------------------------------------------------- 1 | title: Package.json 2 | date: 2016-06-09 21:26:35 3 | tags: 总结 4 | --- 5 | 6 | 关于Package.json的一点注意 7 | 8 | 9 | 10 | ## 1. 起因 11 | 12 | 现在基本上所有的前端组件代码仓库,无论是打包工具还是组件的依赖包都需要有package.json这个文件,虽然每天在接触的package.json,但是我猜能一口气把常见的配置说出来是个什么鬼的人并不是大部分,所以有机会都可以了解下。 13 | 14 | 很多人有时候会很偷懒,在新建一个工程的时候习惯把把前一个工程的的package.json直接拷贝过来,虽然很多时候并没有太大的影响,但这也太随意的。 15 | 16 | 1. 很多npm包在使用的时候并不需要,额外包给项目初始化的时候耗费时间(大部分虽然影响只有一次) 17 | 2. 有些组件包package.json错误的使用,会让其他引用它包可能都带来问题 18 | 3. 有些字段类似name、version、publishConfig、homepage、bugs、repository对应那些要上传至npm的包则是需要严格要求的 19 | 4. 组件的依赖关系在package.json中不能在dependencies、devDependencies、peerDependencies随便放 20 | 21 | ## 2. 几个字段的说明 22 | 23 | ### 2.1 version 24 | 25 | 版本号,对于那些发至npm的组件,要非常注意,一般都是使用语义化版本号来命名, 26 | 27 | 28 | ### 2.2 scripts 29 | 30 | 这里可以定义一些脚本的处理,比如本地启一个server的时候或者是使用一些打包,比如browserify的打包,有些人习惯用gulp或者是grunt来进行打包,但是还有一部分是是用[npm-script进行打包的](http://substack.net/task_automation_with_npm_run),这样适合那些对打包的配置想有跟多的掌控,但是代价就是会更复杂 31 | 32 | [npm官方关于npm-scripts一些描述](https://docs.npmjs.com/misc/scripts),有一点就是除了那些特定的script可以直接npm \*\* 运行,其他的需要使用npm run \*\* ,比如我们对仓库代码要进行打包我们定义一个build,他默认会提供俩钩子,分别是pre & post 33 | 34 | ``` 35 | { 36 | "scripts":{ 37 | "prebuild": "echo 'prebuild'", 38 | "build": "echo 'build' ", 39 | "postbuild": "echo 'afterbuild' " 40 | } 41 | } 42 | ``` 43 | 这样运行npm run build,就会同时跑以上的三个任务 44 | 45 | 46 | ### 2.3 main 47 | 48 | main字段配置一个文件名指向模块的入口程序,比如你的入口文件是放在lib/index.js,有俩种做法,一种是在main中定义 49 | 50 | ``` 51 | { 52 | "main" : "lib/index.js" 53 | } 54 | ``` 55 | 方法二则是在根目录下建一个index.js里面则是 56 | 57 | ``` 58 | module.exports = require('lib/index.js'); 59 | ``` 60 | 61 | ### 2.4 dependencies、devDependencies、peerDependencies 62 | 63 | #### 2.4.1 dependencies 64 | 65 | 当前包强依赖的三方包 66 | 67 | #### 2.4.2 devDependencies 68 | 69 | 当前包开发或者测试依赖的三方包 70 | 71 | 在本地的开发使用过程中dependencies和devDependencies并没有太大的区别,但是一旦发布到npm包,这就会有差别,作为npm 的包在install的时候不会安装devDependencies的依赖 72 | 73 | #### 2.4.3 peerDependencies 74 | 75 | 举个列子,当包A和包B同时依赖了模块C,而且比较悲剧的事情俩C的版本却不一样,无论是npm3还是npm2都是会将俩版本的模块C都安装,这个时候可以在peerDependencies指定模块c的版本 76 | 77 | **注:在npm3版本之前定义在peerDependencies也会自动安装,但是在npm3中则不会,他仅仅只是有一个提示** 78 | 79 | 80 | ## 3. 使用中注意的几点 81 | 82 | 83 | ### 3.1 react及react-dom 84 | 85 | 关于react以及react-dom在package.json中,应该如何放置呢? 86 | 87 | #### 3.1.1 从含义上来说 88 | 89 | 对应某个组件,react及react-dom确实是一个组件实际依赖的部分,按照这个逻辑是应该放到dependencies应该是更为合理,但是问题来了,如果包内外依赖的组件版本不一致的时候,会同时引入两份react,这个浏览器端会报错,,而且react本事并不小。虽然这个问题可以通过webpack中配置来解决,最终在页面中引入一份js即可,但是这样的话需要所有用你组件的同学用这样的打包方式,不太合适 90 | 91 | ``` 92 | { 93 | externals: { 94 | "react": "React", 95 | "react-dom": "ReactDOM" 96 | } 97 | } 98 | ``` 99 | 100 | #### 3.1.2 使用中 101 | 102 | 当初@何道同学提起了这个问题,我于是去喵了喵现在的组件包中对react及react-dom的引用。 103 | 104 | 1. 比如[react-component/slider](https://github.com/react-component/slider)的使用方式则是使用了devDependencies,尴尬的问题就是如果我外面没有引用react,在npm安装的时候并不会安装,(虽然在使用的场景中,外部引用组件的仓库肯定会用引用react),略尴尬 105 | 2. 比如[reactjs/react-redux](https://github.com/reactjs/react-redux),他的使用方式是在peerDependencies中定义了react及react-dom的引用,其实这个是个人觉得更加合理的方式,但是很不幸的问题是在npm3之前这个是完全没问题的,而在npm3中则不会自动安装,只是一个提示,在本地开发有点尴尬 106 | 107 | 纠结了很久,后来看到了[这个文章](http://stackoverflow.com/questions/30451556/what-is-the-correct-way-of-adding-a-dependency-to-react-in-your-package-json-for),嗯脑补了下确实如此,感觉比较合理的方式是将react及react-dom的依赖同时定义在devDependencies、peerDependencies,这样貌似看起来本地开发,包发布俩不误,注意在peerDependencies中可以将依赖的组件版本定的更为宽泛点 108 | 109 | ``` 110 | { 111 | "peerDependencies": { 112 | "react": "^0.14.0 || ^15.0.0", 113 | "react-dom": "^0.14.0 || ^15.0.0" 114 | }, 115 | "devDependencies": { 116 | "react": "^0.14.0", 117 | "react-dom": "^0.14.0" 118 | } 119 | } 120 | ``` 121 | 122 | 123 | ### 3.2 版本号 124 | 125 | 一般不太建议将版本号写的太死,也不能太随性,关于~和^差别不一样,要注意区分 126 | 127 | ``` 128 | "async": "~0.9.0", 129 | "async": "^0.9.0" 130 | ``` 131 | 132 | 133 | ## 4. 其他 134 | 135 | ### 4.1 npm2 vs npm3 136 | 137 | 1. 安装速度:npm3安装速度完虐npm2,一般安装npm3还是比较安静的,但是安装一个npm2基本上pro可以烧开一壶水了 138 | 2. npm3在安装的时候会将你的所有依赖的一样的版本号的包进行抽离出来,打平到最外层,这个感觉对提示效率还是蛮明显的,但是想想对于一个包来说,更加对的方式应该还是安装到相应的组件包的folder下面,这样的做法有一个就是,有时候不小心require一个模块,但是package.json中没有定义,在npm3中还是会正常工作,因为有可能那个模块被他引的模块给引入,因为npm3的包打平放到了最外层 139 | 140 | 141 | ### 4.2 参考 142 | 143 | 1. [What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?](http://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies?rq=1) 144 | 2. [npm package.json](https://docs.npmjs.com/files/package.json) 145 | 146 | -------------------------------------------------------------------------------- /source/_posts/20140519_bootstrap.md: -------------------------------------------------------------------------------- 1 | title: boostrap的一些资源清单 2 | date: 2014-05-19 23:17:05 3 | tags: 前端资源 4 | --- 5 | 自己整理了一些boostrap的资源清单,列下顺便整理书签 6 | 7 | 8 | # bootstrap资源收集 9 | 10 | --- 11 | 之前入门的时候是从bs开始入手的,花过挺多的时间去浏览网站上照一些资源,看到好的都会默默留在书签里,干脆一起整理下分享,好让需要的人可以简单点 12 | 13 | ##一、botstrap有关插件## 14 | 15 | 1. [Bootstrap Tour][1] 关于分步介绍的插件 16 | 2. [bootstrap-lightbox][2] 关于图片展示的一个插件,点击之后会有一个类似遮罩的效果 17 | 3. [Bootstrap video player][3] 视频播放插件 18 | 4. [bootstrap-hover-dropdown][4] 一个点击按钮出现下拉框的插件,比较扁平化 19 | 5. [DataTables][5] - Blog表格排序 20 | 6. [Flippant.js][6] 点击修改文档的,类似bootstrap中自带的那个modal一样,不过效果很炫 21 | 7. [bootstrap-datetimepicker][7]时间插件 22 | 8. [Bootbox.js][8] 同6,类似modal那个效果 23 | 9. [X-editable][9] 提供一个可以修改文档的方法,还不错效果 24 | 25 | 26 | ##二、bootstrap有关资源## 27 | 1. [最全的 Twitter Bootstrap 开发资源清单][10] 之前在网上偶尔看到的很多资源的一个集合 28 | 2. [The Best BootStrap Resources][11] 同10资源非常的丰富,根据需要进行筛选 29 | 3. [Ridder][12] 一个修改的bootstrap的主题 30 | 4. [Bootsnipp][13] bootstrap上一些集成的组件 31 | 5. [Intro.js][14] 一个类似1的插件 32 | 6. [TreeGrid][15] 树型的插件 33 | 7. [jquery-treegrid][16]同15也是一个树形的插件 34 | 8. [Bootstrap Image Gallery][17]一个展示图片和视频的插件。效果类似自带的modal 35 | 9. [30个惊人的插件来扩展 Twitter Bootstrap][18] 36 | 10. [WordPress Themes, Reviews and News][19]一些相关的主题 37 | 11. [25个强大、实用的Bootstrap工具和生成器][20] 38 | 12. [40 个Bootstrap工具和生成器][21] 39 | 13. [Bootstrap Expo][22]一些主题挺不错的 40 | 14. [flatstrap][23]同是bs的一些主题,扁平化的多 41 | 15. [bootsnipp][24]貌似国外的一个bs资源的网站 42 | 16. [jqBootstrapValidation][25]bs的一个验证的插件 43 | 17. [GitHub托管BootStrap资源汇总][26]一个人他的一些收集 44 | 18. [Fuel UX][27]一个继承了很多新功能的插件的地方,比如树形,时间等,作者貌似定制了一份 45 | 19. [最全的 Twitter Bootstrap 开发资源清单][28]又是某一个最全 46 | 20. [12款最佳的Bootstrap设计工具][29]csnd上的 47 | 21. [一款后台主题][30]超级赞!!看了就知道了不过貌似要付费的 48 | 22. [bootstrappage][38] 一些免费的bs主题 49 | 23. [免费的响应式bootstrap管理员后台界面主题][39] 50 | 24. [wrapbootstrap][40]一些bs的后台的主题 51 | 25. [matrix-admin][41]不错的一个后台主题 52 | 26. [portnine-free-bootstrap-theme][42]国人写的一个主题托管在csdn上 53 | 54 | ##三、bootstrap有关metro的资源## 55 | 31. [bootcss][31]挺赞的 56 | 32. [metro-bootstrap][32] 57 | 33. [Metro JS][33] 58 | 34. [一些metro风格的介绍][34] 59 | 35. [metro-bootstrap][35] 60 | 36. [bootmetro][36] 61 | 37. [bootswatch][37]看着挺赞的 62 | 63 | 东西不多不过都是自己挺长时间来一直收集下来的,希望能有幸帮到需要的人,下次我再整理一个有关jQuery的一些插件的东西。 64 | 65 | [1]:http://bootstraptour.com/ 66 | [2]:http://www.jasonbutz.info/bootstrap-lightbox/#demo 67 | [3]:http://html5-ninja.com/preview/index/5#.URI96mdRbLv 68 | [4]:http://cameronspear.com/demos/bootstrap-hover-dropdown/ 69 | [5]:http://www.datatables.net/blog/Twitter_Bootstrap_2 70 | [6]:http://labs.mintchaos.com/flippant.js/ 71 | [7]:http://tarruda.github.io/bootstrap-datetimepicker/ 72 | [8]:http://bootboxjs.com/index.html# 73 | [9]:http://vitalets.github.io/x-editable/ 74 | [10]:http://www.open-open.com/news/view/a9a10b 75 | [11]:http://www.w3cplus.com/source/the-best-bootStrap-resources.html 76 | [12]:http://riddler.collectivepush.com/getstarted.html 77 | [13]:http://bootsnipp.com/ 78 | [14]:http://usablica.github.io/intro.js/ 79 | [15]:http://maxazan.github.io/jquery-treegrid/examples/example-bootstrap-2.html 80 | [16]:https://github.com/maxazan/jquery-treegrid 81 | [17]:http://blueimp.github.io/Bootstrap-Image-Gallery/ 82 | [18]:http://www.open-open.com/news/view/57a3b6 83 | [19]:http://bragthemes.com/themes/#all 84 | [20]:http://www.open-open.com/news/view/cd3e6c 85 | [21]:http://www.open-open.com/news/view/12f6bd7 86 | [22]:http://expo.getbootstrap.com/ 87 | [23]:http://flatstrap.org/ 88 | [24]:http://bootsnipp.com/resources 89 | [25]:http://reactiveraven.github.io/jqBootstrapValidation/ 90 | [26]:http://www.pfeng.org/archives/537 91 | [27]:http://exacttarget.github.io/fuelux/#datagrid 92 | [28]:http://www.juapp.com/a/tech/2013/1126/446_2.html 93 | [29]:http://www.csdn.net/article/2014-03-13/2818744-bootstrap-design-tools 94 | [30]:http://www.zi-han.net/theme/se7en/index.html 95 | [31]:http://www.bootcss.com/p/metro-ui-css/ 96 | [32]:http://talkslab.github.io/metro-bootstrap/index.html 97 | [33]:http://www.drewgreenwell.com/projects/metrojs 98 | [34]:http://www.itkes.com/metro-air-strikes-not-to-be-missed-window8-metro-ui-style-web-resources.html 99 | [35]:http://talkslab.github.io/metro-bootstrap/components.html# 100 | [36]:http://aozora.github.io/bootmetro/docs/docs-index.html 101 | [37]:http://bootswatch.com/cosmo/#top 102 | [38]:http://www.bootstrappage.com/ 103 | [39]:http://www.gbin1.com/tools/websitetemplate/20130331-free-bootstrap-admin-template/ 104 | [40]:https://wrapbootstrap.com/themes 105 | [41]:http://themedesigner.in/demo/matrix-admin/form-validation.html 106 | [42]:http://git.oschina.net/wlin321123/portnine-free-bootstrap-theme/tree/master/BlackTieAdmin -------------------------------------------------------------------------------- /source/_posts/20140210_this.md: -------------------------------------------------------------------------------- 1 | title: js整理二:this的一些理解 2 | date: 2014-11-10 00:02:41 3 | tags: js 4 | --- 5 | 6 | 关于this的一些理解 7 | 8 | 9 | 10 | ##2.1全局作用域下## 11 | 12 | 输入代码:console.log(this);//window 13 | 全局范围内的this将会指向全局对象,结果是window,这点毫无疑问 14 | 15 | ##2.2作为单纯的函数调用## 16 | 17 | (1)先看一段代码: 18 | 19 | function fTest_this(){ 20 | console.log(this); 21 | } 22 | fTest_this(); 23 | 结果为全局的window,这个是在浏览器的非严格模式下得出的 24 | 25 | (2)下面再看一个严格模式下的测试,代码中再添加一句'usestrict'; 26 | 27 | function fTest_this(){ 28 | 'use strict'; 29 | console.log(this); 30 | } 31 | fTest_this();//undefined 但是貌似在谷歌浏览器在还是出现了window 32 | 33 | (3)为了再验证在非严格模式下指向的是window对象,再看下面的测试 34 | 35 | function fTest_this(name){ 36 | this.name = name ; 37 | } 38 | fTest_this("hi"); 39 | console.log(name);//hi 40 | name = "bye"; 41 | console.log(name);//bye 42 | 最后输出的name的数值是bye,可以证明name属性在全局的window中 43 | 44 | ##2.3作为对象的方法调用## 45 | 先上一段代码(这个段代码是借用了参考博客中的那段代码) 46 | 47 | varname = "clever coder"; 48 | var person = { 49 | name: "foocoder", 50 | hello: function(sth){ 51 | console.log(this.name+ " says " + sth); 52 | } 53 | } 54 | person.hello("hello world"); 55 | 56 | 最后的输出为foocodersays hello world;对于这段代码的this,就是指向了该方法所在的对象,代码中就是peson对象; 57 | 58 | ##2.4作为构造函数## 59 | 60 | 更多的参考了博客(阮一峰老师),地址在文章的底部 61 | 62 | function test(){ 63 |   this.x = 1; 64 | } 65 | var o = new test(); 66 | alert(o.x); // 1 67 | 68 | 运行结果为1。为了表明这时this不是全局对象,我对代码做一些改变: 69 | 70 | var x = 2; 71 | function test(){ 72 |   this.x = 1; 73 | } 74 | var o = new test(); 75 | alert(x); //2 76 | 77 | 运行结果为2,表明全局变量x的值根本没变 78 | 79 | ##2.5内部函数## 80 | 81 | (1)代码1 82 | 83 | window.name= "window"; 84 | object = { 85 | name:"object", 86 | run:function() { 87 | console.log("test1:"+this.name); 88 | } 89 | }; 90 | object.run(); 91 | 92 | 这个例子就是前面提到的2.3作为对象的方法调用,他里面的this指向的是其中的对象即object,所以上述的代码运行后在控制台中可以看到test1:object。 93 | 94 | (2)然后继续对代码进行改动 95 | 96 | window.name = "window"; 97 | object = { 98 | name: "object", 99 | run: function() { 100 | console.log("test1:"+this.name); 101 | var inner =function(){ 102 | console.log("Myname is " + this.name); 103 | }; 104 | inner(); 105 | } 106 | }; 107 | object.run(); 108 | 109 | 输出的结果是My nameis window,即this指向的是window对象(顺便测试了一下,在严格模式下,依然会报错的) 110 | 关于这一点,在司徒正美的博客中,写着这样的解释“尽管它是定义在object内部,尽管它是定义run函数内部,但它弹出的既不是object也不是run,因为它既不是object的属性也不是run的属性。它松散在存在于run的作用域用,不能被前两者调用,就只有被window拯救。” 111 | 确实如此,inner()这个方法,既不能object去访问,也不能让run去访问,确实感觉很飘离,如果想让inner()内部的this也指向object的话,就可以把之前的this给保存在一个变量里,然后inner()再去调用; 112 | 113 | window.name = "window"; 114 | object = { 115 | name:"object", 116 | run: function() { 117 | var that =this; 118 | console.log("test1:"+this.name); 119 | var inner =function(){ 120 | console.log("My name is " + that.name); 121 | }; 122 | inner(); 123 | } 124 | }; 125 | object.run(); 126 | 127 | 测试结果就是My name isobject,成功的保存了之前的指针。 128 | 还有其他的方法能实现上述的结果,就是call和apply的应用 129 | 130 | 最后附上以个司徒正美博客上的几句话,这是来自于他的整理 131 | this 的值取决于 function 被调用的方式,一共有四种, 132 | 1.如果一个 function 是一个对象的属性,该 funtion 被调用的时候,this 的值是这个对象。如果 function 调用的表达式包含句点(.)或是 [],this 的值是句点(.)或是 [] 之前的对象。如myObj.func和myObj["func"] 中,func被调用时的 this 是myObj。 133 | 2.如果一个 function 不是作为一个对象的属性,那么该 function 被调用的时候,this 的值是全局对象。当一个 function 中包含内部 function 的时候,如果不理解 this 的正确含义,很容易造成错误。这是由于内部 function 的 this 值与它外部的 function 的 this 值是不一样的。解决办法是将外部 function 的 this 值保存在一个变量中,在内部 function 中使用它来查找变量。 134 | 3.如果在一个 function 之前使用 new 的话,会创建一个新的对象,该 funtion 也会被调用,而 this 的值是新创建的那个对象。如function User(name) {this.name = name}; var user1 = newUser("Alex"); 中,通过调用newUser("Alex") ,会创建一个新的对象,以user1 来引用,User 这个 function 也会被调用,会在user1 这个对象中设置名为name 的属性,其值是Alex 。 135 | 4.可以通过 function 的 apply 和call 方法来指定它被调用的时候的 this 的值。apply 和 call 的第一个参数都是要指定的 this 的值。由于它们存在,我们得以创建各种有用的函数。 136 | 137 | 138 | ##参考博文:## 139 | 1司徒正美 http://www.cnblogs.com/rubylouvre/archive/2009/11/13/1602122.html 140 | 2 阮一峰 http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html 141 | 3.http://foocoder.com/blog/xiang-jie-javascriptzhong-de-this.html/ -------------------------------------------------------------------------------- /themes/landscape/source/fancybox/helpers/jquery.fancybox-thumbs.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Thumbnail helper for fancyBox 3 | * version: 1.0.7 (Mon, 01 Oct 2012) 4 | * @requires fancyBox v2.0 or later 5 | * 6 | * Usage: 7 | * $(".fancybox").fancybox({ 8 | * helpers : { 9 | * thumbs: { 10 | * width : 50, 11 | * height : 50 12 | * } 13 | * } 14 | * }); 15 | * 16 | */ 17 | ;(function ($) { 18 | //Shortcut for fancyBox object 19 | var F = $.fancybox; 20 | 21 | //Add helper object 22 | F.helpers.thumbs = { 23 | defaults : { 24 | width : 50, // thumbnail width 25 | height : 50, // thumbnail height 26 | position : 'bottom', // 'top' or 'bottom' 27 | source : function ( item ) { // function to obtain the URL of the thumbnail image 28 | var href; 29 | 30 | if (item.element) { 31 | href = $(item.element).find('img').attr('src'); 32 | } 33 | 34 | if (!href && item.type === 'image' && item.href) { 35 | href = item.href; 36 | } 37 | 38 | return href; 39 | } 40 | }, 41 | 42 | wrap : null, 43 | list : null, 44 | width : 0, 45 | 46 | init: function (opts, obj) { 47 | var that = this, 48 | list, 49 | thumbWidth = opts.width, 50 | thumbHeight = opts.height, 51 | thumbSource = opts.source; 52 | 53 | //Build list structure 54 | list = ''; 55 | 56 | for (var n = 0; n < obj.group.length; n++) { 57 | list += '
  • '; 58 | } 59 | 60 | this.wrap = $('
    ').addClass(opts.position).appendTo('body'); 61 | this.list = $('').appendTo(this.wrap); 62 | 63 | //Load each thumbnail 64 | $.each(obj.group, function (i) { 65 | var el = obj.group[ i ], 66 | href = thumbSource( el ); 67 | 68 | if (!href) { 69 | return; 70 | } 71 | 72 | $("").load(function () { 73 | var width = this.width, 74 | height = this.height, 75 | widthRatio, heightRatio, parent; 76 | 77 | if (!that.list || !width || !height) { 78 | return; 79 | } 80 | 81 | //Calculate thumbnail width/height and center it 82 | widthRatio = width / thumbWidth; 83 | heightRatio = height / thumbHeight; 84 | 85 | parent = that.list.children().eq(i).find('a'); 86 | 87 | if (widthRatio >= 1 && heightRatio >= 1) { 88 | if (widthRatio > heightRatio) { 89 | width = Math.floor(width / heightRatio); 90 | height = thumbHeight; 91 | 92 | } else { 93 | width = thumbWidth; 94 | height = Math.floor(height / widthRatio); 95 | } 96 | } 97 | 98 | $(this).css({ 99 | width : width, 100 | height : height, 101 | top : Math.floor(thumbHeight / 2 - height / 2), 102 | left : Math.floor(thumbWidth / 2 - width / 2) 103 | }); 104 | 105 | parent.width(thumbWidth).height(thumbHeight); 106 | 107 | $(this).hide().appendTo(parent).fadeIn(300); 108 | 109 | }) 110 | .attr('src', href) 111 | .attr('title', el.title); 112 | }); 113 | 114 | //Set initial width 115 | this.width = this.list.children().eq(0).outerWidth(true); 116 | 117 | this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))); 118 | }, 119 | 120 | beforeLoad: function (opts, obj) { 121 | //Remove self if gallery do not have at least two items 122 | if (obj.group.length < 2) { 123 | obj.helpers.thumbs = false; 124 | 125 | return; 126 | } 127 | 128 | //Increase bottom margin to give space for thumbs 129 | obj.margin[ opts.position === 'top' ? 0 : 2 ] += ((opts.height) + 15); 130 | }, 131 | 132 | afterShow: function (opts, obj) { 133 | //Check if exists and create or update list 134 | if (this.list) { 135 | this.onUpdate(opts, obj); 136 | 137 | } else { 138 | this.init(opts, obj); 139 | } 140 | 141 | //Set active element 142 | this.list.children().removeClass('active').eq(obj.index).addClass('active'); 143 | }, 144 | 145 | //Center list 146 | onUpdate: function (opts, obj) { 147 | if (this.list) { 148 | this.list.stop(true).animate({ 149 | 'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)) 150 | }, 150); 151 | } 152 | }, 153 | 154 | beforeClose: function () { 155 | if (this.wrap) { 156 | this.wrap.remove(); 157 | } 158 | 159 | this.wrap = null; 160 | this.list = null; 161 | this.width = 0; 162 | } 163 | } 164 | 165 | }(jQuery)); -------------------------------------------------------------------------------- /source/_posts/20140621_bfc.md: -------------------------------------------------------------------------------- 1 | title: bfc的一点理解 2 | date: 2014-06-21 16:17:44 3 | tags: css 4 | --- 5 | 6 | css里面感觉可以单独算一个点,BFC,其实很多情况下都用到这里的东西了,至少都没有意识到而已 7 | 8 | 9 | 10 | 11 | ##一.bfc概念## 12 | 关于bfc的定义,在w3c的官方文档中给出的这样的定义,下面是一段摘自[博客的翻译][1] 13 | 1. 浮动元素和绝对定位元素,不是块级盒子的块容器 (如 inline-blocks, table-cells, 和 table-captions),以及设置了overflow属性(除了visible)的块级盒子 ,都会为他们的内容创建新的BFC(块级格式上下文)。 14 | 2. 在BFC中,盒子从顶端开始垂直地 一个接一个地排列,两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠。 15 | 3. 在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。 16 | 17 | 官方的原文地址如下[地址][2] 18 | 我也按照自己的理解来写一下,块级格式化上下文(bfc)就是建立一个独立的元素放置上下文,跟其他的元素放置上下文不同,两者不会发生一些冲突和叠加;也可以理解在一个bfc中是一个单独的盒子,他跟外界的盒子不会有相互的影响,而且在bfc里面的元素只会受该盒子的首先进行布局,不会受外界的影响 19 | 20 | ##二.bfc的应用## 21 | 在看了一些博客后,看到一些应用如下 22 | 1.解决合并外边距的问题; 23 | 2.清除元素内部浮动; 24 | 3.块级格式化上下文不会重叠浮动元素 25 | 26 | ###例子1:解决合并外边距的问题### 27 | 对于正常的情况下,如果一个块级元素没有padding和border属性的约束,如果几个块级元素叠加在一起会发生margin的叠加效果,具体的可以看css权威指南什么的都有,就是要注意下margin可以为正也可以为负值这点的区别 28 | 29 | //css code 30 | .content{width: 300px;background-color: yellow;} 31 | .child{height: 100px;width: 200px;margin: 50px;} 32 | .child1{background-color: red;} 33 | .child2{background-color: blue;} 34 | .bfc{overflow: hidden;*zoom:1;} 35 | ------------------------------------------------- 36 | //html 37 | /*没有添加bfc的情况下*/ 38 |
    39 |
    40 | normal instance 41 |
    42 |
    43 | BFC instance 44 |
    45 |
    46 |
    47 | --------------------------------------- 48 | /*添加了bfc的情况下*/ 49 |
    50 |
    51 |
    52 | normal instance 53 |
    54 |
    55 |
    56 |
    57 | normal instance 58 |
    59 |
    60 |
    61 | 62 | 下面看下代码的效果 63 | 64 | ![例子1][10] 65 | 66 | 可以看到在一般的情况下,margin都发生了重叠,而对于那些添加了bfc的子元素,都按照正常的显示出来,没有发生重叠的效果 67 | 68 | ###例子2:清除元素内部浮动### 69 | 对于清除浮动,这个是经常需要做的事情,因为float的元素脱离了文档的正常流,但对文档又有影响,而且不能将父元素撑开,所以一般都需要清除浮动,对于清除浮动的方法可自行网上搜 70 | 71 | //css 72 | .wrap{width: 500px;border: 1px solid red;} 73 | .floatL{float: left;width: 200px; background-color: blue;height: 200px;} 74 | .bfc{overflow: hidden;*zoom:1;} 75 | --------- 76 | /*加有bfc后的情况*/ 77 |
    78 |
    79 |
    I'm content to make block full
    80 |
    81 | /*没有添加bfc的情况*/ 82 |
    83 |
    84 |
    I'm content to make block full
    85 |
    86 | 87 | 情况如下: 88 | 89 | ![例子2][9] 90 | 91 | 加有bfc后,会自动进行浮动清除 92 | 93 | ###例子3:块级格式化上下文不会重叠浮动元素### 94 | 对于浮动元素的,他是脱离的正常流,不过他还是会占据文档的位置,浮动原本的定义就是让周围的东西围绕着他,特别是文字这类的,所以一般的情况如下 95 | 96 | ![浮动][3] 97 | (注:图片是从参考博客盗过来的==) 98 | 99 | 但是你要让文字跟图片在两侧怎么办呢?只要给文字处加个bfc就可以咯. 100 | 这里的例子请参考[例子][4] 101 | 102 | ##三.如何建立bfc## 103 | 看了一些参考的博客之后,收集的方法如下 104 | 1.float 除了none以外的值 105 | 2.overflow 除了visible 以外的值(hidden,auto,scroll ) 106 | 3.display (table-cell,table-caption,inline-block) 107 | 4.position(absolute,fixed) 108 | 5.fieldset元素 109 | 110 | 对于第一点,之前在书中也有看到过清除一个元素的浮动就是在他的父元素上也添加一个float:left的属性,其实这个原理就是建立了一个bfc 111 | //下面附上参考博文中的一段话,是对其中一些属性的解释 112 | 1. 需要注意的是,display:table本身并不会创建BFC,但是它会产生匿名框(anonymous boxes),而匿名框中的display:table-cell可以创建新的BFC,换句话说,触发块级格式化上下文的是匿名框,而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。 113 | 2. fieldset 元素在www.w3.org里目前没有任何有关这个触发行为的信息,直到HTML5标准里才出现。有些浏览器bugs(Webkit,Mozilla)提到过这个触发行为,但是没有任何官方声明。实际上,即使fieldset在大多数的浏览器上都能创建新的块级格式化上下文,开发者也不应该把这当做是理所当然的。CSS2.1没有定义哪种属性适用于表单控件,也没有定义如何使用CSS来给它们添加样式。用户代理可能会给这些属性应用CSS属性,建议开发者们把这种支持当做实验性质的,更高版本的CSS可能会进一步规范这个。 114 | 115 | 最后再补充一点就是对于一些bfc的属性,在支持BFC的浏览器(IE8+,firefox,chrome,safari)通过创建新的BFC闭合浮动;在不支持 BFC的浏览器 (IE6-7),通过触发 hasLayout 闭合浮动。对于这点以后再补上 116 | 117 | 参考博文list: 118 | 1.[那些年我们一起清除过的浮动][5] 119 | 2.[深入BFC][6] 120 | 3.[CSS定位机制之一:普通流][7] 121 | 4.[WSC文档][8] 122 | 123 | --- 124 | 125 | 126 | [1]:http://www.cnblogs.com/v10258/p/3530290.html 127 | [2]:http://www.w3.org/TR/CSS2/visuren.html#block-formatting 128 | [3]:http://images.cnitblog.com/blog/476402/201401/241300111638.jpg 129 | [4]:http://jsfiddle.net/k9u5x/ 130 | [5]:http://www.iyunlu.com/view/css-xhtml/55.html 131 | [6]:http://www.cnblogs.com/v10258/p/3530290.html 132 | [7]:http://swordair.com/css-positioning-schemes-normal-flow/ 133 | [8]:http://www.w3.org/TR/CSS2/visuren.html#block-formatting 134 | [9]:http://img.blog.csdn.net/20140621162801968?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVGFua3B0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast 135 | [10]:http://img.blog.csdn.net/20140621162730843?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvVGFua3B0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast -------------------------------------------------------------------------------- /source/_posts/20140914_performance.md: -------------------------------------------------------------------------------- 1 | title: 关于前端性能的一点整理(未完待续) 2 | date: 2014-09-14 10:49:25 3 | tags: 总结 4 | --- 5 | 6 | 整理一些自己在平时看到过的有关性能优化的东西(未完待续) 7 | 8 | 9 | 10 | 前段时间看到很多人在提到有关算法的东西,后来想了想感觉步入前端这个行业,算法这个东西貌似相对于后端来说更为遥远了,个人觉得算法提供了两种思路:一种是解决问题的办法,还有一种是提高效率的途径。解决问题的办法诸如那些图的算法等等,提高效率的话有贪心,排序等等一些,这些对于后端确实应该挺重要的,或者是数据库的查询;不过对于前端,所关注的也许是其他的东西了,因为在其他上面所能提高的东西远远大于这些。[仅是个人的一点点见解,最后有一个关于《高性能网站建设指南》的阅读笔记,所以在那里出现的对象,我就不累赘了] 11 | 12 | 13 | ##HTML## 14 | 1. 关于 \<\img src="" \>这样图片的资源链接为空的情况下,之前在几篇文章里看到会产生一个比较奇怪的现象就是会对页面发起两次请求,建议用个默认的图片先;(这里补充一点,就是当这个src属性为空的时候,js读这个属性,读到的不是"",而是此时的location.href) 15 | 2. 关于图片一般在切图的时候都会有大小的限制,所以可以给他的外边框在写的时候都加上高度跟宽度,这样避免图片一开始没有到后面有,内容上发生一个抖动,而且对于浏览器来说,这样的重构渲染树也是比较损耗的 16 | 17 | 18 | ##css## 19 | 1. **css选择器的效率** !! div.nav > ul li a[title] 20 | 上面的实例来说,浏览器首先会尝试在你的HTML标签中寻找“a[title]”元素,接着在匹配“li和ul”,最后在去匹配“div.nav”。这就是前成所主的“选择器从右到左的原则”,所以根据这样的原则,其实不可以在为了定义一个具体class的样式,通过很多层的套用 21 | 22 | ##javascript## 23 | ---- 24 | 1. 变量的缓存(分几种应用场景) 25 |  (1) 作用域链和原型链上的优化:原型链的查找需要沿着原型链以此往上进行遍历,所以将需要的直接保存在一个变量中 26 |  (2) 多层对象上的缓存,比如 27 | 28 | var _obj = { 29 | A :{ 30 | A1 : { 31 | name : "ok" 32 | } 33 | } 34 | }; 35 | 要经常使用_obj.A.A1.name的话,最好也将他缓存起来,感觉有点类似空间来换时间的感觉,少查找几次 36 |  (3) for循环数组缓存数组长度:一般的情况下数组的长度都是固定的所以每次都去读同一个数组的长度这里的损耗 37 |  (4) 对一些变量的undefine判断可以试用void 0;之前看到一个解释是如下:void 0效果等同undefined,只是undefined是一个全局变量,需要变量名查找,void 0不但字数少,而且理论上避免了对undefined变量名的查找,效率高,理论上!!!(这点也是当时看underscore的时候发现的) 38 |  (5)缓存DOM对象:这个还是很明显,每次查找一个id或者一个class,都是比较消耗的,id还好,因为在语义上就指明了是唯一出现的,我也没具体了解过这个查找方法具体是怎么实现的,不过感觉应该是只要找到一个id就可以停止搜索了,而对于class应该都是要遍历一遍文档的,所以做好这些对象的缓存估计可以提升不少的效果 39 |   40 |  总结:其实还有一点关于这个缓存的解释就是一般的情况下,最后的代码都会需要进行压缩,所以如果一个变量是_obj.A.A1.name,那么进行压缩后最少也应该是a.b.c.d这样的形式,不过如果你进行了缓存,那么最后的情况会是a,这里可能会对压缩完毕的代码大小有一定的影响(来自于前几天看的一个jquery解释视频里提到的) 41 | 42 | 2. 控制好一些经常触发的事件的频率:比如有时候需要的时候会对浏览的onresize事件进行监听,如果不控制好频率,只是一味的在当外界resize的时候就触发这个动作,那么对于浏览的监听事件也有点过于损耗了,想象一些,当你调整浏览器的时候,他是每一个时间的间隔其实都触发了这个事件,特别是当那个监听事件里写了很多复杂的而且消耗资源的事件,这样貌似在低版本的一些浏览器都会卡住,解决的方法就是 43 | 44 | var resizeEvent = null; 45 | if (resizeEvent) { 46 | clearTimeout(resizeEvent) 47 | } 48 | resizeEvent = setTimeout(function(){ 49 | /*event*/ 50 | }, 400); 51 | 52 | 3. 做好回收的工作: 53 | 54 |   (1) 注意一些事件的回收,比如在用模块的方式来写代码的时候,一个模块调用进来注册了一些事件,然后当这个模块被切换走的时候,要注意把这些事件都进行清空处理,现在正常的js的垃圾回收应该都是引用计数的,所以长期这样切过来切过去,会有很多无效的浪费,更重要的是同一个模块被切回来切出去的动作经常进行的话,会在一个动作上触发同一个事件很多次,比如发一个请求发了很多次,这里也是有一些损耗的; 55 |   (2) 注意那些闭包的回收; 56 |   (3) 注意类似setTimeout这类的回收; 57 | 4. 后续继续更新 58 | 59 | ##其他## 60 | 61 | ----------- 62 | 附上之前看过的《高性能网站建设》的一点笔记 63 | 64 | ###绪论### 65 | 1. 黄金法则:只有10%~20%的最终用户相应时间花在了下载HTML文档上,其他都是花在了下载页面中的所有组件上 66 | 2. 压缩:有时候发送一个请求,可以带上一个Accept-Encoding来表明支持压缩; 67 | 3. 条件get请求:如果浏览器中保存了一个组建的副本,可以发送一个请求中附带着modified的信息,然后服务器可以对比下,如果缓存有效地话可以用一个更小且更快的响应返回给浏览器(304 not modify) 68 | 4. Expires:虽然方法3可以让页面加载更快,但是还是需要客户端和服务器之间一次的来回;而Expires可以消除这个需求 69 | 5. Keep-alive:在http的早期的实现中,http请求都是要打开一个socket的请求;有时候页面中的很多资源都是同时指向同一个服务器,持久链接就是解决了这个问题 [需要研究下持久连接的] 70 | 71 | ###规则1-减少http请求### 72 | 1. 用图片中的map的方法,这样一块区域只需要一次图片的请求 73 | 2. css Sprites 切图定位 74 | 3. 内联图片(比如图片的信息可以试用base64的编码) 75 | 4. 合并脚本和样式表 76 | 77 | ###规则2-使用内容发布网络Content Delivery Network (CDN)### 78 | CND:一组分布在多个不同地理位置的web服务器,用于更加有效向用户发布内容;向特定用户发布内容的服务器的选择基于对网络可用度的测量(例如选择网络阶跳跃数最小的服务器,或者是具有最短响应时间的服务器) 79 | 80 | CND:用于发布静态内容,如图片、脚本、样式表和Flash,不过有一个缺点是响应事件可能会受到其他网站的影响,CND服务提供商在其所有客户之间共享web服务器组件,还有一个缺点就是不能直接控制组件服务器带来的麻烦(比如修改http响应头) 81 | 82 | 83 | ###规则3-添加Expires头### 84 | 85 | 1. Expires头 86 | web服务器试用这个表示来告诉客户端可以使用当前的副本直到某个时间 87 | 缺点:使用了一个特定的时间要求服务器和客户端的时钟严格同步,而且过期时间需要经常检查 88 | 2. Max-Age 和 mod_expires(另一种方式) 89 | 缺点是不支持HTTP1.1 90 | 3. 空缓存VS完整缓存 91 | 92 | 4. 缓存的对象不仅仅只是图片还可以是脚本样式表还有flash组件 93 | 5. 修订文件名 94 | 对于一些还没过过期时间,但是服务器已经更新内容的情况,浏览器还是不会进行更新的,这个时候可以采用修订文件名,比如加一个版本号 95 | 96 | ###规则4-压缩组件### 97 | 98 | 客户端可以通过http请求中的Accept-Encoding标示对压缩的支持 99 | 1. 压缩的内容 100 | 值得压缩的应该是包括XML和JSON在内的任何文本响应,对于图片和PDF不应该压缩,压缩会给服务端加一些压力,可能会浪费CPU资源;而且客户端需要对这些压缩的资源进行解压 101 | 2. 代理缓存 102 | 之前介绍的都是在浏览器于服务器直接通信的情况下;有时候浏览器会通过代理向服务器发送请求,然后代理会缓存请求的资源,代理需要处理好,一些客户端请求不要压缩一些客户端需要压缩的情况 可以试用字段vary 103 | 3. 边缘情况 104 | 有些浏览器不支持压缩的格式需要进行处理 105 | 106 | ###规则5-将样式表放在顶部### 107 | 108 | 注意@import会产生一些问题(导致组建下载无序性;出现白屏,无样式内容的闪烁),所以最好试用link, 109 | 110 | 111 | ###规则6-将脚本放在末尾### 112 | 113 | 1. http1.1中规范建议浏览器从每个主机名并行地下载两个资源,具体还是需要看浏览器的;不过不是越多的并行下载越好,过多的并行下载反而会降低性能 114 | 2. 脚本阻塞下载[脚本是不能进行并行下载的,原因:脚本里可能有document.write之类的方法;脚本中很有可能需要按照一定的顺序进行即有依赖关系] 115 | 116 | ###规则7-避免css表达式### 117 | 118 | ###规则8-使用外部js和css### 119 | 120 | 1. 纯粹而言,内联更快;但是JS和CSS是有机会可以被缓存起来的 121 | 2. 需要考虑的基准:页面查看、空缓存VS完整缓存、组件重用 122 | 3. 加载后下载:意思就是某个页面加载完毕之后再加载一些资源,而这些资源是为了缓存起来,给用户访问其他页面所需要的资源提前先缓存下 123 | 4. 动态内联:意思就是根据一定的条件在服务端进行处理,对某些情况返回的页面是内联的页面,而有些情况下返回的是外连的页面 124 | 125 | 126 | ###规则9-减少DNS查找### 127 | 128 | 这里还是需要衡量一下,因为前面提到了如果用了不同的服务器,那么一些资源可以进行并行的下载 129 | 通过使用Keep-Alive和较少的域名来减少DNS的查找 130 | 131 | ###规则10-精简javascript### 132 | 1. 混淆 133 | 缺点:混淆过程可能引入错误;不好维护;不好测试 134 | 2. 精简css比如类的合并,还有就是字符串进行缩写 135 | 136 | ###规则11-避免重定向### 137 | 138 | 1. 一些重定向的类型: 139 | 300 301 302 303 304 305 306 307 140 | 其中301 302是用的最多的 141 | 2. 其他细节 142 | (1)在URL的结尾必须处出现/但是没有出现 143 | (2)主机名缺少结尾/不会产生重定向 144 | (3)连接网站、跟踪内部流量、跟踪出战流量、美化URL 145 | 146 | ###规则12-移除重复的脚本### 147 | 会产生不必要的HTTP请求、执行js所浪费的时间 148 | 149 | ###规则13-配置Etag### 150 | 151 | ###规则14-使Ajax可缓存### 152 | 153 | 确保Ajax请求遵守性能指导,尤其应具有长久的Expires头部 154 | 155 | 156 | by tankpt 157 | 2014.09.14 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /source/_posts/20140528_cors.md: -------------------------------------------------------------------------------- 1 | title: 跨域消息传递 2 | date: 2014-05-28 22:28:21 3 | tags: js 4 | --- 5 | 6 | 整理了一些跨越的几个方法,postMessage 、修改window.domain、修改window.name、修改hash 7 | 8 | 9 | 10 | 11 | 好久之前就想好好看下有关跨域的问题了,自己遇到过几次,然后面试的时候也被问道过几次,好好系统的学下,了解下,强烈建议还是自己亲手动着去写下demo,纸上得来终觉浅,多多实践才是真,貌似有很多的方法,我就列举一些我自己知道的办法,貌似现在网上也有一些成熟的库来实现这个问题 12 | 13 | ##PostMessage()方法## 14 | 说明:postMessage(message, targetOrigin); 15 | 16 | 测试方法:对于window用户,去找到host或者用浏览器的插件去添加 17 | child.com 127.0.0.1 18 | parent.com 127.0.0.1 19 | 然后我用的是webstorm和myeclipse,分别把两个代码放到了两个域下面,分别是http://parent.com:63342和http://child.com/ 20 | 对于主页面附上代码如下 21 | 22 | 23 |

    I'm father body

    24 |
    25 |

    message from child

    26 |
    27 |
    28 |

    input message to child

    29 | 30 | 31 |
    32 |
    33 |
    34 | 35 | 36 | 53 | 54 | 对于主页面下的iframe的代码如下 55 | 56 | 57 |

    I'M modal B

    58 |
    59 |

    message from father

    60 |
    61 |
    62 |
    63 |

    send message to father

    64 | 65 | 66 |
    67 | 68 | 86 | 87 | 这里再提几点需要注意的地方: 88 | 1. 在页面的捕获message事件的时候,里面的e.origin必须要具体到端口,自己在测试的时候因为没写端口,就没有得到相应; 89 | 2. 页面中的sendMessage需要等到里面的iframe加载完毕才可以执行,关于这点,初步的判断是iframe的加载是异步的,所以当iframe还没加载完毕,下面就运行postmessage是不行的 90 | 91 | 总结:实现还是很方便的,不过是html5中提供的api,对于旧的貌似就不适用了 92 | 93 | ##document.domain+iframe## 94 | 这个方法主要针对的是那些主域相同,而子域不同的情况的那些例子,具体的比如 95 | www.parent.com和parent.com就是属于这样的情况,老样子,把host的相关内容修改下 96 | 127.0.0.1 www.parent.com 97 | 127.0.0.1 parent.com 98 | 如果在没设置两个子域window.domain的情况下。直接在www.parent.com/a.htm下去访问parent.com/b.htm中的dom是不成功的,这时只需要在iframe中的b.htm中添加上window.domain= "paren.com",在a.htm中同样也这么设置一下,你就会发现两者可以互相访问了。不过这种情况适用的场合比较少,而且这个设置domain也不能随便设置。比如是www.parent.com设置成children.com这样是不可行的。 99 | 100 | 总结:有一些局限性,需要特定的场合下(主域相同) 101 | 102 | ##window.name## 103 | 具体的实现代码可可以见参考文章3,主要的做法就是下面几步 104 | 1. 用一个iframe加载一个外域的页面 105 | 2. 外链的页面来修改他所在的这个iframe中window的name的属性 106 | 3. 主域中通过改变这个iframe中的window对象的location来指向一个跟他同域的代理页面。此时他边可以读取这个iframe中的window的name属性了。 107 | 4. 最后最好在代理页面的结尾将这个iframe回收掉 108 | 109 | ##iframe+location.hash## 110 | 具体的实现也可以参考文章4,我大致就写下一点实现过程,主要的步骤如下: 111 | 1. 在主域parent.com/a.htm下引入一个iframe的,指向一个外链children.com/b.htm,然后需要的参数可以通过一个定时器来不停的从hash中检测提取; 112 | 2. 然后在b.htm中,添加一个iframe,指向一个同a.htm域的代理页面tmp.htm,有点跟前面的那个有点像,在指向的过程中,后面在添加一个hash的数值; 113 | 3. 在tmp.htm中将自己所处的location.hash赋值给顶部父元素a.htm的location中去,此时,a.htm会检测到新的hash,即完成了从里面想外传递数据的过程 114 | 115 | 这个方法的弊端么很明显就是把一些数值直接在hash上显示了,要是在url自己手动进行了修改,那么他所读取的就是自己手动随便修改的数值 116 | 117 | ##jsonp## 118 | 119 | 一般的内容都会在浏览器中收到跨域访问的限制,但是有一个内容算是没有被受限的,就是标签script,这里面的资源不会受到跨域的限制,常见的经常我们会用一些cdn加速的东西来引入jquery这类的资源等等,所以可以通过这个方法来实现,之前在博客上也有一个整理过,我就直接附上链接好了[jsonp处理跨域][5] 120 | 121 | ##其他## 122 | 还有一些其他的方法,例如用flash来实现,因为不会,所以就不怎么提了,还有就是CORS(后台实现),这个需要后端在Access-Control-Allow-Origin进行一些设置。 123 | 124 | 相关推荐文章: 125 | 1. [Javascript跨域详解(1)][1] 126 | 2. [JavaScript跨域详解(2)][2] 127 | 3. [window.name实现的跨域数据传输][3] 128 | 4. [JavaScript跨域总结与解决办法][4] 129 | 5. [前端解决跨域问题的8种方案][5] 130 | 131 | 最后附上以上实现的[demo](https://github.com/Tankpt/learning/tree/master/crossMessage),因为demo是后续补充的,所以搭的时候是node+webstorm的组合 132 | 133 | update 2014.8.11 134 | 135 | [1]:http://rolfzhang.com/articles/346.html 136 | [2]:http://rolfzhang.com/articles/380.html 137 | [3]:http://www.cnblogs.com/rainman/archive/2011/02/21/1960044.html 138 | [4]:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html 139 | [5]:http://www.cnblogs.com/JChen666/p/3399951.html 140 | [6]:http://blog.csdn.net/tankpt/article/details/20463571 -------------------------------------------------------------------------------- /source/_posts/20150203_viewport.md: -------------------------------------------------------------------------------- 1 | title: 关于移动端(一)viewport 2 | date: 2015-02-03 20:48:07 3 | tags: mobile 4 | --- 5 | 6 | 近段时间做了一个web app的demo,涉及到了一些在移动端开发时遇到的东西,所以来梳理下,这里主要是关于viewport的东西, 7 | 8 | 9 | 10 | 近段时间做了一个web app的demo,涉及到了一些在移动端开发时遇到的东西,所以来梳理下,这里主要是关于viewport的东西,其实在之前实习的过程中也遇到过,现在回想起来,其实原来的一些理解还是有点问题的,首先先附上[原来的一些整理理解](http://tankpt.github.io/2014/07/16/20140716_metaviewport/) 11 | 12 | ##关于像素## 13 | ###1. css像素(CSS pixels)### 14 | 字面意思就是在css中使用的像素,这个也很好理解,一般的从视觉拿过来的图,都是以一个一定的宽度的psd的图,这里的像素跟视觉图里的像素个人理解是一样的,这个最终将会是web端中的实物像素 15 | 16 | ###2. 设备像素### 17 | 显示屏幕的的最小物理单位 18 | 19 | ###3. 缩放比### 20 | 之所以这些概念在pc端的web中没有很大的关系的原因是,在pc端,初始的页面下,两者的缩放比是1:1,也就是说两者是相等的概念,当然现在chrome浏览器可以按住ctrl键,实现页面的缩放,从而改变缩放比,你就会看到元素被放大或者被缩小,在这一过程中,你需要注意的一点就是**有多少像素在适配屏幕** 21 | 22 | 当你放大的时候,会有更少的css像素在设备的屏幕中,图会变得更加模糊,一个css像素,也许会覆盖多个设备像素,这个效果图可以看参考引文中的一些图;反之缩小的情况 23 | 24 | ###4. 其他几个相关的衡量指标### 25 | 26 | (1) 每英寸所拥有的像素(PPI / DPI):物理尺寸跟设备像素比,数值越高,即代表显示屏能够以越高的密度显示图像 27 | 28 | PPI = 对角线上的像素数 / 对角线的英寸长度 29 | 30 | (2) 设备独立像素(dips):这个貌似不怎么好解释,可以看看[wikipedia](http://en.wikipedia.org/wiki/Device_independent_pixel) 31 | 32 | a physical unit of measurement based on a co-ordinate system held by a computer 33 | and represents an abstraction of a pixel for use by an application that an 34 | underlying system then converts to physical pixels 35 | 36 | 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA、HVGA和QVGA 推荐使用这个,不依赖像素.在wikipedia上对这个概念的解释是一组基于计算机坐标系的物理单位,它代表了一个抽象的像素用来给应用来使用,同时会由计算机系统再将其转化为具体的物理像素.它的一个典型的应用就是允许了移动设备软件进行缩放显示信息以及在不同大小屏幕上进行用户交互.这个抽象单位允许一个应用可以用像素作为一个衡量单位,同时设备的图形系统会将这个抽象的单位转化为一个适合该设备的实际像素衡量单位.(设备独立像素到物理像素,这一过程会经过系统的计算转化,比如可能是四个实际的物理像素代表一个虚拟的设备独立像素);还有一个不错的解释是:**设备独立像素,处于实际屏幕和开发的css网页之间** 37 | 38 | 39 | 40 | (3) 设备像素比率(Device Pixel Ratio,DPR):物理像素/设备独立像素,不同的设备有着不同的DPR,通过这个参数可以区分开retina屏幕和非retina屏幕。所有的非retina屏幕的iPhones有着一个物理宽度为320的屏幕,当设置它的meta信息为的时候,这将会设置layout viewport为320像素,所以整个页面将会自然的充满整个屏幕。因此,它有着320的物理像素和320的DIP,所以它的DPR即为1。而对于retina屏幕的iPhones有着一个物理宽度为640,但是同时若拥有一样的meta信息,则layout viewport的宽度不变,所以最后计算出来的DPR则为2,当然还有其他数值的DPR。这个信息可以通过在浏览器中读取window.devicePixelRatio属性来获取,不过存在着一些兼容性的问题 41 | 42 | ##关于viewport## 43 | 44 | 关于viewport的由来,貌似是苹果开始的,具体可以google看看,而现在则是由所有手机都支持了,关于viewPort分为两部分,分别是layout viewport && visual viewport 45 | 46 | 首先介绍下这两种的形象的概念,这个貌似是在[stackOverflow](http://stackoverflow.com/questions/6333927/difference-between-visual-viewport-and-layout-viewport)上有大神的回复;以下是参考链接中一个博主对他的翻译 47 | 48 | 把layout viewport想像成为一张不会变更大小或者形状的大图。现在想像你有一个小一些的框架, 49 | 你通过它来看这张大图。(译者:可以理解为「管中窥豹」)这个小框架的周围被不透明的材料所环绕, 50 | 这掩盖了你所有的视线,只留这张大图的一部分给你。你通过这个框架所能看到的大图的部分就是 51 | visual viewport。当你保持框架(缩小)来看整个图片的时候,你可以不用管大图,或者你可以 52 | 靠近一些(放大)只看局部。你也可以改变框架的方向,但是大图(layout viewport)的大小和 53 | 形状永远不会变。 54 | 55 | ###1. visual viewport 56 | 根据字面就是可视的viewport,按照上面说的那个比喻,这个viewport就是限制你视觉范围的那个框,这个viewport跟文档的宽度没有关系 57 | 58 | 对于visual viewport,它是通过window.innerWidth/Height来进行度量的。很明显当用户缩小或者放大的时候,度量的尺寸会发生变化,因为屏幕上的CSS像素会增加或者减少 59 | 60 | 个人的理解:我感觉这个viewport对我们影响并不大,在列出几个stackoverflow上对这个的回答 61 | 62 | The visual viewport is the part of the page that’s currently shown on-screen. 63 | The user may scroll to change the part of the page he sees, or zoom to change 64 | the size of the visual viewport. 65 | 66 | ###2. layout viewport### 67 | 68 | 好了这个viewPort还是很重要的,可以字面来进行理解,就是布局的viewport,也就是整个document的,如果不手动设置,那么不同的设备会有不同的默认数值,比如Safari iPhone: 980px,Opera: 850px,Android WebKit: 800px,IE: 974px,可能还有其他的数值,所以一般在移动端的时候都需要对其进行设置(通过meta中的viewport来设置),好了,那么问题来了,这个数值应该设置为多少? 69 | 70 | (1) 个人猜想:我的理解是layout viewport是作为整个document的宽度来设置(其实开发者比较关注的是宽度,高度貌似不是很在意),比如你完全可以设置layout viewport的宽度是900px,然后在定义一个container为780px,再对他进行全局的居中,即可 71 | 72 | **注意**:经过实验测试,这个一开始的宽度是不能超出不同设备原来定义的layout viewport的宽度,其实可以可以超出去,只是会有一个overflow:visible的效果,可以试试在iphone5上,定义meta中width为1000px,会看到一个左右移动的类似overflow:visible的效果.也很好理解,系统默认的一个layout vireport一个宽度,然后你定义了一个后等于是在他的容器内部 73 | 74 | (2) 实际情况:在meta中设置width:device-width;而且会设置一些类似initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no的属性,一般的移动设备的width都是320,当然也有不是的 75 | 76 | 好了,那么问题又来了,要是视觉姐姐给的图是320px的,那托托没问题的,按照里面的来就好了(就算你是把页面写死成320px的也ok),but,他们还经常给640px的,要是还是写死成640px,那么,都超出了layout viewport的宽度了诶,至于解决方案么还是有很多的,比如你可以用100%来定位等等,其实这些都不怎么好,推荐一个方法就是使用rem,可以看看阿里无线端的一个ml库,不错 77 | 78 | 写在最后,其实我没有特别去整理一些公式什么的,以上都是一些对于概念的整理.从小语文学的特别烂,估计这表述也就自己看看了.不过参考文章还是不错的 79 | 80 | 81 | ##参考## 82 | 1. [Retina显示原理探索](http://librajt.github.io/2013/04/03/retina-display/) 83 | 2. [设备像素比devicePixelRatio简单介绍](http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/) 84 | 3. [两个viewport的故事(第一部分)](http://weizhifeng.net/viewports.html) 85 | 4. [A tale of two viewports — part one](http://www.quirksmode.org/mobile/viewports.html) 86 | 5. [两个viewport的故事(第二部分)](http://weizhifeng.net/viewports2.html) 87 | 6. [A tale of two viewports — part two](http://www.quirksmode.org/mobile/viewports2.html) 88 | 7. [不是像素的像素不是像素](http://weizhifeng.net/a-pixel-is-not.html) 89 | 8. [DESIGNER'S GUIDE TO DPI](https://github.com/yeol/blog/blob/master/Designer's_guide_to_DPI.md)说的挺详细的,赞 90 | 9. [两个viewport的故事(二)](http://www.html5dw.com/story-of-two-viewport-part-ii/) 感觉这个版本说的不错.貌似比3好 91 | 10. [csdn 上一个博主关于viewport的整理](http://blog.csdn.net/zhchaoo/article/details/8851394) 分了四篇,前两篇同上,后面两篇不错,可以看看,第四篇貌似加了浏览器底层的原理来介绍;第三篇介绍的是关于position:fix的问题 92 | 11. [此像素非彼像素](http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html)其实跟文章5一样,只不过这里还有译者的一些理解 93 | 12. [关于两个viewport的答案](http://stackoverflow.com/questions/6333927/difference-between-visual-viewport-and-layout-viewport) 94 | 13. [Viewport](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html)在苹果官方文档上有关viewport的介绍 95 | 14. [google 对viewport的介绍](https://developers.google.com/speed/docs/insights/ConfigureViewport) -------------------------------------------------------------------------------- /themes/landscape/source/fancybox/jquery.fancybox.css: -------------------------------------------------------------------------------- 1 | /*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ 2 | .fancybox-wrap, 3 | .fancybox-skin, 4 | .fancybox-outer, 5 | .fancybox-inner, 6 | .fancybox-image, 7 | .fancybox-wrap iframe, 8 | .fancybox-wrap object, 9 | .fancybox-nav, 10 | .fancybox-nav span, 11 | .fancybox-tmp 12 | { 13 | padding: 0; 14 | margin: 0; 15 | border: 0; 16 | outline: none; 17 | vertical-align: top; 18 | } 19 | 20 | .fancybox-wrap { 21 | position: absolute; 22 | top: 0; 23 | left: 0; 24 | z-index: 8020; 25 | } 26 | 27 | .fancybox-skin { 28 | position: relative; 29 | background: #f9f9f9; 30 | color: #444; 31 | text-shadow: none; 32 | -webkit-border-radius: 4px; 33 | -moz-border-radius: 4px; 34 | border-radius: 4px; 35 | } 36 | 37 | .fancybox-opened { 38 | z-index: 8030; 39 | } 40 | 41 | .fancybox-opened .fancybox-skin { 42 | -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 43 | -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 44 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); 45 | } 46 | 47 | .fancybox-outer, .fancybox-inner { 48 | position: relative; 49 | } 50 | 51 | .fancybox-inner { 52 | overflow: hidden; 53 | } 54 | 55 | .fancybox-type-iframe .fancybox-inner { 56 | -webkit-overflow-scrolling: touch; 57 | } 58 | 59 | .fancybox-error { 60 | color: #444; 61 | font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 62 | margin: 0; 63 | padding: 15px; 64 | white-space: nowrap; 65 | } 66 | 67 | .fancybox-image, .fancybox-iframe { 68 | display: block; 69 | width: 100%; 70 | height: 100%; 71 | } 72 | 73 | .fancybox-image { 74 | max-width: 100%; 75 | max-height: 100%; 76 | } 77 | 78 | #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 79 | background-image: url(fancybox_sprite.png); 80 | } 81 | 82 | #fancybox-loading { 83 | position: fixed; 84 | top: 50%; 85 | left: 50%; 86 | margin-top: -22px; 87 | margin-left: -22px; 88 | background-position: 0 -108px; 89 | opacity: 0.8; 90 | cursor: pointer; 91 | z-index: 8060; 92 | } 93 | 94 | #fancybox-loading div { 95 | width: 44px; 96 | height: 44px; 97 | background: url(fancybox_loading.gif) center center no-repeat; 98 | } 99 | 100 | .fancybox-close { 101 | position: absolute; 102 | top: -18px; 103 | right: -18px; 104 | width: 36px; 105 | height: 36px; 106 | cursor: pointer; 107 | z-index: 8040; 108 | } 109 | 110 | .fancybox-nav { 111 | position: absolute; 112 | top: 0; 113 | width: 40%; 114 | height: 100%; 115 | cursor: pointer; 116 | text-decoration: none; 117 | background: transparent url(blank.gif); /* helps IE */ 118 | -webkit-tap-highlight-color: rgba(0,0,0,0); 119 | z-index: 8040; 120 | } 121 | 122 | .fancybox-prev { 123 | left: 0; 124 | } 125 | 126 | .fancybox-next { 127 | right: 0; 128 | } 129 | 130 | .fancybox-nav span { 131 | position: absolute; 132 | top: 50%; 133 | width: 36px; 134 | height: 34px; 135 | margin-top: -18px; 136 | cursor: pointer; 137 | z-index: 8040; 138 | visibility: hidden; 139 | } 140 | 141 | .fancybox-prev span { 142 | left: 10px; 143 | background-position: 0 -36px; 144 | } 145 | 146 | .fancybox-next span { 147 | right: 10px; 148 | background-position: 0 -72px; 149 | } 150 | 151 | .fancybox-nav:hover span { 152 | visibility: visible; 153 | } 154 | 155 | .fancybox-tmp { 156 | position: absolute; 157 | top: -99999px; 158 | left: -99999px; 159 | max-width: 99999px; 160 | max-height: 99999px; 161 | overflow: visible !important; 162 | } 163 | 164 | /* Overlay helper */ 165 | 166 | .fancybox-lock { 167 | overflow: visible !important; 168 | width: auto; 169 | } 170 | 171 | .fancybox-lock body { 172 | overflow: hidden !important; 173 | } 174 | 175 | .fancybox-lock-test { 176 | overflow-y: hidden !important; 177 | } 178 | 179 | .fancybox-overlay { 180 | position: absolute; 181 | top: 0; 182 | left: 0; 183 | overflow: hidden; 184 | display: none; 185 | z-index: 8010; 186 | background: url(fancybox_overlay.png); 187 | } 188 | 189 | .fancybox-overlay-fixed { 190 | position: fixed; 191 | bottom: 0; 192 | right: 0; 193 | } 194 | 195 | .fancybox-lock .fancybox-overlay { 196 | overflow: auto; 197 | overflow-y: scroll; 198 | } 199 | 200 | /* Title helper */ 201 | 202 | .fancybox-title { 203 | visibility: hidden; 204 | font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; 205 | position: relative; 206 | text-shadow: none; 207 | z-index: 8050; 208 | } 209 | 210 | .fancybox-opened .fancybox-title { 211 | visibility: visible; 212 | } 213 | 214 | .fancybox-title-float-wrap { 215 | position: absolute; 216 | bottom: 0; 217 | right: 50%; 218 | margin-bottom: -35px; 219 | z-index: 8050; 220 | text-align: center; 221 | } 222 | 223 | .fancybox-title-float-wrap .child { 224 | display: inline-block; 225 | margin-right: -100%; 226 | padding: 2px 20px; 227 | background: transparent; /* Fallback for web browsers that doesn't support RGBa */ 228 | background: rgba(0, 0, 0, 0.8); 229 | -webkit-border-radius: 15px; 230 | -moz-border-radius: 15px; 231 | border-radius: 15px; 232 | text-shadow: 0 1px 2px #222; 233 | color: #FFF; 234 | font-weight: bold; 235 | line-height: 24px; 236 | white-space: nowrap; 237 | } 238 | 239 | .fancybox-title-outside-wrap { 240 | position: relative; 241 | margin-top: 10px; 242 | color: #fff; 243 | } 244 | 245 | .fancybox-title-inside-wrap { 246 | padding-top: 10px; 247 | } 248 | 249 | .fancybox-title-over-wrap { 250 | position: absolute; 251 | bottom: 0; 252 | left: 0; 253 | color: #fff; 254 | padding: 10px; 255 | background: #000; 256 | background: rgba(0, 0, 0, .8); 257 | } 258 | 259 | /*Retina graphics!*/ 260 | @media only screen and (-webkit-min-device-pixel-ratio: 1.5), 261 | only screen and (min--moz-device-pixel-ratio: 1.5), 262 | only screen and (min-device-pixel-ratio: 1.5){ 263 | 264 | #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { 265 | background-image: url(fancybox_sprite@2x.png); 266 | background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ 267 | } 268 | 269 | #fancybox-loading div { 270 | background-image: url(fancybox_loading@2x.gif); 271 | background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ 272 | } 273 | } -------------------------------------------------------------------------------- /themes/landscape/source/fancybox/helpers/jquery.fancybox-media.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Media helper for fancyBox 3 | * version: 1.0.6 (Fri, 14 Jun 2013) 4 | * @requires fancyBox v2.0 or later 5 | * 6 | * Usage: 7 | * $(".fancybox").fancybox({ 8 | * helpers : { 9 | * media: true 10 | * } 11 | * }); 12 | * 13 | * Set custom URL parameters: 14 | * $(".fancybox").fancybox({ 15 | * helpers : { 16 | * media: { 17 | * youtube : { 18 | * params : { 19 | * autoplay : 0 20 | * } 21 | * } 22 | * } 23 | * } 24 | * }); 25 | * 26 | * Or: 27 | * $(".fancybox").fancybox({, 28 | * helpers : { 29 | * media: true 30 | * }, 31 | * youtube : { 32 | * autoplay: 0 33 | * } 34 | * }); 35 | * 36 | * Supports: 37 | * 38 | * Youtube 39 | * http://www.youtube.com/watch?v=opj24KnzrWo 40 | * http://www.youtube.com/embed/opj24KnzrWo 41 | * http://youtu.be/opj24KnzrWo 42 | * http://www.youtube-nocookie.com/embed/opj24KnzrWo 43 | * Vimeo 44 | * http://vimeo.com/40648169 45 | * http://vimeo.com/channels/staffpicks/38843628 46 | * http://vimeo.com/groups/surrealism/videos/36516384 47 | * http://player.vimeo.com/video/45074303 48 | * Metacafe 49 | * http://www.metacafe.com/watch/7635964/dr_seuss_the_lorax_movie_trailer/ 50 | * http://www.metacafe.com/watch/7635964/ 51 | * Dailymotion 52 | * http://www.dailymotion.com/video/xoytqh_dr-seuss-the-lorax-premiere_people 53 | * Twitvid 54 | * http://twitvid.com/QY7MD 55 | * Twitpic 56 | * http://twitpic.com/7p93st 57 | * Instagram 58 | * http://instagr.am/p/IejkuUGxQn/ 59 | * http://instagram.com/p/IejkuUGxQn/ 60 | * Google maps 61 | * http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17 62 | * http://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16 63 | * http://maps.google.com/?ll=48.859463,2.292626&spn=0.000965,0.002642&t=m&z=19&layer=c&cbll=48.859524,2.292532&panoid=YJ0lq28OOy3VT2IqIuVY0g&cbp=12,151.58,,0,-15.56 64 | */ 65 | ;(function ($) { 66 | "use strict"; 67 | 68 | //Shortcut for fancyBox object 69 | var F = $.fancybox, 70 | format = function( url, rez, params ) { 71 | params = params || ''; 72 | 73 | if ( $.type( params ) === "object" ) { 74 | params = $.param(params, true); 75 | } 76 | 77 | $.each(rez, function(key, value) { 78 | url = url.replace( '$' + key, value || '' ); 79 | }); 80 | 81 | if (params.length) { 82 | url += ( url.indexOf('?') > 0 ? '&' : '?' ) + params; 83 | } 84 | 85 | return url; 86 | }; 87 | 88 | //Add helper object 89 | F.helpers.media = { 90 | defaults : { 91 | youtube : { 92 | matcher : /(youtube\.com|youtu\.be|youtube-nocookie\.com)\/(watch\?v=|v\/|u\/|embed\/?)?(videoseries\?list=(.*)|[\w-]{11}|\?listType=(.*)&list=(.*)).*/i, 93 | params : { 94 | autoplay : 1, 95 | autohide : 1, 96 | fs : 1, 97 | rel : 0, 98 | hd : 1, 99 | wmode : 'opaque', 100 | enablejsapi : 1 101 | }, 102 | type : 'iframe', 103 | url : '//www.youtube.com/embed/$3' 104 | }, 105 | vimeo : { 106 | matcher : /(?:vimeo(?:pro)?.com)\/(?:[^\d]+)?(\d+)(?:.*)/, 107 | params : { 108 | autoplay : 1, 109 | hd : 1, 110 | show_title : 1, 111 | show_byline : 1, 112 | show_portrait : 0, 113 | fullscreen : 1 114 | }, 115 | type : 'iframe', 116 | url : '//player.vimeo.com/video/$1' 117 | }, 118 | metacafe : { 119 | matcher : /metacafe.com\/(?:watch|fplayer)\/([\w\-]{1,10})/, 120 | params : { 121 | autoPlay : 'yes' 122 | }, 123 | type : 'swf', 124 | url : function( rez, params, obj ) { 125 | obj.swf.flashVars = 'playerVars=' + $.param( params, true ); 126 | 127 | return '//www.metacafe.com/fplayer/' + rez[1] + '/.swf'; 128 | } 129 | }, 130 | dailymotion : { 131 | matcher : /dailymotion.com\/video\/(.*)\/?(.*)/, 132 | params : { 133 | additionalInfos : 0, 134 | autoStart : 1 135 | }, 136 | type : 'swf', 137 | url : '//www.dailymotion.com/swf/video/$1' 138 | }, 139 | twitvid : { 140 | matcher : /twitvid\.com\/([a-zA-Z0-9_\-\?\=]+)/i, 141 | params : { 142 | autoplay : 0 143 | }, 144 | type : 'iframe', 145 | url : '//www.twitvid.com/embed.php?guid=$1' 146 | }, 147 | twitpic : { 148 | matcher : /twitpic\.com\/(?!(?:place|photos|events)\/)([a-zA-Z0-9\?\=\-]+)/i, 149 | type : 'image', 150 | url : '//twitpic.com/show/full/$1/' 151 | }, 152 | instagram : { 153 | matcher : /(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i, 154 | type : 'image', 155 | url : '//$1/p/$2/media/?size=l' 156 | }, 157 | google_maps : { 158 | matcher : /maps\.google\.([a-z]{2,3}(\.[a-z]{2})?)\/(\?ll=|maps\?)(.*)/i, 159 | type : 'iframe', 160 | url : function( rez ) { 161 | return '//maps.google.' + rez[1] + '/' + rez[3] + '' + rez[4] + '&output=' + (rez[4].indexOf('layer=c') > 0 ? 'svembed' : 'embed'); 162 | } 163 | } 164 | }, 165 | 166 | beforeLoad : function(opts, obj) { 167 | var url = obj.href || '', 168 | type = false, 169 | what, 170 | item, 171 | rez, 172 | params; 173 | 174 | for (what in opts) { 175 | if (opts.hasOwnProperty(what)) { 176 | item = opts[ what ]; 177 | rez = url.match( item.matcher ); 178 | 179 | if (rez) { 180 | type = item.type; 181 | params = $.extend(true, {}, item.params, obj[ what ] || ($.isPlainObject(opts[ what ]) ? opts[ what ].params : null)); 182 | 183 | url = $.type( item.url ) === "function" ? item.url.call( this, rez, params, obj ) : format( item.url, rez, params ); 184 | 185 | break; 186 | } 187 | } 188 | } 189 | 190 | if (type) { 191 | obj.href = url; 192 | obj.type = type; 193 | 194 | obj.autoHeight = false; 195 | } 196 | } 197 | }; 198 | 199 | }(jQuery)); -------------------------------------------------------------------------------- /source/_posts/20140826_summary.md: -------------------------------------------------------------------------------- 1 | title: 坑整理第二辑 2 | date: 2014-08-26 00:13:34 3 | tags: 总结 4 | --- 5 | 6 | 最近估计有比较多的面试,所以赶紧整理了下第二个阶段里遇到的问题,比较有意思的是一个css的解析问题 7 | 8 | 9 | 10 | ##1. 关于line-height## 11 | 之前在做一个专题的时候遇到了一个很奇怪的现象,大致就是类似如下的代码 12 | 13 | A 14 | B 15 | 如果给第二个span加一个line-height为29的话会使这个块下面的元素要向下一点;这样表达起来貌似有点生硬; 16 | 直接说原因吧,也是突然中意会到的,看css权威指南的时候,看到了行框生成的原理;里面有一点就是每一行的行内元素在默认情况是将自己的基线和整行元素的基线对齐;上面的两个元素他们没有设置vertical-align属性,所以都是基线在一条线上,他们的字体大小又不同,这个时候设置了行高都为32px,会使得两个元素形成行内框的底线不在一条线上,很明显字体小的元素的行内框的底线要更低,而整个行框的形成是取该行中所有元素的最低和最高进行决定的,这也导致了设置了第二个的line-height后,底线不是想象中第一个的底线,而是更低,所以也造成了最后的下榻的原因(其实线上有个例子的--但是不好意思放出来) 17 | 18 | 更多有关于视觉格式化的请看上一篇博文 19 | 20 | 21 | ##2. CSS解析的顺序## 22 | css选择器的效率。!! div.nav > ul li a[title] 23 | 上面的实例来说,浏览器首先会尝试在你的HTML标签中寻找“a[title]”元素,接着在匹配“li和ul”,最后在去匹配“div.nav”。这就是前成所主的“选择器从右到左的原则”。 24 | 25 | 26 | ##3. new Date()## 27 | 这个算是一个严重的问题了,以前从来没注意过这个问题,那天他们提到了我才去看了下,当你在new Date("2013-12-12")这样的时候,后面的小时分秒没给定的时候存在一个比较大的危机,他会根据你所在的时区自动添加那个跟零时区相差的时候,所以我这样new的时候,实际上是生成了一个2013-12-12 08:00这样一个时间,不信你可以试试,所以问题就来了,当你对一个东西需要精确到小时的时候这样就要出乱子了,那天后台的人员告诉我,因为我的这个bug导致了部门亏损了68块钱。。。真是好忧伤。 28 | 解决方法 29 | 30 | 1.当然是new的时候默默注意,把后面的带上就算没有,字符串给拼接一个好了 31 | 2.getTimezoneOffset()这个方法会返回本地时间与格林威治标准时间 (GMT) 的分钟差。 32 | 33 | 34 | ##3. 关于element.style.**## 35 | 通过这种方式获取的css都是那些内联在元素里的样式,而那些通过css顶部声明的则不会通过这个方法来过去到,貌似刚搜索了下,关于获取元素css样式的问题,要是好好研究的话可以单独写一个文章整理,附上刚随手搜到的[文章](http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/) 36 | 37 | ##4. IE7下的绝对定位的问题## 38 | IE7下面要对绝对定位的元素定位时要指明两个方向,不能只制定一个方向,如果在设置了overflow的时候。会出现下面的元素不是从上往下排还是掉到右侧的情况(就是现在布局没有跳出文档流,会被之前排好的元素的位置影响) 39 | 解决的方法就是好习惯,指明两个方向 40 | 41 | ##5. 关于box-shadw## 42 | 对于boxshadw这类属性如果父元素设置了overflow:hidden的属性,而子元素刚好又在边界上面,会出现这样阴影的效果属于父元素之外。然后就会被隐藏掉!!! 43 | ##6. 比较大小的问题## 44 | 一般的情况获取的数据也好信息也好,很多都会是字符串的信息,然后这就会带来一个问题,一些数字的比较,虽然说js里面是会进行一些隐性的强制转化的形式,但是遇到这种问题9 compare 19,按照正常的话当然是19大,但是按照字符串的比较的话,还是9大,因为第一个字符大 45 | 解决方式 46 | 47 | 1.进行比较的时候,用Number进行强制转换 48 | 2. 用parseint转化 49 | 50 | 注:两者还是有一些区别的,具体可以看[点击这里](http://thinkwa.blog.163.com/blog/static/212377080200972610460356/) 51 | 52 | ##7. 关于页面中的事件## 53 | 如果用了一些模块化的方法来进行管理,(比如nej),当你模块进行切换的时候,他之前对一个dom节点绑定的事件是不会回收的,然后当你再去调用这个模块的时候,他又会对这个节点绑定一次事件,然后就会发现,比如你点击一个按钮,他会触发多次一模一样的事件,所以要做好对事件的回收的处理 54 | 55 | 特别是如果要向服务器发一些请求的时候,这样会造成发很多次的请求,对性能会有影响(已掉两次坑) 56 | 57 | ##8. 关于data-id这样的属性## 58 | 一直以来在使用的时候,都是以node.dataset.id的形式来取值,但是在一次的测试中,发现这个属性还有兼容性问题,具体的兼容性可以看 59 | [msdn](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement.dataset)以及[can I use __](http://caniuse.com/#search=dataset)的介绍 60 | 61 | 在一般的情况下可以使用node.dataset.id或者是node.getAttribute('data-id'),进测试在IE8下还可以这么取ndoe["data-id"],但是IE9就不行了 62 | 63 | ##9. 关于ie6、ie7折行问题(li用了float)## 64 | 之前做的一个有关于支付页面里的东西,里面是很多银行支付方式的列举,前几天被报了bug,一开始还以为是IE在float的情况在的元素的计算方式有点偏差然后导致的元素折行的情况出现,后来检查了貌似不是这个元素,然后网上找了下资料。 65 | 66 | 大致的情况是这样的:好多几个元素用li包裹,然后左浮动,按照正常的布局他会一直从左开始排版,要是不够了就会从下一行继续排版,然后一个在第一行最末尾的元素竟然自己出现的折叠,我也很不知其原因 67 | 68 | 解决方法: 69 | 1)如果文本中没有空格,用word-break属性的keep-all参数可解决这个问题, 70 | 2)如果文本中有空格,用white-space属性的nowrap 参数可解决问题。 71 | 具体可以参考这个[博文](http://hi.baidu.com/swallow070705/item/638415b5b7e5c477254b0905) 72 | 73 | ##10. 关于window.open## 74 | 经过测试,貌似这个函数是异步执行的 75 | 76 | console.log("before open"); 77 | window.open(url,"_self"); 78 | console.log("a111"); 79 | 80 | 可以通过断点的方式调试,可以看到在浏览器的链接打开之前会先运行后面的语句,初步的推断,window.open是向那个链接发起了一个请求,然后待请求完毕之后再进行处理,所以有时候在一些函数判断的时候,要注意这点,可以直接加个return;来跳出函数,而且有个更加重要的问题就是如下 81 | 82 | window.open(url,"_self"); 83 | window.open(url2,"_self"); 84 | console.log("a111"); 85 | 如果是立即执行的话那么第二个的url2应该就会不打开了,但是实际上的结果是浏览器跑的是第二个语句,由于它的“异步”(有待证明),第二个直接覆盖了前面的执行结果,所以这里也要小心 86 | 87 | ##11. 关于在IE8以及一下出现图片链接不能点击的问题## 88 | 问题是这样的,要实现一个卡片一样的块,点击跳转到一个新的页面,当然很自然的试用了如下的代码,图片加一个hover上去方法的效果,所以会在图片外层加一个div限制显示的大小,overflow:hidden这样的属性 89 | 90 | 91 |
    92 |
    #####
    93 |
    94 | 95 | 现在的一个问题就是这样的写法在IE8以及一下的浏览器中,点击图片不会跳转,但是如果图片跟卡片之间有空隙,点击空隙还是可以跳转,这就造成了一种假象,图片是置于a卡片的上方,类似设置了一个z-index一样的属性 96 | 97 | 解决的办法: 98 | 暂时还没找到完美的解决办法,只能做的就是将img直接放在a的下面,如果读者有更好的办法,欢迎告之 99 | 100 | 附上几个相关的参考,貌似这个bug是一个比较偏僻的问题 101 | 1. [IE浏览器A标签下包含img诡异BUG](http://www.qttc.net/201210227.html) 102 | 2. [蓝色理想](http://bbs.blueidea.com/thread-3059464-1-1.html) 103 | 3. [ie中a链接失效的问题](http://aiyouu.net/ie-link-no-click/) 104 | 105 | **update 20141008** 106 | 后来测试了一个方法,貌似有效,其实以上的问题归根结底的关键问题就是在IE7上面不能点击的问题,我也测试了几次,感觉应该就是imag元素父元素中有width和height的属性或者是overflow:hidden都会对这个有影响,在去掉之后确实可行,还有一个办法就是用下hack *display:inline;使他变为行内元素,在[sf社区](http://segmentfault.com/q/1010000000712673?_ea=35359)上也发了一个帖子问了下,貌似确实是a元素行内元素内部不能含有块级元素 107 | 108 | 再附上一个参考链接: 109 | [Why can't I click on this link with a nested image in IE7?](http://stackoverflow.com/questions/2319636/why-cant-i-click-on-this-link-with-a-nested-image-in-ie7) 110 | 111 | ##12. input 输入框在chrome和ff下的样式不一样的问题 ## 112 | 113 | 之前没发现,那天测试的姐姐给报了一个bug,附上效果地址 114 | ![不同的input](http://img2.ph.126.net/7fdPCug5oSjQCxtXr2Phgg==/2216052491743844216.png) 115 | 很明显,在border的上面差距很大,chrome比较平滑简单,而ff则比较在意显示的效果 116 | 117 | 118 | ##13. 关于position:absolute的一些定位## 119 | 120 | 关于position:absolute,正常的情况下,他是会按照从该节点开始一次往上找元素,找到第一个position属性不为static的元素进行定位,一般的情况都是这样就能处理了。不过有例外的就是如果找不到这样的元素是怎么定位呢?网上很多的流传是按照body进行定位,其实上是么?[点击知乎的问题](http://www.zhihu.com/question/19926700?sort=created) 121 | 122 | 其实这样的说法是不正确是,正确是应该是以viewport(也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形。 123 | 代码如下 124 | 125 | .block1{background-color: red;width: 400px;height: 300px;} 126 | .block2{position:absolute;bottom:0px;left:0px;width:200px;height:100px;background-color:blue;} 127 |
    128 |
    129 | 130 | 131 | 可以查看下一个比较直接的截图 132 | 当浏览器的窗口比较大的时候 133 | ![窗口比较大](http://img2.ph.126.net/jnPKefx2y1YthJJxblanRw==/6619067695793200250.png) 134 | 135 | 当浏览器的窗口比较小的时候 136 | ![窗口比较小](http://img1.ph.126.net/ko6U2kfwtoajoUCVpXREmQ==/2288673035735331040.png) 137 | 138 | 所有为了避免上面的block1和block2会发生图2重叠的情况,可以设置一个margin-bottom的间距==block2的高度 139 | 140 | ##14. new date的兼容## 141 | 又是new date,上回是时区的时间差,这回是兼容问题,貌似类似new Date("2013-12-22 12:12")这样的初始化在IE10上貌似就会挂掉了。所以稳妥点的初始化的方法就是new Date(2013,11,22,12,21)其中,月份是从0开始计算的 142 | 143 | 144 | ## 其他## 145 | 1. 在用一些模板的时候,比如ftl,永远不要相信后台能保证之前提供的接口,会把所有的数据都照常返回,出现意外的情况还是很多的,所以必须要做好容错的处理,对一些关键变量要进行判断,是否存在的判断是必须的 146 | 2. 可以对前台获取到的数据进行一些处理,比如字符串"adsad ad"可以处理为"adsad ad",即可以将一些没有必要的空格过滤掉 147 | 3. **注意&&看清一些数字是字符串还是Number类型的**,原因就是对于0和"0",他表现出来的是两种情况 148 | 149 | if(!!a) 150 | a="0" true 151 | a=0 false 152 | 153 | 4. z-index 仅能在定位元素上奏效(position 属性值为 relative 或 absolute 或 fixed的对象)。 154 | 5. 注意下类似一些频繁发生的事件可以适当控制好他执行的评论,比如类似resize这类事件,稍微一动就会触发,所以可以采用如下的办法 155 | 156 | var resizeEvent = null; 157 | if (resizeEvent) { 158 | clearTimeout(resizeEvent) 159 | } 160 | resizeEvent = setTimeout(function(){ 161 | /*event*/ 162 | }, 400); 163 | 6. css中的opciita有继承性 父元素设置了透明,后面的子元素也会这样透明 164 | 7. opacity属性只能应用在那些背景色上,但是类似边框颜色等的没有效果,这个可以在css3中解决方案 165 | ![Opacity效果](http://note.youdao.com/yws/res/2070/588D4C55C1D44CEDB1B58F2B97C42D1F) 166 | 167 | 8. 对于浏览器的检测,用userAgent,只能说一般会对,现在有越来越多的东西会修改这个参数了,比如浏览器chrome可以模拟好多设备的代理,所以不能全信这个 -------------------------------------------------------------------------------- /source/_posts/20140524_timeoutandinterval.md: -------------------------------------------------------------------------------- 1 | title: setTimeout()和setInterval() 2 | date: 2014-05-24 09:47:53 3 | tags: js 4 | --- 5 | 6 | 够了解setTimeout()和setInterval()么,来试试下面的内容,可以测试下,反正我是学到了很多 7 | 8 | 9 | ##函数的介绍## 10 | 11 | ###1.1 setTimeout()### 12 | 首先看下,这个函数的定义:([具体请见MDN][1]) 13 | 14 | setTimeout(code,millisec);//在指定的延迟时间之后调用一个函数或者执行一个代码片段 15 | 16 | 函数的定义也说的很明白,他主要是在指定的时间之后运行一个函数,提前在这里指出一下,这个指定只是一个期望值,但不是一个实际的,实际他什么时候运行还是一个未知数,原因在下面会有介绍。 17 | 18 | ###1.2 setInterval### 19 | 函数的定义:([MDN][2]) 20 | 21 | setInterval(codes, millisec);//周期性地调用一个函数(function)或者执行一段代码 22 | 23 | 有一个返回值是该函数的ID标识,可以用clearInterval函数来取消这样的周期执行 24 | 25 | 大概的作用就是周期行的调用一个函数,然后周期的话由millisec来决定,就是数学里的周期函数一样的概念,同理,他这个周期也是一个“期望值”,实际归实际。 26 | 27 | ##参数millisec的介绍## 28 | 在说之前首先推荐看下js定时器是如何工作的。推荐一个文章,[How JavaScript Timers Work][3],如果英文看不明白的可以看下翻译版本[how-javascript-timers-work翻译][4],看完估计你就会明白很多了,贴上一张里面的图 29 | ![js][5] 30 | 31 | 我也稍微总结一下自己看的个人理解(如果不对希望能指出QQQ~~):js里面有以一个类似任务的队列,js是单线程的,在每一个时刻里面都只能执行一小段的代码,暂时理解为一个代码块,新的任务将会添加到尾巴上去,所以说任务是有先后的,然后当一个任务在执行的时候,纵然有另一个任务调用了,都必须需要等待到此刻代码块运行结束之后再调用。 32 | 33 | ###2.1 setTimeout()### 34 | 在前面提到了这个时间的参数定义的是js运行到setTimeout函数到他要执行这个函数的时间间隔,由于代码的执行效率是非常的高的,所有一般的情况下,我们是分辨不出这个中间的间隙。类似于setTimeout()这样的函数,执行的过程中,先将该任务放到执行队列中去,然后过了millisec时间后,再去调用,如果此时任务队列里面没有新的任务,那么很自然的按照理想的时间,他会调用,但是极端的情况下就不是那么如意了,如果时间到了,但是执行的任务队列里还堆积着任务,那么他将会被堆积着,直到前面的运行完毕,来一段代码 35 | 36 | var sleep = function (_sleepTime){ 37 | var _curTime = new Date(), 38 | _nextTime; 39 | console.log("before sleep "+_curTime); 40 | while(!_nextTime || _nextTime - _curTime < _sleepTime){ 41 | _nextTime = new Date(); 42 | } 43 | console.log("after sleep "+_nextTime+" last for "+(_nextTime-_curTime));}; 44 | var time = function(){ 45 | console.log("begin setTimeout block"); 46 | sleep(100); 47 | console.log("end setTimeout block"); 48 | }; 49 | 50 | setTimeout(time,100); 51 | sleep(10000); 52 | 再看下最后控制台的输出结果 53 | 54 | before sleep Fri May 23 2014 15:25:51 GMT+0800 (中国标准时间) 55 | after sleep Fri May 23 2014 15:26:01 GMT+0800 (中国标准时间) last for 10000 56 | begin setTimeout block 57 | before sleep Fri May 23 2014 15:26:01 GMT+0800 (中国标准时间) 58 | after sleep Fri May 23 2014 15:26:01 GMT+0800 (中国标准时间) last for 100 59 | end setTimeout block 60 | 分析下,按照正常的理想的状态,先执行的是setTimeout的函数,那么过了100ms之后应该会执行他,但是后面的一个sleep函数,直接执行了10000ms,虽然过了100ms确实需要去调用他,但是此时任务被阻塞了。所以你可以从上面的时间发现,setTimeout并没有按照期望的时间来执行。所以不能把有些任务太依赖于它 61 | 62 | ###2.1 setInterval()### 63 | 这个函数还是很有意思的一个,以前也没发现,也是看了那篇博客之后才发现。 64 | 1.首先看一个比较正常的情况,比如你需要没过**时间间隔调用一个函数,就可以应用他 65 | 66 | var time2 = function(){ 67 | console.log("sleep for 10ms"); 68 | sleep(10); 69 | }; 70 | setInterval(time2,1000); 71 | 很简单的情况,每个1秒调用一次 72 | - - - 73 | 2.然后开始看一个情况,跟1差不多,不过是每隔两秒调用一次time3函数,每次跑time3函数要1秒中,代码如下 74 | 75 | var globle =0; 76 | var time3 = function(){ 77 | console.log("I'm the No."+globle); 78 | globle++; 79 | sleep(1000); 80 | }; 81 | setInterval(time3,2000); 82 | 看下console的情况 83 | 84 | I'm the No.0 85 | before sleepFri May 23 2014 16:19:04 GMT+0800 86 | after sleep Fri May 23 2014 16:19:05 GMT+0800 last for 1000 87 | I'm the No.1 88 | before sleepFri May 23 2014 16:19:06 GMT+0800 89 | after sleep Fri May 23 2014 16:19:07 GMT+0800 last for 1000 90 | I'm the No.2 91 | before sleepFri May 23 2014 16:19:08 GMT+0800 92 | after sleep Fri May 23 2014 16:19:09 GMT+0800 last for 1000 93 | - - - 94 | 3.现在来一个执行时间要比间隔时间长的看看下情况 95 | 代码如下 96 | 97 | var globle = 0 , 98 | _limit = 5 , 99 | _clear ; 100 | var time3 = function(){ 101 | console.log("I'm the No."+globle); 102 | sleep(3000); 103 | globle++; 104 | if(globle > 5){ 105 | clearInterval(_clear); 106 | } 107 | }; 108 | _clear = setInterval(time3,100); 109 | 110 | 主要的变化就是将time3函数的时间延长到3秒。这样就出现的时间的执行周期要比延迟的时间短的多多了,然后再来看下这回在console中的结果 111 | 112 | I'm the No.0 113 | before sleepFri May 23 2014 16:29:44 GMT+0800 114 | after sleep Fri May 23 2014 16:29:47 GMT+0800 last for 3000 115 | I'm the No.1 116 | before sleepFri May 23 2014 16:29:47 GMT+0800 117 | after sleep Fri May 23 2014 16:29:50 GMT+0800 last for 3000 118 | I'm the No.2 119 | before sleepFri May 23 2014 16:29:50 GMT+0800 120 | after sleep Fri May 23 2014 16:29:53 GMT+0800 last for 3000 121 | I'm the No.3 122 | before sleepFri May 23 2014 16:29:53 GMT+0800 123 | after sleep Fri May 23 2014 16:29:56 GMT+0800 last for 3000 124 | I'm the No.4 125 | before sleepFri May 23 2014 16:29:56 GMT+0800 126 | after sleep Fri May 23 2014 16:29:59 GMT+0800 last for 3000 127 | I'm the No.5 128 | before sleepFri May 23 2014 16:29:59 GMT+0800 129 | after sleep Fri May 23 2014 16:30:02 GMT+0800 last for 3000 130 | 131 | 132 | 不仔细看还不会发现,在每个执行的时间中,他的时间是连续的。并没有出现我们理想中时间的间隔100ms。中间的原因,可以这么来理解,当运行到第一个time3(1) 的时候,按照正常的情况执行,当时间过了100ms后,会再次调用time3(2),可此时,前一个time3(1)还在执行,不能打断,只能将time3(2)放到任务队列中,又过了10ms,按照老样子,又会调用time3(3),但是这个时候time3(1)还在执行,而time3(2)确还在任务队列中,这个时候就会发生一个比较奇怪的事情,就是time3(3)会被丢弃掉。确实很奇怪,下面用代码来测试下看看是否被丢弃掉 133 | 134 | var _beginTime , 135 | _clear , 136 | _globle = 0; 137 | 138 | var time4 = function(){ 139 | if(_globle ==0){ 140 | _beginTime = new Date(); 141 | } 142 | console.log("I'm the No."+_globle); 143 | if(new Date() - _beginTime > 2000){ 144 | clearInterval(_clear); 145 | } 146 | sleep(3000); 147 | _globle++; 148 | }; 149 | _clear = setInterval(time4,100); 150 | 151 | 如果他是一味的将任务加到队列中,而没有进行丢弃的动作的话,周期是100ms,然后我做的限制是当执行时间超过2000ms后,清除定时,如果没丢弃那么队列中应该会有大概20个的动作等待操作,然后在看看console中的结果: 152 | 153 | I'm the No.0 154 | before sleep Sat May 24 2014 09:25:40 GMT+0800 155 | after sleep Sat May 24 2014 09:25:43 GMT+0800 last for 3000 156 | I'm the No.1 157 | before sleep Sat May 24 2014 09:25:43 GMT+0800 time.htm:14 158 | after sleep Sat May 24 2014 09:25:46 GMT+0800 159 | 160 | ###2.3 补充### 161 | 经过上面的一些分析之后,应该稍微对这俩函数有点了解 162 | 1. setTimeout()执行的时间是>=规定的时间 163 | 2. setInterval()执行的时间可能会比预期的时间小,比如上面例子中的0ms,没有时间间隔,某些间隔可能会被跳(被丢弃了) 164 | 3. 如下代码 165 | 166 | setTimeout(function () { 167 | //code 168 | setTimeout(arguments.callee, interval); 169 | }, interval) 170 | 就是一个能防止中间间隔时间不出现那种0ms,或者是丢弃的方法,类似递归一样的解决 171 | 172 | 以上都是自己看博客加自己个人的理解,如有不对请指出,谢谢~ 173 | 再附上两篇参考的文章: 174 | 175 | 1. [setTimeout()和setInterval() 何时被调用执行][6] 176 | 177 | 2. [setTimeout和setInterval的区别你真的了解吗?][7] 178 | 179 | 3. [JavaScript Event Loop 浅析][8] 180 | 181 | 4. [理解JavaScript定时器:setTimeout和setInterval][9] 182 | 183 | [1]:https://developer.mozilla.org/zh-CN/docs/DOM/window.setTimeout 184 | [2]:https://developer.mozilla.org/zh-CN/docs/Web/API/Window.setInterval 185 | [3]:http://ejohn.org/blog/how-javascript-timers-work/ 186 | [4]:http://www.cnitblog.com/asfman/articles/55714.html 187 | [5]:http://ejohn.org/files/Timers.png 188 | [6]:http://www.cnblogs.com/dolphinX/archive/2013/04/05/2784933.html 189 | [7]:http://www.jb51.net/article/26679.htm 190 | [8]:http://heroicyang.com/2012/08/28/javascript-event-loop/ 191 | [9]:http://heroicyang.com/2012/09/06/javascript-timers/ -------------------------------------------------------------------------------- /source/_posts/20150713-performance.md: -------------------------------------------------------------------------------- 1 | title: 前端性能优化 2 | date: 2015-07-13 17:40:15 3 | tags: 性能 4 | --- 5 | 6 | 前段时间稍微了解了一些关于性能优化的几个点,所以整理以下,基本上参考了很多的博文,这里算是对一些资源的汇总,原创的东西并不多 7 | 8 | 9 | ##一、减少http请求 10 | 在一个网页的下载过程中,浏览器需要一个个去下载其中的组件,而这需要发起一个个的http请求来获得,对于一个http的请求所花费的时间包括了:建立连接的时间,发送请求的时间,等待服务器响应的时间,接收数据的时间,在《高性能网站建设》一书中提到了黄金法则就指明“只有10%~20%的最终用户相应时间花在了下载HTML文档上,其他都是花在了下载页面中的所有组件上”,所以尽量减少http的请求对于网页或者是App的优化有着很大的影响。具体的可以从如下两个方面入手: 11 | 12 | ###1.1 前端的优化 13 | (1)使用CSS Sprites技术,将一些比较小的Icon等等之类的图片合并为一张图片,最后采用CSS中的background-position属性来定位具体的图标,从而将原来需要下载多个图标的http请求最后变为一个。适用于那些小的图标以及Icon类似的图片,不适合比较大型的图片。 14 | (2)合并CSS和Javascript代码,开发过程中一般由多人合作开发,代码也按照一定的功能模块进行划分编写,所以开发完成无论是CSS还是Javascript都是多个代码文件,如果不进行合并,则多个文件会多次请求并下载,所以可以通过一些工程化的工具在代码发布的前夕将所有的代码进行合并,从而达到减少请求的目的。 15 | (3)对于一些图片可以使用map的方法,这样一块区域只需要一次图片的请求,或者是把一些图片通过base64的编码方式内敛在页面中,不过这种方法可能会消耗一些CPU的资源。 16 | (4)对于一些ajax请求,可以使用一些ajax框架中的方法,通过跟后台的配合,将多个ajax请求合并在一起,比如使用DWR来发送请求时就可以做到这点。 17 | ###1.2 服务端的优化 18 | Combo技术最初出现源于《高性能网站建设指南》的规则一所提到“减少HTTP请求",是一个在服务端提供,合并多个文件请求在一个响应中的技术。在生产环境中,Combo功能有很多实现,例如Tengine、Combo Handler(Yahoo!开发的一个Apache模块)。它实现了开发人员简单方便地通过URL来合并JavaScript和CSS文件,从而大大减少文件请求数,一个在服务端提供,合并多个文件请求在一个响应中的技术。 19 | 20 | 21 | ##二、压缩内容 22 | 在对http请求优化完毕之后,我们可以做的就是将具体的一个请求看看是否可以将文件的大小进行优化,文件越大需要消耗在传输时间上面的消耗也越大,特别在移动端,对于用户的流量要十分的谨慎和小心,因为移动端的流量要比PC端的资费要贵的多。 23 | (1)由于前端的HTML、CSS、Javascript语言的特性,这些代码可以进行压缩,比如换行这些的字符可以不用,通过一些工程化的工具完全可以做到这点,将上诉三者的代码量进行优化,压缩后的文件大小变化很大,可以优化一半以上。一些比较出名的压缩工具比如YUI Compressor、Google的Closure Compiler、uglifyjs等。 24 | (2)压缩图片:对于一些高质量的图片一些文件都比较大,现在也有一些成熟的技术可以较大幅度的将图片的大小进行压缩,但是同时又不会对图片的质量有很大的改变,比如可以在PS中设置图片的质量,从而降低文件的大小,或者是可以通过一些第三方的工具比如Smush.it,他 是 YUI 团队制作的一款基于 YUI 的在线图片优化工具,或者采用谷歌的一个新的图片格式WebP,不过他的支持度还不是很高,所以也需要谨慎使用。 25 | (3)对于服务端可以使用Gzip压缩技术。传输的内容进行gzip压缩之后可以很明显的看到文件压缩的量,大大减少减少传输时间。 26 | ##三、缓存 27 | 对于一个Web页面中包含了很多组件资源,每次加载都会需要去下载这些资源,在移动端,这无论对于性能还是加载速度或者是流量都是一个不好的情况。而现在的大部分最新的浏览器支持一些缓存的方法,可以通过一系列的方法,将页面的资源缓存浏览器中,当用户再次访问的时候,可以直接调取浏览器中已有的内容,而不用重新去服务器下载资源,其实这样也就是为了减少http的请求,从而来达到优化的目的,具体的也可以分为在服务端和在前端的方法。 28 | ###3.1 前端的优化 29 | 按照正常的方案,为了减少http的请求,可以把CSS还有Javascript全部内连载页面内部,但是这样会让首屏的页面文件变大,虽然是减少了http的请求,但是会极大的影响首屏用户的体验,所以可以将Javascript和CSS改成外联的方式进行加载。这样在实际的使用中却会有着更快的加载速度,原因是现在的浏览器中大多数都是有着缓存的功能,所以这部分的文件都会被浏览器所缓存下来,这样在下次的加载有些明显的提升,不但不会增加HTTP请求数量,而且文档的体积也会减少。此外还可以利用浏览中存储功能比如Local Storage或者是manifest离线存储等。 30 | ###3.2 服务端的优化 31 | (1)HTTP头信息Expires(过期时间) 属性是HTTP控制缓存的基本手段,这个属性告诉缓存器:相关副本在多长时间内是新鲜的。过了这个时间,缓存器就会向源服务器发送请求,检查文档是否被修改。几乎所有的缓存服务器都支持Expires(过期时间)属性;HTTP规范中简要的称该头为“在这一日期/时间之后,响应将被认为是无效的”。例如: Expires: Thu, 15 Apr 2010 20:00:00 GMT 告诉浏览器该响应的有效性持续到2010年4月15日。因为Expires头使用一个特定的时间,它要求服务端和客户端的时钟严格同步,但实际的情况下,服务端和客户端的时间经常不同步,而且时差比较严重,所以用这个方法也不是万能的。另外,过期日期需要经常检查,一旦过期日期到了,需要在服务器中配置提供一个新的日期。这类缓存比较适合那些网站中整体的图片背景,换句话说就是那些不太容易更换的地方,可以设置一个比较合适的时间,利用好缓存。 32 | (2)Cache-Control的方法:由于Expires有着一些不方便的地方,所以HTTP1.1引入了Cache-Control头来克服Exipres头的限制。Cache-Control使用max-age指令指定组件被缓存多久,它以秒为单位定义了一个更新窗,这样就可以避免因为服务端和客户端之间的时间点不一样而产生的问题。使用带有max-age的Cache-Control可以消除Expires的限制,但对于不支持HTTP1.1的应用,仍希望使用Expires头。可以同时制定这两个响应头,如果两者同时出现时,HTTP规范规定max-age指令将重写Expires头。当出现了Expires头时,直到过期时间为止一直会使用缓存的版本,浏览器不会检查任何更新,直到过了过期时间。为了确保用户能够获取组件的最新版本,需要在所有的HTML页面中修改组件的文件名。 33 | (3)If-Modified-Since是标准的HTTP请求头标签,所有现代的浏览器都支持最近修改 (last-modified) 的数据检查,在发送HTTP请求时,把浏览器端缓存页面的最后修改时间一起发到服务器去,服务器会把这个时间与服务器上实际文件的最后修改时间进行比较。如果时间一致,那么返回HTTP状态码304(不返回文件内容),客户端接到之后,就直接把本地缓存文件显示到浏览器中。如果时间不一致,就返回HTTP状态码200和新的文件内容,客户端接到之后,会丢弃旧文件,把新文件缓存起来,并显示到浏览器中,如果你曾经访问过某页,一天后重新访问相同的页时发现它没有变化,并奇怪第二次访问时页面加载得如此之快。 34 | (4)ETag是Web服务器和浏览器用于确认缓存组件的有效性的一种机制。ETag在HTTP1.1中引入,用于检测浏览器缓存中的组件与原始服务器上的组件是否匹配。ETag是唯一标识了一个组件的一个特定版本字符串。唯一的约束是该字符串必须用引号引起来。原始服务器使用Etag响应头来指定组件的ETag。其工作方式是:服务器发送你所请求的数据的同时,发送某种数据的 hash (在 ETag 头信息中给出)。hash 的确定完全取决于服务器。当第二次请求相同的数据时,你需要在 If-None-Match: 头信息中包含 ETag hash,如果数据没有改变,服务器将返回 304 状态代码。与最近修改数据检查相同,服务器仅仅 发送 304 状态代码;第二次将不为你发送相同的数据。在第二次请求时,通过包含 ETag hash,你告诉服务器:如果 hash 仍旧匹配就没有必要重新发送相同的数据,因为你还有上一次访问过的数据。 35 | ##四、代码的优化 36 | ###4.1 HTML的优化 37 | (1)为了让页面有着更好的用户体验,开发者应该尽量让首屏的显示尽可能的快,这里就需要尽量让首页的HTML页面代码尽可能的小,这里就需要涉及到评估是否将CSS或则是Javascript代码内敛到页面中,虽然确实会减少Http的请求数量,但是极大的增加页面文件的体积,可能会对首屏展示有一定的影响,具体需要开发者去平衡。同时为了更快的将首屏的内容展示出来,开发者应结构化HTML,尽量做到主要的内容先展示出来,次要的后续缓慢加载。同时拟写页面的结构的时候,尽量做到简洁,因为如果过多的DOM节点会影响页面的渲染速度,换言之以更少的代码实现同样的功能为最佳。 38 | (2)在CSS写在文档的头部,这样可以让首屏可以尽快的有一定的样式;而Javascript则要尽可能的放在文档的尾部或者将其设置为异步加载,因为一般加载执行Javascript代码都会阻塞页面的加载和渲染。还有比如注意一些CSS的写法减少浏览器重绘回流等等。 39 | ###4.2 CSS的优化 40 | (1)避免CSS表达式,之所以避免少使用CSS表达式的原因在雅虎YUI中也提到了“表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。”如此频繁的计算对性能来说肯定是一个很大的消耗。当然如果没有办法非要使用,那么也要尽可能的将其优化,CSS表达式方法在其它浏览器中不起作用,因此在跨浏览器的设计中单独针对Internet Explorer设置时会比较有用,或者对低版本中进行hack来避开。 41 | (2)避免使用@import:页面中加载CSS文件的方法有两种,一种是link元素,另一种是CSS 2.1加入@import。而在外部的CSS文件中使用@import会使得页面在加载时增加额外的延迟。虽然规则允许在样式中调用@import来导入其它的CSS,但浏览器不能并行下载样式,就会导致页面增添了额外的往返耗时。比如,第一个CSS文件first.css包含了以下内容:@import url(“second.css”)。那么浏览器就必须先把first.css下载、解析和执行后,才发现及处理第二个文件second.css。当你在一个外部样式表中使用第二种方式时,浏览器无法通过并行下载的方式下载这个资源,这样就会导致其他资源的下载被阻塞。 42 | (3)注意CSS选择器的性能:之所以要注意CSS选择器的性能是因为要注意浏览器匹配选择器和文档元素时所消耗的时间。这里有一种跟平时思维不同的就是有关CSS的解析顺序,平时在写CSS的时候,开发者都是习惯性的从左往右的顺序拟写CSS,但是实际上浏览器解析CSS的顺序却是相反的,是从右往左的顺序,这就会造成一个很大的区别,比如#header > a {font-weight:blod;},如果按照以前的思维方式,大家都会以为先查找到id为header的节点,再去子节点中寻找标签为a的节点,CSS这样查找的话效率还是挺高的;但是实际上却不是这样的,浏览器会去寻找所有的a节点,然后再找到父节点id为header的节点未知,这样的查找性能要比之前的差一些了。如果用#header a {font-weight:blod;}这样的方式去查找,性能要更加差,因为先要找到所有a标签中祖先元素id为header的元素直至根节点。 43 | ###4.3 Javascript的优化 44 | (1)做好缓存:类似缓存资源一样,最常见的就是在for循环中,需要把数据的长度存储在一个临时变量中,否则每次循环都需要去读取这个数值;类似的还有在使用jQuery中,对于一个后续可能会继续用的节点,在一次$(“**”)取出后,最好将他缓存起来,因为每次支持节点的查找需要一定的代价和消耗。 45 | (2)控制好经常触发事件的频率:比如有时候需要的时候会对浏览的onresize事件进行监听,如果不控制好频率,只是一味的在当外界resize的时候就触发这个动作,那么对于浏览的监听事件也有点过于损耗了,想象一下,当你调整浏览器的时候,他是每一个时间的间隔其实都触发了这个事件,特别是当那个监听事件里写了很多复杂的而且消耗资源的事件,这样貌似在低版本的一些浏览器都会卡住,解决的方法就是设置一个定时器,正常情况下延迟一定的时间执行,如果再次触发则取消之前的执行,大致的代码如下 46 | var resizeEvent = null; 47 | if (resizeEvent) { 48 | clearTimeout(resizeEvent) 49 | } 50 | resizeEvent = setTimeout(function(){ 51 | /*event*/ 52 | }, 400); 53 | (3)做好回收工作:由于Javascript语言的特性,它本身就具有垃圾回收的机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。特别在一些移动端的单页面中要特别注意垃圾回收的问题,因为不像PC端的一样一样会进场刷新,单页面经常仅仅利用ajax来更新数据,所以若不好好维护好内存的大小,很容易造成奔溃等情况出现。垃圾回收原理:找出内存中不再继续使用的变量,将其所占用的内存释放,开发人员不再关心内存的使用情况,内存的分配已经无用内存的释放完全实现了自动化管理。常见的Javascript垃圾回收分为两类:标记清除、引用计数。 54 | 标记清除是javascript中最常用的垃圾回收方式。当变量进入执行环境是,就标记这个变量为“进入环境”。从逻辑上讲,永远不能释放进入环境的变量所占用的内存,因为只要执行流进入相应的环境,就可能会用到他们。当变量离开环境时,则将其标记为“离开环境”。垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。然后,它会去掉环境中的变量以及被环境中的变量引用的标记。而在此之后再被加上标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问到这些变量了。最后。垃圾收集器完成内存清除工作,销毁那些带标记的值,并回收他们所占用的内存空间,IE,Firefox,Opera,Chrome和Safari的目前都是使用的标记清除回收策略。 55 | 引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时,则这个值的引用次数就是1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数就减1。当这个引用次数变成0时,则说明没有办法再访问这个值了,因而就可以将其所占的内存空间给收回来。这样,垃圾收集器下次再运行时,它就会释放那些引用次数为0的值所占的内存。 56 | 在具体的实践中,开发者需要注意一些垃圾的回收,常见的比如,将DOM树中的一些节点删除时要一起把绑定在他上面的一些事件也同时给删除掉,这里不仅仅是为了清除不必要的事件有时甚至会出现一个动作执行多次的动作。还有就是比如闭包中的引用以及类似setTimeout这类定时器的设置,在不需要的情况下要及时清除。 57 | ##五、其他优化 58 | (1)对一些不必要的资源可以采用惰性加载的方法来实现,即不使用的时候不加载,这样可以较大的优化页面的加载速度,比较常见的就是对于一些图片较多的页面上,可以首先加载仅在第一屏上的图片,对于页面中的不再第一屏的页面可以采用一个默认的图片,当且仅当用户下滑到那些图片的时候,再将他们从服务器加载进来。 59 | (2)在兼容性允许的情况下尽量使用CSS动画而不是Javascript动画,因为使用CSS动画不占用Javascript的主线程,在一些手机上还可以利用GPU进行硬件加速(比如CSS3中的transitions属性等),很多浏览器还可以对这些动画进行优化。 60 | (3)使用CDN(Content Delivery Network内容分发网络):其作用是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。最基本的开发者可以将自身常用的一些类库部署到CDN上,或者选择一些免费的CDN提供商来引入资源,常见的一些比如360、百度、七牛、又拍云等等。 61 | (4)分多个域并行加载:在HTTP 1.1规范(section8.1.4)指明浏览器应允许每个主机名(hostname)可以支持至少两个并发连接,但是浏览器默认对同一个域下的资源同时加载的数量会有所限制,所以当一个文档中所包含的资源数要比主机的最大并发数还多的时候,浏览器则发出允许的最大并发数的请求,并将剩余的请求加入队列中。一旦有请求完成,浏览器会立即发出队列中的下一批允许的最大并发数的请求,它会一直重复这个过程直到下载完所有的资源,具体一点就是如果一个浏览器允许每个主机名可以有4个并发连接,并且一个页面可以引用同域的100个资源,那么每4个资源会占用1个往返时间,总的下载时间为25个往返时间。这个数量还跟浏览器的类型、版本、以及HTTP版本有关,根据最新的Browserscope的结果,分别如下:Chrome32、34为6个,Firefox26、27为6个,Safari7.0.1为6个,Blackberry为7个,Andriod 2.3为8个,IE 10为8个,IE11为13个。 62 | 63 | 但是浏览器同时还提供了另一种途径就是不同域下可以并行加载资源, 这样就可以绕开上面提到的限制问题,同样的图片如果将其放在两个域,不过虽然可以通过这个方法来达到更多资源的并行下载,但是也有两个问题,一个是所有的浏览器根据不同的种类对不同域同时下载的资源数有限制,根据最新的Browserscope的结果,分别如下:Chrome32、34为10个,Firefox26、27为17个,Safari7.0.1为17个,Blackberry为9个,Andriod 2.3为10个,IE 10为17个,IE11为17个。第二个问题是每一个域的解析需要时间,每个新的TCP的连接的建立引入额外的请求往返时间,同时还可能会造成空缓存客户的DNS查找,所以这个不同域的数量也不是越多越好,一般选取在2到5个之间,具体的可以按照不同的项目进行修改。 64 | (5)DNS的预加载:当我们访问一个网站如 www.amazon.com 时,需要将这个域名先转化为对应的 IP 地址,这是一个非常耗时的过程,所以解析DNS是网站性能优化的比较重要的一部分,虽然加载时间不太长,但是很难压缩起来。特别是为了并发下载资源而使用多个CDN域名来加载资源的大型网站,更不可忽视,每加载资源之前都要先进行CDN域名的DNS解析转换。如果采用DNS预加载,常用的方法是可以在头部加上< link href=”//my.domain.com” rel=”dns-prefetch” />,支持该功能的浏览器就会提前对该域名进行DNS解析并且缓存一下,而不会在需要请求资源再进行解析,从而提高整体网站的性能。 65 | (6)加一些过渡动画(loading状态):当访问一些含有众多多媒体元素的页面的时候,要是直接展现给用户一片空白的页面,这样的用户体验相当不好,一种常见的方法就是在页面加载完毕的时候,默认给一个loading状态的图片或者用CSS3来实现,等待内部的内容完全加载成功后再将这层loading状态的遮罩去掉。 -------------------------------------------------------------------------------- /themes/landscape/source/css/_partial/article.styl: -------------------------------------------------------------------------------- 1 | .article 2 | margin: block-margin 0 3 | 4 | .article-inner 5 | @extend $block 6 | overflow: hidden 7 | 8 | .article-meta 9 | clearfix() 10 | 11 | .article-date 12 | @extend $block-caption 13 | float: left 14 | 15 | .article-category 16 | float: left 17 | line-height: 1em 18 | color: #ccc 19 | text-shadow: 0 1px #fff 20 | margin-left: 8px 21 | &:before 22 | content: "\2022" 23 | 24 | .article-category-link 25 | @extend $block-caption 26 | margin: 0 12px 1em 27 | 28 | .article-header 29 | padding: article-padding article-padding 0 30 | 31 | .article-title 32 | text-decoration: none 33 | font-size: 2em 34 | font-weight: bold 35 | color: color-default 36 | line-height: line-height-title 37 | transition: color 0.2s 38 | a&:hover 39 | color: color-link 40 | 41 | .article-entry 42 | @extend $base-style 43 | clearfix() 44 | color: color-default 45 | padding: 0 article-padding 46 | p, table 47 | line-height: line-height 48 | margin: line-height 0 49 | h1, h2, h3, h4, h5, h6 50 | font-weight: bold 51 | h1, h2, h3, h4, h5, h6 52 | line-height: line-height-title 53 | margin: line-height-title 0 54 | a 55 | color: color-link 56 | text-decoration: none 57 | &:hover 58 | text-decoration: underline 59 | ul, ol, dl 60 | margin-top: line-height 61 | margin-bottom: line-height 62 | img, video 63 | max-width: 100% 64 | height: auto 65 | display: block 66 | margin: auto 67 | iframe 68 | border: none 69 | table 70 | width: 100% 71 | border-collapse: collapse 72 | border-spacing: 0 73 | th 74 | font-weight: bold 75 | border-bottom: 3px solid color-border 76 | padding-bottom: 0.5em 77 | td 78 | border-bottom: 1px solid color-border 79 | padding: 10px 0 80 | blockquote 81 | font-family: font-serif 82 | font-size: 1.4em 83 | margin: line-height 20px 84 | text-align: center 85 | footer 86 | font-size: font-size 87 | margin: line-height 0 88 | font-family: font-sans 89 | cite 90 | &:before 91 | content: "—" 92 | padding: 0 0.5em 93 | .pullquote 94 | text-align: left 95 | width: 45% 96 | margin: 0 97 | &.left 98 | margin-left: 0.5em 99 | margin-right: 1em 100 | &.right 101 | margin-right: 0.5em 102 | margin-left: 1em 103 | .caption 104 | color: color-grey 105 | display: block 106 | font-size: 0.9em 107 | margin-top: 0.5em 108 | position: relative 109 | text-align: center 110 | // http://webdesignerwall.com/tutorials/css-elastic-videos 111 | .video-container 112 | position: relative 113 | padding-top: (9 / 16 * 100)% // 16:9 ratio 114 | height: 0 115 | overflow: hidden 116 | iframe, object, embed 117 | position: absolute 118 | top: 0 119 | left: 0 120 | width: 100% 121 | height: 100% 122 | margin-top: 0 123 | 124 | .article-more-link a 125 | display: inline-block 126 | line-height: 1em 127 | padding: 6px 15px 128 | border-radius: 15px 129 | background: color-background 130 | color: color-grey 131 | text-shadow: 0 1px #fff 132 | text-decoration: none 133 | &:hover 134 | background: color-link 135 | color: #fff 136 | text-decoration: none 137 | text-shadow: 0 1px darken(color-link, 20%) 138 | 139 | .article-footer 140 | clearfix() 141 | font-size: 0.85em 142 | line-height: line-height 143 | border-top: 1px solid color-border 144 | padding-top: line-height 145 | margin: 0 article-padding article-padding 146 | a 147 | color: color-grey 148 | text-decoration: none 149 | &:hover 150 | color: color-default 151 | 152 | .article-tag-list-item 153 | float: left 154 | margin-right: 10px 155 | 156 | .article-tag-list-link 157 | &:before 158 | content: "#" 159 | 160 | .article-comment-link 161 | float: right 162 | &:before 163 | content: "\f075" 164 | font-family: font-icon 165 | padding-right: 8px 166 | 167 | .article-share-link 168 | cursor: pointer 169 | float: right 170 | margin-left: 20px 171 | &:before 172 | content: "\f064" 173 | font-family: font-icon 174 | padding-right: 6px 175 | 176 | #article-nav 177 | clearfix() 178 | position: relative 179 | @media mq-normal 180 | margin: block-margin 0 181 | &:before 182 | absolute-center(8px) 183 | content: "" 184 | border-radius: 50% 185 | background: color-border 186 | box-shadow: 0 1px 2px #fff 187 | 188 | .article-nav-link-wrap 189 | text-decoration: none 190 | text-shadow: 0 1px #fff 191 | color: color-grey 192 | box-sizing: border-box 193 | margin-top: block-margin 194 | text-align: center 195 | display: block 196 | &:hover 197 | color: color-default 198 | @media mq-normal 199 | width: 50% 200 | margin-top: 0 201 | 202 | #article-nav-newer 203 | @media mq-normal 204 | float: left 205 | text-align: right 206 | padding-right: 20px 207 | 208 | #article-nav-older 209 | @media mq-normal 210 | float: right 211 | text-align: left 212 | padding-left: 20px 213 | 214 | .article-nav-caption 215 | text-transform: uppercase 216 | letter-spacing: 2px 217 | color: color-border 218 | line-height: 1em 219 | font-weight: bold 220 | #article-nav-newer & 221 | margin-right: -2px 222 | 223 | .article-nav-title 224 | font-size: 0.85em 225 | line-height: line-height 226 | margin-top: 0.5em 227 | 228 | .article-share-box 229 | position: absolute 230 | display: none 231 | background: #fff 232 | box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2) 233 | border-radius: 3px 234 | margin-left: -145px 235 | overflow: hidden 236 | z-index: 1 237 | &.on 238 | display: block 239 | 240 | .article-share-input 241 | width: 100% 242 | background: none 243 | box-sizing: border-box 244 | font: 14px font-sans 245 | padding: 0 15px 246 | color: color-default 247 | outline: none 248 | border: 1px solid color-border 249 | border-radius: 3px 3px 0 0 250 | height: 36px 251 | line-height: 36px 252 | 253 | .article-share-links 254 | clearfix() 255 | background: color-background 256 | 257 | $article-share-link 258 | width: 50px 259 | height: 36px 260 | display: block 261 | float: left 262 | position: relative 263 | color: #999 264 | text-shadow: 0 1px #fff 265 | &:before 266 | font-size: 20px 267 | font-family: font-icon 268 | absolute-center(@font-size) 269 | text-align: center 270 | &:hover 271 | color: #fff 272 | 273 | .article-share-twitter 274 | @extend $article-share-link 275 | &:before 276 | content: "\f099" 277 | &:hover 278 | background: color-twitter 279 | text-shadow: 0 1px darken(color-twitter, 20%) 280 | 281 | .article-share-facebook 282 | @extend $article-share-link 283 | &:before 284 | content: "\f09a" 285 | &:hover 286 | background: color-facebook 287 | text-shadow: 0 1px darken(color-facebook, 20%) 288 | 289 | .article-share-pinterest 290 | @extend $article-share-link 291 | &:before 292 | content: "\f0d2" 293 | &:hover 294 | background: color-pinterest 295 | text-shadow: 0 1px darken(color-pinterest, 20%) 296 | 297 | .article-share-google 298 | @extend $article-share-link 299 | &:before 300 | content: "\f0d5" 301 | &:hover 302 | background: color-google 303 | text-shadow: 0 1px darken(color-google, 20%) 304 | 305 | .article-gallery 306 | background: #000 307 | position: relative 308 | 309 | .article-gallery-photos 310 | position: relative 311 | overflow: hidden 312 | 313 | .article-gallery-img 314 | display: none 315 | max-width: 100% 316 | &:first-child 317 | display: block 318 | &.loaded 319 | position: absolute 320 | display: block 321 | img 322 | display: block 323 | max-width: 100% 324 | margin: 0 auto 325 | /* 326 | $article-gallery-ctrl 327 | position: absolute 328 | top: 0 329 | height: 100% 330 | width: 60px 331 | color: #fff 332 | text-shadow: 0 0 3px rgba(0, 0, 0, 0.3) 333 | opacity: 0.3 334 | transition: opacity 0.2s 335 | cursor: pointer 336 | &:hover 337 | opacity: 0.8 338 | &:before 339 | font-size: 30px 340 | font-family: font-icon 341 | position: absolute 342 | top: 50% 343 | margin-top: @font-size * -0.5 344 | 345 | .article-gallery-prev 346 | @extend $article-gallery-ctrl 347 | left: 0 348 | &:before 349 | content: "\f053" 350 | left: 15px 351 | 352 | .article-gallery-next 353 | @extend $article-gallery-ctrl 354 | right: 0 355 | &:before 356 | content: "\f054" 357 | right: 15px*/ --------------------------------------------------------------------------------