blogConfig
This commit is contained in:
jiangzhixiong
commit
d12218f8ba
85
_config.yml
Executable file
85
_config.yml
Executable file
@ -0,0 +1,85 @@
|
||||
# Hexo Configuration
|
||||
## Docs: https://hexo.io/docs/configuration.html
|
||||
## Source: https://github.com/hexojs/hexo/
|
||||
|
||||
# Site
|
||||
title: Jzxer's Blog
|
||||
subtitle:
|
||||
description: web全栈工程师,音乐,电吉他,摇滚,html,css,javascript
|
||||
author: Jzxer
|
||||
language: zh-CN
|
||||
timezone:
|
||||
|
||||
# URL
|
||||
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
|
||||
url: /
|
||||
root: /
|
||||
permalink: :title.html
|
||||
permalink_defaults:
|
||||
|
||||
# Directory
|
||||
source_dir: source
|
||||
public_dir: public
|
||||
tag_dir: tags
|
||||
archive_dir: archives
|
||||
category_dir: categories
|
||||
code_dir: downloads/code
|
||||
i18n_dir: :lang
|
||||
skip_render:
|
||||
|
||||
# Writing
|
||||
new_post_name: :title.md # File name of new posts
|
||||
default_layout: post
|
||||
titlecase: false # Transform title into titlecase
|
||||
external_link: true # Open external links in new tab
|
||||
filename_case: 0
|
||||
render_drafts: false
|
||||
post_asset_folder: false
|
||||
relative_link: false
|
||||
future: true
|
||||
highlight:
|
||||
enable: false
|
||||
line_number: true
|
||||
auto_detect: false
|
||||
tab_replace:
|
||||
|
||||
# Category & Tag
|
||||
default_category: uncategorized
|
||||
category_map:
|
||||
tag_map:
|
||||
|
||||
prism_plugin:
|
||||
mode: 'preprocess' # realtime/preprocess
|
||||
theme: 'default'
|
||||
line_number: false # default false
|
||||
|
||||
# Date / Time format
|
||||
## Hexo uses Moment.js to parse and display date
|
||||
## You can customize the date format as defined in
|
||||
## http://momentjs.com/docs/#/displaying/format/
|
||||
date_format: YYYY-MM-DD
|
||||
time_format: HH:mm:ss
|
||||
|
||||
search:
|
||||
path: search.xml
|
||||
field: post
|
||||
|
||||
# Pagination
|
||||
## Set per_page to 0 to disable pagination
|
||||
per_page: 10
|
||||
pagination_dir: page
|
||||
|
||||
# Extensions
|
||||
## Plugins: https://hexo.io/plugins/
|
||||
## Themes: https://hexo.io/themes/
|
||||
theme: material
|
||||
|
||||
# Deployment
|
||||
## Docs: https://hexo.io/docs/deployment.html
|
||||
deploy:
|
||||
- type: git
|
||||
repo: https://git.coding.net/jzxer/jzxer.git
|
||||
branch: master
|
||||
- type: git
|
||||
repo: https://github.com/j710328466/j710328466.github.io.git
|
||||
branch: master
|
||||
29
package.json
Executable file
29
package.json
Executable file
@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "hexo-site",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"hexo": {
|
||||
"version": "3.3.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"dplayer": "^1.4.0",
|
||||
"ftpsync": "^0.2.0",
|
||||
"hexo": "^3.2.0",
|
||||
"hexo-deployer-ftpsync": "^0.1.1",
|
||||
"hexo-deployer-git": "^0.3.0",
|
||||
"hexo-generator-archive": "^0.1.4",
|
||||
"hexo-generator-category": "^0.1.3",
|
||||
"hexo-generator-index": "^0.2.0",
|
||||
"hexo-generator-search": "^2.1.1",
|
||||
"hexo-generator-tag": "^0.2.0",
|
||||
"hexo-helper-post-top": "^0.0.1",
|
||||
"hexo-helper-qrcode": "^1.0.2",
|
||||
"hexo-prism-plugin": "^2.1.2",
|
||||
"hexo-renderer-ejs": "^0.2.0",
|
||||
"hexo-renderer-marked": "^0.2.10",
|
||||
"hexo-renderer-stylus": "^0.3.1",
|
||||
"hexo-server": "^0.2.0",
|
||||
"hexo-tag-aplayer": "^2.0.1",
|
||||
"hexo-tag-dplayer": "^0.1.7"
|
||||
}
|
||||
}
|
||||
4
scaffolds/draft.md
Executable file
4
scaffolds/draft.md
Executable file
@ -0,0 +1,4 @@
|
||||
---
|
||||
title: {{ title }}
|
||||
tags:
|
||||
---
|
||||
4
scaffolds/page.md
Executable file
4
scaffolds/page.md
Executable file
@ -0,0 +1,4 @@
|
||||
---
|
||||
title: {{ title }}
|
||||
date: {{ date }}
|
||||
---
|
||||
5
scaffolds/post.md
Executable file
5
scaffolds/post.md
Executable file
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: {{ title }}
|
||||
date: {{ date }}
|
||||
tags:
|
||||
---
|
||||
1
source/CNAME
Executable file
1
source/CNAME
Executable file
@ -0,0 +1 @@
|
||||
jzxer.cn
|
||||
94
source/_data/gallery.yml
Executable file
94
source/_data/gallery.yml
Executable file
@ -0,0 +1,94 @@
|
||||
木屋乐队合照:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/psb.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/psb.jpg
|
||||
descr: "虽然解散，但是曾经拥有"
|
||||
|
||||
2017.04.10:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/2.png
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/2.png
|
||||
descr: "2014级研一608"
|
||||
|
||||
德普:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/3.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/3.jpg
|
||||
descr: "成功的演员和艺术家"
|
||||
|
||||
2017.04.03:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/4.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/4.jpg
|
||||
descr: "骑车爬梅岭（作死）"
|
||||
|
||||
2017.03.08:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/6.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/6.jpg
|
||||
descr: "骑着小黄车去种田"
|
||||
|
||||
2017.01.18:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/7.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/7.jpg
|
||||
descr: "许多年不见的初中同学"
|
||||
|
||||
2016.12.31:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/8.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/8.jpg
|
||||
descr: "我的跨年方式"
|
||||
|
||||
我的另一半生命:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/9.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/9.jpg
|
||||
descr: "samick GTR，橘子，epphone，RP155"
|
||||
|
||||
三哥:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/10.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/10.jpg
|
||||
descr: "记得是初中war3认识的"
|
||||
|
||||
2016.10.28:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/12.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/12.jpg
|
||||
descr: "英语俱乐部出演"
|
||||
|
||||
艰苦的环境:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/14.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/14.jpg
|
||||
descr: "虽艰苦 但快乐"
|
||||
|
||||
2016.12.29:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/16.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/16.jpg
|
||||
descr: "建筑工程学院表演"
|
||||
|
||||
2016.12.30:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/psb%20%281%29.jpg
|
||||
descr: "软件信工学院出演"
|
||||
2016.05.04:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/psb%20%282%29.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/psb%20%282%29.jpg
|
||||
descr: "最后那个就素偶"
|
||||
|
||||
2016.01.16:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/psb%20%283%29.jpg
|
||||
descr: "赚钱不易 且花且珍惜"
|
||||
|
||||
2015.11.05:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/psb%20%285%29.jpg
|
||||
descr: "店面装修的时候"
|
||||
|
||||
2014.10.18:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/psb%20%286%29.jpg
|
||||
descr: "真是一个好天气"
|
||||
|
||||
2014.9.25:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/psb%20%287%29.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/psb%20%287%29.jpg
|
||||
descr: "刚进大学就要和外教嘎英语"
|
||||
|
||||
2013.06.27:
|
||||
full_link: http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg
|
||||
thumb_link: http://orjedzer5.bkt.clouddn.com/psb%20%289%29.jpg
|
||||
descr: "鼓浪屿之行"
|
||||
|
||||
4
source/_data/links.yml
Executable file
4
source/_data/links.yml
Executable file
@ -0,0 +1,4 @@
|
||||
Name:
|
||||
link: http://example.com
|
||||
avatar: http://example.com/avatar.png
|
||||
descr: "这是一个描述"
|
||||
16
source/_posts/Amani-间奏-1.md
Executable file
16
source/_posts/Amani-间奏-1.md
Executable file
@ -0,0 +1,16 @@
|
||||
---
|
||||
title: Amani-间奏
|
||||
date: 2017-03-28 10:26:12
|
||||
tags: [音乐, 自录]
|
||||
categories: 音乐
|
||||
---
|
||||
|
||||
{% dplayer
|
||||
"url=http://orjedzer5.bkt.clouddn.com/amani%EF%BC%88%E9%97%B4%E5%A5%8F%EF%BC%89.mp4"
|
||||
"api=http://dplayer.daoapp.io"
|
||||
"id=1"
|
||||
"loop=yes"
|
||||
"theme=#fff"
|
||||
"autoplay=true"
|
||||
"token=tokendemo"
|
||||
%}
|
||||
102
source/_posts/GIT使用攻略.md
Executable file
102
source/_posts/GIT使用攻略.md
Executable file
@ -0,0 +1,102 @@
|
||||
---
|
||||
title: git使用技巧
|
||||
date: 2017-04-15 19:59:16
|
||||
tags: [git, github]
|
||||
categories: git
|
||||
---
|
||||
|
||||
# 流程
|
||||
|
||||
## git连接GitHub
|
||||
|
||||
### 设置Git的信息(如果是第一次的话)
|
||||
> git config --global user.name "名字"
|
||||
> git config --global user.email "邮箱"
|
||||
|
||||
### 生成密匙(很重要)
|
||||
这是你连接的必要部分，就相当于账号的登录密码，有这个你才能对GitHub上的项目进行操作
|
||||
> ssh-keygen -t rsa -C "710328466@qq.com"
|
||||
|
||||
### 配置密匙
|
||||
|
||||
* 将获取的密钥放到GitHub->setting下的SSH and GPG keys里面
|
||||
|
||||
### 新建项目
|
||||
|
||||
* 进入首页，新建一个repository
|
||||
|
||||
* 填写相应信息
|
||||
> Repository name: 仓库名称
|
||||
> Description(可选): 仓库描述介绍
|
||||
> Public, Private : 仓库权限（公开共享，私有或指定合作者）
|
||||
> Initialize this repository with a README: 添加一个README.md
|
||||
> gitignore: 不需要进行版本管理的仓库类型，对应生成文件.gitignore
|
||||
> license: 证书类型，对应生成文件LICENSE
|
||||
|
||||
### 下载 git bash
|
||||
#
|
||||
* 下载地址去百度
|
||||
|
||||
### 将 gitHub 上的仓库克隆到本地
|
||||
* git clone https://github.com/j710328466/yourItem.git（j710328466/yourBlog.git替换成你博客的地址）
|
||||
> 这个步骤以后你的本地项目文件夹下面就会多出个文件夹，该文件夹名即为你github上面的项目名，如图我多出了个yourItem文件夹，我们把本地项目文件夹下的所有文件（除了新多出的那个文件夹不用），其余都复制到那个新多出的文件夹下
|
||||
|
||||
### cd Test 打开Test文件夹
|
||||
* git add . (添加所有文件)
|
||||
> git add readme.md
|
||||
|
||||
* git commit -m "信息"
|
||||
|
||||
* git push -u origin master 将本地文件上传到git仓库
|
||||
> 如果push -u....报错，你就改成git pull --rebase origin master,重新push就可以了
|
||||
|
||||
## git 基本操作
|
||||
### touch 文件名
|
||||
添加到缓存
|
||||
|
||||
### git status
|
||||
> 查看该项目改变的文件
|
||||
* git status
|
||||
|
||||
### git diff
|
||||
> 默认是暂未缓存的改动，这个可以查自己目前版本和上一个版本的改动位置
|
||||
|
||||
#### git diff --cached
|
||||
> 查看已缓存的改动
|
||||
|
||||
#### git diff HEAD
|
||||
> 查看已缓存与未缓存的所有改动
|
||||
|
||||
#### git diff --stat
|
||||
> 显示摘要而非整个diff
|
||||
|
||||
### git rm
|
||||
> 将条目从缓存区中移除
|
||||
|
||||
### git mv
|
||||
> 用于移动或重命名一个文件，目录
|
||||
```
|
||||
git add README
|
||||
git mv README README.md
|
||||
ls
|
||||
```
|
||||
|
||||
## git 分支管理
|
||||
### git branch
|
||||
* 查看当前分支
|
||||
> 后面加单词，即是创建分支: git branch day1
|
||||
|
||||
### 删除分支
|
||||
> git branch -d testing
|
||||
|
||||
### git checkout ‘分支名’
|
||||
> 切换分支
|
||||
|
||||
### git checkout -b newtest
|
||||
>创建新分支并切换到该分支下
|
||||
|
||||
### git merge 分支
|
||||
> 合并分支
|
||||
|
||||
|
||||
|
||||
26
source/_posts/badboy.md
Executable file
26
source/_posts/badboy.md
Executable file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: badboy
|
||||
date: 2017-07-30 10:29:30
|
||||
tags: [badBoy]
|
||||
---
|
||||
|
||||
### 关于坏男人的定义
|
||||
* 很多人容易把坏男人很狼联系起来，事实上确实很有道理。健康的狼与健康的人有着许多共同点。比如敏锐的直觉，好玩的天性，都充满好奇心，并且坚韧，善于适应不断变化的环境，一样的勇敢。以及根植在骨子里的忠诚
|
||||
|
||||
* 但是往往会被冠以“狡猾” 和“危险”的名号
|
||||
|
||||
* 是抽烟，逃课，打架，玩世不恭，对感情暧昧，吊儿郎当的度日子，看上去没有丝毫的进取心
|
||||
|
||||
### 坏，是一种生命力的体现
|
||||
* 他可能带着你逃单，然后给气喘吁吁的你递上一瓶水，也可能在你蹦极吓得流泪的时候一脚把你踹下去，他可能为你和别人打架被打成狗，他有着高度的想象力和执行力
|
||||
|
||||
* 大部分人庸庸碌碌的过着日子，只有少部分人愿意打破自己的舒适区，去尝试一些未知的甚至是危险的事物。
|
||||
|
||||
* 坏，他不意味着疯狂或是失控，更不意味着矫正，放弃原本的社会规则，或者是背离人性。刚好相反，它非常的宽容，对过往的一切能够兼容并蓄。它非常的积极，对未知的一切都能够无所畏惧
|
||||
|
||||
### 小结
|
||||
* 吹嘘了这么久的自己，有些东西确实很有代表性。有很多人说我有一种骨子里坏坏的感觉，但我只想说，那是我脑海里追求的生活方式，从表面上体现了出来。但是坏的是表现，不是本质
|
||||
|
||||
我不喜欢平凡，喜欢追求自己想要的生活，即使三十年，四十年后，我也不会停下追寻的脚步，因为我知道，人的一生很短暂，你怎么样为自己的一生保留一些永恒的东西？现在的我没有背景，所以一切只能靠自己的双手去创造。
|
||||
|
||||
* 平凡的人因为有了自己的思想而伟大。不随波逐流将会是我一生的追求
|
||||
20
source/_posts/commonJS和AMD-CMD.md
Executable file
20
source/_posts/commonJS和AMD-CMD.md
Executable file
@ -0,0 +1,20 @@
|
||||
---
|
||||
title: commonJS和AMD/CMD
|
||||
date: 2017-08-23 16:49:51
|
||||
tags: [web前端, js]
|
||||
---
|
||||
|
||||
### 一. CommonJS
|
||||
node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。NodeJS是CommonJS规范的实现，webpack 也是以CommonJS的形式来书写。
|
||||
> var math = require('math')
|
||||
|
||||
#### 1. 原理
|
||||
浏览器兼不兼容commonJS，在于是否缺少这几个环境变量
|
||||
> * module
|
||||
> * export
|
||||
> * require
|
||||
> * global
|
||||
|
||||
#### 2. browsertify
|
||||
将 npm包 编译成可以被 html 页面引入的 js模块
|
||||
> 一个类似的库：browser-unpack
|
||||
74
source/_posts/css的命名规范.md
Executable file
74
source/_posts/css的命名规范.md
Executable file
@ -0,0 +1,74 @@
|
||||
---
|
||||
title: css的命名规范
|
||||
date: 2017-07-17 10:51:20
|
||||
tags: [css, web前端]
|
||||
categories: web前端
|
||||
---
|
||||
|
||||
### 关于 css 的一些命名规范
|
||||
* css设计模式：SMACSS
|
||||
* BEM 命名规范
|
||||
* javascript Hook
|
||||
|
||||
### SMACSS
|
||||
首先，它定义了五种样式：
|
||||
* base（基本）
|
||||
* layout（布局）
|
||||
* module（模块）
|
||||
* state（状态）
|
||||
* theme（皮肤）
|
||||
|
||||
#### base（基本）
|
||||
* 在该样式中不适用class，id等选择，只对标签元素本身做设定，可以有属性选择器和伪类：
|
||||
```
|
||||
html{}
|
||||
input[type=text] {}
|
||||
a:hover {}
|
||||
```
|
||||
|
||||
#### layout(布局)
|
||||
* 整个网站的【大架构】的外观，类似header，footer
|
||||
```
|
||||
#header {}
|
||||
.sidebar {}
|
||||
```
|
||||
> 通常只有一个选择器，一个id，或一个class
|
||||
|
||||
#### module（组件）
|
||||
* 可复用组件，不需要任何prefix，
|
||||
|
||||
#### partial
|
||||
比 layout 范围小，可以是特定单一领域下特别的设定，通常会将名称加在子 class 作为 prefix
|
||||
```
|
||||
.nav--main_item {}
|
||||
```
|
||||
|
||||
#### state
|
||||
* 定义状态，例如：.active, .on
|
||||
```
|
||||
<ul>
|
||||
<li> </li>
|
||||
<li class="active"> </li>
|
||||
<ul>
|
||||
```
|
||||
> .is-active 比.active 来的好读
|
||||
|
||||
#### skin（皮肤）
|
||||
* 画面上所有主视觉的定义，例如：border-color，background-image，font-family等，负责大架构上的视觉样式。
|
||||
|
||||
### BEM 命名规范
|
||||
* BEM 即 block，element，modifier 缩写
|
||||
* 将 block 区块作为起始开头，element为 block下的元素，modifier为该元素的属性。
|
||||
* block 和 element 用 __ 双下划线区分， 不同的modifier 则用 两个--区分，一个-表示这个 class 不依赖任何 block 或者 element ，是个独立的存在：.page-container
|
||||
示范：
|
||||
```
|
||||
.sidebar {
|
||||
.sidebar--left__section {
|
||||
.sidebar--left__section--header {}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### javascript hook
|
||||
* 我理解的是，在 css 选择器的前缀加个动作或者 “js”，来表示该标签被 js 调用过
|
||||
> html 里 class 之间用两个空格比一个空格好阅读
|
||||
19
source/_posts/div-section-article.md
Executable file
19
source/_posts/div-section-article.md
Executable file
@ -0,0 +1,19 @@
|
||||
---
|
||||
title: 'div,section,article'
|
||||
date: 2017-06-28 17:24:19
|
||||
tags: [web前端, 语义化]
|
||||
---
|
||||
|
||||
### div
|
||||
* div在html早期版本就支持了，section和article是html5提出的两个语义化标签。如果只是针对一个块内容做样式化，三者并无区别。
|
||||
|
||||
### section
|
||||
* 作为语义化标签，section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。
|
||||
|
||||
### article
|
||||
* 对于article标签来说，无论从结构上还是内容上来说，article 本身就是独立的、完整的。有个最简单的判断方法是看这段内容脱离了所在的语境，是否还是完整的、独立的，如果是，则应该用article标签。
|
||||
|
||||
### 小结
|
||||
> 合理的语义化标签，可以更好的方便seo，也不知道为什么，我现在更喜欢细节的东西
|
||||
|
||||
* div < section < article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。
|
||||
78
source/_posts/hexo搭建博客.md
Executable file
78
source/_posts/hexo搭建博客.md
Executable file
@ -0,0 +1,78 @@
|
||||
---
|
||||
title: hexo 搭建博客初体验
|
||||
tags: [hexo, github]
|
||||
categories: hexo
|
||||
---
|
||||
|
||||
# hexo 搭建博客初体验
|
||||
|
||||
## 安装 hexo
|
||||
> cnpm i hexo-cli -g
|
||||
报错的话就输入
|
||||
> cnpm i hexo --save
|
||||
查看安装是否成功
|
||||
> hexo -v
|
||||
|
||||
|
||||
## hexo配置
|
||||
|
||||
### hexo 初始化
|
||||
> hexo init
|
||||
然后
|
||||
> cnpm install
|
||||
到这里你差不多就可以看到效果了，如果你要连接 GitHub，就要往下继续
|
||||
|
||||
### 连接 GitHub
|
||||
在根目录打开 vim _config.yml，翻到最下面，改成我这样子的
|
||||
* 如果你是用 github 仓库
|
||||
> deploy:
|
||||
type: git
|
||||
repo: https://git.coding.net/jzxer/jzxer.git
|
||||
branch: master
|
||||
* 如果你是用 coding 仓库
|
||||
> deploy:
|
||||
type: coding
|
||||
repo: https://github.com/j710328466/j710328466.github.io.git
|
||||
branch: master
|
||||
|
||||
### 安装依赖包
|
||||
|
||||
> npm install hexo-deployer-git --save
|
||||
|
||||
## 开始
|
||||
|
||||
```
|
||||
创建一篇新文章
|
||||
$ hexo new "My New Post"
|
||||
|
||||
监听
|
||||
$ hexo server
|
||||
|
||||
打包
|
||||
$ hexo generate
|
||||
|
||||
上传
|
||||
$ hexo deploy
|
||||
```
|
||||
|
||||
## 主题配置
|
||||
|
||||
* 打开根目录下的vim _config.yml
|
||||
> theme: material
|
||||
> 将主题改成你喜欢的
|
||||
|
||||
## 主题推荐
|
||||
|
||||
* 每个不同的主题会需要不同的配置，主题配置文件在主题目录下的 _config.yml。有两个比较好的主题推荐给大家。
|
||||
|
||||
### Yilia
|
||||
* Yilia 是为 hexo 2.4+ 制作的主题。
|
||||
* 崇尚简约优雅，以及极致的性能。
|
||||
|
||||
### NexT
|
||||
* 目前Github上Star最高的Hexo主题，支持几种不同的风格。
|
||||
* 作者提供了非常完善的配置说明。
|
||||
|
||||
### Material
|
||||
* 原之质，物之渊
|
||||
* 就是我现在用的这款，简洁大方，响应式设计。
|
||||
49
source/_posts/hybird.md
Executable file
49
source/_posts/hybird.md
Executable file
@ -0,0 +1,49 @@
|
||||
---
|
||||
title: hybird
|
||||
date: 2017-10-11 16:56:01
|
||||
tags:
|
||||
---
|
||||
|
||||
### app分为几类？
|
||||
* native：语言object-c，java，页面存放在本地
|
||||
* hybird：语言object-c + html，受限于UIview
|
||||
* web：语言html，页面放在服务器，受限于UIview
|
||||
|
||||
### native APP
|
||||
#### 优点
|
||||
* 运行效率高
|
||||
* 可调用各种设备资源
|
||||
|
||||
#### 缺点
|
||||
* 人力资源成本高
|
||||
* 发布速度慢
|
||||
* 更新版本的问题
|
||||
* 实现图文混排很多坑
|
||||
|
||||
### web APP
|
||||
#### 优点
|
||||
* 开发成本低
|
||||
* 使用范围广
|
||||
* 方便快捷部署，不需要安装
|
||||
* 用户总能访问最新的，迭代更容易
|
||||
* 可被搜索引擎搜索带来流量
|
||||
|
||||
#### 缺点
|
||||
* 体验短期无法超越 native
|
||||
* 不支持离线模式
|
||||
* 消息推送不及时
|
||||
* 调用本地文件系统能力较弱
|
||||
* 较差和较慢的性能体验
|
||||
* 支持图形和动画效果较差
|
||||
* 不适用于应用商店盈利
|
||||
* 限制用户功能（gps，相机等）
|
||||
|
||||
### hybird APP
|
||||
#### 优点
|
||||
* 综合开发效率
|
||||
* 发版本更方便
|
||||
|
||||
#### 缺点
|
||||
* 运行效率中等
|
||||
* 需要一点原生代码
|
||||
|
||||
179
source/_posts/js中的一些方法和函数.md
Executable file
179
source/_posts/js中的一些方法和函数.md
Executable file
@ -0,0 +1,179 @@
|
||||
---
|
||||
title: js中的一些方法和函数
|
||||
date: 2017-10-22 09:45:11
|
||||
tags: [js]
|
||||
---
|
||||
|
||||
* 列举了经常碰到的和比较偏的一些方法和函数
|
||||
|
||||
### 方法
|
||||
#### subStr(start, length)
|
||||
可以在字符串中抽取从 start下标开始的指定数目的字符
|
||||
> length可以不要，代表整个截取的长度
|
||||
|
||||
#### slice(start, end)
|
||||
可以在数组 start 开始截取指定长度的数组，如果为负数就从最后一个开始，subStr也是
|
||||
> end 不包括end本身
|
||||
|
||||
#### split(separator, howmany)
|
||||
把字符串分割成字符串数组
|
||||
> separator 可以是字符串，也可以是正则，howmany 表示截取的长度不超过该数量
|
||||
|
||||
#### splice(index, howmany, item1...,itemX)
|
||||
从数组中添加/删除项目，然后返回被删除的项目
|
||||
> index 表示删除的位置，howmany 表示删除几项，如果为0表示不删除，item代表插入的项目
|
||||
|
||||
#### replace('old', new)
|
||||
把字符串中老的字符替换成新的字符
|
||||
|
||||
#### str1.concat(str2...strX)
|
||||
在原来的字符串基础上连接多个字符串，也可以连接数组
|
||||
|
||||
#### str.match(Exp)
|
||||
找到一个或多个和正则表达式的匹配
|
||||
|
||||
#### str.search(Exp)
|
||||
找到第一次出现正则表达式或者字符串的地方，返回该位置的下标，如果没有就返回-1
|
||||
|
||||
#### toUpperCase() toLowerCase()
|
||||
字符串大小写切换
|
||||
|
||||
#### trim（）
|
||||
去除字符串两边的空白
|
||||
|
||||
#### arr.every(check)
|
||||
判断数组中的所有项是否都符合条件
|
||||
|
||||
#### arr.fill('str')
|
||||
用字符串固定替换数组的元素
|
||||
|
||||
#### oldArr.filter(function(currentValue, index, newArr), thisValue)
|
||||
创建一个新的数组 newArr, 新数组是通过检测的所有oldArr元素的集合
|
||||
|
||||
#### arr.join(separator)
|
||||
将数组转换成字符串，并用separator 分开，可以省略
|
||||
|
||||
#### reverse()
|
||||
反转字符串或数组
|
||||
|
||||
### 函数
|
||||
|
||||
#### 判断客户端手机型号
|
||||
```
|
||||
var BrowserInfo = {
|
||||
userAgent: navigator.userAgent.toLowerCase()
|
||||
isAndroid: Boolean(navigator.userAgent.match(/android/ig)),
|
||||
isIphone: Boolean(navigator.userAgent.match(/iphone|ipod/ig)),
|
||||
isIpad: Boolean(navigator.userAgent.match(/ipad/ig)),
|
||||
isWeixin: Boolean(navigator.userAgent.match(/MicroMessenger/ig)),
|
||||
}
|
||||
```
|
||||
|
||||
#### 获取 url 的参数
|
||||
```
|
||||
function getExp(name, url) {
|
||||
var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i")
|
||||
if (reg.test(url)) return decodeURIComponent(RegExp.$2.replace(/\+/g, " ")) return ""
|
||||
}
|
||||
```
|
||||
|
||||
#### 全屏显示
|
||||
```
|
||||
function launchFullScreen(element) {
|
||||
if (element.requestFullScreen) {
|
||||
element.requestFullScreen();
|
||||
} else if (element.mozRequestFullScreen) {
|
||||
element.mozRequestFullScreen();
|
||||
} else if (element.webkitRequestFullScreen) {
|
||||
element.webkitRequestFullScreen();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 全选/全不选
|
||||
```
|
||||
function selectAll(objSelect) {
|
||||
if(objSelect.checked == true) {
|
||||
$("input[name='chkId']").attr("checked", true)
|
||||
$("input[name='chkAll']").attr("checked", true)
|
||||
} else if (objSelect.checked == true) {
|
||||
$("input[name='chkId']").attr("checked", false)
|
||||
$("input[name='chkAll']").attr("checked", false)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 判断浏览器
|
||||
```
|
||||
<!--判断是否是 IE 浏览器-->
|
||||
if (document.all){
|
||||
alert(”IE浏览器”);
|
||||
}else{
|
||||
alert(”非IE浏览器”);
|
||||
}
|
||||
if (!!window.ActiveXObject){
|
||||
alert(”IE浏览器”);
|
||||
}else{
|
||||
alert(”非IE浏览器”);
|
||||
}
|
||||
<!--判断是IE几-->
|
||||
var isIE=!!window.ActiveXObject;
|
||||
var isIE6=isIE&&!window.XMLHttpRequest;
|
||||
var isIE8=isIE&&!!document.documentMode;
|
||||
var isIE7=isIE&&!isIE6&&!isIE8;
|
||||
if (isIE){
|
||||
if (isIE6){
|
||||
alert(”ie6″);
|
||||
}else if (isIE8){
|
||||
alert(”ie8″);
|
||||
}else if (isIE7){
|
||||
alert(”ie7″);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### js 写 cookie
|
||||
```
|
||||
function setCookie(name, value, expires, path, domain) {
|
||||
if (!expires) expires = -1
|
||||
if (!path) path = "/"
|
||||
var d = "" + name + "=" + value
|
||||
var e
|
||||
if (expires < 0) {
|
||||
e = ""
|
||||
}
|
||||
else if (expires == 0) {
|
||||
var f = new Date(1970, 1, 1)
|
||||
e = ";expires=" + f.toUTCString()
|
||||
}
|
||||
else {
|
||||
var now = new Date()
|
||||
var f = new Date(now.getTime() + expires * 1000)
|
||||
e = ";expires=" + f.toUTCString()
|
||||
}
|
||||
var dm;
|
||||
if (!domain) {
|
||||
dm = ""
|
||||
}
|
||||
else {
|
||||
dm = ";domain=" + domain
|
||||
}
|
||||
document.cookie = name + "=" + value + ";path=" + path + e + dm
|
||||
};
|
||||
```
|
||||
|
||||
#### js 读 cookie
|
||||
```
|
||||
function readCookie(name) {
|
||||
var nameEQ = name + "="
|
||||
var ca = document.cookie.split(';')
|
||||
for (var i = 0; i < ca.length; i++) {
|
||||
var c = ca[i]
|
||||
while (c.charAt(0) == ' ') c = c.substring(1, c.length)
|
||||
if (c.indexOf(nameEQ) == 0) {
|
||||
return decodeURIComponent(c.substring(nameEQ.length, c.length))
|
||||
}
|
||||
} return null
|
||||
}
|
||||
```
|
||||
|
||||
5
source/_posts/learn-koa.md
Executable file
5
source/_posts/learn-koa.md
Executable file
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: learn-koa
|
||||
date: 2017-09-06 20:08:01
|
||||
tags:
|
||||
---
|
||||
192
source/_posts/material主题使用攻略.md
Executable file
192
source/_posts/material主题使用攻略.md
Executable file
@ -0,0 +1,192 @@
|
||||
---
|
||||
title: material主题使用攻略
|
||||
date: 2017-02-15 19:59:16
|
||||
tags: [hexo]
|
||||
categories: 随记
|
||||
---
|
||||
|
||||
## 安装[Material]
|
||||
|
||||
``` bash
|
||||
npm install hexo-meterial
|
||||
```
|
||||
|
||||
该方法会将主题下载到node_modules文件夹下，找到该文件后，将文件名改为material
|
||||
|
||||
### 启用[Material]
|
||||
|
||||
找到主题文件下的_config.template.yml 改成 _config.yml
|
||||
|
||||
## 更新[Material]
|
||||
|
||||
``` bash
|
||||
npm update hexo-material
|
||||
```
|
||||
|
||||
让后将文件复制到 Material 主题文件中
|
||||
|
||||
## 配置主题
|
||||
|
||||
### head
|
||||
* favicon: 网站的 favicon
|
||||
* high_res_favicon: 高清 favicon
|
||||
* apple_touch_icon: iOS 主屏按钮图标
|
||||
* keywords: 网站关键词
|
||||
|
||||
### url
|
||||
* rss: 设置生成的 rss 或 atom url
|
||||
* daily_pic: 设置 daily_pic 模块 点击时跳转的 url
|
||||
* logo: 设置 logo 点击时跳转的 url
|
||||
|
||||
### scheme
|
||||
* Paradox
|
||||
默认 Scheme，是 Material 的最初样式。居中布局，图文并茂。
|
||||
* Isolation
|
||||
Paradox 的至简样式，简洁明了。
|
||||
|
||||
### uiux
|
||||
用于设置主题 UI 与 UX。
|
||||
* heme_color: 主题主要颜色。主题的大部分地方使用此颜色。
|
||||
* theme_sub_color: 主题辅助颜色。
|
||||
* hyperlink_color: 超链接颜色。
|
||||
* button_color: 按钮颜色，例如 toTop 或 menu_button。
|
||||
* android_chrome_color: 安卓 Chrome 浏览器的地址栏颜色。
|
||||
* nprogress_color: 页面加载时顶部加载进度条的颜色。
|
||||
* nprogress_buffer: 页面加载时顶部加载进度条的缓冲时间。
|
||||
|
||||
### js_effect
|
||||
用来控制 Material 主题中自带的多种 js 特性。
|
||||
* fade: 页面加载时部分模块的渐显效果，默认为 true。
|
||||
* smoothscroll: 页面平滑滚动特效，默认为 false。
|
||||
|
||||
### reading
|
||||
entry_excerpt: 首页文章输出摘要的字符长度。默认为 80。
|
||||
* entry_excerpt: 首页文章输出摘要的字符长度。默认为 80。
|
||||
|
||||
### background
|
||||
用于设置站点背景。
|
||||
* purecolor: 填入颜色代码。则站点使用纯色背景。
|
||||
* bgimg: 背景地址，默认调用 主题文件夹 -> source -> img 中的 bg.png。可更换此图片或者自己填入 url。
|
||||
* bing: 用于启用“必应美图”的图片作为背景。
|
||||
|
||||
### dropdown
|
||||
用于设置 Paradox 侧边栏用户下拉菜单，默认为空。
|
||||
```
|
||||
dropdown:
|
||||
page:
|
||||
link: "mailto: someone@example.com"
|
||||
icon: email
|
||||
divider: 设置成 true 后会在归档按钮底部增加一条分割线。
|
||||
```
|
||||
|
||||
## 创建文章
|
||||
|
||||
### 使用命令行
|
||||
```
|
||||
hexo new <title>
|
||||
```
|
||||
手动创建也行
|
||||
|
||||
### 格式
|
||||
```
|
||||
layout 布局 post
|
||||
title 标题 文件名
|
||||
date 建立日期 文件建立日期
|
||||
updated 更新日期 文件更新日期
|
||||
tags 标签（不适用于分页）
|
||||
categories 分类（不适用于分页）
|
||||
permalink 覆盖文章网址
|
||||
thumbnail 缩略图地址
|
||||
toc 显示 TOC 按钮 true
|
||||
comment 显示评论 true
|
||||
notag 不生成标签按钮 false
|
||||
top 置顶 false
|
||||
```
|
||||
|
||||
## 创建「关于我」页面
|
||||
新建一个 about 页面：
|
||||
```
|
||||
hexo new page "about"
|
||||
```
|
||||
|
||||
## 创建「友情链接」页面
|
||||
### 创建页面
|
||||
在 hexo 目录下的 source 文件夹内创建一个名为 links（只是建议，可根据自己喜好修改）的文件夹。
|
||||
然后在文件内创建一个名为 index.md 的 Markdown 文件。
|
||||
在 index.md 文件内写入如下内容即可。
|
||||
```
|
||||
---
|
||||
title: links
|
||||
date:
|
||||
layout: links
|
||||
---
|
||||
```
|
||||
>title 可修改，layout 不可修改。
|
||||
|
||||
### 添加数据
|
||||
同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。
|
||||
|
||||
然后在文件内创建一个名为 links.yml 的文件。
|
||||
|
||||
单个友情链接的格式为：
|
||||
```
|
||||
Name:
|
||||
link: http://example.com
|
||||
avatar: http://example.com/avatar.png
|
||||
descr: "这是一个描述"
|
||||
```
|
||||
|
||||
## 创建「图库」页面
|
||||
### 创建页面
|
||||
在 hexo 目录下的 source 文件夹内创建一个名为 gallery（只是建议，可根据自己喜好修改）的文件夹。
|
||||
|
||||
然后在文件内创建一个名为 index.md 的 Markdown 文件。
|
||||
|
||||
在 index.md 文件内写入如下内容即可。
|
||||
```
|
||||
---
|
||||
title: gallery
|
||||
date:
|
||||
layout: gallery
|
||||
---
|
||||
```
|
||||
|
||||
### 添加数据
|
||||
|
||||
同样在在 hexo 目录下的 source 文件夹内创建一个名为 _data（禁止改名）的文件夹。
|
||||
|
||||
然后在文件内创建一个名为 gallery.yml 的文件。
|
||||
|
||||
单个图片的格式为：
|
||||
```
|
||||
Name:
|
||||
full_link: http://example.com/full-image.png
|
||||
thumb_link: http://example.com/thumb-image.png
|
||||
descr: "这是一个描述"
|
||||
```
|
||||
|
||||
## 创建「标签云」页面
|
||||
|
||||
### 创建页面
|
||||
|
||||
在 hexo 目录下的 source 文件夹内创建一个名为 tags（只是建议，可根据自己喜好修改）的文件夹。
|
||||
|
||||
然后在文件内创建一个名为 index.md 的 Markdown 文件。
|
||||
|
||||
在 index.md 文件内写入如下内容即可。
|
||||
|
||||
```
|
||||
---
|
||||
title: tags
|
||||
date:
|
||||
layout: tags
|
||||
---
|
||||
```
|
||||
|
||||
## 创建「私有」页面
|
||||
|
||||
如果某篇文章不想显示在站点中，只需要在 front-matter 中加入
|
||||
|
||||
```
|
||||
layout: private
|
||||
```
|
||||
39
source/_posts/sessionStorage-localStotage-AND-cookies.md
Executable file
39
source/_posts/sessionStorage-localStotage-AND-cookies.md
Executable file
@ -0,0 +1,39 @@
|
||||
---
|
||||
title: sessionStorage localStotage AND cookies
|
||||
date: 2017-08-16 11:57:16
|
||||
tags: [数据]
|
||||
categories: web前端
|
||||
---
|
||||
|
||||
### sessionStorage
|
||||
> 引入一个浏览器窗口的概念，开启在同源的同窗口，即使跳到其他页面，数据仍然存在，页面刷新也不会消除数据，
|
||||
#### 特点
|
||||
* 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递
|
||||
* 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示
|
||||
* 临时储存：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便
|
||||
|
||||
### cookie
|
||||
> 数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
|
||||
#### 特点
|
||||
* cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识
|
||||
* 只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭,即有一个过期值
|
||||
* cookie也是在所有同源窗口中都是共享的。
|
||||
|
||||
### localStorage
|
||||
|
||||
#### 特点
|
||||
* 生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。
|
||||
|
||||
使用方法:
|
||||
|
||||
```
|
||||
var storage = null;
|
||||
if(window.localStorage){ //判断浏览器是否支持localStorage
|
||||
storage = window.localStorage;
|
||||
storage.setItem("name", "Rick"); //调用setItem方法，存储数据
|
||||
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 Rick
|
||||
storage.removeItem("name"); //调用removeItem方法，移除数据
|
||||
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 null
|
||||
|
||||
}
|
||||
```
|
||||
19
source/_posts/simpleCountry.md
Executable file
19
source/_posts/simpleCountry.md
Executable file
@ -0,0 +1,19 @@
|
||||
---
|
||||
title: simpleCountry
|
||||
date: 2017-09-14 10:39:24
|
||||
tags: [创业]
|
||||
categories: 极简主义
|
||||
---
|
||||
|
||||
### 简介
|
||||
* 昨天晚上想到这个名字，觉得很酷炫，如果可以我想现在就用这个成立一个品牌。打造一个只有简单元素的社区，因为我本人就是一个极简主义者，不喜欢复杂花俏。从生活作为一个切入点。不管是衣食住行，都做到简单，完美。
|
||||
|
||||
### 构思
|
||||
* 构建一款 app 产品，它没有花俏的外观，没有多余的赘述，只有简单的产品图片，购买按钮，收藏，做垂直细分,可以是服装，家居，交通工具。
|
||||
* 贯彻的理念是从生活出发，然后将自己的极简思想投入其中，艺术与生活相互结合。
|
||||
* 例如：一款座椅用一条腿代替4条腿，或者是两条腿代替4条腿，一体式座椅，服装，色调不花俏，单色或者是拼色，会给人简单美好
|
||||
|
||||
待续~
|
||||
|
||||
### 小记
|
||||
* 我喜欢摇滚，喜欢积极向上的生活，但不喜欢摇滚中的聒噪，所以我憧憬清摇滚，就是用清淡的节奏和热血的旋律谱写出简单的美好，这是我今后的目标，也会作为我的理念。
|
||||
137
source/_posts/sticky-footer.md
Executable file
137
source/_posts/sticky-footer.md
Executable file
@ -0,0 +1,137 @@
|
||||
---
|
||||
title: sticky-footer
|
||||
date: 2017-07-02 20:30:52
|
||||
tags: [web前端]
|
||||
---
|
||||
|
||||
今天，我想讲讲关于stick-footer布局技巧，它的内容大概就是当你页面大小为100%时，希望底部定位一个 X 按钮啥的，不管文本内容不够，或者是文本内容超过屏幕时，这个按钮位置总在文本的下方
|
||||
* like this
|
||||
|
||||
|
||||
### 实现思路
|
||||
* 首先是个包裹了 footer 之外其他元素的容器，将它的最小大小设置为100%
|
||||
<br>
|
||||
* 然后给这个footer一个负的 magin-top 因为如果该容器最小大小为100%，会将footer元素挤出容器外，你这个时候就要想办法把该元素‘重回战场’
|
||||
<br>
|
||||
* sticky-footer 就是这个意思，让他完美保持在底部，而又不会影响主要内容的显示
|
||||
|
||||
### 四种实现方法
|
||||
#### 容器使用负的 margin bottom
|
||||
```
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
|
||||
content
|
||||
|
||||
<div class="push"></div>
|
||||
</div>
|
||||
<footer class="footer"></footer>
|
||||
</body>
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.wrapper {
|
||||
min-height: 100%;
|
||||
|
||||
/* Equal to height of footer */
|
||||
/* But also accounting for potential margin-bottom of last child */
|
||||
margin-bottom: -50px;
|
||||
}
|
||||
.footer,
|
||||
.push {
|
||||
height: 50px;
|
||||
}
|
||||
```
|
||||
#### 底部使用负的 margin top
|
||||
```
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="content-inside">
|
||||
content
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer"></footer>
|
||||
</body>
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.content {
|
||||
min-height: 100%;
|
||||
}
|
||||
.content-inside {
|
||||
padding: 20px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.footer {
|
||||
height: 50px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
```
|
||||
|
||||
#### calc 版本
|
||||
```
|
||||
<body>
|
||||
<div class="content">
|
||||
content
|
||||
</div>
|
||||
<footer class="footer"></footer>
|
||||
</body>
|
||||
|
||||
.content {
|
||||
min-height: calc(100vh - 70px);
|
||||
}
|
||||
.footer {
|
||||
height: 50px;
|
||||
}
|
||||
```
|
||||
> calc中的 70px，和50px是假定了content中最后一个元素有个20px的margin bottom，你不必在意这些~
|
||||
|
||||
#### flexbox 版本
|
||||
```
|
||||
<body>
|
||||
<div class="content">
|
||||
content
|
||||
</div>
|
||||
<footer class="footer"></footer>
|
||||
</body>
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
```
|
||||
> flexbox版本同样很简单，并且相比前面三种方式，它不需要知道footer的高度，避免了Magic Number的尴尬。
|
||||
|
||||
#### grid 版本
|
||||
```
|
||||
<body>
|
||||
<div class="content">
|
||||
content
|
||||
</div>
|
||||
<footer class="footer"></footer>
|
||||
</body>
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
min-height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
}
|
||||
.footer {
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 3;
|
||||
}
|
||||
```
|
||||
> Chrome Canary 或者 Firefox Developer Edition才能看到效果。
|
||||
20
source/_posts/sync-和async.md
Executable file
20
source/_posts/sync-和async.md
Executable file
@ -0,0 +1,20 @@
|
||||
---
|
||||
title: sync 和async
|
||||
date: 2017-07-21 16:12:21
|
||||
tags: [web前端, js]
|
||||
categories: 异步
|
||||
---
|
||||
|
||||
### async 和 sync
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 总结
|
||||
* 一句话：可以改变程序正常执行顺序的就称为异步
|
||||
69
source/_posts/vue-eleme.md
Executable file
69
source/_posts/vue-eleme.md
Executable file
@ -0,0 +1,69 @@
|
||||
---
|
||||
title: vue-eleme
|
||||
date: 2017-07-05 21:51:12
|
||||
tags: [vue, web前端]
|
||||
categories: web前端
|
||||
---
|
||||
|
||||
### 准备工作
|
||||
* vue-cli
|
||||
* better-scroll
|
||||
* node.js
|
||||
* 电脑（废话）
|
||||
* 在dev-server中配置本地 data.json API接口
|
||||
|
||||
### header组件
|
||||
|
||||
#### star组件
|
||||
* 该项目中多处用到 星星 ，所以可以将它整合成一个组件，以复用
|
||||
* 用 import 引入到父组件，给该组件传入 seller.score 评分数据
|
||||
```
|
||||
itemClasses () {
|
||||
let result = []
|
||||
let score = Math.floor(this.score * 2) / 2
|
||||
let hasDecimal = score % 1 !== 0
|
||||
let integer = Math.floor(score)
|
||||
for (let i = 0; i < integer; i++) {
|
||||
result.push(CLS_ON)
|
||||
}
|
||||
if (hasDecimal) {
|
||||
result.push(CLS_HELF)
|
||||
}
|
||||
while (result.length < STARLENG) {
|
||||
result.push(CLS_OFF)
|
||||
}
|
||||
return result
|
||||
}
|
||||
```
|
||||
> 分别获取它们的整数，小数，和无
|
||||
|
||||
#### sticky footer 布局
|
||||
* 为了防止内容超过容器，图标遮挡内容的现象
|
||||
|
||||
* 实现原理就是设置一个容器，将该容器的最小大小设置为100%，容器外面再设一个容器，给他一个负的 margin 或者是 padding，将它固定在容器的最下方
|
||||
|
||||
>可以参考我这篇(文章)[http://jzxer.cn/sticky-footer.html]
|
||||
|
||||
### goods 组件
|
||||
|
||||
#### nextTrick () 方法
|
||||
* 该函数的意思是，当一个 DOM 刚刚 create 的时候，因为 DOM 会在当前 tick里面的代码全部执行完再更新，所以不能做到在修改数据之后 DOM 更新之后再执行，要保证 DOM 更新之后再执行某一块代码，就必须放在下一次循环更新里面，，这样 DOM 更新后， 就会立即执行这块的代码
|
||||
！()[https://pic4.zhimg.com/47b878cfdac72ea510733667f39f2f6f_b.png]
|
||||
|
||||
#### better-scroll 插件
|
||||
> 可以在 npm 包管理器中下载
|
||||
* 使用方法就是直接给你需要滚动的列表上创建一个实例，该实例的调用要放在nextTrick（）中，因为触屏滚动每次都是需要更新 dom 的
|
||||
|
||||
#### refs 和 el 数据传递
|
||||
* refs就是将子组件的数据传递给父组件，el就是 elment，指的是该实例的 dom 分支
|
||||
|
||||
|
||||
### API 接口配置
|
||||
新建一个 express.Router() 实例，给它们分配路由路径，记得加入一个 errno ，判断是否正确获取数据
|
||||
>这个时候就发现 node 是多么的强大，前后端全包了~
|
||||
|
||||
### shopCart 组件
|
||||
指的是底部购物车组件，这个部分比较麻烦的是数据绑定，因为我们需要绑定一个数据流，点击添加商品，判断商品是否大于起送价，否则返回空，按钮不可点击，购物车头部无红色小标签，是则按钮变为绿色，购物logo变成蓝色，出现红色计数标签。
|
||||
|
||||
### cartcontral 组件
|
||||
实现的思路是，点击添加会改变shopcart里的数据，双向绑定，这里用到了 $emit 就是将子路由中的数据传递给父组件，和ref的原理很像，父组件再通过监听事件得到子组件的数据。
|
||||
25
source/_posts/vuex-模块介绍.md
Executable file
25
source/_posts/vuex-模块介绍.md
Executable file
@ -0,0 +1,25 @@
|
||||
---
|
||||
title: vuex 使用技巧
|
||||
date: 2017-06-15 18:36:30
|
||||
tags: [vue, vuex]
|
||||
categories: web前端
|
||||
---
|
||||
|
||||
## Action
|
||||
提供方法和API请求,类似于mutation
|
||||
> mutation 修改 state 只能是同步的
|
||||
* action 充满了各种异步 api
|
||||
```
|
||||
actions: {
|
||||
increment (context) {
|
||||
context.commit('increment')
|
||||
}
|
||||
}
|
||||
另一种写法
|
||||
increment({commit}) {
|
||||
commit('increment')
|
||||
}
|
||||
```
|
||||
|
||||
## 分发 Action
|
||||
> store.dispatch('increment')
|
||||
61
source/_posts/vue学习笔记（一）.md
Executable file
61
source/_posts/vue学习笔记（一）.md
Executable file
@ -0,0 +1,61 @@
|
||||
---
|
||||
title: vue学习笔记（一）
|
||||
date: 2017-06-18 22:47:47
|
||||
tags:
|
||||
---
|
||||
|
||||
## vue的实例对象与生命周期
|
||||
|
||||
### vue 的生命周期图
|
||||
|
||||
* beforeCreate
|
||||
> 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
|
||||
|
||||
* created
|
||||
> 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
|
||||
|
||||
* beforeMount
|
||||
> 在挂载开始之前被调用：相关的 render 函数首次被调用。
|
||||
|
||||
* mounted
|
||||
> el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
|
||||
|
||||
* beforeUpdate
|
||||
> 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
|
||||
|
||||
* updated
|
||||
> 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
|
||||
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
|
||||
> 该钩子在服务器端渲染期间不被调用。
|
||||
|
||||
* beforeDestroy
|
||||
> 实例销毁之前调用。在这一步，实例仍然完全可用。
|
||||
|
||||
* destroyed
|
||||
> Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
|
||||
|
||||
## 实例对象
|
||||
|
||||
### data
|
||||
* 类型是Object或者Function。
|
||||
> var vm = new Vue({
|
||||
data: data
|
||||
})
|
||||
|
||||
### computed
|
||||
* 介绍
|
||||
Vue的计算属性（computed)的属性会自动混入Vue的实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。这就很强大了，再计算属性中定义的函数里面可以直接使用指向了 vue 实例的 this
|
||||
|
||||
### methods
|
||||
* 类型: { [key: string]: Function }
|
||||
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
|
||||
|
||||
### watch
|
||||
* 类型： { [key: string]: string | Function | Object }
|
||||
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
|
||||
|
||||
## 总结
|
||||
Vue的实例封装的还是挺有艺术性的，很符合开发者的思维规范，它的生命周期也非常清晰，使用起来也非常方便。MVVM双向绑定思想也是吊的可以
|
||||
|
||||
|
||||
|
||||
131
source/_posts/vue高仿qq音乐官网.md
Executable file
131
source/_posts/vue高仿qq音乐官网.md
Executable file
@ -0,0 +1,131 @@
|
||||
---
|
||||
title: vue高仿qq音乐官网
|
||||
date: 2017-06-15 18:36:30
|
||||
tags: [vue, vuex, vue-router, axios]
|
||||
categories: web前端
|
||||
top: true
|
||||
---
|
||||
|
||||
一直想做一个vue项目 然后呢 我就做了
|
||||
|
||||
## 效果预览
|
||||
|
||||
部分地方不全部根据原版，也有自由发挥的，目前功能模块比较简陋，如果显示不完整，请下载以下api文件并打开
|
||||
> [网易云音乐API](https://github.com/Binaryify/NeteaseCloudMusicApi)
|
||||
|
||||
|
||||
> 项目地址：[github](https://github.com/j710328466/vue-qqmusic)
|
||||
|
||||
> 预览地址：[demo](http://182.254.147.168:8564/#/)
|
||||
|
||||
## Build Setup
|
||||
|
||||
|
||||
```
|
||||
# install dependencies
|
||||
cnpm i
|
||||
(可以用cnpm或yarn，更方便快捷，你值得拥有)
|
||||
|
||||
# serve with hot reload at localhost:8564
|
||||
npm run dev
|
||||
|
||||
# build for production with minification
|
||||
npm run build
|
||||
|
||||
# build for production and view the bundle analyzer report
|
||||
npm run build --report
|
||||
|
||||
# 网易云API部署 listen localhost:3000
|
||||
npm run start
|
||||
```
|
||||
## 技术栈
|
||||
|
||||
* vue(数据绑定)
|
||||
* vue-router
|
||||
* vuex(管理组件状态，实现组件通信）
|
||||
* webpack(打包工具)
|
||||
* scss（原来想用stylus,回头看看我都快写完了...）
|
||||
* axios（我等下要重点讲这****）
|
||||
* 组件库: element-UI(本来想用muse-UI,感觉那个更cool，下次吧..)
|
||||
* API: 网易云音乐API(仿qq音乐我用网易云音乐的东西，你怕不怕...)
|
||||
|
||||
## 核心功能组件的实现
|
||||
|
||||
### 搜索功能
|
||||
|
||||
|
||||
|
||||
### 播放功能
|
||||
|
||||
|
||||
(播放页面正在完善中，样式只是大概，待细化...)
|
||||
|
||||
### 跳转功能
|
||||
|
||||
|
||||
(目前子目录只开通歌手列表)
|
||||
|
||||
|
||||
## 自己挖的坑，自己埋
|
||||
|
||||
### vuex的模块应用
|
||||
|
||||
* 一开始我并没有使用vuex，因为我觉得目前这个项目比较小，并不需要它来管理数据，毕竟vuex针对大项目来说确实很好用，但是后来考虑到如果后期该项目我还要 维护，数据量一大，还是要重新分类数据，所以中途某些地方插入了vuex的使用，这就很大一部分影响了项目进行的进度。（目前只用到action和state）
|
||||
|
||||
### qq音乐的轮播图
|
||||
* 不用说，qq音乐这个网站的页面我是真的挺喜欢，不光是他的设计，页面的布局也很美观，在控制台调试的时候可以看看它的结构，非常有层次而富有美感，即使加上 一层margin,padding也不会有违和感。这就造就了它的轮播图结构比较麻烦，不是说做不出来，因为这是第一次上传的项目，我想先将大概的结构完善一下，后期再 维护，所以我就选用了element-UI里面的跑马灯式轮播图组件，大体来说，除了部分瑕疵以外，还是高度还原了原版轮播图的。
|
||||
|
||||
### axios后端数据获取时产生的跨域问题
|
||||
|
||||
* 重点来了，这个是我在该项目中花了最多时间的地方，相信很多同学使用axios都碰到过我这个问题，目前我这里使用了三种方法处理该问题，请大家针对自己的项目问题对号入座
|
||||
|
||||
* 跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。
|
||||
|
||||
①. 针对本地相同端口服务器之间的跨域
|
||||
|
||||
* 这是我刚开始碰到问题时使用的第一种，这个时候你只需要找到build文件中的dev-server，找到引用express的位置，给它加上一个头文件：
|
||||
```
|
||||
app.all('*', function (req, res, next) {
|
||||
res.header("Access-Control-Allow-Credentials", true)
|
||||
res.header("Access-Control-Allow-Origin", "*")
|
||||
res.header("Access-Control-Allow-Headers", "X-Requested-With")
|
||||
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS")
|
||||
res.header("X-Powered-By", ' 3.2.1')
|
||||
res.header("Content-Type", "application/json;charset=utf-8")
|
||||
next()
|
||||
})
|
||||
```
|
||||
|
||||
> 
|
||||
|
||||
* 然后它就会报错~，具体原因是你同一个端口申请相同端口的东西,不好意思，那不叫跨域...
|
||||
<br>
|
||||
②. 针对本地不同端口的服务器之间的跨域
|
||||
|
||||
* 就是将上面的头文件放在当前项目申请的服务器的那个api中。
|
||||
<br>
|
||||
③. 针对本地服务器对域名服务器访问的跨域问题
|
||||
|
||||
* 找到当前项目congfig文件夹下index.js文件，然后在文件中将proxyTable内容改为：
|
||||
```
|
||||
proxyTable: {
|
||||
'/api': {
|
||||
target: '[1]',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/api': '/'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
>就是你当前想访问的api地址，项目中访问的时候就只要用/api做反向代理即可
|
||||
|
||||
## 终于
|
||||
|
||||
* 这是我第一个用vue撸的项目，可能功能有点简陋，很多地方有待提高，不过这次实践让我对组件化的理解有了一定的提升，后期会继续加入其它功能模块的，文中有用词不对的地方，欢迎大家指出，项目有什么bug，也希望大家多多提issue
|
||||
|
||||
* 如果对你有帮助，给个star吧
|
||||
|
||||
* [我的简历](http://jzxer.cn/about/)
|
||||
|
||||
18
source/_posts/wuti.md
Executable file
18
source/_posts/wuti.md
Executable file
@ -0,0 +1,18 @@
|
||||
---
|
||||
title: wuti
|
||||
date: 2017-07-31 22:59:35
|
||||
tags: [music]
|
||||
---
|
||||
|
||||
### 无题
|
||||
|
||||
|
||||
{% dplayer
|
||||
"url=http://orjedzer5.bkt.clouddn.com//video/mp4/wuti.mp4"
|
||||
"api=http://dplayer.daoapp.io"
|
||||
"id=4"
|
||||
"loop=yes"
|
||||
"theme=#fff"
|
||||
"autoplay=true"
|
||||
"token=tokendemo"
|
||||
%}
|
||||
13
source/_posts/zzbds.md
Executable file
13
source/_posts/zzbds.md
Executable file
@ -0,0 +1,13 @@
|
||||
---
|
||||
title: 正则表达式
|
||||
date: 2017-06-30 10:26:35
|
||||
tags: [正则, js]
|
||||
---
|
||||
|
||||
### 正则的介绍
|
||||
正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）。
|
||||
正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。
|
||||
正则表达式是烦琐的，但它是强大的，学会之后的应用会让你除了提高效率外，会给你带来绝对的成就感。只要认真阅读本教程，加上应用的时候进行一定的参考，掌握正则表达式不是问题。
|
||||
许多程序设计语言都支持利用正则表达式进行字符串操作。
|
||||
|
||||
###
|
||||
73
source/_posts/一些不可思议的的事.md
Executable file
73
source/_posts/一些不可思议的的事.md
Executable file
@ -0,0 +1,73 @@
|
||||
---
|
||||
title: 一些不可思议的的事
|
||||
date: 2017-03-07 22:23:37
|
||||
tags: [随记]
|
||||
categories: 随记
|
||||
---
|
||||
|
||||
1.没有一张纸可对折超过7次
|
||||
2.根据统计每年骡仔所杀的人比飞机失事所死的人还多
|
||||
3.人睡觉比坐着看电视所消耗的卡路里还多
|
||||
4.Wright'sBrother发明飞机后第一次试飞的路程比一架波音747飞机的飞机翼还短
|
||||
5.很多人每朝起来都喝一杯咖啡提神，但其实一个苹果比一杯咖啡还有效
|
||||
6.你的家中多数尘埃都是你的死皮
|
||||
7.洋娃娃Barbie 全名是Barabra Millicent Roberts
|
||||
8.希特拉的妈妈在怀有希特拉曾认真地考虑堕胎，不过被医说服，结果把他生下来
|
||||
9.玛丽莲梦露有6只脚趾
|
||||
10.降落伞的发明人把第一次乘坐降落伞的机会让给了一只狗
|
||||
11.印度尼西亚竹节虫是全世界最大的昆虫，有些光是身长就有一呎长
|
||||
12.其实，河马跑得比人快
|
||||
13.珍珠在醋中会溶
|
||||
14.一只70磅的章鱼可以穿过一个仅一枚银币大小的洞，因为他们没有脊椎
|
||||
15.你有可能将一只牛拉上楼梯，但牛是不懂下楼梯的
|
||||
16.猪不能仰头望天空
|
||||
17.'quick brown fox jumps over the lazy dog'可以用尽26个字母
|
||||
18.鸭的叫声是不会有回音的，暂时没有人知何解
|
||||
19.蜗牛可不吃东西睡3年
|
||||
20.著名影星Tommy Lee Jones与美国副总统曾经是哈佛大学同房
|
||||
21.如果一个月中，第一天是星期日，那个月便出现黑色星期五
|
||||
22.把石头放在微波炉中加热会爆炸
|
||||
23.1,111,111 x 1,111,111 = 1234567654321
|
||||
24.唯一一个有15英文字母而又不会重复是的英文字'uncopyrightable'
|
||||
25.猫可发出超过100个音，狗却只能发10个音
|
||||
26.愈黑的环境下，猫的排尿次数会增加
|
||||
27.将一个硬币向上抛1000次，字向上的次数是495次，不是500次，因为公较重
|
||||
28.根据牛津字典世界上最长的英文字是'pneumonoultramicroscopicsilicovolcanoconiosis'
|
||||
29.人体的胃每2个星期便会更新一次分泌物，否则它会自我消化
|
||||
30.可乐原是绿色的
|
||||
31.虎鲨的胚胎在母亲的子宫里需经过激烈的搏斗，胜利者就是可以活着出生的小虎鲨
|
||||
32.走路上班的人最高比率的省是阿拉斯加
|
||||
33.如果Barbie是人类，她是身形是39-23-33
|
||||
34.美国平均每小时在空中的人有61000人
|
||||
35.只有一种食物不会变坏:蜜糖
|
||||
36.在加勒比海附近有一种蚝是会爬榭的
|
||||
37.世界上最年轻的父母在1910年出现，一个8岁及另一个9岁的中国人
|
||||
38.人顃的鼻及耳是毕生都不断长大
|
||||
39.下午摘下的玫瑰比清晨摘下的玫瑰更能持久不枯萎
|
||||
41.乳牛听音乐时可以供应更多牛奶
|
||||
42.一条长颈鹿的舌头有2尺长
|
||||
43.大象可用头来站立
|
||||
44.蚂蚁早上醒来会抓痒
|
||||
45.伟大发明家爱迪生是怕黑的
|
||||
46.世上最老的金鱼是41岁，名叫Fred
|
||||
47.爱因斯坦9岁时不能流利说话，他妈妈曾经一度以为他是弱智
|
||||
48.阿拉伯的女人可以因为丈夫不为她倒咖啡而提出离婚
|
||||
49.只有55%的美国人知道太阳是一个星体
|
||||
50.多数唇膏是有鱼鳞的
|
||||
51.长颈鹿没办法咳嗽
|
||||
52.猫头鹰是唯一能够分辨蓝色的鸟类
|
||||
53.一只鲸鱼一分钟心跳只有九下
|
||||
54.我们喝到肚子里头的水已经有三亿岁了
|
||||
55.只有百分之三十的人可以放大缩小自己的鼻孔
|
||||
56.一只牡蛎的性别会由男变女，此后一生中还会变个几次
|
||||
57.根据一项1845年由英国通过的法律，自杀是非常严重的罪，最重可以处以吊死的极刑
|
||||
58.在太空中航天员是没办法哭的，因为没有地心引力，眼泪流不出来
|
||||
59.一只变色龙的舌头是它自己身体的两倍长
|
||||
60.最常用牙签的人是美国人
|
||||
61.一个正常人的眼部肌肉一天平均要动上一万到一万五千次
|
||||
62.大象死后还会保持站立姿势
|
||||
63.有些昆虫没有头还可以再活上一年
|
||||
64.达尔文光是画蒙那莉萨的嘴唇就花上十二年
|
||||
65.玻璃破掉时，玻璃碎片的时速最高可达每小时三千英哩
|
||||
|
||||
> 世间真是无奇不有....
|
||||
71
source/_posts/七种公司永远做不大-十种老板永远不成功.md
Executable file
71
source/_posts/七种公司永远做不大-十种老板永远不成功.md
Executable file
@ -0,0 +1,71 @@
|
||||
---
|
||||
title: '七种公司永远做不大, 十种老板永远不成功!'
|
||||
date: 2017-08-22 15:49:09
|
||||
tags: [创业, 理想]
|
||||
---
|
||||
|
||||
### 这七种公司永远做不大
|
||||
|
||||
#### 1. 格局小的企业
|
||||
* 1999年2月，牛根生对孙先红说：我给你100万的宣传费，对谁也不要说。先红问：为什么不能说？牛说：现在总共筹到300万，拿出100万做广告，我怕大家知道后接受不了。我就要一个效果：一夜之间，让呼市人都知道。于是1999年4月1日早上，一觉醒来，人们突然发现道路两旁冒出了一溜溜的红色路牌广告，上面高书金色大字：蒙牛乳业，创内蒙古乳业第二品牌！
|
||||
* 但在现实中，许多老板肩上扛着品牌大旗心里打着小算盘，乐于小打小闹，希望以小的投入来获得大的回报，从没想过以大的投入来换取更大的回报。这实际上就是一种格局。格局小的老板，想的永远是自己，希望从一颗鸡蛋中吃出黄金；而格局大的老板，则能着眼于未来，在大环境中定义自己的事业。
|
||||
|
||||
#### 2. 心态小的企业
|
||||
> 俗话说：善奕者谋势，不善奕者谋子
|
||||
* 许多企业之所以做不大，就在于只谋子不谋势。谋势就是定战略，有了战略，路再长，总有一天会走到；没有战略，走得越猛，死得越早。置战略需求于不顾，希望用1分钱换来100元的效果的主，很难走出穷的境界，因为占便宜本身就代表没有境界。死抠一城一池，是活三年的企业，因为它不抬头看天。东一榔头西一棒子的，是活三月的企业，因为它不低头看地。不看天，山雨欲来浑然不觉，要被洪水淹死；不看地，夜半悬崖大步流星，要被群山淹没。
|
||||
|
||||
#### 3. 短视的企业
|
||||
* 立竿见影、刀下见菜，是大多数老板的想法，当然这也没有错，因为解决目前的生存问题是第一位的。但是，生存问题属于战术问题，而发展问题属于战略问题，解决生存问题必须刀下见菜，但要搞定发展问题则需要细水长流最后水到渠成。现实中，很多老板都有短视心态，以为整一个亮点马上就能换回巨大的效益，于是一个活动搞下去或一期广告投下去看到没什么效果就马上停止。
|
||||
* 其实这种想法并不正确，因为品牌对于企业而言是一个长期工程和系统工程，既要有独特的个性，又需要系统的提炼及提升；对于客户而言，品牌又是一种认知识别和体验识别，他们需要你能记住你的特别理由，因此也就需要你在诉求点上要坚持深入。
|
||||
|
||||
#### 4. 缺外脑的企业
|
||||
* 曾有人说过这样一句话：在中国，资源第一位，机遇第二位，能力第三位，学历第四位，不少老板比别人做得成功，就在于他所拥有的社会资源为他创造了部分条件。而很多老板之所以做不大，原因就在于他缺少足够的社会资源，单打独斗当然也就孤掌难鸣。
|
||||
* 说到社会资源，很多人都会想到领导支持这个词语，其实这并不全面，向领导、职能部门传递企业的正面信息，获得政策范围内的支持，这只属于整合营销传播的一个方面。除了官方资源以外，能帮你快速解决一定融资困难的亲友资源，能为你迅速带来人才的人力推介资源，能为你出谋划策充当参谋的智力资源、信息资源等等，这些资源都会对你的发展壮大起着重要的作用。这些都是企业的外脑。想想看，那些做得成功的大企业，又有多少企业没有外脑、没有顾问呢？
|
||||
|
||||
#### 5. 缺内脑的企业
|
||||
* 一个好汉三个帮，如果没有一批能征善战的下属为你冲锋陷阵，老板再厉害，也难以成事。许多企业就面临这样的问题：优秀的人招不来，有出息的人留不住，剩下的看谁谁不顺眼，为什么会这样呢？员工愿不愿加盟公司、能加盟多久，与薪酬福利、团队氛围、学习提升、办事机制，成就感，归属感、生活现状等各种因素紧密相连。目前，大多数的企业，薪酬福利都差不多，关键问题是：老板只看重行政管理与业绩，只关注你今天卖了多少、有没有迟到早退，至于思想管理、技能管理、状态管理与团队氛围管理，老板根本就没有这个意识，最后员工技能得不到提升，思想得不到引导，越干越没劲，只好走人了事。管理的表面化，最终导致员工素质同质化，做不大也就在情理之中了。
|
||||
|
||||
#### 6. 用金扁担挑粪的企业
|
||||
* 从前有个小伙子，祖辈都是菜农。小伙子每天挑粪去菜地浇菜，从小习惯了这年复一年的活。一天，他去菜地的路上在一棵大树下歇脚，坐在挑粪扁担上，远眺村里大财主的那幢豪华楼房，心里突然有个梦想﹕有一天我要是像他那么有钱，我一定要打一副用金子做成的扁担挑粪。用金扁担挑粪虽然有了财富有了金子，但是挑粪的思维还是没有改变，因为他已经习惯了那种操作手法。所以，很多企业看到别人有了驰名商标就马上去申请一个驰名商标，看到别人开了一个自助火锅生意不错，于是就立马也开一个。有了这些金蛋蛋以后，马上把它做成一根金扁担挑着以前的大便继续前进。
|
||||
|
||||
#### 7. 需要预约的企业
|
||||
* 中国的小老板令人感动和尊敬，在我看来，哪怕是开小饭馆的小老板，也功德无量，令人尊敬，因为他们为社会提供了更多的就业岗位，贡献了更多的税收，开发了更多的技术。他们多数才华横溢、精明能干、出身草根、白手起家，其赤手空拳打天下的勇气让人佩服。
|
||||
* 他们在资金与技术贫瘠的土壤中扎根，在不利政策环境中破土，在外资、合资品牌丛林中成长，生命的顽强与坚韧让人感慨与惊叹。他们热情而富有理想，为了实现百年老店的梦想，很多人起得比鸡还要早，睡得比狗还要晚。企业最大的瓶颈是资金！然而，在你没有实力之前要想获得金融支持，干过企业的人都深有体会，最缺德的机构莫过于银行，他们向来都是雨天收伞！在尊敬与感动之余，又难免有点儿心酸与不安。因为很多小老板都患上了这样的毛病：事业不大架子大、老板不大脾气大，自以为是，傲气十足，结果很多的机会就在这种需要预约的情况下丧失了。
|
||||
|
||||
### 十种做不大的老板
|
||||
> 据一些管理学家的最新研究，发现有十种老板，由于各方面的制约，是很难将生意做大的。
|
||||
|
||||
#### 没有大梦想的老板
|
||||
* 不想做出大成就的老板，安于现状，对竞争没有充分的认识，对机会不敏感。商界往往是大野心的老板做成了大公司，安于现状的老板最后不得不因业绩不良而关门或换行。
|
||||
|
||||
#### 没有创业规划的老板
|
||||
* 这种老板不善于对自己的事业做中长期规划，往往在经营中浪费很多的资源，或者让人才流失，或者让资源闲置，所以他们的经营成本很高。
|
||||
|
||||
#### 不重视人才的老板
|
||||
* 对任何公司而言，人才比资金比资产都重要，有了人才才可以做想做的事，没有人才一切免谈。老板最能干的公司往往都做不大，老板不太能干的公司，往往能做得很大。刘邦和项羽就是最好的例子，刘邦不能干，所以他重用萧、韩、张三杰，项羽很能干，所以手下能人都留不住，都跑到刘邦那去了。
|
||||
|
||||
#### 完全自己摸索，从不向明师请教的老板
|
||||
* 完全自己摸索的老板，在经营中就会要用很多的失败做代价，走了很多的弯路。从而造成要么信心不足，要么资源被浪费后没有创业资金，要么就是视野很小，看不到机会和危机。善于向明师请教的人，总可以少走一些弯路。因为他站在别人的肩膀上，所以能看得更远！
|
||||
|
||||
#### 观念保守思维不开放的老板
|
||||
* 看看中国发展的轨迹，越是开放的地方，越是发展得快，越是观念落后的地方，越是贫穷。思维不开放的老板，总是自己拒绝了很多的发展机会！
|
||||
|
||||
#### 恃己之能从不学习的老板
|
||||
* 经常参加各种培训的老板，都是一些取得成就的老板；从不参加培训的老板，肯定公司业绩不良。为什么？不学习观念就要落后，思维就要保守。
|
||||
|
||||
#### 畏首畏尾顾虑太多的老板
|
||||
* 风险与机会是均等的，从不敢冒险的老板，肯定是要失去很多机会的。世界上的两大公司，都是在风险的浪尖上走过来的。果敢的企业家总是这样想“万一我不做万一我不投资丧失了机会怎么办”，他们想的是“万一成功了”；有些老板总是这样想“万一我做了万一我投资了失败了怎么办”，他们想的是“万一失败了”，所以不做就没有失败，但更没有机会成功！
|
||||
|
||||
#### 心思太细专做小事的老板
|
||||
* 把时间都花在小事上的老板，根本就没有时间来考虑公司发展的大事。有些老板，充其量只是自己的业务员，因为他的主要精力都用在跑业务上；有些老板是救火队员，哪里有问题就上哪里，却从不考虑如何才能不出问题。这些老板都很累，业绩却不良；反过来看，那些只专注于公司发展大事的老板，把小事放心地交给员工做，员工既有了用武之地，就会长期留下来，老板自己反而很轻松。
|
||||
|
||||
#### 埋头经营从不做宣传的老板
|
||||
* 营销就是做广告，越是多做广告越是会做宣传的老板，公司就会发展得快，业务就会做得多，连少林寺都要用宣传来推广自己，否则它哪有那么多的香客和门徒？埋头经营的老板还在满足自己的客户量还可以的时候，却不知已经有人做宣传占领了更大的市场份额！
|
||||
|
||||
#### 贪图小利不讲诚信的老板
|
||||
* 讲诚信是需要付出代价的，往往代价很高；但往往也因此带来了自己长期发展的各种机会；不讲诚信，看似代价很低，暂时占了很多便宜，却不知付出的代价更高，丧失了更多的发展机会。做了很多年还没有发展起来的老板，肯定遵守诚信不够！
|
||||
|
||||
### 总结
|
||||
* 从上来看，我需要提升的地方还有很多很多，从心态到气场，从执行的态度，到为人处世的方法，学无止境，提高自己的格局，改变自己的视野，不要被眼前的枷锁所束缚，世界很大，我还有很多地方没有去走，牛人很多，我还有很多品质需要研究
|
||||
|
||||
* 改变自己，不甘平庸，相信明天！！！
|
||||
16
source/_posts/光辉岁月-间奏.md
Executable file
16
source/_posts/光辉岁月-间奏.md
Executable file
@ -0,0 +1,16 @@
|
||||
---
|
||||
title: 光辉岁月-间奏
|
||||
date: 2016-11-20 10:30:36
|
||||
tags: [音乐, 自录]
|
||||
categories: 音乐
|
||||
---
|
||||
|
||||
{% dplayer
|
||||
"url=http://orjedzer5.bkt.clouddn.com/%E5%85%89%E8%BE%89%E5%B2%81%E6%9C%88%EF%BC%88%E9%97%B4%E5%A5%8F%EF%BC%89.mp4"
|
||||
"api=http://dplayer.daoapp.io"
|
||||
"id=2"
|
||||
"loop=yes"
|
||||
"theme=#fff"
|
||||
"autoplay=true"
|
||||
"token=tokendemo"
|
||||
%}
|
||||
25
source/_posts/关于罗永浩.md
Executable file
25
source/_posts/关于罗永浩.md
Executable file
@ -0,0 +1,25 @@
|
||||
---
|
||||
title: 关于罗永浩
|
||||
date: 2017-07-23 13:28:07
|
||||
tags: [领悟]
|
||||
---
|
||||
|
||||
### 理念
|
||||
* 当一个可以改变时代的人出现，他阐述出了他的观点，很多人都会觉得他是神经病，这个时候就需要坚持自己的想法，能够影响别人，乃至影响世界，给自己一个充实幸福感
|
||||
|
||||
### 理财
|
||||
* 罗永浩曾经不会理财，月光族，公司有一个设计师和他一样。我也一样。这样的人都有一个共同点，就是觉得自己以后能赚大钱。
|
||||
|
||||
### 社交
|
||||
* 罗有轻微的社交恐惧症，有一部分是内向，当在场的人超过一半会比较外向，现在的时代，是外向的人占便宜，当时因为罗不喜欢社交，没有去维持商业圈，导致能解决的问题停滞了一年吧半。
|
||||
* 所以不要内向，改变自己，当你在一个场合出入次数多了，性格开朗了，你就会改变
|
||||
|
||||
### 追求完美
|
||||
* 罗非常追求完美和细节，这点和他崇拜乔布斯有关，我是个极简主义者，
|
||||
|
||||
### 性格
|
||||
* 老罗脾气不好，但是直爽，有很强的执行力，想做即做，在他看来，如果一个事前不是需要先天的能力作为基石，那这件事我们如果有信心去做，就一定能够成功
|
||||
|
||||
### 总结
|
||||
* 我和老罗差在，有很多事前畏手畏脚，不敢去做，就和他曾经的从商恐惧感一样，其实真正去做了，很多问题也会在实践中得到解决。
|
||||
* 极端的讲，如果你提出一个跨时代的想法，而你身边的人说你疯了，那可能我们其中有一个就是笨蛋
|
||||
56
source/_posts/前端的职业路线.md
Executable file
56
source/_posts/前端的职业路线.md
Executable file
@ -0,0 +1,56 @@
|
||||
---
|
||||
title: 前端的职业路线
|
||||
date: 2017-03-19 23:35:04
|
||||
tags: [前端规划]
|
||||
---
|
||||
|
||||
小结，一个优秀的前端leader，我认为应该具备的能力：
|
||||
|
||||
### 技术功底
|
||||
> 重要功能或需求的开发，或提供解决方案，做技术选型
|
||||
|
||||
#### 技术专攻
|
||||
· HTML
|
||||
理解语义化
|
||||
· CSS
|
||||
动态居中动画
|
||||
Bootstrap 样式类
|
||||
Preprocessor兼容性
|
||||
Hack与特征检测
|
||||
CSS3属性与性能
|
||||
· js
|
||||
Name hoisting
|
||||
Prototype
|
||||
Closure
|
||||
Main loop
|
||||
Promise
|
||||
Delegation
|
||||
Cross domain
|
||||
· Mobile
|
||||
渐进增强
|
||||
移动端交互
|
||||
兼容性问题
|
||||
· Debug工具
|
||||
· 方法性能
|
||||
JSCache
|
||||
control
|
||||
性能测试
|
||||
|
||||
### 沟通能力
|
||||
> 具备产品思维，需求分析评审，分发开发任务，和产品经理、设计师以及后端等沟通、协调
|
||||
|
||||
### 项目管理能力
|
||||
> 开发需求的跟进，代码review，代码合并与发布等，精通svn或git是必须的，记住是精通，你新招的新手同事很可能不知道什么时候把别人写好的东西弄没了，你至少要知道如何找回吧
|
||||
|
||||
### 文档功力和执行力
|
||||
> 前端开发规范，开发文档、开发标准的建立和实施，关键是实施
|
||||
|
||||
### 做老师的能力
|
||||
> 新员工的培训、辅导
|
||||
|
||||
### 行业观察能力
|
||||
> 前端的技术更新太快了，一个优秀的前端leader还要引导团队了解和学习新的技术，为以后做技术储备
|
||||
|
||||
### 不要太宅
|
||||
> 这很重要，技术男大多很宅，要想做一个好的leader，就要多和不同的人特别是多和沟通方面强势的人打交道。
|
||||
要不，等你做到leader的位置，即便是站在前端的角度来看有些极度不合理的需求，你也可能镇不住，天天接这样的需求，怨言就犹如漫天飞雪，受不了的人会选择离开，如果你的团队离职率高的话。。。Boss会觉得你是合适的吗？
|
||||
196
source/_posts/前端面试准备.md
Executable file
196
source/_posts/前端面试准备.md
Executable file
@ -0,0 +1,196 @@
|
||||
---
|
||||
title: 前端面试准备
|
||||
date: 2017-08-27 10:12:07
|
||||
tags: [web前端, 面试]
|
||||
---
|
||||
|
||||
整理一些面试题，以备用
|
||||
|
||||
## 技术分类
|
||||
|
||||
### JS (行为层)
|
||||
#### typeof 返回哪些数据类型
|
||||
* obj num fun bool undefined
|
||||
|
||||
#### 3种强制类型转换两种隐式类型转换
|
||||
* parseInt parseFloat number
|
||||
* == - ===
|
||||
|
||||
#### 数组方法pop() push() unshift() shift()
|
||||
* push() 尾部添加 pop() 尾部删除
|
||||
* unshift() 头部添加 shift() 头部删除
|
||||
|
||||
#### ajax请求 get 和 post 的区别
|
||||
* 一个在 url 后面，一个放在虚拟载体里面
|
||||
* 有大小限制
|
||||
* 安全问题
|
||||
* 应用不同
|
||||
|
||||
#### call 和 apply 的区别
|
||||
* object.call(this, obj1,obj2,obj3)
|
||||
* object.apply(this, argument)
|
||||
|
||||
#### ajax 请求时，如何解析 json 数据
|
||||
* 使用eval parse，介于安全性考虑 使用parse 更靠谱
|
||||
* eval 可以解析任何字符串，parse只解析json格式的字符串
|
||||
|
||||
#### 闭包是什么？
|
||||
* 闭包就是能够读取其他函数内部变量的函数
|
||||
|
||||
#### 添加 删除 替换 插入到某个节点的方法
|
||||
* obj.appendChild()
|
||||
* obj.innersetBefore()
|
||||
* obj.replaceChild()
|
||||
* obj.removeChild()
|
||||
|
||||
#### javascript 同源策略
|
||||
* 一段脚本只能读取来自同一来源的穿考核文档的属性，同源：指主机名，协议和端口号的组合
|
||||
|
||||
#### 编写一个 b 继承 a 的方法
|
||||
```
|
||||
function A(name) {
|
||||
this.name = name;
|
||||
this.sayHello = function(){alert(this.name+ "say hello!")}
|
||||
}
|
||||
|
||||
function B(name, id) {
|
||||
this.temp = A
|
||||
this.temp(name)
|
||||
delete this.temp
|
||||
this.id = id
|
||||
this.checkId = function(ID) {alert(this.id == ID)}
|
||||
}
|
||||
```
|
||||
|
||||
#### 如何阻止事件冒泡和默认事件
|
||||
```
|
||||
function stopBubble(e) {
|
||||
if (e && e.stopPropagation) {
|
||||
e.stopPropgation ()
|
||||
} else {
|
||||
window.event.cancelBubble = true
|
||||
}
|
||||
return false
|
||||
}
|
||||
```
|
||||
|
||||
#### 谈谈this对象的理解
|
||||
* this 是 js 的一个关键字， 随着函数使用场合不同，this的值会发生变化
|
||||
* 但是有一个原则，this 指向的就是调用函数的那个对象
|
||||
* this 一般情况下： 是指全局对象global， 如果作为方法调用，就指向这个对象
|
||||
|
||||
#### 简单讲下 node 的使用场景
|
||||
* 高并发，聊天，实时消息推送
|
||||
|
||||
#### node 的优点和缺点提出自己的看法
|
||||
* 优点： node是基于时间驱动和无阻塞的，所以非常适合处理并发请求，因此构建在node上的代理服务器相比其他技术实现的服务器表现要好的多，与node代理服务器交互的客户端代码也是用js写的，用的相同的语言，这感觉前后端非常亲切和美妙
|
||||
|
||||
* 缺点： node是一个相对比较新的开源项目，所以不太稳定，它总是在变，而且缺少足够多的第三方库的支持
|
||||
|
||||
|
||||
|
||||
#### 常用的一款框架
|
||||
|
||||
* vuejs reactjs jQuery angular
|
||||
|
||||
|
||||
### CSS (表现层)
|
||||
#### 清除浮动
|
||||
* 使用clear
|
||||
* 使用overflow
|
||||
* 使用css的*：after
|
||||
|
||||
#### 居中设置
|
||||
1· 水平居中
|
||||
* flex布局
|
||||
> 设置justify-content：center；
|
||||
|
||||
2· 垂直居中
|
||||
* 多行文本（内联元素）
|
||||
> a: 插入 table ，再设置vertical-align: middle;
|
||||
> b: 先设置display： table-cell；再设置vertical-align: middle;
|
||||
|
||||
#### link 和 @import的区别
|
||||
* link除了加载css，还能用于定义RSS，定义rel链接属性，import只能引入css
|
||||
* 页面加载时，link同时加载，而@import引用的css会等到页面被加载完之后再加载
|
||||
* import 只在 ie5 以上被识别
|
||||
|
||||
#### css 盒子模型
|
||||
* content，padding，margin，border
|
||||
|
||||
#### css 选择符号
|
||||
* id选择器
|
||||
* 类选择器
|
||||
* 标签选择器
|
||||
* 相邻选择器 +
|
||||
* 子选择器 >
|
||||
* 后代选择器
|
||||
* 通配符选择器 *
|
||||
* 属性选择器 （a[rel = 'external'])
|
||||
* 伪类选择器 hover nth-child
|
||||
* 优先级
|
||||
> !important > id > class > tag
|
||||
|
||||
### HTML (结构层)
|
||||
#### 什么是语义化的HTML
|
||||
* 直观的认识标签，有益于 SEO
|
||||
* 有利于开源之后阅读代码的人更容易阅读
|
||||
* 便于后期维护和理解
|
||||
|
||||
### 自动化编程
|
||||
|
||||
#### 前端自动化工具？
|
||||
* gulp
|
||||
* webpack
|
||||
|
||||
### 其他
|
||||
#### 描述一下cookies，sessionStorage 和localStorage的区别？
|
||||
* cookie 在浏览器和服务器之间来回传递，SS和LS不会
|
||||
* SS和LS 的储存空间更大
|
||||
* SS和LS 有更多丰富易用的接口
|
||||
* SS和LS 是有各自的储存空间
|
||||
* LS 储存是永久性的，SS 关闭浏览器就没了
|
||||
|
||||
#### 如何实现浏览器内多个标签之间的通信
|
||||
* 调用LS Cookies 等本地储存方式
|
||||
|
||||
#### IE6 BUG 的解决办法
|
||||
* 双边距，float引起，使用display
|
||||
* 3像素问题，float引起， 使用display：inline-3px
|
||||
* 超链接 hover 点击失效， 注意顺序
|
||||
* 无法定义1px左右的宽度容器（使用overflow：hidden；zoom：0.08；line-height：1px）
|
||||
|
||||
#### 你有哪些性能优化的方法
|
||||
* 减少http请求次数，css，js，html压缩，图片大小控制和压缩，网页cdn托管，data缓存，图片服务器
|
||||
* 前端模板 js + 数据，减少由于html导致的带宽浪费，减少请求次数，
|
||||
* 图片预加载，将样式表放在头部，脚本放在底部，加上时间戳
|
||||
* 用innerHTML代替dom操作，减少dom操作次数，优化js性能
|
||||
* 当需要设置的样式很多时，设置className而不是直接操作dom
|
||||
* 避免在页面的主体布局中使用table，table要在其中的内容完全下载完之后才会完全显示，显示div+css布局慢。普通网站有一个普遍的思路，就是尽量向前端化，减少数据库操作，减少磁盘IO，
|
||||
* 前端化：在不影响功能和体验的情况下，能在浏览器执行的不要在服务器执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取到的结果不要到外部取，本机能取到的不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询
|
||||
* 减少数据库操作指：减少更新次数，缓存结果减少查询次数，将数据库执行的操作尽可能的让你的操作完成，减少磁盘IO指尽量不适用文件系统作为缓存，减少读写文件次数等。
|
||||
* 程序优化永远要优化慢的部分
|
||||
|
||||
#### http 状态码有哪些？分别代表啥意思？
|
||||
* 100-199 用于指定客户端相应的某些动作
|
||||
* 200-299 用于表示请求成功
|
||||
* 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
|
||||
* 400-499 用于指出客户端的错误。
|
||||
> 400: 语义有误 401：当前请求需要用户验证 403: 服务器已经理解请求，但是拒绝执行他 404：页面找不到
|
||||
* 500-599 用于支持服务器错误。501 服务器不可用
|
||||
|
||||
#### 一个页面从输入 url 到页面显示完成，中间发生了什么？
|
||||
* 查找浏览器缓存
|
||||
* DNS 解析，查找该域名对应的IP，重定向（301），发出第二个 get 请求
|
||||
* 进行HTTP 协议对话
|
||||
* 客户端发送报头
|
||||
* 文档开始下载
|
||||
* 文档树建立，根据标记请求所需指定mime类型的文件
|
||||
* 文件显示
|
||||
* 浏览器这边做的工作大致分为以下几步：
|
||||
> 加载：根据请求的url进行域名解析，向服务器发起请求，接受文件（html，js，css，图像等）
|
||||
> 解析：对加载到的资源（html，js，css）进行语法解析，建议相应的内部数据结构（比如html的dom树，js的属性表，css的样式表规则等等）
|
||||
|
||||
|
||||
### 总结
|
||||
* 怀着一颗空杯心态去看待事物，这样才会有进步，学无止境，我要走的路还很长
|
||||
45
source/_posts/前端面试题.md
Executable file
45
source/_posts/前端面试题.md
Executable file
@ -0,0 +1,45 @@
|
||||
---
|
||||
title: 前端面试题
|
||||
date: 2017-09-18 10:01:20
|
||||
tags: [web前端, 面试]
|
||||
---
|
||||
|
||||
### 前言
|
||||
* 前端的难度，每18-24个月一轮回
|
||||
* 关注技术动态，跟上节奏
|
||||
|
||||
#### 注意
|
||||
* 题目类型：理论知识，算法，项目细节，技术视野，开放性题，工作案例
|
||||
* 细节追问：可以确保问到你开始不懂和面试官开始不懂为止
|
||||
* 回答问题再棒，更要会做人
|
||||
* 要靠谱
|
||||
|
||||
### 知识点
|
||||
|
||||
* html & css：对web标准的理解，浏览器内核差异，兼容性，hack，css基本功：布局，盒子模型，选择器优先级，flexbox
|
||||
|
||||
* javascript: 数据类型，运算，对象，function，继承，闭包，作用域，原型链，事件，正则（regExp），json，ajax，dom，bom，内存泄漏，跨域，异步封装，模板引擎，前端mvc，路由，模块化，canvas，es6，nodeJS
|
||||
|
||||
* 其他：移动端，相应式，自动化构建，http，离线储存，web安全，优化，重构，团队协作，可维护，易用性，SEO，UED，架构，职业生涯，快速学习能力
|
||||
|
||||
### html && css
|
||||
|
||||
#### html5 为啥只需写 <!DOCTYPE HTML>
|
||||
* 不基于 SGML（通用标记语言）
|
||||
|
||||
### iframe 缺点？
|
||||
* 阻塞搜索引擎，不利于SEO
|
||||
* 和主页面共享连接池，影响连接速度
|
||||
* 如果要用，建议用 js 动态添加 src 可以绕开以上问题
|
||||
|
||||
|
||||
### javascript
|
||||
|
||||
#### 如何实现 js 与 json 互换
|
||||
* json 化
|
||||
> var json = JSON.stringfy({a: 'hello', b: 'world'})
|
||||
* 字符串化
|
||||
> var obj = JSON.parse('{"a": "hello"}')
|
||||
|
||||
|
||||
### 其他
|
||||
124
source/_posts/四种常见的布局.md
Executable file
124
source/_posts/四种常见的布局.md
Executable file
@ -0,0 +1,124 @@
|
||||
---
|
||||
title: 四种常见的布局
|
||||
date: 2017-06-28 16:16:11
|
||||
tags: [布局, 圣杯]
|
||||
categories: web前端
|
||||
---
|
||||
|
||||
对于一个对界要求很高的人来说，今天有必要研究下各种常见的布局，目前罗列了四种布局，来来来，一起看看
|
||||
|
||||
[demo](http://jzxer.cn/layout/)
|
||||
|
||||
### 绝对定位法
|
||||
> 左右两栏采用绝对定位，中间的由两边的margin撑开
|
||||
```
|
||||
<body>
|
||||
<div id="main"></div>
|
||||
<div id="left"></div>
|
||||
<div id="right"></div>
|
||||
</body>
|
||||
|
||||
#main {
|
||||
margin:0 200px;
|
||||
background:red;
|
||||
}
|
||||
#left{
|
||||
position:absolute;
|
||||
top:0;left:0;
|
||||
width:200px;
|
||||
background:blue;
|
||||
height:100%;
|
||||
}
|
||||
#right{
|
||||
position:absolute;
|
||||
top:0;right:0;
|
||||
width:200px;
|
||||
background:green;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
```
|
||||
这种布局缺点是，当缩放到一定大小的时候，会出现重叠现象
|
||||
|
||||
### 自身浮动法
|
||||
> 左栏左浮动，右栏右浮动，中间栏放最后
|
||||
```
|
||||
<body>
|
||||
<div id="left"></div>
|
||||
<div id="right"></div>
|
||||
<div id="main"></div>
|
||||
</body>
|
||||
|
||||
#main {margin:0 200px;background:red;}
|
||||
#left{float:left;width:200px;background:blue;height:100%;}
|
||||
#right{float:right;width:200px;background:green;height:100%;}
|
||||
```
|
||||
简单而高效，代码还容易理解，适合初学者
|
||||
|
||||
|
||||
### 圣杯布局
|
||||
```
|
||||
//注意元素次序
|
||||
<div class="main">Main</div>
|
||||
<div class="left">Left</div>
|
||||
<div class="right">Right</div>
|
||||
|
||||
//习惯性的CSS reset
|
||||
body,html{
|
||||
height:100%;
|
||||
padding: 0;
|
||||
margin: 0
|
||||
}
|
||||
//父元素body空出左右栏位
|
||||
body {
|
||||
padding-left: 100px;
|
||||
padding-right: 200px;
|
||||
}
|
||||
//左边元素更改
|
||||
.left {
|
||||
background: red;
|
||||
width: 100px;
|
||||
float: left;
|
||||
margin-left: -100%;
|
||||
position: relative;
|
||||
left: -100px;
|
||||
height: 100%;
|
||||
}
|
||||
//中间部分
|
||||
.main {
|
||||
background: blue;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
//右边元素定义
|
||||
.right {
|
||||
background: red;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
margin-left: -200px;
|
||||
position: relative;
|
||||
right: -200px;
|
||||
}
|
||||
```
|
||||
稍微难理解一点，不过这种布局目前我觉得是适配性比其他两种要好的布局方式，缺点是后期维护性不高
|
||||
|
||||
### 双飞翼布局
|
||||
```
|
||||
div class="main">
|
||||
<div class="inner">
|
||||
Main
|
||||
</div>
|
||||
</div>
|
||||
<div class="left">Left</div>
|
||||
<div class="right">Right</div>
|
||||
```
|
||||
>css样式就是将body上的左右margin值去掉，加在新增的 div 中
|
||||
|
||||
这种布局方式为淘宝 UED 提出，目前最好用的一种布局方式，相比较圣杯布局，去掉了相对布局，代码更简洁
|
||||
|
||||
### 小结
|
||||
一个人的页面能力怎么样，从他对一个网站的布局如何就可以看出来，我觉得一个网站不但要用户看起来舒服，还要工程师在看到你的代码的时候，觉得布局非常巧妙。
|
||||
|
||||
* 美观大方的布局加上简洁的代码，加油吧，骚年~
|
||||
26
source/_posts/如何成为一名合格的CEO.md
Executable file
26
source/_posts/如何成为一名合格的CEO.md
Executable file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: 如何成为一名合格的CEO
|
||||
date: 2017-08-28 13:14:49
|
||||
tags: [职场]
|
||||
---
|
||||
|
||||
### 集中精力抓到要害问题
|
||||
* 好的ceo善于俯视整个公司，确定最优先要做的事前，然后重点突破，一两件事就能使公司发生巨大的变化。如果你能抓住公司面临问题的要害之处，人们才会洗耳恭听
|
||||
|
||||
### 销售能力
|
||||
* ceo 必须具备推销能力，把东西推销给客户和投资者，或者把革命思想推荐给公司
|
||||
|
||||
### 对财务的敏感
|
||||
* 读懂数据，把纸上的东西和实际的公司情况结合起来，不仅仅是预算问题，也需要思考盈利的驱动力问题。
|
||||
|
||||
### 有策略头脑
|
||||
* 策略就是选择公司将参与角逐的竞技场，然后建立与这场竞争想关的优势。这样会考验你如何适应游戏规则并在游戏中获胜
|
||||
|
||||
### 管理变革的能力
|
||||
* 在整个公司的变革，犹如管理一个部门，但要困难的多，你的行动要有号召力。你必须为人们树立一个榜样，挑选真确的管理团队，确定可能妨碍或阻止你的层层挑战
|
||||
|
||||
### 领导能力
|
||||
* 领导需要精力和激情。你必须先感召你自己，然后感召其他人。但激情也不是无根无据的滥用，一个坚定的长远目标很重要。
|
||||
|
||||
### 个性魅力
|
||||
* 伟大的ceo知道什么时候用逻辑推理，什么时候相信自己的直觉，他们知道什么时候应该采取什么措施，什么时候听之任之，他知道什么时候管什么时候不要管。
|
||||
97
source/_posts/常见的兼容性问题.md
Executable file
97
source/_posts/常见的兼容性问题.md
Executable file
@ -0,0 +1,97 @@
|
||||
---
|
||||
title: 常见的兼容性问题
|
||||
date: 2017-10-22 22:38:44
|
||||
tags: [css, 前端]
|
||||
---
|
||||
|
||||
#### html 对象获取问题
|
||||
* IE: document.idname (老版本)
|
||||
解决办法：统一用 getElementById()
|
||||
|
||||
#### const 问题
|
||||
* IE：只能用 var
|
||||
解决办法：统一用 var
|
||||
|
||||
#### event.x/y 问题
|
||||
* IE：只有 event.x/y 没有pageX/Y
|
||||
解决办法：mX = event.x/y ? event.x/y : event.pageX/Y
|
||||
|
||||
#### window.location.href 问题
|
||||
* IE 和 Firefox1.5 以下：只能用 window.location
|
||||
解决办法：只用window.location
|
||||
|
||||
#### frame 问题
|
||||
* <frame src="" id="frameId" name="frameName"/>
|
||||
1、访问对象
|
||||
IE：可以通过 id 和 name 访问
|
||||
Firefox：只能通过 name
|
||||
|
||||
#### Firefox 和 IE 的父元素 parentElement 的区别
|
||||
IE：obj.parentElement
|
||||
Firefox：obj.parentNode
|
||||
解决办法：都用obj.parentNode
|
||||
|
||||
#### table 操作问题
|
||||
* IE：不允许在 table 和 tr 的 innerHTML 中操作，appendchild 都不行
|
||||
解决办法：建议用框架，也可以向 js 中添加一个空行
|
||||
|
||||
#### 对象宽高赋值问题
|
||||
* Firefox 中 obj.style.height = imgObj.height 语句无效
|
||||
|
||||
#### innerText 问题
|
||||
* 在 Firefox 中无法使用
|
||||
解决办法：
|
||||
```
|
||||
if (navigator.appName.indexOf('Explorer') > -1) {
|
||||
document.getElementById('element').innerText = 'my text'
|
||||
} else {
|
||||
document.getElementById('element').textContent = 'my text'
|
||||
}
|
||||
```
|
||||
|
||||
#### FF 和 IE 解释相差 2px
|
||||
box {width:100px; border: 1px;}
|
||||
IE：box.width = 100
|
||||
FF：box.width = 100 + 1*2
|
||||
解决方法：{width: 100px!important; width: 98px;}
|
||||
|
||||
#### margin 加倍的问题
|
||||
设置为 float 的 div 在 ie 下设置的 margin 会加倍
|
||||
解决方法：加入 display：inline
|
||||
|
||||
#### 页面的最小宽度
|
||||
IE 不识别 min
|
||||
解决方法：min-width: 600px; width: expression(document.body.clientWidth < 600px ? '600px' : 'auto')
|
||||
|
||||
#### div 浮动 IE 文本产生 3px bug
|
||||
解决方法：左边浮动，右边margin-right: -3px;
|
||||
|
||||
#### li 中内容超过长度以省略号显示
|
||||
```
|
||||
li {
|
||||
width:200px;
|
||||
white-spave: nowrap;
|
||||
text-overflow: elipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
FF 不支持
|
||||
|
||||
#### IE 不能换滚动条颜色
|
||||
解决方法：将 body 换成 HTML
|
||||
html {scrollbar-face-color: #fff;....}
|
||||
|
||||
#### 如何让层显示在 flash 之上
|
||||
解决方法：将flash 设置为透明
|
||||
|
||||
#### 超链接访问过后 hover 就不显示的问题
|
||||
解决方法：注意顺序 L-V-H-A
|
||||
|
||||
#### form 标签初始化
|
||||
在 IE 中会有一点边距
|
||||
解决方法：ul,form {margin: 0; padding: 0;}
|
||||
|
||||
#### js 强制兼容
|
||||
可以下载 js 库
|
||||
|
||||
####
|
||||
75
source/_posts/我向往的明天.md
Executable file
75
source/_posts/我向往的明天.md
Executable file
@ -0,0 +1,75 @@
|
||||
---
|
||||
title: 我向往的明天
|
||||
date: 2017-07-01 21:53:37
|
||||
tags: [随记]
|
||||
---
|
||||
|
||||
#### 欲望
|
||||
* 我很希望，自己的未来能不一样
|
||||
|
||||
* 我想要的，就是在平凡中不断的改变自己
|
||||
|
||||
* 路上的人，有人嘲笑，有人鼓励
|
||||
|
||||
* 我全都笑纳
|
||||
|
||||
* 好的留在心里
|
||||
|
||||
* 坏的随风飘逝
|
||||
|
||||
* 展现真正的自己，表达的更简单一些
|
||||
|
||||
* 在机会来临时
|
||||
|
||||
* 奋不顾身的抓牢它
|
||||
|
||||
* 不要被眼前的利益所迷惑
|
||||
|
||||
* 放眼更广阔的未来
|
||||
|
||||
* 做好自己
|
||||
|
||||
* 抓住身边一切的美好
|
||||
|
||||
* 当有一天对一切都无所畏惧
|
||||
|
||||
* 那就是
|
||||
|
||||
* 重生
|
||||
|
||||
#### 谈谈今天
|
||||
> 人有时候真的挺纠结，就像我今天看了 《龙飞凤舞》，觉得上流社会的生活有时候即糜烂，又觉得美好
|
||||
> 有的人花了一生时间，去挤进那样的生活圈，有的人甘愿过着平凡的生活
|
||||
> 殊不知，彼此之间都存在着羡慕与无奈
|
||||
> 我也不例外
|
||||
> 如果哪天，我能够进入这样的世界
|
||||
> 我是否能够保持清醒，不被外界所干扰，任然保持初心？
|
||||
> 我也不敢保证，所以我一直在努力
|
||||
> 为了不亏欠曾经的自己
|
||||
> 我不敢停下脚步
|
||||
> 我怕我停下来
|
||||
> 就找不到回去的路
|
||||
> 我也舍弃了太多
|
||||
> 只因为我曾经欠下太多
|
||||
> 但我不后悔
|
||||
> 明天的路， 我想自己走
|
||||
> 即使错了，那也是个经历，我会记在心中
|
||||
> 将来成功的那天，回忆，何不是一种财富？
|
||||
|
||||
#### 总结
|
||||
|
||||
* 每个人都不一样，早点实战，可能更快明白自己想要什么
|
||||
* 我不认为一定会混技术职场，现在做的是为了我将来的梦想
|
||||
* 我要做一款只属于自己的产品
|
||||
* 即使时间再怎么磨砺
|
||||
* 我也希望不要忘对自己的承诺
|
||||
* 给自己定一个期限
|
||||
* 6 年
|
||||
* 即使以后再有钱，我也会把健康看做第一位
|
||||
* 我希望那时我有房 有车 还有她
|
||||
* 不想以后不顾家
|
||||
* 未来我还是想闯出自己的一片天地
|
||||
* 结婚的话在30-35之间吧，真希望她是个艺术家
|
||||
* 6 年，努力点，足以在一个行业小有所成
|
||||
* 那时候就是我想要的未来
|
||||
* 加油！！！
|
||||
16
source/_posts/我是愤怒.md
Executable file
16
source/_posts/我是愤怒.md
Executable file
@ -0,0 +1,16 @@
|
||||
---
|
||||
title: 我是愤怒
|
||||
date: 2017-01-7 22:36:55
|
||||
tags: [音乐, 自录]
|
||||
categories: 音乐
|
||||
---
|
||||
|
||||
{% dplayer
|
||||
"url=http://orjedzer5.bkt.clouddn.com/%E6%88%91%E6%98%AF%E6%84%A4%E6%80%92.mp4"
|
||||
"api=http://dplayer.daoapp.io"
|
||||
"id=3"
|
||||
"loop=yes"
|
||||
"theme=#fff"
|
||||
"autoplay=true"
|
||||
"token=tokendemo"
|
||||
%}
|
||||
32
source/_posts/搭一个windows云服务器.md
Executable file
32
source/_posts/搭一个windows云服务器.md
Executable file
@ -0,0 +1,32 @@
|
||||
---
|
||||
title: 搭一个windows云服务器
|
||||
date: 2017-06-16 22:02:51
|
||||
tags: [服务器, windows]
|
||||
categories: 服务器
|
||||
---
|
||||
|
||||
前段时间看到腾讯云服务器对学生有优惠，而且很大一坨，就买了一个回来研究，废话不多说，开搞咯~
|
||||
|
||||
## 买服务器
|
||||
* 首先你得入手一个服务器，学生特惠8元/月，还有一块的，不过难抢，机不可失，失不再来，毕业你就没机会了，
|
||||
> 地方的话就近原则，访问应该会快点
|
||||
|
||||
## 配置服务器
|
||||
* 我这里是配了 Windows2012 64位系统，1核1G内存
|
||||
> Linux的系统，听说比较好用，但目前我还没用过，Windows我觉得也还行
|
||||
|
||||
* 进入云服务器控制中心，打开安全组，按需求开放端口
|
||||
> 我是开放了全部端口的，你可以随意
|
||||
|
||||
## 远程连接服务器
|
||||
* 在命令行输入 mstcs 输入你的电脑信息，邮箱查看电脑的默认密码，请及时修改，账号一般默认是administritor，不是的话请先确认
|
||||
|
||||
## 设置主页
|
||||
* 进入云服务器之后，打开服务器管理器，[新建角色] => [基于角色和功能的安装] => [从服务器池中选择服务器] => [web服务器应用程序开发，勾选.net4.5 和CGI] => [IIS可承载的web核心] => [确认安装]
|
||||
> 中间如果碰到什么问题，仔细看流程，如果还报错，我也帮不了你了
|
||||
|
||||
* 安装完成之后就可以通过ip地址访问到一个有IIS提示的蓝色网站，该项目的默认地址是 C:inetpub/wwwroot 你想更改的话可以直接拿你的html（htm）文件放在该目录下，一定要保证根目录有个html（htm）文件
|
||||
|
||||
## 设置分页
|
||||
* 如果你想通过类似 localhost/about 路径访问你的about项目，你可以在IIS管理的的 default website添加你的项目路径
|
||||
>右键 添加应用程序，将该项目的物理路径填上去就可以了
|
||||
16
source/_posts/梦中的婚礼.md
Executable file
16
source/_posts/梦中的婚礼.md
Executable file
@ -0,0 +1,16 @@
|
||||
---
|
||||
title: 梦中的婚礼
|
||||
date: 2016-08-15 15:38:42
|
||||
tags: [音乐, 古典]
|
||||
---
|
||||
|
||||
{% dplayer
|
||||
"url=http://orjedzer5.bkt.clouddn.com/%E6%A2%A6%E4%B8%AD%E7%9A%84%E5%A9%9A%E7%A4%BC.mp4
|
||||
"
|
||||
"api=http://dplayer.daoapp.io"
|
||||
"id=4"
|
||||
"loop=yes"
|
||||
"theme=#fff"
|
||||
"autoplay=true"
|
||||
"token=tokendemo"
|
||||
%}
|
||||
41
source/_posts/电吉他即兴原理.md
Executable file
41
source/_posts/电吉他即兴原理.md
Executable file
@ -0,0 +1,41 @@
|
||||
---
|
||||
title: 电吉他即兴原理
|
||||
date: 2017-02-15 21:02:51
|
||||
tags: [电吉他, 即兴]
|
||||
categories: 音乐
|
||||
---
|
||||
|
||||
## 第一阶段
|
||||
|
||||
* 先确定好和弦进行，比如 1－6－4－5
|
||||
|
||||
* 再找到该调中每个和弦的五级和弦，5－3－1－2
|
||||
|
||||
* 把两个和弦的音归拢 12357 － 56713 － 34561 － 45672
|
||||
|
||||
> 这样每个和弦就可以用那5个音了。现在先练习一下，在C大调中的 C-Am-F-G中用每个和弦对应的那5个音来进行第一步的练习。（对应的5个音可以按照默认的那个顺序也可以打乱练习，重点听这些音对和弦产生的效果）
|
||||
|
||||
## 第二阶段
|
||||
|
||||
* 重点音与经过音。
|
||||
|
||||
* 在上个练习后大家应该找到每个和弦拥有的那5个音中哪些对该和弦的性质有比较明显的效果，哪些音对该和弦有特殊的效果，哪些音对该和弦没有多大用处比较平淡。（每个人的感觉不同，练习时候的心态和练习内容不同所以最终对音乐的感受也不一样，自然最后确定的音附也不一样，相信自己的感觉，这样坚持才能发展自己的特点）
|
||||
|
||||
* 将找到的对每个和弦有用的音作为该和弦的重点，没用的作为经过音，同时不包含在每个和弦的那5个音中剩余的那两个音（46－24－27－13）刚开始练习阶段不要弹，以后熟练了再作为经过音加入到练习中。
|
||||
|
||||
> （这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）
|
||||
|
||||
## 第三阶段
|
||||
|
||||
* 这次就是节奏的训练，同样的旋律试着把每个音的时值改变，加入附点音，先现音，休止符等。并随着水平的进步加快速度。
|
||||
|
||||
> 从第一阶段到这个阶段差不多要练3－6个月的时间，大家先好好练习吧
|
||||
|
||||
* （这个练习中，速度一定要慢，60－100左右的速度，每个和弦可以延长到2小结，重点音用4分或2分音符，经过音用16分或8分音符，每次弹奏的旋律多重复几次熟记于心）
|
||||
## 各个阶段的重点
|
||||
建议大家先一个和弦一个和弦的练，把每个和弦和他对应的音练熟再换下一个和弦，然后再将两个和弦连起来练，然后再练下一个，再下一个，再连起来。
|
||||
* 第一阶段的重点就是一定要在和弦中充分的把每一个应该弹的音在大脑里反映清楚并且弹好记熟。
|
||||
|
||||
* 第二阶段重点就要特别留意每个音符和对应的每个和弦和感觉（首先和弦的分解音肯定是比较稳定的感觉，剩下的两个音才是关键他们分别是和弦根音的7度和9度，这两个音和不同的和弦内音组成的旋律感觉最有特色）
|
||||
|
||||
> 另外刚开始一定注意，慢速弹，一定把要弹的音先在脑子过一遍在反映到琴上，熟练以后才能得心应手，还要注意，每个和弦有5个可以选择的音符，还剩下的两个音（相对于和弦的根音是4度和6度）不是不能用，大家可以试试，这两个音给人的感觉并不是很舒服，最好在完成这两个阶段以后在加入进来练习。
|
||||
60
source/_posts/董思阳的忠告.md
Executable file
60
source/_posts/董思阳的忠告.md
Executable file
@ -0,0 +1,60 @@
|
||||
---
|
||||
title: 董思阳的忠告
|
||||
date: 2017-10-19 10:56:00
|
||||
tags: [领悟]
|
||||
---
|
||||
|
||||
### 关于成功
|
||||
|
||||
* 1、记住，平均每天看电视超过三小时以上的，一定都是那些月收入不超过两千元的，如果你想要月收入超过两千，请不要把时间浪费在电视上，同样的道理，那些平均每天玩网络游戏或聊天超过三个小时以上的，也都是那些月收入不超过两千的。
|
||||
|
||||
* 2、这个世界，有这么一小撮的人，打开报纸，是他们的消息，打开电视，是他们的消息，街头巷尾，议论的事他们的消息，仿佛世界是为他们准备的，他们能够呼风唤雨，无所不能。你的目标，应该是努力成为这一小撮人。
|
||||
|
||||
* 3、如果，你真的爱你的爸妈，爱你的女朋友，就好好得去奋斗，去拼搏吧，这样，你才有能力，有经济条件，有自由时间，去陪她们，去好好爱他们。
|
||||
|
||||
* 4、这个社会，是赢家通吃，输者一无所有，社会，永远都是只以成败论英雄。过程只是人生的一部分，再辛苦，没有成功只能说明你的能力还不够。
|
||||
|
||||
* 5、这个世界上，一流的人才，可以把三流项目做成二流或更好，但是，三流人才，会把一流项目，做的还不如三流。
|
||||
|
||||
* 6、趁着年轻，多出去走走看看，读万卷书，不如行万里路，行万里路，不如阅人无数。
|
||||
|
||||
* 7、与人交往的时候，多听少说，这就是，上帝为什么给我们一个嘴巴两个耳朵的原因。
|
||||
|
||||
* 8、不要装13，对于装13的人，最好的办法就是，见块砖头，悄悄跟上去，一下子从背后放到他。
|
||||
|
||||
* 9、一个年轻人，如果三年的时间里，没有任何想法，他这一生，就基本这个样子，没有多大改变了。
|
||||
|
||||
* 10、成功者就是胆识加魄力。
|
||||
|
||||
* 11、给自己定一个五年的目标，然后，把它分解成一年一年，半年半年的，三个月的，一个月的，这样，你才能找到自己的目标和方向。
|
||||
|
||||
* 12、如果我只能送你一句忠告，那就是，这个世界上没有免费的午餐，永远不要走捷径。
|
||||
|
||||
### 忠告
|
||||
|
||||
* 1、给自己定目标，一年、两年、五年，也许你出生不如别人好，通过努力，往往可以改变70%的命运，破罐子破摔只能和懦弱做朋友。
|
||||
|
||||
* 2、朋友请你吃饭，不要觉得理所当然，请礼尚往来，否则你的名声会越来越差。
|
||||
|
||||
* 3、好朋友里面，一定要培养出一个知己，不要以为你有多么八面玲珑，到处是朋友，最后真心对你的，只要一个，相信我。
|
||||
|
||||
* 4、不喜欢的人少接触，但别在背后说坏话，说是非之人，必定是是非之人，谨记，祸从口出。
|
||||
|
||||
* 5、是人都有惰性，这是与生俱来的，但是我们后天可以改变这种惰性，因为有很多人正在改变，对于某种事物或是生意不要等别人做到了，我才想到，不要等别人已经赚到钱了，我才想去做，没有人相信的是市场和机遇，大家都相信的叫做膨胀。
|
||||
|
||||
* 6、知道自己要干什么，夜深人静，问问自己，将来的打算，并朝着那个方向去实现，而不是无所事事和做一些无谓的事。
|
||||
|
||||
* 7、出路出路，走出去了，总是会有路的，困难苦难，困在家里就是难，社会普遍认为。
|
||||
|
||||
* 8、做人，要做到；万事孝为先，教童品之道，夫妻和谐美，幸福万年长。但是这些不是拿来用嘴说说就能办到的，解放初期年代要做到这些，需要付出很大的努力和辛苦，当今现实的社会需要你付出很大的金钱，聪明的人都知道这个道理。
|
||||
|
||||
* 9、空闲时间不要经常上网做无聊的事和玩一些没有意义的游戏，读点文学作品，学习一些经营流程，管理规范，国际时事，法律常识。这能保证你在任何聚会都有谈资。
|
||||
|
||||
* 10、宁可错杀一千次来自各方面的信息，也不放过任何一个有可能成功的机会。只有这样你才不会去买后悔药。
|
||||
|
||||
* 11、要做一件事，成功之前，没有必要告诉其他人。成功之后不用你说，其他人都会知道的。这就是信息时代所带来的效应。
|
||||
|
||||
* 12、力求上进的人，不要总想着靠谁谁，人都是自私的，自己才是最靠得住的人。
|
||||
|
||||
### 小结
|
||||
> 二十岁没钱，那很正常；三十岁没钱，可能是没有好的家境，需要更大的努力；四十岁没钱，只能自己找原因。穷人变成富人是可能的，而且很可能。穷人能穷一辈子，也是必然的，存在就是理由，只是有所选择。
|
||||
121
source/_posts/论轮播图的原理.md
Executable file
121
source/_posts/论轮播图的原理.md
Executable file
@ -0,0 +1,121 @@
|
||||
---
|
||||
title: 解析卡片式轮播图
|
||||
date: 2017-06-24 23:18:35
|
||||
tags: [js, 轮播图]
|
||||
---
|
||||
|
||||
> 小记：前两天面试，展现项目过程中经理问我轮播图的原理，我一脸懵逼，因为当时有现成的插件，所以我没怎么去研究，当然，我也知道该来的还是要来的...
|
||||
|
||||
首先我大概讲一下，传统轮播图的主要部分：
|
||||
* 图片（废话）
|
||||
* 左右两边的button
|
||||
* 可以跳转的小点
|
||||
[demo](http://jzxer.cn/card/)
|
||||
|
||||
### 原理
|
||||
* 轮播图的原理就是一个长图，里面有很多张图，外面包一层展示窗口，将属性设置成overflow：hidden，达到只显示一张的效果，当点击左右两边的按钮时会按照像素来跳转
|
||||
|
||||
### 无限滚动
|
||||
* 我给两个按钮设为 <b>prev next</b> 一个在点击后，长图会增加一张图的宽度，一个是减少一个图的宽度,在图片的头和尾部加一张图，结构大概为：
|
||||
```
|
||||
<div id="list" style="left:-200px">
|
||||
<img src="./img/5.jpg" alt="">
|
||||
<img src="./img/1.jpg" alt="">
|
||||
<img src="./img/2.jpg" alt="">
|
||||
<img src="./img/3.jpg" alt="">
|
||||
<img src="./img/4.jpg" alt="">
|
||||
<img src="./img/5.jpg" alt="">
|
||||
<img src="./img/1.jpg" alt="">
|
||||
</div>
|
||||
```
|
||||
当是最后一张图或第一张图时，将第一张上一张跳转为最后一张时的宽，最后一张跳转为第一张时的宽
|
||||
```
|
||||
if (newList < -1000) {
|
||||
dot = 1
|
||||
list.style.left = -200 + 'px'
|
||||
}
|
||||
if (newList > -200) {
|
||||
dot = 5
|
||||
list.style.left = -1000 + 'px'
|
||||
}
|
||||
```
|
||||
|
||||
### 小按钮切换
|
||||
这要实现的思想有
|
||||
* 点了小按钮，背景色会变
|
||||
* 当点击切换到其他按钮，图片切换，且上一个按钮会变回原来的颜色
|
||||
|
||||
```
|
||||
function showBtn() {
|
||||
for (var i = 0; i < btns.length; i++) {
|
||||
if (btns[i].className == 'show-btn') {
|
||||
btns[i].className = ''
|
||||
break
|
||||
}
|
||||
}
|
||||
btns[dot-1].className = 'show-btn'
|
||||
}
|
||||
//遍历数组，将有该属性设为空
|
||||
|
||||
for (var i = 0; i < btns.length; i++) {
|
||||
btns[i].onclick = function () {
|
||||
if (this.className == 'showBtn') {
|
||||
return
|
||||
}
|
||||
var myIndex = parseInt(this.getAttribute('index'))
|
||||
var leng = -200 * (myIndex - dot)
|
||||
animate(leng)
|
||||
dot = myIndex
|
||||
showBtn()
|
||||
}
|
||||
}
|
||||
//遍历数组，将每一个小按钮设了个index属性，这里用到 getAttribute 可以获取除了普通style 或 class 之外的一些属性，获取index值，点击时得到当前的index值，正好和当前的dot值相减，可得跳转的距离
|
||||
```
|
||||
> 这里要注意的是，当小按钮被重复按的时候，给他一个判断，不然重复点击同一个图标会重复发生相同事件，占内存，耗cpu
|
||||
|
||||
### 延迟动画函数
|
||||
就是当用户点击时，有一个慢慢偏移的过程，而不是闪现的动作，我们来看看实现原理
|
||||
|
||||
* 首先，定义参数
|
||||
```
|
||||
var time = 300 //位移总时间
|
||||
var interval = 10 //位移时间间隔
|
||||
var speed = leng/(time/interval) //每次位移量，就是一共调用多少次的意思
|
||||
```
|
||||
|
||||
* 设置递归函数
|
||||
```
|
||||
if ((speed < 0 && parseInt(list.style.left) > newList) || (speed > 0 && parseInt(list.style.left) < newList)) {
|
||||
list.style.left = parseInt(list.style.left) + speed + 'px'
|
||||
setTimeout(go, interval) //递归,调用自身函数
|
||||
```
|
||||
|
||||
* 判断是否仍在动画
|
||||
如果用户一直在点击切换图时，如果电脑配置不好，或是其他一些因素，可能会轮播卡顿，为了防止这一现象，就用一个判断来看上一次动画是否完成，若未完成就不能继续切换，等到这次动画跳转完为止
|
||||
```
|
||||
var animated = false //设初值
|
||||
|
||||
if(!animated) {
|
||||
animate(200)
|
||||
} //如果为false，则继续动画
|
||||
```
|
||||
|
||||
### 自动播放
|
||||
首先给个思路，当鼠标移入的时候，自动播放停止，移出的时候开始自动播放
|
||||
* 我们设两个函数，play（） 和 stop（）
|
||||
```
|
||||
function play() {
|
||||
timer = setTimeout(function() {
|
||||
next.onclick()
|
||||
play()
|
||||
},interval)
|
||||
}
|
||||
function stop() {
|
||||
clearTimeout(timer)
|
||||
}
|
||||
```
|
||||
给整个 container 容器添加该鼠标事件
|
||||
|
||||
这年头还是不能偷懒啊，说不定当时知道这个人家就把给我要了呢，好气哦...
|
||||
|
||||
> 改天再研究下旋转木马的那种装个13...
|
||||
67
source/about/index.md
Executable file
67
source/about/index.md
Executable file
@ -0,0 +1,67 @@
|
||||
---
|
||||
title: 个人简介
|
||||
date: 2017-06-15 19:12:44
|
||||
---
|
||||
|
||||
姓名：江志雄
|
||||
性别：你猜
|
||||
专业：软件工程
|
||||
|
||||
### 工作经历
|
||||
* 南昌·午逅科技
|
||||
任务职责：完成移动端 H5 页面开发
|
||||
|
||||
工作目的：还原设计师给的设计稿，调整兼容性问题
|
||||
> 2017.06 -- 2017.09
|
||||
|
||||
### 期望工作
|
||||
> 前端开发
|
||||
> 可全职可兼职
|
||||
> 5k~10K
|
||||
|
||||
### 个人作品
|
||||
* [vue仿QQ音乐](https://github.com/j710328466/vue-qqmusic)
|
||||
* [水灵](http://jzxer.cn/water/)
|
||||
* 微信小程序：蛋糕定制demo（未完成。。。）
|
||||
|
||||
### 技术栈
|
||||
前端
|
||||
> Vuejs
|
||||
> JavaScript(ES5 ES6)
|
||||
> HTML5 CSS/CSS3
|
||||
> SASS(SCSS)
|
||||
> 熟悉各种框架（bootstrap, semantic-ui, mint-ui, element-ui等)
|
||||
|
||||
后端
|
||||
> Nodejs(ExpressJS,KoaJS)
|
||||
|
||||
数据库
|
||||
> MongoDB
|
||||
|
||||
自动化构建
|
||||
> webpack gulp
|
||||
|
||||
版本管理
|
||||
> GIT SVN
|
||||
|
||||
目前学习计划
|
||||
> 基于vue的SSR框架nuxt
|
||||
> nodeJS / koa2
|
||||
|
||||
### 兴趣爱好
|
||||
> 看书
|
||||
> 健身
|
||||
> 吉他 (靠 “谱”)
|
||||
|
||||
### 自我介绍
|
||||
本⼈是软件⼯程学⽣. 喜欢折腾爱好音乐沉迷前端能独立思考解决问题性格还不错 (读完很累吧)
|
||||
* 个人tag
|
||||
> 行动派: 认准一件事就会全力以赴,不达目的不罢休
|
||||
> 艺术派：前端工程师能将艺术与编程完美结合的一种职业, so, 我选择了它
|
||||
|
||||
### 联系方式
|
||||
> qq: 710328466
|
||||
> tel: 15216030330(中午和晚上一般都关机，我在睡觉...)
|
||||
> [blog](http://jzxer.cn/)
|
||||
|
||||
{% aplayer "初学者" "薛之谦" "http://orjedzer5.bkt.clouddn.com/%E5%88%9D%E5%AD%A6%E8%80%85.mp3" "autoplay" %}
|
||||
BIN
source/favicon.ico
Executable file
BIN
source/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
5
source/gallery/index.md
Executable file
5
source/gallery/index.md
Executable file
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: gallery
|
||||
date:
|
||||
layout: gallery
|
||||
---
|
||||
BIN
source/jzxer.jpg
Executable file
BIN
source/jzxer.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
5
source/links/index.md
Executable file
5
source/links/index.md
Executable file
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: links
|
||||
date:
|
||||
layout: links
|
||||
---
|
||||
1
source/readme.MD
Executable file
1
source/readme.MD
Executable file
@ -0,0 +1 @@
|
||||
## 个人博客备份
|
||||
5
source/tags/index.md
Executable file
5
source/tags/index.md
Executable file
@ -0,0 +1,5 @@
|
||||
---
|
||||
title: tags
|
||||
date:
|
||||
layout: tags
|
||||
---
|
||||
1
themes/hexo-theme-hueman
Submodule
1
themes/hexo-theme-hueman
Submodule
@ -0,0 +1 @@
|
||||
Subproject commit 93138438ca1ed8928e6a7ab237e71a91d63ad98e
|
||||
1
themes/material
Submodule
1
themes/material
Submodule
@ -0,0 +1 @@
|
||||
Subproject commit f48e873d98ce8163ff6932acac4be1aa33bdd0c0
|
||||
Loading…
Reference in New Issue
Block a user