├── .gitignore ├── themes └── indigo │ ├── layout │ ├── _partial │ │ ├── footer.ejs │ │ ├── loading.ejs │ │ ├── post │ │ │ ├── date.ejs │ │ │ ├── tag.ejs │ │ │ ├── tags.ejs │ │ │ ├── category.ejs │ │ │ ├── title.ejs │ │ │ ├── duoshuo.ejs │ │ │ ├── nav.ejs │ │ │ ├── comment.ejs │ │ │ └── share.ejs │ │ ├── cnzz.ejs │ │ ├── after-footer.ejs │ │ ├── script.ejs │ │ ├── search.ejs │ │ ├── archive-post.ejs │ │ ├── google-analytics.ejs │ │ ├── mathjax.ejs │ │ ├── menu.ejs │ │ ├── head.ejs │ │ ├── archive.ejs │ │ ├── header.ejs │ │ └── article.ejs │ ├── demo.ejs │ ├── page.ejs │ ├── index.ejs │ ├── post.ejs │ ├── tag.ejs │ ├── archive.ejs │ ├── category.ejs │ └── layout.ejs │ ├── source │ ├── img │ │ ├── cc.png │ │ ├── brand.jpg │ │ ├── logo.jpg │ │ ├── img-err.png │ │ └── img-loading.png │ ├── css │ │ ├── fonts │ │ │ ├── roboto │ │ │ │ ├── Roboto-Bold.eot │ │ │ │ ├── Roboto-Bold.ttf │ │ │ │ ├── Roboto-Bold.woff │ │ │ │ ├── Roboto-Bold.woff2 │ │ │ │ ├── Roboto-Light.eot │ │ │ │ ├── Roboto-Light.ttf │ │ │ │ ├── Roboto-Light.woff │ │ │ │ ├── Roboto-Medium.eot │ │ │ │ ├── Roboto-Medium.ttf │ │ │ │ ├── Roboto-Thin.eot │ │ │ │ ├── Roboto-Thin.ttf │ │ │ │ ├── Roboto-Thin.woff │ │ │ │ ├── Roboto-Thin.woff2 │ │ │ │ ├── Roboto-Light.woff2 │ │ │ │ ├── Roboto-Medium.woff │ │ │ │ ├── Roboto-Medium.woff2 │ │ │ │ ├── Roboto-Regular.eot │ │ │ │ ├── Roboto-Regular.ttf │ │ │ │ ├── Roboto-Regular.woff │ │ │ │ └── Roboto-Regular.woff2 │ │ │ └── fontawesome │ │ │ │ ├── FontAwesome.otf │ │ │ │ ├── fontawesome-webfont.eot │ │ │ │ ├── fontawesome-webfont.ttf │ │ │ │ ├── fontawesome-webfont.woff │ │ │ │ └── fontawesome-webfont.woff2 │ │ └── _partial │ │ │ ├── loading.less │ │ │ ├── gotop.less │ │ │ ├── tags.less │ │ │ ├── archives.less │ │ │ ├── roboto.less │ │ │ ├── header.less │ │ │ ├── postlist.less │ │ │ ├── share.less │ │ │ ├── variable.less │ │ │ ├── search.less │ │ │ ├── waves.less │ │ │ ├── highlight.less │ │ │ └── layout.less │ └── js │ │ └── search.js │ ├── package.json │ ├── screenshots │ ├── hexo-theme-pad.png │ ├── hexo-theme-pc.png │ ├── hexo-theme-phone-1.png │ └── hexo-theme-phone-2.png │ ├── README.md │ └── _config.yml ├── site ├── img │ ├── cc.png │ ├── logo.jpg │ ├── brand.jpg │ ├── img-err.png │ └── img-loading.png ├── images │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.png │ ├── 7.png │ ├── 8.jpg │ ├── 9.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.png │ ├── 13.png │ ├── 14.png │ ├── 15.png │ ├── 16.png │ ├── 17.png │ ├── 2016-12-15 │ │ └── form.png │ └── 2016-12-26 │ │ └── directory.png ├── css │ └── fonts │ │ ├── roboto │ │ ├── Roboto-Bold.eot │ │ ├── Roboto-Bold.ttf │ │ ├── Roboto-Thin.eot │ │ ├── Roboto-Thin.ttf │ │ ├── Roboto-Bold.woff │ │ ├── Roboto-Bold.woff2 │ │ ├── Roboto-Light.eot │ │ ├── Roboto-Light.ttf │ │ ├── Roboto-Light.woff │ │ ├── Roboto-Light.woff2 │ │ ├── Roboto-Medium.eot │ │ ├── Roboto-Medium.ttf │ │ ├── Roboto-Medium.woff │ │ ├── Roboto-Regular.eot │ │ ├── Roboto-Regular.ttf │ │ ├── Roboto-Thin.woff │ │ ├── Roboto-Thin.woff2 │ │ ├── Roboto-Medium.woff2 │ │ ├── Roboto-Regular.woff │ │ └── Roboto-Regular.woff2 │ │ └── fontawesome │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 ├── demos │ ├── border-radius.html │ ├── border-image.html │ ├── -webkit-border-image.html │ ├── half ellipse.html │ ├── 空心字1.html │ ├── marching ants borders.html │ ├── envelope.html │ ├── 空心字2.html │ ├── css skew.html │ ├── transform-origin.html │ ├── 2016-12-15 │ │ ├── form2.html │ │ └── form1.html │ ├── css background.html │ └── transform-style.html ├── js │ └── search.js └── tags │ ├── vscode │ └── index.html │ ├── 数据库 │ └── index.html │ └── Oracle │ └── index.html ├── source ├── images │ ├── 1.jpg │ ├── 10.jpg │ ├── 11.jpg │ ├── 12.png │ ├── 13.png │ ├── 14.png │ ├── 15.png │ ├── 16.png │ ├── 17.png │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.png │ ├── 7.png │ ├── 8.jpg │ ├── 9.jpg │ ├── 2016-12-15 │ │ └── form.png │ └── 2016-12-26 │ │ └── directory.png ├── demos │ ├── border-radius.html │ ├── border-image.html │ ├── -webkit-border-image.html │ ├── half ellipse.html │ ├── 空心字1.html │ ├── marching ants borders.html │ ├── envelope.html │ ├── 空心字2.html │ ├── css skew.html │ ├── transform-origin.html │ ├── 2016-12-15 │ │ ├── form2.html │ │ └── form1.html │ ├── css background.html │ └── transform-style.html └── _posts │ ├── CSS 空心字.md │ ├── 如何展示表单控件.md │ ├── CSS border-radius.md │ ├── CSS border-image.md │ ├── CSS 语法速查.md │ ├── CSS 变形.md │ ├── 百度 EFE 前端框架学习笔记（ef）.md │ ├── HTTP请求重发.md │ ├── 爬虫与编码.md │ ├── 当心，babel 处理 Symbol 的麻烦.md │ ├── web 前端外部点击事件的实现.md │ ├── 使用 CSS background 构造一个棋盘.md │ ├── oracle安装.md │ ├── 使用 marked 解析 markdown 之缩进.md │ ├── 记一次坑爹的对接经历.md │ ├── 一些 core javascript 的基础知识.md │ ├── 使用marked解析markdown.md │ ├── ES6 模式匹配和默认参数.md │ ├── 实现第一个 vscode 扩展.md │ ├── filedownload.md │ └── 一个 JavaScript.md ├── .npmignore ├── demos ├── border-image.html ├── -webkit-border-image.html ├── 重复渐变.html ├── half ellipse.html ├── 空心字1.html ├── marching ants borders.html ├── envelope.html ├── 空心字2.html ├── linear-gradient.html ├── loader.html ├── css skew.html ├── transform-origin.html ├── radial-gradient.html ├── css background.html └── transform-style.html ├── package.json ├── README.md └── config.yml /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /themes/indigo/layout/_partial/footer.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /themes/indigo/layout/demo.ejs: -------------------------------------------------------------------------------- 1 | ==== 2 | <%- page.content %> 3 | === -------------------------------------------------------------------------------- /site/img/cc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/img/cc.png -------------------------------------------------------------------------------- /site/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/1.jpg -------------------------------------------------------------------------------- /site/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/2.jpg -------------------------------------------------------------------------------- /site/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/3.jpg -------------------------------------------------------------------------------- /site/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/4.jpg -------------------------------------------------------------------------------- /site/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/5.jpg -------------------------------------------------------------------------------- /site/images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/6.png -------------------------------------------------------------------------------- /site/images/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/7.png -------------------------------------------------------------------------------- /site/images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/8.jpg -------------------------------------------------------------------------------- /site/images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/9.jpg -------------------------------------------------------------------------------- /site/img/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/img/logo.jpg -------------------------------------------------------------------------------- /themes/indigo/layout/_partial/loading.ejs: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /site/images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/10.jpg -------------------------------------------------------------------------------- /site/images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/11.jpg -------------------------------------------------------------------------------- /site/images/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/12.png -------------------------------------------------------------------------------- /site/images/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/13.png -------------------------------------------------------------------------------- /site/images/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/14.png -------------------------------------------------------------------------------- /site/images/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/15.png -------------------------------------------------------------------------------- /site/images/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/16.png -------------------------------------------------------------------------------- /site/images/17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/17.png -------------------------------------------------------------------------------- /site/img/brand.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/img/brand.jpg -------------------------------------------------------------------------------- /site/img/img-err.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/img/img-err.png -------------------------------------------------------------------------------- /source/images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/1.jpg -------------------------------------------------------------------------------- /source/images/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/10.jpg -------------------------------------------------------------------------------- /source/images/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/11.jpg -------------------------------------------------------------------------------- /source/images/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/12.png -------------------------------------------------------------------------------- /source/images/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/13.png -------------------------------------------------------------------------------- /source/images/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/14.png -------------------------------------------------------------------------------- /source/images/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/15.png -------------------------------------------------------------------------------- /source/images/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/16.png -------------------------------------------------------------------------------- /source/images/17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/17.png -------------------------------------------------------------------------------- /source/images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/2.jpg -------------------------------------------------------------------------------- /source/images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/3.jpg -------------------------------------------------------------------------------- /source/images/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/4.jpg -------------------------------------------------------------------------------- /source/images/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/5.jpg -------------------------------------------------------------------------------- /source/images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/6.png -------------------------------------------------------------------------------- /source/images/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/7.png -------------------------------------------------------------------------------- /source/images/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/8.jpg -------------------------------------------------------------------------------- /source/images/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/9.jpg -------------------------------------------------------------------------------- /themes/indigo/layout/page.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/article', {post: page, index: false}) %> -------------------------------------------------------------------------------- /themes/indigo/layout/index.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/archive', {pagination: 2, index: true}) %> -------------------------------------------------------------------------------- /themes/indigo/layout/post.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/article', {post: page, index: false}) %> 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | Thumbs.db 3 | db.json 4 | *.log 5 | node_modules/ 6 | public/ 7 | .deploy*/ -------------------------------------------------------------------------------- /site/img/img-loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/img/img-loading.png -------------------------------------------------------------------------------- /themes/indigo/layout/tag.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/archive', {pagination: config.archive, index: true}) %> -------------------------------------------------------------------------------- /themes/indigo/layout/archive.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/archive', {pagination: config.archive, index: true}) %> -------------------------------------------------------------------------------- /themes/indigo/layout/category.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/archive', {pagination: config.archive, index: true}) %> -------------------------------------------------------------------------------- /site/images/2016-12-15/form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/2016-12-15/form.png -------------------------------------------------------------------------------- /themes/indigo/source/img/cc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/img/cc.png -------------------------------------------------------------------------------- /source/images/2016-12-15/form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/2016-12-15/form.png -------------------------------------------------------------------------------- /themes/indigo/source/img/brand.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/img/brand.jpg -------------------------------------------------------------------------------- /themes/indigo/source/img/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/img/logo.jpg -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Bold.eot -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Bold.ttf -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Thin.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Thin.eot -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Thin.ttf -------------------------------------------------------------------------------- /site/images/2016-12-26/directory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/images/2016-12-26/directory.png -------------------------------------------------------------------------------- /themes/indigo/source/img/img-err.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/img/img-err.png -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Bold.woff -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Bold.woff2 -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Light.eot -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Light.ttf -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Light.woff -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Light.woff2 -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Medium.eot -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Medium.ttf -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Medium.woff -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Regular.eot -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Regular.ttf -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Thin.woff -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Thin.woff2 -------------------------------------------------------------------------------- /source/images/2016-12-26/directory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/source/images/2016-12-26/directory.png -------------------------------------------------------------------------------- /themes/indigo/source/img/img-loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/img/img-loading.png -------------------------------------------------------------------------------- /site/css/fonts/fontawesome/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/fontawesome/FontAwesome.otf -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Medium.woff2 -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Regular.woff -------------------------------------------------------------------------------- /site/css/fonts/roboto/Roboto-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/roboto/Roboto-Regular.woff2 -------------------------------------------------------------------------------- /themes/indigo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hexo-theme-material-indigo", 3 | "version": "0.3.0", 4 | "private": true 5 | } 6 | -------------------------------------------------------------------------------- /themes/indigo/screenshots/hexo-theme-pad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/screenshots/hexo-theme-pad.png -------------------------------------------------------------------------------- /themes/indigo/screenshots/hexo-theme-pc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/screenshots/hexo-theme-pc.png -------------------------------------------------------------------------------- /site/css/fonts/fontawesome/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/fontawesome/fontawesome-webfont.eot -------------------------------------------------------------------------------- /site/css/fonts/fontawesome/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/fontawesome/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /themes/indigo/screenshots/hexo-theme-phone-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/screenshots/hexo-theme-phone-1.png -------------------------------------------------------------------------------- /themes/indigo/screenshots/hexo-theme-phone-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/screenshots/hexo-theme-phone-2.png -------------------------------------------------------------------------------- /site/css/fonts/fontawesome/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/fontawesome/fontawesome-webfont.woff -------------------------------------------------------------------------------- /site/css/fonts/fontawesome/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/site/css/fonts/fontawesome/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Bold.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Bold.eot -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Bold.ttf -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Bold.woff -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Bold.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Bold.woff2 -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Light.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Light.eot -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Light.ttf -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Light.woff -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Medium.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Medium.eot -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Medium.ttf -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Thin.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Thin.eot -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Thin.ttf -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Thin.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Thin.woff -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Thin.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Thin.woff2 -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Light.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Light.woff2 -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Medium.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Medium.woff -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Medium.woff2 -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Regular.eot -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Regular.ttf -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Regular.woff -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/fontawesome/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/fontawesome/FontAwesome.otf -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/roboto/Roboto-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/roboto/Roboto-Regular.woff2 -------------------------------------------------------------------------------- /themes/indigo/layout/_partial/post/date.ejs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/fontawesome/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/fontawesome/fontawesome-webfont.eot -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/fontawesome/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/fontawesome/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/fontawesome/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/fontawesome/fontawesome-webfont.woff -------------------------------------------------------------------------------- /themes/indigo/source/css/fonts/fontawesome/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yibuyisheng/blogs/HEAD/themes/indigo/source/css/fonts/fontawesome/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /themes/indigo/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 | <% } %> -------------------------------------------------------------------------------- /site/demos/border-radius.html: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | -------------------------------------------------------------------------------- /source/demos/border-radius.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 13 | 14 |
15 | -------------------------------------------------------------------------------- /themes/indigo/layout/_partial/post/tags.ejs: -------------------------------------------------------------------------------- 1 |
2 |

<%= theme.tags.title%>

3 | <%- list_tags({ 4 | transform: function (t,s,d) { 5 | return '#' + t; 6 | } 7 | }) %> 8 |
9 | -------------------------------------------------------------------------------- /demos/border-image.html: -------------------------------------------------------------------------------- 1 | 11 | 12 |
-------------------------------------------------------------------------------- /site/demos/border-image.html: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 | -------------------------------------------------------------------------------- /themes/indigo/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 | <% } %> 11 | -------------------------------------------------------------------------------- /source/demos/border-image.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 14 | 15 |
16 | -------------------------------------------------------------------------------- /demos/-webkit-border-image.html: -------------------------------------------------------------------------------- 1 | 12 | 13 |
-------------------------------------------------------------------------------- /site/demos/-webkit-border-image.html: -------------------------------------------------------------------------------- 1 | 12 | 13 |
14 | -------------------------------------------------------------------------------- /demos/重复渐变.html: -------------------------------------------------------------------------------- 1 | 13 |
14 |
15 | -------------------------------------------------------------------------------- /source/demos/-webkit-border-image.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 15 | 16 |
17 | -------------------------------------------------------------------------------- /source/_posts/CSS 空心字.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS 空心字 3 | date: 2015-09-02 4 | tags: 5 | - CSS 6 | --- 7 | 8 | 空心字。 9 | 10 | 11 | ### 闪烁的空心字 12 | 13 | {% iframe ../demos/空心字1.html 100% 96 %} 14 | 15 | ### 带背景渐变的空心字 16 | 17 | {% iframe ../demos/空心字2.html 100% 91 %} 18 | 19 | text-shadow 是绘制在 background 之上的，如果想要文字同时能应用 text-shadow 和 background-image ，那么就必须使用一定的技巧了，不然就会造成 text-shadow 的颜色遮住 background 的颜色。 20 | -------------------------------------------------------------------------------- /themes/indigo/layout/_partial/cnzz.ejs: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /demos/half ellipse.html: -------------------------------------------------------------------------------- 1 | 15 |
16 | 17 |
-------------------------------------------------------------------------------- /site/demos/half ellipse.html: -------------------------------------------------------------------------------- 1 | 15 |
16 | 17 |
-------------------------------------------------------------------------------- /source/demos/half ellipse.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 18 |
19 | 20 |
-------------------------------------------------------------------------------- /themes/indigo/layout/layout.ejs: -------------------------------------------------------------------------------- 1 | <%- partial('_partial/head') %> 2 | 3 | <%- partial('_partial/loading') %> 4 | 7 |
8 | <%- partial('_partial/header') %> 9 |
10 | <%- body %> 11 |
12 |
13 | <%- partial('_partial/after-footer') %> 14 | <%- partial('_partial/script') %> 15 | 16 | 17 | -------------------------------------------------------------------------------- /themes/indigo/layout/_partial/after-footer.ejs: -------------------------------------------------------------------------------- 1 |
2 | 3 | <% if(theme.share){ %> 4 | 12 | <%- partial('post/share', {className: 'global-share'}) %> 13 | <% } %> 14 | -------------------------------------------------------------------------------- /demos/空心字1.html: -------------------------------------------------------------------------------- 1 | 22 |
空心字
-------------------------------------------------------------------------------- /site/demos/空心字1.html: -------------------------------------------------------------------------------- 1 | 22 |
空心字
-------------------------------------------------------------------------------- /themes/indigo/layout/_partial/script.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | <%- js('js/main') %> 4 | 5 | <% if (theme.search){ %> 6 | <%- partial('search') %> 7 | <%- js('js/search') %> 8 | <% } %> 9 | 10 | <% if (theme.mathjax){ %> 11 | <%- partial('mathjax') %> 12 | <% } %> 13 | 14 | <% if (theme.cnzz){ %> 15 | 16 | <% } %> 17 | 18 | <%- partial('google-analytics') %> 19 | 20 | 21 | -------------------------------------------------------------------------------- /source/demos/空心字1.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 25 |
空心字
-------------------------------------------------------------------------------- /demos/marching ants borders.html: -------------------------------------------------------------------------------- 1 | 18 |
-------------------------------------------------------------------------------- /site/demos/marching ants borders.html: -------------------------------------------------------------------------------- 1 | 18 |
-------------------------------------------------------------------------------- /themes/indigo/layout/_partial/search.ejs: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 18 | -------------------------------------------------------------------------------- /demos/envelope.html: -------------------------------------------------------------------------------- 1 | 16 |
the envelope border
-------------------------------------------------------------------------------- /themes/indigo/layout/_partial/archive-post.ejs: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | <%- partial('post/title') %> 6 |
7 |
8 | 14 |
15 |
-------------------------------------------------------------------------------- /themes/indigo/layout/_partial/google-analytics.ejs: -------------------------------------------------------------------------------- 1 | <% if (theme.google_analytics){ %> 2 | 3 | 13 | 14 | <% } %> 15 | -------------------------------------------------------------------------------- /themes/indigo/source/css/_partial/loading.less: -------------------------------------------------------------------------------- 1 | #loading { 2 | position: fixed; 3 | top: 0; 4 | left: -100%; 5 | z-index: 70; 6 | width: 100%; 7 | height: 3px; 8 | background: @accentColor; 9 | &.active { 10 | -webkit-animation: loading-anim 1s ease-in-out infinite; 11 | animation: loading-anim 1s ease-in-out infinite; 12 | } 13 | } 14 | 15 | @-webkit-keyframes loading-anim { 16 | from {} 17 | to { 18 | .transform(translateX(200%)) 19 | } 20 | } 21 | @keyframes loading-anim { 22 | from {} 23 | to { 24 | .transform(translateX(200%)) 25 | } 26 | } 27 | 28 | -------------------------------------------------------------------------------- /site/demos/envelope.html: -------------------------------------------------------------------------------- 1 | 16 |
the envelope border
17 | -------------------------------------------------------------------------------- /source/demos/marching ants borders.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 21 |
-------------------------------------------------------------------------------- /themes/indigo/layout/_partial/post/title.ejs: -------------------------------------------------------------------------------- 1 | <% 2 | post.title = post.title || 'No title'; 3 | %> 4 | 5 | <% if (post.link){ %> 6 |

7 | 8 |

9 | <% } else if (post.title){ %> 10 | <% if (index){ %> 11 |

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

14 | <% } else { %> 15 |

16 | <%= post.title %> 17 |

18 | <% } %> 19 | <% } %> 20 | 21 | -------------------------------------------------------------------------------- /themes/indigo/source/css/_partial/gotop.less: -------------------------------------------------------------------------------- 1 | #gotop { 2 | position: fixed; 3 | right: 16px; 4 | bottom: 30px; 5 | z-index: 30; 6 | width: 56px; 7 | height: 56px; 8 | line-height: 56px; 9 | text-align: center; 10 | color: #fff; 11 | background: @accentColor; 12 | border-radius: 50%; 13 | opacity: 0; 14 | .boxShadow(); 15 | .transform(translateX(200%)); 16 | 17 | &.in { 18 | opacity: 1; 19 | .transform(none); 20 | } 21 | 22 | } 23 | 24 | @media screen and (max-width:760px) { 25 | #gotop { 26 | width: 40px; 27 | height: 40px; 28 | line-height: 40px; 29 | } 30 | 31 | } -------------------------------------------------------------------------------- /source/demos/envelope.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 19 |
the envelope border
20 | -------------------------------------------------------------------------------- /demos/空心字2.html: -------------------------------------------------------------------------------- 1 | 21 |
BARCITO
-------------------------------------------------------------------------------- /demos/linear-gradient.html: -------------------------------------------------------------------------------- 1 | 23 |
24 |
25 |
26 |
27 | -------------------------------------------------------------------------------- /site/demos/空心字2.html: -------------------------------------------------------------------------------- 1 | 21 |
BARCITO
-------------------------------------------------------------------------------- /source/demos/空心字2.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 24 |
BARCITO
-------------------------------------------------------------------------------- /themes/indigo/layout/_partial/mathjax.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 19 | 20 | 22 | -------------------------------------------------------------------------------- /source/_posts/如何展示表单控件.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 如何展示表单控件 3 | date: 2016-12-15 22:34 4 | tags: 5 | - CSS 6 | --- 7 | 8 | 在 Web 开发中，经常需要展示左右结构的表单。如下所示： 9 | 10 | ![](../images/2016-12-15/form.png) 11 | 12 | 面对这张图，最先想到的实现方式就是借助浮动： 13 | 14 | {% iframe ../demos/2016-12-15/form1.html 100% 250 %} 15 | 16 | 基本的结构就这样，看起来挺好的。 17 | 18 | 但是有一个忧伤的地方，左侧`form-key`部分的宽度太烦人，不同的表单`form-key`部分存在宽度差异，很难统一。如果把`form-key`部分统一设置成一个比较大的值，那么在`form-key`比较短的表单里面会非常难看。这样一来，只能选择不同的表单设置不同的`form-key`的宽度值，很烦人。 19 | 20 | **如何让左侧的宽度自适应呢？** 21 | 22 | 从一位前端牛人学习到如下利用`table`布局的写法： 23 | 24 | {% iframe ../demos/2016-12-15/form2.html 100% 250 %} 25 | 26 | 此处`form-operations`部分有点小问题，`form-operations`是一个`table-row`，所以直接子元素应该是`table-cell`，改一改就好了。 27 | 28 | 同时也因为这个手误，发现在 IE9 中，鼠标 hover 到`table-row`上面去之后，会触发下面第一个`button`的 hover 效果。 29 | -------------------------------------------------------------------------------- /themes/indigo/layout/_partial/post/duoshuo.ejs: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 6 | 17 | 18 |
19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hexo-site", 3 | "version": "0.0.0", 4 | "private": true, 5 | "hexo": { 6 | "version": "3.2.2" 7 | }, 8 | "dependencies": { 9 | "hexo": "^3.1.1", 10 | "hexo-generator-archive": "^0.1.4", 11 | "hexo-generator-category": "^0.1.3", 12 | "hexo-generator-feed": "^1.1.0", 13 | "hexo-generator-index": "^0.2.0", 14 | "hexo-generator-json-content": "^2.1.3", 15 | "hexo-generator-tag": "^0.2.0", 16 | "hexo-renderer-ejs": "^0.1.1", 17 | "hexo-renderer-less": "^0.1.3", 18 | "hexo-renderer-marked": "^0.2.9", 19 | "hexo-renderer-stylus": "^0.3.0", 20 | "hexo-server": "^0.1.3" 21 | }, 22 | "scripts": { 23 | "dev": "hexo server --config config.yml", 24 | "build": "hexo generate -f --config config.yml" 25 | }, 26 | "devDependencies": { 27 | "hexo-cli": "^1.0.2" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /source/_posts/CSS border-radius.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS border-radius 3 | date: 2015-08-27 4 | tags: 5 | - CSS 6 | --- 7 | 8 | `border-radius` 的取值： 9 | 10 | 11 | > [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? 12 | 13 | {% iframe ../demos/border-radius.html 100% 116 %} 14 | 15 | 上述示例的 CSS 代码为： 16 | 17 | border-radius 是可以通过`/`的形式来对某一个角设置一个椭圆弧的。 18 | 19 | 比如示例中的 `20px/5px` 的含义是：对于左上角的圆弧，圆心到上边框的距离是5px，到左边框的距离是20px；对于右上角的圆弧，圆心到上边框的距离是5px，到右边框的距离是20px；对于右下角的圆弧，圆心到下边框的距离是5px，到右边框的距离是20px；对于左下角的圆弧，圆心到下边框的距离是5px，到左边框的距离是20px。 20 | 21 | 如果 border-radius 的半径小于或等于元素的边框厚度时，边框内角就会变成直角效果。 22 | 23 | 对 img 元素运用 border-radius ， webkit 内核不能使图片边角出现圆角的效果，可以使用背景图片的方式来修正这个问题。 24 | 25 | 当表格样式属性 border-collapse 是 collapse 时，对表格使用 border-radius 圆角效果，表格将不会展现出圆角效果，只有 border-collapse 为 separate 的时候，圆角才能正常展示。 26 | 27 | border-radius 可以做的效果：圆形、半圆、扇形、椭圆。 28 | 29 | {% iframe ../demos/half%20ellipse.html 100% 116 %} 30 | -------------------------------------------------------------------------------- /themes/indigo/layout/_partial/post/nav.ejs: -------------------------------------------------------------------------------- 1 | <% if (post.prev || post.next){ %> 2 | 25 | <% } %> 26 | -------------------------------------------------------------------------------- /source/_posts/CSS border-image.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS border-image 3 | date: 2015-08-27 4 | tags: 5 | - CSS 6 | --- 7 | 8 | {% iframe ../demos/border-image.html 100% 336 %} 9 | 10 | 上面示例的 css 代码为： 11 | 12 | 13 | ```css 14 | .demo1 { 15 | display: inline-block; 16 | width: 400px; 17 | height: 200px; 18 | 19 | border-width: 60px 70px; 20 | border-image: url(../images/8.jpg) 60 70 round stretch; 21 | } 22 | ``` 23 | 24 | CSS 中的 border-image 可以给边框设置图片背景，其参数主要分为三部分： 25 | 26 | * 1、图片来源。即示例中的 `url(../images/8.jpg)` ； 27 | * 2、图片裁剪尺寸。即示例中的 `60 70`。裁剪尺寸遵循 `top-right-bottom-left` 规则，其数值可以是百分数，也可以是像素值。如果是像素值，则不能带单位，直接写数值就好了，示例中`60 70`的含义为：对图片实施裁剪，图片上部和下部分别裁掉60px，左部和右部分别裁掉70px，于是图片就形成9块，四个边角块是无法运用round（平铺）等效果的，中间那一块是没用的。如果为百分数，则是根据图片的尺寸来计算出相应的像素值的； 28 | * 3、图片可运用效果区域的展示效果。取值为 [round|repeat|stretch] 。正如2中所述，图片会被裁剪成9块，而这个展示效果只能运用于上、右、下、左的中间那一块。 29 | 30 | `-webkit-border-image` 是有 bug 的，它会用裁剪后的9块图片的中间那一张覆盖掉背景。如下所示： 31 | 32 | {% iframe ../demos/-webkit-border-image.html 100% 336 %} 33 | -------------------------------------------------------------------------------- /demos/loader.html: -------------------------------------------------------------------------------- 1 | 36 |
-------------------------------------------------------------------------------- /themes/indigo/README.md: -------------------------------------------------------------------------------- 1 | hexo-theme-material-indigo 2 | ================ 3 | 4 | Material Design 风格的Hexo主题，基于 Hexo 3.0+ 制作。预览 [我的博客](http://www.imys.net/) 5 | 6 | ## 特色 7 | 8 | 1. 仅支持 IE10+ 等现代浏览器。 9 | 2. 去 jQuery，更轻。相信现代浏览器的原生兼容性。 10 | 3. 去 fancybox。没了 jQuery, 这个自然也失效了。 11 | 4. 使用 Less 作为 css 预处理器，需要安装 `hexo-renderer-less`。 12 | 5. 添加了英文字体支持 Roboto。 13 | 6. 添加了一些波纹效果。By [Waves](https://github.com/fians/Waves) 14 | 7. 分享直接使用了 JiaThis API 接口，免去了一次加载请求。 15 | 8. 基于静态数据的站内搜索，无第三方侵入。 16 | 17 | ## 使用 18 | 19 | [Document](https://github.com/yscoder/hexo-theme-indigo/wiki) 20 | 21 | 22 | ## 截图 23 | 24 | ### PC 25 | 26 | ![indigo-pc](https://github.com/yscoder/hexo-theme-indigo/raw/master/screenshots/hexo-theme-pc.png) 27 | 28 | ### Pad 29 | 30 | ![indigo-pad](https://github.com/yscoder/hexo-theme-indigo/raw/master/screenshots/hexo-theme-pad.png) 31 | 32 | ### Phone 33 | 34 | ![indigo-phone-1](https://github.com/yscoder/hexo-theme-indigo/raw/master/screenshots/hexo-theme-phone-1.png) 35 | ![indigo-phone-2](https://github.com/yscoder/hexo-theme-indigo/raw/master/screenshots/hexo-theme-phone-2.png) 36 | 37 | -------------------------------------------------------------------------------- /themes/indigo/layout/_partial/post/comment.ejs: -------------------------------------------------------------------------------- 1 | <% if (!index && theme.duoshuo && post.comments){ %> 2 | <%- partial('duoshuo', { 3 | key: post.slug, 4 | title: post.title, 5 | url: url 6 | }) %> 7 | <% } %> 8 | 9 | <% if (!index && post.comments && config.disqus_shortname){ %> 10 |
11 |
12 | 23 | 24 |
25 | <% } %> 26 | -------------------------------------------------------------------------------- /demos/css skew.html: -------------------------------------------------------------------------------- 1 | 48 | 49 |
50 |
skewX(45deg)
51 |
52 |
53 |
skewY(45deg)
54 |
55 |
56 |
-------------------------------------------------------------------------------- /site/demos/css skew.html: -------------------------------------------------------------------------------- 1 | 48 | 49 |
50 |
skewX(45deg)
51 |
52 |
53 |
skewY(45deg)
54 |
55 |
56 |
-------------------------------------------------------------------------------- /source/demos/css skew.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 51 | 52 |
53 |
skewX(45deg)
54 |
55 |
56 |
skewY(45deg)
57 |
58 |
59 |
-------------------------------------------------------------------------------- /themes/indigo/source/css/_partial/tags.less: -------------------------------------------------------------------------------- 1 | .tags-wrap { 2 | } 3 | 4 | .tags-title { 5 | text-align: center; 6 | margin-bottom: 24px; 7 | } 8 | 9 | .tag-list { 10 | width: 720px; 11 | margin: 0 auto; 12 | list-style: none; 13 | padding: 0; 14 | } 15 | 16 | .tag-list-item { 17 | position: relative; 18 | display: inline-block; 19 | margin: 0 20px 16px 0; 20 | white-space: nowrap; 21 | padding: 4px 0; 22 | background: @backColor; 23 | 24 | &:hover { 25 | .tag-list-link { 26 | color: @accentColor; 27 | } 28 | 29 | /* .tag-list-count { 30 | visibility: visible; 31 | top: -70%; 32 | }*/ 33 | } 34 | 35 | .hoverLine(@accentColor) 36 | } 37 | 38 | .tag-list-link { 39 | display: block; 40 | line-height: 1.2em; 41 | color: @secondaryTextColor; 42 | } 43 | 44 | .tag-list-count { 45 | position: absolute; 46 | left: 50%; 47 | top: 0; 48 | padding: 2px 6px; 49 | color: #fff; 50 | font-size: 12px; 51 | border-radius: 6px; 52 | background: rgba(0, 0, 0, .8); 53 | transform: translateX(-50%); 54 | visibility: hidden; 55 | .transition(.4s); 56 | } 57 | 58 | @media screen and (max-width:760px) { 59 | .tag-list { 60 | width: 100%; 61 | } 62 | 63 | } -------------------------------------------------------------------------------- /themes/indigo/layout/_partial/post/share.ejs: -------------------------------------------------------------------------------- 1 |
2 |
分享到：
3 | 35 |
36 | -------------------------------------------------------------------------------- /source/_posts/CSS 语法速查.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS 语法速查 3 | date: 2015-09-03 19:06 4 | tags: 5 | - CSS 6 | --- 7 | 8 | 9 | ### [background](http://www.w3.org/TR/css3-background/) 10 | 11 | ``` 12 | [ , ]* 13 | 14 | = || [ / ]? || || || || 15 | = || [ / ]? || || || || || <'background-color'> 16 | 17 | = | none 18 | ``` 19 | 20 | [<image>](http://www.w3.org/TR/css3-background/#ltimagegt) 21 | [<position>](http://www.w3.org/TR/css3-background/#ltpositiongt) 22 | [<bg-size>](http://www.w3.org/TR/css3-background/#ltbg-sizegt) 23 | [<repeat-style>](http://www.w3.org/TR/css3-background/#ltrepeat-stylegt) 24 | [<attachment>](http://www.w3.org/TR/css3-background/#ltattachmentgt) 25 | [<box>](http://www.w3.org/TR/css3-background/#ltboxgt) 26 | 27 | ### [radial-gradient()](http://www.w3.org/TR/2012/CR-css3-images-20120417/#radial-gradients) 28 | 29 | ``` 30 | = radial-gradient( 31 | [ [ || ] [ at ]? , | 32 | at , 33 | ]? 34 | [ , ]+ 35 | ) 36 | 37 | = circle || ellipse 38 | ``` 39 | -------------------------------------------------------------------------------- /themes/indigo/layout/_partial/menu.ejs: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 |
6 |
7 | 8 |
9 |
<%- config.author %>
10 | <%- mail_to(config.email, theme.email, {class: 'mail'}) %> 11 |
12 |
13 |
14 |
    15 | <% 16 | var menuItem, isActive = function(item) { 17 | return (path === 'index.html' && item === 'home') || (is_archive() && item === 'archives') || ( (is_tag() || page.type === 'tags') && item === 'tags'); 18 | }; 19 | for (var i in theme.menu) { 20 | menuItem = theme.menu[i]; 21 | %> 22 |
  • 23 | target="_blank"<% } %> > 24 | 25 | <%=(menuItem.text || _.startCase(i)) %> 26 | 27 |
    • 28 | <% } %> 29 |
30 | 31 | <%- partial('footer') %> 32 |
33 | -------------------------------------------------------------------------------- /demos/transform-origin.html: -------------------------------------------------------------------------------- 1 | 2 | 25 | 26 |
27 |
示例1
28 |
29 |
30 |
31 | 32 | 55 | 56 |
57 |
示例2
58 |
59 |
60 |
-------------------------------------------------------------------------------- /site/demos/transform-origin.html: -------------------------------------------------------------------------------- 1 | 2 | 25 | 26 |
27 |
示例1
28 |
29 |
30 |
31 | 32 | 55 | 56 |
57 |
示例2
58 |
59 |
60 |
-------------------------------------------------------------------------------- /themes/indigo/source/css/_partial/archives.less: -------------------------------------------------------------------------------- 1 | .archive-year-wrap { 2 | width: 80px; 3 | font-size: 18px; 4 | } 5 | 6 | .archive-year { 7 | display: block; 8 | width: 56px; 9 | height: 56px; 10 | line-height: 56px; 11 | text-align: center; 12 | border-radius: 50%; 13 | color: #fff !important; 14 | background: @primaryColor; 15 | box-shadow: @boxShadow; 16 | } 17 | 18 | .archives { 19 | padding-left: 30px; 20 | border-left: 3px solid @borderColor; 21 | } 22 | 23 | .archive-article { 24 | position: relative; 25 | margin: 20px 0; 26 | background: #fff; 27 | border-radius: 2px; 28 | box-shadow: @boxShadow; 29 | 30 | &:before { 31 | position: absolute; 32 | top: 0; 33 | left: -2.5em; 34 | content: ''; 35 | width: 12px; 36 | height: 12px; 37 | border: 2px solid @borderColor; 38 | background: @lightPrimaryColor; 39 | border-radius: 50%; 40 | } 41 | 42 | .archive-article-header { 43 | padding: 16px 20px; 44 | } 45 | 46 | .post-tiem { 47 | color: @secondaryTextColor; 48 | margin-right: 1em; 49 | } 50 | 51 | .post-title, 52 | .article-tag-list { 53 | margin: 0; 54 | } 55 | 56 | } 57 | 58 | .archive-article-footer { 59 | border-top: 1px solid #dadada; 60 | color: #727272; 61 | font-size: 13px; 62 | padding: 16px 20px; 63 | } 64 | -------------------------------------------------------------------------------- /source/demos/transform-origin.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 5 | 28 | 29 |
30 |
示例1
31 |
32 |
33 |
34 | 35 | 58 | 59 |
60 |
示例2
61 |
62 |
63 |
-------------------------------------------------------------------------------- /themes/indigo/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 %> | <%= config.subtitle %> 23 | 24 | <% 25 | var keyWords = config.keywords; 26 | if(page.tags){ 27 | keyWords = []; 28 | 29 | _.isArray(page.tags) ? ( keyWords = page.tags ) 30 | : page.tags.each(function(k){ 31 | keyWords.push(k.name); 32 | }); 33 | } 34 | %> 35 | 36 | <%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %> 37 | <% if (theme.rss){ %> 38 | 39 | <% } %> 40 | 41 | <%- favicon_tag(theme.favicon) %> 42 | <%- css('css/style') %> 43 | 44 | -------------------------------------------------------------------------------- /themes/indigo/_config.yml: -------------------------------------------------------------------------------- 1 | # 添加新菜单项遵循以下规则 2 | # menu: 3 | # link: fontawesome图标，省略前缀，本主题前缀为 icon-，必须 4 | # text: About 菜单显示的文字，如果省略即默认与图标一致，首字母会转大写 5 | # url: /about 链接，绝对或相对路径，必须。 6 | # target: _blank 是否跳出，省略则在当前页面打开 7 | menu: 8 | home: 9 | text: 主页 10 | url: / 11 | archives: 12 | text: 归档 13 | url: /archives 14 | github: 15 | text: GitHub 16 | url: https://github.com/yibuyisheng 17 | target: _blank 18 | link: 19 | text: 知乎 20 | url: https://www.zhihu.com/people/yibuyisheng 21 | target: _blank 22 | weibo: 23 | text: 微博 24 | url: http://weibo.com/2674779523 25 | target: _blank 26 | 27 | rss: /atom.xml 28 | 29 | #你的头像url 30 | avatar: https://avatars3.githubusercontent.com/u/2581682?v=3&s=460 31 | 32 | # email 33 | email: yibuyisheng@163.com 34 | 35 | # Content 36 | tags: 37 | title: 标签 38 | 39 | excerpt_link: more 40 | mathjax: false 41 | archive_yearly: true 42 | 43 | #是否开启分享 44 | share: false 45 | 46 | #是否开启搜索 47 | search: false 48 | 49 | #是否大屏幕下文章页隐藏导航 50 | hideMenu: true 51 | 52 | #是否开启toc 53 | #toc: false 54 | toc: 55 | list_number: false # 是否显示数字排序 56 | 57 | #站长统计，如要开启，输入CNZZ站点id，如 cnzz: 1255152447 58 | cnzz: false 59 | 60 | # Miscellaneous 61 | google_analytics: '' 62 | favicon: /favicon.ico 63 | 64 | # less 65 | less: 66 | paths: 67 | - source/css/style.less 68 | 69 | #是否开启多说评论，填写你在多说申请的项目名称 duoshuo: duoshuo-key 70 | #若使用disqus，请在博客config文件中填写disqus_shortname，并关闭多说评论 71 | duoshuo: yibuyishengblogs 72 | -------------------------------------------------------------------------------- /source/_posts/CSS 变形.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS 变形 3 | date: 2015-09-01 4 | tags: 5 | - CSS 6 | --- 7 | 8 | ## 2D 9 | 10 | 2D 常用的变形函数： tranlate() 、 scale() 、 rotate() 、 skew() 、 matrix() 。 11 | 12 | 13 | ### skew() 函数 14 | 15 | 示例： 16 | 17 | {% iframe ../demos/css%20skew.html 100% 320 %} 18 | 19 | 下图描述了`skew(30deg, 10deg)`的工作原理： 20 | 21 | ![](../images/10.jpg) 22 | 23 | > **注：**上图来自 [http://dtop.powereasy.net/Item/3715.aspx](http://dtop.powereasy.net/Item/3715.aspx) 。 24 | 25 | ### transform-origin 26 | 27 | transform-origin 用来指定元素变形的中心点位置，默认就是元素的中心点。 28 | 29 | 但是，对于位移 translate() 函数来说，无论 transform-origin 如何改变，都是以元素中心点为基准进行位移，例如： 30 | 31 | {% iframe ../demos/transform-origin.html 100% 440 %} 32 | 33 | `示例1`和`示例2`中的虚线框是元素的原始位置，实线框是位移之后的位置。`示例1`的 transform-origin 是`50% 50%`，而`示例2`是`100% 100%`，但是从最终偏移效果来看，两者的结果是一样的，所以 tranform-origin 对 translate() 函数并没有影响。 34 | 35 | ## 3D 36 | 37 | 3D 常用变形函数： translate3d() 、 translate() 、 scale3d() 、 scaleZ() 、 rotate3d() 、 rotateX() 、 rotateY() 、 rotateZ() 、 perspective() 、 matrix3d() 。 38 | 39 | ### transform-style 40 | 41 | transform-style 的取值为 `flat` 或者 `preserve-3d` 。下面的例子展示了两者的差别： 42 | 43 | {% iframe ../demos/transform-style.html 100% 416 %} 44 | 45 | 从示例中可以看出， `preserve-3d` 会让子元素在父元素变形的基础上继续变形，而 `flat` 则会消除父元素变形对子元素变形带来的影响。 46 | 47 | __理解：__ 48 | 49 | 对于第一种 `div.container1` 元素的 transform-style 为 `flat` 的情形，表明其所有子元素在 2D 空间中呈现，于是相对于 2D 平面（就可以理解为显示器的那个平面）做变形；对于第二种 `div.container1` 元素的 transform-style 为 `preserve-3d` 的情形，表明其所有子元素在 3D 空间中呈现，于是相对于当前 `div.container1` 为基准的平面做变形。 50 | -------------------------------------------------------------------------------- /themes/indigo/layout/_partial/archive.ejs: -------------------------------------------------------------------------------- 1 | <% if (pagination == 2){ %> 2 |
    3 | <% page.posts.each(function(post){ %> 4 |
  • <%- partial('article', {post: post, index: true}) %>
    • 5 | <% }) %> 6 |
7 | <% if (page.total > 1){ %> 8 | 16 | <% } %> 17 | <% } else { %> 18 | <% var last; %> 19 | <% page.posts.each(function(post, i){ %> 20 | <% var year = post.date.year(); %> 21 | <% if (last != year){ %> 22 | <% if (last != null){ %> 23 | 24 | <% } %> 25 | <% last = year; %> 26 |
27 |
28 | <%= year %> 29 |
30 |
31 | <% } %> 32 | <%- partial('archive-post', {post: post, even: i % 2 == 0}) %> 33 | <% }) %> 34 | <% if (page.posts.length){ %> 35 |
36 |
37 | <% } %> 38 | <% if (page.total > 1){ %> 39 | 47 | <% } %> 48 | <% } %> 49 | -------------------------------------------------------------------------------- /themes/indigo/layout/_partial/header.ejs: -------------------------------------------------------------------------------- 1 | 25 |
26 |
27 |

<%=page.title || config.title %>

28 |
<%=(page.date && !page.noDate ? date(page.date, config.date_format) : config.subtitle) %>
29 |
30 |
31 | -------------------------------------------------------------------------------- /site/demos/2016-12-15/form2.html: -------------------------------------------------------------------------------- 1 | 27 | 28 |
29 |
30 |
31 |
用户名
32 |
33 |
34 |
35 |
手机号
36 |
37 |
38 |
39 |
验证码
40 |
41 |
42 |
43 |
密码
44 |
45 |
46 |
47 |
48 |
阅读并接受《百度用户协议》
49 |
50 |
51 | 52 |
53 |
54 |
55 | -------------------------------------------------------------------------------- /demos/radial-gradient.html: -------------------------------------------------------------------------------- 1 | 44 | 45 |
46 |
47 |
48 |
49 |
50 | -------------------------------------------------------------------------------- /site/demos/2016-12-15/form1.html: -------------------------------------------------------------------------------- 1 | 29 | 30 |
31 |
32 |
33 |
用户名
34 |
35 |
36 |
37 |
手机号
38 |
39 |
40 |
41 |
验证码
42 |
43 |
44 |
45 |
密码
46 |
47 |
48 |
49 |
50 |
阅读并接受《百度用户协议》
51 |
52 |
53 | 54 |
55 |
56 |
57 | -------------------------------------------------------------------------------- /source/demos/2016-12-15/form2.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 30 | 31 |
32 |
33 |
34 |
用户名
35 |
36 |
37 |
38 |
手机号
39 |
40 |
41 |
42 |
验证码
43 |
44 |
45 |
46 |
密码
47 |
48 |
49 |
50 |
51 |
阅读并接受《百度用户协议》
52 |
53 |
54 | 55 |
56 |
57 |
58 | -------------------------------------------------------------------------------- /source/demos/2016-12-15/form1.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 32 | 33 |
34 |
35 |
36 |
用户名
37 |
38 |
39 |
40 |
手机号
41 |
42 |
43 |
44 |
验证码
45 |
46 |
47 |
48 |
密码
49 |
50 |
51 |
52 |
53 |
阅读并接受《百度用户协议》
54 |
55 |
56 | 57 |
58 |
59 |
60 | -------------------------------------------------------------------------------- /themes/indigo/source/css/_partial/roboto.less: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Roboto"; 3 | src: local('Roboto Thin'), local('Roboto-Thin'), url("@{font-roboto}/Roboto-Thin.woff2") format("woff2"), 4 | url("@{font-roboto}/Roboto-Thin.woff") format("woff"), 5 | url("@{font-roboto}/Roboto-Thin.ttf") format("truetype"); 6 | 7 | font-weight: 200; 8 | } 9 | @font-face { 10 | font-family: "Roboto"; 11 | src: local('Roboto Light'), local('Roboto-Light'), url("@{font-roboto}/Roboto-Light.woff2") format("woff2"), 12 | url("@{font-roboto}/Roboto-Light.woff") format("woff"), 13 | url("@{font-roboto}/Roboto-Light.ttf") format("truetype"); 14 | font-weight: 300; 15 | } 16 | 17 | @font-face { 18 | font-family: "Roboto"; 19 | src: local('Roboto Regular'), local('Roboto-Regular'), url("@{font-roboto}/Roboto-Regular.woff2") format("woff2"), 20 | url("@{font-roboto}/Roboto-Regular.woff") format("woff"), 21 | url("@{font-roboto}/Roboto-Regular.ttf") format("truetype"); 22 | font-weight: 400; 23 | } 24 | 25 | @font-face { 26 | font-family: "Roboto"; 27 | src: local('Roboto Medium'), local('Roboto-Medium'), url("@{font-roboto}/Roboto-Medium.woff2") format("woff2"), 28 | url("@{font-roboto}/Roboto-Medium.woff") format("woff"), 29 | url("@{font-roboto}/Roboto-Medium.ttf") format("truetype"); 30 | font-weight: 500; 31 | } 32 | 33 | @font-face { 34 | font-family: "Roboto"; 35 | src: local('Roboto Bold'), local('Roboto-Bold'), url("@{font-roboto}/Roboto-Bold.woff2") format("woff2"), 36 | url("@{font-roboto}/Roboto-Bold.woff") format("woff"), 37 | url("@{font-roboto}/Roboto-Bold.ttf") format("truetype"); 38 | font-weight: 700; 39 | } 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | * [oracle安装](http://yibuyisheng.github.io/blogs/site/blogs/oracle安装.html) 3 | * [使用marked解析markdown](http://yibuyisheng.github.io/blogs/site/blogs/使用marked解析markdown.html) 4 | * [实现第一个 vscode 扩展](http://yibuyisheng.github.io/blogs/site/blogs/实现第一个 vscode 扩展.html) 5 | * [爬虫与编码](http://yibuyisheng.github.io/blogs/site/blogs/爬虫与编码.html) 6 | * [ES6 简单特性概览](http://yibuyisheng.github.io/blogs/site/blogs/ES6 简单特性概览.html) 7 | * [一个 JavaScript](http://yibuyisheng.github.io/blogs/site/blogs/一个 JavaScript.html) 8 | * [CSS 语法速查](http://yibuyisheng.github.io/blogs/site/blogs/CSS 语法速查.html) 9 | * [CSS 空心字](http://yibuyisheng.github.io/blogs/site/blogs/CSS 空心字.html) 10 | * [CSS 变形](http://yibuyisheng.github.io/blogs/site/blogs/CSS 变形.html) 11 | * [CSS border-radius](http://yibuyisheng.github.io/blogs/site/blogs/CSS border-radius.html) 12 | * [CSS border-image](http://yibuyisheng.github.io/blogs/site/blogs/CSS border-image.html) 13 | * [使用 CSS background 构造一个棋盘](http://yibuyisheng.github.io/blogs/site/blogs/使用 CSS background 构造一个棋盘.html) 14 | * [生成器（ generator ）](http://yibuyisheng.github.io/blogs/site/blogs/生成器（ generator ）.html) 15 | * [百度 EFE 前端框架学习笔记（esui）](http://yibuyisheng.github.io/blogs/site/blogs/百度 EFE 前端框架学习笔记（esui）.html) 16 | * [百度 EFE 前端框架学习笔记（ef）](http://yibuyisheng.github.io/blogs/site/blogs/百度 EFE 前端框架学习笔记（ef）.html) 17 | * [百度 EFE 前端框架学习笔记（er）](http://yibuyisheng.github.io/blogs/site/blogs/百度 EFE 前端框架学习笔记（er）.html) 18 | * [Reflux 使用进化日记](http://yibuyisheng.github.io/blogs/site/blogs/Reflux 使用进化日记.html) 19 | * [记一次坑爹的对接经历](http://yibuyisheng.github.io/blogs/site/blogs/记一次坑爹的对接经历.html) 20 | * [一些 core javascript 的基础知识](http://yibuyisheng.github.io/blogs/site/blogs/一些 core javascript 的基础知识.html) 21 | * [web 前端外部点击事件的实现](http://yibuyisheng.github.io/blogs/site/blogs/web 前端外部点击事件的实现.html) 22 | 23 | 24 | -------------------------------------------------------------------------------- /source/_posts/百度 EFE 前端框架学习笔记（ef）.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 百度（EFE）前端框架学习笔记（ef） 3 | date: 2015-06-01 4 | tags: 5 | - JavaScript 6 | --- 7 | 8 | 官方 EF 学习资料：[ActionPanel](https://github.com/ecomfe/ef/blob/master/doc/ActionPanel.md)、[UIModel](https://github.com/ecomfe/ef/blob/master/doc/UIModel.md)、[UIView](https://github.com/ecomfe/ef/blob/master/doc/UIView.md)。 9 | 10 | 11 | ### UIView.js 12 | 13 | 与 ESUI 结合的 `View` 基类。该类有一个主入口方法 enterDocument()，该函数在容器渲染完毕后触发，用于控制元素可见性及绑定事件等 DOM 操作。 14 | 15 | 是 ESUI 中 View 类的子类。 16 | 17 | 该类对应的实例上会有一个视图上下文对象（ view.viewContext ），此上下文对象会传递给每个子控件，也就是说每个子控件都会有一个 viewContext 属性。此上下文对象的详细信息参看[百度 EFE 前端框架学习笔记（esui）](https://github.com/yibuyisheng/blogs/issues/4)的 `ViewContext.js` 部分。 18 | 19 | enterDocument() 方法会调用 ESUI 的 main.init() 方法，初始化当前 UIView 实例所管辖的 container 部分，生成各种各样的控件等等。 20 | 21 | 此类生成的实例上有一个很重要的事件属性 uiView.uiEvents，该属性有2种方式： 22 | 23 | * 以 `id:eventName` 为键，以处理函数为值，比如 `{'someId:click': function() {/* do something */}}`。 24 | * 以 `id` 为键，值为一个对象，对象中以 `eventName` 为键，处理函数为值，比如 `{someId: {eventName: function() {/* do something */}}}`。 25 | 26 | 在此处声明的事件，运行时的 `this` 对象均是 `View` 实例，而非控件的实例。同时，在运行期，`UIView` 会克隆该属性，将其中所有的处理函数都进行一次 `bind`，将 `this` 指向自身，因此运行时的 `uiEvents` 与类声明时的不会相同。 27 | 28 | 此类上的 bindEvents() 方法就会根据 uiEvents 指定的事件配置来给子控件绑定事件。 29 | 30 | ### UIModel.js 31 | 32 | 处理 ESUI 场景的 `Model` 实现。 UIModel 继承自 er 的 Model。 33 | 34 | UIModel 添加了 formatter 属性，用于对日期进行格式化。同时增加了一些操作数据的方法：set() 、 fill() 、 getPart()。 35 | 36 | ### ActionPanel.js 37 | 38 | 用于加载子Action的面板控件。继承自 esui 的 Panel 类，不过没有 setContent() 方法。 39 | 40 | ### 小技巧 41 | 42 | ```js 43 | function getControl(node) { 44 | var controls = require('er/controller').currentAction.view.viewContext.getControls(); 45 | for (var k in controls) { 46 | var control = controls[k]; 47 | if (control.main === node) { 48 | return control; 49 | } 50 | } 51 | } 52 | ``` 53 | 54 | 该函数可以根据节点找到这个节点对应的控件对象，对debug有一定帮助。 55 | -------------------------------------------------------------------------------- /demos/css background.html: -------------------------------------------------------------------------------- 1 | 30 |
31 | 56 |
-------------------------------------------------------------------------------- /site/demos/css background.html: -------------------------------------------------------------------------------- 1 | 30 |
31 | 56 |
57 | -------------------------------------------------------------------------------- /themes/indigo/source/css/_partial/header.less: -------------------------------------------------------------------------------- 1 | .header { 2 | position: fixed; 3 | left: 0; 4 | top: 0; 5 | width: 100%; 6 | color: @textPrimaryColor; 7 | height: @headerH; 8 | background: @primaryColor; 9 | -webkit-transition: padding-left .6s ease-in-out, background-color .3s cubic-bezier(.4, 0, .2, 1), box-shadow .15s linear; 10 | transition: padding-left .6s ease-in-out, background-color .3s cubic-bezier(.4, 0, .2, 1), box-shadow .15s linear; 11 | z-index: 30; 12 | 13 | &.fixed { 14 | box-shadow: @boxShadow; 15 | background: fadeout(@primaryColor, 20%); 16 | 17 | .header-title { 18 | visibility: visible; 19 | } 20 | 21 | } 22 | 23 | } 24 | 25 | .header-icon { 26 | width: @headerH; 27 | height: @headerH; 28 | line-height: @headerH; 29 | text-align: center; 30 | color: @textPrimaryColor; 31 | 32 | &:hover { 33 | color: @textPrimaryColor; 34 | } 35 | 36 | } 37 | 38 | .header-title { 39 | visibility: hidden; 40 | font-weight: 400; 41 | line-height: 56px; 42 | font-size: 16px; 43 | text-align: center; 44 | white-space: nowrap; 45 | } 46 | 47 | .content-header { 48 | padding: 104px 16px 48px; 49 | color: @textPrimaryColor; 50 | background: @primaryColor; 51 | 52 | .author { 53 | } 54 | 55 | .subtitle { 56 | padding-top: 6px; 57 | color: @lightPrimaryColor; 58 | } 59 | 60 | } 61 | 62 | @media screen and (max-width:1240px) { 63 | 64 | .header-title { 65 | text-align: left; 66 | } 67 | 68 | } 69 | 70 | @media screen and (max-width:760px) { 71 | .content-header { 72 | padding: 72px 16px 20px; 73 | 74 | .author { 75 | font-size: 24px; 76 | line-height: 30px; 77 | } 78 | 79 | .subtitle { 80 | font-size: 14px; 81 | line-height: 20px 82 | } 83 | 84 | } 85 | 86 | } 87 | -------------------------------------------------------------------------------- /source/_posts/HTTP请求重发.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HTTP请求重发 3 | date: 2016-07-06 4 | tags: 5 | - HTTP 6 | --- 7 | 8 | HTTP 协议中，从语义上讲， GET 请求一般是获取服务器端的资源，不会对服务器数据造成副作用，可简单理解为一种“读”操作；而 POST 请求多用于更改（增、删、改）服务器上的资源，会产生一定的副作用。 9 | 10 | 所以，这样看起来，浏览器是不是就不会因为网络原因啥的自动重发 POST 请求吧？实际上是这样么？ 11 | 12 | 13 | # 起因 14 | 15 | 最近在对接地图的一个数据录入接口：前端向后端发送一个 CSV 文件，后端将 CSV 文件中的数据解析出来，然后将数据通过地图接口导入到地图数据库。由于地图提供的接口有点怪异，批量导入数据的接口有一些问题，只能使用单条导入接口，所以在这里， CSV 文件里面有多少条数据，就会访问多少次地图的接口。 16 | 17 | 虽然有点坑，不过问题究竟是解决了，于是就这样上线了。 18 | 19 | 天有不测风云，遇到一个客户，一下要导入上千条数据，后端这样串行地一条一条去导入，很轻易地就花了好几分钟。而且还遇到一个诡异的现象：每条数据都导入了两次！ 20 | 21 | # 分析 22 | 23 | 凭借多年的前端开发经验（不要脸了），立马大胆猜测，浏览器发送了两次请求。 24 | 25 | 于是先到谷歌开发者工具的 Network 标签页检查一下请求，发现此处只记录了一次请求，并且该请求没有响应，好像看不出来什么猫腻。再切换到 chrome://net-internals/ 中看看日志，发现一个 error code ， google 了一下，并没有什么结果，看起来也验证不了猜想。 26 | 27 | 然后再去找后端同学看看接口日志，是不是访问了两次，后端同学似乎稍微有点不太想打日志重新部署（过程比较麻烦），所以先放弃用这种方式求证。 28 | 29 | 那用啥求证呢？ Charles 吧。 30 | 31 | 在 Charles 中一看，发现发了四次请求，每次请求基本上都耗时六十多秒，每次都没有响应内容。 32 | 33 | 好了，看起来就是浏览器六十秒超时重发请求。 34 | 35 | # 深入分析 36 | 37 | 可以转念一想，这对么？ 38 | 39 | - 1、 POST 请求就这样轻易地被浏览器超时重发，难道浏览器开发者没考虑过数据重复发送的问题吗？表单 POST 请求手动刷新浏览器的时候都会弹窗提醒用户要不要重复提交数据呢！ 40 | - 2、为啥是六十秒呢？时间这么短吗？想想平时本地断点调试服务器代码的时候，那可是会超时老长时间的，所以这六十秒算个啥呢？ 41 | 42 | 搜一搜往上资料，发现 [HTTP/1.1 的一处规范](https://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html#sec8.2.4) ： 43 | 44 | > If an HTTP/1.1 client sends a request which includes a request body, but which does not include an Expect request-header field with the "100-continue" expectation, and if the client is not directly connected to an HTTP/1.1 origin server, and if the client sees the connection close before receiving any status from the server, the client SHOULD retry the request. 45 | 46 | 大致意思就是说，如果发送一个请求到服务器端，该请求有请求体，但是请求头里面不包含“ 100-continue ”这种东西，并且客户端没有直接连接到原始的 HTTP/1.1 服务器，此时，如果客户端在接收到服务器发送的 HTTP 状态之前发现服务器主动关掉连接，那么客户端应该重试请求。 47 | 48 | 那看起来好像就是服务器端主动关掉了连接，导致浏览器重新发送请求了。 49 | 50 | 我们服务器端使用的是 Tomcat ，查一查资料，发现 Tomcat 默认的 connector 超时时间是六十秒，刚好吻合上了。 51 | 52 | 问题原因找到了，解决起来就轻松了，此处不赘述。 53 | -------------------------------------------------------------------------------- /source/demos/css background.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 33 |
34 | 59 |
60 | -------------------------------------------------------------------------------- /themes/indigo/layout/_partial/article.ejs: -------------------------------------------------------------------------------- 1 | <% if(post.type == 'tags') { %> 2 | <%- partial('post/tags') %> 3 | <% } else { %> 4 |
5 | <% if(index) { %> 6 | <%- partial('post/title') %> 7 |
8 |
<%- partial('post/tag') %>
9 | <%- partial('post/date', {date_format: config.date_format}) %> 10 |
11 |
12 | <% if (post.excerpt){ %> 13 | <%- post.excerpt %> 14 | <% } else { %> 15 | <%- post.content %> 16 | <% } %> 17 |
18 |
19 | 更多 20 |
21 | <% } else { %> 22 |
23 |
<%- partial('post/tag') %>
24 |
25 |
26 | 27 | 44 | 45 |
46 | 47 |
48 | <%- post.content %> 49 |
50 | 51 | <%- partial('post/comment') %> 52 | 53 |
54 | 55 |
56 | 57 | <% } %> 58 | 59 |
60 | 61 | <% } %> 62 | -------------------------------------------------------------------------------- /source/_posts/爬虫与编码.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 爬虫与编码 3 | date: 2016-01-09 13:23 4 | --- 5 | 6 | 作为一名 web 开发人员，时不时爬爬别人家的网站还是很有趣的。 7 | 8 | 9 | 其实，爬一个网站的数据也是爬取者和被爬取者的一种攻防较量：一般情况下，被爬取者总是会想方设法地阻止爬取者爬取自家网站数据。 10 | 11 | 于是，一些网站就会采取一些措施来阻止非正常访问： 12 | 13 | * 某某关键接口只能每分钟调用若干次； 14 | * 某某 IP 访问网站太频繁，直接拒绝掉该 IP 发过来的请求。 15 | 16 | 当然，这些措施都只是治标不治本，不能从根本上杜绝自己网站数据被爬。 17 | 18 | 从爬取者的角度来看，要突破层层限制，拿到目标网站的数据，还是要做一些事情的： 19 | 20 | * 如果要爬取的目标网页需要登录才能访问到，那么可以采用 phantomjs 来简化掉 session 的处理； 21 | * 在爬取的过程中，如果发现服务器从某个时刻开始一直拒绝掉自己的请求，那么就要怀疑自己的 IP 是否被屏蔽掉了，或者某个接口是否访问太频繁了； 22 | * 对于有 IP 限制策略的网站，尽量模拟正常用户访问，频率不要太快，最好做多个节点来爬取。 23 | 24 | **等等，有点偏题了！下面进入正轨：** 25 | 26 | 在初次写爬虫代码的时候，很容易遇到解析出来的数据是乱码的问题： 27 | 28 | ![](https://github.com/yibuyisheng/blogs/blob/master/imgs/12.png?raw=true) 29 | 30 | 面对这些乱码，如何解决呢？ 31 | 32 | ### 注意 HTTP 响应的头部 33 | 34 | 留意一下 HTTP 响应的头部是否有用 gzip 压缩过： 35 | 36 | ``` 37 | Content-Encoding:gzip 38 | ``` 39 | 40 | 如果有这种字眼，那么响应正文部分就是使用 gzip 压缩过的，在拿到这种压缩过的数据之后，要先解压。 41 | 42 | Node.js 中，提供了 zlib 模块，用于处理 gzip 相关的操作。对于解压 gzip ，可以这样做： 43 | 44 | ```js 45 | // `res` 是响应对象，http.IncommingMessage 类型的 46 | 47 | var buffers = [];// 暂存 gzip 解压过后的 buffer 48 | var size = 0;// 记录整个响应体解压后的数据大小 49 | var gunzipStream = zlib.createGunzip(); 50 | res.pipe(gunzipStream); 51 | gunzipStream.on('data', function (buffer) { 52 | buffers.push(buffer); 53 | size += buffer.length; 54 | }); 55 | gunzipStream.on('error', function (error) { 56 | // 发生了错误，处理下吧！ 57 | }); 58 | gunzipStream.on('end', function () { 59 | var unzipedBuffer = Buffer.concat(buffers, size); // unzipedBuffer 就是解压过后的数据 60 | }); 61 | ``` 62 | 63 | ### 注意文本编码 64 | 65 | 拿着最终 gzip 解压出来的数据，开心的去进行后续处理，结果继续乱码，为什么会这样？ 66 | 67 | Node.js 里面默认字符串是 `utf-8` 编码的，如果 gzip 解压出来的数据不是 `utf-8` 编码的话，那么把这堆 buffer 数据转换成字符串的时候就可能产生乱码。 到目前为止，Node.js 内置支持的解码方式很有限，只能依靠一些第三方模块进行某些文本解码。 68 | 69 | 怎么办呢？ 70 | 71 | 留意一下响应头当中的 `Content-Type` 部分，如果 charset 是非 `utf-8` 的话，那就要考虑继续对数据进行解码了。 72 | 73 | 对于中文网站，可能会使用 `GBK` 或者 `GB2312` 进行编码，对于此种场景，需要用到第三方的解码工具，此处选用了 `iconv-lite` 。解码过程如下： 74 | 75 | ```js 76 | var finallyResponseText = require('iconv-lite').decode(unzipedBuffer, 'gbk'); 77 | ``` 78 | 79 | 这样，就拿到了最终想要的文本数据。 80 | -------------------------------------------------------------------------------- /source/_posts/当心，babel 处理 Symbol 的麻烦.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 当心，babel 处理 Symbol 的麻烦 3 | date: 2016-12-28 22:29 4 | tags: 5 | - JavaScript 6 | - babel 7 | --- 8 | 9 | 在使用 babel 转换 ES next 代码的时候，并不会将 Symbol 直接转换成 ES5 中对应的内容，需要引入额外的 polyfill 才能正常工作。 10 | 11 | 12 | 有的团队为了避免引入这个额外的 polyfill ，会选择不使用 Symbol ，包括通过 babel 生成 Symbol 的特性（比如 `for of` 等）。 13 | 14 | 这时候就会有个比较隐蔽的地方需要注意，就是尽量不要让 babel 生成这样的代码： 15 | 16 | ```js 17 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 18 | ``` 19 | 20 | 这个里面包含了一个 `Symbol` ，为了让 `Symbol` 不至于报错，又要想办法在全局先声明一下 `Symbol` 变量，比较丑陋。 21 | 22 | 目前在实践中，发现这样的 ES next 代码会生成上述代码： 23 | 24 | ```js 25 | function fn1() { 26 | if (1) { 27 | let a = 1; 28 | filter(function fn() { 29 | console.log(a); 30 | }); 31 | return; 32 | } 33 | } 34 | ``` 35 | 36 | 生成的代码为： 37 | 38 | ```js 39 | "use strict"; 40 | 41 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 42 | 43 | function fn1() { 44 | if (1) { 45 | var _ret = function () { 46 | var a = 1; 47 | filter(function fn() { 48 | console.log(a); 49 | }); 50 | return { 51 | v: void 0 52 | }; 53 | }(); 54 | 55 | if ((typeof _ret === "undefined" ? "undefined" : _typeof(_ret)) === "object") return _ret.v; 56 | } 57 | } 58 | ``` 59 | 60 | 这段代码有什么特征呢？就是在 `if` 块中定义了函数，函数中访问了 `if` 块中的“块级变量”，并且 `if` 块使用了 `return` 语句。 61 | 62 | 可以看出，babel 为了保证 `if` 块内变量的作用域，会套一个匿名函数，同时由于 `if` 块中存在 `return` 返回，所以就用 `_ret` 来接收匿名函数的返回值。然后后面为啥会生成那串长长的对 `_ret` 的类型判断代码，目前还不太清楚，可能要结合 babel 的内部处理逻辑去看了，单从生成的代码看，这个完全是多余的。 63 | 64 | 推而广之， `for` 块等局部非函数作用域都会有类似的问题。 65 | 66 | 实际上，从代码编写规范角度来看，是不应该在这种局部作用域块里面定义函数的。函数应该是一段通用的代码，不应该缩在那一小块里面。 67 | -------------------------------------------------------------------------------- /demos/transform-style.html: -------------------------------------------------------------------------------- 1 | 38 | 39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | 48 | 84 | 85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
-------------------------------------------------------------------------------- /site/demos/transform-style.html: -------------------------------------------------------------------------------- 1 | 38 | 39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | 48 | 84 | 85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
-------------------------------------------------------------------------------- /source/demos/transform-style.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: false 3 | --- 4 | 41 | 42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | 51 | 87 | 88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
-------------------------------------------------------------------------------- /source/_posts/web 前端外部点击事件的实现.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: web 前端外部点击事件的实现 3 | date: 2014-10-22 14:52 4 | tags: 5 | - JavaScript 6 | --- 7 | 8 | 在 web 前端开发中，元素外部点击事件算是非常常用的一种事件了。比如弹出一个对话框，点击对话框外部的时候需要把这个对话框关掉。 9 | 10 | 11 | 12 | 实现这个事件有一个核心的东西，就是判断两个节点是否存在父子关系，整个事件流程如下： 13 | 14 | * 1、事先设定好的一组元素，如果在这组元素外部点击的话，就会触发外部点击事件，这组元素暂记为 nodes ； 15 | * 2、用户点击一个元素，可以从 event.target 中获取到当前用户点击的节点，暂记为 nodeClick ； 16 | * 3、当用户点击 nodeClick 的时候，需要判断 nodes 中是否存在 nodeClick 的祖先节点，如果不存在的话，则触发外部点击事件。 17 | 18 | 按照这个分析，关键点就落在了判断节点父子关系上面了。 19 | 20 | 其实早在 IE5 的时候，元素节点上面就有一个方法 `contains()` ，用于判断父子关系，具体文档可参见： https://developer.mozilla.org/en-US/docs/Web/API/Node.contains 。从文档中，我们可以看见 mobile 部分测试不太充分，所以此处最好保留一个自己实现的版本，代码如下： 21 | 22 | ```js 23 | function contains(parentNode, childNode) { 24 | var fn = Node.prototype.contains || function(childNode) { 25 | while (childNode) { 26 | if (childNode === parentNode) return true; 27 | childNode = childNode.parentNode; 28 | } 29 | }; 30 | return fn.call(parentNode, childNode); 31 | } 32 | function isIn(parentNodes, node) { 33 | for (var i = 0, il = parentNodes.length; i < il; i += 1) { 34 | if (contains(parentNodes[i], node)) return true; 35 | } 36 | return false; 37 | } 38 | ``` 39 | 40 | 实现了这个之后，接下来的事情就是维护回调函数队列了，实现机制可能会有多种，此处给出其中一种。 41 | 42 | 给出一个Array，用于记录所有回调函数，其中每一个数组元素的结构如下： 43 | 44 | ```js 45 | { 46 | nodes: [node1, node2, ...], // 对应上一大步中的nodes变量，即事先设定好的那一组元素 47 | callback: function() {} // 触发本次out click事件的回调函数 48 | } 49 | ``` 50 | 51 | 暂记这个 Array 变量的名字是 outerCallbacks 。 52 | 53 | 接下来，就剩下对外提供 API 了，此处向外部提供两个 API ： 54 | 55 | * 1、 `on()` 函数，用于注册回调函数； 56 | * 2、 `off()` 函数，用于取消回调函数。 57 | 58 | on函数的实现非常简单，此处直接上代码： 59 | 60 | ```js 61 | function outer(elem, callback) { 62 | if (!isFunction(callback)) return; // isFunction = function(obj) {return Object.prototype.toString.call(obj) === '[object Function]';} 63 | 64 | outerCallbacks.push({ 65 | nodes: (isArray(elem) ? elem : [elem]), // isArray = function(obj) {return Object.prototype.toString.call(obj) === '[object Array]'} 66 | callback: callback 67 | }); 68 | } 69 | ``` 70 | 71 | 实现 `off()` 函数的时候，有一个难点和一个注意点： 72 | 73 | 难点：参数处理，条件判断； 74 | 75 | 注意点：在外部点击事件回调函数里面调用了 `off()` 函数怎么办？ 76 | 77 | 可以参看我的实现： https://github.com/yibuyisheng/web-ui/blob/master/static/js/event/outer.js 。 78 | -------------------------------------------------------------------------------- /source/_posts/使用 CSS background 构造一个棋盘.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 使用 CSS background 构造一个棋盘 3 | date: 2015-08-25 4 | tags: 5 | - CSS 6 | --- 7 | 8 | [CSS background 的规范文档](http://www.w3.org/TR/css3-background)。 9 | 10 | ![](https://raw.githubusercontent.com/yibuyisheng/blogs/master/imgs/6.png) 11 | 12 | 13 | 使用的 CSS 代码如下： 14 | 15 | ```css 16 | div.demo1 { 17 | width: 300px; 18 | height: 150px; 19 | 20 | background-color: #eee; 21 | background-image: 22 | linear-gradient(45deg, #bbb 25%, transparent 0), 23 | linear-gradient(45deg, transparent 75%, #bbb 0), 24 | linear-gradient(45deg, #bbb 25%, transparent 0), 25 | linear-gradient(45deg, transparent 75%, #bbb 0); 26 | background-size: 30px 30px; 27 | background-position: 0 0, 15px 15px, 15px 15px, 0 0; 28 | } 29 | ``` 30 | 31 | 整个 div 的背景色是 #eee 。 32 | 33 | 这个背景是由四幅代码“制造”的图片构成的，分别对应于四行 linear-gradient 。 34 | 35 | 第一幅图片，颜色渐变，角度是 45deg ，于是从图片的左下角开始往右上角渐变。0-25%的颜色是 #bbb ，25%-100%的颜色是透明的（ transparent ），图片的大小是30px*30px的，图片从坐标(0,0)处开始绘制。 36 | 37 | 第二幅图片，颜色渐变，角度是 45deg ，于是从图片的左下角开始往右上角渐变。0-75%的颜色是透明的（ transparent ），75%-100%的颜色是 #bbb ，图片的大小是30px*30px的，图片从坐标(15px,15px)处开始绘制。 38 | 39 | 第三幅图片，颜色渐变，角度是 45deg ，于是从图片的左下角开始往右上角渐变。0-25%的颜色是 #bbb ，25%-100%的颜色是透明的（ transparent ），图片的大小是30px*30px的，图片从坐标(15px,15px)处开始绘制。 40 | 41 | 第四幅图片，颜色渐变，角度是 45deg ，于是从图片的左下角开始往右上角渐变。0-75%的颜色是透明的（ transparent ），75%-100%的颜色是 #bbb ，图片的大小是30px*30px的，图片从坐标(0,0)处开始绘制。 42 | 43 | 为了更清晰的看到每幅图片代码对应的区域，参考一下一段代码及其效果： 44 | 45 | ```css 46 | div.demo2 { 47 | width: 300px; 48 | height: 150px; 49 | 50 | background-color: #eee; 51 | background-image: 52 | linear-gradient(45deg, red 25%, transparent 0), 53 | linear-gradient(45deg, transparent 75%, blue 0), 54 | linear-gradient(45deg, green 25%, transparent 0), 55 | linear-gradient(45deg, transparent 75%, orange 0); 56 | background-size: 30px 30px; 57 | background-position: 0 0, 15px 15px, 15px 15px, 0 0; 58 | } 59 | ``` 60 | 61 | ![](https://raw.githubusercontent.com/yibuyisheng/blogs/master/imgs/7.png) 62 | 63 | ### 结语 64 | 65 | css 的 background 属性现在很强大了，利用背景“图片”的层叠，可以做出很多绚丽的背景效果。 66 | 67 | ### 更多 CSS background 的效果： 68 | 69 | {% iframe ../demos/envelope.html 100% 250 %} 70 | 71 | {% iframe ../demos/css%20background.html 100% 430 %} 72 | 73 | {% iframe ../demos/marching%20ants%20borders.html 100% 240 %} 74 | -------------------------------------------------------------------------------- /source/_posts/oracle安装.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: oracle 安装 3 | date: 2016-05-23 12:13 4 | excerpt: 本文记录了 oracle 的安装探索过程。 5 | tags: 6 | - Oracle 7 | - 数据库 8 | --- 9 | 10 | 这个周末学习了一些后端的技能，折腾了好久 Oracle 数据库，总算安装上了。 11 | 12 | 本文记录的东西非常粗浅，仅限于探索如何使用的层面上，因此文中描述的各种观点可能有所错误，欢迎读者批评纠正。 13 | 14 | 15 | ## 基本环境和工具 16 | 17 | - 基于 Parallels Desktop 10 的 windows 10 操作系统； 18 | - JDK 1.8； 19 | - Oracle 11g。 20 | 21 | 其中， Oracle 11g 的下载地址是 [win64_11gR2_database_1of2.zip](http://www.oracle.com/technetwork/database/enterprise-edition/downloads/112010-win64soft-094461.html) 、 [win64_11gR2_database_2of2.zip](http://www.oracle.com/technetwork/database/enterprise-edition/downloads/112010-win64soft-094461.html)。 22 | 23 | ## 第一次安装 24 | 25 | 第一次安装，当然是处于非常的纯净的 windows 10 系统上面，基本没有任何干扰，按照安装说明一步一步往下走，很简单，很轻松，大多数参数都按照默认配置来。这样一路配置下来的话，连接 Oracle 的 URL 就会是 `jdbc:oracle:thin:@10.211.55.4:1521:orcl` （如果使用 Oracle Thin Driver 来连接的话，当然我也不知道是否还存在其他的 Driver ）。 26 | 27 | 后续可能会遇到一个问题：如何在一个局域网内连接这台 Oracle 服务器上面的数据库呢？默认情况下，用前面所示的 URL 并不能成功连接上，那么，首先就应该去检查连接是不是被 windows 10 的防火墙阻止了，排除了这个原因之后，再去看看 listener 服务有没有启动。 28 | 29 | 如果使用 PLSQL Developer 这种 GUI 工具连接 Oracle 服务器的话，会有个很蛋疼的问题，就是要关联一个 Oracle 的 client ，这玩意儿在 windows 系统下面可能要容易点，在 OS X 下面坑特别多。稍微列举一些坑： 30 | 31 | - client 要分 32bit 和 64bit ，这个好像要和具体的 GUI 工具对应上？不太记得了，后续有时间补上吧！ 32 | - 在 OS X 下面要手动配置各种环境变量。 33 | 34 | ## 第二次安装（卸载重装） 35 | 36 | 某一天，我一不小心删掉了手动创建的数据库文件（*.pdf），这下就完蛋了，不能正常工作了：数据库文件丢失。 37 | 38 | 网上搜了一些资料，没找到正确的处理方式，于是决定重装。 39 | 40 | 重装的第一步是卸载。 41 | 42 | ### 卸载 43 | 44 | 很常规的，先跑到 windows 标准的应用程序卸载那里看了下，发现根本没有 Oracle ，看起来无法从这里卸载。 45 | 46 | 于是 Google 了一下，发现 Oracle 的卸载好麻烦：手动停服务、删文件、删注册表，这种方式肯定是逗逼方式。 47 | 48 | 后面鼓捣了会儿，发现“所有程序”里的 Oracle 项目下，有个 Universal Installer 工具，很多应用的安装程序和卸载程序不都是一体的么！抱着试一试的心态，点开了这个程序，果不其然，里面有卸载功能。点击“卸载”按钮，发现只能删除一些目录，果断删除，但是却不能删除主目录，必须要运行主目录下面的 deinstall/deinstall.bat 来卸载。好了，这个程序看起来只是删除目录而已，那么相关的服务可能还得自己手动删除，此处使用了 `sc delete serviceName` 命令删除服务。 49 | 50 | 这样鼓捣一圈下来之后，发现还有很多 Oracle 目录，感觉只能手动清除掉了。果断使用`鼠标右键->删除`的方式，结果发现被占用了，无法删除，此时可以到`资源监视器 -> cpu 标签 -> 关联的句柄`里面搜索，搜索关键词是文件名，然后找到哪些进程占用了文件，果断结束掉，这样一来，就可以成功删掉这些文件了。 51 | 52 | 这样卸载完之后，就开始安装了。 53 | 54 | ### 重装 55 | 56 | 按照第一次的安装流程来，一步一步的，比较顺利。 57 | 58 | 但是，在创建数据库的时候，老是说 `local_listener=LISTENER_ORCL` 这玩意儿配置错误， Goolge 了很多资料，基本都不是说的重装遇到的问题。唉，纠结了半天不知道为啥，只好跳过这个创建数据库的步骤，直接安装完成了。 59 | 60 | 后面仔细一想，从字面猜测应该是 listener 的名字没有和服务里面 listener 的名字对应上，抱着试一试的心态，去 /app/yibuyisheng/admin/orcl/pfile/init.ora 里面做了修改，然后运行 DBCA 重新创建数据库。事实证明，还真是这样的。 61 | 62 | ## 总结 63 | 64 | - 这是一次未知领域的探索过程，其中看似简单的每一步，都花费了不少时间，各种 Google 查资料，全方位面向搜索引擎解决问题。 65 | - 相对于 MySQL ，Oracle 入门配置真特么麻烦。 66 | - 做政府、国企软件项目基本要选用 Oracle 数据库，这些不懂技术的鸟人，真把程序员坑死了。 67 | -------------------------------------------------------------------------------- /themes/indigo/source/css/_partial/postlist.less: -------------------------------------------------------------------------------- 1 | .post-list { 2 | padding: 0; 3 | margin: 0; 4 | list-style: none; 5 | } 6 | 7 | .post-list-item { 8 | padding: 1em 0 2em; 9 | border-bottom: 1px solid @borderColor; 10 | } 11 | 12 | .post-title { 13 | margin: .65em 0; 14 | } 15 | 16 | .post-title-link { 17 | color: @primaryColor; 18 | .hoverLine(@primaryColor); 19 | } 20 | 21 | .post-meat { 22 | margin: 1.2em 0; 23 | font-size: 13px; 24 | color: @secondaryTextColor 25 | } 26 | 27 | .article-tag-list { 28 | padding: 0; 29 | list-style: none; 30 | display: inline-block; 31 | vertical-align: middle; 32 | } 33 | 34 | .article-tag-list-item { 35 | display: inline-block; 36 | margin-right: .5em; 37 | } 38 | 39 | .article-tag-list-link { 40 | display: inline-block; 41 | padding: 0 12px; 42 | line-height: 1.6em; 43 | color: @accentColor; 44 | background: lighten(@accentColor, 30%); 45 | border-radius: 2px; 46 | 47 | &:hover, 48 | &:active { 49 | color: #fff; 50 | background: @accentColor; 51 | } 52 | 53 | } 54 | 55 | .post-footer { 56 | } 57 | 58 | .post-more { 59 | float: right; 60 | display: block; 61 | height: 32px; 62 | line-height: 32px; 63 | padding: 0 1.2em; 64 | color: #fff !important; 65 | background: @primaryColor; 66 | .boxShadow(); 67 | 68 | &:hover, 69 | &:active { 70 | background: @primaryColor; 71 | } 72 | 73 | } 74 | 75 | #page-nav { 76 | margin: 30px 0 0; 77 | text-align: center; 78 | 79 | .inner { 80 | display: inline-block; 81 | white-space: nowrap; 82 | } 83 | 84 | a, 85 | span { 86 | display: inline-block; 87 | line-height: 34px; 88 | padding: 0 1em; 89 | margin: 0 2px; 90 | font-size: 14px; 91 | color: @secondaryTextColor; 92 | border-radius: 3px; 93 | overflow: hidden; 94 | .transition(.4s); 95 | } 96 | 97 | a:hover, 98 | a:active { 99 | color: @primaryColor; 100 | background: @borderColor; 101 | } 102 | 103 | .current { 104 | color: #fff; 105 | background: @primaryColor; 106 | } 107 | 108 | } 109 | 110 | @media screen and (max-width:760px) { 111 | .post-title { 112 | font-size: 20px; 113 | line-height: 24px; 114 | } 115 | 116 | .post-more { 117 | height: 28px; 118 | line-height: 28px; 119 | font-size: 13px; 120 | } 121 | 122 | } -------------------------------------------------------------------------------- /source/_posts/使用 marked 解析 markdown 之缩进.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 使用 marked 解析 markdown 之缩进 3 | date: 2016-06-15T16:12:00.000Z 4 | tags: 5 | - markdown 6 | - ETPL 7 | --- 8 | 9 | 在前面一篇文章{% post_link 使用marked解析markdown %}中，大致介绍了一下 marked 使用过程中的一些问题，今天又再次遇到 ETPL 的 markdown 过滤器嵌套带来的问题。 10 | 11 | 12 | 13 | # 遇见问题 14 | 15 | 这次，我想在 table 的 td 里面写 markdown ，期望效果看起来像是这样的： 16 | 17 | {% img /images/14.png %} 18 | 19 | 而 markdown 代码，我是这样写的： 20 | 21 | {% img /images/15.png %} 22 | 23 | 然后出来的效果是这样： 24 | 25 | {% img /images/16.png %} 26 | 27 | 注意黑色的那段代码块，没缩进了！ 28 | 29 | 什么情况？为啥会没缩进呢？ 30 | 31 | # 初步分析 32 | 33 | 仔细一看 markdown 代码，发现里面出现了过滤器嵌套，也就是说，里面那块 markdown 代码会被处理两次！ 34 | 35 | # 尝试解决方案1 36 | 37 | 既然处理了两次，那么就得想办法只处理一次，于是将 markdown 代码改成这样： 38 | 39 | {% img /images/17.png %} 40 | 41 | 看起来每个 markdown 块都只被处理了一次，应该可以了吧！ 42 | 43 | 于是，我得到了这个效果： 44 | 45 | {% img /images/14.png %} 46 | 47 | 这个看起来好像没啥问题了。 48 | 49 | 但是，结合 filter 代码： 50 | 51 | ```js 52 | var etpl = require('etpl'); 53 | var marked = require('marked'); 54 | etpl.addFilter('markdown', function (source, useExtra) { 55 | source = source.replace(/(^\n+|\n+$)/g, ''); 56 | var uselessSpaceCount = source.match(/^\s*/)[0].length; 57 | source = source.replace(new RegExp('^ {' + uselessSpaceCount + '}', 'gm'), ''); 58 | return marked(source); 59 | }); 60 | ``` 61 | 62 | 发现：第三个 <!-- filter: markdown() --> 会导致自己的 markdown 块缩进出问题。 63 | 64 | # 尝试解决方案2 65 | 66 | 再来仔细玩味一下内嵌 filter 的处理流程吧，希望能找到解决方案。 67 | 68 | 经过各种 debug ，发现整个处理流程是这样的： 69 | 70 | - 1、先处理最里面的 markdown 块（这是是 ETPL 的处理流程），然后生成对应的 HTML 代码，替换掉之前的 markdown 代码； 71 | - 2、再处理外层的 markdown 块，这个块包含了第一步中生成的 HTML 代码块。于是在替换每行空格的时候，同样会替换掉第一步中生成的 code 标签中每一行前面相应的空格。 72 | 73 | 好了，现在为啥缩进会出问题的原因已经具体定位了，咋办呢？ 74 | 75 | 在第2步调用 marked 解析之前，完全可以把第一步中生成的 HTML 代码拿出来，这样第2步处理的时候就不会去掉 code 块中的有用空格了。这样一来，过滤器关键部分的代码就变成了： 76 | 77 | ```js 78 | var renderer = new marked.Renderer(); 79 | require('etpl').addFilter('markdown', function (source, useExtra) { 80 | // 把内嵌的 markdown 拿出来，防止多次转换 81 | var nestMarkdowns = []; 82 | source = source.replace(/
(.|\n)*<\/div>/g, function (match) { 83 | nestMarkdowns.push(match); 84 | return '${nestMarkdown}'; 85 | }); 86 | 87 | source = source.replace(/^\n+/, ''); 88 | var uselessSpaceCount = source.match(/^\s*/)[0].length; 89 | source = source.replace(new RegExp('^ {' + uselessSpaceCount + '}', 'gm'), ''); 90 | return '
' 91 | + marked(source, {renderer: renderer}) 92 | .replace(/\${nestMarkdown}/g, function () { 93 | return nestMarkdowns.shift(); 94 | }) 95 | + '
'; 96 | }); 97 | ``` 98 | 99 | 刷一下页面，再看，符合预期，完全正常！ 100 | -------------------------------------------------------------------------------- /themes/indigo/source/css/_partial/share.less: -------------------------------------------------------------------------------- 1 | .share-icons { 2 | li { 3 | display: inline-block; 4 | } 5 | 6 | .icon-square:before { 7 | display: inline-block; 8 | text-align: center; 9 | color: rgba(0,0,0,0); 10 | border-radius: .2em; 11 | } 12 | 13 | a { 14 | display: inline-block; 15 | border-radius: .2em; 16 | color: #fff; 17 | text-align: center; 18 | &.weibo { 19 | background: #E6162D 20 | } 21 | 22 | &.qq { 23 | background: #3D95D5 24 | } 25 | 26 | &.weixin { 27 | background: #2BAD13 28 | } 29 | 30 | &.facebook { 31 | background: #4862A3 32 | } 33 | 34 | &.twitter { 35 | background: #55ACEE 36 | } 37 | 38 | &.douban { 39 | background: #228A31 40 | } 41 | 42 | } 43 | 44 | } 45 | 46 | .global-share { 47 | position: fixed; 48 | top: 56px; 49 | right: 56px; 50 | z-index: 96; 51 | width: 260px; 52 | padding: 16px 6px; 53 | background: #fff; 54 | border-radius: 3px; 55 | visibility: hidden; 56 | .boxShadow(.3s); 57 | .transform(scale(0)); 58 | transform-origin: top right; 59 | -webkit-transform-origin: top right; 60 | 61 | &.in { 62 | visibility: visible; 63 | .transform(none); 64 | } 65 | 66 | .share-icons { 67 | margin: 0 auto; 68 | } 69 | 70 | .tit { 71 | display: none 72 | } 73 | 74 | li { 75 | width: 80px; 76 | text-align: center; 77 | } 78 | 79 | .icon { 80 | 81 | } 82 | 83 | a { 84 | position: relative; 85 | width: 40px; 86 | height: 40px; 87 | line-height: 40px; 88 | margin-bottom: 20px; 89 | font-size: 1.33333333em; 90 | &:after { 91 | position: absolute; 92 | bottom: -22px; 93 | left: 50%; 94 | content: attr(data-title); 95 | white-space: nowrap; 96 | line-height: 20px; 97 | font-size: 12px; 98 | color: @primaryColor; 99 | .transform(translateX(-50%)); 100 | } 101 | 102 | } 103 | 104 | } 105 | 106 | .post-share { 107 | margin-bottom: 24px; 108 | padding: 8px 12px; 109 | background: #eee; 110 | 111 | .tit { 112 | margin-bottom: .5em; 113 | } 114 | 115 | .share-icons { 116 | a { 117 | width: 24px; 118 | height: 24px; 119 | line-height: 24px; 120 | .tip(); 121 | 122 | &:before { 123 | content: '分享到'attr(data-title) 124 | } 125 | 126 | } 127 | 128 | } 129 | 130 | li { 131 | margin-left: .5em; 132 | &:first-child { 133 | margin-left: 0; 134 | } 135 | } 136 | 137 | 138 | } 139 | -------------------------------------------------------------------------------- /themes/indigo/source/css/_partial/variable.less: -------------------------------------------------------------------------------- 1 | // font 2 | @font-roboto: 'fonts/roboto'; 3 | @font: Roboto, 'Helvetica Neue', Helvetica, 'Microsoft Yahei', Arial; 4 | @font-code: Consolas, Monaco, courier, monospace; 5 | @font-en: 'MV Boli', Roboto, serif; 6 | // font-size 7 | @font-size: 15px; 8 | // Palette generated by Material Palette - materialpalette.com/indigo/pink 9 | //@darkPrimaryColor: #303F9F; 10 | @darkPrimaryColor: #587786; 11 | //@primaryColor: #3F51B5; 12 | @primaryColor: #607d8b; 13 | @lightPrimaryColor: #C5CAE9; 14 | @textPrimaryColor: #fff; 15 | //@accentColor: #FF4081; 16 | @accentColor: #888; 17 | @primaryTextColor: #212121; 18 | @secondaryTextColor: #727272; 19 | @dividerColor: #B6B6B6; 20 | @borderColor: #dadada; 21 | @backColor: #fbfdfe; 22 | @codeBg: #f5f5f5; 23 | //layout 24 | @menuWidth: 240px; 25 | @menuPadding: 20px; 26 | @headerH: 56px; 27 | @navH: 44px; 28 | @mNavH: 36px; 29 | @boxShadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); 30 | 31 | .transition(@s, @dur: ease-in-out) { 32 | -webkit-transition: @s @dur; 33 | transition: @s @dur; 34 | } 35 | 36 | .transform(@prop) { 37 | -webkit-transform: @prop; 38 | transform: @prop; 39 | } 40 | 41 | .boxShadow(@s:.4s) { 42 | box-shadow: @boxShadow; 43 | .transition(@s); 44 | 45 | &:hover, 46 | &:active { 47 | box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); 48 | } 49 | 50 | } 51 | 52 | .hoverLine(@color) { 53 | position: relative; 54 | display: inline-block; 55 | 56 | &::after { 57 | content: ""; 58 | position: absolute; 59 | width: 100%; 60 | height: 2px; 61 | bottom: 0; 62 | left: 0; 63 | background-color: @color; 64 | visibility: hidden; 65 | .transform(scaleX(0)); 66 | .transition(.4s); 67 | } 68 | 69 | &:hover::after, 70 | &:active::after { 71 | visibility: visible; 72 | .transform(scaleX(1)); 73 | } 74 | 75 | } 76 | 77 | .tip() { 78 | position: relative; 79 | 80 | &:before, 81 | &:after { 82 | position: absolute; 83 | right: 50%; 84 | visibility: hidden; 85 | opacity: 0; 86 | pointer-events: none; 87 | .transition(.3s); 88 | .transform(translateX(50%)); 89 | } 90 | 91 | &:before { 92 | top: -32px; 93 | content: attr(data-title); 94 | font-size: 12px; 95 | color: #fff; 96 | white-space: nowrap; 97 | line-height: 24px; 98 | padding: 0 5px; 99 | border-radius: 3px; 100 | background: rgba(0, 0, 0, .8); 101 | } 102 | 103 | &:after { 104 | top: -8px; 105 | content: ''; 106 | border: 6px solid transparent; 107 | border-top-color: rgba(0, 0, 0, .8); 108 | } 109 | 110 | &:hover { 111 | &:before, 112 | &:after { 113 | visibility: visible; 114 | opacity: 1; 115 | } 116 | 117 | } 118 | 119 | } 120 | -------------------------------------------------------------------------------- /source/_posts/记一次坑爹的对接经历.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 记一次坑爹的对接经历 3 | date: 2015-05-07 4 | tags: 5 | - HTTP 6 | --- 7 | 8 | 事情是这样的： 9 | 10 | 后端提供了一个数据接口 `/account/my/address/` 。咱是有追求的程序员，自然接口要采用 RESTful 的思想，于是服务器端非成功的处理，都会返回 http code 非200的状态码，坑由此而生。 11 | 12 | 13 | 在前端请求这个地方，由于做的是移动端应用，果断采用了手写 xhr 请求，大致接口请求代码如下： 14 | 15 | ```js 16 | function encodeParams(params) { 17 | var paramsStr = []; 18 | for (var k in params) { 19 | paramsStr.push(k + '=' + params[k]); 20 | } 21 | return paramsStr.join('&'); 22 | } 23 | 24 | function post(url, params) { 25 | return new Promise(function(resolve, reject) { 26 | var xhr = new XMLHttpRequest(); 27 | xhr.open('POST', url); 28 | xhr.onload = function() { resolve(xhr.response); }; 29 | xhr.onerror = function() { reject(xhr.response); }; 30 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 31 | xhr.send(encodeParams(params)); 32 | }); 33 | } 34 | 35 | post('/account/my/address/', {/*参数*/}) 36 | .then(function(response) { 37 | // some code 38 | }); 39 | ``` 40 | 41 | 42 | 代码写好，拿到 chrome 中一测，出现一个似乎像是请求没发出去的错误： 43 | 44 | ![](https://github.com/yibuyisheng/blogs/blob/master/imgs/1.jpg?raw=true) 45 | 46 | 对于当时不知道 chrome://net-internals/ 这个强大工具的我来说，这种错误简直就是一个莫名其妙的东西，很难搞。 47 | 48 | 于是仔细看一眼 request header ，发现没有 `Content-Length` ！这是怎么回事？为什么浏览器没计算出来 `Content-Length` ？很不可思议！ 49 | 50 | 于是，尝试改变一下请求 body 的编码方式，将上述 post 函数改成这样： 51 | 52 | ```js 53 | function createFormData(params) { 54 | var fd = new FormData(); 55 | for (var k in params) { 56 | fd.append(k, params[k]); 57 | } 58 | return fd; 59 | } 60 | 61 | function post(url, params) { 62 | return new Promise(function(resolve, reject) { 63 | var xhr = new XMLHttpRequest(); 64 | xhr.open('POST', url); 65 | xhr.onload = function() { resolve(xhr.response); }; 66 | xhr.onerror = function() { reject(xhr.response); }; 67 | xhr.setRequestHeader('Content-Type', 'multipart/form-data'); 68 | xhr.send(createFormData(params)); 69 | }); 70 | } 71 | ``` 72 | 73 | 再测，出现这样的错： 74 | 75 | ![](https://github.com/yibuyisheng/blogs/blob/master/imgs/2.jpg?raw=true) 76 | 77 | 仍然没有 `Content-Length` ，错误依旧，简直令人发指！ 78 | 79 | 于是重新审视当前的开发模式，整个结构是这样的：我在本地开发前端静态部分，需要数据的时候通过 xhr 请求到后端去请求，为了避免我本地开发的时候还要启动一个后端服务器程序，于是让后端的同学将后端代码部署在一个公网的服务器上，这样我就可以通过代理或者 CORS 的方式来请求相应的接口了。 80 | 81 | 所以此时此刻，有点怀疑是不是这种模式引发的问题，但是再一想，其它很多获取数据提交数据都是这种模式啊，为啥就正常呢！所以这种怀疑被打消。 82 | 83 | chrome 的开发者工具提供的信息太有限，实在想不出来是什么问题，于是到 QQ 群求助网友，其中一位网页给出了这个： chrome://net-internals/ ，抱着试一试的心态，打开，观察，哇咔咔，好牛逼，请求的各个过程尽收眼底！其中我找到了我的 POST 请求： 84 | 85 | ![](https://github.com/yibuyisheng/blogs/blob/master/imgs/3.jpg?raw=true) 86 | 87 | 嗯，看来请求还是被正常发送出去了的。再往下看，发现了这个： 88 | 89 | ![](https://github.com/yibuyisheng/blogs/blob/master/imgs/4.jpg?raw=true) 90 | 91 | `ERR_UNEXPECTED_PROXY_AUTH` 映入眼帘，代理需要认证？啥玩意儿？然后再看到一个 `Server: nginx/1.4.6 (Ubuntu)` ，仔细想想，为毛 nginx 会说代理认证错误！抓狂，去找后端人员，后端人员果断说不可能是 nginx 有问题！ 92 | 93 | 于是，再次崩溃， google 吧！于是尝试各种关键字搜索： `ERR_UNEXPECTED_PROXY_AUTH` 、 `net_error = -323` ... 94 | 95 | 搜索的时候，出现了一条关于 http code 407 的记录，点进去一看，惊呆了， 407 的含义如下： 96 | 97 | > Proxy Authentication Required 98 | 99 | 需要代理授权！再看看上面的那张图，后端返回的 http code 果然是407，于是找到后端人员，问他可能会返回407吗？答案是 yes ！（我“怒发冲冠”，于是后端同学，卒） 100 | 101 | #### 总结 102 | 103 | 这次问题解决总结下来有这么几个点，以后要注意： 104 | 105 | * 1、在 RESTful 开发中，一定要对状态码足够敏感； 106 | * 2、好好使用 chrome://net-internals/ ，确实挺强大； 107 | * 3、chrome 出现上述类似错误的时候（407、请求未成功发送出去等等），很可能不显示完整的请求头，不显示响应信息（因为按照语义，此时根本无响应信息可显示）。 108 | -------------------------------------------------------------------------------- /themes/indigo/source/css/_partial/search.less: -------------------------------------------------------------------------------- 1 | .search-wrap { 2 | position: relative; 3 | min-width: 56px; 4 | 5 | &.in { 6 | 7 | .search-input { 8 | width: 320px; 9 | opacity: 1; 10 | } 11 | 12 | #search { 13 | color: @lightPrimaryColor 14 | } 15 | } 16 | 17 | .search-input { 18 | position: relative; 19 | z-index: 2; 20 | width: 0; 21 | height: 36px; 22 | margin: 10px 10px 0 0; 23 | border: none; 24 | background: transparent; 25 | color: #fff; 26 | border-bottom: 2px solid #fff; 27 | opacity: 0; 28 | .transition(.2s); 29 | 30 | &::-webkit-input-placeholder { 31 | color: @lightPrimaryColor 32 | } 33 | } 34 | 35 | .header-icon { 36 | position: absolute; 37 | top: 0; 38 | z-index: 3; 39 | } 40 | #search { 41 | right: 0; 42 | } 43 | 44 | #back { 45 | display: none; 46 | left: 0 47 | } 48 | 49 | } 50 | 51 | .search-panel { 52 | position: fixed; 53 | top: 50px; 54 | right: 65px; 55 | z-index: 36; 56 | width: 400px; 57 | max-height: 70%; 58 | overflow-y: auto; 59 | background: #fff; 60 | border-radius: 2px; 61 | box-shadow: @boxShadow; 62 | opacity: 0; 63 | visibility: hidden; 64 | .transform(translateY(-50%) scale(.5)); 65 | .transition(.3s, ease-in); 66 | 67 | &.in { 68 | opacity: 1; 69 | visibility: visible; 70 | .transform(none); 71 | } 72 | } 73 | 74 | .search-result { 75 | margin: 0; 76 | padding: 0; 77 | .item { 78 | line-height: 1.6em; 79 | border-top: 1px solid @borderColor; 80 | &:first-child { 81 | border-top: none; 82 | } 83 | a { 84 | padding: 10px 20px; 85 | } 86 | } 87 | .title { 88 | color: @primaryColor; 89 | &:hover { 90 | color: @lightPrimaryColor 91 | } 92 | } 93 | 94 | .tags span, .time { 95 | font-size: 13px; 96 | color: @secondaryTextColor; 97 | } 98 | 99 | .tags { 100 | margin-right: 1em; 101 | span { 102 | margin-right: .5em; 103 | } 104 | } 105 | 106 | .time { 107 | padding-left: 1em; 108 | } 109 | 110 | .tips { 111 | padding: 30px 0; 112 | text-align: center; 113 | color: @secondaryTextColor; 114 | } 115 | } 116 | 117 | .lock-size { 118 | position: absolute; 119 | width: 100%; 120 | height: 100%; 121 | max-height: 100%; 122 | overflow: hidden; 123 | } 124 | 125 | 126 | @media screen and (max-width:760px) { 127 | 128 | .search-wrap { 129 | 130 | &.in { 131 | position: absolute; 132 | top: 0; 133 | right: 0; 134 | z-index: 10; 135 | width: 100%; 136 | padding: 0 16px 0 56px; 137 | background: @primaryColor; 138 | 139 | .search-input { 140 | width: 100%; 141 | } 142 | 143 | #back { 144 | display: block; 145 | } 146 | 147 | } 148 | } 149 | 150 | .search-panel { 151 | z-index: 28; 152 | top: 0; 153 | right: 0; 154 | padding-top: 56px; 155 | width: 100%; 156 | height: 100%; 157 | max-height: 100%; 158 | border-radius: 0; 159 | box-shadow: none; 160 | } 161 | 162 | } 163 | -------------------------------------------------------------------------------- /source/_posts/一些 core javascript 的基础知识.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 一些 core javascript 的基础知识 3 | date: 2014-10-22 22:13 4 | tags: 5 | - JavaScript 6 | --- 7 | 8 | ### 一、 setTimeout 9 | 10 | ```js 11 | setTimtout(function(){ 12 | alert(2); // 后弹出 13 | },0); 14 | alert(1); // 先弹出 15 | ``` 16 | 17 | 对于如上代码，包含原理如下： 18 | 19 | * 1、首先 jsvm 只会执行一个线程； 20 | * 2、当这个线程遇到 `setTimout()` 的时候，就会将这个 function 放到某个队列里面； 21 | * 3、当前这个线程空闲的时候，就会执行任务队列轮询的代码，将满足条件的函数拿出来执行。 22 | 23 | 24 | 比较简单典型的一个应用场景就是： 25 | 26 | ```js 27 | $(elem).html(xxxxxx); 28 | 29 | setTimeout(function() { 30 | // 内部DOM操作很复杂，此处setTimeout用于保证在内部DOM操作结束并且相关内存被释放掉后执行后续代码 31 | }, 0); 32 | ``` 33 | 34 | ### 二、 eval 35 | 36 | js 中除了全局作用域和函数作用域之外，还存在一个 eval 作用域。 37 | 38 | eval 函数执行的时候，会根据当前执行上下文创建一个作用域。 39 | 40 | 此处有如下代码： 41 | 42 | ```js 43 | function a() { 44 | var b = new SomeThing(); 45 | return function() { 46 | eval(''); 47 | }; 48 | } 49 | ``` 50 | 51 | ### 三、预编译 52 | 53 | 先分别上如下几个片段的代码： 54 | 55 | ```html 56 | 57 | 58 | 64 | 65 | 66 | 67 | ``` 68 | 69 | ```html 70 | 71 | 72 | 75 | 76 | 81 | 82 | 83 | 84 | ``` 85 | 86 | ```html 87 | 88 | 89 | 95 | 96 | 97 | 98 | ``` 99 | 100 | 执行结果分别是： 101 | 102 | * 第一段代码：弹出1； 103 | * 第二段代码：第一个script片段报错，a不存在； 104 | * 第三段代码：报错，a不存在； 105 | 106 | 原因： 107 | 108 | * 第一段代码中，jsvm会预编译，构造好a函数，所以访问a函数的顺序是不重要的； 109 | * 第二段代码中，预编译是会分代码块执行的，每个script都会形成一个代码块，即便script是通过src引入js的； 110 | * 第三段代码中，a函数的定义由于放在了一个表达式当中，因此jsvm不会预编译。 111 | 112 | 但是，此处还可以继续深入，第三段代码改成如下所示： 113 | 114 | ```html 115 | 116 | 117 | 123 | 124 | 125 | 126 | ``` 127 | 128 | 这段代码也同样会报错， a 不存在。为什么呢？原因就是 a 函数放在了表达式当中， jsvm 会把 a 函数看作一个匿名函数，因此在当前语句执行完， a 就被释放掉了。 129 | 130 | 但是，请注意，上面讨论的都是根据 w3c 标准得出的结果，在第三段和第四段代码中，IE 6、7、8还是会预编译的，并且不会释放掉a，因此不会报错。 131 | 132 | ### 四、自执行函数 133 | 134 | 自执行函数的几种形式： 135 | 136 | ```js 137 | (function() {})(); 138 | (function() {}()); 139 | !function(){}(); 140 | void function(){}(); 141 | ``` 142 | 143 | 其中第三种写法会造成额外的运算，因为要对返回的内容做“非”操作。 144 | 145 | ### 五、预编译中的变量声明 146 | 147 | 如下代码： 148 | 149 | ```js 150 | function a(x){ 151 | return x*2; 152 | } 153 | var a; 154 | alert(a); 155 | ``` 156 | 157 | `var a` 只是声明，并不会干啥， `var a` 只会让当前作用域的 `alert(a)` 不会报 a 不存在的错误， a 实际上是什么，需要显示赋值；如果 `var a` 之前已经存在 a 了，则啥也不干。 158 | 159 | ### 六、 function 传参 160 | 161 | 如下代码： 162 | 163 | ```js 164 | function fn1(a, b, c){ 165 | a = 1.2; 166 | b = 2.2; 167 | c.c = 3.2; 168 | } 169 | 170 | var a = 1; 171 | var b = 2; 172 | var c = {c:3}; 173 | 174 | fn1(a,b,c); 175 | 176 | alert(a); 177 | alert(b); 178 | alert(c.c); 179 | ``` 180 | 181 | 原理不难理解，注意值类型和引用类型的区别。 182 | 183 | ### 七、作用域链 184 | 185 | 有如下几点： 186 | 187 | * 1、作用域链是在定义的时候就确定下来了的； 188 | * 2、隐式对象模型：对于一个作用域， jsvm 会创建一个隐式对象，然后在这个对象上面绑定当前作用域的各种变量。多个函数的嵌套定义也就会形成一条作用域链了。如果在某个作用域中要访问一个 a 变量，则会首先在当前作用域中查找是否存在 a 变量，如果不存在，则向上找父作用域隐式对象中是否存在 a 变量，依次类推，如果到了根作用域还找不到 a 变量的话，就会报错了。 189 | 190 | ### 八、类数组结构 191 | 192 | 第一个问题，如何构造类数组结构？思路简单，不赘述。 193 | 194 | jquery 选择器构造出来的就是一个类数组结构。 195 | 196 | ### 九、工厂模式 197 | 198 | ```js 199 | function factory() { 200 | return new ThisIsAClass(); 201 | } 202 | ``` 203 | -------------------------------------------------------------------------------- /config.yml: -------------------------------------------------------------------------------- 1 | # Hexo Configuration 2 | ## Docs: https://hexo.io/docs/configuration.html 3 | ## Source: https://github.com/hexojs/hexo/ 4 | 5 | # Site 6 | title: yibuyisheng 7 | author: yibuyisheng 8 | language: zh 9 | subtitle: 偶尔玩玩 Java 的前端工程师 10 | 11 | # custom Site settings 12 | # more detail check out docs 13 | SEOTitle: yibuyisheng's blog 14 | email: yibuyisheng@163.com 15 | description: "yibuyisheng 在 Github 上的个人博客" 16 | keyword: yibuyisheng # seo key words 17 | 18 | favicon: # your favicon png 19 | # custom end 20 | 21 | # URL 22 | ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' 23 | url: http://yibuyisheng.github.io/blogs/site/index.html 24 | root: /blogs/site 25 | permalink: blogs/:title.html 26 | 27 | # SNS settings 28 | # RSS: 29 | weibo_username: yibuyisheng2009 30 | zhihu_username: yibuyisheng 31 | github_username: yibuyisheng 32 | twitter_username: yibuyisheng 33 | facebook_username: yibuyisheng 34 | 35 | # Build settings 36 | anchorjs: false # if you want to customize anchor. check out line:181 of `post.html` 37 | 38 | 39 | # Duoshuo settings 40 | duoshuo_username: # 你的多说帐号 41 | # Share component is depend on Comment so we can NOT use share only. 42 | duoshuo_share: true # set to false if you want to use Comment without Sharing 43 | 44 | 45 | # Analytics settings 46 | # Baidu Analytics 47 | ba_track_id: 48 | # Google Analytics 49 | ga_track_id: # Format: UA-xxxxxx-xx 50 | ga_domain: 51 | 52 | # Sidebar settings 53 | sidebar-about-description: # 个人描述 54 | sidebar-avatar: # use absolute URL 55 | 56 | 57 | # Featured Tags 58 | featured-tags: true # whether or not using Feature-Tags 59 | featured-condition-size: 1 # A tag will be featured if the size of it is more than this condition value 60 | 61 | # friends 62 | friends: # 友链 63 | 64 | # Directory 65 | source_dir: source 66 | public_dir: site 67 | tag_dir: tags 68 | archive_dir: archives 69 | category_dir: categories 70 | code_dir: downloads/code 71 | i18n_dir: :lang 72 | skip_render: 73 | 74 | # Writing 75 | new_post_name: :title.md # File name of new posts 76 | default_layout: post 77 | titlecase: false # Transform title into titlecase 78 | external_link: true # Open external links in new tab 79 | filename_case: 0 80 | render_drafts: false 81 | post_asset_folder: true 82 | relative_link: false 83 | future: true 84 | highlight: 85 | enable: true 86 | line_number: false 87 | auto_detect: false 88 | tab_replace: 89 | 90 | # Category & Tag 91 | default_category: uncategorized 92 | category_map: 93 | tag_map: 94 | 95 | # Date / Time format 96 | ## Hexo uses Moment.js to parse and display date 97 | ## You can customize the date format as defined in 98 | ## http://momentjs.com/docs/#/displaying/format/ 99 | date_format: YYYY-MM-DD 100 | time_format: HH:mm:ss 101 | 102 | # Pagination 103 | ## Set per_page to 0 to disable pagination 104 | per_page: 8 105 | pagination_dir: page 106 | 107 | # Extensions 108 | ## Plugins: https://hexo.io/plugins/ 109 | 110 | markdown: 111 | plugins: 112 | - markdown-it-abbr 113 | - markdown-it-footnote 114 | - markdown-it-ins 115 | - markdown-it-sub 116 | - markdown-it-sup 117 | - markdown-it-emoji 118 | 119 | ## Themes: https://hexo.io/themes/ 120 | theme: indigo 121 | 122 | # Deployment 123 | ## Docs: https://hexo.io/docs/deployment.html 124 | deploy: 125 | type: 126 | repo: 127 | branch: 128 | 129 | 130 | # img CDN path 131 | cdn-url: # 你的CDN地址 132 | 133 | # Qiniu imageView2 API 134 | # More info http://developer.qiniu.com/code/v6/api/kodo-api/image/imageview2.html 135 | clip-content: "?imageView2/1/w/1400/h/400/interlace/1/q/90" 136 | clip-avatar: "?imageView2/2/w/300/h/300/interlace/1/q/90" 137 | clip-home-post-bg: "?imageView2/1/w/800/h/300/interlace/1/q/70" 138 | 139 | # post default images 140 | post-default-img: #博文默认的图片 141 | post-default-img-mobile: #移动端显示的图片 142 | 143 | # search api , set your custom key 144 | swiftype_key: 145 | 146 | 147 | # archive page title 148 | archive: 149 | title: archives 150 | description: 可以根据归档日期检索所有文件 -------------------------------------------------------------------------------- /source/_posts/使用marked解析markdown.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 使用 marked 解析 markdown 3 | date: 2016-05-20T13:49:00.000Z 4 | tags: 5 | - markdown 6 | - ETPL 7 | --- 8 | 9 | [marked](https://github.com/chjj/marked) 是一个解析 markdown 的 JavaScript 库，可以运行在 Node 环境或者浏览器环境。 10 | 11 | 最简单直接的一种使用方式： 12 | 13 | ```javascript 14 | var marked = require('marked'); 15 | console.log(marked('I am using __markdown__.')); 16 | // Outputs:

I am using markdown.

17 | ``` 18 | 19 | 20 | 21 | marked 库主要提供了一个 marked 函数，该函数声明为： 22 | 23 | ``` 24 | type OptionsType = { 25 | highlight: (function(code: string, lang: string, callback: function(err: Error, code: string)))=, 26 | renderer: marked.Renderer=, 27 | gfm: boolean=, 28 | tables: boolean=, 29 | breaks: boolean=, 30 | pedantic: boolean=, 31 | sanitize: boolean=, 32 | smartLists: boolean= 33 | }; 34 | marked(markdownString: string, options: OptionsType=, callback: Function=): string; 35 | ``` 36 | 37 | 其中，marked 可以通过 renderer 配置提供了自定义解析途径。 38 | 39 | renderer 配置对应的是一个 marked.Renderer 类，此类主要包含了如下的钩子方法： 40 | 41 | - code(string code, string language) 42 | - blockquote(string quote) 43 | - html(string html) 44 | - heading(string text, number level) 45 | - hr() 46 | - list(string body, boolean ordered) 47 | - listitem(string text) 48 | - paragraph(string text) 49 | - table(string header, string body) 50 | - tablerow(string content) 51 | - tablecell(string content, object flags) 52 | - strong(string text) 53 | - em(string text) 54 | - codespan(string code) 55 | - br() 56 | - del(string text) 57 | - link(string href, string title, string text) 58 | - image(string href, string title, string text) 59 | 60 | 所有的这些方法，都可以在 renderer 实例上面覆盖掉。marked 在解析到 markdown 标记的时候，都会去调用相应的钩子方法，而钩子方法的返回结果，就会是该标记最终的解析结果。这样一来，就生成了自定义的解析结果。 61 | 62 | marked 还有一个重要的配置：highlight，可以对代码块进行解析，配合相应的 css ，达到语法高亮效果。 63 | 64 | 以上就是 marked 最基本最核心的用法了。 65 | 66 | 其实本文的重点是记录在使用过程中遇到的一些坑，下面进入重点。 67 | 68 | # markdown 缩进问题 69 | 70 | 在 markdown 的语法中，标题下面（换行之后）标记是不能缩进的，而列表项下面的标记是可以缩进的。 71 | 72 | 现在前端开发，经常会使用一些模板引擎，比如 [ETPL](https://github.com/ecomfe/etpl) ，这些模板，一般都会提供过滤器的功能。以 ETPL 为例，可以在 js 代码中这样添加一个过滤器： 73 | 74 | ```javascript 75 | var etpl = require('etpl'); 76 | var marked = require('marked'); 77 | etpl.addFilter('markdown', function (source, useExtra) { 78 | return marked(source); 79 | }); 80 | ``` 81 | 82 | 此时在对应的模板中，就可以使用该过滤器了： 83 | 84 | ```html 85 |
86 | 87 | ### 标题 88 | 89 | 内容 90 | 91 |
92 | ``` 93 | 94 | 此时，解析出来的样子会让人瞠目结舌：过滤器里面的 markdown 标记根本不会被解析掉，整个 markdown 标记块会被当成代码块。 95 | 96 | 为什么会这样呢？ 97 | 98 | 如果打印一下 markdown 过滤器处理函数中的 source 参数： 99 | 100 | ```javascript 101 | var etpl = require('etpl'); 102 | var marked = require('marked'); 103 | etpl.addFilter('markdown', function (source, useExtra) { 104 | console.log(source); 105 | return marked(source); 106 | }); 107 | ``` 108 | 109 | 可以发现，打印出来的内容会是这个样子： 110 | 111 | ``` 112 | " 113 | ### 标题 114 | 115 | 内容 116 | " 117 | ``` 118 | 119 | 第一行没啥内容，第二行并没有顶行，而是有缩进的，然后最后一行没实际内容，只有一个缩进。 120 | 121 | 这明显跟 markdown 语法有冲突，必须要进行如下处理： 122 | 123 | - 1、第一行和最后一行没啥实际内容，可以去掉； 124 | - 2、检测第一行前面的缩进空格数（这里假定缩进用的是空格），记录下来，假设为 `n` ； 125 | - 3、将每一行前面的 `n` 个空格去掉。 126 | 127 | 具体的代码实现如下： 128 | 129 | ```javascript 130 | var etpl = require('etpl'); 131 | var marked = require('marked'); 132 | etpl.addFilter('markdown', function (source, useExtra) { 133 | source = source.replace(/(^\n+|\n+$)/g, ''); 134 | var uselessSpaceCount = source.match(/^\s*/)[0].length; 135 | source = source.replace(new RegExp('^ {' + uselessSpaceCount + '}', 'gm'), ''); 136 | return marked(source); 137 | }); 138 | ``` 139 | 140 | # HTML 标签 141 | 142 | 有的时候，可能想给 markdown 标记的某一块加上背景色，比如： 143 | 144 | ```html 145 | 146 |
147 | ### 标题 148 | 149 | 内容 150 |
151 | 152 | ``` 153 | 154 | 这样写又会崩溃了， div 内部的 markdown 标记并不会被解析！ 155 | 156 | 解决方法就是把 div 放过滤器外边吧： 157 | 158 | ```html 159 |
160 | 161 | ### 标题 162 | 163 | 内容 164 | 165 |
166 | ``` 167 | -------------------------------------------------------------------------------- /site/js/search.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var searchIco = document.getElementById('search'), 4 | searchWrap = document.getElementById('search-wrap'), 5 | keyInput = document.getElementById('key'), 6 | back = document.getElementById('back'), 7 | searchPanel = document.getElementById('search-panel'), 8 | searchResult = document.getElementById('search-result'), 9 | searchTpl = document.getElementById('search-tpl').innerHTML, 10 | searchData; 11 | 12 | function loadData(success) { 13 | 14 | if (!searchData) { 15 | var xhr = new XMLHttpRequest(); 16 | xhr.open('GET', '/content.json', true); 17 | 18 | xhr.onload = function() { 19 | if (this.status >= 200 && this.status < 300) { 20 | searchData = JSON.parse(this.response); 21 | success(searchData); 22 | } else { 23 | console.error(this.statusText); 24 | } 25 | }; 26 | 27 | xhr.onerror = function() { 28 | console.error(this.statusText); 29 | }; 30 | 31 | xhr.send(); 32 | 33 | } else { 34 | success(searchData); 35 | } 36 | } 37 | 38 | function tpl(html, data) { 39 | return html.replace(/\{\w+\}/g, function(str) { 40 | var prop = str.replace(/\{|\}/g, ''); 41 | return data[prop] || ''; 42 | }); 43 | } 44 | 45 | var docEl = document[navigator.userAgent.indexOf('Firefox') !== -1 ? 'documentElement' : 'body'], 46 | noop = function() {}; 47 | 48 | var Control = { 49 | show: function() { 50 | window.innerWidth < 760 ? docEl.classList.add('lock-size') : noop; 51 | searchPanel.classList.add('in'); 52 | }, 53 | hide: function() { 54 | window.innerWidth < 760 ? docEl.classList.remove('lock-size') : noop; 55 | searchPanel.classList.remove('in'); 56 | } 57 | }; 58 | 59 | function render(data) { 60 | var html = ''; 61 | if (data.length) { 62 | 63 | html = data.map(function(post) { 64 | 65 | return tpl(searchTpl, { 66 | title: post.title, 67 | path: post.path, 68 | date: new Date(post.date).toLocaleDateString(), 69 | tags: post.tags.map(function(tag) { 70 | return '#' + tag.name + ''; 71 | }).join('') 72 | }); 73 | 74 | }).join(''); 75 | 76 | } else { 77 | html = '

  • Results not found!

    • '; 78 | } 79 | 80 | searchResult.innerHTML = html; 81 | } 82 | function regtest(raw, regExp) { 83 | regExp.lastIndex = 0; 84 | return regExp.test(raw); 85 | } 86 | function matcher(post, regExp) { 87 | return regtest(post.title, regExp) || post.tags.some(function(tag) { 88 | return regtest(tag.name, regExp); 89 | }) || regtest(post.text, regExp); 90 | } 91 | 92 | function search(e) { 93 | var key = this.value.trim(); 94 | if (!key) { 95 | return; 96 | } 97 | 98 | var regExp = new RegExp(key.replace(/[ ]/g, '|'), 'gmi'); 99 | 100 | loadData(function(data) { 101 | 102 | var result = data.filter(function(post) { 103 | return matcher(post, regExp); 104 | }); 105 | 106 | render(result); 107 | Control.show(); 108 | }); 109 | 110 | e.preventDefault(); 111 | } 112 | 113 | 114 | searchIco.addEventListener('click', function() { 115 | searchWrap.classList.toggle('in'); 116 | keyInput.value = ''; 117 | }); 118 | 119 | back.addEventListener('click', function() { 120 | searchWrap.classList.remove('in'); 121 | Control.hide(); 122 | }); 123 | 124 | document.addEventListener('click', function(e) { 125 | if (e.target.id !== 'key') { 126 | Control.hide(); 127 | } 128 | }); 129 | 130 | keyInput.addEventListener('input', search); 131 | keyInput.addEventListener('click', search); 132 | 133 | })(); 134 | -------------------------------------------------------------------------------- /themes/indigo/source/js/search.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var searchIco = document.getElementById('search'), 4 | searchWrap = document.getElementById('search-wrap'), 5 | keyInput = document.getElementById('key'), 6 | back = document.getElementById('back'), 7 | searchPanel = document.getElementById('search-panel'), 8 | searchResult = document.getElementById('search-result'), 9 | searchTpl = document.getElementById('search-tpl').innerHTML, 10 | searchData; 11 | 12 | function loadData(success) { 13 | 14 | if (!searchData) { 15 | var xhr = new XMLHttpRequest(); 16 | xhr.open('GET', '/content.json', true); 17 | 18 | xhr.onload = function() { 19 | if (this.status >= 200 && this.status < 300) { 20 | searchData = JSON.parse(this.response); 21 | success(searchData); 22 | } else { 23 | console.error(this.statusText); 24 | } 25 | }; 26 | 27 | xhr.onerror = function() { 28 | console.error(this.statusText); 29 | }; 30 | 31 | xhr.send(); 32 | 33 | } else { 34 | success(searchData); 35 | } 36 | } 37 | 38 | function tpl(html, data) { 39 | return html.replace(/\{\w+\}/g, function(str) { 40 | var prop = str.replace(/\{|\}/g, ''); 41 | return data[prop] || ''; 42 | }); 43 | } 44 | 45 | var docEl = document[navigator.userAgent.indexOf('Firefox') !== -1 ? 'documentElement' : 'body'], 46 | noop = function() {}; 47 | 48 | var Control = { 49 | show: function() { 50 | window.innerWidth < 760 ? docEl.classList.add('lock-size') : noop; 51 | searchPanel.classList.add('in'); 52 | }, 53 | hide: function() { 54 | window.innerWidth < 760 ? docEl.classList.remove('lock-size') : noop; 55 | searchPanel.classList.remove('in'); 56 | } 57 | }; 58 | 59 | function render(data) { 60 | var html = ''; 61 | if (data.length) { 62 | 63 | html = data.map(function(post) { 64 | 65 | return tpl(searchTpl, { 66 | title: post.title, 67 | path: post.path, 68 | date: new Date(post.date).toLocaleDateString(), 69 | tags: post.tags.map(function(tag) { 70 | return '#' + tag.name + ''; 71 | }).join('') 72 | }); 73 | 74 | }).join(''); 75 | 76 | } else { 77 | html = '

  • Results not found!

    • '; 78 | } 79 | 80 | searchResult.innerHTML = html; 81 | } 82 | function regtest(raw, regExp) { 83 | regExp.lastIndex = 0; 84 | return regExp.test(raw); 85 | } 86 | function matcher(post, regExp) { 87 | return regtest(post.title, regExp) || post.tags.some(function(tag) { 88 | return regtest(tag.name, regExp); 89 | }) || regtest(post.text, regExp); 90 | } 91 | 92 | function search(e) { 93 | var key = this.value.trim(); 94 | if (!key) { 95 | return; 96 | } 97 | 98 | var regExp = new RegExp(key.replace(/[ ]/g, '|'), 'gmi'); 99 | 100 | loadData(function(data) { 101 | 102 | var result = data.filter(function(post) { 103 | return matcher(post, regExp); 104 | }); 105 | 106 | render(result); 107 | Control.show(); 108 | }); 109 | 110 | e.preventDefault(); 111 | } 112 | 113 | 114 | searchIco.addEventListener('click', function() { 115 | searchWrap.classList.toggle('in'); 116 | keyInput.value = ''; 117 | }); 118 | 119 | back.addEventListener('click', function() { 120 | searchWrap.classList.remove('in'); 121 | Control.hide(); 122 | }); 123 | 124 | document.addEventListener('click', function(e) { 125 | if (e.target.id !== 'key') { 126 | Control.hide(); 127 | } 128 | }); 129 | 130 | keyInput.addEventListener('input', search); 131 | keyInput.addEventListener('click', search); 132 | 133 | })(); 134 | -------------------------------------------------------------------------------- /themes/indigo/source/css/_partial/waves.less: -------------------------------------------------------------------------------- 1 | /*! 2 | * Waves v0.7.4 3 | * http://fian.my.id/Waves 4 | * 5 | * Copyright 2014 Alfiana E. Sibuea and other contributors 6 | * Released under the MIT license 7 | * https://github.com/fians/Waves/blob/master/LICENSE 8 | */ 9 | 10 | .waves-transition (@transition) { 11 | -webkit-transition: @transition; 12 | -moz-transition: @transition; 13 | -o-transition: @transition; 14 | transition: @transition; 15 | } 16 | 17 | .waves-transform(@string) { 18 | -webkit-transform: @string; 19 | -moz-transform: @string; 20 | -ms-transform: @string; 21 | -o-transform: @string; 22 | transform: @string; 23 | } 24 | 25 | .waves-box-shadow(@shadow) { 26 | -webkit-box-shadow: @shadow; 27 | box-shadow: @shadow; 28 | } 29 | 30 | .waves-effect { 31 | position: relative; 32 | cursor: pointer; 33 | display: inline-block; 34 | overflow: hidden; 35 | -webkit-user-select: none; 36 | -moz-user-select: none; 37 | -ms-user-select: none; 38 | user-select: none; 39 | -webkit-tap-highlight-color: transparent; 40 | 41 | .waves-ripple { 42 | position: absolute; 43 | border-radius: 50%; 44 | width: 100px; 45 | height: 100px; 46 | margin-top:-50px; 47 | margin-left:-50px; 48 | opacity: 0; 49 | background: rgba(0,0,0,0.2); 50 | @gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%; 51 | background: -webkit-radial-gradient(@gradient); 52 | background: -o-radial-gradient(@gradient); 53 | background: -moz-radial-gradient(@gradient); 54 | background: radial-gradient(@gradient); 55 | .waves-transition(all 0.5s ease-out); 56 | -webkit-transition-property: -webkit-transform, opacity; 57 | -moz-transition-property: -moz-transform, opacity; 58 | -o-transition-property: -o-transform, opacity; 59 | transition-property: transform, opacity; 60 | .waves-transform(scale(0) translate(0,0)); 61 | pointer-events: none; 62 | } 63 | 64 | &.waves-light .waves-ripple { 65 | background: rgba(255,255,255,0.4); 66 | @gradient: rgba(255,255,255,0.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%; 67 | background: -webkit-radial-gradient(@gradient); 68 | background: -o-radial-gradient(@gradient); 69 | background: -moz-radial-gradient(@gradient); 70 | background: radial-gradient(@gradient); 71 | } 72 | 73 | &.waves-classic .waves-ripple { 74 | background: rgba(0,0,0,0.2); 75 | } 76 | 77 | &.waves-classic.waves-light .waves-ripple { 78 | background: rgba(255,255,255,0.4); 79 | } 80 | } 81 | 82 | .waves-notransition { 83 | .waves-transition(none ~'!important'); 84 | } 85 | 86 | .waves-button, 87 | .waves-circle { 88 | .waves-transform(translateZ(0)); 89 | } 90 | 91 | .waves-button, 92 | .waves-button:hover, 93 | .waves-button:visited, 94 | .waves-button-input { 95 | white-space: nowrap; 96 | vertical-align: middle; 97 | cursor: pointer; 98 | border: none; 99 | outline: none; 100 | background-color: rgba(0, 0, 0, 0); 101 | font-size: 1em; 102 | text-align: center; 103 | text-decoration: none; 104 | z-index: 1; 105 | } 106 | 107 | .waves-button { 108 | padding: 0.85em 1.1em; 109 | border-radius: 0.2em; 110 | } 111 | 112 | .waves-button-input { 113 | margin: 0; 114 | padding: 0.85em 1.1em; 115 | } 116 | 117 | .waves-input-wrapper { 118 | border-radius: 0.2em; 119 | vertical-align: bottom; 120 | 121 | &.waves-button { 122 | padding: 0; 123 | } 124 | 125 | .waves-button-input { 126 | position: relative; 127 | top: 0; 128 | left: 0; 129 | z-index: 1; 130 | } 131 | } 132 | 133 | .waves-circle { 134 | text-align: center; 135 | width: 2.5em; 136 | height: 2.5em; 137 | line-height: 2.5em; 138 | border-radius: 50%; 139 | } 140 | 141 | .waves-float { 142 | -webkit-mask-image: none; 143 | .waves-box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12)); 144 | .waves-transition(all 300ms); 145 | 146 | &:active { 147 | .waves-box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30)); 148 | } 149 | } 150 | 151 | .waves-block { 152 | display: block; 153 | } 154 | 155 | /* Firefox Bug: link not triggered */ 156 | a.waves-effect .waves-ripple { 157 | z-index: -1; 158 | } 159 | -------------------------------------------------------------------------------- /themes/indigo/source/css/_partial/highlight.less: -------------------------------------------------------------------------------- 1 | @h-background: #f5f5f5; 2 | @h-current-line: #efefef; 3 | @h-selectioon: #d6d6d6; 4 | @h-foreground: #4d4d4c; 5 | @h-comment: #8e908c; 6 | @h-red: #c82829; 7 | @h-orange: #f5871f; 8 | @h-yellow: #eab700; 9 | @h-green: #718c00; 10 | @h-aqua: #3e999f; 11 | @h-blue: #4271ae; 12 | @h-purple: #8959a8; 13 | @h-fs: 12px; 14 | 15 | .codeBlock() { 16 | overflow-x: auto; 17 | position: relative; 18 | background: @h-background; 19 | padding: 15px; 20 | line-height: @h-fs*1.6; 21 | border-radius: 2px; 22 | } 23 | 24 | .line-numbers() { 25 | color: @secondaryTextColor; 26 | font-size: 0.85em; 27 | } 28 | 29 | .post-content { 30 | pre { 31 | .codeBlock(); 32 | color: @h-foreground; 33 | 34 | code { 35 | background: none; 36 | color: @h-foreground; 37 | } 38 | 39 | } 40 | 41 | .highlight { 42 | .codeBlock(); 43 | 44 | pre { 45 | margin: 0; 46 | padding: 0; 47 | } 48 | 49 | table { 50 | margin: 0; 51 | width: auto; 52 | } 53 | 54 | td { 55 | border: none; 56 | } 57 | 58 | tr, 59 | td { 60 | border-collapse: collapse; 61 | padding: 0; 62 | margin: 0; 63 | } 64 | 65 | figcaption { 66 | font-size: 0.85em; 67 | color: @h-comment; 68 | line-height: 1em; 69 | margin-bottom: 1em; 70 | 71 | a { 72 | float: right 73 | } 74 | 75 | } 76 | 77 | .gutter pre { 78 | .line-numbers(); 79 | text-align: right; 80 | padding-right: 20px; 81 | 82 | .line { 83 | text-shadow: none 84 | } 85 | 86 | } 87 | 88 | 89 | } 90 | 91 | .gist { 92 | background: @h-background; 93 | 94 | tr, td { 95 | height: auto; 96 | } 97 | 98 | .gist-file { 99 | border: none; 100 | font-family: @font-code; 101 | 102 | .highlight { 103 | margin: 0; 104 | padding: 0; 105 | border: none; 106 | } 107 | 108 | } 109 | .gist-data { 110 | border: none; 111 | 112 | .line-numbers { 113 | .line-numbers(); 114 | background: none; 115 | border: none; 116 | padding: 0 20px 0 0 117 | } 118 | 119 | .line-data { 120 | padding: 0 !important 121 | } 122 | 123 | } 124 | 125 | .gist-meta { 126 | background: @h-background; 127 | color: @h-comment; 128 | font: 0.85em @font-code; 129 | 130 | a { 131 | color: @accentColor; 132 | font-weight: normal; 133 | 134 | &:hover { 135 | text-decoration: underline 136 | } 137 | 138 | } 139 | 140 | } 141 | 142 | } 143 | 144 | } 145 | 146 | pre { 147 | .comment { 148 | color: @h-comment 149 | } 150 | 151 | .tag { 152 | color: @h-comment 153 | } 154 | 155 | .variable, 156 | .title, 157 | .type, 158 | .regexp, 159 | .ruby .constant, 160 | .xml .tag .title, 161 | .xml .pi, 162 | .xml .doctype, 163 | .html .doctype, 164 | .css .id, 165 | .css .class, 166 | .css .pseudo { 167 | color: @h-red 168 | } 169 | 170 | .class, 171 | .number, 172 | .preprocessor, 173 | .built_in, 174 | .literal, 175 | .params, 176 | .constant { 177 | color: @h-orange 178 | } 179 | 180 | .attribute, 181 | .label, 182 | .ruby .class .title, 183 | .css .rules .attribute { 184 | color: @h-green 185 | } 186 | 187 | .string, 188 | .value, 189 | .inheritance, 190 | .header, 191 | .ruby .symbol, 192 | .xml .cdata { 193 | color: @h-blue 194 | } 195 | 196 | .css .hexcolor, 197 | .css .tag { 198 | color: @h-aqua 199 | } 200 | 201 | .function, 202 | .python .decorator, 203 | .python .title, 204 | .ruby .function .title, 205 | .ruby .title .keyword, 206 | .perl .sub, 207 | .javascript .title, 208 | .coffeescript .title { 209 | color: @h-blue 210 | } 211 | 212 | .keyword, 213 | .javascript .function { 214 | color: @h-purple 215 | } 216 | 217 | } 218 | -------------------------------------------------------------------------------- /source/_posts/ES6 模式匹配和默认参数.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: ES6 中的模式匹配和默认参数 3 | date: 2017-01-06 4 | tags: 5 | - JavaScript 6 | - ECMAScript 6 7 | --- 8 | 9 | ES6 中，引入了其他很多语言都具备的`模式匹配`和`默认参数`语法糖，使得代码简洁了不少。但是使用的时候还是有些细节需要注意。 10 | 11 | 12 | ## 模式匹配原理 13 | 14 | ### 模式匹配的种类 15 | 16 | 具体来说，有三种类型的模式匹配： 17 | 18 | * 直接赋值 19 | 20 | ```js 21 | let a = 1; 22 | ``` 23 | 24 | * 对象模式 25 | 26 | ```js 27 | let {name, age: age} = {name: 'yibuyisheng', age: 25}; 28 | ``` 29 | 30 | * 数组模式 31 | 32 | ```js 33 | let [a, b] = [1, 2]; 34 | ``` 35 | 36 | ### 模式匹配的过程 37 | 38 | * 直接赋值：x ← value（包括 `undefined` 和 `null`） 39 | 40 | ```js 41 | x = value 42 | ``` 43 | 44 | * 对象模式 45 | 46 | 该种模式下，会检查匹配源是不是对象，如果不是对象，则会使用内部的 [ToObject()](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-toobject) 进行转换。 47 | 48 | - {«properties»} ← undefined 49 | 50 | ```js 51 | throw new TypeError(); 52 | ``` 53 | 54 | - {«properties»} ← null 55 | 56 | ```js 57 | throw new TypeError(); 58 | ``` 59 | 60 | - {key: «pattern», «properties»} ← obj 61 | 62 | ``` 63 | «pattern» ← obj.key 64 | {«properties»} ← obj 65 | ``` 66 | 67 | - {key: «pattern» = default_value, «properties»} ← obj 68 | 69 | ``` 70 | let tmp = obj.key; 71 | if (tmp !== undefined) { 72 | «pattern» ← tmp 73 | } else { 74 | «pattern» ← default_value 75 | } 76 | {«properties»} ← obj 77 | ``` 78 | 79 | - {} ← obj 80 | 81 | ``` 82 | // No properties left, nothing to do 83 | ``` 84 | 85 | * 数组模式 86 | 87 | 该种模式下，右侧必须是可迭代的，如果不可迭代，就会抛出错误。 88 | 89 | - [«elements»] ← non_iterable 90 | 91 | ``` 92 | assert(!isIterable(non_iterable)) 93 | throw new TypeError(); 94 | ``` 95 | 96 | - [«elements»] ← iterable 97 | 98 | ``` 99 | assert(isIterable(iterable)) 100 | let iterator = iterable[Symbol.iterator](); 101 | «elements» ← iterator 102 | ``` 103 | 104 | ## 模式匹配中需要注意的 105 | 106 | ### undefined 触发默认值 107 | 108 | 如下所示： 109 | 110 | ```js 111 | let [x = 1] = [undefined]; // x = 1 112 | ``` 113 | 114 | 右侧的 `underfined` 元素会触发左侧的默认值。 115 | 116 | ### 在需要的时候才会去计算默认值 117 | 118 | 比如： 119 | 120 | ```js 121 | let {prop: y = someFunc()} = someValue; 122 | ``` 123 | 124 | 只有在右侧 `someValue.prop` 为 `undefined` 的时候才会执行 `someFunc()` 函数。 125 | 126 | ### 模式匹配中可以引用模式中前面的变量 127 | 128 | 比如： 129 | 130 | ```js 131 | let [x = 3, y = x] = [7, 2]; // x=7; y=2 132 | ``` 133 | 134 | 这个地方要注意顺序，比如下面这个就是错误的： 135 | 136 | ```js 137 | let [x = y, y = 3] = [7, 2]; // ReferenceError 138 | ``` 139 | 140 | ## 函数参数传递 141 | 142 | 函数传参的过程，实际上就包含了模式匹配的过程： 143 | 144 | ``` 145 | function func(«FORMAL_PARAMETERS») { 146 | «CODE» 147 | } 148 | func(«ACTUAL_PARAMETERS»); 149 | 150 | // 大致是： 151 | 152 | { 153 | let [«FORMAL_PARAMETERS»] = [«ACTUAL_PARAMETERS»]; 154 | { 155 | «CODE» 156 | } 157 | } 158 | ``` 159 | 160 | ## 函数默认参数，慎用对象引用 161 | 162 | 有如下示例代码： 163 | 164 | ```js 165 | let list = []; 166 | function fn(a = list) { 167 | console.log(a); 168 | } 169 | 170 | fn(); // console.log: [] 171 | list.push(1); 172 | fn(); // console.log: [1] 173 | ``` 174 | 175 | 默认参数使用了 list 引用，那么后续对 list 的修改，都会体现到默认参数上面去。在大型项目开发中，容易失控。如果一定要用某个变量生成默认值，建议深拷贝一份： 176 | 177 | ```js 178 | let list = []; 179 | const listDefaultParam = deepClone(list); // 其它地方不要再使用这个变量了，并且在函数内部也不要修改这个变量值 180 | function fn(a = listDefaultParam) { 181 | console.log(a); 182 | } 183 | ``` 184 | 185 | ## 默认参数的作用域 186 | 187 | 使用最新版的 Chrome 浏览器执行下面的代码，注意输出结果： 188 | 189 | ```js 190 | ({ 191 | method() { 192 | function innerFn(a = () => console.log(this)) { 193 | a(); 194 | } 195 | innerFn.call(this); 196 | } 197 | }).method(); 198 | 199 | ({ 200 | method() { 201 | function innerFn(a = () => console.log(this)) { 202 | a(); 203 | } 204 | innerFn(); 205 | } 206 | }).method(); 207 | 208 | ({ 209 | method() { 210 | let arrowFn = () => console.log(this); 211 | function innerFn(a = arrowFn) { 212 | a(); 213 | } 214 | innerFn(); 215 | } 216 | }).method(); 217 | 218 | ({ 219 | method() { 220 | let arrowFn = () => console.log(this); 221 | function innerFn(a = arrowFn) { 222 | a(); 223 | } 224 | innerFn.call(this); 225 | } 226 | }).method(); 227 | 228 | // output: 229 | // 230 | // Object({method: ()}) 231 | // Window { ... } 232 | // Object({method: ()}) 233 | // Object({method: ()}) 234 | ``` 235 | 236 | 实际上，将上述代码用 babel 转换一下，可以发现默认参数的处理过程发生在函数开始部分。 237 | -------------------------------------------------------------------------------- /source/_posts/实现第一个 vscode 扩展.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 实现第一个 vscode 扩展 3 | date: 2016-01-10 18:20 4 | tags: 5 | - vscode 6 | --- 7 | 8 | 9 | > 提前声明：
    10 | > 此处使用的 vscode 版本是0.10.6 11 | 12 | vscode 是微软最近弄出来的代码编辑器，基于 Electron ，对于前端程序员来说，颇亲切。 13 | 14 | 个人觉得，到目前这个版本为止， vscode 还不是很成熟，总体体验上离 sublime 还有一定差距。 15 | 16 | 17 | 但是我个人很看重 vscode 的这些点： 18 | 19 | * 1、虽然使用 Electron ，但是代码各方面处理还是挺快的，特别是打开比较大的 js 文件，基本不会挂掉，性能堪比 sublime ； 20 | * 2、里面全是 js 系列的东西（虽然加了一层 ts ），对于前端来说，很是亲切，如果成熟到一定程度的话，将会有大把的前端程序员参与插件的开发。相比于 sublime 使用 python ， vscode 真是太爽了，深度定制的时候少了语言的门槛。 21 | 22 | 目前个人感觉的小缺点有： 23 | 24 | * 1、无法代码折叠； 25 | * 2、扩展 API 还不完善，有些比较酷的功能依据现有 API 还无法实现。 26 | 27 | 废话不对说，走一个插件先。 28 | 29 | ### 插件功能 30 | 31 | 对 JavaScript 代码进行检查，基于的检查规则是 `fecs` 。 32 | 33 | ### 安装必要的东西 34 | 35 | > npm install -g yo generator-code 36 | 37 | ### 生成扩展项目 38 | 39 | 执行下面的代码： 40 | 41 | > yo code 42 | 43 | 然后会出现这样的选择界面： 44 | 45 | ![](https://github.com/yibuyisheng/blogs/blob/master/imgs/13.png?raw=true) 46 | 47 | 选择： 48 | 49 | > New Extension (JavaScript) 50 | 51 | 这样就会生成使用 JavaScript 进行插件开发的项目结构。 52 | 53 | 后续还会设置扩展的名字（此处设为 test ）、扩展的唯一标识、扩展的描述、扩展的发布者名字、是否初始化为 Git 仓库。根据提示做相应设置就好了。设置完之后就会自动运行 `npm install` ，安装好 vscode 模块。 54 | 55 | 一切结束之后，你会发现在当前目录下生成了一个叫 `test` 的目录，进入这个目录，下面就有了一堆文件。 56 | 57 | ### 修改 package.json 文件 58 | 59 | 更改 `activationEvents` 配置项，设为： 60 | 61 | ```js 62 | [ 63 | "onLanguage:javascript" 64 | ] 65 | ``` 66 | 67 | 意思就是在打开 JavaScript 文件的时候会激活这个扩展。 68 | 69 | 删掉 `contributes` 配置项，此处用不上这个配置。 70 | 71 | ### 修改 extension.js 文件 72 | 73 | 这个文件是 package.json 里面 `main` 配置指向的文件，扩展激活的时候会调用这个文件提供的 activate 方法。 74 | 75 | 对于该扩展，其执行流程为： 76 | 77 | * 1、在用户打开 js 文件的时候激活扩展，注册好文件保存的回调方法； 78 | * 2、在用户保存文件的时候，执行 fecs 检查； 79 | * 3、将第二步中检查出的错误和警告等信息显示到编辑器中。 80 | 81 | #### 开发过程 82 | 83 | 在开发扩展的时候，要使用到 `vscode` 和 `fecs` 两个模块： 84 | 85 | ```js 86 | var vscode = require('vscode'); 87 | var fecs = require('fecs'); 88 | ``` 89 | 90 | 然后注册文件保存的回调函数： 91 | 92 | ```js 93 | var disposable = vscode.workspace.onDidSaveTextDocument(function (event) { 94 | // do something while saving 95 | }); 96 | context.subscriptions.push(diagnosticCollection); 97 | ``` 98 | 99 | > **注意：**
    100 | > 此处 `onDidSaveTextDocument` 返回了一个 disposable 对象，这个对象有一个 `dispose` 方法，在扩展销毁的时候，会调用这个方法。因此，这个对象要事先放到 `context.subscriptions` ，`context` 是 `activate` 方法调用的时候传入的上下文对象。 101 | 102 | 在这个回调函数里面就可以执行 fecs 检查了： 103 | 104 | ```js 105 | fecs.check( 106 | { 107 | type: 'js', 108 | name: 'FECS JS', 109 | _: [event.uri.path], 110 | stream: false 111 | }, 112 | function (hasNoError, errors) { 113 | // the result of check 114 | } 115 | ); 116 | ``` 117 | 118 | `hasNoError` 和 `errors` 表明了检查结果。此处可以忽略 `hasNoError` ，直接将 errors 转换成 vscode 能够展示的错误。 119 | 120 | vscode 提供了 `DiagnosticCollection` ，用于向界面上展示错误信息。那么如何操作呢？ 121 | 122 | 首先要拿到一个 `DiagnosticCollection` 对象： 123 | 124 | ```js 125 | var diagnosticCollection = vscode.languages.createDiagnosticCollection('fecs'); 126 | ``` 127 | 128 | 然后往这个对象里面塞错误信息： 129 | 130 | ```js 131 | diagnosticCollection.set(someErrorObject); 132 | ``` 133 | 134 | #### 整合所有代码之后的样子 135 | 136 | 整个 `extension.js` 的代码整合起来如下： 137 | 138 | ```js 139 | var path = require('path'); 140 | var vscode = require('vscode'); 141 | var fecs = require('fecs'); 142 | 143 | fecs.leadName = 'fecs'; 144 | 145 | exports.activate = function activate(context) { 146 | var diagnosticCollection = vscode.languages.createDiagnosticCollection('fecs'); 147 | context.subscriptions.push(diagnosticCollection); 148 | 149 | vscode.workspace.onDidSaveTextDocument(function (event) { 150 | diagnosticCollection.clear(); 151 | fecs.check( 152 | { 153 | type: 'js', 154 | name: 'FECS JS', 155 | _: [event.uri.path], 156 | stream: false 157 | }, 158 | function (hasNoError, errors) { 159 | diagnosticCollection.set(convertErrors(errors)); 160 | } 161 | ); 162 | }); 163 | }; 164 | 165 | function convertErrors(fecsErrors) { 166 | return fecsErrors.map(function (error) { 167 | return [ 168 | vscode.Uri.file(error.path), 169 | error.errors.map(function (fileError) { 170 | // fecs的行号和列号与vscode有差异。。。。 171 | var line = fileError.line - 1; 172 | var column = fileError.column - 1; 173 | 174 | return new vscode.Diagnostic( 175 | new vscode.Range(line, column, line, column + 1), 176 | `[FECS]: ${fileError.message} (${fileError.rule})`, 177 | { 178 | 1: vscode.DiagnosticSeverity.Warning, 179 | 2: vscode.DiagnosticSeverity.Error 180 | }[fileError.severity] 181 | ); 182 | }) 183 | ]; 184 | }); 185 | } 186 | ``` 187 | 188 | > **注：** [fecs 是什么？](http://fecs.baidu.com/) 189 | -------------------------------------------------------------------------------- /source/_posts/filedownload.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: WEB 中的文件下载 3 | date: 2016-06-17 8:59 4 | tags: 5 | - HTTP 6 | --- 7 | 8 | 在 WEB 开发中，我们会期望用户在点击某个链接的时候，下载一个文件（不管这个文件能不能被浏览器解析，都要下载）。以前接触过一种方式，就是在响应 header 中设置 `force-download` ： 9 | 10 | ``` 11 | Content-Type: application/force-download 12 | Content-Disposition: attachment; filename="test.zip" 13 | ``` 14 | 15 | 然而，这是一种 hack 方式，并不推荐使用： 16 | 17 | 18 | {% blockquote Quentin http://stackoverflow.com/a/10616753/3468416 Utility of HTTP header “Content-Type: application/force-download” for mobile? %} 19 | Content-Type: application/force-download means "I, the web server, am going to lie to you (the browser) about what this file is so that you will not treat it as a PDF/Word Document/MP3/whatever and prompt the user to save the mysterious file to disk instead". It is a dirty hack that breaks horribly when the client doesn't do "save to disk". 20 | {% endblockquote %} 21 | 22 | 有位小伙伴就遇到了不奏效的情况： 23 | 24 | {% blockquote Jörg Wagner http://www.digiblog.de/2011/04/android-and-the-download-file-headers/ Android and the HTTP download file headers%} 25 | ATTENTION: 26 | If you use any of the lines below your download will probably NOT WORK on Android 2.1. 27 |
    28 | 29 | Content-Type: application/force-download 30 | Content-Disposition: attachment; filename=MyFileName.ZIP 31 | Content-Disposition: attachment; filename="MyFileName.zip" 32 | Content-Disposition: attachment; filename="MyFileName.ZIP"; 33 | {% endblockquote %} 34 | 35 | 那么，究竟怎么办呢？接下来描述我的同事和我遇到的问题。 36 | 37 | # 问题发现 38 | 39 | 最近接手了一个新项目，今天刚好有空熟悉一下之前的功能。于是打开线上地址，输入测试账号，进入一个列表页面，这个列表页面提供了下载数据为 Excel 文件的功能，点了一下`下载`链接，猛然发现，下载的文件名字怎么是 `download` ？为啥呢？ 40 | 41 | 我用的浏览器是 Chrome 51 ，系统是 OS EI Capitan 10.11.5 。 42 | 43 | 我一同事 Chrome 47，可以完全正常下载！ 44 | 45 | 先看看为啥我的浏览器不行吧！ 46 | 47 | # 第一步探索 48 | 49 | 打开 Chrome 开发者工具，查看 HTTP 请求，发现响应头部有如下两项： 50 | 51 | ``` 52 | Content-Type: application/octet-stream;charset=GBK 53 | Content-Disposition: attachment; filename="%D6%D0%CE%C4.xlsx 54 | ``` 55 | 56 | 噢，filename 那里多了一个双引号，去掉吧！ 57 | 58 | # 第二步探索 59 | 60 | 然而，引号去掉之后，问题依旧！什么情况？难道是 filename 需要引号包起来？ 61 | 62 | 好吧，包起来试试！ 63 | 64 | # 第三步探索 65 | 66 | 包起来后问题依旧，什么鬼？ 67 | 68 | 灵机一动，去看看别人怎么做的吧！于是找到别人网站一个下载 Excel 的页面，点击下载，发现响应 header 里面是这样的： 69 | 70 | ``` 71 | Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8 72 | Content-Disposition: inline;filename="%D6%D0%CE%C4.xlsx";filename*=utf-8''%D6%D0%CE%C4.xlsx 73 | ``` 74 | 75 | Content-Type 指明了具体的文件类型，然后 Content-Disposition 多了一个 `filename*=` ，这是什么东西？ `utf-8` 是什么编码？ 76 | 77 | 经过一堆胡乱搜索，猜测 utf-8 就是文件名的编码。为啥文件名要编码呢？呃，HTTP header 里面还未见过中文…… 78 | 79 | 好了，我们后端的代码大致做法是这样的： 80 | 81 | ```java 82 | response.addHeader("Content-Type", "application/octet-stream"); 83 | response.addHeader("Content-Disposition", "attachment; filename=\"" + new String(fileName.getBytes("GBK"), "ISO-8859-1") + "\".xlsx"); 84 | ``` 85 | 86 | 看起来，只需要用 `filename*=` 附上编码就行了，于是后端代码改成： 87 | 88 | ```java 89 | response.addHeader("Content-Type", "application/octet-stream"); 90 | response.addHeader("Content-Disposition", "attachment; filename=\"" + new String(fileName.getBytes("GBK"), "ISO-8859-1") + "\".xlsx;filename*=GBK''" + new String(fileName.getBytes("GBK"), "ISO-8859-1")); 91 | ``` 92 | 93 | 好了，我再点击下载，没问题！ 94 | 95 | # 第四步探索 96 | 97 | 看起来好像是 OK 了，但是，用 IE 试一下，又不正常了，文件名字不对了！ 98 | 99 | 为什么呢？别人网站在 IE 下都能正常下载的！现在主要有两处区别： 100 | 101 | - 我们的 Content-Type 没有写具体； 102 | - 我们使用了 GBK 编码。 103 | 104 | 一思索，感觉编码的嫌疑较大，为啥呢？因为对于文件下载，浏览器根本不用管文件内容是个啥，只需要按照二进制流写入本地磁盘就好了，并且，此处也只是文件名错了，下载下来的文件内容还是没问题的。 105 | 106 | 那就改编码吧，改成 UTF-8 ： 107 | 108 | ```java 109 | response.addHeader("Content-Type", "application/octet-stream"); 110 | response.addHeader("Content-Disposition", "attachment; filename=\"" + new String(fileName.getBytes("UTF-8"), "ISO-8859-1") + "\".xlsx;filename*=UTF-8''" + new String(fileName.getBytes("UTF-8"), "ISO-8859-1")); 111 | ``` 112 | 113 | 经测试，一切正常！ 114 | 115 | # 总结 116 | 117 | 在文件下载功能中，一般都会借助于这两个 header 来达到效果，那么两个 header 的具体作用是什么呢？ 118 | 119 | - Content-Type：告诉浏览器当前的响应体是个什么类型的数据。当其为 application/octet-stream 的时候，就说明 body 里面是一堆不知道是啥的二进制数据。 120 | - Content-Disposition：用于向浏览器提供一些关于如何处理响应内容的额外的信息，同时也可以附带一些其它数据，比如在保存响应体到本地的时候应该使用什么样的文件名。 121 | 122 | 细想一下， Content-Type 好像对于文件下载没什么作用？事实上的确如此。可是再想一下，如果浏览器不理会 Content-Disposition ，不下载文件怎么办？如果此时提供了 Content-Type ,至少浏览器还有机会根据具体的 Content-Type 对响应体进行处理。 123 | 124 | 可是为什么浏览器会不理会 Content-Disposition 呢？因为这个 Content-Disposition 头部并不是 HTTP 标准中的内容，只是被浏览器广泛实现的一个 header 而已。 125 | 126 | 话题转一转， Content-Disposition 的语法见[此处](https://tools.ietf.org/html/rfc6266#section-4.1)，其中相对重要的点此处罗列一下： 127 | 128 | - 常用的 disponsition-type 有 `inline` 和 `attachment` ： 129 | - inline：建议浏览器使用默认的行为处理响应体。 130 | - attachment：建议浏览器将响应体保存到本地，而不是正常处理响应体。 131 | - Content-Disposition 中可以传入 filename 参数，有两种形式： 132 | - filename=yourfilename.suffix：直接指明文件名和后缀。 133 | - filename*=utf-8''yourfilename.suffix：指定了文件名编码。其中，编码后面那对单引号中还可以填入内容，此处不赘述，可参考[规范](https://tools.ietf.org/html/rfc6266)。 134 | - 有些浏览器不认识 `filename*=utf-8''yourfilename.suffix` （估计因为这东西比较复杂），所以最好带上 `filename=yourfilename.suffix` 。 135 | -------------------------------------------------------------------------------- /themes/indigo/source/css/_partial/layout.less: -------------------------------------------------------------------------------- 1 | .container, 2 | #main { 3 | position: relative; 4 | } 5 | 6 | #menu-off { 7 | position: absolute; 8 | top: 0; 9 | left: 100%; 10 | .transition(.4s); 11 | } 12 | 13 | #menu { 14 | position: fixed; 15 | top: 0; 16 | left: 0; 17 | bottom: 0; 18 | z-index: 66; 19 | width: @menuWidth; 20 | min-height: 100%; 21 | background: #fff; 22 | will-change: left; 23 | box-shadow: @boxShadow; 24 | .transition(.4s); 25 | 26 | &.hide { 27 | .transform(translateX(-100%)); 28 | #menu-off { 29 | .transform(scale(0)); 30 | } 31 | + #main { 32 | padding-left: 0; 33 | } 34 | } 35 | 36 | .inner { 37 | position: relative; 38 | height: 100%; 39 | } 40 | 41 | .brand-wrap { 42 | background: @primaryColor; 43 | background-size: 100% 100%; 44 | } 45 | 46 | .brand { 47 | padding: 40px @menuPadding 2em; 48 | background: fade(@primaryColor, 50%); 49 | } 50 | 51 | .avatar { 52 | display: block; 53 | width: 80px; 54 | height: 80px; 55 | border: 2px solid #fff; 56 | border-radius: 50%; 57 | overflow: hidden; 58 | box-shadow: @boxShadow; 59 | } 60 | 61 | .introduce { 62 | margin: 1em 0 0; 63 | color: @textPrimaryColor; 64 | } 65 | 66 | .nickname { 67 | } 68 | 69 | .mail { 70 | display: inline-block; 71 | padding-top: 4px; 72 | color: @lightPrimaryColor; 73 | font-size: 13px; 74 | } 75 | 76 | .social { 77 | margin: 2em 0 0; 78 | 79 | a { 80 | opacity: .8; 81 | 82 | &.weibo { 83 | color: #DC5442; 84 | } 85 | 86 | &.github { 87 | color: #363F45; 88 | } 89 | 90 | &.rss { 91 | color: #FF9800; 92 | } 93 | 94 | &:hover { 95 | opacity: 1; 96 | } 97 | 98 | } 99 | 100 | } 101 | 102 | .nav { 103 | margin: 0; 104 | padding: 12px 0; 105 | list-style: none; 106 | line-height: @navH; 107 | overflow-y: auto; 108 | 109 | li { 110 | padding: 0 @menuPadding; 111 | 112 | .icon { 113 | padding-right: @menuPadding*1.5; 114 | } 115 | 116 | &:hover, 117 | &.active { 118 | background: rgba(0, 0, 0, 0.05); 119 | 120 | a, 121 | .icon { 122 | color: @primaryColor; 123 | } 124 | 125 | } 126 | 127 | } 128 | 129 | a { 130 | display: block; 131 | height: @navH; 132 | font-weight: 500; 133 | color: @secondaryTextColor; 134 | } 135 | 136 | } 137 | 138 | .footer { 139 | position: relative; 140 | width: 100%; 141 | font-size: 12px; 142 | font-family: @font-code; 143 | padding: 10px @menuPadding; 144 | border-top: 1px solid @borderColor; 145 | 146 | .rss { 147 | position: absolute; 148 | right: @menuPadding; 149 | top: 17px; 150 | color: #E64A19; 151 | } 152 | 153 | } 154 | 155 | } 156 | 157 | #main { 158 | padding-left: 240px; 159 | min-height: 100%; 160 | background: @backColor; 161 | .transition(.4s); 162 | } 163 | 164 | .body-wrap { 165 | padding: 30px 0 40px; 166 | } 167 | 168 | .container { 169 | width: 960px; 170 | margin: 0 auto; 171 | } 172 | 173 | .mask { 174 | position: fixed; 175 | top: 0; 176 | left: 0; 177 | bottom: 0; 178 | z-index: 88; 179 | width: 100%; 180 | height: 100%; 181 | background: #000; 182 | opacity: .5; 183 | filter: alpha(opacity=50); 184 | display: none; 185 | &.in { 186 | display: block; 187 | } 188 | } 189 | 190 | a[title="站长统计"] { 191 | display: none; 192 | } 193 | 194 | @media screen and (max-width:1240px) { 195 | .container { 196 | width: 720px; 197 | } 198 | 199 | #menu-off { 200 | display: none; 201 | } 202 | 203 | #menu { 204 | z-index: 99; 205 | box-shadow: none; 206 | .transform(translateX(-100%)); 207 | 208 | &.show { 209 | box-shadow: @boxShadow; 210 | .transform(none); 211 | } 212 | 213 | } 214 | 215 | #main { 216 | padding-left: 0; 217 | } 218 | 219 | } 220 | 221 | @media screen and (max-width:760px) { 222 | .container { 223 | width: 100%; 224 | padding: 20px 16px; 225 | } 226 | 227 | #menu { 228 | .brand { 229 | padding-top: 20px; 230 | padding-bottom: 1em; 231 | } 232 | 233 | .nav { 234 | line-height: @mNavH; 235 | 236 | a { 237 | height: @mNavH; 238 | } 239 | 240 | } 241 | 242 | } 243 | 244 | } 245 | -------------------------------------------------------------------------------- /source/_posts/一个 JavaScript.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 一个 JavaScript 3 | date: 2015-10-05 4 | tags: 5 | - JavaScript 6 | - ECMAScript 6 7 | --- 8 | 9 | ES6 使用了“一个 JavaScript ”的方式来避免版本化的问题。 10 | 11 | 那么，什么是“版本化”？什么又是“一个 JavaScript”呢？ 12 | 13 | 14 | ## 版本化 15 | 16 | 一般地，版本化就是说一门语言分成了不同的版本，新版本可以清理老版本中不好的特性，或者改变某些特性的运作方式。这就会导致新的代码无法在老引擎中运行，老的代码也不能在新引擎中运行。很可能某些代码就只能在特定版本的引擎中正常运行，然后针对不同版本的引擎，就要写不同的代码。 17 | 18 | 如果代码库升级到新的语言版本，就有两种处理方式。 19 | 20 | 第一种，彻底升级代码库中所有的代码。但是如果代码库的代码量很大的话，就很坑爹了。 21 | 22 | 第二种，让代码库包含多个语言版本的代码，根据指定的语言版本使用不同的执行引擎。对于 ES6 ，就可以使用媒体类型来标记 ES6 代码，比如在 HTTP 响应头中设置： 23 | 24 | ``` 25 | Content-Type: application/ecmascript;version=6 26 | ``` 27 | 28 | 也可以利用 ` 34 | ``` 35 | 36 | 也可以在代码内部标记版本（类似于 `'use strict'` ，放在 JavaScript 文件第一行）： 37 | 38 | ```js 39 | use version 6; 40 | ``` 41 | 42 | 这两种类型的标记方式都有问题：外部版本标记法很脆弱，容易丢失；内部版本标记法又会使代码显得杂乱。 43 | 44 | 一个更根本的问题是，针对不同的语言版本，要维护不同的执行引擎。这就产生了几个问题： 45 | 46 | * 引擎变得很臃肿，因为要实现所有版本的语法。对于语言分析工具也带来了同样的问题（比如类型检测， JSLint ）。 47 | * 开发者需要记住版本之间的不同点。 48 | * 代码变得更加难以重构，因为在移动代码的时候需要考虑语言版本的问题。 49 | 50 | 因此，应该避免版本化，尤其是 JavaScript 和 web 。 51 | 52 | ## 一个 JavaScript 53 | 54 | 既然版本化有这么多弊端，对于 JavaScript 和 web 来说都不适用，那么如何避免版本化呢？ 55 | 56 | 采用向后兼容的方式。这就是说我们必须放弃一些关于清理 JavaScript 语言的野心：不能引入破坏性的改变。向后兼容就是不移除已有特性，也不改变已有特性。该规则的口号就是：“不要破坏 web 代码”。 57 | 58 | 我们可以增加新的特性，使已有的特性更加强大。 59 | 60 | 这样一来，新的语言和引擎就不需要版本号了，因为仍然需要能够运行老的代码。 David Herman 称这种避免版本化的方式为“[一个 JavaScript ](http://exploringjs.com/es6/ch_one-javascript.html#one-js_1)”，它避免了 JavaScript 被拆分成不同的版本或者模式。甚至，“一个 JavaScript ”纠正了之前由于严格模式引入的 JavaScript 分支。 61 | 62 | “一个 Javascript ”并不是说就要完全放弃对语言的清理。相对于去掉已有的特性，可以引入新的干净的特性。 `let` 就是这样干的，它用于声明块级变量，是 `var` 的改进版。但是它并没有替换掉 `var` ，只是作为更好的方案与 `var` 并存。 63 | 64 | 将来某个时候，可能会清除掉不再有人使用的特性。实际上，一些 ES6 特性是通过调查 web 上的代码来设计的，比如下面两个： 65 | 66 | * `let` 声明很难引入到非严格模式中，因为在非严格模式下 let 并不是保留字。在 ES5 中，有且仅有一种形式的 let 变量是合法的： 67 | 68 | ```js 69 | let[x] = arr; 70 | ``` 71 | 72 | 调查发现， web 上没人会在非严格模式下这样使用 `let` 变量，这就使得 TC39 能够将 `let` 引入非严格模式中。 73 | 74 | ## 严格模式和 ES6 75 | 76 | ECMAScript 5 引入严格模式来对语言进行清理。在文件或者函数的第一行放入下面的内容就可以打开严格模式： 77 | 78 | ```js 79 | 'use strict'; 80 | ``` 81 | 82 | 严格模式带来了三种具有破坏性的改变： 83 | 84 | * 语法改变：一些之前合法的语法在严格模式下面是不允许的。例如： 85 | - 禁止 with 语句。它允许开发者添加任何对象到作用域链，这会减缓程序的执行速度，并且很难指出某个变量指向哪里。 86 | - 删除一个`独立的标识符`（是一个变量，而不是一个属性）是不允许的。 87 | - 函数只能在作用域的顶层声明。 88 | - 更多的保留字： implements interface let package private protected public static yield 。 89 | * 更多类型的错误。例如： 90 | - 给一个未声明的变量赋值会抛出 `ReferenceError` 。而在非严格模式下，这样做就会创建一个全局变量。 91 | - 修改只读的属性（比如字符串的长度属性）会抛出 `TypeError` 。而在非严格模式下，不会产生任何效果。 92 | * 不同的语义：在严格模式下，一些结构体会表现得不一样。例如： 93 | - `arguments` 不再随着当前参数值的改变而改变。 94 | - 在非方法的函数中 `this` 为 `undefined` 。在非严格模式下，它指向全局对象（ window ）。如果调用一个构造器的时候没有使用 new ，就会创建一些全局变量。 95 | 96 | 从严格模式的这些破坏性改变中可以看出，版本化是很棘手的：即便能够制定出一个干净版本的 JavaScript ，也很难被大家接受。主要原因在于会破坏很多现有的代码，会减缓执行速度，并且引入到文件很繁琐（更不用说交互式的命令行）。 97 | 98 | ## 支持松散（非严格）模式 99 | 100 | `一个 JavaScript` 意味着我们不能放弃松散模式：此模式将会继续存在（例如在 HTML 属性中）。因此，我们不能基于严格模式来构建 ECMAScript 6 ，必须同时在严格模式和非严格模式（又称为松散模式）中都增加相同的特性。否则，严格模式就会成为语言的一个不同版本，回到了版本化的方式。 101 | 102 | 但是很不幸，有两个特性很难引入松散模式： `let` 声明和块级函数声明。让我们看看为什么很难引入和如何引入。 103 | 104 | ## 松散模式中的 `let` 声明 105 | 106 | `let` 使你能够声明块级变量。这很难被引入到松散模式，因为 `let` 仅在严格模式下是保留字。也就是说，下面两条语句在 ES5 的松散模式下是合法的： 107 | 108 | ```js 109 | var let = []; 110 | let[x] = 'abc'; 111 | ``` 112 | 113 | 在 ECMASCript 6 的严格模式下，第一行就会抛出异常。因为使用了 `let` 作为变量名。然后第二行会被解析为一个 `let` 变量声明（使用解构）。 114 | 115 | 在 ECMAScript 6 的松散模式下，第一行不会抛出异常，但是第二行依然被解析为一个 `let` 声明。这种使用 `let` 的方式在 web 上是极少见的，因此 ES6 可以直接这样来解析。 ES5 松散模式下的其他 `let` 声明的书写方式不会被误解： 116 | 117 | ```js 118 | let foo = 123; 119 | let {x,y} = computeCoordinates(); 120 | ``` 121 | 122 | ## 松散模式下的块级函数声明 123 | 124 | ECMAScript 5 严格模式中，是禁止在块中声明函数的；在松散模式下，却可以这么做，但是没说这样做会发生什么。因此，很多 JavaScript 实现都支持块级函数声明，但是处理方式是不一样的。 125 | 126 | ECMAScript 6 想要块中的函数声明本地化（即该函数的作用域就在该块中）。作为 ES5 严格模式的升级，这是没问题的，但是会破坏一些松散模式的代码。因此， ES6 为浏览器提供了“[ web 遗留的兼容语义](http://www.ecma-international.org/ecma-262/6.0/#sec-block-level-function-declarations-web-legacy-compatibility-semantics)”，允许块中的函数声明在函数作用域范围内存在。 127 | 128 | ## 其它关键字 129 | 130 | 标识符 `yield` 和 `static` 仅在 ES5 的严格模式下是保留字。 ECMAScript 6 使用上下文相关的语法规则来使它们在松散模式下起作用： 131 | 132 | * 在松散模式下， `yield` 仅在生成器函数中是保留字。 133 | * `static` 现在仅用于类字面量中，类字面中默认就是严格模式的（见下文）。 134 | 135 | ## 隐式的严格模式 136 | 137 | 在 ECMAScript 6 中，模块体和类体默认就是严格模式的–没必要使用 `use strict` 标记。考虑到将来所有的代码都会位于模块中， ECMAScript 6 有效地将整个语言升级到了严格模式。 138 | 139 | 其它语法结构（比如箭头函数和生成器函数）本来也应该隐式地为严格模式，但是考虑到通常情况下这些结构都很小，在非严格模式下使用它们就会造成代码中两种模式的碎片化切换。类，尤其是模块一般是足够大的，这样一来就可以忽略两种模式的碎片化切换问题了。 140 | 141 | ## 无法修复的东西 142 | 143 | `一个 JavaScript `的缺陷就是无法修复已有的怪异行为，尤其是下面这两个。 144 | 145 | 第一个， `typeof null` 应该返回字符串 `null` 而不是 `object` ，修正这个就会破坏已有的代码。而另一方面，给新类型的操作数定义新的操作结果是没问题的， ECMAScript 6 的 Symbol 就是一个例子： 146 | 147 | ``` 148 | > typeof Symbol.iterator 149 | 'symbol' 150 | ``` 151 | 152 | 第二个，全局对象（浏览器中的 `window` 对象）不应该在变量作用域链，现在修正这个也太晚了。但是至少，在模块中不会直接处于全局作用域下，并且 `let` 永远不会创建全局对象属性，甚至在全局作用域下使用也不会。 153 | 154 | ## 总结 155 | 156 | `一个 JavaScript `意思就是使 ECMAScript 6 完全地向后兼容，很高兴这获得了成功。尤其是模块隐式就是严格模式的（这样一来我们大部分的代码都会处于严格模式下）。 157 | 158 | 在短期内，对于制定 ES6 规范和引擎实现来说，给严格模式和松散模式添加 ES6 的语法结构会耗费更多的精力。从长远来看，规范和引擎将会受益于语言不分叉（更少的膨胀等等）。开发人员会立即从一个 JavaScript 中获得好处，因为开始使用 ECMAScript 6 变得更加容易。 159 | -------------------------------------------------------------------------------- /site/tags/vscode/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tag: vscode | yibuyisheng | 偶尔玩玩 Java 的前端工程师 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
    29 | 30 | 87 |
    88 | 98 |
    99 |
    100 |

    yibuyisheng

    101 |
    偶尔玩玩 Java 的前端工程师
    102 |
    103 |
    104 | 105 |
    106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 |
    114 |
    115 | 2016 116 |
    117 |
    118 | 119 |
    120 |
    121 |
    122 |
    123 | 124 | 125 | 126 | 127 |

    128 | 实现第一个 vscode 扩展 129 |

    130 | 131 | 132 | 133 | 134 |
    135 |
    136 |
    137 | 138 | 141 | 142 | 143 | 144 | 145 |
    146 |
    147 |
    148 | 149 | 150 |
    151 |
    152 | 153 | 154 | 155 | 156 |
    157 |
    158 |
    159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /site/tags/数据库/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tag: 数据库 | yibuyisheng | 偶尔玩玩 Java 的前端工程师 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
    29 | 30 | 87 |
    88 | 98 |
    99 |
    100 |

    yibuyisheng

    101 |
    偶尔玩玩 Java 的前端工程师
    102 |
    103 |
    104 | 105 |
    106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 |
    114 |
    115 | 2016 116 |
    117 |
    118 | 119 |
    120 |
    121 |
    122 |
    123 | 124 | 125 | 126 | 127 |

    128 | oracle 安装 129 |

    130 | 131 | 132 | 133 | 134 |
    135 |
    136 |
    137 | 138 | 141 | 142 | 143 | 144 | 145 |
    146 |
    147 |
    148 | 149 | 150 |
    151 |
    152 | 153 | 154 | 155 | 156 |
    157 |
    158 |
    159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /site/tags/Oracle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tag: Oracle | yibuyisheng | 偶尔玩玩 Java 的前端工程师 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
    29 | 30 | 87 |
    88 | 98 |
    99 |
    100 |

    yibuyisheng

    101 |
    偶尔玩玩 Java 的前端工程师
    102 |
    103 |
    104 | 105 |
    106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 |
    114 |
    115 | 2016 116 |
    117 |
    118 | 119 |
    120 |
    121 |
    122 |
    123 | 124 | 125 | 126 | 127 |

    128 | oracle 安装 129 |

    130 | 131 | 132 | 133 | 134 |
    135 |
    136 |
    137 | 138 | 141 | 142 | 143 | 144 | 145 |
    146 |
    147 |
    148 | 149 | 150 |
    151 |
    152 | 153 | 154 | 155 | 156 |
    157 |
    158 |
    159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | --------------------------------------------------------------------------------