在if-else中声明函数

有如下一段代码

1
2
3
4
5
var test = $('#test');
fn();
function fn(){
	test.css('width','100px');
}

但是test有时候页面上会没有，所以就在外面直接加了个判断。
于是

1
2
3
4
5
6
7
var test = $('#test');
if(test.length){
	fn();
	function fn(){
		test.css('width','100px');
	}
}

在火狐中报错，fn没有被定义。

为什么呢？

FireFox中JS引擎对函数声明式的解析与其他浏览器的差异

找找MDN规范

JS中在if else 中定义 function 的问题

汤姆大叔-入理解JavaScript系列（2）：揭秘命名函数表达式

webpack

Webpack 使用介绍, 以及与gulp的搭配(顺带css-sprite)

一小时包教会 —— webpack 入门指南

阮一峰 webpack-demos

webpack学习笔记

入门指迷

webpack 怎么用

关于配置的注释

关于代码热替换

Webpack-dev-server结合后端服务器的热替换配置

Webpack 性能优化 （一）（使用别名做重定向） 备份网址

webpack使用优化

视频教程(需要翻墙)

  1. https://www.youtube.com/watch?v=TaWKUpahFZM

  2. https://www.youtube.com/watch?v=RKqRj3VgR_c

关于第一个视频的笔记

开始

建立一个 learn-webpack的文件夹

这里用到了cnpm 淘宝 NPM 镜像
cnpm install -g webpack

npm init 一路回车

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "name": "learn-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "start": "webpack ./index.js bundle.js"
  },
  "author": "",
  "license": "ISC"
}

新建一个index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>learn-webpack</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

新建indiex.js

1
console.log('hello');

控制台执行

1
npm start

就会把 index.js 编译成 bundle.js。 打开 index.html 就会看到控制台输出。

模块

再新建一个文件bear.js

1
module.exports = 'growl!'

修改index.js

1
console.log(require('./bear.js'));

控制台再执行

1
npm start

修改后自动更新

每次修改文件后都要 npm start 一下，这样好麻烦。
安装 webpack-dev-server

1
cnpm install webpack-dev-server --save-dev

然后修改 package.json 中 script 的内容

1
webpack ./index.js bundle.js

修改为

1
webpack-dev-server ./index.js

接着

1
npm start

访问：http://localhost:8080/webpack-dev-server/
这样每次修改了 index.js ，浏览器就会自动刷新。

样式

需要安装两个模块

1
cnpm install css-loader --save-dev

1
cnpm install style-loader --save-dev

然后新建bear.css文件

1
2
3
div{
     color:red;
}

index.js 后面加一句

1
2
3
console.log(  require('./bear.js'));

require('style!css!./bear.css');//在html中 以内联style的方式载入bear.css

css 中 还可以 @import其他的css
如在bear.css 中

1
2
3
4
@import 'base.css'; /*这里的分号不要忘记了*/
div{
     color:red;
}

这样就包括了 base.css

swebpack.config.js

新建 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
     entry:'./index.js',
     output:{
          path: __dirname,
          filename: 'bundle.js'
     },
     module:{
          loaders:[
          { test: /\.css$/,loader:'style!css!'}
          ]
     }
}

这样设置后
就可以将 index.js 中的

1
require('style!css!./bear.css');

改为

1
require('./bear.css');

接着再次

1
npm start

升级hexo 

1
2
3
4
5
6
npm install -g hexo-cli
mkdir hexo3
cd hexo3
hexo init
cnpm install hexo --save
cnpm install hexo-deployer-git --save

然后配置文件 _config.yml 跟之前的不同。

1
2
3
4
5
6
# Deployment
deploy:
  type: git   //这里要改成 git
  repo: git@github.com:vingojw/vingojw.github.com.git
  branch:      //这里不想写就留空 
  message:     //这里也是一样，默认提交格式 “Site updated: 2015-08-19 21:16:13”

接着就是把以前的 source 和 theme文件夹覆盖就好了。

运行

1
2
hexo g
hexo s

sass

MAC 自带rugy，so直接

sudo gem install sass 需要系统权限，否则安装的时候各种文件没权限。

sublime 安装 插件 sass 和 sass build，
安装好之后，使用就是 commad+b

创建 compass项目

compass create sass-test

然后是 sass的语法， 可以参考SASS 用法

chrome下调试：

参考：SASS调试

输入以下，来用于监听修改

1
$ sass --watch --scss --sourcemap style.scss:style.css

切图

1、拿到一张psd，用ps CC打开，找到想要切的部分，直接修改名字带后缀，再生成资源，就会在psd所在目录生成。连接

2、切图的时候对位置拿捏不准，下个ps插件可以很方便的标注，关于精灵图制作图层转svg也有相关介绍。链接

3、下面开始写html

之前每次开始一个练习的时候，要分别新建js css image 文件夹，然后 css里面加入一些 reset.css 然后再在html中引用。几次之后觉得没必要每次这么痛苦，虽然也花不了多少时间。如果一行命令这些全都能搞定呢？yeoman可以做到，但是自己弄写小东西，感觉没必要用，于是想到了用shell。链接

比如在终端中输入vgo，那么当前目录下就会生成以下结构，只需要打开index.html开始写结构就可以了。

1
2
3
4
5
6
├── css
│   ├── normalize.css
│   └── style.css
├── images
├── index.html
└── js

关于结构，以及样式命名一直很很头疼的事情（PS：其实是自己没有经验），满足一个效果可以用很多中方法，但是为什么不用最好的哪一种呢，用最少的标签，满足效果，感觉应该也不错吧。
@点头猪

#样式的写法看似有好多种#，其实只有一个是最合理的 井号里的观点翻译过来就是：如果你无法判断A方案和B方案哪个更好，那说明两个都不够好。

方案的好坏，取决于 可读性、可维护性，适用场景。

写css有两种类别

1
一种是fl mr10  类别

一种就是.mod {} .mod_title 或者 .mod .tit

<div class="newList mod">
  <div class="mod_title"></div>
  <div class="mod_con">
      ul…..
  </div>
</div>   
                           -- @林小志_linxz

推荐第二种，对于可维护性更好，记得有文章说样式不要超过3层，不过觉得目前还没到要关心这个的性能多少的时候，第二种结构写的好的话，其实也可以控制在3层以内。

4、结构写好后，该开始写css了

chrome 安装 LiveStyle 插件，搭配sublime，在编辑css的同时就能在浏览器中看到修改效果，同样，在浏览器中修改样式，样式表中也会有相应的变动连接

OK 结束

为什么会写这个？

一个是总喜欢忘，第二个是懒。这些东西搜藏夹，笔记中都能翻到，翻来翻去，烦了。每次要翻，索性就总结一下 总结的东西。或许还有总结总结的总结。。。

因为懒得想类名呀什么的，想着写过一次的东西，为什么还要在写一遍，时间可以拿来做更有意义的事情。 所以我想收集各种模块，结构，弄在一起，等到我需要的时候。直接用，以后说不定，随便配置点东西，一个规范的布局就出来了。

ps 里面有脚本jsx，不过网上貌似没啥教程，还说不定以后设计师，按照一定的规范做图，再安装一个ps插件，可能一键，所有的都帮你弄好了。

或许又出来一个nb的玩意，直接改变现在的方式也说不定。

关于切图，还可以看看这篇 切图方法最佳实践

javascript时间

这里可以看到不同的方式初始化时间，各个浏览器兼容的情况。

var date = new Date(dateString);

最保险dateString的是以下几种

1
2
3
4
5
6
7
8
2009/07/12	 
2009/7/12	 
2009/07/12 12:34	 
2009/07/12 12:34:56

07/02/2012
7/2/2012
7/2/2012 12:34

还有一种就是
new Date(‘Thu Dec 25 2014 22:28:41 GMT+0800 (CST)’)

你可能会问，卧槽？谁没事打这么长一串啊。

比如一个ajax你想要获取服务器那边的时间

1
2
3
4
5
6
7
8
9
$.ajax({
    type: ...
    url : window.location.href,
    complete: function( xhr,data ){
      var dateStr = xhr.getResponseHeader('Date')
      //这里的dateStr就是 ‘Thu Dec 25 2014 22:28:41 GMT+0800 (CST)’。
      console.log(new Date(dateStr));
      ...
      ...

试了几个浏览器 IE6+ 、 火狐、chrome、 Safari都可以。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$.ajax({
    type: 'HEAD', // 获取头信息，type=HEAD即可
    url : window.location.href,
    complete: function( xhr,data ){
        // 获取相关Http Response header
        var wpoInfo = {
            // 服务器端时间
            "date" : xhr.getResponseHeader('Date'),
            // 如果开启了gzip，会返回这个东西
            "contentEncoding" : xhr.getResponseHeader('Content-Encoding'),
            // keep-alive ？ close？
            "connection" : xhr.getResponseHeader('Connection'),
            // 响应长度
            "contentLength" : xhr.getResponseHeader('Content-Length'),
            // 服务器类型，apache？lighttpd？
            "server" : xhr.getResponseHeader('Server'),
            "vary" : xhr.getResponseHeader('Vary'),
            "transferEncoding" : xhr.getResponseHeader('Transfer-Encoding'),
            // text/html ? text/xml?
            "contentType" : xhr.getResponseHeader('Content-Type'),
            "cacheControl" : xhr.getResponseHeader('Cache-Control'),
            // 生命周期？
            "exprires" : xhr.getResponseHeader('Exprires'),
            "lastModified" : xhr.getResponseHeader('Last-Modified')
        };
        // 在这里，做想做的事。。。
    }
});

html项目初始化shell

想通过一个命令，直接生成好自定义的目录结构。
比如：下面的shell 

1
2
3
4
#!/bin/sh
mkdir ./asset ./asset/images ./asset/style ./asset/js
echo >./asset/index.html '<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta charset="UTF-8">\n<title>Document</title>\n<link rel="stylesheet" href="css/normalize.css">\n</head>\n<body>\n\n</body>\n</html>'
curl http://necolas.github.io/normalize.css/3.0.2/normalize.css > ./asset/style/normalize.css

就是在当前目录下，新建以下目录结构

asset
├── images
├── index.html
├── js
└── style
    └── normalize.css

3 directories, 2 files

shell只做了3件事，

1、新建文件夹，
2、创建index.html文件，并写入一些html标签
3、下载normalize.css 放到 style目录中

将shell保存为，start.sh，然后在控制台中给权限 chmod 777 start.sh，接着再控制台中运行它 start.sh
就会在当前目录下生成以上的文件结构。

但是我不想每次都复制这个start.sh到项目文件中，再运行。想直接一个命令就ok，怎么办呢？

那就是把它丢到/usr/bin 目录下（会提示输入密码），以后只要在控制台运行start.sh。（.sh后缀不能省略）就行了。

可是我连后缀也想省略掉，咋办？那就是用gzexe命令把它变成可执行文件，

1
gzexe start.sh

再扔到/usr/bin目录下。具体操作可查看这里

hexo插件

文章后台hexo-admin
hexo-admin插件使用时生成后 发现近期文章有很多重复，解决办法就是 删除public 文件夹，和 db.json，再生成一次。

将 wordpress里文章 转移到 hexo的插件 — 迁移教程 — 可能遇到的问题（点击展开）

安装这个插件，压缩你的 html css js image

自动抽取文章摘要

find

with an Orchild - Yanni

What Are Words

Intro

有里知花《涙の物語》

宇多田光 - Merry Christmas Mr. Lawrence - FYI

Theatre Of Strings MERRY CHRISTMAS MR. LAWRENCE 春畑道哉

One Love - Loveholic (러브홀릭)

러브홀릭 - 그대만 있다면

Subbass of China

キミを思うメロディー

僕は、鳥になる。 黒石ひとみ

stories -Hitomi 列表

闫月

Reason-辛晓琪

Mad World (American Idol Studio Version)

glassy sky TV动画《东京食尸鬼 第二季》插曲

剑灵 随风而逝


剑灵 随风而逝 （韩版）



secret base 君がくれたもの（八音盒）

FLY ME TO THE MOON - CLAIRE

Ce Frumoasa E Iubirea - Giulia

Endless Story

Human Legacy

True Strength

电喵大战皮卡丘
【经典】仙剑奇侠传电视剧ost原声大碟-av958716
仙剑奇侠传-电视原声
轻音乐-http://qyinb.diandian.com/