王叨叨
2022-09-24T14:48:46+00:00
http://wangdaodao.github.io
wangdaodao
hi@wangdaodao.com
Vim入门
2019-02-01T00:00:00+00:00
http://wangdaodao.github.io/2019-02-01/vim-skill
<p><img src="https://wangdaodao.com/usr/uploads/2019/02/475810736.png" alt="vim.png" /></p>
<h2 id="什么是-vim">什么是 Vim?</h2>
<p>Vim是从 vi 发展出来的一个文本编辑器。代码补完、编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用。</p>
<p>简单的来说, vi 是老式的字处理器,不过功能已经很齐全了,但是还是有可以进步的地方。 vim 则可以说是程序开发者的一项很好用的工具。</p>
<p>连 vim 的<a href="http://www.vim.org">官方网站</a>自己也说 vim 是一个程序开发工具而不是文字处理软件。</p>
<h2 id="为什么要学习vim而不用ide">为什么要学习Vim而不用IDE?</h2>
<p>IDE固然强大,但并不是每一个环境都有现成的IDE可用,尤其是SSH远程计算机,就一个bash解析器可以使用,完全没有图形化界面。IDE的另一个弊端就是需要反复的安装升级更新。
当然IDE也有省事的时候,例如开发Java和C#,IDE自带的debug调试工具,可以非常便利的调试程序。
但是在类Unix系统上开发,我还是推荐学习熟练地使用Vim。何为熟练?完全舍弃你的鼠标,只使用键盘快速的进行开发即为熟练。
vi的学习曲线可能比较陡峭。vi分为命令模式(Command mode),插入模式(Insert mode)和底线命令模式(Last line mode)。为了更好的学习Vim,可以先自己安装一个:<a href="https://www.vim.org/download.php">https://www.vim.org/download.php</a></p>
<h2 id="在cmd中配置vim">在CMD中配置Vim</h2>
<p>在自己电脑属性中找到<strong>高级系统设置</strong></p>
<p><img src="https://wangdaodao.com/usr/uploads/2019/02/3271698925.png" alt="电脑属性.png" /></p>
<p>找到环境变量</p>
<p><img src="https://wangdaodao.com/usr/uploads/2019/02/1904838753.png" alt="环境变量.png" /></p>
<p>找到系统变量</p>
<p><img src="https://wangdaodao.com/usr/uploads/2019/02/3553887321.png" alt="系统变量.png" /></p>
<p>添加vim的安装目录</p>
<p><img src="https://wangdaodao.com/usr/uploads/2019/02/553390298.png" alt="添加vim.png" /></p>
<p>然后在命令行下面试试输入<code class="language-plaintext highlighter-rouge">vim</code></p>
<p><img src="https://wangdaodao.com/usr/uploads/2019/02/4239255454.png" alt="cmd.png" /></p>
<h2 id="基本模式">基本模式</h2>
<p>Vim和Vi一样具有三种模式:命令模式(Command mode),插入模式(Insert mode)和底线命令模式(Last line mode)。</p>
<h3 id="命令模式">命令模式</h3>
<p>用户刚刚启动Vim,便进入了命令模式。此状态下敲击键盘动作会被Vim识别为命令,而非输入字符,而且是<strong>区分大小写</strong>的!!
以下操作只能在命令模式下:</p>
<h4 id="文本修改键">文本修改键</h4>
<table>
<thead>
<tr>
<th>按键</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>删除光标位置指定的字符</td>
</tr>
<tr>
<td>dd</td>
<td>删除光标所在的行</td>
</tr>
<tr>
<td>u</td>
<td>撤销最近的修改</td>
</tr>
<tr>
<td>U</td>
<td>撤销对当前行上做的所有修改</td>
</tr>
<tr>
<td>r</td>
<td>替换光标位置上的一个字符</td>
</tr>
<tr>
<td>R</td>
<td>替换从光标位置开始的字符,同时改变vi到文本输入模式</td>
</tr>
<tr>
<td>.</td>
<td>重复上一次的修改</td>
</tr>
</tbody>
</table>
<h4 id="光标移动指令键盘上下左右键也可以">光标移动指令(键盘上下左右键也可以)</h4>
<table>
<thead>
<tr>
<th>按键</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>h</td>
<td>将光标向左移动一格</td>
</tr>
<tr>
<td>j</td>
<td>将光标向下移动一格</td>
</tr>
<tr>
<td>k</td>
<td>将光标向上移动一格</td>
</tr>
<tr>
<td>l</td>
<td>将光标向右移动一格</td>
</tr>
<tr>
<td>w</td>
<td>将光标向右移一个字</td>
</tr>
<tr>
<td>b</td>
<td>将光标向左移一个字</td>
</tr>
<tr>
<td>e</td>
<td>将光标移到字尾</td>
</tr>
<tr>
<td>(</td>
<td>移动到句首</td>
</tr>
<tr>
<td>)</td>
<td>移动到下一句</td>
</tr>
<tr>
<td>{</td>
<td>移动到段首</td>
</tr>
<tr>
<td>}</td>
<td>移动到下一段</td>
</tr>
<tr>
<td>[[</td>
<td>移动到章首</td>
</tr>
<tr>
<td>]]</td>
<td>移动到下一章</td>
</tr>
</tbody>
</table>
<p>注意:按行列号移动的时候需要开启行号
显示行号:<code class="language-plaintext highlighter-rouge">:set nu</code>
取消行号:<code class="language-plaintext highlighter-rouge">set nonu</code></p>
<p>然后利用vi的组合命令特性,采用数字+字符的方式来移动
<code class="language-plaintext highlighter-rouge">3G</code>:移动到第三行
<code class="language-plaintext highlighter-rouge">3|</code>:移动到第三列</p>
<h4 id="剪切和粘贴键">剪切和粘贴键</h4>
<table>
<thead>
<tr>
<th>按键</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>d</td>
<td>删除指定位置的文本,并存到临时的缓冲区中。可以使用put操作符(p或P键)访问这个缓冲区</td>
</tr>
<tr>
<td>y</td>
<td>将指定位置的文本复制到临时缓冲区。可以使用put操作符访问这个缓冲区</td>
</tr>
<tr>
<td>P</td>
<td>将指定缓冲区的内容放到当前光标的位置之上</td>
</tr>
<tr>
<td>p</td>
<td>将指定缓冲区的内容放到当前光标的位置之下</td>
</tr>
</tbody>
</table>
<h4 id="切换模式键">切换模式键</h4>
<p>此时输入下面的按键是进入到编辑模式!</p>
<table>
<thead>
<tr>
<th>按键</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>i</td>
<td>在光标左侧输入正文</td>
</tr>
<tr>
<td>I</td>
<td>在光标所在行的行首输入正文</td>
</tr>
<tr>
<td>a</td>
<td>在光标右侧输入正文</td>
</tr>
<tr>
<td>A</td>
<td>在光标所在行的行尾输入正文</td>
</tr>
<tr>
<td>o</td>
<td>在光标所在行的下一行增添新行,光标位于新行的行首</td>
</tr>
<tr>
<td>O</td>
<td>在光标所在行的上一行增添新行,光标位于新行的行首</td>
</tr>
</tbody>
</table>
<h2 id="模式切换">模式切换</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
+----------------+ <Esc> +--------------+ i,I,a,A,o,O,r,R,s,S +-------------+
| +----->------>------>-----+ +----->------>------>-----+ |
| Last line mode | | Command mode | | Insert mode |
| +-----<------<------<-----+ +-----<------<------<-----+ |
+----------------+ : +----+----+----+ <Esc> +-------------+
</code></pre></div></div>
ESLint 配置指南
2019-01-29T00:00:00+00:00
http://wangdaodao.github.io/2019-01-29/ESLint
<h2 id="关于eslint">关于ESLint</h2>
<p>ESLint 是一个开源的 JavaScript 代码检查工具,由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查,一般来说编译程序会内置检查工具。</p>
<p>JavaScript 是一个动态的弱类型语言,在开发中比较容易出错。因为没有编译程序,为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。</p>
<p>ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别,规则本身和测试可以依赖于同样的模式。为了便于人们使用,ESLint 内置了一些规则,当然,你可以在使用过程中自定义规则。</p>
<p>ESLint 使用 Node.js 编写,这样既可以有一个快速的运行环境的同时也便于安装。</p>
<h2 id="设计理念">设计理念</h2>
<h3 id="所有都是可拔插的">所有都是可拔插的:</h3>
<ul>
<li>内置规则和自定义规则共用一套规则 API</li>
<li>内置的格式化方法和自定义的格式化方法共用一套格式化 API</li>
<li>额外的规则和格式化方法能够在运行时指定</li>
<li>规则和对应的格式化方法并不强制捆绑使用</li>
</ul>
<h3 id="每条规则">每条规则:</h3>
<ul>
<li>各自独立</li>
<li>可以开启或关闭(没有什么可以被认为“太重要所以不能关闭”)</li>
<li>可以将结果设置成警告或者错误</li>
</ul>
<h3 id="另外">另外:</h3>
<ul>
<li>ESLint 并不推荐任何编码风格,规则是自由的</li>
<li>所有内置规则都是泛化的</li>
</ul>
<h3 id="项目">项目:</h3>
<ul>
<li>通过丰富文档减少沟通成本</li>
<li>尽可能的简单透明</li>
<li>相信测试的重要性</li>
</ul>
<h2 id="配置文件">配置文件</h2>
<p>配置文件在项目根目录里,文件名以 <code class="language-plaintext highlighter-rouge">.eslintrc.*</code> 为名,其中 <code class="language-plaintext highlighter-rouge">rules</code> 就是配置规则的。</p>
<h2 id="配置参数">配置参数</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rules: {
"规则名": [规则值, 规则配置]
}
</code></pre></div></div>
<p>规则值:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>"off"或者0 //关闭规则关闭
"warn"或者1 //在打开的规则作为警告(不影响退出代码)
"error"或者2 //把规则作为一个错误(退出代码触发时为1)
</code></pre></div></div>
<h2 id="常见规则列表">常见规则列表</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>"no-alert": 0,//禁止使用alert confirm prompt
"no-array-constructor": 2,//禁止使用数组构造器
"no-bitwise": 0,//禁止使用按位运算符
"no-caller": 1,//禁止使用arguments.caller或arguments.callee
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
"no-console": 2,//禁止使用console
"no-const-assign": 2,//禁止修改const声明的变量
"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-debugger": 2,//禁止使用debugger
"no-delete-var": 2,//不能对var声明的变量使用delete操作符
"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
"no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
"no-dupe-args": 2,//函数参数不能重复
"no-duplicate-case": 2,//switch中的case标签不能重复
"no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
"no-empty": 2,//块语句中的内容不能为空
"no-empty-character-class": 2,//正则表达式中的[]内容不能为空
"no-empty-label": 2,//禁止使用空label
"no-eq-null": 2,//禁止对null使用==或!=运算符
"no-eval": 1,//禁止使用eval
"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
"no-extend-native": 2,//禁止扩展native对象
"no-extra-bind": 2,//禁止不必要的函数绑定
"no-extra-boolean-cast": 2,//禁止不必要的bool转换
"no-extra-parens": 2,//禁止非必要的括号
"no-extra-semi": 2,//禁止多余的冒号
"no-fallthrough": 1,//禁止switch穿透
"no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3.
"no-func-assign": 2,//禁止重复的函数声明
"no-implicit-coercion": 1,//禁止隐式转换
"no-implied-eval": 2,//禁止使用隐式eval
"no-inline-comments": 0,//禁止行内备注
"no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明(变量或函数)
"no-invalid-regexp": 2,//禁止无效的正则表达式
"no-invalid-this": 2,//禁止无效的this,只能用在构造器,类,对象字面量
"no-irregular-whitespace": 2,//不能有不规则的空格
"no-iterator": 2,//禁止使用__iterator__ 属性
"no-label-var": 2,//label名不能与var声明的变量名相同
"no-labels": 2,//禁止标签声明
"no-lone-blocks": 2,//禁止不必要的嵌套块
"no-lonely-if": 2,//禁止else语句内只有if语句
"no-loop-func": 1,//禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以)
"no-mixed-requires": [0, false],//声明时不能混用声明类型
"no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
"linebreak-style": [0, "windows"],//换行风格
"no-multi-spaces": 1,//不能用多余的空格
"no-multi-str": 2,//字符串不能用\换行
"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
"no-native-reassign": 2,//不能重写native对象
"no-negated-in-lhs": 2,//in 操作符的左边不能有!
"no-nested-ternary": 0,//禁止使用嵌套的三目运算
"no-new": 1,//禁止在使用new构造一个实例后不赋值
"no-new-func": 1,//禁止使用new Function
"no-new-object": 2,//禁止使用new Object()
"no-new-require": 2,//禁止使用new require
"no-new-wrappers": 2,//禁止使用new创建包装实例,new String new Boolean new Number
"no-obj-calls": 2,//不能调用内置的全局对象,比如Math() JSON()
"no-octal": 2,//禁止使用八进制数字
"no-octal-escape": 2,//禁止使用八进制转义序列
"no-param-reassign": 2,//禁止给参数重新赋值
"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
"no-plusplus": 0,//禁止使用++,--
"no-process-env": 0,//禁止使用process.env
"no-process-exit": 0,//禁止使用process.exit()
"no-proto": 2,//禁止使用__proto__属性
"no-redeclare": 2,//禁止重复声明变量
"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-restricted-modules": 0,//如果禁用了指定模块,使用就会报错
"no-return-assign": 1,//return 语句中不能有赋值表达式
"no-script-url": 0,//禁止使用javascript:void(0)
"no-self-compare": 2,//不能比较自身
"no-sequences": 0,//禁止使用逗号运算符
"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
"no-sparse-arrays": 2,//禁止稀疏数组, [1,,2]
"no-sync": 0,//nodejs 禁止同步方法
"no-ternary": 0,//禁止使用三目运算符
"no-trailing-spaces": 1,//一行结束后面不要有空格
"no-this-before-super": 0,//在调用super()之前不能使用this或super
"no-throw-literal": 2,//禁止抛出字面量错误 throw "error";
"no-undef": 1,//不能有未定义的变量
"no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined
"no-undefined": 2,//不能使用undefined
"no-unexpected-multiline": 2,//避免多行表达式
"no-underscore-dangle": 1,//标识符不能以_开头或结尾
"no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
"no-unreachable": 2,//不能有无法执行的代码
"no-unused-expressions": 2,//禁止无用的表达式
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数
"no-use-before-define": 2,//未定义前不能使用
"no-useless-call": 2,//禁止不必要的call和apply
"no-void": 2,//禁用void操作符
"no-var": 0,//禁用var,用let和const代替
"no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注
"no-with": 2,//禁用with
"array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格
"arrow-parens": 0,//箭头函数用小括号括起来
"arrow-spacing": 0,//=>的前/后括号
"accessor-pairs": 0,//在对象中使用getter/setter
"block-scoped-var": 0,//块语句中使用var
"brace-style": [1, "1tbs"],//大括号风格
"callback-return": 1,//避免多次调用回调什么的
"camelcase": 2,//强制驼峰法命名
"comma-dangle": [2, "never"],//对象字面量项尾不能有逗号
"comma-spacing": 0,//逗号前后的空格
"comma-style": [2, "last"],//逗号风格,换行时在行首还是行尾
"complexity": [0, 11],//循环复杂度
"computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的
"consistent-return": 0,//return 后面是否允许省略
"consistent-this": [2, "that"],//this别名
"constructor-super": 0,//非派生类不能调用super,派生类必须调用super
"curly": [2, "all"],//必须使用 if(){} 中的{}
"default-case": 2,//switch语句最后必须有default
"dot-location": 0,//对象访问符的位置,换行的时候在行首还是行尾
"dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号
"eol-last": 0,//文件以单一的换行符结束
"eqeqeq": 2,//必须使用全等
"func-names": 0,//函数表达式必须有名字
"func-style": [0, "declaration"],//函数风格,规定只能使用函数声明/函数表达式
"generator-star-spacing": 0,//生成器函数*的前后空格
"guard-for-in": 0,//for in循环要用if语句过滤
"handle-callback-err": 0,//nodejs 处理错误
"id-length": 0,//变量名长度
"indent": [2, 4],//缩进风格
"init-declarations": 0,//声明时必须赋初值
"key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格
"lines-around-comment": 0,//行前/行后备注
"max-depth": [0, 4],//嵌套块深度
"max-len": [0, 80, 4],//字符串最大长度
"max-nested-callbacks": [0, 2],//回调嵌套深度
"max-params": [0, 3],//函数最多只能有3个参数
"max-statements": [0, 10],//函数内最多有几个声明
"new-cap": 2,//函数名首行大写必须使用new方式调用,首行小写必须用不带new方式调用
"new-parens": 2,//new时必须加小括号
"newline-after-var": 2,//变量声明后是否需要空一行
"object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格
"object-shorthand": 0,//强制对象字面量缩写语法
"one-var": 1,//连续声明
"operator-assignment": [0, "always"],//赋值运算符 += -=什么的
"operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首
"padded-blocks": 0,//块语句内行首行尾是否要空行
"prefer-const": 0,//首选const
"prefer-spread": 0,//首选展开运算
"prefer-reflect": 0,//首选Reflect的方法
"quotes": [1, "single"],//引号类型 `` "" ''
"quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号
"radix": 2,//parseInt必须指定第二个参数
"id-match": 0,//命名检测
"require-yield": 0,//生成器函数必须有yield
"semi": [2, "always"],//语句强制分号结尾
"semi-spacing": [0, {"before": false, "after": true}],//分号前后空格
"sort-vars": 0,//变量声明时排序
"space-after-keywords": [0, "always"],//关键字后面是否要空一格
"space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格
"space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格
"space-in-parens": [0, "never"],//小括号里面要不要有空格
"space-infix-ops": 0,//中缀操作符周围要不要有空格
"space-return-throw-case": 2,//return throw case后面要不要加空格
"space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格
"spaced-comment": 0,//注释风格要不要有空格什么的
"strict": 2,//使用严格模式
"use-isnan": 2,//禁止比较时使用NaN,只能用isNaN()
"valid-jsdoc": 0,//jsdoc规则
"valid-typeof": 2,//必须使用合法的typeof的值
"vars-on-top": 2,//var必须放在作用域顶部
"wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格
"wrap-regex": 0,//正则表达式字面量用小括号包起来
"yoda": [2, "never"]//禁止尤达条件
</code></pre></div></div>
<p>更多详细的说明请看官方文档:<a href="https://eslint.org/docs/user-guide/configuring">https://eslint.org/docs/user-guide/configuring</a></p>
TortoiseGit之配置密钥
2019-01-20T00:00:00+00:00
http://wangdaodao.github.io/2019-01-20/tortoisegit-keygen
<p>TortoiseGit 使用扩展名为ppk的密钥,而不是ssh-keygen生成的rsa密钥。使用命令<code class="language-plaintext highlighter-rouge">ssh-keygen -C "邮箱地址" -t rsa</code>产生的密钥在TortoiseGit中不能用。而基于git的开发必须要用到rsa密钥,因此需要用到TortoiseGit的putty key generator工具来生成既适用于git的rsa密钥也适用于TortoiseGit的ppk密钥,具体配置步骤如下:</p>
<ol>
<li><strong>运行TortoiseGit开始菜单中的<code class="language-plaintext highlighter-rouge">puttygen</code>程序</strong><br />
<img src="https://wangdaodao.com/usr/uploads/2019/01/3048424348.png" alt="puttygen.png" /></li>
<li><strong>点击Generate按钮,鼠标在上图的空白地方来回移动直到进度条完毕,就会自动生一个随机的key,如下图示</strong><br />
<img src="https://wangdaodao.com/usr/uploads/2019/01/3942870075.png" alt="key.png" /></li>
<li><strong>将上图中多行文本框的内容全选、复制,并粘贴到git账户的 SSH public key中,这就是适用于git的公钥。</strong></li>
<li><strong>点击上图中的Save private key按钮,将生成的key保存为适用于TortoiseGit的私钥(扩展名为.ppk)。</strong></li>
<li><strong>运行TortoiseGit开始菜单中的Pageant程序,程序启动后将自动停靠在任务栏中,双击该图标,弹出key管理列表,如下图示</strong><br />
<img src="https://wangdaodao.com/usr/uploads/2019/01/123226250.png" alt="Pageant.png" /></li>
<li><strong>点击上图中的Add Key按钮,将第4步保存的ppk私钥添加进来,关闭对话框即可。</strong></li>
</ol>
快速安装node-sass
2017-11-11T00:00:00+00:00
http://wangdaodao.github.io/2017-11-11/node-sass
<p>macOS 系统直接运行下面的命令即可:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass
</code></pre></div></div>
<p>我们一般更希望能跨平台、并且直接使用 npm install 安装所有依赖,所以我的做法是在项目内添加一个 <code class="language-plaintext highlighter-rouge">.npmrc</code> 文件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org
</code></pre></div></div>
<p>这样使用 npm install 安装 node-sass能自动从淘宝源上下载,但是在使用 npm publish 的时候要把 registry 这一行给注释掉,否则就会发布到淘宝源上去了。</p>
Sublime Text Emmet的用法及相关语法
2017-11-09T00:00:00+00:00
http://wangdaodao.github.io/2017-11-09/sublime-text-emmet
<h2 id="一生成-html-文档初始结构">一、生成 HTML 文档初始结构</h2>
<p>HTML 文档的初始结构,就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 <code class="language-plaintext highlighter-rouge">“!”</code> 就可以生成一个 HTML5 的标准文档初始结构,你没有看错,输入一个感叹号(当然是英文符号),然后摁下 <code class="language-plaintext highlighter-rouge">ctrl+E</code> 键,就会发现生成了下面的结构:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
</code></pre></div></div>
<!--more-->
<p>这就是一个 HTML5 的标准结构,也是默认的 HTML 结构。如果你想生成 HTML4 的过渡型结构,那么输入指令 <code class="language-plaintext highlighter-rouge">html:xt</code>,然后ctrl+E, 即可生成如下结构:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
</code></pre></div></div>
<blockquote>
<p>Emmet 会自动把 doctype 给你补全了,怎么样,这样的功能会不会让你动心?简单总结一下常用的 HTML 结构指令:<br />
<code class="language-plaintext highlighter-rouge">html:5</code> 或者 <code class="language-plaintext highlighter-rouge">!</code> 生成 HTML5 结构<br />
<code class="language-plaintext highlighter-rouge">html:xt</code> 生成 <code class="language-plaintext highlighter-rouge">HTML4</code> 过渡型<br />
<code class="language-plaintext highlighter-rouge">html:4s</code> 生成 <code class="language-plaintext highlighter-rouge">HTML4</code> 严格型</p>
</blockquote>
<h2 id="二生成带有-id-class-的-html-标签">二、生成带有 id 、class 的 HTML 标签</h2>
<p>Emmet 的语法有点类似 CSS 的语法,生成 id 为 aaa 的 div 标签,我们只需要编写下面指令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#aaa
</code></pre></div></div>
<p>Emmet 默认的标签为 div ,如果我们不给出标签名称的话,默认就生成 div 标签。如果编写一个 class 为 bbb 的 span 标签,我们需要编写下面指令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>span.bbb
</code></pre></div></div>
<p>然后就生成了对应的结构。同理,如果想要编写一个 id 为 ccc 的 class 为 ddd 的 ul 标签,我们可以这样写:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ul#ccc.ddd
</code></pre></div></div>
<p>很简单吧?比你用手写 id 、class 方便多了吧</p>
<h2 id="三生成后代">三、生成后代:></h2>
<p>大于号表示后面要生成的内容是当前标签的后代。例如我要生成一个无序列表,而且被 class 为 aaa 的 div 包裹,那么可以使用下面指令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>div.aaa>ul>li
</code></pre></div></div>
<p>可以生成如下的结构:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div class="aaa">
<ul>
<li></li>
</ul>
</div>
</code></pre></div></div>
<h2 id="四生成兄弟">四、生成兄弟:+</h2>
<p>上面是生成下级元素,如果想要生成平级的元素,就需要使用 + 号。例如下面指令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>div+p+bq
</code></pre></div></div>
<p>就可以生成如下的 HTML 结构:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div></div>
<p></p>
<blockquote></blockquote>
</code></pre></div></div>
<h2 id="五生成上级元素">五、生成上级元素:^</h2>
<p>上级 (Climb-up)元素是什么意思呢?前面咱们说过了生成下级元素的符号“>”,当使用 div>ul>li 的指令之后,再继续写下去,那么后续内容都是在 li 下级的。如果我想编写一个跟 ul 平级的 span 标签,那么我需要先用 “^” 提升一下层次。例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>div>ul>li^span
</code></pre></div></div>
<p>就会生成如下结构:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div>
<ul>
<li></li>
</ul>
<span></span>
</div>
</code></pre></div></div>
<p>如果我想相对与 div 生成一个平级元素,那么就再上升一个层次,多用一个“^”符号:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>div>ul>li^^span
</code></pre></div></div>
<p>就会生成如下结构:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div>
<ul>
<li></li>
</ul>
</div>
<span></span>
</code></pre></div></div>
<h2 id="六重复生成多份">六、重复生成多份:</h2>
<p>特别是一个无序列表,ul 下面的 li 肯定不只是一份,通常要生成很多个 li 标签。那么我们可以直接在 li 后面 * 上一些数字:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ul>li*5
</code></pre></div></div>
<p>这样就直接生成五个项目的无序列表了。如果想要生成多份其他结构,方法类似。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</code></pre></div></div>
<h2 id="七生成分组">七、生成分组:()</h2>
<p>用括号进行分组,这样可以更加明确要生成的结构,特别是层次关系,例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>div>(header>ul>li*2>a)+footer>p
</code></pre></div></div>
<p>这样很明显就可以看出层次关系和并列关系,生成如下结构:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div>
<header>
<ul>
<li><a href="javascript:void(0)"></a></li>
<li><a href="javascript:void(0)"></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
</code></pre></div></div>
<h2 id="八此外分组还可以很方便的结合上面说的--符号生成重复结构">八、此外,分组还可以很方便的结合上面说的 “*” 符号生成重复结构:</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>(div>dl>(dt+dd)*3)+footer>p
</code></pre></div></div>
<p>生成结构:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
</code></pre></div></div>
<h2 id="九生成自定义属性attr">九、生成自定义属性:[attr]</h2>
<p>a 标签中往往需要附带 href 属性和 title 属性,如果我们想生成一个 href 为 “http://www.xxx.com/ ,title 为“xxx 博客”的 a 标签,可以这样写:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>a[href="http://www.xxx.com/" title="xxx 博客"]
</code></pre></div></div>
<p>其他标签和属性都类似。</p>
<h2 id="十对生成内容编号">十、对生成内容编号:$</h2>
<p>例如无序列表,我想为五个个 li 增加一个 class 属性值 item1 ,然后依次递增从 1-5,那么就需要使用 $ 符号:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ul>li.item$*5
</code></pre></div></div>
<p>这样就生成了如下结构:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
</code></pre></div></div>
<p>$ 就表示一位数字,只出现一个的话,就从1开始。如果出现多个,就从0开始。如果我想生成三位数的序号,那么要写三个 $:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ul>li.item$$$*5
</code></pre></div></div>
<p>输出:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
</code></pre></div></div>
<p>只能这样单调的生成序号?对于强大的 Emmet 来说,肯定不会会了,我们也可以在 $ 后面增加 @- 来实现倒序排列:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ul>li.item$@-*5
</code></pre></div></div>
<p>输出:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
</code></pre></div></div>
<p>同样,我们也可以使用 @N 指定开始的序号:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ul>li.item$@3*5
</code></pre></div></div>
<p>这样就会从 3 开始排序,生成如下代码:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
</code></pre></div></div>
<p>配合上面倒序输出,可以这样写:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ul>li.item$@-3*5
</code></pre></div></div>
<p>生成的就是以 3 为底倒序:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
</code></pre></div></div>
<h2 id="十一生成文本内容">十一、生成文本内容:{}</h2>
<p>上面讲解了如何生成 HTML 标签,那里面的内容呢?当然也可以生成了:</p>
<p>a[href=”http://www.xxx.com/”]{点击这里到}</p>
<p>这样就生成了一个到我博客的超链接了。在生成内容的时候,特别要注意前后的符号关系,虽然 a>{Click me} 和 a{Click me} 生成的结构是相同的,但是加上其他的内容就不一定了,例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
</code></pre></div></div>
<p>这样就生成了完全不同的结构,注意这些小细节哦。</p>
<h2 id="不要有空格">不要有空格</h2>
<p>在写指令的时候,你可能为了代码的可读性,使用一些空格什么的排版一下。这就会导致代码无法使用。例如下面这句:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>(header > ul.nav > li*5) + footer
</code></pre></div></div>
<p>而去掉空格之后,就可以正常执行生成结构了。</p>
Typecho Apache Rewrite规则
2017-11-08T00:00:00+00:00
http://wangdaodao.github.io/2017-11-08/typecho-apache-rewrite
<p>环境是LAMP,网站根目录新建<code class="language-plaintext highlighter-rouge">.htaccess</code>文件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
</code></pre></div></div>
<p>Nginx的话,看这篇<a href="http://wangdaodao.com/20180703/typecho-nginx-rewrite.html">《Typecho Nginx Rewrite规则》</a>。</p>
Markdown指南
2017-06-16T00:00:00+00:00
http://wangdaodao.github.io/2017-06-16/Markdown
<p><strong>声明:</strong> 这份文档派生(fork)于<a href="http://markdown.tw/">繁体中文版</a>,在此基础上进行了繁体转简体工作,并进行了适当的润色。此文档用 Markdown 语法编写,繁体中文版的原始文件可以<a href="https://github.com/othree/markdown-syntax-zhtw/blob/master/syntax.md">查看这里</a> 。</p>
<h2 id="概述">概述</h2>
<h3 id="宗旨">宗旨</h3>
<p>Markdown 的目标是实现「易读易写」。</p>
<p>可读性,无论如何,都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布,并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响,包括 <a href="http://docutils.sourceforge.net/mirror/setext.html">Setext</a>、<a href="http://www.aaronsw.com/2002/atx/">atx</a>、<a href="http://textism.com/tools/textile/">Textile</a>、<a href="http://docutils.sourceforge.net/rst.html">reStructuredText</a>、<a href="http://www.triptico.com/software/grutatxt.html">Grutatext</a> 和 <a href="http://ettext.taint.org/doc/">EtText</a>,而最大灵感来源其实是纯文本电子邮件的格式。</p>
<p>总之, Markdown 的语法全由一些符号所组成,这些符号经过精挑细选,其作用一目了然。比如:在文字两旁加上星号,看起来就像*强调*。Markdown 的列表看起来,嗯,就是列表。Markdown 的区块引用看起来就真的像是引用一段文字,就像你曾在电子邮件中见过的那样。</p>
<h3 id="兼容-html">兼容 HTML</h3>
<p>Markdown 语法的目标是:成为一种适用于网络的<em>书写</em>语言。</p>
<p>Markdown 不是想要取代 HTML,甚至也没有要和它相近,它的语法种类很少,只对应 HTML 标记的一小部分。Markdown 的构想<em>不是</em>要使得 HTML 文档更容易书写。在我看来, HTML 已经很容易写了。Markdown 的理念是,能让文档更容易读、写和随意改。HTML 是一种<em>发布</em>的格式,Markdown 是一种<em>书写</em>的格式。就这样,Markdown 的格式语法只涵盖纯文本可以涵盖的范围。</p>
<p>不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown;只要直接加标签就可以了。</p>
<p>要制约的只有一些 HTML 区块元素――比如 <code class="language-plaintext highlighter-rouge"><div></code>、<code class="language-plaintext highlighter-rouge"><table></code>、<code class="language-plaintext highlighter-rouge"><pre></code>、<code class="language-plaintext highlighter-rouge"><p></code> 等标签,必须在前后加上空行与其它内容区隔开,还要求它们的开始标签与结尾标签不能用制表符或空格来缩进。Markdown 的生成器有足够智能,不会在 HTML 区块标签外加上不必要的 <code class="language-plaintext highlighter-rouge"><p></code> 标签。</p>
<p>例子如下,在 Markdown 文件里加上一段 HTML 表格:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>这是一个普通段落。
<table>
<tr>
<td>Foo</td>
</tr>
</table>
这是另一个普通段落。
</code></pre></div></div>
<p>请注意,在 HTML 区块标签间的 Markdown 格式语法将不会被处理。比如,你在 HTML 区块内使用 Markdown 样式的<code class="language-plaintext highlighter-rouge">*强调*</code>会没有效果。</p>
<p>HTML 的区段(行内)标签如 <code class="language-plaintext highlighter-rouge"><span></code>、<code class="language-plaintext highlighter-rouge"><cite></code>、<code class="language-plaintext highlighter-rouge"><del></code> 可以在 Markdown 的段落、列表或是标题里随意使用。依照个人习惯,甚至可以不用 Markdown 格式,而直接采用 HTML 标签来格式化。举例说明:如果比较喜欢 HTML 的 <code class="language-plaintext highlighter-rouge"><a></code> 或 <code class="language-plaintext highlighter-rouge"><img></code> 标签,可以直接使用这些标签,而不用 Markdown 提供的链接或是图像标签语法。</p>
<p>和处在 HTML 区块标签间不同,Markdown 语法在 HTML 区段标签间是有效的。</p>
<h3 id="特殊字符自动转换">特殊字符自动转换</h3>
<p>在 HTML 文件中,有两个字符需要特殊处理: <code class="language-plaintext highlighter-rouge"><</code> 和 <code class="language-plaintext highlighter-rouge">&</code> 。 <code class="language-plaintext highlighter-rouge"><</code> 符号用于起始标签,<code class="language-plaintext highlighter-rouge">&</code> 符号则用于标记 HTML 实体,如果你只是想要显示这些字符的原型,你必须要使用实体的形式,像是 <code class="language-plaintext highlighter-rouge">&lt;</code> 和 <code class="language-plaintext highlighter-rouge">&amp;</code>。</p>
<p><code class="language-plaintext highlighter-rouge">&</code> 字符尤其让网络文档编写者受折磨,如果你要打「<code class="language-plaintext highlighter-rouge">AT&T</code>」 ,你必须要写成「<code class="language-plaintext highlighter-rouge">AT&amp;T</code>」。而网址中的 <code class="language-plaintext highlighter-rouge">&</code> 字符也要转换。比如你要链接到:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>http://images.google.com/images?num=30&q=larry+bird
</code></pre></div></div>
<p>你必须要把网址转换写为:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>http://images.google.com/images?num=30&amp;q=larry+bird
</code></pre></div></div>
<p>才能放到链接标签的 <code class="language-plaintext highlighter-rouge">href</code> 属性里。不用说也知道这很容易忽略,这也可能是 HTML 标准检验所检查到的错误中,数量最多的。</p>
<p>Markdown 让你可以自然地书写字符,需要转换的由它来处理好了。如果你使用的 <code class="language-plaintext highlighter-rouge">&</code> 字符是 HTML 字符实体的一部分,它会保留原状,否则它会被转换成 <code class="language-plaintext highlighter-rouge">&amp</code>;。</p>
<p>所以你如果要在文档中插入一个版权符号 <code class="language-plaintext highlighter-rouge">©</code>,你可以这样写:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&copy;
</code></pre></div></div>
<p>Markdown 会保留它不动。而若你写:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>AT&T
</code></pre></div></div>
<p>Markdown 就会将它转为:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>AT&amp;T
</code></pre></div></div>
<p>类似的状况也会发生在 <code class="language-plaintext highlighter-rouge"><</code> 符号上,因为 Markdown 允许 <a href="#html">兼容 HTML</a> ,如果你是把 <code class="language-plaintext highlighter-rouge"><</code> 符号作为 HTML 标签的定界符使用,那 Markdown 也不会对它做任何转换,但是如果你写:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>4 < 5
</code></pre></div></div>
<p>Markdown 将会把它转换为:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>4 &lt; 5
</code></pre></div></div>
<p>不过需要注意的是,code 范围内,不论是行内还是区块, <code class="language-plaintext highlighter-rouge"><</code> 和 <code class="language-plaintext highlighter-rouge">&</code> 两个符号都<em>一定</em>会被转换成 HTML 实体,这项特性让你可以很容易地用 Markdown 写 HTML code (和 HTML 相对而言, HTML 语法中,你要把所有的 <code class="language-plaintext highlighter-rouge"><</code> 和 <code class="language-plaintext highlighter-rouge">&</code> 都转换为 HTML 实体,才能在 HTML 文件里面写出 HTML code。)</p>
<hr />
<h2 id="区块元素">区块元素</h2>
<h3 id="段落和换行">段落和换行</h3>
<p>一个 Markdown 段落是由一个或多个连续的文本行组成,它的前后要有一个以上的空行(空行的定义是显示上看起来像是空的,便会被视为空行。比方说,若某一行只包含空格和制表符,则该行也会被视为空行)。普通段落不该用空格或制表符来缩进。</p>
<p>「由一个或多个连续的文本行组成」这句话其实暗示了 Markdown 允许段落内的强迫换行(插入换行符),这个特性和其他大部分的 text-to-HTML 格式不一样(包括 Movable Type 的「Convert Line Breaks」选项),其它的格式会把每个换行符都转成 <code class="language-plaintext highlighter-rouge"><br /></code> 标签。</p>
<p>如果你<em>确实</em>想要依赖 Markdown 来插入 <code class="language-plaintext highlighter-rouge"><br /></code> 标签的话,在插入处先按入两个以上的空格然后回车。</p>
<p>的确,需要多费点事(多加空格)来产生 <code class="language-plaintext highlighter-rouge"><br /></code> ,但是简单地「每个换行都转换为 <code class="language-plaintext highlighter-rouge"><br /></code>」的方法在 Markdown 中并不适合, Markdown 中 email 式的 <a href="#blockquote">区块引用</a> 和多段落的 <a href="#list">列表</a> 在使用换行来排版的时候,不但更好用,还更方便阅读。</p>
<h3 id="标题">标题</h3>
<p>Markdown 支持两种标题的语法,类 <a href="http://docutils.sourceforge.net/mirror/setext.html">Setext</a> 和类 <a href="http://www.aaronsw.com/2002/atx/">atx</a> 形式。</p>
<p>类 Setext 形式是用底线的形式,利用 <code class="language-plaintext highlighter-rouge">=</code> (最高阶标题)和 <code class="language-plaintext highlighter-rouge">-</code> (第二阶标题),例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>This is an H1
=============
This is an H2
-------------
</code></pre></div></div>
<p>任何数量的 <code class="language-plaintext highlighter-rouge">=</code> 和 <code class="language-plaintext highlighter-rouge">-</code> 都可以有效果。</p>
<p>类 Atx 形式则是在行首插入 1 到 6 个 <code class="language-plaintext highlighter-rouge">#</code> ,对应到标题 1 到 6 阶,例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># 这是 H1
## 这是 H2
###### 这是 H6
</code></pre></div></div>
<p>你可以选择性地「闭合」类 atx 样式的标题,这纯粹只是美观用的,若是觉得这样看起来比较舒适,你就可以在行尾加上 <code class="language-plaintext highlighter-rouge">#</code>,而行尾的 <code class="language-plaintext highlighter-rouge">#</code> 数量也不用和开头一样(行首的井字符数量决定标题的阶数):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># 这是 H1 #
## 这是 H2 ##
### 这是 H3 ######
</code></pre></div></div>
<h3 id="区块引用-blockquotes">区块引用 Blockquotes</h3>
<p>Markdown 标记区块引用是使用类似 email 中用 <code class="language-plaintext highlighter-rouge">></code> 的引用方式。如果你还熟悉在 email 信件中的引言部分,你就知道怎么在 Markdown 文件中建立一个区块引用,那会看起来像是你自己先断好行,然后在每行的最前面加上 <code class="language-plaintext highlighter-rouge">></code> :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.
</code></pre></div></div>
<p>Markdown 也允许你偷懒只在整个段落的第一行最前面加上 <code class="language-plaintext highlighter-rouge">></code> :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.
</code></pre></div></div>
<p>区块引用可以嵌套(例如:引用内的引用),只要根据层次加上不同数量的 <code class="language-plaintext highlighter-rouge">></code> :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.
</code></pre></div></div>
<p>引用的区块内也可以使用其他的 Markdown 语法,包括标题、列表、代码区块等:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>> ## 这是一个标题。
>
> 1. 这是第一行列表项。
> 2. 这是第二行列表项。
>
> 给出一些例子代码:
>
> return shell_exec("echo $input | $markdown_script");
</code></pre></div></div>
<p>任何像样的文本编辑器都能轻松地建立 email 型的引用。例如在 BBEdit 中,你可以选取文字后然后从选单中选择<em>增加引用阶层</em>。</p>
<h3 id="列表">列表</h3>
<p>Markdown 支持有序列表和无序列表。</p>
<p>无序列表使用星号、加号或是减号作为列表标记:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>* Red
* Green
* Blue
</code></pre></div></div>
<p>等同于:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>+ Red
+ Green
+ Blue
</code></pre></div></div>
<p>也等同于:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>- Red
- Green
- Blue
</code></pre></div></div>
<p>有序列表则使用数字接着一个英文句点:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>1. Bird
2. McHale
3. Parish
</code></pre></div></div>
<p>很重要的一点是,你在列表标记上使用的数字并不会影响输出的 HTML 结果,上面的列表所产生的 HTML 标记为:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ol>
<li>Bird</li>
<li>McHale</li>
<li>Parish</li>
</ol>
</code></pre></div></div>
<p>如果你的列表标记写成:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>1. Bird
1. McHale
1. Parish
</code></pre></div></div>
<p>或甚至是:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>3. Bird
1. McHale
8. Parish
</code></pre></div></div>
<p>你都会得到完全相同的 HTML 输出。重点在于,你可以让 Markdown 文件的列表数字和输出的结果相同,或是你懒一点,你可以完全不用在意数字的正确性。</p>
<p>如果你使用懒惰的写法,建议第一个项目最好还是从 1. 开始,因为 Markdown 未来可能会支持有序列表的 start 属性。</p>
<p>列表项目标记通常是放在最左边,但是其实也可以缩进,最多 3 个空格,项目标记后面则一定要接着至少一个空格或制表符。</p>
<p>要让列表看起来更漂亮,你可以把内容用固定的缩进整理好:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>* Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
viverra nec, fringilla in, laoreet vitae, risus.
* Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
Suspendisse id sem consectetuer libero luctus adipiscing.
</code></pre></div></div>
<p>但是如果你懒,那也行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>* Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
viverra nec, fringilla in, laoreet vitae, risus.
* Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
Suspendisse id sem consectetuer libero luctus adipiscing.
</code></pre></div></div>
<p>如果列表项目间用空行分开,在输出 HTML 时 Markdown 就会将项目内容用 <code class="language-plaintext highlighter-rouge"><p></code>
标签包起来,举例来说:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>* Bird
* Magic
</code></pre></div></div>
<p>会被转换为:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ul>
<li>Bird</li>
<li>Magic</li>
</ul>
</code></pre></div></div>
<p>但是这个:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>* Bird
* Magic
</code></pre></div></div>
<p>会被转换为:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ul>
<li><p>Bird</p></li>
<li><p>Magic</p></li>
</ul>
</code></pre></div></div>
<p>列表项目可以包含多个段落,每个项目下的段落都必须缩进 4 个空格或是 1 个制表符:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>1. This is a list item with two paragraphs. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Aliquam hendrerit
mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
sit amet velit.
2. Suspendisse id sem consectetuer libero luctus adipiscing.
</code></pre></div></div>
<p>如果你每行都有缩进,看起来会看好很多,当然,再次地,如果你很懒惰,Markdown 也允许:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>* This is a list item with two paragraphs.
This is the second paragraph in the list item. You're
only required to indent the first line. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit.
* Another item in the same list.
</code></pre></div></div>
<p>如果要在列表项目内放进引用,那 <code class="language-plaintext highlighter-rouge">></code> 就需要缩进:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>* A list item with a blockquote:
> This is a blockquote
> inside a list item.
</code></pre></div></div>
<p>如果要放代码区块的话,该区块就需要缩进<em>两次</em>,也就是 8 个空格或是 2 个制表符:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>* 一列表项包含一个列表区块:
<代码写在这>
</code></pre></div></div>
<p>当然,项目列表很可能会不小心产生,像是下面这样的写法:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>1986. What a great season.
</code></pre></div></div>
<p>换句话说,也就是在行首出现<em>数字-句点-空白</em>,要避免这样的状况,你可以在句点前面加上反斜杠。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>1986\. What a great season.
</code></pre></div></div>
<h3 id="代码区块">代码区块</h3>
<p>和程序相关的写作或是标签语言原始码通常会有已经排版好的代码区块,通常这些区块我们并不希望它以一般段落文件的方式去排版,而是照原来的样子显示,Markdown 会用 <code class="language-plaintext highlighter-rouge"><pre></code> 和 <code class="language-plaintext highlighter-rouge"><code></code> 标签来把代码区块包起来。</p>
<p>要在 Markdown 中建立代码区块很简单,只要简单地缩进 4 个空格或是 1 个制表符就可以,例如,下面的输入:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>这是一个普通段落:
这是一个代码区块。
</code></pre></div></div>
<p>Markdown 会转换成:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><p>这是一个普通段落:</p>
<pre><code>这是一个代码区块。
</code></pre>
</code></pre></div></div>
<p>这个每行一阶的缩进(4 个空格或是 1 个制表符),都会被移除,例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Here is an example of AppleScript:
tell application "Foo"
beep
end tell
</code></pre></div></div>
<p>会被转换为:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><p>Here is an example of AppleScript:</p>
<pre><code>tell application "Foo"
beep
end tell
</code></pre>
</code></pre></div></div>
<p>一个代码区块会一直持续到没有缩进的那一行(或是文件结尾)。</p>
<p>在代码区块里面, <code class="language-plaintext highlighter-rouge">&</code> 、 <code class="language-plaintext highlighter-rouge"><</code> 和 <code class="language-plaintext highlighter-rouge">></code> 会自动转成 HTML 实体,这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码,只需要复制贴上,再加上缩进就可以了,剩下的 Markdown 都会帮你处理,例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <div class="footer">
&copy; 2004 Foo Corporation
</div>
</code></pre></div></div>
<p>会被转换为:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><pre><code>&lt;div class="footer"&gt;
&amp;copy; 2004 Foo Corporation
&lt;/div&gt;
</code></pre>
</code></pre></div></div>
<p>代码区块中,一般的 Markdown 语法不会被转换,像是星号便只是星号,这表示你可以很容易地以 Markdown 语法撰写 Markdown 语法相关的文件。</p>
<h3 id="分隔线">分隔线</h3>
<p>你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>* * *
***
*****
- - -
---------------------------------------
</code></pre></div></div>
<hr />
<h2 id="区段元素">区段元素</h2>
<h3 id="链接">链接</h3>
<p>Markdown 支持两种形式的链接语法: <em>行内式</em>和<em>参考式</em>两种形式。</p>
<p>不管是哪一种,链接文字都是用 [方括号] 来标记。</p>
<p>要建立一个<em>行内式</em>的链接,只要在方块括号后面紧接着圆括号并插入网址链接即可,如果你还想要加上链接的 title 文字,只要在网址后面,用双引号把 title 文字包起来即可,例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>This is [an example](http://example.com/ "Title") inline link.
[This link](http://example.net/) has no title attribute.
</code></pre></div></div>
<p>会产生:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><p>This is <a href="http://example.com/" title="Title">
an example</a> inline link.</p>
<p><a href="http://example.net/">This link</a> has no
title attribute.</p>
</code></pre></div></div>
<p>如果你是要链接到同样主机的资源,你可以使用相对路径:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>See my [About](/about/) page for details.
</code></pre></div></div>
<p><em>参考式</em>的链接是在链接文字的括号后面再接上另一个方括号,而在第二个方括号里面要填入用以辨识链接的标记:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>This is [an example][id] reference-style link.
</code></pre></div></div>
<p>你也可以选择性地在两个方括号中间加上一个空格:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>This is [an example] [id] reference-style link.
</code></pre></div></div>
<p>接着,在文件的任意处,你可以把这个标记的链接内容定义出来:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[id]: http://example.com/ "Optional Title Here"
</code></pre></div></div>
<p>链接内容定义的形式为:</p>
<ul>
<li>方括号(前面可以选择性地加上至多三个空格来缩进),里面输入链接文字</li>
<li>接着一个冒号</li>
<li>接着一个以上的空格或制表符</li>
<li>接着链接的网址</li>
<li>选择性地接着 title 内容,可以用单引号、双引号或是括弧包着</li>
</ul>
<p>下面这三种链接的定义都是相同:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[foo]: http://example.com/ "Optional Title Here"
[foo]: http://example.com/ 'Optional Title Here'
[foo]: http://example.com/ (Optional Title Here)
</code></pre></div></div>
<p><strong>请注意:</strong>有一个已知的问题是 Markdown.pl 1.0.1 会忽略单引号包起来的链接 title。</p>
<p>链接网址也可以用尖括号包起来:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[id]: <http://example.com/> "Optional Title Here"
</code></pre></div></div>
<p>你也可以把 title 属性放到下一行,也可以加一些缩进,若网址太长的话,这样会比较好看:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[id]: http://example.com/longish/path/to/resource/here
"Optional Title Here"
</code></pre></div></div>
<p>网址定义只有在产生链接的时候用到,并不会直接出现在文件之中。</p>
<p>链接辨别标签可以有字母、数字、空白和标点符号,但是并<em>不</em>区分大小写,因此下面两个链接是一样的:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[link text][a]
[link text][A]
</code></pre></div></div>
<p><em>隐式链接标记</em>功能让你可以省略指定链接标记,这种情形下,链接标记会视为等同于链接文字,要用隐式链接标记只要在链接文字后面加上一个空的方括号,如果你要让 “Google” 链接到 google.com,你可以简化成:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[Google][]
</code></pre></div></div>
<p>然后定义链接内容:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[Google]: http://google.com/
</code></pre></div></div>
<p>由于链接文字可能包含空白,所以这种简化型的标记内也许包含多个单词:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Visit [Daring Fireball][] for more information.
</code></pre></div></div>
<p>然后接着定义链接:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[Daring Fireball]: http://daringfireball.net/
</code></pre></div></div>
<p>链接的定义可以放在文件中的任何一个地方,我比较偏好直接放在链接出现段落的后面,你也可以把它放在文件最后面,就像是注解一样。</p>
<p>下面是一个参考式链接的范例:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].
[1]: http://google.com/ "Google"
[2]: http://search.yahoo.com/ "Yahoo Search"
[3]: http://search.msn.com/ "MSN Search"
</code></pre></div></div>
<p>如果改成用链接名称的方式写:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].
[google]: http://google.com/ "Google"
[yahoo]: http://search.yahoo.com/ "Yahoo Search"
[msn]: http://search.msn.com/ "MSN Search"
</code></pre></div></div>
<p>上面两种写法都会产生下面的 HTML。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><p>I get 10 times more traffic from <a href="http://google.com/"
title="Google">Google</a> than from
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a>
or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p>
</code></pre></div></div>
<p>下面是用行内式写的同样一段内容的 Markdown 文件,提供作为比较之用:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>I get 10 times more traffic from [Google](http://google.com/ "Google")
than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
[MSN](http://search.msn.com/ "MSN Search").
</code></pre></div></div>
<p>参考式的链接其实重点不在于它比较好写,而是它比较好读,比较一下上面的范例,使用参考式的文章本身只有 81 个字符,但是用行内形式的却会增加到 176 个字元,如果是用纯 HTML 格式来写,会有 234 个字元,在 HTML 格式中,标签比文本还要多。</p>
<p>使用 Markdown 的参考式链接,可以让文件更像是浏览器最后产生的结果,让你可以把一些标记相关的元数据移到段落文字之外,你就可以增加链接而不让文章的阅读感觉被打断。</p>
<h3 id="强调">强调</h3>
<p>Markdown 使用星号(<code class="language-plaintext highlighter-rouge">*</code>)和底线(<code class="language-plaintext highlighter-rouge">_</code>)作为标记强调字词的符号,被 <code class="language-plaintext highlighter-rouge">*</code> 或 <code class="language-plaintext highlighter-rouge">_</code> 包围的字词会被转成用 <code class="language-plaintext highlighter-rouge"><em></code> 标签包围,用两个 <code class="language-plaintext highlighter-rouge">*</code> 或 <code class="language-plaintext highlighter-rouge">_</code> 包起来的话,则会被转成 <code class="language-plaintext highlighter-rouge"><strong></code>,例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>*single asterisks*
_single underscores_
**double asterisks**
__double underscores__
</code></pre></div></div>
<p>会转成:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><em>single asterisks</em>
<em>single underscores</em>
<strong>double asterisks</strong>
<strong>double underscores</strong>
</code></pre></div></div>
<p>你可以随便用你喜欢的样式,唯一的限制是,你用什么符号开启标签,就要用什么符号结束。</p>
<p>强调也可以直接插在文字中间:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>un*frigging*believable
</code></pre></div></div>
<p>但是<strong>如果你的 <code class="language-plaintext highlighter-rouge">*</code> 和 <code class="language-plaintext highlighter-rouge">_</code> 两边都有空白的话,它们就只会被当成普通的符号</strong>。</p>
<p>如果要在文字前后直接插入普通的星号或底线,你可以用反斜线:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>\*this text is surrounded by literal asterisks\*
</code></pre></div></div>
<h3 id="代码">代码</h3>
<p>如果要标记一小段行内代码,你可以用反引号把它包起来(<code class="language-plaintext highlighter-rouge">`</code>),例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Use the `printf()` function.
</code></pre></div></div>
<p>会产生:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><p>Use the <code>printf()</code> function.</p>
</code></pre></div></div>
<p>如果要在代码区段内插入反引号,你可以用多个反引号来开启和结束代码区段:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>``There is a literal backtick (`) here.``
</code></pre></div></div>
<p>这段语法会产生:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><p><code>There is a literal backtick (`) here.</code></p>
</code></pre></div></div>
<p>代码区段的起始和结束端都可以放入一个空白,起始端后面一个,结束端前面一个,这样你就可以在区段的一开始就插入反引号:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>A single backtick in a code span: `` ` ``
A backtick-delimited string in a code span: `` `foo` ``
</code></pre></div></div>
<p>会产生:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><p>A single backtick in a code span: <code>`</code></p>
<p>A backtick-delimited string in a code span: <code>`foo`</code></p>
</code></pre></div></div>
<p>在代码区段内,<code class="language-plaintext highlighter-rouge">&</code> 和尖括号<strong>都</strong>会被自动地转成 HTML 实体,这使得插入 HTML 原始码变得很容易,Markdown 会把下面这段:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Please don't use any `<blink>` tags.
</code></pre></div></div>
<p>转为:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><p>Please don't use any <code>&lt;blink&gt;</code> tags.</p>
</code></pre></div></div>
<p>你也可以这样写:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>`&#8212;` is the decimal-encoded equivalent of `&mdash;`.
</code></pre></div></div>
<p>以产生:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><p><code>&amp;#8212;</code> is the decimal-encoded
equivalent of <code>&amp;mdash;</code>.</p>
</code></pre></div></div>
<h3 id="图片">图片</h3>
<p>很明显地,要在纯文字应用中设计一个「自然」的语法来插入图片是有一定难度的。</p>
<p>Markdown 使用一种和链接很相似的语法来标记图片,同样也允许两种样式: <em>行内式</em>和<em>参考式</em>。</p>
<p>行内式的图片语法看起来像是:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>![Alt text](/path/to/img.jpg)
![Alt text](/path/to/img.jpg "Optional title")
</code></pre></div></div>
<p>详细叙述如下:</p>
<ul>
<li>一个惊叹号 <code class="language-plaintext highlighter-rouge">!</code></li>
<li>接着一个方括号,里面放上图片的替代文字</li>
<li>接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上
选择性的 ‘title’ 文字。</li>
</ul>
<p>参考式的图片语法则长得像这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>![Alt text][id]
</code></pre></div></div>
<p>「id」是图片参考的名称,图片参考的定义方式则和连结参考一样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[id]: url/to/image "Optional title attribute"
</code></pre></div></div>
<p>到目前为止, Markdown 还没有办法指定图片的宽高,如果你需要的话,你可以使用普通的 <code class="language-plaintext highlighter-rouge"><img></code> 标签。</p>
<hr />
<h2 id="其它">其它</h2>
<h3 id="自动链接">自动链接</h3>
<p>Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱,只要是用尖括号包起来, Markdown 就会自动把它转成链接。一般网址的链接文字就和链接地址一样,例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><http://example.com/>
</code></pre></div></div>
<p>Markdown 会转为:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><a href="http://example.com/">http://example.com/</a>
</code></pre></div></div>
<p>邮址的自动链接也很类似,只是 Markdown 会先做一个编码转换的过程,把文字字符转成 16 进位码的 HTML 实体,这样的格式可以糊弄一些不好的邮址收集机器人,例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><address@example.com>
</code></pre></div></div>
<p>Markdown 会转成:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65;
&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;
&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;
&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>
</code></pre></div></div>
<p>在浏览器里面,这段字串(其实是 <code class="language-plaintext highlighter-rouge"><a href="mailto:address@example.com">address@example.com</a></code>)会变成一个可以点击的「address@example.com」链接。</p>
<p>(这种作法虽然可以糊弄不少的机器人,但并不能全部挡下来,不过总比什么都不做好些。不管怎样,公开你的信箱终究会引来广告信件的。)</p>
<h3 id="反斜杠">反斜杠</h3>
<p>Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号,例如:如果你想要用星号加在文字旁边的方式来做出强调效果(但不用 <code class="language-plaintext highlighter-rouge"><em></code> 标签),你可以在星号的前面加上反斜杠:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>\*literal asterisks\*
</code></pre></div></div>
<p>Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>\ 反斜线
` 反引号
* 星号
_ 底线
{} 花括号
[] 方括号
() 括弧
# 井字号
+ 加号
- 减号
. 英文句点
! 惊叹号
</code></pre></div></div>
XMind快捷键汇总
2016-08-16T00:00:00+00:00
http://wangdaodao.github.io/2016-08-16/XMind-shortcuts
<p><a href="http://www.xmind.net/download/portable/">XMind绿色版下载</a></p>
<p><a href="http://www.xmindchina.net/shouce.html">XMind用户使用指南</a></p>
<table>
<thead>
<tr>
<th>Windows</th>
<th>Mac</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ctrl+N</td>
<td>Command+N</td>
<td>建立新工作簿</td>
</tr>
<tr>
<td>Ctrl+O</td>
<td>Command+O</td>
<td>开启工作簿</td>
</tr>
<tr>
<td>Ctrl+S</td>
<td>Command+S</td>
<td>储存目前工作簿</td>
</tr>
<tr>
<td>Ctrl+Shift+S</td>
<td>Command+Shift+S</td>
<td>储存全部工作簿</td>
</tr>
<tr>
<td>Ctrl+W</td>
<td>Command+W</td>
<td>关闭目前工作簿</td>
</tr>
<tr>
<td>Ctrl+Shift+W</td>
<td>Command+Shift+W</td>
<td>关闭全部工作簿</td>
</tr>
<tr>
<td>Ctrl+P</td>
<td>Command+P</td>
<td>列印</td>
</tr>
<tr>
<td>Ctrl+Z</td>
<td>Command+Z</td>
<td>复原</td>
</tr>
<tr>
<td>Ctrl+Y</td>
<td>Command+Y</td>
<td>重做</td>
</tr>
<tr>
<td>Ctrl+X</td>
<td>Command+X</td>
<td>剪切</td>
</tr>
<tr>
<td>Ctrl+C</td>
<td>Command+C</td>
<td>复制</td>
</tr>
<tr>
<td>Ctrl+V</td>
<td>Command+V</td>
<td>贴上</td>
</tr>
<tr>
<td>Delete</td>
<td>Delete</td>
<td>删除</td>
</tr>
<tr>
<td>Ctrl+Home</td>
<td>Command+Home</td>
<td>返回中心主题</td>
</tr>
<tr>
<td>Ctrl+A</td>
<td>Command+A</td>
<td>选择全部主题</td>
</tr>
<tr>
<td>Ctrl+Shift+A</td>
<td>Command+Shift+A</td>
<td>选择同层级主题</td>
</tr>
<tr>
<td>Ctrl+Alt+A</td>
<td>Command+Alt+A</td>
<td>选择子主题</td>
</tr>
<tr>
<td>Ctrl+F</td>
<td>Command+F</td>
<td>寻找/取代</td>
</tr>
<tr>
<td>Ctrl++</td>
<td>Command++</td>
<td>放大</td>
</tr>
<tr>
<td>Ctrl+-</td>
<td>Command+-</td>
<td>缩小</td>
</tr>
<tr>
<td>Ctrl+=</td>
<td>Command+=</td>
<td>正常大小</td>
</tr>
<tr>
<td>Ctrl+]</td>
<td>Command+]</td>
<td>插入摘要</td>
</tr>
<tr>
<td>Alt+Enter</td>
<td>Alt+Enter</td>
<td>属性内容内容</td>
</tr>
<tr>
<td>Enter</td>
<td>Enter</td>
<td>插入主题</td>
</tr>
<tr>
<td>Tab</td>
<td>Tab</td>
<td>插入子主题</td>
</tr>
<tr>
<td>Shift+Enter</td>
<td>Shift+Enter</td>
<td>在目前主题前插入主题</td>
</tr>
<tr>
<td>Ctrl+Enter</td>
<td>Command+Enter</td>
<td>插入目前主题父主题</td>
</tr>
<tr>
<td>Ctrl+Shift+L</td>
<td>Command+Shift+L</td>
<td>快捷键助手</td>
</tr>
<tr>
<td>Ctrl+I</td>
<td>Ctrl+I</td>
<td>插入图片</td>
</tr>
<tr>
<td>Ctrl+Shift+H</td>
<td>Command+Shift+H</td>
<td>插入超链接</td>
</tr>
<tr>
<td>Ctrl+B</td>
<td>Command+B</td>
<td>添加外框</td>
</tr>
<tr>
<td>Ctrl+L</td>
<td>Command+L</td>
<td>添加关联</td>
</tr>
<tr>
<td>F2</td>
<td>F2</td>
<td>编辑主题</td>
</tr>
<tr>
<td>F3</td>
<td>F3</td>
<td>添加/编辑标签</td>
</tr>
<tr>
<td>F4</td>
<td>F4</td>
<td>添加/编辑备注</td>
</tr>
<tr>
<td>F5</td>
<td>F5</td>
<td>简报演示</td>
</tr>
<tr>
<td>F6</td>
<td>F6</td>
<td>下钻</td>
</tr>
<tr>
<td>Shift+F6</td>
<td>Shift+F6</td>
<td>上钻</td>
</tr>
<tr>
<td>F7</td>
<td>F7</td>
<td>智慧截取图面</td>
</tr>
<tr>
<td>+</td>
<td>+</td>
<td>展开目前分支</td>
</tr>
<tr>
<td>-</td>
<td>-</td>
<td>收缩目前分支</td>
</tr>
<tr>
<td>*</td>
<td>*</td>
<td>展开所有分支</td>
</tr>
<tr>
<td>/</td>
<td>/</td>
<td>收缩所有分支</td>
</tr>
<tr>
<td>Alt+Up</td>
<td>Alt+Up</td>
<td>向前移动</td>
</tr>
<tr>
<td>Alt+Down</td>
<td>Alt+Down</td>
<td>向后移动</td>
</tr>
<tr>
<td>Ctrl+T</td>
<td>Command+T</td>
<td>建立新心智图</td>
</tr>
<tr>
<td>Ctrl+1,2,3,4,5,6</td>
<td>Command+1,2,3,4,5,6</td>
<td>快速添加优先等级图标</td>
</tr>
<tr>
<td>Esc</td>
<td>Esc</td>
<td>关闭跳出的备注对话框 / 取消截图</td>
</tr>
<tr>
<td>Ctrl+滑鼠滚轮</td>
<td>Command+滑鼠滚轮</td>
<td>放大缩小目前的画面</td>
</tr>
</tbody>
</table>
RequireJS笔记01
2016-08-16T00:00:00+00:00
http://wangdaodao.github.io/2016-08-16/RequireJS-01
<h2 id="为啥研究or使用requirejs">为啥研究or使用RequireJS?</h2>
<ul>
<li>异步“加载”。我们知道,通常网站都会把script脚本的放在html的最后,这样就可以避免浏览器执行js带来的页面阻塞。使用RequireJS,会在相关的js加载后执行回调函数,这个过程是异步的,所以它不会阻塞页面。</li>
<li>按需加载。通过RequireJS,你可以在需要加载js逻辑的时候再加载对应 的js模块,这样避免了在初始化网页的时候发生大量的请求和数据传输,或许对于一些人来说,某些模块可能他根本就不需要,那就显得没有必要。</li>
<li>更加方便的模块依赖管理。相信你曾经一定遇到过因为script标签顺序问题而导致依赖关系发生错误,这个函数未定义,那个变量undefine之类的。通过RequireJS的机制,你能确保在所有的依赖模块都加载以后再执行相关的文件,所以可以起到依赖管理的作用。</li>
<li>更加高效的版本管理。想一想,如果你还是用的script脚本引入的方式来引入一个jQuery2.x的文件,然后你有100个页面都是这么引用的,那当你想换成jQuery3.x,那你就不得不去改这100个页面。但是如果你的requireJS有在config中做jQuery的path映射,那你只需要改一处地方即可。</li>
<li>当然还有一些诸如cdn加载不到js文件,可以请求本地文件等其它的优点,这里就不一一列举了。</li>
</ul>
<h2 id="requirejs-使用">RequireJS 使用</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><script data-main="js" src="xxx/xxxx/require.js"></script>
</code></pre></div></div>
<p>使用RequireJS,你只需要引入一个require.js即可。需要说明的是,一个比较好的实践,就是你的页面上面应该也只需要通过<code class="language-plaintext highlighter-rouge"><script></code>标签引入这一个js即可。然后你这个页面的所有业务逻辑只需要在main.js里面写(<code class="language-plaintext highlighter-rouge">data-main</code>属性作用后面会有讲)就可以了。其它引用的依赖怎么办?当然是通过require按需引入啊!</p>
<p>其实Requirejs整个源文件包括注释就2000来行,其对外暴露的变量其实就三个,<code class="language-plaintext highlighter-rouge">requirejs</code>,<code class="language-plaintext highlighter-rouge">require</code>,<code class="language-plaintext highlighter-rouge">define</code>。</p>
<p>这其中requirejs 只是require的一个别名,目的是如果页面中有require其它实现了,你还是能通过使用requirejs来使用requireJS API的(本文中没有相关冲突,所以还是使用require)。</p>
<p>所以这意味着作为入门,你只需要掌握<code class="language-plaintext highlighter-rouge">require</code>,<code class="language-plaintext highlighter-rouge">require.config</code>,<code class="language-plaintext highlighter-rouge">define</code>这三样就可以了。</p>
<p>本文将以介绍<code class="language-plaintext highlighter-rouge">require</code>,<code class="language-plaintext highlighter-rouge">require.config</code>,<code class="language-plaintext highlighter-rouge">data-main</code>,<code class="language-plaintext highlighter-rouge">define</code>的顺序来介绍RequireJS。让比较简单的RequireJS更加简单,争取让大家只看这篇文章就能用好RequireJS。至于RequireJS是如何解决循环依赖,对于没有实现amd的模块如何通过shim来导出,如何在node中使用等问题。本文并没有提及,详细有需要可以去官方查阅。</p>
<p>这里拿官网的单页面作为例子,可以到这里下载<a href="https://github.com/volojs/create-template">create-template</a></p>
<p>目录结构只需要看www下面的就可以了,tools是打包压缩,这块可以略过。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>www/ - the web assets for the project
index.html - the entry point into the app.
app.js - the top-level config script used by index.html
app/ - the directory to store project-specific scripts.
lib/ - the directory to hold third party scripts.
</code></pre></div></div>
<p>index.html中是这样引入requirejs的</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><script data-main="app" src="lib/require.js"></script>
</code></pre></div></div>
<p>app其实就是app.js,在这里可以把后缀省略掉,如果看着不爽也可以加上……这样第一步就算成果了,引入requirejs。注意到标签中有一个data-main属性,你现在只需要了解require.js会在加载完成以后通过回调方法去加载这个data-main里面的js文件,所以这个js文件被加载的时候,RequireJS已经加载执行完毕。</p>
<p>再看看app.js是怎么写的</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>requirejs.config({
baseUrl: 'lib',
paths: {
app: '../app'
}
});
</code></pre></div></div>
<p>这里config是配置项,其中baseUrl的路径为根路径,path配置了一个模块ID和路径的映射,这样在后续的所有函数中就可以直接通过模块ID来引入依赖,而不用再多次引入依赖多次输入路径带来的麻烦。可能说的不是太明白,好,改一改例子!我在lib里面扔进去jquery.js</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>requirejs.config({
baseUrl: 'lib',
paths: {
app: '../app',
'jquery':['http://libs.baidu.com/jquery/2.0.3/jquery','jquery']
}
});
</code></pre></div></div>
<p>这里,先采用百度的cdn库来加载jquery,如果加载不到了,再使用本地的jquery,注意,jquery的路径,是在lib里面,因为设置了baseUrl为lib为根路径,所以这里如果写成lib/jquery,就错了,加载的时候就地址就变成了lib/lib/jquery.js。</p>
<p>再说下相对路径规则:
1.如果<code class="language-plaintext highlighter-rouge"><script></code>标签引入require.js时没有指定<code class="language-plaintext highlighter-rouge">data-main</code>属性,则以引入该js的html文件所在的路径为根路径。<br />
2.如果有指定<code class="language-plaintext highlighter-rouge">data-main</code>属性,也就是有指定入口文件,则以入口文件所在的路径为根路径。<br />
3.如果再require.config()中有配置baseUrl,则以baseUrl的路径为根路径。</p>
<p>以上三条优先级逐级提升,如果有重叠,后面的根路径覆盖前面的根路径。</p>
<p>拿第二点说,如果我config里面,没有设置baseUrl,那默认的就是www的根目录。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>requirejs.config({
paths: {
app: 'app',
'jquery':['http://libs.baidu.com/jquery/2.0.3/jquery','lib/jquery']
}
});
</code></pre></div></div>
<p>路径这块说的有点太啰嗦了,不再说路径的问题了,其实这里也不是啥大问题,错了改改就好了……</p>
<p>到这里,还应该说一下第三方模块,通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:<code class="language-plaintext highlighter-rouge">shim</code>,这一块先留一个坑吧,我也没有想好怎么来说,以后再说!</p>
<p>然后接着看app.js中config下面的,只有一句<code class="language-plaintext highlighter-rouge">requirejs(['app/main']);</code>
好吧,这就是加载app文件夹里面的main.js!</p>
<p>再改一改,还是拿jquery来做例子吧,可以改成这样</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>require(['jquery'],function ($) {
$(function () {
$('body').html('可以用jquery了!')
});
});
</code></pre></div></div>
<p>中括号中的[jquery]就是config里面的jquery,上面例子中的callback函数中发现有$参数,这个就是依赖的jquery模块的输出变量,如果你依赖多个模块,可以依次写入多个参数来使用:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>require(["jquery","underscore"],function($, _){
$(function(){
_.each([1,2,3],alert);
})
})
</code></pre></div></div>
<p>如果某个模块不输出变量值,则没有,所以尽量将输出的模块写在前面,防止位置错乱引发误解。</p>
<p>讲完了如何引入模块,现在讲如何定义一个模块,<code class="language-plaintext highlighter-rouge">require</code>定义一个模块是通过<code class="language-plaintext highlighter-rouge"> define = function (name, deps, callback)</code>完成的,第一个参数是定义模块名,第二个参数是传入定义模块所需要的依赖,第三个函数则是定义模块的主函数,主函数和<code class="language-plaintext highlighter-rouge">require</code>的回调函数一样,同样是在依赖加载完以后再调用执行。</p>
<p>未完待续……</p>
Front-End Gulp 前端开发集成解决方案
2016-08-15T00:00:00+00:00
http://wangdaodao.github.io/2016-08-15/feg
<h2 id="概述">概述</h2>
<p>FEG 是一个基于 gulp/gulp-plugins 的前端开发集成解决方案。FEG 定义了一系列任务,这些自动执行的任务可以把你从繁杂无聊的复制、粘贴、压缩、重命名、打包等事务中解脱出来,从而更专注于具体业务的开发实现。</p>
<h2 id="特性">特性</h2>
<p>集成了常用任务,后期会增加更多功能:</p>
<table>
<thead>
<tr>
<th>功能</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>gulp-sass</td>
<td>SASS文件编译</td>
</tr>
<tr>
<td>gulp-clean-css</td>
<td>压缩CSS</td>
</tr>
<tr>
<td>gulp-iconfont</td>
<td>把SVG图标制作成字体图标</td>
</tr>
<tr>
<td>gulp.spritesmith</td>
<td>合并雪碧图</td>
</tr>
<tr>
<td>gulp-file-include</td>
<td>引用HTML模版</td>
</tr>
<tr>
<td>gulp-livereload</td>
<td>实时刷新</td>
</tr>
<tr>
<td>gulp-webserver</td>
<td>开启本地服务</td>
</tr>
<tr>
<td>gulp-zip</td>
<td>文件打包</td>
</tr>
</tbody>
</table>
<h2 id="安装-feg">安装 FEG</h2>
<p>1、获取 FEG 包</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone https://github.com/wangdaodao/feg.git
</code></pre></div></div>
<p>2、进入FEG目录</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cd feg
</code></pre></div></div>
<p>3、安装 FEG</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ npm install
</code></pre></div></div>
<p>4、帮助</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ gulp h
</code></pre></div></div>
<p>5、开始</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ gulp s
</code></pre></div></div>
<p>6、打包</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ gulp b
</code></pre></div></div>
<p>由于网络问题安装过程会持续一段时间,请耐心等候。</p>
<h2 id="如何使用">如何使用</h2>
<p>1、进入项目目录 FEG/ 执行 gulp s 命令。此时浏览器会自动打开,并且实时响应你的代码变化(需自行安装<a href="https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei">livereload插件</a>)。</p>
<p>2、进入根目录进行开始工作。</p>
<p>3、SVG图标预览在svg/icon.html</p>
<p>4、打包代码自动生成到build文件夹下。</p>
<h2 id="常见问题">常见问题</h2>
<p>由于网络原因安装过程中极有可能出现安装失败,解决方案:</p>
<ol>
<li>使用其他源</li>
<li>重新尝试 npm install</li>
<li>试试<a href="https://npm.taobao.org/">cnpm</a></li>
<li>hi@wangdaodao.com</li>
</ol>
<h2 id="鸣谢">鸣谢</h2>
<p>FEG 用到了很多开源软件包,没有这些开源项目就没有FEG,在此对相关开源团队表示由衷的感谢!</p>
<h2 id="license">LICENSE</h2>
<p>The MIT License (MIT)</p>
JavaScript学习:设计模式之单例模式
2016-02-02T00:00:00+00:00
http://wangdaodao.github.io/2016-02-02/js-study-0022
<p>马上就要放假了,看到汤姆大叔的<a href="http://www.cnblogs.com/TomXu/archive/2012/02/20/2352817.html">深入理解JavaScript系列(25):设计模式之单例模式</a>,感觉不错,转过来。</p>
<p>在JavaScript里,实现单例的方式有很多种,其中最简单的一个方式是使用对象字面量的方法,其字面量里可以包含大量的属性和方法:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var mySingleton = {
property1: "something",
property2: "something else",
method1: function () {
console.log('hello world');
}
};
</code></pre></div></div>
<p>如果以后要扩展该对象,你可以添加自己的私有成员和方法,然后使用闭包在其内部封装这些变量和函数声明。只暴露你想暴露的public成员和方法,样例代码如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var mySingleton = function () {
/* 这里声明私有变量和方法 */
var privateVariable = 'something private';
function showPrivate() {
console.log(privateVariable);
}
/* 公有变量和方法(可以访问私有变量和方法) */
return {
publicMethod: function () {
showPrivate();
},
publicVar: 'the public can see this!'
};
};
var single = mySingleton();
single.publicMethod(); // 输出 'something private'
console.log(single.publicVar); // 输出 'the public can see this!'
</code></pre></div></div>
<p>上面的代码很不错了,但如果我们想做到只有在使用的时候才初始化,那该如何做呢?为了节约资源的目的,我们可以另外一个构造函数里来初始化这些代码,如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var Singleton = (function () {
var instantiated;
function init() {
/*这里定义单例代码*/
return {
publicMethod: function () {
console.log('hello world');
},
publicProperty: 'test'
};
}
return {
getInstance: function () {
if (!instantiated) {
instantiated = init();
}
return instantiated;
}
};
})();
/*调用公有的方法来获取实例:*/
Singleton.getInstance().publicMethod();
</code></pre></div></div>
<p>知道了单例如何实现了,但单例用在什么样的场景比较好呢?其实单例一般是用在系统间各种模式的通信协调上,下面的代码是一个单例的最佳实践:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var SingletonTester = (function () {
//参数:传递给单例的一个参数集合
function Singleton(args) {
//设置args变量为接收的参数或者为空(如果没有提供的话)
var args = args || {};
//设置name参数
this.name = 'SingletonTester';
//设置pointX的值
this.pointX = args.pointX || 6; //从接收的参数里获取,或者设置为默认值
//设置pointY的值
this.pointY = args.pointY || 10;
}
//实例容器
var instance;
var _static = {
name: 'SingletonTester',
//获取实例的方法
//返回Singleton的实例
getInstance: function (args) {
if (instance === undefined) {
instance = new Singleton(args);
}
return instance;
}
};
return _static;
})();
var singletonTest = SingletonTester.getInstance({ pointX: 5 });
console.log(singletonTest.pointX); // 输出 5
</code></pre></div></div>
<h2 id="其它实现方式">其它实现方式</h2>
<h3 id="方法1">方法1:</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function Universe() {
// 判断是否存在实例
if (typeof Universe.instance === 'object') {
return Universe.instance;
}
// 其它内容
this.start_time = 0;
this.bang = "Big";
// 缓存
Universe.instance = this;
// 隐式返回this
}
// 测试
var uni = new Universe();
var uni2 = new Universe();
console.log(uni === uni2); // true
</code></pre></div></div>
<h3 id="方法2">方法2:</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function Universe() {
// 缓存的实例
var instance = this;
// 其它内容
this.start_time = 0;
this.bang = "Big";
// 重写构造函数
Universe = function () {
return instance;
};
}
// 测试
var uni = new Universe();
var uni2 = new Universe();
uni.bang = "123";
console.log(uni === uni2); // true
console.log(uni2.bang); // 123
</code></pre></div></div>
<h3 id="方法3">方法3:</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function Universe() {
// 缓存实例
var instance;
// 重新构造函数
Universe = function Universe() {
return instance;
};
// 后期处理原型属性
Universe.prototype = this;
// 实例
instance = new Universe();
// 重设构造函数指针
instance.constructor = Universe;
// 其它功能
instance.start_time = 0;
instance.bang = "Big";
return instance;
}
// 测试
var uni = new Universe();
var uni2 = new Universe();
console.log(uni === uni2); // true
// 添加原型属性
Universe.prototype.nothing = true;
var uni = new Universe();
Universe.prototype.everything = true;
var uni2 = new Universe();
console.log(uni.nothing); // true
console.log(uni2.nothing); // true
console.log(uni.everything); // true
console.log(uni2.everything); // true
console.log(uni.constructor === Universe); // true
</code></pre></div></div>
<h3 id="方式4">方式4:</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var Universe;
(function () {
var instance;
Universe = function Universe() {
if (instance) {
return instance;
}
instance = this;
// 其它内容
this.start_time = 0;
this.bang = "Big";
};
} ());
//测试代码
var a = new Universe();
var b = new Universe();
alert(a === b); // true
a.bang = "123";
alert(b.bang); // 123
</code></pre></div></div>
<h2 id="参考">参考</h2>
<p><a href="https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/singleton.html">https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/singleton.html</a></p>
<p><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#singletonpatternjavascript">http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#singletonpatternjavascript</a></p>
JavaScript学习:JavaScript的数组实现队列与堆栈的方法
2016-01-20T00:00:00+00:00
http://wangdaodao.github.io/2016-01-20/js-study-0021
<h2 id="队列和堆栈的简单介绍">队列和堆栈的简单介绍</h2>
<h3 id="队列的基本概念"><strong>队列的基本概念</strong></h3>
<p>队列:队列数据结构的访问规则是FIFO(<strong>First-In-First-Out,先进先出</strong>)。队列在列表的末端添加项,从列表的前端移除项。由于 <code class="language-plaintext highlighter-rouge">push()</code> 是向数组末端添加项的方法,因此要模拟队列只需一个从数组前端取得项的方法。实现这一操作的数组方法就是 <code class="language-plaintext highlighter-rouge">shift()</code> ,它能够移除数组中的第一个项并返回该项,同时将数组长度减1。ECMAScript还为数组提供了一个 <code class="language-plaintext highlighter-rouge">unshift()</code> 方法。顾名思义, <code class="language-plaintext highlighter-rouge">unshift()</code> 与 <code class="language-plaintext highlighter-rouge">shift()</code> 的用途相反:它能在数组前端添加任意个项并返回新数组的长度。因此,同时使用 <code class="language-plaintext highlighter-rouge">unshift()</code> 和 <code class="language-plaintext highlighter-rouge">pop()</code> 方法,可以从相反的方向来模拟队列,即在数组的前端添加项,从数组末端移除项。</p>
<p><a href="/uploads/2016/01/20150101235139.png"><img src="/uploads/2016/01/20150101235139.png" alt="队列" /></a></p>
<h3 id="堆栈的基本概念"><strong>堆栈的基本概念</strong></h3>
<p>栈:栈是一种LIFO(<strong>Last-In-First-Out,后进先出</strong>)的数据结构,也就是最新添加的项最早被移除。而栈中项的插入(叫做推入)和移除(叫做弹出),只发生在一个位置——栈的顶部。ECMAScript为数组专门提供了 <code class="language-plaintext highlighter-rouge">push()</code> 和 <code class="language-plaintext highlighter-rouge">pop()</code> 方法,以便实现类似栈的行为。 <code class="language-plaintext highlighter-rouge">push()</code> 方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。而 <code class="language-plaintext highlighter-rouge">pop()</code> 方法则从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。</p>
<p><a href="/uploads/2016/01/20150101235414.png"><img src="/uploads/2016/01/20150101235414.png" alt="堆栈" /></a></p>
<h2 id="在javascript中实现队列和堆栈">在JavaScript中实现队列和堆栈</h2>
<h3 id="实现队列"><strong>实现队列</strong></h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//创建一个数组来模拟队列
var a=new Array();
console.log(a);
//unshift: 在数组的开头添加一个或更多元素,并返回新的长度
console.log("入队");
a.unshift(1)
console.log(a);//----->1
a.unshift(2);
console.log(a);//----->2,1
a.unshift(3);
console.log(a);//----->3,2,1
a.unshift(4);
console.log(a);//----->4,3,2,1
console.log("出队,先进先出");
console.log(a);
//pop:从数组中把最后一个元素删除,并返回这个元素的值
a.pop();//----->1
console.log(a);
a.pop();//----->2
console.log(a);
a.pop();//----->3
console.log(a);
a.pop();//----->4
console.log(a);
</code></pre></div></div>
<p>在chrome浏览器控制台输出的效果如下图所示:</p>
<p><a href="/uploads/2016/01/20150101235447.png"><img src="/uploads/2016/01/20150101235447.png" alt="队列" /></a></p>
<h3 id="实现堆栈"><strong>实现堆栈</strong></h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//创建一个数组来模拟堆栈
var a=new Array();
console.log(a);
//push: 在数组的末尾添加一个或更多元素,并返回新的长度
console.log("入栈");
a.push(1)
console.log(a);//----->1
a.push(2);
console.log(a);//----->1,2
a.push(3);
console.log(a);//----->1,2,3
a.push(4);
console.log(a);//----->1,2,3,4
console.log("出栈,后进先出");
console.log(a);
//pop:从数组中把最后一个元素删除,并返回这个元素的值
a.pop();//----->4
console.log(a);
a.pop();//----->3
console.log(a);
a.pop();//----->2
console.log(a);
a.pop();//----->1
console.log(a);
</code></pre></div></div>
<p>在chrome浏览器控制台输出的效果如下图所示:</p>
<p><a href="/uploads/2016/01/20150101235505.png"><img src="/uploads/2016/01/20150101235505.png" alt="堆栈" /></a></p>
<h3 id="push方法和unshift方法的性能测试"><strong>push方法和unshift方法的性能测试</strong></h3>
<p>Array的push与unshift方法都能给当前数组添加元素,不同的是,push是在末尾添加,而unshift则是在开头添加,从原理就可以知道,unshift的效率是较低的。原因是,它每添加一个元素,都要把现有元素往下移一个位置。但到底效率差异有多大呢?下面来简单测试一下。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>/*
关于代码中"var s=+newDate();"的技巧说明
解释如下:=+这个运算符是不存在的;
+相当于.valueOf();
+new Date()相当于new Date().valueOf()
//4个结果一样返回当前时间的毫秒数
alert(+new Date());
alert(+new Date);
var s=new Date();
alert(s.valueOf());
alert(s.getTime());
*/
var arr = [ ];
var startTime = +new Date(); //+new Date()相当于new Date().valueOf(),返回当前时间的毫秒数
// push性能测试
for (var i = 0; i < 100000; i++) {
arr.push(i);
}
var endTime = +new Date();
console.log("调用push方法往数组中添加100000个元素耗时"+(endTime-startTime)+"毫秒");
startTime = +new Date();
arr = [ ];
// unshift性能测试
for (var i = 0; i < 100000; i++) {
arr.unshift(i);
}
endTime = +new Date();
console.log("调用unshift方法往数组中添加100000个元素耗时"+(endTime-startTime)+"毫秒");
</code></pre></div></div>
<p>这段代码分别执行了100000次push和unshift操作,在chrome浏览器运行一次,得到的结果如下图所示:</p>
<p><a href="/uploads/2016/01/20150101235610.png"><img src="/uploads/2016/01/20150101235610.png" alt="push方法和unshift方法的性能测试" /></a></p>
<p>可见,unshift比push要慢差不多100倍!因此,平时还是要慎用unshift,特别是对大数组。那如果一定要达到unshift的效果,可以借助于Array的reverse方法,Array的reverse的方法能够把一个数组反转。先把要放进数组的元素用push添加,再执行一次reverse,就达到了unshift的效果。比如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//创建一个数组来模拟堆栈
var a=new Array();
//使用push方法在数组的末尾添加元素
a.push(1)
a.push(2);
a.push(3);
a.push(4);
console.log("数组反转之前数组中的元素顺序");
console.log(a);//----->1,2,3,4
//Array有一个叫做reverse的方法,能够把一个数组反转。先把要放进数组的元素用push添加,再执行一次reverse,就达到了unshift的效果
a.reverse();//使用reverse方法将数组进行反转
console.log("数组反转之后数组中的元素顺序");
console.log(a);
</code></pre></div></div>
<p>在chrome浏览器控制台输出的效果如下图所示:</p>
<p><a href="/uploads/2016/01/20150101235638.png"><img src="/uploads/2016/01/20150101235638.png" alt="数组反转" /></a></p>
<p>从运行结果来看,数组元素的顺序已经反转过来了。</p>
<h3 id="reverse方法的性能测试"><strong>reverse方法的性能测试</strong></h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var arr = [ ], s = +new Date;
for (var i = 0; i < 100000; i++) {
arr.push(i);
}
//调用reverse方法将数组里面的100000元素的顺序反转
arr.reverse();
console.log("调用reverse方法将数组里面的100000元素的顺序反转耗时:"+(+new Date - s)+"毫秒");
</code></pre></div></div>
<p>在chrome浏览器控制台输出的效果如下图所示:</p>
<p><a href="/uploads/2016/01/20150101235657.png"><img src="/uploads/2016/01/20150101235657.png" alt="reverse方法的性能测试" /></a></p>
<p>从运行效果中可以看到,reverse方法的性能极高,可以放心使用。
以上就是关于在javascript中通过数组来实现队列和堆栈的总结,并且简单测试了一下push、unshift、reverse这几个方法在操作大数组方面的性能优劣。</p>
javaScript基础学习思维导图
2016-01-12T00:00:00+00:00
http://wangdaodao.github.io/2016-01-12/javascript-mindmap
<p>转自julying.com,现在网站已经打不开了……</p>
<h2 id="javascript-变量">JavaScript 变量</h2>
<p><a href="/uploads/2016/01/172629239.gif"><img src="/uploads/2016/01/172629239.gif" alt="JavaScript 变量" /></a></p>
<h2 id="javascript-数据类型">JavaScript 数据类型</h2>
<p><a href="/uploads/2016/01/172629238.gif"><img src="/uploads/2016/01/172629238.gif" alt="JavaScript 数据类型" /></a></p>
<h2 id="javascript-运算符">JavaScript 运算符</h2>
<p><a href="/uploads/2016/01/172629234.gif"><img src="/uploads/2016/01/172629234.gif" alt="JavaScript 运算符" /></a></p>
<h2 id="javascript-流程控制">JavaScript 流程控制</h2>
<p><a href="/uploads/2016/01/172629235.gif"><img src="/uploads/2016/01/172629235.gif" alt="JavaScript 流程控制" /></a></p>
<h2 id="javascript-对象">JavaScript 对象</h2>
<p><a href="/uploads/2016/01/172629240.gif"><img src="/uploads/2016/01/172629240.gif" alt="JavaScript 对象" /></a></p>
<h2 id="javascript-数组">JavaScript 数组</h2>
<p><a href="/uploads/2016/01/172629232.gif"><img src="/uploads/2016/01/172629232.gif" alt="JavaScript 数组" /></a></p>
<h2 id="javascript-函数基础">JavaScript 函数基础</h2>
<p><a href="/uploads/2016/01/172629233.gif"><img src="/uploads/2016/01/172629233.gif" alt="JavaScript 函数基础" /></a></p>
<h2 id="javascript-字符串函数">JavaScript 字符串函数</h2>
<p><a href="/uploads/2016/01/172629237.gif"><img src="/uploads/2016/01/172629237.gif" alt="JavaScript 字符串函数" /></a></p>
<h2 id="javascript-正则表达式">JavaScript 正则表达式</h2>
<p><a href="/uploads/2016/01/172629236.gif"><img src="/uploads/2016/01/172629236.gif" alt="JavaScript 正则表达式" /></a></p>
<h2 id="dom-基本操作">DOM 基本操作</h2>
<p><a href="/uploads/2016/01/172629241.gif"><img src="/uploads/2016/01/172629241.gif" alt="DOM 基本操作" /></a></p>
深入理解JavaScript闭包(Closure)
2016-01-07T00:00:00+00:00
http://wangdaodao.github.io/2016-01-07/javascript-closure2
<h2 id="什么是闭包">什么是闭包?</h2>
<p>官方的解释是:<strong>所谓闭包,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。</strong></p>
<p>相信很少有人能直接看懂这句话,因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包,因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。看下面这段代码:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function a(){
var i=0;
function b(){
alert(++i);
}
return b;
}
var c = a();
c();
</code></pre></div></div>
<p>这段代码有两个特点:</p>
<blockquote>
<ol>
<li>函数b嵌套在函数a内部;</li>
<li>函数a返回函数b。</li>
</ol>
</blockquote>
<p>引用关系如图:</p>
<p><a href="/uploads/2016/01/closure1.jpg"><img src="/uploads/2016/01/closure1.jpg" alt="关系图" /></a></p>
<p>这样在执行完 <code class="language-plaintext highlighter-rouge">var c=a()</code> 后,变量c实际上是指向了函数b,再执行c()后就会弹出一个窗口显示i的值(第一次为1)。这段代码其实就创建了一个闭包,为什么?因为函数a外的变量c引用了函数a内的函数b,就是说:<strong>当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。</strong></p>
<p>我猜想你一定还是不理解闭包,因为你不知道闭包有什么作用,下面让我们继续探索。</p>
<h2 id="闭包有什么作用">闭包有什么作用?</h2>
<p>简而言之,闭包的作用就是在a执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述,不专业也不严谨,但大概意思就是这样,理解闭包需要循序渐进的过程。</p>
<p>在上面的例子中,由于闭包的存在使得函数a返回后,a中的i始终存在,这样每次执行c(),i都是自加1后alert出i的值。</p>
<p>那么我们来想象另一种情况,如果a返回的不是函数b,情况就完全不同了。因为a执行完后,b没有被返回给a的外界,只是被a所引用,而此时a也只会被b引用,因此函数a和b互相引用但又不被外界打扰(被外界引用),函数a和b就会被GC回收。(关于Javascript的垃圾回收机制可以自行搜索)</p>
<h2 id="闭包内的微观世界">闭包内的微观世界</h2>
<p>如果要更加深入的了解闭包以及函数a和嵌套函数b的关系,我们需要引入另外几个概念:<strong>函数的执行环境(excution context)</strong>、<strong>活动对象(call object)</strong>、<strong>作用域(scope)</strong>、<strong>作用域链(scope chain)</strong>。以函数a从定义到执行的过程为例阐述这几个概念。</p>
<blockquote>
<ol>
<li>当定义函数a的时候,js解释器会将函数a的作用域链(scope chain)设置为定义a时a所在的环境,如果a是一个全局函数,则scope chain中只有window对象。</li>
<li>当函数a执行的时候,a会进入相应的执行环境(excution context)。</li>
<li>在创建执行环境的过程中,首先会为a添加一个scope属性,即a的作用域,其值就为第1步中的scope chain。即a.scope=a的作用域链。</li>
<li>然后执行环境会创建一个活动对象(call object)。活动对象也是一个拥有属性的对象,但它不具有原型而且不能通过JavaScript代码直接访问。创建完活动对象后,把活动对象添加到a的作用域链的最顶端。此时a的作用域链包含了两个对象:a的活动对象和window对象。</li>
<li>下一步是在活动对象上添加一个arguments属性,它保存着调用函数a时所传递的参数。</li>
<li>最后把所有函数a的形参和内部的函数b的引用也添加到a的活动对象上。在这一步中,完成了函数b的的定义,因此如同第3步,函数b的作用域链被设置为b所被定义的环境,即a的作用域。</li>
</ol>
</blockquote>
<p>到此,整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c,又函数b的作用域链包含了对函数a的活动对象的引用,也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用,函数b又依赖函数a,因此函数a在返回后不会被GC回收。</p>
<p>当函数b执行的时候亦会像以上步骤一样。因此,执行时b的作用域链包含了3个对象:b的活动对象、a的活动对象和window对象。如下图所示:</p>
<p><a href="/uploads/2016/01/closure2.jpg"><img src="/uploads/2016/01/closure2.jpg" alt="关系图" /></a></p>
<p>当在函数b中访问一个变量的时候,搜索顺序是先搜索自身的活动对象,如果存在则返回,如果不存在将继续搜索函数a的活动对象,依次查找,直到找到为止。如果整个作用域链上都无法找到,则返回undefined。如果函数b存在Prototype原型对象,则在查找 完自身的活动对象后先查找自身的原型对象,再继续查找。这就是Javascript中的变量查找机制。如果整个作用域链上都无法找到,则返回undefined。</p>
<p>小结,本段中提到了两个重要的词语:函数的定义与执行。文中提到函数的作用域是在定义函数时候就已经确定,而不是在执行的时候确定(参看步骤1和3)。用一段代码来说明这个问题:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function f(x) {
var g = function () { return x; }
return g;
}
var h = f(1);
alert(h());
</code></pre></div></div>
<p>这段代码中变量h指向了f中的那个匿名函数(由g返回)。</p>
<p>假设函数h的作用域是在执行 <code class="language-plaintext highlighter-rouge">alert(h())</code> 确定的,那么此时h的作用域链是:h的活动对象->alert的活动对象->window对象。</p>
<p>假设函数h的作用域实在定义时确定的,就是说h指向的那个匿名函数在定义的时候就已经确定了作用域。那么在执行的时候,h的作用域链为:h的活动对象->f的活动对象->window对象。</p>
<p>如果第一种假设成立,那输出值就是undefined;如果第二种假设成立,输出值则为1。</p>
<p>运行结果证明了第2个假设是正确的,说明函数的作用域确实是在定义这个函数的时候就已经确定了。</p>
<h2 id="闭包的应用场景">闭包的应用场景</h2>
<p>1。 保护函数内的变量安全。以最开始的例子为例,函数a中i只有函数b才能访问,而无法通过其他途径访问到,因此保护了i的安全性。</p>
<ol>
<li>在内存中维持一个变量。依然如前例,由于闭包,函数a中i的一直存在于内存中,因此每次执行c(),都会给i自加1。以上两点是闭包最基本的应用场景,很多经典案例都源于此。</li>
<li>通过保护变量的安全实现JS私有属性和私有方法(不能被外部访问)</li>
</ol>
<p>私有属性和方法在Constructor外是无法被访问的</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function Constructor(...) {
var that = this;
var membername = value;
function membername(...) {...}
}
</code></pre></div></div>
<p>以上3点是闭包最基本的应用场景,很多经典案例都源于此。</p>
<h2 id="javascript的垃圾回收机制">Javascript的垃圾回收机制</h2>
<p>在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,这就是为什么函数a执行后不会被回收的原因。</p>
JavaScript闭包
2016-01-04T00:00:00+00:00
http://wangdaodao.github.io/2016-01-04/javascript-closure
<h2 id="什么是闭包">什么是闭包?</h2>
<p>闭包是什么?闭包是Closure,这是静态语言所不具有的一个新特性。但是闭包也不是什么复杂到不可理解的东西,简而言之,闭包就是:</p>
<blockquote>
<p>闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。<br />
闭包就是就是函数的“堆栈”在函数返回后并不释放,我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配。<br />
当在一个函数内定义另外一个函数就会产生闭包</p>
</blockquote>
<p>上面的第二定义是第一个补充说明,抽取第一个定义的主谓宾——<strong>闭包是函数的‘局部变量’集合</strong>。只是这个局部变量是可以在函数返回后被访问。(这个不是官方定义,但是这个定义应该更有利于你理解闭包)</p>
<p>做为局部变量都可以被函数内的代码访问,这个和静态语言是没有差别。闭包的差别在于局部变变量可以在函数执行结束后仍然被函数外的代码访问。这意味 着函数必须返回一个指向闭包的“引用”,或将这个”引用”赋值给某个外部变量,才能保证闭包中局部变量被外部代码访问。当然包含这个引用的实体应该是一个 对象,因为在Javascript中除了基本类型剩下的就都是对象了。可惜的是,ECMAScript并没有提供相关的成员和方法来访问闭包中的局部变 量。但是在ECMAScript中,函数对象中定义的内部函数(inner function)是可以直接访问外部函数的局部变量,通过这种机制,我们就可以以如下的方式完成对闭包的访问了。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function greeting(name) {
var text = 'Hello ' + name; // local variable
// 每次调用时,产生闭包,并返回内部函数对象给调用者
return function() {
alert(text);
};
}
var sayHello=greeting( "Closure" );
sayHello() // 通过闭包访问到了局部变量text
</code></pre></div></div>
<p>上述代码的执行结果是:Hello Closure,因为sayHello()函数在greeting函数执行完毕后,仍然可以访问到了定义在其之内的局部变量text。</p>
<p>好了,这个就是传说中闭包的效果,闭包在Javascript中有多种应用场景和模式,比如Singleton,Power Constructor等这些Javascript模式都离不开对闭包的使用。</p>
<h2 id="闭包的样列">闭包的样列</h2>
<p>例子1:闭包中局部变量是引用而非拷贝</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function say667() {
// Local variable that ends up within closure
var num = 666;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
var sayAlert = say667();
sayAlert()
</code></pre></div></div>
<p>例子2:多个函数绑定同一个闭包,因为他们定义在同一个函数内。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function setupSomeGlobals() {
// Local variable that ends up within closure
var num = 666;
// Store some references to functions as global variables
gAlertNumber = function() { alert(num); }
gIncreaseNumber = function() { num++; }
gSetNumber = function(x) { num = x; }
}
setupSomeGolbals(); // 为三个全局变量赋值
gAlertNumber(); //666
gIncreaseNumber();
gAlertNumber(); // 667
gSetNumber(12);//
gAlertNumber();//12
</code></pre></div></div>
<p>例子3:当在一个循环中赋值函数时,这些函数将绑定同样的闭包</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function buildList(list) {
var result = [];
for (var i = 0; i < list.length; i++) {
var item = 'item' + list[i];
result.push( function() {alert(item + ' ' + list[i])} );
}
return result;
}
function testList() {
var fnlist = buildList([1,2,3]);
// using j only to help prevent confusion - could use i
for (var j = 0; j < fnlist.length; j++) {
fnlist[j]();
}
}
</code></pre></div></div>
<p>例子4:外部函数所有局部变量都在闭包内,即使这个变量声明在内部函数定义之后。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function sayAlice() {
var sayAlert = function() { alert(alice); }
// Local variable that ends up within closure
var alice = 'Hello Alice';
return sayAlert;
}
var helloAlice=sayAlice();
helloAlice();
</code></pre></div></div>
<p>例子5:每次函数调用的时候创建一个新的闭包</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function newClosure(someNum, someRef) {
// Local variables that end up within closure
var num = someNum;
var anArray = [1,2,3];
var ref = someRef;
return function(x) {
num += x;
anArray.push(num);
alert('num: ' + num +
'\nanArray ' + anArray.toString() +
'\nref.someVar ' + ref.someVar);
}
}
closure1=newClosure(40,{someVar:'closure 1'});
closure2=newClosure(1000,{someVar:'closure 2'});
closure1(5); // num:45 anArray[1,2,3,45] ref:'someVar closure1'
closure2(-10);// num:990 anArray[1,2,3,990] ref:'someVar closure2'
</code></pre></div></div>
<h2 id="闭包的应用">闭包的应用</h2>
<p>Singleton 单件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var singleton = function () {
var privateVariable;
function privateFunction(x) {
...privateVariable...
}
return {
firstMethod: function (a, b) {
...privateVariable...
},
secondMethod: function (c) {
...privateFunction()...
}
};
}();
</code></pre></div></div>
我的gulp设置
2015-12-20T00:00:00+00:00
http://wangdaodao.github.io/2015-12-20/my-gulp
<p>继上次的<a href="/2015-04-21/hello-gulp.html">前端构建工具gulp入门教程</a>后,一直觉得还是不全,这次周末又在家里搞了搞,唯一的缺陷就是sprite……</p>
<p>注意,下面安装npm包失败的话,需要换源或者翻墙!话说我用淘宝的源,有些包总是安装不了……</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>/*
使用原始
npm config set registry = "https://registry.npmjs.org/"
使用淘宝
npm config set registry = "https://registry.npm.taobao.org/"
npm install gulp node-sass gulp-sass gulp-autoprefixer gulp-minify-css gulp-livereload gulp-uglify gulp-webserver gulp-concat gulp-clean gulp-zip gulp-plumber opn --save-dev
*/
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
livereload = require('gulp-livereload'),
uglify = require('gulp-uglify'),
webserver = require('gulp-webserver'),
concat = require('gulp-concat'),
clean = require('gulp-clean'),
zip = require('gulp-zip'),
plumber = require('gulp-plumber'),
opn = require('opn');
//配置本地Web 服务器:主机+端口
var localserver = {
host: 'localhost',
port: '8080'
}
//删除js文件
gulp.task('cleanjs', function () {
var stream = gulp.src('./js/all.js')
.pipe(clean());
return stream;
});
//合并javascript文件,合并后文件放入js下按顺序压缩gulp.src(['a.js', 'b.js', 'c.js'])
gulp.task('alljs',['cleanjs'],function(){
return gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./js'));
});
//压缩css文件
gulp.task('styles', function() {
return gulp.src('./css/main.scss')
.pipe(plumber())
.pipe(sass({outputStyle:'compact'}).on('error', sass.logError))
.pipe(autoprefixer('last 2 version'))
.pipe(gulp.dest('./css'));
});
//文件监控
gulp.task('watch', function () {
// Watch .scss files
gulp.watch('./css/*.scss', ['styles']);
// Watch .js files
gulp.watch('./js/*.js', ['alljs']);
});
//调试监控
gulp.task('debugwatch', function () {
// Create LiveReload server
livereload.listen();
// Watch any files, reload on change
gulp.watch(['./css/*.css','./js/*.js','*.html'],function(file){
livereload.changed(file.path);
});
});
//开启本地 Web 服务器功能
gulp.task('webserver', function() {
gulp.src( './' )
.pipe(webserver({
host: localserver.host,
port: localserver.port,
livereload: false,
directoryListing: false
}));
});
//通过浏览器打开本地 Web服务器 路径
gulp.task('openbrowser', function() {
opn( 'http://' + localserver.host + ':' + localserver.port );
});
//把HTML拷贝到build下
gulp.task('buildhtml', function() {
var stream = gulp.src('./*.html')
.pipe(gulp.dest('./build'));
return stream;
});
//把CSS拷贝到build下
gulp.task('buildcss', ['styles'] , function() {
var stream = gulp.src('./css/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./build/css'));
return stream;
});
//把IMG拷贝到build下
gulp.task('buildimg', function() {
var stream = gulp.src('./img/**')
.pipe(gulp.dest('./build/img'));
return stream;
});
//把PLUGIN拷贝到build下
gulp.task('buildplugin', function() {
var stream = gulp.src('./plugin/**')
.pipe(gulp.dest('./build/plugin'));
return stream;
});
//把JS拷贝到build下
gulp.task('buildjs', ['alljs'] , function() {
var stream = gulp.src('./js/all.js')
.pipe(uglify())
.pipe(gulp.dest('./build/js'));
return stream;
});
//默认任务 gulp start
gulp.task('start', function(){
gulp.start('styles');
gulp.start('alljs');
gulp.start('watch');
gulp.start('webserver');
gulp.start('openbrowser');
});
//调试任务 gulp debug
gulp.task('debug', function(){
gulp.start('styles');
gulp.start('alljs');
gulp.start('watch');
gulp.start('debugwatch');
gulp.start('webserver');
gulp.start('openbrowser');
});
//打包 gulp build
gulp.task('build' ,['buildhtml','buildcss','buildimg','buildplugin','buildjs'] ,function(){
function checkTime(i) {
if (i < 10) {
i = "0" + i
}
return i
}
var d=new Date();
var year=d.getFullYear();
var month=checkTime(d.getMonth() + 1);
var day=checkTime(d.getDate());
var hour=checkTime(d.getHours());
var minute=checkTime(d.getMinutes());
return gulp.src('./build/**')
.pipe(zip('build-'+year+month+day+hour+minute+'.zip'))
.pipe(gulp.dest('./'));
});
</code></pre></div></div>
<p>最后是我自己设置的项目文件路径</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>|--/build/--------打包后的代码
|--/img/----------图片存放目录
|--/js/-----------脚本存放目录
|--/css/----------样式存放目录
|--/plugin/-------插件存放目录
|--gulpfile.js
</code></pre></div></div>
<p>另外,我已经把FEG放在了<a href="https://github.com/wangdaodao/feg">github</a>和<a href="https://gitcafe.com/wangdaodao/feg">gitcafe</a>上,这样方便安装了!</p>
<p>顺便放一张打包的动态图</p>
<p><a href="/uploads/2015/12/feg.gif"><img src="/uploads/2015/12/feg.gif" alt="01" /></a></p>
<h2 id="gulpjs-中文文档彩色">Gulpjs 中文文档(彩色)</h2>
<p><a href="/uploads/2015/04/Gulpjs01.jpg"><img src="/uploads/2015/04/Gulpjs01.jpg" alt="01" /></a>
<a href="/uploads/2015/04/Gulpjs02.jpg"><img src="/uploads/2015/04/Gulpjs02.jpg" alt="02" /></a></p>
从一个程序员笑话看软件开发管理
2015-12-03T00:00:00+00:00
http://wangdaodao.github.io/2015-12-03/a-joke
<p>有一个笑话是这样的:</p>
<blockquote>
<ol>
<li>程序员写出自认为没有Bug的代码。</li>
<li>软件测试,发现了20个Bug。</li>
<li>程序员修改了10个Bug,并告诉测试组另外10个不是Bug。</li>
<li>测试组发现其中5个改动根本无法工作,同时又发现了15个新Bug。</li>
<li>重复3次步骤3和步骤4。</li>
<li>鉴于市场方面的压力,为了配合当初制定的过分乐观的发布时间表,产品终于上市了。</li>
<li>用户发现了137个新Bug。</li>
<li>已经领了项目奖金的程序员不知跑到哪里去了。</li>
<li>新组建的项目组修正了差不多全部137个Bug,但又发现了456个新Bug。</li>
<li>最初那个程序员从斐济给饱受拖欠工资之苦的测试组寄来了一张明信片。整个测试组集体辞职。</li>
<li>公司被竞争对手恶意收购。收购时,软件的最终版本包含783个Bug。</li>
<li>新CEO走马上任。公司雇了一名新程序员重写该软件。</li>
<li>程序员写出自认为没有Bug的代码。</li>
</ol>
</blockquote>
<p>要我说,如果真有这样的公司,不倒闭对不起人民。</p>
<p>这个笑话从程序员开始,到程序员结束,从头到尾都在说程序员的不是。但是我要说的是,这完全是管理者的失败,从整个过程中,看不到任何管理工作。这种管理者不但无知无能,还很无耻——将自己的失败责任推给程序员。</p>
<blockquote>
<ol>
<li>程序员凭什么证明他的代码没有Bug?有Test case吗?有Code review吗?这个环节管理缺失。</li>
<li>测试发现Bug有进行Bug管理吗?有跟踪吗?这个环节管理缺失。</li>
<li>凭什么证明程序员已经把那10个Bug修改好了?另10个又为什么不是Bug?Bug的评价标准难道是程序员说了算?这个环节管理缺失。</li>
<li>5个不能工作的Bug修改问题有没有追究责任?增加新Bug是修改过程中不可避免的事情,但是如果有有效的单元测试机制,可以大大减少这种情况。这个环节管理缺失。</li>
<li>迭代是正常的,但是问题处理于发散而不是收敛发展,可见没有有效的管理调控。这个环节管理缺失。</li>
<li>过于乐观的时间表和不可能达到的最后期限,都表现出管理者的无知和无能。而在这样的情况下强行推出产品,那就是无知者无畏了。</li>
<li>这是对用户的不负责任,管理者要负最大的责任。</li>
<li>这样的情况还能发项目奖金,只能说管理者不是一般的愚蠢。</li>
<li>管理工作没有任何的改进,问题仍然处于发散迭代状态。管理工作依然没有到位。</li>
<li>拖欠测试部门工资体现出管理者对质量管理工作的忽视以及对人力资源管理方面一无所知。</li>
<li>送被收购者两个字:活该。送收购者两个字:瞎眼。</li>
<li>可见新管理者与原管理者半斤八两,都没有认识到问题的根本所在。不过也只有这样的管理者才会作出收购这种公司的决策。</li>
<li>历史的重演是必然的。</li>
</ol>
</blockquote>
<p>一个正常的企业或是项目,其运作必须应该是循环向上进行的。而保障这种运行的工作就是管理。而管理工作的主要内容就是控制,包括控制循环的节奏——不能太快也不能太慢,控制发展的方向——只能向上不能向下,控制运作的稳定——不能大起大落或时聚时散等。</p>
<p>而这一切,在这个例子中都看不到。</p>
<p>在这个笑话的例子中,一切都是以开发工作在驱动,这首先就是一个方向性错误,产品是为用户服务的,当然应该是以用户和市场作为驱动,并且结合自身的能力最终 确定工作的重点。这一错误折射出管理者对被管理的内容很不了解,只好任由比较了解的程序员摆布——事实上他们除了技术,并不会了解更多。</p>
<p>一个管理者如果对自己所管理的内容不了解,他就不可能管理得好。</p>
<p>这是一件毫无疑问的事,可是国内的软件业似乎总是不相信这一点。中国软件业中流毒最深的谎言之一就是:管理者只要懂管理就可以,不需要懂技术。</p>
<p>其实这不过是那些无知无能无耻的管理者为了骗钱而编出来的,相信这句话的人必将付出金钱的代价。</p>
<p>其次是质量管理。基本的质量管理常识告诉我们,每次循环结束前,最重的工作就是总结改进。只有这样才能保证循环运作是向上发展,而不是失去控制地向下发展。也只有有效的质量管理,才能保证迭代过程是收敛发展,并最终达到目标。但在这个例子中,这个部分显然是缺失的——其中虽然有测试部门,但是他们的作用仅仅是质量管理中的质量检测环节,管理部分还是缺失的。</p>
<p>然后是人力资源管理。软件开发是一项劳动密集型的工作,虽然这是脑力劳动,但同样意味着人在因素在其中占有决定性的地位。而例子中未改完BUG的程序员拿到项目奖金,而同样辛苦工作的测试人员却被拖欠薪资,除了表现出管理者对他们的工作内容的不了解,以及对质量管理工作的不重视以外,还表现出管理者完全不会管人,这是一种谋杀团队的行为——谋杀一个团队远比建设要容易得多。</p>
<p>最后,这个失败的管理者把他的经历编成这个笑话,让大家看到他被程序员们害得多惨,把程序员妖魔化为一群骗子。但只要稍懂管理的人简单分析一下就可以看出来,只不过是这个人的无知和无能造成了他现在的结果,而把责任推给别人的行为更是表现出他的无耻。作为身居高位的管理者,如果连应该承担的责任都要推卸,他们还能胜任什么事情呢。</p>
JavaScript学习:Function类型
2015-11-11T00:00:00+00:00
http://wangdaodao.github.io/2015-11-11/js-study-0020
<p>1.函数其实是对象,每个函数都是Function类型的实例,一样具有属性和方法,因此,函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定。</p>
<hr />
<p>2.函数的声明:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function sum(num1,num2){
return num1+num2
}
</code></pre></div></div>
<p>或者</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var sum=function(num1,num2){
return num1+num2;
};
</code></pre></div></div>
<p>或者</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var sum=new Function("num1","num2","return num1+num2"); //不推荐
</code></pre></div></div>
<hr />
<p>3.JavaScript中函数是没有重载的。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>funtion Add(num){
return num + 100;
}
funtion Add(num){
return num + 200;
}
var result=Add(100); //300
//将函数名想像成指针,这例子中声明了两个同名函数,后一个就覆盖了前面函数,上述函数相当于
funtion Add(num){
return num + 100;
}
Add(num){
return num + 200;
}
var result=Add(100); //300
</code></pre></div></div>
<hr />
<p>4.函数声明和函数表达式是有区别的,解析器会率先读取函数声明,并使其置于任何代码之前;而函数表达式,则必须等到解析器执行到它所在的代码行,才别执行。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>alert(sum(10,10)); //这是正确的,20
function sum(num1,num2){
return num1+num2;
}
alert(sum(10,10)); //这是错误的
var sum=function(num1,num2){
return num1+num2;
}
</code></pre></div></div>
<hr />
<p>5.因为JavaScript中的函数名本身就是变量,所以函数也可以当作值来使用。也就是说,不仅可以想传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回。</p>
<hr />
<p>6.在函数内部,有两个特殊的对象:arguments和this,arguments是一个数组对象,包含传入的所有参数,arguments的主要作用是保存函数参数,但这个对象还有个叫callee的属性,该属性是一个指向拥有这个arguments对象的函数。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//非常经典的递归函数
function factoriak(num){
if(num<=1){
return 1;
}else{
return num * facaorial(num-1);//与函数名factoriak耦合性太高了
}
}
//上述代码与函数名耦合性太高,一换函数名就不行了,就可以采用以下方法
function factoriak(num){
if(num<=1){
return 1;
}else{
return num * arguments.callee(num-1);//这样无论用什么名字都能完成递归调用 }
}
</code></pre></div></div>
<hr />
<p>7.this指的是函数执行时所处的作用域。</p>
<hr />
<p>8.每个函数都包含:length和prototype。length属性表示函数希望接收的参数个数。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function sayName(name){
alert(name);
}
function sum(num1,num2){
return num1+num2;
}
funtion sayHi(){
alert("hi");
}
alert(sayName.length);//1
alert(sum.length); //2
alert(sayHi().length);//0
</code></pre></div></div>
<hr />
<p>9.对于JavaScript的引用类型而言,prototype是保存他们实例方法的真正所在。</p>
<hr />
<p>10.每个函数都包含两个非继承而来的方法:apply()和call();这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值。</p>
<hr />
<p>11.apply()方法接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组。其中第二个参数可以是Array的实例,也可以是arguments对象。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function sum(num1,num2){
return num1+num2;
}
function callSum(num1,num2){
return sum.apply(this,arguments); //传入aguments对象
}
function callSum2(num1,num2){
return sum.apply(this,[num1,num2]); //传入数组
}
alert(callSum(10,10)); //20
alert(callSum2(10,10)); //20
</code></pre></div></div>
<hr />
<p>12.call()方法的第一个参数是作用域没有变化,变化的是其余的参数必须直接传递给函数。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function sum(num1,num2){
return num1+num2;
}
function callSum(num1,num2){
return sum.call(this,num1,num2);
}
alert(callSum(10,10));
</code></pre></div></div>
<hr />
<p>13.apply()和call()最强大的地方是能够扩充函数赖以运行的作用域。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>window.color="red";
var o ={color:"blue"};
function sayColor(){
alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColor.call(o); //blue
</code></pre></div></div>
<hr />
<p>14.每个函数都有一个非标准的caller属性,该属性指向调用当前函数的函数。一般在一个函数内部,铜鼓哟arguments.callee.caller来实现对调用栈的追溯,只做调试用。</p>
JavaScript学习:创建对象(原型模式)
2015-11-11T00:00:00+00:00
http://wangdaodao.github.io/2015-11-11/js-study-0019
<p>** 我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,它的用途是包含可以有特定类型的所有实例共享的属性和方法。**</p>
<p>prototype就是通过构造函数而创建的那个对象的原型对象。使用原型的好处就是可以让所有对象实例共享它所包含的属性和方法 。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function Person() {
}
Person.prototype.name = "zxj";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
alert(this.name);
}
var person1 = new Person();
person1.sayName(); //zxj
var person2 = new Person();
person2.sayName(); //zxj
</code></pre></div></div>
<h2 id="1理解原型对象">1.理解原型对象</h2>
<p>无论什么时候,<strong>只要创建了一个新函数,ECMAScript就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象。</strong>在默认情况下,所有原型对象都会自动获得一个constructor(构造函数)属性,这个属性包含一个指向prototype属性所在函数的指针。就拿前面的例子,Person.prototype.constructor指向Person。而通过这个构造函数,我们还可以继续为原型对象添加其他属性和方法。</p>
<p>创建了自定义指针之后,其原型对象默认只会取得constructor属性;至于其它方法,都会从Object对象继承而来。当调用构造函数创建一个新实例之后,该实例的内部将包括一个指针(内部属性),指向构造函数的原型对象。ECMA-262第5版中管这个叫[[Prototype]]。</p>
<p>要明确一点的就是,这个连接存在于实例和构造函数的原型对象之间,而不是存在于实例和构造函数之间。</p>
<p>以前面使用的Person构造函数和Person.prototype创建实例的代码为例,如下图:</p>
<p><a href="/uploads/2015/11/311927467177212.png"><img src="/uploads/2015/11/311927467177212.png" alt="理解原型对象" /></a></p>
<p>上图展示了Person构造函数、Person的原型属性以及Person现有的两个实例之间的关系。在此,Person.prototype指向了原型对象,而Person.prototype.constructor又指回了Person。原型对象中除了包含constructor属性之外,还包括后来添加的其他属性。Person的每一个实例——person1和person2都包含一个内部属性,该属性仅仅指向Person.prototype。换句话说,它们与构造函数没有直接的联系。此外,要格外注意的是,虽然这两个实例都不包含属性和方法,但我们却可以调用person1.sayName()。这是通过查找对象属性的过程来实现的。</p>
<p>虽然我们无法访问到[[Prototype]],但可以通过isPrototypeOf()方法来确定对象之间是否存在这种关系。从本质上讲,如果[[Prototype]]指向调用isPrototypeOf()方法的对象(Person.prototype),那么这个方法就会返回true。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>alert(Person.prorotype.isPrototypeOf(person1)); //true
alert(Person.prorotype.isPrototypeOf(person2)); //true
</code></pre></div></div>
<p>每当代码要读取某个对象的属性时,都会进行一次搜索,搜索目标是具有给定名称的属性。搜索当然先从对象实例的本身开始,如果找到了,就可以返回该值了;如果找不到,则会去指针所指向的原型对象中去查找,在原型对象中找到了,就可以顺利返回该值。而这正是多个对象实例共享原型所保存的属性和方法的基本原理。</p>
<p>虽然可以通过对象实例访问到保存在原型中的值,但不能通过对象实例重写原型中的值。根据查找原理,如果找到了实例中的值,就不会再去查找原型对象中的值。代码如下所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function Person() {
}
Person.prototype.name = "zxj";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.sayName = function () {
alert(this.name);
}
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
alert(person1.name); //Greg 来自实例
alert(person2.name); //zxj 来自原型
delete person1.name; //删除实例中的name属性
alert(person1.name); //zxj 来自原型
</code></pre></div></div>
<p>使用hasOwnPeoperty()方法可以检测一个属性是否存在于实例中,还是存在原型中,这个方法(它是从Object继承来的)只在给定属性存在域对象实例中时,才返回true。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function Person() {
}
Person.prototype.name = "zxj";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.sayName = function () {
alert(this.name);
}
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
person1.name = "Greg";
alert(person1.name); //Greg 来自实例
alert(person1.hasOwnProperty("name")); //true
alert(person2.name); //zxj 来自原型
alert(person2.hasOwnProperty("name")); //false
delete person1.name;
alert(person1.name); //zxj 来自原型
alert(person1.hasOwnProperty("name")); //false
</code></pre></div></div>
<hr />
<h2 id="2原型与in操作符">2.原型与in操作符</h2>
<p>有两种方式使用in操作符:一、单独使用;二、for-in中使用。</p>
<p>功能:<strong>会在通过对象能够访问给定属性时返回true,无论是在对象实例中或是原型中。</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function Person() {
}
Person.prototype.name = "zxj";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.sayName = function () {
alert(this.name);
}
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true
person1.name = "Greg";
alert(person1.name); //Greg 来自实例
alert(person1.hasOwnProperty("name")); //true
alert("name" in person1); //true
alert(person2.name); //zxj 来自原型
alert(person2.hasOwnProperty("name")); //false
alert("name" in person2); //true
delete person1.name;
alert(person1.name); //zxj 来自原型
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true
alert(person1.hasOwnProperty("qqqq")); //false
alert("qqqq" in person1); //false
</code></pre></div></div>
<p>同时使用hasOwnProperty()和in操作符可以判断出该属性到底是存在对象实例中还是存在与原型中。</p>
<p>使用for-in循环时,返回的是所有能够通过对象访问的,可枚举(enumerated)属性,其中即包括存在与实例中的属性,也包括存在与原型中的属性。根据规定,开发人员定义的属性都是可枚举的——IE8及更早版本除。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var o = {
toString: function () {
return "My Object";
}
}
for (var prop in o) {
if (prop == "toString") {
alert("Found toString"); //在IE中不会显示(IE9(未测试)和IE10(已测试)可用)
}
}
</code></pre></div></div>
<hr />
<h2 id="3更简单的原型语法">3.更简单的原型语法</h2>
<p>我们可以用一个包含属性和方法的对象字面量重写整个原型对象。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function Person(){
}
Person.peototype={
name:"zxj",
age:29,
job:"Software Engineer",
sayName:function(){
alert(this.name);
}
};
</code></pre></div></div>
<p>结果是与先前的相同,但有一个是不同的:contrcutor属性不再指向Person了。我们曾经介绍过,没创建一个函数,就会同时创建它的prototype对象,这个对象也会自动获得constructor属性。而我们这样写,本质上是完全重写了默认的prototype对象,因此constructor属性也就变成了新对象的constructor属性(指向Object构造函数),不再指向Person函数。</p>
<p>当然我可以将它特意设置成适当的值:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function Person() {
}
Person.prototype = {
constructor: Person,
name: "zxj",
age: 29,
sayName: function () {
alert(this.name);
}
};
</code></pre></div></div>
<p>以上代码特意包含了一个constructor属性,并将它的值设置为Person,从而确保了通过该属性能够访问到适当的值。</p>
<p>注意,以这种方式重设constructor属性会导致它的[[Enumerable]]特性被设置为true。默认情况下,constructor属性是不可枚举的。因此如果你使用兼容ECMASCript5的JavaScript引擎,可以试一试Object.definePropety()。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function Person() {
}
Person.prototype = {
constructor: Person,
name: "zxj",
age: 29,
sayName: function () {
alert(this.name);
}
};
Object.defineProperty(Person.prototype,"constructor",{
enumerable:false,
value:Person
});
</code></pre></div></div>
<hr />
<h2 id="4原型的动态性">4.原型的动态性</h2>
<p>由于在原型中查找值的过程是一次搜索,因此我们对原型对象所做的任何修改都能够立即从实例上反映出来——即使是先创建了实例后修改原型也照样可以,如下所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function Person() {
}
var friend = new Person();
Person.prototype.sayHi = function () {
alert("hi");
}
friend.sayHi(); //"hi"
</code></pre></div></div>
<p>尽管可以随时为原型添加属性和方法,但如果我们重写了整个原型对象,那么情况就不一样了。我们知道,调用构造函数时会为实例添加一个指向最初原型的[[Prototype]]指针,而把原型修改为另一个对象就等于切断了构造函数与最初原型之间的联系。一定要记住:<strong>实例中的指针仅仅指向原型,而不是构造函数。</strong>如下例子:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function Person() {
}
var friend = new Person();
Person.prototype = {
constructor: Person,
name: "zxj",
age: 29,
job: "Software Engineer",
sayName: function () {
alert(this.name);
}
};
friend.sayName(); //error 找不到该方法
</code></pre></div></div>
<p><a href="/uploads/2015/11/311928094045282.png"><img src="/uploads/2015/11/311928094045282.png" alt="原型的动态性" /></a></p>
<hr />
<h2 id="5原生对象的原型">5.原生对象的原型</h2>
<p>原型模式的重要性不仅体现在创建自定义类型方面,就连所有原生的引用类型,都是采用这种模式创建的。所有引用类型(Object、Array、String,等等)都在构造函数的原型上定义了方法。例如,在Array.prototype中可以找到sort()方法,而在String.prototype中可以找到substring()方法,如下所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>alert(typeof Array.prototype.sort); //"function"
alert(typeof String.prototype.substring); //"function"
</code></pre></div></div>
<p>通过原生对象的原型,不仅可以取得所有默认方法的引用,而且也可以定义新方法。如下所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>String.prototype.startWith = function (text) {
return this.indexOf(text) == 0;
}
var msg = "Hello World";
alert(msg.startWith("Hello")); //true
</code></pre></div></div>
<hr />
<h2 id="6原型对象的问题">6.原型对象的问题</h2>
<p>原型模式的缺点。首先,它省略了为构造函数传递初始化参数这一环节,结果所有的实例在默认情况下都取得了相同的值。原型模式最大的问题是由其共享的本性所导致的。</p>
<p>原型中所有属性是被很多实例共享的,这种共享对于函数非常合适。对于那些包含基本值的属性倒也说得过去,毕竟(如前面的例子所示),通过在实例上添加一个同名属性,可以隐藏原型中的对应属性。然而,对于包含引用类型值的属性来说,问题就比较突出了。来看下面的例子。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Person.prototype = {
constructor: Person,
name: "zxj",
age: 29,
job: "Software Engineer",
friends: ["saly", "geil"],
sayName: function () {
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("van");
alert(person1.friends); //"saly","geil","van"
alert(person2.friends); //"saly","geil","van"
alert(person1.friends === person2.friends) //问题出来了,person1结交了新朋友意味着person2也必须结交这个朋友
</code></pre></div></div>
<p>我们可以看到,当一个对象想获取独有的操作时,原型模式的共享就是最大的阻碍。</p>
简洁明了的UI交互手册(70-75)
2015-07-09T00:00:00+00:00
http://wangdaodao.github.io/2015-07-09/good-ui-08
<h2 id="71-视觉清晰">71. 视觉清晰</h2>
<blockquote>
<p>一切事物都是相对的。有光才有影,有大才有小,有整体才有个体,有混乱才有秩序。视觉上的对比让人更容易理解产品,而模糊相似的视觉元素会让人混乱。所以视觉上的区分,比如大小、颜色对比要明显。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3787186144.png" alt="idea071.png" /></p>
<h2 id="72-提供补救措施">72. 提供补救措施</h2>
<blockquote>
<p>误操作或程序异常难以避免。程序应该允许用户在出问题时补救,而不是重头再来。常见的例子比如:换一个帐号登录、修改订单数量、更改送货地址等等。程序应该允许用户做出这样的调整。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1710350187.png" alt="idea072.png" /></p>
<h2 id="73-支持分享到sns">73. 支持分享到SNS</h2>
<blockquote>
<p>在SNS网站上公开计划是一种自我激励的方式。人们努力保持形象,所以公开承诺会让人担起责任。研究已经证实,使用这种方法能提高减肥成功率。当我们向别人宣告要做什么时,更可能会付出行动。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2429799124.png" alt="idea073.png" /></p>
<h2 id="74-提供重操作功能">74. 提供重操作功能</h2>
<blockquote>
<p>有时程序未如期运行(如上传文件失败)得再试一次,或者用户打印完一份文档后想再打印一份,提供重操作让这个过程变得超级简单。出现以上情况却不能重操作时,用户会很挫败。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/668852475.png" alt="idea074.png" /></p>
<h2 id="75-选项尽量少">75. 选项尽量少</h2>
<blockquote>
<p>给用户的选项数量要尽量少。选项越多越难选,用户满意度会下降,后悔和自责的概率也会增加。然而,选项多也有好处,它意味着用户选择范围广。至今为止,果酱实验(更少的选择带来更好的决策)还未重验成功<a href="https://wangdaodao.com/usr/uploads/2019/01/3787186144.png">1</a>,所以我们宁愿采取折中的手段,并进一步测试本方法。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1877641638.png" alt="idea075.png" /></p>
<h2 id="相关部分">相关部分</h2>
<ol>
<li><a href="/2014-08-05/good-ui-01.html">简洁明了的UI交互手册(1)</a></li>
<li><a href="/2014-08-08/good-ui-02.html">简洁明了的UI交互手册(2)</a></li>
<li><a href="/2014-08-09/good-ui-03.html">简洁明了的UI交互手册(3)</a></li>
<li><a href="/2014-08-09/good-ui-04.html">简洁明了的UI交互手册(4)</a></li>
<li><a href="/2014-08-13/good-ui-05.html">简洁明了的UI交互手册(5)</a></li>
<li><a href="/2015-03-30/good-ui-06.html">简洁明了的UI交互手册(6)</a></li>
<li><a href="/2015-07-03/good-ui-07.html">简洁明了的UI交互手册(7)</a></li>
<li><a href="/2015-07-09/good-ui-08.html">简洁明了的UI交互手册(8)</a></li>
</ol>
<p>以上总结来自<a href="http://www.goodui.org/">GoodUI</a>,部分翻译来源网络。</p>
SublimeText3 snippet 编写
2015-07-08T00:00:00+00:00
http://wangdaodao.github.io/2015-07-08/sublime-text-3-snippet
<p>继上次<a href="/2014-06-24/sublime-text-3.html">Sublime Text 3设置</a>后,这次又补上了代码片段的编写。</p>
<p>在菜单tool->New Snippet中定义.打开后是空白的snippet模板.</p>
<p>在 <code class="language-plaintext highlighter-rouge"><content><![CDATA[</code> 和 <code class="language-plaintext highlighter-rouge">]]></content></code>之前为要定义的内容块,在<code class="language-plaintext highlighter-rouge"><tabTrigger></code> 与 <code class="language-plaintext highlighter-rouge"></tabTrigger></code> 之间定义快捷名称,在 <code class="language-plaintext highlighter-rouge"><scope></code> 与 <code class="language-plaintext highlighter-rouge"></scope></code>之间定义该snippet作用的文件类型.</p>
<p>例如当需要输入html5这几个字符后按tab, 就能展开为红色部分:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><snippet>
<content><![CDATA[
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>${1}</title>
</head>
<body>
<h1>${1}</h1>
Hello, ${2:this} is a ${3:snippet}!
</body>
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>html5</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>text.html</scope>
</snippet>
</code></pre></div></div>
<p>编写好此文件后ctrl+s会弹出默认的保存路径, 一般是<code class="language-plaintext highlighter-rouge">..\Data\Packages\User</code>,</p>
<p>文件名必须以<code class="language-plaintext highlighter-rouge">.sublime-snippet</code>为后缀.</p>
<p>如此文件可保存为<code class="language-plaintext highlighter-rouge">html5.sublime-snippet</code>或者其他前缀名称. 一个文件中只能有一个snippet.</p>
<p><code class="language-plaintext highlighter-rouge">${1}</code>支持补全后光标默认停留的位置, 编辑完成此处内容后按tab可以跳转到<code class="language-plaintext highlighter-rouge">${2}</code>的位置,this表示2处默认内容,tab之后会选中this,${3:snippet}同理.</p>
<p>关于<code class="language-plaintext highlighter-rouge"><scope></code>,官方定义如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ActionScript: source.actionscript.2
AppleScript: source.applescript
ASP: source.asp
Batch FIle: source.dosbatch
C#: source.cs
C++: source.c++
Clojure: source.clojure
CoffeeScript: source.coffee
CSS: source.css
D: source.d
Diff: source.diff
Erlang: source.erlang
Go: source.go
GraphViz: source.dot
Groovy: source.groovy
Haskell: source.haskell
HTML: text.html(.basic)
JSP: text.html.jsp
Java: source.java
Java Properties: source.java-props
Java Doc: text.html.javadoc
JSON: source.json
Javascript: source.js
BibTex: source.bibtex
Latex Log: text.log.latex
Latex Memoir: text.tex.latex.memoir
Latex: text.tex.latex
LESS: source.css.less
TeX: text.tex
Lisp: source.lisp
Lua: source.lua
MakeFile: source.makefile
Markdown: text.html.markdown
Multi Markdown: text.html.markdown.multimarkdown
Matlab: source.matlab
Objective-C: source.objc
Objective-C++: source.objc++
OCaml campl4: source.camlp4.ocaml
OCaml: source.ocaml
OCamllex: source.ocamllex
Perl: source.perl
PHP: source.php
Regular Expression(python): source.regexp.python
Python: source.python
R Console: source.r-console
R: source.r
Ruby on Rails: source.ruby.rails
Ruby HAML: text.haml
SQL(Ruby): source.sql.ruby
Regular Expression: source.regexp
RestructuredText: text.restructuredtext
Ruby: source.ruby
SASS: source.sass
Scala: source.scala
Shell Script: source.shell
SQL: source.sql
Stylus: source.stylus
TCL: source.tcl
HTML(TCL): text.html.tcl
Plain text: text.plain
Textile: text.html.textile
XML: text.xml
XSL: text.xml.xsl
YAML: source.yaml
</code></pre></div></div>
简洁明了的UI交互手册(61-70)
2015-07-03T00:00:00+00:00
http://wangdaodao.github.io/2015-07-03/good-ui-07
<h2 id="61-反馈操作结果">61. 反馈操作结果</h2>
<blockquote>
<p>用户做了操作,会希望知道操作是否成功。如果程序缺少操作反馈,用户会很困惑,系统按我的要求执行了吗?按钮按下了吗?我应该再试一次吗?良好的设计要让用户获得持续、完整的操作反馈。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/842636413.png" alt="idea061.png" /></p>
<h2 id="62-考虑用户下一步操作">62. 考虑用户下一步操作</h2>
<blockquote>
<p>设计时思考用户下一步操作,并为此提供更好的体验。亚马逊的下拉菜单就是个很好的案例——鼠标移动到某项菜单上展开二级菜单,光标经过下一项菜单的右上角时,不会收缩或改变二级菜单——若非如此设计,用户使用起来会很痛苦。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/842511783.png" alt="idea062.png" /></p>
<h2 id="63-适当留白">63. 适当留白</h2>
<blockquote>
<p>适当留白让内容/数据更好读。表格、段落、列表项等等所有页面元素间要留足够的间距。间距不足,内容会混在一起看不清楚。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2424464397.png" alt="idea063.png" /></p>
<h2 id="64-讲故事">64. 讲故事</h2>
<blockquote>
<p>故事是最古老的交流方式,可以使用在产品引导页,或各种可交互的程序中。请尝试叙述故事来替代信息的罗列。基本的故事有几个要素:人物、情节和需要被解决的问题。它们能引起情感共鸣,让读者身临其境,因此,更不容易被遗忘。推销产品的信件都很喜欢讲故事,正因此才能打动客户。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2283110430.png" alt="idea064.png" /></p>
<h2 id="65-使用真实数据">65. 使用真实数据</h2>
<blockquote>
<p>大多数人能嗅出一英里外的骗子。使用真实数据可以帮助你的产品变得值得信赖。如果用户看到一堆没写任何理由的好评,可能会怀疑评论造假。有好评也有差评看起来更可信。另外,精确的数字也能让产品更可信。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2047280027.png" alt="idea065.png" /></p>
<h2 id="66-逐步减少提醒">66. 逐步减少提醒</h2>
<blockquote>
<p>LayerVault曾讨论过这个方法。产品要为新手提供引导,教他们怎么使用产品,随着他们使用次数的增加,逐步减少提醒。例如,把放在显眼位置的快捷操作去掉,或隐藏图标的文本标签等等。用户要学的内容越来越少,直至完全掌握。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2320873922.png" alt="idea066.png" /></p>
<h2 id="67-少用我多用你">67. 少用「我」,多用「你」</h2>
<blockquote>
<p>将用户的利益放在自己的前面,少用「我」,多用「你」。一个世纪前,戴尔·卡耐基就在《人性的弱点》中提出,让人广受欢迎的途径是关注对方的兴趣和利益,真心理解对方。这同样也适用于产品。另外,社会实验观察发现,人们更信任非利己主义者。有时,仅从对方角度考虑(即使自己没有立即受益)也能带来双赢。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3077211375.png" alt="idea067.png" /></p>
<h2 id="68-提供解释说明和提示">68. 提供解释、说明和提示</h2>
<blockquote>
<p>有些事对我们来说显而易见,对用户却未必。典型如文本字段,要求用户输入开放性的内容,所以要提供解释性说明,比如:为什么要输入这个信息、输入格式、输入例子、如何找到需要的信息等等。注意,这些解释不要放在表单字段的占位符里。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3171785329.png" alt="idea068.png" /></p>
<h2 id="69-简洁的文案">69. 简洁的文案</h2>
<blockquote>
<p>用词简练,缩短句子长度。写完初稿后,看看能否在不失原意的前提下让句子更精练。使用五个简单的技巧(如少用被动语态、去掉无意义的词等)能让文字简洁老练。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1795253634.png" alt="idea069.png" /></p>
<h2 id="70-响应式布局">70. 响应式布局</h2>
<blockquote>
<p>世界上最糟的事莫过于出现双滚动条。使用较小的设备访问静态布局的网页,比较容易出现这个问题。解决的方法之一是使用响应式布局,根据屏幕形状和大小自动调整内容。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1492781375.png" alt="idea070.png" /></p>
<h2 id="相关部分">相关部分</h2>
<ol>
<li><a href="/2014-08-05/good-ui-01.html">简洁明了的UI交互手册(1)</a></li>
<li><a href="/2014-08-08/good-ui-02.html">简洁明了的UI交互手册(2)</a></li>
<li><a href="/2014-08-09/good-ui-03.html">简洁明了的UI交互手册(3)</a></li>
<li><a href="/2014-08-09/good-ui-04.html">简洁明了的UI交互手册(4)</a></li>
<li><a href="/2014-08-13/good-ui-05.html">简洁明了的UI交互手册(5)</a></li>
<li><a href="/2015-03-30/good-ui-06.html">简洁明了的UI交互手册(6)</a></li>
<li><a href="/2015-07-03/good-ui-07.html">简洁明了的UI交互手册(7)</a></li>
<li><a href="/2015-07-09/good-ui-08.html">简洁明了的UI交互手册(8)</a></li>
</ol>
<p>以上总结来自<a href="http://www.goodui.org/">GoodUI</a>,部分翻译来源网络。</p>
视频播放解决方案
2015-06-30T00:00:00+00:00
http://wangdaodao.github.io/2015-06-30/video-for-everybody
<h2 id="视频格式">视频格式</h2>
<p>当前,video 元素支持三种视频格式:</p>
<table>
<tbody>
<tr>
<th>格式</th>
<th style="width:16%">IE</th>
<th style="width:16%">Firefox</th>
<th style="width:16%">Opera</th>
<th style="width:16%">Chrome</th>
<th style="width:16%">Safari</th>
</tr>
<tr>
<td>Ogg</td>
<td>No</td>
<td>3.5+</td>
<td>10.5+</td>
<td>5.0+</td>
<td>No</td>
</tr>
<tr>
<td>MPEG 4</td>
<td>9.0+</td>
<td>No</td>
<td>No</td>
<td>5.0+</td>
<td>3.0+</td>
</tr>
<tr>
<td>WebM</td>
<td>No</td>
<td>4.0+</td>
<td>10.6+</td>
<td>6.0+</td>
<td>No</td>
</tr>
</tbody>
</table>
<blockquote>
<p>Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件<br />
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件<br />
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件</p>
</blockquote>
<h2 id="一个通用的解决办法在支持html5的浏览器下使用video不支持的使用flash">一个通用的解决办法,在支持HTML5的浏览器下,使用video,不支持的使用FLASH</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><video width="640" height="360" controls="controls" autoplay="autoplay">
<!-- Safari / iOS, IE9 -->
<source src="movie.mp4" type="video/mp4" />
<!-- Chrome10+, Ffx4+, Opera10.6+ -->
<source src="movie.webm" type="video/webm" />
<!-- Firefox3.6+ / Opera 10.5+ -->
<source src="movie.ogg" type="video/ogg" />
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="flvplayer.swf">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="flvplayer.swf" />
<param name='quality' value='high' />
<param name='allowFullScreen' value='true' />
<param name='FlashVars' value='vcastr_file=movie.flv&amp;IsAutoPlay=0&amp;IsContinue=0&amp;DefaultVolume=50' />
<!-- fallback image -->
<img src="movie.jpg" width="640" height="360" alt="movie" title="No video playback capabilities, please download the video below" />
</object>
</video>
</code></pre></div></div>
<p>播放器右键另存:<a href="/uploads/2015/06/flvplayer.swf">flvplayer.swf</a></p>
<p>注意的是,视频要存储为h.264文件!</p>
IOS Fixed布局的解决方案
2015-06-08T00:00:00+00:00
http://wangdaodao.github.io/2015-06-08/mobile-fixed-layout
<p>移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况。 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题。 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案。</p>
<hr />
<h2 id="ios下的-fixed--input-bug现象">iOS下的 Fixed + Input BUG现象</h2>
<p>让我们先举个栗子,最直观的说明一下这个 BUG 的现象。 常规的 fixed 布局,可能使用如下布局(以下仅示意代码):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><body class="layout-fixed">
<!-- fixed定位的头部 -->
<header>
</header>
<!-- 可以滚动的区域 -->
<main>
<!-- 内容在这里... -->
</main>
<!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
</code></pre></div></div>
<p>对应的样式如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>header, footer, main {
display: block;
}
header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}
footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}
main {
margin-top: 50px;
margin-bottom: 34px;
height: 2000px
}
</code></pre></div></div>
<p>然后看起来就是下面这个样子。拖动页面时 header 和 footer 已经定位在了对应的位置,目测没问题了。</p>
<p><a href="/uploads/2015/06/fixed.png"><img src="/uploads/2015/06/fixed.png" alt="fixed定位" /></a></p>
<p>但接下来问题就来了!如果底部输入框软键盘被唤起以后,再次滑动页面,就会看到如下图所示:</p>
<p><a href="/uploads/2015/06/fixed_bug_0.png"><img src="/uploads/2015/06/fixed_bug_0.png" alt="fixed定位" /></a>
<a href="/uploads/2015/06/fixed_bug_1.png"><img src="/uploads/2015/06/fixed_bug_1.png" alt="fixed定位" /></a></p>
<p>我们看到 fixed 定位好的元素跟随页面滚动了起来… fixed 属性失效了!</p>
<p>这是为什么呢?简单解释下: > 软键盘唤起后,页面的 fixed 元素将失效(即无法浮动,也可以理解为变成了 absolute 定位),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。</p>
<p>这便是 iOS 上 fixed 元素和输入框的 bug 。其中不仅限于 type=text 的输入框,凡是软键盘(比如时间日期选择、select 选择等等)被唤起,都会遇到同样地问题。</p>
<hr />
<h2 id="解决思路">解决思路:</h2>
<p>既然在 iOS 下由于软键盘唤出后,页面 fixed 元素会失效,导致跟随页面一起滚动,那么假如——页面不会过长出现滚动,那么即便 fixed 元素失效,也无法跟随页面滚动,也就不会出现上面的问题了。</p>
<p>那么按照这个思路,如果使 fixed 元素的父级不出现滚动,而将原 body 滚动的区域域移到 main 内部,而 header 和 footer 的样式不变,代码如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><body class="layout-scroll-fixed">
<!-- fixed定位的头部 -->
<header>
</header>
<!-- 可以滚动的区域 -->
<main>
<div class="content">
<!-- 内容在这里... -->
</div>
</main>
<!-- fixed定位的底部 -->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
</code></pre></div></div>
<p>对应的样式如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>header, footer, main {
display: block;
}
header {
position: fixed;
height: 50px;
left: 0;
right: 0;
top: 0;
}
footer {
position: fixed;
height: 34px;
left: 0;
right: 0;
bottom: 0;
}
main {
/* main绝对定位,进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
}
main .content {
height: 2000px;
}
</code></pre></div></div>
<p>这样再来看一下:</p>
<p><a href="/uploads/2015/06/fixed_pull_over.png"><img src="/uploads/2015/06/fixed_pull_over.png" alt="fixed定位" /></a></p>
<p>在原始输入法下, fixed 元素可以定位在页面的正确位置。滚动页面时,由于滚动的是 main 内部的 div,因此 footer 没有跟随页面滚动。</p>
<p>上面貌似解决了问题,但是如果在手机上实际测试一下,会发现 main 元素内的滚动非常不流畅,滑动的手指松开后,滚动立刻停止,失去了原本的流畅滚动特性。百度一下弹性滚动的问题,发现在 webkit 中,下面的属性可以恢复弹性滚动。</p>
<p><code class="language-plaintext highlighter-rouge">-webkit-overflow-scrolling: touch;</code></p>
<p>在 main 元素上加上该属性,嗯,丝般顺滑的感觉又回来了!</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>main {
/* main绝对定位,进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
/* 增加该属性,可以增加弹性 */
-webkit-overflow-scrolling: touch;
}
</code></pre></div></div>
<p>另外,这里的 header 和 footer 使用的是 fixed 定位,如果考虑到更老一些的 iOS 系统不支持 fixed 元素,完全可以把 fixed 替换成 absolute 。测试后效果是一样的。</p>
<p>至此一个不依赖第三方库的 fixed 布局就完成了。</p>
<hr />
<h2 id="android-下布局">Android 下布局</h2>
<p>谈到了 iOS ,也来简单说一下 Android 下的布局吧。</p>
<p>在 Android2.3+ 中,因为不支持 overflow-scrolling ,因此部分浏览器内滚动会有不流畅的卡顿。但是目前发现在 body 上的滚动还是很流畅的,因此使用第一种在 iOS 出现问题的 fixed 定位的布局就可以了。</p>
<p>如果需要考虑 Android2.3 以下系统,因为不支持 fixed 元素,所以依然要需要考虑使用 isScroll.js 来实现内部滚动。</p>
<p>其实在 fixed 和输入框的问题上,基本思路就是: > 由于 fixed 在软键盘唤起后会失效,导致在页面可以滚动时,会跟随页面一起滚动。因此如果页面无法滚动,那么 fixed 元素即使失效,也不会滚动,也就不会出现 bug 了。</p>
<p>所以可以在这个方面去考虑解决问题。</p>
<hr />
<h2 id="其他的一些细节处理">其他的一些细节处理</h2>
<p>在细节处理上,其实还有很多要注意的,挑几个实际遇到比较大的问题来说一下:</p>
<ol>
<li>有时候输入框 focus 以后,会出现软键盘遮挡输入框的情况,这时候可以尝试 input 元素的 scrollIntoView 进行修复。<br />
02.在 iOS 下使用第三方输入法时,输入法在唤起经常会盖住输入框,只有在输入了一条文字后,输入框才会浮出。目前也不知道有什么好的办法能让唤起输入框时正确显示。这暂时算是 iOS 下的一个坑吧。</li>
<li>有些第三方浏览器底部的工具栏是浮在页面之上的,因此底部 fixed 定位会被工具栏遮挡。解决办法也比较简单粗暴——适配不同的浏览器,调整 fixed 元素距离底部的距离。</li>
<li>最好将 header 和 footer 元素的 touchmove 事件禁止,以防止滚动在上面触发了部分浏览器全屏模式切换,而导致顶部地址栏和底部工具栏遮挡住 header 和 footer 元素。</li>
<li>在页面滚动到上下边缘的时候,如果继续拖拽会将整个 View 一起拖拽走,导致页面的“露底”。</li>
</ol>
<p><a href="/uploads/2015/06/fixed_scroll_0.png"><img src="/uploads/2015/06/fixed_scroll_0.png" alt="fixed定位" /></a></p>
<p>为了防止页面露底,可以在页面拖拽到边缘的时候,通过判断拖拽方向以及是否为边缘来阻止 touchmove 事件,防止页面继续拖拽。</p>
<p>以上面内滚动 layout-scroll-fixed 布局为例,给出一段代码作为参考:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// 防止内容区域滚到底后引起页面整体的滚动
var content = document.querySelector('main');
var startY;
content.addEventListener('touchstart', function (e) {
startY = e.touches[0].clientY;
});
content.addEventListener('touchmove', function (e) {
// 高位表示向上滚动
// 底位表示向下滚动
// 1容许 0禁止
var status = '11';
var ele = this;
var currentY = e.touches[0].clientY;
if (ele.scrollTop === 0) {
// 如果内容小于容器则同时禁止上下滚动
status = ele.offsetHeight >= ele.scrollHeight ? '00' : '01';
} else if (ele.scrollTop + ele.offsetHeight >= ele.scrollHeight) {
// 已经滚到底部了只能向上滚动
status = '10';
}
if (status != '11') {
// 判断当前的滚动方向
var direction = currentY - startY > 0 ? '10' : '01';
// 操作方向和当前允许状态求与运算,运算结果为0,就说明不允许该方向滚动,则禁止默认事件,阻止滚动
if (!(parseInt(status, 2) & parseInt(direction, 2))) {
stopEvent(e);
}
}
});
</code></pre></div></div>
<p>以上总结来自<a href="http://efe.baidu.com/blog/mobile-fixed-layout/?utm_source=tuicool">Baidu EFE</a>。</p>
iPhone微信自动播放音乐
2015-06-02T00:00:00+00:00
http://wangdaodao.github.io/2015-06-02/WeChat-music-autoplay-iphone
<p>前段时间做了一个微信推广页面,运营那边需要让用户在微信中打开页面的时候音乐就要自动播放(用户体验都去哪了),然后乔帮主固执的认为自动播放对用户是不友好的,于是autoplay属性就失效了(摊手)!</p>
<p>这问题应该不止我一个人遇见,所以就在网上搜,果然什么文章都有,不过大都不能用!例如腾讯ISUX的<a href="http://isux.tencent.com/play-with-html5-animate.html">《玩转HTML5移动页面(动效篇)》</a>使用的方法:</p>
<blockquote>
<p>通过<code class="language-plaintext highlighter-rouge">new</code>一张图片,监听一张图片的<code class="language-plaintext highlighter-rouge">onload</code>事件,结束后回调执行音频播放<code class="language-plaintext highlighter-rouge">audio.play()</code>即可。</p>
</blockquote>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var audio = document.getElementById('audio');
var Img = new Image();
Img.src = "http://wangdaodao.github.io/demo/wx/img/p1_img1.png";
Img.onload = function (){
audio.play();
}
</code></pre></div></div>
<p>好吧,可能是我写的代码不对,没能起作用!</p>
<p>还有就是通过模拟用户触发屏幕来播放音乐的,但是用户把音乐关了,再一滚屏,音乐又开始播放了!!!</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});
</code></pre></div></div>
<p>最后的代码:只能保证在微信上使用</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$(function() {
document.addEventListener("WeixinJSBridgeReady", function () {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
document.getElementById('audio').play();
});
}, false);
})
<audio id="audio" preload="auto" autoplay="true" >
<source src="bg.mp3" type="audio/mpeg">
<source src="bg.ogg" type="audio/ogg">
</audio>
</code></pre></div></div>
<p>最后在找代码的时候,又发现了几个和微信相关的代码</p>
<p>隐藏微信网页右上角的按钮</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
// 通过下面这个API隐藏右上角按钮
WeixinJSBridge.call('hideOptionMenu');
});
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
// 通过下面这个API显示右上角按钮
WeixinJSBridge.call('showOptionMenu');
});
</code></pre></div></div>
<p>隐藏微信网页底部的导航栏</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
// 通过下面这个API隐藏底部导航栏
WeixinJSBridge.call('hideToolbar');
});
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
// 通过下面这个API显示底部导航栏
WeixinJSBridge.call('showToolbar');
});
</code></pre></div></div>
<p>在微信网页中获取用户的网络状态</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>WeixinJSBridge.invoke('getNetworkType',{},function(e){
// 在这里拿到e.err_msg,这里面就包含了所有的网络类型
// network_type:wifi wifi网络
// network_type:edge 非wifi,包含3G/2G
// network_type:fail 网络断开连接
// network_type:wwan 2g或者3g
alert(e.err_msg);
});
</code></pre></div></div>
如何写好CSS?
2015-04-22T00:00:00+00:00
http://wangdaodao.github.io/2015-04-22/css-principle
<h2 id="真正的问题是什么">真正的问题是什么?</h2>
<p>CSS即层叠样式表,所以一层一层覆盖其实是其本质特征。真正的问题在于维护,许多人认为CSS仅是样式,不是代码,无需维护,所以任意书写,只要将自己需要的样式的优先级设为最高即可,才导致了深层级CSS的出现,因为每次添加一个样式就必须比以前的优先级高才能在页面看到。深层级不仅造成维护性降低,可读性也是一个问题,人不是机器,无法很优雅的按优先级阅读,所以很难确认一个样式用于哪里,其实还存在许多的冗余样式,在任何地方都被覆盖的样式。这样的代码在扩展性上,一开始反而是有优势的,因为添加一个新class,无需担心影响其他地方,但慢慢随着项目规模的增大,页面增多,需要复制样式的地方也越来越多,它们之间又存在微小的差异,设计的更改,需求的变化,这一切都会将这种快餐式的CSS推进柏油坑。因为难以维护,所以无法响应需求,所以无法复用,只能复制,恶性循环。</p>
<p>正如上面所说的,问题在于可读性、维护性、扩展性、复用性这几个方面。所以只要提高它们就能解决问题, 虽然这么说,也不是如此简单的。先来谈谈在CSS中,这些概念都有着怎样的意义。</p>
<h3 id="可读性">可读性</h3>
<p>有人认为CSS不是程序,不需要可读性,有人认为CSS只要写出来就有可读性,因为很简单。抛开各种预处理器不说,原生CSS结构确实简单,没有需要编程的部分,但仍然可能导致混乱。原因有二,一是CSS可以层叠,其中涉及到了优先级和作用范围,如果写的不好,人很难读出其中的意义,二是CSS属性众多,加上CSS3引入了很多用法独特的属性,一个选择器可能包含几十个属性。比如下面这段我随便写的CSS代码:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>span {
-webkit-box-shadow: 6px 4px 4px red;
-moz-box-shadow: 6px 4px 4px red;
box-shadow: 6px 4px 4px red;
}
div span {
border-width: 4px;
border-style: dotted;
border-color: blue;
}
#box {
border-left: 2px solid red;
border-bottom: 2px solid red;
}
</code></pre></div></div>
<p>乍一看也没什么,都是border,大致能看出来这段CSS只是为了添加一个红色的阴影让box看起来比较立体。但中间的部分似乎是捣乱的,你可能会说这太傻了,看不到吗。是的,当这3部分散落在上万行的CSS中时,肯定看不到。于是有人很自然的想起了我们可爱的浏览器,没错,在浏览器中可以快速找到作用于目标的CSS样式,但这也是万恶之源。首先我假设你不知道中间那部分东西是为了什么而写的,因为你是靠浏览器找到它的。然后剩下两种可能,不管三七二十一改了再说和看看它为什么存在。前者悲剧的可能性是100%,后者悲剧的可能性是90%,因为你已经掉坑里了,很快我们会发现要修改它还牵扯到了另外的地方,接着在浏览器中探索到另一个莫名其妙的样式,当你弄懂全部的时候,你应该已经把上万行的代码弄了个一清二楚了,也许最幸运的是,浪费了几个小时的时间发现只需要修改一行就能达到目的。</p>
<p>当然,我们可以天真的认为,只要把他们写在一起就可以了,这样找起来很简单。而我将继续顺着这样的思路来尝试曝露问题。</p>
<h3 id="维护性">维护性</h3>
<p>所谓物以类聚是很有道理的,人们习惯将事物归类,但问题是分类标准,样式并不关心业务,无论是什么文字内容,还是功能有何不同,它在乎的只是样式,比如文字的尺寸,间距和宽高,颜色等等。如果简单的将一个组件的样式放在一起,势必带来的就是小段代码的重复书写。不觉得有多严重?我来举个栗子。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>aside {
box-shadow: 6px 4px 4px #AA3343;
}
nav {
box-shadow: 6px 4px 4px #AB3633;
}
.item {
box-shadow: 6px 4px 4px #AA3732;
}
.item.otherStatus {
box-shadow: 6px 4px 4px #AA3132;
}
</code></pre></div></div>
<p>继续说上面的例子,box需要阴影,但如果这个项目的UI统一风格,包括sidebar,navigator以及item都需要这样的阴影呢?再如果,明天客户或者UX一拍脑袋,这个阴影应该是灰色的不该是红色的呢?不要继续天真的认为全局替换是救命稻草。首先,没有几个网站会用red,blur做色调的,你用的应该是#AA3333,这样的代码,然后你发现sidebar用了#A43433,而navigator是#AB3633,等等,item有两个状态,而两个状态对应的颜色是不一样的。这怎么可能?但当你打开浏览器的时候你会发现本来就相差无几的颜色,在阴影中变得一模一样了,谁看的出来呢,当初使用的时候可能也不过是随意的在mockup中取的一个颜色。</p>
<p>大量的重复带来的不仅仅是代码的冗余,我们必须靠人力去同步它们,而人很难保证它们的修改是完全一致的,尤其是当它们中引入了一些不一致的独特的东西时。不要小看CSS,其后果就是进度和人力的压力,后面就是PM有没有读过《人月神话》的事了。</p>
<p>肯定有人在想,谁让你当初要写成这样呢。我们在读代码的时候最喜欢问,当初为什么要这么写?但慢慢的你会读出它的历史,有时候它是身不由己的。这就涉及到了下一个要讨论的内容。</p>
<h3 id="扩展性">扩展性</h3>
<p>扩展性是一个具有欺骗性的东西,所谓的扩展性其实就是在现有基础上再次开发新东西的性能,但我认为它还必须有前提条件,那就是保持可读性与维护性。</p>
<p>简单的追求可维护性是自取灭亡,原因很简单,将新旧代码完全分离的时候扩展性最高,因为不必担心对以前的部分有影响,新的样式可以随意发挥。是不是很神奇,这样想的我们写下的代码,肯定就是前面我们追问的代码。所以自己回答自己吧,当初没考虑可读性和维护性,只想着快点增加新的样式,就这么写了。</p>
<p>那什么才是一个好的扩展性呢,简单来说,就是多功能产品。比如一个box,也许它的样式就是。</p>
<h3 id="复用性">复用性</h3>
<p>似乎我一直在说的就是重复,那我们就来说说复用性,如何才能复用CSS代码是一个很大的问题,比如粒度,是一两个属性进行复用还是一大组选择器进行复用呢,再比如对象,是为了class复用属性,还是为了html复用class呢。这些选择不算太重要,但是带来的影响却很重大,可以说是整个CSS结构的改变。下面继续用box的阴影来讨论复用。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.shadow {
-webkit-box-shadow: 6px 4px 4px #A93334;
-moz-box-shadow: 6px 4px 4px #A93334;
box-shadow: 6px 4px 4px #A93334;
border-left: 2px solid #A93334\9;
border-bottom: 2px solid #A93334\9;
}
</code></pre></div></div>
<p>这样看起来我有了一个shadow的class可以给任意的目标加上这个阴影了,但这导致了一个复用的问题,和上面那段捣乱的CSS样式一样,如果item已有另外2个border了,那这个class是无法去除的。所以复用时不仅要考虑需要什么,还要考虑不需要什么。另外一些必须的属性比如display还有overflow等也是要考虑的,因为user agent的原因,很多属性是隐藏在element中的。</p>
<hr />
<h2 id="如何解决问题">如何解决问题?</h2>
<p>主流的CSS原则有OOCSS,DRY,SMACSS以及BEM,他们皆是为解决CSS的各种问题而生。</p>
<h3 id="oocss">OOCSS</h3>
<p>OOCSS即面向对象的CSS,这里对象指的是页面中的元素对象,与传统编程中的面向对象不太相同,比如不存在方法这种东西,硬要说的话,附加的一些class可以看作是继承或者接口之类的东西来实现对象的差异化。比如电商网站中的商品就是一个典型的对象,它们既有许多相同的部分,又有许多差异,宽高、按钮、图片、标题等基本布局都是相同的,而边距、线框、背景颜色、字号等都是差异化的。由此按照OOCSS的指导原则,我们应该写一个product class,然后为其添加一些border、theme之类的class来差异化它:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.product {
display: block;
overflow: hidden;
float: left;
width: 200px;
height: auto;
}
.product-head{...}
.product-body{...}
.product-foot{...}
.product-theme-black {
background: black;
color: white;
}
.product-border {
border: 1px solid #333;
}
</code></pre></div></div>
<p>这样在以上两种附加class的作用下,我们在html中就可以获得4种不同的product样式,随着附加class增加,product的样式也会呈指数增加,千变万化。这仅仅是一个简单的例子,意在点出OOCSS的理念,但并没有突出它的意义所在。别着急,先来看看OOCSS的两大原则。</p>
<h4 id="1-分离容器与内容减少对-html-结构的依赖">1. 分离容器与内容,减少对 HTML 结构的依赖</h4>
<p>所谓的容器即包裹对象的元素,比如一个div,我们经常会命名为wrap、container、body等。那么如何才算是分离容器与内容呢?很简单,一句话,内容在哪都可用。也就是说不应该出现这样的情况:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.container .product {
...
}
</code></pre></div></div>
<p>这样干的结果就是复用性大大降低,因为只能在这个容器内使用它了。但这并不代表我们应该将所需的样式全部一股脑的扔进单独的class中,对于差异化应该单独放在一个class中,这才是OOCSS的精髓。</p>
<p>举个例子,当我们既不想牺牲太多性能,又想来个瀑布流显摆显摆的时候,大部分前端都会使用column,类似泳道的设计。你想说哦不,这是伪pinterest,但是谁在乎呢,用户是不会有闲工夫拖拽浏览器的宽度来鉴别它的,在IE下商品多的时候至少不会太卡。哈,别较真,首先分为几个column,然后按照高度往里填放商品,先来看看下面的代码吧,我有省略一些样式避免误导:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.column {
height: auto;
width: 200px;
}
.product {
width: 180px;
margin-right: 20px;
margin-bottom: 10px;
}
</code></pre></div></div>
<p>看起来不错,每列200px宽,商品放入其中,水平间距要大,垂直间距要小些才像column。但是等等,我们总还是需要整齐摆放的商品列表的对不对。也许margin并不是product的必要属性,至少它应该是可变的。我们抽出它来:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.product {
width: 180px;
}
.vertical-product {
height: 400px;
margin-right: 10px;
margin-bottom: 10px;
}
.horizontal-product {
height: auto;
margin-right: 20px;
margin-bottom: 10px;
}
</code></pre></div></div>
<p>这样便将column或list之类的容器与product分开来毫无关系了,即使以后出现了其他组织形式,只要product的基本结构没有变都可以直接复用,无非是添加一些附属样式到新的xxx-product的class中。另外这样做还有一个好处,设计逻辑放在了HTML中,CSS更加强大。</p>
<p>什么是样式逻辑?商品在瀑布流中不定高,在列表中定高,这就是一种样式的逻辑,如果用父子选择器的形式写在CSS中,那它就失去了自由。而放在HTML通过选择添加何种附属class来展现不同形式的product,则非常的自由与灵活。另外值得一说的是,margin-bottom是一样的,但我们应该各自放在各自的class里面,原因很简单,它们仅仅是一不小心恰好一样,在设计逻辑中它们并不是一样的bottom,这里并不是重复,而是看起来一样。如果以后需要改变其中的一个bottom,共用则显得非常别扭。</p>
<h4 id="2-分离皮肤与结构增加-css-class-的重复使用">2. 分离皮肤与结构,增加 CSS class 的重复使用</h4>
<p>第二点很容易理解,皮肤(theme)就是视觉效果,即使被剔除网页也没有什么影响的就是皮肤;而结构指地并不是像HTML这样抽象的结构,因为CSS毕竟还是样式,所以结构只是相对的页面结构。</p>
<p>先来看看我们的product吧,添加一些背景色和边框:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.product {
width: 200px;
background: #F6F2F2;
border: 1px solid #C4A0A0;
}
</code></pre></div></div>
<p>看起来还不错,不过设计师都是自大狂,精心的调色,完美的搭配,绝对不会让你仅仅使用这么一次的,页面的其他模块、sidebar甚至是header都可能采用相同的背景颜色与边框,它们甚至可能互相嵌套。好吧,这其实在设计上是为了视觉统一,毕竟没有几个设计大师能hold住3,4种以上的颜色。所以我们能做的并不是在每个class中添加这样的样式,而是把它提出来成为独立的class,原因就像我开篇说的那样,颜色为混沌之源。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.main-bg {
background: #F6F2F2;
}
.main-border {
border: 1px solid #C4A0A0;
}
</code></pre></div></div>
<p>这样就可以在页面中随时使用主要的设计元素了,而且需要修改时也非常的简单,不用担心有什么地方漏掉。另外我将背景与边框分为了两个class,原因还是设计逻辑应该放在HTML,背景与边框并不是一定同时出现的,两者的关系应该由HTML决定,即使设计上逻辑决定了两者的绑定,在实现时也有可能因为HTML结构而放在两个不同的元素上。</p>
<p>OOCSS强调class,将每组样式写成一个class方便HTML中使用,众多class组合起来能千变万化组成一个对象。所以如果是想一劳永逸的写一套UI作为开发时使用的样式,我建议使用OOCSS来进行开发。但它也有缺点,过多的将设计逻辑放在HTML中,极大的自由化了页面开发时的选择,如果写HTML的开发者不能很好的理解整套CSS的结构,较易在HTML中造成class混乱。</p>
<h3 id="dry-css">DRY CSS</h3>
<p>DRY就是Donot repeat youself 不要重复。但其实这个名字有点无趣,哪个理论不是消除重复呢,但如何消除才是意义所在。总的来说我认为DRYCSS与OOCSS是两个极端,所以我将会以对比的方式来讲讲DRYCSS的内容。使用DRYCSS很简单,三步。</p>
<h4 id="1-分组可复用属性">1. 分组可复用属性</h4>
<p>DRYCSS跟OOCSS有点像,第一步都是分组样式,消除重复,但就像我说的,关键在于如何。OOCSS将样式集合看作对象,所以分组的逻辑是,某个元素本身应该是什么样的,而DRYCSS则关注重复,无论什么逻辑,只要是一样的就应该只有一个。其中粒度是值得思考的问题,如果太细,那只会成为一行样式一组这样无意义的情况,如果太粗,又会变成毫无复用性的庞然大物。我认为可以将一些有关联的缺了A时B就没作用的样式分为一组,还可以将某些惯用搭配分为一组。下面举个例子:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{
float: left;
position: absolute;
display: inline-block;
overflow: hidden;
}
</code></pre></div></div>
<p>这是一组样式,可用来触发<a href="http://kayosite.com/block-formatting-contexts-in-detail.html">Block formatting Contexts(块级格式化上下文)</a>,如此就完成了一组样式。接着再写2组关于尺寸的样式吧。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{
width: 960px;
height: auto;
}
{
width: 720px;
height: 600px;
}
{
width: 220px;
height: 600px;
}
</code></pre></div></div>
<p>这是三组样式用来布局,将页面分为左右两部分。</p>
<h4 id="2-按逻辑为分组命名">2. 按逻辑为分组命名</h4>
<p>接着我们来为其命名,其实就是添加一个ID选择器,但是我们并不真的使用它,而是用来标示该组样式。下面就来命名上面所分组的样式。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#BLOCK_FORMATTING_CONTEXTS
{
float: left;
position: absolute;
display: inline-block;
overflow: hidden;
}
#LAYOUT_FULL
{
width: 960px;
height: auto;
}
#LAYOUT_CONTENT
{
width: 720px;
height: 600px;
}
#LAYOUT_SIDEBAR
{
width: 220px;
height: 600px;
}
</code></pre></div></div>
<p>这一步类似OOCSS的class,它决定了每组样式所代表的逻辑或用途,然而DRYCSS多了最关键的下一步,也是与OOCSS本质区别。</p>
<h4 id="3-为各个分组添加选择器">3. 为各个分组添加选择器</h4>
<p>DRYCSS在使用时和OOCSS有着巨大的差异,在CSS文件中写入HTML中的class选择器来使用这些分组后的样式,而不是直接在HTML中使用CSS文件中写好的class。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.header,
.container,
.content-right,
.content-left,
#BLOCK_FORMATTING_CONTEXTS
{
float: left;
position: absolute;
display: inline-block;
overflow: hidden;
}
.header,
.navigator,
.container,
#LAYOUT_FULL
{
width: 960px;
height: auto;
}
.content-right,
.section,
#LAYOUT_CONTENT
{
width: 720px;
height: 600px;
}
.content-right,
.sidebar,
.profile,
#LAYOUT_SIDEBAR
{
width: 220px;
height: 600px;
}
</code></pre></div></div>
<p>可以看到,使用DRYCSS时,在HTML中所写的class将会非常表意,元素本身是什么用来做什么,就使用其意义的class命名,而且基本上是一个元素对应一个class,HTML将变的简单明了。另外DRYCSS也是相对于OOCSS的一种逆向思维,这才是最有趣的地方。在开发中,不应该像OOCSS那样思考如何应对未来假象的HTML,而是仅仅思考CSS本身。</p>
<p>总的来说,OOCSS适合开发CSS框架或整套UI模版,是自外向内的UI开发方式;而DRYCSS则适合拯救混沌的HTML,或者加强HTML的结构性和表意性,是自内向外的UI开发方式。这里的内指地是HTML结构,外指地是CSS样式。</p>
<h3 id="smacss">SMACSS</h3>
<p>这是一个相对繁杂的CSS理论,分为Base、Layout、Module、Status和Theme共五个部分。不过它的核心思想仍然和OOCSS类似,鼓励使用class。</p>
<h4 id="1-base-基本属性">1. Base 基本属性</h4>
<p>基础属性很容易理解,就是最基本的东西,很多样式简单的网站都采用一个简单的二级CSS文件模式,一个base.css通用于所有页面,而每个页面有一个特定的CSS文件,我想这就是Base的雏形。要说具体是什么,比如reset文件,再比如放置clearfix或BFC的一些类似工具集的文件。</p>
<p>其实最终会发现,在Base中的CSS属性将会是几乎全站都要用到的属性,但我不想这么描述Base,因为这会误导人。大多数情况下,在一个网站建立之初也只会有几个简单的页面,于是这几个页面都要用到的属性就变成了通用属性,但并不是这么简单的。随着网站规模的扩大,需求的增加,设计师们灵感的迸发,所谓的通用和统一也在发生着潜移默化。所以在编写Base时,应该遵循的基准是,哪些样式是你做下一个网站时也会想用的,哪些样式即使设计改变了也只需要改变一些数值和颜色,哪些样式是一些基本原则;而不应该将目前大部分页面都在使用的样式放在Base中,还是那个道理,它们也许仅仅是恰好相同,而非逻辑一致。</p>
<h4 id="2-layout-布局">2. Layout 布局</h4>
<p>布局是一个网站的基本,无论是左右还是居中,甚至其他什么布局,要实现页面的基本浏览功能,布局必不可少。SMACSS将这一功能单独提出也是非常正确的,另外还约定了一个前缀l-/layout-来标识布局的class。举个最普遍的例子。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.l-header {}
.l-brand {}
.l-navigator {}
.l-container {}
.l-sidebar {}
.l-content {}
.l-footer {}
</code></pre></div></div>
<p>这就是一个简单的左右布局,导航和Logo中规中矩在最顶部。</p>
<h4 id="3-module-模块">3. Module 模块</h4>
<p>模块是SMACSS最基本的思想,同时也是大部分CSS理论的基本,将样式模块化就能达到复用和可维护的目的,但是SMACSS提出了更具体的模块化方案。首先表象上来看,SMACSS中的模块应该拥有一个名字,并且为其class名,而模块其他class皆以为前缀。比如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.product {}
.product-title {}
.product-image {}
.product-border {}
.product-shadow {}
</code></pre></div></div>
<p>可以看到例子中product是一个模块,title和image是包含在模块内的组件,可用可不用;border和shadow是类似OOCSS的附加class用来改变模块本身。总之,在模块内可以使用其名称做前缀任意组织模块结构,但目前是让其变得更易用,提高可扩展性和灵活度,如果仅仅为了某些功能而特意写一些class就有点有形无实的感觉了。</p>
<h4 id="4-state-状态">4. State 状态</h4>
<p>状态经常和JavaScript放在一起使用,它是一种用来标识页面状态的class,无论是为用户标识还是用程序标识。还是一个常见的例子,马上就明白。active经常用来表示当前的tab,或者当前选中的目标,这就是一种状态,无论是样式还是程序都需要知道它。</p>
<p>SMACSS仍然有一个对应的前缀用于标示状态class,is-是一个合适的词,指明某一元素是什么状态。</p>
<h4 id="5-theme-主题">5. Theme 主题</h4>
<p>主题就是皮肤,和OOCSS的分离皮肤与结构不谋而合。更重要的是对于可更换皮肤的站点来说,这样的分离是非常必要的,只需要更换加载的theme文件即可将皮肤更换。</p>
<p>总的来说,SMACSS是一个较为注意细节与实现的CSS理论,非常适合初涉CSS的人,它可以让你的CSS跑在轨道上而不至于脱轨。其思想也与OOCSS有很多相通之处,如果没有适合的方案,我建议新手可以适当的融入OOCSS的思想而使用SMACSS的结构,这样写出来的网站样式至少不会马上陷入泥沼。</p>
<hr />
<h2 id="哪一个好用呢">哪一个好用呢?</h2>
<p>谈了许多的CSS原理,已经有点眼花缭乱,到底哪个好呢?这个问题又归结到了最佳实践上,虽然我并不认为有这样的实践,但我认为一个项目一定会有适合的实践,比如前面说的,如果你想做一个CSS框架然后再写HTML,那就用OOCSS;如果你想先写HTML或者已经有一个旧的页面,那DRYCSS应该很适合你;如果新手不知如何下手,那SMACSS可以指导你入门。</p>
<p><a href="http://www.tychio.net/tech/2014/03/16/css-principle.html">原文地址:http://www.tychio.net/tech/2014/03/16/css-principle.html</a></p>
前端构建工具gulp入门教程
2015-04-21T00:00:00+00:00
http://wangdaodao.github.io/2015-04-21/hello-gulp
<h2 id="第1步安装node">第1步:安装Node</h2>
<p>首先,最基本也最重要的是,我们需要搭建node环境。访问 <a href="http://nodejs.org">nodejs.org</a>,然后点击大大的绿色的 <code class="language-plaintext highlighter-rouge">install</code> 按钮,下载完成后直接运行程序,就一切准备就绪。<a href="https://www.npmjs.com/">npm</a>会随着安装包一起安装,稍后会用到它。</p>
<p>为了确保Node已经正确安装,我们执行几个简单的命令。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>node -v
npm -v
</code></pre></div></div>
<p>如果这两行命令没有得到返回,可能node就没有安装正确,进行重装。</p>
<h2 id="第2步安装gulp">第2步:安装gulp</h2>
<p>首先我们要全局安装一遍:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install -g gulp
</code></pre></div></div>
<p>运行时注意查看命令行有没有错误信息,安装完成后,你可以使用下面的命令查看gulp的版本号以确保gulp已经被正确安装。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gulp -v
</code></pre></div></div>
<p>接着我们要进去到项目的根目录再安装一遍</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install gulp --save-dev
</code></pre></div></div>
<h2 id="第3步新建gulpfilejs文件">第3步:新建gulpfile.js文件</h2>
<p>我们将要使用Gulp插件来完成我们以下任务:</p>
<blockquote>
<ol>
<li>sass的编译(gulp-sass)</li>
<li>自动添加css前缀(gulp-autoprefixer)</li>
<li>压缩css(gulp-minify-css)</li>
<li>js代码校验(gulp-jshint)</li>
<li>合并js文件(gulp-concat)</li>
<li>压缩js代码(gulp-uglify)</li>
<li>压缩图片(gulp-imagemin)</li>
<li>自动刷新页面(gulp-livereload)</li>
<li>图片缓存,只有图片替换了才压缩(gulp-cache)</li>
<li>更改提醒(gulp-notify)</li>
</ol>
</blockquote>
<p>安装这些插件需要运行如下命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev
</code></pre></div></div>
<p>更多插件可以看这里<a href="http://gulpjs.com/plugins/">gulpjs.com/plugins/</a></p>
<p>接着我们要创建一个gulpfile.js在根目录下,gulp只有四个<a href="https://github.com/gulpjs/gulp/blob/master/docs/API.md">API</a>: <code class="language-plaintext highlighter-rouge">task</code>,<code class="language-plaintext highlighter-rouge">watch</code>,<code class="language-plaintext highlighter-rouge">src</code>,和 <code class="language-plaintext highlighter-rouge">dest</code></p>
<blockquote>
<p><code class="language-plaintext highlighter-rouge">task</code>这个API用来创建任务,在命令行下可以输入 <code class="language-plaintext highlighter-rouge">gulp test</code> 来执行test的任务。<br />
<code class="language-plaintext highlighter-rouge">watch</code>这个API用来监听任务。<br />
<code class="language-plaintext highlighter-rouge">src</code>这个API设置需要处理的文件的路径,可以是多个文件以数组的形式<code class="language-plaintext highlighter-rouge">[main.scss, vender.scss]</code>,也可以是正则表达式<code class="language-plaintext highlighter-rouge">/**/*.scss</code>。<br />
<code class="language-plaintext highlighter-rouge">dest</code>这个API设置生成文件的路径,一个任务可以有多个生成路径,一个可以输出未压缩的版本,另一个可以输出压缩后的版本。</p>
</blockquote>
<h3 id="31-加载插件">3.1 加载插件:</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Load plugins
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
</code></pre></div></div>
<h3 id="32-建立任务">3.2 建立任务:</h3>
<h4 id="321-编译sass自动添加css前缀和压缩">3.2.1 编译sass、自动添加css前缀和压缩</h4>
<p>首先我们编译sass,添加前缀,保存到我们指定的目录下面,还没结束,我们还要压缩,给文件添加 <code class="language-plaintext highlighter-rouge">.min</code> 后缀再输出压缩文件到指定目录,最后提醒任务完成了:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Styles任务
gulp.task('styles', function() {
//编译sass
return gulp.src('stylesheets/main.scss')
.pipe(sass())
//添加前缀
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
//保存未压缩文件到我们指定的目录下面
.pipe(gulp.dest('stylesheets'))
//给文件添加.min后缀
.pipe(rename({ suffix: '.min' }))
//压缩样式文件
.pipe(minifycss())
//输出压缩文件到指定目录
.pipe(gulp.dest('assets'))
//提醒任务完成
.pipe(notify({ message: 'Styles task complete' }));
});
</code></pre></div></div>
<h4 id="322-js代码校验合并和压缩">3.2.2 js代码校验、合并和压缩</h4>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Scripts任务
gulp.task('scripts', function() {
//js代码校验
return gulp.src('javascripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
//js代码合并
.pipe(concat('all.js'))
//给文件添加.min后缀
.pipe(rename({ suffix: '.min' }))
//压缩脚本文件
.pipe(uglify())
//输出压缩文件到指定目录
.pipe(gulp.dest('assets'))
//提醒任务完成
.pipe(notify({ message: 'Scripts task complete' }));
});
</code></pre></div></div>
<h4 id="323-图片压缩">3.2.3 图片压缩</h4>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Images
gulp.task('images', function() {
return gulp.src('images/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('images'))
.pipe(notify({ message: 'Images task complete' }));
});
</code></pre></div></div>
<h4 id="324-事件监听">3.2.4 事件监听</h4>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Watch
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('stylesheets/*.scss', ['styles']);
// Watch .js files
gulp.watch('javascripts/*.js', ['scripts']);
// Watch image files
gulp.watch('images/*', ['images']);
// Create LiveReload server
livereload.listen();
// Watch any files in assets/, reload on change
gulp.watch(['assets/*']).on('change', livereload.changed);
});
</code></pre></div></div>
<p>完整代码:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>/*!
* gulp
* $ npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev
*/
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
// Styles
gulp.task('styles', function() {
return gulp.src('stylesheets/main.scss')
.pipe(sass())
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('stylesheets'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('assets'))
.pipe(notify({ message: 'Styles task complete' }));
});
// Scripts
gulp.task('scripts', function() {
return gulp.src('javascripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('all.js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('assets'))
.pipe(notify({ message: 'Scripts task complete' }));
});
// Images
gulp.task('images', function() {
return gulp.src('images/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('images'))
.pipe(notify({ message: 'Images task complete' }));
});
// Default task
gulp.task('default', function() {
gulp.start('styles', 'scripts', 'images');
});
// Watch
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('stylesheets/*.scss', ['styles']);
// Watch .js files
gulp.watch('javascripts/*.js', ['scripts']);
// Watch image files
gulp.watch('images/*', ['images']);
// Create LiveReload server
livereload.listen();
// Watch any files in assets/, reload on change
gulp.watch(['assets/*']).on('change', livereload.changed);
});
</code></pre></div></div>
<h2 id="第4步运行">第4步:运行</h2>
<p>可以运行单独的任务,例如</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gulp default
gulp watch
</code></pre></div></div>
<p>也可以运行整个任务</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gulp
</code></pre></div></div>
<h2 id="总结">总结</h2>
<blockquote>
<ol>
<li>安装Node</li>
<li>安装gulp</li>
<li>新建gulpfile.js文件</li>
<li>运行</li>
</ol>
</blockquote>
<p>最后是我自己设置的项目文件路径</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>|--/assets/--------压缩后样式和脚本存放的目录
|--/images/--------图片存放目录
|--/javascripts/---脚本存放目录
|--/stylesheets/---样式存放目录
|--/plugin/--------插件存放目录
|--gulpfile.js
</code></pre></div></div>
<p>参考链接:<a href="http://markgoodyear.com/2014/01/getting-started-with-gulp/">http://markgoodyear.com/2014/01/getting-started-with-gulp/</a></p>
<h2 id="gulpjs-中文文档彩色">Gulpjs 中文文档(彩色)</h2>
<p><a href="/uploads/2015/04/Gulpjs01.jpg"><img src="/uploads/2015/04/Gulpjs01.jpg" alt="01" /></a>
<a href="/uploads/2015/04/Gulpjs02.jpg"><img src="/uploads/2015/04/Gulpjs02.jpg" alt="02" /></a></p>
块级格式化上下文(BFC)
2015-04-05T00:00:00+00:00
http://wangdaodao.github.io/2015-04-05/BFC
<h2 id="元素的布局">元素的布局?</h2>
<p>在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) 、浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对这三种布局简略说明一下。</p>
<h3 id="1-普通流normal-flow">1. 普通流(Normal Flow)</h3>
<p>在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行, 除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。</p>
<h3 id="2-浮动-floats">2. 浮动 (Floats)</h3>
<p>在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。</p>
<h3 id="3-绝对定位-absolute-positioning">3. 绝对定位 (Absolute Positioning)</h3>
<p>在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响(如果看了上文的童鞋,会发现这点与浮动元素会影响兄弟元素是不同的),而元素具体的位置由绝对定位的坐标决定。</p>
<hr />
<h2 id="bfc-是什么">BFC 是什么?</h2>
<blockquote>
<p>BFC (Block Formatting Contexts) 即块级格式化上下文,从样式上看,它与普通的容器没有什么区别,但是从功能上,BFC 可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器没有的一些特性,例如可以包含浮动元素,上面的第二类方法(如 <code class="language-plaintext highlighter-rouge">overflow</code> 方法)就是触发了父元素的 BFC ,使到它可以包含浮动元素,从而防止出现高度塌陷的问题。</p>
</blockquote>
<blockquote>
<p>简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。</p>
</blockquote>
<blockquote>
<p>BFC 正是属于普通流的,因此它对兄弟元素也不会造成什么影响。</p>
</blockquote>
<hr />
<h2 id="如何触发-bfc-">如何触发 BFC ?</h2>
<ul>
<li>浮动元素:<code class="language-plaintext highlighter-rouge">float</code> 除 <code class="language-plaintext highlighter-rouge">none</code> 以外的值</li>
<li>绝对定位元素:<code class="language-plaintext highlighter-rouge">position:absolute/fixed</code></li>
<li><code class="language-plaintext highlighter-rouge">display:inline-blocks/table-cells/table-captions</code></li>
<li><code class="language-plaintext highlighter-rouge">overflow</code> 除了 <code class="language-plaintext highlighter-rouge">visible</code> 以外的值(<code class="language-plaintext highlighter-rouge">hidden/auto/scroll</code>)</li>
<li>CSS3中 <code class="language-plaintext highlighter-rouge">flex boxes</code></li>
</ul>
<hr />
<h2 id="bfc-的特性">BFC 的特性</h2>
<ol>
<li>BFC 阻止父子元素的 <code class="language-plaintext highlighter-rouge">margin</code> 折叠</li>
<li>BFC 可以包含浮动的元素</li>
<li>BFC 可以阻止元素覆盖浮动元素</li>
</ol>
<hr />
<h2 id="不得不提ie-专有的-layout-及-haslayout-属性">不得不提IE 专有的 Layout 及 hasLayout 属性</h2>
<p>Layout 是 IE 的专有概念,它决定了元素如何对其内容进行定位和尺寸计算,与其他元素的关系和相互作用,以及对应用还有使用者的影响。</p>
<h3 id="概念说明">概念说明:</h3>
<ol>
<li>Layout 可以被某些 CSS property(特性)不可逆的触发,而某些 HTML 元素本身就具有 layout 。</li>
<li>Layout 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ,如 <code class="language-plaintext highlighter-rouge">object.currentStyle.hasLayout</code> 。</li>
<li>Layout 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中,一个元素要么自己对自身的内容进行组织和计算大小, 要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾,渲染引擎采用了 hasLayout 属性,属性值可以为 true 或 false。 当一个元素的 hasLayout 属性值为 true 时,我们说这个元素有一个布局(layout),或拥有布局。</li>
</ol>
<h3 id="默认拥有布局的元素">默认拥有布局的元素:</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><html>, <body>
<table>, <tr>, <th>, <td>
<img>,<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>,<marquee>
</code></pre></div></div>
<h3 id="可触发-haslayout-的-css-特性">可触发 hasLayout 的 CSS 特性:</h3>
<p><code class="language-plaintext highlighter-rouge">display:inline-block</code><br />
<code class="language-plaintext highlighter-rouge">height</code>: (除 <code class="language-plaintext highlighter-rouge">auto</code> 外任何值)<br />
<code class="language-plaintext highlighter-rouge">width</code>: (除 <code class="language-plaintext highlighter-rouge">auto</code> 外任何值)<br />
<code class="language-plaintext highlighter-rouge">float:left/right</code><br />
<code class="language-plaintext highlighter-rouge">position:absolute/fixed</code><br />
<code class="language-plaintext highlighter-rouge">writing-mode:tb-rl</code><br />
<code class="language-plaintext highlighter-rouge">zoom</code>: (除 <code class="language-plaintext highlighter-rouge">normal</code> 外任意值)<br />
<code class="language-plaintext highlighter-rouge">min-height</code>: (任意值)<br />
<code class="language-plaintext highlighter-rouge">min-width</code>: (任意值)<br />
<code class="language-plaintext highlighter-rouge">max-height</code>: (除 <code class="language-plaintext highlighter-rouge">none</code> 外任意值)<br />
<code class="language-plaintext highlighter-rouge">max-width</code>: (除 <code class="language-plaintext highlighter-rouge">none</code> 外任意值)<br />
<code class="language-plaintext highlighter-rouge">overflow</code>: (除 <code class="language-plaintext highlighter-rouge">visible</code> 外任意值,仅用于块级元素)<br />
<code class="language-plaintext highlighter-rouge">overflow-x</code>: (除 <code class="language-plaintext highlighter-rouge">visible</code> 外任意值,仅用于块级元素)<br />
<code class="language-plaintext highlighter-rouge">overflow-y</code>: (除 <code class="language-plaintext highlighter-rouge">visible</code> 外任意值,仅用于块级元素)</p>
<blockquote>
<p>IE6 以前的版本(也包括 IE6 及以后所有版本的混杂模式,其实这种混杂模式在渲染方面就相当于 IE 5.5), 通过设置任何元素的 ‘width’ 或 ‘height’(非 <code class="language-plaintext highlighter-rouge">auto</code>)都可以触发 hasLayout ; 但在 IE6 和 IE7 的标准模式中的行内元素上却不行,设置 ‘display:inline-block’ 才可以。</p>
</blockquote>
<hr />
<h2 id="haslayout-和-block-formatting-context-的异同及可能产生的问题">hasLayout 和 block formatting context 的异同及可能产生的问题</h2>
<h3 id="区别">区别</h3>
<p>在 IE8(S) 之前的版本中,没有规范中提及的 block formatting context 和 Inline formatting context 概念,而是用 hasLayout 来达到相似的目的。</p>
<p>在 IE 中可通过设置 <code class="language-plaintext highlighter-rouge">width</code>、<code class="language-plaintext highlighter-rouge">height</code>、<code class="language-plaintext highlighter-rouge">min-width</code>、<code class="language-plaintext highlighter-rouge">min-height</code>、<code class="language-plaintext highlighter-rouge">max-width</code>、<code class="language-plaintext highlighter-rouge">max-height</code>、<code class="language-plaintext highlighter-rouge">zoom</code>、<code class="language-plaintext highlighter-rouge">writing-mode</code> 来触发 hasLayout,而这些特性值的设置不能够使元素创建 block formatting context。</p>
<p>在 IE 中很多元素默认就是拥有布局的,如 <code class="language-plaintext highlighter-rouge">ipunt</code>, <code class="language-plaintext highlighter-rouge">button</code>, <code class="language-plaintext highlighter-rouge">select</code>, <code class="language-plaintext highlighter-rouge">textarea</code> 等,但是这些元素在标准中会形成 Inline formatting context 。</p>
<h3 id="共同点">共同点</h3>
<p>两者都是决定了对内容如何定位及大小计算的规则。</p>
<p>两者都决定了与其他元素的相互作用的规则。</p>
<p><code class="language-plaintext highlighter-rouge">table-cell</code> 和 <code class="language-plaintext highlighter-rouge">table-caption</code> 既是 hasLayout 的元素,又是可以创建 block formatting context 的元素。</p>
<p>浮动元素,绝对定位元素,<code class="language-plaintext highlighter-rouge">inline-block</code> 元素以及除 <code class="language-plaintext highlighter-rouge">visible</code> 外任意值的 overflow(IE7) 在 IE 中可以触发 hasLayout,同时在标准中,又可以创建 block formatting context。</p>
<h3 id="可能产生的兼容性问题">可能产生的兼容性问题:</h3>
<p>由于 hasLayout 和 block formatting context 是对一类事物的不同理解,并且他们的启用条件不尽相同,因此如果一个元素设计时,在 IE 早期版本中触发了 hasLayout ,但在其他浏览器中又没有创建 block formatting context,或者相反,一个元素在 IE 早期版本中没有触发 hasLayout ,在其他浏览器中却创建了 block formatting context(如设置了 <code class="language-plaintext highlighter-rouge">overflow:hidden</code> ),将导致页面布局的重大差异。</p>
<h3 id="解决方案">解决方案</h3>
<p>仅当一个元素即在 IE 早期版本中触发了 hasLayout,又在其他浏览器中创建了 block formatting context 时,才能避免上述问题的发生。即同时启用上述两者以保证各浏览器的兼容,或者相反,两者皆不启用。</p>
<p>使元素即生成了 block formatting context,又触发了 hasLayout</p>
<p>对于触发 hasLayout 的元素,通过 CSS 设置,使它产生 block formatting context;</p>
<p>生成 block formatting context 但是没有触发 hasLayout 的元素,通过设置 <code class="language-plaintext highlighter-rouge">zoom:1</code>,使其触发 hasLayout。</p>
<p>使元素即没有触发 hasLayout,又没有创建 block formatting context。</p>
<hr />
<h2 id="参考">参考:</h2>
<ol>
<li><a href="http://www.w3help.org/zh-cn/kb/010/#header_1">BFC:Block Formatting Context</a></li>
<li><a href="http://www.w3help.org/zh-cn/kb/010/">常规流</a></li>
<li><a href="http://www.w3help.org/zh-cn/causes/RM8002">hasLayout</a></li>
</ol>
简洁明了的UI交互手册(51-60)
2015-03-30T00:00:00+00:00
http://wangdaodao.github.io/2015-03-30/good-ui-06
<h2 id="51-有技巧地展示价格">51. 有技巧地展示价格</h2>
<blockquote>
<p>你可以选择让用户自己判断产品的价值,也可以引导用户接受你期望的价格。利用人类非理性的一面,有技巧地展示价格,更能吸引用户消费。最简单的方式,就是使用「只要」、「负担得起」、「小费用」等文案;其次,也可以把价格拆分为单元价格(比如告诉用户每页3分钱比每本书30元更能打动用户);此外,你也可以使用x9的价格(比如29、299、2999);最后,价格要用更少的数字显示,30元比30.00元更好。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2180649352.png" alt="idea051.png" /></p>
<h2 id="52-感谢用户">52. 感谢用户</h2>
<blockquote>
<p>感激和关心用户能让你的业务、产品或页面看起来更人性化。在一些任务完成后感谢用户,比只告诉用户结果更好,也能引导用户进行下一步行动。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3574873595.png" alt="idea052.png" /></p>
<h2 id="53-提供好理解的数据">53. 提供好理解的数据</h2>
<blockquote>
<p>为用户提供好理解的数据,不要让他们自己计算。举例来说,一些产品会限制用户使用额度,此时,帮用户计算出还能用多少天,比直接显示剩余额度更直观。此外,当我们显示数据的时间时,使用相对时间「3分钟前」比绝对时间「16:37分」更好理解。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2285362973.png" alt="idea053.png" /></p>
<h2 id="54-强调选择自由">54. 强调选择自由</h2>
<blockquote>
<p>当人们被强调选择自由时,更容易行动。有一些研究发现,强调「你很自由」时,人们采取行动的概率甚至翻了一倍。所以我们可以在一个行动后,紧随简单的声明——「你有自由选择的权利」或「你可以选择接受或拒绝」。这种方式在动作和声明紧连一起时最有效。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1423832364.png" alt="idea054.png" /></p>
<h2 id="55-灵活多变的奖励">55. 灵活多变的奖励</h2>
<blockquote>
<p>灵活多变的奖励比一成不变的奖励更能激励用户。当我们(至少老鼠)按动杠杆得到的食物数量随机时,会更频繁地按杠杆。如果觉得这个案例不恰当,可以考虑更贴合你的案例——检查电子邮件——频繁地检查电子邮件,是因为你不知道什么时候会有邮件来。假设你每天收到邮件的次数和时间都固定,就不会那么上瘾地检查了。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3407223952.png" alt="idea055.png" /></p>
<h2 id="56-强调重点功能">56. 强调重点功能</h2>
<blockquote>
<p>强调重点,让用户注意最重要的功能。通过增加大小或加强元素的对比可以达到目的。其它方法还包括:使用不规则的形状、自动聚焦、高亮区域、浮动显示、指示性箭头等等。当然,你不可能让一个页面处处都是重点,但重要的地方还是要强调。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2821069358.png" alt="idea056.png" /></p>
<h2 id="57-更好的对比数据">57. 更好的对比数据</h2>
<blockquote>
<p>用户有时要对比不同的参数做选择。有很多方式可以让对比变容易,帮助用户下决定。首先,限制要比较的属性数量,不要过多;其次,需要对比的属性应该区隔开来,不要合在一个列;第三,只让用户做一个决定(而不是多个决定,或混杂在一起的决定),以减少额外的认知负担。总而言之,表格的目的是显示关键属性的差异,并帮助用户下决定。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3325463767.png" alt="idea057.png" /></p>
<h2 id="58-提供集合">58. 提供集合</h2>
<blockquote>
<p>人都喜欢收集东西。无论是在物理世界还是虚拟世界,人们看到系列的物品,会有收集的欲望。通常用户把整套收集完后,会得到额外的奖励(一个合起来的蛋糕比一块块的总和要大)。让人一目了然地看到自己已经收集了哪些,还有哪些未收集,会更有动力继续。最后,如果收集的是稀缺物,人们的动力也会更足。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/733564626.png" alt="idea058.png" /></p>
<h2 id="59-显示预期结果">59. 显示预期结果</h2>
<blockquote>
<p>让用户知道自己所处状态和操作预期结果并不费劲。比如:「向导一共有几步,你正在操作第几步」、「你的选择会导致什么结果」、「在什么时候你会收到什么信息」……这些小提醒会让用户更信任产品。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/4030126109.png" alt="idea059.png" /></p>
<h2 id="60-幽默一点">60. 幽默一点</h2>
<blockquote>
<p>为什么总是那么严肃?听到笑话,你会觉得放松。在页面上添加有趣的东西也可能会带来意料外的效果,增进你和用户间的关系。搞好关系,万一哪天你犯错误,用户会更容易原谅你。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1507273588.png" alt="idea060.png" /></p>
<h2 id="相关部分">相关部分</h2>
<ol>
<li><a href="/2014-08-05/good-ui-01.html">简洁明了的UI交互手册(1)</a></li>
<li><a href="/2014-08-08/good-ui-02.html">简洁明了的UI交互手册(2)</a></li>
<li><a href="/2014-08-09/good-ui-03.html">简洁明了的UI交互手册(3)</a></li>
<li><a href="/2014-08-09/good-ui-04.html">简洁明了的UI交互手册(4)</a></li>
<li><a href="/2014-08-13/good-ui-05.html">简洁明了的UI交互手册(5)</a></li>
<li><a href="/2015-03-30/good-ui-06.html">简洁明了的UI交互手册(6)</a></li>
<li><a href="/2015-07-03/good-ui-07.html">简洁明了的UI交互手册(7)</a></li>
<li><a href="/2015-07-09/good-ui-08.html">简洁明了的UI交互手册(8)</a></li>
</ol>
<p>以上总结来自<a href="http://www.goodui.org/">GoodUI</a>,部分翻译来源网络。</p>
表单验证插件Validform
2015-03-05T00:00:00+00:00
http://wangdaodao.github.io/2015-03-05/validform
<h2 id="初始化参数">初始化参数</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var demo;
$(".demo").Validform({
btnSubmit:"#btn_sub",
btnReset:".btn_reset",
tiptype:1, //1=> 自定义弹出框提示;2=> 侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态);3=> 侧边提示(会在当前元素的siblings对象中查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态);4=> 侧边提示(会在当前元素的父级的next对象下查找显示提示信息的对象,表单以ajax提交时不显示表单的提交状态);
ignoreHidden:false,
dragonfly:false,
tipSweep:true,
label:".label",
showAllError:false,
postonce:true,
ajaxPost:true,
datatype:{
"*6-20": /^[^\s]{6,20}$/,
"z2-4" : /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
"username":function(gets,obj,curform,regxp){
//参数gets是获取到的表单元素值,obj为当前表单元素,curform为当前验证的表单,regxp为内置的一些正则表达式的引用;
var reg1=/^[\w\.]{4,16}$/,
reg2=/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,8}$/;
if(reg1.test(gets)){return true;}
if(reg2.test(gets)){return true;}
return false;
//注意return可以返回true 或 false 或 字符串文字,true表示验证通过,返回字符串表示验证失败,字符串作为错误提示显示,返回false则用errmsg或默认的错误提示;
},
"phone":function(){
// 5.0 版本之后,要实现二选一的验证效果,datatype 的名称 不 需要以 "option_" 开头;
},
"paynum":function(gets,obj,curform,regxp){
var pay_num = /^\d+(\.\d{1,2})?$/;
if ((gets>0)&&(pay_num.test(gets))) {
return true;
}
return false;
}
},
usePlugin:{
swfupload:{},
datepicker:{},
passwordstrength:{},
jqtransform:{
selector:"select,input"
}
},
beforeCheck:function(curform){
//在表单提交执行验证之前执行的函数,curform参数是当前表单对象。
//这里明确return false的话将不会继续执行验证操作;
},
beforeSubmit:function(curform){
//在验证成功后,表单提交前执行的函数,curform参数是当前表单对象。
//这里明确return false的话表单将不会提交;
},
callback:function(data){
//返回数据data是json对象,{"info":"demo info","status":"y"}
//info: 输出提示信息;
//status: 返回提交数据的状态,是否提交成功。如可以用"y"表示提交成功,"n"表示提交失败,在ajax_post.php文件返回数据里自定字符,主要用在callback函数里根据该值执行相应的回调操作;
//你也可以在ajax_post.php文件返回更多信息在这里获取,进行相应操作;
//ajax遇到服务端错误时也会执行回调,这时的data是{ status:**, statusText:**, readyState:**, responseText:** };
//这里执行回调操作;
//注意:如果不是ajax方式提交表单,传入callback,这时data参数是当前表单对象,回调函数会在表单验证全部通过后执行,然后判断是否提交表单,如果callback里明确return false,则表单不会提交,如果return true或没有return,则会提交表单。
}
});
demo.addRule([
{
ele: "select",
datatype: "s",
errormsg: "请选择!",
nullmsg: "不能为空!"
},
{
ele: ":checkbox:first",
datatype: "*",
errormsg: "请选择!",
nullmsg: "不能为空!"
}
]);
</code></pre></div></div>
<h2 id="对富文本框的验证">对富文本框的验证</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>beforeCheck:function(curform){
$("#id").html(textarea.html());
}
</code></pre></div></div>
<p>然后</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>demo.addRule([
{
ele:"#id",
datatype:"*",
nullmsg:"不能为空!"
}
]);
</code></pre></div></div>
<p>以上只是作为一个简单记录,更多文档请查阅<a href="http://validform.rjboy.cn/document.html">http://validform.rjboy.cn/document.html</a></p>
前端面试题
2015-01-05T00:00:00+00:00
http://wangdaodao.github.io/2015-01-05/web-frontend-engineer-issue
<h2 id="html部分">HTML部分</h2>
<ol>
<li>Doctype作用?严格模式与混杂模式如何区分?它们有何意义?</li>
<li>行内元素有哪些?块级元素有哪些?空元素有那些?</li>
<li>语义化的理解?(任意发挥内容出题)</li>
</ol>
<h2 id="css部分">CSS部分</h2>
<ol>
<li>CSS 选择符有哪些?优先级算法如何计算?权重算法如何计算?伪类和伪元素的区别? 常见的伪类和伪元素。</li>
<li>有哪些的隐藏内容的方法(如果同时还要保证屏幕阅读器可用呢?)</li>
<li>常用hack的技巧?</li>
</ol>
<h2 id="js部分">JS部分</h2>
<ol>
<li>js延迟加载的方式有哪些?</li>
<li>documen.write和 innerHTML的区别?</li>
<li>
<p>分析以以下代码,说出打印结果:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> var t = "bb";
function test() {
alert(t);
var t = "aa";
alert(t);
}
test();
alert(t);
</code></pre></div> </div>
</li>
</ol>
<h2 id="综合部分">综合部分</h2>
<ol>
<li>描述一下渐进增强和优雅降级之间的不同?</li>
<li>如何对网站的文件和资源进行优化?</li>
<li>http状态码有那些?分别代表是什么意思?</li>
</ol>
<h2 id="代码部分">代码部分</h2>
<ol>
<li>做一个左侧固定,右侧自适应的两栏布局。</li>
<li>
<p>用以下代码,实现下图:
<a href="/uploads/2015/01/20150106145507.png"><img src="/uploads/2015/01/20150106145507.png" alt="公司简介" /></a></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <p>公司简介:公司成立于1998年8月13日,成立十五年以来,公司一直以“科技报国、积极推动基本建设领域的IT应用发展”为己任,信守“真诚、务实、创新、服务”的企业精神,持续为中国基本建设领域提供最有价值的信息产品与专业服务,推动行业内企业的管理进步,提高企业的核心竞争力。在发展的历程中,公司公司逐步确立了“引领全球建设领域信息化服务产业的发展,为推动社会的进步与繁荣做出杰出贡献”的企业使命,紧紧围绕工程项目管理的核心业务,走专业化、服务化、国际化的发展战略。</p>
</code></pre></div> </div>
</li>
<li>用精简的代码,做一个太极图案(若能转动加分)。</li>
</ol>
自动跳过12306官网的查询失败
2014-12-24T00:00:00+00:00
http://wangdaodao.github.io/2014-12-24/12306-code
<p>技术宅又一次拯救了大家!</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>window.autoSearchTime = 1500;
$(document).ajaxComplete(function(e, xhr, settings) {
if (settings.url.substr(0, (ctx + CLeftTicketUrl).length) == ctx + CLeftTicketUrl) {
window.setTimeout(function() {
if ($('#qd_closeDefaultWarningWindowDialog_id').width()) {
$('#qd_closeDefaultWarningWindowDialog_id').click();
window.setTimeout(function() {
$('#query_ticket').click();
window.setTimeout(function() {
$('#query_ticket').click();
}, 500);
}, 500);
}
}, 500);
}
});
</code></pre></div></div>
HTML参考手册
2014-11-26T00:00:00+00:00
http://wangdaodao.github.io/2014-11-26/html-ref-byfunc
<h3>基础</h3>
<table>
<thead>
<tr>
<th style="width:35%">标签</th>
<th style="width:65%">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_doctype.asp"><!DOCTYPE></a>
</td>
<td>定义文档类型。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_html.asp"><html></a>
</td>
<td>定义 HTML 文档。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_title.asp"><title></a>
</td>
<td>定义文档的标题。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_body.asp"><body></a>
</td>
<td>定义文档的主体。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_hn.asp"><h1> to <h6></a>
</td>
<td>定义 HTML 标题。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_p.asp"><p></a>
</td>
<td>定义段落。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_br.asp"><br></a>
</td>
<td>定义简单的折行。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_hr.asp"><hr></a>
</td>
<td>定义水平线。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_comment.asp"><!--...--></a>
</td>
<td>定义注释。</td>
</tr>
</tbody>
</table>
<h3>格式</h3>
<table>
<thead>
<tr>
<th style="width:35%">标签</th>
<th style="width:65%">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_acronym.asp"><acronym></a>
</td>
<td>定义只取首字母的缩写。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_abbr.asp"><abbr></a>
</td>
<td>定义缩写。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_address.asp"><address></a>
</td>
<td>定义文档作者或拥有者的联系信息。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_font_style.asp"><b></a>
</td>
<td>定义粗体文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_bdi.asp"><bdi>!html5</a>
</td>
<td>定义文本的文本方向,使其脱离其周围文本的方向设置。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_bdo.asp"><bdo></a>
</td>
<td>定义文字方向。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_font_style.asp"><big></a>
</td>
<td>定义大号文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_blockquote.asp"><blockquote></a>
</td>
<td>定义长的引用。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_center.asp"><center></a>
</td>
<td>
<span class="deprecated">不赞成使用。</span>
定义居中文本。
</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><cite></a>
</td>
<td>定义引用(citation)。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><code></a>
</td>
<td>定义计算机代码文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_del.asp"><del></a>
</td>
<td>定义被删除文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><dfn></a>
</td>
<td>定义定义项目。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><em></a>
</td>
<td>定义强调文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_font.asp"><font></a>
</td>
<td>
<span class="deprecated">不赞成使用。</span>
定义文本的字体、尺寸和颜色
</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_font_style.asp"><i></a>
</td>
<td>定义斜体文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_ins.asp"><ins></a>
</td>
<td>定义被插入文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><kbd></a>
</td>
<td>定义键盘文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_mark.asp"><mark>!html5</a>
</td>
<td>定义有记号的文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_meter.asp"><meter>!html5</a>
</td>
<td>定义预定义范围内的度量。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_pre.asp"><pre></a>
</td>
<td>定义预格式文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_progress.asp"><progress>!html5</a>
</td>
<td>定义任何类型的任务的进度。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_q.asp"><q></a>
</td>
<td>定义短的引用。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_rp.asp"><rp>!html5</a>
</td>
<td>定义若浏览器不支持 ruby 元素显示的内容。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_rt.asp"><rt>!html5</a>
</td>
<td>定义 ruby 注释的解释。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_ruby.asp"><ruby>!html5</a>
</td>
<td>定义 ruby 注释。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_s.asp"><s></a>
</td>
<td>
<span class="deprecated">不赞成使用。</span>
定义加删除线的文本。
</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><samp></a>
</td>
<td>定义计算机代码样本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_font_style.asp"><small></a>
</td>
<td>定义小号文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_strike.asp"><strike></a>
</td>
<td>
<span class="deprecated">不赞成使用。</span>
定义加删除线文本。
</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><strong></a>
</td>
<td>定义语气更为强烈的强调文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_sup.asp"><sup></a>
</td>
<td>定义上标文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_sub.asp"><sub></a>
</td>
<td>定义下标文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_time.asp"><time>!html5</a>
</td>
<td>定义日期/时间。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_font_style.asp"><tt></a>
</td>
<td>定义打字机文本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_u.asp"><u></a>
</td>
<td>
<span class="deprecated">不赞成使用。</span>
定义下划线文本。
</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_phrase_elements.asp"><var></a>
</td>
<td>定义文本的变量部分。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_wbr.asp"><wbr>!html5</a>
</td>
<td>定义视频。</td>
</tr>
</tbody>
</table>
<h3>表单</h3>
<table>
<thead>
<tr>
<th style="width:35%">标签</th>
<th style="width:65%">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_form.asp"><form></a>
</td>
<td>定义供用户输入的 HTML 表单。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_input.asp"><input></a>
</td>
<td>定义输入控件。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_textarea.asp"><textarea></a>
</td>
<td>定义多行的文本输入控件。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_button.asp"><button></a>
</td>
<td>定义按钮。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_select.asp"><select></a>
</td>
<td>定义选择列表(下拉列表)。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_optgroup.asp"><optgroup></a>
</td>
<td>定义选择列表中相关选项的组合。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_option.asp"><option></a>
</td>
<td>定义选择列表中的选项。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_label.asp"><label></a>
</td>
<td>定义 input 元素的标注。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_fieldset.asp"><fieldset></a>
</td>
<td>定义围绕表单中元素的边框。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_legend.asp"><legend></a>
</td>
<td>定义 fieldset 元素的标题。</td>
</tr>
<tr>
<td><isindex></td>
<td>
<span class="deprecated">不赞成使用。</span>
定义与文档相关的可搜索索引。
</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_datalist.asp"><datalist>!html5</a>
</td>
<td>定义下拉列表。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_keygen.asp"><keygen>!html5</a>
</td>
<td>定义生成密钥。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_output.asp"><output>!html5</a>
</td>
<td>定义输出的一些类型。</td>
</tr>
</tbody>
</table>
<h3>框架</h3>
<table>
<thead>
<tr>
<th style="width:35%">标签</th>
<th style="width:65%">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_frame.asp"><frame></a>
</td>
<td>定义框架集的窗口或框架。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_frameset.asp"><frameset></a>
</td>
<td>定义框架集。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_noframes.asp"><noframes></a>
</td>
<td>定义针对不支持框架的用户的替代内容。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_iframe.asp"><iframe></a>
</td>
<td>定义内联框架。</td>
</tr>
</tbody>
</table>
<h3>图像</h3>
<table>
<thead>
<tr>
<th style="width:35%">标签</th>
<th style="width:65%">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_img.asp"><img></a>
</td>
<td>定义图像。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_map.asp"><map></a>
</td>
<td>定义图像映射。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_area.asp"><area></a>
</td>
<td>定义图像地图内部的区域。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_canvas.asp"><canvas>!html5</a>
</td>
<td>定义图形。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_figcaption.asp"><figcaption>!html5</a>
</td>
<td>定义 figure 元素的标题。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_figure.asp"><figure>!html5</a>
</td>
<td>定义媒介内容的分组,以及它们的标题。</td>
</tr>
</tbody>
</table>
<h3>音频/视频</h3>
<table>
<thead>
<tr>
<th style="width:35%">标签</th>
<th style="width:65%">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_audio.asp"><audio>!html5</a>
</td>
<td>定义声音内容。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_source.asp"><source>!html5</a>
</td>
<td>定义媒介源。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_track.asp"><track>!html5</a>
</td>
<td>定义用在媒体播放器中的文本轨道。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_video.asp"><video>!html5</a>
</td>
<td>定义视频。</td>
</tr>
</tbody>
</table>
<h3>链接</h3>
<table>
<thead>
<tr>
<th style="width:35%">标签</th>
<th style="width:65%">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_a.asp"><a></a>
</td>
<td>定义锚。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_link.asp"><link></a>
</td>
<td>定义文档与外部资源的关系。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_nav.asp"><nav>!html5</a>
</td>
<td>定义导航链接。</td>
</tr>
</tbody>
</table>
<h3>列表</h3>
<table>
<thead>
<tr>
<th style="width:35%">标签</th>
<th style="width:65%">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_ul.asp"><ul></a>
</td>
<td>定义无序列表。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_ol.asp"><ol></a>
</td>
<td>定义有序列表。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_li.asp"><li></a>
</td>
<td>定义列表的项目。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_dir.asp"><dir></a>
</td>
<td>
<span class="deprecated">不赞成使用。</span>
定义目录列表。
</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_dl.asp"><dl></a>
</td>
<td>定义定义列表。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_dt.asp"><dt></a>
</td>
<td>定义定义列表中的项目。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_dd.asp"><dd></a>
</td>
<td>定义定义列表中项目的描述。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_menu.asp"><menu></a>
</td>
<td>定义命令的菜单/列表。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_menuitem.asp"><menuitem></a>
</td>
<td>定义用户可以从弹出菜单调用的命令/菜单项目。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_command.asp"><command>!html5</a>
</td>
<td>定义命令按钮。</td>
</tr>
</tbody>
</table>
<h3>表格</h3>
<table>
<thead>
<tr>
<th style="width:35%">标签</th>
<th style="width:65%">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_table.asp"><table></a>
</td>
<td>定义表格</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_caption.asp"><caption></a>
</td>
<td>定义表格标题。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_th.asp"><th></a>
</td>
<td>定义表格中的表头单元格。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_tr.asp"><tr></a>
</td>
<td>定义表格中的行。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_td.asp"><td></a>
</td>
<td>定义表格中的单元。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_thead.asp"><thead></a>
</td>
<td>定义表格中的表头内容。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_tbody.asp"><tbody></a>
</td>
<td>定义表格中的主体内容。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_tfoot.asp"><tfoot></a>
</td>
<td>定义表格中的表注内容(脚注)。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_col.asp"><col></a>
</td>
<td>定义表格中一个或多个列的属性值。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_colgroup.asp"><colgroup></a>
</td>
<td>定义表格中供格式化的列组。</td>
</tr>
</tbody>
</table>
<h3>样式/节</h3>
<table>
<thead>
<tr>
<th style="width:35%">标签</th>
<th style="width:65%">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_style.asp"><style></a>
</td>
<td>定义文档的样式信息。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_div.asp"><div></a>
</td>
<td>定义文档中的节。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_span.asp"><span></a>
</td>
<td>定义文档中的节。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_header.asp"><header>!html5</a>
</td>
<td>定义 section 或 page 的页眉。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_footer.asp"><footer>!html5</a>
</td>
<td>定义 section 或 page 的页脚。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_section.asp"><section>!html5</a>
</td>
<td>定义 section。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_article.asp"><article>!html5</a>
</td>
<td>定义文章。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_aside.asp"><aside>!html5</a>
</td>
<td>定义页面内容之外的内容。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_details.asp"><details>!html5</a>
</td>
<td>定义元素的细节。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_dialog.asp"><dialog>!html5</a>
</td>
<td>定义对话框或窗口。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_summary.asp"><summary>!html5</a>
</td>
<td>为 <details> 元素定义可见的标题。</td>
</tr>
</tbody>
</table>
<h3>元信息</h3>
<table>
<thead>
<tr>
<th style="width:35%">标签</th>
<th style="width:65%">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_head.asp"><head></a>
</td>
<td>定义关于文档的信息。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_meta.asp"><meta></a>
</td>
<td>定义关于 HTML 文档的元信息。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_base.asp"><base></a>
</td>
<td>定义页面中所有链接的默认地址或默认目标。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_basefont.asp"><basefont></a>
</td>
<td>
<span class="deprecated">不赞成使用。</span>
定义页面中文本的默认字体、颜色或尺寸。
</td>
</tr>
</tbody>
</table>
<h3>编程</h3>
<table>
<thead>
<tr>
<th style="width:35%">标签</th>
<th style="width:65%">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_script.asp"><script></a>
</td>
<td>定义客户端脚本。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_noscript.asp"><noscript></a>
</td>
<td>定义针对不支持客户端脚本的用户的替代内容。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_applet.asp"><applet></a>
</td>
<td>
<span class="deprecated">不赞成使用。</span>
定义嵌入的 applet。
</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_embed.asp"><embed>!html5</a>
</td>
<td>为外部应用程序(非 HTML)定义容器。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_object.asp"><object></a>
</td>
<td>定义嵌入的对象。</td>
</tr>
<tr>
<td>
<a href="http://www.w3school.com.cn/tags/tag_param.asp"><param></a>
</td>
<td>定义对象的参数。</td>
</tr>
</tbody>
</table>
北京APEC
2014-11-06T00:00:00+00:00
http://wangdaodao.github.io/2014-11-06/APEC
<p>北京欢迎APEC会议,在鸟巢燃放烟花,同时下令会场10里以内村庄禁止烧柴做饭,提前供暖被叫停,300公里内污染企业停产或关闭,单位放假,学生停课,车辆限行,家庭装修停工,家具买回来都不许安装,光棍节不幸遇上APEC,多家快递公司发出延误预警,APEC会议主场所在的雁栖湖地区,花了70个亿进行改造,有人说总投资还要再乘以五,达360亿元。</p>
<p>世界上每年有多少国家举办多少次国际会议,有一个国家的政府敢这样吗?能这样吗?想这样吗?美国会吗?日本会吗?英法德会吗?哪个政府会因为来几个外国人就限制本国百姓的生活?</p>
<p>北京APEC,很多国家首脑进京,为了面子,果断停工、限行,把天空变蓝。这说明啥???雾霾不是不可以治理,关键是百姓的健康没有政府的面子重要!!!</p>
免费的VPN:VPNGate
2014-11-03T00:00:00+00:00
http://wangdaodao.github.io/2014-11-03/free-vpn-VPN-Gate
<p>VPN Gate 学术实验项目是一个在线服务,由日本国立筑波大学研究生院为学术研究目的运营。本研究的目的是推广 “全球分布式公共 VPN 中继服务器” 的知识。</p>
<p>更赞的是VPN Gate 还可以每日镜像站点邮件订阅,订阅地址是:<a href="http://www.vpngate.net/cn/mail.aspx">http://www.vpngate.net/cn/mail.aspx</a>,如果打不开的话,可以把自己的邮箱留下,我会帮助订阅!</p>
<p>github:<a href="https://github.com/SoftEtherVPN/SoftEtherVPN/">https://github.com/SoftEtherVPN/SoftEtherVPN/</a></p>
网页设计标准尺寸
2014-09-26T00:00:00+00:00
http://wangdaodao.github.io/2014-09-26/webpage-design-standard-size
<p>网页设计在初始要界定出网页的尺寸大小。就像绘画给出一块画版来。这样才能方便设计。</p>
<p>网页的尺寸受限于两个因素:一个是显示器屏幕。显示器现在种类很多,以19寸宽屏为主流,正在朝22寸及24寸的方向发展。但目前也有为数不少的4:3显示器。另一个是浏览器软件,就是我们常用的IE,遨游,Friefox等。</p>
<h2 id="网页高度">网页高度:</h2>
<p>高度是可以向下延展的,所以一般对高度不限制。 对于一屏来说,一般没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被插件占了半个屏幕,所以高度没有确切值。</p>
<h2 id="网页宽度">网页宽度:</h2>
<ol>
<li>在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。</li>
<li>在Firefox下,宽度的分率辨减19。比如1024的宽度-19就变成1005</li>
<li>在Opear下,宽度的分率辨减23。比如1024的宽度-23就变成1001<br />
注:Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。<br />
所以如果是1024的分辨率,你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点。也方便做一些浮动层的设计。<br />
如果是800的分辨率一般都设成770。但也有设成760的。<br />
这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化所以 800的分辨率一般设定760左右,1024的设定990左右。</li>
</ol>
<h2 id="网页设计标准尺寸总结">网页设计标准尺寸总结</h2>
<ol>
<li>800 * 600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。</li>
<li>1024 * 768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间。就不会出现水平滚动条和垂直滚动条。</li>
<li>在ps里面做网页可以在800 * 600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740 * 560左右。</li>
<li>在PS里做的图到了网上就不一样了,颜色等等方面,因为WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广,所以自然会有失色的现象。</li>
<li>页面标准按800 * 600分辨率制作,实际尺寸为778 * 434px。</li>
<li>页面长度原则上不超过3屏,宽度不超过1屏。</li>
<li>每个标准页面为A4幅面大小,即8.5X11英寸。</li>
<li>全尺寸banner为468 * 60px,半尺寸banner为234 * 60px,小banner为88 * 31px。</li>
<li>另外120 * 90,120 * 60也是小图标的标准尺寸。</li>
<li>每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K</li>
</ol>
<h2 id="网页设计logo标准尺寸">网页设计LOGO标准尺寸</h2>
<ol>
<li>88 * 31 这是互联网上最普遍的LOGO规格。</li>
<li>120 * 60 这种规格用于一般大小的LOGO。</li>
<li>120 * 90 这种规格用于大型LOGO。</li>
</ol>
<h2 id="网页广告尺寸规格-1">网页广告尺寸规格-1</h2>
<p>国际上规定的标准的广告尺寸有下面八种,并且每一种广告规格的使用也都有一定的范围。</p>
<ol>
<li>120 * 120,这种广告规格适用于产品或新闻照片展示。</li>
<li>120 * 60,这种广告规格主要用于做LOGO使用。</li>
<li>120 * 90,主要应用于产品演示或大型LOGO。</li>
<li>125 * 125,这种规格适于表现照片效果的图像广告。</li>
<li>234 * 60,这种规格适用于框架或左右形式主页的广告链接。</li>
<li>392 * 72,主要用于有较多图片展示的广告条,用于页眉或页脚。</li>
<li>468 * 60,应用最为广泛的广告条尺寸,用于页眉或页脚。</li>
<li>88 * 31,主要用于网页链接,或网站小型LOGO。</li>
</ol>
<h2 id="网页广告尺寸规格-2">网页广告尺寸规格-2</h2>
<ol>
<li>首页右上,尺寸120 * 60</li>
<li>首页顶部通栏,尺寸468 * 60</li>
<li>首页顶部通栏,尺寸760 * 60</li>
<li>首页中部通栏,尺寸580 * 60</li>
<li>内页顶部通栏,尺寸468 * 60</li>
<li>内页顶部通栏,尺寸760 * 60</li>
<li>内页左上,尺寸150 * 60或300 * 300</li>
<li>下载地址页面,尺寸560 * 60或468 * 60</li>
<li>内页底部通栏,尺寸760 * 60</li>
<li>左漂浮,尺寸80 * 80或100 * 100</li>
</ol>
<h2 id="网页广告尺寸规格-3">网页广告尺寸规格-3</h2>
<p>广告形式 像素大小 最大尺寸 备注<br />
BUTTON 120 * 60(必须用gif) 7K 215 * 50(必须用gif) 7K<br />
通栏 760 * 100 25K 静态图片或减少运动效果 430 * 50 15K<br />
超级通栏 760 * 100 to 760 * 200 共40K 静态图片或减少运动效果<br />
巨幅广告 336 * 280 35K 585 * 120<br />
竖边广告 130 * 300 25K<br />
全屏广告 800 * 600 40K 必须为静态图片,FLASH格式<br />
图文混排 各频道不同 15K<br />
弹出窗口 400 * 300(尽量用gif) 40K<br />
BANNER 468 * 60(尽量用gif) 18K<br />
悬停按钮 80 * 80(必须用gif) 7K<br />
流媒体 300 * 200(可做不规则形状但尺寸不能超过300 * 200) 30K 播放时间 小于5秒60帧(1秒/12帧)</p>
参与感高清海报
2014-09-02T00:00:00+00:00
http://wangdaodao.github.io/2014-09-02/cyg
<p>从微信中可以获得海报,但是目测比我这质量还差点……我是从电子书里面一张一张提取出来的总共46张(1024*1365)!!</p>
<p><a href="/uploads/2014/09/01.gif"><img src="/uploads/2014/09/01.gif" alt="参与感海报01" /></a></p>
<p><a href="/uploads/2014/09/02.gif"><img src="/uploads/2014/09/02.gif" alt="参与感海报02" /></a></p>
<p><a href="/uploads/2014/09/03.gif"><img src="/uploads/2014/09/03.gif" alt="参与感海报03" /></a></p>
<p><a href="/uploads/2014/09/04.gif"><img src="/uploads/2014/09/04.gif" alt="参与感海报04" /></a></p>
<p><a href="/uploads/2014/09/05.gif"><img src="/uploads/2014/09/05.gif" alt="参与感海报05" /></a></p>
<p><a href="/uploads/2014/09/06.gif"><img src="/uploads/2014/09/06.gif" alt="参与感海报06" /></a></p>
<p><a href="/uploads/2014/09/07.gif"><img src="/uploads/2014/09/07.gif" alt="参与感海报07" /></a></p>
<p><a href="/uploads/2014/09/08.gif"><img src="/uploads/2014/09/08.gif" alt="参与感海报08" /></a></p>
<p><a href="/uploads/2014/09/09.gif"><img src="/uploads/2014/09/09.gif" alt="参与感海报09" /></a></p>
<p><a href="/uploads/2014/09/10.gif"><img src="/uploads/2014/09/10.gif" alt="参与感海报10" /></a></p>
<p><a href="/uploads/2014/09/11.gif"><img src="/uploads/2014/09/11.gif" alt="参与感海报11" /></a></p>
<p><a href="/uploads/2014/09/12.gif"><img src="/uploads/2014/09/12.gif" alt="参与感海报12" /></a></p>
<p><a href="/uploads/2014/09/13.gif"><img src="/uploads/2014/09/13.gif" alt="参与感海报13" /></a></p>
<p><a href="/uploads/2014/09/14.gif"><img src="/uploads/2014/09/14.gif" alt="参与感海报14" /></a></p>
<p><a href="/uploads/2014/09/15.gif"><img src="/uploads/2014/09/15.gif" alt="参与感海报15" /></a></p>
<p><a href="/uploads/2014/09/16.gif"><img src="/uploads/2014/09/16.gif" alt="参与感海报16" /></a></p>
<p><a href="/uploads/2014/09/17.gif"><img src="/uploads/2014/09/17.gif" alt="参与感海报17" /></a></p>
<p><a href="/uploads/2014/09/18.gif"><img src="/uploads/2014/09/18.gif" alt="参与感海报18" /></a></p>
<p><a href="/uploads/2014/09/19.gif"><img src="/uploads/2014/09/19.gif" alt="参与感海报19" /></a></p>
<p><a href="/uploads/2014/09/20.gif"><img src="/uploads/2014/09/20.gif" alt="参与感海报20" /></a></p>
<p><a href="/uploads/2014/09/21.gif"><img src="/uploads/2014/09/21.gif" alt="参与感海报21" /></a></p>
<p><a href="/uploads/2014/09/22.gif"><img src="/uploads/2014/09/22.gif" alt="参与感海报22" /></a></p>
<p><a href="/uploads/2014/09/23.gif"><img src="/uploads/2014/09/23.gif" alt="参与感海报23" /></a></p>
<p><a href="/uploads/2014/09/24.gif"><img src="/uploads/2014/09/24.gif" alt="参与感海报24" /></a></p>
<p><a href="/uploads/2014/09/25.gif"><img src="/uploads/2014/09/25.gif" alt="参与感海报25" /></a></p>
<p><a href="/uploads/2014/09/26.gif"><img src="/uploads/2014/09/26.gif" alt="参与感海报26" /></a></p>
<p><a href="/uploads/2014/09/27.gif"><img src="/uploads/2014/09/27.gif" alt="参与感海报27" /></a></p>
<p><a href="/uploads/2014/09/28.gif"><img src="/uploads/2014/09/28.gif" alt="参与感海报28" /></a></p>
<p><a href="/uploads/2014/09/29.gif"><img src="/uploads/2014/09/29.gif" alt="参与感海报29" /></a></p>
<p><a href="/uploads/2014/09/30.gif"><img src="/uploads/2014/09/30.gif" alt="参与感海报30" /></a></p>
<p><a href="/uploads/2014/09/31.gif"><img src="/uploads/2014/09/31.gif" alt="参与感海报31" /></a></p>
<p><a href="/uploads/2014/09/32.gif"><img src="/uploads/2014/09/32.gif" alt="参与感海报32" /></a></p>
<p><a href="/uploads/2014/09/33.gif"><img src="/uploads/2014/09/33.gif" alt="参与感海报33" /></a></p>
<p><a href="/uploads/2014/09/34.gif"><img src="/uploads/2014/09/34.gif" alt="参与感海报34" /></a></p>
<p><a href="/uploads/2014/09/35.gif"><img src="/uploads/2014/09/35.gif" alt="参与感海报35" /></a></p>
<p><a href="/uploads/2014/09/36.gif"><img src="/uploads/2014/09/36.gif" alt="参与感海报36" /></a></p>
<p><a href="/uploads/2014/09/37.gif"><img src="/uploads/2014/09/37.gif" alt="参与感海报37" /></a></p>
<p><a href="/uploads/2014/09/38.gif"><img src="/uploads/2014/09/38.gif" alt="参与感海报38" /></a></p>
<p><a href="/uploads/2014/09/39.gif"><img src="/uploads/2014/09/39.gif" alt="参与感海报39" /></a></p>
<p><a href="/uploads/2014/09/40.gif"><img src="/uploads/2014/09/40.gif" alt="参与感海报40" /></a></p>
<p><a href="/uploads/2014/09/41.gif"><img src="/uploads/2014/09/41.gif" alt="参与感海报41" /></a></p>
<p><a href="/uploads/2014/09/42.gif"><img src="/uploads/2014/09/42.gif" alt="参与感海报42" /></a></p>
<p><a href="/uploads/2014/09/43.gif"><img src="/uploads/2014/09/43.gif" alt="参与感海报43" /></a></p>
<p><a href="/uploads/2014/09/44.gif"><img src="/uploads/2014/09/44.gif" alt="参与感海报44" /></a></p>
<p><a href="/uploads/2014/09/45.gif"><img src="/uploads/2014/09/45.gif" alt="参与感海报45" /></a></p>
<p><a href="/uploads/2014/09/46.gif"><img src="/uploads/2014/09/46.gif" alt="参与感海报46" /></a></p>
第三届iWeb峰会
2014-08-19T00:00:00+00:00
http://wangdaodao.github.io/2014-08-19/iweb-2014
<p><a href="/uploads/2014/08/IMG_20140816_090510.jpg"><img src="/uploads/2014/08/IMG_20140816_090510.jpg" alt="第三届iWeb峰会" /></a></p>
<p>相对于上次的IXDC,这次<a href="http://2014.html5dw.com/topic">iWeb峰会</a>的内容还是比较充实的。特别是技术专场:干货多,接地气!会上对<a href="http://baike.baidu.com/view/6549902.htm?fr=aladdin">Cocos2D-X</a>的介绍,听后有种想自己做一个html5小游戏的冲动!推荐的<a href="http://www.dcloud.io/">HBuilder</a>确实有亮点(真机联调的iOS设备,拥有最全语法库和浏览器兼容数据……)!下载下来试用了下,也很不错,基本上和sublime text用法一致。</p>
<p><a href="/uploads/2014/08/IMG_20140816_093519.jpg"><img src="/uploads/2014/08/IMG_20140816_093519.jpg" alt="第三届iWeb峰会" /></a></p>
<p>然后结合HBuilder来使用mui(可不是miui,这货现在基本上还差不到),让HTML5做app变的简单!</p>
<p><a href="/uploads/2014/08/IMG_20140816_094052.jpg"><img src="/uploads/2014/08/IMG_20140816_094052.jpg" alt="第三届iWeb峰会" /></a></p>
<p>给我印象深的是<a href="http://wenku.baidu.com/link?url=gZPzMinD7kflVOJBTb0MM4yU4um3t5DLzWiWlsb2GPukV_SmsBlWwXBNq97ufAiGYc3vXUiumvGq5mSjZpKR0Z3Y9JZRu7AWDm3ilbpuC-a">手机腾讯网js资源加载优化之路</a>,介绍的增量js更新算法什么的确实是高大上,从更新这一点能引发出这么多的想法,确实值得我去学习!</p>
<p>另外,清风大侠讲的Git也不错,听后又晋级了一层!</p>
<p>总之,这次收获还是很多,另外<a href="http://2014.html5dw.com/city">以下城市</a>的朋友,也可以积极参加!期待下次峰会!</p>
简洁明了的UI交互手册(41-50)
2014-08-13T00:00:00+00:00
http://wangdaodao.github.io/2014-08-13/good-ui-05
<h2 id="41-利用锚定效应">41. 利用锚定效应</h2>
<blockquote>
<p>人类认知充满偏见。卡尼曼研究发现,锚定效应是人类难以抗拒的偏见。它是指当人们考虑一个未知数量时,会受一开始获得数值的影响。一开始给出高价,再给出稍低点的价格,会比直接给出后面的价格更容易被接受。而且锚定值不一定是价格,还有可能是其它内容。营销人员向顾客展示厂家建议零售价,再提供一个更低的价格,就是利用锚定效应的很好案例。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1347560291.png" alt="idea041.png" /></p>
<h2 id="42-尽早激励用户">42. 尽早激励用户</h2>
<blockquote>
<p>我们越接近完成越有动力。在设计程序时,可以把注册作为新手任务的一个环节,否则等到注册完才开始新手任务,用户看到的是自己一个任务都还没完成的空白状态。所以尽早激励用户,让他们更有动力前进。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/291971466.png" alt="idea042.png" /></p>
<h2 id="43-逐步显示">43. 逐步显示</h2>
<blockquote>
<p>将信息逐步显示,用户不用看到一堆不相干的信息。这种模式经常用在会根据上下文变化的表单上,每次只显示对用户有用的内容。它通常会和扩展动画或滑出动画同时使用。表单中内容很多时,也可以使用这种方法,避免用户填写不必要的信息。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/976322161.png" alt="idea043.png" /></p>
<h2 id="44-降低使用门槛">44. 降低使用门槛</h2>
<blockquote>
<p>告诉用户使用产品做什么时,不要把饼画得太大,容易把用户吓跑。研究表明,相比完成一个大任务,人们普遍更容易完成一系列相互关联的小任务。所以程序可以将一个大任务分成一系列小任务,并引导用户一步步达成。以约会网站为例,可以先让用户看看周围都有谁在使用,再让用户介绍自己,再为他提供约会的建议等等,不要一开始就让用户联想到婚姻和人生幸福。再以定价举例,用户更容易接受按月支付而不是按年支付。这种策略也是在暗示用户「没有约束」,用户会觉得他们可以在任何时间离开,让用户更容易接受产品。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1013845713.png" alt="idea044.png" /></p>
<h2 id="45-提供非模态的反馈">45. 提供非模态的反馈</h2>
<blockquote>
<p>模态窗口或弹框会带给用户许多困扰。首先,模态窗口会阻止用户执行其他任务,也会遮挡窗口后的信息。其次,如果用户在执行某个任务过程中离开电脑,弹框会停止正在执行的任务。最后,模态窗口会打断那些正沉浸在任务中的用户。使用非模态的反馈方法,同样能抓住用户注意力,也不会带来其他问题。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3354592141.png" alt="idea045.png" /></p>
<h2 id="46-让一个控件提供多个功能">46. 让一个控件提供多个功能</h2>
<blockquote>
<p>简单的设计让产品好用。太复杂的页面会消耗用户有限的注意力,页面越复杂,可用性问题越多。简化页面的方法之一是让一个控件提供多个功能。常见的例子是,提供一个输入框查询所有字段,而不是提供多个查询条件。另一个例子是把当前评分和我要评分放在一个控件里。这种方法虽然简化了页面,但也降低了功能可见性,用户可能会找不到功能。因此它更适用于高级功能,用户要投入更多学习成本。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2195950134.png" alt="idea046.png" /></p>
<h2 id="47-给图标增加文本标签">47. 给图标增加文本标签</h2>
<blockquote>
<p>一个图标可能有多个含义,和文字结合,可以消除歧义。以向下箭头为例,它表示下移,降低优先级,还是下载?「X」又意味着删除、禁用还是关闭?为了使图标更易懂,请为它们加上说明文字。如果空间不足必须去掉文字,也要让用户有办法一次显示所有图标的含义(而不是悬停在每个图标上单独显示)。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2369646464.png" alt="idea047.png" /></p>
<h2 id="48-使用自然语言">48. 使用自然语言</h2>
<blockquote>
<p>自然语言是非正式、对话式的交流方式,而非严格、正式的文本。计算机要能更好地理解(或看起来理解)和使用自然语言。这有两点要求。第一,计算机要能理解自然语言的含义;第二,计算机反馈的信息也得是自然语言。虽然第一点的技术还未成熟,但已经有一些很有前景的案例,比如使用谷歌搜索「多伦多天气」,又比如Firefox和Siri命令。至于第二点,给计算机点提示,它们能将语言转换的自然点(这点需要更多测试)。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3921792750.png" alt="idea048.png" /></p>
<h2 id="49-免费试用">49. 免费试用</h2>
<blockquote>
<p>免费试用是提高转化率的策略。提供免费试用服务,比如样章、演示、产品试用或一些免费的正版内容等,可以诱导潜在消费者购买完整的内容。恰到好处的试用服务,是激励用户的最佳途径。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/519816579.png" alt="idea049.png" /></p>
<h2 id="50-安抚用户">50. 安抚用户</h2>
<blockquote>
<p>在销售页末尾,安抚你的用户,比如:航运免费、支付安全、可以随时退出,没有任何风险。让他们别担心。这种策略绝对值得一试。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2664551711.png" alt="idea050.png" /></p>
<h2 id="相关部分">相关部分</h2>
<ol>
<li><a href="/2014-08-05/good-ui-01.html">简洁明了的UI交互手册(1)</a></li>
<li><a href="/2014-08-08/good-ui-02.html">简洁明了的UI交互手册(2)</a></li>
<li><a href="/2014-08-09/good-ui-03.html">简洁明了的UI交互手册(3)</a></li>
<li><a href="/2014-08-09/good-ui-04.html">简洁明了的UI交互手册(4)</a></li>
<li><a href="/2014-08-13/good-ui-05.html">简洁明了的UI交互手册(5)</a></li>
<li><a href="/2015-03-30/good-ui-06.html">简洁明了的UI交互手册(6)</a></li>
<li><a href="/2015-07-03/good-ui-07.html">简洁明了的UI交互手册(7)</a></li>
<li><a href="/2015-07-09/good-ui-08.html">简洁明了的UI交互手册(8)</a></li>
</ol>
<p>以上总结来自<a href="http://www.goodui.org/">GoodUI</a>,部分翻译来源网络。</p>
简洁明了的UI交互手册(31-40)
2014-08-09T00:00:00+00:00
http://wangdaodao.github.io/2014-08-09/good-ui-04
<h2 id="31-区分视觉层次">31. 区分视觉层次</h2>
<blockquote>
<p>好的视觉层次能够区分页面中哪些元素重要,哪些次要。要做到层次分明,可以从对齐、间距、颜色、色调、缩进、字体大小、元素大小等视觉语言入手,将它们运用得当,用户就能顺畅阅读。层次分明的页面,能让用户放慢速度,从上到下细细浏览。虽然这样他们要花较多时间在页面上,但能获取到更多信息。就像一场旅行,你可以走高速路,更快地到达目的地,也可以放慢脚步欣赏沿途风景。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3144303840.png" alt="idea031.png" /></p>
<h2 id="32-将相似的功能放在一起">32. 将相似的功能放在一起</h2>
<blockquote>
<p>将相似的功能放在一起是非常基本的原则。大部分人都知道,刀和叉、打开文件和关闭文件要放在一起。将相似功能放在一起符合逻辑,也尊重人类的认知习惯。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2994624146.png" alt="idea032.png" /></p>
<h2 id="33-及时校验">33. 及时校验</h2>
<blockquote>
<p>在处理表单时,最好及时检测是否存在错误,并显示检测结果。这样用户可以立即通过提示的错误信息(一般放在字段右边)调整内容。反之,等到表单提交后才验证并反馈错误信息,就需要用户做一些额外的记忆和操作。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1719063319.png" alt="idea033.png" /></p>
<h2 id="34-放宽对输入的要求">34. 放宽对输入的要求</h2>
<blockquote>
<p>对用户输入的数据,尽量放宽限制。这样做程序会显得更人性化,页面也更友好。比如程序可以支持多种格式的电话号码,带扩号、带破折号、带空格,带区号或不带区号等等。开发起来会复杂一点,但对用户来说能减少很多工作。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/432444550.png" alt="idea034.png" /></p>
<h2 id="35-适当营造紧迫氛围">35. 适当营造紧迫氛围</h2>
<blockquote>
<p>如果我们希望用户立即行动,可以营造一种紧迫的氛围。这种方法暗示着资源紧张,或活动时间有限,今天可以买,明天就没了。这种策略也许有一些争议,但仍然可用,只要它是诚实、有效的。但不要为了营销而制造紧迫的假象,因为有可能会弄巧成拙,带来负面影响。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/353587702.png" alt="idea035.png" /></p>
<h2 id="36-适当尝试饥饿营销">36. 适当尝试饥饿营销</h2>
<blockquote>
<p>物以稀为贵。通过这种方式,用户会感觉东西再不买就没有了。想想批发和限量版商品的价格差距有多大。还有一些批发商或大型零售商一开始只提供有限数量的商品,直到卖外后才再生产新的一批。但是在软件行业,我们经常忽视这种策略,因为软件产品容易拷贝复制,不会缺货。其实软件产品也可以采用这种策略,比如限制网络研讨会的门票数量,或者限制产品每月服务的人数上限等等。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1969240434.png" alt="idea036.png" /></p>
<h2 id="37-让用户选择而不是填写">37. 让用户选择,而不是填写</h2>
<blockquote>
<p>心理学研究表明,用户更擅长从一堆东西中识别出某样东西,而不是靠记忆来回想。前者只要我们稍微回忆,并通过一些线索就能完成,后者则需要我们全面检索自己的大脑。这就是为什么客观题比主观题更好答。所以在页面上提供选项让用户选择,比让他们想半天后自己填写要好。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1502674196.png" alt="idea037.png" /></p>
<h2 id="38-增大点击区域">38. 增大点击区域</h2>
<blockquote>
<p>把链接、按钮、窗体的尺寸做大,更容易点击。根据费茨定律,使用鼠标等设备来点击一个特定区域需要点时间,如果元素比较小,就更费劲了。因此最好还是把表单字段、按钮和链接做大点。或者可以大小不变,但可点击区域增大。一个典型的例子就是手机设备上的文本链接和导航菜单,在很宽范围内点击都有效。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1090323386.png" alt="idea038.png" /></p>
<h2 id="39-优化页面加载速度不要让用户等待">39. 优化页面加载速度,不要让用户等待</h2>
<blockquote>
<p>速度很重要。页面加载速度和响应用户操作的速度对用户是否继续使用有决定性的影响。有人提出,每增加一秒等待都可能导致用户放弃,降低转化率。因此一种办法是通过优化代码和图像来减少加载时间,还有一种办法是运用心理学原理让用户觉得时间没有那么长。使用进度条就是一个例子,或者在加载数据时让用户做点什么事(比如把传送带的位置设计远一点,让用户多走一段距离,也好过让用户在传送带旁边抖脚等待)。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/4249433816.png" alt="idea039.png" /></p>
<h2 id="40-支持快捷键">40. 支持快捷键</h2>
<blockquote>
<p>高频率使用的程序应该为高级用户以及那些长时间使用的用户多做考虑。人们需要更高效地执行重复任务,而快捷键是其中一种方法,它能大大提高工作效率。比如使用J键和K键来前进和后退的方法已经被诸如Gmail、Google阅读器、Twitter、Tumblr等产品广泛使用。按钮固然好,但快捷键能锦上添花。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2982606754.png" alt="idea040.png" /></p>
<h2 id="相关部分">相关部分</h2>
<ol>
<li><a href="/2014-08-05/good-ui-01.html">简洁明了的UI交互手册(1)</a></li>
<li><a href="/2014-08-08/good-ui-02.html">简洁明了的UI交互手册(2)</a></li>
<li><a href="/2014-08-09/good-ui-03.html">简洁明了的UI交互手册(3)</a></li>
<li><a href="/2014-08-09/good-ui-04.html">简洁明了的UI交互手册(4)</a></li>
<li><a href="/2014-08-13/good-ui-05.html">简洁明了的UI交互手册(5)</a></li>
<li><a href="/2015-03-30/good-ui-06.html">简洁明了的UI交互手册(6)</a></li>
<li><a href="/2015-07-03/good-ui-07.html">简洁明了的UI交互手册(7)</a></li>
<li><a href="/2015-07-09/good-ui-08.html">简洁明了的UI交互手册(8)</a></li>
</ol>
<p>以上总结来自<a href="http://www.goodui.org/">GoodUI</a>,部分翻译来源网络。</p>
简洁明了的UI交互手册(21-30)
2014-08-09T00:00:00+00:00
http://wangdaodao.github.io/2014-08-09/good-ui-03
<h2 id="21-使用平滑的过场动画">21. 使用平滑的过场动画</h2>
<blockquote>
<p>用户操作时,页面元素会经常显示、隐藏、移动、放大缩小等。为这些元素增加淡入淡出等过渡动画,能让用户更容易理解刚才的操作带来了什么变化,并且给予用户足够的时间来观察变化的大小和位置。要注意的是,过场动画不宜过长,尽量控制在0.5秒以内,否则部分用户会不耐烦。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3478743755.png" alt="idea021.png" /></p>
<h2 id="22-循序渐进地引导不要直接让用户注册">22. 循序渐进地引导,不要直接让用户注册</h2>
<blockquote>
<p>与其让用户仓促注册,不如让用户先进行一些体验式的操作,通过这些操作向用户证明产品的价值。这样的初始互动可以向用户展示产品功能,一旦用户看到它们,会更乐意注册。这种循序渐进的引导尽量推迟用户注册的时间,并允许用户在没有注册的情况下进行一些个性化设置。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3254032301.png" alt="idea022.png" /></p>
<h2 id="23-不要使用太多边框">23. 不要使用太多边框</h2>
<blockquote>
<p>注意力是宝贵的资源,我们在特定时间内拥有的注意力有限。边框可以定义一个非常清楚和准确的空间,但是它们也会吸引和分散用户的注意力。为了不过多吸引用户注意力,在排版时我们可以通过缩小组内元素边距、增加组和组之间边距、使用不同背景色、将文字对齐等方法来划分区域。当使用UI设计工具时,我们很容易在页面上拖拽出许多区域,这些区域多了就会杂乱无章,所以我们又会使用线条来分隔它们,从而导致问题。但使用上面说的那些方式,能让页面更简洁清晰。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1207524283.png" alt="idea023.png" /></p>
<h2 id="24-展示产品带给用户的好处">24. 展示产品带给用户的好处</h2>
<blockquote>
<p>用户往往关心产品能给他们带来什么好处,而不是产品有什么特性。知道产品带来的好处,能让他们更清楚地评估产品的价值。Chris Guillebeau 在《The $100 Startup》中写到,人们期望能拥有更多的:爱、金钱、认同感和自由支配的时间,同时有更少的:压力、冲突、烦心事和不确定性。所以我相信,在展示产品时,告诉他们能获得什么好处很有必要。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/981389747.png" alt="idea024.png" /></p>
<h2 id="25-设计零数据页面">25. 设计零数据页面</h2>
<blockquote>
<p>页面上经常需要使用不同方式来呈现不同数量的数据,从0,1,10,100到10000+等。最常见的问题是在程序第一次使用还没有任何数据时,页面该如何呈现。我们经常忘记设计这种初始状态。当程序初始没有任何数据时,用户看到的就是一片空白,此时用户可能不知道该进行哪些操作。利用这个页面可以让用户学习和熟悉如何使用程序,让用户跨越最初的障碍。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/19904680.png" alt="idea025.png" /></p>
<h2 id="26-默认帮用户选中服务">26. 默认帮用户选中服务</h2>
<blockquote>
<p>默认帮用户选中服务,意味着用户如果要使用服务,不需要做额外的操作。与此相反的做法是默认不选中服务,用户需要时再打开。前者有两个好处。首先,它缓解了行动的阻力,因为用户不需要做任何事。其次,这也是某种形式的推荐,它暗示用户「其他人都这么做,你也可以这样做」。当然,这种方式也存在争议,有强迫用户的感觉。有一些不道德的公司,会刻意降低文本的可读性,或使用双重否定等混乱的文本来迷惑用户,让用户不知道打开了什么服务。因此若选择这种方法,文本务必清晰易懂,好让用户知道开启的是什么服务。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2397007186.png" alt="idea026.png" /></p>
<h2 id="27-页面设计尽量保持一致">27. 页面设计尽量保持一致</h2>
<blockquote>
<p>页面设计时尽量保持一致可能是唐纳德·诺曼最有名的原则,它可以减少用户的学习成本。当我们按下按钮,或移动滑块,我们期望这些元素的行为和以往见到的一致。如果不一致,我们将被迫重新学习。要做到一致性,得在很多方面下功夫,包括:颜色、方向、行为、位置、大小、形状、标签和语言等。但要注意,在一些特定场景下打破一致性的做法仍然有价值。不一致的元素或行为会让用户下意识的关注——如果想让用户注意,可以尝试这么做。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1218226173.png" alt="idea027.png" /></p>
<h2 id="28-使用恰当的默认值">28. 使用恰当的默认值</h2>
<blockquote>
<p>表单字段提供恰当的默认值能大大减少用户工作,为他们节省时间。一个糟糕的设计会反复要求用户提供数据,哪怕他们已经在过去重复提供多次。对用户来说,工作越少越好。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3449766518.png" alt="idea028.png" /></p>
<h2 id="29-遵循用户习惯">29. 遵循用户习惯</h2>
<blockquote>
<p>如果我们在设计上保存一致,用户就不用反复学习。另一方面,如果我们遵循用户的使用习惯,也能减少用户的学习成本。遵循习惯,用户不用思考就知道在屏幕右上角关闭窗口,或者知道点击设置按钮后会发生什么。当然,习惯有可能会过时,随着时间推移,同样的操作可能会被赋予新的含义。要注意,只有给用户带来的好处大于弊端时,才能打破用户习惯。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3989873558.png" alt="idea029.png" /></p>
<h2 id="30-告诉用户产品能帮他避免损失">30. 告诉用户产品能帮他避免损失</h2>
<blockquote>
<p>我们喜欢成功,厌恶失败。心理学研究表明,我们更倾向于避免损失而不是获取收益。这一结论也可应用在产品设计和推广中。试图说明产品会帮助客户维护现有的利益、财富或社会地位,可能好过告诉用户这个产品能给他们带来哪些新利益。比如保险公司,是强调产品能帮助用户避免失去财产好,还是强调出事后能够得到大笔赔偿好呢?</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/626849195.png" alt="idea030.png" /></p>
<h2 id="相关部分">相关部分</h2>
<ol>
<li><a href="/2014-08-05/good-ui-01.html">简洁明了的UI交互手册(1)</a></li>
<li><a href="/2014-08-08/good-ui-02.html">简洁明了的UI交互手册(2)</a></li>
<li><a href="/2014-08-09/good-ui-03.html">简洁明了的UI交互手册(3)</a></li>
<li><a href="/2014-08-09/good-ui-04.html">简洁明了的UI交互手册(4)</a></li>
<li><a href="/2014-08-13/good-ui-05.html">简洁明了的UI交互手册(5)</a></li>
<li><a href="/2015-03-30/good-ui-06.html">简洁明了的UI交互手册(6)</a></li>
<li><a href="/2015-07-03/good-ui-07.html">简洁明了的UI交互手册(7)</a></li>
<li><a href="/2015-07-09/good-ui-08.html">简洁明了的UI交互手册(8)</a></li>
</ol>
<p>以上总结来自<a href="http://www.goodui.org/">GoodUI</a>,部分翻译来源网络。</p>
简洁明了的UI交互手册(11-20)
2014-08-08T00:00:00+00:00
http://wangdaodao.github.io/2014-08-08/good-ui-02
<h2 id="11-对比要鲜明">11. 对比要鲜明</h2>
<blockquote>
<p>好的界面重点突出,与周围的元素区分开。突出重点有很多种方式。你可以让某个元素使用深色调,和其它浅色调元素区分开;还可以为元素增加阴影和渐变来突然对比;最后,你也可以选择互补色(比如黄色和紫色)来提高对比度。综合使用以上方法,就能让重点从其它元素中凸显。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3701901094.png" alt="idea011.png" /></p>
<h2 id="12-提供个性化介绍">12. 提供个性化介绍</h2>
<blockquote>
<p>在介绍产品时,增加一些个性化的信息(比如原产地),会让用户觉得产品友好和亲近。通常,指明产品在哪里被制造还能够让用户下意识地认为产品有较好的质量。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3649167844.png" alt="idea012.png" /></p>
<h2 id="13-精简表单字段">13. 精简表单字段</h2>
<blockquote>
<p>人类生性懒惰,没有人喜欢填写一堆表单。表单中每个字段都有可能让用户放弃填写。每个人打字速读不同,在移动设备上打字更是一件苦差事。尽可能删除没必要的字段,只保留那些有必要的。如果真的有很多信息要用户填写,试着将它们分散在不同页面,一页提交后再填写下一页。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3594189299.png" alt="idea013.png" /></p>
<h2 id="14-直接放出选项">14. 直接放出选项</h2>
<blockquote>
<p>每一个下拉菜单,都需要额外操作才能显示其中的选项。如果某个选择对用户来说必不可少,那么最好不用下拉菜单,直接把选项列出来让用户选择。下拉菜单可以用在那些可预测、不需要学习成本的地方(比如日期、省份等),偶尔还能用在一些需要反复操作的地方(比如操作菜单)。总之,谨慎使用下拉菜单,重要选择最好不要使用下拉菜单。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1729073804.png" alt="idea014.png" /></p>
<h2 id="15-暗示页面还有下文">15. 暗示页面还有下文</h2>
<blockquote>
<p>可滚动的长页面挺好,但是请注意,如果用户看到页面下方一片空白,会认为网页已经到达底部,哪怕后面有内容也会被忽略。如果你的页面需要滚动才能看到全部内容,那么,你需要建立一个视觉模式或节奏,让用户可以感知到后面还有内容。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3420691015.png" alt="idea015.png" /></p>
<h2 id="16-不要放太多链接">16. 不要放太多链接</h2>
<blockquote>
<p>为了满足不同用户的需要,我们可能会在页面上增加一个又一个链接。但如果你的目的是想让用户点击页面下方那个重要按钮,每增加一个链接,都会降低他点击按钮的概率。所以请注意网页上链接的数量,尽可能平衡链接和按钮间的关系。删除多余的链接可以增加用户点击按钮的概率。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1600617099.png" alt="idea016.png" /></p>
<h2 id="17-显示元素状态">17. 显示元素状态</h2>
<blockquote>
<p>在页面直接显示元素状态。比如邮件分已读、未读,电子账单有已支付和未支付状态等等。告诉用户这些状态很有必要,它们还可以帮助用户了解自己过去的操作是否已经成功,接下来应该采取什么行动。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3585313004.png" alt="idea017.png" /></p>
<h2 id="18-把好处写在按钮标题上">18. 把好处写在按钮标题上</h2>
<blockquote>
<p>想象页面上有两个简单的按钮。一个按钮告诉你点击它「获取折扣」,另一个则是「注册」。我打赌大部分人会选择前者,因为点击第二个看起来没有任何价值,相反,还会联想到冗长的表单。也就是说,让用户感受到好处的按钮更有可能被点击。另外,不一定要把这些信息作为按钮标题,也可以把它们放在按钮旁边。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2665805700.png" alt="idea018.png" /></p>
<h2 id="19-直接在元素上操作">19. 直接在元素上操作</h2>
<blockquote>
<p>直接在元素上操作最直观明了。以数据列表为例,我们通常把对条目的操作直接放在条目上,而不是放在列表外。另外,单击某个条目可以直接进入编辑状态。这种方式比选中条目再点击按钮的方式要简便。当然,对于没有上下文的通用操作(比如添加按钮)则不必如此。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2670362929.png" alt="idea019.png" /></p>
<h2 id="20-在产品引导页直接提供注册表单">20. 在产品引导页直接提供注册表单</h2>
<blockquote>
<p>在传递产品价值的引导页中,直接提供注册表单比点击按钮再弹出表单要好很多。首先,减少了额外的步骤,流程变得简洁,节省了用户时间。其次,在一开始就显示注册表单,可以让用户直观的感受到要填写的内容没多少,不会花时间。当然,这种情况只适合在表单非常简单的情况。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1919678801.png" alt="idea020.png" /></p>
<h3 id="相关部分">相关部分</h3>
<ol>
<li><a href="/2014-08-05/good-ui-01.html">简洁明了的UI交互手册(1)</a></li>
<li><a href="/2014-08-08/good-ui-02.html">简洁明了的UI交互手册(2)</a></li>
<li><a href="/2014-08-09/good-ui-03.html">简洁明了的UI交互手册(3)</a></li>
<li><a href="/2014-08-09/good-ui-04.html">简洁明了的UI交互手册(4)</a></li>
<li><a href="/2014-08-13/good-ui-05.html">简洁明了的UI交互手册(5)</a></li>
<li><a href="/2015-03-30/good-ui-06.html">简洁明了的UI交互手册(6)</a></li>
<li><a href="/2015-07-03/good-ui-07.html">简洁明了的UI交互手册(7)</a></li>
<li><a href="/2015-07-09/good-ui-08.html">简洁明了的UI交互手册(8)</a></li>
</ol>
<p>以上总结来自<a href="http://www.goodui.org/">GoodUI</a>,部分翻译来源网络。</p>
简洁明了的UI交互手册(01-10)
2014-08-05T00:00:00+00:00
http://wangdaodao.github.io/2014-08-05/good-ui-01
<h2 id="1-尽量使用单列布局">1. 尽量使用单列布局</h2>
<blockquote>
<p>单列布局能更好地引导用户自上而下阅读,而多列布局则会分散用户的注意力。最好使用有逻辑的叙述来引导用户,并在文末提供一个呼吁用户行动的按钮。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/682930710.png" alt="idea001.png" /></p>
<h2 id="2-提供礼物不要急着推销产品">2. 提供礼物,不要急着推销产品</h2>
<blockquote>
<p>展现友好的姿态,比如给用户一份精美的小礼品。这种方式建立在互惠基础上,能有效地获得用户好感,并让你在接下来的活动中更加顺利。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2033509705.png" alt="idea002.png" /></p>
<h2 id="3-合并相似功能">3. 合并相似功能</h2>
<blockquote>
<p>在项目过程中,我们很容易创建重复的模块、元素或功能。而通常情况下,模块越多用户学习成本越高。所以请重构你的页面,合并相似功能,让它更精简。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/3071200020.png" alt="idea003.png" /></p>
<h2 id="4-来自用户的评价好过自吹自擂">4. 来自用户的评价好过自吹自擂</h2>
<blockquote>
<p>用户好评能有效地提高转化率。当潜在用户看到其他用户讨论、赞同你的产品时,更有可能采取行动。所以尽量提供证据,让这些评论真实可信。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2543689983.png" alt="idea004.png" /></p>
<h2 id="5-重复关键操作">5. 重复关键操作</h2>
<blockquote>
<p>这种方法适用于页面很长或是分页的情况。我们不希望在一个页面中反复出现相同的信息,但当页面足够长的时候这种重复就有必要了。我们可以在页面顶部放置一个按钮,然后在页面底部再放置一个更显眼的按钮。当人们到达底部时,会停下来思考下一步应该做什么,这时候他可以点击底部的按钮,而不用返回顶部进行操作。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2750921722.png" alt="idea005.png" /></p>
<h2 id="6-区分可点击和被选中的样式">6. 区分「可点击」和「被选中」的样式</h2>
<blockquote>
<p>一些视觉风格,比如颜色,层次的区分和对比,可以更好地帮助用户使用产品,让用户知道自己处在什么页面,可以跳转到哪些页面。要达到这样的效果,你需要将可点击的元素(链接、按钮)、被选中的元素和普通的文字以相同的规则区分开来。在下面的案例中,我将「可点击」元素统一指定为蓝色,「被选中」元素统一指定为黑色,这样的设计让用户更容易学习和使用。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2821671630.png" alt="idea006.png" /></p>
<h2 id="7-给出推荐选项">7. 给出推荐选项</h2>
<blockquote>
<p>当有多个选择时,提供一个推荐项是不错的做法。一些心理学研究表明,用户面临的选择越多时,越难做出决定。为了克服这个问题,我们可以高亮或强调某个选项,来帮助用户做出选择。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2071367801.png" alt="idea007.png" /></p>
<h2 id="8-提供撤销操作来替代确认提醒">8. 提供撤销操作来替代确认提醒</h2>
<blockquote>
<p>撤销比确认提醒更符合人类的本能,而且操作起来更顺畅平滑。我认为用户大多数操作都是正确的,只有在极少数情况下才会误操作,所以在用户每次操作时都进行确认提醒很不人性化。提供撤销操作来替代确认提醒,可以让用户有一切控制在自己手中的感觉。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/446107322.png" alt="idea008.png" /></p>
<h2 id="9-为明确的目标用户而不是全部用户设计">9. 为明确的目标用户,而不是全部用户设计</h2>
<blockquote>
<p>你的目标是全体用户,还是某个明确的用户群体?显然应该是后者,你需要明确你的产品为谁服务。通过不断了解目标用户的需求和标准,你能够和他们有更多的交流机会,并且为他们提供更优质的服务。这种策略带来的风险是,你可能会让自己的功能变得不那么全面,也缩小了潜在用户的范围。但这种做法能赢得目标用户的信任。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/2266425399.png" alt="idea009.png" /></p>
<h2 id="10-直截了当不要优柔寡断">10. 直截了当,不要优柔寡断</h2>
<blockquote>
<p>你可以用不确定的语气表达,也可以通过很自信的方式表达。如果你的语气以「可能」、「也许」、「有兴趣?」和「要吗?」等不确定的表述用语结尾,那么你完全可以把语气变得坚定点。不过有的时候适当放松措词能给用户更多思考空间。</p>
</blockquote>
<p><img src="https://wangdaodao.com/usr/uploads/2019/01/1275236665.png" alt="idea010.png" /></p>
<h2 id="相关部分">相关部分</h2>
<ol>
<li><a href="/2014-08-05/good-ui-01.html">简洁明了的UI交互手册(1)</a></li>
<li><a href="/2014-08-08/good-ui-02.html">简洁明了的UI交互手册(2)</a></li>
<li><a href="/2014-08-09/good-ui-03.html">简洁明了的UI交互手册(3)</a></li>
<li><a href="/2014-08-09/good-ui-04.html">简洁明了的UI交互手册(4)</a></li>
<li><a href="/2014-08-13/good-ui-05.html">简洁明了的UI交互手册(5)</a></li>
<li><a href="/2015-03-30/good-ui-06.html">简洁明了的UI交互手册(6)</a></li>
<li><a href="/2015-07-03/good-ui-07.html">简洁明了的UI交互手册(7)</a></li>
<li><a href="/2015-07-09/good-ui-08.html">简洁明了的UI交互手册(8)</a></li>
</ol>
<p>以上总结来自<a href="http://www.goodui.org/">GoodUI</a>,部分翻译来源网络。</p>
NEC:CSS 规范
2014-08-01T00:00:00+00:00
http://wangdaodao.github.io/2014-08-01/nec-css
<h2 id="分类方法">分类方法</h2>
<h3 id="css文件的分类和引用顺序">CSS文件的分类和引用顺序</h3>
<p>通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类。</p>
<p>我们按照CSS的性质和用途,将CSS文件分成“<strong>公共型样式</strong>”、“<strong>特殊型样式</strong>”、“<strong>皮肤型样式</strong>”,并以此顺序引用(按需求决定是否添加版本号)。</p>
<ol>
<li>公共型样式:包括了以下几个部分:“标签的重置和设置默认值”、“统一调用背景图和清除浮动或其他需统一处理的长样式”、“网站通用布局”、“通用模块和其扩展”、“元件和其扩展”、“功能类样式”、“皮肤类样式”。</li>
<li>特殊型样式:当某个栏目或页面的样式与网站整体差异较大或者维护率较高时,可以独立引用一个样式:“特殊的布局、模块和元件及扩展”、“特殊的功能、颜色和背景”,也可以是某个大型控件或模块的独立样式。</li>
<li>
<p>皮肤型样式:如果产品需要换肤功能,那么我们需要将颜色、背景等抽离出来放在这里。</p>
<link href="css/global.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/skin.css" rel="stylesheet" type="text/css" />
</li>
</ol>
<h3 id="css内部的分类及其顺序">CSS内部的分类及其顺序</h3>
<ol>
<li>重置(<em>reset</em>)和默认(<em>base</em>)(<em>tags</em>):消除默认样式和浏览器差异,并设置部分标签的初始样式,以减少后面的重复劳动!你可以根据你的网站需求设置!</li>
<li>统一处理:建议在这个位置统一调用背景图(这里指多个布局或模块或元件共用的图)和清除浮动(这里指通用性较高的布局、模块、元件内的清除)等统一设置处理的样式!</li>
<li>布局(<em>grid</em>)(.g-):将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等!</li>
<li>模块(<em>module</em>)(.m-):通常是一个语义化的可以重复使用的较大的整体!比如导航、登录、注册、各种列表、评论、搜索等!</li>
<li>元件(<em>unit</em>)(.u-):通常是一个不可再分的较为小巧的个体,通常被重复用于各种模块中!比如按钮、输入框、loading、图标等!</li>
<li>功能(<em>function</em>)(.f-):为方便一些常用样式的使用,我们将这些使用率较高的样式剥离出来,按需使用,通常这些选择器具有固定样式表现,比如清除浮动等!不可滥用!</li>
<li>皮肤(<em>skin</em>)(.s-):如果你需要把皮肤型的样式抽离出来,通常为文字色、背景色(图)、边框色等,非换肤型网站通常只提取文字色!非换肤型网站不可滥用此类!</li>
<li>状态(.z-):为状态类样式加入前缀,统一标识,方便识别,她只能组合使用或作为后代出现(.u-ipt.z-dis{},.m-list li.z-sel{}),具体详见命名规则的扩展相关项。</li>
</ol>
<p>功能类和皮肤类样式为表现化的样式,请不要滥用!以上顺序可以按需求适当调整。</p>
<hr />
<h2 id="最佳实践">最佳实践</h2>
<h3 id="统一语义理解和命名">统一语义理解和命名</h3>
<table>
<caption>布局(.g-)</caption>
<thead>
<tr>
<th>语义</th>
<th>命名</th>
<th>简写</th>
</tr>
</thead>
<tbody>
<tr>
<td>文档</td>
<td>doc</td>
<td>doc</td>
</tr>
<tr>
<td>头部</td>
<td>head</td>
<td>hd</td>
</tr>
<tr>
<td>主体</td>
<td>body</td>
<td>bd</td>
</tr>
<tr>
<td>尾部</td>
<td>foot</td>
<td>ft</td>
</tr>
<tr>
<td>主栏</td>
<td>main</td>
<td>mn</td>
</tr>
<tr>
<td>主栏子容器</td>
<td>mainc</td>
<td>mnc</td>
</tr>
<tr>
<td>侧栏</td>
<td>side</td>
<td>sd</td>
</tr>
<tr>
<td>侧栏子容器</td>
<td>sidec</td>
<td>sdc</td>
</tr>
<tr>
<td>盒容器</td>
<td>wrap/box</td>
<td>wrap/box</td>
</tr>
</tbody>
</table>
<table>
<caption>模块(.m-)、元件(.u-)</caption>
<thead>
<tr>
<th>语义</th>
<th>命名</th>
<th>简写</th>
</tr>
</thead>
<tbody>
<tr>
<td>导航</td>
<td>nav</td>
<td>nav</td>
</tr>
<tr>
<td>子导航</td>
<td>subnav</td>
<td>snav</td>
</tr>
<tr>
<td>面包屑</td>
<td>crumb</td>
<td>crm</td>
</tr>
<tr>
<td>菜单</td>
<td>menu</td>
<td>menu</td>
</tr>
<tr>
<td>选项卡</td>
<td>tab</td>
<td>tab</td>
</tr>
<tr>
<td>标题区</td>
<td>head/title</td>
<td>hd/tt</td>
</tr>
<tr>
<td>内容区</td>
<td>body/content</td>
<td>bd/ct</td>
</tr>
<tr>
<td>列表</td>
<td>list</td>
<td>lst</td>
</tr>
<tr>
<td>表格</td>
<td>table</td>
<td>tb</td>
</tr>
<tr>
<td>表单</td>
<td>form</td>
<td>fm</td>
</tr>
<tr>
<td>热点</td>
<td>hot</td>
<td>hot</td>
</tr>
<tr>
<td>排行</td>
<td>top</td>
<td>top</td>
</tr>
<tr>
<td>登录</td>
<td>login</td>
<td>log</td>
</tr>
<tr>
<td>标志</td>
<td>logo</td>
<td>logo</td>
</tr>
<tr>
<td>广告</td>
<td>advertise</td>
<td>ad</td>
</tr>
<tr>
<td>搜索</td>
<td>search</td>
<td>sch</td>
</tr>
<tr>
<td>幻灯</td>
<td>slide</td>
<td>sld</td>
</tr>
<tr>
<td>提示</td>
<td>tips</td>
<td>tips</td>
</tr>
<tr>
<td>帮助</td>
<td>help</td>
<td>help</td>
</tr>
<tr>
<td>新闻</td>
<td>news</td>
<td>news</td>
</tr>
<tr>
<td>下载</td>
<td>download</td>
<td>dld</td>
</tr>
<tr>
<td>注册</td>
<td>regist</td>
<td>reg</td>
</tr>
<tr>
<td>投票</td>
<td>vote</td>
<td>vote</td>
</tr>
<tr>
<td>版权</td>
<td>copyright</td>
<td>cprt</td>
</tr>
<tr>
<td>结果</td>
<td>result</td>
<td>rst</td>
</tr>
<tr>
<td>标题</td>
<td>title</td>
<td>tt</td>
</tr>
<tr>
<td>按钮</td>
<td>button</td>
<td>btn</td>
</tr>
<tr>
<td>输入</td>
<td>input</td>
<td>ipt</td>
</tr>
</tbody>
</table>
<table>
<caption>功能(.f-)</caption>
<thead>
<tr>
<th>语义</th>
<th>命名</th>
<th>简写</th>
</tr>
</thead>
<tbody>
<tr>
<td>浮动清除</td>
<td>clearboth</td>
<td>cb</td>
</tr>
<tr>
<td>向左浮动</td>
<td>floatleft</td>
<td>fl</td>
</tr>
<tr>
<td>向右浮动</td>
<td>floatright</td>
<td>fr</td>
</tr>
<tr>
<td>内联块级</td>
<td>inlineblock</td>
<td>ib</td>
</tr>
<tr>
<td>文本居中</td>
<td>textaligncenter</td>
<td>tac</td>
</tr>
<tr>
<td>文本居右</td>
<td>textalignright</td>
<td>tar</td>
</tr>
<tr>
<td>文本居左</td>
<td>textalignleft</td>
<td>tal</td>
</tr>
<tr>
<td>垂直居中</td>
<td>verticalalignmiddle</td>
<td>vam</td>
</tr>
<tr>
<td>溢出隐藏</td>
<td>overflowhidden</td>
<td>oh</td>
</tr>
<tr>
<td>完全消失</td>
<td>displaynone</td>
<td>dn</td>
</tr>
<tr>
<td>字体大小</td>
<td>fontsize</td>
<td>fs</td>
</tr>
<tr>
<td>字体粗细</td>
<td>fontweight</td>
<td>fw</td>
</tr>
</tbody>
</table>
<table>
<caption>皮肤(.s-)</caption>
<thead>
<tr>
<th>语义</th>
<th>命名</th>
<th>简写</th>
</tr>
</thead>
<tbody>
<tr>
<td>字体颜色</td>
<td>fontcolor</td>
<td>fc</td>
</tr>
<tr>
<td>背景</td>
<td>background</td>
<td>bg</td>
</tr>
<tr>
<td>背景颜色</td>
<td>backgroundcolor</td>
<td>bgc</td>
</tr>
<tr>
<td>背景图片</td>
<td>backgroundimage</td>
<td>bgi</td>
</tr>
<tr>
<td>背景定位</td>
<td>backgroundposition</td>
<td>bgp</td>
</tr>
<tr>
<td>边框颜色</td>
<td>bordercolor</td>
<td>bdc</td>
</tr>
</tbody>
</table>
<table>
<caption>状态(.z-)</caption>
<thead>
<tr>
<th>语义</th>
<th>命名</th>
<th>简写</th>
</tr>
</thead>
<tbody>
<tr>
<td>选中</td>
<td>selected</td>
<td>sel</td>
</tr>
<tr>
<td>当前</td>
<td>current</td>
<td>crt</td>
</tr>
<tr>
<td>显示</td>
<td>show</td>
<td>show</td>
</tr>
<tr>
<td>隐藏</td>
<td>hide</td>
<td>hide</td>
</tr>
<tr>
<td>打开</td>
<td>open</td>
<td>open</td>
</tr>
<tr>
<td>关闭</td>
<td>close</td>
<td>close</td>
</tr>
<tr>
<td>出错</td>
<td>error</td>
<td>err</td>
</tr>
<tr>
<td>不可用</td>
<td>disabled</td>
<td>dis</td>
</tr>
</tbody>
</table>
<hr />
<h2 id="优化方案">优化方案</h2>
<h3 id="图片本身的优化">图片本身的优化:</h3>
<ul>
<li>图像质量要求和图像文件大小决定你用什么格式的图片,用较小的图片文件呈现较好的图像质量。</li>
<li>当图片色彩过于丰富且无透明要求时,建议采用jpg格式并保存为较高质量。</li>
<li>当图片色彩过于丰富又有透明或半透明要求或阴影效果时,建议采用png32格式,并对IE6进行png8退化(或在不得已情况下使用滤镜)。</li>
<li>当图片色彩不太丰富时无论有无透明要求,请采用png8格式,大多数情况下建议采用这种格式。</li>
<li>当图片有动画时,只能使用gif格式。</li>
<li>你可以使用工具对图片进行再次压缩,但前提是不会影响色彩和透明。</li>
</ul>
<h3 id="多张图片的合并">多张图片的合并:</h3>
<ul>
<li>单个图标之间必须保留空隙,空隙大小由容器大小及显示方式决定。这样做的好处是既考虑了“容错性”又提高了图片的可维护性。</li>
<li>图标的排列方式,也由容器大小及显示方式决定。排列方式分为以下几种:横向排列(容器宽度有限)、纵向排列(容器高度有限)、斜线排列(容器宽高不限),靠左排列(容器背景居左)、靠右排列(容器背景居右)、水平居中排列(容器背景水平居中)、垂直居中排列(容器背景垂直居中)。</li>
<li>合并后图片大小不宜超过50K,建议大小在20K-50K之间。</li>
<li>为保证多次修改后的图片质量,请保留一份PSD原始图,修改和添加都在PSD中进行,最后导出png。</li>
</ul>
<h3 id="分类合并">分类合并:</h3>
<p>并不是把所有的图标都合并在一张图片里就是最好的,除了要控制图片大小之外还要注意以下方法。</p>
<ul>
<li>按照图片排列方式,把排列方式一样的图片进行合并,便于样式控制。</li>
<li>按照模块或元件,把同属于一个模块或元件的图片进行合并,方便模块或元件的维护。</li>
<li>按照图片大小,把大小一致或差不多的图片进行合并,可充分利用图片空间。</li>
<li>按照图片色彩,把色彩一致或差不多的图片进行合并,保证合并后图片的色彩不过于丰富,可防止色彩失真。</li>
</ul>
<h3 id="hack的避免">Hack的避免:</h3>
<ul>
<li>当避免的代价较大时,可以使用Hack而不避免,比如你需要增加很多HTML或多写很多CSS时会得不偿失。</li>
<li>丰富的实战经验可以帮助你了解那些常见问题并用多种不同的思路来避免它,所以经验和思维方法在这里显得很重要。</li>
<li>根据你自己的能力来解决Hack的问题,我们不建议你用一个自己都没有把握的方法来避免Hack,因为也许你这个方法本身存在你没有发现的问题。</li>
</ul>
<h3 id="如果css可以做到就不要使用js">如果CSS可以做到,就不要使用JS:</h3>
<ul>
<li>用CSS控制交互或视觉的变化,JS只需要更改className。</li>
<li>利用CSS一次性更改多个节点样式,避免多次渲染,提高渲染效率。</li>
<li>如果你的产品允许不兼容低版本浏览器,那么动画实现可以交给CSS。</li>
</ul>
<p>以上总结来自<a href="http://nec.netease.com/standard/css-sort.html">NEC-CSS</a></p>
JavaScript学习:RegExp 类型
2014-07-31T00:00:00+00:00
http://wangdaodao.github.io/2014-07-31/js-study-0018
<p>ECMAScript通过RegExp类型来支持正则表达式。使用下面类似Perl的语法,就可以创建一个正则表达式:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var expression = /pattern/flags;
</code></pre></div></div>
<p>其中的模式(pattern)部分可以是任意简单或复杂的正则表达式,可以包含字符类、限定符、分组、向前查找,以及反向引用。每个正则表达式都可带有一个或多个标志(flags),用以表明正则表达式的行为。正则表达式的匹配模式支持下列3个标志:</p>
<blockquote>
<p>g:表示全局(global)模式,即模式将被因用于所有字符串,而非在发现第一个匹配项时立即停止;<br />
i:表示区分大小写(case-insensitive)模式,即在确定匹配项时忽略模式与字符串的大小写;<br />
m:表示多行(multiline)模式,记载到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。</p>
</blockquote>
<p>因此,一个正则表达式就是一个模式与上述3个标志的组合体。不同组合产生不同的结果,如下面的例子所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//匹配字符串中所有"at"的实例
var pattern1 = /at/g;
//匹配第一个"bat"或"cat",不区分大小写
var pattern2 = /[bc]at/i;
//匹配所有以"at"结尾的3个字符串的组合,不区分大小写
var pattern3 = /.at/gi;
</code></pre></div></div>
<p>与其它语言中的正则表达式类似,模式中使用的所有元字符都必须转义。正则表达式中的元字符包括:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>( [ { \ ^ & | ) ? * + . ]}
</code></pre></div></div>
<p>这些元字符在正则表达式中都有一或多种特殊用途,因此如果想要匹配字符串中包含的这些字符,就必须对它们进行转义。下面给出几个例子:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//匹配第一个"bat"或"cat"
var pattern1 = /[bc]at/i;
//匹配第一个“[bc]at”,不区分大小写
var pattern2 = /\[bc\]at/i;
//匹配所有以"at"结尾的3个字符的组合,不区分大小写
var pattern3 = /.at/i;
//匹配所有".at",不区分大小写
var pattern4 = /\.at/i;
</code></pre></div></div>
<p>前面举的例子都是以字面量的形式来定义的正则表达式。另一种创建正则表达式的方式是使用RegExp构造函数,它接受两个参数:一个是要匹配的字符串模式,另一个是可选的标志字符串。可以使用字面量定义的任何表达式,都可以使用构造函数来定义,如下面的例子所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//匹配第一个“bat”或“cat”,不区分大小写
var pattern1 = /[bc]at/i;
//与pattern1相同,只不过是使用构造函数创建的
var pattern2 = new RegExp("[bc]at", "i");
</code></pre></div></div>
<p>pattern1和pattern2是两个完全等价的正则表达式。传递给RegExp构造函数的零个参数都是字符串(不能把正则表达式字面量传递个RegExp)构造函数。由于RegExt构造函数的模式参数是字符串,所以在某些情况下要对字符进行双重转义。所有元字符都必须双重转义,那些已经转义的字符也是如此,例如\n(字符\在字符串中通常被转义为\,而在正则表达式字符串中就会被变成\\)。下表列出了一些模式,左边是这些模式的字面量形式,右边是使用RegExt构造函数定义相同模式时使用的字符串。</p>
<table>
<tbody>
<tr>
<th>字面量模式</th>
<th>等价的字符串</th>
</tr>
<tr>
<td>/\[bc\]at/</td>
<td>“/\\[bc\\]at/”</td>
</tr>
<tr>
<td>/\.at/</td>
<td>“/\\.at/”</td>
</tr>
<tr>
<td>/name\/age/</td>
<td>“/name\\/age/”</td>
</tr>
<tr>
<td>/\d.\d{1,2}/</td>
<td>“/\\d.\\d{1,2}/”</td>
</tr>
<tr>
<td>/\w\\hello\\123/</td>
<td>“/\\w\\\\hello\\\\123/”</td>
</tr>
</tbody>
</table>
IXDC2014国际体验设计大会
2014-07-20T00:00:00+00:00
http://wangdaodao.github.io/2014-07-20/ixdc-2014
<p>感觉我参加的这个会议有点骗钱的嫌疑,可能没有工作坊的好……首先英文翻译的真够烂的,其次每个演讲者只有大概25分钟的时间,还没到高潮就阳痿了,真心不爽!!</p>
<p><img src="/uploads/2014/07/6e1b5653jw1eigu2o4kamj20x518gakh.jpg" alt="用户体验战略" /></p>
<p>给我印象比较深刻的分别是:<em>唐沐:从远古时代到智能家居X.0</em>,<em>刘超:整体的用户体验设计</em>,<em>王心磊:看不见的设计</em>,其他的要么是老外翻译的听不懂,要么是学院派,都是理论……</p>
<h2 id="从远古时代到智能家居">从远古时代到智能家居</h2>
<p><img src="/uploads/2014/07/IMG_20140718_141452.jpg" alt="从远古时代到智能家居" /></p>
<p>在用户身上加任何一个东西,他会觉得很不习惯,你就需要去打破他的习惯!他分享了一个做好产品的“三十二字诀”——<strong>找到痛点,定义场景;体验做透,方案优雅;保持克制,体验闭环;小步快跑、快速迭代。</strong></p>
<p>“小米做事情特别关注有趣这一点,我们希望我们做的产品让用户感知到是有趣的。首先它要是有用的、然后它要是有趣的。”唐沐说,“能让用户感觉有趣的东西,其实是来自于人性很基本的东西,就是挖掘人类原始的乐趣。”好吧,都研究到人性了,看看以后也要学些心理学了!</p>
<hr />
<h2 id="整体的用户体验设计">整体的用户体验设计</h2>
<p><img src="/uploads/2014/07/6e1b5653gw1eigz7q3c6nj20xc0m8785.jpg" alt="整体的用户体验设计" /></p>
<p>刘超认为,用户体验是由产品的方向、功能、交互设计、运营以及整体设计串合在一起的,任何一项不能独立集体,必须作为一个整体来进行设计。</p>
<p>在产品方向层面,产品的方向就是产品的灵魂,产品必须戳到消费者痛点,抓住用户需求。其次,产品需要盈利,产品越大众,变现能力就会越强,越小众变现能力就会越弱。另外,产品要有竞争优势。</p>
<p>在产品功能层面,刘超认为,认为靠谱的产品经理是做减法的产品经理,“和产品方向越相近的就越强调,和产品方向特色越远的,越砍掉越弱化”刘超说,“功能越多,其实就是越不自信,精品出了一个,你又抄一个,你也不知道这些功能为什么要添加。”</p>
<p>而在产品交互设计层面,刘超认为,如果没有产品方向,那么任何的交互方式都是对的。但是,一旦我们限定了产品方向和功能,我们就必须在框架范围内进行交互设计。“如果没有一个整体的设计的话,每一点也都是对的”刘超说,“但是,每一点也都是错的。”</p>
<p>谈到运营,他认为运营的第一点就是一致性,这就要求运营者必须从产品整体出发进行运营工作。运营的关键在于投放要相当精准,他列举了“百度魔拍”的产品案例,阐述了精准投放的理论和方法。</p>
<p>“用户体验是一个整体,如果整体看待一个问题,就会发现设计是非常有价值的。”刘超认为,整体的用户体验设计是做好产品关键的一步,片面看待设计不可取,只有整体思考,才能获得产品的成功。</p>
<hr />
<h2 id="看不见的设计">看不见的设计</h2>
<p><img src="/uploads/2014/07/6e1b5653jw1eih2hdbje2j20xc0m8jye.jpg" alt="看不见的设计" /></p>
<p>首先是跟随和开创,在做任何一件事情的时候先去判断自己做的事情到底是什么,不能永远做跟随者。除此之外,沟通在设计中也非常重要,人与人之间如果不去沟通,事情根本做不完。因此王心磊自己在面试视觉设计师时也会特别在意对方是否擅长沟通。</p>
<p>在最后的总结中,王心磊提到了在做设计这件事情时经常遇到,也需要注意的要点,包括设立目标、创造自己的方法以及适可而止等。</p>
<hr />
<p>附一些演讲实录(如链接不可用,请发邮件索取):</p>
<p><a href="http://app.yinxiang.com/shard/s7/sh/cdf6b3ed-1228-423d-b9fa-2257545d8dec/03ea2cc7aff068da1c9a1117660ac418">童慧明:创造完美用户体验供应链</a></p>
<p><a href="http://app.yinxiang.com/shard/s7/sh/5470f976-794a-4587-8041-0995bdcb079f/faaa98f9b02887c81ccbf65b2be5d287">蔡军:价值导向的全流程用户体验</a></p>
<p><a href="http://app.yinxiang.com/shard/s7/sh/b31f0348-af60-44e9-88fc-d5a440bab1c3/6c937943e3e6f880e9f00997b07e013f">郭文祺:创新硬件开发过五关斩六将</a></p>
<p><a href="http://app.yinxiang.com/shard/s7/sh/a470c537-8684-46ad-b623-c087c374ef48/73d6e9dd8be18448a1537c16cf45a2f3">辛向阳:体验的属性和品质</a></p>
<p><a href="http://app.yinxiang.com/shard/s7/sh/e6386e20-0703-47bc-8ab7-a73c719a490b/4c68744dd8c4befe93462d44d195dba8">唐沐:从远古时代到智能家居X.0</a></p>
<p><a href="http://app.yinxiang.com/shard/s7/sh/24210649-d2cf-48ce-bef5-aff01cbf6bcc/114128a8c7884be0ca8ce0b74baed27e">王心磊:看不见的设计</a></p>
<p><a href="http://app.yinxiang.com/shard/s7/sh/106d280e-10ae-4ef8-8c30-f9ae8b6d7828/663507dd30aea28054353a408bbd4146">刘超:整体的用户体验设计</a></p>
Emmet使用手册
2014-07-14T00:00:00+00:00
http://wangdaodao.github.io/2014-07-14/emmet-documentation
<h3 id="child子元素-">Child(子元素): <code class="language-plaintext highlighter-rouge">></code></h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>
</code></pre></div></div>
<h3 id="sibling兄弟元素-">Sibling(兄弟元素): <code class="language-plaintext highlighter-rouge">+</code></h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
</code></pre></div></div>
<h3 id="climb-up返回上层-">Climb-up(返回上层): <code class="language-plaintext highlighter-rouge">^</code></h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>div+div>p>span+em^bq
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div> -----
div+div>p>span+em^^bq
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
</code></pre></div></div>
<h3 id="grouping分组-">Grouping(分组): <code class="language-plaintext highlighter-rouge">()</code></h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div> -----
(div>dl>(dt+dd)*3)+footer>p
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
</code></pre></div></div>
<h3 id="multiplication乘法-">Multiplication(乘法): <code class="language-plaintext highlighter-rouge">*</code></h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</code></pre></div></div>
<h3 id="item-numbering编号-">Item numbering(编号): <code class="language-plaintext highlighter-rouge">$</code></h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ul>li.item$*5
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul> -----
h$[title=item$]{Header $}*3
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3> -----
ul>li.item$$$*5
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
</code></pre></div></div>
<p>使用 <code class="language-plaintext highlighter-rouge">@</code> 修饰符,可以改变编号的方向(升序或降序)及起点。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ul>li.item$@-*5
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul> -----
ul>li.item$@3*5
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
</code></pre></div></div>
<h3 id="text文本-">Text(文本): <code class="language-plaintext highlighter-rouge">{}</code></h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>a{Click me}
<a href="">Click me</a> -----
p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>
</code></pre></div></div>
<h3 id="id-and-class-attributes-属性操作符">ID and CLASS attributes (属性操作符)</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#header
<div id="header"></div> -----
.title
<div class="title"></div> -----
form#search.wide
<form id="search" class="wide"></form> -----
p.class1.class2.class3
<p class="class1 class2 class3"></p>
</code></pre></div></div>
<h3 id="custom-attributes-自定义属性">Custom attributes (自定义属性)</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>p[title="Hello world"]
<p title="Hello world"></p> -----
td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td> -----
[a='value1' b="value2"]
<div a="value1" b="value2"></div>
</code></pre></div></div>
<h3 id="implicit-tag-names-隐式标签名称">Implicit tag names (隐式标签名称)</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.class
<div class="class"></div> -----
em>.class
<em><span class="class"></span></em> -----
ul>.class
<ul>
<li class="class"></li>
</ul> -----
table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
</code></pre></div></div>
<p>更多内容请查看官方文档:<a href="http://docs.emmet.io/cheat-sheet/">Cheat-Sheet</a></p>
关于编程字体
2014-07-13T00:00:00+00:00
http://wangdaodao.github.io/2014-07-13/the-coder-font
<p>在segmentfault上看到了这个问题:<a href="http://segmentfault.com/q/1010000000193004">大家都用什么字体写代码的?</a></p>
<p>发现我用的字体比较土鳖的字体(微软雅黑)……</p>
<p>适合编程字体的标准:</p>
<blockquote>
<p>1.非常清晰(Crisp clear characters);<br />
2.支持扩展字符集(Extended characterset)否则会出现乱码或者方格;<br />
3.对空白把握的很好(包括但不限于空格、非中断空格、制表符…);<br />
4.可轻易区分’l’, ‘1′ 和 ‘i’;<br />
5.可轻易区分’0′, ‘o’ 和 ‘O’;<br />
6.可轻易区分左右引号 - 最好是对称的;<br />
7.清晰的标点符号,特别是大括号小括号和中括号;</p>
</blockquote>
<p>网上已经推荐了好多字体了,对与我来说,中文还是习惯了<strong>微软雅黑</strong>,英文觉得<strong>Consolas</strong>,既然又想土鳖又想土豪,所以就有了这种混合字体<strong>Yahei Consolas Hybrid</strong>。</p>
<p><img src="/uploads/2014/07/Yahei-Consolas-Hybrid.png" alt="Yahei Consolas Hybrid" /></p>
<p><a href="/uploads/2014/07/YaheiConsolasHybrid.zip">下载地址</a></p>
<p>另外,还有一种比较好看的<strong>Source Code Pro</strong>:</p>
<blockquote>
<p>Source Code Pro 是由大名鼎鼎的 Adobe 公司发布的一款开源且完全免费的等宽编程字体,它非常适合用于阅读代码,支持 Linux、Mac OS X 和 Windows 等操作系统,而且无论商业或个人都可以免费使用,相当厚道。这款字体和微软的 Consolas 一样均定位于“编程字体”。</p>
</blockquote>
<p>另外,如果有兴趣可以看看异次元的<a href="http://www.iplaysoft.com/top10-programming-fonts.html" title="10大最适合编程的字体推荐下载,让代码看起来更美更舒服!">这篇文章</a>,里面介绍了10种字体,应该有适合自己的!</p>
解决无线路由器掉线问题
2014-07-12T00:00:00+00:00
http://wangdaodao.github.io/2014-07-12/the-wireless-router-drops
<p>好吧,这篇文章可能只对我有用(很水),但是我还是记录下来吧!</p>
<p>症状:路由器联网,而且也能搜到,但是,电脑连无线的时候,每隔几分钟掉线!</p>
<p>路由器:磊科NW714,刷了最新的固件</p>
<p>无线网卡(坑爹货):Atheros AR9285 Wireless Network Adapter,驱动版本9.2.0.500</p>
<p>软件工具:无线网络检测连接工具(PassMark WirelessMon)</p>
<p>没图我说什(J)么(B)</p>
<p><img src="/uploads/2014/07/WirelessMon.jpg" alt="WirelessMon" /></p>
<p>主要原理是同一信道干扰,导致电脑掉线!!!用WirelessMon搜下,看看哪个信道用的少,就换成少的!</p>
<p>什么,就这样就解决了?</p>
<p>对的,针对我的症状,用此办法解决了我频繁掉线的问题了(抠鼻屎)……</p>
JavaScript学习:Array 类型
2014-07-10T00:00:00+00:00
http://wangdaodao.github.io/2014-07-10/js-study-0017
<p>除了Object之外,Array类型恐怕是ECMAScript中最常用的类型了。而且,ECMAScript中的数组与其它多数语言中的数组有着相当大的区别。虽然EMCAScript数组与其它语言中的数组都是数据的有序列表,但与其它语言不同的是,<strong>ECMAScript数组的每一项可以保存任何类型的数据。</strong>也就是说,可以用数组的第一个位置来保存字符串,用第二个位置来保存数值,用第三个位置来保存对象,以此类推。而且,ECMAScript数组的大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。</p>
<p>创建数组的基本方法有两种方式。第一种是使用<strong>Arrray 构造函数</strong>,如下面的代码所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors = new Array();
</code></pre></div></div>
<p>如果预先知道数组要保存的项目数量,也可以给构造函数传递数量,得到的数组就会具有那么多的位置。例如,下面的代码将创建包含20个项的数组:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors = new Array(20);
</code></pre></div></div>
<p>也可以向Array构造函数传递数组中应该包含的项。以下代码创建了一个包含3个字符串值的数组:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors = new Array("red", "blue", "green");
</code></pre></div></div>
<p>创建数组的第二种基本方式是使用<strong>数组字面量表示法</strong>。数组字面量由一对包含数组项的方括号表示,多个数组项之间逗号隔开,如下所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors = ["red", "blue", "green"]; //创建一个包含3个
var names = []; //创建一个空数组
var values = [1,2,]; //不要这样!这样会创建一个包含2或3项的数组
var options = [,,,,,]; //不要这样!这样创建一个包含5或6项的数组
</code></pre></div></div>
<p>在读取和设置数值时,要使用方括号并提供相应值的基于0的数字索引,如下所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors = ["red", "blue", "green"];
alert(colors[0]); //显示第一项
colors[2] = "black"; //修改第三项
colors[3] = "brown"; //新增第四项
</code></pre></div></div>
<p>方括号的索引表示要访问的值。如果索引小于数组中的项数,则返回对应项的值,就像这个例子中的colors[0]会显示“red”一样。设置数组的值也使用相同的语法,但会替换指定位置的值。如果设置某个值的索引超过了数组现有的最大索引值,如果这个例子中的colors[3]所示,数组就会自动增加到该索引值加1的长度(就这个例子而言,索引是3,因此数组的长度就是4)。</p>
<p>数组的项数保存在length属性中,这个属性始终会返回0或更大的值,如下面的之歌例子所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors = ["red", "blue", "green"]; //创建一个包含3个字符串的数组
var names = []; //创建一个空数组
alert(colors.length); //3
alert(names.length) //0
</code></pre></div></div>
<p>数组的length属性不是只读的。因此,通过设置这个属性,可以从数组的末尾移除项或向数组中添加项。请看下面的例子:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors = ["red", "blue", "green"]; //创建一个包含3个字符串的数组
colors.length = 2;
alert(colors[2]); //undefined
</code></pre></div></div>
<p>这个例子中的数组colors一开始有3个值。将其length属性设置为2会移除最后一项,结果在colors[2]就会显示undefined了。如果将其length属性设置为大于数组项数的值,则新增的每一项都会取得undefined值,如下所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors = ["red", "blue", "green"]; //创建一个包含3个字符串的数组
colors.length = 4;
alert(colors[3]); //undefined
</code></pre></div></div>
<p>在此虽然colors数组包含3个项,但它的length属性设置成了4。于是,这个数组中位置为3的那一项就获得了undefined值,数值的项数也增加到4.</p>
<p>利用length属性也可以方便地在数组末尾添加新项,如下所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors = ["red", "blue", "green"]; //创建一个包含3个字符串的数组
colors[colors.length] = "black"; //(在位置3)添加一种颜色
colors[colors.length] = "brown"; //(在位置4)再添加一种颜色
</code></pre></div></div>
<p>由于数组最后一项的索引始终是length-1,因此下一个新项的位置就是length。每当在数组末尾添加一项后,其length属性都会自动更新反映这一变化。</p>
<h2 id="检测数组">检测数组</h2>
<p>自从ECMAScript 3做出规定以后,就出现了确定某个对象是不是数组的经典问题。对于一个网页,或者一个全局作用域而言,使用instanceof操作符就能得到满意的结果:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>if (value instanceof Array){
//对数组执行某些操作
}
</code></pre></div></div>
<h2 id="转换方法">转换方法</h2>
<p>所有对象都具有toLocaleString()、toString()和valueOf()方法。其中,调用数组的toString()和valueOf()方法会返回相同的值,即由数组中每个值的字符串形式拼接而成的一个以<strong>逗号</strong>分隔的字符串。而如果使用join()方法,则可以使用不同的分隔符来构建这个字符串。join()方法只接收一个参数,即用作分隔符的字符串,然后返回包含所有数组项的字符串。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//创建一个包含3个字符串的数组
var colors = ["red","blue","green"];
alert(colors.toString());
alert(colors.valueOf());
alert(colors);
alert(colors.join("|"))
</code></pre></div></div>
<h2 id="栈方法">栈方法</h2>
<p>栈是一种LIFO(last-in-first-out,后进先出)的数据结构(想象模型:一个一头封闭的管子)。而栈中项的插入(叫做推入)和移除(叫做弹出),只发生在一个位置——栈的顶部。ECMAScript为数组专门提供了push()和pop()方法,以便实现类似栈的行为。push()方法可以接收任意数量的参数,把它们逐个添加到数组末尾,并<strong>返回修改后数组的长度</strong>。pop()方法则从数组末尾移除最后一项,减少数组的length值,然后<strong>返回移除的项</strong>。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors=new Array();
var count=colors.push("red","green");
alert(count); //2
count=colors.push("black");
alert(count); //3
var item=colors.pop();
alert(item); //"black"
alert(colors.length); //2
</code></pre></div></div>
<h2 id="队列方法">队列方法</h2>
<p>队列数据结构的访问规则是FIFO(first-in-first-out,先进先出,想象模型:一个没有封闭的管子)。shift()能够移除数组中的第一个项并返回该项,同时将数组长度减1;
unshift()能在数组前端添加任意个项并返回新数组的长度。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors=new Array();
var count=colors.push("red","green");
alert(count); //2
count=colors.push("black");
alert(count); //3
var item=colors.shift();
alert(item); //"red"
alert(colors.length); //2
var colors=new Array();
var count=colors.unshift("red","green");
alert(count); //2
count=count.unshift("black");
alert(count); //3
var item=colors.pop();
alert(item); //"green"
alert(colors.length); //2
</code></pre></div></div>
<h2 id="重排序方法">重排序方法</h2>
<p>reverse()方法用于颠倒数组中元素的顺序。<strong>注:该方法会改变原来的数组,而不会创建新的数组。</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors=["red","green","blue"];
var colors2=colors.reverse();
alert(colors); //blue,green,red
alert(colors2); //blue,green,red
</code></pre></div></div>
<p>sort()方法用于对数组的元素进行排序,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值,sort()方法比较的也是字符串。<strong>注:数组在原数组上进行排序,不生成副本。</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var value=[0,1,5,10,15];
value.sort();
alert(value); //0,1,10,15,5
function compare(value1,value2){
return a-b;
}
value.sort(compare);
alert(value); //0,1,5,10,15
</code></pre></div></div>
<h2 id="操作方法">操作方法</h2>
<p>concat()方法可以基于当前数组中的所有项创建一个新数组。<strong>concat()方法常用于连接两个或多个数组</strong>。</p>
<p>具体来说,这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。在没有给concat()方法传递参数的情况下,它只是复制当前数组并返回副本。如果传递给concat()方法的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的值不是数组,这些值就会被简单地添加到结果数组的末尾。<strong>该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors=["red","green","blue"];
var colors2=colors.concat("yellow",["black","brown"]);
alert(colors); //red,green,blue
alert(colors2); //red,green,blue,yellow,black,brown
</code></pre></div></div>
<hr />
<p>slice()方法能够基于当前数组中的一或多个项创建一个新数组。<strong>slice() 方法可从已有的数组中返回选定的元素。</strong></p>
<p>slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。<strong>注意,slice()方法不会影响原始数组。</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors=["red","green","blue","yellow","purple"];
var colors2=colors.slice(1);
var colors3=colors.slice(1,4);
alert(colors2); //green,blue,yellow,purple
alert(colors3); //green,blue,yellow
</code></pre></div></div>
<hr />
<p>splice() 方法用于插入、删除或替换数组的元素。</p>
<p>删除:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。例如,splice(0,2)会删除数组中的前两项。</p>
<p>插入:可以向指定位置插入任意数量的项,只需提供3个参数:起始位置、0(要删除的项数)和要插入的项。如果要插入多个项,可以再传入第四、第五,以至任意多个项。例如,splice(2,0,”red”,”green”)会从当前数组的位置2开始插入字符串”red”和”green”。</p>
<p>替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定3个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如,splice (2,1,”red”,”green”)会删除当前数组位置2的项,然后再从位置2开始插入字符串”red”和”green”。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var colors=["red","green","blue"];
var removed=colors.splice(0,1); //删除
alert(colors); //green,blue
alert(removed); //red
removed=colors.splice(1,0,"yellow","orange"); //插入
alert(colors); //green,yellow,orange,blue
alert(removed); //返回一个空数组
removed=colors.splice(1,1,"red","purple"); //替换
alert(colors); //green,red,purple,orange,blue
alert(removed); //yellow
</code></pre></div></div>
<h2 id="位置方法">位置方法</h2>
<p>indexOf()和lastIndexOf()。这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中,indexOf()方法从数组的开头(位置0)开始向后查找,lastIndexOf()方法则从数组的末尾开始向前查找。</p>
<p>这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时,会使用全等操作符;也就是说,要求查找的项必须严格相等(就像使用===一样)。</p>
<p>相关阅读:<a href="/2014-07-02/js-study-0004.html">JavaScript学习:数据类型</a></p>
JavaScript学习:Object 类型
2014-07-10T00:00:00+00:00
http://wangdaodao.github.io/2014-07-10/js-study-0016
<p>到目前为止,我们看到的大多数引用类型都是Object类型的实例;而且,Object也是ECMAScript中使用最多的一个类型。虽然Object的实例不具备多少功能,但对于在应用程序中存储和传输数据而言,它们确实是非常理想的选择。</p>
<p>创建Object实例的方式有两种。第一种是使用<strong>new操作符后跟Object构造函数</strong>,如下所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var person = new Object();
person.name = "Nicholas";
person.age=29;
</code></pre></div></div>
<p>另一种方式是使用<strong>对象字面量表示法</strong>。对象字面量是对象定义的一种简写形式,目的在于简化创建包含大量属性的对象的过程。下面这个例子就是使用了对象字面量语法定义了与前面那个例子中相同的person对象:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var person = {
name: "Nicholas",
age: 29
}
</code></pre></div></div>
<p>在这个例子中,左边的花括号({)表示对象字面量的开始,因为它出现在了赋值操作符的后买年(在其它环境中,左花括号表示的是语句块的开始)。然后,我们定义了nmae属性,之后是一个冒号,再后面是这个属性的值。在对象字面量中,使用逗号来分隔不同的属性,因此“Nicholas”后面是一个逗号,因为age是这个对象的最后一个属性。在最后一个属性后面添加逗号,会在IE及Opera中导致错误。</p>
<p>在使用对象字面量语法时,属性名也可以使用字符串,如下面的这个例子所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var person = {
"name": "Nicholas",
"age": 29
};
</code></pre></div></div>
<p>以上代码也会得到与前面例子相同的结果:创建一个带有name和age属性的新对象。</p>
<p>另外,使用对象字面量语法时,如果留空其花括号,则可以定义值包含默认属性和方法的对象,如下所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var person = {};
person.name = "Nicholas";
person.age = 29;
</code></pre></div></div>
<p>虽然可以使用前面介绍的任何一种方法来定义对象,但开发人员更青睐<strong>对象字面量语法</strong>,因为这种语法要求的代码量少,而且能够给人封装数据的感觉。</p>
<p>一般来说,访问对象属性时使用的都是点表示法,这也是很多面向对象语言中通用的语法。不过,在JavaScript也可以使用方括号表示法来访问对象的属性。在使用方括号语法时,应该将要访问的属性以字符串的形式放在方括号中,如下面的例子所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>alert(person["name"]); //Nicholas
alert(person.name); //Nicholas
</code></pre></div></div>
<p>从功能上看,这两种访问对象属性的方法没有任何区别。但方括号语法的主要优点是可以通过变量来访问属性,例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var propertyName = "name";
alert(person[propertyName]); //Nicholas
</code></pre></div></div>
<p><strong>通常,除非必须使用变量来访问属性,否则我们建议使用点表示法。</strong></p>
<p>相关阅读:<a href="/2014-07-02/js-study-0004.html">JavaScript学习:数据类型</a></p>
JavaScript学习:垃圾收集
2014-07-10T00:00:00+00:00
http://wangdaodao.github.io/2014-07-10/js-study-0015
<p>JavaScript具有自动的垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。而C和C++之类的语言中,开发人员的一项基本任务就是手工跟踪内存的使用情况,这是造成许多问题的一个根源。在编写JavaScript程序时,开发人员不再关心内存的使用问题,所需内存的分配以及内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实很简单:找出那些不再继续使用的变量,然后释放其占有的内存。为此垃圾收集器会按照规定的时间间隔(或代码执行中预定的收集事件),周期性地执行这一操作。</p>
<p>局部变量只在函数执行的过程中存在。而在这个过程中,回为局部变量在栈内存上分配相应的空间,以便存储它们的值。然后在函数中使用这些变量,直至函数执行结束。此时,局部变量就没有存在的必要了,因此可以释放它们的内存以供将来使用。这种情况下,很容易判断变量是否还有存在的必要;但并非所有情况下都这么容易得出结论。垃圾收集器必须跟踪哪个变量有用哪个变量没用,对于不再有用的变量打上标记。以备将来收回其占有的内存。用于标识无用变量的策略可能会因为实现而异,但具体到浏览器中的实现,则通常有两个策略。</p>
<h2 id="标记清除">标记清除</h2>
<p>JavaScript中最常用的垃圾收集方式是标记清除。当变量进入环境(例如,在函数中声明一个变量)时,就将这个变量标记为“进入环境”。从逻辑上讲,永远不能释放进入环境的变量所占有的内存,因为只要执行流进入相应的环境,就可能会用到它们。而当变量离开环境时,则将其标记为“离开环境”。</p>
<p>可以使用任何方式来标记变量。比如,可以通过翻转某个特殊的位置来记录一个变量何时进入环境,或使用一个“进入环境的”变量列表及一个“离开环境的”变量列表来跟踪那个变量发生了变化。所到底,如果标记变量其实并不重要,关键在于采取什么策略。</p>
<p>垃圾收集器在运行的时候会给存储在内存中的所有变量加上标记。然后,它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后仍带有标记的变量将被视为准备删除的变量,原因是环境中的变量已经无法访问这些变量了。最后,垃圾收集器完成内存清除工作,销毁那些带标记的值并回收它们所占有的内存空间。</p>
<h2 id="引用计数">引用计数</h2>
<p>另一种不太常见的垃圾收集策略叫做引用计数。引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型的值赋给变量时,则这个值的引用次数就是1。如果同一个值又被赋给另一个变量,则该值的引用次数加1。相反,如果包含对这个值引用的变量又取得了另外一个值,则这个值的引用次数减1。当这个值的引用次数变为0时,则说明没有办法在访问这个值了,因而就可以将其占有的内存空间回收回来。这样,当垃圾收集器下次再运行时,它就会释放那些引用次数为0的值所占有的内存。</p>
小插曲
2014-07-10T00:00:00+00:00
http://wangdaodao.github.io/2014-07-10/episode
<p>这究竟是要闹哪样?</p>
<p>难道和gitcafe缘分就那么短?</p>
<p>美好的事物的生命总是那么短?</p>
<p><a href="/uploads/2014/07/20140710105452.jpg"><img src="/uploads/2014/07/20140710105452.jpg" alt="警告" /></a></p>
JavaScript学习:执行环境及作用域
2014-07-08T00:00:00+00:00
http://wangdaodao.github.io/2014-07-08/js-study-0014
<h2 id="执行环境">执行环境</h2>
<p>执行环境(execution context,为简单起见,有时也称为“环境”)是JavaScript中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象(variable object),环境中定义的所有变量和函数都保存在这个对象中。</p>
<p>全局执行环境是最外围的一个执行环境。根据ECMAScript实现所在的宿主环境不同,表示执行环境的对象也不一样。在Web浏览器中,全局执行环境被认为是window对象,一次所有全局变量和函数都是作为window对象的属性和方法创建的。某个执行环境中的所有代码执完毕之后,该环境被销毁,保存在其中的所有变量和函数定义也随之销毁。</p>
<p>每个函数在被调用时都会创建自己的执行环境。当执行流进入一个函数时,函数的环境就会被推入一个环境栈中。而在函数执行之后,栈将其环境弹出,把控制权返回给之前的执行环境。ECMAScript程序中的执行流正式由这个方便的机制控制着。</p>
<hr />
<h2 id="作用域">作用域</h2>
<p>当代码在一个环境中执行时,会创建由变量对象构成的一个作用域链。作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端,始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数,则将其活动对象作为变量对象。活动对象在最开始时值包含一个变量,即arguments对象。作用域链中的下一个变量对象来自包含环境,而再下一个变量对象则来自下一个包含环境。这样,一直延续到全局执行环境;全局执行环境的变量对象始终都是作用域链中的最后一个对象。</p>
<p>标识符解析是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始,然后逐级地向后回溯,直至找到标识符位置。请看下面的代码:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var color = "blue";
function changeColor() {
if (color = "blue") {
color = "red";
} else {
color = "blue";
}
}
changeColor();
alert("现在的颜色是 " + color);
</code></pre></div></div>
<p>在这个简单的例子中,函数changeColor()的作用域链包含两个对象:它自己的变量对象(其中定义着arguments对象)和全局环境的变量对象。可以在函数内部访问变量color,就是因为可以在这个作用域链中找到它。</p>
<p>此外,在局部作用域中定义的变量可以在局部环境中与全局变量互换使用,如下面这个例子所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var color = "blue";
function changeColor() {
var anotherColor = "red";
function swapColors() {
var tempColor = anotherColor;
anotherColor = color;;
color = tempColor;
//这里可以访问color、anotherColor和tempColor
}
//这里可以访问color和anotherColor,但不能访问tempColor
swapColors();
}
changeColor();
//这里不能访问anotherColor和temColor,但可以访问color
alert("现在的颜色是 " + color);
</code></pre></div></div>
<p><img src="/uploads/2014/07/4.jpg" alt="作用域中" /></p>
<p><strong>函数参数也被当作变量来对待,因此其访问规则与执行环境中的其他变量相同。</strong></p>
<hr />
<h2 id="延长作用域链">延长作用域链</h2>
<p>虽然执行环境的类型总共只有两种——全局和局部(函数),但还是有其它方法来延长作用域链。有些语句可以在作用域链的前端临时增加一个变量对象,该变量对象会在代码执行后被移除。当执行流进入下列任何一个语句中时,作用域链就会得到加长。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>try-catch语句的catch块
with语句
</code></pre></div></div>
<p>这两个语句都会在作用域链的前端添加一个变量对象。对with语句来说,其变量对象中包含这为指定对象的所有属性和方法所作的变量声明。对catch语句来说,其变来那个对象中包含的是被抛出的错误对象声明。这些变来那个对象都是只读的,因此在with和catch语句中声明的变来那个都会被添加到所在执行环境的变量对象中。</p>
<blockquote>
<p>注意:在IE8及之前的版本的JavaScript实现中,存在一个与标准不一致的地方,即在catch语句中捕获的错误对象会被添加到执行环境的变量对象,而不是catch语句的变量对象中。换句话说,即使在catch块的外部也可以访问到错误对象。IE9修复了这个问题。</p>
</blockquote>
<hr />
<h2 id="没有块级作用域">没有块级作用域</h2>
<p>JavaScript没有块级作用域经常会导致理解上的困惑。在其他类C的语言中,由花括号封闭的代码块都有自己的作用域(如果用ECMAScript的话来讲,就是它们自己的执行环境),因而支持根据条件来定义变量。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>if(true){
var color = "blue";
}
//blue
alert(color)
</code></pre></div></div>
<p>在JavaScript中,if语句中的变量声明会将变量添加到当前的执行环境(在这里是全局环境)中。</p>
<p>在使用for语句时尤其要牢记这一差异,对于有块级作用域的语言来说,for语句初始化变量的表达式所定义的变量,只会存在于循环的环境之中。而对于JavaScript来说,由for语句创建的变量i即使在for循环执行结束后,也依旧会存在于循环外部的执行环境中。</p>
JavaScript学习:基本类型和引用类型
2014-07-07T00:00:00+00:00
http://wangdaodao.github.io/2014-07-07/js-study-0013
<p>ECMAScript变量可能包含两种不同数据类型的值:基本类型值和引用类型值。基本类型值指的是那些保存在栈内存中的简单数据段,即这种值完全保存在内存中的一个位置。而引用类型值则是指那些保存在堆内存中的对象。</p>
<p>在将一个值赋给变量时,解析器必须确定这个值是基本类型值,还是引用类型值。Undefined、Null、Boolean、Number 和 String这5种基本数据类型的值在内存中占有固定大小的空间,因此可以把它们的值保存在栈内存中。而且,这样也可以提高查询变量的速度。对于保存基本类型值的变量,我们说它们是按值访问的,因为我们操作的是它们实际保存的值。</p>
<p>如果赋给变量的是一个引用类型的值,则必须在堆内存中为这个值分配空间。由于这种值的大小不固定,因此不能把它们保存到栈内存中。但内存地址的大小是固定的,因此可将内存地址保存在栈内存中。这样,当查询引用类型的变量时,就可以首先从栈中读取内存地址,然后再“顺藤摸瓜”地找到保存在堆中的值。对于这种查询变量的方式,我们把它叫做按引用访问,因此我们操作的不是实际的值,而是被那个值引用的对象。</p>
<h2 id="动态的属性">动态的属性</h2>
<p>定义基本类型和引用类型的方式是类似的:创建一个变量并为该变量复制。但是,当这个值保存到变量中以后,对不同类型值可以执行的操作则大相径庭。对于引用类型的值,我们可以为其添加属性和方法,也可以改变和删除其属性和方法。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var person = new Object();
person.name = "Nicholas";
alert(person.name); //"Nicholas"
</code></pre></div></div>
<p>基本类型是没有动态属性的。</p>
<h2 id="复制变量值">复制变量值</h2>
<p>除了保存的方式不同之外,在从一个变量向另一个变量复制基本类型值和引用类型值时,也存在不同。如果从一个变量向另一个变量复制基本类型的值,会在变量对象上创建一个新值,然后把该值复制到为新变量分配的位置上。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var num1 = 5;
var num2 = num1;
</code></pre></div></div>
<p>如图:</p>
<p><img src="/uploads/2014/07/1.jpg" alt="num1=5" /></p>
<p><img src="/uploads/2014/07/2.jpg" alt="num2=num1" /></p>
<p>当从一个变量向另一个变量复制引用类型的值时,同样也会将存储在变量对象中的值复制一份放到为新变量分配的空间中。不同的是,这个值的副本实际上是一个指针,而这个指针指向存储在堆中的一个对象。复制操作结束后,两个变量实际上将引用同一个对象。因此,改变其中一个变量,就会影响另一个变量。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var obj1 = new Object();
var obj2 = obj1;
obj1.name = "Nicholas";
alert(obj2.name); //"Nicholas"
</code></pre></div></div>
<p>如图:</p>
<p><img src="/uploads/2014/07/3.jpg" alt="obj2=obj1" /></p>
<h2 id="传递参数">传递参数(!!)</h2>
<p><strong>ECMAScript中所有函数的参数都是按值传递的。</strong>也就是说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。基本类型值的传递如同基本类型变量的复制一样,而引用类型值的传递,则如同引用类型变量的复制一样。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function addTen(num) {
num += 10;
return num;
}
var count = 20
var result = addTen(count);
alert(count); //20
alert(result); //10
</code></pre></div></div>
<p>如果换成对象,有点难以理解了:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function setName(obj) {
obj.name = "Nicholas";
obj = new Object();
obj.name = "Greg";
alert(obj.name);
}
//alert(obj.name);
var person = new Object();
setName(person);
alert(person.name);
</code></pre></div></div>
<p>这里我是这样理解的,一开始obj和person都指向第一次new的对象(<code class="language-plaintext highlighter-rouge">var person = new Object();</code>),然后函数体内obj指向了新的object,但是person还是指向第一次的object对象,而且这个对象被它的另一个引用obj形参修改name属性为Nicholas。</p>
<h2 id="检测类型">检测类型</h2>
<p>要检测一个变量是不是基本数据类型,typeof操作符是最佳的工具。typeof操作符是确定一个变量是字符串、数值、布尔值,还是undefined的最佳工具。如果变量的值是一个对象或null,则typeof操作符会像下面例子中所示的那样返回“object”:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var s = "Nicholas";
var b = true;
var i = 2;
var u;
var n = null;
var o = new Object();
alert(typeof s); //string
alert(typeof i); //number
alert(typeof b); //boolean
alert(typeof u); //undefined
alert(typeof n); //object
alert(typeof o); //object
</code></pre></div></div>
<p>虽然在检测基本数据类型时typeof是非常得力的助手,但在检测引用类型的值时,这个操作符的用处不大。通常,我们并不想知道某个值是对象,而是想知道它是什么类型的对象。为此,ECMAScript提供了instanceof操作符,其语法如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>result = variable instanceof constructor
</code></pre></div></div>
<p>如果变量是给定引用类型的示例,那么instanceof操作符就会返回true。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>alert(person instanceof Object); //变量person是Object吗?
alert(colors instanceof Array); //变量colors是Array吗?
alert(pattern instanceof RegExp); //变量pattern是RegExp吗?
</code></pre></div></div>
<p>根据规定,所有引用类型的值都是Object的实例。因此在检测一个引用类型值和Object构造函数时,instanceof操作符始终会返回true。当然,如果使用instanceof操作符检测基本类型的值,则该操作符始终会返回false,因为基本类型不是对象。</p>
JavaScript学习:函数
2014-07-07T00:00:00+00:00
http://wangdaodao.github.io/2014-07-07/js-study-0012
<p>函数对于任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句,而且可以在任何地方、任何时候调用执行。函数是由这样的方式进行声明的:关键字 function、函数名、一组参数,以及置于括号中的待执行代码。函数的基本语法如下所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function functionName(arg0, arg1, ..., argN) {
statements
}
</code></pre></div></div>
<p>作为一种良好的习惯,应该对函数先定义再调用。另外要么让函数始终都返回一个值,要么永远都不要返回值。否则,如果函数有时候返回值,有时候有不返回值,会给调试代码带来不便。</p>
<h2 id="函数的参数">函数的参数</h2>
<p>与其他程序设计语言不同,ECMAScript 不会验证传递给函数的参数个数是否等于函数定义的参数个数。开发者定义的函数都可以接受任意个数的参数(根据 Netscape 的文档,最多可接受 255 个),而不会引发任何错误。任何遗漏的参数都会以 undefined 传递给函数,多余的函数将忽略。</p>
<p>在函数代码中,使用特殊对象 arguments,开发者无需明确指出参数名,就能访问它们。例如<code class="language-plaintext highlighter-rouge">arguments[0]</code>代表第一个参数。这个事实说明了ECMAScript函数的一个重要特点:命名的参数只提供便利,但不是必需的。</p>
<p>通过访问arguments对象的length属性可以获取有多少参数传递给了函数。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function howManyArgs() {
alert(arguments.length);
}
howManyArgs("string", 45);
howManyArgs();
howManyArgs(12);
</code></pre></div></div>
<p>另外注意:arguments对象的值会自动反应到对应的命名参数,他们两个的内存空间是独立的,只是他们的值会同步,但是如果修改命名参数是不会改变arguments中对应的值的。</p>
<hr />
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function fun(x) {
arguments[0] = 1;
alert(x);
}
fun();
fun(6);
</code></pre></div></div>
<p>说明:
1、fun()在调用时没有传参数,那么fun(x)中的参数x就是undefined,而arguments对象也是一个空对象,由于没有传参数,JavaScript也没有为x分配内存,所以alert(typeof(x))也是undefined,那么函数体里为arguments[0]=1赋值和x没有任何关系,那么alert(x)当然是undefined了。</p>
<p>2、fun(6)在调用时传参数,那么JavaScript就会为函数fun(x)中的参数x分配一个内存并赋值6,由于对象是基于引用的赋值的,所以arguments对象的第一个元素[0]也指向了x所对应的内存地址,而现在在函数体里为arguments[0]=1,由于它们是指向同一个地址,相当于也改变了x的值,那么alert(x)当然是1了。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function test(str) {
var str = "world";
return "Hello, " + arguments[0];
}
test("javascript")
</code></pre></div></div>
<p>这个和上面唯一的区别就是:给函数传了一个叫str的参数,并且只有这一个参数,那么str与arguments[0]都是对这个参数值的引用,所以就相当于这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function test(str) {
arguments[0] = "world";
return "Hello, " + arguments[0];
}
test("javascript")
</code></pre></div></div>
<p>如果换成这样……</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function test(str) {
arguments[0] = "world";
var str = "wangdaodao";
return "Hello, " + arguments[0];
}
test("javascript")
</code></pre></div></div>
<p>避免这样的问题,就是换一个变量名吧!</p>
JavaScript学习:基本的语句
2014-07-03T00:00:00+00:00
http://wangdaodao.github.io/2014-07-03/js-study-0011
<h2 id="if-语句">If 语句</h2>
<p>if 语句是基本的控制语句,它使得JavaScript进行选择,更准确的说,就是有条件地执行语句。这个语句有两种形式,第一种形式是:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>if (expression){
statement
}
</code></pre></div></div>
<p>在这种形式中,expression是要被计算的,如果计算的结果是true,或者可以被转换成true,那么就执行statement。如果expression的值为false,或者可以被转换成false,那么就不执行statement。</p>
<p>另一种形式是:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>if (expression){
statement1
}
else{
statement2
}
</code></pre></div></div>
<p>在这种形式中,先计算expression的值,如果踏实true,就执行stement1,否则就执行statement2。</p>
<p>JavaScript中的规则是,<strong>else从句是离它最近的if语句的一部分</strong>。要使代码更易读、易理解、易支持和调试,建议使用<strong>花括号和合理的缩进</strong>!</p>
<hr />
<h2 id="do-while语句">do-while语句</h2>
<p>do-while语句是一种后测试循环语句,即只有在循环体中的代码执行之后,才会测试出口条件。换句话说,<strong>在对条件表达式求值之前,循环体内的代码至少执行一次</strong>。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>do {
statement
} while (expression);
</code></pre></div></div>
<p>像do-while这种后测试循环语句最常用于循环体中的代码至少要被执行一次的情形。</p>
<hr />
<h2 id="while-语句">while 语句</h2>
<p><strong>while语句术语前测试循环语句</strong>,也就是说,在循环体内的代码被执行之前,就会对出口条件求值。因此,循环体内的代码有可能永远不会被执行。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>while (expression) {statement}
</code></pre></div></div>
<hr />
<h2 id="for-语句">for 语句</h2>
<p>for 语句也是一种测试循环语句,但它具有在执行循环之前初始化变量和定义循环后要执行的代码能力。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>for (intialization; expression; post-loop-expression) {statement}
</code></pre></div></div>
<p>一个实例:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>for (var i = 0; i < 10; i++) {
alert(i);
}
</code></pre></div></div>
<p>以上代码定义了变量i的初始值为0。只有当表达式(i<10)返回true的情况下才会进入for循环,因此也有可能不会执行循环体中的代码。如果执行了循环体中的代码,则一定会对循环后的表达式(i++)求值,即递增i的值。</p>
<p>使用while循环做不到的,使用for循环同样也做不到。也就是说,for循环只是把与循环有关的代码集中在了一个位置。</p>
<hr />
<h2 id="for-in-语句">for-in 语句</h2>
<p>for-in语句是一种精准的迭代语句,可以用来枚举对象的属性。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>for (property in expression) {statement}
</code></pre></div></div>
<p>代码示例1:遍历数组</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var x
var mycars = new Array()
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</code></pre></div></div>
<p>代码示例2:遍历对象</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
</code></pre></div></div>
<p>ECMAScript对象的属性没有顺序。因此,<strong>通过for-in循环输出的属性名的顺序是不可预测的</strong>。具体来讲,所有属性都会被返回一次,但返回的先后次序可能会因为浏览器而异。</p>
<hr />
<h2 id="break-和-continue-语句">break 和 continue 语句</h2>
<p>break和continue语句用于在循环中精确地控制代码的执行。其中,break语句会立即退出循环,强制继续执行循环后面的语句。而continue语句虽然也是立即退出循环,但退出循环后会从循环的顶部继续执行。</p>
<p>代码示例1:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var num = 0;
for (var i = 1; i < 10; i++) {
if (i % 5 == 0) {
break;
}
num++;
}
alert(num); //4
</code></pre></div></div>
<p>代码1分析:这个例子中的for循环将变量i由1递增至10.在循环体内,有一个if语句检查i的值是否可以被5整除(使用求模操作符)。如果是,则执行break语句退出循环。另一方面,变量num从0开始,用于记录循环执行的次数。在执行brak语句之后,要执行的下一行代码是alert()函数,结果显示4。也就是说,在变量i等于5时,循环总共执行了4次;而brak语句的执行,导致了循环在num再次递增之前就退出了。</p>
<p>代码示例2:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var num = 0;
for (var i = 1; i < 10; i++) {
if (i % 5 == 0) {
continue;
}
num++
}
alert(num) //8
</code></pre></div></div>
<p>代码2分析:例子的结果显示8,也就是循环总共执行了8次。当变量i=5时,循环会在num再次递增之前退出,但接下来执行的是下一次循环,即i的值等于6的循环。于是,循环有继续执行,直到i等于10时自然结束。而num的最终值之所以是8,是因为continue语句导致它少递增了一次。</p>
<p>代码示例3:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var num = 0;
outermost: for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if (i == 5 && j == 5) {
break outermost;
}
num++;
}
}
alert(num); //55
</code></pre></div></div>
<p>代码3分析:在这个例子中,outermost标签表示外部的for语句。如果每个循环正常执行10次,则num++语句就会正常执行100次。换句话说,如果两个循环都自然结束,num的值应该是100,但内部循环中的break语句带了一个参数:要返回的标签。添加这个标签的结果就导致break语句不仅会退出内部的for语句(即使变量j的循环),而且也会退出外部的for语句(即使用变量i的循环)。为此,当变量i和j都等于5时,num的值正好是55。</p>
<p>代码示例4:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var num = 0;
outermost: for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if (i == 5 && j == 5) {
continue outermost;
}
num++;
}
}
alert(num); //95
</code></pre></div></div>
<p>代码4分析:在这种情况下,continue语句会强制继续执行循环——退出内部循环,执行外部循环,当j是5时,continue语句执行,而这也就是意味着<strong>内部循环少执行了5次</strong>,因此num的结果是95。</p>
<hr />
<h2 id="with语句">with语句</h2>
<p>with语句的作用是将代码的作用域设置到一个特定的对象中。with语句的语法如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>with (expression) {statement}
</code></pre></div></div>
<p>定义with语句的目的主要是为了简化多次编写同一个对象的工作,如下面的例子所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var qs = location.search.substring(1);
var hostName = location.hostname;
var url = location.href;
</code></pre></div></div>
<p>上面的几行代码都包含location对象。如果使用with语句,可以把上面的代码改写成如下所示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>with(location) {
var qs = search.substring(1);
var hostName = hostname;
var url = href;
}
</code></pre></div></div>
<p><strong>由于大量使用with语句会导致性能下降,同时也会给调试代码造成困难,因此在开发大型应用程序时,不建议使用with语句。</strong></p>
<hr />
<h2 id="switch-语句">switch 语句</h2>
<p>switch语句与if语句的关系最为密切,而且也是在其它语言中普遍使用的一种流程控制语句。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>switch (expression) {
case value:
statement
break;
case value:
statement
break;
case value:
statement
break;
case value:
statement
break;
default:
statement
}
</code></pre></div></div>
<p>switch语句中的每一种情形(case)的含义是”如果表达式等于这个值(value),则执行后面的语句(statement)“.而break关键字会导致代码执行流跳出switch语句。如果省略了break关键字,就会导致执行完当前case后,继续执行下一个case。最后的default关键字则用于在表达式不匹配前面任何一种情形的时候,执行机动代码(因此,也相当于一个else语句)。</p>
<p>switch语句特点:首先,可以在switch语句中使用任何数据类型(在很多其它语言中只能使用数值),无论是字符串,还是对象都没有问题。其次,每个case的值不一定是常量,甚至是表达式。</p>
JavaScript学习:条件操作符和赋值操作符
2014-07-03T00:00:00+00:00
http://wangdaodao.github.io/2014-07-03/js-study-0010
<h2 id="条件操作符">条件操作符</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>variable = boolean_expression ? true_value : false_value;
</code></pre></div></div>
<p>这行代码的含义就是基于对boolean_expression求值的结果,决定给变量varialbe赋什么值。如果求值结构为true,则给变量variable赋true_value值,如果求值结果为false,则赋给变量variable赋false_value值。</p>
<p>代码示例:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var max = (num1 > num2) ? num1 : num2;
</code></pre></div></div>
<p>在这个例子中,max中将会保存一个最大的值。这个表达式的意思是:如果num1大于num2(关系表达式返回true),则将num1的值赋给max;如果num1小于num2(关系表达式返回false),则将num2的值赋给max。</p>
<hr />
<h2 id="赋值操作符">赋值操作符</h2>
<p>简单的赋值运算符有等于号(=)表示,其作用就是把右侧的值赋给左侧的变量。</p>
<p>每个主要的算数运算符(以及个别其它运算符)都有对应的复合赋值运算符。</p>
<blockquote>
<p>乘/赋值 (*=);<br />
除/赋值 (/=);<br />
模/赋值 (%=);<br />
加/赋值 (+=);<br />
减/赋值 (-=);<br />
左移/赋值 («=);<br />
有符号右移/赋值 (»=);<br />
无符号右移/赋值 (»>=);</p>
</blockquote>
<p>设计这些运算符的主要目的就是简化赋值运算。使用它们不会带来任何性能的提升。</p>
JavaScript学习:关系操作符和相等操作符
2014-07-02T00:00:00+00:00
http://wangdaodao.github.io/2014-07-02/js-study-0009
<h2 id="关系操作符">关系操作符</h2>
<p>关系操作符包括:小于(<)、大于(>)、小于等于(<=)、大于等于(>=)</p>
<p>比较规则:</p>
<blockquote>
<p>1.如果两个操作符都是数值,则执行数值比较;<br />
2.如果两个操作数都是字符串,则比较两个字符串对应的字符编码值;<br />
3.如果一个操作数是数值,则将另一个操作数转换为一个数值,然后执行数值比较; <br />
4.如果一个操作符是对象,则调用这个的对象的valueOf()方法,用得到的结果按照前面的规则执行比较。如果对象没有valueOf()方法,则调用toString()方法,并用得到的结果根据前面的规则执行比较; <br />
5.如果一个操作符是布尔值,则先将其转换为数值,然后再执行比较;</p>
</blockquote>
<p>代码示例:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//因为两个操作数是字符串,而字符串比较的时字符编码("2"的字符编码是50,而"3"的字符编码是51),所以是true
var result = "23" < "3";
//"23"转换成数值,然后比较,false
var result = "23" < 3
//根据规则,任何操作数与NaN进行关系比较,结果都是false。
var result = NaN < 3
var result = NaN >= 3
</code></pre></div></div>
<hr />
<h2 id="相等操作符">相等操作符</h2>
<p>==,===和!=,!==的区别是:前者是先转换再比较,后者是只比较不转换</p>
<p>在转换不同的数据时,相等和 不相等操作符遵循下面的规则:</p>
<blockquote>
<p>1.如果有一个操作符是布尔值,则比较之前先将其转换为数值—false转换为0,而true转换为1;<br />
2.如果一个操作符是字符串,另外一个是数值,在比较之前先将字符串转换为数值
3.如果一个操作符是对象,另外一个不是,则调用对象的valueOf()方法,用得到的原始值按照前面的规则进行比较;<br />
4.null和undefined是相等的;<br />
5.要比较相等性之前,不能将null和undefined转换成其他任何值;<br />
6.NaN != NaN //true</p>
</blockquote>
<p>记住:null == undefined会返回true,因为它们是类似的值;但null === undefined会返回false,因为它们是不同类型的值。</p>
<p>由于相等和不相等操作符存在类型转换问题,而为了保持代码中数据类型的完整性,推荐使用全等和不全等操作符</p>
JavaScript学习:加性操作符
2014-07-02T00:00:00+00:00
http://wangdaodao.github.io/2014-07-02/js-study-0008
<h2 id="加法">加法</h2>
<p>加法操作符(+)的用法</p>
<p>如果两个操作符都是数值,执行常规的加法计算,然后根据下列规则返回结果:<br />
如果有一个操作数是NaN,则结果是NaN; <br />
如果是Infinity加Infinity,则结果是Infinity; <br />
如果是-Infinity加-Infinity,则结果是-Infinity; <br />
如果是Infinity加-Infinity,则结果是NaN; <br />
如果是+0加+0,则结果是+0; <br />
如果是-0加-0,则结果是-0; <br />
如果是+0加-0,则结果是+0。</p>
<p>不过,如果有一个操作数是字符串,那么就要应用如下规则: <br />
如果两个操作数都是字符串,则将第二个操作数与第一个操作数拼接起来; <br />
如果只有一个操作数是字符串,则将另一个操作数转换为字符串,然后再将两个字符串拼接起来。</p>
<p>如果有一个操作数是对象、数组或者是布尔值,则调用他们的toString()方法取得相应的字符串值,然后再应用前面关于字符串的规则。对于undefined和null,分别调用String()函数并取得字符串”undefined”和”null”。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var num1 = 5;
var num2 = 10;
//a510
var message = "a" + 5 + 10;
//a15
var message1 = "a" + (5 + 10);
</code></pre></div></div>
<hr />
<h2 id="减法">减法</h2>
<p>减法操作符(-)的用法</p>
<p>ECMAScript中的减法操作符在处理各种数据类型转换时,同样需要遵循一些特殊规则,如下所示: <br />
如果两个操作符都是数值,则执行常规的算术减法操作并返回结果; <br />
如果有一个操作数是NaN,则结果是NaN; <br />
如果是Infinity减Infinity,则结果是NaN; <br />
如果是-Infinity减-Infinity,则结果是NaN; <br />
如果是Infinity减-Infinity,则结果是Infinity; <br />
如果是-Infinity减Infinity,则结果是-Infinity; <br />
如果是+0减+0,则结果是+0; <br />
如果是+0减-0,则结果是-0; <br />
如果是-0减-0,则结果是+0; <br />
如果有一个操作数是字符串、布尔值、null或undefined,则先在后台调用Number()函数将其转换为数值,然后再根据前面的规则执行减法计算。如果转换的结果是NaN,则减法的结果就是NaN; <br />
如果有一个操作数是对象,则调用对象的valueOf()方法以取得表示该对象的数值。如果得到的值是NaN,则减法的结果就是NaN。如果对象没有valueOf()方法,则调用其toString()方法并将得到的字符串转换为数值。</p>
JavaScript学习:乘性操作符
2014-07-02T00:00:00+00:00
http://wangdaodao.github.io/2014-07-02/js-study-0007
<p>ECMAScript定义了3个乘性操作符:<strong>乘法</strong>、<strong>除法</strong>和<strong>求模</strong>。</p>
<p>如果参与乘法计算的某个操作数不是数值,后台会先使用Number()转型函数将其转换为数值。也就是说,空字符串将被当作0,布尔值true将被当作1。</p>
<h2 id="乘法">乘法</h2>
<p>乘法操作符由一个星号(*)表示,用于计算数值乘积。</p>
<p>在处理特殊值的情况下,乘法操作符遵循下列特殊的规则:</p>
<blockquote>
<p>如果操作数都是数值,执行常规的乘法计算,即两个正数或两个负数相乘的结果还是正数,而如果只有一个操作数有符号,那么结果就是负数。<br />
如果乘积超过了ECMAScript数值的表示范围,则返回Infinity或-Infinity; > 如果有一个操作数是NaN,则结果是NaN; <br />
如果是Infinity与0相乘,则结果是NaN; <br />
如果是Infinity与非0数值相乘,则结果是Infinity或-In-finity,取决于有符号操作数的符号; <br />
如果是Infinity与Infinity相乘,则结果是Infinity; <br />
如果有一个操作数不是数值,则在后台调用Number()将其转换为数值,然后再应用上面的规则。</p>
</blockquote>
<hr />
<h2 id="除法">除法</h2>
<p>除法操作符由一个斜线符号(/)表示,执行第二个操作数除第一个操作数的计算。</p>
<p>除法操作符对特殊的值也有特殊的处理规则。这些规则如下:</p>
<blockquote>
<p>如果操作数都是数值,执行常规的除法计算,即两个正数或两个负数相除的结果还是正数,而如果只有一个操作数有符号,那么结果就是负数。<br />
如果商超过了ECMAScript数值的表示范围,则返回Infinity或-Infinity; <br />
如果有一个操作数是NaN,则结果是NaN; <br />
如果是Infinity被Infinity除,则结果是NaN; <br />
如果是零被零除,则结果是NaN; <br />
如果是非零的有限数被零除,则结果是Infinity或-Infinity,取决于有符号操作数的符号; <br />
如果是Infinity被任何非零数值除,则结果是Infinity或-Infinity,取决于有符号操作数的符号; <br />
如果有一个操作数不是数值,则在后台调用Number()将其转换为数值,然后再应用上面的规则。</p>
</blockquote>
<hr />
<h2 id="求模">求模</h2>
<p>求模(余数)操作符由一个百分号(%)表示。</p>
<p>求模操作符会遵循下列特殊规则来处理特殊的值:</p>
<blockquote>
<p>如果操作数都是数值,执行常规的除法计算,返回除得的余数; <br />
如果被除数是无穷大值而除数是有限大的数值,则结果是NaN; <br />
如果被除数是有限大的数值而除数是零,则结果是NaN; <br />
如果是Infinity被Infinity除,则结果是NaN; <br />
如果被除数是有限大的数值而除数是无穷大的数值,则结果是被除数; <br />
如果被除数是零,则结果是零; <br />
如果有一个操作数不是数值,则在后台调用Number()将其转换为数值,然后再应用上面的规则。</p>
</blockquote>
JavaScript学习:布尔操作符
2014-07-02T00:00:00+00:00
http://wangdaodao.github.io/2014-07-02/js-study-0006
<p>布尔操作符包括<strong>与(AND)</strong>、<strong>非(NOT)</strong>和<strong>或(OR)</strong>!</p>
<h2 id="逻辑与">逻辑与</h2>
<p>逻辑与操作符由两个和好(&&)表述,逻辑与真值表:</p>
<table>
<thead>
<tr>
<th>第一个操作数</th>
<th>第二个操作数</th>
<th>结果</th>
</tr>
</thead>
<tbody>
<tr>
<td>true</td>
<td>true</td>
<td>true</td>
</tr>
<tr>
<td>true</td>
<td>false</td>
<td>false</td>
</tr>
<tr>
<td>false</td>
<td>true</td>
<td>false</td>
</tr>
<tr>
<td>false</td>
<td>false</td>
<td>false</td>
</tr>
</tbody>
</table>
<p>逻辑与操作可以应用于任何类型的操作数,而不仅仅是布尔值。</p>
<p>在有一个操作数不是布尔值的情况下,逻辑与操作就不一定返回布尔值;此时,它遵循下列规则:</p>
<blockquote>
<p>如果第一个操作数是对象,则返回第二个操作数; <br />
如果第二个操作数是对象,则只有在第一个操作数的求值结果为true的情况下才会返回该对象; <br />
如果两个操作数都是对象,则返回第二个操作数; <br />
如果有一个操作数是null,则返回null; <br />
如果有一个操作数是NaN,则返回NaN; <br />
如果有一个操作数是undefined,则返回undefined。</p>
</blockquote>
<p><strong>逻辑与操作属于短路操作</strong>,即如果第一个操作数能够决定结果,那么就不会再对第二个操作数求值。对于逻辑与操作而言,如果第一个操作数是false,则无论第二个操作数是什么值,结果都不再可能是true了。</p>
<hr />
<h2 id="逻辑或">逻辑或</h2>
<table>
<tbody>
<tr>
<td>逻辑或操作符由两个竖线符号(</td>
<td> </td>
<td>)表示;逻辑或真值表:</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>第一个操作数</th>
<th>第二个操作数</th>
<th>结果</th>
</tr>
</thead>
<tbody>
<tr>
<td>true</td>
<td>true</td>
<td>true</td>
</tr>
<tr>
<td>true</td>
<td>false</td>
<td>true</td>
</tr>
<tr>
<td>false</td>
<td>true</td>
<td>true</td>
</tr>
<tr>
<td>false</td>
<td>false</td>
<td>false</td>
</tr>
</tbody>
</table>
<p>如果有一个操作数不是布尔值,逻辑或也不一定返回布尔值;此时,它遵循下列规则:</p>
<blockquote>
<p>如果第一个操作数是对象,则返回第一个操作数; <br />
如果第一个操作数的求值结果为false,则返回第二个操作数; <br />
如果两个操作数都是对象,则返回第一个操作数; <br />
如果两个操作数都是null,则返回null; <br />
如果两个操作数都是NaN,则返回NaN; <br />
如果两个操作数都是undefined,则返回undefined。</p>
</blockquote>
<p><strong>逻辑或操作符也是短路操作符</strong>。也就是说,如果第一个操作数的求值结果为true,就不会对第二个操作数求值了。</p>
<hr />
<h2 id="逻辑非">逻辑非</h2>
<p>逻辑非操作符由一个叹号(!)表示,可以应用于ECMAScript中的任何值。无论这个值是什么数据类型,这个操作符都会返回一个布尔值。逻辑非操作符首先会将它的操作数转换为一个布尔值,然后再对其求反。也就是说,逻辑非操作符遵循下列规则:</p>
<blockquote>
<p>如果操作数是一个对象,返回false; <br />
如果操作数是一个空字符串,返回true; <br />
如果操作数是一个非空字符串,返回false; <br />
如果操作数是数值0,返回true; <br />
如果操作数是任意非0数值(包括Infinity),返回false; <br />
如果操作数是null,返回true; 如果操作数是NaN,返回true;<br />
如果操作数是undefined,返回true。</p>
</blockquote>
JavaScript学习:一元操作符
2014-07-02T00:00:00+00:00
http://wangdaodao.github.io/2014-07-02/js-study-0005
<p>只能操作一个值的操作符叫做一元操作符。一元操作符包括<strong>递增递减操作符</strong>和<strong>一元加减操作符</strong>!</p>
<h2 id="递增递减操作符">递增递减操作符</h2>
<p>递增和递减操作符有两个版本:前置型和后置型。顾名思义,前置型应该位于要操作的变量之前,而后置型则应该位于要操作的变量之后。</p>
<p>执行前置递增和递减操作时,<strong>变量的值都是在语句被求值以前改变的</strong>。</p>
<p>后置型递增和递减操作符的语法不变(仍然分别是++和–),只不过要放在变量的后面而不是前面。后置递增和递减与前置递增和递减有一个非常重要的区别,即<strong>递增和递减操作是在包含它们的语句被求值之后才执行的</strong>。</p>
<p>所有这4个操作符对任何值都适用,也就是它们不仅适用于整数,还可以用于字符串、布尔值、浮点数值和对象。在应用于不同的值时,递减和递增操作符遵循下列规则:</p>
<blockquote>
<p>1.在应用于一个包含有效数字字符的字符串时。先将其转换为数字值,在执行加减1的操作。字符串变量变成数值变量。<br />
2.在应用于一个不包含有效数字字符串时,将变量的值设置为NaN。字符串变量变成数值变量。<br />
3.在应用于布尔值false时,先将其转换为0再执行加减1的操作。布尔值变量变成数值变量。<br />
4.在应用与布尔值ture时,先将其转换为1再执行加减1的操作。布尔值变量变成数值变量。<br />
5.在应用于浮点数值时,执行加减1的操作。<br />
6.在应用对象时,先调用对象的valueOf()方法以取得一个可供操作的值。然后对该值应用前述规则。如果结果是NaN,则在调用toString()方法后在应用前述规则。对象变量变成数值变量。</p>
</blockquote>
<p>代码示例:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var s1 = "2";
var s2 = "z";
var b = fasle;
var f = 1.1;
var o = {
valueOf: function() {
return -1;
}
};
s1++; //3
s2++; //NaN
b++; //1
f--; //0.10000000000000009 (由于浮点舍入错误所致)
o--; //值变成数值-2
</code></pre></div></div>
<hr />
<h2 id="一元加减操作符">一元加减操作符</h2>
<p>一元操作符以一个加号(+)表示,放在数值前面,对数值不会产生任何影响,不过,在对非数值应用一元加操作符时,该操作符会像Number转型函数一样对这个值执行转换。换句话说,布尔值false和true将被转换为0和1,字符串值会被按照一组特殊的规则进行解析,而对象是先调用它们的valueOf()和toString()方法,再转换得到值。</p>
<p>代码示例:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var s1 = "01";
var s2 = "1.1";
var s3 = "z";
var b = false;
var f = 1.1;
var o = function() {
valueOf: function() {
return -1;
}
};
s1 = +s1; //1
s2 = +s2; //1.1
s3 = +s3; //NaN
b = +b; //0
f = +f; //1.1
o = +o; //-1
</code></pre></div></div>
<p>一元操作符主要用于表示负数,而当应用于非数值时,一元减操作符遵循与一元加操作符相同的规则,最后再将得到的数值转换为负数。</p>
<p>一元加和减操作符主要用于基本的算术运算,也可以像前面实例所展示的一样用于转换数据类型。</p>
JavaScript学习:数据类型
2014-07-02T00:00:00+00:00
http://wangdaodao.github.io/2014-07-02/js-study-0004
<h2 id="数据类型">数据类型</h2>
<p>ECMAScript中有5种简单数据类型(也称为基本数据类型):<strong>Undefined</strong>、<strong>Null</strong>、<strong>Boolean</strong>、<strong>Number</strong>和<strong>String</strong>。还有1种复杂数据类型—<strong>Object</strong>,Object本质上是由一组无序的名值对组成的。</p>
<p>鉴于ECMAScript是松散类型的,因此需要有一种手段来检测给定变量的数据类型—typeof就是负责提供这方面信息的操作符。对一个值使用typeof操作符可能返回下列某个字符串:</p>
<blockquote>
<p>“undefined”:如果这个值未定义;<br />
“boolean”:如果这个值是布尔值;<br />
“string”:如果这个值是字符串;<br />
“number”:如果这个值是数值;<br />
“object”:如果这个值是对象或null;<br />
“function”:如果这个值是函数。</p>
</blockquote>
<hr />
<h2 id="undefined">Undefined</h2>
<p>在使用var声明变量但未对其加以初始化时,这个变量的值就是undefined。</p>
<p>不过,包含undefined值的变量与尚未定义的变量还是不一样的。对于尚未声明过得变量,只能进行一项操作,即使用typeof操作符检测其数据类型,typeof操作对未初始化和未声明的变量都会返回unfined值</p>
<hr />
<h2 id="boolean">Boolean</h2>
<p>任何数据类型的值可以调用Boolean()函数,而且总会返回一个Boolean值</p>
<table>
<thead>
<tr>
<th>数据类型</th>
<th>转化为true的值</th>
<th>转化为false的值</th>
</tr>
</thead>
<tbody>
<tr>
<td>Boolean</td>
<td>true</td>
<td>false</td>
</tr>
<tr>
<td>String</td>
<td>任何非空字符串</td>
<td>""(空字符串)</td>
</tr>
<tr>
<td>Number</td>
<td>任何非0数字值(包含无穷大)</td>
<td>0和NaN</td>
</tr>
<tr>
<td>Object</td>
<td>任何对象</td>
<td>null</td>
</tr>
<tr>
<td>Undefined</td>
<td> </td>
<td>undefined</td>
</tr>
</tbody>
</table>
<hr />
<h2 id="string">String</h2>
<p>JavaScript里声明字符串特别简单,在JS里使用单引号或双引号都可以。任何字符串的长度都可以通过访问其length属性取得。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var text = "hello world";
//11,加上了空格!
alert(text.length);
</code></pre></div></div>
<p>要把一个值转换为一个字符串有两种方式。第一种是使用几乎每个值都有的toString()方法。这个方法唯一要做的就是返回相应值的字符串表现。但null和undefined值没有这个方法。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var age = 11;
//the string "11"
var ageAsString = age.toString();
var found = true;
//the string "true"
var foundAsString = found.toString();
</code></pre></div></div>
<p>在不知道要转换的值是不是null或undefined的情况下,还可以使用转型函数String(),这个函数能够将任何类型的值转换为字符串。</p>
<p>String()函数遵循下列转换规则:<br />
如果值有toString()方法,则调用该方法(没有参数)并返回相应的结果;<br />
如果值是null,则返回”null”;<br />
如果值是undefined,则返回”undefined”。</p>
<hr />
<h2 id="number">Number</h2>
<p>在JavaScript里所有的Number都是浮点型的,当声明一个数字变量的时候,记得不要使用任何引号。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// 注:使用var类声明变量
var leftSide = 100;
var topSide = 50;
// 5000
var areaOfRectangle = leftSide * topSide;
</code></pre></div></div>
<p>有3个函数可以把非数值转换为数值:<code class="language-plaintext highlighter-rouge">Number()</code>、<code class="language-plaintext highlighter-rouge">parseInt()</code>和<code class="language-plaintext highlighter-rouge">parseFloat()</code>。
第一个函数,即转型函数<code class="language-plaintext highlighter-rouge">Number()</code>可以用于任何数据类型,而另两个函数则专门用于把字符串转换成数值。</p>
<p>Number()函数的转换规则如下:</p>
<blockquote>
<p>1.如果是Boolean值,true和false将分别被转换为1和0。<br />
2.如果是数字值,只是简单的传入和返回。 <br />
3.如果是null值,返回0。 <br />
4.如果是undefined,返回NaN。 <br />
5.如果是字符串,遵循下列规则:<br />
5.1如果字符串中只包含数字(包括前面带加号或头号的情况),则将其转换为十进制数值,即”1”会变成1,”123”会变成123,而”011”会变成11(注意:前导的零被忽略了);<br />
5.2如果字符串中包含有效的浮点格式,如”1.1”,则将其转换为对应的浮点数值(同样,也会忽略前导零);<br />
5.3如果字符串中包含有效的十六进制格式,例如”0xf”,则将其转换为相同大小的十进制整数值;如果字符串是空的(不包含任何字符),则将其转换为0;<br />
5.4如果字符串中包含除上述格式之外的字符,则将其转换为NaN。<br />
6.如果是对象,则调用对象的valueOf()方法,然后依照前面的规则转换返回的值。如果转换的结果是NaN,则调用对象的toString()方法,然后再次依照前面的规则转换返回的字符串值。</p>
</blockquote>
<p>例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//NaN
var num1 = Number("hello wangdaodao");
//0
var num2 = Number("");
//11
var num3 = Number("00011");
//1
var num4 = Number(true);
</code></pre></div></div>
<p>parseInt()函数在转换字符串时,更多的是看其是否符合数值模式。它会忽略字符串前面的空格,直至找到第一个非空格字符。如果第一个字符不是数字字符或者负号,parseInt()就会返回NaN;也就是说,用parseInt()转换空字符串会返回NaN(Number()对空字符返回0)。如果第一个字符是数字字符,parseInt()会继续解析第二个字符,直到解析完所有后续字符或者遇到了一个非数字字符。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//123
var num1 = parseInt("123daodao456");
//NaN
var num2 = parseInt("daodao123");
//22
var num3 = parseInt("22.5");
</code></pre></div></div>
<p>parseFloat()也是从第一个字符(位置0)开始解析每个字符。而且也是一直解析到字符串末尾,或者解析到遇见一个无效的浮点数字字符为止。也就是说,字符串中的第一个小数点是有效的,而第二个小数点就是无效的了,因此它后面的字符串将被忽略。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//123
var num1 = parseFloat("123daodao456");
//NaN
var num2 = parseFloat("daodao123");
//22.5
var num3 = parseFloat("22.5.4");
</code></pre></div></div>
<hr />
<h2 id="object">Object</h2>
<p>ECMAScript中的对象其实就是一组数据和功能的集合。关键是要理解一个重要的思想:即在ECMAScript中,Object类型是所有它的实例的基础。换句话说,Object类型所具有的任何属性和方法也同样存在于更具体的对象中。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// 2种类型定义Object对象
// 字面量(大括号)
var profile = {
name: 'Bob',
age: 99,
job: 'Freelance Hitman'
};
// 使用Object构造函数
var profile = new Object();
profile.name = 'Bob';
profile.age = 99;
profile.job = 'Freelance Hitman';
</code></pre></div></div>
<hr />
<h2 id="function">Function</h2>
<p>函数是特殊的对象。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// 使用function操作符来声明新函数
function myFunctionName(arg1, arg2) {
// 函数代码
}
// 你也可以声明匿名函数
function (arg1, arg2) {
// Function code goes here.
}
// 运行函数很简单,直接在函数名称后面加上小括号就可以了
// 或者也可以带上参数
myFunctionName(); // 无参
myFunctionName('foo', 'bar'); // 有参数
// 也可以使用自调用
(function () {
// 这里自调用函数
})();
</code></pre></div></div>
<hr />
<h2 id="array">Array</h2>
<p>数组也是特殊的对象,它包含了一批值(或对象),访问这些数据的话需要使用数字索引:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// 2种方式声明数组
// 字面量:
var fruit = ['apple', 'lemon', 'banana'];
// Array构造函数:
var fruit = new Array('apple', 'lemon', 'banana');
fruit[0]; // 访问第1个项(apple)
fruit[1]; // 访问第2个项(lemon)
fruit[2]; // 访问第3个项(banana)
</code></pre></div></div>
JavaScript学习:变量作用域
2014-07-01T00:00:00+00:00
http://wangdaodao.github.io/2014-07-01/js-study-0003
<h2 id="变量的声明">变量的声明</h2>
<p>JS中变量申明分显式申明和隐式申明。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var i=100;//显式申明
i=100;//隐式申明
</code></pre></div></div>
<p>在函数中使用var关键字进行显式申明的变量是做为局部变量,而没有用var关键字,使用直接赋值方式声明的是全局变量。</p>
<p>在使用var关键字声明变量时,这个变量将被自动添加到距离最近的可用环境中。对于函数而言,这个最近的环境就是函数的局部环境;如果变量在未经声明的情况下被初始化,那么该变量会被自动添加到全局环境。</p>
<p>虽然省略var操作符可以定义全局变量,但这也不是我们推荐的做法。因为在局部作用域中定义的全局变量很难维护,而且如果有意地忽略了var操作符,也会由于相应变量不会马上就有定义而导致不必要的混乱。给未经声明的变量赋值在严格模式下会导致抛出ReferenceError错误。</p>
<h2 id="全局变量和局部变量">全局变量和局部变量</h2>
<p>当JS解析器执行时,首先就会在执行环境里构建一个全局对象,我们定义的全局属性就是做为该对象的属性读取,在顶层代码中我们使用this关键字和window对象都可以访问到它。而函数体中的局部变量只在函数执行时生成的调用对象中存在,函数执行完毕时局部变量即刻销毁。</p>
<h2 id="变量作用域">变量作用域</h2>
<p>执行环境有全局执行环境(也称为全局环境)和函数执行环境之分; 每次进入一个新执行环境,都会创建一个用于搜索变量和函数的作用域链; 函数的局部环境不仅有权访问函数作用域中的变量,而且有权访问其包含(父)环境,乃至全局环境; 全局环境只能访问在全局环境中定义的变量和函数,而不能直接访问局部环境中的任何数据;</p>
<h2 id="代码分析反思">代码分析+反思</h2>
<h3 id="1-作用域分析">1. 作用域分析</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function t() {
var a;
function t2() {
var b;
}
}
</code></pre></div></div>
<p>js中函数也是对象,所以变量a所在的对象是t,t又在window对象中,所以a的作用域链:t–window
那么b所以在的对象即t2,t2又包含在t中,t又在window对象,所以b的作用域链:t2–t–window</p>
<h3 id="2-javascript没有var的变量都为全局变量且为window对象的属性">2. Javascript没有var的变量都为全局变量,且为window对象的属性</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function test1() {
all = 30;
alert(all);
}
test1();
//30
alert(all);
//30
alert(window.all);
</code></pre></div></div>
<p>如果把上面的代码修改一下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>function test1() {
var all = 30;
alert(all);
}
test1();
//ReferenceError: all is not defined
alert(all);
//undefined,这里为啥会弹出undefined呢?
alert(window.all);
</code></pre></div></div>
<p>反思:这里我理解的意思是<em>window.all</em>是<strong>window对象下面的all属性</strong>,系统 检测到window对象但是没有检测到all属性,所以 undefined!</p>
<h3 id="3-函数内部的变量取代全局同名变量">3. 函数内部的变量取代全局同名变量</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var t = "bb";
function test() {
//为什么弹出undefined?
alert(t);
var t = "aa";
//aa
alert(t);
}
test();
alert(t);
</code></pre></div></div>
<p>反思:由于函数作用域的特性,局部变量在整个函数体始终是有定义的,也即,在函数体内局部变量遮盖了同名全局变量,但是只有在程序执行到var语句的时候,局部变量才会被真正的赋值。因此,上述过程相当于,将<strong>函数内的变量声明提前至函数体顶部,同时变量初始化留在原来的位置</strong>。就相当于如下这个函数</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var t = "bb";
function test() {
//将函数内的变量声明提前至函数顶部
var t;
alert(t);
var t = "aa";
//aa
alert(t);
}
test();
</code></pre></div></div>
<p>再次修改下代码:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var t = "bb";
function test() {
//bb
alert(t);
t = "aa";
//aa
alert(t);
}
test();
</code></pre></div></div>
<p>反思:由于函数体内的t变量没有用var声明,就默认为全局变量,当然就不存在变量提前声明的问题。第一行就会输出”bb”,而第三行改变了t全局变量的值,输出了”aa”。</p>
JavaScript学习:Script标签
2014-06-30T00:00:00+00:00
http://wangdaodao.github.io/2014-06-30/js-study-0002
<p><code class="language-plaintext highlighter-rouge"><script></code>常用属性。</p>
<blockquote>
<p><em>async</em>:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。<br />
<em>defer</em>:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。<strong>IE7及更早版本对嵌入脚本也支持这个属性。</strong></p>
</blockquote>
<p>无论如何包含代码,只要不存在defer和async属性,浏览器都会按照<code class="language-plaintext highlighter-rouge"><script></code>元素在页面中出现的先后顺序对它们依次进行解析。换句话说,在第一个<code class="language-plaintext highlighter-rouge"><script></code>元素包含的代码解析完成后,第二个<code class="language-plaintext highlighter-rouge"><script></code>包含的代码才会被解析,然后才是第三个、第四个……</p>
<p>如果存在<em>defer</em>属性,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,<strong>因此最好只包含一个延迟脚本</strong>。</p>
<p>如果存在<em>async</em>属性,标记为<em>async</em>的脚本并不保证按照指定它们的先后顺序执行。</p>
<p>指定<em>async</em>属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。<strong>为此,建议异步脚本不要在加载期间修改DOM。</strong>异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。</p>
JavaScript学习:DOM和BOM
2014-06-30T00:00:00+00:00
http://wangdaodao.github.io/2014-06-30/js-study-0001
<p>在学习javascript中学到了BOM和DOM,只看外表,他们就B和D的区别。他们到底是什么,有什么区别呢?</p>
<p>BOM的全称是<em>Browser Object Model</em>,中文名是<strong>浏览器对象模型</strong>。允许通过BOM访问和操控浏览器窗口,研发者通过使用BOM,可移动窗口、更改状态栏文本、执行其它不与页面内容发生直接联系的操作。BOM是JavaScript应用中唯一没有相关标准的部分,这是BOM真正独特且经常出现问题的所在。 BOM主要处理浏览器窗口与框架,浏览器特有的JavaScript扩展都被认作是BOM的一部分。由于BOM没有相关标准,每个浏览器都有其自己对BOM的实现方式。BOM有窗口对象、导航对象等一些实际上已经默认的标准,但对于这些对象和其它一些对象,每个浏览器都定义了自己的属性和方式。</p>
<p>DOM的全称是<em>Document Object Model</em>,中文名是<strong>文档对象模型</strong>。DOM不是java或者javascript,是一组用来描述脚本怎样与结构化文档进行交互和访问的Web标准.描述了处理网页内容的方法和接口,是HTML和XML的API,DOM把整个页面规划成由节点层级构成的文档。DOM的优势主要表现在:易用性强,使用DOM时,将把所有的XML文档信息都存于内存中,并且遍历简单,支持XPath,增强了易用性。DOM的缺点主要表现在:效率低,解析速度慢,内存占用量过高,对于大文件来说几乎不可能使用。另外效率低还表现在大量的消耗时间,因为使用DOM进行解析时,将为文档的每个element、attribute、processing-instrUCtion和comment都创建一个对象,这样在DOM机制中所运用的大量对象的创建和销毁无疑会影响其效率。</p>
<p>文档对象模型(DOM),提供访问和操作网页内容的方法和接口;</p>
<p>浏览器对象模型(BOM),提供与浏览器交互的方法和接口。</p>
SASS学习:Sass调试
2014-06-27T00:00:00+00:00
http://wangdaodao.github.io/2014-06-27/sass-03
<h2 id="chrome浏览器调试">Chrome浏览器调试</h2>
<p>F12打开调试面板,点击调试面板右上角的齿轮图标打开设置,在<code class="language-plaintext highlighter-rouge">general</code>选项中勾选<code class="language-plaintext highlighter-rouge">Enable CSS source map</code> 和 <code class="language-plaintext highlighter-rouge">Auto-reload generated CSS</code>。</p>
<p><img src="/uploads/2014/06/chrome-sourcemap0.jpg" alt="Chrome浏览器调试" /></p>
<p><img src="/uploads/2014/06/chrome-sourcemap1.jpg" alt="Chrome浏览器调试" /></p>
<p>开启<code class="language-plaintext highlighter-rouge">--sourcemap</code>编译,f12打开调试面板,就可以看到原先右边的css文件变成了我们现在的scss文件。</p>
<p><img src="/uploads/2014/06/chrome-sourcemap2.jpg" alt="Chrome浏览器调试" /></p>
<p>点击scss文件,会跳到source里面的scss源文件,现在可以在里面进行修改,修改完成后可以右键选择<code class="language-plaintext highlighter-rouge">save</code>或<code class="language-plaintext highlighter-rouge">save as</code>命令,然后替换我们本地的scss源文件,刷新chrome就可以看到变化(注意,解析样式需要一定时间)。以后只要<code class="language-plaintext highlighter-rouge">ctrl+s</code>保存修改就可以在浏览器中看到修改效果了。</p>
<p><img src="/uploads/2014/06/chrome-sourcemap3.jpg" alt="Chrome浏览器调试" /></p>
<hr />
<h2 id="firefox浏览器调试">FireFox浏览器调试</h2>
<p>debug-info调试:firefox可以安装插件<a href="https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/">FireSass</a>使用<code class="language-plaintext highlighter-rouge">debug-info</code>来调试。开启<code class="language-plaintext highlighter-rouge">--debug-info</code>编译,f12打开<code class="language-plaintext highlighter-rouge">firebug</code>,就可以看到原先右边的css文件变成了我们现在的scss文件。</p>
<p><img src="/uploads/2014/06/debug-scss.jpg" alt="FireFox浏览器调试" /></p>
<p>sourcemap调试:firefox 29 将会开始支持<code class="language-plaintext highlighter-rouge">sourcemap</code>,注意是火狐自带的调试功能,而不是firebug。开启<code class="language-plaintext highlighter-rouge">--sourcemap</code>编译,右键“查看元素”采用火狐自带的调试功能,打开调试面板,在样式上右键选择“显示原始来源”。</p>
<p><img src="/uploads/2014/06/firefox-sourcemap1.jpg" alt="FireFox浏览器调试" /></p>
<p>点击scss文件,这样就跳到了scss文件。如下图:</p>
<p><img src="/uploads/2014/06/firefox-sourcemap2.jpg" alt="FireFox浏览器调试" /></p>
<p>然后就可以进行我们的修改了,修改之后点击保存或者<code class="language-plaintext highlighter-rouge">ctrl+s</code>弹出我们要保存到哪里,同谷歌一样直接覆盖到我们本地的源文件就ok了。</p>
<p><img src="/uploads/2014/06/firefox-sourcemap3.jpg" alt="FireFox浏览器调试" /></p>
SASS学习:Sass编译
2014-06-27T00:00:00+00:00
http://wangdaodao.github.io/2014-06-27/sass-02
<h2 id="命令行编译">命令行编译</h2>
<h3 id="单文件转换命令">单文件转换命令</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sass style.scss style.css
</code></pre></div></div>
<p><img src="/uploads/2014/06/cmd1.jpg" alt="单文件转换命令" /></p>
<h3 id="单文件监听命令">单文件监听命令</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sass --watch style.scss:style.css
</code></pre></div></div>
<p><img src="/uploads/2014/06/cmd2.jpg" alt="单文件监听命令" /></p>
<h3 id="文件夹监听命令">文件夹监听命令</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sass --watch sassstyle:stylesheets
</code></pre></div></div>
<p><img src="/uploads/2014/06/cmd3.jpg" alt="文件夹监听命令" /></p>
<p>我们一般常用的有 <code class="language-plaintext highlighter-rouge">--style</code> , <code class="language-plaintext highlighter-rouge">--sourcemap</code> , <code class="language-plaintext highlighter-rouge">--debug-info</code> 等。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sass --watch style.scss:style.css --style compact
sass --watch style.scss:style.css --sourcemap
sass --watch style.scss:style.css --style expanded --sourcemap
sass --watch style.scss:style.css --debug-info
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">--style</code> 表示解析后的css是什么格式,有四种取值分别为:<code class="language-plaintext highlighter-rouge">nested</code>,<code class="language-plaintext highlighter-rouge">expanded</code>,<code class="language-plaintext highlighter-rouge">compact</code>,<code class="language-plaintext highlighter-rouge">compressed</code>。<br />
<code class="language-plaintext highlighter-rouge">--sourcemap</code>表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。<br />
<code class="language-plaintext highlighter-rouge">--debug-info</code>表示开启debug信息,升级到3.3.0之后因为sourcemap更高级,这个debug-info就不太用了。</p>
<p>四种style生成后的css:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// nested
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
// expanded
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
}
.huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
}
// compact
#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }
// compressed
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
</code></pre></div></div>
<hr />
<h2 id="sublime-text安装sass-build编译">Sublime Text安装SASS Build编译</h2>
<p>前提还是要有ruby环境,安装完之后,使用快捷键”Ctrl+b”来执行编译!</p>
<p><img src="/uploads/2014/06/st1.jpg" alt="SASS Build" /></p>
<p>设置编译:编译模式,我这里选择的是压缩编译。</p>
<p><img src="/uploads/2014/06/st2.jpg" alt="SASS Build" /></p>
<p><strong>注意:编码必须是UTF-8,否则会报错!</strong></p>
SASS学习:Sass语法
2014-06-27T00:00:00+00:00
http://wangdaodao.github.io/2014-06-27/sass-01
<h2 id="文件后缀名">文件后缀名</h2>
<p>Sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的CSS文件格式差不多,使用大括号和分号。建议使用后缀名为scss的文件,以避免Sass后缀名的严格格式要求报错。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//文件后缀名为sass的语法
body
background: #eee
font-size:12px
p
background: #0982c1
//文件后缀名为scss的语法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}
</code></pre></div></div>
<hr />
<h2 id="导入">导入</h2>
<p>sass的导入(<code class="language-plaintext highlighter-rouge">@import</code>)规则和CSS的有所不同,编译时会将<code class="language-plaintext highlighter-rouge">@import</code>的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如<code class="language-plaintext highlighter-rouge">@import</code> ‘reset.css’,那效果跟普通CSS导入样式文件一样,导入的css文件不会合并到编译后的文件中,而是以<code class="language-plaintext highlighter-rouge">@import</code>方式存在。</p>
<p>所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头,如_mixin.scss。这种文件在导入的时候可以不写下划线,可写成<code class="language-plaintext highlighter-rouge">@import "mixin"</code>。</p>
<p>被导入sass文件a.scss:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//a.scss
//-------------------------------
body {
background: #eee;
}
</code></pre></div></div>
<p>需要导入样式的sass文件b.scss:</p>
<p>@import “reset.css”;
@import “a”;
p{
background: #0982c1;
}</p>
<p>转译出来的b.css样式:</p>
<p>@import “reset.css”;
body {
background: #eee;
}
p{
background: #0982c1;
}</p>
<p>根据上面的代码可以看出,b.scss编译后,reset.css继续保持import的方式,而a.scss则被整合进来了。</p>
<hr />
<h2 id="注释">注释</h2>
<p>sass有两种注释方式,一种是标准的css注释方式<code class="language-plaintext highlighter-rouge">/* */</code>,另一种则是<code class="language-plaintext highlighter-rouge">//</code>双斜杆形式的单行注释,不过这种单行注释不会被转译出来。</p>
<p>标准的css注释:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>/*
*我是css的标准注释
*设置body内距
*/
body{
padding:5px;
}
</code></pre></div></div>
<p>双斜杆单行注释,单行注释不会输入到CSS中。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//我是双斜杠表示的单行注释
//设置body内距
body{
padding:5px; //5px
}
</code></pre></div></div>
<hr />
<h2 id="变量">变量</h2>
<p>sass的变量必须是 <code class="language-plaintext highlighter-rouge">$</code> 开头,后面紧跟变量名,而变量值和变量名之间就需要使用冒号(<code class="language-plaintext highlighter-rouge">:</code>)分隔开(就像CSS属性设置一样),如果值后面加上<code class="language-plaintext highlighter-rouge">!default</code>则表示默认值。这里不深入介绍,有兴趣可以自行了解!</p>
<p>普通变量:定义之后可以在全局范围内使用。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//sass style
//-------------------------------
$fontSize: 12px;
body{
font-size:$fontSize;
}
//css style
//-------------------------------
body{
font-size:12px;
}
</code></pre></div></div>
<p>默认变量:sass的默认变量仅需要在值后面加上<code class="language-plaintext highlighter-rouge">!default</code>即可。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//sass style
//-------------------------------
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:1.5;
}
</code></pre></div></div>
<p>sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//sass style
//-------------------------------
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:2;
}
</code></pre></div></div>
<p><strong>默认变量的价值在进行组件化开发的时候会非常有用。</strong></p>
<hr />
<h2 id="嵌套">嵌套</h2>
<p>sass的嵌套包括两种:一种是选择器的嵌套;另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。</p>
<p>选择器嵌套:所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承,从而增强了sass文件的结构性和可读性。在选择器嵌套中,可以使用 <code class="language-plaintext highlighter-rouge">&</code> 表示父元素选择器。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//sass style
//-------------------------------
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
li{
float:left;
}
a{
display: block;
padding: 0 10px;
color: #fff;
&:hover{
color:#ddd;
}
}
}
//css style
//-------------------------------
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
}
#top_nav li{
float:left;
}
#top_nav a{
display: block;
padding: 0 10px;
color: #fff;
}
#top_nav a:hover{
color:#ddd;
}
</code></pre></div></div>
<p>属性嵌套:所谓属性嵌套指的是有些属性拥有同一个开始单词,如 <code class="language-plaintext highlighter-rouge">border-width</code> , <code class="language-plaintext highlighter-rouge">border-color</code> 都是以border开头。拿个官网的实例看下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//sass style
//-------------------------------
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}
//css style
//-------------------------------
.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
}
</code></pre></div></div>
<p>个人感觉属性嵌套,作用不大……</p>
<hr />
<h2 id="mixin"><code class="language-plaintext highlighter-rouge">@mixin</code></h2>
<p>sass中使用 <code class="language-plaintext highlighter-rouge">@mixin</code> 声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的 <code class="language-plaintext highlighter-rouge">@mixin</code> 通过 <code class="language-plaintext highlighter-rouge">@include</code> 来调用。</p>
<p>无参数mixin:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//sass style
//-------------------------------
@mixin center-block {
margin-left:auto;
margin-right:auto;
}
.demo{
@include center-block;
}
//css style
//-------------------------------
.demo{
margin-left:auto;
margin-right:auto;
}
</code></pre></div></div>
<p>有参数mixin:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//sass style
//-------------------------------
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
}
//css style
//-------------------------------
.opacity{
@include opacity; //参数使用默认值
}
.opacity-80{
@include opacity(80); //传递参数
}
</code></pre></div></div>
<hr />
<h2 id="placeholder"><code class="language-plaintext highlighter-rouge">%placeholder</code></h2>
<p>sass中,选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。使用选择器的继承,要使用关键词 <code class="language-plaintext highlighter-rouge">@extend</code> ,后面紧跟需要继承的选择器。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//sass style
//-------------------------------
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
//css style
//-------------------------------
h1,.speaker{
border: 4px solid #ff9aa9;
}
.speaker{
border-width: 2px;
}
</code></pre></div></div>
<p>占位选择器%:从sass 3.2.0以后就可以定义占位选择器 <code class="language-plaintext highlighter-rouge">%</code> 。</p>
<p><strong>这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了<code class="language-plaintext highlighter-rouge"> @extend</code> 去继承相应的样式,都会解析出来所有的样式。</strong></p>
<p>占位选择器以 <code class="language-plaintext highlighter-rouge">%</code> 标识定义,通过 <code class="language-plaintext highlighter-rouge">@extend</code> 调用。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//sass style
//-------------------------------
%ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
%clearfix{
@if $lte7 {
*zoom: 1;
}
&:before,
&:after {
content: "";
display: table;
font: 0/0 a;
}
&:after {
clear: both;
}
}
#header{
h1{
@extend %ir;
width:300px;
}
}
.ir{
@extend %ir;
}
//css style
//-------------------------------
#header h1,
.ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header h1{
width:300px;
}
</code></pre></div></div>
<p>如上代码,定义了两个占位选择器 <code class="language-plaintext highlighter-rouge">%ir</code> 和 <code class="language-plaintext highlighter-rouge">%clearfix</code> ,其中 <code class="language-plaintext highlighter-rouge">%clearfix</code> 这个没有调用,所以解析出来的css样式也就没有clearfix部分。占位选择器的出现,使css文件更加简练可控,没有多余。所以可以用其定义一些基础的样式文件,然后根据需要调用产生相应的css。</p>
<hr />
<h2 id="解惑什么时候用mixin什么时候用placeholder">解惑:什么时候用@mixin,什么时候用%placeholder</h2>
<p>如果你需要使用变量,最好使用 <code class="language-plaintext highlighter-rouge">@mixin</code> ,否则使用 <code class="language-plaintext highlighter-rouge">%placeholder</code> 。主要有两个原因:</p>
<p>首先,你不能在一个 <code class="language-plaintext highlighter-rouge">%placeholder</code> 中使用变量。其实可以,但你不能将变量传递到 <code class="language-plaintext highlighter-rouge">%placeholder</code> 中,所以你不能像 <code class="language-plaintext highlighter-rouge">@mixin</code> 一样根据上下文生成特定的CSS。</p>
<p>第二,当不根据上下文传入变量时,在Sass中使用 <code class="language-plaintext highlighter-rouge">@mixin</code> ,会使用它们变得更为复杂。简单的说,在Sass中每次重复复制 <code class="language-plaintext highlighter-rouge">@mixin</code> ,那他的输出,不仅会造成重复的CSS代码,还会让你的样式文件越来越庞大。</p>
<p>看下面例子:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>@mixin center {
display: block;
margin-left: auto;
margin-right: auto;
}
.container {
@include center;
}
.image-cover {
@include center;
}
</code></pre></div></div>
<p>编译出来的样式:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.container {
display: block;
margin-left: auto;
margin-right: auto;
}
.image-cover {
display: block;
margin-left: auto;
margin-right: auto;
}
</code></pre></div></div>
<p>请注意,重复的CSS出来了。如果只有三行重复,这并没有什么危害,但是如果你的 <code class="language-plaintext highlighter-rouge">@mixin</code> 不只三行代码,或者在你的项目中重复十几次调用定义的 <code class="language-plaintext highlighter-rouge">@mixin</code> ,那么重复的代码有可能就会变成三百行。如果我们使用 <code class="language-plaintext highlighter-rouge">%placeholder</code> 来改造这个示例:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>%center {
display: block;
margin-left: auto;
margin-right: auto;
}
.container {
@extend %center;
}
.image-cover {
@extend %center;
}
</code></pre></div></div>
<p>编译出来的样式:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.container, .image-cover {
display: block;
margin-left: auto;
margin-right: auto;
}
</code></pre></div></div>
<p>所以当你知道一些样式永久不变,而且会重复出现多次的时候,你就可以使用 <code class="language-plaintext highlighter-rouge">@extend</code> 扩展一个定义好的 <code class="language-plaintext highlighter-rouge">%placeholder</code> 。这样可以避免Sass生成重复的代码,让你的样式表更简洁。</p>
<hr />
<h2 id="条件判断及循环">条件判断及循环</h2>
<p><code class="language-plaintext highlighter-rouge">@if</code> 判断 : <code class="language-plaintext highlighter-rouge">@if</code> 可一个条件单独使用,也可以和 <code class="language-plaintext highlighter-rouge">@else</code> 结合多条件使用:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//sass style
//-------------------------------
$lte7: true;
$type: monster;
.ib{
display:inline-block;
@if $lte7 {
*display:inline;
*zoom:1;
}
}
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
//css style
//-------------------------------
.ib{
display:inline-block;
*display:inline;
*zoom:1;
}
p {
color: green;
}
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">@for</code> 循环:for循环有两种形式,分别为:<code class="language-plaintext highlighter-rouge">@for $var from start through end</code> 和 <code class="language-plaintext highlighter-rouge">@for $var from start to end</code> 。 <code class="language-plaintext highlighter-rouge">$i</code>表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//sass style
//-------------------------------
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">@each</code> 循环 语法为: <code class="language-plaintext highlighter-rouge">@each $var in list or map</code> 。其中 <code class="language-plaintext highlighter-rouge">$var</code> 表示变量,而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//sass style
//-------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
//css style
//-------------------------------
.puma-icon {
background-image: url('/images/puma.png');
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
}
.egret-icon {
background-image: url('/images/egret.png');
}
.salamander-icon {
background-image: url('/images/salamander.png');
}
</code></pre></div></div>
<hr />
<h2 id="函数">函数</h2>
<p>sass定义了很多函数可供使用,当然你也可以自己定义函数,以 <code class="language-plaintext highlighter-rouge">@fuction</code> 开始。sass的官方函数链接为:<a href="http://sass-lang.com/documentation/Sass/Script/Functions.html">SASS Fuction</a>,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以 <code class="language-plaintext highlighter-rouge">lighten</code> 减淡和 <code class="language-plaintext highlighter-rouge">darken</code> 加深为最,其调用方法为 <code class="language-plaintext highlighter-rouge">lighten($color,$amount)</code> 和 <code class="language-plaintext highlighter-rouge">darken($color,$amount)</code> ,它们的第一个参数都是颜色值,第二个参数都是百分比。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//sass style
//-------------------------------
$baseFontSize: 10px !default;
$gray: #ccc !defualt;
// pixels to rems
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}
body{
font-size:$baseFontSize;
color:lighten($gray,10%);
}
.test{
font-size:pxToRem(16px);
color:darken($gray,10%);
}
//css style
//-------------------------------
body{
font-size:10px;
color:#E6E6E6;
}
.test{
font-size:1.6rem;
color:#B3B3B3;
}
</code></pre></div></div>
<hr />
<h2 id="运算">运算</h2>
<p>sass具有运算的特性,可以对数值型的Value(如:数字、颜色、变量等)进行加减乘除四则运算。<strong>请注意运算符前后请留一个空格,不然会出错。</strong></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>//sass style
//-----------------------------------
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}
//css style
//-----------------------------------
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complimentary"] {
float: right;
width: 31.25%;
}
</code></pre></div></div>
kindle3快捷键
2014-06-27T00:00:00+00:00
http://wangdaodao.github.io/2014-06-27/kindle3-shortcuts
<h2 id="kindle-3多看快捷键">kindle 3多看快捷键</h2>
<ul>
<li>1 截屏快捷键:<em>shift+空格</em>,屏幕闪一下,代表截屏成功,截屏存放路径:根目录下的<em>DK_ScreenShorts</em></li>
<li>2 主目录的查找:S,弹出输入框后点击 <em>Aa</em> 切换输入法</li>
<li>3 主目录的排序方式:X</li>
<li>4 输入法切换:<em>Aa</em>,任意弹出输入框的地方都可点击</li>
<li>5 更换字号 版式等:Aa 菜单,各种格式的正文</li>
<li>6 加书签 朗读等:<em>menu</em> 菜单,各种格式的正文</li>
<li>7 系统设置:<em>alt+sym</em></li>
<li>8 主目录删除书籍:delete 键</li>
<li>9 显示书籍或这个文件夹的全名:方向键中的左键</li>
<li>10 下载书籍管理页面删除书籍:delete 键</li>
<li>11 alt+第一行的字母输入数字</li>
<li>12 shift(键盘上的”向上方向键”)+第一行的字母输入大写字母</li>
<li>13 在文本格式的正文,未出现光标时,点击五向键中的向下方向键,光标会移到文件的开头,点击五向键中的向上方向键,光标会移动到文件的结尾</li>
<li>14 在文本格式的书籍中 shift+五向键中的向上\向下方向键可调大\调小字号</li>
<li>15 在有目录的书籍中,shift+向上\向下翻页键可移动到上\下一个目录页</li>
</ul>
<hr />
<h2 id="kindle-3原生系统快捷键">kindle 3原生系统快捷键</h2>
<p>待机中:</p>
<ul>
<li>1 截屏快捷键:<em>alt + shift + G</em></li>
<li>2 扫雷:<em>alt + shift + m</em>,然后按G可玩五子棋。</li>
<li>3 <em>alt + G</em> = 屏幕显示更新</li>
<li>4 <em>alt + home</em> = Kindle 商店</li>
<li>5 <em>alt + 键盘上方英文字母键</em> = 1-9 数字键</li>
<li>6 滑动电源钮约 7 秒,可以关闭 Kindle</li>
<li>7 滑动电源钮约 15 秒,可以重新启动 Kindle</li>
<li>8 <em>alt + space</em> = 启动或关闭音乐</li>
<li>9 <em>alt + f</em> = 换下一首歌曲</li>
</ul>
<p>阅读中:</p>
<ul>
<li>1 <em>alt + B</em> = 新增或移除书签(bookmarks)</li>
<li>2 <em>shift + Sym</em> = 启动或关闭英文语音功能(text to speech)</li>
<li>3 移动指针位置可以指定语音开始处</li>
<li>4 右控制键 = 跳下一章节</li>
<li>5 左控制键 = 回上一章节</li>
</ul>
认真学习JavaScript
2014-06-26T00:00:00+00:00
http://wangdaodao.github.io/2014-06-26/js-study-00
<p>要努力的看书,不然太清闲也不好,在多看上面花了<strong>50RMB</strong>买了一本<a href="http://www.duokan.com/book/41450/">《JavaScript高级程序设计》</a>电子书来看!不过里面的代码还是需要边看边运行,索性就把书中的源码全部都放在了<a href="https://gitcafe.com/wangdaodao/js-study">这里</a>,又做了一个<a href="http://wangdaodao.gitcafe.com/js-study/">演示版</a>,省的自己看的时候还要再找!</p>
<p>不动笔墨不看书,书里面自然有很多很多的问题,所以准备以后就弄一个读书笔记放在这里,一来可以积累点东西,二来可以互相的学习!</p>
<p>看网上对与学习<em>js</em>的书,有不一样的看法,这东西还是在于个人!计划是先把书整体的看一遍,有一定的印象,然后再细读,先把书读厚,再把书读薄,把书吃透!</p>
<p>放一个牛人做好的脑图:</p>
<p><a href="/uploads/2014/06/001.gif"><img src="/uploads/2014/06/001.gif" alt="1" /></a></p>
<p><a href="/uploads/2014/06/002.gif"><img src="/uploads/2014/06/002.gif" alt="2" /></a></p>
<p><a href="/uploads/2014/06/003.gif"><img src="/uploads/2014/06/003.gif" alt="3" /></a></p>
<p><a href="/uploads/2014/06/004.gif"><img src="/uploads/2014/06/004.gif" alt="4" /></a></p>
<p><a href="/uploads/2014/06/005.gif"><img src="/uploads/2014/06/005.gif" alt="5" /></a></p>
<p><a href="/uploads/2014/06/006.gif"><img src="/uploads/2014/06/006.gif" alt="6" /></a></p>
<p><a href="/uploads/2014/06/007.gif"><img src="/uploads/2014/06/007.gif" alt="7" /></a></p>
<p><a href="/uploads/2014/06/008.gif"><img src="/uploads/2014/06/008.gif" alt="8" /></a></p>
Sublime Text 3设置
2014-06-24T00:00:00+00:00
http://wangdaodao.github.io/2014-06-24/sublime-text-3
<p>一直用的都是3056的,今天用的时候突然调不出侧边栏了,不知道是装啥插件给搞的!3059已经出了一段时间了,顺手来一个最新的吧,顺便备份下配置什么的!</p>
<p><a href="https://gitcafe.com/wangdaodao/sublime-config">这里</a>是我备份的一些东西,以后再用,直接可以下载用了!不过把这东西放GitCafe上是不是不太厚道啊!</p>
<p>至于用不用破解,全凭各自喜好了,不过真心有点贵啊!!</p>
<h2 id="按-ctrl-调出控制台安装源">按 Ctrl+` 调出控制台安装源</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
</code></pre></div></div>
<h2 id="安装插件">安装插件</h2>
<ul>
<li><a href="https://sublime.wbond.net/packages/Emmet">Emmet</a></li>
<li><a href="https://sublime.wbond.net/packages/Automatic%20Backups">AutoBackups</a></li>
<li><a href="https://sublime.wbond.net/packages/Tag">Tag</a></li>
<li><a href="https://sublime.wbond.net/packages/jQuery">jQuery</a></li>
<li><a href="https://sublime.wbond.net/packages/ConvertToUTF8">ConvertToUTF8</a></li>
<li><a href="https://sublime.wbond.net/packages/SASS%20Build">SASS Build</a></li>
<li><a href="https://packagecontrol.io/packages/SublimeTmpl">SublimeTmpl</a></li>
<li><a href="https://packagecontrol.io/packages/AdvancedNewFile">AdvancedNewFile</a></li>
</ul>
<h2 id="sublime-text-3推荐主题">Sublime Text 3推荐主题</h2>
<ul>
<li>Theme - <a href="https://sublime.wbond.net/packages/Theme%20-%20Spacegray">Spacegray</a></li>
<li>Theme - <a href="https://sublime.wbond.net/packages/Theme%20-%20Flatland">Flatland</a></li>
<li>Theme - <a href="https://sublime.wbond.net/packages/Theme%20-%20Centurion">Centurion</a></li>
<li>Theme - <a href="https://sublime.wbond.net/packages/Theme%20-%20Nil">Nil</a></li>
<li>Theme - <a href="https://sublime.wbond.net/packages/Theme%20-%20Soda">Soda</a></li>
</ul>
<h2 id="注册码">注册码</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>—– BEGIN LICENSE —–
Andrew Weber
Single User License
EA7E-855605
813A03DD 5E4AD9E6 6C0EEB94 BC99798F
942194A6 02396E98 E62C9979 4BB979FE
91424C9D A45400BF F6747D88 2FB88078
90F5CC94 1CDC92DC 8457107A F151657B
1D22E383 A997F016 42397640 33F41CFC
E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D
5CDB7036 E56DE1C0 EFCC0840 650CD3A6
B98FC99C 8FAC73EE D2B95564 DF450523
—— END LICENSE ——
</code></pre></div></div>
你好GitCafe
2014-06-20T00:00:00+00:00
http://wangdaodao.github.io/2014-06-20/hello-gitcafe
<p>鉴于GitHub时好时坏,还是把博客搬到了GitCafe上面了。</p>
<p>速度在国内来说肯定是没问题了(闲的蛋疼的可以ping一下git.wangdaodao.com,基本上在恐怖的10ms以内),但是GitCafe上面托管的代码,质量真的不是很高啊……</p>
<p>GitCafe给免费用户的容量是500M,单纯的放些代码肯定是够了,但是总觉得还是太少了……如果可以针对老用户,每年扩容几百兆也可以啊!!</p>
<p>而且,相对于GitHub,GitCafe帮助文档比较少,有问题了基本上连蒙带猜的试一遍!不过,这样也好,反正我也刚上手,就这么拿来练习也是很好的!</p>
<p>如果GitCafe有类似的gist就好了,代码片段也可以放上去了!</p>
初探Git
2014-06-20T00:00:00+00:00
http://wangdaodao.github.io/2014-06-20/git-on-windows
<p>一直以来,都是在<a href="https://windows.github.com/">GitHub for Windows</a>上面来管理<em>github</em>的,这次主要是想试一试在<em>cmd</em>下面来搞一搞<em>github</em>,顺便把一些项目转移到<em>gitcafe</em>上面,于是就有了这次的折腾。我对<em>git</em>还不是很熟练,只会几个常用的命令,而且也不是很懂,所以下面的文章也许有不对的地方,只是作为一个记录……</p>
<p>##安装git</p>
<p>首先,<em>windows</em>下安装<a href="http://msysgit.github.io/">Git for Windows</a>,安装之后,如果这时你运行<em>cmd</em>,在里面打<em>git</em>命令会提示“不是内部或外部命令,也不是可运行的程序”,想要直接在<em>windows</em>的<em>cmd</em>里使用git命令要多加如下两步:</p>
<p>1、找到git安装路径中bin的位置,如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> D:\Program Files\Git\bin
</code></pre></div></div>
<p>找到git安装路径中git-core的位置,如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>D:\Program Files\Git\libexec\git-core;
</code></pre></div></div>
<p><strong>注:”D:\Program Files\Git"是安装路径,可能与你的安装路径不一样,要按照你自己的路径替换”D:\Program Files\Git"</strong></p>
<p>2、右键“计算机”->“属性”->“高级系统设置”->“环境变量”->在下方的“系统变量”中找到“path”->选中“path”并选择“编辑”->将1中找到的bin和git-core路径复制到其中->保存并退出</p>
<p><strong>注:“path”中,每个路径之间要以英文输入状态下的分号——“;”作为间隔</strong></p>
<p>就可以在cmd里尽情的使用git了!</p>
<p>但是在使用的时候还要git在windows上配置ssh公钥</p>
<p>设置git的user name和email:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global user.name "wangdaodao"
$ git config --global user.email "hi@wangdaodao.com"
</code></pre></div></div>
<p>生成密钥</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ssh-keygen -t rsa -C "hi@wangdaodao.com"
</code></pre></div></div>
<p>按3个回车,密码为空。(不要输密码)</p>
<p>然后到.ssh下面将id_rsa.pub里的内容复制出来粘贴到个人中心的账户设置的ssh key里面</p>
<hr />
<p>##git一般使用</p>
<p>到这里,操作基本上就不分<em>windows</em>或者<em>linux</em>了。</p>
<p>我一般的步骤是以下几步,例如我以我的<em>F盘</em>为例,我先进入到F盘,然后建立一个文件夹(也可以在电脑里面新建一个文件夹)</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>mkdir git
</code></pre></div></div>
<p>建立好文件夹了,然后就执行<em>clone</em>这一步了,前提是你已经有仓库了</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git clone git@github.com:wangdaodao/Dao-ui.git
</code></pre></div></div>
<p>这样就把你的代码复制到本地了,如果你想复制到git文件夹下的一个文件夹,可以这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git clone git@github.com:wangdaodao/Dao-ui.git wangdaodao
</code></pre></div></div>
<p>这样就把项目复制到了git/wangdaodao这个文件夹下面了。</p>
<p>如果是克隆某一个分支,可以这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> git clone -b fenzhi git@github.com:wangdaodao/Dao-ui.git
</code></pre></div></div>
<p>查看分支:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git branch
</code></pre></div></div>
<p>在本地新建分支:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git branch <新分支名字>
</code></pre></div></div>
<p>切换分支</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git checkout <新分支名字>
</code></pre></div></div>
<p>提交分支,需要remote add后,再提交!</p>
<p>如果把项目的文件修改了一些,需要重新提交,可以用下面的命令</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#add .是添加所有的修改文件
git add .
#提交所有的文件,如果只是修改原有的文件,上一步add可以省略
git commit -m "描述" -a
</code></pre></div></div>
<p>我一般会做一个这样标记,以后再提交的时候就会很方便</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#其中github和gitcafe都是这个项目的标注,我理解为缩写
git remote add github https://github.com/wangdaodao/Dao-ui.git
git remote add gitcafe https://gitcafe.com/wangdaodao/Dao-ui.git
</code></pre></div></div>
<p>查看命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git remote -v
</code></pre></div></div>
<p>删除命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#删除github
git remote rm github
</code></pre></div></div>
<p>例如我要提交Dao-ui.git到github的master上,我可以这么写</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git push github master
</code></pre></div></div>
<p>例如我要提交Dao-ui.git到gitcafe的gitcafe-pages分支上,我可以这么写</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git push gitcafe gitcafe-pages
</code></pre></div></div>
<p>然后就是输入账号和密码了!</p>
<p>如果想删除文件,使用这样的命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git rm index.html
</code></pre></div></div>
<p>如果想删除文件夹,使用这样的命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git rm test -r
</code></pre></div></div>
<p>删除之后,别忘记了commit啊!</p>
<p>如果要更新本地代码</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#如果刚才remote了,这里origin就是刚才标记的了(有点说不明白了)
git pull origin
</code></pre></div></div>
<p>更新分支代码</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git pull origin 分支名
</code></pre></div></div>
<p>附:
<a href="http://rogerdudler.github.io/git-guide/index.zh.html">http://rogerdudler.github.io/git-guide/index.zh.html</a></p>
在Windows下搭建Ruby开发环境
2014-06-19T00:00:00+00:00
http://wangdaodao.github.io/2014-06-19/ruby-on-windows
<p>在<em>windows</em>下搭建<em>ruby</em>开发环境</p>
<p>需要原料:</p>
<p><a href="http://rubyinstaller.org/">rubyinstaller</a>:自行下载需要的ruby版本,我这里用的Ruby 1.9.3</p>
<p>可能需要的原料:</p>
<p><em>mysql</em>,这样我只用<em>mysql-connector</em>,自行搜索下载。</p>
<p>安装完<em>rubyinstaller</em>,可以查看下版本</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ruby -v
rails -v
gem -v
</code></pre></div></div>
<p><a href="/uploads/2014/06/ruby1.png"><img src="/uploads/2014/06/ruby1.png" alt="查看版本" /></a></p>
<p>到这里,环境算是搭完一半了,然后进入到项目里面,执行命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle
</code></pre></div></div>
<p><a href="/uploads/2014/06/ruby2.png"><img src="/uploads/2014/06/ruby2.png" alt="bundle" /></a></p>
<p>提示有错,没有装<em>libv8</em></p>
<p><a href="/uploads/2014/06/ruby3.png"><img src="/uploads/2014/06/ruby3.png" alt="libv8" /></a></p>
<p>安装<em>libv8</em></p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gem install libv8 -v '3.16.14.3' -- --with-system-v8
</code></pre></div></div>
<p><a href="/uploads/2014/06/ruby4.png"><img src="/uploads/2014/06/ruby4.png" alt="libv8完成" /></a></p>
<p>再次执行<em>bundle</em>,提示有错,没有装<em>mysql2</em>,搜索下载<em>mysql-connector</em>,我这里用的是<strong>32位</strong>,下载后解压到任意盘符下,我这里是<em>C盘</em>,然后执行命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gem install mysql2 --platform=ruby -v '0.3.16' -- '--with-mysql-dir="C:\mysql-connector"
</code></pre></div></div>
<p><a href="/uploads/2014/06/ruby5.png"><img src="/uploads/2014/06/ruby5.png" alt="mysql2" /></a></p>
<p><a href="/uploads/2014/06/ruby7.png"><img src="/uploads/2014/06/ruby7.png" alt="mysql2" /></a></p>
<p>我安装完<strong>0.3.15</strong>又提示我没安装<strong>0.3.16</strong></p>
<p><a href="/uploads/2014/06/ruby8.png"><img src="/uploads/2014/06/ruby8.png" alt="mysql2安装完成" /></a></p>
<p><a href="/uploads/2014/06/ruby6.png"><img src="/uploads/2014/06/ruby6.png" alt="mysql2安装完成" /></a></p>
<p>终于安装好了,启动下项目吧:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rails s
</code></pre></div></div>
<p><a href="/uploads/2014/06/ruby9.png"><img src="/uploads/2014/06/ruby9.png" alt="项目启动" /></a></p>
<p>后记:项目中用到了<em>therubyracer</em>包,但是搜索了下,发现<em>windows</em>下面没有解决办法:<a href="http://stackoverflow.com/questions/6356450/therubyracer-gem-on-windows">therubyracer gem on windows</a>,真坑,如果真需要,<em>linux</em>或者<em>mac</em>下搞吧……</p>
SVN常用命令
2014-06-18T00:00:00+00:00
http://wangdaodao.github.io/2014-06-18/work-in-ubuntu-02
<p>##安装Subversion</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ sudo apt-get install subversion
$ sudo apt-get install libapache2-svn
</code></pre></div></div>
<p>##Subversion常用命令</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>svn add
svn checkout (co)
svn cleanup
svn commit (ci)
svn copy (cp)
svn delete (del, remove, rm)
svn diff (di)
svn help (?, h)
svn mkdir
svn status (stat, st)
svn update (up)
</code></pre></div></div>
Linux常用命令
2014-06-16T00:00:00+00:00
http://wangdaodao.github.io/2014-06-16/work-in-ubuntu-01
<p>由于工作需要,所以由此蛋疼的在ubuntu下开始折腾……</p>
<p>总结了几个自己常用的命令,以后可以当做笔记</p>
<p>##文件/文件夹管理</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>ls 列出当前目录文件(不包括隐含文件)
ls -a 列出当前目录文件(包括隐含文件)
ls -l 列出当前目录下文件的详细信息
cd .. 回当前目录的上一级目录
cd - 回上一次所在的目录
cd ~ 或 cd 回当前用户的宿主目录
cp 将给出的文件或目录拷贝到另一文件或目录中
mkdir 目录名 创建一个目录
rmdir 空目录名 删除一个空目录
rm 文件名 文件名 删除一个文件或多个文件
rm -rf 非空目录名 删除一个非空目录下的一切
mv 路经/文件 /经/文件移动相对路经下的文件到绝对路经下
mv 文件名 新名称 在当前目录下改名
find 路经 -name “字符串” 查找路经所在范围内满足字符串匹配的文件和目录
pwd 查看自己所在目录
touch 改变文件时间戳,默认包括修改时间和创建时间,默认修改为当前时间,默认如果文件不存在就新建
</code></pre></div></div>
<p>##打包/解压</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>tar -c 创建包 –x 释放包 -v 显示命令过程 –z 代表压缩包
tar –cvf benet.tar /home/benet 把/home/benet目录打包
tar –zcvf benet.tar.gz /mnt 把目录打包并压缩
tar –zxvf benet.tar.gz 压缩包的文件解压恢复
tar –jxvf benet.tar.bz2 解压缩
</code></pre></div></div>
<p>##apt命令</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>apt-cache search package 搜索包
apt-cache show package 获取包的相关信息,如说明、大小、版本等
sudo apt-get install package 安装包
sudo apt-get install package - - reinstall 重新安装包
sudo apt-get -f install 修复安装”-f = –fix-missing”
sudo apt-get remove package 删除包
sudo apt-get remove package - - purge 删除包,包括删除配置文件等
sudo apt-get update 更新源
sudo apt-get upgrade 更新已安装的包
sudo apt-get dist-upgrade 升级系统
sudo apt-get dselect-upgrade 使用 dselect 升级
apt-cache depends package 了解使用依赖
apt-cache rdepends package 是查看该包被哪些包依赖
sudo apt-get build-dep package 安装相关的编译环境
apt-get source package 下载该包的源代码
sudo apt-get clean && sudo apt-get autoclean 清理无用的包
sudo apt-get check 检查是否有损坏的依赖
sudo apt-get clean 清理所有软件缓存(即缓存在/var/cache/apt/archives目录里的deb包)
</code></pre></div></div>
谷歌全球IP
2014-06-11T00:00:00+00:00
http://wangdaodao.github.io/2014-06-11/google-ips
<table class="post-table">
<tbody>
<tr>
<th colspan="3">Bulgaria</th>
</tr>
<tr>
<td><a href="http://93.123.23.1">93.123.23.1</a></td>
<td><a href="http://93.123.23.2">93.123.23.2</a></td>
<td><a href="http://93.123.23.3">93.123.23.3</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.4">93.123.23.4</a></td>
<td><a href="http://93.123.23.5">93.123.23.5</a></td>
<td><a href="http://93.123.23.6">93.123.23.6</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.7">93.123.23.7</a></td>
<td><a href="http://93.123.23.8">93.123.23.8</a></td>
<td><a href="http://93.123.23.9">93.123.23.9</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.10">93.123.23.10</a></td>
<td><a href="http://93.123.23.11">93.123.23.11</a></td>
<td><a href="http://93.123.23.12">93.123.23.12</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.13">93.123.23.13</a></td>
<td><a href="http://93.123.23.14">93.123.23.14</a></td>
<td><a href="http://93.123.23.15">93.123.23.15</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.16">93.123.23.16</a></td>
<td><a href="http://93.123.23.17">93.123.23.17</a></td>
<td><a href="http://93.123.23.18">93.123.23.18</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.19">93.123.23.19</a></td>
<td><a href="http://93.123.23.20">93.123.23.20</a></td>
<td><a href="http://93.123.23.21">93.123.23.21</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.22">93.123.23.22</a></td>
<td><a href="http://93.123.23.23">93.123.23.23</a></td>
<td><a href="http://93.123.23.24">93.123.23.24</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.25">93.123.23.25</a></td>
<td><a href="http://93.123.23.26">93.123.23.26</a></td>
<td><a href="http://93.123.23.27">93.123.23.27</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.28">93.123.23.28</a></td>
<td><a href="http://93.123.23.29">93.123.23.29</a></td>
<td><a href="http://93.123.23.30">93.123.23.30</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.31">93.123.23.31</a></td>
<td><a href="http://93.123.23.32">93.123.23.32</a></td>
<td><a href="http://93.123.23.33">93.123.23.33</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.34">93.123.23.34</a></td>
<td><a href="http://93.123.23.35">93.123.23.35</a></td>
<td><a href="http://93.123.23.36">93.123.23.36</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.37">93.123.23.37</a></td>
<td><a href="http://93.123.23.38">93.123.23.38</a></td>
<td><a href="http://93.123.23.39">93.123.23.39</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.40">93.123.23.40</a></td>
<td><a href="http://93.123.23.41">93.123.23.41</a></td>
<td><a href="http://93.123.23.42">93.123.23.42</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.43">93.123.23.43</a></td>
<td><a href="http://93.123.23.44">93.123.23.44</a></td>
<td><a href="http://93.123.23.45">93.123.23.45</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.46">93.123.23.46</a></td>
<td><a href="http://93.123.23.47">93.123.23.47</a></td>
<td><a href="http://93.123.23.48">93.123.23.48</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.49">93.123.23.49</a></td>
<td><a href="http://93.123.23.50">93.123.23.50</a></td>
<td><a href="http://93.123.23.51">93.123.23.51</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.52">93.123.23.52</a></td>
<td><a href="http://93.123.23.53">93.123.23.53</a></td>
<td><a href="http://93.123.23.54">93.123.23.54</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.55">93.123.23.55</a></td>
<td><a href="http://93.123.23.56">93.123.23.56</a></td>
<td><a href="http://93.123.23.57">93.123.23.57</a></td>
</tr>
<tr>
<td><a href="http://93.123.23.58">93.123.23.58</a></td>
<td><a href="http://93.123.23.59">93.123.23.59</a></td>
<td> </td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Egypt</th>
</tr>
<tr>
<td><a href="http://197.199.253.1">197.199.253.1</a></td>
<td><a href="http://197.199.253.2">197.199.253.2</a></td>
<td><a href="http://197.199.253.3">197.199.253.3</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.4">197.199.253.4</a></td>
<td><a href="http://197.199.253.5">197.199.253.5</a></td>
<td><a href="http://197.199.253.6">197.199.253.6</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.7">197.199.253.7</a></td>
<td><a href="http://197.199.253.8">197.199.253.8</a></td>
<td><a href="http://197.199.253.9">197.199.253.9</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.10">197.199.253.10</a></td>
<td><a href="http://197.199.253.11">197.199.253.11</a></td>
<td><a href="http://197.199.253.12">197.199.253.12</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.13">197.199.253.13</a></td>
<td><a href="http://197.199.253.14">197.199.253.14</a></td>
<td><a href="http://197.199.253.15">197.199.253.15</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.16">197.199.253.16</a></td>
<td><a href="http://197.199.253.17">197.199.253.17</a></td>
<td><a href="http://197.199.253.18">197.199.253.18</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.19">197.199.253.19</a></td>
<td><a href="http://197.199.253.20">197.199.253.20</a></td>
<td><a href="http://197.199.253.21">197.199.253.21</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.22">197.199.253.22</a></td>
<td><a href="http://197.199.253.23">197.199.253.23</a></td>
<td><a href="http://197.199.253.24">197.199.253.24</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.25">197.199.253.25</a></td>
<td><a href="http://197.199.253.26">197.199.253.26</a></td>
<td><a href="http://197.199.253.27">197.199.253.27</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.28">197.199.253.28</a></td>
<td><a href="http://197.199.253.29">197.199.253.29</a></td>
<td><a href="http://197.199.253.30">197.199.253.30</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.31">197.199.253.31</a></td>
<td><a href="http://197.199.253.32">197.199.253.32</a></td>
<td><a href="http://197.199.253.33">197.199.253.33</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.34">197.199.253.34</a></td>
<td><a href="http://197.199.253.35">197.199.253.35</a></td>
<td><a href="http://197.199.253.36">197.199.253.36</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.37">197.199.253.37</a></td>
<td><a href="http://197.199.253.38">197.199.253.38</a></td>
<td><a href="http://197.199.253.39">197.199.253.39</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.40">197.199.253.40</a></td>
<td><a href="http://197.199.253.41">197.199.253.41</a></td>
<td><a href="http://197.199.253.42">197.199.253.42</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.43">197.199.253.43</a></td>
<td><a href="http://197.199.253.44">197.199.253.44</a></td>
<td><a href="http://197.199.253.45">197.199.253.45</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.46">197.199.253.46</a></td>
<td><a href="http://197.199.253.47">197.199.253.47</a></td>
<td><a href="http://197.199.253.48">197.199.253.48</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.49">197.199.253.49</a></td>
<td><a href="http://197.199.253.50">197.199.253.50</a></td>
<td><a href="http://197.199.253.51">197.199.253.51</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.52">197.199.253.52</a></td>
<td><a href="http://197.199.253.53">197.199.253.53</a></td>
<td><a href="http://197.199.253.54">197.199.253.54</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.55">197.199.253.55</a></td>
<td><a href="http://197.199.253.56">197.199.253.56</a></td>
<td><a href="http://197.199.253.57">197.199.253.57</a></td>
</tr>
<tr>
<td><a href="http://197.199.253.58">197.199.253.58</a></td>
<td><a href="http://197.199.253.59">197.199.253.59</a></td>
<td> </td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Egypt</th>
</tr>
<tr>
<td><a href="http://197.199.254.1">197.199.254.1</a></td>
<td><a href="http://197.199.254.2">197.199.254.2</a></td>
<td><a href="http://197.199.254.3">197.199.254.3</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.4">197.199.254.4</a></td>
<td><a href="http://197.199.254.5">197.199.254.5</a></td>
<td><a href="http://197.199.254.6">197.199.254.6</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.7">197.199.254.7</a></td>
<td><a href="http://197.199.254.8">197.199.254.8</a></td>
<td><a href="http://197.199.254.9">197.199.254.9</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.10">197.199.254.10</a></td>
<td><a href="http://197.199.254.11">197.199.254.11</a></td>
<td><a href="http://197.199.254.12">197.199.254.12</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.13">197.199.254.13</a></td>
<td><a href="http://197.199.254.14">197.199.254.14</a></td>
<td><a href="http://197.199.254.15">197.199.254.15</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.16">197.199.254.16</a></td>
<td><a href="http://197.199.254.17">197.199.254.17</a></td>
<td><a href="http://197.199.254.18">197.199.254.18</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.19">197.199.254.19</a></td>
<td><a href="http://197.199.254.20">197.199.254.20</a></td>
<td><a href="http://197.199.254.21">197.199.254.21</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.22">197.199.254.22</a></td>
<td><a href="http://197.199.254.23">197.199.254.23</a></td>
<td><a href="http://197.199.254.24">197.199.254.24</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.25">197.199.254.25</a></td>
<td><a href="http://197.199.254.26">197.199.254.26</a></td>
<td><a href="http://197.199.254.27">197.199.254.27</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.28">197.199.254.28</a></td>
<td><a href="http://197.199.254.29">197.199.254.29</a></td>
<td><a href="http://197.199.254.30">197.199.254.30</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.31">197.199.254.31</a></td>
<td><a href="http://197.199.254.32">197.199.254.32</a></td>
<td><a href="http://197.199.254.33">197.199.254.33</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.34">197.199.254.34</a></td>
<td><a href="http://197.199.254.35">197.199.254.35</a></td>
<td><a href="http://197.199.254.36">197.199.254.36</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.37">197.199.254.37</a></td>
<td><a href="http://197.199.254.38">197.199.254.38</a></td>
<td><a href="http://197.199.254.39">197.199.254.39</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.40">197.199.254.40</a></td>
<td><a href="http://197.199.254.41">197.199.254.41</a></td>
<td><a href="http://197.199.254.42">197.199.254.42</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.43">197.199.254.43</a></td>
<td><a href="http://197.199.254.44">197.199.254.44</a></td>
<td><a href="http://197.199.254.45">197.199.254.45</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.46">197.199.254.46</a></td>
<td><a href="http://197.199.254.47">197.199.254.47</a></td>
<td><a href="http://197.199.254.48">197.199.254.48</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.49">197.199.254.49</a></td>
<td><a href="http://197.199.254.50">197.199.254.50</a></td>
<td><a href="http://197.199.254.51">197.199.254.51</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.52">197.199.254.52</a></td>
<td><a href="http://197.199.254.53">197.199.254.53</a></td>
<td><a href="http://197.199.254.54">197.199.254.54</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.55">197.199.254.55</a></td>
<td><a href="http://197.199.254.56">197.199.254.56</a></td>
<td><a href="http://197.199.254.57">197.199.254.57</a></td>
</tr>
<tr>
<td><a href="http://197.199.254.58">197.199.254.58</a></td>
<td><a href="http://197.199.254.59">197.199.254.59</a></td>
<td> </td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Hong Kong</th>
</tr>
<tr>
<td><a href="http://218.189.25.129">218.189.25.129</a></td>
<td><a href="http://218.189.25.130">218.189.25.130</a></td>
<td><a href="http://218.189.25.131">218.189.25.131</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.132">218.189.25.132</a></td>
<td><a href="http://218.189.25.133">218.189.25.133</a></td>
<td><a href="http://218.189.25.134">218.189.25.134</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.135">218.189.25.135</a></td>
<td><a href="http://218.189.25.136">218.189.25.136</a></td>
<td><a href="http://218.189.25.137">218.189.25.137</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.138">218.189.25.138</a></td>
<td><a href="http://218.189.25.139">218.189.25.139</a></td>
<td><a href="http://218.189.25.140">218.189.25.140</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.141">218.189.25.141</a></td>
<td><a href="http://218.189.25.142">218.189.25.142</a></td>
<td><a href="http://218.189.25.143">218.189.25.143</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.144">218.189.25.144</a></td>
<td><a href="http://218.189.25.145">218.189.25.145</a></td>
<td><a href="http://218.189.25.146">218.189.25.146</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.147">218.189.25.147</a></td>
<td><a href="http://218.189.25.148">218.189.25.148</a></td>
<td><a href="http://218.189.25.149">218.189.25.149</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.150">218.189.25.150</a></td>
<td><a href="http://218.189.25.151">218.189.25.151</a></td>
<td><a href="http://218.189.25.152">218.189.25.152</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.153">218.189.25.153</a></td>
<td><a href="http://218.189.25.154">218.189.25.154</a></td>
<td><a href="http://218.189.25.155">218.189.25.155</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.156">218.189.25.156</a></td>
<td><a href="http://218.189.25.157">218.189.25.157</a></td>
<td><a href="http://218.189.25.158">218.189.25.158</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.159">218.189.25.159</a></td>
<td><a href="http://218.189.25.160">218.189.25.160</a></td>
<td><a href="http://218.189.25.161">218.189.25.161</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.162">218.189.25.162</a></td>
<td><a href="http://218.189.25.163">218.189.25.163</a></td>
<td><a href="http://218.189.25.164">218.189.25.164</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.165">218.189.25.165</a></td>
<td><a href="http://218.189.25.166">218.189.25.166</a></td>
<td><a href="http://218.189.25.167">218.189.25.167</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.168">218.189.25.168</a></td>
<td><a href="http://218.189.25.169">218.189.25.169</a></td>
<td><a href="http://218.189.25.170">218.189.25.170</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.171">218.189.25.171</a></td>
<td><a href="http://218.189.25.172">218.189.25.172</a></td>
<td><a href="http://218.189.25.173">218.189.25.173</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.174">218.189.25.174</a></td>
<td><a href="http://218.189.25.175">218.189.25.175</a></td>
<td><a href="http://218.189.25.176">218.189.25.176</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.177">218.189.25.177</a></td>
<td><a href="http://218.189.25.178">218.189.25.178</a></td>
<td><a href="http://218.189.25.179">218.189.25.179</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.180">218.189.25.180</a></td>
<td><a href="http://218.189.25.181">218.189.25.181</a></td>
<td><a href="http://218.189.25.182">218.189.25.182</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.183">218.189.25.183</a></td>
<td><a href="http://218.189.25.184">218.189.25.184</a></td>
<td><a href="http://218.189.25.185">218.189.25.185</a></td>
</tr>
<tr>
<td><a href="http://218.189.25.186">218.189.25.186</a></td>
<td><a href="http://218.189.25.187">218.189.25.187</a></td>
<td> </td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Hong Kong</th>
</tr>
<tr>
<td><a href="http://218.253.0.76">218.253.0.76</a></td>
<td><a href="http://218.253.0.77">218.253.0.77</a></td>
<td><a href="http://218.253.0.78">218.253.0.78</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.79">218.253.0.79</a></td>
<td><a href="http://218.253.0.80">218.253.0.80</a></td>
<td><a href="http://218.253.0.81">218.253.0.81</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.82">218.253.0.82</a></td>
<td><a href="http://218.253.0.83">218.253.0.83</a></td>
<td><a href="http://218.253.0.84">218.253.0.84</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.85">218.253.0.85</a></td>
<td><a href="http://218.253.0.86">218.253.0.86</a></td>
<td><a href="http://218.253.0.87">218.253.0.87</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.88">218.253.0.88</a></td>
<td><a href="http://218.253.0.89">218.253.0.89</a></td>
<td><a href="http://218.253.0.90">218.253.0.90</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.91">218.253.0.91</a></td>
<td><a href="http://218.253.0.92">218.253.0.92</a></td>
<td><a href="http://218.253.0.140">218.253.0.140</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.141">218.253.0.141</a></td>
<td><a href="http://218.253.0.142">218.253.0.142</a></td>
<td><a href="http://218.253.0.143">218.253.0.143</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.144">218.253.0.144</a></td>
<td><a href="http://218.253.0.145">218.253.0.145</a></td>
<td><a href="http://218.253.0.146">218.253.0.146</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.147">218.253.0.147</a></td>
<td><a href="http://218.253.0.148">218.253.0.148</a></td>
<td><a href="http://218.253.0.149">218.253.0.149</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.150">218.253.0.150</a></td>
<td><a href="http://218.253.0.151">218.253.0.151</a></td>
<td><a href="http://218.253.0.152">218.253.0.152</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.153">218.253.0.153</a></td>
<td><a href="http://218.253.0.154">218.253.0.154</a></td>
<td><a href="http://218.253.0.155">218.253.0.155</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.156">218.253.0.156</a></td>
<td><a href="http://218.253.0.157">218.253.0.157</a></td>
<td><a href="http://218.253.0.158">218.253.0.158</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.159">218.253.0.159</a></td>
<td><a href="http://218.253.0.160">218.253.0.160</a></td>
<td><a href="http://218.253.0.161">218.253.0.161</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.162">218.253.0.162</a></td>
<td><a href="http://218.253.0.163">218.253.0.163</a></td>
<td><a href="http://218.253.0.164">218.253.0.164</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.165">218.253.0.165</a></td>
<td><a href="http://218.253.0.166">218.253.0.166</a></td>
<td><a href="http://218.253.0.167">218.253.0.167</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.168">218.253.0.168</a></td>
<td><a href="http://218.253.0.169">218.253.0.169</a></td>
<td><a href="http://218.253.0.170">218.253.0.170</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.171">218.253.0.171</a></td>
<td><a href="http://218.253.0.172">218.253.0.172</a></td>
<td><a href="http://218.253.0.173">218.253.0.173</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.174">218.253.0.174</a></td>
<td><a href="http://218.253.0.175">218.253.0.175</a></td>
<td><a href="http://218.253.0.176">218.253.0.176</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.177">218.253.0.177</a></td>
<td><a href="http://218.253.0.178">218.253.0.178</a></td>
<td><a href="http://218.253.0.179">218.253.0.179</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.180">218.253.0.180</a></td>
<td><a href="http://218.253.0.181">218.253.0.181</a></td>
<td><a href="http://218.253.0.182">218.253.0.182</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.183">218.253.0.183</a></td>
<td><a href="http://218.253.0.184">218.253.0.184</a></td>
<td><a href="http://218.253.0.185">218.253.0.185</a></td>
</tr>
<tr>
<td><a href="http://218.253.0.186">218.253.0.186</a></td>
<td><a href="http://218.253.0.187">218.253.0.187</a></td>
<td> </td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Iceland</th>
</tr>
<tr>
<td><a href="http://149.126.86.1">149.126.86.1</a></td>
<td><a href="http://149.126.86.2">149.126.86.2</a></td>
<td><a href="http://149.126.86.3">149.126.86.3</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.4">149.126.86.4</a></td>
<td><a href="http://149.126.86.5">149.126.86.5</a></td>
<td><a href="http://149.126.86.6">149.126.86.6</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.7">149.126.86.7</a></td>
<td><a href="http://149.126.86.8">149.126.86.8</a></td>
<td><a href="http://149.126.86.9">149.126.86.9</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.10">149.126.86.10</a></td>
<td><a href="http://149.126.86.11">149.126.86.11</a></td>
<td><a href="http://149.126.86.12">149.126.86.12</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.13">149.126.86.13</a></td>
<td><a href="http://149.126.86.14">149.126.86.14</a></td>
<td><a href="http://149.126.86.15">149.126.86.15</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.16">149.126.86.16</a></td>
<td><a href="http://149.126.86.17">149.126.86.17</a></td>
<td><a href="http://149.126.86.18">149.126.86.18</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.19">149.126.86.19</a></td>
<td><a href="http://149.126.86.20">149.126.86.20</a></td>
<td><a href="http://149.126.86.21">149.126.86.21</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.22">149.126.86.22</a></td>
<td><a href="http://149.126.86.23">149.126.86.23</a></td>
<td><a href="http://149.126.86.24">149.126.86.24</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.25">149.126.86.25</a></td>
<td><a href="http://149.126.86.26">149.126.86.26</a></td>
<td><a href="http://149.126.86.27">149.126.86.27</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.28">149.126.86.28</a></td>
<td><a href="http://149.126.86.29">149.126.86.29</a></td>
<td><a href="http://149.126.86.30">149.126.86.30</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.31">149.126.86.31</a></td>
<td><a href="http://149.126.86.32">149.126.86.32</a></td>
<td><a href="http://149.126.86.33">149.126.86.33</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.34">149.126.86.34</a></td>
<td><a href="http://149.126.86.35">149.126.86.35</a></td>
<td><a href="http://149.126.86.36">149.126.86.36</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.37">149.126.86.37</a></td>
<td><a href="http://149.126.86.38">149.126.86.38</a></td>
<td><a href="http://149.126.86.39">149.126.86.39</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.40">149.126.86.40</a></td>
<td><a href="http://149.126.86.41">149.126.86.41</a></td>
<td><a href="http://149.126.86.42">149.126.86.42</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.43">149.126.86.43</a></td>
<td><a href="http://149.126.86.44">149.126.86.44</a></td>
<td><a href="http://149.126.86.45">149.126.86.45</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.46">149.126.86.46</a></td>
<td><a href="http://149.126.86.47">149.126.86.47</a></td>
<td><a href="http://149.126.86.48">149.126.86.48</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.49">149.126.86.49</a></td>
<td><a href="http://149.126.86.50">149.126.86.50</a></td>
<td><a href="http://149.126.86.51">149.126.86.51</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.52">149.126.86.52</a></td>
<td><a href="http://149.126.86.53">149.126.86.53</a></td>
<td><a href="http://149.126.86.54">149.126.86.54</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.55">149.126.86.55</a></td>
<td><a href="http://149.126.86.56">149.126.86.56</a></td>
<td><a href="http://149.126.86.57">149.126.86.57</a></td>
</tr>
<tr>
<td><a href="http://149.126.86.58">149.126.86.58</a></td>
<td><a href="http://149.126.86.59">149.126.86.59</a></td>
<td> </td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Indonesia</th>
</tr>
<tr>
<td><a href="http://111.92.162.4">111.92.162.4</a></td>
<td><a href="http://111.92.162.5">111.92.162.5</a></td>
<td><a href="http://111.92.162.6">111.92.162.6</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.12">111.92.162.12</a></td>
<td><a href="http://111.92.162.13">111.92.162.13</a></td>
<td><a href="http://111.92.162.14">111.92.162.14</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.15">111.92.162.15</a></td>
<td><a href="http://111.92.162.16">111.92.162.16</a></td>
<td><a href="http://111.92.162.17">111.92.162.17</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.18">111.92.162.18</a></td>
<td><a href="http://111.92.162.19">111.92.162.19</a></td>
<td><a href="http://111.92.162.20">111.92.162.20</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.21">111.92.162.21</a></td>
<td><a href="http://111.92.162.22">111.92.162.22</a></td>
<td><a href="http://111.92.162.23">111.92.162.23</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.24">111.92.162.24</a></td>
<td><a href="http://111.92.162.25">111.92.162.25</a></td>
<td><a href="http://111.92.162.26">111.92.162.26</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.27">111.92.162.27</a></td>
<td><a href="http://111.92.162.28">111.92.162.28</a></td>
<td><a href="http://111.92.162.29">111.92.162.29</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.30">111.92.162.30</a></td>
<td><a href="http://111.92.162.31">111.92.162.31</a></td>
<td><a href="http://111.92.162.32">111.92.162.32</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.33">111.92.162.33</a></td>
<td><a href="http://111.92.162.34">111.92.162.34</a></td>
<td><a href="http://111.92.162.35">111.92.162.35</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.36">111.92.162.36</a></td>
<td><a href="http://111.92.162.37">111.92.162.37</a></td>
<td><a href="http://111.92.162.38">111.92.162.38</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.39">111.92.162.39</a></td>
<td><a href="http://111.92.162.40">111.92.162.40</a></td>
<td><a href="http://111.92.162.41">111.92.162.41</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.42">111.92.162.42</a></td>
<td><a href="http://111.92.162.43">111.92.162.43</a></td>
<td><a href="http://111.92.162.44">111.92.162.44</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.45">111.92.162.45</a></td>
<td><a href="http://111.92.162.46">111.92.162.46</a></td>
<td><a href="http://111.92.162.47">111.92.162.47</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.48">111.92.162.48</a></td>
<td><a href="http://111.92.162.49">111.92.162.49</a></td>
<td><a href="http://111.92.162.50">111.92.162.50</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.51">111.92.162.51</a></td>
<td><a href="http://111.92.162.52">111.92.162.52</a></td>
<td><a href="http://111.92.162.53">111.92.162.53</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.54">111.92.162.54</a></td>
<td><a href="http://111.92.162.55">111.92.162.55</a></td>
<td><a href="http://111.92.162.56">111.92.162.56</a></td>
</tr>
<tr>
<td><a href="http://111.92.162.57">111.92.162.57</a></td>
<td><a href="http://111.92.162.58">111.92.162.58</a></td>
<td><a href="http://111.92.162.59">111.92.162.59</a></td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Iraq</th>
</tr>
<tr>
<td><a href="http://62.201.216.196">62.201.216.196</a></td>
<td><a href="http://62.201.216.197">62.201.216.197</a></td>
<td><a href="http://62.201.216.198">62.201.216.198</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.199">62.201.216.199</a></td>
<td><a href="http://62.201.216.200">62.201.216.200</a></td>
<td><a href="http://62.201.216.201">62.201.216.201</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.202">62.201.216.202</a></td>
<td><a href="http://62.201.216.203">62.201.216.203</a></td>
<td><a href="http://62.201.216.204">62.201.216.204</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.205">62.201.216.205</a></td>
<td><a href="http://62.201.216.206">62.201.216.206</a></td>
<td><a href="http://62.201.216.207">62.201.216.207</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.208">62.201.216.208</a></td>
<td><a href="http://62.201.216.209">62.201.216.209</a></td>
<td><a href="http://62.201.216.210">62.201.216.210</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.211">62.201.216.211</a></td>
<td><a href="http://62.201.216.212">62.201.216.212</a></td>
<td><a href="http://62.201.216.213">62.201.216.213</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.214">62.201.216.214</a></td>
<td><a href="http://62.201.216.215">62.201.216.215</a></td>
<td><a href="http://62.201.216.216">62.201.216.216</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.217">62.201.216.217</a></td>
<td><a href="http://62.201.216.218">62.201.216.218</a></td>
<td><a href="http://62.201.216.219">62.201.216.219</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.220">62.201.216.220</a></td>
<td><a href="http://62.201.216.221">62.201.216.221</a></td>
<td><a href="http://62.201.216.222">62.201.216.222</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.223">62.201.216.223</a></td>
<td><a href="http://62.201.216.224">62.201.216.224</a></td>
<td><a href="http://62.201.216.225">62.201.216.225</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.226">62.201.216.226</a></td>
<td><a href="http://62.201.216.227">62.201.216.227</a></td>
<td><a href="http://62.201.216.228">62.201.216.228</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.229">62.201.216.229</a></td>
<td><a href="http://62.201.216.230">62.201.216.230</a></td>
<td><a href="http://62.201.216.231">62.201.216.231</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.232">62.201.216.232</a></td>
<td><a href="http://62.201.216.233">62.201.216.233</a></td>
<td><a href="http://62.201.216.234">62.201.216.234</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.235">62.201.216.235</a></td>
<td><a href="http://62.201.216.236">62.201.216.236</a></td>
<td><a href="http://62.201.216.237">62.201.216.237</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.238">62.201.216.238</a></td>
<td><a href="http://62.201.216.239">62.201.216.239</a></td>
<td><a href="http://62.201.216.240">62.201.216.240</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.241">62.201.216.241</a></td>
<td><a href="http://62.201.216.242">62.201.216.242</a></td>
<td><a href="http://62.201.216.243">62.201.216.243</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.244">62.201.216.244</a></td>
<td><a href="http://62.201.216.245">62.201.216.245</a></td>
<td><a href="http://62.201.216.246">62.201.216.246</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.247">62.201.216.247</a></td>
<td><a href="http://62.201.216.248">62.201.216.248</a></td>
<td><a href="http://62.201.216.249">62.201.216.249</a></td>
</tr>
<tr>
<td><a href="http://62.201.216.250">62.201.216.250</a></td>
<td><a href="http://62.201.216.251">62.201.216.251</a></td>
<td> </td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Japan</th>
</tr>
<tr>
<td><a href="http://218.176.242.4">218.176.242.4</a></td>
<td><a href="http://218.176.242.5">218.176.242.5</a></td>
<td><a href="http://218.176.242.6">218.176.242.6</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.7">218.176.242.7</a></td>
<td><a href="http://218.176.242.8">218.176.242.8</a></td>
<td><a href="http://218.176.242.9">218.176.242.9</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.10">218.176.242.10</a></td>
<td><a href="http://218.176.242.11">218.176.242.11</a></td>
<td><a href="http://218.176.242.12">218.176.242.12</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.13">218.176.242.13</a></td>
<td><a href="http://218.176.242.14">218.176.242.14</a></td>
<td><a href="http://218.176.242.15">218.176.242.15</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.16">218.176.242.16</a></td>
<td><a href="http://218.176.242.17">218.176.242.17</a></td>
<td><a href="http://218.176.242.18">218.176.242.18</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.19">218.176.242.19</a></td>
<td><a href="http://218.176.242.20">218.176.242.20</a></td>
<td><a href="http://218.176.242.21">218.176.242.21</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.22">218.176.242.22</a></td>
<td><a href="http://218.176.242.23">218.176.242.23</a></td>
<td><a href="http://218.176.242.24">218.176.242.24</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.25">218.176.242.25</a></td>
<td><a href="http://218.176.242.26">218.176.242.26</a></td>
<td><a href="http://218.176.242.27">218.176.242.27</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.28">218.176.242.28</a></td>
<td><a href="http://218.176.242.29">218.176.242.29</a></td>
<td><a href="http://218.176.242.30">218.176.242.30</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.31">218.176.242.31</a></td>
<td><a href="http://218.176.242.32">218.176.242.32</a></td>
<td><a href="http://218.176.242.33">218.176.242.33</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.34">218.176.242.34</a></td>
<td><a href="http://218.176.242.35">218.176.242.35</a></td>
<td><a href="http://218.176.242.36">218.176.242.36</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.37">218.176.242.37</a></td>
<td><a href="http://218.176.242.38">218.176.242.38</a></td>
<td><a href="http://218.176.242.39">218.176.242.39</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.40">218.176.242.40</a></td>
<td><a href="http://218.176.242.41">218.176.242.41</a></td>
<td><a href="http://218.176.242.42">218.176.242.42</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.43">218.176.242.43</a></td>
<td><a href="http://218.176.242.44">218.176.242.44</a></td>
<td><a href="http://218.176.242.45">218.176.242.45</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.46">218.176.242.46</a></td>
<td><a href="http://218.176.242.47">218.176.242.47</a></td>
<td><a href="http://218.176.242.48">218.176.242.48</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.49">218.176.242.49</a></td>
<td><a href="http://218.176.242.50">218.176.242.50</a></td>
<td><a href="http://218.176.242.51">218.176.242.51</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.52">218.176.242.52</a></td>
<td><a href="http://218.176.242.53">218.176.242.53</a></td>
<td><a href="http://218.176.242.54">218.176.242.54</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.55">218.176.242.55</a></td>
<td><a href="http://218.176.242.56">218.176.242.56</a></td>
<td><a href="http://218.176.242.57">218.176.242.57</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.58">218.176.242.58</a></td>
<td><a href="http://218.176.242.59">218.176.242.59</a></td>
<td><a href="http://218.176.242.60">218.176.242.60</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.61">218.176.242.61</a></td>
<td><a href="http://218.176.242.62">218.176.242.62</a></td>
<td><a href="http://218.176.242.63">218.176.242.63</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.64">218.176.242.64</a></td>
<td><a href="http://218.176.242.65">218.176.242.65</a></td>
<td><a href="http://218.176.242.66">218.176.242.66</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.67">218.176.242.67</a></td>
<td><a href="http://218.176.242.68">218.176.242.68</a></td>
<td><a href="http://218.176.242.69">218.176.242.69</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.70">218.176.242.70</a></td>
<td><a href="http://218.176.242.71">218.176.242.71</a></td>
<td><a href="http://218.176.242.72">218.176.242.72</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.73">218.176.242.73</a></td>
<td><a href="http://218.176.242.74">218.176.242.74</a></td>
<td><a href="http://218.176.242.75">218.176.242.75</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.76">218.176.242.76</a></td>
<td><a href="http://218.176.242.77">218.176.242.77</a></td>
<td><a href="http://218.176.242.78">218.176.242.78</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.79">218.176.242.79</a></td>
<td><a href="http://218.176.242.80">218.176.242.80</a></td>
<td><a href="http://218.176.242.81">218.176.242.81</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.82">218.176.242.82</a></td>
<td><a href="http://218.176.242.83">218.176.242.83</a></td>
<td><a href="http://218.176.242.84">218.176.242.84</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.85">218.176.242.85</a></td>
<td><a href="http://218.176.242.86">218.176.242.86</a></td>
<td><a href="http://218.176.242.87">218.176.242.87</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.88">218.176.242.88</a></td>
<td><a href="http://218.176.242.89">218.176.242.89</a></td>
<td><a href="http://218.176.242.90">218.176.242.90</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.91">218.176.242.91</a></td>
<td><a href="http://218.176.242.92">218.176.242.92</a></td>
<td><a href="http://218.176.242.93">218.176.242.93</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.94">218.176.242.94</a></td>
<td><a href="http://218.176.242.95">218.176.242.95</a></td>
<td><a href="http://218.176.242.96">218.176.242.96</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.97">218.176.242.97</a></td>
<td><a href="http://218.176.242.98">218.176.242.98</a></td>
<td><a href="http://218.176.242.99">218.176.242.99</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.100">218.176.242.100</a></td>
<td><a href="http://218.176.242.101">218.176.242.101</a></td>
<td><a href="http://218.176.242.102">218.176.242.102</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.103">218.176.242.103</a></td>
<td><a href="http://218.176.242.104">218.176.242.104</a></td>
<td><a href="http://218.176.242.105">218.176.242.105</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.106">218.176.242.106</a></td>
<td><a href="http://218.176.242.107">218.176.242.107</a></td>
<td><a href="http://218.176.242.108">218.176.242.108</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.109">218.176.242.109</a></td>
<td><a href="http://218.176.242.110">218.176.242.110</a></td>
<td><a href="http://218.176.242.111">218.176.242.111</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.112">218.176.242.112</a></td>
<td><a href="http://218.176.242.113">218.176.242.113</a></td>
<td><a href="http://218.176.242.114">218.176.242.114</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.115">218.176.242.115</a></td>
<td><a href="http://218.176.242.116">218.176.242.116</a></td>
<td><a href="http://218.176.242.117">218.176.242.117</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.118">218.176.242.118</a></td>
<td><a href="http://218.176.242.119">218.176.242.119</a></td>
<td><a href="http://218.176.242.120">218.176.242.120</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.121">218.176.242.121</a></td>
<td><a href="http://218.176.242.122">218.176.242.122</a></td>
<td><a href="http://218.176.242.123">218.176.242.123</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.124">218.176.242.124</a></td>
<td><a href="http://218.176.242.125">218.176.242.125</a></td>
<td><a href="http://218.176.242.126">218.176.242.126</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.127">218.176.242.127</a></td>
<td><a href="http://218.176.242.128">218.176.242.128</a></td>
<td><a href="http://218.176.242.129">218.176.242.129</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.130">218.176.242.130</a></td>
<td><a href="http://218.176.242.131">218.176.242.131</a></td>
<td><a href="http://218.176.242.132">218.176.242.132</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.133">218.176.242.133</a></td>
<td><a href="http://218.176.242.134">218.176.242.134</a></td>
<td><a href="http://218.176.242.135">218.176.242.135</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.136">218.176.242.136</a></td>
<td><a href="http://218.176.242.137">218.176.242.137</a></td>
<td><a href="http://218.176.242.138">218.176.242.138</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.139">218.176.242.139</a></td>
<td><a href="http://218.176.242.140">218.176.242.140</a></td>
<td><a href="http://218.176.242.141">218.176.242.141</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.142">218.176.242.142</a></td>
<td><a href="http://218.176.242.143">218.176.242.143</a></td>
<td><a href="http://218.176.242.144">218.176.242.144</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.145">218.176.242.145</a></td>
<td><a href="http://218.176.242.146">218.176.242.146</a></td>
<td><a href="http://218.176.242.147">218.176.242.147</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.148">218.176.242.148</a></td>
<td><a href="http://218.176.242.149">218.176.242.149</a></td>
<td><a href="http://218.176.242.150">218.176.242.150</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.151">218.176.242.151</a></td>
<td><a href="http://218.176.242.152">218.176.242.152</a></td>
<td><a href="http://218.176.242.153">218.176.242.153</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.154">218.176.242.154</a></td>
<td><a href="http://218.176.242.155">218.176.242.155</a></td>
<td><a href="http://218.176.242.156">218.176.242.156</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.157">218.176.242.157</a></td>
<td><a href="http://218.176.242.158">218.176.242.158</a></td>
<td><a href="http://218.176.242.159">218.176.242.159</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.160">218.176.242.160</a></td>
<td><a href="http://218.176.242.161">218.176.242.161</a></td>
<td><a href="http://218.176.242.162">218.176.242.162</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.163">218.176.242.163</a></td>
<td><a href="http://218.176.242.164">218.176.242.164</a></td>
<td><a href="http://218.176.242.165">218.176.242.165</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.166">218.176.242.166</a></td>
<td><a href="http://218.176.242.167">218.176.242.167</a></td>
<td><a href="http://218.176.242.168">218.176.242.168</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.169">218.176.242.169</a></td>
<td><a href="http://218.176.242.170">218.176.242.170</a></td>
<td><a href="http://218.176.242.171">218.176.242.171</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.172">218.176.242.172</a></td>
<td><a href="http://218.176.242.173">218.176.242.173</a></td>
<td><a href="http://218.176.242.174">218.176.242.174</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.175">218.176.242.175</a></td>
<td><a href="http://218.176.242.176">218.176.242.176</a></td>
<td><a href="http://218.176.242.177">218.176.242.177</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.178">218.176.242.178</a></td>
<td><a href="http://218.176.242.179">218.176.242.179</a></td>
<td><a href="http://218.176.242.180">218.176.242.180</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.181">218.176.242.181</a></td>
<td><a href="http://218.176.242.182">218.176.242.182</a></td>
<td><a href="http://218.176.242.183">218.176.242.183</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.184">218.176.242.184</a></td>
<td><a href="http://218.176.242.185">218.176.242.185</a></td>
<td><a href="http://218.176.242.186">218.176.242.186</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.187">218.176.242.187</a></td>
<td><a href="http://218.176.242.188">218.176.242.188</a></td>
<td><a href="http://218.176.242.189">218.176.242.189</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.190">218.176.242.190</a></td>
<td><a href="http://218.176.242.191">218.176.242.191</a></td>
<td><a href="http://218.176.242.192">218.176.242.192</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.193">218.176.242.193</a></td>
<td><a href="http://218.176.242.194">218.176.242.194</a></td>
<td><a href="http://218.176.242.195">218.176.242.195</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.196">218.176.242.196</a></td>
<td><a href="http://218.176.242.197">218.176.242.197</a></td>
<td><a href="http://218.176.242.198">218.176.242.198</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.199">218.176.242.199</a></td>
<td><a href="http://218.176.242.200">218.176.242.200</a></td>
<td><a href="http://218.176.242.201">218.176.242.201</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.202">218.176.242.202</a></td>
<td><a href="http://218.176.242.203">218.176.242.203</a></td>
<td><a href="http://218.176.242.204">218.176.242.204</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.205">218.176.242.205</a></td>
<td><a href="http://218.176.242.206">218.176.242.206</a></td>
<td><a href="http://218.176.242.207">218.176.242.207</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.208">218.176.242.208</a></td>
<td><a href="http://218.176.242.209">218.176.242.209</a></td>
<td><a href="http://218.176.242.210">218.176.242.210</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.211">218.176.242.211</a></td>
<td><a href="http://218.176.242.212">218.176.242.212</a></td>
<td><a href="http://218.176.242.213">218.176.242.213</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.214">218.176.242.214</a></td>
<td><a href="http://218.176.242.215">218.176.242.215</a></td>
<td><a href="http://218.176.242.216">218.176.242.216</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.217">218.176.242.217</a></td>
<td><a href="http://218.176.242.218">218.176.242.218</a></td>
<td><a href="http://218.176.242.219">218.176.242.219</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.220">218.176.242.220</a></td>
<td><a href="http://218.176.242.221">218.176.242.221</a></td>
<td><a href="http://218.176.242.222">218.176.242.222</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.223">218.176.242.223</a></td>
<td><a href="http://218.176.242.224">218.176.242.224</a></td>
<td><a href="http://218.176.242.225">218.176.242.225</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.226">218.176.242.226</a></td>
<td><a href="http://218.176.242.227">218.176.242.227</a></td>
<td><a href="http://218.176.242.228">218.176.242.228</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.229">218.176.242.229</a></td>
<td><a href="http://218.176.242.230">218.176.242.230</a></td>
<td><a href="http://218.176.242.231">218.176.242.231</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.232">218.176.242.232</a></td>
<td><a href="http://218.176.242.233">218.176.242.233</a></td>
<td><a href="http://218.176.242.234">218.176.242.234</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.235">218.176.242.235</a></td>
<td><a href="http://218.176.242.236">218.176.242.236</a></td>
<td><a href="http://218.176.242.237">218.176.242.237</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.238">218.176.242.238</a></td>
<td><a href="http://218.176.242.239">218.176.242.239</a></td>
<td><a href="http://218.176.242.240">218.176.242.240</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.241">218.176.242.241</a></td>
<td><a href="http://218.176.242.242">218.176.242.242</a></td>
<td><a href="http://218.176.242.243">218.176.242.243</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.244">218.176.242.244</a></td>
<td><a href="http://218.176.242.245">218.176.242.245</a></td>
<td><a href="http://218.176.242.246">218.176.242.246</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.247">218.176.242.247</a></td>
<td><a href="http://218.176.242.248">218.176.242.248</a></td>
<td><a href="http://218.176.242.249">218.176.242.249</a></td>
</tr>
<tr>
<td><a href="http://218.176.242.250">218.176.242.250</a></td>
<td><a href="http://218.176.242.251">218.176.242.251</a></td>
<td> </td>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Kenya</th>
</tr>
<tr>
<td><a href="http://41.84.159.12">41.84.159.12</a></td>
<td><a href="http://41.84.159.13">41.84.159.13</a></td>
<td><a href="http://41.84.159.14">41.84.159.14</a></td>
</tr>
<tr>
<td><a href="http://41.84.159.15">41.84.159.15</a></td>
<td><a href="http://41.84.159.16">41.84.159.16</a></td>
<td><a href="http://41.84.159.17">41.84.159.17</a></td>
</tr>
<tr>
<td><a href="http://41.84.159.18">41.84.159.18</a></td>
<td><a href="http://41.84.159.19">41.84.159.19</a></td>
<td><a href="http://41.84.159.20">41.84.159.20</a></td>
</tr>
<tr>
<td><a href="http://41.84.159.21">41.84.159.21</a></td>
<td><a href="http://41.84.159.22">41.84.159.22</a></td>
<td><a href="http://41.84.159.23">41.84.159.23</a></td>
</tr>
<tr>
<td><a href="http://41.84.159.24">41.84.159.24</a></td>
<td><a href="http://41.84.159.25">41.84.159.25</a></td>
<td><a href="http://41.84.159.26">41.84.159.26</a></td>
</tr>
<tr>
<td><a href="http://41.84.159.27">41.84.159.27</a></td>
<td><a href="http://41.84.159.28">41.84.159.28</a></td>
<td><a href="http://41.84.159.29">41.84.159.29</a></td>
</tr>
<tr>
<td><a href="http://41.84.159.30">41.84.159.30</a></td>
<td colspan="2"></td>
</tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Korea</th>
</tr>
<tr>
<td><a href="http://121.78.74.68">121.78.74.68</a></td>
<td><a href="http://121.78.74.69">121.78.74.69</a></td>
<td><a href="http://121.78.74.70">121.78.74.70</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.71">121.78.74.71</a></td>
<td><a href="http://121.78.74.72">121.78.74.72</a></td>
<td><a href="http://121.78.74.73">121.78.74.73</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.74">121.78.74.74</a></td>
<td><a href="http://121.78.74.75">121.78.74.75</a></td>
<td><a href="http://121.78.74.76">121.78.74.76</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.77">121.78.74.77</a></td>
<td><a href="http://121.78.74.78">121.78.74.78</a></td>
<td><a href="http://121.78.74.79">121.78.74.79</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.80">121.78.74.80</a></td>
<td><a href="http://121.78.74.81">121.78.74.81</a></td>
<td><a href="http://121.78.74.82">121.78.74.82</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.83">121.78.74.83</a></td>
<td><a href="http://121.78.74.84">121.78.74.84</a></td>
<td><a href="http://121.78.74.85">121.78.74.85</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.86">121.78.74.86</a></td>
<td><a href="http://121.78.74.87">121.78.74.87</a></td>
<td><a href="http://121.78.74.88">121.78.74.88</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.89">121.78.74.89</a></td>
<td><a href="http://121.78.74.90">121.78.74.90</a></td>
<td><a href="http://121.78.74.91">121.78.74.91</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.92">121.78.74.92</a></td>
<td><a href="http://121.78.74.93">121.78.74.93</a></td>
<td><a href="http://121.78.74.94">121.78.74.94</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.95">121.78.74.95</a></td>
<td><a href="http://121.78.74.96">121.78.74.96</a></td>
<td><a href="http://121.78.74.97">121.78.74.97</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.98">121.78.74.98</a></td>
<td><a href="http://121.78.74.99">121.78.74.99</a></td>
<td><a href="http://121.78.74.100">121.78.74.100</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.101">121.78.74.101</a></td>
<td><a href="http://121.78.74.102">121.78.74.102</a></td>
<td><a href="http://121.78.74.103">121.78.74.103</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.104">121.78.74.104</a></td>
<td><a href="http://121.78.74.105">121.78.74.105</a></td>
<td><a href="http://121.78.74.106">121.78.74.106</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.107">121.78.74.107</a></td>
<td><a href="http://121.78.74.108">121.78.74.108</a></td>
<td><a href="http://121.78.74.109">121.78.74.109</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.110">121.78.74.110</a></td>
<td><a href="http://121.78.74.111">121.78.74.111</a></td>
<td><a href="http://121.78.74.112">121.78.74.112</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.113">121.78.74.113</a></td>
<td><a href="http://121.78.74.114">121.78.74.114</a></td>
<td><a href="http://121.78.74.115">121.78.74.115</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.116">121.78.74.116</a></td>
<td><a href="http://121.78.74.117">121.78.74.117</a></td>
<td><a href="http://121.78.74.118">121.78.74.118</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.119">121.78.74.119</a></td>
<td><a href="http://121.78.74.120">121.78.74.120</a></td>
<td><a href="http://121.78.74.121">121.78.74.121</a></td>
</tr>
<tr>
<td><a href="http://121.78.74.122">121.78.74.122</a></td>
<td><a href="http://121.78.74.123">121.78.74.123</a></td>
<td> </td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Mauritius</th>
</tr>
<tr>
<td><a href="http://41.206.96.1">41.206.96.1</a></td>
<td><a href="http://41.206.96.2">41.206.96.2</a></td>
<td><a href="http://41.206.96.3">41.206.96.3</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.4">41.206.96.4</a></td>
<td><a href="http://41.206.96.5">41.206.96.5</a></td>
<td><a href="http://41.206.96.6">41.206.96.6</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.7">41.206.96.7</a></td>
<td><a href="http://41.206.96.8">41.206.96.8</a></td>
<td><a href="http://41.206.96.9">41.206.96.9</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.10">41.206.96.10</a></td>
<td><a href="http://41.206.96.11">41.206.96.11</a></td>
<td><a href="http://41.206.96.12">41.206.96.12</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.13">41.206.96.13</a></td>
<td><a href="http://41.206.96.14">41.206.96.14</a></td>
<td><a href="http://41.206.96.15">41.206.96.15</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.16">41.206.96.16</a></td>
<td><a href="http://41.206.96.17">41.206.96.17</a></td>
<td><a href="http://41.206.96.18">41.206.96.18</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.19">41.206.96.19</a></td>
<td><a href="http://41.206.96.20">41.206.96.20</a></td>
<td><a href="http://41.206.96.21">41.206.96.21</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.22">41.206.96.22</a></td>
<td><a href="http://41.206.96.23">41.206.96.23</a></td>
<td><a href="http://41.206.96.24">41.206.96.24</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.25">41.206.96.25</a></td>
<td><a href="http://41.206.96.26">41.206.96.26</a></td>
<td><a href="http://41.206.96.27">41.206.96.27</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.28">41.206.96.28</a></td>
<td><a href="http://41.206.96.29">41.206.96.29</a></td>
<td><a href="http://41.206.96.30">41.206.96.30</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.31">41.206.96.31</a></td>
<td><a href="http://41.206.96.32">41.206.96.32</a></td>
<td><a href="http://41.206.96.33">41.206.96.33</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.34">41.206.96.34</a></td>
<td><a href="http://41.206.96.35">41.206.96.35</a></td>
<td><a href="http://41.206.96.36">41.206.96.36</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.37">41.206.96.37</a></td>
<td><a href="http://41.206.96.38">41.206.96.38</a></td>
<td><a href="http://41.206.96.39">41.206.96.39</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.40">41.206.96.40</a></td>
<td><a href="http://41.206.96.41">41.206.96.41</a></td>
<td><a href="http://41.206.96.42">41.206.96.42</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.43">41.206.96.43</a></td>
<td><a href="http://41.206.96.44">41.206.96.44</a></td>
<td><a href="http://41.206.96.45">41.206.96.45</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.46">41.206.96.46</a></td>
<td><a href="http://41.206.96.47">41.206.96.47</a></td>
<td><a href="http://41.206.96.48">41.206.96.48</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.49">41.206.96.49</a></td>
<td><a href="http://41.206.96.50">41.206.96.50</a></td>
<td><a href="http://41.206.96.51">41.206.96.51</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.52">41.206.96.52</a></td>
<td><a href="http://41.206.96.53">41.206.96.53</a></td>
<td><a href="http://41.206.96.54">41.206.96.54</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.55">41.206.96.55</a></td>
<td><a href="http://41.206.96.56">41.206.96.56</a></td>
<td><a href="http://41.206.96.57">41.206.96.57</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.58">41.206.96.58</a></td>
<td><a href="http://41.206.96.59">41.206.96.59</a></td>
<td><a href="http://41.206.96.60">41.206.96.60</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.61">41.206.96.61</a></td>
<td><a href="http://41.206.96.62">41.206.96.62</a></td>
<td><a href="http://41.206.96.63">41.206.96.63</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.64">41.206.96.64</a></td>
<td><a href="http://41.206.96.65">41.206.96.65</a></td>
<td><a href="http://41.206.96.66">41.206.96.66</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.67">41.206.96.67</a></td>
<td><a href="http://41.206.96.68">41.206.96.68</a></td>
<td><a href="http://41.206.96.69">41.206.96.69</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.70">41.206.96.70</a></td>
<td><a href="http://41.206.96.71">41.206.96.71</a></td>
<td><a href="http://41.206.96.72">41.206.96.72</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.73">41.206.96.73</a></td>
<td><a href="http://41.206.96.74">41.206.96.74</a></td>
<td><a href="http://41.206.96.75">41.206.96.75</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.76">41.206.96.76</a></td>
<td><a href="http://41.206.96.77">41.206.96.77</a></td>
<td><a href="http://41.206.96.78">41.206.96.78</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.79">41.206.96.79</a></td>
<td><a href="http://41.206.96.80">41.206.96.80</a></td>
<td><a href="http://41.206.96.81">41.206.96.81</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.82">41.206.96.82</a></td>
<td><a href="http://41.206.96.83">41.206.96.83</a></td>
<td><a href="http://41.206.96.84">41.206.96.84</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.85">41.206.96.85</a></td>
<td><a href="http://41.206.96.86">41.206.96.86</a></td>
<td><a href="http://41.206.96.87">41.206.96.87</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.88">41.206.96.88</a></td>
<td><a href="http://41.206.96.89">41.206.96.89</a></td>
<td><a href="http://41.206.96.90">41.206.96.90</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.91">41.206.96.91</a></td>
<td><a href="http://41.206.96.92">41.206.96.92</a></td>
<td><a href="http://41.206.96.93">41.206.96.93</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.94">41.206.96.94</a></td>
<td><a href="http://41.206.96.95">41.206.96.95</a></td>
<td><a href="http://41.206.96.96">41.206.96.96</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.97">41.206.96.97</a></td>
<td><a href="http://41.206.96.98">41.206.96.98</a></td>
<td><a href="http://41.206.96.99">41.206.96.99</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.100">41.206.96.100</a></td>
<td><a href="http://41.206.96.101">41.206.96.101</a></td>
<td><a href="http://41.206.96.102">41.206.96.102</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.103">41.206.96.103</a></td>
<td><a href="http://41.206.96.104">41.206.96.104</a></td>
<td><a href="http://41.206.96.105">41.206.96.105</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.106">41.206.96.106</a></td>
<td><a href="http://41.206.96.107">41.206.96.107</a></td>
<td><a href="http://41.206.96.108">41.206.96.108</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.109">41.206.96.109</a></td>
<td><a href="http://41.206.96.110">41.206.96.110</a></td>
<td><a href="http://41.206.96.111">41.206.96.111</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.112">41.206.96.112</a></td>
<td><a href="http://41.206.96.113">41.206.96.113</a></td>
<td><a href="http://41.206.96.114">41.206.96.114</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.115">41.206.96.115</a></td>
<td><a href="http://41.206.96.116">41.206.96.116</a></td>
<td><a href="http://41.206.96.117">41.206.96.117</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.118">41.206.96.118</a></td>
<td><a href="http://41.206.96.119">41.206.96.119</a></td>
<td><a href="http://41.206.96.120">41.206.96.120</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.121">41.206.96.121</a></td>
<td><a href="http://41.206.96.122">41.206.96.122</a></td>
<td><a href="http://41.206.96.123">41.206.96.123</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.124">41.206.96.124</a></td>
<td><a href="http://41.206.96.125">41.206.96.125</a></td>
<td><a href="http://41.206.96.126">41.206.96.126</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.127">41.206.96.127</a></td>
<td><a href="http://41.206.96.128">41.206.96.128</a></td>
<td><a href="http://41.206.96.129">41.206.96.129</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.130">41.206.96.130</a></td>
<td><a href="http://41.206.96.131">41.206.96.131</a></td>
<td><a href="http://41.206.96.132">41.206.96.132</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.133">41.206.96.133</a></td>
<td><a href="http://41.206.96.134">41.206.96.134</a></td>
<td><a href="http://41.206.96.135">41.206.96.135</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.136">41.206.96.136</a></td>
<td><a href="http://41.206.96.137">41.206.96.137</a></td>
<td><a href="http://41.206.96.138">41.206.96.138</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.139">41.206.96.139</a></td>
<td><a href="http://41.206.96.140">41.206.96.140</a></td>
<td><a href="http://41.206.96.141">41.206.96.141</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.142">41.206.96.142</a></td>
<td><a href="http://41.206.96.143">41.206.96.143</a></td>
<td><a href="http://41.206.96.144">41.206.96.144</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.145">41.206.96.145</a></td>
<td><a href="http://41.206.96.146">41.206.96.146</a></td>
<td><a href="http://41.206.96.147">41.206.96.147</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.148">41.206.96.148</a></td>
<td><a href="http://41.206.96.149">41.206.96.149</a></td>
<td><a href="http://41.206.96.150">41.206.96.150</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.151">41.206.96.151</a></td>
<td><a href="http://41.206.96.152">41.206.96.152</a></td>
<td><a href="http://41.206.96.153">41.206.96.153</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.154">41.206.96.154</a></td>
<td><a href="http://41.206.96.155">41.206.96.155</a></td>
<td><a href="http://41.206.96.156">41.206.96.156</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.157">41.206.96.157</a></td>
<td><a href="http://41.206.96.158">41.206.96.158</a></td>
<td><a href="http://41.206.96.159">41.206.96.159</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.160">41.206.96.160</a></td>
<td><a href="http://41.206.96.161">41.206.96.161</a></td>
<td><a href="http://41.206.96.162">41.206.96.162</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.163">41.206.96.163</a></td>
<td><a href="http://41.206.96.164">41.206.96.164</a></td>
<td><a href="http://41.206.96.165">41.206.96.165</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.166">41.206.96.166</a></td>
<td><a href="http://41.206.96.167">41.206.96.167</a></td>
<td><a href="http://41.206.96.168">41.206.96.168</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.169">41.206.96.169</a></td>
<td><a href="http://41.206.96.170">41.206.96.170</a></td>
<td><a href="http://41.206.96.171">41.206.96.171</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.172">41.206.96.172</a></td>
<td><a href="http://41.206.96.173">41.206.96.173</a></td>
<td><a href="http://41.206.96.174">41.206.96.174</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.175">41.206.96.175</a></td>
<td><a href="http://41.206.96.176">41.206.96.176</a></td>
<td><a href="http://41.206.96.177">41.206.96.177</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.178">41.206.96.178</a></td>
<td><a href="http://41.206.96.179">41.206.96.179</a></td>
<td><a href="http://41.206.96.180">41.206.96.180</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.181">41.206.96.181</a></td>
<td><a href="http://41.206.96.182">41.206.96.182</a></td>
<td><a href="http://41.206.96.183">41.206.96.183</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.184">41.206.96.184</a></td>
<td><a href="http://41.206.96.185">41.206.96.185</a></td>
<td><a href="http://41.206.96.186">41.206.96.186</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.187">41.206.96.187</a></td>
<td><a href="http://41.206.96.188">41.206.96.188</a></td>
<td><a href="http://41.206.96.189">41.206.96.189</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.190">41.206.96.190</a></td>
<td><a href="http://41.206.96.191">41.206.96.191</a></td>
<td><a href="http://41.206.96.192">41.206.96.192</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.193">41.206.96.193</a></td>
<td><a href="http://41.206.96.194">41.206.96.194</a></td>
<td><a href="http://41.206.96.195">41.206.96.195</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.196">41.206.96.196</a></td>
<td><a href="http://41.206.96.197">41.206.96.197</a></td>
<td><a href="http://41.206.96.198">41.206.96.198</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.199">41.206.96.199</a></td>
<td><a href="http://41.206.96.200">41.206.96.200</a></td>
<td><a href="http://41.206.96.201">41.206.96.201</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.202">41.206.96.202</a></td>
<td><a href="http://41.206.96.203">41.206.96.203</a></td>
<td><a href="http://41.206.96.204">41.206.96.204</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.205">41.206.96.205</a></td>
<td><a href="http://41.206.96.206">41.206.96.206</a></td>
<td><a href="http://41.206.96.207">41.206.96.207</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.208">41.206.96.208</a></td>
<td><a href="http://41.206.96.209">41.206.96.209</a></td>
<td><a href="http://41.206.96.210">41.206.96.210</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.211">41.206.96.211</a></td>
<td><a href="http://41.206.96.212">41.206.96.212</a></td>
<td><a href="http://41.206.96.213">41.206.96.213</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.214">41.206.96.214</a></td>
<td><a href="http://41.206.96.215">41.206.96.215</a></td>
<td><a href="http://41.206.96.216">41.206.96.216</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.217">41.206.96.217</a></td>
<td><a href="http://41.206.96.218">41.206.96.218</a></td>
<td><a href="http://41.206.96.219">41.206.96.219</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.220">41.206.96.220</a></td>
<td><a href="http://41.206.96.221">41.206.96.221</a></td>
<td><a href="http://41.206.96.222">41.206.96.222</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.223">41.206.96.223</a></td>
<td><a href="http://41.206.96.224">41.206.96.224</a></td>
<td><a href="http://41.206.96.225">41.206.96.225</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.226">41.206.96.226</a></td>
<td><a href="http://41.206.96.227">41.206.96.227</a></td>
<td><a href="http://41.206.96.228">41.206.96.228</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.229">41.206.96.229</a></td>
<td><a href="http://41.206.96.230">41.206.96.230</a></td>
<td><a href="http://41.206.96.231">41.206.96.231</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.232">41.206.96.232</a></td>
<td><a href="http://41.206.96.233">41.206.96.233</a></td>
<td><a href="http://41.206.96.234">41.206.96.234</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.235">41.206.96.235</a></td>
<td><a href="http://41.206.96.236">41.206.96.236</a></td>
<td><a href="http://41.206.96.237">41.206.96.237</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.238">41.206.96.238</a></td>
<td><a href="http://41.206.96.239">41.206.96.239</a></td>
<td><a href="http://41.206.96.240">41.206.96.240</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.241">41.206.96.241</a></td>
<td><a href="http://41.206.96.242">41.206.96.242</a></td>
<td><a href="http://41.206.96.243">41.206.96.243</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.244">41.206.96.244</a></td>
<td><a href="http://41.206.96.245">41.206.96.245</a></td>
<td><a href="http://41.206.96.246">41.206.96.246</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.247">41.206.96.247</a></td>
<td><a href="http://41.206.96.248">41.206.96.248</a></td>
<td><a href="http://41.206.96.249">41.206.96.249</a></td>
</tr>
<tr>
<td><a href="http://41.206.96.250">41.206.96.250</a></td>
<td><a href="http://41.206.96.251">41.206.96.251</a></td>
<td> </td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Netherlands</th>
</tr>
<tr>
<td><a href="http://88.159.13.196">88.159.13.196</a></td>
<td><a href="http://88.159.13.197">88.159.13.197</a></td>
<td><a href="http://88.159.13.198">88.159.13.198</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.199">88.159.13.199</a></td>
<td><a href="http://88.159.13.200">88.159.13.200</a></td>
<td><a href="http://88.159.13.201">88.159.13.201</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.202">88.159.13.202</a></td>
<td><a href="http://88.159.13.203">88.159.13.203</a></td>
<td><a href="http://88.159.13.204">88.159.13.204</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.205">88.159.13.205</a></td>
<td><a href="http://88.159.13.206">88.159.13.206</a></td>
<td><a href="http://88.159.13.207">88.159.13.207</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.208">88.159.13.208</a></td>
<td><a href="http://88.159.13.209">88.159.13.209</a></td>
<td><a href="http://88.159.13.210">88.159.13.210</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.211">88.159.13.211</a></td>
<td><a href="http://88.159.13.212">88.159.13.212</a></td>
<td><a href="http://88.159.13.213">88.159.13.213</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.214">88.159.13.214</a></td>
<td><a href="http://88.159.13.215">88.159.13.215</a></td>
<td><a href="http://88.159.13.216">88.159.13.216</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.217">88.159.13.217</a></td>
<td><a href="http://88.159.13.218">88.159.13.218</a></td>
<td><a href="http://88.159.13.219">88.159.13.219</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.220">88.159.13.220</a></td>
<td><a href="http://88.159.13.221">88.159.13.221</a></td>
<td><a href="http://88.159.13.222">88.159.13.222</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.223">88.159.13.223</a></td>
<td><a href="http://88.159.13.224">88.159.13.224</a></td>
<td><a href="http://88.159.13.225">88.159.13.225</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.226">88.159.13.226</a></td>
<td><a href="http://88.159.13.227">88.159.13.227</a></td>
<td><a href="http://88.159.13.228">88.159.13.228</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.229">88.159.13.229</a></td>
<td><a href="http://88.159.13.230">88.159.13.230</a></td>
<td><a href="http://88.159.13.231">88.159.13.231</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.232">88.159.13.232</a></td>
<td><a href="http://88.159.13.233">88.159.13.233</a></td>
<td><a href="http://88.159.13.234">88.159.13.234</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.235">88.159.13.235</a></td>
<td><a href="http://88.159.13.236">88.159.13.236</a></td>
<td><a href="http://88.159.13.237">88.159.13.237</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.238">88.159.13.238</a></td>
<td><a href="http://88.159.13.239">88.159.13.239</a></td>
<td><a href="http://88.159.13.240">88.159.13.240</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.241">88.159.13.241</a></td>
<td><a href="http://88.159.13.242">88.159.13.242</a></td>
<td><a href="http://88.159.13.243">88.159.13.243</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.244">88.159.13.244</a></td>
<td><a href="http://88.159.13.245">88.159.13.245</a></td>
<td><a href="http://88.159.13.246">88.159.13.246</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.247">88.159.13.247</a></td>
<td><a href="http://88.159.13.248">88.159.13.248</a></td>
<td><a href="http://88.159.13.249">88.159.13.249</a></td>
</tr>
<tr>
<td><a href="http://88.159.13.250">88.159.13.250</a></td>
<td><a href="http://88.159.13.251">88.159.13.251</a></td>
<td> </td>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Norway</th>
</tr>
<tr>
<td><a href="http://193.90.147.0">193.90.147.0</a></td>
<td><a href="http://193.90.147.1">193.90.147.1</a></td>
<td><a href="http://193.90.147.2">193.90.147.2</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.3">193.90.147.3</a></td>
<td><a href="http://193.90.147.4">193.90.147.4</a></td>
<td><a href="http://193.90.147.5">193.90.147.5</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.6">193.90.147.6</a></td>
<td><a href="http://193.90.147.7">193.90.147.7</a></td>
<td><a href="http://193.90.147.12">193.90.147.12</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.13">193.90.147.13</a></td>
<td><a href="http://193.90.147.14">193.90.147.14</a></td>
<td><a href="http://193.90.147.15">193.90.147.15</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.16">193.90.147.16</a></td>
<td><a href="http://193.90.147.17">193.90.147.17</a></td>
<td><a href="http://193.90.147.18">193.90.147.18</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.19">193.90.147.19</a></td>
<td><a href="http://193.90.147.20">193.90.147.20</a></td>
<td><a href="http://193.90.147.21">193.90.147.21</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.22">193.90.147.22</a></td>
<td><a href="http://193.90.147.23">193.90.147.23</a></td>
<td><a href="http://193.90.147.24">193.90.147.24</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.25">193.90.147.25</a></td>
<td><a href="http://193.90.147.26">193.90.147.26</a></td>
<td><a href="http://193.90.147.27">193.90.147.27</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.28">193.90.147.28</a></td>
<td><a href="http://193.90.147.29">193.90.147.29</a></td>
<td><a href="http://193.90.147.30">193.90.147.30</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.31">193.90.147.31</a></td>
<td><a href="http://193.90.147.32">193.90.147.32</a></td>
<td><a href="http://193.90.147.33">193.90.147.33</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.34">193.90.147.34</a></td>
<td><a href="http://193.90.147.35">193.90.147.35</a></td>
<td><a href="http://193.90.147.36">193.90.147.36</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.37">193.90.147.37</a></td>
<td><a href="http://193.90.147.38">193.90.147.38</a></td>
<td><a href="http://193.90.147.39">193.90.147.39</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.40">193.90.147.40</a></td>
<td><a href="http://193.90.147.41">193.90.147.41</a></td>
<td><a href="http://193.90.147.42">193.90.147.42</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.43">193.90.147.43</a></td>
<td><a href="http://193.90.147.44">193.90.147.44</a></td>
<td><a href="http://193.90.147.45">193.90.147.45</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.46">193.90.147.46</a></td>
<td><a href="http://193.90.147.47">193.90.147.47</a></td>
<td><a href="http://193.90.147.48">193.90.147.48</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.49">193.90.147.49</a></td>
<td><a href="http://193.90.147.50">193.90.147.50</a></td>
<td><a href="http://193.90.147.51">193.90.147.51</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.52">193.90.147.52</a></td>
<td><a href="http://193.90.147.53">193.90.147.53</a></td>
<td><a href="http://193.90.147.54">193.90.147.54</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.55">193.90.147.55</a></td>
<td><a href="http://193.90.147.56">193.90.147.56</a></td>
<td><a href="http://193.90.147.57">193.90.147.57</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.58">193.90.147.58</a></td>
<td><a href="http://193.90.147.59">193.90.147.59</a></td>
<td><a href="http://193.90.147.76">193.90.147.76</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.77">193.90.147.77</a></td>
<td><a href="http://193.90.147.78">193.90.147.78</a></td>
<td><a href="http://193.90.147.79">193.90.147.79</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.80">193.90.147.80</a></td>
<td><a href="http://193.90.147.81">193.90.147.81</a></td>
<td><a href="http://193.90.147.82">193.90.147.82</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.83">193.90.147.83</a></td>
<td><a href="http://193.90.147.84">193.90.147.84</a></td>
<td><a href="http://193.90.147.85">193.90.147.85</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.86">193.90.147.86</a></td>
<td><a href="http://193.90.147.87">193.90.147.87</a></td>
<td><a href="http://193.90.147.88">193.90.147.88</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.89">193.90.147.89</a></td>
<td><a href="http://193.90.147.90">193.90.147.90</a></td>
<td><a href="http://193.90.147.91">193.90.147.91</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.92">193.90.147.92</a></td>
<td><a href="http://193.90.147.93">193.90.147.93</a></td>
<td><a href="http://193.90.147.94">193.90.147.94</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.95">193.90.147.95</a></td>
<td><a href="http://193.90.147.96">193.90.147.96</a></td>
<td><a href="http://193.90.147.97">193.90.147.97</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.98">193.90.147.98</a></td>
<td><a href="http://193.90.147.99">193.90.147.99</a></td>
<td><a href="http://193.90.147.100">193.90.147.100</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.101">193.90.147.101</a></td>
<td><a href="http://193.90.147.102">193.90.147.102</a></td>
<td><a href="http://193.90.147.103">193.90.147.103</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.104">193.90.147.104</a></td>
<td><a href="http://193.90.147.105">193.90.147.105</a></td>
<td><a href="http://193.90.147.106">193.90.147.106</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.107">193.90.147.107</a></td>
<td><a href="http://193.90.147.108">193.90.147.108</a></td>
<td><a href="http://193.90.147.109">193.90.147.109</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.110">193.90.147.110</a></td>
<td><a href="http://193.90.147.111">193.90.147.111</a></td>
<td><a href="http://193.90.147.112">193.90.147.112</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.113">193.90.147.113</a></td>
<td><a href="http://193.90.147.114">193.90.147.114</a></td>
<td><a href="http://193.90.147.115">193.90.147.115</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.116">193.90.147.116</a></td>
<td><a href="http://193.90.147.117">193.90.147.117</a></td>
<td><a href="http://193.90.147.118">193.90.147.118</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.119">193.90.147.119</a></td>
<td><a href="http://193.90.147.120">193.90.147.120</a></td>
<td><a href="http://193.90.147.121">193.90.147.121</a></td>
</tr>
<tr>
<td><a href="http://193.90.147.122">193.90.147.122</a></td>
<td><a href="http://193.90.147.123">193.90.147.123</a></td>
<td> </td>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Philippines</th>
</tr>
<tr>
<td><a href="http://103.25.178.4">103.25.178.4</a></td>
<td><a href="http://103.25.178.5">103.25.178.5</a></td>
<td><a href="http://103.25.178.6">103.25.178.6</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.12">103.25.178.12</a></td>
<td><a href="http://103.25.178.13">103.25.178.13</a></td>
<td><a href="http://103.25.178.14">103.25.178.14</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.15">103.25.178.15</a></td>
<td><a href="http://103.25.178.16">103.25.178.16</a></td>
<td><a href="http://103.25.178.17">103.25.178.17</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.18">103.25.178.18</a></td>
<td><a href="http://103.25.178.19">103.25.178.19</a></td>
<td><a href="http://103.25.178.20">103.25.178.20</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.21">103.25.178.21</a></td>
<td><a href="http://103.25.178.22">103.25.178.22</a></td>
<td><a href="http://103.25.178.23">103.25.178.23</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.24">103.25.178.24</a></td>
<td><a href="http://103.25.178.25">103.25.178.25</a></td>
<td><a href="http://103.25.178.26">103.25.178.26</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.27">103.25.178.27</a></td>
<td><a href="http://103.25.178.28">103.25.178.28</a></td>
<td><a href="http://103.25.178.29">103.25.178.29</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.30">103.25.178.30</a></td>
<td><a href="http://103.25.178.31">103.25.178.31</a></td>
<td><a href="http://103.25.178.32">103.25.178.32</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.33">103.25.178.33</a></td>
<td><a href="http://103.25.178.34">103.25.178.34</a></td>
<td><a href="http://103.25.178.35">103.25.178.35</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.36">103.25.178.36</a></td>
<td><a href="http://103.25.178.37">103.25.178.37</a></td>
<td><a href="http://103.25.178.38">103.25.178.38</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.39">103.25.178.39</a></td>
<td><a href="http://103.25.178.40">103.25.178.40</a></td>
<td><a href="http://103.25.178.41">103.25.178.41</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.42">103.25.178.42</a></td>
<td><a href="http://103.25.178.43">103.25.178.43</a></td>
<td><a href="http://103.25.178.44">103.25.178.44</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.45">103.25.178.45</a></td>
<td><a href="http://103.25.178.46">103.25.178.46</a></td>
<td><a href="http://103.25.178.47">103.25.178.47</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.48">103.25.178.48</a></td>
<td><a href="http://103.25.178.49">103.25.178.49</a></td>
<td><a href="http://103.25.178.50">103.25.178.50</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.51">103.25.178.51</a></td>
<td><a href="http://103.25.178.52">103.25.178.52</a></td>
<td><a href="http://103.25.178.53">103.25.178.53</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.54">103.25.178.54</a></td>
<td><a href="http://103.25.178.55">103.25.178.55</a></td>
<td><a href="http://103.25.178.56">103.25.178.56</a></td>
</tr>
<tr>
<td><a href="http://103.25.178.57">103.25.178.57</a></td>
<td><a href="http://103.25.178.58">103.25.178.58</a></td>
<td><a href="http://103.25.178.59">103.25.178.59</a></td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Russia</th>
</tr>
<tr>
<td><a href="http://178.45.251.4">178.45.251.4</a></td>
<td><a href="http://178.45.251.5">178.45.251.5</a></td>
<td><a href="http://178.45.251.6">178.45.251.6</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.7">178.45.251.7</a></td>
<td><a href="http://178.45.251.8">178.45.251.8</a></td>
<td><a href="http://178.45.251.9">178.45.251.9</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.10">178.45.251.10</a></td>
<td><a href="http://178.45.251.11">178.45.251.11</a></td>
<td><a href="http://178.45.251.12">178.45.251.12</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.13">178.45.251.13</a></td>
<td><a href="http://178.45.251.14">178.45.251.14</a></td>
<td><a href="http://178.45.251.15">178.45.251.15</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.16">178.45.251.16</a></td>
<td><a href="http://178.45.251.17">178.45.251.17</a></td>
<td><a href="http://178.45.251.18">178.45.251.18</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.19">178.45.251.19</a></td>
<td><a href="http://178.45.251.20">178.45.251.20</a></td>
<td><a href="http://178.45.251.21">178.45.251.21</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.22">178.45.251.22</a></td>
<td><a href="http://178.45.251.23">178.45.251.23</a></td>
<td><a href="http://178.45.251.24">178.45.251.24</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.25">178.45.251.25</a></td>
<td><a href="http://178.45.251.26">178.45.251.26</a></td>
<td><a href="http://178.45.251.27">178.45.251.27</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.28">178.45.251.28</a></td>
<td><a href="http://178.45.251.29">178.45.251.29</a></td>
<td><a href="http://178.45.251.30">178.45.251.30</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.31">178.45.251.31</a></td>
<td><a href="http://178.45.251.32">178.45.251.32</a></td>
<td><a href="http://178.45.251.33">178.45.251.33</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.34">178.45.251.34</a></td>
<td><a href="http://178.45.251.35">178.45.251.35</a></td>
<td><a href="http://178.45.251.36">178.45.251.36</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.37">178.45.251.37</a></td>
<td><a href="http://178.45.251.38">178.45.251.38</a></td>
<td><a href="http://178.45.251.39">178.45.251.39</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.40">178.45.251.40</a></td>
<td><a href="http://178.45.251.41">178.45.251.41</a></td>
<td><a href="http://178.45.251.42">178.45.251.42</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.43">178.45.251.43</a></td>
<td><a href="http://178.45.251.44">178.45.251.44</a></td>
<td><a href="http://178.45.251.45">178.45.251.45</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.46">178.45.251.46</a></td>
<td><a href="http://178.45.251.47">178.45.251.47</a></td>
<td><a href="http://178.45.251.48">178.45.251.48</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.49">178.45.251.49</a></td>
<td><a href="http://178.45.251.50">178.45.251.50</a></td>
<td><a href="http://178.45.251.51">178.45.251.51</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.52">178.45.251.52</a></td>
<td><a href="http://178.45.251.53">178.45.251.53</a></td>
<td><a href="http://178.45.251.54">178.45.251.54</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.55">178.45.251.55</a></td>
<td><a href="http://178.45.251.56">178.45.251.56</a></td>
<td><a href="http://178.45.251.57">178.45.251.57</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.58">178.45.251.58</a></td>
<td><a href="http://178.45.251.59">178.45.251.59</a></td>
<td><a href="http://178.45.251.60">178.45.251.60</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.61">178.45.251.61</a></td>
<td><a href="http://178.45.251.62">178.45.251.62</a></td>
<td><a href="http://178.45.251.63">178.45.251.63</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.64">178.45.251.64</a></td>
<td><a href="http://178.45.251.65">178.45.251.65</a></td>
<td><a href="http://178.45.251.66">178.45.251.66</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.67">178.45.251.67</a></td>
<td><a href="http://178.45.251.68">178.45.251.68</a></td>
<td><a href="http://178.45.251.69">178.45.251.69</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.70">178.45.251.70</a></td>
<td><a href="http://178.45.251.71">178.45.251.71</a></td>
<td><a href="http://178.45.251.72">178.45.251.72</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.73">178.45.251.73</a></td>
<td><a href="http://178.45.251.74">178.45.251.74</a></td>
<td><a href="http://178.45.251.75">178.45.251.75</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.76">178.45.251.76</a></td>
<td><a href="http://178.45.251.77">178.45.251.77</a></td>
<td><a href="http://178.45.251.78">178.45.251.78</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.79">178.45.251.79</a></td>
<td><a href="http://178.45.251.80">178.45.251.80</a></td>
<td><a href="http://178.45.251.81">178.45.251.81</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.82">178.45.251.82</a></td>
<td><a href="http://178.45.251.83">178.45.251.83</a></td>
<td><a href="http://178.45.251.84">178.45.251.84</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.85">178.45.251.85</a></td>
<td><a href="http://178.45.251.86">178.45.251.86</a></td>
<td><a href="http://178.45.251.87">178.45.251.87</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.88">178.45.251.88</a></td>
<td><a href="http://178.45.251.89">178.45.251.89</a></td>
<td><a href="http://178.45.251.90">178.45.251.90</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.91">178.45.251.91</a></td>
<td><a href="http://178.45.251.92">178.45.251.92</a></td>
<td><a href="http://178.45.251.93">178.45.251.93</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.94">178.45.251.94</a></td>
<td><a href="http://178.45.251.95">178.45.251.95</a></td>
<td><a href="http://178.45.251.96">178.45.251.96</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.97">178.45.251.97</a></td>
<td><a href="http://178.45.251.98">178.45.251.98</a></td>
<td><a href="http://178.45.251.99">178.45.251.99</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.100">178.45.251.100</a></td>
<td><a href="http://178.45.251.101">178.45.251.101</a></td>
<td><a href="http://178.45.251.102">178.45.251.102</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.103">178.45.251.103</a></td>
<td><a href="http://178.45.251.104">178.45.251.104</a></td>
<td><a href="http://178.45.251.105">178.45.251.105</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.106">178.45.251.106</a></td>
<td><a href="http://178.45.251.107">178.45.251.107</a></td>
<td><a href="http://178.45.251.108">178.45.251.108</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.109">178.45.251.109</a></td>
<td><a href="http://178.45.251.110">178.45.251.110</a></td>
<td><a href="http://178.45.251.111">178.45.251.111</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.112">178.45.251.112</a></td>
<td><a href="http://178.45.251.113">178.45.251.113</a></td>
<td><a href="http://178.45.251.114">178.45.251.114</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.115">178.45.251.115</a></td>
<td><a href="http://178.45.251.116">178.45.251.116</a></td>
<td><a href="http://178.45.251.117">178.45.251.117</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.118">178.45.251.118</a></td>
<td><a href="http://178.45.251.119">178.45.251.119</a></td>
<td><a href="http://178.45.251.120">178.45.251.120</a></td>
</tr>
<tr>
<td><a href="http://178.45.251.121">178.45.251.121</a></td>
<td><a href="http://178.45.251.122">178.45.251.122</a></td>
<td><a href="http://178.45.251.123">178.45.251.123</a></td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Saudi Arabia</th>
</tr>
<tr>
<td><a href="http://84.235.77.1">84.235.77.1</a></td>
<td><a href="http://84.235.77.2">84.235.77.2</a></td>
<td><a href="http://84.235.77.3">84.235.77.3</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.4">84.235.77.4</a></td>
<td><a href="http://84.235.77.5">84.235.77.5</a></td>
<td><a href="http://84.235.77.6">84.235.77.6</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.7">84.235.77.7</a></td>
<td><a href="http://84.235.77.8">84.235.77.8</a></td>
<td><a href="http://84.235.77.9">84.235.77.9</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.10">84.235.77.10</a></td>
<td><a href="http://84.235.77.11">84.235.77.11</a></td>
<td><a href="http://84.235.77.12">84.235.77.12</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.13">84.235.77.13</a></td>
<td><a href="http://84.235.77.14">84.235.77.14</a></td>
<td><a href="http://84.235.77.15">84.235.77.15</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.16">84.235.77.16</a></td>
<td><a href="http://84.235.77.17">84.235.77.17</a></td>
<td><a href="http://84.235.77.18">84.235.77.18</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.19">84.235.77.19</a></td>
<td><a href="http://84.235.77.20">84.235.77.20</a></td>
<td><a href="http://84.235.77.21">84.235.77.21</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.22">84.235.77.22</a></td>
<td><a href="http://84.235.77.23">84.235.77.23</a></td>
<td><a href="http://84.235.77.24">84.235.77.24</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.25">84.235.77.25</a></td>
<td><a href="http://84.235.77.26">84.235.77.26</a></td>
<td><a href="http://84.235.77.27">84.235.77.27</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.28">84.235.77.28</a></td>
<td><a href="http://84.235.77.29">84.235.77.29</a></td>
<td><a href="http://84.235.77.30">84.235.77.30</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.31">84.235.77.31</a></td>
<td><a href="http://84.235.77.32">84.235.77.32</a></td>
<td><a href="http://84.235.77.33">84.235.77.33</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.34">84.235.77.34</a></td>
<td><a href="http://84.235.77.35">84.235.77.35</a></td>
<td><a href="http://84.235.77.36">84.235.77.36</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.37">84.235.77.37</a></td>
<td><a href="http://84.235.77.38">84.235.77.38</a></td>
<td><a href="http://84.235.77.39">84.235.77.39</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.40">84.235.77.40</a></td>
<td><a href="http://84.235.77.41">84.235.77.41</a></td>
<td><a href="http://84.235.77.42">84.235.77.42</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.43">84.235.77.43</a></td>
<td><a href="http://84.235.77.44">84.235.77.44</a></td>
<td><a href="http://84.235.77.45">84.235.77.45</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.46">84.235.77.46</a></td>
<td><a href="http://84.235.77.47">84.235.77.47</a></td>
<td><a href="http://84.235.77.48">84.235.77.48</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.49">84.235.77.49</a></td>
<td><a href="http://84.235.77.50">84.235.77.50</a></td>
<td><a href="http://84.235.77.51">84.235.77.51</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.52">84.235.77.52</a></td>
<td><a href="http://84.235.77.53">84.235.77.53</a></td>
<td><a href="http://84.235.77.54">84.235.77.54</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.55">84.235.77.55</a></td>
<td><a href="http://84.235.77.56">84.235.77.56</a></td>
<td><a href="http://84.235.77.57">84.235.77.57</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.58">84.235.77.58</a></td>
<td><a href="http://84.235.77.59">84.235.77.59</a></td>
<td><a href="http://84.235.77.60">84.235.77.60</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.61">84.235.77.61</a></td>
<td><a href="http://84.235.77.62">84.235.77.62</a></td>
<td><a href="http://84.235.77.63">84.235.77.63</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.64">84.235.77.64</a></td>
<td><a href="http://84.235.77.65">84.235.77.65</a></td>
<td><a href="http://84.235.77.66">84.235.77.66</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.67">84.235.77.67</a></td>
<td><a href="http://84.235.77.68">84.235.77.68</a></td>
<td><a href="http://84.235.77.69">84.235.77.69</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.70">84.235.77.70</a></td>
<td><a href="http://84.235.77.71">84.235.77.71</a></td>
<td><a href="http://84.235.77.72">84.235.77.72</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.73">84.235.77.73</a></td>
<td><a href="http://84.235.77.74">84.235.77.74</a></td>
<td><a href="http://84.235.77.75">84.235.77.75</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.76">84.235.77.76</a></td>
<td><a href="http://84.235.77.77">84.235.77.77</a></td>
<td><a href="http://84.235.77.78">84.235.77.78</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.79">84.235.77.79</a></td>
<td><a href="http://84.235.77.80">84.235.77.80</a></td>
<td><a href="http://84.235.77.81">84.235.77.81</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.82">84.235.77.82</a></td>
<td><a href="http://84.235.77.83">84.235.77.83</a></td>
<td><a href="http://84.235.77.84">84.235.77.84</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.85">84.235.77.85</a></td>
<td><a href="http://84.235.77.86">84.235.77.86</a></td>
<td><a href="http://84.235.77.87">84.235.77.87</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.88">84.235.77.88</a></td>
<td><a href="http://84.235.77.89">84.235.77.89</a></td>
<td><a href="http://84.235.77.90">84.235.77.90</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.91">84.235.77.91</a></td>
<td><a href="http://84.235.77.92">84.235.77.92</a></td>
<td><a href="http://84.235.77.93">84.235.77.93</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.94">84.235.77.94</a></td>
<td><a href="http://84.235.77.95">84.235.77.95</a></td>
<td><a href="http://84.235.77.96">84.235.77.96</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.97">84.235.77.97</a></td>
<td><a href="http://84.235.77.98">84.235.77.98</a></td>
<td><a href="http://84.235.77.99">84.235.77.99</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.100">84.235.77.100</a></td>
<td><a href="http://84.235.77.101">84.235.77.101</a></td>
<td><a href="http://84.235.77.102">84.235.77.102</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.103">84.235.77.103</a></td>
<td><a href="http://84.235.77.104">84.235.77.104</a></td>
<td><a href="http://84.235.77.105">84.235.77.105</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.106">84.235.77.106</a></td>
<td><a href="http://84.235.77.107">84.235.77.107</a></td>
<td><a href="http://84.235.77.108">84.235.77.108</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.109">84.235.77.109</a></td>
<td><a href="http://84.235.77.110">84.235.77.110</a></td>
<td><a href="http://84.235.77.111">84.235.77.111</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.112">84.235.77.112</a></td>
<td><a href="http://84.235.77.113">84.235.77.113</a></td>
<td><a href="http://84.235.77.114">84.235.77.114</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.115">84.235.77.115</a></td>
<td><a href="http://84.235.77.116">84.235.77.116</a></td>
<td><a href="http://84.235.77.117">84.235.77.117</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.118">84.235.77.118</a></td>
<td><a href="http://84.235.77.119">84.235.77.119</a></td>
<td><a href="http://84.235.77.120">84.235.77.120</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.121">84.235.77.121</a></td>
<td><a href="http://84.235.77.122">84.235.77.122</a></td>
<td><a href="http://84.235.77.123">84.235.77.123</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.124">84.235.77.124</a></td>
<td><a href="http://84.235.77.125">84.235.77.125</a></td>
<td><a href="http://84.235.77.126">84.235.77.126</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.127">84.235.77.127</a></td>
<td><a href="http://84.235.77.128">84.235.77.128</a></td>
<td><a href="http://84.235.77.129">84.235.77.129</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.130">84.235.77.130</a></td>
<td><a href="http://84.235.77.131">84.235.77.131</a></td>
<td><a href="http://84.235.77.132">84.235.77.132</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.133">84.235.77.133</a></td>
<td><a href="http://84.235.77.134">84.235.77.134</a></td>
<td><a href="http://84.235.77.135">84.235.77.135</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.136">84.235.77.136</a></td>
<td><a href="http://84.235.77.137">84.235.77.137</a></td>
<td><a href="http://84.235.77.138">84.235.77.138</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.139">84.235.77.139</a></td>
<td><a href="http://84.235.77.140">84.235.77.140</a></td>
<td><a href="http://84.235.77.141">84.235.77.141</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.142">84.235.77.142</a></td>
<td><a href="http://84.235.77.143">84.235.77.143</a></td>
<td><a href="http://84.235.77.144">84.235.77.144</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.145">84.235.77.145</a></td>
<td><a href="http://84.235.77.146">84.235.77.146</a></td>
<td><a href="http://84.235.77.147">84.235.77.147</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.148">84.235.77.148</a></td>
<td><a href="http://84.235.77.149">84.235.77.149</a></td>
<td><a href="http://84.235.77.150">84.235.77.150</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.151">84.235.77.151</a></td>
<td><a href="http://84.235.77.152">84.235.77.152</a></td>
<td><a href="http://84.235.77.153">84.235.77.153</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.154">84.235.77.154</a></td>
<td><a href="http://84.235.77.155">84.235.77.155</a></td>
<td><a href="http://84.235.77.156">84.235.77.156</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.157">84.235.77.157</a></td>
<td><a href="http://84.235.77.158">84.235.77.158</a></td>
<td><a href="http://84.235.77.159">84.235.77.159</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.160">84.235.77.160</a></td>
<td><a href="http://84.235.77.161">84.235.77.161</a></td>
<td><a href="http://84.235.77.162">84.235.77.162</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.163">84.235.77.163</a></td>
<td><a href="http://84.235.77.164">84.235.77.164</a></td>
<td><a href="http://84.235.77.165">84.235.77.165</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.166">84.235.77.166</a></td>
<td><a href="http://84.235.77.167">84.235.77.167</a></td>
<td><a href="http://84.235.77.168">84.235.77.168</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.169">84.235.77.169</a></td>
<td><a href="http://84.235.77.170">84.235.77.170</a></td>
<td><a href="http://84.235.77.171">84.235.77.171</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.172">84.235.77.172</a></td>
<td><a href="http://84.235.77.173">84.235.77.173</a></td>
<td><a href="http://84.235.77.174">84.235.77.174</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.175">84.235.77.175</a></td>
<td><a href="http://84.235.77.176">84.235.77.176</a></td>
<td><a href="http://84.235.77.177">84.235.77.177</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.178">84.235.77.178</a></td>
<td><a href="http://84.235.77.179">84.235.77.179</a></td>
<td><a href="http://84.235.77.180">84.235.77.180</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.181">84.235.77.181</a></td>
<td><a href="http://84.235.77.182">84.235.77.182</a></td>
<td><a href="http://84.235.77.183">84.235.77.183</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.184">84.235.77.184</a></td>
<td><a href="http://84.235.77.185">84.235.77.185</a></td>
<td><a href="http://84.235.77.186">84.235.77.186</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.187">84.235.77.187</a></td>
<td><a href="http://84.235.77.188">84.235.77.188</a></td>
<td><a href="http://84.235.77.189">84.235.77.189</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.190">84.235.77.190</a></td>
<td><a href="http://84.235.77.191">84.235.77.191</a></td>
<td><a href="http://84.235.77.192">84.235.77.192</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.193">84.235.77.193</a></td>
<td><a href="http://84.235.77.194">84.235.77.194</a></td>
<td><a href="http://84.235.77.195">84.235.77.195</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.196">84.235.77.196</a></td>
<td><a href="http://84.235.77.197">84.235.77.197</a></td>
<td><a href="http://84.235.77.198">84.235.77.198</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.199">84.235.77.199</a></td>
<td><a href="http://84.235.77.200">84.235.77.200</a></td>
<td><a href="http://84.235.77.201">84.235.77.201</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.202">84.235.77.202</a></td>
<td><a href="http://84.235.77.203">84.235.77.203</a></td>
<td><a href="http://84.235.77.204">84.235.77.204</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.205">84.235.77.205</a></td>
<td><a href="http://84.235.77.206">84.235.77.206</a></td>
<td><a href="http://84.235.77.207">84.235.77.207</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.208">84.235.77.208</a></td>
<td><a href="http://84.235.77.209">84.235.77.209</a></td>
<td><a href="http://84.235.77.210">84.235.77.210</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.211">84.235.77.211</a></td>
<td><a href="http://84.235.77.212">84.235.77.212</a></td>
<td><a href="http://84.235.77.213">84.235.77.213</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.214">84.235.77.214</a></td>
<td><a href="http://84.235.77.215">84.235.77.215</a></td>
<td><a href="http://84.235.77.216">84.235.77.216</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.217">84.235.77.217</a></td>
<td><a href="http://84.235.77.218">84.235.77.218</a></td>
<td><a href="http://84.235.77.219">84.235.77.219</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.220">84.235.77.220</a></td>
<td><a href="http://84.235.77.221">84.235.77.221</a></td>
<td><a href="http://84.235.77.222">84.235.77.222</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.223">84.235.77.223</a></td>
<td><a href="http://84.235.77.224">84.235.77.224</a></td>
<td><a href="http://84.235.77.225">84.235.77.225</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.226">84.235.77.226</a></td>
<td><a href="http://84.235.77.227">84.235.77.227</a></td>
<td><a href="http://84.235.77.228">84.235.77.228</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.229">84.235.77.229</a></td>
<td><a href="http://84.235.77.230">84.235.77.230</a></td>
<td><a href="http://84.235.77.231">84.235.77.231</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.232">84.235.77.232</a></td>
<td><a href="http://84.235.77.233">84.235.77.233</a></td>
<td><a href="http://84.235.77.234">84.235.77.234</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.235">84.235.77.235</a></td>
<td><a href="http://84.235.77.236">84.235.77.236</a></td>
<td><a href="http://84.235.77.237">84.235.77.237</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.238">84.235.77.238</a></td>
<td><a href="http://84.235.77.239">84.235.77.239</a></td>
<td><a href="http://84.235.77.240">84.235.77.240</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.241">84.235.77.241</a></td>
<td><a href="http://84.235.77.242">84.235.77.242</a></td>
<td><a href="http://84.235.77.243">84.235.77.243</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.244">84.235.77.244</a></td>
<td><a href="http://84.235.77.245">84.235.77.245</a></td>
<td><a href="http://84.235.77.246">84.235.77.246</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.247">84.235.77.247</a></td>
<td><a href="http://84.235.77.248">84.235.77.248</a></td>
<td><a href="http://84.235.77.249">84.235.77.249</a></td>
</tr>
<tr>
<td><a href="http://84.235.77.250">84.235.77.250</a></td>
<td><a href="http://84.235.77.251">84.235.77.251</a></td>
<td> </td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Serbia</th>
</tr>
<tr>
<td><a href="http://213.240.44.5">213.240.44.5</a></td>
<td><a href="http://213.240.44.6">213.240.44.6</a></td>
<td><a href="http://213.240.44.7">213.240.44.7</a></td>
</tr>
<tr>
<td><a href="http://213.240.44.8">213.240.44.8</a></td>
<td><a href="http://213.240.44.9">213.240.44.9</a></td>
<td><a href="http://213.240.44.10">213.240.44.10</a></td>
</tr>
<tr>
<td><a href="http://213.240.44.11">213.240.44.11</a></td>
<td><a href="http://213.240.44.12">213.240.44.12</a></td>
<td><a href="http://213.240.44.13">213.240.44.13</a></td>
</tr>
<tr>
<td><a href="http://213.240.44.14">213.240.44.14</a></td>
<td><a href="http://213.240.44.15">213.240.44.15</a></td>
<td><a href="http://213.240.44.16">213.240.44.16</a></td>
</tr>
<tr>
<td><a href="http://213.240.44.17">213.240.44.17</a></td>
<td><a href="http://213.240.44.18">213.240.44.18</a></td>
<td><a href="http://213.240.44.19">213.240.44.19</a></td>
</tr>
<tr>
<td><a href="http://213.240.44.20">213.240.44.20</a></td>
<td><a href="http://213.240.44.21">213.240.44.21</a></td>
<td><a href="http://213.240.44.22">213.240.44.22</a></td>
</tr>
<tr>
<td><a href="http://213.240.44.23">213.240.44.23</a></td>
<td><a href="http://213.240.44.24">213.240.44.24</a></td>
<td><a href="http://213.240.44.25">213.240.44.25</a></td>
</tr>
<tr>
<td><a href="http://213.240.44.26">213.240.44.26</a></td>
<td><a href="http://213.240.44.27">213.240.44.27</a></td>
<td> </td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Singapore</th>
</tr>
<tr>
<td><a href="http://203.116.165.129">203.116.165.129</a></td>
<td><a href="http://203.116.165.130">203.116.165.130</a></td>
<td><a href="http://203.116.165.131">203.116.165.131</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.132">203.116.165.132</a></td>
<td><a href="http://203.116.165.133">203.116.165.133</a></td>
<td><a href="http://203.116.165.134">203.116.165.134</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.135">203.116.165.135</a></td>
<td><a href="http://203.116.165.136">203.116.165.136</a></td>
<td><a href="http://203.116.165.137">203.116.165.137</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.138">203.116.165.138</a></td>
<td><a href="http://203.116.165.139">203.116.165.139</a></td>
<td><a href="http://203.116.165.140">203.116.165.140</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.141">203.116.165.141</a></td>
<td><a href="http://203.116.165.142">203.116.165.142</a></td>
<td><a href="http://203.116.165.143">203.116.165.143</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.144">203.116.165.144</a></td>
<td><a href="http://203.116.165.145">203.116.165.145</a></td>
<td><a href="http://203.116.165.146">203.116.165.146</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.147">203.116.165.147</a></td>
<td><a href="http://203.116.165.148">203.116.165.148</a></td>
<td><a href="http://203.116.165.149">203.116.165.149</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.150">203.116.165.150</a></td>
<td><a href="http://203.116.165.151">203.116.165.151</a></td>
<td><a href="http://203.116.165.152">203.116.165.152</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.153">203.116.165.153</a></td>
<td><a href="http://203.116.165.154">203.116.165.154</a></td>
<td><a href="http://203.116.165.155">203.116.165.155</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.156">203.116.165.156</a></td>
<td><a href="http://203.116.165.157">203.116.165.157</a></td>
<td><a href="http://203.116.165.158">203.116.165.158</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.159">203.116.165.159</a></td>
<td><a href="http://203.116.165.160">203.116.165.160</a></td>
<td><a href="http://203.116.165.161">203.116.165.161</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.162">203.116.165.162</a></td>
<td><a href="http://203.116.165.163">203.116.165.163</a></td>
<td><a href="http://203.116.165.164">203.116.165.164</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.165">203.116.165.165</a></td>
<td><a href="http://203.116.165.166">203.116.165.166</a></td>
<td><a href="http://203.116.165.167">203.116.165.167</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.168">203.116.165.168</a></td>
<td><a href="http://203.116.165.169">203.116.165.169</a></td>
<td><a href="http://203.116.165.170">203.116.165.170</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.171">203.116.165.171</a></td>
<td><a href="http://203.116.165.172">203.116.165.172</a></td>
<td><a href="http://203.116.165.173">203.116.165.173</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.174">203.116.165.174</a></td>
<td><a href="http://203.116.165.175">203.116.165.175</a></td>
<td><a href="http://203.116.165.176">203.116.165.176</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.177">203.116.165.177</a></td>
<td><a href="http://203.116.165.178">203.116.165.178</a></td>
<td><a href="http://203.116.165.179">203.116.165.179</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.180">203.116.165.180</a></td>
<td><a href="http://203.116.165.181">203.116.165.181</a></td>
<td><a href="http://203.116.165.182">203.116.165.182</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.183">203.116.165.183</a></td>
<td><a href="http://203.116.165.184">203.116.165.184</a></td>
<td><a href="http://203.116.165.185">203.116.165.185</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.186">203.116.165.186</a></td>
<td><a href="http://203.116.165.187">203.116.165.187</a></td>
<td><a href="http://203.116.165.188">203.116.165.188</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.189">203.116.165.189</a></td>
<td><a href="http://203.116.165.190">203.116.165.190</a></td>
<td><a href="http://203.116.165.191">203.116.165.191</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.192">203.116.165.192</a></td>
<td><a href="http://203.116.165.193">203.116.165.193</a></td>
<td><a href="http://203.116.165.194">203.116.165.194</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.195">203.116.165.195</a></td>
<td><a href="http://203.116.165.196">203.116.165.196</a></td>
<td><a href="http://203.116.165.197">203.116.165.197</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.198">203.116.165.198</a></td>
<td><a href="http://203.116.165.199">203.116.165.199</a></td>
<td><a href="http://203.116.165.200">203.116.165.200</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.201">203.116.165.201</a></td>
<td><a href="http://203.116.165.202">203.116.165.202</a></td>
<td><a href="http://203.116.165.203">203.116.165.203</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.204">203.116.165.204</a></td>
<td><a href="http://203.116.165.205">203.116.165.205</a></td>
<td><a href="http://203.116.165.206">203.116.165.206</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.207">203.116.165.207</a></td>
<td><a href="http://203.116.165.208">203.116.165.208</a></td>
<td><a href="http://203.116.165.209">203.116.165.209</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.210">203.116.165.210</a></td>
<td><a href="http://203.116.165.211">203.116.165.211</a></td>
<td><a href="http://203.116.165.212">203.116.165.212</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.213">203.116.165.213</a></td>
<td><a href="http://203.116.165.214">203.116.165.214</a></td>
<td><a href="http://203.116.165.215">203.116.165.215</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.216">203.116.165.216</a></td>
<td><a href="http://203.116.165.217">203.116.165.217</a></td>
<td><a href="http://203.116.165.218">203.116.165.218</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.219">203.116.165.219</a></td>
<td><a href="http://203.116.165.220">203.116.165.220</a></td>
<td><a href="http://203.116.165.221">203.116.165.221</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.222">203.116.165.222</a></td>
<td><a href="http://203.116.165.223">203.116.165.223</a></td>
<td><a href="http://203.116.165.224">203.116.165.224</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.225">203.116.165.225</a></td>
<td><a href="http://203.116.165.226">203.116.165.226</a></td>
<td><a href="http://203.116.165.227">203.116.165.227</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.228">203.116.165.228</a></td>
<td><a href="http://203.116.165.229">203.116.165.229</a></td>
<td><a href="http://203.116.165.230">203.116.165.230</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.231">203.116.165.231</a></td>
<td><a href="http://203.116.165.232">203.116.165.232</a></td>
<td><a href="http://203.116.165.233">203.116.165.233</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.234">203.116.165.234</a></td>
<td><a href="http://203.116.165.235">203.116.165.235</a></td>
<td><a href="http://203.116.165.236">203.116.165.236</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.237">203.116.165.237</a></td>
<td><a href="http://203.116.165.238">203.116.165.238</a></td>
<td><a href="http://203.116.165.239">203.116.165.239</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.240">203.116.165.240</a></td>
<td><a href="http://203.116.165.241">203.116.165.241</a></td>
<td><a href="http://203.116.165.242">203.116.165.242</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.243">203.116.165.243</a></td>
<td><a href="http://203.116.165.244">203.116.165.244</a></td>
<td><a href="http://203.116.165.245">203.116.165.245</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.246">203.116.165.246</a></td>
<td><a href="http://203.116.165.247">203.116.165.247</a></td>
<td><a href="http://203.116.165.248">203.116.165.248</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.249">203.116.165.249</a></td>
<td><a href="http://203.116.165.250">203.116.165.250</a></td>
<td><a href="http://203.116.165.251">203.116.165.251</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.252">203.116.165.252</a></td>
<td><a href="http://203.116.165.253">203.116.165.253</a></td>
<td><a href="http://203.116.165.254">203.116.165.254</a></td>
</tr>
<tr>
<td><a href="http://203.116.165.255">203.116.165.255</a></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Singapore</th>
</tr>
<tr>
<td><a href="http://203.117.34.132">203.117.34.132</a></td>
<td><a href="http://203.117.34.133">203.117.34.133</a></td>
<td><a href="http://203.117.34.134">203.117.34.134</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.135">203.117.34.135</a></td>
<td><a href="http://203.117.34.136">203.117.34.136</a></td>
<td><a href="http://203.117.34.137">203.117.34.137</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.138">203.117.34.138</a></td>
<td><a href="http://203.117.34.139">203.117.34.139</a></td>
<td><a href="http://203.117.34.140">203.117.34.140</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.141">203.117.34.141</a></td>
<td><a href="http://203.117.34.142">203.117.34.142</a></td>
<td><a href="http://203.117.34.143">203.117.34.143</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.144">203.117.34.144</a></td>
<td><a href="http://203.117.34.145">203.117.34.145</a></td>
<td><a href="http://203.117.34.146">203.117.34.146</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.147">203.117.34.147</a></td>
<td><a href="http://203.117.34.148">203.117.34.148</a></td>
<td><a href="http://203.117.34.149">203.117.34.149</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.150">203.117.34.150</a></td>
<td><a href="http://203.117.34.151">203.117.34.151</a></td>
<td><a href="http://203.117.34.152">203.117.34.152</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.153">203.117.34.153</a></td>
<td><a href="http://203.117.34.154">203.117.34.154</a></td>
<td><a href="http://203.117.34.155">203.117.34.155</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.156">203.117.34.156</a></td>
<td><a href="http://203.117.34.157">203.117.34.157</a></td>
<td><a href="http://203.117.34.158">203.117.34.158</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.159">203.117.34.159</a></td>
<td><a href="http://203.117.34.160">203.117.34.160</a></td>
<td><a href="http://203.117.34.161">203.117.34.161</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.162">203.117.34.162</a></td>
<td><a href="http://203.117.34.163">203.117.34.163</a></td>
<td><a href="http://203.117.34.164">203.117.34.164</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.165">203.117.34.165</a></td>
<td><a href="http://203.117.34.166">203.117.34.166</a></td>
<td><a href="http://203.117.34.167">203.117.34.167</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.168">203.117.34.168</a></td>
<td><a href="http://203.117.34.169">203.117.34.169</a></td>
<td><a href="http://203.117.34.170">203.117.34.170</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.171">203.117.34.171</a></td>
<td><a href="http://203.117.34.172">203.117.34.172</a></td>
<td><a href="http://203.117.34.173">203.117.34.173</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.174">203.117.34.174</a></td>
<td><a href="http://203.117.34.175">203.117.34.175</a></td>
<td><a href="http://203.117.34.176">203.117.34.176</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.177">203.117.34.177</a></td>
<td><a href="http://203.117.34.178">203.117.34.178</a></td>
<td><a href="http://203.117.34.179">203.117.34.179</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.180">203.117.34.180</a></td>
<td><a href="http://203.117.34.181">203.117.34.181</a></td>
<td><a href="http://203.117.34.182">203.117.34.182</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.183">203.117.34.183</a></td>
<td><a href="http://203.117.34.184">203.117.34.184</a></td>
<td><a href="http://203.117.34.185">203.117.34.185</a></td>
</tr>
<tr>
<td><a href="http://203.117.34.186">203.117.34.186</a></td>
<td><a href="http://203.117.34.187">203.117.34.187</a></td>
<td> </td>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Slovakia</th>
</tr>
<tr>
<td><a href="http://62.197.198.193">62.197.198.193</a></td>
<td><a href="http://62.197.198.194">62.197.198.194</a></td>
<td><a href="http://62.197.198.195">62.197.198.195</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.196">62.197.198.196</a></td>
<td><a href="http://62.197.198.197">62.197.198.197</a></td>
<td><a href="http://62.197.198.198">62.197.198.198</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.199">62.197.198.199</a></td>
<td><a href="http://62.197.198.200">62.197.198.200</a></td>
<td><a href="http://62.197.198.201">62.197.198.201</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.202">62.197.198.202</a></td>
<td><a href="http://62.197.198.203">62.197.198.203</a></td>
<td><a href="http://62.197.198.204">62.197.198.204</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.205">62.197.198.205</a></td>
<td><a href="http://62.197.198.206">62.197.198.206</a></td>
<td><a href="http://62.197.198.207">62.197.198.207</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.208">62.197.198.208</a></td>
<td><a href="http://62.197.198.209">62.197.198.209</a></td>
<td><a href="http://62.197.198.210">62.197.198.210</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.211">62.197.198.211</a></td>
<td><a href="http://62.197.198.212">62.197.198.212</a></td>
<td><a href="http://62.197.198.213">62.197.198.213</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.214">62.197.198.214</a></td>
<td><a href="http://62.197.198.215">62.197.198.215</a></td>
<td><a href="http://62.197.198.216">62.197.198.216</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.217">62.197.198.217</a></td>
<td><a href="http://62.197.198.218">62.197.198.218</a></td>
<td><a href="http://62.197.198.219">62.197.198.219</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.220">62.197.198.220</a></td>
<td><a href="http://62.197.198.221">62.197.198.221</a></td>
<td><a href="http://62.197.198.222">62.197.198.222</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.223">62.197.198.223</a></td>
<td><a href="http://62.197.198.224">62.197.198.224</a></td>
<td><a href="http://62.197.198.225">62.197.198.225</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.226">62.197.198.226</a></td>
<td><a href="http://62.197.198.227">62.197.198.227</a></td>
<td><a href="http://62.197.198.228">62.197.198.228</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.229">62.197.198.229</a></td>
<td><a href="http://62.197.198.230">62.197.198.230</a></td>
<td><a href="http://62.197.198.231">62.197.198.231</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.232">62.197.198.232</a></td>
<td><a href="http://62.197.198.233">62.197.198.233</a></td>
<td><a href="http://62.197.198.234">62.197.198.234</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.235">62.197.198.235</a></td>
<td><a href="http://62.197.198.236">62.197.198.236</a></td>
<td><a href="http://62.197.198.237">62.197.198.237</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.238">62.197.198.238</a></td>
<td><a href="http://62.197.198.239">62.197.198.239</a></td>
<td><a href="http://62.197.198.240">62.197.198.240</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.241">62.197.198.241</a></td>
<td><a href="http://62.197.198.242">62.197.198.242</a></td>
<td><a href="http://62.197.198.243">62.197.198.243</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.244">62.197.198.244</a></td>
<td><a href="http://62.197.198.245">62.197.198.245</a></td>
<td><a href="http://62.197.198.246">62.197.198.246</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.247">62.197.198.247</a></td>
<td><a href="http://62.197.198.248">62.197.198.248</a></td>
<td><a href="http://62.197.198.249">62.197.198.249</a></td>
</tr>
<tr>
<td><a href="http://62.197.198.250">62.197.198.250</a></td>
<td><a href="http://62.197.198.251">62.197.198.251</a></td>
<td> </td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Slovakia</th>
</tr>
<tr>
<td><a href="http://87.244.198.161">87.244.198.161</a></td>
<td><a href="http://87.244.198.162">87.244.198.162</a></td>
<td><a href="http://87.244.198.163">87.244.198.163</a></td>
</tr>
<tr>
<td><a href="http://87.244.198.164">87.244.198.164</a></td>
<td><a href="http://87.244.198.165">87.244.198.165</a></td>
<td><a href="http://87.244.198.166">87.244.198.166</a></td>
</tr>
<tr>
<td><a href="http://87.244.198.167">87.244.198.167</a></td>
<td><a href="http://87.244.198.168">87.244.198.168</a></td>
<td><a href="http://87.244.198.169">87.244.198.169</a></td>
</tr>
<tr>
<td><a href="http://87.244.198.170">87.244.198.170</a></td>
<td><a href="http://87.244.198.171">87.244.198.171</a></td>
<td><a href="http://87.244.198.172">87.244.198.172</a></td>
</tr>
<tr>
<td><a href="http://87.244.198.173">87.244.198.173</a></td>
<td><a href="http://87.244.198.174">87.244.198.174</a></td>
<td><a href="http://87.244.198.175">87.244.198.175</a></td>
</tr>
<tr>
<td><a href="http://87.244.198.176">87.244.198.176</a></td>
<td><a href="http://87.244.198.177">87.244.198.177</a></td>
<td><a href="http://87.244.198.178">87.244.198.178</a></td>
</tr>
<tr>
<td><a href="http://87.244.198.179">87.244.198.179</a></td>
<td><a href="http://87.244.198.180">87.244.198.180</a></td>
<td><a href="http://87.244.198.181">87.244.198.181</a></td>
</tr>
<tr>
<td><a href="http://87.244.198.182">87.244.198.182</a></td>
<td><a href="http://87.244.198.183">87.244.198.183</a></td>
<td><a href="http://87.244.198.184">87.244.198.184</a></td>
</tr>
<tr>
<td><a href="http://87.244.198.185">87.244.198.185</a></td>
<td><a href="http://87.244.198.186">87.244.198.186</a></td>
<td><a href="http://87.244.198.187">87.244.198.187</a></td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Taiwan</th>
</tr>
<tr>
<td><a href="http://123.205.250.68">123.205.250.68</a></td>
<td><a href="http://123.205.250.69">123.205.250.69</a></td>
<td><a href="http://123.205.250.70">123.205.250.70</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.71">123.205.250.71</a></td>
<td><a href="http://123.205.250.72">123.205.250.72</a></td>
<td><a href="http://123.205.250.73">123.205.250.73</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.74">123.205.250.74</a></td>
<td><a href="http://123.205.250.75">123.205.250.75</a></td>
<td><a href="http://123.205.250.76">123.205.250.76</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.77">123.205.250.77</a></td>
<td><a href="http://123.205.250.78">123.205.250.78</a></td>
<td><a href="http://123.205.250.79">123.205.250.79</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.80">123.205.250.80</a></td>
<td><a href="http://123.205.250.81">123.205.250.81</a></td>
<td><a href="http://123.205.250.82">123.205.250.82</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.83">123.205.250.83</a></td>
<td><a href="http://123.205.250.84">123.205.250.84</a></td>
<td><a href="http://123.205.250.85">123.205.250.85</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.86">123.205.250.86</a></td>
<td><a href="http://123.205.250.87">123.205.250.87</a></td>
<td><a href="http://123.205.250.88">123.205.250.88</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.89">123.205.250.89</a></td>
<td><a href="http://123.205.250.90">123.205.250.90</a></td>
<td><a href="http://123.205.250.91">123.205.250.91</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.92">123.205.250.92</a></td>
<td><a href="http://123.205.250.93">123.205.250.93</a></td>
<td><a href="http://123.205.250.94">123.205.250.94</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.95">123.205.250.95</a></td>
<td><a href="http://123.205.250.96">123.205.250.96</a></td>
<td><a href="http://123.205.250.97">123.205.250.97</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.98">123.205.250.98</a></td>
<td><a href="http://123.205.250.99">123.205.250.99</a></td>
<td><a href="http://123.205.250.100">123.205.250.100</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.101">123.205.250.101</a></td>
<td><a href="http://123.205.250.102">123.205.250.102</a></td>
<td><a href="http://123.205.250.103">123.205.250.103</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.104">123.205.250.104</a></td>
<td><a href="http://123.205.250.105">123.205.250.105</a></td>
<td><a href="http://123.205.250.106">123.205.250.106</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.107">123.205.250.107</a></td>
<td><a href="http://123.205.250.108">123.205.250.108</a></td>
<td><a href="http://123.205.250.109">123.205.250.109</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.110">123.205.250.110</a></td>
<td><a href="http://123.205.250.111">123.205.250.111</a></td>
<td><a href="http://123.205.250.112">123.205.250.112</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.113">123.205.250.113</a></td>
<td><a href="http://123.205.250.114">123.205.250.114</a></td>
<td><a href="http://123.205.250.115">123.205.250.115</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.116">123.205.250.116</a></td>
<td><a href="http://123.205.250.117">123.205.250.117</a></td>
<td><a href="http://123.205.250.118">123.205.250.118</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.119">123.205.250.119</a></td>
<td><a href="http://123.205.250.120">123.205.250.120</a></td>
<td><a href="http://123.205.250.121">123.205.250.121</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.122">123.205.250.122</a></td>
<td><a href="http://123.205.250.123">123.205.250.123</a></td>
<td><a href="http://123.205.250.124">123.205.250.124</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.125">123.205.250.125</a></td>
<td><a href="http://123.205.250.126">123.205.250.126</a></td>
<td><a href="http://123.205.250.127">123.205.250.127</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.128">123.205.250.128</a></td>
<td><a href="http://123.205.250.129">123.205.250.129</a></td>
<td><a href="http://123.205.250.130">123.205.250.130</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.131">123.205.250.131</a></td>
<td><a href="http://123.205.250.132">123.205.250.132</a></td>
<td><a href="http://123.205.250.133">123.205.250.133</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.134">123.205.250.134</a></td>
<td><a href="http://123.205.250.135">123.205.250.135</a></td>
<td><a href="http://123.205.250.136">123.205.250.136</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.137">123.205.250.137</a></td>
<td><a href="http://123.205.250.138">123.205.250.138</a></td>
<td><a href="http://123.205.250.139">123.205.250.139</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.140">123.205.250.140</a></td>
<td><a href="http://123.205.250.141">123.205.250.141</a></td>
<td><a href="http://123.205.250.142">123.205.250.142</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.143">123.205.250.143</a></td>
<td><a href="http://123.205.250.144">123.205.250.144</a></td>
<td><a href="http://123.205.250.145">123.205.250.145</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.146">123.205.250.146</a></td>
<td><a href="http://123.205.250.147">123.205.250.147</a></td>
<td><a href="http://123.205.250.148">123.205.250.148</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.149">123.205.250.149</a></td>
<td><a href="http://123.205.250.150">123.205.250.150</a></td>
<td><a href="http://123.205.250.151">123.205.250.151</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.152">123.205.250.152</a></td>
<td><a href="http://123.205.250.153">123.205.250.153</a></td>
<td><a href="http://123.205.250.154">123.205.250.154</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.155">123.205.250.155</a></td>
<td><a href="http://123.205.250.156">123.205.250.156</a></td>
<td><a href="http://123.205.250.157">123.205.250.157</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.158">123.205.250.158</a></td>
<td><a href="http://123.205.250.159">123.205.250.159</a></td>
<td><a href="http://123.205.250.160">123.205.250.160</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.161">123.205.250.161</a></td>
<td><a href="http://123.205.250.162">123.205.250.162</a></td>
<td><a href="http://123.205.250.163">123.205.250.163</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.164">123.205.250.164</a></td>
<td><a href="http://123.205.250.165">123.205.250.165</a></td>
<td><a href="http://123.205.250.166">123.205.250.166</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.167">123.205.250.167</a></td>
<td><a href="http://123.205.250.168">123.205.250.168</a></td>
<td><a href="http://123.205.250.169">123.205.250.169</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.170">123.205.250.170</a></td>
<td><a href="http://123.205.250.171">123.205.250.171</a></td>
<td><a href="http://123.205.250.172">123.205.250.172</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.173">123.205.250.173</a></td>
<td><a href="http://123.205.250.174">123.205.250.174</a></td>
<td><a href="http://123.205.250.175">123.205.250.175</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.176">123.205.250.176</a></td>
<td><a href="http://123.205.250.177">123.205.250.177</a></td>
<td><a href="http://123.205.250.178">123.205.250.178</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.179">123.205.250.179</a></td>
<td><a href="http://123.205.250.180">123.205.250.180</a></td>
<td><a href="http://123.205.250.181">123.205.250.181</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.182">123.205.250.182</a></td>
<td><a href="http://123.205.250.183">123.205.250.183</a></td>
<td><a href="http://123.205.250.184">123.205.250.184</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.185">123.205.250.185</a></td>
<td><a href="http://123.205.250.186">123.205.250.186</a></td>
<td><a href="http://123.205.250.187">123.205.250.187</a></td>
</tr>
<tr>
<td><a href="http://123.205.250.188">123.205.250.188</a></td>
<td><a href="http://123.205.250.189">123.205.250.189</a></td>
<td><a href="http://123.205.250.190">123.205.250.190</a></td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Taiwan</th>
</tr>
<tr>
<td><a href="http://123.205.251.68">123.205.251.68</a></td>
<td><a href="http://123.205.251.69">123.205.251.69</a></td>
<td><a href="http://123.205.251.70">123.205.251.70</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.71">123.205.251.71</a></td>
<td><a href="http://123.205.251.72">123.205.251.72</a></td>
<td><a href="http://123.205.251.73">123.205.251.73</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.74">123.205.251.74</a></td>
<td><a href="http://123.205.251.75">123.205.251.75</a></td>
<td><a href="http://123.205.251.76">123.205.251.76</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.77">123.205.251.77</a></td>
<td><a href="http://123.205.251.78">123.205.251.78</a></td>
<td><a href="http://123.205.251.79">123.205.251.79</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.80">123.205.251.80</a></td>
<td><a href="http://123.205.251.81">123.205.251.81</a></td>
<td><a href="http://123.205.251.82">123.205.251.82</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.83">123.205.251.83</a></td>
<td><a href="http://123.205.251.84">123.205.251.84</a></td>
<td><a href="http://123.205.251.85">123.205.251.85</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.86">123.205.251.86</a></td>
<td><a href="http://123.205.251.87">123.205.251.87</a></td>
<td><a href="http://123.205.251.88">123.205.251.88</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.89">123.205.251.89</a></td>
<td><a href="http://123.205.251.90">123.205.251.90</a></td>
<td><a href="http://123.205.251.91">123.205.251.91</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.92">123.205.251.92</a></td>
<td><a href="http://123.205.251.93">123.205.251.93</a></td>
<td><a href="http://123.205.251.94">123.205.251.94</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.95">123.205.251.95</a></td>
<td><a href="http://123.205.251.96">123.205.251.96</a></td>
<td><a href="http://123.205.251.97">123.205.251.97</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.98">123.205.251.98</a></td>
<td><a href="http://123.205.251.99">123.205.251.99</a></td>
<td><a href="http://123.205.251.100">123.205.251.100</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.101">123.205.251.101</a></td>
<td><a href="http://123.205.251.102">123.205.251.102</a></td>
<td><a href="http://123.205.251.103">123.205.251.103</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.104">123.205.251.104</a></td>
<td><a href="http://123.205.251.105">123.205.251.105</a></td>
<td><a href="http://123.205.251.106">123.205.251.106</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.107">123.205.251.107</a></td>
<td><a href="http://123.205.251.108">123.205.251.108</a></td>
<td><a href="http://123.205.251.109">123.205.251.109</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.110">123.205.251.110</a></td>
<td><a href="http://123.205.251.111">123.205.251.111</a></td>
<td><a href="http://123.205.251.112">123.205.251.112</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.113">123.205.251.113</a></td>
<td><a href="http://123.205.251.114">123.205.251.114</a></td>
<td><a href="http://123.205.251.115">123.205.251.115</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.116">123.205.251.116</a></td>
<td><a href="http://123.205.251.117">123.205.251.117</a></td>
<td><a href="http://123.205.251.118">123.205.251.118</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.119">123.205.251.119</a></td>
<td><a href="http://123.205.251.120">123.205.251.120</a></td>
<td><a href="http://123.205.251.121">123.205.251.121</a></td>
</tr>
<tr>
<td><a href="http://123.205.251.122">123.205.251.122</a></td>
<td><a href="http://123.205.251.123">123.205.251.123</a></td>
<td> </td>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Taiwan</th>
</tr>
<tr>
<td><a href="http://163.28.116.1">163.28.116.1</a></td>
<td><a href="http://163.28.116.2">163.28.116.2</a></td>
<td><a href="http://163.28.116.3">163.28.116.3</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.4">163.28.116.4</a></td>
<td><a href="http://163.28.116.5">163.28.116.5</a></td>
<td><a href="http://163.28.116.6">163.28.116.6</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.7">163.28.116.7</a></td>
<td><a href="http://163.28.116.8">163.28.116.8</a></td>
<td><a href="http://163.28.116.9">163.28.116.9</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.10">163.28.116.10</a></td>
<td><a href="http://163.28.116.11">163.28.116.11</a></td>
<td><a href="http://163.28.116.12">163.28.116.12</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.13">163.28.116.13</a></td>
<td><a href="http://163.28.116.14">163.28.116.14</a></td>
<td><a href="http://163.28.116.15">163.28.116.15</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.16">163.28.116.16</a></td>
<td><a href="http://163.28.116.17">163.28.116.17</a></td>
<td><a href="http://163.28.116.18">163.28.116.18</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.19">163.28.116.19</a></td>
<td><a href="http://163.28.116.20">163.28.116.20</a></td>
<td><a href="http://163.28.116.21">163.28.116.21</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.22">163.28.116.22</a></td>
<td><a href="http://163.28.116.23">163.28.116.23</a></td>
<td><a href="http://163.28.116.24">163.28.116.24</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.25">163.28.116.25</a></td>
<td><a href="http://163.28.116.26">163.28.116.26</a></td>
<td><a href="http://163.28.116.27">163.28.116.27</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.28">163.28.116.28</a></td>
<td><a href="http://163.28.116.29">163.28.116.29</a></td>
<td><a href="http://163.28.116.30">163.28.116.30</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.31">163.28.116.31</a></td>
<td><a href="http://163.28.116.32">163.28.116.32</a></td>
<td><a href="http://163.28.116.33">163.28.116.33</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.34">163.28.116.34</a></td>
<td><a href="http://163.28.116.35">163.28.116.35</a></td>
<td><a href="http://163.28.116.36">163.28.116.36</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.37">163.28.116.37</a></td>
<td><a href="http://163.28.116.38">163.28.116.38</a></td>
<td><a href="http://163.28.116.39">163.28.116.39</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.40">163.28.116.40</a></td>
<td><a href="http://163.28.116.41">163.28.116.41</a></td>
<td><a href="http://163.28.116.42">163.28.116.42</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.43">163.28.116.43</a></td>
<td><a href="http://163.28.116.44">163.28.116.44</a></td>
<td><a href="http://163.28.116.45">163.28.116.45</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.46">163.28.116.46</a></td>
<td><a href="http://163.28.116.47">163.28.116.47</a></td>
<td><a href="http://163.28.116.48">163.28.116.48</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.49">163.28.116.49</a></td>
<td><a href="http://163.28.116.50">163.28.116.50</a></td>
<td><a href="http://163.28.116.51">163.28.116.51</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.52">163.28.116.52</a></td>
<td><a href="http://163.28.116.53">163.28.116.53</a></td>
<td><a href="http://163.28.116.54">163.28.116.54</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.55">163.28.116.55</a></td>
<td><a href="http://163.28.116.56">163.28.116.56</a></td>
<td><a href="http://163.28.116.57">163.28.116.57</a></td>
</tr>
<tr>
<td><a href="http://163.28.116.58">163.28.116.58</a></td>
<td><a href="http://163.28.116.59">163.28.116.59</a></td>
<td> </td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Taiwan</th>
</tr>
<tr>
<td><a href="http://163.28.83.143">163.28.83.143</a></td>
<td><a href="http://163.28.83.144">163.28.83.144</a></td>
<td><a href="http://163.28.83.145">163.28.83.145</a></td>
</tr>
<tr>
<td><a href="http://163.28.83.146">163.28.83.146</a></td>
<td><a href="http://163.28.83.147">163.28.83.147</a></td>
<td><a href="http://163.28.83.148">163.28.83.148</a></td>
</tr>
<tr>
<td><a href="http://163.28.83.149">163.28.83.149</a></td>
<td><a href="http://163.28.83.150">163.28.83.150</a></td>
<td><a href="http://163.28.83.151">163.28.83.151</a></td>
</tr>
<tr>
<td><a href="http://163.28.83.152">163.28.83.152</a></td>
<td><a href="http://163.28.83.153">163.28.83.153</a></td>
<td><a href="http://163.28.83.154">163.28.83.154</a></td>
</tr>
<tr>
<td><a href="http://163.28.83.155">163.28.83.155</a></td>
<td><a href="http://163.28.83.156">163.28.83.156</a></td>
<td><a href="http://163.28.83.157">163.28.83.157</a></td>
</tr>
<tr>
<td><a href="http://163.28.83.158">163.28.83.158</a></td>
<td><a href="http://163.28.83.159">163.28.83.159</a></td>
<td><a href="http://163.28.83.160">163.28.83.160</a></td>
</tr>
<tr>
<td><a href="http://163.28.83.161">163.28.83.161</a></td>
<td><a href="http://163.28.83.162">163.28.83.162</a></td>
<td><a href="http://163.28.83.163">163.28.83.163</a></td>
</tr>
<tr>
<td><a href="http://163.28.83.164">163.28.83.164</a></td>
<td><a href="http://163.28.83.165">163.28.83.165</a></td>
<td><a href="http://163.28.83.166">163.28.83.166</a></td>
</tr>
<tr>
<td><a href="http://163.28.83.167">163.28.83.167</a></td>
<td><a href="http://163.28.83.168">163.28.83.168</a></td>
<td><a href="http://163.28.83.169">163.28.83.169</a></td>
</tr>
<tr>
<td><a href="http://163.28.83.170">163.28.83.170</a></td>
<td><a href="http://163.28.83.171">163.28.83.171</a></td>
<td><a href="http://163.28.83.172">163.28.83.172</a></td>
</tr>
<tr>
<td><a href="http://163.28.83.173">163.28.83.173</a></td>
<td><a href="http://163.28.83.174">163.28.83.174</a></td>
<td><a href="http://163.28.83.175">163.28.83.175</a></td>
</tr>
<tr>
<td><a href="http://163.28.83.176">163.28.83.176</a></td>
<td><a href="http://163.28.83.177">163.28.83.177</a></td>
<td><a href="http://163.28.83.178">163.28.83.178</a></td>
</tr>
<tr>
<td><a href="http://163.28.83.179">163.28.83.179</a></td>
<td><a href="http://163.28.83.180">163.28.83.180</a></td>
<td><a href="http://163.28.83.181">163.28.83.181</a></td>
</tr>
<tr>
<td><a href="http://163.28.83.182">163.28.83.182</a></td>
<td><a href="http://163.28.83.183">163.28.83.183</a></td>
<td><a href="http://163.28.83.184">163.28.83.184</a></td>
</tr>
<tr>
<td><a href="http://163.28.83.185">163.28.83.185</a></td>
<td><a href="http://163.28.83.186">163.28.83.186</a></td>
<td><a href="http://163.28.83.187">163.28.83.187</a></td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Taiwan</th>
</tr>
<tr>
<td><a href="http://202.39.143.1">202.39.143.1</a></td>
<td><a href="http://202.39.143.2">202.39.143.2</a></td>
<td><a href="http://202.39.143.3">202.39.143.3</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.4">202.39.143.4</a></td>
<td><a href="http://202.39.143.5">202.39.143.5</a></td>
<td><a href="http://202.39.143.6">202.39.143.6</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.7">202.39.143.7</a></td>
<td><a href="http://202.39.143.8">202.39.143.8</a></td>
<td><a href="http://202.39.143.9">202.39.143.9</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.10">202.39.143.10</a></td>
<td><a href="http://202.39.143.11">202.39.143.11</a></td>
<td><a href="http://202.39.143.12">202.39.143.12</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.13">202.39.143.13</a></td>
<td><a href="http://202.39.143.14">202.39.143.14</a></td>
<td><a href="http://202.39.143.15">202.39.143.15</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.16">202.39.143.16</a></td>
<td><a href="http://202.39.143.17">202.39.143.17</a></td>
<td><a href="http://202.39.143.18">202.39.143.18</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.19">202.39.143.19</a></td>
<td><a href="http://202.39.143.20">202.39.143.20</a></td>
<td><a href="http://202.39.143.21">202.39.143.21</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.22">202.39.143.22</a></td>
<td><a href="http://202.39.143.23">202.39.143.23</a></td>
<td><a href="http://202.39.143.24">202.39.143.24</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.25">202.39.143.25</a></td>
<td><a href="http://202.39.143.26">202.39.143.26</a></td>
<td><a href="http://202.39.143.27">202.39.143.27</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.28">202.39.143.28</a></td>
<td><a href="http://202.39.143.29">202.39.143.29</a></td>
<td><a href="http://202.39.143.30">202.39.143.30</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.31">202.39.143.31</a></td>
<td><a href="http://202.39.143.32">202.39.143.32</a></td>
<td><a href="http://202.39.143.33">202.39.143.33</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.34">202.39.143.34</a></td>
<td><a href="http://202.39.143.35">202.39.143.35</a></td>
<td><a href="http://202.39.143.36">202.39.143.36</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.37">202.39.143.37</a></td>
<td><a href="http://202.39.143.38">202.39.143.38</a></td>
<td><a href="http://202.39.143.39">202.39.143.39</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.40">202.39.143.40</a></td>
<td><a href="http://202.39.143.41">202.39.143.41</a></td>
<td><a href="http://202.39.143.42">202.39.143.42</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.43">202.39.143.43</a></td>
<td><a href="http://202.39.143.44">202.39.143.44</a></td>
<td><a href="http://202.39.143.45">202.39.143.45</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.46">202.39.143.46</a></td>
<td><a href="http://202.39.143.47">202.39.143.47</a></td>
<td><a href="http://202.39.143.48">202.39.143.48</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.49">202.39.143.49</a></td>
<td><a href="http://202.39.143.50">202.39.143.50</a></td>
<td><a href="http://202.39.143.51">202.39.143.51</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.52">202.39.143.52</a></td>
<td><a href="http://202.39.143.53">202.39.143.53</a></td>
<td><a href="http://202.39.143.54">202.39.143.54</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.55">202.39.143.55</a></td>
<td><a href="http://202.39.143.56">202.39.143.56</a></td>
<td><a href="http://202.39.143.57">202.39.143.57</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.58">202.39.143.58</a></td>
<td><a href="http://202.39.143.59">202.39.143.59</a></td>
<td><a href="http://202.39.143.60">202.39.143.60</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.61">202.39.143.61</a></td>
<td><a href="http://202.39.143.62">202.39.143.62</a></td>
<td><a href="http://202.39.143.63">202.39.143.63</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.64">202.39.143.64</a></td>
<td><a href="http://202.39.143.65">202.39.143.65</a></td>
<td><a href="http://202.39.143.66">202.39.143.66</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.67">202.39.143.67</a></td>
<td><a href="http://202.39.143.68">202.39.143.68</a></td>
<td><a href="http://202.39.143.69">202.39.143.69</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.70">202.39.143.70</a></td>
<td><a href="http://202.39.143.71">202.39.143.71</a></td>
<td><a href="http://202.39.143.72">202.39.143.72</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.73">202.39.143.73</a></td>
<td><a href="http://202.39.143.74">202.39.143.74</a></td>
<td><a href="http://202.39.143.75">202.39.143.75</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.76">202.39.143.76</a></td>
<td><a href="http://202.39.143.77">202.39.143.77</a></td>
<td><a href="http://202.39.143.78">202.39.143.78</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.79">202.39.143.79</a></td>
<td><a href="http://202.39.143.80">202.39.143.80</a></td>
<td><a href="http://202.39.143.81">202.39.143.81</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.82">202.39.143.82</a></td>
<td><a href="http://202.39.143.83">202.39.143.83</a></td>
<td><a href="http://202.39.143.84">202.39.143.84</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.85">202.39.143.85</a></td>
<td><a href="http://202.39.143.86">202.39.143.86</a></td>
<td><a href="http://202.39.143.87">202.39.143.87</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.88">202.39.143.88</a></td>
<td><a href="http://202.39.143.89">202.39.143.89</a></td>
<td><a href="http://202.39.143.90">202.39.143.90</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.91">202.39.143.91</a></td>
<td><a href="http://202.39.143.92">202.39.143.92</a></td>
<td><a href="http://202.39.143.93">202.39.143.93</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.94">202.39.143.94</a></td>
<td><a href="http://202.39.143.95">202.39.143.95</a></td>
<td><a href="http://202.39.143.96">202.39.143.96</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.97">202.39.143.97</a></td>
<td><a href="http://202.39.143.98">202.39.143.98</a></td>
<td><a href="http://202.39.143.99">202.39.143.99</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.100">202.39.143.100</a></td>
<td><a href="http://202.39.143.101">202.39.143.101</a></td>
<td><a href="http://202.39.143.102">202.39.143.102</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.103">202.39.143.103</a></td>
<td><a href="http://202.39.143.104">202.39.143.104</a></td>
<td><a href="http://202.39.143.105">202.39.143.105</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.106">202.39.143.106</a></td>
<td><a href="http://202.39.143.107">202.39.143.107</a></td>
<td><a href="http://202.39.143.108">202.39.143.108</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.109">202.39.143.109</a></td>
<td><a href="http://202.39.143.110">202.39.143.110</a></td>
<td><a href="http://202.39.143.111">202.39.143.111</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.112">202.39.143.112</a></td>
<td><a href="http://202.39.143.113">202.39.143.113</a></td>
<td><a href="http://202.39.143.114">202.39.143.114</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.115">202.39.143.115</a></td>
<td><a href="http://202.39.143.116">202.39.143.116</a></td>
<td><a href="http://202.39.143.117">202.39.143.117</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.118">202.39.143.118</a></td>
<td><a href="http://202.39.143.119">202.39.143.119</a></td>
<td><a href="http://202.39.143.120">202.39.143.120</a></td>
</tr>
<tr>
<td><a href="http://202.39.143.121">202.39.143.121</a></td>
<td><a href="http://202.39.143.122">202.39.143.122</a></td>
<td><a href="http://202.39.143.123">202.39.143.123</a></td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Taiwan</th>
</tr>
<tr>
<td><a href="http://203.211.0.4">203.211.0.4</a></td>
<td><a href="http://203.211.0.5">203.211.0.5</a></td>
<td><a href="http://203.211.0.6">203.211.0.6</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.7">203.211.0.7</a></td>
<td><a href="http://203.211.0.8">203.211.0.8</a></td>
<td><a href="http://203.211.0.9">203.211.0.9</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.10">203.211.0.10</a></td>
<td><a href="http://203.211.0.11">203.211.0.11</a></td>
<td><a href="http://203.211.0.12">203.211.0.12</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.13">203.211.0.13</a></td>
<td><a href="http://203.211.0.14">203.211.0.14</a></td>
<td><a href="http://203.211.0.15">203.211.0.15</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.16">203.211.0.16</a></td>
<td><a href="http://203.211.0.17">203.211.0.17</a></td>
<td><a href="http://203.211.0.18">203.211.0.18</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.19">203.211.0.19</a></td>
<td><a href="http://203.211.0.20">203.211.0.20</a></td>
<td><a href="http://203.211.0.21">203.211.0.21</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.22">203.211.0.22</a></td>
<td><a href="http://203.211.0.23">203.211.0.23</a></td>
<td><a href="http://203.211.0.24">203.211.0.24</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.25">203.211.0.25</a></td>
<td><a href="http://203.211.0.26">203.211.0.26</a></td>
<td><a href="http://203.211.0.27">203.211.0.27</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.28">203.211.0.28</a></td>
<td><a href="http://203.211.0.29">203.211.0.29</a></td>
<td><a href="http://203.211.0.30">203.211.0.30</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.31">203.211.0.31</a></td>
<td><a href="http://203.211.0.32">203.211.0.32</a></td>
<td><a href="http://203.211.0.33">203.211.0.33</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.34">203.211.0.34</a></td>
<td><a href="http://203.211.0.35">203.211.0.35</a></td>
<td><a href="http://203.211.0.36">203.211.0.36</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.37">203.211.0.37</a></td>
<td><a href="http://203.211.0.38">203.211.0.38</a></td>
<td><a href="http://203.211.0.39">203.211.0.39</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.40">203.211.0.40</a></td>
<td><a href="http://203.211.0.41">203.211.0.41</a></td>
<td><a href="http://203.211.0.42">203.211.0.42</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.43">203.211.0.43</a></td>
<td><a href="http://203.211.0.44">203.211.0.44</a></td>
<td><a href="http://203.211.0.45">203.211.0.45</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.46">203.211.0.46</a></td>
<td><a href="http://203.211.0.47">203.211.0.47</a></td>
<td><a href="http://203.211.0.48">203.211.0.48</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.49">203.211.0.49</a></td>
<td><a href="http://203.211.0.50">203.211.0.50</a></td>
<td><a href="http://203.211.0.51">203.211.0.51</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.52">203.211.0.52</a></td>
<td><a href="http://203.211.0.53">203.211.0.53</a></td>
<td><a href="http://203.211.0.54">203.211.0.54</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.55">203.211.0.55</a></td>
<td><a href="http://203.211.0.56">203.211.0.56</a></td>
<td><a href="http://203.211.0.57">203.211.0.57</a></td>
</tr>
<tr>
<td><a href="http://203.211.0.58">203.211.0.58</a></td>
<td><a href="http://203.211.0.59">203.211.0.59</a></td>
<td> </td>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Taiwan</th>
</tr>
<tr>
<td><a href="http://203.66.124.129">203.66.124.129</a></td>
<td><a href="http://203.66.124.130">203.66.124.130</a></td>
<td><a href="http://203.66.124.131">203.66.124.131</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.132">203.66.124.132</a></td>
<td><a href="http://203.66.124.133">203.66.124.133</a></td>
<td><a href="http://203.66.124.134">203.66.124.134</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.135">203.66.124.135</a></td>
<td><a href="http://203.66.124.136">203.66.124.136</a></td>
<td><a href="http://203.66.124.137">203.66.124.137</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.138">203.66.124.138</a></td>
<td><a href="http://203.66.124.139">203.66.124.139</a></td>
<td><a href="http://203.66.124.140">203.66.124.140</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.141">203.66.124.141</a></td>
<td><a href="http://203.66.124.142">203.66.124.142</a></td>
<td><a href="http://203.66.124.143">203.66.124.143</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.144">203.66.124.144</a></td>
<td><a href="http://203.66.124.145">203.66.124.145</a></td>
<td><a href="http://203.66.124.146">203.66.124.146</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.147">203.66.124.147</a></td>
<td><a href="http://203.66.124.148">203.66.124.148</a></td>
<td><a href="http://203.66.124.149">203.66.124.149</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.150">203.66.124.150</a></td>
<td><a href="http://203.66.124.151">203.66.124.151</a></td>
<td><a href="http://203.66.124.152">203.66.124.152</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.153">203.66.124.153</a></td>
<td><a href="http://203.66.124.154">203.66.124.154</a></td>
<td><a href="http://203.66.124.155">203.66.124.155</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.156">203.66.124.156</a></td>
<td><a href="http://203.66.124.157">203.66.124.157</a></td>
<td><a href="http://203.66.124.158">203.66.124.158</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.159">203.66.124.159</a></td>
<td><a href="http://203.66.124.160">203.66.124.160</a></td>
<td><a href="http://203.66.124.161">203.66.124.161</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.162">203.66.124.162</a></td>
<td><a href="http://203.66.124.163">203.66.124.163</a></td>
<td><a href="http://203.66.124.164">203.66.124.164</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.165">203.66.124.165</a></td>
<td><a href="http://203.66.124.166">203.66.124.166</a></td>
<td><a href="http://203.66.124.167">203.66.124.167</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.168">203.66.124.168</a></td>
<td><a href="http://203.66.124.169">203.66.124.169</a></td>
<td><a href="http://203.66.124.170">203.66.124.170</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.171">203.66.124.171</a></td>
<td><a href="http://203.66.124.172">203.66.124.172</a></td>
<td><a href="http://203.66.124.173">203.66.124.173</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.174">203.66.124.174</a></td>
<td><a href="http://203.66.124.175">203.66.124.175</a></td>
<td><a href="http://203.66.124.176">203.66.124.176</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.177">203.66.124.177</a></td>
<td><a href="http://203.66.124.178">203.66.124.178</a></td>
<td><a href="http://203.66.124.179">203.66.124.179</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.180">203.66.124.180</a></td>
<td><a href="http://203.66.124.181">203.66.124.181</a></td>
<td><a href="http://203.66.124.182">203.66.124.182</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.183">203.66.124.183</a></td>
<td><a href="http://203.66.124.184">203.66.124.184</a></td>
<td><a href="http://203.66.124.185">203.66.124.185</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.186">203.66.124.186</a></td>
<td><a href="http://203.66.124.187">203.66.124.187</a></td>
<td><a href="http://203.66.124.188">203.66.124.188</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.189">203.66.124.189</a></td>
<td><a href="http://203.66.124.190">203.66.124.190</a></td>
<td><a href="http://203.66.124.191">203.66.124.191</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.192">203.66.124.192</a></td>
<td><a href="http://203.66.124.193">203.66.124.193</a></td>
<td><a href="http://203.66.124.194">203.66.124.194</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.195">203.66.124.195</a></td>
<td><a href="http://203.66.124.196">203.66.124.196</a></td>
<td><a href="http://203.66.124.197">203.66.124.197</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.198">203.66.124.198</a></td>
<td><a href="http://203.66.124.199">203.66.124.199</a></td>
<td><a href="http://203.66.124.200">203.66.124.200</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.201">203.66.124.201</a></td>
<td><a href="http://203.66.124.202">203.66.124.202</a></td>
<td><a href="http://203.66.124.203">203.66.124.203</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.204">203.66.124.204</a></td>
<td><a href="http://203.66.124.205">203.66.124.205</a></td>
<td><a href="http://203.66.124.206">203.66.124.206</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.207">203.66.124.207</a></td>
<td><a href="http://203.66.124.208">203.66.124.208</a></td>
<td><a href="http://203.66.124.209">203.66.124.209</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.210">203.66.124.210</a></td>
<td><a href="http://203.66.124.211">203.66.124.211</a></td>
<td><a href="http://203.66.124.212">203.66.124.212</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.213">203.66.124.213</a></td>
<td><a href="http://203.66.124.214">203.66.124.214</a></td>
<td><a href="http://203.66.124.215">203.66.124.215</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.216">203.66.124.216</a></td>
<td><a href="http://203.66.124.217">203.66.124.217</a></td>
<td><a href="http://203.66.124.218">203.66.124.218</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.219">203.66.124.219</a></td>
<td><a href="http://203.66.124.220">203.66.124.220</a></td>
<td><a href="http://203.66.124.221">203.66.124.221</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.222">203.66.124.222</a></td>
<td><a href="http://203.66.124.223">203.66.124.223</a></td>
<td><a href="http://203.66.124.224">203.66.124.224</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.225">203.66.124.225</a></td>
<td><a href="http://203.66.124.226">203.66.124.226</a></td>
<td><a href="http://203.66.124.227">203.66.124.227</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.228">203.66.124.228</a></td>
<td><a href="http://203.66.124.229">203.66.124.229</a></td>
<td><a href="http://203.66.124.230">203.66.124.230</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.231">203.66.124.231</a></td>
<td><a href="http://203.66.124.232">203.66.124.232</a></td>
<td><a href="http://203.66.124.233">203.66.124.233</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.234">203.66.124.234</a></td>
<td><a href="http://203.66.124.235">203.66.124.235</a></td>
<td><a href="http://203.66.124.236">203.66.124.236</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.237">203.66.124.237</a></td>
<td><a href="http://203.66.124.238">203.66.124.238</a></td>
<td><a href="http://203.66.124.239">203.66.124.239</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.240">203.66.124.240</a></td>
<td><a href="http://203.66.124.241">203.66.124.241</a></td>
<td><a href="http://203.66.124.242">203.66.124.242</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.243">203.66.124.243</a></td>
<td><a href="http://203.66.124.244">203.66.124.244</a></td>
<td><a href="http://203.66.124.245">203.66.124.245</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.246">203.66.124.246</a></td>
<td><a href="http://203.66.124.247">203.66.124.247</a></td>
<td><a href="http://203.66.124.248">203.66.124.248</a></td>
</tr>
<tr>
<td><a href="http://203.66.124.249">203.66.124.249</a></td>
<td><a href="http://203.66.124.250">203.66.124.250</a></td>
<td><a href="http://203.66.124.251">203.66.124.251</a></td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Taiwan</th>
</tr>
<tr>
<td><a href="http://210.61.221.65">210.61.221.65</a></td>
<td><a href="http://210.61.221.66">210.61.221.66</a></td>
<td><a href="http://210.61.221.67">210.61.221.67</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.68">210.61.221.68</a></td>
<td><a href="http://210.61.221.69">210.61.221.69</a></td>
<td><a href="http://210.61.221.70">210.61.221.70</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.71">210.61.221.71</a></td>
<td><a href="http://210.61.221.72">210.61.221.72</a></td>
<td><a href="http://210.61.221.73">210.61.221.73</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.74">210.61.221.74</a></td>
<td><a href="http://210.61.221.75">210.61.221.75</a></td>
<td><a href="http://210.61.221.76">210.61.221.76</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.77">210.61.221.77</a></td>
<td><a href="http://210.61.221.78">210.61.221.78</a></td>
<td><a href="http://210.61.221.79">210.61.221.79</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.80">210.61.221.80</a></td>
<td><a href="http://210.61.221.81">210.61.221.81</a></td>
<td><a href="http://210.61.221.82">210.61.221.82</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.83">210.61.221.83</a></td>
<td><a href="http://210.61.221.84">210.61.221.84</a></td>
<td><a href="http://210.61.221.85">210.61.221.85</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.86">210.61.221.86</a></td>
<td><a href="http://210.61.221.87">210.61.221.87</a></td>
<td><a href="http://210.61.221.88">210.61.221.88</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.89">210.61.221.89</a></td>
<td><a href="http://210.61.221.90">210.61.221.90</a></td>
<td><a href="http://210.61.221.91">210.61.221.91</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.92">210.61.221.92</a></td>
<td><a href="http://210.61.221.93">210.61.221.93</a></td>
<td><a href="http://210.61.221.94">210.61.221.94</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.95">210.61.221.95</a></td>
<td><a href="http://210.61.221.96">210.61.221.96</a></td>
<td><a href="http://210.61.221.97">210.61.221.97</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.98">210.61.221.98</a></td>
<td><a href="http://210.61.221.99">210.61.221.99</a></td>
<td><a href="http://210.61.221.100">210.61.221.100</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.101">210.61.221.101</a></td>
<td><a href="http://210.61.221.102">210.61.221.102</a></td>
<td><a href="http://210.61.221.103">210.61.221.103</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.104">210.61.221.104</a></td>
<td><a href="http://210.61.221.105">210.61.221.105</a></td>
<td><a href="http://210.61.221.106">210.61.221.106</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.107">210.61.221.107</a></td>
<td><a href="http://210.61.221.108">210.61.221.108</a></td>
<td><a href="http://210.61.221.109">210.61.221.109</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.110">210.61.221.110</a></td>
<td><a href="http://210.61.221.111">210.61.221.111</a></td>
<td><a href="http://210.61.221.112">210.61.221.112</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.113">210.61.221.113</a></td>
<td><a href="http://210.61.221.114">210.61.221.114</a></td>
<td><a href="http://210.61.221.115">210.61.221.115</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.116">210.61.221.116</a></td>
<td><a href="http://210.61.221.117">210.61.221.117</a></td>
<td><a href="http://210.61.221.118">210.61.221.118</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.119">210.61.221.119</a></td>
<td><a href="http://210.61.221.120">210.61.221.120</a></td>
<td><a href="http://210.61.221.121">210.61.221.121</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.122">210.61.221.122</a></td>
<td><a href="http://210.61.221.123">210.61.221.123</a></td>
<td><a href="http://210.61.221.124">210.61.221.124</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.125">210.61.221.125</a></td>
<td><a href="http://210.61.221.126">210.61.221.126</a></td>
<td><a href="http://210.61.221.127">210.61.221.127</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.128">210.61.221.128</a></td>
<td><a href="http://210.61.221.129">210.61.221.129</a></td>
<td><a href="http://210.61.221.130">210.61.221.130</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.131">210.61.221.131</a></td>
<td><a href="http://210.61.221.132">210.61.221.132</a></td>
<td><a href="http://210.61.221.133">210.61.221.133</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.134">210.61.221.134</a></td>
<td><a href="http://210.61.221.135">210.61.221.135</a></td>
<td><a href="http://210.61.221.136">210.61.221.136</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.137">210.61.221.137</a></td>
<td><a href="http://210.61.221.138">210.61.221.138</a></td>
<td><a href="http://210.61.221.139">210.61.221.139</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.140">210.61.221.140</a></td>
<td><a href="http://210.61.221.141">210.61.221.141</a></td>
<td><a href="http://210.61.221.142">210.61.221.142</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.143">210.61.221.143</a></td>
<td><a href="http://210.61.221.144">210.61.221.144</a></td>
<td><a href="http://210.61.221.145">210.61.221.145</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.146">210.61.221.146</a></td>
<td><a href="http://210.61.221.147">210.61.221.147</a></td>
<td><a href="http://210.61.221.148">210.61.221.148</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.149">210.61.221.149</a></td>
<td><a href="http://210.61.221.150">210.61.221.150</a></td>
<td><a href="http://210.61.221.151">210.61.221.151</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.152">210.61.221.152</a></td>
<td><a href="http://210.61.221.153">210.61.221.153</a></td>
<td><a href="http://210.61.221.154">210.61.221.154</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.155">210.61.221.155</a></td>
<td><a href="http://210.61.221.156">210.61.221.156</a></td>
<td><a href="http://210.61.221.157">210.61.221.157</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.158">210.61.221.158</a></td>
<td><a href="http://210.61.221.159">210.61.221.159</a></td>
<td><a href="http://210.61.221.160">210.61.221.160</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.161">210.61.221.161</a></td>
<td><a href="http://210.61.221.162">210.61.221.162</a></td>
<td><a href="http://210.61.221.163">210.61.221.163</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.164">210.61.221.164</a></td>
<td><a href="http://210.61.221.165">210.61.221.165</a></td>
<td><a href="http://210.61.221.166">210.61.221.166</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.167">210.61.221.167</a></td>
<td><a href="http://210.61.221.168">210.61.221.168</a></td>
<td><a href="http://210.61.221.169">210.61.221.169</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.170">210.61.221.170</a></td>
<td><a href="http://210.61.221.171">210.61.221.171</a></td>
<td><a href="http://210.61.221.172">210.61.221.172</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.173">210.61.221.173</a></td>
<td><a href="http://210.61.221.174">210.61.221.174</a></td>
<td><a href="http://210.61.221.175">210.61.221.175</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.176">210.61.221.176</a></td>
<td><a href="http://210.61.221.177">210.61.221.177</a></td>
<td><a href="http://210.61.221.178">210.61.221.178</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.179">210.61.221.179</a></td>
<td><a href="http://210.61.221.180">210.61.221.180</a></td>
<td><a href="http://210.61.221.181">210.61.221.181</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.182">210.61.221.182</a></td>
<td><a href="http://210.61.221.183">210.61.221.183</a></td>
<td><a href="http://210.61.221.184">210.61.221.184</a></td>
</tr>
<tr>
<td><a href="http://210.61.221.185">210.61.221.185</a></td>
<td><a href="http://210.61.221.186">210.61.221.186</a></td>
<td><a href="http://210.61.221.187">210.61.221.187</a></td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Taiwan</th>
</tr>
<tr>
<td><a href="http://60.199.175.1">60.199.175.1</a></td>
<td><a href="http://60.199.175.2">60.199.175.2</a></td>
<td><a href="http://60.199.175.3">60.199.175.3</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.4">60.199.175.4</a></td>
<td><a href="http://60.199.175.5">60.199.175.5</a></td>
<td><a href="http://60.199.175.6">60.199.175.6</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.7">60.199.175.7</a></td>
<td><a href="http://60.199.175.8">60.199.175.8</a></td>
<td><a href="http://60.199.175.9">60.199.175.9</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.10">60.199.175.10</a></td>
<td><a href="http://60.199.175.11">60.199.175.11</a></td>
<td><a href="http://60.199.175.12">60.199.175.12</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.13">60.199.175.13</a></td>
<td><a href="http://60.199.175.14">60.199.175.14</a></td>
<td><a href="http://60.199.175.15">60.199.175.15</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.16">60.199.175.16</a></td>
<td><a href="http://60.199.175.17">60.199.175.17</a></td>
<td><a href="http://60.199.175.18">60.199.175.18</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.19">60.199.175.19</a></td>
<td><a href="http://60.199.175.20">60.199.175.20</a></td>
<td><a href="http://60.199.175.21">60.199.175.21</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.22">60.199.175.22</a></td>
<td><a href="http://60.199.175.23">60.199.175.23</a></td>
<td><a href="http://60.199.175.24">60.199.175.24</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.25">60.199.175.25</a></td>
<td><a href="http://60.199.175.26">60.199.175.26</a></td>
<td><a href="http://60.199.175.27">60.199.175.27</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.28">60.199.175.28</a></td>
<td><a href="http://60.199.175.29">60.199.175.29</a></td>
<td><a href="http://60.199.175.30">60.199.175.30</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.31">60.199.175.31</a></td>
<td><a href="http://60.199.175.32">60.199.175.32</a></td>
<td><a href="http://60.199.175.33">60.199.175.33</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.34">60.199.175.34</a></td>
<td><a href="http://60.199.175.35">60.199.175.35</a></td>
<td><a href="http://60.199.175.36">60.199.175.36</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.37">60.199.175.37</a></td>
<td><a href="http://60.199.175.38">60.199.175.38</a></td>
<td><a href="http://60.199.175.39">60.199.175.39</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.40">60.199.175.40</a></td>
<td><a href="http://60.199.175.41">60.199.175.41</a></td>
<td><a href="http://60.199.175.42">60.199.175.42</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.43">60.199.175.43</a></td>
<td><a href="http://60.199.175.44">60.199.175.44</a></td>
<td><a href="http://60.199.175.45">60.199.175.45</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.46">60.199.175.46</a></td>
<td><a href="http://60.199.175.47">60.199.175.47</a></td>
<td><a href="http://60.199.175.48">60.199.175.48</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.49">60.199.175.49</a></td>
<td><a href="http://60.199.175.50">60.199.175.50</a></td>
<td><a href="http://60.199.175.51">60.199.175.51</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.52">60.199.175.52</a></td>
<td><a href="http://60.199.175.53">60.199.175.53</a></td>
<td><a href="http://60.199.175.54">60.199.175.54</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.55">60.199.175.55</a></td>
<td><a href="http://60.199.175.56">60.199.175.56</a></td>
<td><a href="http://60.199.175.57">60.199.175.57</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.58">60.199.175.58</a></td>
<td><a href="http://60.199.175.59">60.199.175.59</a></td>
<td><a href="http://60.199.175.60">60.199.175.60</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.61">60.199.175.61</a></td>
<td><a href="http://60.199.175.62">60.199.175.62</a></td>
<td><a href="http://60.199.175.63">60.199.175.63</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.64">60.199.175.64</a></td>
<td><a href="http://60.199.175.65">60.199.175.65</a></td>
<td><a href="http://60.199.175.66">60.199.175.66</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.67">60.199.175.67</a></td>
<td><a href="http://60.199.175.68">60.199.175.68</a></td>
<td><a href="http://60.199.175.69">60.199.175.69</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.70">60.199.175.70</a></td>
<td><a href="http://60.199.175.71">60.199.175.71</a></td>
<td><a href="http://60.199.175.72">60.199.175.72</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.73">60.199.175.73</a></td>
<td><a href="http://60.199.175.74">60.199.175.74</a></td>
<td><a href="http://60.199.175.75">60.199.175.75</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.76">60.199.175.76</a></td>
<td><a href="http://60.199.175.77">60.199.175.77</a></td>
<td><a href="http://60.199.175.78">60.199.175.78</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.79">60.199.175.79</a></td>
<td><a href="http://60.199.175.80">60.199.175.80</a></td>
<td><a href="http://60.199.175.81">60.199.175.81</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.82">60.199.175.82</a></td>
<td><a href="http://60.199.175.83">60.199.175.83</a></td>
<td><a href="http://60.199.175.84">60.199.175.84</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.85">60.199.175.85</a></td>
<td><a href="http://60.199.175.86">60.199.175.86</a></td>
<td><a href="http://60.199.175.87">60.199.175.87</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.88">60.199.175.88</a></td>
<td><a href="http://60.199.175.89">60.199.175.89</a></td>
<td><a href="http://60.199.175.90">60.199.175.90</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.91">60.199.175.91</a></td>
<td><a href="http://60.199.175.92">60.199.175.92</a></td>
<td><a href="http://60.199.175.93">60.199.175.93</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.94">60.199.175.94</a></td>
<td><a href="http://60.199.175.95">60.199.175.95</a></td>
<td><a href="http://60.199.175.96">60.199.175.96</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.97">60.199.175.97</a></td>
<td><a href="http://60.199.175.98">60.199.175.98</a></td>
<td><a href="http://60.199.175.99">60.199.175.99</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.100">60.199.175.100</a></td>
<td><a href="http://60.199.175.101">60.199.175.101</a></td>
<td><a href="http://60.199.175.102">60.199.175.102</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.103">60.199.175.103</a></td>
<td><a href="http://60.199.175.104">60.199.175.104</a></td>
<td><a href="http://60.199.175.105">60.199.175.105</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.106">60.199.175.106</a></td>
<td><a href="http://60.199.175.107">60.199.175.107</a></td>
<td><a href="http://60.199.175.108">60.199.175.108</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.109">60.199.175.109</a></td>
<td><a href="http://60.199.175.110">60.199.175.110</a></td>
<td><a href="http://60.199.175.111">60.199.175.111</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.112">60.199.175.112</a></td>
<td><a href="http://60.199.175.113">60.199.175.113</a></td>
<td><a href="http://60.199.175.114">60.199.175.114</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.115">60.199.175.115</a></td>
<td><a href="http://60.199.175.116">60.199.175.116</a></td>
<td><a href="http://60.199.175.117">60.199.175.117</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.118">60.199.175.118</a></td>
<td><a href="http://60.199.175.119">60.199.175.119</a></td>
<td><a href="http://60.199.175.120">60.199.175.120</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.121">60.199.175.121</a></td>
<td><a href="http://60.199.175.122">60.199.175.122</a></td>
<td><a href="http://60.199.175.123">60.199.175.123</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.124">60.199.175.124</a></td>
<td><a href="http://60.199.175.125">60.199.175.125</a></td>
<td><a href="http://60.199.175.126">60.199.175.126</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.127">60.199.175.127</a></td>
<td><a href="http://60.199.175.128">60.199.175.128</a></td>
<td><a href="http://60.199.175.129">60.199.175.129</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.130">60.199.175.130</a></td>
<td><a href="http://60.199.175.131">60.199.175.131</a></td>
<td><a href="http://60.199.175.132">60.199.175.132</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.133">60.199.175.133</a></td>
<td><a href="http://60.199.175.134">60.199.175.134</a></td>
<td><a href="http://60.199.175.135">60.199.175.135</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.136">60.199.175.136</a></td>
<td><a href="http://60.199.175.137">60.199.175.137</a></td>
<td><a href="http://60.199.175.138">60.199.175.138</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.139">60.199.175.139</a></td>
<td><a href="http://60.199.175.140">60.199.175.140</a></td>
<td><a href="http://60.199.175.141">60.199.175.141</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.142">60.199.175.142</a></td>
<td><a href="http://60.199.175.143">60.199.175.143</a></td>
<td><a href="http://60.199.175.144">60.199.175.144</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.145">60.199.175.145</a></td>
<td><a href="http://60.199.175.146">60.199.175.146</a></td>
<td><a href="http://60.199.175.147">60.199.175.147</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.148">60.199.175.148</a></td>
<td><a href="http://60.199.175.149">60.199.175.149</a></td>
<td><a href="http://60.199.175.150">60.199.175.150</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.151">60.199.175.151</a></td>
<td><a href="http://60.199.175.152">60.199.175.152</a></td>
<td><a href="http://60.199.175.153">60.199.175.153</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.154">60.199.175.154</a></td>
<td><a href="http://60.199.175.155">60.199.175.155</a></td>
<td><a href="http://60.199.175.156">60.199.175.156</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.157">60.199.175.157</a></td>
<td><a href="http://60.199.175.158">60.199.175.158</a></td>
<td><a href="http://60.199.175.159">60.199.175.159</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.160">60.199.175.160</a></td>
<td><a href="http://60.199.175.161">60.199.175.161</a></td>
<td><a href="http://60.199.175.162">60.199.175.162</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.163">60.199.175.163</a></td>
<td><a href="http://60.199.175.164">60.199.175.164</a></td>
<td><a href="http://60.199.175.165">60.199.175.165</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.166">60.199.175.166</a></td>
<td><a href="http://60.199.175.167">60.199.175.167</a></td>
<td><a href="http://60.199.175.168">60.199.175.168</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.169">60.199.175.169</a></td>
<td><a href="http://60.199.175.170">60.199.175.170</a></td>
<td><a href="http://60.199.175.171">60.199.175.171</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.172">60.199.175.172</a></td>
<td><a href="http://60.199.175.173">60.199.175.173</a></td>
<td><a href="http://60.199.175.174">60.199.175.174</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.175">60.199.175.175</a></td>
<td><a href="http://60.199.175.176">60.199.175.176</a></td>
<td><a href="http://60.199.175.177">60.199.175.177</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.178">60.199.175.178</a></td>
<td><a href="http://60.199.175.179">60.199.175.179</a></td>
<td><a href="http://60.199.175.180">60.199.175.180</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.181">60.199.175.181</a></td>
<td><a href="http://60.199.175.182">60.199.175.182</a></td>
<td><a href="http://60.199.175.183">60.199.175.183</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.184">60.199.175.184</a></td>
<td><a href="http://60.199.175.185">60.199.175.185</a></td>
<td><a href="http://60.199.175.186">60.199.175.186</a></td>
</tr>
<tr>
<td><a href="http://60.199.175.187">60.199.175.187</a></td>
<td colspan="2"></td>
</tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Taiwan</th>
</tr>
<tr>
<td><a href="http://61.219.131.65">61.219.131.65</a></td>
<td><a href="http://61.219.131.66">61.219.131.66</a></td>
<td><a href="http://61.219.131.67">61.219.131.67</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.68">61.219.131.68</a></td>
<td><a href="http://61.219.131.69">61.219.131.69</a></td>
<td><a href="http://61.219.131.70">61.219.131.70</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.71">61.219.131.71</a></td>
<td><a href="http://61.219.131.72">61.219.131.72</a></td>
<td><a href="http://61.219.131.73">61.219.131.73</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.74">61.219.131.74</a></td>
<td><a href="http://61.219.131.75">61.219.131.75</a></td>
<td><a href="http://61.219.131.76">61.219.131.76</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.77">61.219.131.77</a></td>
<td><a href="http://61.219.131.78">61.219.131.78</a></td>
<td><a href="http://61.219.131.79">61.219.131.79</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.80">61.219.131.80</a></td>
<td><a href="http://61.219.131.81">61.219.131.81</a></td>
<td><a href="http://61.219.131.82">61.219.131.82</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.83">61.219.131.83</a></td>
<td><a href="http://61.219.131.84">61.219.131.84</a></td>
<td><a href="http://61.219.131.85">61.219.131.85</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.86">61.219.131.86</a></td>
<td><a href="http://61.219.131.87">61.219.131.87</a></td>
<td><a href="http://61.219.131.88">61.219.131.88</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.89">61.219.131.89</a></td>
<td><a href="http://61.219.131.90">61.219.131.90</a></td>
<td><a href="http://61.219.131.91">61.219.131.91</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.92">61.219.131.92</a></td>
<td><a href="http://61.219.131.93">61.219.131.93</a></td>
<td><a href="http://61.219.131.94">61.219.131.94</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.95">61.219.131.95</a></td>
<td><a href="http://61.219.131.96">61.219.131.96</a></td>
<td><a href="http://61.219.131.97">61.219.131.97</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.98">61.219.131.98</a></td>
<td><a href="http://61.219.131.99">61.219.131.99</a></td>
<td><a href="http://61.219.131.100">61.219.131.100</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.101">61.219.131.101</a></td>
<td><a href="http://61.219.131.102">61.219.131.102</a></td>
<td><a href="http://61.219.131.103">61.219.131.103</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.104">61.219.131.104</a></td>
<td><a href="http://61.219.131.105">61.219.131.105</a></td>
<td><a href="http://61.219.131.106">61.219.131.106</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.107">61.219.131.107</a></td>
<td><a href="http://61.219.131.108">61.219.131.108</a></td>
<td><a href="http://61.219.131.109">61.219.131.109</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.110">61.219.131.110</a></td>
<td><a href="http://61.219.131.111">61.219.131.111</a></td>
<td><a href="http://61.219.131.112">61.219.131.112</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.113">61.219.131.113</a></td>
<td><a href="http://61.219.131.114">61.219.131.114</a></td>
<td><a href="http://61.219.131.115">61.219.131.115</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.116">61.219.131.116</a></td>
<td><a href="http://61.219.131.117">61.219.131.117</a></td>
<td><a href="http://61.219.131.118">61.219.131.118</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.119">61.219.131.119</a></td>
<td><a href="http://61.219.131.120">61.219.131.120</a></td>
<td><a href="http://61.219.131.121">61.219.131.121</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.122">61.219.131.122</a></td>
<td><a href="http://61.219.131.123">61.219.131.123</a></td>
<td><a href="http://61.219.131.193">61.219.131.193</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.194">61.219.131.194</a></td>
<td><a href="http://61.219.131.195">61.219.131.195</a></td>
<td><a href="http://61.219.131.196">61.219.131.196</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.197">61.219.131.197</a></td>
<td><a href="http://61.219.131.198">61.219.131.198</a></td>
<td><a href="http://61.219.131.199">61.219.131.199</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.200">61.219.131.200</a></td>
<td><a href="http://61.219.131.201">61.219.131.201</a></td>
<td><a href="http://61.219.131.202">61.219.131.202</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.203">61.219.131.203</a></td>
<td><a href="http://61.219.131.204">61.219.131.204</a></td>
<td><a href="http://61.219.131.205">61.219.131.205</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.206">61.219.131.206</a></td>
<td><a href="http://61.219.131.207">61.219.131.207</a></td>
<td><a href="http://61.219.131.208">61.219.131.208</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.209">61.219.131.209</a></td>
<td><a href="http://61.219.131.210">61.219.131.210</a></td>
<td><a href="http://61.219.131.211">61.219.131.211</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.212">61.219.131.212</a></td>
<td><a href="http://61.219.131.213">61.219.131.213</a></td>
<td><a href="http://61.219.131.214">61.219.131.214</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.215">61.219.131.215</a></td>
<td><a href="http://61.219.131.216">61.219.131.216</a></td>
<td><a href="http://61.219.131.217">61.219.131.217</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.218">61.219.131.218</a></td>
<td><a href="http://61.219.131.219">61.219.131.219</a></td>
<td><a href="http://61.219.131.220">61.219.131.220</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.221">61.219.131.221</a></td>
<td><a href="http://61.219.131.222">61.219.131.222</a></td>
<td><a href="http://61.219.131.223">61.219.131.223</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.224">61.219.131.224</a></td>
<td><a href="http://61.219.131.225">61.219.131.225</a></td>
<td><a href="http://61.219.131.226">61.219.131.226</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.227">61.219.131.227</a></td>
<td><a href="http://61.219.131.228">61.219.131.228</a></td>
<td><a href="http://61.219.131.229">61.219.131.229</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.230">61.219.131.230</a></td>
<td><a href="http://61.219.131.231">61.219.131.231</a></td>
<td><a href="http://61.219.131.232">61.219.131.232</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.233">61.219.131.233</a></td>
<td><a href="http://61.219.131.234">61.219.131.234</a></td>
<td><a href="http://61.219.131.235">61.219.131.235</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.236">61.219.131.236</a></td>
<td><a href="http://61.219.131.237">61.219.131.237</a></td>
<td><a href="http://61.219.131.238">61.219.131.238</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.239">61.219.131.239</a></td>
<td><a href="http://61.219.131.240">61.219.131.240</a></td>
<td><a href="http://61.219.131.241">61.219.131.241</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.242">61.219.131.242</a></td>
<td><a href="http://61.219.131.243">61.219.131.243</a></td>
<td><a href="http://61.219.131.244">61.219.131.244</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.245">61.219.131.245</a></td>
<td><a href="http://61.219.131.246">61.219.131.246</a></td>
<td><a href="http://61.219.131.247">61.219.131.247</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.248">61.219.131.248</a></td>
<td><a href="http://61.219.131.249">61.219.131.249</a></td>
<td><a href="http://61.219.131.250">61.219.131.250</a></td>
</tr>
<tr>
<td><a href="http://61.219.131.251">61.219.131.251</a></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Thailand</th>
</tr>
<tr>
<td><a href="http://1.179.248.4">1.179.248.4</a></td>
<td><a href="http://1.179.248.5">1.179.248.5</a></td>
<td><a href="http://1.179.248.6">1.179.248.6</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.7">1.179.248.7</a></td>
<td><a href="http://1.179.248.8">1.179.248.8</a></td>
<td><a href="http://1.179.248.9">1.179.248.9</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.10">1.179.248.10</a></td>
<td><a href="http://1.179.248.11">1.179.248.11</a></td>
<td><a href="http://1.179.248.12">1.179.248.12</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.13">1.179.248.13</a></td>
<td><a href="http://1.179.248.14">1.179.248.14</a></td>
<td><a href="http://1.179.248.15">1.179.248.15</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.16">1.179.248.16</a></td>
<td><a href="http://1.179.248.17">1.179.248.17</a></td>
<td><a href="http://1.179.248.18">1.179.248.18</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.19">1.179.248.19</a></td>
<td><a href="http://1.179.248.20">1.179.248.20</a></td>
<td><a href="http://1.179.248.21">1.179.248.21</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.22">1.179.248.22</a></td>
<td><a href="http://1.179.248.23">1.179.248.23</a></td>
<td><a href="http://1.179.248.24">1.179.248.24</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.25">1.179.248.25</a></td>
<td><a href="http://1.179.248.26">1.179.248.26</a></td>
<td><a href="http://1.179.248.27">1.179.248.27</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.28">1.179.248.28</a></td>
<td><a href="http://1.179.248.29">1.179.248.29</a></td>
<td><a href="http://1.179.248.30">1.179.248.30</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.31">1.179.248.31</a></td>
<td><a href="http://1.179.248.32">1.179.248.32</a></td>
<td><a href="http://1.179.248.33">1.179.248.33</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.34">1.179.248.34</a></td>
<td><a href="http://1.179.248.35">1.179.248.35</a></td>
<td><a href="http://1.179.248.36">1.179.248.36</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.37">1.179.248.37</a></td>
<td><a href="http://1.179.248.38">1.179.248.38</a></td>
<td><a href="http://1.179.248.39">1.179.248.39</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.40">1.179.248.40</a></td>
<td><a href="http://1.179.248.41">1.179.248.41</a></td>
<td><a href="http://1.179.248.42">1.179.248.42</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.43">1.179.248.43</a></td>
<td><a href="http://1.179.248.44">1.179.248.44</a></td>
<td><a href="http://1.179.248.45">1.179.248.45</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.46">1.179.248.46</a></td>
<td><a href="http://1.179.248.47">1.179.248.47</a></td>
<td><a href="http://1.179.248.48">1.179.248.48</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.49">1.179.248.49</a></td>
<td><a href="http://1.179.248.50">1.179.248.50</a></td>
<td><a href="http://1.179.248.51">1.179.248.51</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.52">1.179.248.52</a></td>
<td><a href="http://1.179.248.53">1.179.248.53</a></td>
<td><a href="http://1.179.248.54">1.179.248.54</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.55">1.179.248.55</a></td>
<td><a href="http://1.179.248.56">1.179.248.56</a></td>
<td><a href="http://1.179.248.57">1.179.248.57</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.58">1.179.248.58</a></td>
<td><a href="http://1.179.248.59">1.179.248.59</a></td>
<td><a href="http://1.179.248.68">1.179.248.68</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.69">1.179.248.69</a></td>
<td><a href="http://1.179.248.70">1.179.248.70</a></td>
<td><a href="http://1.179.248.71">1.179.248.71</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.72">1.179.248.72</a></td>
<td><a href="http://1.179.248.73">1.179.248.73</a></td>
<td><a href="http://1.179.248.74">1.179.248.74</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.75">1.179.248.75</a></td>
<td><a href="http://1.179.248.76">1.179.248.76</a></td>
<td><a href="http://1.179.248.77">1.179.248.77</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.78">1.179.248.78</a></td>
<td><a href="http://1.179.248.79">1.179.248.79</a></td>
<td><a href="http://1.179.248.80">1.179.248.80</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.81">1.179.248.81</a></td>
<td><a href="http://1.179.248.82">1.179.248.82</a></td>
<td><a href="http://1.179.248.83">1.179.248.83</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.84">1.179.248.84</a></td>
<td><a href="http://1.179.248.85">1.179.248.85</a></td>
<td><a href="http://1.179.248.86">1.179.248.86</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.87">1.179.248.87</a></td>
<td><a href="http://1.179.248.88">1.179.248.88</a></td>
<td><a href="http://1.179.248.89">1.179.248.89</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.90">1.179.248.90</a></td>
<td><a href="http://1.179.248.91">1.179.248.91</a></td>
<td><a href="http://1.179.248.92">1.179.248.92</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.93">1.179.248.93</a></td>
<td><a href="http://1.179.248.94">1.179.248.94</a></td>
<td><a href="http://1.179.248.95">1.179.248.95</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.96">1.179.248.96</a></td>
<td><a href="http://1.179.248.97">1.179.248.97</a></td>
<td><a href="http://1.179.248.98">1.179.248.98</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.99">1.179.248.99</a></td>
<td><a href="http://1.179.248.100">1.179.248.100</a></td>
<td><a href="http://1.179.248.101">1.179.248.101</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.102">1.179.248.102</a></td>
<td><a href="http://1.179.248.103">1.179.248.103</a></td>
<td><a href="http://1.179.248.104">1.179.248.104</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.105">1.179.248.105</a></td>
<td><a href="http://1.179.248.106">1.179.248.106</a></td>
<td><a href="http://1.179.248.107">1.179.248.107</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.108">1.179.248.108</a></td>
<td><a href="http://1.179.248.109">1.179.248.109</a></td>
<td><a href="http://1.179.248.110">1.179.248.110</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.111">1.179.248.111</a></td>
<td><a href="http://1.179.248.112">1.179.248.112</a></td>
<td><a href="http://1.179.248.113">1.179.248.113</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.114">1.179.248.114</a></td>
<td><a href="http://1.179.248.115">1.179.248.115</a></td>
<td><a href="http://1.179.248.116">1.179.248.116</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.117">1.179.248.117</a></td>
<td><a href="http://1.179.248.118">1.179.248.118</a></td>
<td><a href="http://1.179.248.119">1.179.248.119</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.120">1.179.248.120</a></td>
<td><a href="http://1.179.248.121">1.179.248.121</a></td>
<td><a href="http://1.179.248.122">1.179.248.122</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.123">1.179.248.123</a></td>
<td><a href="http://1.179.248.132">1.179.248.132</a></td>
<td><a href="http://1.179.248.133">1.179.248.133</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.134">1.179.248.134</a></td>
<td><a href="http://1.179.248.135">1.179.248.135</a></td>
<td><a href="http://1.179.248.136">1.179.248.136</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.137">1.179.248.137</a></td>
<td><a href="http://1.179.248.138">1.179.248.138</a></td>
<td><a href="http://1.179.248.139">1.179.248.139</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.140">1.179.248.140</a></td>
<td><a href="http://1.179.248.141">1.179.248.141</a></td>
<td><a href="http://1.179.248.142">1.179.248.142</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.143">1.179.248.143</a></td>
<td><a href="http://1.179.248.144">1.179.248.144</a></td>
<td><a href="http://1.179.248.145">1.179.248.145</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.146">1.179.248.146</a></td>
<td><a href="http://1.179.248.147">1.179.248.147</a></td>
<td><a href="http://1.179.248.148">1.179.248.148</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.149">1.179.248.149</a></td>
<td><a href="http://1.179.248.150">1.179.248.150</a></td>
<td><a href="http://1.179.248.151">1.179.248.151</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.152">1.179.248.152</a></td>
<td><a href="http://1.179.248.153">1.179.248.153</a></td>
<td><a href="http://1.179.248.154">1.179.248.154</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.155">1.179.248.155</a></td>
<td><a href="http://1.179.248.156">1.179.248.156</a></td>
<td><a href="http://1.179.248.157">1.179.248.157</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.158">1.179.248.158</a></td>
<td><a href="http://1.179.248.159">1.179.248.159</a></td>
<td><a href="http://1.179.248.160">1.179.248.160</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.161">1.179.248.161</a></td>
<td><a href="http://1.179.248.162">1.179.248.162</a></td>
<td><a href="http://1.179.248.163">1.179.248.163</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.164">1.179.248.164</a></td>
<td><a href="http://1.179.248.165">1.179.248.165</a></td>
<td><a href="http://1.179.248.166">1.179.248.166</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.167">1.179.248.167</a></td>
<td><a href="http://1.179.248.168">1.179.248.168</a></td>
<td><a href="http://1.179.248.169">1.179.248.169</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.170">1.179.248.170</a></td>
<td><a href="http://1.179.248.171">1.179.248.171</a></td>
<td><a href="http://1.179.248.172">1.179.248.172</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.173">1.179.248.173</a></td>
<td><a href="http://1.179.248.174">1.179.248.174</a></td>
<td><a href="http://1.179.248.175">1.179.248.175</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.176">1.179.248.176</a></td>
<td><a href="http://1.179.248.177">1.179.248.177</a></td>
<td><a href="http://1.179.248.178">1.179.248.178</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.179">1.179.248.179</a></td>
<td><a href="http://1.179.248.180">1.179.248.180</a></td>
<td><a href="http://1.179.248.181">1.179.248.181</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.182">1.179.248.182</a></td>
<td><a href="http://1.179.248.183">1.179.248.183</a></td>
<td><a href="http://1.179.248.184">1.179.248.184</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.185">1.179.248.185</a></td>
<td><a href="http://1.179.248.186">1.179.248.186</a></td>
<td><a href="http://1.179.248.187">1.179.248.187</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.196">1.179.248.196</a></td>
<td><a href="http://1.179.248.197">1.179.248.197</a></td>
<td><a href="http://1.179.248.198">1.179.248.198</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.199">1.179.248.199</a></td>
<td><a href="http://1.179.248.200">1.179.248.200</a></td>
<td><a href="http://1.179.248.201">1.179.248.201</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.202">1.179.248.202</a></td>
<td><a href="http://1.179.248.203">1.179.248.203</a></td>
<td><a href="http://1.179.248.204">1.179.248.204</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.205">1.179.248.205</a></td>
<td><a href="http://1.179.248.206">1.179.248.206</a></td>
<td><a href="http://1.179.248.207">1.179.248.207</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.208">1.179.248.208</a></td>
<td><a href="http://1.179.248.209">1.179.248.209</a></td>
<td><a href="http://1.179.248.210">1.179.248.210</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.211">1.179.248.211</a></td>
<td><a href="http://1.179.248.212">1.179.248.212</a></td>
<td><a href="http://1.179.248.213">1.179.248.213</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.214">1.179.248.214</a></td>
<td><a href="http://1.179.248.215">1.179.248.215</a></td>
<td><a href="http://1.179.248.216">1.179.248.216</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.217">1.179.248.217</a></td>
<td><a href="http://1.179.248.218">1.179.248.218</a></td>
<td><a href="http://1.179.248.219">1.179.248.219</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.220">1.179.248.220</a></td>
<td><a href="http://1.179.248.221">1.179.248.221</a></td>
<td><a href="http://1.179.248.222">1.179.248.222</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.223">1.179.248.223</a></td>
<td><a href="http://1.179.248.224">1.179.248.224</a></td>
<td><a href="http://1.179.248.225">1.179.248.225</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.226">1.179.248.226</a></td>
<td><a href="http://1.179.248.227">1.179.248.227</a></td>
<td><a href="http://1.179.248.228">1.179.248.228</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.229">1.179.248.229</a></td>
<td><a href="http://1.179.248.230">1.179.248.230</a></td>
<td><a href="http://1.179.248.231">1.179.248.231</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.232">1.179.248.232</a></td>
<td><a href="http://1.179.248.233">1.179.248.233</a></td>
<td><a href="http://1.179.248.234">1.179.248.234</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.235">1.179.248.235</a></td>
<td><a href="http://1.179.248.236">1.179.248.236</a></td>
<td><a href="http://1.179.248.237">1.179.248.237</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.238">1.179.248.238</a></td>
<td><a href="http://1.179.248.239">1.179.248.239</a></td>
<td><a href="http://1.179.248.240">1.179.248.240</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.241">1.179.248.241</a></td>
<td><a href="http://1.179.248.242">1.179.248.242</a></td>
<td><a href="http://1.179.248.243">1.179.248.243</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.244">1.179.248.244</a></td>
<td><a href="http://1.179.248.245">1.179.248.245</a></td>
<td><a href="http://1.179.248.246">1.179.248.246</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.247">1.179.248.247</a></td>
<td><a href="http://1.179.248.248">1.179.248.248</a></td>
<td><a href="http://1.179.248.249">1.179.248.249</a></td>
</tr>
<tr>
<td><a href="http://1.179.248.250">1.179.248.250</a></td>
<td><a href="http://1.179.248.251">1.179.248.251</a></td>
<td> </td>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Thailand</th>
</tr>
<tr>
<td><a href="http://1.179.249.4">1.179.249.4</a></td>
<td><a href="http://1.179.249.5">1.179.249.5</a></td>
<td><a href="http://1.179.249.6">1.179.249.6</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.7">1.179.249.7</a></td>
<td><a href="http://1.179.249.8">1.179.249.8</a></td>
<td><a href="http://1.179.249.9">1.179.249.9</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.10">1.179.249.10</a></td>
<td><a href="http://1.179.249.11">1.179.249.11</a></td>
<td><a href="http://1.179.249.12">1.179.249.12</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.13">1.179.249.13</a></td>
<td><a href="http://1.179.249.14">1.179.249.14</a></td>
<td><a href="http://1.179.249.15">1.179.249.15</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.16">1.179.249.16</a></td>
<td><a href="http://1.179.249.17">1.179.249.17</a></td>
<td><a href="http://1.179.249.18">1.179.249.18</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.19">1.179.249.19</a></td>
<td><a href="http://1.179.249.20">1.179.249.20</a></td>
<td><a href="http://1.179.249.21">1.179.249.21</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.22">1.179.249.22</a></td>
<td><a href="http://1.179.249.23">1.179.249.23</a></td>
<td><a href="http://1.179.249.24">1.179.249.24</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.25">1.179.249.25</a></td>
<td><a href="http://1.179.249.26">1.179.249.26</a></td>
<td><a href="http://1.179.249.27">1.179.249.27</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.28">1.179.249.28</a></td>
<td><a href="http://1.179.249.29">1.179.249.29</a></td>
<td><a href="http://1.179.249.30">1.179.249.30</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.31">1.179.249.31</a></td>
<td><a href="http://1.179.249.32">1.179.249.32</a></td>
<td><a href="http://1.179.249.33">1.179.249.33</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.34">1.179.249.34</a></td>
<td><a href="http://1.179.249.35">1.179.249.35</a></td>
<td><a href="http://1.179.249.36">1.179.249.36</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.37">1.179.249.37</a></td>
<td><a href="http://1.179.249.38">1.179.249.38</a></td>
<td><a href="http://1.179.249.39">1.179.249.39</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.40">1.179.249.40</a></td>
<td><a href="http://1.179.249.41">1.179.249.41</a></td>
<td><a href="http://1.179.249.42">1.179.249.42</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.43">1.179.249.43</a></td>
<td><a href="http://1.179.249.44">1.179.249.44</a></td>
<td><a href="http://1.179.249.45">1.179.249.45</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.46">1.179.249.46</a></td>
<td><a href="http://1.179.249.47">1.179.249.47</a></td>
<td><a href="http://1.179.249.48">1.179.249.48</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.49">1.179.249.49</a></td>
<td><a href="http://1.179.249.50">1.179.249.50</a></td>
<td><a href="http://1.179.249.51">1.179.249.51</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.52">1.179.249.52</a></td>
<td><a href="http://1.179.249.53">1.179.249.53</a></td>
<td><a href="http://1.179.249.54">1.179.249.54</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.55">1.179.249.55</a></td>
<td><a href="http://1.179.249.56">1.179.249.56</a></td>
<td><a href="http://1.179.249.57">1.179.249.57</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.58">1.179.249.58</a></td>
<td><a href="http://1.179.249.59">1.179.249.59</a></td>
<td><a href="http://1.179.249.68">1.179.249.68</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.69">1.179.249.69</a></td>
<td><a href="http://1.179.249.70">1.179.249.70</a></td>
<td><a href="http://1.179.249.71">1.179.249.71</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.72">1.179.249.72</a></td>
<td><a href="http://1.179.249.73">1.179.249.73</a></td>
<td><a href="http://1.179.249.74">1.179.249.74</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.75">1.179.249.75</a></td>
<td><a href="http://1.179.249.76">1.179.249.76</a></td>
<td><a href="http://1.179.249.77">1.179.249.77</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.78">1.179.249.78</a></td>
<td><a href="http://1.179.249.79">1.179.249.79</a></td>
<td><a href="http://1.179.249.80">1.179.249.80</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.81">1.179.249.81</a></td>
<td><a href="http://1.179.249.82">1.179.249.82</a></td>
<td><a href="http://1.179.249.83">1.179.249.83</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.84">1.179.249.84</a></td>
<td><a href="http://1.179.249.85">1.179.249.85</a></td>
<td><a href="http://1.179.249.86">1.179.249.86</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.87">1.179.249.87</a></td>
<td><a href="http://1.179.249.88">1.179.249.88</a></td>
<td><a href="http://1.179.249.89">1.179.249.89</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.90">1.179.249.90</a></td>
<td><a href="http://1.179.249.91">1.179.249.91</a></td>
<td><a href="http://1.179.249.92">1.179.249.92</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.93">1.179.249.93</a></td>
<td><a href="http://1.179.249.94">1.179.249.94</a></td>
<td><a href="http://1.179.249.95">1.179.249.95</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.96">1.179.249.96</a></td>
<td><a href="http://1.179.249.97">1.179.249.97</a></td>
<td><a href="http://1.179.249.98">1.179.249.98</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.99">1.179.249.99</a></td>
<td><a href="http://1.179.249.100">1.179.249.100</a></td>
<td><a href="http://1.179.249.101">1.179.249.101</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.102">1.179.249.102</a></td>
<td><a href="http://1.179.249.103">1.179.249.103</a></td>
<td><a href="http://1.179.249.104">1.179.249.104</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.105">1.179.249.105</a></td>
<td><a href="http://1.179.249.106">1.179.249.106</a></td>
<td><a href="http://1.179.249.107">1.179.249.107</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.108">1.179.249.108</a></td>
<td><a href="http://1.179.249.109">1.179.249.109</a></td>
<td><a href="http://1.179.249.110">1.179.249.110</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.111">1.179.249.111</a></td>
<td><a href="http://1.179.249.112">1.179.249.112</a></td>
<td><a href="http://1.179.249.113">1.179.249.113</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.114">1.179.249.114</a></td>
<td><a href="http://1.179.249.115">1.179.249.115</a></td>
<td><a href="http://1.179.249.116">1.179.249.116</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.117">1.179.249.117</a></td>
<td><a href="http://1.179.249.118">1.179.249.118</a></td>
<td><a href="http://1.179.249.119">1.179.249.119</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.120">1.179.249.120</a></td>
<td><a href="http://1.179.249.121">1.179.249.121</a></td>
<td><a href="http://1.179.249.122">1.179.249.122</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.123">1.179.249.123</a></td>
<td><a href="http://1.179.249.132">1.179.249.132</a></td>
<td><a href="http://1.179.249.133">1.179.249.133</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.134">1.179.249.134</a></td>
<td><a href="http://1.179.249.135">1.179.249.135</a></td>
<td><a href="http://1.179.249.136">1.179.249.136</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.137">1.179.249.137</a></td>
<td><a href="http://1.179.249.138">1.179.249.138</a></td>
<td><a href="http://1.179.249.139">1.179.249.139</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.140">1.179.249.140</a></td>
<td><a href="http://1.179.249.141">1.179.249.141</a></td>
<td><a href="http://1.179.249.142">1.179.249.142</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.143">1.179.249.143</a></td>
<td><a href="http://1.179.249.144">1.179.249.144</a></td>
<td><a href="http://1.179.249.145">1.179.249.145</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.146">1.179.249.146</a></td>
<td><a href="http://1.179.249.147">1.179.249.147</a></td>
<td><a href="http://1.179.249.148">1.179.249.148</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.149">1.179.249.149</a></td>
<td><a href="http://1.179.249.150">1.179.249.150</a></td>
<td><a href="http://1.179.249.151">1.179.249.151</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.152">1.179.249.152</a></td>
<td><a href="http://1.179.249.153">1.179.249.153</a></td>
<td><a href="http://1.179.249.154">1.179.249.154</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.155">1.179.249.155</a></td>
<td><a href="http://1.179.249.156">1.179.249.156</a></td>
<td><a href="http://1.179.249.157">1.179.249.157</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.158">1.179.249.158</a></td>
<td><a href="http://1.179.249.159">1.179.249.159</a></td>
<td><a href="http://1.179.249.160">1.179.249.160</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.161">1.179.249.161</a></td>
<td><a href="http://1.179.249.162">1.179.249.162</a></td>
<td><a href="http://1.179.249.163">1.179.249.163</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.164">1.179.249.164</a></td>
<td><a href="http://1.179.249.165">1.179.249.165</a></td>
<td><a href="http://1.179.249.166">1.179.249.166</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.167">1.179.249.167</a></td>
<td><a href="http://1.179.249.168">1.179.249.168</a></td>
<td><a href="http://1.179.249.169">1.179.249.169</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.170">1.179.249.170</a></td>
<td><a href="http://1.179.249.171">1.179.249.171</a></td>
<td><a href="http://1.179.249.172">1.179.249.172</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.173">1.179.249.173</a></td>
<td><a href="http://1.179.249.174">1.179.249.174</a></td>
<td><a href="http://1.179.249.175">1.179.249.175</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.176">1.179.249.176</a></td>
<td><a href="http://1.179.249.177">1.179.249.177</a></td>
<td><a href="http://1.179.249.178">1.179.249.178</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.179">1.179.249.179</a></td>
<td><a href="http://1.179.249.180">1.179.249.180</a></td>
<td><a href="http://1.179.249.181">1.179.249.181</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.182">1.179.249.182</a></td>
<td><a href="http://1.179.249.183">1.179.249.183</a></td>
<td><a href="http://1.179.249.184">1.179.249.184</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.185">1.179.249.185</a></td>
<td><a href="http://1.179.249.186">1.179.249.186</a></td>
<td><a href="http://1.179.249.187">1.179.249.187</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.196">1.179.249.196</a></td>
<td><a href="http://1.179.249.197">1.179.249.197</a></td>
<td><a href="http://1.179.249.198">1.179.249.198</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.199">1.179.249.199</a></td>
<td><a href="http://1.179.249.200">1.179.249.200</a></td>
<td><a href="http://1.179.249.201">1.179.249.201</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.202">1.179.249.202</a></td>
<td><a href="http://1.179.249.203">1.179.249.203</a></td>
<td><a href="http://1.179.249.204">1.179.249.204</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.205">1.179.249.205</a></td>
<td><a href="http://1.179.249.206">1.179.249.206</a></td>
<td><a href="http://1.179.249.207">1.179.249.207</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.208">1.179.249.208</a></td>
<td><a href="http://1.179.249.209">1.179.249.209</a></td>
<td><a href="http://1.179.249.210">1.179.249.210</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.211">1.179.249.211</a></td>
<td><a href="http://1.179.249.212">1.179.249.212</a></td>
<td><a href="http://1.179.249.213">1.179.249.213</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.214">1.179.249.214</a></td>
<td><a href="http://1.179.249.215">1.179.249.215</a></td>
<td><a href="http://1.179.249.216">1.179.249.216</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.217">1.179.249.217</a></td>
<td><a href="http://1.179.249.218">1.179.249.218</a></td>
<td><a href="http://1.179.249.219">1.179.249.219</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.220">1.179.249.220</a></td>
<td><a href="http://1.179.249.221">1.179.249.221</a></td>
<td><a href="http://1.179.249.222">1.179.249.222</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.223">1.179.249.223</a></td>
<td><a href="http://1.179.249.224">1.179.249.224</a></td>
<td><a href="http://1.179.249.225">1.179.249.225</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.226">1.179.249.226</a></td>
<td><a href="http://1.179.249.227">1.179.249.227</a></td>
<td><a href="http://1.179.249.228">1.179.249.228</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.229">1.179.249.229</a></td>
<td><a href="http://1.179.249.230">1.179.249.230</a></td>
<td><a href="http://1.179.249.231">1.179.249.231</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.232">1.179.249.232</a></td>
<td><a href="http://1.179.249.233">1.179.249.233</a></td>
<td><a href="http://1.179.249.234">1.179.249.234</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.235">1.179.249.235</a></td>
<td><a href="http://1.179.249.236">1.179.249.236</a></td>
<td><a href="http://1.179.249.237">1.179.249.237</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.238">1.179.249.238</a></td>
<td><a href="http://1.179.249.239">1.179.249.239</a></td>
<td><a href="http://1.179.249.240">1.179.249.240</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.241">1.179.249.241</a></td>
<td><a href="http://1.179.249.242">1.179.249.242</a></td>
<td><a href="http://1.179.249.243">1.179.249.243</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.244">1.179.249.244</a></td>
<td><a href="http://1.179.249.245">1.179.249.245</a></td>
<td><a href="http://1.179.249.246">1.179.249.246</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.247">1.179.249.247</a></td>
<td><a href="http://1.179.249.248">1.179.249.248</a></td>
<td><a href="http://1.179.249.249">1.179.249.249</a></td>
</tr>
<tr>
<td><a href="http://1.179.249.250">1.179.249.250</a></td>
<td><a href="http://1.179.249.251">1.179.249.251</a></td>
<td> </td>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Thailand</th>
</tr>
<tr>
<td><a href="http://1.179.250.4">1.179.250.4</a></td>
<td><a href="http://1.179.250.5">1.179.250.5</a></td>
<td><a href="http://1.179.250.6">1.179.250.6</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.7">1.179.250.7</a></td>
<td><a href="http://1.179.250.8">1.179.250.8</a></td>
<td><a href="http://1.179.250.9">1.179.250.9</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.10">1.179.250.10</a></td>
<td><a href="http://1.179.250.11">1.179.250.11</a></td>
<td><a href="http://1.179.250.12">1.179.250.12</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.13">1.179.250.13</a></td>
<td><a href="http://1.179.250.14">1.179.250.14</a></td>
<td><a href="http://1.179.250.15">1.179.250.15</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.16">1.179.250.16</a></td>
<td><a href="http://1.179.250.17">1.179.250.17</a></td>
<td><a href="http://1.179.250.18">1.179.250.18</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.19">1.179.250.19</a></td>
<td><a href="http://1.179.250.20">1.179.250.20</a></td>
<td><a href="http://1.179.250.21">1.179.250.21</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.22">1.179.250.22</a></td>
<td><a href="http://1.179.250.23">1.179.250.23</a></td>
<td><a href="http://1.179.250.24">1.179.250.24</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.25">1.179.250.25</a></td>
<td><a href="http://1.179.250.26">1.179.250.26</a></td>
<td><a href="http://1.179.250.27">1.179.250.27</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.28">1.179.250.28</a></td>
<td><a href="http://1.179.250.29">1.179.250.29</a></td>
<td><a href="http://1.179.250.30">1.179.250.30</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.31">1.179.250.31</a></td>
<td><a href="http://1.179.250.32">1.179.250.32</a></td>
<td><a href="http://1.179.250.33">1.179.250.33</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.34">1.179.250.34</a></td>
<td><a href="http://1.179.250.35">1.179.250.35</a></td>
<td><a href="http://1.179.250.36">1.179.250.36</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.37">1.179.250.37</a></td>
<td><a href="http://1.179.250.38">1.179.250.38</a></td>
<td><a href="http://1.179.250.39">1.179.250.39</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.40">1.179.250.40</a></td>
<td><a href="http://1.179.250.41">1.179.250.41</a></td>
<td><a href="http://1.179.250.42">1.179.250.42</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.43">1.179.250.43</a></td>
<td><a href="http://1.179.250.44">1.179.250.44</a></td>
<td><a href="http://1.179.250.45">1.179.250.45</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.46">1.179.250.46</a></td>
<td><a href="http://1.179.250.47">1.179.250.47</a></td>
<td><a href="http://1.179.250.48">1.179.250.48</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.49">1.179.250.49</a></td>
<td><a href="http://1.179.250.50">1.179.250.50</a></td>
<td><a href="http://1.179.250.51">1.179.250.51</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.52">1.179.250.52</a></td>
<td><a href="http://1.179.250.53">1.179.250.53</a></td>
<td><a href="http://1.179.250.54">1.179.250.54</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.55">1.179.250.55</a></td>
<td><a href="http://1.179.250.56">1.179.250.56</a></td>
<td><a href="http://1.179.250.57">1.179.250.57</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.58">1.179.250.58</a></td>
<td><a href="http://1.179.250.59">1.179.250.59</a></td>
<td><a href="http://1.179.250.68">1.179.250.68</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.69">1.179.250.69</a></td>
<td><a href="http://1.179.250.70">1.179.250.70</a></td>
<td><a href="http://1.179.250.71">1.179.250.71</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.72">1.179.250.72</a></td>
<td><a href="http://1.179.250.73">1.179.250.73</a></td>
<td><a href="http://1.179.250.74">1.179.250.74</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.75">1.179.250.75</a></td>
<td><a href="http://1.179.250.76">1.179.250.76</a></td>
<td><a href="http://1.179.250.77">1.179.250.77</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.78">1.179.250.78</a></td>
<td><a href="http://1.179.250.79">1.179.250.79</a></td>
<td><a href="http://1.179.250.80">1.179.250.80</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.81">1.179.250.81</a></td>
<td><a href="http://1.179.250.82">1.179.250.82</a></td>
<td><a href="http://1.179.250.83">1.179.250.83</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.84">1.179.250.84</a></td>
<td><a href="http://1.179.250.85">1.179.250.85</a></td>
<td><a href="http://1.179.250.86">1.179.250.86</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.87">1.179.250.87</a></td>
<td><a href="http://1.179.250.88">1.179.250.88</a></td>
<td><a href="http://1.179.250.89">1.179.250.89</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.90">1.179.250.90</a></td>
<td><a href="http://1.179.250.91">1.179.250.91</a></td>
<td><a href="http://1.179.250.92">1.179.250.92</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.93">1.179.250.93</a></td>
<td><a href="http://1.179.250.94">1.179.250.94</a></td>
<td><a href="http://1.179.250.95">1.179.250.95</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.96">1.179.250.96</a></td>
<td><a href="http://1.179.250.97">1.179.250.97</a></td>
<td><a href="http://1.179.250.98">1.179.250.98</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.99">1.179.250.99</a></td>
<td><a href="http://1.179.250.100">1.179.250.100</a></td>
<td><a href="http://1.179.250.101">1.179.250.101</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.102">1.179.250.102</a></td>
<td><a href="http://1.179.250.103">1.179.250.103</a></td>
<td><a href="http://1.179.250.104">1.179.250.104</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.105">1.179.250.105</a></td>
<td><a href="http://1.179.250.106">1.179.250.106</a></td>
<td><a href="http://1.179.250.107">1.179.250.107</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.108">1.179.250.108</a></td>
<td><a href="http://1.179.250.109">1.179.250.109</a></td>
<td><a href="http://1.179.250.110">1.179.250.110</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.111">1.179.250.111</a></td>
<td><a href="http://1.179.250.112">1.179.250.112</a></td>
<td><a href="http://1.179.250.113">1.179.250.113</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.114">1.179.250.114</a></td>
<td><a href="http://1.179.250.115">1.179.250.115</a></td>
<td><a href="http://1.179.250.116">1.179.250.116</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.117">1.179.250.117</a></td>
<td><a href="http://1.179.250.118">1.179.250.118</a></td>
<td><a href="http://1.179.250.119">1.179.250.119</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.120">1.179.250.120</a></td>
<td><a href="http://1.179.250.121">1.179.250.121</a></td>
<td><a href="http://1.179.250.122">1.179.250.122</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.123">1.179.250.123</a></td>
<td><a href="http://1.179.250.132">1.179.250.132</a></td>
<td><a href="http://1.179.250.133">1.179.250.133</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.134">1.179.250.134</a></td>
<td><a href="http://1.179.250.135">1.179.250.135</a></td>
<td><a href="http://1.179.250.136">1.179.250.136</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.137">1.179.250.137</a></td>
<td><a href="http://1.179.250.138">1.179.250.138</a></td>
<td><a href="http://1.179.250.139">1.179.250.139</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.140">1.179.250.140</a></td>
<td><a href="http://1.179.250.141">1.179.250.141</a></td>
<td><a href="http://1.179.250.142">1.179.250.142</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.143">1.179.250.143</a></td>
<td><a href="http://1.179.250.144">1.179.250.144</a></td>
<td><a href="http://1.179.250.145">1.179.250.145</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.146">1.179.250.146</a></td>
<td><a href="http://1.179.250.147">1.179.250.147</a></td>
<td><a href="http://1.179.250.148">1.179.250.148</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.149">1.179.250.149</a></td>
<td><a href="http://1.179.250.150">1.179.250.150</a></td>
<td><a href="http://1.179.250.151">1.179.250.151</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.152">1.179.250.152</a></td>
<td><a href="http://1.179.250.153">1.179.250.153</a></td>
<td><a href="http://1.179.250.154">1.179.250.154</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.155">1.179.250.155</a></td>
<td><a href="http://1.179.250.156">1.179.250.156</a></td>
<td><a href="http://1.179.250.157">1.179.250.157</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.158">1.179.250.158</a></td>
<td><a href="http://1.179.250.159">1.179.250.159</a></td>
<td><a href="http://1.179.250.160">1.179.250.160</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.161">1.179.250.161</a></td>
<td><a href="http://1.179.250.162">1.179.250.162</a></td>
<td><a href="http://1.179.250.163">1.179.250.163</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.164">1.179.250.164</a></td>
<td><a href="http://1.179.250.165">1.179.250.165</a></td>
<td><a href="http://1.179.250.166">1.179.250.166</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.167">1.179.250.167</a></td>
<td><a href="http://1.179.250.168">1.179.250.168</a></td>
<td><a href="http://1.179.250.169">1.179.250.169</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.170">1.179.250.170</a></td>
<td><a href="http://1.179.250.171">1.179.250.171</a></td>
<td><a href="http://1.179.250.172">1.179.250.172</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.173">1.179.250.173</a></td>
<td><a href="http://1.179.250.174">1.179.250.174</a></td>
<td><a href="http://1.179.250.175">1.179.250.175</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.176">1.179.250.176</a></td>
<td><a href="http://1.179.250.177">1.179.250.177</a></td>
<td><a href="http://1.179.250.178">1.179.250.178</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.179">1.179.250.179</a></td>
<td><a href="http://1.179.250.180">1.179.250.180</a></td>
<td><a href="http://1.179.250.181">1.179.250.181</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.182">1.179.250.182</a></td>
<td><a href="http://1.179.250.183">1.179.250.183</a></td>
<td><a href="http://1.179.250.184">1.179.250.184</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.185">1.179.250.185</a></td>
<td><a href="http://1.179.250.186">1.179.250.186</a></td>
<td><a href="http://1.179.250.187">1.179.250.187</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.196">1.179.250.196</a></td>
<td><a href="http://1.179.250.197">1.179.250.197</a></td>
<td><a href="http://1.179.250.198">1.179.250.198</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.199">1.179.250.199</a></td>
<td><a href="http://1.179.250.200">1.179.250.200</a></td>
<td><a href="http://1.179.250.201">1.179.250.201</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.202">1.179.250.202</a></td>
<td><a href="http://1.179.250.203">1.179.250.203</a></td>
<td><a href="http://1.179.250.204">1.179.250.204</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.205">1.179.250.205</a></td>
<td><a href="http://1.179.250.206">1.179.250.206</a></td>
<td><a href="http://1.179.250.207">1.179.250.207</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.208">1.179.250.208</a></td>
<td><a href="http://1.179.250.209">1.179.250.209</a></td>
<td><a href="http://1.179.250.210">1.179.250.210</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.211">1.179.250.211</a></td>
<td><a href="http://1.179.250.212">1.179.250.212</a></td>
<td><a href="http://1.179.250.213">1.179.250.213</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.214">1.179.250.214</a></td>
<td><a href="http://1.179.250.215">1.179.250.215</a></td>
<td><a href="http://1.179.250.216">1.179.250.216</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.217">1.179.250.217</a></td>
<td><a href="http://1.179.250.218">1.179.250.218</a></td>
<td><a href="http://1.179.250.219">1.179.250.219</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.220">1.179.250.220</a></td>
<td><a href="http://1.179.250.221">1.179.250.221</a></td>
<td><a href="http://1.179.250.222">1.179.250.222</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.223">1.179.250.223</a></td>
<td><a href="http://1.179.250.224">1.179.250.224</a></td>
<td><a href="http://1.179.250.225">1.179.250.225</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.226">1.179.250.226</a></td>
<td><a href="http://1.179.250.227">1.179.250.227</a></td>
<td><a href="http://1.179.250.228">1.179.250.228</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.229">1.179.250.229</a></td>
<td><a href="http://1.179.250.230">1.179.250.230</a></td>
<td><a href="http://1.179.250.231">1.179.250.231</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.232">1.179.250.232</a></td>
<td><a href="http://1.179.250.233">1.179.250.233</a></td>
<td><a href="http://1.179.250.234">1.179.250.234</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.235">1.179.250.235</a></td>
<td><a href="http://1.179.250.236">1.179.250.236</a></td>
<td><a href="http://1.179.250.237">1.179.250.237</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.238">1.179.250.238</a></td>
<td><a href="http://1.179.250.239">1.179.250.239</a></td>
<td><a href="http://1.179.250.240">1.179.250.240</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.241">1.179.250.241</a></td>
<td><a href="http://1.179.250.242">1.179.250.242</a></td>
<td><a href="http://1.179.250.243">1.179.250.243</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.244">1.179.250.244</a></td>
<td><a href="http://1.179.250.245">1.179.250.245</a></td>
<td><a href="http://1.179.250.246">1.179.250.246</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.247">1.179.250.247</a></td>
<td><a href="http://1.179.250.248">1.179.250.248</a></td>
<td><a href="http://1.179.250.249">1.179.250.249</a></td>
</tr>
<tr>
<td><a href="http://1.179.250.250">1.179.250.250</a></td>
<td><a href="http://1.179.250.251">1.179.250.251</a></td>
<td> </td>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Thailand</th>
</tr>
<tr>
<td><a href="http://1.179.251.4">1.179.251.4</a></td>
<td><a href="http://1.179.251.5">1.179.251.5</a></td>
<td><a href="http://1.179.251.6">1.179.251.6</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.7">1.179.251.7</a></td>
<td><a href="http://1.179.251.8">1.179.251.8</a></td>
<td><a href="http://1.179.251.9">1.179.251.9</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.10">1.179.251.10</a></td>
<td><a href="http://1.179.251.11">1.179.251.11</a></td>
<td><a href="http://1.179.251.12">1.179.251.12</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.13">1.179.251.13</a></td>
<td><a href="http://1.179.251.14">1.179.251.14</a></td>
<td><a href="http://1.179.251.15">1.179.251.15</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.16">1.179.251.16</a></td>
<td><a href="http://1.179.251.17">1.179.251.17</a></td>
<td><a href="http://1.179.251.18">1.179.251.18</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.19">1.179.251.19</a></td>
<td><a href="http://1.179.251.20">1.179.251.20</a></td>
<td><a href="http://1.179.251.21">1.179.251.21</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.22">1.179.251.22</a></td>
<td><a href="http://1.179.251.23">1.179.251.23</a></td>
<td><a href="http://1.179.251.24">1.179.251.24</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.25">1.179.251.25</a></td>
<td><a href="http://1.179.251.26">1.179.251.26</a></td>
<td><a href="http://1.179.251.27">1.179.251.27</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.28">1.179.251.28</a></td>
<td><a href="http://1.179.251.29">1.179.251.29</a></td>
<td><a href="http://1.179.251.30">1.179.251.30</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.31">1.179.251.31</a></td>
<td><a href="http://1.179.251.32">1.179.251.32</a></td>
<td><a href="http://1.179.251.33">1.179.251.33</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.34">1.179.251.34</a></td>
<td><a href="http://1.179.251.35">1.179.251.35</a></td>
<td><a href="http://1.179.251.36">1.179.251.36</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.37">1.179.251.37</a></td>
<td><a href="http://1.179.251.38">1.179.251.38</a></td>
<td><a href="http://1.179.251.39">1.179.251.39</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.40">1.179.251.40</a></td>
<td><a href="http://1.179.251.41">1.179.251.41</a></td>
<td><a href="http://1.179.251.42">1.179.251.42</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.43">1.179.251.43</a></td>
<td><a href="http://1.179.251.44">1.179.251.44</a></td>
<td><a href="http://1.179.251.45">1.179.251.45</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.46">1.179.251.46</a></td>
<td><a href="http://1.179.251.47">1.179.251.47</a></td>
<td><a href="http://1.179.251.48">1.179.251.48</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.49">1.179.251.49</a></td>
<td><a href="http://1.179.251.50">1.179.251.50</a></td>
<td><a href="http://1.179.251.51">1.179.251.51</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.52">1.179.251.52</a></td>
<td><a href="http://1.179.251.53">1.179.251.53</a></td>
<td><a href="http://1.179.251.54">1.179.251.54</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.55">1.179.251.55</a></td>
<td><a href="http://1.179.251.56">1.179.251.56</a></td>
<td><a href="http://1.179.251.57">1.179.251.57</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.58">1.179.251.58</a></td>
<td><a href="http://1.179.251.59">1.179.251.59</a></td>
<td><a href="http://1.179.251.68">1.179.251.68</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.69">1.179.251.69</a></td>
<td><a href="http://1.179.251.70">1.179.251.70</a></td>
<td><a href="http://1.179.251.71">1.179.251.71</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.72">1.179.251.72</a></td>
<td><a href="http://1.179.251.73">1.179.251.73</a></td>
<td><a href="http://1.179.251.74">1.179.251.74</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.75">1.179.251.75</a></td>
<td><a href="http://1.179.251.76">1.179.251.76</a></td>
<td><a href="http://1.179.251.77">1.179.251.77</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.78">1.179.251.78</a></td>
<td><a href="http://1.179.251.79">1.179.251.79</a></td>
<td><a href="http://1.179.251.80">1.179.251.80</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.81">1.179.251.81</a></td>
<td><a href="http://1.179.251.82">1.179.251.82</a></td>
<td><a href="http://1.179.251.83">1.179.251.83</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.84">1.179.251.84</a></td>
<td><a href="http://1.179.251.85">1.179.251.85</a></td>
<td><a href="http://1.179.251.86">1.179.251.86</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.87">1.179.251.87</a></td>
<td><a href="http://1.179.251.88">1.179.251.88</a></td>
<td><a href="http://1.179.251.89">1.179.251.89</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.90">1.179.251.90</a></td>
<td><a href="http://1.179.251.91">1.179.251.91</a></td>
<td><a href="http://1.179.251.92">1.179.251.92</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.93">1.179.251.93</a></td>
<td><a href="http://1.179.251.94">1.179.251.94</a></td>
<td><a href="http://1.179.251.95">1.179.251.95</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.96">1.179.251.96</a></td>
<td><a href="http://1.179.251.97">1.179.251.97</a></td>
<td><a href="http://1.179.251.98">1.179.251.98</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.99">1.179.251.99</a></td>
<td><a href="http://1.179.251.100">1.179.251.100</a></td>
<td><a href="http://1.179.251.101">1.179.251.101</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.102">1.179.251.102</a></td>
<td><a href="http://1.179.251.103">1.179.251.103</a></td>
<td><a href="http://1.179.251.104">1.179.251.104</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.105">1.179.251.105</a></td>
<td><a href="http://1.179.251.106">1.179.251.106</a></td>
<td><a href="http://1.179.251.107">1.179.251.107</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.108">1.179.251.108</a></td>
<td><a href="http://1.179.251.109">1.179.251.109</a></td>
<td><a href="http://1.179.251.110">1.179.251.110</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.111">1.179.251.111</a></td>
<td><a href="http://1.179.251.112">1.179.251.112</a></td>
<td><a href="http://1.179.251.113">1.179.251.113</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.114">1.179.251.114</a></td>
<td><a href="http://1.179.251.115">1.179.251.115</a></td>
<td><a href="http://1.179.251.116">1.179.251.116</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.117">1.179.251.117</a></td>
<td><a href="http://1.179.251.118">1.179.251.118</a></td>
<td><a href="http://1.179.251.119">1.179.251.119</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.120">1.179.251.120</a></td>
<td><a href="http://1.179.251.121">1.179.251.121</a></td>
<td><a href="http://1.179.251.122">1.179.251.122</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.123">1.179.251.123</a></td>
<td><a href="http://1.179.251.140">1.179.251.140</a></td>
<td><a href="http://1.179.251.141">1.179.251.141</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.142">1.179.251.142</a></td>
<td><a href="http://1.179.251.143">1.179.251.143</a></td>
<td><a href="http://1.179.251.144">1.179.251.144</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.145">1.179.251.145</a></td>
<td><a href="http://1.179.251.146">1.179.251.146</a></td>
<td><a href="http://1.179.251.147">1.179.251.147</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.148">1.179.251.148</a></td>
<td><a href="http://1.179.251.149">1.179.251.149</a></td>
<td><a href="http://1.179.251.150">1.179.251.150</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.151">1.179.251.151</a></td>
<td><a href="http://1.179.251.152">1.179.251.152</a></td>
<td><a href="http://1.179.251.153">1.179.251.153</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.154">1.179.251.154</a></td>
<td><a href="http://1.179.251.155">1.179.251.155</a></td>
<td><a href="http://1.179.251.156">1.179.251.156</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.157">1.179.251.157</a></td>
<td><a href="http://1.179.251.158">1.179.251.158</a></td>
<td><a href="http://1.179.251.159">1.179.251.159</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.160">1.179.251.160</a></td>
<td><a href="http://1.179.251.161">1.179.251.161</a></td>
<td><a href="http://1.179.251.162">1.179.251.162</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.163">1.179.251.163</a></td>
<td><a href="http://1.179.251.164">1.179.251.164</a></td>
<td><a href="http://1.179.251.165">1.179.251.165</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.166">1.179.251.166</a></td>
<td><a href="http://1.179.251.167">1.179.251.167</a></td>
<td><a href="http://1.179.251.168">1.179.251.168</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.169">1.179.251.169</a></td>
<td><a href="http://1.179.251.170">1.179.251.170</a></td>
<td><a href="http://1.179.251.171">1.179.251.171</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.172">1.179.251.172</a></td>
<td><a href="http://1.179.251.173">1.179.251.173</a></td>
<td><a href="http://1.179.251.174">1.179.251.174</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.175">1.179.251.175</a></td>
<td><a href="http://1.179.251.176">1.179.251.176</a></td>
<td><a href="http://1.179.251.177">1.179.251.177</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.178">1.179.251.178</a></td>
<td><a href="http://1.179.251.179">1.179.251.179</a></td>
<td><a href="http://1.179.251.180">1.179.251.180</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.181">1.179.251.181</a></td>
<td><a href="http://1.179.251.182">1.179.251.182</a></td>
<td><a href="http://1.179.251.183">1.179.251.183</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.184">1.179.251.184</a></td>
<td><a href="http://1.179.251.185">1.179.251.185</a></td>
<td><a href="http://1.179.251.186">1.179.251.186</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.187">1.179.251.187</a></td>
<td><a href="http://1.179.251.196">1.179.251.196</a></td>
<td><a href="http://1.179.251.197">1.179.251.197</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.198">1.179.251.198</a></td>
<td><a href="http://1.179.251.199">1.179.251.199</a></td>
<td><a href="http://1.179.251.200">1.179.251.200</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.201">1.179.251.201</a></td>
<td><a href="http://1.179.251.202">1.179.251.202</a></td>
<td><a href="http://1.179.251.203">1.179.251.203</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.204">1.179.251.204</a></td>
<td><a href="http://1.179.251.205">1.179.251.205</a></td>
<td><a href="http://1.179.251.206">1.179.251.206</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.207">1.179.251.207</a></td>
<td><a href="http://1.179.251.208">1.179.251.208</a></td>
<td><a href="http://1.179.251.209">1.179.251.209</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.210">1.179.251.210</a></td>
<td><a href="http://1.179.251.211">1.179.251.211</a></td>
<td><a href="http://1.179.251.212">1.179.251.212</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.213">1.179.251.213</a></td>
<td><a href="http://1.179.251.214">1.179.251.214</a></td>
<td><a href="http://1.179.251.215">1.179.251.215</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.216">1.179.251.216</a></td>
<td><a href="http://1.179.251.217">1.179.251.217</a></td>
<td><a href="http://1.179.251.218">1.179.251.218</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.219">1.179.251.219</a></td>
<td><a href="http://1.179.251.220">1.179.251.220</a></td>
<td><a href="http://1.179.251.221">1.179.251.221</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.222">1.179.251.222</a></td>
<td><a href="http://1.179.251.223">1.179.251.223</a></td>
<td><a href="http://1.179.251.224">1.179.251.224</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.225">1.179.251.225</a></td>
<td><a href="http://1.179.251.226">1.179.251.226</a></td>
<td><a href="http://1.179.251.227">1.179.251.227</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.228">1.179.251.228</a></td>
<td><a href="http://1.179.251.229">1.179.251.229</a></td>
<td><a href="http://1.179.251.230">1.179.251.230</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.231">1.179.251.231</a></td>
<td><a href="http://1.179.251.232">1.179.251.232</a></td>
<td><a href="http://1.179.251.233">1.179.251.233</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.234">1.179.251.234</a></td>
<td><a href="http://1.179.251.235">1.179.251.235</a></td>
<td><a href="http://1.179.251.236">1.179.251.236</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.237">1.179.251.237</a></td>
<td><a href="http://1.179.251.238">1.179.251.238</a></td>
<td><a href="http://1.179.251.239">1.179.251.239</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.240">1.179.251.240</a></td>
<td><a href="http://1.179.251.241">1.179.251.241</a></td>
<td><a href="http://1.179.251.242">1.179.251.242</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.243">1.179.251.243</a></td>
<td><a href="http://1.179.251.244">1.179.251.244</a></td>
<td><a href="http://1.179.251.245">1.179.251.245</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.246">1.179.251.246</a></td>
<td><a href="http://1.179.251.247">1.179.251.247</a></td>
<td><a href="http://1.179.251.248">1.179.251.248</a></td>
</tr>
<tr>
<td><a href="http://1.179.251.249">1.179.251.249</a></td>
<td><a href="http://1.179.251.250">1.179.251.250</a></td>
<td><a href="http://1.179.251.251">1.179.251.251</a></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Thailand</th>
</tr>
<tr>
<td><a href="http://1.179.252.68">1.179.252.68</a></td>
<td><a href="http://1.179.252.69">1.179.252.69</a></td>
<td><a href="http://1.179.252.70">1.179.252.70</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.71">1.179.252.71</a></td>
<td><a href="http://1.179.252.72">1.179.252.72</a></td>
<td><a href="http://1.179.252.73">1.179.252.73</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.74">1.179.252.74</a></td>
<td><a href="http://1.179.252.75">1.179.252.75</a></td>
<td><a href="http://1.179.252.76">1.179.252.76</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.77">1.179.252.77</a></td>
<td><a href="http://1.179.252.78">1.179.252.78</a></td>
<td><a href="http://1.179.252.79">1.179.252.79</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.80">1.179.252.80</a></td>
<td><a href="http://1.179.252.81">1.179.252.81</a></td>
<td><a href="http://1.179.252.82">1.179.252.82</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.83">1.179.252.83</a></td>
<td><a href="http://1.179.252.84">1.179.252.84</a></td>
<td><a href="http://1.179.252.85">1.179.252.85</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.86">1.179.252.86</a></td>
<td><a href="http://1.179.252.87">1.179.252.87</a></td>
<td><a href="http://1.179.252.88">1.179.252.88</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.89">1.179.252.89</a></td>
<td><a href="http://1.179.252.90">1.179.252.90</a></td>
<td><a href="http://1.179.252.91">1.179.252.91</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.92">1.179.252.92</a></td>
<td><a href="http://1.179.252.93">1.179.252.93</a></td>
<td><a href="http://1.179.252.94">1.179.252.94</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.95">1.179.252.95</a></td>
<td><a href="http://1.179.252.96">1.179.252.96</a></td>
<td><a href="http://1.179.252.97">1.179.252.97</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.98">1.179.252.98</a></td>
<td><a href="http://1.179.252.99">1.179.252.99</a></td>
<td><a href="http://1.179.252.100">1.179.252.100</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.101">1.179.252.101</a></td>
<td><a href="http://1.179.252.102">1.179.252.102</a></td>
<td><a href="http://1.179.252.103">1.179.252.103</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.104">1.179.252.104</a></td>
<td><a href="http://1.179.252.105">1.179.252.105</a></td>
<td><a href="http://1.179.252.106">1.179.252.106</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.107">1.179.252.107</a></td>
<td><a href="http://1.179.252.108">1.179.252.108</a></td>
<td><a href="http://1.179.252.109">1.179.252.109</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.110">1.179.252.110</a></td>
<td><a href="http://1.179.252.111">1.179.252.111</a></td>
<td><a href="http://1.179.252.112">1.179.252.112</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.113">1.179.252.113</a></td>
<td><a href="http://1.179.252.114">1.179.252.114</a></td>
<td><a href="http://1.179.252.115">1.179.252.115</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.116">1.179.252.116</a></td>
<td><a href="http://1.179.252.117">1.179.252.117</a></td>
<td><a href="http://1.179.252.118">1.179.252.118</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.119">1.179.252.119</a></td>
<td><a href="http://1.179.252.120">1.179.252.120</a></td>
<td><a href="http://1.179.252.121">1.179.252.121</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.122">1.179.252.122</a></td>
<td><a href="http://1.179.252.123">1.179.252.123</a></td>
<td><a href="http://1.179.252.132">1.179.252.132</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.133">1.179.252.133</a></td>
<td><a href="http://1.179.252.134">1.179.252.134</a></td>
<td><a href="http://1.179.252.135">1.179.252.135</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.136">1.179.252.136</a></td>
<td><a href="http://1.179.252.137">1.179.252.137</a></td>
<td><a href="http://1.179.252.138">1.179.252.138</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.139">1.179.252.139</a></td>
<td><a href="http://1.179.252.140">1.179.252.140</a></td>
<td><a href="http://1.179.252.141">1.179.252.141</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.142">1.179.252.142</a></td>
<td><a href="http://1.179.252.143">1.179.252.143</a></td>
<td><a href="http://1.179.252.144">1.179.252.144</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.145">1.179.252.145</a></td>
<td><a href="http://1.179.252.146">1.179.252.146</a></td>
<td><a href="http://1.179.252.147">1.179.252.147</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.148">1.179.252.148</a></td>
<td><a href="http://1.179.252.149">1.179.252.149</a></td>
<td><a href="http://1.179.252.150">1.179.252.150</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.151">1.179.252.151</a></td>
<td><a href="http://1.179.252.152">1.179.252.152</a></td>
<td><a href="http://1.179.252.153">1.179.252.153</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.154">1.179.252.154</a></td>
<td><a href="http://1.179.252.155">1.179.252.155</a></td>
<td><a href="http://1.179.252.156">1.179.252.156</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.157">1.179.252.157</a></td>
<td><a href="http://1.179.252.158">1.179.252.158</a></td>
<td><a href="http://1.179.252.159">1.179.252.159</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.160">1.179.252.160</a></td>
<td><a href="http://1.179.252.161">1.179.252.161</a></td>
<td><a href="http://1.179.252.162">1.179.252.162</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.163">1.179.252.163</a></td>
<td><a href="http://1.179.252.164">1.179.252.164</a></td>
<td><a href="http://1.179.252.165">1.179.252.165</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.166">1.179.252.166</a></td>
<td><a href="http://1.179.252.167">1.179.252.167</a></td>
<td><a href="http://1.179.252.168">1.179.252.168</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.169">1.179.252.169</a></td>
<td><a href="http://1.179.252.170">1.179.252.170</a></td>
<td><a href="http://1.179.252.171">1.179.252.171</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.172">1.179.252.172</a></td>
<td><a href="http://1.179.252.173">1.179.252.173</a></td>
<td><a href="http://1.179.252.174">1.179.252.174</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.175">1.179.252.175</a></td>
<td><a href="http://1.179.252.176">1.179.252.176</a></td>
<td><a href="http://1.179.252.177">1.179.252.177</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.178">1.179.252.178</a></td>
<td><a href="http://1.179.252.179">1.179.252.179</a></td>
<td><a href="http://1.179.252.180">1.179.252.180</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.181">1.179.252.181</a></td>
<td><a href="http://1.179.252.182">1.179.252.182</a></td>
<td><a href="http://1.179.252.183">1.179.252.183</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.184">1.179.252.184</a></td>
<td><a href="http://1.179.252.185">1.179.252.185</a></td>
<td><a href="http://1.179.252.186">1.179.252.186</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.187">1.179.252.187</a></td>
<td><a href="http://1.179.252.196">1.179.252.196</a></td>
<td><a href="http://1.179.252.197">1.179.252.197</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.198">1.179.252.198</a></td>
<td><a href="http://1.179.252.199">1.179.252.199</a></td>
<td><a href="http://1.179.252.200">1.179.252.200</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.201">1.179.252.201</a></td>
<td><a href="http://1.179.252.202">1.179.252.202</a></td>
<td><a href="http://1.179.252.203">1.179.252.203</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.204">1.179.252.204</a></td>
<td><a href="http://1.179.252.205">1.179.252.205</a></td>
<td><a href="http://1.179.252.206">1.179.252.206</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.207">1.179.252.207</a></td>
<td><a href="http://1.179.252.208">1.179.252.208</a></td>
<td><a href="http://1.179.252.209">1.179.252.209</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.210">1.179.252.210</a></td>
<td><a href="http://1.179.252.211">1.179.252.211</a></td>
<td><a href="http://1.179.252.212">1.179.252.212</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.213">1.179.252.213</a></td>
<td><a href="http://1.179.252.214">1.179.252.214</a></td>
<td><a href="http://1.179.252.215">1.179.252.215</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.216">1.179.252.216</a></td>
<td><a href="http://1.179.252.217">1.179.252.217</a></td>
<td><a href="http://1.179.252.218">1.179.252.218</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.219">1.179.252.219</a></td>
<td><a href="http://1.179.252.220">1.179.252.220</a></td>
<td><a href="http://1.179.252.221">1.179.252.221</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.222">1.179.252.222</a></td>
<td><a href="http://1.179.252.223">1.179.252.223</a></td>
<td><a href="http://1.179.252.224">1.179.252.224</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.225">1.179.252.225</a></td>
<td><a href="http://1.179.252.226">1.179.252.226</a></td>
<td><a href="http://1.179.252.227">1.179.252.227</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.228">1.179.252.228</a></td>
<td><a href="http://1.179.252.229">1.179.252.229</a></td>
<td><a href="http://1.179.252.230">1.179.252.230</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.231">1.179.252.231</a></td>
<td><a href="http://1.179.252.232">1.179.252.232</a></td>
<td><a href="http://1.179.252.233">1.179.252.233</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.234">1.179.252.234</a></td>
<td><a href="http://1.179.252.235">1.179.252.235</a></td>
<td><a href="http://1.179.252.236">1.179.252.236</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.237">1.179.252.237</a></td>
<td><a href="http://1.179.252.238">1.179.252.238</a></td>
<td><a href="http://1.179.252.239">1.179.252.239</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.240">1.179.252.240</a></td>
<td><a href="http://1.179.252.241">1.179.252.241</a></td>
<td><a href="http://1.179.252.242">1.179.252.242</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.243">1.179.252.243</a></td>
<td><a href="http://1.179.252.244">1.179.252.244</a></td>
<td><a href="http://1.179.252.245">1.179.252.245</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.246">1.179.252.246</a></td>
<td><a href="http://1.179.252.247">1.179.252.247</a></td>
<td><a href="http://1.179.252.248">1.179.252.248</a></td>
</tr>
<tr>
<td><a href="http://1.179.252.249">1.179.252.249</a></td>
<td><a href="http://1.179.252.250">1.179.252.250</a></td>
<td><a href="http://1.179.252.251">1.179.252.251</a></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Thailand</th>
</tr>
<tr>
<td><a href="http://1.179.253.4">1.179.253.4</a></td>
<td><a href="http://1.179.253.5">1.179.253.5</a></td>
<td><a href="http://1.179.253.6">1.179.253.6</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.7">1.179.253.7</a></td>
<td><a href="http://1.179.253.8">1.179.253.8</a></td>
<td><a href="http://1.179.253.9">1.179.253.9</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.10">1.179.253.10</a></td>
<td><a href="http://1.179.253.11">1.179.253.11</a></td>
<td><a href="http://1.179.253.12">1.179.253.12</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.13">1.179.253.13</a></td>
<td><a href="http://1.179.253.14">1.179.253.14</a></td>
<td><a href="http://1.179.253.15">1.179.253.15</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.16">1.179.253.16</a></td>
<td><a href="http://1.179.253.17">1.179.253.17</a></td>
<td><a href="http://1.179.253.18">1.179.253.18</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.19">1.179.253.19</a></td>
<td><a href="http://1.179.253.20">1.179.253.20</a></td>
<td><a href="http://1.179.253.21">1.179.253.21</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.22">1.179.253.22</a></td>
<td><a href="http://1.179.253.23">1.179.253.23</a></td>
<td><a href="http://1.179.253.24">1.179.253.24</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.25">1.179.253.25</a></td>
<td><a href="http://1.179.253.26">1.179.253.26</a></td>
<td><a href="http://1.179.253.27">1.179.253.27</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.28">1.179.253.28</a></td>
<td><a href="http://1.179.253.29">1.179.253.29</a></td>
<td><a href="http://1.179.253.30">1.179.253.30</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.31">1.179.253.31</a></td>
<td><a href="http://1.179.253.32">1.179.253.32</a></td>
<td><a href="http://1.179.253.33">1.179.253.33</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.34">1.179.253.34</a></td>
<td><a href="http://1.179.253.35">1.179.253.35</a></td>
<td><a href="http://1.179.253.36">1.179.253.36</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.37">1.179.253.37</a></td>
<td><a href="http://1.179.253.38">1.179.253.38</a></td>
<td><a href="http://1.179.253.39">1.179.253.39</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.40">1.179.253.40</a></td>
<td><a href="http://1.179.253.41">1.179.253.41</a></td>
<td><a href="http://1.179.253.42">1.179.253.42</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.43">1.179.253.43</a></td>
<td><a href="http://1.179.253.44">1.179.253.44</a></td>
<td><a href="http://1.179.253.45">1.179.253.45</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.46">1.179.253.46</a></td>
<td><a href="http://1.179.253.47">1.179.253.47</a></td>
<td><a href="http://1.179.253.48">1.179.253.48</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.49">1.179.253.49</a></td>
<td><a href="http://1.179.253.50">1.179.253.50</a></td>
<td><a href="http://1.179.253.51">1.179.253.51</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.52">1.179.253.52</a></td>
<td><a href="http://1.179.253.53">1.179.253.53</a></td>
<td><a href="http://1.179.253.54">1.179.253.54</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.55">1.179.253.55</a></td>
<td><a href="http://1.179.253.56">1.179.253.56</a></td>
<td><a href="http://1.179.253.57">1.179.253.57</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.58">1.179.253.58</a></td>
<td><a href="http://1.179.253.59">1.179.253.59</a></td>
<td><a href="http://1.179.253.76">1.179.253.76</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.77">1.179.253.77</a></td>
<td><a href="http://1.179.253.78">1.179.253.78</a></td>
<td><a href="http://1.179.253.79">1.179.253.79</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.80">1.179.253.80</a></td>
<td><a href="http://1.179.253.81">1.179.253.81</a></td>
<td><a href="http://1.179.253.82">1.179.253.82</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.83">1.179.253.83</a></td>
<td><a href="http://1.179.253.84">1.179.253.84</a></td>
<td><a href="http://1.179.253.85">1.179.253.85</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.86">1.179.253.86</a></td>
<td><a href="http://1.179.253.87">1.179.253.87</a></td>
<td><a href="http://1.179.253.88">1.179.253.88</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.89">1.179.253.89</a></td>
<td><a href="http://1.179.253.90">1.179.253.90</a></td>
<td><a href="http://1.179.253.91">1.179.253.91</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.92">1.179.253.92</a></td>
<td><a href="http://1.179.253.93">1.179.253.93</a></td>
<td><a href="http://1.179.253.94">1.179.253.94</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.95">1.179.253.95</a></td>
<td><a href="http://1.179.253.96">1.179.253.96</a></td>
<td><a href="http://1.179.253.97">1.179.253.97</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.98">1.179.253.98</a></td>
<td><a href="http://1.179.253.99">1.179.253.99</a></td>
<td><a href="http://1.179.253.100">1.179.253.100</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.101">1.179.253.101</a></td>
<td><a href="http://1.179.253.102">1.179.253.102</a></td>
<td><a href="http://1.179.253.103">1.179.253.103</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.104">1.179.253.104</a></td>
<td><a href="http://1.179.253.105">1.179.253.105</a></td>
<td><a href="http://1.179.253.106">1.179.253.106</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.107">1.179.253.107</a></td>
<td><a href="http://1.179.253.108">1.179.253.108</a></td>
<td><a href="http://1.179.253.109">1.179.253.109</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.110">1.179.253.110</a></td>
<td><a href="http://1.179.253.111">1.179.253.111</a></td>
<td><a href="http://1.179.253.112">1.179.253.112</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.113">1.179.253.113</a></td>
<td><a href="http://1.179.253.114">1.179.253.114</a></td>
<td><a href="http://1.179.253.115">1.179.253.115</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.116">1.179.253.116</a></td>
<td><a href="http://1.179.253.117">1.179.253.117</a></td>
<td><a href="http://1.179.253.118">1.179.253.118</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.119">1.179.253.119</a></td>
<td><a href="http://1.179.253.120">1.179.253.120</a></td>
<td><a href="http://1.179.253.121">1.179.253.121</a></td>
</tr>
<tr>
<td><a href="http://1.179.253.122">1.179.253.122</a></td>
<td><a href="http://1.179.253.123">1.179.253.123</a></td>
<td> </td>
<tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
<tr>
<th colspan="3">Thailand</th>
</tr>
<tr>
<td><a href="http://118.174.25.4">118.174.25.4</a></td>
<td><a href="http://118.174.25.5">118.174.25.5</a></td>
<td><a href="http://118.174.25.6">118.174.25.6</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.7">118.174.25.7</a></td>
<td><a href="http://118.174.25.8">118.174.25.8</a></td>
<td><a href="http://118.174.25.9">118.174.25.9</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.10">118.174.25.10</a></td>
<td><a href="http://118.174.25.11">118.174.25.11</a></td>
<td><a href="http://118.174.25.12">118.174.25.12</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.13">118.174.25.13</a></td>
<td><a href="http://118.174.25.14">118.174.25.14</a></td>
<td><a href="http://118.174.25.15">118.174.25.15</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.16">118.174.25.16</a></td>
<td><a href="http://118.174.25.17">118.174.25.17</a></td>
<td><a href="http://118.174.25.18">118.174.25.18</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.19">118.174.25.19</a></td>
<td><a href="http://118.174.25.20">118.174.25.20</a></td>
<td><a href="http://118.174.25.21">118.174.25.21</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.22">118.174.25.22</a></td>
<td><a href="http://118.174.25.23">118.174.25.23</a></td>
<td><a href="http://118.174.25.24">118.174.25.24</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.25">118.174.25.25</a></td>
<td><a href="http://118.174.25.26">118.174.25.26</a></td>
<td><a href="http://118.174.25.27">118.174.25.27</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.28">118.174.25.28</a></td>
<td><a href="http://118.174.25.29">118.174.25.29</a></td>
<td><a href="http://118.174.25.30">118.174.25.30</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.31">118.174.25.31</a></td>
<td><a href="http://118.174.25.32">118.174.25.32</a></td>
<td><a href="http://118.174.25.33">118.174.25.33</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.34">118.174.25.34</a></td>
<td><a href="http://118.174.25.35">118.174.25.35</a></td>
<td><a href="http://118.174.25.36">118.174.25.36</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.37">118.174.25.37</a></td>
<td><a href="http://118.174.25.38">118.174.25.38</a></td>
<td><a href="http://118.174.25.39">118.174.25.39</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.40">118.174.25.40</a></td>
<td><a href="http://118.174.25.41">118.174.25.41</a></td>
<td><a href="http://118.174.25.42">118.174.25.42</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.43">118.174.25.43</a></td>
<td><a href="http://118.174.25.44">118.174.25.44</a></td>
<td><a href="http://118.174.25.45">118.174.25.45</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.46">118.174.25.46</a></td>
<td><a href="http://118.174.25.47">118.174.25.47</a></td>
<td><a href="http://118.174.25.48">118.174.25.48</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.49">118.174.25.49</a></td>
<td><a href="http://118.174.25.50">118.174.25.50</a></td>
<td><a href="http://118.174.25.51">118.174.25.51</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.52">118.174.25.52</a></td>
<td><a href="http://118.174.25.53">118.174.25.53</a></td>
<td><a href="http://118.174.25.54">118.174.25.54</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.55">118.174.25.55</a></td>
<td><a href="http://118.174.25.56">118.174.25.56</a></td>
<td><a href="http://118.174.25.57">118.174.25.57</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.58">118.174.25.58</a></td>
<td><a href="http://118.174.25.59">118.174.25.59</a></td>
<td><a href="http://118.174.25.68">118.174.25.68</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.69">118.174.25.69</a></td>
<td><a href="http://118.174.25.70">118.174.25.70</a></td>
<td><a href="http://118.174.25.71">118.174.25.71</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.72">118.174.25.72</a></td>
<td><a href="http://118.174.25.73">118.174.25.73</a></td>
<td><a href="http://118.174.25.74">118.174.25.74</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.75">118.174.25.75</a></td>
<td><a href="http://118.174.25.76">118.174.25.76</a></td>
<td><a href="http://118.174.25.77">118.174.25.77</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.78">118.174.25.78</a></td>
<td><a href="http://118.174.25.79">118.174.25.79</a></td>
<td><a href="http://118.174.25.80">118.174.25.80</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.81">118.174.25.81</a></td>
<td><a href="http://118.174.25.82">118.174.25.82</a></td>
<td><a href="http://118.174.25.83">118.174.25.83</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.84">118.174.25.84</a></td>
<td><a href="http://118.174.25.85">118.174.25.85</a></td>
<td><a href="http://118.174.25.86">118.174.25.86</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.87">118.174.25.87</a></td>
<td><a href="http://118.174.25.88">118.174.25.88</a></td>
<td><a href="http://118.174.25.89">118.174.25.89</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.90">118.174.25.90</a></td>
<td><a href="http://118.174.25.91">118.174.25.91</a></td>
<td><a href="http://118.174.25.92">118.174.25.92</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.93">118.174.25.93</a></td>
<td><a href="http://118.174.25.94">118.174.25.94</a></td>
<td><a href="http://118.174.25.95">118.174.25.95</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.96">118.174.25.96</a></td>
<td><a href="http://118.174.25.97">118.174.25.97</a></td>
<td><a href="http://118.174.25.98">118.174.25.98</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.99">118.174.25.99</a></td>
<td><a href="http://118.174.25.100">118.174.25.100</a></td>
<td><a href="http://118.174.25.101">118.174.25.101</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.102">118.174.25.102</a></td>
<td><a href="http://118.174.25.103">118.174.25.103</a></td>
<td><a href="http://118.174.25.104">118.174.25.104</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.105">118.174.25.105</a></td>
<td><a href="http://118.174.25.106">118.174.25.106</a></td>
<td><a href="http://118.174.25.107">118.174.25.107</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.108">118.174.25.108</a></td>
<td><a href="http://118.174.25.109">118.174.25.109</a></td>
<td><a href="http://118.174.25.110">118.174.25.110</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.111">118.174.25.111</a></td>
<td><a href="http://118.174.25.112">118.174.25.112</a></td>
<td><a href="http://118.174.25.113">118.174.25.113</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.114">118.174.25.114</a></td>
<td><a href="http://118.174.25.115">118.174.25.115</a></td>
<td><a href="http://118.174.25.116">118.174.25.116</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.117">118.174.25.117</a></td>
<td><a href="http://118.174.25.118">118.174.25.118</a></td>
<td><a href="http://118.174.25.119">118.174.25.119</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.120">118.174.25.120</a></td>
<td><a href="http://118.174.25.121">118.174.25.121</a></td>
<td><a href="http://118.174.25.122">118.174.25.122</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.123">118.174.25.123</a></td>
<td><a href="http://118.174.25.132">118.174.25.132</a></td>
<td><a href="http://118.174.25.133">118.174.25.133</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.134">118.174.25.134</a></td>
<td><a href="http://118.174.25.135">118.174.25.135</a></td>
<td><a href="http://118.174.25.136">118.174.25.136</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.137">118.174.25.137</a></td>
<td><a href="http://118.174.25.138">118.174.25.138</a></td>
<td><a href="http://118.174.25.139">118.174.25.139</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.140">118.174.25.140</a></td>
<td><a href="http://118.174.25.141">118.174.25.141</a></td>
<td><a href="http://118.174.25.142">118.174.25.142</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.143">118.174.25.143</a></td>
<td><a href="http://118.174.25.144">118.174.25.144</a></td>
<td><a href="http://118.174.25.145">118.174.25.145</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.146">118.174.25.146</a></td>
<td><a href="http://118.174.25.147">118.174.25.147</a></td>
<td><a href="http://118.174.25.148">118.174.25.148</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.149">118.174.25.149</a></td>
<td><a href="http://118.174.25.150">118.174.25.150</a></td>
<td><a href="http://118.174.25.151">118.174.25.151</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.152">118.174.25.152</a></td>
<td><a href="http://118.174.25.153">118.174.25.153</a></td>
<td><a href="http://118.174.25.154">118.174.25.154</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.155">118.174.25.155</a></td>
<td><a href="http://118.174.25.156">118.174.25.156</a></td>
<td><a href="http://118.174.25.157">118.174.25.157</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.158">118.174.25.158</a></td>
<td><a href="http://118.174.25.159">118.174.25.159</a></td>
<td><a href="http://118.174.25.160">118.174.25.160</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.161">118.174.25.161</a></td>
<td><a href="http://118.174.25.162">118.174.25.162</a></td>
<td><a href="http://118.174.25.163">118.174.25.163</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.164">118.174.25.164</a></td>
<td><a href="http://118.174.25.165">118.174.25.165</a></td>
<td><a href="http://118.174.25.166">118.174.25.166</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.167">118.174.25.167</a></td>
<td><a href="http://118.174.25.168">118.174.25.168</a></td>
<td><a href="http://118.174.25.169">118.174.25.169</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.170">118.174.25.170</a></td>
<td><a href="http://118.174.25.171">118.174.25.171</a></td>
<td><a href="http://118.174.25.172">118.174.25.172</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.173">118.174.25.173</a></td>
<td><a href="http://118.174.25.174">118.174.25.174</a></td>
<td><a href="http://118.174.25.175">118.174.25.175</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.176">118.174.25.176</a></td>
<td><a href="http://118.174.25.177">118.174.25.177</a></td>
<td><a href="http://118.174.25.178">118.174.25.178</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.179">118.174.25.179</a></td>
<td><a href="http://118.174.25.180">118.174.25.180</a></td>
<td><a href="http://118.174.25.181">118.174.25.181</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.182">118.174.25.182</a></td>
<td><a href="http://118.174.25.183">118.174.25.183</a></td>
<td><a href="http://118.174.25.184">118.174.25.184</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.185">118.174.25.185</a></td>
<td><a href="http://118.174.25.186">118.174.25.186</a></td>
<td><a href="http://118.174.25.187">118.174.25.187</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.196">118.174.25.196</a></td>
<td><a href="http://118.174.25.197">118.174.25.197</a></td>
<td><a href="http://118.174.25.198">118.174.25.198</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.199">118.174.25.199</a></td>
<td><a href="http://118.174.25.200">118.174.25.200</a></td>
<td><a href="http://118.174.25.201">118.174.25.201</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.202">118.174.25.202</a></td>
<td><a href="http://118.174.25.203">118.174.25.203</a></td>
<td><a href="http://118.174.25.204">118.174.25.204</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.205">118.174.25.205</a></td>
<td><a href="http://118.174.25.206">118.174.25.206</a></td>
<td><a href="http://118.174.25.207">118.174.25.207</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.208">118.174.25.208</a></td>
<td><a href="http://118.174.25.209">118.174.25.209</a></td>
<td><a href="http://118.174.25.210">118.174.25.210</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.211">118.174.25.211</a></td>
<td><a href="http://118.174.25.212">118.174.25.212</a></td>
<td><a href="http://118.174.25.213">118.174.25.213</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.214">118.174.25.214</a></td>
<td><a href="http://118.174.25.215">118.174.25.215</a></td>
<td><a href="http://118.174.25.216">118.174.25.216</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.217">118.174.25.217</a></td>
<td><a href="http://118.174.25.218">118.174.25.218</a></td>
<td><a href="http://118.174.25.219">118.174.25.219</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.220">118.174.25.220</a></td>
<td><a href="http://118.174.25.221">118.174.25.221</a></td>
<td><a href="http://118.174.25.222">118.174.25.222</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.223">118.174.25.223</a></td>
<td><a href="http://118.174.25.224">118.174.25.224</a></td>
<td><a href="http://118.174.25.225">118.174.25.225</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.226">118.174.25.226</a></td>
<td><a href="http://118.174.25.227">118.174.25.227</a></td>
<td><a href="http://118.174.25.228">118.174.25.228</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.229">118.174.25.229</a></td>
<td><a href="http://118.174.25.230">118.174.25.230</a></td>
<td><a href="http://118.174.25.231">118.174.25.231</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.232">118.174.25.232</a></td>
<td><a href="http://118.174.25.233">118.174.25.233</a></td>
<td><a href="http://118.174.25.234">118.174.25.234</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.235">118.174.25.235</a></td>
<td><a href="http://118.174.25.236">118.174.25.236</a></td>
<td><a href="http://118.174.25.237">118.174.25.237</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.238">118.174.25.238</a></td>
<td><a href="http://118.174.25.239">118.174.25.239</a></td>
<td><a href="http://118.174.25.240">118.174.25.240</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.241">118.174.25.241</a></td>
<td><a href="http://118.174.25.242">118.174.25.242</a></td>
<td><a href="http://118.174.25.243">118.174.25.243</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.244">118.174.25.244</a></td>
<td><a href="http://118.174.25.245">118.174.25.245</a></td>
<td><a href="http://118.174.25.246">118.174.25.246</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.247">118.174.25.247</a></td>
<td><a href="http://118.174.25.248">118.174.25.248</a></td>
<td><a href="http://118.174.25.249">118.174.25.249</a></td>
</tr>
<tr>
<td><a href="http://118.174.25.250">118.174.25.250</a></td>
<td><a href="http://118.174.25.251">118.174.25.251</a></td>
<td></td>
</tr>
<td colspan="3"><a href="#">Top</a></td>
</tr>
</tbody>
</table>
IP 地址来源:<a href="http://www.kookle.co.nr">http://www.kookle.co.nr</a>
</tr></tr></tr></tr></tr></tr></tr></tbody></table>
WEB前端工程师现状
2014-06-09T00:00:00+00:00
http://wangdaodao.github.io/2014-06-09/web-frontend-engineer-status
<p>其实,这个话题早就想吐槽了,今天早晨实在是忍不住的说一下!</p>
<p>业内多数公司都存在这样一些不幸的现象:除了少数的前端设计师之外,大部分的前端设计人员都没有得到公司领导应有的认可,前端开发人员所要担当的责任及履行的义务和他们所获得的待遇处于一种不对等的状态,这样的环境造成了前端开发人员的职业发展受到了严重影响。<strong>某些领导</strong>甚至这样认为做页面很简单,没有工作经验的人也能胜任前端开发的职位,还省时、省力、省工。在大家的意识里,前端开发人员似乎就是公司中地位较低微的人员,<strong>没有什么晋升机会,只会写页面。</strong>如今,很多人认为前端开发人员的工作只是做页面,这无疑是一种悲哀。<strong>如果遇见这样的公司,还是趁早的放弃吧,在这里前端是没有出路的……</strong></p>
<p>再来看看web前端需要的技能,感觉压力好大(简直是全才)!</p>
<p><img src="/uploads/2014/06/web-frontend-engineer-status.jpg" alt="WEB前端工程师现状" /></p>
<p>我们先来看看作为一名合格的前端人员应该掌握或具备哪些技能:首先就得熟悉<em>HTML</em>,掌握<em>W3C</em>的标准,要学就得学最规范的标准。浏览器最少也要了解四五种,如<em>IE</em>、<em>Firefox</em>、<em>Chrome</em>等。样式也得掌握,以<em>CSS2</em>为主,多看看欧美牛人的风格DIV布局,特简约的那种。可用性也很重要,甭管有事没事总把用户放在心里,再买本工艺美术理论方面的书,有事没事就翻翻,设计个按钮就得花个七八天的时间。交互更重要,现在不是<em>Ajax</em>,就是<em>RIA</em>的,你要是用alert弹框啊,你都不好意思跟人家说去,这样学下去,得学多少年啊?两年时间?那是入门。四年以上?你还别嫌多,就是复杂。认真掂量下这些技术,学好其中的任何一门都要花好几年工夫。什么叫成功的前端开发人员?就是不但代码写得好,还要懂设计,懂美学。所以,前端开发的口号就是:不求最好,但求最全。</p>
<p>感觉玉伯说的挺好的:前端的确有价值,但放在全局来看,前端产生的价值并非核心价值。</p>
<p><a href="https://github.com/lifesinger/lifesinger.github.com/issues/141">阿里前端的困局与突围</a></p>
明日高考
2014-06-06T00:00:00+00:00
http://wangdaodao.github.io/2014-06-06/the-university-entrance-exam
<p>明天就该高考了!</p>
<p>时间过的真快,10年前的我,这时候也在备战高考……</p>
<p>可曾想现在的我竟然跑去了北京!</p>
<p>当时自己非要考一个好大学,现在想想,当时是多么幼稚……</p>
<p>如果时间能回到过去,我是把答案偷偷的告诉以前的自己,还是会告诉以前的自己不要太把高考当回事?</p>
<p>不,我应该偷偷的把我全部家当都买成头奖彩票,这样现在的我很可能就不会坐在电脑前面敲代码了!</p>
<p>那些参加高考的孩子,加油……</p>
互联网思维
2014-06-05T00:00:00+00:00
http://wangdaodao.github.io/2014-06-05/thinking-in-the-internet
<h2 id="互联网思维剑谱">互联网思维剑谱</h2>
<p><a href="/uploads/2014/06/thinking-in-the-internet.jpg"><img src="/uploads/2014/06/thinking-in-the-internet.jpg" alt="互联网思维剑谱" /></a></p>
<h2 id="互联网时代与工业时代的对比">互联网时代与工业时代的对比</h2>
<p><a href="/uploads/2014/06/thinking-in-the-internet4.jpg"><img src="/uploads/2014/06/thinking-in-the-internet4.jpg" alt="互联网时代与工业时代的对比" /></a></p>
<h2 id="互联网思维独孤九剑模型1">互联网思维“独孤九剑”模型(1)</h2>
<p><a href="/uploads/2014/06/thinking-in-the-internet2.jpg"><img src="/uploads/2014/06/thinking-in-the-internet2.jpg" alt="互联网思维“独孤九剑”模型(1)" /></a></p>
<h2 id="互联网思维独孤九剑模型2">互联网思维“独孤九剑”模型(2)</h2>
<p><a href="/uploads/2014/06/thinking-in-the-internet3.jpg"><img src="/uploads/2014/06/thinking-in-the-internet3.jpg" alt="互联网思维“独孤九剑”模型(1)" /></a></p>
<h2 id="1用户思维">1、用户思维</h2>
<p>“独孤九剑”第一招是总诀式,第一招学不会,后面的招数就很难领悟。互联网思维也一样。互联网思维,第一个,也是最重要的,就是用户思维。用户思维,是指在价值链各个环节中都要“以用户为中心”去考虑问题。</p>
<p>作为厂商,必须从整个价值链的各个环节,建立起“以用户为中心”的企业文化,只有深度理解用户才能生存。没有认同,就没有合同。</p>
<p>这里面有几个法则:</p>
<h3 id="法则1得屌丝者得天下">法则1:得“屌丝”者得天下。</h3>
<p>成功的互联网产品多抓住了“屌丝群体”、“草根一族”的需求。这是一个人人自称“屌丝”而骨子里认为自己是“高富帅”和“白富美”的时代。当你的产品不能让用户成为产品的一部分,不能和他们连接在一起,你的产品必然是失败的。QQ、百度、淘宝、微信、YY、小米,无一不是携“屌丝”以成霸业。</p>
<h3 id="法则2兜售参与感">法则2:兜售参与感。</h3>
<p>一种情况是按需定制,厂商提供满足用户个性化需求的产品即可,如海尔的定制化冰箱;另一种情况是在用户的参与中去优化产品,如淘品牌“七格格”,每次的新品上市,都会把设计的款式放到其管理的粉丝群组里,让粉丝投票,这些粉丝决定了最终的潮流趋势,自然也会为这些产品买单。</p>
<p>让用户参与品牌传播,便是粉丝经济。我们的品牌需要的是粉丝,而不只是用户,因为用户远没有粉丝那么忠诚。粉丝是最优质的目标消费者,一旦注入感情因素,有缺陷的产品也会被接受。未来,没有粉丝的品牌都会消亡。</p>
<p>电影《小时代》豆瓣评分不到5分,但这个电影观影人群的平均年龄只有22岁,这些粉丝正是郭敬明的富矿。正因为有大量的粉丝“护法”,《小时代1》《小时代2》才创造出累计超过7亿的票房神话。</p>
<h3 id="法则3体验至上">法则3:体验至上</h3>
<p>好的用户体验应该从细节开始,并贯穿于每一个细节,能够让用户有所感知,并且这种感知要超出用户预期,给用户带来惊喜,贯穿品牌与消费者沟通的整个链条,说白了,就是让消费者一直爽。微信新版本对公众账号的折叠处理,就是很典型的“用户体验至上”的选择。</p>
<p>用户思维体系涵盖了最经典的品牌营销的Who-What-How模型,Who,目标消费者——“屌丝”;What,消费者需求——兜售参与感;How,怎样实现——全程用户体验至上。</p>
<hr />
<h2 id="2简约思维">2、简约思维</h2>
<p>互联网时代,信息爆炸,用户的耐心越来越不足,所以,必须在短时间内抓住他!</p>
<h3 id="法则4专注少即是多">法则4:专注,少即是多</h3>
<p>苹果就是典型的例子,1997年苹果接近破产,乔帮主回归,砍掉了70%产品线,重点开发4款产品,使得苹果扭亏为盈,起死回生。即使到了5S,iPhone也只有5款。</p>
<p>品牌定位也要专注,给消费者一个选择你的理由,一个就足够。</p>
<p>最近很火的一个网络鲜花品牌RoseOnly,它的品牌定位是高端人群,买花者需要与收花者身份证号绑定,且每人只能绑定一次,意味着“一生只爱一人”。2013年2月上线,8月份做到了月销售额近1000万元。</p>
<p>大道至简,越简单的东西越容易传播,越难做。专注才有力量,才能做到极致。尤其在创业时期,做不到专注,就没有可能生存下去。</p>
<h3 id="法则5简约即是美">法则5:简约即是美</h3>
<p>在产品设计方面,要做减法。外观要简洁,内在的操作流程要简化。Google首页永远都是清爽的界面,苹果的外观、特斯拉汽车的外观,都是这样的设计。</p>
<hr />
<h2 id="3极致思维">3、极致思维</h2>
<p>极致思维,就是把产品、服务和用户体验做到极致,超越用户预期。什么叫极致?极致就是把命都搭上。</p>
<h3 id="法则6打造让用户尖叫的产品">法则6:打造让用户尖叫的产品</h3>
<p>用极限思维打造极致的产品。方法论有三条:第一,“需求要抓得准”(痛点,痒点或兴奋点);第二,“自己要逼得狠”(做到自己能力的极限);第三,“管理要盯得紧”(得产品经理得天下)。一切产业皆媒体,在这个社会化媒体时代,好产品自然会形成口碑传播。</p>
<p>尖叫,意味着必须把产品做到极致;极致,就是超越用户想象!</p>
<h3 id="法则7服务即营销">法则7:服务即营销</h3>
<p>阿芙精油是知名的淘宝品牌,有两个小细节可以看出其对服务体验的极致追求:1)客服24小时轮流上班,使用Thinkpad小红帽笔记本工作,因为使用这种电脑切换窗口更加便捷,可以让消费者少等几秒钟;2)设有“CSO”,即首席惊喜官,每天在用户留言中寻找潜在的推销员或专家,找到之后会给对方寄出包裹,为这个可能的“意见领袖”制造惊喜。</p>
<p>海底捞的服务理念受到很多人推崇,但是在互联网思维席卷整个传统行业的浪潮之下,如果海底捞不能用互联网思维重构企业的话,学不会的,可能是海底捞了。</p>
<hr />
<h2 id="4迭代思维">4、迭代思维</h2>
<p>“敏捷开发”是互联网产品开发的典型方法论,是一种以人为核心、迭代、循序渐进的开发方法,允许有所不足,不断试错,在持续迭代中完善产品。
这里面有两个点,一个“微”,一个“快”。</p>
<h3 id="法则8小处着眼微创新">法则8:小处着眼,微创新</h3>
<p>“微”,要从细微的用户需求入手,贴近用户心理,在用户参与和反馈中逐步改进。“可能你觉得是一个不起眼的点,但是用户可能觉得很重要”。360安全卫士当年只是一个安全防护产品,后来也成了新兴的互联网巨头。</p>
<h3 id="法则9精益创业快速迭代">法则9:精益创业,快速迭代</h3>
<p>“天下武功,唯快不破”,只有快速地对消费者需求做出反应,产品才更容易贴近消费者。Zynga游戏公司每周对游戏进行数次更新,小米MIUI系统坚持每周迭代,就连雕爷牛腩的菜单也是每月更新。</p>
<p>这里的迭代思维,对传统企业而言,更侧重在迭代的意识,意味着我们必须要及时乃至实时关注消费者需求,把握消费者需求的变化。</p>
<hr />
<h2 id="5流量思维">5、流量思维</h2>
<p>流量意味着体量,体量意味着分量。“目光聚集之处,金钱必将追随”,流量即金钱,流量即入口,流量的价值不必多言。</p>
<h3 id="法则10免费是为了更好地收费">法则10:免费是为了更好地收费</h3>
<p>互联网产品大多用免费策略极力争取用户、锁定用户。当年的360安全卫士,用免费杀毒入侵杀毒市场,一时间搅的天翻地覆,回头再看看,卡巴斯基、瑞星等杀毒软件,估计没有几台电脑还会装着了。</p>
<p>“免费是最昂贵的”,不是所有的企业都能选择免费策略,因产品、资源、时机而定。</p>
<h3 id="法则11坚持到质变的临界点">法则11:坚持到质变的“临界点”</h3>
<p>任何一个互联网产品,只要用户活跃数量达到一定程度,就会开始产生质变,从而带来商机或价值。QQ若没有当年的坚持,也不可能有今天的企业帝国。注意力经济时代,先把流量做上去,才有机会思考后面的问题,否则连生存的机会都没有。</p>
<hr />
<h2 id="6社会化思维">6、社会化思维</h2>
<p>社会化商业的核心是网,公司面对的客户以网的形式存在,这将改变企业生产、销售、营销等整个形态。</p>
<h3 id="法则12利用好社会化媒体">法则12:利用好社会化媒体</h3>
<p>有一个做智能手表的品牌,通过10条微信,近100个微信群讨论,3千多人转发,11小时预订售出18698只T-Watch智能手表,订单金额900多万元。</p>
<p>这就是微信朋友圈社会化营销的魅力。有一点要记住,口碑营销不是自说自话,一定是站在用户的角度、以用户的方式和用户沟通。</p>
<h3 id="法则13众包协作">法则13:众包协作</h3>
<p>众包是以“蜂群思维”和层级架构为核心的互联网协作模式,维基百科就是典型的众包产品。传统企业要思考如何利用外脑,不用招募,便可“天下贤才入吾彀中”。</p>
<p>InnoCentive网站创立于2001年,已经成为化学和生物领域的重要研发供求网络平台。该公司引入“创新中心”的模式,把公司外部的创新比例从原来的15%提高到50%,研发能力提高了60%。</p>
<p>小米手机在研发中让用户深度参与,实际上也是一种众包模式。</p>
<hr />
<h2 id="7大数据思维">7、大数据思维</h2>
<p>大数据思维,是指对大数据的认识,对企业资产、关键竞争要素的理解。</p>
<h3 id="法则14小企业也要有大数据">法则14:小企业也要有大数据</h3>
<p>用户在网络上一般会产生信息、行为、关系三个层面的数据,这些数据的沉淀,有助于企业进行预测和决策。一切皆可被数据化,企业必须构建自己的大数据平台,小企业,也要有大数据。</p>
<h3 id="法则15你的用户是每个人">法则15:你的用户是每个人</h3>
<p>在互联网和大数据时代,企业的营销策略应该针对个性化用户做精准营销。</p>
<p>银泰网上线后,打通了线下实体店和线上的会员账号,在百货和购物中心铺设免费wifi。当一位已注册账号的客人进入实体店,他的手机连接上wifi,他与银泰的所有互动记录会一一在后台呈现,银泰就能据此判别消费者的购物喜好。这样做的最终目的是实现商品和库存的可视化,并达到与用户之间的沟通。</p>
<hr />
<h2 id="8平台思维">8、平台思维</h2>
<p>互联网的平台思维就是开放、共享、共赢的思维。平台模式最有可能成就产业巨头。全球最大的100家企业里,有60家企业的主要收入来自平台商业模式,包括苹果、谷歌等。</p>
<h3 id="法则16打造多方共赢的生态圈">法则16:打造多方共赢的生态圈</h3>
<p>平台模式的精髓,在于打造一个多主体共赢互利的生态圈。</p>
<p>将来的平台之争,一定是生态圈之间的竞争。百度、阿里、腾讯三大互联网巨头围绕搜索、电商、社交各自构筑了强大的产业生态,所以后来者如360其实是很难撼动的。</p>
<h3 id="法则17善用现有平台">法则17:善用现有平台</h3>
<p>当你不具备构建生态型平台实力的时候,那就要思考怎样利用现有的平台。</p>
<p>马云说:“假设我是90后重新创业,前面有个阿里巴巴,有个腾讯,我不会跟它挑战,心不能太大。”</p>
<h3 id="法则18让企业成为员工的平台">法则18:让企业成为员工的平台</h3>
<p>互联网巨头的组织变革,都是围绕着如何打造内部“平台型组织”。</p>
<p>包括阿里巴巴25个事业部的分拆、腾讯6大事业群的调整,都旨在发挥内部组织的平台化作用。海尔将8万多人分为2000个自主经营体,让员工成为真正的“创业者”,让每个人成为自己的CEO。</p>
<p>内部平台化就是要变成自组织而不是他组织。他组织永远听命于别人,自组织是自己来创新。</p>
<hr />
<h2 id="9跨界思维">9、跨界思维</h2>
<p>(随着)互联网和新科技的发展,很多产业的边界变得模糊,互联网企业的触角已无孔不入,(如)零售、图书、金融、电信、娱乐、交通、媒体等等。</p>
<h3 id="法则19携用户以令诸侯">法则19:携“用户”以令诸侯</h3>
<p>这些互联网企业,为什么能够参与乃至赢得跨界竞争?答案就是:用户!</p>
<p>他们掌握着一方面掌握用户数据,另一方面又具备用户思维,自然能够携“用户”以令诸侯。阿里巴巴、腾讯相继申办银行,小米做手机、做电视,都是这样的道理。</p>
<p>未来十年,是中国商业领域大规模打劫的时代,一旦用户的生活方式发生根本性的变化,来不及变革的企业,必定遭遇劫数!</p>
<h3 id="法则20用互联网思维大胆颠覆式创新">法则20:用互联网思维,大胆颠覆式创新。</h3>
<p>一个真正牛逼的人一定是一个跨界的人,能够同时在科技和人文的交汇点上找到自己的坐标。一个真正厉害的企业,一定是手握用户和数据资源,敢于跨界创新的组织。</p>
<p><a href="http://pan.baidu.com/s/1ntsLSQt">互联网思维九大思维精彩解读PPT</a></p>
给现在用的主题加上了响应式菜单
2014-06-04T00:00:00+00:00
http://wangdaodao.github.io/2014-06-04/responsive-web-design
<p>今天把主题修改完毕了,各位客官可以拖动下窗口大小来看看!</p>
<p>考虑到用 <em>JS</em> 来实现响应式菜单,但是还是放弃了!还是使用 <em>CSS</em> 简单的粗暴的来搞吧!</p>
<p>放一个示例的源码</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>Responsive Menu Demo</title>
<style>
header{
background-color:#000;
color:#FFF;
height:auto;
padding:5px;
height:30px;
z-index:1;
}
header ul{
z-index:999;
background-color:#000;
right:10px;
position: absolute;
}
header ul li{
cursor:pointer;
width:80px;
float:left;
margin:0px 10px;
height:30px;
text-align:center;
line-height:30px;
}
header ul li a{
color:#FFF;
text-decoration:none;
}
header ul li:hover,header ul li.active{
background-color:#F5F5F5;
border-radius:2px;
}
header ul li:hover > a,header ul li.active > a{
color:#000;
text-decoration:none;
}
header ul li:first-child{
display:none;
}
a.Link{
display:none;
}
@media (max-width: 640px){
header ul li{
float:none;
display:none;
margin:10px;
}
header ul li:first-child{
display:list-item;
margin:0px 10px;
}
header ul:hover > li,header ul:focus > li,header ul:active > li{
display:list-item;
}
header ul li:first-child:hover{
background-color:#000;
color:#FFF;
}
a.Link{
display:block;
text-align:center;
margin-top:30%;
color:#5AC9C4;
font-size:20px;
font-family:Verdana;
}
</style>
</head>
<body ontouchstart="">
<header class="clearfix">
<ul>
<li>Menu</li>
<li class="active"><a href="?1">Home</a></li>
<li><a href="?2">Docs</a></li>
<li><a href="?3">Download</a></li>
<li><a href="?4">Demo</a></li>
<li><a href="?5">About us</a></li>
</ul>
</header>
</body>
</html>
</code></pre></div></div>
局域网Git建立共享仓库
2014-06-03T00:00:00+00:00
http://wangdaodao.github.io/2014-06-03/lan-git-to-establish-shared-warehouse
<p>希望协作进行短期开发,又觉得ssh授权麻烦,那么可以尝试在局域网通过windows的文件共享机制来建立简单的Git版本管理机制。以下内容在windows平台上,以eclipse为例进行介绍。本文讲述的内容适用于以下两种或者类似情况:</p>
<p>1、小团队处在同个局域网,内部共同进行开发;</p>
<p>2、多台设备,每台都有不同时间创作、不同量的代码,希望合并到一起,并最终push到服务器。</p>
<p>目前所进行项目,由于多人负责不同模块,所以代码最终合并运行是必须的。使用了几天压缩包传来传去以及共享目录分权限、本地编辑再上传的方式,感觉又耗时又费力,对于程序员这种偷懒至上的生物而言,这些工作是必须要省掉的。所以一拍脑袋,咱们在内部搞个Git吧~由于代码是不能公开的,所以Github首先被放弃,然后看了一些资料,决定搭建这么个局域网的共享仓库。任何被授权的人分配读写权限,然后可以pull到这个文件夹,本地修改之后,再push回仓库,用这种更新代码。</p>
<hr />
<p>##建立过程</p>
<p>1、首先,在本地新建一个文件夹,命名为<strong>remote</strong>或者之类可以识别的名称,主要作为仓库使用。通过Git命令行<em>git init</em>新建一个仓库(推荐加参数–bare建立裸仓库)。或者在Eclipse中(需要有<strong>EGit或之类的插件</strong>支持)用同样的方式新建一个仓库(新建项目的时候选择Git就可以,裸仓库的话记得勾选bare选项)。之后把这个文件夹共享,给同伴添加读写权限。最终确定对方在网上邻居可以看到新建的remote文件夹。</p>
<p>2、在本地项目中,用<em>git remote add</em>,把文件提交到仓库中。其他人可以在eclipse里,导入(import)一个Git项目,中间输入远程仓库的地址(目录共享地址),协议那里选择files即可。之后就可以使用<em>commit</em>、<em>push</em>、<em>pull</em>等方式进行代码同步了。</p>
<p>通过以上两步,就建立了一个存放代码仓库的中心服务器,可以接受所有开发者提交的代码。所有的开发者都是普通的节点,平时的工作就是和中心仓库同步数据。如下图所示:</p>
<p><img src="/uploads/2014/06/git.png" alt="图示" /></p>
<p>但如果提交代码时有冲突, Git 根本就不会让用户覆盖他人代码,它直接驳回第二个人的提交操作,此时他必须先拉取最新数据下来,手工解决冲突合并后,才能继续推送新的提交。
如果希望像Github那样操作,那么可以建立集成管理员工作流,具体请查看 <a href="http://git-scm.com/book/zh/分布式-Git-分布式工作流程">Git文档</a>介绍 。下一步准备采用这种方式,集中管理太混乱了……</p>
<hr />
<p>##几个问题</p>
<p>1、<em>裸仓库(git init –bare)</em>和<em>一般版本库(git init)</em>的区别?
裸仓库仅仅保存代码历史,代码并不保存在裸仓库中。所以本地操作时,可以看到它只包含一个.git文件夹,并且你push文件进去,他还是一个文件夹……
一般版本库,除了.git的配置文件夹,也包含了所有代码,作为master(例)分支存在。</p>
<p>2、该提交什么?
在项目文件夹下,新建(或者已经存在)一个.gitignore文件,其中包含了需要忽略的文件(夹),如果写过.htaccess(突然想到这个),就知道类似:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># 此为注释 – 将被 Git 忽略
*.a # 忽略所有 .a 结尾的文件
!lib.a # 对 lib.a无效(严格模式)
/TODO # 忽略项目根目录下的 TODO 文件(夹)
build/ # 忽略 build/ 目录下的所有文件
</code></pre></div></div>
<p>具体请参考 <a href="http://git-scm.com/docs/gitignore">gitignore的编写</a>。基本上,在java程序编写中,忽略bin文件夹就可以了。</p>
<p>转自<a href="http://axiu.me/documentation/lan-create-git-shared-repository/">局域网Git建立共享仓库</a></p>
CSS命名规则
2014-06-02T00:00:00+00:00
http://wangdaodao.github.io/2014-06-02/css-rules
<p>工作中,CSS命名有时候真的是不太规范,自己稍微总结了下,以备不时之需!暂时没有做排序,就是粗暴的摆在这里了,后期会做一个更新和排序。</p>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="70">整体:</td>
<td><em>wrap</em></td>
</tr>
<tr>
<td>工具条:</td>
<td><em>topbar</em></td>
</tr>
<tr>
<td>头部:</td>
<td><em>header</em></td>
</tr>
<tr>
<td>标志:</td>
<td><em>logo</em></td>
</tr>
<tr>
<td>广告:</td>
<td><em>banner</em></td>
</tr>
<tr>
<td>登陆:</td>
<td><em>login</em></td>
</tr>
<tr>
<td>注册:</td>
<td><em>regsiter</em></td>
</tr>
<tr>
<td>导航:</td>
<td><em>nav</em></td>
</tr>
<tr>
<td>子导航:</td>
<td><em>subnav</em></td>
</tr>
<tr>
<td>菜单:</td>
<td><em>menu</em></td>
</tr>
<tr>
<td>子菜单:</td>
<td><em>submenu</em></td>
</tr>
<tr>
<td>搜索:</td>
<td><em>search</em></td>
</tr>
<tr>
<td>下载:</td>
<td><em>download</em></td>
</tr>
<tr>
<td>主体:</td>
<td><em>main</em></td>
</tr>
<tr>
<td>侧栏:</td>
<td><em>sidebar</em></td>
</tr>
<tr>
<td>内容:</td>
<td><em>content</em></td>
</tr>
<tr>
<td>栏目:</td>
<td><em>column</em></td>
</tr>
<tr>
<td>列表:</td>
<td><em>list</em></td>
</tr>
<tr>
<td>页签:</td>
<td><em>tab</em></td>
</tr>
<tr>
<td>标题:</td>
<td><em>title</em></td>
</tr>
<tr>
<td>页脚:</td>
<td><em>footer</em></td>
</tr>
<tr>
<td>链接:</td>
<td><em>link</em></td>
</tr>
<tr>
<td>版权:</td>
<td><em>copyright</em></td>
</tr>
<tr>
<td>加入:</td>
<td><em>join</em></td>
</tr>
<tr>
<td>引导:</td>
<td><em>guild</em></td>
</tr>
<tr>
<td>服务:</td>
<td><em>service</em></td>
</tr>
<tr>
<td>伙伴:</td>
<td><em>partner</em></td>
</tr>
<tr>
<td>弹出:</td>
<td><em>dialog</em></td>
</tr>
<tr>
<td>按钮:</td>
<td><em>btn</em></td>
</tr>
<tr>
<td>头像:</td>
<td><em>avatar</em></td>
</tr>
<tr>
<td>作者:</td>
<td><em>author</em></td>
</tr>
<tr>
<td>当前:</td>
<td><em>current</em></td>
</tr>
<tr>
<td>确认:</td>
<td><em>confirm</em></td>
</tr>
<tr>
<td>取消:</td>
<td><em>cancel</em></td>
</tr>
<tr>
<td>箭头:</td>
<td><em>arrow</em></td>
</tr>
<tr>
<td>刷新:</td>
<td><em>refresh</em></td>
</tr>
<tr>
<td>结果:</td>
<td><em>results</em></td>
</tr>
<tr>
<td>成功:</td>
<td><em>successful</em></td>
</tr>
<tr>
<td>步骤:</td>
<td><em>steps</em></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Sublime text 快捷键总结
2014-05-31T00:00:00+00:00
http://wangdaodao.github.io/2014-05-31/sublime-text-shortcut
<p><em>Ctrl+D</em> 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)</p>
<p><em>Ctrl+G</em> 跳转到相应的行</p>
<p><em>Ctrl+J</em> 合并行(已选择需要合并的多行时)</p>
<p><em>Ctrl+L</em> 选择整行(按住-继续选择下行)</p>
<p><em>Ctrl+M</em> 光标移动至括号内开始或结束的位置</p>
<p><em>Ctrl+T</em> 词互换</p>
<p><em>Ctrl+U</em> 软撤销</p>
<p><em>Ctrl+P</em> 查找当前项目中的文件和快速搜索;输入 @ 查找文件主标题/函数;或者输入 : 跳转到文件某行;</p>
<p><em>Ctrl+R</em> 快速列出/跳转到某个函数</p>
<p><em>Ctrl+K+Backspace</em> 从光标处删除至行首</p>
<p><em>Ctrl+K+B</em> 开启/关闭侧边栏</p>
<p><em>Ctrl+K+K</em> 从光标处删除至行尾</p>
<p><em>Ctrl+K+T</em> 折叠属性</p>
<p><em>Ctrl+K+U</em> 改为大写</p>
<p><em>Ctrl+K+L</em> 改为小写</p>
<p><em>Ctrl+K+0</em> 展开所有</p>
<p><em>Ctrl+Enter</em> 插入行后(快速换行)</p>
<p><em>Ctrl+Tab</em> 当前窗口中的标签页切换</p>
<p><em>Ctrl+Shift+A</em> 选择光标位置父标签对儿</p>
<p><em>Ctrl+Shift+T</em> 重新打开刚刚关闭的标签页</p>
<p><em>Ctrl+Shift+D</em> 复制光标所在整行,插入在该行之前</p>
<p><em>Ctrl+Shift+F</em> 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找</p>
<p><em>Ctrl+Shift+K</em> 删除整行</p>
<p><em>Ctrl+Shift+L</em> 鼠标选中多行(按下快捷键),即可同时编辑这些行</p>
<p><em>Ctrl+Shift+M</em> 选择括号内的内容(按住-继续选择父括号)</p>
<p><em>Ctrl+Shift+P</em> 打开命令面板</p>
<p><em>Ctrl+Shift+/</em> 注释已选择内容</p>
<p><em>Ctrl+Shift+↑</em>可以移动此行代码,与上行互换</p>
<p><em>Ctrl+Shift+↓</em>可以移动此行代码,与下行互换</p>
<p><em>Ctrl+Shift+[</em> 折叠代码</p>
<p><em>Ctrl+Shift+]</em> 展开代码</p>
<p><em>Ctrl+Shift+Enter</em> 光标前插入行</p>
<p><em>Ctrl+PageDown</em> 、<em>Ctrl+PageUp</em> 文件按开启的前后顺序切换</p>
<p><em>Ctrl+Z</em> 撤销</p>
<p><em>Ctrl+Y</em> 恢复撤销</p>
<p><em>Ctrl+F2</em> 设置书签</p>
<p><em>Ctrl+/</em> 注释整行(如已选择内容,同<em>Ctrl+Shift+/</em>效果)</p>
<p><em>Ctrl+鼠标左键</em> 可以同时选择要编辑的多处文本</p>
<p><em>Shift+F2</em> 上一个书签</p>
<p><em>Shift+Tab</em> 去除缩进</p>
<p><em>Alt+Shift+1</em>(非小键盘)窗口分屏,恢复默认1屏</p>
<p><em>Alt+Shift+2</em> 左右分屏-2列</p>
<p><em>Alt+Shift+3</em> 左右分屏-3列</p>
<p><em>Alt+Shift+4</em> 左右分屏-4列</p>
<p><em>Alt+Shift+5</em> 等分4屏</p>
<p><em>Alt+Shift+8</em> 垂直分屏-2屏</p>
<p><em>Alt+Shift+9</em> 垂直分屏-3屏</p>
<p><em>Alt+.</em> 闭合当前标签</p>
<p><em>Alt+F3</em> 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑</p>
<p><em>Tab</em> 缩进 自动完成</p>
<p><em>F2</em> 下一个书签</p>
<p><em>F6</em> 检测语法错误</p>
<p><em>F9</em> 行排序(按a-z)</p>
<p><em>F11</em> 全屏模式</p>
<p>Emmet技巧:</p>
<p>将图片资源转换成 data url 形式:将光标移动到 <em>background: url()</em> 中的图片位置的地方,一个快捷键瞬间转换:<em>Ctrl+’</em></p>
<p>自动添加图片的尺寸大小:将光标放在图片地址上,一个快捷键统统搞定:<em>Ctrl+U</em></p>
<p>更多技巧请查看:<a href="/2014-07-14/emmet-documentation.html">Emmet使用手册</a></p>
你好GitHub & Jekyll
2014-05-30T00:00:00+00:00
http://wangdaodao.github.io/2014-05-30/hello-github-and-Jekyll
<p>费了好大的劲,才搞成这样子,真是不容易!</p>
<p>这个博客应该会记录一些代码类的东西吧,且记且珍惜……</p>
<p><em>markdown</em> 忘记的也差不多了,看来还是不经常使用啊!</p>
<p>下一阶段,应该就是把现在用的主题重构并且精简一下,例如把代码里面的结构调整一下,让代码更符合语义化;把里面错误的代码改正过来……</p>
<p>反正是有的折腾了,骚年!另外,会把以前博客有意义的文章挪过来一些,主博客还是会接着更新文章,只是一些生活上的了,工作和技术上的以后只发这上面了(其实我也没什么技术文章……)</p>
<p>另外,代码高亮也可以用gist来搞了,不用那么费心了!例如这样:</p>
<script type="text/javascript" src="https://gist.github.com/wangdaodao/4059549.js"></script>
<p>来一枚二维码图片吧!</p>
<p><img src="/uploads/2014/05/wxqrcode.png" alt="微信二维码" /></p>
世界,你好
2014-05-29T00:00:00+00:00
http://wangdaodao.github.io/2014-05-29/hello-world
<p>一般都是拿这个来做一个开始!</p>
<p>这篇文章也算是一个模板吧,方便以后再写文章了(懒)……</p>
<p>加一张我微信二维码吧!</p>
<p><img src="/uploads/2014/05/wxqrcode.png" alt="微信二维码" /></p>
Sass入门
2014-05-16T00:00:00+00:00
http://wangdaodao.github.io/2014-05-16/learning-sass
<p>工作环境是Ruby,所以就用<a href="http://sass-lang.com/">Sass</a>了,但是懂不懂Ruby都可以用,搭好环境就可以了!</p>
<p>大漠这里有<a href="http://www.w3cplus.com/sassguide/">教程</a>,有CSS基础的简单看看就懂了!如果没有装Ruby的话,Win到<a href="http://rubyinstaller.org/">这里</a>下载最新的安装,其他系统就自己找吧。装完之后,在命令行下输入:</p>
<p><code class="language-plaintext highlighter-rouge">gem install sass --no-ri --no-rdoc</code></p>
<p>就可以了(不安装文档)!</p>
<p>然后我这里用的是ST3,Sass插件也挺多,我这里装了一个<em>SASS Build</em>基本就够用了,写完了<em>Ctrl+b</em>运行编译就可以了(还可以压缩Sass Compressed,在Tools–Build System里面选)。</p>
<p>这里不讨论Sass或者Less的优缺点了,不过值得提的是Sass现在有Ruby社区的支持和Compass开源的CSS框架,我相信在项目中使用Sass还是一个不错的选择!</p>
成功修复kindle无法充电
2014-03-10T00:00:00+00:00
http://wangdaodao.github.io/2014-03-10/repair-kindle
<p>真是祸不单行,搬家之后好久没有被我临幸的<em>kindle 3</em>竟然电池耗尽,谁让咱们穷,只能自己动手来修了!前后花费了2天时间,终于把kindle修好了!修复工具只要您花10元就能买到,10块钱你买不了吃亏,10块钱你买不了上当!</p>
<p>上一张工具照:<em>美工刀</em>,<em>小改锥</em>,<em>充电器</em>,就是这么简单!</p>
<p><img src="/uploads/2014/03/IMG_20140310_082051.jpg" alt="IMG_20140310_082051" /></p>
<p>再上一张被我强拆的图吧!</p>
<p><img src="/uploads/2014/03/IMG_20140309_115534.jpg" alt="IMG_20140309_115534" /></p>
<p>基本上拆开后就是这样的了!拆机方法,暴力的美工刀,直接强行插入,不要插入太多,以免伤到电路板!</p>
<p>拆开后,直奔电池,把电池拆下,淘宝奸商啊,真是坑爹,电池时间2011年7月!!!</p>
<p><img src="/uploads/2014/03/IMG_20140309_115811.jpg" alt="IMG_20140309_115811" /></p>
<p>用万能充把电池充电一天,一定要充满,充分的把电池激活,心急吃不了热豆腐!</p>
<p>充满后,基本上就是安装了,螺丝拧紧就可以了,然后看看是否可以开机!</p>
<p><img src="/uploads/2014/03/IMG_20140309_141648.jpg" alt="IMG_20140309_141648" /></p>
<p>如果不行,请再重复安装电池步骤,直到可以开机为止,我大概重复了5到6次才可以,怀疑是电池接口松动,拿了几层卫生纸垫里面,然后好了!</p>
<p>最后,kindle终于复活了,下次一定不要忘记把kindle充电了,不然修复这事能把你逼疯!</p>
<p><img src="/uploads/2014/03/IMG_20140309_140720.jpg" alt="IMG_20140309_140720" /></p>
<hr />
<p>可能是我高兴的太早了,充电大概两个小时了,电量一直是89%,怀疑电池还是没有完全激活?!后续会补充kindle状态!</p>
<p>补充,kindle又开始白屏了,确认60%应该是电池的毛病,看看把电池用报纸和塑料袋包起来放冰箱里面冷冻几天再看看吧,具体方法:</p>
<blockquote>
<p>1.把电池用报纸包起来再放进塑料袋裹包好放入冷冻库三天(报纸可吸收多余水份) <br />
2.三天后取出常温下放二天<br />
3.二天后将电池充电,充饱后装进行动电话裹测试(预估可救回80%-90%)</p>
</blockquote>
<p>擦,现在又变成修电池了,真是杯具!不过我这电池是2011年产的,现在到2014年了,也差不多该报废了,如果可行,我再更新!</p>
<p>补充:经历了修复电池等一系列等问题,最后直接购入新的电池装入复活!如果是充电不成功,大部分问题都是电池的问题,换块电池可能就好了!</p>
从前端优化网站
2014-01-24T00:00:00+00:00
http://wangdaodao.github.io/2014-01-24/from-the-front-site-optimization
<p>以前对网站优化有了一套自己的方法,最近也在着手优化公司的网站,分享出来,也为自己做下记录!</p>
<p>要说怎么来衡量优化的结果呢,我觉得分主观和客观!</p>
<p>先说客观,就是用工具来测量出来的,Yslow 和 Page-Speed 就是这样的工具!分享一个网址,输入地址就可以把这两个分数都测试出来,并且把优化方案和建议还有压缩好的图片都输出了!<a href="http://gtmetrix.com">http://gtmetrix.com</a><a href="http://gtmetrix.com"></a></p>
<p><img src="/uploads/2014/01/2014012313043711111.jpg" alt="2014012313043711111" /></p>
<p>我总结出来,就是减少加载次数,合理的运用 Css Sprite 和 Img Sprite,压缩前端展示的东西(img,css,js,html),编写高质量代码去除冗余的嵌套(有点难)!</p>
<p>减少加载次数就是把一些样式和脚本尽量的合并到一起,例如我优化的时候,样式只有2个,一个是公用样式一个是栏目的样式!这需要一开始编写的时候都要考虑到,不能弄完了再回头优化,这样会很麻烦!</p>
<p>合理的合并图片,我见过一个,把整个网站所用到的图片全部都合并到一起,这样就不太合理了,用户可能有些图片根本就不会看到,干嘛还要加载过来呢?按需加载,按需合并就好了!</p>
<p>压缩代码,在上线之前,保留一个未压缩版本的来供以后维护,上线的代码注释什么都删除,减小体积。</p>
<p>编写高质量的代码,我这点感觉自己还没做的很好,所以我就不说了!</p>
<p>再说主观,这个就比较纠结了,凭感觉来说的东西!不过建议使用给力的主机,再配合cdn加速,这样主观上能感觉快点吧!</p>
吐槽年会
2013-12-20T00:00:00+00:00
http://wangdaodao.github.io/2013-12-20/annual-meeting
<p>先说说99%的公司,年会的流程:</p>
<p>先是打扮的不太自然的两个主持人上来,烘托一下气氛,员工多的话可能要喊一会儿口号。然后开场,烟火什么的放一下,来几个节目,今年最烂俗的事情要穿插进去,小品啦什么的(表演的时候不忘嘲讽竞争对手,如果他们做产品有准备节目这么用心就好了), 歌舞节目肯定拉不下臭大街的江南 Style(这是有象征意义的–充分暴露了我们的想象力局限性),再接着可能就是公司各个大部门负责人的总结报告,每个人装扮的跟大马猴一样跳出来,说的内容也都是报喜不报忧的那种,大家鼓掌,激动。主持人重新上来,第一轮抽奖神马的,再循环到表演节目,然后是各大部门第二轮业绩汇报……找个二三流歌星唱两首歌,尖叫,最后掌声有请大 BOSS (创始人/CEO) 做主题演讲,高屋建瓴的那种,纵横行业形势,国内国际经济状况,最后总结,今年总的形势是好滴,明年还要继续,我爱你们巴拉巴拉之类的,台下员工狂喊,疯狂鼓掌,大喇叭小哨子之类的烂吹一阵;接下来,还是抽奖环节,独唱神马的节目也该上来了,差不多的话,散场吧。大家嘟囔着自己为啥没抽到奖,部门人在相互喊着组个饭局。年会,曲终人散了。</p>
<p>这种年会在你以后的数十年里面,你还会参加很多次,直到你再也不想参加为止。所以,参加与否,并不是太重要的事儿。</p>
<p>我们公司的年会,只能一部分人去参加,我就是那帮没去参加的……</p>
VirtualBox安装Android 4.0
2013-09-13T00:00:00+00:00
http://wangdaodao.github.io/2013-09-13/virtualbox-install-the-android-4.0
<p><em>VirtualBox</em>确实是一个轻量级的虚拟机,大小还不到100M,但是做测试各种的折腾,今天就简单叙述下VirtualBox安装Android 4.0。</p>
<p>先放出需要下载的软件:<a href="http://pan.baidu.com/share/link?shareid=1053344929&uk=1158070176">VirtualBox-4.2.18-88780-Win.exe</a>和<a href="http://pan.baidu.com/share/link?shareid=1057838040&uk=1158070176">android-x86-4.0-r1-eeepc.iso</a>,我还导出了一份,不过大家先自己装着玩吧,不行了我再放出我导出的。</p>
<p>因为这次主要介绍的是安装Android 4.0,所以虚拟机的安装我就不过多的介绍了。</p>
<p>首先就新建一个虚拟机吧,值得注意的是,因为Android是基于Linux的,所以新建虚拟机的时候要选择<strong>Linux(Linux2.6)</strong>,内存512M就好了,硬盘选择8G就好。建好之后,先别启动,先设置一些东西!</p>
<p>首先是把下载下来的镜像挂载上去,如图:</p>
<p><img src="/uploads/2013/09/1.jpg" alt="镜像挂载" /></p>
<p>然后是设置网络,如图:</p>
<p><img src="/uploads/2013/09/22.jpg" alt="设置网络" /></p>
<p>好了,这里已经算是把准备工作做完了,接着就是启动!</p>
<p><img src="/uploads/2013/09/2.png" alt="启动" /></p>
<p>在这里我们把光标移到到<em>Installation</em>,然后按下<em>TAB</em>键,手动调整启动参数,在<em>DEBUG=</em>的后面加上<em>DADA=sda1 SDCARD=sda2</em>,为什么这么加我不太明白,官网上市这么说的,调整好后按回车键:</p>
<p><img src="/uploads/2013/09/3.png" alt="Installation" /></p>
<p>接下来是创建分区,选择<em>Create/Modify partitions</em>:</p>
<p><img src="/uploads/2013/09/4.png" alt="创建分区" /></p>
<p>选择<em>New</em>然后调整大小,最后选择<em>Quit</em>:</p>
<p><img src="/uploads/2013/09/5.png" alt="调整大小" /></p>
<p>之后就是格式化分区,这里格式化成<em>Ext3</em>文件系统:</p>
<p><img src="/uploads/2013/09/6.png" alt="格式化分区" /></p>
<p><img src="/uploads/2013/09/7.png" alt="格式化分区" /></p>
<p>然后Adndroid就自己展开文件,这个过程很快,比安装Windows快多了:</p>
<p><img src="/uploads/2013/09/8.png" alt="展开文件" /></p>
<p>安装好后把镜像从虚拟机上移除,然后选择<em>Reboot</em>,重启虚拟机:</p>
<p><img src="/uploads/2013/09/9.png" alt="重启虚拟机" /></p>
<p>这是重启后启动Android的引导界面,是GRUB:</p>
<p><img src="/uploads/2013/09/10.png" alt="引导界面" /></p>
<p>启动了自己进去可以设置下其他参数了!</p>
手机GAE翻墙
2013-08-04T00:00:00+00:00
http://wangdaodao.github.io/2013-08-04/mobile-phone-use-the-gae-over-the-gfw
<p>距离上次的<a href="/gae-over-the-GFW/">GAE翻墙教程</a>有一段时间了,不过有时候手机也想翻墙去,所以这次的翻墙教程是基于上次的电脑翻墙的,所如果想在手机上使用GAE来翻墙的话,首先要完成到上次教程的第三部:配置goagent客户端。</p>
<p>首先下载手机上的应用<a href="http://pan.baidu.com/share/link?shareid=1304928635&uk=1158070176">GAEProxy_V0.30.2.apk</a>,有豌豆荚的可以搜索<em>GAE</em>这个关键字来下载,现在我放出的下载是经过我测试可以使用的。</p>
<p>下载完之后,打开应用,安装根证书</p>
<p><img src="/uploads/2013/08/Screenshot_2013-08-04-07-09-50.jpg" alt="Screenshot_2013-08-04-07-09-50" /></p>
<p>安装完之后,配置自己的代理地址</p>
<p><img src="/uploads/2013/08/Screenshot_2013-08-04-07-10-02.jpg" alt="Screenshot_2013-08-04-07-10-02" /></p>
<p>其实所谓的代理地址,只是把我打码的名称换成创建<em>Application</em>所设定的<em>Application ID</em>,密钥就是Application的密码,端口是<em>8088</em>!</p>
<p>这一步完成之后基本上就可以使用了,你看我现在就已经可以使用了!</p>
<p><img src="/uploads/2013/08/Screenshot_2013-08-04-07-10-51.jpg" alt="Screenshot_2013-08-04-07-10-51" /></p>
<p>用UC访问下twitter看看(其实我更喜欢用自带的浏览器)</p>
<p><img src="/uploads/2013/08/Screenshot_2013-08-04-07-15-34.jpg" alt="Screenshot_2013-08-04-07-15-34" /></p>
<p>试试我的地铁跑酷能不能链接到facebook</p>
<p><img src="/uploads/2013/08/Screenshot_2013-08-04-08-41-25.jpg" alt="Screenshot_2013-08-04-08-41-25" /></p>
<p>好了,看来网页和应用都可以翻墙了,大家也试试吧!</p>
09-Git内部原理
2012-10-20T00:00:00+00:00
http://wangdaodao.github.io/2012-10-20/git-internals
<p>不管你是从前面的章节直接跳到了本章,还是读完了其余各章一直到这,你都将在本章见识 Git 的内部工作原理和实现方式。我个人发现学习这些内容对于理解 Git 的用处和强大是非常重要的,不过也有人认为这些内容对于初学者来说可能难以理解且过于复杂。正因如此我把这部分内容放在最后一章,你在学习过程中可以先阅读这部分,也可以晚点阅读这部分,这完全取决于你自己。</p>
<p>既然已经读到这了,就让我们开始吧。首先要弄明白一点,从根本上来讲 Git 是一套内容寻址 (content-addressable) 文件系统,在此之上提供了一个 VCS 用户界面。马上你就会学到这意味着什么。</p>
<p>早期的 Git (主要是 1.5 之前版本) 的用户界面要比现在复杂得多,这是因为它更侧重于成为文件系统而不是一套更精致的 VCS 。最近几年改进了 UI 从而使它跟其他任何系统一样清晰易用。即便如此,还是经常会有一些陈腔滥调提到早期 Git 的 UI 复杂又难学。</p>
<p>内容寻址文件系统层相当酷,在本章中我会先讲解这部分。随后你会学到传输机制和最终要使用的各种库管理任务。</p>
<h2 id="底层命令-plumbing-和高层命令-porcelain">底层命令 (Plumbing) 和高层命令 (Porcelain)</h2>
<p>本书讲解了使用 <code class="language-plaintext highlighter-rouge">checkout</code>, <code class="language-plaintext highlighter-rouge">branch</code>, <code class="language-plaintext highlighter-rouge">remote</code> 等共约 30 个 Git 命令。然而由于 Git 一开始被设计成供 VCS 使用的工具集而不是一整套用户友好的 VCS,它还包含了许多底层命令,这些命令用于以 UNIX 风格使用或由脚本调用。这些命令一般被称为 “plumbing” 命令(底层命令),其他的更友好的命令则被称为 “porcelain” 命令(高层命令)。</p>
<p>本书前八章主要专门讨论高层命令。本章将主要讨论底层命令以理解 Git 的内部工作机制、演示 Git 如何及为何要以这种方式工作。这些命令主要不是用来从命令行手工使用的,更多的是用来为其他工具和自定义脚本服务的。</p>
<p>当你在一个新目录或已有目录内执行 <code class="language-plaintext highlighter-rouge">git init</code> 时,Git 会创建一个 <code class="language-plaintext highlighter-rouge">.git</code> 目录,几乎所有 Git 存储和操作的内容都位于该目录下。如果你要备份或复制一个库,基本上将这一目录拷贝至其他地方就可以了。本章基本上都讨论该目录下的内容。该目录结构如下:</p>
<p>$ ls
HEAD
branches/
config
description
hooks/
index
info/
objects/
refs/</p>
<p>该目录下有可能还有其他文件,但这是一个全新的 <code class="language-plaintext highlighter-rouge">git init</code> 生成的库,所以默认情况下这些就是你能看到的结构。新版本的 Git 不再使用 <code class="language-plaintext highlighter-rouge">branches</code> 目录,<code class="language-plaintext highlighter-rouge">description</code> 文件仅供 GitWeb 程序使用,所以不用关心这些内容。<code class="language-plaintext highlighter-rouge">config</code> 文件包含了项目特有的配置选项,<code class="language-plaintext highlighter-rouge">info</code> 目录保存了一份不希望在 .gitignore 文件中管理的忽略模式 (ignored patterns) 的全局可执行文件。<code class="language-plaintext highlighter-rouge">hooks</code> 目录保存了第六章详细介绍了的客户端或服务端钩子脚本。</p>
<p>另外还有四个重要的文件或目录:<code class="language-plaintext highlighter-rouge">HEAD</code> 及 <code class="language-plaintext highlighter-rouge">index</code> 文件,<code class="language-plaintext highlighter-rouge">objects</code> 及 <code class="language-plaintext highlighter-rouge">refs</code> 目录。这些是 Git 的核心部分。<code class="language-plaintext highlighter-rouge">objects</code> 目录存储所有数据内容,<code class="language-plaintext highlighter-rouge">refs</code> 目录存储指向数据 (分支) 的提交对象的指针,<code class="language-plaintext highlighter-rouge">HEAD</code> 文件指向当前分支,<code class="language-plaintext highlighter-rouge">index</code> 文件保存了暂存区域信息。马上你将详细了解 Git 是如何操纵这些内容的。</p>
<h2 id="git-对象">Git 对象</h2>
<p>Git 是一套内容寻址文件系统。很不错。不过这是什么意思呢?
这种说法的意思是,Git 从核心上来看不过是简单地存储键值对(key-value)。它允许插入任意类型的内容,并会返回一个键值,通过该键值可以在任何时候再取出该内容。可以通过底层命令 <code class="language-plaintext highlighter-rouge">hash-object</code> 来示范这点,传一些数据给该命令,它会将数据保存在 <code class="language-plaintext highlighter-rouge">.git</code> 目录并返回表示这些数据的键值。首先初使化一个 Git 仓库并确认 <code class="language-plaintext highlighter-rouge">objects</code> 目录是空的:</p>
<p>$ mkdir test
$ cd test
$ git init
Initialized empty Git repository in /tmp/test/.git/
$ find .git/objects
.git/objects
.git/objects/info
.git/objects/pack
$ find .git/objects -type f
$</p>
<p>Git 初始化了 <code class="language-plaintext highlighter-rouge">objects</code> 目录,同时在该目录下创建了 <code class="language-plaintext highlighter-rouge">pack</code> 和 <code class="language-plaintext highlighter-rouge">info</code> 子目录,但是该目录下没有其他常规文件。我们往这个 Git 数据库里存储一些文本:</p>
<p>$ echo ‘test content’ | git hash-object -w –stdin
d670460b4b4aece5915caf5c68d12f560a9fe3e4</p>
<p>参数 <code class="language-plaintext highlighter-rouge">-w</code> 指示 <code class="language-plaintext highlighter-rouge">hash-object</code> 命令存储 (数据) 对象,若不指定这个参数该命令仅仅返回键值。<code class="language-plaintext highlighter-rouge">--stdin</code> 指定从标准输入设备 (stdin) 来读取内容,若不指定这个参数则需指定一个要存储的文件的路径。该命令输出长度为 40 个字符的校验和。这是个 SHA-1 哈希值──其值为要存储的数据加上你马上会了解到的一种头信息的校验和。现在可以查看到 Git 已经存储了数据:</p>
<p>$ find .git/objects -type f
.git/objects/d6/70460b4b4aece5915caf5c68d12f560a9fe3e4</p>
<p>可以在 <code class="language-plaintext highlighter-rouge">objects</code> 目录下看到一个文件。这便是 Git 存储数据内容的方式──为每份内容生成一个文件,取得该内容与头信息的 SHA-1 校验和,创建以该校验和前两个字符为名称的子目录,并以 (校验和) 剩下 38 个字符为文件命名 (保存至子目录下)。</p>
<p>通过 <code class="language-plaintext highlighter-rouge">cat-file</code> 命令可以将数据内容取回。该命令是查看 Git 对象的瑞士军刀。传入 <code class="language-plaintext highlighter-rouge">-p</code> 参数可以让该命令输出数据内容的类型:</p>
<p>$ git cat-file -p d670460b4b4aece5915caf5c68d12f560a9fe3e4
test content</p>
<p>可以往 Git 中添加更多内容并取回了。也可以直接添加文件。比方说可以对一个文件进行简单的版本控制。首先,创建一个新文件,并把文件内容存储到数据库中:</p>
<p>$ echo ‘version 1’ > test.txt
$ git hash-object -w test.txt
83baae61804e65cc73a7201a7252750c76066a30</p>
<p>接着往该文件中写入一些新内容并再次保存:</p>
<p>$ echo ‘version 2’ > test.txt
$ git hash-object -w test.txt
1f7a7a472abf3dd9643fd615f6da379c4acb3e3a</p>
<p>数据库中已经将文件的两个新版本连同一开始的内容保存下来了:</p>
<p>$ find .git/objects -type f
.git/objects/1f/7a7a472abf3dd9643fd615f6da379c4acb3e3a
.git/objects/83/baae61804e65cc73a7201a7252750c76066a30
.git/objects/d6/70460b4b4aece5915caf5c68d12f560a9fe3e4</p>
<p>再将文件恢复到第一个版本:</p>
<p>$ git cat-file -p 83baae61804e65cc73a7201a7252750c76066a30 > test.txt
$ cat test.txt
version 1</p>
<p>或恢复到第二个版本:</p>
<p>$ git cat-file -p 1f7a7a472abf3dd9643fd615f6da379c4acb3e3a > test.txt
$ cat test.txt
version 2</p>
<p>需要记住的是几个版本的文件 SHA-1 值可能与实际的值不同,其次,存储的并不是文件名而仅仅是文件内容。这种对象类型称为 blob 。通过传递 SHA-1 值给 <code class="language-plaintext highlighter-rouge">cat-file -t</code> 命令可以让 Git 返回任何对象的类型:</p>
<p>$ git cat-file -t 1f7a7a472abf3dd9643fd615f6da379c4acb3e3a
blob</p>
<h3 id="tree-树-对象">tree (树) 对象</h3>
<p>接下去来看 tree 对象,tree 对象可以存储文件名,同时也允许存储一组文件。Git 以一种类似 UNIX 文件系统但更简单的方式来存储内容。所有内容以 tree 或 blob 对象存储,其中 tree 对象对应于 UNIX 中的目录,blob 对象则大致对应于 inodes 或文件内容。一个单独的 tree 对象包含一条或多条 tree 记录,每一条记录含有一个指向 blob 或子 tree 对象的 SHA-1 指针,并附有该对象的权限模式 (mode)、类型和文件名信息。以 simplegit 项目为例,最新的 tree 可能是这个样子:</p>
<p>$ git cat-file -p master^{tree}
100644 blob a906cb2a4a904a152e80877d4088654daad0c859 README
100644 blob 8f94139338f9404f26296befa88755fc2598c289 Rakefile
040000 tree 99f1a6d12cb4b6f19c8655fca46c3ecf317074e0 lib</p>
<p><code class="language-plaintext highlighter-rouge">master^{tree}</code> 表示 <code class="language-plaintext highlighter-rouge">branch</code> 分支上最新提交指向的 tree 对象。请注意 <code class="language-plaintext highlighter-rouge">lib</code> 子目录并非一个 blob 对象,而是一个指向别一个 tree 对象的指针:</p>
<p>$ git cat-file -p 99f1a6d12cb4b6f19c8655fca46c3ecf317074e0
100644 blob 47c6340d6459e05787f644c2447d2595f5d3a54b simplegit.rb</p>
<p>从概念上来讲,Git 保存的数据如图 9-1 所示。</p>
<p><a href="/uploads/2012/09/18333fig0901-tn.png"><img src="/uploads/2012/09/18333fig0901-tn.png" alt="图 9-1" /></a>
图 9-1. Git 对象模型的简化版</p>
<p>你可以自己创建 tree 。通常 Git 根据你的暂存区域或 index 来创建并写入一个 tree 。因此要创建一个 tree 对象的话首先要通过将一些文件暂存从而创建一个 index 。可以使用 plumbing 命令 <code class="language-plaintext highlighter-rouge">update-index</code> 为一个单独文件 ── test.txt 文件的第一个版本 ── 创建一个 index 。通过该命令人为的将 test.txt 文件的首个版本加入到了一个新的暂存区域中。由于该文件原先并不在暂存区域中 (甚至就连暂存区域也还没被创建出来呢) ,必须传入 <code class="language-plaintext highlighter-rouge">--add</code> 参数;由于要添加的文件并不在当前目录下而是在数据库中,必须传入 <code class="language-plaintext highlighter-rouge">--cacheinfo</code> 参数。同时指定了文件模式,SHA-1 值和文件名:</p>
<p>$ git update-index –add –cacheinfo 100644 <br />
83baae61804e65cc73a7201a7252750c76066a30 test.txt</p>
<p>在本例中,指定了文件模式为 <code class="language-plaintext highlighter-rouge">100644</code>,表明这是一个普通文件。其他可用的模式有:<code class="language-plaintext highlighter-rouge">100755</code> 表示可执行文件,<code class="language-plaintext highlighter-rouge">120000</code> 表示符号链接。文件模式是从常规的 UNIX 文件模式中参考来的,但是没有那么灵活 ── 上述三种模式仅对 Git 中的文件 (blobs) 有效 (虽然也有其他模式用于目录和子模块)。</p>
<p>现在可以用 <code class="language-plaintext highlighter-rouge">write-tree</code> 命令将暂存区域的内容写到一个 tree 对象了。无需 <code class="language-plaintext highlighter-rouge">-w</code> 参数 ── 如果目标 tree 不存在,调用 <code class="language-plaintext highlighter-rouge">write-tree</code> 会自动根据 index 状态创建一个 tree 对象。</p>
<p>$ git write-tree
d8329fc1cc938780ffdd9f94e0d364e0ea74f579
$ git cat-file -p d8329fc1cc938780ffdd9f94e0d364e0ea74f579
100644 blob 83baae61804e65cc73a7201a7252750c76066a30 test.txt</p>
<p>可以这样验证这确实是一个 tree 对象:</p>
<p>$ git cat-file -t d8329fc1cc938780ffdd9f94e0d364e0ea74f579
tree</p>
<p>再根据 test.txt 的第二个版本以及一个新文件创建一个新 tree 对象:</p>
<p>$ echo ‘new file’ > new.txt
$ git update-index test.txt
$ git update-index –add new.txt</p>
<p>这时暂存区域中包含了 test.txt 的新版本及一个新文件 new.txt 。创建 (写) 该 tree 对象 (将暂存区域或 index 状态写入到一个 tree 对象),然后瞧瞧它的样子:</p>
<p>$ git write-tree
0155eb4229851634a0f03eb265b69f5a2d56f341
$ git cat-file -p 0155eb4229851634a0f03eb265b69f5a2d56f341
100644 blob fa49b077972391ad58037050f2a75f74e3671e92 new.txt
100644 blob 1f7a7a472abf3dd9643fd615f6da379c4acb3e3a test.txt</p>
<p>请注意该 tree 对象包含了两个文件记录,且 test.txt 的 SHA 值是早先值的 “第二版” (<code class="language-plaintext highlighter-rouge">1f7a7a</code>)。来点更有趣的,你将把第一个 tree 对象作为一个子目录加进该 tree 中。可以用 <code class="language-plaintext highlighter-rouge">read-tree</code> 命令将 tree 对象读到暂存区域中去。在这时,通过传一个 <code class="language-plaintext highlighter-rouge">--prefix</code> 参数给 <code class="language-plaintext highlighter-rouge">read-tree</code>,将一个已有的 tree 对象作为一个子 tree 读到暂存区域中:</p>
<p>$ git read-tree –prefix=bak d8329fc1cc938780ffdd9f94e0d364e0ea74f579
$ git write-tree
3c4e9cd789d88d8d89c1073707c3585e41b0e614
$ git cat-file -p 3c4e9cd789d88d8d89c1073707c3585e41b0e614
040000 tree d8329fc1cc938780ffdd9f94e0d364e0ea74f579 bak
100644 blob fa49b077972391ad58037050f2a75f74e3671e92 new.txt
100644 blob 1f7a7a472abf3dd9643fd615f6da379c4acb3e3a test.txt</p>
<p>如果从刚写入的新 tree 对象创建一个工作目录,将得到位于工作目录顶级的两个文件和一个名为 <code class="language-plaintext highlighter-rouge">bak</code> 的子目录,该子目录包含了 test.txt 文件的第一个版本。可以将 Git 用来包含这些内容的数据想象成如图 9-2 所示的样子。</p>
<p><a href="/uploads/2012/09/18333fig0902-tn.png"><img src="/uploads/2012/09/18333fig0902-tn.png" alt="图 9-2" /></a>
图 9-2. 当前 Git 数据的内容结构</p>
<h3 id="commit-提交-对象">commit (提交) 对象</h3>
<p>你现在有三个 tree 对象,它们指向了你要跟踪的项目的不同快照,可是先前的问题依然存在:必须记往三个 SHA-1 值以获得这些快照。你也没有关于谁、何时以及为何保存了这些快照的信息。commit 对象为你保存了这些基本信息。</p>
<p>要创建一个 commit 对象,使用 <code class="language-plaintext highlighter-rouge">commit-tree</code> 命令,指定一个 tree 的 SHA-1,如果有任何前继提交对象,也可以指定。从你写的第一个 tree 开始:</p>
<p>$ echo ‘first commit’ | git commit-tree d8329f
fdf4fc3344e67ab068f836878b6c4951e3b15f3d</p>
<p>通过 <code class="language-plaintext highlighter-rouge">cat-file</code> 查看这个新 commit 对象:</p>
<p>$ git cat-file -p fdf4fc3
tree d8329fc1cc938780ffdd9f94e0d364e0ea74f579
author Scott Chacon <a href="mailto:schacon@gmail.com">schacon@gmail.com</a> 1243040974 -0700
committer Scott Chacon <a href="mailto:schacon@gmail.com">schacon@gmail.com</a> 1243040974 -0700</p>
<p>first commit</p>
<p>commit 对象有格式很简单:指明了该时间点项目快照的顶层树对象、作者/提交者信息(从 Git 设理发店的 <code class="language-plaintext highlighter-rouge">user.name</code> 和 <code class="language-plaintext highlighter-rouge">user.email</code>中获得)以及当前时间戳、一个空行,以及提交注释信息。</p>
<p>接着再写入另外两个 commit 对象,每一个都指定其之前的那个 commit 对象:</p>
<p>$ echo ‘second commit’ | git commit-tree 0155eb -p fdf4fc3
cac0cab538b970a37ea1e769cbbde608743bc96d
$ echo ‘third commit’ | git commit-tree 3c4e9c -p cac0cab
1a410efbd13591db07496601ebc7a059dd55cfe9</p>
<p>每一个 commit 对象都指向了你创建的树对象快照。出乎意料的是,现在已经有了真实的 Git 历史了,所以如果运行 <code class="language-plaintext highlighter-rouge">git log</code> 命令并指定最后那个 commit 对象的 SHA-1 便可以查看历史:</p>
<p>$ git log –stat 1a410e
commit 1a410efbd13591db07496601ebc7a059dd55cfe9
Author: Scott Chacon <a href="mailto:schacon@gmail.com">schacon@gmail.com</a>
Date: Fri May 22 18:15:24 2009 -0700</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> third commit
</code></pre></div></div>
<p>bak/test.txt | 1 +
1 files changed, 1 insertions(+), 0 deletions(-)</p>
<p>commit cac0cab538b970a37ea1e769cbbde608743bc96d
Author: Scott Chacon <a href="mailto:schacon@gmail.com">schacon@gmail.com</a>
Date: Fri May 22 18:14:29 2009 -0700</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> second commit
</code></pre></div></div>
<p>new.txt | 1 +
test.txt | 2 +-
2 files changed, 2 insertions(+), 1 deletions(-)</p>
<p>commit fdf4fc3344e67ab068f836878b6c4951e3b15f3d
Author: Scott Chacon <a href="mailto:schacon@gmail.com">schacon@gmail.com</a>
Date: Fri May 22 18:09:34 2009 -0700</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> first commit
</code></pre></div></div>
<p>test.txt | 1 +
1 files changed, 1 insertions(+), 0 deletions(-)</p>
<p>真棒。你刚刚通过使用低级操作而不是那些普通命令创建了一个 Git 历史。这基本上就是运行 <code class="language-plaintext highlighter-rouge">git add</code> 和 <code class="language-plaintext highlighter-rouge">git commit</code> 命令时 Git 进行的工作 ──保存修改了的文件的 blob,更新索引,创建 tree 对象,最后创建 commit 对象,这些 commit 对象指向了顶层 tree 对象以及先前的 commit 对象。这三类 Git 对象 ── blob,tree 以及 tree ── 都各自以文件的方式保存在 <code class="language-plaintext highlighter-rouge">.git/objects</code> 目录下。以下所列是目前为止样例中的所有对象,每个对象后面的注释里标明了它们保存的内容:</p>
<p>$ find .git/objects -type f
.git/objects/01/55eb4229851634a0f03eb265b69f5a2d56f341 # tree 2
.git/objects/1a/410efbd13591db07496601ebc7a059dd55cfe9 # commit 3
.git/objects/1f/7a7a472abf3dd9643fd615f6da379c4acb3e3a # test.txt v2
.git/objects/3c/4e9cd789d88d8d89c1073707c3585e41b0e614 # tree 3
.git/objects/83/baae61804e65cc73a7201a7252750c76066a30 # test.txt v1
.git/objects/ca/c0cab538b970a37ea1e769cbbde608743bc96d # commit 2
.git/objects/d6/70460b4b4aece5915caf5c68d12f560a9fe3e4 # ‘test content’
.git/objects/d8/329fc1cc938780ffdd9f94e0d364e0ea74f579 # tree 1
.git/objects/fa/49b077972391ad58037050f2a75f74e3671e92 # new.txt
.git/objects/fd/f4fc3344e67ab068f836878b6c4951e3b15f3d # commit 1</p>
<p>如果你按照以上描述进行了操作,可以得到如图 9-3 所示的对象图。</p>
<p><a href="/uploads/2012/09/18333fig0903-tn.png"><img src="/uploads/2012/09/18333fig0903-tn.png" alt="图 9-3" /></a>
图 9-3. Git 目录下的所有对象</p>
<h3 id="对象存储">对象存储</h3>
<p>之前我提到当存储数据内容时,同时会有一个文件头被存储起来。我们花些时间来看看 Git 是如何存储对象的。你将看来如何通过 Ruby 脚本语言存储一个 blob 对象 (这里以字符串 “what is up, doc?” 为例) 。使用 <code class="language-plaintext highlighter-rouge">irb</code> 命令进入 Ruby 交互式模式:</p>
<p>$ irb</p>
<blockquote>
<blockquote>
<p>content = “what is up, doc?”
=> “what is up, doc?”</p>
</blockquote>
</blockquote>
<p>Git 以对象类型为起始内容构造一个文件头,本例中是一个 blob。然后添加一个空格,接着是数据内容的长度,最后是一个空字节 (null byte):</p>
<blockquote>
<blockquote>
<p>header = “blob #{content.length}\0”
=> “blob 16\000”</p>
</blockquote>
</blockquote>
<p>Git 将文件头与原始数据内容拼接起来,并计算拼接后的新内容的 SHA-1 校验和。可以在 Ruby 中使用 <code class="language-plaintext highlighter-rouge">require</code> 语句导入 SHA1 digest 库,然后调用 <code class="language-plaintext highlighter-rouge">Digest::SHA1.hexdigest()</code> 方法计算字符串的 SHA-1 值:</p>
<blockquote>
<blockquote>
<p>store = header + content
=> “blob 16\000what is up, doc?”
require ‘digest/sha1’
=> true
sha1 = Digest::SHA1.hexdigest(store)
=> “bd9dbf5aae1a3862dd1526723246b20206e5fc37”</p>
</blockquote>
</blockquote>
<p>Git 用 zlib 对数据内容进行压缩,在 Ruby 中可以用 zlib 库来实现。首先需要导入该库,然后用 <code class="language-plaintext highlighter-rouge">Zlib::Deflate.deflate()</code> 对数据进行压缩:</p>
<blockquote>
<blockquote>
<p>require ‘zlib’
=> true
zlib_content = Zlib::Deflate.deflate(store)
=> “x\234K\312\311OR04c(\317H,Q\310,V(-\320QH\311O\266\a\000_\034\a\235”</p>
</blockquote>
</blockquote>
<p>最后将用 zlib 压缩后的内容写入磁盘。需要指定保存对象的路径 (SHA-1 值的头两个字符作为子目录名称,剩余 38 个字符作为文件名保存至该子目录中)。在 Ruby 中,如果子目录不存在可以用 <code class="language-plaintext highlighter-rouge">FileUtils.mkdir_p()</code> 函数创建它。接着用 <code class="language-plaintext highlighter-rouge">File.open</code> 方法打开文件,并用 <code class="language-plaintext highlighter-rouge">write()</code> 方法将之前压缩的内容写入该文件:</p>
<blockquote>
<blockquote>
<p>path = ‘.git/objects/’ + sha1[0,2] + ‘/’ + sha1[2,38]
=> “.git/objects/bd/9dbf5aae1a3862dd1526723246b20206e5fc37”
require ‘fileutils’
=> true
FileUtils.mkdir_p(File.dirname(path))
=> “.git/objects/bd”
File.open(path, ‘w’) { |f| f.write zlib_content }
=> 32</p>
</blockquote>
</blockquote>
<p>这就行了 ── 你已经创建了一个正确的 blob 对象。所有的 Git 对象都以这种方式存储,惟一的区别是类型不同 ── 除了字符串 blob,文件头起始内容还可以是 commit 或 tree 。不过虽然 blob 几乎可以是任意内容,commit 和 tree 的数据却是有固定格式的。</p>
<h2 id="git-references">Git References</h2>
<p>你可以执行像 <code class="language-plaintext highlighter-rouge">git log 1a410e</code> 这样的命令来查看完整的历史,但是这样你就要记得 <code class="language-plaintext highlighter-rouge">1a410e</code> 是你最后一次提交,这样才能在提交历史中找到这些对象。你需要一个文件来用一个简单的名字来记录这些 SHA-1 值,这样你就可以用这些指针而不是原来的 SHA-1 值去检索了。</p>
<p>在 Git 中,我们称之为“引用”(references 或者 refs,译者注)。你可以在 <code class="language-plaintext highlighter-rouge">.git/refs</code> 目录下面找到这些包含 SHA-1 值的文件。在这个项目里,这个目录还没不包含任何文件,但是包含这样一个简单的结构:</p>
<p>$ find .git/refs
.git/refs
.git/refs/heads
.git/refs/tags
$ find .git/refs -type f
$</p>
<p>如果想要创建一个新的引用帮助你记住最后一次提交,技术上你可以这样做:</p>
<p>$ echo “1a410efbd13591db07496601ebc7a059dd55cfe9” > .git/refs/heads/master</p>
<p>现在,你就可以在 Git 命令中使用你刚才创建的引用而不是 SHA-1 值:</p>
<p>$ git log –pretty=oneline master
1a410efbd13591db07496601ebc7a059dd55cfe9 third commit
cac0cab538b970a37ea1e769cbbde608743bc96d second commit
fdf4fc3344e67ab068f836878b6c4951e3b15f3d first commit</p>
<p>当然,我们并不鼓励你直接修改这些引用文件。如果你确实需要更新一个引用,Git 提供了一个安全的命令 <code class="language-plaintext highlighter-rouge">update-ref</code>:</p>
<p>$ git update-ref refs/heads/master 1a410efbd13591db07496601ebc7a059dd55cfe9</p>
<p>基本上 Git 中的一个分支其实就是一个指向某个工作版本一条 HEAD 记录的指针或引用。你可以用这条命令创建一个指向第二次提交的分支:</p>
<p>$ git update-ref refs/heads/test cac0ca</p>
<p>这样你的分支将会只包含那次提交以及之前的工作:</p>
<p>$ git log –pretty=oneline test
cac0cab538b970a37ea1e769cbbde608743bc96d second commit
fdf4fc3344e67ab068f836878b6c4951e3b15f3d first commit</p>
<p>现在,你的 Git 数据库应该看起来像图 9-4 一样。</p>
<p><a href="/uploads/2012/09/18333fig0904-tn.png"><img src="/uploads/2012/09/18333fig0904-tn.png" alt="图 9-4" /></a>
图 9-4. 包含分支引用的 Git 目录对象</p>
<p>每当你执行 <code class="language-plaintext highlighter-rouge">git branch (分支名称)</code> 这样的命令,Git 基本上就是执行 <code class="language-plaintext highlighter-rouge">update-ref</code> 命令,把你现在所在分支中最后一次提交的 SHA-1 值,添加到你要创建的分支的引用。</p>
<h3 id="head-标记">HEAD 标记</h3>
<p>现在的问题是,当你执行 <code class="language-plaintext highlighter-rouge">git branch (分支名称)</code> 这条命令的时候,Git 怎么知道最后一次提交的 SHA-1 值呢?答案就是 HEAD 文件。HEAD 文件是一个指向你当前所在分支的引用标识符。这样的引用标识符——它看起来并不像一个普通的引用——其实并不包含 SHA-1 值,而是一个指向另外一个引用的指针。如果你看一下这个文件,通常你将会看到这样的内容:</p>
<p>$ cat .git/HEAD
ref: refs/heads/master</p>
<p>如果你执行 <code class="language-plaintext highlighter-rouge">git checkout test</code>,Git 就会更新这个文件,看起来像这样:</p>
<p>$ cat .git/HEAD
ref: refs/heads/test</p>
<p>当你再执行 <code class="language-plaintext highlighter-rouge">git commit</code> 命令,它就创建了一个 commit 对象,把这个 commit 对象的父级设置为 HEAD 指向的引用的 SHA-1 值。</p>
<p>你也可以手动编辑这个文件,但是同样有一个更安全的方法可以这样做:<code class="language-plaintext highlighter-rouge">symbolic-ref</code>。你可以用下面这条命令读取 HEAD 的值:</p>
<p>$ git symbolic-ref HEAD
refs/heads/master</p>
<p>你也可以设置 HEAD 的值:</p>
<p>$ git symbolic-ref HEAD refs/heads/test
$ cat .git/HEAD
ref: refs/heads/test</p>
<p>但是你不能设置成 refs 以外的形式:</p>
<p>$ git symbolic-ref HEAD test
fatal: Refusing to point HEAD outside of refs/</p>
<h3 id="tags">Tags</h3>
<p>你刚刚已经重温过了 Git 的三个主要对象类型,现在这是第四种。Tag 对象非常像一个 commit 对象——包含一个标签,一组数据,一个消息和一个指针。最主要的区别就是 Tag 对象指向一个 commit 而不是一个 tree。它就像是一个分支引用,但是不会变化——永远指向同一个 commit,仅仅是提供一个更加友好的名字。</p>
<p>正如我们在第二章所讨论的,Tag 有两种类型:annotated 和 lightweight 。你可以类似下面这样的命令建立一个 lightweight tag:</p>
<p>$ git update-ref refs/tags/v1.0 cac0cab538b970a37ea1e769cbbde608743bc96d</p>
<p>这就是 lightweight tag 的全部 —— 一个永远不会发生变化的分支。 annotated tag 要更复杂一点。如果你创建一个 annotated tag,Git 会创建一个 tag 对象,然后写入一个指向指向它而不是直接指向 commit 的 reference。你可以这样创建一个 annotated tag(<code class="language-plaintext highlighter-rouge">-a</code> 参数表明这是一个 annotated tag):</p>
<p>$ git tag -a v1.1 1a410efbd13591db07496601ebc7a059dd55cfe9 -m ‘test tag’</p>
<p>这是所创建对象的 SHA-1 值:</p>
<p>$ cat .git/refs/tags/v1.1
9585191f37f7b0fb9444f35a9bf50de191beadc2</p>
<p>现在你可以运行 <code class="language-plaintext highlighter-rouge">cat-file</code> 命令检查这个 SHA-1 值:</p>
<p>$ git cat-file -p 9585191f37f7b0fb9444f35a9bf50de191beadc2
object 1a410efbd13591db07496601ebc7a059dd55cfe9
type commit
tag v1.1
tagger Scott Chacon <a href="mailto:schacon@gmail.com">schacon@gmail.com</a> Sat May 23 16:48:58 2009 -0700</p>
<p>test tag</p>
<p>值得注意的是这个对象指向你所标记的 commit 对象的 SHA-1 值。同时需要注意的是它并不是必须要指向一个 commit 对象;你可以标记任何 Git 对象。例如,在 Git 的源代码里,管理者添加了一个 GPG 公钥(这是一个 blob 对象)对它做了一个标签。你就可以运行:</p>
<p>$ git cat-file blob junio-gpg-pub</p>
<p>来查看 Git 源代码仓库中的公钥. Linux kernel 也有一个不是指向 commit 对象的 tag —— 第一个 tag 是在导入源代码的时候创建的,它指向初始 tree (initial tree,译者注)。</p>
<h3 id="remotes">Remotes</h3>
<p>你将会看到的第四种 reference 是 remote reference(远程引用,译者注)。如果你添加了一个 remote 然后推送代码过去,Git 会把你最后一次推送到这个 remote 的每个分支的值都记录在 <code class="language-plaintext highlighter-rouge">refs/remotes</code> 目录下。例如,你可以添加一个叫做 <code class="language-plaintext highlighter-rouge">origin</code> 的 remote 然后把你的 <code class="language-plaintext highlighter-rouge">master</code> 分支推送上去:</p>
<p>$ git remote add origin git@github.com:schacon/simplegit-progit.git
$ git push origin master
Counting objects: 11, done.
Compressing objects: 100% (5/5), done.
Writing objects: 100% (7/7), 716 bytes, done.
Total 7 (delta 2), reused 4 (delta 1)
To git@github.com:schacon/simplegit-progit.git
a11bef0..ca82a6d master -> master</p>
<p>然后查看 <code class="language-plaintext highlighter-rouge">refs/remotes/origin/master</code> 这个文件,你就会发现 <code class="language-plaintext highlighter-rouge">origin</code> remote 中的 <code class="language-plaintext highlighter-rouge">master</code> 分支就是你最后一次和服务器的通信。</p>
<p>$ cat .git/refs/remotes/origin/master
ca82a6dff817ec66f44342007202690a93763949</p>
<p>Remote 应用和分支主要区别在于他们是不能被 check out 的。Git 把他们当作是标记这些了这些分支在服务器上最后状态的一种书签。</p>
<h2 id="packfiles">Packfiles</h2>
<p>我们再来看一下 test Git 仓库。目前为止,有 11 个对象 ── 4 个 blob,3 个 tree,3 个 commit 以及一个 tag:</p>
<p>$ find .git/objects -type f
.git/objects/01/55eb4229851634a0f03eb265b69f5a2d56f341 # tree 2
.git/objects/1a/410efbd13591db07496601ebc7a059dd55cfe9 # commit 3
.git/objects/1f/7a7a472abf3dd9643fd615f6da379c4acb3e3a # test.txt v2
.git/objects/3c/4e9cd789d88d8d89c1073707c3585e41b0e614 # tree 3
.git/objects/83/baae61804e65cc73a7201a7252750c76066a30 # test.txt v1
.git/objects/95/85191f37f7b0fb9444f35a9bf50de191beadc2 # tag
.git/objects/ca/c0cab538b970a37ea1e769cbbde608743bc96d # commit 2
.git/objects/d6/70460b4b4aece5915caf5c68d12f560a9fe3e4 # ‘test content’
.git/objects/d8/329fc1cc938780ffdd9f94e0d364e0ea74f579 # tree 1
.git/objects/fa/49b077972391ad58037050f2a75f74e3671e92 # new.txt
.git/objects/fd/f4fc3344e67ab068f836878b6c4951e3b15f3d # commit 1</p>
<p>Git 用 zlib 压缩文件内容,因此这些文件并没有占用太多空间,所有文件加起来总共仅用了 925 字节。接下去你会添加一些大文件以演示 Git 的一个很有意思的功能。将你之前用到过的 Grit 库中的 repo.rb 文件加进去 ── 这个源代码文件大小约为 12K:</p>
<p>$ curl http://github.com/mojombo/grit/raw/master/lib/grit/repo.rb > repo.rb
$ git add repo.rb
$ git commit -m ‘added repo.rb’
[master 484a592] added repo.rb
3 files changed, 459 insertions(+), 2 deletions(-)
delete mode 100644 bak/test.txt
create mode 100644 repo.rb
rewrite test.txt (100%)</p>
<p>如果查看一下生成的 tree,可以看到 repo.rb 文件的 blob 对象的 SHA-1 值:</p>
<p>$ git cat-file -p master^{tree}
100644 blob fa49b077972391ad58037050f2a75f74e3671e92 new.txt
100644 blob 9bc1dc421dcd51b4ac296e3e5b6e2a99cf44391e repo.rb
100644 blob e3f094f522629ae358806b17daf78246c27c007b test.txt</p>
<p>然后可以用 <code class="language-plaintext highlighter-rouge">git cat-file</code> 命令查看这个对象有多大:</p>
<p>$ git cat-file -s 9bc1dc421dcd51b4ac296e3e5b6e2a99cf44391e
12898</p>
<p>稍微修改一下些文件,看会发生些什么:</p>
<p>$ echo ‘# testing’ » repo.rb
$ git commit -am ‘modified repo a bit’
[master ab1afef] modified repo a bit
1 files changed, 1 insertions(+), 0 deletions(-)</p>
<p>查看这个 commit 生成的 tree,可以看到一些有趣的东西:</p>
<p>$ git cat-file -p master^{tree}
100644 blob fa49b077972391ad58037050f2a75f74e3671e92 new.txt
100644 blob 05408d195263d853f09dca71d55116663690c27c repo.rb
100644 blob e3f094f522629ae358806b17daf78246c27c007b test.txt</p>
<p>blob 对象与之前的已经不同了。这说明虽然只是往一个 400 行的文件最后加入了一行内容,Git 却用一个全新的对象来保存新的文件内容:</p>
<p>$ git cat-file -s 05408d195263d853f09dca71d55116663690c27c
12908</p>
<p>你的磁盘上有了两个几乎完全相同的 12K 的对象。如果 Git 只完整保存其中一个,并保存另一个对象的差异内容,岂不更好?</p>
<p>事实上 Git 可以那样做。Git 往磁盘保存对象时默认使用的格式叫松散对象 (loose object) 格式。Git 时不时地将这些对象打包至一个叫 packfile 的二进制文件以节省空间并提高效率。当仓库中有太多的松散对象,或是手工调用 <code class="language-plaintext highlighter-rouge">git gc</code> 命令,或推送至远程服务器时,Git 都会这样做。手工调用 <code class="language-plaintext highlighter-rouge">git gc</code> 命令让 Git 将库中对象打包并看会发生些什么:</p>
<p>$ git gc
Counting objects: 17, done.
Delta compression using 2 threads.
Compressing objects: 100% (13/13), done.
Writing objects: 100% (17/17), done.
Total 17 (delta 1), reused 10 (delta 0)</p>
<p>查看一下 objects 目录,会发现大部分对象都不在了,与此同时出现了两个新文件:</p>
<p>$ find .git/objects -type f
.git/objects/71/08f7ecb345ee9d0084193f147cdad4d2998293
.git/objects/d6/70460b4b4aece5915caf5c68d12f560a9fe3e4
.git/objects/info/packs
.git/objects/pack/pack-7a16e4488ae40c7d2bc56ea2bd43e25212a66c45.idx
.git/objects/pack/pack-7a16e4488ae40c7d2bc56ea2bd43e25212a66c45.pack</p>
<p>仍保留着的几个对象是未被任何 commit 引用的 blob ── 在此例中是你之前创建的 “what is up, doc?” 和 “test content” 这两个示例 blob。你从没将他们添加至任何 commit,所以 Git 认为它们是 “悬空” 的,不会将它们打包进 packfile 。</p>
<p>剩下的文件是新创建的 packfile 以及一个索引。packfile 文件包含了刚才从文件系统中移除的所有对象。索引文件包含了 packfile 的偏移信息,这样就可以快速定位任意一个指定对象。有意思的是运行 <code class="language-plaintext highlighter-rouge">gc</code> 命令前磁盘上的对象大小约为 12K ,而这个新生成的 packfile 仅为 6K 大小。通过打包对象减少了一半磁盘使用空间。</p>
<p>Git 是如何做到这点的?Git 打包对象时,会查找命名及尺寸相近的文件,并只保存文件不同版本之间的差异内容。可以查看一下 packfile ,观察它是如何节省空间的。<code class="language-plaintext highlighter-rouge">git verify-pack</code> 命令用于显示已打包的内容:</p>
<p>$ git verify-pack -v <br />
.git/objects/pack/pack-7a16e4488ae40c7d2bc56ea2bd43e25212a66c45.idx
0155eb4229851634a0f03eb265b69f5a2d56f341 tree 71 76 5400
05408d195263d853f09dca71d55116663690c27c blob 12908 3478 874
09f01cea547666f58d6a8d809583841a7c6f0130 tree 106 107 5086
1a410efbd13591db07496601ebc7a059dd55cfe9 commit 225 151 322
1f7a7a472abf3dd9643fd615f6da379c4acb3e3a blob 10 19 5381
3c4e9cd789d88d8d89c1073707c3585e41b0e614 tree 101 105 5211
484a59275031909e19aadb7c92262719cfcdf19a commit 226 153 169
83baae61804e65cc73a7201a7252750c76066a30 blob 10 19 5362
9585191f37f7b0fb9444f35a9bf50de191beadc2 tag 136 127 5476
9bc1dc421dcd51b4ac296e3e5b6e2a99cf44391e blob 7 18 5193 1
05408d195263d853f09dca71d55116663690c27c <br />
ab1afef80fac8e34258ff41fc1b867c702daa24b commit 232 157 12
cac0cab538b970a37ea1e769cbbde608743bc96d commit 226 154 473
d8329fc1cc938780ffdd9f94e0d364e0ea74f579 tree 36 46 5316
e3f094f522629ae358806b17daf78246c27c007b blob 1486 734 4352
f8f51d7d8a1760462eca26eebafde32087499533 tree 106 107 749
fa49b077972391ad58037050f2a75f74e3671e92 blob 9 18 856
fdf4fc3344e67ab068f836878b6c4951e3b15f3d commit 177 122 627
chain length = 1: 1 object
pack-7a16e4488ae40c7d2bc56ea2bd43e25212a66c45.pack: ok</p>
<p>如果你还记得的话, <code class="language-plaintext highlighter-rouge">9bc1d</code> 这个 blob 是 repo.rb 文件的第一个版本,这个 blob 引用了 <code class="language-plaintext highlighter-rouge">05408</code> 这个 blob,即该文件的第二个版本。命令输出内容的第三列显示的是对象大小,可以看到 <code class="language-plaintext highlighter-rouge">05408</code> 占用了 12K 空间,而 <code class="language-plaintext highlighter-rouge">9bc1d</code> 仅为 7 字节。非常有趣的是第二个版本才是完整保存文件内容的对象,而第一个版本是以差异方式保存的 ── 这是因为大部分情况下需要快速访问文件的最新版本。</p>
<p>最妙的是可以随时进行重新打包。Git 自动定期对仓库进行重新打包以节省空间。当然也可以手工运行 <code class="language-plaintext highlighter-rouge">git gc</code> 命令来这么做。</p>
<h2 id="the-refspec">The Refspec</h2>
<p>这本书读到这里,你已经使用过一些简单的远程分支到本地引用的映射方式了,这种映射可以更为复杂。
假设你像这样添加了一项远程仓库:</p>
<p>$ git remote add origin git@github.com:schacon/simplegit-progit.git</p>
<p>它在你的 <code class="language-plaintext highlighter-rouge">.git/config</code> 文件中添加了一节,指定了远程的名称 (<code class="language-plaintext highlighter-rouge">origin</code>), 远程仓库的URL地址,和用于获取操作的 Refspec:</p>
<p>[remote “origin”]
url = git@github.com:schacon/simplegit-progit.git
fetch = +refs/heads/<em>:refs/remotes/origin/</em></p>
<p>Refspec 的格式是一个可选的 <code class="language-plaintext highlighter-rouge">+</code> 号,接着是 <code class="language-plaintext highlighter-rouge"><src>:<dst></code> 的格式,这里 <code class="language-plaintext highlighter-rouge"><src></code> 是远端上的引用格式, <code class="language-plaintext highlighter-rouge"><dst></code> 是将要记录在本地的引用格式。可选的 <code class="language-plaintext highlighter-rouge">+</code> 号告诉 Git 在即使不能快速演进的情况下,也去强制更新它。</p>
<p>缺省情况下 refspec 会被 <code class="language-plaintext highlighter-rouge">git remote add</code> 命令所自动生成, Git 会获取远端上 <code class="language-plaintext highlighter-rouge">refs/heads/</code> 下面的所有引用,并将它写入到本地的 <code class="language-plaintext highlighter-rouge">refs/remotes/origin/</code>. 所以,如果远端上有一个 <code class="language-plaintext highlighter-rouge">master</code> 分支,你在本地可以通过下面这种方式来访问它的历史记录:</p>
<p>$ git log origin/master
$ git log remotes/origin/master
$ git log refs/remotes/origin/master</p>
<p>它们全是等价的,因为 Git 把它们都扩展成 <code class="language-plaintext highlighter-rouge">refs/remotes/origin/master</code>.</p>
<p>如果你想让 Git 每次只拉取远程的 <code class="language-plaintext highlighter-rouge">master</code> 分支,而不是远程的所有分支,你可以把 fetch 这一行修改成这样:</p>
<p>fetch = +refs/heads/master:refs/remotes/origin/master</p>
<p>这是 <code class="language-plaintext highlighter-rouge">git fetch</code> 操作对这个远端的缺省 refspec 值。而如果你只想做一次该操作,也可以在命令行上指定这个 refspec. 如可以这样拉取远程的 <code class="language-plaintext highlighter-rouge">master</code> 分支到本地的 <code class="language-plaintext highlighter-rouge">origin/mymaster</code> 分支:</p>
<p>$ git fetch origin master:refs/remotes/origin/mymaster</p>
<p>你也可以在命令行上指定多个 refspec. 像这样可以一次获取远程的多个分支:</p>
<p>$ git fetch origin master:refs/remotes/origin/mymaster <br />
topic:refs/remotes/origin/topic
From git@github.com:schacon/simplegit
! [rejected] master -> origin/mymaster (non fast forward)</p>
<ul>
<li>[new branch] topic -> origin/topic</li>
</ul>
<p>在这个例子中, <code class="language-plaintext highlighter-rouge">master</code> 分支因为不是一个可以快速演进的引用而拉取操作被拒绝。你可以在 refspec 之前使用一个 <code class="language-plaintext highlighter-rouge">+</code> 号来重载这种行为。</p>
<p>你也可以在配置文件中指定多个 refspec. 如你想在每次获取时都获取 <code class="language-plaintext highlighter-rouge">master</code> 和 <code class="language-plaintext highlighter-rouge">experiment</code> 分支,就添加两行:</p>
<p>[remote “origin”]
url = git@github.com:schacon/simplegit-progit.git
fetch = +refs/heads/master:refs/remotes/origin/master
fetch = +refs/heads/experiment:refs/remotes/origin/experiment</p>
<p>但是这里不能使用部分通配符,像这样就是不合法的:</p>
<p>fetch = +refs/heads/qa<em>:refs/remotes/origin/qa</em></p>
<p>但无论如何,你可以使用命名空间来达到这个目的。如你有一个QA组,他们推送一系列分支,你想每次获取 <code class="language-plaintext highlighter-rouge">master</code> 分支和QA组的所有分支,你可以使用这样的配置段落:</p>
<p>[remote “origin”]
url = git@github.com:schacon/simplegit-progit.git
fetch = +refs/heads/master:refs/remotes/origin/master
fetch = +refs/heads/qa/<em>:refs/remotes/origin/qa/</em></p>
<p>如果你的工作流很复杂,有QA组推送的分支、开发人员推送的分支、和集成人员推送的分支,并且他们在远程分支上协作,你可以采用这种方式为他们创建各自的命名空间。</p>
<h3 id="推送-refspec">推送 Refspec</h3>
<p>采用命名空间的方式确实很棒,但QA组成员第1次是如何将他们的分支推送到 <code class="language-plaintext highlighter-rouge">qa/</code> 空间里面的呢?答案是你可以使用 refspec 来推送。</p>
<p>如果QA组成员想把他们的 <code class="language-plaintext highlighter-rouge">master</code> 分支推送到远程的 <code class="language-plaintext highlighter-rouge">qa/master</code> 分支上,可以这样运行:</p>
<p>$ git push origin master:refs/heads/qa/master</p>
<p>如果他们想让 Git 每次运行 <code class="language-plaintext highlighter-rouge">git push origin</code> 时都这样自动推送,他们可以在配置文件中添加 <code class="language-plaintext highlighter-rouge">push</code> 值:</p>
<p>[remote “origin”]
url = git@github.com:schacon/simplegit-progit.git
fetch = +refs/heads/<em>:refs/remotes/origin/</em>
push = refs/heads/master:refs/heads/qa/master</p>
<p>这样,就会让 <code class="language-plaintext highlighter-rouge">git push origin</code> 缺省就把本地的 <code class="language-plaintext highlighter-rouge">master</code> 分支推送到远程的 <code class="language-plaintext highlighter-rouge">qa/master</code> 分支上。</p>
<h3 id="删除引用">删除引用</h3>
<p>你也可以使用 refspec 来删除远程的引用,是通过运行这样的命令:</p>
<p>$ git push origin :topic</p>
<p>因为 refspec 的格式是 <code class="language-plaintext highlighter-rouge"><src>:<dst></code>, 通过把 <code class="language-plaintext highlighter-rouge"><src></code> 部分留空的方式,这个意思是是把远程的 <code class="language-plaintext highlighter-rouge">topic</code> 分支变成空,也就是删除它。</p>
<h2 id="传输协议">传输协议</h2>
<p>Git 可以以两种主要的方式跨越两个仓库传输数据:基于HTTP协议之上,和 <code class="language-plaintext highlighter-rouge">file://</code>, <code class="language-plaintext highlighter-rouge">ssh://</code>, 和 <code class="language-plaintext highlighter-rouge">git://</code> 等智能传输协议。这一节带你快速浏览这两种主要的协议操作过程。</p>
<h3 id="哑协议">哑协议</h3>
<p>Git 基于HTTP之上传输通常被称为哑协议,这是因为它在服务端不需要有针对 Git 特有的代码。这个获取过程仅仅是一系列GET请求,客户端可以假定服务端的Git仓库中的布局。让我们以 simplegit 库来看看 <code class="language-plaintext highlighter-rouge">http-fetch</code> 的过程:</p>
<p>$ git clone http://github.com/schacon/simplegit-progit.git</p>
<p>它做的第1件事情就是获取 <code class="language-plaintext highlighter-rouge">info/refs</code> 文件。这个文件是在服务端运行了 <code class="language-plaintext highlighter-rouge">update-server-info</code> 所生成的,这也解释了为什么在服务端要想使用HTTP传输,必须要开启 <code class="language-plaintext highlighter-rouge">post-receive</code> 钩子:</p>
<p>=> GET info/refs
ca82a6dff817ec66f44342007202690a93763949 refs/heads/master</p>
<p>现在你有一个远端引用和SHA值的列表。下一步是寻找HEAD引用,这样你就知道了在完成后,什么应该被检出到工作目录:</p>
<p>=> GET HEAD
ref: refs/heads/master</p>
<p>这说明在完成获取后,需要检出 <code class="language-plaintext highlighter-rouge">master</code> 分支。
这时,已经可以开始漫游操作了。因为你的起点是在 <code class="language-plaintext highlighter-rouge">info/refs</code> 文件中所提到的 <code class="language-plaintext highlighter-rouge">ca82a6</code> commit 对象,你的开始操作就是获取它:</p>
<p>=> GET objects/ca/82a6dff817ec66f44342007202690a93763949
(179 bytes of binary data)</p>
<p>然后你取回了这个对象 - 这在服务端是一个松散格式的对象,你使用的是静态的 HTTP GET 请求获取的。可以使用 zlib 解压缩它,去除其头部,查看它的 commmit 内容:</p>
<p>$ git cat-file -p ca82a6dff817ec66f44342007202690a93763949
tree cfda3bf379e4f8dba8717dee55aab78aef7f4daf
parent 085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7
author Scott Chacon <a href="mailto:schacon@gmail.com">schacon@gmail.com</a> 1205815931 -0700
committer Scott Chacon <a href="mailto:schacon@gmail.com">schacon@gmail.com</a> 1240030591 -0700</p>
<p>changed the version number</p>
<p>这样,就得到了两个需要进一步获取的对象 - <code class="language-plaintext highlighter-rouge">cfda3b</code> 是这个 commit 对象所对应的 tree 对象,和 <code class="language-plaintext highlighter-rouge">085bb3</code> 是它的父对象;</p>
<p>=> GET objects/08/5bb3bcb608e1e8451d4b2432f8ecbe6306e7e7
(179 bytes of data)</p>
<p>这样就取得了这它的下一步 commit 对象,再抓取 tree 对象:</p>
<p>=> GET objects/cf/da3bf379e4f8dba8717dee55aab78aef7f4daf
(404 - Not Found)</p>
<p>Oops - 看起来这个 tree 对象在服务端并不以松散格式对象存在,所以得到了404响应,代表在HTTP服务端没有找到该对象。这有好几个原因 - 这个对象可能在替代仓库里面,或者在打包文件里面, Git 会首先检查任何列出的替代仓库:</p>
<p>=> GET objects/info/http-alternates
(empty file)</p>
<p>如果这返回了几个替代仓库列表,那么它会去那些地方检查松散格式对象和文件 - 这是一种在软件分叉之间共享对象以节省磁盘的好方法。然而,在这个例子中,没有替代仓库。所以你所需要的对象肯定在某个打包文件中。要检查服务端有哪些打包格式文件,你需要获取 <code class="language-plaintext highlighter-rouge">objects/info/packs</code> 文件,这里面包含有打包文件列表(是的,它也是被 <code class="language-plaintext highlighter-rouge">update-server-info</code> 所生成的);</p>
<p>=> GET objects/info/packs
P pack-816a9b2334da9953e530f27bcac22082a9f5b835.pack</p>
<p>这里服务端只有一个打包文件,所以你要的对象显然就在里面。但是你可以先检查它的索引文件以确认。这在服务端有多个打包文件时也很有用,因为这样就可以先检查你所需要的对象空间是在哪一个打包文件里面了:</p>
<p>=> GET objects/pack/pack-816a9b2334da9953e530f27bcac22082a9f5b835.idx
(4k of binary data)</p>
<p>现在你有了这个打包文件的索引,你可以看看你要的对象是否在里面 - 因为索引文件列出了这个打包文件所包含的所有对象的SHA值,和该对象存在于打包文件中的偏移量,所以你只需要简单地获取整个打包文件:</p>
<p>=> GET objects/pack/pack-816a9b2334da9953e530f27bcac22082a9f5b835.pack
(13k of binary data)</p>
<p>现在你也有了这个 tree 对象,你可以继续在 commit 对象上漫游。它们全部都在这个你已经下载到的打包文件里面,所以你不用继续向服务端请求更多下载了。 在这完成之后,由于下载开始时已探明HEAD引用是指向 <code class="language-plaintext highlighter-rouge">master</code> 分支, Git 会将它检出到工作目录。</p>
<p>整个过程看起来就像这样:</p>
<p>$ git clone http://github.com/schacon/simplegit-progit.git
Initialized empty Git repository in /private/tmp/simplegit-progit/.git/
got ca82a6dff817ec66f44342007202690a93763949
walk ca82a6dff817ec66f44342007202690a93763949
got 085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7
Getting alternates list for http://github.com/schacon/simplegit-progit.git
Getting pack list for http://github.com/schacon/simplegit-progit.git
Getting index for pack 816a9b2334da9953e530f27bcac22082a9f5b835
Getting pack 816a9b2334da9953e530f27bcac22082a9f5b835
which contains cfda3bf379e4f8dba8717dee55aab78aef7f4daf
walk 085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7
walk a11bef06a3f659402fe7563abf99ad00de2209e6</p>
<h3 id="智能协议">智能协议</h3>
<p>这个HTTP方法是很简单但效率不是很高。使用智能协议是传送数据的更常用的方法。这些协议在远端都有Git智能型进程在服务 - 它可以读出本地数据并计算出客户端所需要的,并生成合适的数据给它,这有两类传输数据的进程:一对用于上传数据和一对用于下载。</p>
<h4 id="上传数据">上传数据</h4>
<p>为了上传数据至远端, Git 使用 <code class="language-plaintext highlighter-rouge">send-pack</code> 和 <code class="language-plaintext highlighter-rouge">receive-pack</code> 进程。这个 <code class="language-plaintext highlighter-rouge">send-pack</code> 进程运行在客户端上,它连接至远端运行的 <code class="language-plaintext highlighter-rouge">receive-pack</code> 进程。</p>
<p>举例来说,你在你的项目上运行了 <code class="language-plaintext highlighter-rouge">git push origin master</code>, 并且 <code class="language-plaintext highlighter-rouge">origin</code> 被定义为一个使用SSH协议的URL。 Git 会使用 <code class="language-plaintext highlighter-rouge">send-pack</code> 进程,它会启动一个基于SSH的连接到服务器。它尝试像这样透过SSH在服务端运行命令:</p>
<p>$ ssh -x git@github.com “git-receive-pack ‘schacon/simplegit-progit.git’”
005bca82a6dff817ec66f4437202690a93763949 refs/heads/master report-status delete-refs
003e085bb3bcb608e1e84b2432f8ecbe6306e7e7 refs/heads/topic
0000</p>
<p>这里的 <code class="language-plaintext highlighter-rouge">git-receive-pack</code> 命令会立即对它所拥有的每一个引用响应一行 - 在这个例子中,只有 <code class="language-plaintext highlighter-rouge">master</code> 分支和它的SHA值。这里第1行也包含了服务端的能力列表(这里是 <code class="language-plaintext highlighter-rouge">report-status</code> 和 <code class="language-plaintext highlighter-rouge">delete-refs</code>)。</p>
<p>每一行以4字节的十六进制开始,用于指定整行的长度。你看到第1行以005b开始,这在十六进制中表示91,意味着第1行有91字节长。下一行以003e起始,表示有62字节长,所以需要读剩下的62字节。再下一行是0000开始,表示服务器已完成了引用列表过程。</p>
<p>现在它知道了服务端的状态,你的 <code class="language-plaintext highlighter-rouge">send-pack</code> 进程会判断哪些 commit 是它所拥有但服务端没有的。针对每个引用,这次推送都会告诉对端的 <code class="language-plaintext highlighter-rouge">receive-pack</code> 这个信息。举例说,如果你在更新 <code class="language-plaintext highlighter-rouge">master</code> 分支,并且增加 <code class="language-plaintext highlighter-rouge">experiment</code> 分支,这个 <code class="language-plaintext highlighter-rouge">send-pack</code> 将会是像这样:</p>
<p>0085ca82a6dff817ec66f44342007202690a93763949 15027957951b64cf874c3557a0f3547bd83b3ff6 refs/heads/master report-status
00670000000000000000000000000000000000000000 cdfdb42577e2506715f8cfeacdbabc092bf63e8d refs/heads/experiment
0000</p>
<p>这里的全’0’的SHA-1值表示之前没有过这个对象 - 因为你是在添加新的 experiment 引用。如果你在删除一个引用,你会看到相反的: 就是右边是全’0’。</p>
<p>Git 针对每个引用发送这样一行信息,就是旧的SHA值,新的SHA值,和将要更新的引用的名称。第1行还会包含有客户端的能力。下一步,客户端会发送一个所有那些服务端所没有的对象的一个打包文件。最后,服务端以成功(或者失败)来响应:</p>
<p>000Aunpack ok</p>
<h4 id="下载数据">下载数据</h4>
<p>当你在下载数据时, <code class="language-plaintext highlighter-rouge">fetch-pack</code> 和 <code class="language-plaintext highlighter-rouge">upload-pack</code> 进程就起作用了。客户端启动 <code class="language-plaintext highlighter-rouge">fetch-pack</code> 进程,连接至远端的 <code class="language-plaintext highlighter-rouge">upload-pack</code> 进程,以协商后续数据传输过程。</p>
<p>在远端仓库有不同的方式启动 <code class="language-plaintext highlighter-rouge">upload-pack</code> 进程。你可以使用与 <code class="language-plaintext highlighter-rouge">receive-pack</code> 相同的透过SSH管道的方式,也可以通过 Git 后台来启动这个进程,它默认监听在9418号端口上。这里 <code class="language-plaintext highlighter-rouge">fetch-pack</code> 进程在连接后像这样向后台发送数据:</p>
<p>003fgit-upload-pack schacon/simplegit-progit.git\0host=myserver.com\0</p>
<p>它也是以4字节指定后续字节长度的方式开始,然后是要运行的命令,和一个空字节,然后是服务端的主机名,再跟随一个最后的空字节。 Git 后台进程会检查这个命令是否可以运行,以及那个仓库是否存在,以及是否具有公开权限。如果所有检查都通过了,它会启动这个 <code class="language-plaintext highlighter-rouge">upload-pack</code> 进程并将客户端的请求移交给它。</p>
<p>如果你透过SSH使用获取功能, <code class="language-plaintext highlighter-rouge">fetch-pack</code> 会像这样运行:</p>
<p>$ ssh -x git@github.com “git-upload-pack ‘schacon/simplegit-progit.git’”</p>
<p>不管哪种方式,在 <code class="language-plaintext highlighter-rouge">fetch-pack</code> 连接之后, <code class="language-plaintext highlighter-rouge">upload-pack</code> 都会以这种形式返回:</p>
<p>0088ca82a6dff817ec66f44342007202690a93763949 HEAD\0multi_ack thin-pack <br />
side-band side-band-64k ofs-delta shallow no-progress include-tag
003fca82a6dff817ec66f44342007202690a93763949 refs/heads/master
003e085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7 refs/heads/topic
0000</p>
<p>这与 <code class="language-plaintext highlighter-rouge">receive-pack</code> 响应很类似,但是这里指的能力是不同的。而且它还会指出HEAD引用,让客户端可以检查是否是一份克隆。</p>
<p>在这里, <code class="language-plaintext highlighter-rouge">fetch-pack</code> 进程检查它自己所拥有的对象和所有它需要的对象,通过发送 “want” 和所需对象的SHA值,发送 “have” 和所有它已拥有的对象的SHA值。在列表完成时,再发送 “done” 通知 <code class="language-plaintext highlighter-rouge">upload-pack</code> 进程开始发送所需对象的打包文件。这个过程看起来像这样:</p>
<p>0054want ca82a6dff817ec66f44342007202690a93763949 ofs-delta
0032have 085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7
0000
0009done</p>
<p>这是传输协议的一个很基础的例子,在更复杂的例子中,客户端可能会支持 <code class="language-plaintext highlighter-rouge">multi_ack</code> 或者 <code class="language-plaintext highlighter-rouge">side-band</code> 能力;但是这个例子中展示了智能协议的基本交互过程。</p>
<h2 id="维护及数据恢复">维护及数据恢复</h2>
<p>你时不时的需要进行一些清理工作 ── 如减小一个仓库的大小,清理导入的库,或是恢复丢失的数据。本节将描述这类使用场景。</p>
<h3 id="维护">维护</h3>
<p>Git 会不定时地自动运行称为 “auto gc” 的命令。大部分情况下该命令什么都不处理。不过要是存在太多松散对象 (loose object, 不在 packfile 中的对象) 或 packfile,Git 会进行调用 <code class="language-plaintext highlighter-rouge">git gc</code> 命令。 <code class="language-plaintext highlighter-rouge">gc</code> 指垃圾收集 (garbage collect),此命令会做很多工作:收集所有松散对象并将它们存入 packfile,合并这些 packfile 进一个大的 packfile,然后将不被任何 commit 引用并且已存在一段时间 (数月) 的对象删除。</p>
<p>可以手工运行 auto gc 命令:</p>
<p>$ git gc –auto</p>
<p>再次强调,这个命令一般什么都不干。如果有 7,000 个左右的松散对象或是 50 个以上的 packfile,Git 才会真正调用 gc 命令。可能通过修改配置中的 <code class="language-plaintext highlighter-rouge">gc.auto</code> 和 <code class="language-plaintext highlighter-rouge">gc.autopacklimit</code> 来调整这两个阈值。</p>
<p><code class="language-plaintext highlighter-rouge">gc</code> 还会将所有引用 (references) 并入一个单独文件。假设仓库中包含以下分支和标签:</p>
<p>$ find .git/refs -type f
.git/refs/heads/experiment
.git/refs/heads/master
.git/refs/tags/v1.0
.git/refs/tags/v1.1</p>
<p>这时如果运行 <code class="language-plaintext highlighter-rouge">git gc</code>, <code class="language-plaintext highlighter-rouge">refs</code> 下的所有文件都会消失。Git 会将这些文件挪到 <code class="language-plaintext highlighter-rouge">.git/packed-refs</code> 文件中去以提高效率,该文件是这个样子的:</p>
<p>$ cat .git/packed-refs
# pack-refs with: peeled
cac0cab538b970a37ea1e769cbbde608743bc96d refs/heads/experiment
ab1afef80fac8e34258ff41fc1b867c702daa24b refs/heads/master
cac0cab538b970a37ea1e769cbbde608743bc96d refs/tags/v1.0
9585191f37f7b0fb9444f35a9bf50de191beadc2 refs/tags/v1.1
^1a410efbd13591db07496601ebc7a059dd55cfe9</p>
<p>当更新一个引用时,Git 不会修改这个文件,而是在 <code class="language-plaintext highlighter-rouge">refs/heads</code> 下写入一个新文件。当查找一个引用的 SHA 时,Git 首先在 <code class="language-plaintext highlighter-rouge">refs</code> 目录下查找,如果未找到则到 <code class="language-plaintext highlighter-rouge">packed-refs</code> 文件中去查找。因此如果在 <code class="language-plaintext highlighter-rouge">refs</code> 目录下找不到一个引用,该引用可能存到 <code class="language-plaintext highlighter-rouge">packed-refs</code> 文件中去了。</p>
<p>请留意文件最后以 <code class="language-plaintext highlighter-rouge">^</code> 开头的那一行。这表示该行上一行的那个标签是一个 annotated 标签,而该行正是那个标签所指向的 commit 。</p>
<h3 id="数据恢复">数据恢复</h3>
<p>在使用 Git 的过程中,有时会不小心丢失 commit 信息。这一般出现在以下情况下:强制删除了一个分支而后又想重新使用这个分支,hard-reset 了一个分支从而丢弃了分支的部分 commit。如果这真的发生了,有什么办法把丢失的 commit 找回来呢?</p>
<p>下面的示例演示了对 test 仓库主分支进行 hard-reset 到一个老版本的 commit 的操作,然后恢复丢失的 commit 。首先查看一下当前的仓库状态:</p>
<p>$ git log –pretty=oneline
ab1afef80fac8e34258ff41fc1b867c702daa24b modified repo a bit
484a59275031909e19aadb7c92262719cfcdf19a added repo.rb
1a410efbd13591db07496601ebc7a059dd55cfe9 third commit
cac0cab538b970a37ea1e769cbbde608743bc96d second commit
fdf4fc3344e67ab068f836878b6c4951e3b15f3d first commit</p>
<p>接着将 <code class="language-plaintext highlighter-rouge">master</code> 分支移回至中间的一个 commit:</p>
<p>$ git reset –hard 1a410efbd13591db07496601ebc7a059dd55cfe9
HEAD is now at 1a410ef third commit
$ git log –pretty=oneline
1a410efbd13591db07496601ebc7a059dd55cfe9 third commit
cac0cab538b970a37ea1e769cbbde608743bc96d second commit
fdf4fc3344e67ab068f836878b6c4951e3b15f3d first commit</p>
<p>这样就丢弃了最新的两个 commit ── 包含这两个 commit 的分支不存在了。现在要做的是找出最新的那个 commit 的 SHA,然后添加一个指它它的分支。关键在于找出最新的 commit 的 SHA ── 你不大可能记住了这个 SHA,是吧?</p>
<p>通常最快捷的办法是使用 <code class="language-plaintext highlighter-rouge">git reflog</code> 工具。当你 (在一个仓库下) 工作时,Git 会在你每次修改了 HEAD 时悄悄地将改动记录下来。当你提交或修改分支时,reflog 就会更新。<code class="language-plaintext highlighter-rouge">git update-ref</code> 命令也可以更新 reflog,这是在本章前面的 “Git References” 部分我们使用该命令而不是手工将 SHA 值写入 ref 文件的理由。任何时间运行 <code class="language-plaintext highlighter-rouge">git reflog</code> 命令可以查看当前的状态:</p>
<p>$ git reflog
1a410ef HEAD@{0}: 1a410efbd13591db07496601ebc7a059dd55cfe9: updating HEAD
ab1afef HEAD@{1}: ab1afef80fac8e34258ff41fc1b867c702daa24b: updating HEAD</p>
<p>可以看到我们签出的两个 commit ,但没有更多的相关信息。运行 <code class="language-plaintext highlighter-rouge">git log -g</code> 会输出 reflog 的正常日志,从而显示更多有用信息:</p>
<p>$ git log -g
commit 1a410efbd13591db07496601ebc7a059dd55cfe9
Reflog: HEAD@{0} (Scott Chacon <a href="mailto:schacon@gmail.com">schacon@gmail.com</a>)
Reflog message: updating HEAD
Author: Scott Chacon <a href="mailto:schacon@gmail.com">schacon@gmail.com</a>
Date: Fri May 22 18:22:37 2009 -0700</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> third commit
</code></pre></div></div>
<p>commit ab1afef80fac8e34258ff41fc1b867c702daa24b
Reflog: HEAD@{1} (Scott Chacon <a href="mailto:schacon@gmail.com">schacon@gmail.com</a>)
Reflog message: updating HEAD
Author: Scott Chacon <a href="mailto:schacon@gmail.com">schacon@gmail.com</a>
Date: Fri May 22 18:15:24 2009 -0700</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> modified repo a bit
</code></pre></div></div>
<p>看起来弄丢了的 commit 是底下那个,这样在那个 commit 上创建一个新分支就能把它恢复过来。比方说,可以在那个 commit (ab1afef) 上创建一个名为 <code class="language-plaintext highlighter-rouge">recover-branch</code> 的分支:</p>
<p>$ git branch recover-branch ab1afef
$ git log –pretty=oneline recover-branch
ab1afef80fac8e34258ff41fc1b867c702daa24b modified repo a bit
484a59275031909e19aadb7c92262719cfcdf19a added repo.rb
1a410efbd13591db07496601ebc7a059dd55cfe9 third commit
cac0cab538b970a37ea1e769cbbde608743bc96d second commit
fdf4fc3344e67ab068f836878b6c4951e3b15f3d first commit</p>
<p>酷!这样有了一个跟原来 <code class="language-plaintext highlighter-rouge">master</code> 一样的 <code class="language-plaintext highlighter-rouge">recover-branch</code> 分支,最新的两个 commit 又找回来了。接着,假设引起 commit 丢失的原因并没有记录在 reflog 中 ── 可以通过删除 <code class="language-plaintext highlighter-rouge">recover-branch</code> 和 reflog 来模拟这种情况。这样最新的两个 commit 不会被任何东西引用到:</p>
<p>$ git branch -D recover-branch
$ rm -Rf .git/logs/</p>
<p>因为 reflog 数据是保存在 <code class="language-plaintext highlighter-rouge">.git/logs/</code> 目录下的,这样就没有 reflog 了。现在要怎样恢复 commit 呢?办法之一是使用 <code class="language-plaintext highlighter-rouge">git fsck</code> 工具,该工具会检查仓库的数据完整性。如果指定 <code class="language-plaintext highlighter-rouge">--ful</code> 选项,该命令显示所有未被其他对象引用 (指向) 的所有对象:</p>
<p>$ git fsck –full
dangling blob d670460b4b4aece5915caf5c68d12f560a9fe3e4
dangling commit ab1afef80fac8e34258ff41fc1b867c702daa24b
dangling tree aea790b9a58f6cf6f2804eeac9f0abbe9631e4c9
dangling blob 7108f7ecb345ee9d0084193f147cdad4d2998293</p>
<p>本例中,可以从 dangling commit 找到丢失了的 commit。用相同的方法就可以恢复它,即创建一个指向该 SHA 的分支。</p>
<h3 id="移除对象">移除对象</h3>
<p>Git 有许多过人之处,不过有一个功能有时却会带来问题:<code class="language-plaintext highlighter-rouge">git clone</code> 会将包含每一个文件的所有历史版本的整个项目下载下来。如果项目包含的仅仅是源代码的话这并没有什么坏处,毕竟 Git 可以非常高效地压缩此类数据。不过如果有人在某个时刻往项目中添加了一个非常大的文件,那们即便他在后来的提交中将此文件删掉了,所有的签出都会下载这个大文件。因为历史记录中引用了这个文件,它会一直存在着。</p>
<p>当你将 Subversion 或 Perforce 仓库转换导入至 Git 时这会成为一个很严重的问题。在此类系统中,(签出时) 不会下载整个仓库历史,所以这种情形不大会有不良后果。如果你从其他系统导入了一个仓库,或是发觉一个仓库的尺寸远超出预计,可以用下面的方法找到并移除大 (尺寸) 对象。</p>
<p>警告:此方法会破坏提交历史。为了移除对一个大文件的引用,从最早包含该引用的 tree 对象开始之后的所有 commit 对象都会被重写。如果在刚导入一个仓库并在其他人在此基础上开始工作之前这么做,那没有什么问题 ── 否则你不得不通知所有协作者 (贡献者) 去衍合你新修改的 commit 。</p>
<p>为了演示这点,往 test 仓库中加入一个大文件,然后在下次提交时将它删除,接着找到并将这个文件从仓库中永久删除。首先,加一个大文件进去:</p>
<p>$ curl http://kernel.org/pub/software/scm/git/git-1.6.3.1.tar.bz2 > git.tbz2
$ git add git.tbz2
$ git commit -am ‘added git tarball’
[master 6df7640] added git tarball
1 files changed, 0 insertions(+), 0 deletions(-)
create mode 100644 git.tbz2</p>
<p>喔,你并不想往项目中加进一个这么大的 tar 包。最后还是去掉它:</p>
<p>$ git rm git.tbz2
rm ‘git.tbz2’
$ git commit -m ‘oops - removed large tarball’
[master da3f30d] oops - removed large tarball
1 files changed, 0 insertions(+), 0 deletions(-)
delete mode 100644 git.tbz2</p>
<p>对仓库进行 <code class="language-plaintext highlighter-rouge">gc</code> 操作,并查看占用了空间:</p>
<p>$ git gc
Counting objects: 21, done.
Delta compression using 2 threads.
Compressing objects: 100% (16/16), done.
Writing objects: 100% (21/21), done.
Total 21 (delta 3), reused 15 (delta 1)</p>
<p>可以运行 <code class="language-plaintext highlighter-rouge">count-objects</code> 以查看使用了多少空间:</p>
<p>$ git count-objects -v
count: 4
size: 16
in-pack: 21
packs: 1
size-pack: 2016
prune-packable: 0
garbage: 0</p>
<p><code class="language-plaintext highlighter-rouge">size-pack</code> 是以千字节为单位表示的 packfiles 的大小,因此已经使用了 2MB 。而在这次提交之前仅用了 2K 左右 ── 显然在这次提交时删除文件并没有真正将其从历史记录中删除。每当有人复制这个仓库去取得这个小项目时,都不得不复制所有 2MB 数据,而这仅仅因为你曾经不小心加了个大文件。当我们来解决这个问题。</p>
<p>首先要找出这个文件。在本例中,你知道是哪个文件。假设你并不知道这一点,要如何找出哪个 (些) 文件占用了这么多的空间?如果运行 <code class="language-plaintext highlighter-rouge">git gc</code>,所有对象会存入一个 packfile 文件;运行另一个底层命令 <code class="language-plaintext highlighter-rouge">git verify-pack</code> 以识别出大对象,对输出的第三列信息即文件大小进行排序,还可以将输出定向到 <code class="language-plaintext highlighter-rouge">tail</code> 命令,因为你只关心排在最后的那几个最大的文件:</p>
<p>$ git verify-pack -v .git/objects/pack/pack-3f8c0…bb.idx | sort -k 3 -n | tail -3
e3f094f522629ae358806b17daf78246c27c007b blob 1486 734 4667
05408d195263d853f09dca71d55116663690c27c blob 12908 3478 1189
7a9eb2fba2b1811321254ac360970fc169ba2330 blob 2056716 2056872 5401</p>
<p>最底下那个就是那个大文件:2MB 。要查看这到底是哪个文件,可以使用第 7 章中已经简单使用过的 <code class="language-plaintext highlighter-rouge">rev-list</code> 命令。若给 <code class="language-plaintext highlighter-rouge">rev-list</code> 命令传入 <code class="language-plaintext highlighter-rouge">--objects</code> 选项,它会列出所有 commit SHA 值,blob SHA 值及相应的文件路径。可以这样查看 blob 的文件名:</p>
<p>$ git rev-list –objects –all | grep 7a9eb2fb
7a9eb2fba2b1811321254ac360970fc169ba2330 git.tbz2</p>
<p>接下来要将该文件从历史记录的所有 tree 中移除。很容易找出哪些 commit 修改了这个文件:</p>
<p>$ git log –pretty=oneline – git.tbz2
da3f30d019005479c99eb4c3406225613985a1db oops - removed large tarball
6df764092f3e7c8f5f94cbe08ee5cf42e92a0289 added git tarball</p>
<p>必须重写从 <code class="language-plaintext highlighter-rouge">6df76</code> 开始的所有 commit 才能将文件从 Git 历史中完全移除。这么做需要用到第 6 章中用过的 <code class="language-plaintext highlighter-rouge">filter-branch</code> 命令:</p>
<p>$ git filter-branch –index-filter <br />
‘git rm –cached –ignore-unmatch git.tbz2’ – 6df7640^..
Rewrite 6df764092f3e7c8f5f94cbe08ee5cf42e92a0289 (1/2)rm ‘git.tbz2’
Rewrite da3f30d019005479c99eb4c3406225613985a1db (2/2)
Ref ‘refs/heads/master’ was rewritten</p>
<p><code class="language-plaintext highlighter-rouge">--index-filter</code> 选项类似于第 6 章中使用的 <code class="language-plaintext highlighter-rouge">--tree-filter</code> 选项,但这里不是传入一个命令去修改磁盘上签出的文件,而是修改暂存区域或索引。不能用 <code class="language-plaintext highlighter-rouge">rm file</code> 命令来删除一个特定文件,而是必须用 <code class="language-plaintext highlighter-rouge">git rm --cached</code> 来删除它 ── 即从索引而不是磁盘删除它。这样做是出于速度考虑 ── 由于 Git 在运行你的 filter 之前无需将所有版本签出到磁盘上,这个操作会快得多。也可以用 <code class="language-plaintext highlighter-rouge">--tree-filter</code> 来完成相同的操作。<code class="language-plaintext highlighter-rouge">git rm</code> 的 <code class="language-plaintext highlighter-rouge">--ignore-unmatch</code> 选项指定当你试图删除的内容并不存在时不显示错误。最后,因为你清楚问题是从哪个 commit 开始的,使用 <code class="language-plaintext highlighter-rouge">filter-branch</code> 重写自 <code class="language-plaintext highlighter-rouge">6df7640</code> 这个 commit 开始的所有历史记录。不这么做的话会重写所有历史记录,花费不必要的更多时间。</p>
<p>现在历史记录中已经不包含对那个文件的引用了。不过 reflog 以及运行 <code class="language-plaintext highlighter-rouge">filter-branch</code> 时 Git 往 <code class="language-plaintext highlighter-rouge">.git/refs/original</code> 添加的一些 refs 中仍有对它的引用,因此需要将这些引用删除并对仓库进行 repack 操作。在进行 repack 前需要将所有对这些 commits 的引用去除:</p>
<p>$ rm -Rf .git/refs/original
$ rm -Rf .git/logs/
$ git gc
Counting objects: 19, done.
Delta compression using 2 threads.
Compressing objects: 100% (14/14), done.
Writing objects: 100% (19/19), done.
Total 19 (delta 3), reused 16 (delta 1)</p>
<p>看一下节省了多少空间。</p>
<p>$ git count-objects -v
count: 8
size: 2040
in-pack: 19
packs: 1
size-pack: 7
prune-packable: 0
garbage: 0</p>
<p>repack 后仓库的大小减小到了 7K ,远小于之前的 2MB 。从 size 值可以看出大文件对象还在松散对象中,其实并没有消失,不过这没有关系,重要的是在再进行推送或复制,这个对象不会再传送出去。如果真的要完全把这个对象删除,可以运行 <code class="language-plaintext highlighter-rouge">git prune --expire</code> 命令。</p>
<h2 id="总结">总结</h2>
<p>现在你应该对 Git 可以作什么相当了解了,并且在一定程度上也知道了 Git 是如何实现的。本章覆盖了许多 plumbing 命令 ── 这些命令比较底层,且比你在本书其他部分学到的 porcelain 命令要来得简单。从底层了解 Git 的工作原理可以帮助你更好地理解为何 Git 实现了目前的这些功能,也使你能够针对你的工作流写出自己的工具和脚本。</p>
<p>Git 作为一套 content-addressable 的文件系统,是一个非常强大的工具,而不仅仅只是一个 VCS 供人使用。希望借助于你新学到的 Git 内部原理的知识,你可以实现自己的有趣的应用,并以更高级便利的方式使用 Git。</p>
08-Git与其他系统
2012-10-19T00:00:00+00:00
http://wangdaodao.github.io/2012-10-19/git-and-other-scms
<p>世界不是完美的。大多数时候,将所有接触到的项目全部转向 Git 是不可能的。有时我们不得不为某个项目使用其他的版本控制系统(VCS, Version Control System ),其中比较常见的是 Subversion 。你将在本章的第一部分学习使用 <code class="language-plaintext highlighter-rouge">git svn</code> ,Git 为 Subversion 附带的双向桥接工具。</p>
<p>或许现在你已经在考虑将先前的项目转向 Git 。本章的第二部分将介绍如何将项目迁移到 Git:先介绍从 Subversion 的迁移,然后是 Perforce,最后介绍如何使用自定义的脚本进行非标准的导入。</p>
<h2 id="git-与-subversion">Git 与 Subversion</h2>
<p>当前,大多数开发中的开源项目以及大量的商业项目都使用 Subversion 来管理源码。作为最流行的开源版本控制系统,Subversion 已经存在了接近十年的时间。它在许多方面与 CVS 十分类似,后者是前者出现之前代码控制世界的霸主。</p>
<p>Git 最为重要的特性之一是名为 <code class="language-plaintext highlighter-rouge">git svn</code> 的 Subversion 双向桥接工具。该工具把 Git 变成了 Subversion 服务的客户端,从而让你在本地享受到 Git 所有的功能,而后直接向 Subversion 服务器推送内容,仿佛在本地使用了 Subversion 客户端。也就是说,在其他人忍受古董的同时,你可以在本地享受分支合并,使暂存区域,衍合以及 单项挑拣等等。这是个让 Git 偷偷潜入合作开发环境的好东西,在帮助你的开发同伴们提高效率的同时,它还能帮你劝说团队让整个项目框架转向对 Git 的支持。这个 Subversion 之桥是通向分布式版本控制系统(DVCS, Distributed VCS )世界的神奇隧道。</p>
<h3 id="git-svn">git svn</h3>
<p>Git 中所有 Subversion 桥接命令的基础是 <code class="language-plaintext highlighter-rouge">git svn</code> 。所有的命令都从它开始。相关的命令数目不少,你将通过几个简单的工作流程了解到其中常见的一些。</p>
<p>值得警戒的是,在使用 <code class="language-plaintext highlighter-rouge">git svn</code> 的时候,你实际是在与 Subversion 交互,Git 比它要高级复杂的多。尽管可以在本地随意的进行分支和合并,最好还是通过衍合保持线性的提交历史,尽量避免类似与远程 Git 仓库动态交互这样的操作。</p>
<p>避免修改历史再重新推送的做法,也不要同时推送到并行的 Git 仓库来试图与其他 Git 用户合作。Subersion 只能保存单一的线性提交历史,一不小心就会被搞糊涂。合作团队中同时有人用 SVN 和 Git,一定要确保所有人都使用 SVN 服务来协作——这会让生活轻松很多。</p>
<h3 id="初始设定">初始设定</h3>
<p>为了展示功能,先要一个具有写权限的 SVN 仓库。如果想尝试这个范例,你必须复制一份其中的测试仓库。比较简单的做法是使用一个名为 <code class="language-plaintext highlighter-rouge">svnsync</code> 的工具。较新的 Subversion 版本中都带有该工具,它将数据编码为用于网络传输的格式。</p>
<p>要尝试本例,先在本地新建一个 Subversion 仓库:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ mkdir /tmp/test-svn
$ svnadmin create /tmp/test-svn
</code></pre></div></div>
<p>然后,允许所有用户修改 revprop —— 简单的做法是添加一个总是以 0 作为返回值的 pre-revprop-change 脚本:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cat /tmp/test-svn/hooks/pre-revprop-change
#!/bin/sh
exit 0;
$ chmod +x /tmp/test-svn/hooks/pre-revprop-change
</code></pre></div></div>
<p>现在可以调用 <code class="language-plaintext highlighter-rouge">svnsync init</code> 加目标仓库,再加源仓库的格式来把该项目同步到本地了:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ svnsync init file:///tmp/test-svn http://progit-example.googlecode.com/svn/
</code></pre></div></div>
<p>这将建立进行同步所需的属性。可以通过运行以下命令来克隆代码:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ svnsync sync file:///tmp/test-svn
Committed revision 1.
Copied properties for revision 1.
Committed revision 2.
Copied properties for revision 2.
Committed revision 3.
...
</code></pre></div></div>
<p>别看这个操作只花掉几分钟,要是你想把源仓库复制到另一个远程仓库,而不是本地仓库,那将花掉接近一个小时,尽管项目中只有不到 100 次的提交。 Subversion 每次只复制一次修改,把它推送到另一个仓库里,然后周而复始——惊人的低效,但是我们别无选择。</p>
<h3 id="入门">入门</h3>
<p>有了可以写入的 Subversion 仓库以后,就可以尝试一下典型的工作流程了。我们从 <code class="language-plaintext highlighter-rouge">git svn clone</code> 命令开始,它会把整个 Subversion 仓库导入到一个本地的 Git 仓库中。提醒一下,这里导入的是一个货真价实的 Subversion 仓库,所以应该把下面的 <code class="language-plaintext highlighter-rouge">file:///tmp/test-svn</code> 换成你所用的 Subversion 仓库的 URL:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git svn clone file:///tmp/test-svn -T trunk -b branches -t tags
Initialized empty Git repository in /Users/schacon/projects/testsvnsync/svn/.git/
r1 = b4e387bc68740b5af56c2a5faf4003ae42bd135c (trunk)
A m4/acx_pthread.m4
A m4/stl_hash.m4
...
r75 = d1957f3b307922124eec6314e15bcda59e3d9610 (trunk)
Found possible branch point: file:///tmp/test-svn/trunk => \
file:///tmp/test-svn /branches/my-calc-branch, 75
Found branch parent: (my-calc-branch) d1957f3b307922124eec6314e15bcda59e3d9610
Following parent with do_switch
Successfully followed parent
r76 = 8624824ecc0badd73f40ea2f01fce51894189b01 (my-calc-branch)
Checked out HEAD:
file:///tmp/test-svn/branches/my-calc-branch r76
</code></pre></div></div>
<p>这相当于针对所提供的 URL 运行了两条命令—— <code class="language-plaintext highlighter-rouge">git svn init</code> 加上 <code class="language-plaintext highlighter-rouge">git svn fetch</code> 。可能会花上一段时间。我们所用的测试项目仅仅包含 75 次提交并且它的代码量不算大,所以只有几分钟而已。不过,Git 仍然需要提取每一个版本,每次一个,再逐个提交。对于一个包含成百上千次提交的项目,花掉的时间则可能是几小时甚至数天。</p>
<p><code class="language-plaintext highlighter-rouge">-T trunk -b branches -t tags</code> 告诉 Git 该 Subversion 仓库遵循了基本的分支和标签命名法则。如果你的主干(译注:trunk,相当于非分布式版本控制里的master分支,代表开发的主线),分支或者标签以不同的方式命名,则应做出相应改变。由于该法则的常见性,可以使用 <code class="language-plaintext highlighter-rouge">-s</code> 来代替整条命令,它意味着标准布局(s 是 Standard layout 的首字母),也就是前面选项的内容。下面的命令有相同的效果:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git svn clone file:///tmp/test-svn -s
</code></pre></div></div>
<p>现在,你有了一个有效的 Git 仓库,包含着导入的分支和标签:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git branch -a
* master
my-calc-branch
tags/2.0.2
tags/release-2.0.1
tags/release-2.0.2
tags/release-2.0.2rc1
trunk
</code></pre></div></div>
<p>值得注意的是,该工具分配命名空间时和远程引用的方式不尽相同。克隆普通的 Git 仓库时,可以以 <code class="language-plaintext highlighter-rouge">origin/[branch]</code> 的形式获取远程服务器上所有可用的分支——分配到远程服务的名称下。然而 <code class="language-plaintext highlighter-rouge">git svn</code> 假定不存在多个远程服务器,所以把所有指向远程服务的引用不加区分的保存下来。可以用 Git 探测命令 <code class="language-plaintext highlighter-rouge">show-ref</code> 来查看所有引用的全名。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git show-ref
1cbd4904d9982f386d87f88fce1c24ad7c0f0471 refs/heads/master
aee1ecc26318164f355a883f5d99cff0c852d3c4 refs/remotes/my-calc-branch
03d09b0e2aad427e34a6d50ff147128e76c0e0f5 refs/remotes/tags/2.0.2
50d02cc0adc9da4319eeba0900430ba219b9c376 refs/remotes/tags/release-2.0.1
4caaa711a50c77879a91b8b90380060f672745cb refs/remotes/tags/release-2.0.2
1c4cb508144c513ff1214c3488abe66dcb92916f refs/remotes/tags/release-2.0.2rc1
1cbd4904d9982f386d87f88fce1c24ad7c0f0471 refs/remotes/trunk
</code></pre></div></div>
<p>而普通的 Git 仓库应该是这个模样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git show-ref
83e38c7a0af325a9722f2fdc56b10188806d83a1 refs/heads/master
3e15e38c198baac84223acfc6224bb8b99ff2281 refs/remotes/gitserver/master
0a30dd3b0c795b80212ae723640d4e5d48cabdff refs/remotes/origin/master
25812380387fdd55f916652be4881c6f11600d6f refs/remotes/origin/testing
</code></pre></div></div>
<p>这里有两个远程服务器:一个名为 <code class="language-plaintext highlighter-rouge">gitserver</code> ,具有一个 <code class="language-plaintext highlighter-rouge">master</code>分支;另一个叫 <code class="language-plaintext highlighter-rouge">origin</code>,具有 <code class="language-plaintext highlighter-rouge">master</code> 和 <code class="language-plaintext highlighter-rouge">testing</code> 两个分支。</p>
<p>注意本例中通过 <code class="language-plaintext highlighter-rouge">git svn</code> 导入的远程引用,(Subversion 的)标签是当作远程分支添加的,而不是真正的 Git 标签。导入的 Subversion 仓库仿佛是有一个带有不同分支的 tags 远程服务器。</p>
<h3 id="提交到-subversion">提交到 Subversion</h3>
<p>有了可以开展工作的(本地)仓库以后,你可以开始对该项目做出贡献并向上游仓库提交内容了,Git 这时相当于一个 SVN 客户端。假如编辑了一个文件并进行提交,那么这次提交仅存在于本地的 Git 而非 Subversion 服务器上。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git commit -am 'Adding git-svn instructions to the README'
[master 97031e5] Adding git-svn instructions to the README
1 files changed, 1 insertions(+), 1 deletions(-)
</code></pre></div></div>
<p>接下来,可以将作出的修改推送到上游。值得注意的是,Subversion 的使用流程也因此改变了——你可以在离线状态下进行多次提交然后一次性的推送到 Subversion 的服务器上。向 Subversion 服务器推送的命令是 <code class="language-plaintext highlighter-rouge">git svn dcommit</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git svn dcommit
Committing to file:///tmp/test-svn/trunk ...
M README.txt
Committed r79
M README.txt
r79 = 938b1a547c2cc92033b74d32030e86468294a5c8 (trunk)
No changes between current HEAD and refs/remotes/trunk
Resetting to the latest refs/remotes/trunk
</code></pre></div></div>
<p>所有在原 Subversion 数据基础上提交的 commit 会一一提交到 Subversion,然后你本地 Git 的 commit 将被重写,加入一个特别标识。这一步很重要,因为它意味着所有 commit 的 SHA-1 指都会发生变化。这也是同时使用 Git 和 Subversion 两种服务作为远程服务不是个好主意的原因之一。检视以下最后一个 commit,你会找到新添加的 <code class="language-plaintext highlighter-rouge">git-svn-id</code> (译注:即本段开头所说的特别标识):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log -1
commit 938b1a547c2cc92033b74d32030e86468294a5c8
Author: schacon <schacon@4c93b258-373f-11de-be05-5f7a86268029>
Date: Sat May 2 22:06:44 2009 +0000
Adding git-svn instructions to the README
git-svn-id: file:///tmp/test-svn/trunk@79 4c93b258-373f-11de-be05-5f7a86268029
</code></pre></div></div>
<p>注意看,原本以 <code class="language-plaintext highlighter-rouge">97031e5</code> 开头的 SHA-1 校验值在提交完成以后变成了 <code class="language-plaintext highlighter-rouge">938b1a5</code> 。如果既要向 Git 远程服务器推送内容,又要推送到 Subversion 远程服务器,则必须先向 Subversion 推送(<code class="language-plaintext highlighter-rouge">dcommit</code>),因为该操作会改变所提交的数据内容。</p>
<h3 id="拉取最新进展">拉取最新进展</h3>
<p>如果要与其他开发者协作,总有那么一天你推送完毕之后,其他人发现他们推送自己修改的时候(与你推送的内容)产生冲突。这些修改在你合并之前将一直被拒绝。在 <code class="language-plaintext highlighter-rouge">git svn</code> 里这种情况形似:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git svn dcommit
Committing to file:///tmp/test-svn/trunk ...
Merge conflict during commit: Your file or directory 'README.txt' is probably \
out-of-date: resource out of date; try updating at /Users/schacon/libexec/git-\
core/git-svn line 482
</code></pre></div></div>
<p>为了解决该问题,可以运行 <code class="language-plaintext highlighter-rouge">git svn rebase</code> ,它会拉取服务器上所有最新的改变,再次基础上衍合你的修改:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git svn rebase
M README.txt
r80 = ff829ab914e8775c7c025d741beb3d523ee30bc4 (trunk)
First, rewinding head to replay your work on top of it...
Applying: first user change
</code></pre></div></div>
<p>现在,你做出的修改都发生在服务器内容之后,所以可以顺利的运行 <code class="language-plaintext highlighter-rouge">dcommit</code> :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git svn dcommit
Committing to file:///tmp/test-svn/trunk ...
M README.txt
Committed r81
M README.txt
r81 = 456cbe6337abe49154db70106d1836bc1332deed (trunk)
No changes between current HEAD and refs/remotes/trunk
Resetting to the latest refs/remotes/trunk
</code></pre></div></div>
<p>需要牢记的一点是,Git 要求我们在推送之前先合并上游仓库中最新的内容,而 <code class="language-plaintext highlighter-rouge">git svn</code> 只要求存在冲突的时候才这样做。假如有人向一个文件推送了一些修改,这时你要向另一个文件推送一些修改,那么 <code class="language-plaintext highlighter-rouge">dcommit</code> 将正常工作:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git svn dcommit
Committing to file:///tmp/test-svn/trunk ...
M configure.ac
Committed r84
M autogen.sh
r83 = 8aa54a74d452f82eee10076ab2584c1fc424853b (trunk)
M configure.ac
r84 = cdbac939211ccb18aa744e581e46563af5d962d0 (trunk)
W: d2f23b80f67aaaa1f6f5aaef48fce3263ac71a92 and refs/remotes/trunk differ, \
using rebase:
:100755 100755 efa5a59965fbbb5b2b0a12890f1b351bb5493c18 \
015e4c98c482f0fa71e4d5434338014530b37fa6 M autogen.sh
First, rewinding head to replay your work on top of it...
Nothing to do.
</code></pre></div></div>
<p>这一点需要牢记,因为它的结果是推送之后项目处于一个不完整存在与任何主机上的状态。如果做出的修改无法兼容但没有产生冲突,则可能造成一些很难确诊的难题。这和使用 Git 服务器是不同的——在 Git 世界里,发布之前,你可以在客户端系统里完整的测试项目的状态,而在 SVN 永远都没法确保提交前后项目的状态完全一样。</p>
<p>即使还没打算进行提交,你也应该用这个命令从 Subversion 服务器拉取最新修改。<code class="language-plaintext highlighter-rouge">sit svn fetch</code> 能获取最新的数据,不过 <code class="language-plaintext highlighter-rouge">git svn rebase</code> 才会在获取之后在本地进行更新 。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git svn rebase
M generate_descriptor_proto.sh
r82 = bd16df9173e424c6f52c337ab6efa7f7643282f1 (trunk)
First, rewinding head to replay your work on top of it...
Fast-forwarded master to refs/remotes/trunk.
</code></pre></div></div>
<p>不时地运行一下 <code class="language-plaintext highlighter-rouge">git svn rebase</code> 可以确保你的代码没有过时。不过,运行该命令时需要确保工作目录的整洁。如果在本地做了修改,则必须在运行 <code class="language-plaintext highlighter-rouge">git svn rebase</code> 之前或暂存工作,或暂时提交内容——否则,该命令会发现衍合的结果包含着冲突因而终止。</p>
<h3 id="git-分支问题">Git 分支问题</h3>
<p>习惯了 Git 的工作流程以后,你可能会创建一些特性分支,完成相关的开发工作,然后合并他们。如果要用 git svn 向 Subversion 推送内容,那么最好是每次用衍合来并入一个单一分支,而不是直接合并。使用衍合的原因是 Subversion 只有一个线性的历史而不像 Git 那样处理合并,所以 Git svn 在把快照转换为 Subversion 的 commit 时只能包含第一个祖先。</p>
<p>假设分支历史如下:创建一个 <code class="language-plaintext highlighter-rouge">experiment</code> 分支,进行两次提交,然后合并到 <code class="language-plaintext highlighter-rouge">master</code> 。在 <code class="language-plaintext highlighter-rouge">dcommit</code> 的时候会得到如下输出:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git svn dcommit
Committing to file:///tmp/test-svn/trunk ...
M CHANGES.txt
Committed r85
M CHANGES.txt
r85 = 4bfebeec434d156c36f2bcd18f4e3d97dc3269a2 (trunk)
No changes between current HEAD and refs/remotes/trunk
Resetting to the latest refs/remotes/trunk
COPYING.txt: locally modified
INSTALL.txt: locally modified
M COPYING.txt
M INSTALL.txt
Committed r86
M INSTALL.txt
M COPYING.txt
r86 = 2647f6b86ccfcaad4ec58c520e369ec81f7c283c (trunk)
No changes between current HEAD and refs/remotes/trunk
Resetting to the latest refs/remotes/trunk
</code></pre></div></div>
<p>在一个包含了合并历史的分支上使用 <code class="language-plaintext highlighter-rouge">dcommit</code> 可以成功运行,不过在 Git 项目的历史中,它没有重写你在 <code class="language-plaintext highlighter-rouge">experiment</code> 分支中的两个 commit ——另一方面,这些改变却出现在了 SVN 版本中同一个合并 commit 中。</p>
<p>在别人克隆该项目的时候,只能看到这个合并 commit 包含了所有发生过的修改;他们无法获知修改的作者和时间等提交信息。</p>
<h3 id="subversion-分支">Subversion 分支</h3>
<p>Subversion 的分支和 Git 中的不尽相同;避免过多的使用可能是最好方案。不过,用 git svn 创建和提交不同的 Subversion 分支仍是可行的。</p>
<h4 id="创建新的-svn-分支">创建新的 SVN 分支</h4>
<p>要在 Subversion 中建立一个新分支,需要运行 <code class="language-plaintext highlighter-rouge">git svn branch [分支名]</code> :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git svn branch opera
Copying file:///tmp/test-svn/trunk at r87 to file:///tmp/test-svn/branches/opera...
Found possible branch point: file:///tmp/test-svn/trunk => \
file:///tmp/test-svn/branches/opera, 87
Found branch parent: (opera) 1f6bfe471083cbca06ac8d4176f7ad4de0d62e5f
Following parent with do_switch
Successfully followed parent
r89 = 9b6fe0b90c5c9adf9165f700897518dbc54a7cbf (opera)
</code></pre></div></div>
<p>这相当于在 Subversion 中的 <code class="language-plaintext highlighter-rouge">svn copy trunk branches/opera</code> 命令,并会对 Subversion 服务器进行相关操作。值得注意的是它没有检出和转换到那个分支;如果现在进行提交,将提交到服务器上的 <code class="language-plaintext highlighter-rouge">trunk</code>, 而非 <code class="language-plaintext highlighter-rouge">opera</code>。</p>
<h3 id="切换当前分支">切换当前分支</h3>
<p>Git 通过搜寻提交历史中 Subversion 分支的头部来决定 dcommit 的目的地——而它应该只有一个,那就是当前分支历史中最近一次包含 <code class="language-plaintext highlighter-rouge">git-svn-id</code> 的提交。</p>
<p>如果需要同时在多个分支上提交,可以通过导入 Subversion 上某个其他分支的 commit 来建立以该分支为 <code class="language-plaintext highlighter-rouge">dcommit</code> 目的地的本地分支。比如你想拥有一个并行维护的 <code class="language-plaintext highlighter-rouge">opera</code> 分支,可以运行</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git branch opera remotes/opera
</code></pre></div></div>
<p>然后,如果要把 <code class="language-plaintext highlighter-rouge">opera</code> 分支并入 <code class="language-plaintext highlighter-rouge">trunk</code> (本地的 <code class="language-plaintext highlighter-rouge">master</code> 分支),可以使用普通的 <code class="language-plaintext highlighter-rouge">git merge</code>。不过最好提供一条描述提交的信息(通过 <code class="language-plaintext highlighter-rouge">-m</code>),否则这次合并的记录是 <code class="language-plaintext highlighter-rouge">Merge branch opera</code> ,而不是任何有用的东西。</p>
<p>记住,虽然使用了 <code class="language-plaintext highlighter-rouge">git merge</code> 来进行这次操作,并且合并过程可能比使用 Subversion 简单一些(因为 Git 会自动找到适合的合并基础),这并不是一次普通的 Git 合并提交。最终它将被推送回 commit 无法包含多个祖先的 Subversion 服务器上;因而在推送之后,它将变成一个包含了所有在其他分支上做出的改变的单一 commit。把一个分支合并到另一个分支以后,你没法像在 Git 中那样轻易的回到那个分支上继续工作。提交时运行的 <code class="language-plaintext highlighter-rouge">dcommit</code> 命令擦除了全部有关哪个分支被并入的信息,因而以后的合并基础计算将是不正确的—— dcommit 让 <code class="language-plaintext highlighter-rouge">git merge</code> 的结果变得类似于 <code class="language-plaintext highlighter-rouge">git merge --squash</code>。不幸的是,我们没有什么好办法来避免该情况—— Subversion 无法储存这个信息,所以在使用它作为服务器的时候你将永远为这个缺陷所困。为了不出现这种问题,在把本地分支(本例中的 <code class="language-plaintext highlighter-rouge">opera</code>)并入 trunk 以后应该立即将其删除。</p>
<h3 id="对应-subversion-的命令">对应 Subversion 的命令</h3>
<p><code class="language-plaintext highlighter-rouge">git svn</code> 工具集合了若干个与 Subversion 类似的功能,对应的命令可以简化向 Git 的转化过程。下面这些命令能实现 Subversion 的这些功能。</p>
<h4 id="svn-风格的历史">SVN 风格的历史</h4>
<p>习惯了 Subversion 的人可能想以 SVN 的风格显示历史,运行 <code class="language-plaintext highlighter-rouge">git svn log</code> 可以让提交历史显示为 SVN 格式:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git svn log
------------------------------------------------------------------------
r87 | schacon | 2009-05-02 16:07:37 -0700 (Sat, 02 May 2009) | 2 lines
autogen change
------------------------------------------------------------------------
r86 | schacon | 2009-05-02 16:00:21 -0700 (Sat, 02 May 2009) | 2 lines
Merge branch 'experiment'
------------------------------------------------------------------------
r85 | schacon | 2009-05-02 16:00:09 -0700 (Sat, 02 May 2009) | 2 lines
updated the changelog
</code></pre></div></div>
<p>关于 <code class="language-plaintext highlighter-rouge">git svn log</code> ,有两点需要注意。首先,它可以离线工作,不像 <code class="language-plaintext highlighter-rouge">svn log</code> 命令,需要向 Subversion 服务器索取数据。其次,它仅仅显示已经提交到 Subversion 服务器上的 commit。在本地尚未 dcommit 的 Git 数据不会出现在这里;其他人向 Subversion 服务器新提交的数据也不会显示。等于说是显示了最近已知 Subversion 服务器上的状态。</p>
<h4 id="svn-日志">SVN 日志</h4>
<p>类似 <code class="language-plaintext highlighter-rouge">git svn log</code> 对 <code class="language-plaintext highlighter-rouge">git log</code> 的模拟,<code class="language-plaintext highlighter-rouge">svn annotate</code> 的等效命令是 <code class="language-plaintext highlighter-rouge">git svn blame [文件名]</code>。其输出如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git svn blame README.txt
2 temporal Protocol Buffers - Google's data interchange format
2 temporal Copyright 2008 Google Inc.
2 temporal http://code.google.com/apis/protocolbuffers/
2 temporal
22 temporal C++ Installation - Unix
22 temporal =======================
2 temporal
79 schacon Committing in git-svn.
78 schacon
2 temporal To build and install the C++ Protocol Buffer runtime and the Protocol
2 temporal Buffer compiler (protoc) execute the following:
2 temporal
</code></pre></div></div>
<p>同样,它不显示本地的 Git 提交以及 Subversion 上后来更新的内容。</p>
<h4 id="svn-服务器信息">SVN 服务器信息</h4>
<p>还可以使用 <code class="language-plaintext highlighter-rouge">git svn info</code> 来获取与运行 <code class="language-plaintext highlighter-rouge">svn info</code> 类似的信息:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git svn info
Path: .
URL: https://schacon-test.googlecode.com/svn/trunk
Repository Root: https://schacon-test.googlecode.com/svn
Repository UUID: 4c93b258-373f-11de-be05-5f7a86268029
Revision: 87
Node Kind: directory
Schedule: normal
Last Changed Author: schacon
Last Changed Rev: 87
Last Changed Date: 2009-05-02 16:07:37 -0700 (Sat, 02 May 2009)
</code></pre></div></div>
<p>它与 <code class="language-plaintext highlighter-rouge">blame</code> 和 <code class="language-plaintext highlighter-rouge">log</code> 的相同点在于离线运行以及只更新到最后一次与 Subversion 服务器通信的状态。</p>
<h4 id="略-subversion-之所略">略 Subversion 之所略</h4>
<p>假如克隆了一个包含了 <code class="language-plaintext highlighter-rouge">svn:ignore</code> 属性的 Subversion 仓库,就有必要建立对应的 <code class="language-plaintext highlighter-rouge">.gitignore</code> 文件来防止意外提交一些不应该提交的文件。<code class="language-plaintext highlighter-rouge">git svn</code> 有两个有益于改善该问题的命令。第一个是 <code class="language-plaintext highlighter-rouge">git svn create-ignore</code>,它自动建立对应的 <code class="language-plaintext highlighter-rouge">.gitignore</code> 文件,以便下次提交的时候可以包含它。</p>
<p>第二个命令是 <code class="language-plaintext highlighter-rouge">git svn show-ignore</code>,它把需要放进 <code class="language-plaintext highlighter-rouge">.gitignore</code> 文件中的内容打印到标准输出,方便我们把输出重定向到项目的黑名单文件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git svn show-ignore > .git/info/exclude
</code></pre></div></div>
<p>这样一来,避免了 <code class="language-plaintext highlighter-rouge">.gitignore</code> 对项目的干扰。如果你是一个 Subversion 团队里唯一的 Git 用户,而其他队友不喜欢项目包含 <code class="language-plaintext highlighter-rouge">.gitignore</code>,该方法是你的不二之选。</p>
<h3 id="git-svn-总结">Git-Svn 总结</h3>
<p><code class="language-plaintext highlighter-rouge">git svn</code> 工具集在当前不得不使用 Subversion 服务器或者开发环境要求使用 Subversion 服务器的时候格外有用。不妨把它看成一个跛脚的 Git,然而,你还是有可能在转换过程中碰到一些困惑你和合作者们的迷题。为了避免麻烦,试着遵守如下守则:</p>
<ul>
<li>保持一个不包含由 <code class="language-plaintext highlighter-rouge">git merge</code> 生成的 commit 的线性提交历史。将在主线分支外进行的开发通通衍合回主线;避免直接合并。</li>
<li>不要单独建立和使用一个 Git 服务来搞合作。可以为了加速新开发者的克隆进程建立一个,但是不要向它提供任何不包含 <code class="language-plaintext highlighter-rouge">git-svn-id</code> 条目的内容。甚至可以添加一个 <code class="language-plaintext highlighter-rouge">pre-receive</code> 挂钩来在每一个提交信息中查找 <code class="language-plaintext highlighter-rouge">git-svn-id</code> 并拒绝提交那些不包含它的 commit。</li>
</ul>
<p>如果遵循这些守则,在 Subversion 上工作还可以接受。然而,如果能迁徙到真正的 Git 服务器,则能为团队带来更多好处。</p>
<h2 id="迁移到-git">迁移到 Git</h2>
<p>如果在其他版本控制系统中保存了某项目的代码而后决定转而使用 Git,那么该项目必须经历某种形式的迁移。本节将介绍 Git 中包含的一些针对常见系统的导入脚本,并将展示编写自定义的导入脚本的方法。</p>
<h3 id="导入">导入</h3>
<p>你将学习到如何从专业重量级的版本控制系统中导入数据—— Subversion 和 Perforce —— 因为据我所知这二者的用户是(向 Git)转换的主要群体,而且 Git 为此二者附带了高质量的转换工具。</p>
<h3 id="subversion">Subversion</h3>
<p>读过前一节有关 <code class="language-plaintext highlighter-rouge">git svn</code> 的内容以后,你应该能轻而易举的根据其中的指导来 <code class="language-plaintext highlighter-rouge">git svn clone</code> 一个仓库了;然后,停止 Subversion 的使用,向一个新 Git server 推送,并开始使用它。想保留历史记录,所花的时间应该不过就是从 Subversion 服务器拉取数据的时间(可能要等上好一会就是了)。</p>
<p>然而,这样的导入并不完美;而且还要花那么多时间,不如干脆一次把它做对!首当其冲的任务是作者信息。在 Subversion,每个提交者在都在主机上有一个用户名,记录在提交信息中。上节例子中多处显示了 <code class="language-plaintext highlighter-rouge">schacon</code> ,比如 <code class="language-plaintext highlighter-rouge">blame</code> 的输出以及 <code class="language-plaintext highlighter-rouge">git svn log</code>。如果想让这条信息更好的映射到 Git 作者数据里,则需要 从 Subversion 用户名到 Git 作者的一个映射关系。建立一个叫做 <code class="language-plaintext highlighter-rouge">user.txt</code> 的文件,用如下格式表示映射关系:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>schacon = Scott Chacon <schacon@geemail.com>
selse = Someo Nelse <selse@geemail.com>
</code></pre></div></div>
<p>通过该命令可以获得 SVN 作者的列表:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ svn log --xml | grep author | sort -u | perl -pe 's/.>(.?)<./$1 = /'
</code></pre></div></div>
<p>它将输出 XML 格式的日志——你可以找到作者,建立一个单独的列表,然后从 XML 中抽取出需要的信息。(显而易见,本方法要求主机上安装了<code class="language-plaintext highlighter-rouge">grep</code>,<code class="language-plaintext highlighter-rouge">sort</code> 和 <code class="language-plaintext highlighter-rouge">perl</code>.)然后把输出重定向到 user.txt 文件,然后就可以在每一项的后面添加相应的 Git 用户数据。</p>
<p>为 <code class="language-plaintext highlighter-rouge">git svn</code> 提供该文件可以然它更精确的映射作者数据。你还可以在 <code class="language-plaintext highlighter-rouge">clone</code> 或者 <code class="language-plaintext highlighter-rouge">init</code>后面添加 <code class="language-plaintext highlighter-rouge">--no-metadata</code> 来阻止 <code class="language-plaintext highlighter-rouge">git svn</code> 包含那些 Subversion 的附加信息。这样 <code class="language-plaintext highlighter-rouge">import</code> 命令就变成了:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git-svn clone http://my-project.googlecode.com/svn/ \
--authors-file=users.txt --no-metadata -s my_project
</code></pre></div></div>
<p>现在 <code class="language-plaintext highlighter-rouge">my_project</code> 目录下导入的 Subversion 应该比原来整洁多了。原来的 commit 看上去是这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>commit 37efa680e8473b615de980fa935944215428a35a
Author: schacon <schacon@4c93b258-373f-11de-be05-5f7a86268029>
Date: Sun May 3 00:12:22 2009 +0000
fixed install - go to trunk
git-svn-id: https://my-project.googlecode.com/svn/trunk@94 4c93b258-373f-11de-
be05-5f7a86268029 现在是这样:
commit 03a8785f44c8ea5cdb0e8834b7c8e6c469be2ff2
Author: Scott Chacon <schacon@geemail.com>
Date: Sun May 3 00:12:22 2009 +0000
fixed install - go to trunk
</code></pre></div></div>
<p>不仅作者一项干净了不少,<code class="language-plaintext highlighter-rouge">git-svn-id</code> 也就此消失了。</p>
<p>你还需要一点 <code class="language-plaintext highlighter-rouge">post-import(导入后)</code> 清理工作。最起码的,应该清理一下 <code class="language-plaintext highlighter-rouge">git svn</code> 创建的那些怪异的索引结构。首先要移动标签,把它们从奇怪的远程分支变成实际的标签,然后把剩下的分支移动到本地。</p>
<p>要把标签变成合适的 Git 标签,运行</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cp -Rf .git/refs/remotes/tags/* .git/refs/tags/
$ rm -Rf .git/refs/remotes/tags
</code></pre></div></div>
<p>该命令将原本以 <code class="language-plaintext highlighter-rouge">tag/</code> 开头的远程分支的索引变成真正的(轻巧的)标签。</p>
<p>接下来,把 <code class="language-plaintext highlighter-rouge">refs/remotes</code> 下面剩下的索引变成本地分支:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cp -Rf .git/refs/remotes/* .git/refs/heads/
$ rm -Rf .git/refs/remotes
</code></pre></div></div>
<p>现在所有的旧分支都变成真正的 Git 分支,所有的旧标签也变成真正的 Git 标签。最后一项工作就是把新建的 Git 服务器添加为远程服务器并且向它推送。下面是新增远程服务器的例子:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git remote add origin git@my-git-server:myrepository.git
</code></pre></div></div>
<p>为了让所有的分支和标签都得到上传,我们使用这条命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git push origin --all
</code></pre></div></div>
<p>所有的分支和标签现在都应该整齐干净的躺在新的 Git 服务器里了。</p>
<h3 id="perforce">Perforce</h3>
<p>你将了解到的下一个被导入的系统是 Perforce. Git 发行的时候同时也附带了一个 Perforce 导入脚本,不过它是包含在源码的 <code class="language-plaintext highlighter-rouge">contrib</code> 部分——而不像 <code class="language-plaintext highlighter-rouge">git svn</code> 那样默认可用。运行它之前必须获取 Git 的源码,可以在 git.kernel.org 下载:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone git://git.kernel.org/pub/scm/git/git.git
$ cd git/contrib/fast-import
</code></pre></div></div>
<p>在这个 <code class="language-plaintext highlighter-rouge">fast-import</code> 目录下,应该有一个叫做 <code class="language-plaintext highlighter-rouge">git-p4</code> 的 Python 可执行脚本。主机上必须装有 Python 和 <code class="language-plaintext highlighter-rouge">p4</code> 工具该导入才能正常进行。例如,你要从 Perforce 公共代码仓库(译注: Perforce Public Depot,Perforce 官方提供的代码寄存服务)导入 Jam 工程。为了设定客户端,我们要把 P4PORT 环境变量 export 到 Perforce 仓库:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ export P4PORT=public.perforce.com:1666
</code></pre></div></div>
<p>运行 <code class="language-plaintext highlighter-rouge">git-p4 clone</code> 命令将从 Perforce 服务器导入 Jam 项目,我们需要给出仓库和项目的路径以及导入的目标路径:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git-p4 clone //public/jam/src@all /opt/p4import
Importing from //public/jam/src@all into /opt/p4import
Reinitialized existing Git repository in /opt/p4import/.git/
Import destination: refs/remotes/p4/master
Importing revision 4409 (100%)
</code></pre></div></div>
<p>现在去 <code class="language-plaintext highlighter-rouge">/opt/p4import</code> 目录运行一下 <code class="language-plaintext highlighter-rouge">git log</code> ,就能看到导入的成果:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log -2
commit 1fd4ec126171790efd2db83548b85b1bbbc07dc2
Author: Perforce staff <support@perforce.com>
Date: Thu Aug 19 10:18:45 2004 -0800
Drop 'rc3' moniker of jam-2.5. Folded rc2 and rc3 RELNOTES into
the main part of the document. Built new tar/zip balls.
Only 16 months later.
[git-p4: depot-paths = "//public/jam/src/": change = 4409]
commit ca8870db541a23ed867f38847eda65bf4363371d
Author: Richard Geiger <rmg@perforce.com>
Date: Tue Apr 22 20:51:34 2003 -0800
Update derived jamgram.c
[git-p4: depot-paths = "//public/jam/src/": change = 3108]
</code></pre></div></div>
<p>每一个 commit 里都有一个 <code class="language-plaintext highlighter-rouge">git-p4</code> 标识符。这个标识符可以保留,以防以后需要引用 Perforce 的修改版本号。然而,如果想删除这些标识符,现在正是时候——在开启新仓库之前。可以通过 <code class="language-plaintext highlighter-rouge">git filter-branch</code> 来批量删除这些标识符:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git filter-branch --msg-filter '
sed -e "/^\[git-p4:/d"
'
Rewrite 1fd4ec126171790efd2db83548b85b1bbbc07dc2 (123/123)
Ref 'refs/heads/master' was rewritten
</code></pre></div></div>
<p>现在运行一下 <code class="language-plaintext highlighter-rouge">git log</code>,你会发现这些 commit 的 SHA-1 校验值都发生了改变,而那些 <code class="language-plaintext highlighter-rouge">git-p4</code> 字串则从提交信息里消失了:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log -2
commit 10a16d60cffca14d454a15c6164378f4082bc5b0
Author: Perforce staff <support@perforce.com>
Date: Thu Aug 19 10:18:45 2004 -0800
Drop 'rc3' moniker of jam-2.5. Folded rc2 and rc3 RELNOTES into
the main part of the document. Built new tar/zip balls.
Only 16 months later.
commit 2b6c6db311dd76c34c66ec1c40a49405e6b527b2
Author: Richard Geiger <rmg@perforce.com>
Date: Tue Apr 22 20:51:34 2003 -0800
Update derived jamgram.c
</code></pre></div></div>
<p>至此导入已经完成,可以开始向新的 Git 服务器推送了。</p>
<h3 id="自定导入脚本">自定导入脚本</h3>
<p>如果先前的系统不是 Subversion 或 Perforce 之一,先上网找一下有没有与之对应的导入脚本——导入 CVS,Clear Case,Visual Source Safe,甚至存档目录的导入脚本已经存在。假如这些工具都不适用,或者使用的工具很少见,抑或你需要导入过程具有更多可制定性,则应该使用 <code class="language-plaintext highlighter-rouge">git fast-import</code>。该命令从标准输入读取简单的指令来写入具体的 Git 数据。这样创建 Git 对象比运行纯 Git 命令或者手动写对象要简单的多(更多相关内容见第九章)。通过它,你可以编写一个导入脚本来从导入源读取必要的信息,同时在标准输出直接输出相关指示。你可以运行该脚本并把它的输出管道连接到 <code class="language-plaintext highlighter-rouge">git fast-import</code>。</p>
<p>下面演示一下如何编写一个简单的导入脚本。假设你在进行一项工作,并且按时通过把工作目录复制为以时间戳 <code class="language-plaintext highlighter-rouge">back_YY_MM_DD</code> 命名的目录来进行备份,现在你需要把它们导入 Git 。目录结构如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ ls /opt/import_from
back_2009_01_02
back_2009_01_04
back_2009_01_14
back_2009_02_03
current
</code></pre></div></div>
<p>为了导入到一个 Git 目录,我们首先回顾一下 Git 储存数据的方式。你可能还记得,Git 本质上是一个 commit 对象的链表,每一个对象指向一个内容的快照。而这里需要做的工作就是告诉 <code class="language-plaintext highlighter-rouge">fast-import</code> 内容快照的位置,什么样的 commit 数据指向它们,以及它们的顺序。我们采取一次处理一个快照的策略,为每一个内容目录建立对应的 commit ,每一个 commit 与之前的建立链接。</p>
<p>正如在第七章 “Git 执行策略一例” 一节中一样,我们将使用 Ruby 来编写这个脚本,因为它是我日常使用的语言而且阅读起来简单一些。你可以用任何其他熟悉的语言来重写这个例子——它仅需要把必要的信息打印到标准输出而已。同时,如果你在使用 Windows,这意味着你要特别留意不要在换行的时候引入回车符(译注:carriage returns,Windows 换行时加入的符号,通常说的 <code class="language-plaintext highlighter-rouge">\r</code> )—— Git 的 fast-import 对仅使用换行符(LF)而非 Windows 的回车符(CRLF)要求非常严格。</p>
<p>首先,进入目标目录并且找到所有子目录,每一个子目录将作为一个快照被导入为一个 commit。我们将依次进入每一个子目录并打印所需的命令来导出它们。脚本的主循环大致是这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>last_mark = nil
# 循环遍历所有目录
Dir.chdir(ARGV[0]) do
Dir.glob("*").each do |dir|
next if File.file?(dir)
# 进入目标目录
Dir.chdir(dir) do
last_mark = print_export(dir, last_mark)
end
end
end
</code></pre></div></div>
<p>我们在每一个目录里运行 <code class="language-plaintext highlighter-rouge">print_export</code> ,它会取出上一个快照的索引和标记并返回本次快照的索引和标记;由此我们就可以正确的把二者连接起来。”标记(mark)” 是 <code class="language-plaintext highlighter-rouge">fast-import</code> 中对 commit 标识符的叫法;在创建 commit 的同时,我们逐一赋予一个标记以便以后在把它连接到其他 commit 时使用。因此,在 <code class="language-plaintext highlighter-rouge">print_export</code> 方法中要做的第一件事就是根据目录名生成一个标记:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>mark = convert_dir_to_mark(dir)
</code></pre></div></div>
<p>实现该函数的方法是建立一个目录的数组序列并使用数组的索引值作为标记,因为标记必须是一个整数。这个方法大致是这样的:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$marks = []
def convert_dir_to_mark(dir)
if !$marks.include?(dir)
$marks << dir
end
($marks.index(dir) + 1).to_s
end
</code></pre></div></div>
<p>有了整数来代表每个 commit,我们现在需要提交附加信息中的日期。由于日期是用目录名表示的,我们就从中解析出来。<code class="language-plaintext highlighter-rouge">print_export</code> 文件的下一行将是:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>date = convert_dir_to_date(dir)
</code></pre></div></div>
<p>而 <code class="language-plaintext highlighter-rouge">convert_dir_to_date</code> 则定义为</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>def convert_dir_to_date(dir)
if dir == 'current'
return Time.now().to_i
else
dir = dir.gsub('back_', '')
(year, month, day) = dir.split('_')
return Time.local(year, month, day).to_i
end
end
</code></pre></div></div>
<p>它为每个目录返回一个整型值。提交附加信息里最后一项所需的是提交者数据,我们在一个全局变量中直接定义之:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$author = 'Scott Chacon <schacon@example.com>'
</code></pre></div></div>
<p>我们差不多可以开始为导入脚本输出提交数据了。第一项信息指明我们定义的是一个 commit 对象以及它所在的分支,随后是我们生成的标记,提交者信息以及提交备注,然后是前一个 commit 的索引,如果有的话。代码大致这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># 打印导入所需的信息
puts 'commit refs/heads/master'
puts 'mark :' + mark
puts "committer #{$author} #{date} -0700"
export_data('imported from ' + dir)
puts 'from :' + last_mark if last_mark
</code></pre></div></div>
<p>时区(-0700)处于简化目的使用硬编码。如果是从其他版本控制系统导入,则必须以变量的形式指明时区。
提交备注必须以特定格式给出:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>data (size)\n(contents)
</code></pre></div></div>
<p>该格式包含了单词 data,所读取数据的大小,一个换行符,最后是数据本身。由于随后指明文件内容的时候要用到相同的格式,我们写一个辅助方法,<code class="language-plaintext highlighter-rouge">export_data</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>def export_data(string)
print "data #{string.size}\n#{string}"
end
</code></pre></div></div>
<p>唯一剩下的就是每一个快照的内容了。这简单的很,因为它们分别处于一个目录——你可以输出 <code class="language-plaintext highlighter-rouge">deleeall</code> 命令,随后是目录中每个文件的内容。Git 会正确的记录每一个快照:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>puts 'deleteall'
Dir.glob("**/*").each do |file| next if !File.file?(file)
inline_data(file)
end
</code></pre></div></div>
<p>注意:由于很多系统把每次修订看作一个 commit 到另一个 commit 的变化量,fast-import 也可以依据每次提交获取一个命令来指出哪些文件被添加,删除或者修改过,以及修改的内容。我们将需要计算快照之间的差别并且仅仅给出这项数据,不过该做法要复杂很多——还如不直接把所有数据丢给 Git 然它自己搞清楚。假如前面这个方法更适用于你的数据,参考 <code class="language-plaintext highlighter-rouge">fast-import</code> 的 man 帮助页面来了解如何以这种方式提供数据。</p>
<p>列举新文件内容或者指明带有新内容的已修改文件的格式如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>M 644 inline path/to/file
data (size)
(file contents)
</code></pre></div></div>
<p>这里,644 是权限模式(加入有可执行文件,则需要探测之并设定为 755),而 inline 说明我们在本行结束之后立即列出文件的内容。我们的 <code class="language-plaintext highlighter-rouge">inline_data</code> 方法大致是:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>def inline_data(file, code = 'M', mode = '644')
content = File.read(file)
puts "#{code} #{mode} inline #{file}"
export_data(content)
end
</code></pre></div></div>
<p>我们重用了前面定义过的 <code class="language-plaintext highlighter-rouge">export_data</code>,因为这里和指明提交注释的格式如出一辙。</p>
<p>最后一项工作是返回当前的标记以便下次循环的使用。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>return mark
</code></pre></div></div>
<p>注意:如果你在用 Windows,一定记得添加一项额外的步骤。前面提过,Windows 使用 CRLF 作为换行字符而 Git fast-import 只接受 LF。为了绕开这个问题来满足 git fast-import,你需要让 ruby 用 LF 取代 CRLF:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$stdout.binmode
</code></pre></div></div>
<p>搞定了。现在运行该脚本,你将得到如下内容:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ ruby import.rb /opt/import_from
commit refs/heads/master
mark :1
committer Scott Chacon <schacon@geemail.com> 1230883200 -0700
data 29
imported from back_2009_01_02deleteall
M 644 inline file.rb
data 12
version two
commit refs/heads/master
mark :2
committer Scott Chacon <schacon@geemail.com> 1231056000 -0700
data 29
imported from back_2009_01_04from :1
deleteall
M 644 inline file.rb
data 14
version three
M 644 inline new.rb
data 16
new version one
(...)
</code></pre></div></div>
<p>要运行导入脚本,在需要导入的目录把该内容用管道定向到 <code class="language-plaintext highlighter-rouge">git fast-import</code>。你可以建立一个空目录然后运行 <code class="language-plaintext highlighter-rouge">git init</code> 作为开头,然后运行该脚本:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git init
Initialized empty Git repository in /opt/import_to/.git/
$ ruby import.rb /opt/import_from | git fast-import
git-fast-import statistics:
---------------------------------------------------------------------
Alloc'd objects: 5000
Total objects: 18 ( 1 duplicates )
blobs : 7 ( 1 duplicates 0 deltas)
trees : 6 ( 0 duplicates 1 deltas)
commits: 5 ( 0 duplicates 0 deltas)
tags : 0 ( 0 duplicates 0 deltas)
Total branches: 1 ( 1 loads )
marks: 1024 ( 5 unique )
atoms: 3
Memory total: 2255 KiB
pools: 2098 KiB
objects: 156 KiB
---------------------------------------------------------------------
pack_report: getpagesize() = 4096
pack_report: core.packedGitWindowSize = 33554432
pack_report: core.packedGitLimit = 268435456
pack_report: pack_used_ctr = 9
pack_report: pack_mmap_calls = 5
pack_report: pack_open_windows = 1 / 1
pack_report: pack_mapped = 1356 / 1356
---------------------------------------------------------------------
</code></pre></div></div>
<p>你会发现,在它成功执行完毕以后,会给出一堆有关已完成工作的数据。上例在一个分支导入了5次提交数据,包含了18个对象。现在可以运行 <code class="language-plaintext highlighter-rouge">git log</code> 来检视新的历史:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log -2
commit 10bfe7d22ce15ee25b60a824c8982157ca593d41
Author: Scott Chacon <schacon@example.com>
Date: Sun May 3 12:57:39 2009 -0700
imported from current
commit 7e519590de754d079dd73b44d695a42c9d2df452
Author: Scott Chacon <schacon@example.com>
Date: Tue Feb 3 01:00:00 2009 -0700
imported from back_2009_02_03
</code></pre></div></div>
<p>就它了——一个干净整洁的 Git 仓库。需要注意的是此时没有任何内容被检出——刚开始当前目录里没有任何文件。要获取它们,你得转到 <code class="language-plaintext highlighter-rouge">master</code> 分支的所在:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ ls
$ git reset --hard master
HEAD is now at 10bfe7d imported from current
$ ls
file.rb lib
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">fast-import</code> 还可以做更多——处理不同的文件模式,二进制文件,多重分支与合并,标签,进展标识等等。一些更加复杂的实例可以在 Git 源码的 <code class="language-plaintext highlighter-rouge">contib/fast-import</code> 目录里找到;其中较为出众的是前面提过的 <code class="language-plaintext highlighter-rouge">git-p4</code> 脚本。</p>
<h2 id="总结">总结</h2>
<p>现在的你应该掌握了在 Subversion 上使用 Git 以及把几乎任何先存仓库无损失的导入为 Git 仓库。下一章将介绍 Git 内部的原始数据格式,从而是使你能亲手锻造其中的每一个字节,如果必要的话。</p>
07-自定义Git
2012-10-18T00:00:00+00:00
http://wangdaodao.github.io/2012-10-18/customizing-git
<p>到目前为止,我阐述了 Git 基本的运作机制和使用方式,介绍了 Git 提供的许多工具来帮助你简单且有效地使用它。 在本章,我将会介绍 Git 的一些重要的配置方法和钩子机制以满足自定义的要求。通过这些工具,它会和你和公司或团队配合得天衣无缝。</p>
<h2 id="配置-git">配置 Git</h2>
<p>如第一章所言,用<code class="language-plaintext highlighter-rouge">git config</code>配置 Git,要做的第一件事就是设置名字和邮箱地址:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com
</code></pre></div></div>
<p>从现在开始,你会了解到一些类似以上但更为有趣的设置选项来自定义 Git。</p>
<p>先过一遍第一章中提到的 Git 配置细节。Git 使用一系列的配置文件来存储你定义的偏好,它首先会查找<code class="language-plaintext highlighter-rouge">/etc/gitconfig</code>文件,该文件含有 对系统上所有用户及他们所拥有的仓库都生效的配置值(译注:gitconfig是全局配置文件), 如果传递<code class="language-plaintext highlighter-rouge">--system</code>选项给<code class="language-plaintext highlighter-rouge">git config</code>命令, Git 会读写这个文件。</p>
<p>接下来 Git 会查找每个用户的<code class="language-plaintext highlighter-rouge">~/.gitconfig</code>文件,你能传递<code class="language-plaintext highlighter-rouge">--global</code>选项让 Git读写该文件。</p>
<p>最后 Git 会查找由用户定义的各个库中 Git 目录下的配置文件(<code class="language-plaintext highlighter-rouge">.git/config</code>),该文件中的值只对属主库有效。 以上阐述的三层配置从一般到特殊层层推进,如果定义的值有冲突,以后面层中定义的为准,例如:在<code class="language-plaintext highlighter-rouge">.git/config</code>和<code class="language-plaintext highlighter-rouge">/etc/gitconfig</code>的较量中, <code class="language-plaintext highlighter-rouge">.git/config</code>取得了胜利。虽然你也可以直接手动编辑这些配置文件,但是运行<code class="language-plaintext highlighter-rouge">git config</code>命令将会来得简单些。</p>
<h3 id="客户端基本配置">客户端基本配置</h3>
<p>Git 能够识别的配置项被分为了两大类:客户端和服务器端,其中大部分基于你个人工作偏好,属于客户端配置。尽管有数不尽的选项,但我只阐述 其中经常使用或者会对你的工作流产生巨大影响的选项,如果你想观察你当前的 Git 能识别的选项列表,请运行</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --help
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">git config</code>的手册页(译注:以man命令的显示方式)非常细致地罗列了所有可用的配置项。</p>
<h4 id="coreeditor">core.editor</h4>
<p>Git默认会调用你的环境变量editor定义的值作为文本编辑器,如果没有定义的话,会调用Vi来创建和编辑提交以及标签信息, 你可以使用<code class="language-plaintext highlighter-rouge">core.editor</code>改变默认编辑器:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global core.editor emacs
</code></pre></div></div>
<p>现在无论你的环境变量editor被定义成什么,Git 都会调用Emacs编辑信息。</p>
<h4 id="committemplate">commit.template</h4>
<p>如果把此项指定为你系统上的一个文件,当你提交的时候, Git 会默认使用该文件定义的内容。 例如:你创建了一个模板文件<code class="language-plaintext highlighter-rouge">$HOME/.gitmessage.txt</code>,它看起来像这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>subject line
what happened
[ticket: X]
</code></pre></div></div>
<p>设置<code class="language-plaintext highlighter-rouge">commit.template</code>,当运行<code class="language-plaintext highlighter-rouge">git commit</code>时, Git 会在你的编辑器中显示以上的内容, 设置<code class="language-plaintext highlighter-rouge">commit.template</code>如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global commit.template $HOME/.gitmessage.txt
$ git commit
</code></pre></div></div>
<p>然后当你提交时,在编辑器中显示的提交信息如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>subject line
what happened
[ticket: X]
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# modified: lib/test.rb
#
~
~
".git/COMMIT_EDITMSG" 14L, 297C
</code></pre></div></div>
<p>如果你有特定的策略要运用在提交信息上,在系统上创建一个模板文件,设置 Git 默认使用它,这样当提交时,你的策略每次都会被运用。</p>
<h4 id="corepager">core.pager</h4>
<p>core.pager指定 Git 运行诸如<code class="language-plaintext highlighter-rouge">log</code>、<code class="language-plaintext highlighter-rouge">diff</code>等所使用的分页器,你能设置成用<code class="language-plaintext highlighter-rouge">more</code>或者任何你喜欢的分页器(默认用的是<code class="language-plaintext highlighter-rouge">less</code>), 当然你也可以什么都不用,设置空字符串:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global core.pager ''
</code></pre></div></div>
<p>这样不管命令的输出量多少,都会在一页显示所有内容。</p>
<h4 id="usersigningkey">user.signingkey</h4>
<p>如果你要创建经签署的含附注的标签(正如第二章所述),那么把你的GPG签署密钥设置为配置项会更好,设置密钥ID如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global user.signingkey <gpg-key-id>
</code></pre></div></div>
<p>现在你能够签署标签,从而不必每次运行<code class="language-plaintext highlighter-rouge">git tag</code>命令时定义密钥:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git tag -s <tag-name>
</code></pre></div></div>
<h4 id="coreexcludesfile">core.excludesfile</h4>
<p>正如第二章所述,你能在项目库的<code class="language-plaintext highlighter-rouge">.gitignore</code>文件里头用模式来定义那些无需纳入 Git 管理的文件,这样它们不会出现在未跟踪列表, 也不会在你运行<code class="language-plaintext highlighter-rouge">git add</code>后被暂存。然而,如果你想用项目库之外的文件来定义那些需被忽略的文件的话,用<code class="language-plaintext highlighter-rouge">core.excludesfile</code> 通知 Git 该文件所处的位置,文件内容和<code class="language-plaintext highlighter-rouge">.gitignore</code>类似。</p>
<h4 id="helpautocorrect">help.autocorrect</h4>
<p>该配置项只在 Git 1.6.1及以上版本有效,假如你在Git 1.6中错打了一条命令,会显示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git com
git: 'com' is not a git-command. See 'git --help'.
Did you mean this?
commit
</code></pre></div></div>
<p>如果你把<code class="language-plaintext highlighter-rouge">help.autocorrect</code>设置成1(译注:启动自动修正),那么在只有一个命令被模糊匹配到的情况下,Git 会自动运行该命令。</p>
<h3 id="git中的着色">Git中的着色</h3>
<p>Git能够为输出到你终端的内容着色,以便你可以凭直观进行快速、简单地分析,有许多选项能供你使用以符合你的偏好。</p>
<h4 id="colorui">color.ui</h4>
<p>Git会按照你需要自动为大部分的输出加上颜色,你能明确地规定哪些需要着色以及怎样着色,设置<code class="language-plaintext highlighter-rouge">color.ui</code>为true来打开所有的默认终端着色。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global color.ui true
</code></pre></div></div>
<p>设置好以后,当输出到终端时,Git 会为之加上颜色。其他的参数还有false和always,false意味着不为输出着色,而always则表明在任何情况下都要着色,即使 Git 命令被重定向到文件或管道。Git 1.5.5版本引进了此项配置,如果你拥有的版本更老,你必须对颜色有关选项各自进行详细地设置。</p>
<p>你会很少用到<code class="language-plaintext highlighter-rouge">color.ui = always</code>,在大多数情况下,如果你想在被重定向的输出中插入颜色码,你能传递<code class="language-plaintext highlighter-rouge">--color</code>标志给 Git 命令来迫使它这么做,<code class="language-plaintext highlighter-rouge">color.ui = true</code>应该是你的首选。</p>
<h4 id="color"><code class="language-plaintext highlighter-rouge">color.*</code></h4>
<p>想要具体到哪些命令输出需要被着色以及怎样着色或者 Git 的版本很老,你就要用到和具体命令有关的颜色配置选项,它们都能被置为<code class="language-plaintext highlighter-rouge">true</code>、<code class="language-plaintext highlighter-rouge">false</code>或<code class="language-plaintext highlighter-rouge">always</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>color.branch
color.diff
color.interactive
color.status
</code></pre></div></div>
<p>除此之外,以上每个选项都有子选项,可以被用来覆盖其父设置,以达到为输出的各个部分着色的目的。例如,让diff输出的改变信息以粗体、蓝色前景和黑色背景的形式显示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global color.diff.meta “blue black bold”
</code></pre></div></div>
<p>你能设置的颜色值如:normal、black、red、green、yellow、blue、magenta、cyan、white,正如以上例子设置的粗体属性,想要设置字体属性的话,可以选择如:bold、dim、ul、blink、reverse。</p>
<p>如果你想配置子选项的话,可以参考<code class="language-plaintext highlighter-rouge">git config</code>帮助页。</p>
<h3 id="外部的合并与比较工具">外部的合并与比较工具</h3>
<p>虽然 Git 自己实现了diff,而且到目前为止你一直在使用它,但你能够用一个外部的工具替代它,除此以外,你还能用一个图形化的工具来合并和解决冲突从而不必自己手动解决。有一个不错且免费的工具可以被用来做比较和合并工作,它就是P4Merge(译注:Perforce图形化合并工具),我会展示它的安装过程。</p>
<p>P4Merge可以在所有主流平台上运行,现在开始大胆尝试吧。对于向你展示的例子,在Mac和Linux系统上,我会使用路径名,在Windows上,<code class="language-plaintext highlighter-rouge">/usr/local/bin</code>应该被改为你环境中的可执行路径。</p>
<p>下载P4Merge:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>http://www.perforce.com/perforce/downloads/component.html
</code></pre></div></div>
<p>首先把你要运行的命令放入外部包装脚本中,我会使用Mac系统上的路径来指定该脚本的位置,在其他系统上,它应该被放置在二进制文件<code class="language-plaintext highlighter-rouge">p4merge</code>所在的目录中。创建一个merge包装脚本,名字叫作<code class="language-plaintext highlighter-rouge">extMerge</code>,让它带参数调用<code class="language-plaintext highlighter-rouge">p4merge</code>二进制文件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cat /usr/local/bin/extMerge
#!/bin/sh
/Applications/p4merge.app/Contents/MacOS/p4merge $*
</code></pre></div></div>
<p>diff包装脚本首先确定传递过来7个参数,随后把其中2个传递给merge包装脚本,默认情况下, Git 传递以下参数给diff:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>path old-file old-hex old-mode new-file new-hex new-mode
</code></pre></div></div>
<p>由于你仅仅需要<code class="language-plaintext highlighter-rouge">old-file</code>和<code class="language-plaintext highlighter-rouge">new-file</code>参数,用diff包装脚本来传递它们吧。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cat /usr/local/bin/extDiff
#!/bin/sh
[ $# -eq 7 ] && /usr/local/bin/extMerge "$2" "$5"
</code></pre></div></div>
<p>确认这两个脚本是可执行的:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ sudo chmod +x /usr/local/bin/extMerge
$ sudo chmod +x /usr/local/bin/extDiff
</code></pre></div></div>
<p>现在来配置使用你自定义的比较和合并工具吧。这需要许多自定义设置:<code class="language-plaintext highlighter-rouge">merge.tool</code>通知 Git 使用哪个合并工具;<code class="language-plaintext highlighter-rouge">mergetool.*.cmd</code>规定命令运行的方式;<code class="language-plaintext highlighter-rouge">mergetool.trustExitCode</code>会通知 Git 程序的退出是否指示合并操作成功;<code class="language-plaintext highlighter-rouge">diff.external</code>通知 Git 用什么命令做比较。因此,你能运行以下4条配置命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global merge.tool extMerge
$ git config --global mergetool.extMerge.cmd \
'extMerge "$BASE" "$LOCAL" "$REMOTE" "$MERGED"'
$ git config --global mergetool.trustExitCode false
$ git config --global diff.external extDiff
</code></pre></div></div>
<p>或者直接编辑<code class="language-plaintext highlighter-rouge">~/.gitconfig</code>文件如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[merge]
tool = extMerge
[mergetool "extMerge"]
cmd = extMerge "$BASE" "$LOCAL" "$REMOTE" "$MERGED"
trustExitCode = false
[diff]
external = extDiff
</code></pre></div></div>
<p>设置完毕后,运行diff命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git diff 32d1776b1^ 32d1776b1
</code></pre></div></div>
<p>命令行居然没有发现diff命令的输出,其实,Git 调用了刚刚设置的P4Merge,它看起来像图7-1这样:</p>
<p><a href="/uploads/2012/09/18333fig0701-tn.png"><img src="/uploads/2012/09/18333fig0701-tn.png" alt="图 7-1" /></a>
Figure 7-1. P4Merge.</p>
<p>当你设法合并两个分支,结果却有冲突时,运行<code class="language-plaintext highlighter-rouge">git mergetool</code>,Git 会调用P4Merge让你通过图形界面来解决冲突。</p>
<p>设置包装脚本的好处是你能简单地改变diff和merge工具,例如把<code class="language-plaintext highlighter-rouge">extDiff</code>和<code class="language-plaintext highlighter-rouge">extMerge</code>改成KDiff3,要做的仅仅是编辑<code class="language-plaintext highlighter-rouge">extMerge</code>脚本文件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cat /usr/local/bin/extMerge
#!/bin/sh
/Applications/kdiff3.app/Contents/MacOS/kdiff3 $*
</code></pre></div></div>
<p>现在 Git 会使用KDiff3来做比较、合并和解决冲突。</p>
<p>Git预先设置了许多其他的合并和解决冲突的工具,而你不必设置cmd。可以把合并工具设置为:kdiff3、opendiff、tkdiff、meld、xxdiff、emerge、vimdiff、gvimdiff。如果你不想用到KDiff3的所有功能,只是想用它来合并,那么kdiff3正符合你的要求,运行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global merge.tool kdiff3
</code></pre></div></div>
<p>如果运行了以上命令,没有设置<code class="language-plaintext highlighter-rouge">extMerge</code>和<code class="language-plaintext highlighter-rouge">extDiff</code>文件,Git 会用KDiff3做合并,让通常内设的比较工具来做比较。</p>
<h3 id="格式化与空白">格式化与空白</h3>
<p>格式化与空白是许多开发人员在协作时,特别是在跨平台情况下,遇到的令人头疼的细小问题。由于编辑器的不同或者Windows程序员在跨平台项目中的文件行尾加入了回车换行符,一些细微的空格变化会不经意地进入大家合作的工作或提交的补丁中。不用怕,Git 的一些配置选项会帮助你解决这些问题。</p>
<h4 id="coreautocrlf">core.autocrlf</h4>
<p>假如你正在Windows上写程序,又或者你正在和其他人合作,他们在Windows上编程,而你却在其他系统上,在这些情况下,你可能会遇到行尾结束符问题。这是因为Windows使用回车和换行两个字符来结束一行,而Mac和Linux只使用换行一个字符。虽然这是小问题,但它会极大地扰乱跨平台协作。</p>
<p>Git可以在你提交时自动地把行结束符CRLF转换成LF,而在签出代码时把LF转换成CRLF。用<code class="language-plaintext highlighter-rouge">core.autocrlf</code>来打开此项功能,如果是在Windows系统上,把它设置成<code class="language-plaintext highlighter-rouge">true</code>,这样当签出代码时,LF会被转换成CRLF:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global core.autocrlf true
</code></pre></div></div>
<p>Linux或Mac系统使用LF作为行结束符,因此你不想 Git 在签出文件时进行自动的转换;当一个以CRLF为行结束符的文件不小心被引入时你肯定想进行修正,把<code class="language-plaintext highlighter-rouge">core.autocrlf</code>设置成input来告诉 Git 在提交时把CRLF转换成LF,签出时不转换:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global core.autocrlf input
</code></pre></div></div>
<p>这样会在Windows系统上的签出文件中保留CRLF,会在Mac和Linux系统上,包括仓库中保留LF。</p>
<p>如果你是Windows程序员,且正在开发仅运行在Windows上的项目,可以设置<code class="language-plaintext highlighter-rouge">false</code>取消此功能,把回车符记录在库中:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global core.autocrlf false
</code></pre></div></div>
<h4 id="corewhitespace">core.whitespace</h4>
<p>Git预先设置了一些选项来探测和修正空白问题,其4种主要选项中的2个默认被打开,另2个被关闭,你可以自由地打开或关闭它们。</p>
<p>默认被打开的2个选项是<code class="language-plaintext highlighter-rouge">trailing-space</code>和<code class="language-plaintext highlighter-rouge">space-before-tab</code>,<code class="language-plaintext highlighter-rouge">trailing-space</code>会查找每行结尾的空格,<code class="language-plaintext highlighter-rouge">space-before-tab</code>会查找每行开头的制表符前的空格。</p>
<p>默认被关闭的2个选项是<code class="language-plaintext highlighter-rouge">indent-with-non-tab</code>和<code class="language-plaintext highlighter-rouge">cr-at-eol</code>,<code class="language-plaintext highlighter-rouge">indent-with-non-tab</code>会查找8个以上空格(非制表符)开头的行,<code class="language-plaintext highlighter-rouge">cr-at-eol</code>让 Git 知道行尾回车符是合法的。</p>
<p>设置<code class="language-plaintext highlighter-rouge">core.whitespace</code>,按照你的意图来打开或关闭选项,选项以逗号分割。通过逗号分割的链中去掉选项或在选项前加<code class="language-plaintext highlighter-rouge">-</code>来关闭,例如,如果你想要打开除了<code class="language-plaintext highlighter-rouge">cr-at-eol</code>之外的所有选项:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global core.whitespace \
trailing-space,space-before-tab,indent-with-non-tab
</code></pre></div></div>
<p>当你运行<code class="language-plaintext highlighter-rouge">git diff</code>命令且为输出着色时,Git 探测到这些问题,因此你也许在提交前能修复它们,当你用<code class="language-plaintext highlighter-rouge">git apply</code>打补丁时同样也会从中受益。如果正准备运用的补丁有特别的空白问题,你可以让 Git 发警告:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git apply --whitespace=warn <patch>
</code></pre></div></div>
<p>或者让 Git 在打上补丁前自动修正此问题:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git apply --whitespace=fix <patch>
</code></pre></div></div>
<p>这些选项也能运用于衍合。如果提交了有空白问题的文件但还没推送到上流,你可以运行带有<code class="language-plaintext highlighter-rouge">--whitespace=fix</code>选项的<code class="language-plaintext highlighter-rouge">rebase</code>来让Git在重写补丁时自动修正它们。</p>
<h3 id="服务器端配置">服务器端配置</h3>
<p>Git服务器端的配置选项并不多,但仍有一些饶有生趣的选项值得你一看。</p>
<h4 id="receivefsckobjects">receive.fsckObjects</h4>
<p>Git默认情况下不会在推送期间检查所有对象的一致性。虽然会确认每个对象的有效性以及是否仍然匹配SHA-1检验和,但 Git 不会在每次推送时都检查一致性。对于 Git 来说,库或推送的文件越大,这个操作代价就相对越高,每次推送会消耗更多时间,如果想在每次推送时 Git 都检查一致性,设置 <code class="language-plaintext highlighter-rouge">receive.fsckObjects</code> 为true来强迫它这么做:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --system receive.fsckObjects true
</code></pre></div></div>
<p>现在 Git 会在每次推送生效前检查库的完整性,确保有问题的客户端没有引入破坏性的数据。</p>
<h4 id="receivedenynonfastforwards">receive.denyNonFastForwards</h4>
<p>如果对已经被推送的提交历史做衍合,继而再推送,又或者以其它方式推送一个提交历史至远程分支,且该提交历史没在这个远程分支中,这样的推送会被拒绝。这通常是个很好的禁止策略,但有时你在做衍合并确定要更新远程分支,可以在push命令后加<code class="language-plaintext highlighter-rouge">-f</code>标志来强制更新。</p>
<p>要禁用这样的强制更新功能,可以设置<code class="language-plaintext highlighter-rouge">receive.denyNonFastForwards</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --system receive.denyNonFastForwards true
</code></pre></div></div>
<p>稍后你会看到,用服务器端的接收钩子也能达到同样的目的。这个方法可以做更细致的控制,例如:禁用特定的用户做强制更新。</p>
<h4 id="receivedenydeletes">receive.denyDeletes</h4>
<p>规避<code class="language-plaintext highlighter-rouge">denyNonFastForwards</code>策略的方法之一就是用户删除分支,然后推回新的引用。在更新的 Git 版本中(从1.6.1版本开始),把<code class="language-plaintext highlighter-rouge">receive.denyDeletes</code>设置为true:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --system receive.denyDeletes true
</code></pre></div></div>
<p>这样会在推送过程中阻止删除分支和标签 — 没有用户能够这么做。要删除远程分支,必须从服务器手动删除引用文件。通过用户访问控制列表也能这么做,在本章结尾将会介绍这些有趣的方式。</p>
<h2 id="git属性">Git属性</h2>
<p>一些设置项也能被运用于特定的路径中,这样,Git 以对一个特定的子目录或子文件集运用那些设置项。这些设置项被称为 Git 属性,可以在你目录中的<code class="language-plaintext highlighter-rouge">.gitattributes</code>文件内进行设置(通常是你项目的根目录),也可以当你不想让这些属性文件和项目文件一同提交时,在<code class="language-plaintext highlighter-rouge">.git/info/attributes</code>进行设置。</p>
<p>使用属性,你可以对个别文件或目录定义不同的合并策略,让 Git 知道怎样比较非文本文件,在你提交或签出前让 Git 过滤内容。你将在这部分了解到能在自己的项目中使用的属性,以及一些实例。</p>
<h3 id="二进制文件">二进制文件</h3>
<p>你可以用 Git 属性让其知道哪些是二进制文件(以防 Git 没有识别出来),以及指示怎样处理这些文件,这点很酷。例如,一些文本文件是由机器产生的,而且无法比较,而一些二进制文件可以比较 — 你将会了解到怎样让 Git 识别这些文件。</p>
<h4 id="识别二进制文件">识别二进制文件</h4>
<p>一些文件看起来像是文本文件,但其实是作为二进制数据被对待。例如,在Mac上的Xcode项目含有一个以<code class="language-plaintext highlighter-rouge">.pbxproj</code>结尾的文件,它是由记录设置项的IDE写到磁盘的JSON数据集(纯文本javascript数据类型)。虽然技术上看它是由ASCII字符组成的文本文件,但你并不认为如此,因为它确实是一个轻量级数据库 — 如果有2人改变了它,你通常无法合并和比较内容,只有机器才能进行识别和操作,于是,你想把它当成二进制文件。</p>
<p>让 Git 把所有<code class="language-plaintext highlighter-rouge">pbxproj</code>文件当成二进制文件,在<code class="language-plaintext highlighter-rouge">.gitattributes</code>文件中设置如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>*.pbxproj -crlf -diff
</code></pre></div></div>
<p>现在,Git 会尝试转换和修正CRLF(回车换行)问题,也不会当你在项目中运行git show或git diff时,比较不同的内容。在Git 1.6及之后的版本中,可以用一个宏代替<code class="language-plaintext highlighter-rouge">-crlf -diff</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>*.pbxproj binary
</code></pre></div></div>
<h4 id="比较二进制文件">比较二进制文件</h4>
<p>在Git 1.6及以上版本中,你能利用 Git 属性来有效地比较二进制文件。可以设置 Git 把二进制数据转换成文本格式,用通常的diff来比较。</p>
<p>这个特性很酷,而且鲜为人知,因此我会结合实例来讲解。首先,要解决的是最令人头疼的问题:对Word文档进行版本控制。很多人对Word文档又恨又爱,如果想对其进行版本控制,你可以把文件加入到 Git 库中,每次修改后提交即可。但这样做没有一点实际意义,因为运行<code class="language-plaintext highlighter-rouge">git diff</code>命令后,你只能得到如下的结果:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git diff
diff --git a/chapter1.doc b/chapter1.doc
index 88839c4..4afcb7c 100644
Binary files a/chapter1.doc and b/chapter1.doc differ
</code></pre></div></div>
<p>你不能直接比较两个不同版本的Word文件,除非进行手动扫描,不是吗? Git 属性能很好地解决此问题,把下面的行加到<code class="language-plaintext highlighter-rouge">.gitattributes</code>文件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>*.doc diff=word
</code></pre></div></div>
<p>当你要看比较结果时,如果文件扩展名是”doc”,Git 调用”word”过滤器。什么是”word”过滤器呢?其实就是 Git 使用<code class="language-plaintext highlighter-rouge">strings</code> 程序,把Word文档转换成可读的文本文件,之后再进行比较:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config diff.word.textconv strings
</code></pre></div></div>
<p>现在如果在两个快照之间比较以<code class="language-plaintext highlighter-rouge">.doc</code>结尾的文件,Git 对这些文件运用”word”过滤器,在比较前把Word文件转换成文本文件。</p>
<p>下面展示了一个实例,我把此书的第一章纳入 Git 管理,在一个段落中加入了一些文本后保存,之后运行<code class="language-plaintext highlighter-rouge">git diff</code>命令,得到结果如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git diff
diff --git a/chapter1.doc b/chapter1.doc
index c1c8a0a..b93c9e4 100644
--- a/chapter1.doc
+++ b/chapter1.doc
@@ -8,7 +8,8 @@ re going to cover Version Control Systems (VCS) and Git basics
re going to cover how to get it and set it up for the first time if you don
t already have it on your system.
In Chapter Two we will go over basic Git usage - how to use Git for the 80%
-s going on, modify stuff and contribute changes. If the book spontaneously
+s going on, modify stuff and contribute changes. If the book spontaneously
+Let's see if this works.
</code></pre></div></div>
<p>Git 成功且简洁地显示出我增加的文本”Let’s see if this works”。虽然有些瑕疵,在末尾显示了一些随机的内容,但确实可以比较了。如果你能找到或自己写个Word到纯文本的转换器的话,效果可能会更好。 <code class="language-plaintext highlighter-rouge">strings</code>可以在大部分Mac和Linux系统上运行,所以它是处理二进制格式的第一选择。</p>
<p>你还能用这个方法比较图像文件。当比较时,对JPEG文件运用一个过滤器,它能提炼出EXIF信息 — 大部分图像格式使用的元数据。如果你下载并安装了<code class="language-plaintext highlighter-rouge">exiftool</code>程序,可以用它参照元数据把图像转换成文本。比较的不同结果将会用文本向你展示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ echo '*.png diff=exif' >> .gitattributes
$ git config diff.exif.textconv exiftool
</code></pre></div></div>
<p>如果在项目中替换了一个图像文件,运行<code class="language-plaintext highlighter-rouge">git diff</code>命令的结果如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>diff --git a/image.png b/image.png
index 88839c4..4afcb7c 100644
--- a/image.png
+++ b/image.png
@@ -1,12 +1,12 @@
ExifTool Version Number : 7.74
-File Size : 70 kB
-File Modification Date/Time : 2009:04:21 07:02:45-07:00
+File Size : 94 kB
+File Modification Date/Time : 2009:04:21 07:02:43-07:00
File Type : PNG
MIME Type : image/png
-Image Width : 1058
-Image Height : 889
+Image Width : 1056
+Image Height : 827
Bit Depth : 8
Color Type : RGB with Alpha
</code></pre></div></div>
<p>你会发现文件的尺寸大小发生了改变。</p>
<h3 id="关键字扩展">关键字扩展</h3>
<p>使用SVN或CVS的开发人员经常要求关键字扩展。在 Git 中,你无法在一个文件被提交后修改它,因为 Git 会先对该文件计算校验和。然而,你可以在签出时注入文本,在提交前删除它。 Git 属性提供了2种方式这么做。</p>
<p>首先,你能够把blob的SHA-1校验和自动注入文件的<code class="language-plaintext highlighter-rouge">$Id$</code>字段。如果在一个或多个文件上设置了此字段,当下次你签出分支的时候,Git 用blob的SHA-1值替换那个字段。注意,这不是提交对象的SHA校验和,而是blob本身的校验和:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ echo '*.txt ident' >> .gitattributes
$ echo '$Id$' > test.txt
</code></pre></div></div>
<p>下次签出文件时,Git 入了blob的SHA值:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ rm text.txt
$ git checkout -- text.txt
$ cat test.txt
$Id: 42812b7653c7b88933f8a9d6cad0ca16714b9bb3 $
</code></pre></div></div>
<p>然而,这样的显示结果没有多大的实际意义。这个SHA的值相当地随机,无法区分日期的前后,所以,如果你在CVS或Subversion中用过关键字替换,一定会包含一个日期值。</p>
<p>因此,你能写自己的过滤器,在提交文件到暂存区或签出文件时替换关键字。有2种过滤器,”clean”和”smudge”。在 <code class="language-plaintext highlighter-rouge">.gitattributes</code>文件中,你能对特定的路径设置一个过滤器,然后设置处理文件的脚本,这些脚本会在文件签出前(”smudge”,见图 7-2)和提交到暂存区前(”clean”,见图7-3)被调用。这些过滤器能够做各种有趣的事。</p>
<p><a href="/uploads/2012/09/18333fig0702-tn.png"><img src="/uploads/2012/09/18333fig0702-tn.png" alt="图 7-2" /></a>
图7-2. 签出时,“smudge”过滤器被触发。</p>
<p><a href="/uploads/2012/09/18333fig0703-tn.png"><img src="/uploads/2012/09/18333fig0703-tn.png" alt="图 7-3" /></a>
图7-3. 提交到暂存区时,“clean”过滤器被触发。</p>
<p>这里举一个简单的例子:在暂存前,用<code class="language-plaintext highlighter-rouge">indent</code>(缩进)程序过滤所有C源代码。在<code class="language-plaintext highlighter-rouge">.gitattributes</code>文件中设置”indent”过滤器过滤<code class="language-plaintext highlighter-rouge">*.c</code>文件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>*.c filter=indent
</code></pre></div></div>
<p>然后,通过以下配置,让 Git 知道”indent”过滤器在遇到”smudge”和”clean”时分别该做什么:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global filter.indent.clean indent
$ git config --global filter.indent.smudge cat
</code></pre></div></div>
<p>于是,当你暂存<code class="language-plaintext highlighter-rouge">*.c</code>文件时,<code class="language-plaintext highlighter-rouge">indent</code>程序会被触发,在把它们签出之前,<code class="language-plaintext highlighter-rouge">cat</code>程序会被触发。但<code class="language-plaintext highlighter-rouge">cat</code>程序在这里没什么实际作用。这样的组合,使C源代码在暂存前被<code class="language-plaintext highlighter-rouge">indent</code>程序过滤,非常有效。</p>
<p>另一个例子是类似RCS的<code class="language-plaintext highlighter-rouge">$Date$</code>关键字扩展。为了演示,需要一个小脚本,接受文件名参数,得到项目的最新提交日期,最后把日期写入该文件。下面用Ruby脚本来实现:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#! /usr/bin/env ruby
data = STDIN.read
last_date = `git log --pretty=format:"%ad" -1`
puts data.gsub('$Date$', '$Date: ' + last_date.to_s + '$')
</code></pre></div></div>
<p>该脚本从<code class="language-plaintext highlighter-rouge">git log</code>命令中得到最新提交日期,找到文件中的所有<code class="language-plaintext highlighter-rouge">$Date$</code>字符串,最后把该日期填充到<code class="language-plaintext highlighter-rouge">$Date$</code>字符串中 — 此脚本很简单,你可以选择你喜欢的编程语言来实现。把该脚本命名为<code class="language-plaintext highlighter-rouge">expand_date</code>,放到正确的路径中,之后需要在 Git 中设置一个过滤器(<code class="language-plaintext highlighter-rouge">dater</code>),让它在签出文件时调用<code class="language-plaintext highlighter-rouge">expand_date</code>,在暂存文件时用Perl清除之:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config filter.dater.smudge expand_date
$ git config filter.dater.clean 'perl -pe "s/\\\$Date[^\\\$]*\\\$/\\\$Date\\\$/"'
</code></pre></div></div>
<p>这个Perl小程序会删除<code class="language-plaintext highlighter-rouge">$Date$</code>字符串里多余的字符,恢复<code class="language-plaintext highlighter-rouge">$Date$</code>原貌。到目前为止,你的过滤器已经设置完毕,可以开始测试了。打开一个文件,在文件中输入<code class="language-plaintext highlighter-rouge">$Date$</code>关键字,然后设置 Git 属性:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ echo '# $Date$' > date_test.txt
$ echo 'date*.txt filter=dater' >> .gitattributes
</code></pre></div></div>
<p>如果暂存该文件,之后再签出,你会发现关键字被替换了:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git add date_test.txt .gitattributes
$ git commit -m "Testing date expansion in Git"
$ rm date_test.txt
$ git checkout date_test.txt
$ cat date_test.txt
# $Date: Tue Apr 21 07:26:52 2009 -0700$
</code></pre></div></div>
<p>虽说这项技术对自定义应用来说很有用,但还是要小心,因为<code class="language-plaintext highlighter-rouge">.gitattributes</code>文件会随着项目一起提交,而过滤器(例如:<code class="language-plaintext highlighter-rouge">dater</code>)不会,所以,过滤器不会在所有地方都生效。当你在设计这些过滤器时要注意,即使它们无法正常工作,也要让整个项目运作下去。</p>
<h3 id="导出仓库">导出仓库</h3>
<p>Git属性在导出项目归档时也能发挥作用。</p>
<h4 id="export-ignore">export-ignore</h4>
<p>当产生一个归档时,可以设置 Git 不导出某些文件和目录。如果你不想在归档中包含一个子目录或文件,但想他们纳入项目的版本管理中,你能对应地设置<code class="language-plaintext highlighter-rouge">export-ignore</code>属性。</p>
<p>例如,在<code class="language-plaintext highlighter-rouge">test/</code>子目录中有一些测试文件,在项目的压缩包中包含他们是没有意义的。因此,可以增加下面这行到 Git 属性文件中:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>test/ export-ignore
</code></pre></div></div>
<p>现在,当运行git archive来创建项目的压缩包时,那个目录不会在归档中出现。</p>
<h4 id="export-subst">export-subst</h4>
<p>还能对归档做一些简单的关键字替换。在第2章中已经可以看到,可以以<code class="language-plaintext highlighter-rouge">--pretty=format</code>形式的简码在任何文件中放入<code class="language-plaintext highlighter-rouge">$Format:$</code> 字符串。例如,如果想在项目中包含一个叫作<code class="language-plaintext highlighter-rouge">LAST_COMMIT</code>的文件,当运行<code class="language-plaintext highlighter-rouge">git archive</code>时,最后提交日期自动地注入进该文件,可以这样设置:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ echo 'Last commit date: $Format:%cd$' > LAST_COMMIT
$ echo "LAST_COMMIT export-subst" >> .gitattributes
$ git add LAST_COMMIT .gitattributes
$ git commit -am 'adding LAST_COMMIT file for archives'
</code></pre></div></div>
<p>运行<code class="language-plaintext highlighter-rouge">git archive</code>后,打开该文件,会发现其内容如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cat LAST_COMMIT
Last commit date: $Format:Tue Apr 21 08:38:48 2009 -0700$
</code></pre></div></div>
<h3 id="合并策略">合并策略</h3>
<p>通过 Git 属性,还能对项目中的特定文件使用不同的合并策略。一个非常有用的选项就是,当一些特定文件发生冲突,Git 会尝试合并他们,而使用你这边的合并。</p>
<p>如果项目的一个分支有歧义或比较特别,但你想从该分支合并,而且需要忽略其中某些文件,这样的合并策略是有用的。例如,你有一个数据库设置文件database.xml,在2个分支中他们是不同的,你想合并一个分支到另一个,而不弄乱该数据库文件,可以设置属性如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>database.xml merge=ours
</code></pre></div></div>
<p>如果合并到另一个分支,database.xml文件不会有合并冲突,显示如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git merge topic
Auto-merging database.xml
Merge made by recursive.
</code></pre></div></div>
<p>这样,database.xml会保持原样。</p>
<h2 id="git挂钩">Git挂钩</h2>
<p>和其他版本控制系统一样,当某些重要事件发生时,Git 以调用自定义脚本。有两组挂钩:客户端和服务器端。客户端挂钩用于客户端的操作,如提交和合并。服务器端挂钩用于 Git 服务器端的操作,如接收被推送的提交。你可以随意地使用这些挂钩,下面会讲解其中一些。</p>
<h3 id="安装一个挂钩">安装一个挂钩</h3>
<p>挂钩都被存储在 Git 目录下的<code class="language-plaintext highlighter-rouge">hooks</code>子目录中,即大部分项目中的<code class="language-plaintext highlighter-rouge">.git/hooks</code>。 Git 默认会放置一些脚本样本在这个目录中,除了可以作为挂钩使用,这些样本本身是可以独立使用的。所有的样本都是shell脚本,其中一些还包含了Perl的脚本,不过,任何正确命名的可执行脚本都可以正常使用 — 可以用Ruby或Python,或其他。在Git 1.6版本之后,这些样本名都是以.sample结尾,因此,你必须重新命名。在Git 1.6版本之前,这些样本名都是正确的,但这些样本不是可执行文件。</p>
<p>把一个正确命名且可执行的文件放入 Git 目录下的<code class="language-plaintext highlighter-rouge">hooks</code>子目录中,可以激活该挂钩脚本,因此,之后他一直会被 Git 调用。随后会讲解主要的挂钩脚本。</p>
<h3 id="客户端挂钩">客户端挂钩</h3>
<p>有许多客户端挂钩,以下把他们分为:提交工作流挂钩、电子邮件工作流挂钩及其他客户端挂钩。</p>
<h4 id="提交工作流挂钩">提交工作流挂钩</h4>
<p>有 4个挂钩被用来处理提交的过程。<code class="language-plaintext highlighter-rouge">pre-commit</code>挂钩在键入提交信息前运行,被用来检查即将提交的快照,例如,检查是否有东西被遗漏,确认测试是否运行,以及检查代码。当从该挂钩返回非零值时,Git 放弃此次提交,但可以用<code class="language-plaintext highlighter-rouge">git commit --no-verify</code>来忽略。该挂钩可以被用来检查代码错误(运行类似lint的程序),检查尾部空白(默认挂钩是这么做的),检查新方法(译注:程序的函数)的说明。</p>
<p><code class="language-plaintext highlighter-rouge">prepare-commit-msg</code>挂钩在提交信息编辑器显示之前,默认信息被创建之后运行。因此,可以有机会在提交作者看到默认信息前进行编辑。该挂钩接收一些选项:拥有提交信息的文件路径,提交类型,如果是一次修订的话,提交的SHA-1校验和。该挂钩对通常的提交来说不是很有用,只在自动产生的默认提交信息的情况下有作用,如提交信息模板、合并、压缩和修订提交等。可以和提交模板配合使用,以编程的方式插入信息。</p>
<p><code class="language-plaintext highlighter-rouge">commit-msg</code>挂钩接收一个参数,此参数是包含最近提交信息的临时文件的路径。如果该挂钩脚本以非零退出,Git 放弃提交,因此,可以用来在提交通过前验证项目状态或提交信息。本章上一小节已经展示了使用该挂钩核对提交信息是否符合特定的模式。</p>
<p><code class="language-plaintext highlighter-rouge">post-commit</code>挂钩在整个提交过程完成后运行,他不会接收任何参数,但可以运行<code class="language-plaintext highlighter-rouge">git log -1 HEAD</code>来获得最后的提交信息。总之,该挂钩是作为通知之类使用的。</p>
<p>提交工作流的客户端挂钩脚本可以在任何工作流中使用,他们经常被用来实施某些策略,但值得注意的是,这些脚本在clone期间不会被传送。可以在服务器端实施策略来拒绝不符合某些策略的推送,但这完全取决于开发者在客户端使用这些脚本的情况。所以,这些脚本对开发者是有用的,由他们自己设置和维护,而且在任何时候都可以覆盖或修改这些脚本。</p>
<h4 id="e-mail工作流挂钩">E-mail工作流挂钩</h4>
<p>有3个可用的客户端挂钩用于e-mail工作流。当运行<code class="language-plaintext highlighter-rouge">git am</code>命令时,会调用他们,因此,如果你没有在工作流中用到此命令,可以跳过本节。如果你通过e-mail接收由<code class="language-plaintext highlighter-rouge">git format-patch</code>产生的补丁,这些挂钩也许对你有用。</p>
<p>首先运行的是<code class="language-plaintext highlighter-rouge">applypatch-msg</code>挂钩,他接收一个参数:包含被建议提交信息的临时文件名。如果该脚本非零退出,Git 放弃此补丁。可以使用这个脚本确认提交信息是否被正确格式化,或让脚本编辑信息以达到标准化。</p>
<p>下一个在<code class="language-plaintext highlighter-rouge">git am</code>运行期间调用是<code class="language-plaintext highlighter-rouge">pre-applypatch</code>挂钩。该挂钩不接收参数,在补丁被运用之后运行,因此,可以被用来在提交前检查快照。你能用此脚本运行测试,检查工作树。如果有些什么遗漏,或测试没通过,脚本会以非零退出,放弃此次<code class="language-plaintext highlighter-rouge">git am</code>的运行,补丁不会被提交。</p>
<p>最后在<code class="language-plaintext highlighter-rouge">git am</code>运行期间调用的是<code class="language-plaintext highlighter-rouge">post-applypatch</code>挂钩。你可以用他来通知一个小组或获取的补丁的作者,但无法阻止打补丁的过程。</p>
<h4 id="其他客户端挂钩">其他客户端挂钩</h4>
<p><code class="language-plaintext highlighter-rouge">pre-rebase</code>挂钩在衍合前运行,脚本以非零退出可以中止衍合的过程。你可以使用这个挂钩来禁止衍合已经推送的提交对象,Git <code class="language-plaintext highlighter-rouge">pre-rebase</code>挂钩样本就是这么做的。该样本假定next是你定义的分支名,因此,你可能要修改样本,把next改成你定义过且稳定的分支名。</p>
<p>在<code class="language-plaintext highlighter-rouge">git checkout</code>成功运行后,<code class="language-plaintext highlighter-rouge">post-checkout</code>挂钩会被调用。他可以用来为你的项目环境设置合适的工作目录。例如:放入大的二进制文件、自动产生的文档或其他一切你不想纳入版本控制的文件。</p>
<p>最后,在<code class="language-plaintext highlighter-rouge">merge</code>命令成功执行后,<code class="language-plaintext highlighter-rouge">post-merge</code>挂钩会被调用。他可以用来在 Git 无法跟踪的工作树中恢复数据,诸如权限数据。该挂钩同样能够验证在 Git 控制之外的文件是否存在,因此,当工作树改变时,你想这些文件可以被复制。</p>
<h3 id="服务器端挂钩">服务器端挂钩</h3>
<p>除了客户端挂钩,作为系统管理员,你还可以使用两个服务器端的挂钩对项目实施各种类型的策略。这些挂钩脚本可以在提交对象推送到服务器前被调用,也可以在推送到服务器后被调用。推送到服务器前调用的挂钩可以在任何时候以非零退出,拒绝推送,返回错误消息给客户端,还可以如你所愿设置足够复杂的推送策略。</p>
<h4 id="pre-receive-和-post-receive">pre-receive 和 post-receive</h4>
<p>处理来自客户端的推送(push)操作时最先执行的脚本就是 <code class="language-plaintext highlighter-rouge">pre-receive</code> 。它从标准输入(stdin)获取被推送引用的列表;如果它退出时的返回值不是0,所有推送内容都不会被接受。利用此挂钩脚本可以实现类似保证最新的索引中不包含非fast-forward类型的这类效果;抑或检查执行推送操作的用户拥有创建,删除或者推送的权限或者他是否对将要修改的每一个文件都有访问权限。</p>
<p><code class="language-plaintext highlighter-rouge">post-receive</code> 挂钩在整个过程完结以后运行,可以用来更新其他系统服务或者通知用户。它接受与 <code class="language-plaintext highlighter-rouge">pre-receive</code> 相同的标准输入数据。应用实例包括给某邮件列表发信,通知实时整合数据的服务器,或者更新软件项目的问题追踪系统 —— 甚至可以通过分析提交信息来决定某个问题是否应该被开启,修改或者关闭。该脚本无法组织推送进程,不过客户端在它完成运行之前将保持连接状态;所以在用它作一些消耗时间的操作之前请三思。</p>
<h4 id="update">update</h4>
<p>update 脚本和 <code class="language-plaintext highlighter-rouge">pre-receive</code> 脚本十分类似。不同之处在于它会为推送者更新的每一个分支运行一次。假如推送者同时向多个分支推送内容,<code class="language-plaintext highlighter-rouge">pre-receive</code> 只运行一次,相比之下 update 则会为每一个更新的分支运行一次。它不会从标准输入读取内容,而是接受三个参数:索引的名字(分支),推送前索引指向的内容的 SHA-1 值,以及用户试图推送内容的 SHA-1 值。如果 update 脚本以退出时返回非零值,只有相应的那一个索引会被拒绝;其余的依然会得到更新。</p>
<h2 id="git-强制策略实例">Git 强制策略实例</h2>
<p>在本节中,我们应用前面学到的知识建立这样一个Git 工作流程:检查提交信息的格式,只接受纯fast-forward内容的推送,并且指定用户只能修改项目中的特定子目录。我们将写一个客户端角本来提示开发人员他们推送的内容是否会被拒绝,以及一个服务端脚本来实际执行这些策略。</p>
<p>这些脚本使用 Ruby 写成,一半由于它是作者倾向的脚本语言,另外作者觉得它是最接近伪代码的脚本语言;因而即便你不使用 Ruby 也能大致看懂。不过任何其他语言也一样适用。所有 Git 自带的样例脚本都是用 Perl 或 Bash 写的。所以从这些脚本中能找到相当多的这两种语言的挂钩样例。</p>
<h3 id="服务端挂钩">服务端挂钩</h3>
<p>所有服务端的工作都在hooks(挂钩)目录的 update(更新)脚本中制定。update 脚本为每一个得到推送的分支运行一次;它接受推送目标的索引,该分支原来指向的位置,以及被推送的新内容。如果推送是通过 SSH 进行的,还可以获取发出此次操作的用户。如果设定所有操作都通过公匙授权的单一帐号(比如"git")进行,就有必要通过一个 shell 包装依据公匙来判断用户的身份,并且设定环境变量来表示该用户的身份。下面假设尝试连接的用户储存在 <code class="language-plaintext highlighter-rouge">$USER</code> 环境变量里,我们的 update 脚本首先搜集一切需要的信息:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#!/usr/bin/env ruby
$refname = ARGV[0]
$oldrev = ARGV[1]
$newrev = ARGV[2]
$user = ENV['USER']
puts "Enforcing Policies... \n(#{$refname}) (#{$oldrev[0,6]}) (#{$newrev[0,6]})"
</code></pre></div></div>
<p>没错,我在用全局变量。别鄙视我——这样比较利于演示过程。</p>
<h4 id="指定特殊的提交信息格式">指定特殊的提交信息格式</h4>
<p>我们的第一项任务是指定每一条提交信息都必须遵循某种特殊的格式。作为演示,假定每一条信息必须包含一条形似 “ref: 1234” 这样的字符串,因为我们需要把每一次提交和项目的问题追踪系统。我们要逐一检查每一条推送上来的提交内容,看看提交信息是否包含这么一个字符串,然后,如果该提交里不包含这个字符串,以非零返回值退出从而拒绝此次推送。</p>
<p>把 <code class="language-plaintext highlighter-rouge">$newrev</code> 和 <code class="language-plaintext highlighter-rouge">$oldrev</code> 变量的值传给一个叫做 <code class="language-plaintext highlighter-rouge">git rev-list</code> 的 Git plumbing 命令可以获取所有提交内容的 SHA-1 值列表。<code class="language-plaintext highlighter-rouge">git rev-list</code> 基本类似 <code class="language-plaintext highlighter-rouge">git log</code> 命令,但它默认只输出 SHA-1 值而已,没有其他信息。所以要获取由 SHA 值表示的从一次提交到另一次提交之间的所有 SHA 值,可以运行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git rev-list 538c33..d14fc7
d14fc7c847ab946ec39590d87783c69b031bdfb7
9f585da4401b0a3999e84113824d15245c13f0be
234071a1be950e2a8d078e6141f5cd20c1e61ad3
dfa04c9ef3d5197182f13fb5b9b1fb7717d2222a
17716ec0f1ff5c77eff40b7fe912f9f6cfd0e475
</code></pre></div></div>
<p>截取这些输出内容,循环遍历其中每一个 SHA 值,找出与之对应的提交信息,然后用正则表达式来测试该信息包含的格式话的内容。</p>
<p>下面要搞定如何从所有的提交内容中提取出提交信息。使用另一个叫做 <code class="language-plaintext highlighter-rouge">git cat-file</code> 的 Git plumbing 工具可以获得原始的提交数据。我们将在第九章了解到这些 plumbing 工具的细节;现在暂时先看一下这条命令的输出:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git cat-file commit ca82a6
tree cfda3bf379e4f8dba8717dee55aab78aef7f4daf
parent 085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7
author Scott Chacon <schacon@gmail.com> 1205815931 -0700
committer Scott Chacon <schacon@gmail.com> 1240030591 -0700
changed the version number
</code></pre></div></div>
<p>通过 SHA-1 值获得提交内容中的提交信息的一个简单办法是找到提交的第一行,然后取从它往后的所有内容。可以使用 Unix 系统的 <code class="language-plaintext highlighter-rouge">sed</code> 命令来实现该效果:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git cat-file commit ca82a6 | sed '1,/^$/d'
changed the version number
</code></pre></div></div>
<p>这条咒语从每一个待提交内容里提取提交信息,并且会在提取信息不符合要求的情况下退出。为了退出脚本和拒绝此次推送,返回一个非零值。整个脚本大致如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$regex = /\[ref: (\d+)\]/
# 指定提交信息格式
def check_message_format
missed_revs = `git rev-list #{$oldrev}..#{$newrev}`.split("\n")
missed_revs.each do |rev|
message = `git cat-file commit #{rev} | sed '1,/^$/d'`
if !$regex.match(message)
puts "[POLICY] Your message is not formatted correctly"
exit 1
end
end
end
check_message_format
</code></pre></div></div>
<p>把这一段放在 <code class="language-plaintext highlighter-rouge">update</code> 脚本里,所有包含不符合指定规则的提交都会遭到拒绝。</p>
<h4 id="实现基于用户的访问权限控制列表acl系统">实现基于用户的访问权限控制列表(ACL)系统</h4>
<p>假设你需要添加一个使用访问权限控制列表的机制来指定哪些用户对项目的哪些部分有推送权限。某些用户具有全部的访问权,其他人只对某些子目录或者特定的文件具有推送权限。要搞定这一点,所有的规则将被写入一个位于服务器的原始 Git 仓库的 <code class="language-plaintext highlighter-rouge">acl</code> 文件。我们让 <code class="language-plaintext highlighter-rouge">update</code> 挂钩检阅这些规则,审视推送的提交内容中需要修改的所有文件,然后决定执行推送的用户是否对所有这些文件都有权限。</p>
<p>我们首先要创建这个列表。这里使用的格式和 CVS 的 ACL 机制十分类似:它由若干行构成,第一项内容是 <code class="language-plaintext highlighter-rouge">avail</code> 或者 <code class="language-plaintext highlighter-rouge">unavail</code>,接着是逗号分隔的规则生效用户列表,最后一项是规则生效的目录(空白表示开放访问)。这些项目由 <code class="language-plaintext highlighter-rouge">|</code> 字符隔开。</p>
<p>下例中,我们指定几个管理员,几个对 <code class="language-plaintext highlighter-rouge">doc</code> 目录具有权限的文档作者,以及一个对 <code class="language-plaintext highlighter-rouge">lib</code> 和 <code class="language-plaintext highlighter-rouge">tests</code> 目录具有权限的开发人员,相应的 ACL 文件如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>avail|nickh,pjhyett,defunkt,tpw
avail|usinclair,cdickens,ebronte|doc
avail|schacon|lib
avail|schacon|tests
</code></pre></div></div>
<p>首先把这些数据读入你编写的数据结构。本例中,为保持简洁,我们暂时只实现 <code class="language-plaintext highlighter-rouge">avail</code> 的规则(译注:也就是省略了 <code class="language-plaintext highlighter-rouge">unavail</code> 部分)。下面这个方法生成一个关联数组,它的主键是用户名,值是一个该用户有写权限的所有目录组成的数组:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>def get_acl_access_data(acl_file)
# read in ACL data
acl_file = File.read(acl_file).split("\n").reject { |line| line == '' }
access = {}
acl_file.each do |line|
avail, users, path = line.split('|')
next unless avail == 'avail'
users.split(',').each do |user|
access[user] ||= []
access[user] << path
end
end
access
end
</code></pre></div></div>
<p>针对之前给出的 ACL 规则文件,这个 <code class="language-plaintext highlighter-rouge">get_acl_access_data</code> 方法返回的数据结构如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>{"defunkt"=>[nil],
"tpw"=>[nil],
"nickh"=>[nil],
"pjhyett"=>[nil],
"schacon"=>["lib", "tests"],
"cdickens"=>["doc"],
"usinclair"=>["doc"],
"ebronte"=>["doc"]}
</code></pre></div></div>
<p>搞定了用户权限的数据,下面需要找出哪些位置将要被提交的内容修改,从而确保试图推送的用户对这些位置有全部的权限。</p>
<p>使用 <code class="language-plaintext highlighter-rouge">git log</code> 的 <code class="language-plaintext highlighter-rouge">--name-only</code> 选项(在第二章里简单的提过)我们可以轻而易举的找出一次提交里修改的文件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log -1 --name-only --pretty=format:'' 9f585d
README
lib/test.rb
</code></pre></div></div>
<p>使用 <code class="language-plaintext highlighter-rouge">get_acl_access_data</code> 返回的 ACL 结构来一一核对每一次提交修改的文件列表,就能找出该用户是否有权限推送所有的提交内容:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># 仅允许特定用户修改项目中的特定子目录
def check_directory_perms
access = get_acl_access_data('acl')
# 检查是否有人在向他没有权限的地方推送内容
new_commits = `git rev-list #{$oldrev}..#{$newrev}`.split("\n")
new_commits.each do |rev|
files_modified = `git log -1 --name-only --pretty=format:'' #{rev}`.split("\n")
files_modified.each do |path|
next if path.size == 0
has_file_access = false
access[$user].each do |access_path|
if !access_path # 用户拥有完全访问权限
|| (path.index(access_path) == 0) # 或者对此位置有访问权限
has_file_access = true
end
end
if !has_file_access
puts "[POLICY] You do not have access to push to #{path}"
exit 1
end
end
end
end
check_directory_perms
</code></pre></div></div>
<p>以上的大部分内容应该都比较容易理解。通过 <code class="language-plaintext highlighter-rouge">git rev-list</code> 获取推送到服务器内容的提交列表。然后,针对其中每一项,找出它试图修改的文件然后确保执行推送的用户对这些文件具有权限。一个不太容易理解的 Ruby 技巧石 <code class="language-plaintext highlighter-rouge">path.index(access_path) ==0</code> 这句,它的返回真值如果路径以 <code class="language-plaintext highlighter-rouge">access_path</code> 开头——这是为了确保 <code class="language-plaintext highlighter-rouge">access_path </code> 并不是只在允许的路径之一,而是所有准许全选的目录都在该目录之下。</p>
<p>现在你的用户没法推送带有不正确的提交信息的内容,也不能在准许他们访问范围之外的位置做出修改。</p>
<h4 id="只允许-fast-forward-类型的推送">只允许 Fast-Forward 类型的推送</h4>
<p>剩下的最后一项任务是指定只接受 fast-forward 的推送。在 Git 1.6 或者更新版本里,只需要设定 <code class="language-plaintext highlighter-rouge">receive.denyDeletes</code> 和 <code class="language-plaintext highlighter-rouge">receive.denyNonFastForwards</code> 选项就可以了。但是通过挂钩的实现可以在旧版本的 Git 上工作,并且通过一定的修改它它可以做到只针对某些用户执行,或者更多以后可能用的到的规则。</p>
<p>检查这一项的逻辑是看看提交里是否包含从旧版本里能找到但在新版本里却找不到的内容。如果没有,那这是一次纯 fast-forward 的推送;如果有,那我们拒绝此次推送:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># 只允许纯 fast-forward 推送
def check_fast_forward
missed_refs = `git rev-list #{$newrev}..#{$oldrev}`
missed_ref_count = missed_refs.split("\n").size
if missed_ref_count > 0
puts "[POLICY] Cannot push a non fast-forward reference"
exit 1
end
end
check_fast_forward
</code></pre></div></div>
<p>一切都设定好了。如果现在运行 <code class="language-plaintext highlighter-rouge">chmod u+x .git/hooks/update</code> —— 修改包含以上内容文件的权限,然后尝试推送一个包含非 fast-forward 类型的索引,会得到一下提示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git push -f origin master
Counting objects: 5, done.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 323 bytes, done.
Total 3 (delta 1), reused 0 (delta 0)
Unpacking objects: 100% (3/3), done.
Enforcing Policies...
(refs/heads/master) (8338c5) (c5b616)
[POLICY] Cannot push a non-fast-forward reference
error: hooks/update exited with error code 1
error: hook declined to update refs/heads/master
To git@gitserver:project.git
! [remote rejected] master -> master (hook declined)
error: failed to push some refs to 'git@gitserver:project.git'
</code></pre></div></div>
<p>这里有几个有趣的信息。首先,我们可以看到挂钩运行的起点:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Enforcing Policies...
(refs/heads/master) (fb8c72) (c56860)
</code></pre></div></div>
<p>注意这是从 update 脚本开头输出到标准你输出的。所有从脚本输出的提示都会发送到客户端,这点很重要。</p>
<p>下一个值得注意的部分是错误信息。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[POLICY] Cannot push a non fast-forward reference
error: hooks/update exited with error code 1
error: hook declined to update refs/heads/master
</code></pre></div></div>
<p>第一行是我们的脚本输出的,在往下是 Git 在告诉我们 update 脚本退出时返回了非零值因而推送遭到了拒绝。最后一点:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>To git@gitserver:project.git
! [remote rejected] master -> master (hook declined)
error: failed to push some refs to 'git@gitserver:project.git'
</code></pre></div></div>
<p>我们将为每一个被挂钩拒之门外的索引受到一条远程信息,解释它被拒绝是因为一个挂钩的原因。</p>
<p>而且,如果那个 ref 字符串没有包含在任何的提交里,我们将看到前面脚本里输出的错误信息:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[POLICY] Your message is not formatted correctly
</code></pre></div></div>
<p>又或者某人想修改一个自己不具备权限的文件然后推送了一个包含它的提交,他将看到类似的提示。比如,一个文档作者尝试推送一个修改到 <code class="language-plaintext highlighter-rouge">lib</code> 目录的提交,他会看到</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[POLICY] You do not have access to push to lib/test.rb
</code></pre></div></div>
<p>全在这了。从这里开始,只要 <code class="language-plaintext highlighter-rouge">update</code> 脚本存在并且可执行,我们的仓库永远都不会遭到回转或者包含不符合要求信息的提交内容,并且用户都被锁在了沙箱里面。</p>
<h3 id="客户端挂钩-1">客户端挂钩</h3>
<p>这种手段的缺点在于用户推送内容遭到拒绝后几乎无法避免的抱怨。辛辛苦苦写成的代码在最后时刻惨遭拒绝是十分悲剧切具迷惑性的;更可怜的是他们不得不修改提交历史来解决问题,这怎么也算不上王道。</p>
<p>逃离这种两难境地的法宝是给用户一些客户端的挂钩,在他们作出可能悲剧的事情的时候给以警告。然后呢,用户们就能在提交–问题变得更难修正之前解除隐患。由于挂钩本身不跟随克隆的项目副本分发,所以必须通过其他途径把这些挂钩分发到用户的 .git/hooks 目录并设为可执行文件。虽然可以在相同或单独的项目内 容里加入并分发它们,全自动的解决方案是不存在的。</p>
<p>首先,你应该在每次提交前核查你的提交注释信息,这样你才能确保服务器不会因为不合条件的提交注释信息而拒绝你的更改。为了达到这个目的,你可以增加’commit-msg’挂钩。如果你使用该挂钩来阅读作为第一个参数传递给git的提交注释信息,并且与规定的模式作对比,你就可以使git在提交注释信息不符合条件的情况下,拒绝执行提交。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#!/usr/bin/env ruby
message_file = ARGV[0]
message = File.read(message_file)
$regex = /\[ref: (\d+)\]/
if !$regex.match(message)
puts "[POLICY] Your message is not formatted correctly"
exit 1
end
</code></pre></div></div>
<p>如果这个脚本放在这个位置 (<code class="language-plaintext highlighter-rouge">.git/hooks/commit-msg</code>) 并且是可执行的, 并且你的提交注释信息不是符合要求的,你会看到:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git commit -am 'test'
[POLICY] Your message is not formatted correctly
</code></pre></div></div>
<p>在这个实例中,提交没有成功。然而如果你的提交注释信息是符合要求的,git会允许你提交:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git commit -am 'test [ref: 132]'
[master e05c914] test [ref: 132]
1 files changed, 1 insertions(+), 0 deletions(-)
</code></pre></div></div>
<p>接下来我们要保证没有修改到 ACL 允许范围之外的文件。加入你的 .git 目录里有前面使用过的 ACL 文件,那么以下的 pre-commit 脚本将把里面的规定执行起来:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#!/usr/bin/env ruby
$user = ENV['USER']
# [ insert acl_access_data method from above ]
# 只允许特定用户修改项目重特定子目录的内容
def check_directory_perms
access = get_acl_access_data('.git/acl')
files_modified = `git diff-index --cached --name-only HEAD`.split("\n")
files_modified.each do |path|
next if path.size == 0
has_file_access = false
access[$user].each do |access_path|
if !access_path || (path.index(access_path) == 0)
has_file_access = true
end
if !has_file_access
puts "[POLICY] You do not have access to push to #{path}"
exit 1
end
end
end
check_directory_perms
</code></pre></div></div>
<p>这和服务端的脚本几乎一样,除了两个重要区别。第一,ACL 文件的位置不同,因为这个脚本在当前工作目录运行,而非 Git 目录。ACL 文件的目录必须从</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>access = get_acl_access_data('acl')
</code></pre></div></div>
<p>修改成:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>access = get_acl_access_data('.git/acl')
</code></pre></div></div>
<p>另一个重要区别是获取被修改文件列表的方式。在服务端的时候使用了查看提交纪录的方式,可是目前的提交都还没被记录下来呢,所以这个列表只能从暂存区域获取。和原来的</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>files_modified = `git log -1 --name-only --pretty=format:'' #{ref}`
</code></pre></div></div>
<p>不同,现在要用</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>files_modified = `git diff-index --cached --name-only HEAD`
</code></pre></div></div>
<p>不同的就只有这两点——除此之外,该脚本完全相同。一个小陷阱在于它假设在本地运行的账户和推送到远程服务端的相同。如果这二者不一样,则需要手动设置一下 <code class="language-plaintext highlighter-rouge">$user</code> 变量。</p>
<p>最后一项任务是检查确认推送内容中不包含非 fast-forward 类型的索引,不过这个需求比较少见。要找出一个非 fast-forward 类型的索引,要么衍合超过某个已经推送过的提交,要么从本地不同分支推送到远程相同的分支上。</p>
<p>既然服务器将给出无法推送非 fast-forward 内容的提示,而且上面的挂钩也能阻止强制的推送,唯一剩下的潜在问题就是衍合一次已经推送过的提交内容。</p>
<p>下面是一个检查这个问题的 pre-rabase 脚本的例子。它获取一个所有即将重写的提交内容的列表,然后检查它们是否在远程的索引里已经存在。一旦发现某个提交可以从远程索引里衍变过来,它就放弃衍合操作:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#!/usr/bin/env ruby
base_branch = ARGV[0]
if ARGV[1]
topic_branch = ARGV[1]
else
topic_branch = "HEAD"
end
target_shas = `git rev-list #{base_branch}..#{topic_branch}`.split("\n")
remote_refs = `git branch -r`.split("\n").map { |r| r.strip }
target_shas.each do |sha|
remote_refs.each do |remote_ref|
shas_pushed = `git rev-list ^#{sha}^@ refs/remotes/#{remote_ref}`
if shas_pushed.split(“\n”).include?(sha)
puts "[POLICY] Commit #{sha} has already been pushed to #{remote_ref}"
exit 1
end
end
end
</code></pre></div></div>
<p>这个脚本利用了一个第六章“修订版本选择”一节中不曾提到的语法。通过这一句可以获得一个所有已经完成推送的提交的列表:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git rev-list ^#{sha}^@ refs/remotes/#{remote_ref}
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">SHA^@</code> 语法解析该次提交的所有祖先。这里我们从检查远程最后一次提交能够衍变获得但从所有我们尝试推送的提交的 SHA 值祖先无法衍变获得的提交内容——也就是 fast-forward 的内容。</p>
<p>这个解决方案的硬伤在于它有可能很慢而且常常没有必要——只要不用 <code class="language-plaintext highlighter-rouge">-f</code> 来强制推送,服务器会自动给出警告并且拒绝推送内容。然而,这是个不错的练习而且理论上能帮助用户避免一次将来不得不折回来修改的衍合操作。</p>
<h2 id="总结">总结</h2>
<p>你已经见识过绝大多数通过自定义 Git 客户端和服务端来来适应自己工作流程和项目内容的方式了。无论你创造出了什么样的工作流程,Git 都能用的顺手。</p>
06-Git工具
2012-10-17T00:00:00+00:00
http://wangdaodao.github.io/2012-10-17/git-tools
<p>现在,你已经学习了管理或者维护 Git 仓库,实现代码控制所需的大多数日常命令和工作流程。你已经完成了跟踪和提交文件的基本任务,并且发挥了暂存区和轻量级的特性分支及合并的威力。</p>
<p>接下来你将领略到一些 Git 可以实现的非常强大的功能,这些功能你可能并不会在日常操作中使用,但在某些时候你也许会需要。</p>
<h2 id="修订版本revision选择">修订版本(Revision)选择</h2>
<p>Git 允许你通过几种方法来指明特定的或者一定范围内的提交。了解它们并不是必需的,但是了解一下总没坏处。</p>
<h3 id="单个修订版本">单个修订版本</h3>
<p>显然你可以使用给出的 SHA-1 值来指明一次提交,不过也有更加人性化的方法来做同样的事。本节概述了指明单个提交的诸多方法。</p>
<h3 id="简短的sha">简短的SHA</h3>
<p>Git 很聪明,它能够通过你提供的前几个字符来识别你想要的那次提交,只要你提供的那部分 SHA-1 不短于四个字符,并且没有歧义——也就是说,当前仓库中只有一个对象以这段 SHA-1 开头。</p>
<p>例如,想要查看一次指定的提交,假设你运行 <code class="language-plaintext highlighter-rouge">git log</code> 命令并找到你增加了功能的那次提交:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log
commit 734713bc047d87bf7eac9674765ae793478c50d3
Author: Scott Chacon <schacon@gmail.com>
Date: Fri Jan 2 18:32:33 2009 -0800
fixed refs handling, added gc auto, updated tests
commit d921970aadf03b3cf0e71becdaab3147ba71cdef
Merge: 1c002dd... 35cfb2b...
Author: Scott Chacon <schacon@gmail.com>
Date: Thu Dec 11 15:08:43 2008 -0800
Merge commit 'phedders/rdocs'
commit 1c002dd4b536e7479fe34593e72e6c6c1819e53b
Author: Scott Chacon <schacon@gmail.com>
Date: Thu Dec 11 14:58:32 2008 -0800
added some blame and merge stuff
</code></pre></div></div>
<p>假设是 <code class="language-plaintext highlighter-rouge">1c002dd....</code> 。如果你想 <code class="language-plaintext highlighter-rouge">git show</code> 这次提交,下面的命令是等价的(假设简短的版本没有歧义):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git show 1c002dd4b536e7479fe34593e72e6c6c1819e53b
$ git show 1c002dd4b536e7479f
$ git show 1c002d
</code></pre></div></div>
<p>Git 可以为你的 SHA-1 值生成出简短且唯一的缩写。如果你传递 <code class="language-plaintext highlighter-rouge">--abbrev-commit</code> 给 <code class="language-plaintext highlighter-rouge">git log</code> 命令,输出结果里就会使用简短且唯一的值;它默认使用七个字符来表示,不过必要时为了避免 SHA-1 的歧义,会增加字符数:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log --abbrev-commit --pretty=oneline
ca82a6d changed the version number
085bb3b removed unnecessary test code
a11bef0 first commit
</code></pre></div></div>
<p>通常在一个项目中,使用八到十个字符来避免 SHA-1 歧义已经足够了。最大的 Git 项目之一,Linux 内核,目前也只需要最长 40 个字符中的 12 个字符来保持唯一性。</p>
<h3 id="关于-sha-1-的简短说明">关于 SHA-1 的简短说明</h3>
<p>许多人可能会担心一个问题:在随机的偶然情况下,在他们的仓库里会出现两个具有相同 SHA-1 值的对象。那会怎么样呢?</p>
<p>如果你真的向仓库里提交了一个跟之前的某个对象具有相同 SHA-1 值的对象,Git 将会发现之前的那个对象已经存在在 Git 数据库中,并认为它已经被写入了。如果什么时候你想再次检出那个对象时,你会总是得到先前的那个对象的数据。</p>
<p>不过,你应该了解到,这种情况发生的概率是多么微小。SHA-1 摘要长度是 20 字节,也就是 160 位。为了保证有 50% 的概率出现一次冲突,需要 2^80 个随机哈希的对象(计算冲突机率的公式是 <code class="language-plaintext highlighter-rouge">p = (n(n-1)/2) * (1/2^160))</code>。2^80 是 1.2 x 10^24,也就是一亿亿亿,那是地球上沙粒总数的 1200 倍。</p>
<p>现在举例说一下怎样才能产生一次 SHA-1 冲突。如果地球上 65 亿的人类都在编程,每人每秒都在产生等价于整个 Linux 内核历史(一百万个 Git 对象)的代码,并将之提交到一个巨大的 Git 仓库里面,那将花费 5 年的时间才会产生足够的对象,使其拥有 50% 的概率产生一次 SHA-1 对象冲突。这要比你编程团队的成员同一个晚上在互不相干的意外中被狼袭击并杀死的机率还要小。</p>
<h3 id="分支引用">分支引用</h3>
<p>指明一次提交的最直接的方法要求有一个指向它的分支引用。这样,你就可以在任何需要一个提交对象或者 SHA-1 值的 Git 命令中使用该分支名称了。如果你想要显示一个分支的最后一次提交的对象,例如假设 <code class="language-plaintext highlighter-rouge">topic1</code> 分支指向 <code class="language-plaintext highlighter-rouge">ca82a6d</code>,那么下面的命令是等价的:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git show ca82a6dff817ec66f44342007202690a93763949
$ git show topic1
</code></pre></div></div>
<p>如果你想知道某个分支指向哪个特定的 SHA,或者想看任何一个例子中被简写的 SHA-1,你可以使用一个叫做 <code class="language-plaintext highlighter-rouge">rev-parse</code> 的 Git 探测工具。在第 9 章你可以看到关于探测工具的更多信息;简单来说,<code class="language-plaintext highlighter-rouge">rev-parse</code> 是为了底层操作而不是日常操作设计的。不过,有时你想看 Git 现在到底处于什么状态时,它可能会很有用。这里你可以对你的分支运执行 <code class="language-plaintext highlighter-rouge">rev-parse</code>。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git rev-parse topic1
ca82a6dff817ec66f44342007202690a93763949
</code></pre></div></div>
<h3 id="引用日志里的简称">引用日志里的简称</h3>
<p>在你工作的同时,Git 在后台的工作之一就是保存一份引用日志——一份记录最近几个月你的 HEAD 和分支引用的日志。</p>
<p>你可以使用 <code class="language-plaintext highlighter-rouge">git reflog</code> 来查看引用日志:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git reflog
734713b... HEAD@{0}: commit: fixed refs handling, added gc auto, updated
d921970... HEAD@{1}: merge phedders/rdocs: Merge made by recursive.
1c002dd... HEAD@{2}: commit: added some blame and merge stuff
1c36188... HEAD@{3}: rebase -i (squash): updating HEAD
95df984... HEAD@{4}: commit: # This is a combination of two commits.
1c36188... HEAD@{5}: rebase -i (squash): updating HEAD
7e05da5... HEAD@{6}: rebase -i (pick): updating HEAD
</code></pre></div></div>
<p>每次你的分支顶端因为某些原因被修改时,Git 就会为你将信息保存在这个临时历史记录里面。你也可以使用这份数据来指明更早的分支。如果你想查看仓库中 HEAD 在五次前的值,你可以使用引用日志的输出中的 <code class="language-plaintext highlighter-rouge">@{n}</code> 引用:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git show HEAD@{5}
</code></pre></div></div>
<p>你也可以使用这个语法来查看一定时间前分支指向哪里。例如,想看你的 <code class="language-plaintext highlighter-rouge">master</code> 分支昨天在哪,你可以输入</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git show master@{yesterday}
</code></pre></div></div>
<p>它就会显示昨天分支的顶端在哪。这项技术只对还在你引用日志里的数据有用,所以不能用来查看比几个月前还早的提交。</p>
<p>想要看类似于 <code class="language-plaintext highlighter-rouge">git log</code> 输出格式的引用日志信息,你可以运行 <code class="language-plaintext highlighter-rouge">git log -g</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log -g master
commit 734713bc047d87bf7eac9674765ae793478c50d3
Reflog: master@{0} (Scott Chacon <schacon@gmail.com>)
Reflog message: commit: fixed refs handling, added gc auto, updated
Author: Scott Chacon <schacon@gmail.com>
Date: Fri Jan 2 18:32:33 2009 -0800
fixed refs handling, added gc auto, updated tests
commit d921970aadf03b3cf0e71becdaab3147ba71cdef
Reflog: master@{1} (Scott Chacon <schacon@gmail.com>)
Reflog message: merge phedders/rdocs: Merge made by recursive.
Author: Scott Chacon <schacon@gmail.com>
Date: Thu Dec 11 15:08:43 2008 -0800
Merge commit 'phedders/rdocs'
</code></pre></div></div>
<p>需要注意的是,日志引用信息只存在于本地——这是一个你在仓库里做过什么的日志。其他人的仓库拷贝里的引用和你的相同;而你新克隆一个仓库的时候,引用日志是空的,因为你在仓库里还没有操作。只有你克隆了一个项目至少两个月,<code class="language-plaintext highlighter-rouge">git show HEAD@{2.months.ago}</code> 才会有用——如果你是五分钟前克隆的仓库,将不会有结果返回。</p>
<h3 id="祖先引用">祖先引用</h3>
<p>另一种指明某次提交的常用方法是通过它的祖先。如果你在引用最后加上一个 <code class="language-plaintext highlighter-rouge">^</code>,Git 将其理解为此次提交的父提交。
假设你的工程历史是这样的:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log --pretty=format:'%h %s' --graph
* 734713b fixed refs handling, added gc auto, updated tests
* d921970 Merge commit 'phedders/rdocs'
|\
| * 35cfb2b Some rdoc changes
* | 1c002dd added some blame and merge stuff
|/
* 1c36188 ignore *.gem
* 9b29157 add open3_detach to gemspec file list
</code></pre></div></div>
<p>那么,想看上一次提交,你可以使用 <code class="language-plaintext highlighter-rouge">HEAD^</code>,意思是“HEAD 的父提交”:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git show HEAD^
commit d921970aadf03b3cf0e71becdaab3147ba71cdef
Merge: 1c002dd... 35cfb2b...
Author: Scott Chacon <schacon@gmail.com>
Date: Thu Dec 11 15:08:43 2008 -0800
Merge commit 'phedders/rdocs'
</code></pre></div></div>
<p>你也可以在 <code class="language-plaintext highlighter-rouge">^</code> 后添加一个数字——例如,<code class="language-plaintext highlighter-rouge">d921970^2</code> 意思是“d921970 的第二父提交”。这种语法只在合并提交时有用,因为合并提交可能有多个父提交。第一父提交是你合并时所在分支,而第二父提交是你所合并的分支:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git show d921970^
commit 1c002dd4b536e7479fe34593e72e6c6c1819e53b
Author: Scott Chacon <schacon@gmail.com>
Date: Thu Dec 11 14:58:32 2008 -0800
added some blame and merge stuff
$ git show d921970^2
commit 35cfb2b795a55793d7cc56a6cc2060b4bb732548
Author: Paul Hedderly <paul+git@mjr.org>
Date: Wed Dec 10 22:22:03 2008 +0000
Some rdoc changes
</code></pre></div></div>
<p>另外一个指明祖先提交的方法是 <code class="language-plaintext highlighter-rouge">~</code>。这也是指向第一父提交,所以 <code class="language-plaintext highlighter-rouge">HEAD~</code> 和 <code class="language-plaintext highlighter-rouge">HEAD^</code> 是等价的。当你指定数字的时候就明显不一样了。<code class="language-plaintext highlighter-rouge">HEAD~2</code> 是指“第一父提交的第一父提交”,也就是“祖父提交”——它会根据你指定的次数检索第一父提交。例如,在上面列出的历史记录里面,<code class="language-plaintext highlighter-rouge">HEAD~3</code> 会是</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git show HEAD~3
commit 1c3618887afb5fbcbea25b7c013f4e2114448b8d
Author: Tom Preston-Werner <tom@mojombo.com>
Date: Fri Nov 7 13:47:59 2008 -0500
ignore *.gem
</code></pre></div></div>
<p>也可以写成 <code class="language-plaintext highlighter-rouge">HEAD^^^</code>,同样是第一父提交的第一父提交的第一父提交:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git show HEAD^^^
commit 1c3618887afb5fbcbea25b7c013f4e2114448b8d
Author: Tom Preston-Werner <tom@mojombo.com>
Date: Fri Nov 7 13:47:59 2008 -0500
ignore *.gem
</code></pre></div></div>
<p>你也可以混合使用这些语法——你可以通过 <code class="language-plaintext highlighter-rouge">HEAD~3^2</code> 指明先前引用的第二父提交(假设它是一个合并提交)。</p>
<h3 id="提交范围">提交范围</h3>
<p>现在你已经可以指明单次的提交,让我们来看看怎样指明一定范围的提交。这在你管理分支的时候尤显重要——如果你有很多分支,你可以指明范围来圈定一些问题的答案,比如:“这个分支上我有哪些工作还没合并到主分支的?”</p>
<h4 id="双点">双点</h4>
<p>最常用的指明范围的方法是双点的语法。这种语法主要是让 Git 区分出可从一个分支中获得而不能从另一个分支中获得的提交。例如,假设你有类似于图 6-1 的提交历史。</p>
<p><a href="/uploads/2012/09/18333fig0601-tn.png"><img src="/uploads/2012/09/18333fig0601-tn.png" alt="图 6-1" /></a>
图 6-1. 范围选择的提交历史实例</p>
<p>你想要查看你的试验分支上哪些没有被提交到主分支,那么你就可以使用 <code class="language-plaintext highlighter-rouge">master..experiment</code> 来让 Git 显示这些提交的日志——这句话的意思是“所有可从experiment分支中获得而不能从master分支中获得的提交”。为了使例子简单明了,我使用了图标中提交对象的字母来代替真实日志的输出,所以会显示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log master..experiment
D
C
</code></pre></div></div>
<p>另一方面,如果你想看相反的——所有在 <code class="language-plaintext highlighter-rouge">master</code> 而不在 <code class="language-plaintext highlighter-rouge">experiment</code> 中的分支——你可以交换分支的名字。<code class="language-plaintext highlighter-rouge">experiment..master</code> 显示所有可在 <code class="language-plaintext highlighter-rouge">master</code> 获得而在 <code class="language-plaintext highlighter-rouge">experiment</code> 中不能的提交:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log experiment..master
F
E
</code></pre></div></div>
<p>这在你想保持 <code class="language-plaintext highlighter-rouge">experiment</code> 分支最新和预览你将合并的提交的时候特别有用。这个语法的另一种常见用途是查看你将把什么推送到远程:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log origin/master..HEAD
</code></pre></div></div>
<p>这条命令显示任何在你当前分支上而不在远程<code class="language-plaintext highlighter-rouge">origin</code> 上的提交。如果你运行 <code class="language-plaintext highlighter-rouge">git push</code> 并且的你的当前分支正在跟踪 <code class="language-plaintext highlighter-rouge">origin/master</code>,被<code class="language-plaintext highlighter-rouge">git log origin/master..HEAD</code> 列出的提交就是将被传输到服务器上的提交。
你也可以留空语法中的一边来让 Git 来假定它是 HEAD。例如,输入 <code class="language-plaintext highlighter-rouge">git log origin/master..</code> 将得到和上面的例子一样的结果—— Git 使用 HEAD 来代替不存在的一边。</p>
<h4 id="多点">多点</h4>
<p>双点语法就像速记一样有用;但是你也许会想针对两个以上的分支来指明修订版本,比如查看哪些提交被包含在某些分支中的一个,但是不在你当前的分支上。Git允许你在引用前使用<code class="language-plaintext highlighter-rouge">^</code>字符或者<code class="language-plaintext highlighter-rouge">--not</code>指明你不希望提交被包含其中的分支。因此下面三个命令是等同的:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log refA..refB
$ git log ^refA refB
$ git log refB --not refA
</code></pre></div></div>
<p>这样很好,因为它允许你在查询中指定多于两个的引用,而这是双点语法所做不到的。例如,如果你想查找所有从<code class="language-plaintext highlighter-rouge">refA</code>或<code class="language-plaintext highlighter-rouge">refB</code>包含的但是不被<code class="language-plaintext highlighter-rouge">refC</code>包含的提交,你可以输入下面中的一个</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log refA refB ^refC
$ git log refA refB --not refC
</code></pre></div></div>
<p>这建立了一个非常强大的修订版本查询系统,应该可以帮助你解决分支里包含了什么这个问题。</p>
<h4 id="三点">三点</h4>
<p>最后一种主要的范围选择语法是三点语法,这个可以指定被两个引用中的一个包含但又不被两者同时包含的分支。回过头来看一下图6-1里所列的提交历史的例子。
如果你想查看<code class="language-plaintext highlighter-rouge">master</code>或者<code class="language-plaintext highlighter-rouge">experiment</code>中包含的但不是两者共有的引用,你可以运行</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log master...experiment
F
E
D
C
</code></pre></div></div>
<p>这个再次给出你普通的<code class="language-plaintext highlighter-rouge">log</code>输出但是只显示那四次提交的信息,按照传统的提交日期排列。</p>
<p>这种情形下,<code class="language-plaintext highlighter-rouge">log</code>命令的一个常用参数是<code class="language-plaintext highlighter-rouge">--left-right</code>,它会显示每个提交到底处于哪一侧的分支。这使得数据更加有用。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log --left-right master...experiment
< F
< E
> D
> C
</code></pre></div></div>
<p>有了以上工具,让Git知道你要察看哪些提交就容易得多了。</p>
<h2 id="交互式暂存">交互式暂存</h2>
<p>Git提供了很多脚本来辅助某些命令行任务。这里,你将看到一些交互式命令,它们帮助你方便地构建只包含特定组合和部分文件的提交。在你修改了一大批文件然后决定将这些变更分布在几个各有侧重的提交而不是单个又大又乱的提交时,这些工具非常有用。用这种方法,你可以确保你的提交在逻辑上划分为相应的变更集,以便于供和你一起工作的开发者审阅。如果你运行<code class="language-plaintext highlighter-rouge">git add</code>时加上<code class="language-plaintext highlighter-rouge">-i</code>或者<code class="language-plaintext highlighter-rouge">--interactive</code>选项,Git就进入了一个交互式的shell模式,显示一些类似于下面的信息:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git add -i
staged unstaged path
1: unchanged +0/-1 TODO
2: unchanged +1/-1 index.html
3: unchanged +5/-1 lib/simplegit.rb
*** Commands ***
1: status 2: update 3: revert 4: add untracked
5: patch 6: diff 7: quit 8: help
What now>
</code></pre></div></div>
<p>你会看到这个命令以一个完全不同的视图显示了你的暂存区——主要是你通过<code class="language-plaintext highlighter-rouge">git status</code>得到的那些信息但是稍微简洁但信息更加丰富一些。它在左侧列出了你暂存的变更,在右侧列出了未被暂存的变更。</p>
<p>在这之后是一个命令区。这里你可以做很多事情,包括暂存文件,撤回文件,暂存部分文件,加入未被追踪的文件,查看暂存文件的差别。</p>
<h3 id="暂存和撤回文件">暂存和撤回文件</h3>
<p>如果你在<code class="language-plaintext highlighter-rouge">What now></code>的提示后输入<code class="language-plaintext highlighter-rouge">2</code>或者<code class="language-plaintext highlighter-rouge">u</code>,这个脚本会提示你那些文件你想要暂存:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>What now> 2
staged unstaged path
1: unchanged +0/-1 TODO
2: unchanged +1/-1 index.html
3: unchanged +5/-1 lib/simplegit.rb
Update>>
</code></pre></div></div>
<p>如果想暂存TODO和index.html,你可以输入相应的编号:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Update>> 1,2
staged unstaged path
* 1: unchanged +0/-1 TODO
* 2: unchanged +1/-1 index.html
3: unchanged +5/-1 lib/simplegit.rb
Update>>
</code></pre></div></div>
<p>每个文件旁边的<code class="language-plaintext highlighter-rouge">*</code>表示选中的文件将被暂存。如果你在<code class="language-plaintext highlighter-rouge">update>></code>提示后直接敲入回车,Git会替你把所有选中的内容暂存:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Update>>
updated 2 paths
*** Commands ***
1: status 2: update 3: revert 4: add untracked
5: patch 6: diff 7: quit 8: help
What now> 1
staged unstaged path
1: +0/-1 nothing TODO
2: +1/-1 nothing index.html
3: unchanged +5/-1 lib/simplegit.rb
</code></pre></div></div>
<p>现在你可以看到TODO和index.html文件被暂存了同时simplegit.rb文件仍然未被暂存。如果这时你想要撤回TODO文件,就使用<code class="language-plaintext highlighter-rouge">3</code>或者<code class="language-plaintext highlighter-rouge">r</code>(代表revert,恢复)选项:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>*** Commands ***
1: status 2: update 3: revert 4: add untracked
5: patch 6: diff 7: quit 8: help
What now> 3
staged unstaged path
1: +0/-1 nothing TODO
2: +1/-1 nothing index.html
3: unchanged +5/-1 lib/simplegit.rb
Revert>> 1
staged unstaged path
* 1: +0/-1 nothing TODO
2: +1/-1 nothing index.html
3: unchanged +5/-1 lib/simplegit.rb
Revert>> [enter]
reverted one path
</code></pre></div></div>
<p>再次查看Git的状态,你会看到你已经撤回了TODO文件</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>*** Commands ***
1: status 2: update 3: revert 4: add untracked
5: patch 6: diff 7: quit 8: help
What now> 1
staged unstaged path
1: unchanged +0/-1 TODO
2: +1/-1 nothing index.html
3: unchanged +5/-1 lib/simplegit.rb
</code></pre></div></div>
<p>要查看你暂存内容的差异,你可以使用<code class="language-plaintext highlighter-rouge">6</code>或者<code class="language-plaintext highlighter-rouge">d</code>(表示diff)命令。它会显示你暂存文件的列表,你可以选择其中的几个,显示其被暂存的差异。这跟你在命令行下指定<code class="language-plaintext highlighter-rouge">git diff --cached</code>非常相似:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>*** Commands ***
1: status 2: update 3: revert 4: add untracked
5: patch 6: diff 7: quit 8: help
What now> 6
staged unstaged path
1: +1/-1 nothing index.html
Review diff>> 1
diff --git a/index.html b/index.html
index 4d07108..4335f49 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@ Date Finder
<p id="out">...</p>
-<div id="footer">contact : support@github.com</div>
+<div id="footer">contact : email.support@github.com</div>
<script type="text/javascript">
</code></pre></div></div>
<p>通过这些基本命令,你可以使用交互式增加模式更加方便地处理暂存区。</p>
<h3 id="暂存补丁">暂存补丁</h3>
<p>只让Git暂存文件的某些部分而忽略其他也是有可能的。例如,你对simplegit.rb文件作了两处修改但是只想暂存其中一个而忽略另一个,在Git中实现这一点非常容易。在交互式的提示符下,输入<code class="language-plaintext highlighter-rouge">5</code>或者<code class="language-plaintext highlighter-rouge">p</code>(表示patch,补丁)。Git会询问哪些文件你希望部分暂存;然后对于被选中文件的每一节,他会逐个显示文件的差异区块并询问你是否希望暂存他们:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>diff --git a/lib/simplegit.rb b/lib/simplegit.rb
index dd5ecc4..57399e0 100644
--- a/lib/simplegit.rb
+++ b/lib/simplegit.rb
@@ -22,7 +22,7 @@ class SimpleGit
end
def log(treeish = 'master')
- command("git log -n 25 #{treeish}")
+ command("git log -n 30 #{treeish}")
end
def blame(path)
Stage this hunk [y,n,a,d,/,j,J,g,e,?]?
</code></pre></div></div>
<p>此处你有很多选择。输入<code class="language-plaintext highlighter-rouge">?</code>可以显示列表:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Stage this hunk [y,n,a,d,/,j,J,g,e,?]? ?
y - stage this hunk
n - do not stage this hunk
a - stage this and all the remaining hunks in the file
d - do not stage this hunk nor any of the remaining hunks in the file
g - select a hunk to go to
/ - search for a hunk matching the given regex
j - leave this hunk undecided, see next undecided hunk
J - leave this hunk undecided, see next hunk
k - leave this hunk undecided, see previous undecided hunk
K - leave this hunk undecided, see previous hunk
s - split the current hunk into smaller hunks
e - manually edit the current hunk
? - print help
</code></pre></div></div>
<p>如果你想暂存各个区块,通常你会输入<code class="language-plaintext highlighter-rouge">y</code>或者<code class="language-plaintext highlighter-rouge">n</code>,但是暂存特定文件里的全部区块或者暂时跳过对一个区块的处理同样也很有用。如果你暂存了文件的一个部分而保留另外一个部分不被暂存,你的状态输出看起来会是这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>What now> 1
staged unstaged path
1: unchanged +0/-1 TODO
2: +1/-1 nothing index.html
3: +1/-1 +4/-0 lib/simplegit.rb
</code></pre></div></div>
<p>simplegit.rb的状态非常有意思。它显示有几行被暂存了,有几行没有。你部分地暂存了这个文件。在这时,你可以退出交互式脚本然后运行<code class="language-plaintext highlighter-rouge">git commit</code>来提交部分暂存的文件。</p>
<p>最后你也可以不通过交互式增加的模式来实现部分文件暂存——你可以在命令行下通过<code class="language-plaintext highlighter-rouge">git add -p</code>或者<code class="language-plaintext highlighter-rouge">git add --patch</code>来启动同样的脚本。</p>
<h2 id="储藏stashing">储藏(Stashing)</h2>
<p>经常有这样的事情发生,当你正在进行项目中某一部分的工作,里面的东西处于一个比较杂乱的状态,而你想转到其他分支上进行一些工作。问题是,你不想提交进行了一半的工作,否则以后你无法回到这个工作点。解决这个问题的办法就是<code class="language-plaintext highlighter-rouge">git stash</code>命令。</p>
<p>“‘储藏”“可以获取你工作目录的中间状态——也就是你修改过的被追踪的文件和暂存的变更——并将它保存到一个未完结变更的堆栈中,随时可以重新应用。</p>
<h3 id="储藏你的工作">储藏你的工作</h3>
<p>为了演示这一功能,你可以进入你的项目,在一些文件上进行工作,有可能还暂存其中一个变更。如果你运行 <code class="language-plaintext highlighter-rouge">git status</code>,你可以看到你的中间状态:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# modified: index.html
#
# Changed but not updated:
# (use "git add <file>..." to update what will be committed)
#
# modified: lib/simplegit.rb
#
</code></pre></div></div>
<p>现在你想切换分支,但是你还不想提交你正在进行中的工作;所以你储藏这些变更。为了往堆栈推送一个新的储藏,只要运行 <code class="language-plaintext highlighter-rouge">git stash</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git stash
Saved working directory and index state \
"WIP on master: 049d078 added the index file"
HEAD is now at 049d078 added the index file
(To restore them type "git stash apply")
</code></pre></div></div>
<p>你的工作目录就干净了:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git status
# On branch master
nothing to commit (working directory clean)
</code></pre></div></div>
<p>这时,你可以方便地切换到其他分支工作;你的变更都保存在栈上。要查看现有的储藏,你可以使用 <code class="language-plaintext highlighter-rouge">git stash list</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git stash list
stash@{0}: WIP on master: 049d078 added the index file
stash@{1}: WIP on master: c264051... Revert "added file_size"
stash@{2}: WIP on master: 21d80a5... added number to log
</code></pre></div></div>
<p>在这个案例中,之前已经进行了两次储藏,所以你可以访问到三个不同的储藏。你可以重新应用你刚刚实施的储藏,所采用的命令就是之前在原始的 stash 命令的帮助输出里提示的:<code class="language-plaintext highlighter-rouge">git stash apply</code>。如果你想应用更早的储藏,你可以通过名字指定它,像这样:<code class="language-plaintext highlighter-rouge">git stash apply stash@{2}</code>。如果你不指明,Git 默认使用最近的储藏并尝试应用它:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git stash apply
# On branch master
# Changed but not updated:
# (use "git add <file>..." to update what will be committed)
#
# modified: index.html
# modified: lib/simplegit.rb
#
</code></pre></div></div>
<p>你可以看到 Git 重新修改了你所储藏的那些当时尚未提交的文件。在这个案例里,你尝试应用储藏的工作目录是干净的,并且属于同一分支;但是一个干净的工作目录和应用到相同的分支上并不是应用储藏的必要条件。你可以在其中一个分支上保留一份储藏,随后切换到另外一个分支,再重新应用这些变更。在工作目录里包含已修改和未提交的文件时,你也可以应用储藏——Git 会给出归并冲突如果有任何变更无法干净地被应用。</p>
<p>对文件的变更被重新应用,但是被暂存的文件没有重新被暂存。想那样的话,你必须在运行 <code class="language-plaintext highlighter-rouge">git stash apply</code> 命令时带上一个 <code class="language-plaintext highlighter-rouge">--index</code> 的选项来告诉命令重新应用被暂存的变更。如果你是这么做的,你应该已经回到你原来的位置:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git stash apply --index
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# modified: index.html
#
# Changed but not updated:
# (use "git add <file>..." to update what will be committed)
#
# modified: lib/simplegit.rb
#
</code></pre></div></div>
<p>apply 选项只尝试应用储藏的工作——储藏的内容仍然在栈上。要移除它,你可以运行 <code class="language-plaintext highlighter-rouge">git stash drop</code>,加上你希望移除的储藏的名字:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git stash list
stash@{0}: WIP on master: 049d078 added the index file
stash@{1}: WIP on master: c264051... Revert "added file_size"
stash@{2}: WIP on master: 21d80a5... added number to log
$ git stash drop stash@{0}
Dropped stash@{0} (364e91f3f268f0900bc3ee613f9f733e82aaed43)
</code></pre></div></div>
<p>你也可以运行 <code class="language-plaintext highlighter-rouge">git stash pop</code> 来重新应用储藏,同时立刻将其从堆栈中移走。</p>
<h3 id="取消储藏un-applying-a-stash">取消储藏(Un-applying a Stash)</h3>
<p>在某些情况下,你可能想应用储藏的修改,在进行了一些其他的修改后,又要取消之前所应用储藏的修改。Git没有提供类似于 <code class="language-plaintext highlighter-rouge">stash unapply</code> 的命令,但是可以通过取消该储藏的补丁达到同样的效果:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git stash show -p stash@{0} | git apply -R
</code></pre></div></div>
<p>同样的,如果你沒有指定具体的某个储藏,Git 会选择最近的储藏:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git stash show -p | git apply -R
</code></pre></div></div>
<p>你可能会想要新建一个別名,在你的 Git 里增加一个 <code class="language-plaintext highlighter-rouge">stash-unapply</code> 命令,这样更有效率。例如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global alias.stash-unapply '!git stash show -p | git apply -R'
$ git stash
$ #... work work work
$ git stash-unapply
</code></pre></div></div>
<h3 id="从储藏中创建分支">从储藏中创建分支</h3>
<p>如果你储藏了一些工作,暂时不去理会,然后继续在你储藏工作的分支上工作,你在重新应用工作时可能会碰到一些问题。如果尝试应用的变更是针对一个你那之后修改过的文件,你会碰到一个归并冲突并且必须去化解它。如果你想用更方便的方法来重新检验你储藏的变更,你可以运行 <code class="language-plaintext highlighter-rouge">git stash branch</code>,这会创建一个新的分支,检出你储藏工作时的所处的提交,重新应用你的工作,如果成功,将会丢弃储藏。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git stash branch testchanges
Switched to a new branch "testchanges"
# On branch testchanges
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# modified: index.html
#
# Changed but not updated:
# (use "git add <file>..." to update what will be committed)
#
# modified: lib/simplegit.rb
#
Dropped refs/stash@{0} (f0dfc4d5dc332d1cee34a634182e168c4efc3359)
</code></pre></div></div>
<p>这是一个很棒的捷径来恢复储藏的工作然后在新的分支上继续当时的工作。</p>
<h2 id="重写历史">重写历史</h2>
<p>很多时候,在 Git 上工作的时候,你也许会由于某种原因想要修订你的提交历史。Git 的一个卓越之处就是它允许你在最后可能的时刻再作决定。你可以在你即将提交暂存区时决定什么文件归入哪一次提交,你可以使用 stash 命令来决定你暂时搁置的工作,你可以重写已经发生的提交以使它们看起来是另外一种样子。这个包括改变提交的次序、改变说明或者修改提交中包含的文件,将提交归并、拆分或者完全删除——这一切在你尚未开始将你的工作和别人共享前都是可以的。</p>
<p>在这一节中,你会学到如何完成这些很有用的任务以使你的提交历史在你将其共享给别人之前变成你想要的样子。</p>
<h3 id="改变最近一次提交">改变最近一次提交</h3>
<p>改变最近一次提交也许是最常见的重写历史的行为。对于你的最近一次提交,你经常想做两件基本事情:改变提交说明,或者改变你刚刚通过增加,改变,删除而记录的快照。</p>
<p>如果你只想修改最近一次提交说明,这非常简单:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git commit --amend
</code></pre></div></div>
<p>这会把你带入文本编辑器,里面包含了你最近一次提交说明,供你修改。当你保存并退出编辑器,这个编辑器会写入一个新的提交,里面包含了那个说明,并且让它成为你的新的最近一次提交。</p>
<p>如果你完成提交后又想修改被提交的快照,增加或者修改其中的文件,可能因为你最初提交时,忘了添加一个新建的文件,这个过程基本上一样。你通过修改文件然后对其运行<code class="language-plaintext highlighter-rouge">git add</code>或对一个已被记录的文件运行<code class="language-plaintext highlighter-rouge">git rm</code>,随后的<code class="language-plaintext highlighter-rouge">git commit --amend</code>会获取你当前的暂存区并将它作为新提交对应的快照。</p>
<p>使用这项技术的时候你必须小心,因为修正会改变提交的SHA-1值。这个很像是一次非常小的rebase——不要在你最近一次提交被推送后还去修正它。</p>
<h3 id="修改多个提交说明">修改多个提交说明</h3>
<p>要修改历史中更早的提交,你必须采用更复杂的工具。Git没有一个修改历史的工具,但是你可以使用rebase工具来衍合一系列的提交到它们原来所在的HEAD上而不是移到新的上。依靠这个交互式的rebase工具,你就可以停留在每一次提交后,如果你想修改或改变说明、增加文件或任何其他事情。你可以通过给<code class="language-plaintext highlighter-rouge">git rebase</code>增加<code class="language-plaintext highlighter-rouge">-i</code>选项来以交互方式地运行rebase。你必须通过告诉命令衍合到哪次提交,来指明你需要重写的提交的回溯深度。</p>
<p>例如,你想修改最近三次的提交说明,或者其中任意一次,你必须给<code class="language-plaintext highlighter-rouge">git rebase -i</code>提供一个参数,指明你想要修改的提交的父提交,例如<code class="language-plaintext highlighter-rouge">HEAD~2</code>或者<code class="language-plaintext highlighter-rouge">HEAD~3</code>。可能记住<code class="language-plaintext highlighter-rouge">~3</code>更加容易,因为你想修改最近三次提交;但是请记住你事实上所指的是四次提交之前,即你想修改的提交的父提交。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git rebase -i HEAD~3
</code></pre></div></div>
<p>再次提醒这是一个衍合命令——<code class="language-plaintext highlighter-rouge">HEAD~3..HEAD</code>范围内的每一次提交都会被重写,无论你是否修改说明。不要涵盖你已经推送到中心服务器的提交——这么做会使其他开发者产生混乱,因为你提供了同样变更的不同版本。</p>
<p>运行这个命令会为你的文本编辑器提供一个提交列表,看起来像下面这样</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>pick f7f3f6d changed my name a bit
pick 310154e updated README formatting and added blame
pick a5f4a0d added cat-file
# Rebase 710f0f8..a5f4a0d onto 710f0f8
#
# Commands:
# p, pick = use commit
# e, edit = use commit, but stop for amending
# s, squash = use commit, but meld into previous commit
#
# If you remove a line here THAT COMMIT WILL BE LOST.
# However, if you remove everything, the rebase will be aborted.
#
</code></pre></div></div>
<p>很重要的一点是你得注意这些提交的顺序与你通常通过<code class="language-plaintext highlighter-rouge">log</code>命令看到的是相反的。如果你运行<code class="language-plaintext highlighter-rouge">log</code>,你会看到下面这样的结果:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log --pretty=format:"%h %s" HEAD~3..HEAD
a5f4a0d added cat-file
310154e updated README formatting and added blame
f7f3f6d changed my name a bit
</code></pre></div></div>
<p>请注意这里的倒序。交互式的rebase给了你一个即将运行的脚本。它会从你在命令行上指明的提交开始(<code class="language-plaintext highlighter-rouge">HEAD~3</code>)然后自上至下重播每次提交里引入的变更。它将最早的列在顶上而不是最近的,因为这是第一个需要重播的。</p>
<p>你需要修改这个脚本来让它停留在你想修改的变更上。要做到这一点,你只要将你想修改的每一次提交前面的pick改为edit。例如,只想修改第三次提交说明的话,你就像下面这样修改文件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>edit f7f3f6d changed my name a bit
pick 310154e updated README formatting and added blame
pick a5f4a0d added cat-file
</code></pre></div></div>
<p>当你保存并退出编辑器,Git会倒回至列表中的最后一次提交,然后把你送到命令行中,同时显示以下信息:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git rebase -i HEAD~3
Stopped at 7482e0d... updated the gemspec to hopefully work better
You can amend the commit now, with
git commit --amend
Once you’re satisfied with your changes, run
git rebase --continue
</code></pre></div></div>
<p>这些指示很明确地告诉了你该干什么。输入</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git commit --amend
</code></pre></div></div>
<p>修改提交说明,退出编辑器。然后,运行</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git rebase --continue
</code></pre></div></div>
<p>这个命令会自动应用其他两次提交,你就完成任务了。如果你将更多行的 pick 改为 edit ,你就能对你想修改的提交重复这些步骤。Git每次都会停下,让你修正提交,完成后继续运行。</p>
<h3 id="重排提交">重排提交</h3>
<p>你也可以使用交互式的衍合来彻底重排或删除提交。如果你想删除”added cat-file”这个提交并且修改其他两次提交引入的顺序,你将rebase脚本从这个</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>pick f7f3f6d changed my name a bit
pick 310154e updated README formatting and added blame
pick a5f4a0d added cat-file
</code></pre></div></div>
<p>改为这个:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>pick 310154e updated README formatting and added blame
pick f7f3f6d changed my name a bit
</code></pre></div></div>
<p>当你保存并退出编辑器,Git 将分支倒回至这些提交的父提交,应用<code class="language-plaintext highlighter-rouge">310154e</code>,然后<code class="language-plaintext highlighter-rouge">f7f3f6d</code>,接着停止。你有效地修改了这些提交的顺序并且彻底删除了”added cat-file”这次提交。</p>
<h3 id="压制squashing提交">压制(Squashing)提交</h3>
<p>交互式的衍合工具还可以将一系列提交压制为单一提交。脚本在 rebase 的信息里放了一些有用的指示:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#
# Commands:
# p, pick = use commit
# e, edit = use commit, but stop for amending
# s, squash = use commit, but meld into previous commit
#
# If you remove a line here THAT COMMIT WILL BE LOST.
# However, if you remove everything, the rebase will be aborted.
#
</code></pre></div></div>
<p>如果不用”pick”或者”edit”,而是指定”squash”,Git 会同时应用那个变更和它之前的变更并将提交说明归并。因此,如果你想将这三个提交合并为单一提交,你可以将脚本修改成这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>pick f7f3f6d changed my name a bit
squash 310154e updated README formatting and added blame
squash a5f4a0d added cat-file
</code></pre></div></div>
<p>当你保存并退出编辑器,Git 会应用全部三次变更然后将你送回编辑器来归并三次提交说明。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># This is a combination of 3 commits.
# The first commit's message is:
changed my name a bit
# This is the 2nd commit message:
updated README formatting and added blame
# This is the 3rd commit message:
added cat-file
</code></pre></div></div>
<p>当你保存之后,你就拥有了一个包含前三次提交的全部变更的单一提交。</p>
<h3 id="拆分提交">拆分提交</h3>
<p>拆分提交就是撤销一次提交,然后多次部分地暂存或提交直到结束。例如,假设你想将三次提交中的中间一次拆分。将”updated README formatting and added blame”拆分成两次提交:第一次为”updated README formatting”,第二次为”added blame”。你可以在<code class="language-plaintext highlighter-rouge">rebase -i</code>脚本中修改你想拆分的提交前的指令为”edit”:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>pick f7f3f6d changed my name a bit
edit 310154e updated README formatting and added blame
pick a5f4a0d added cat-file
</code></pre></div></div>
<p>然后,这个脚本就将你带入命令行,你重置那次提交,提取被重置的变更,从中创建多次提交。当你保存并退出编辑器,Git 倒回到列表中第一次提交的父提交,应用第一次提交(<code class="language-plaintext highlighter-rouge">f7f3f6d</code>),应用第二次提交(<code class="language-plaintext highlighter-rouge">310154e</code>),然后将你带到控制台。那里你可以用<code class="language-plaintext highlighter-rouge">git reset HEAD^</code>对那次提交进行一次混合的重置,这将撤销那次提交并且将修改的文件撤回。此时你可以暂存并提交文件,直到你拥有多次提交,结束后,运行<code class="language-plaintext highlighter-rouge">git rebase --continue</code>。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git reset HEAD^
$ git add README
$ git commit -m 'updated README formatting'
$ git add lib/simplegit.rb
$ git commit -m 'added blame'
$ git rebase --continue
</code></pre></div></div>
<p>Git在脚本中应用了最后一次提交(<code class="language-plaintext highlighter-rouge">a5f4a0d</code>),你的历史看起来就像这样了:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log -4 --pretty=format:"%h %s"
1c002dd added cat-file
9b29157 added blame
35cfb2b updated README formatting
f3cc40e changed my name a bit
</code></pre></div></div>
<p>再次提醒,这会修改你列表中的提交的 SHA 值,所以请确保这个列表里不包含你已经推送到共享仓库的提交。</p>
<h3 id="核弹级选项-filter-branch">核弹级选项: filter-branch</h3>
<p>如果你想用脚本的方式修改大量的提交,还有一个重写历史的选项可以用——例如,全局性地修改电子邮件地址或者将一个文件从所有提交中删除。这个命令是<code class="language-plaintext highlighter-rouge">filter-branch</code>,这个会大面积地修改你的历史,所以你很有可能不该去用它,除非你的项目尚未公开,没有其他人在你准备修改的提交的基础上工作。尽管如此,这个可以非常有用。你会学习一些常见用法,借此对它的能力有所认识。</p>
<h4 id="从所有提交中删除一个文件">从所有提交中删除一个文件</h4>
<p>这个经常发生。有些人不经思考使用<code class="language-plaintext highlighter-rouge">git add .</code>,意外地提交了一个巨大的二进制文件,你想将它从所有地方删除。也许你不小心提交了一个包含密码的文件,而你想让你的项目开源。<code class="language-plaintext highlighter-rouge">filter-branch</code>大概会是你用来清理整个历史的工具。要从整个历史中删除一个名叫password.txt的文件,你可以在<code class="language-plaintext highlighter-rouge">filter-branch</code>上使用<code class="language-plaintext highlighter-rouge">--tree-filter</code>选项:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git filter-branch --tree-filter 'rm -f passwords.txt' HEAD
Rewrite 6b9b3cf04e7c5686a9cb838c3f36a8cb6a0fc2bd (21/21)
Ref 'refs/heads/master' was rewritten
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">--tree-filter</code>选项会在每次检出项目时先执行指定的命令然后重新提交结果。在这个例子中,你会在所有快照中删除一个名叫 password.txt 的文件,无论它是否存在。如果你想删除所有不小心提交上去的编辑器备份文件,你可以运行类似<code class="language-plaintext highlighter-rouge">git filter-branch --tree-filter 'rm -f *~' HEAD</code>的命令。</p>
<p>你可以观察到 Git 重写目录树并且提交,然后将分支指针移到末尾。一个比较好的办法是在一个测试分支上做这些然后在你确定产物真的是你所要的之后,再 hard-reset 你的主分支。要在你所有的分支上运行<code class="language-plaintext highlighter-rouge">filter-branch</code>的话,你可以传递一个<code class="language-plaintext highlighter-rouge">--all</code>给命令。</p>
<h4 id="将一个子目录设置为新的根目录">将一个子目录设置为新的根目录</h4>
<p>假设你完成了从另外一个代码控制系统的导入工作,得到了一些没有意义的子目录(trunk, tags等等)。如果你想让<code class="language-plaintext highlighter-rouge">trunk</code>子目录成为每一次提交的新的项目根目录,<code class="language-plaintext highlighter-rouge">filter-branch</code>也可以帮你做到:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git filter-branch --subdirectory-filter trunk HEAD
Rewrite 856f0bf61e41a27326cdae8f09fe708d679f596f (12/12)
Ref 'refs/heads/master' was rewritten
</code></pre></div></div>
<p>现在你的项目根目录就是<code class="language-plaintext highlighter-rouge">trunk</code>子目录了。Git 会自动地删除不对这个子目录产生影响的提交。</p>
<h4 id="全局性地更换电子邮件地址">全局性地更换电子邮件地址</h4>
<p>另一个常见的案例是你在开始时忘了运行<code class="language-plaintext highlighter-rouge">git config</code>来设置你的姓名和电子邮件地址,也许你想开源一个项目,把你所有的工作电子邮件地址修改为个人地址。无论哪种情况你都可以用<code class="language-plaintext highlighter-rouge">filter-branch</code>来更换多次提交里的电子邮件地址。你必须小心一些,只改变属于你的电子邮件地址,所以你使用<code class="language-plaintext highlighter-rouge">--commit-filter</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git filter-branch --commit-filter '
if [ "$GIT_AUTHOR_EMAIL" = "schacon@localhost" ];
then
GIT_AUTHOR_NAME="Scott Chacon";
GIT_AUTHOR_EMAIL="schacon@example.com";
git commit-tree "$@";
else
git commit-tree "$@";
fi' HEAD
</code></pre></div></div>
<p>这个会遍历并重写所有提交使之拥有你的新地址。因为提交里包含了它们的父提交的SHA-1值,这个命令会修改你的历史中的所有提交,而不仅仅是包含了匹配的电子邮件地址的那些。</p>
<h2 id="使用-git-调试">使用 Git 调试</h2>
<p>Git 同样提供了一些工具来帮助你调试项目中遇到的问题。由于 Git 被设计为可应用于几乎任何类型的项目,这些工具是通用型,但是在遇到问题时可以经常帮助你查找缺陷所在。</p>
<h3 id="文件标注">文件标注</h3>
<p>如果你在追踪代码中的缺陷想知道这是什么时候为什么被引进来的,文件标注会是你的最佳工具。它会显示文件中对每一行进行修改的最近一次提交。因此,如果你发现自己代码中的一个方法存在缺陷,你可以用<code class="language-plaintext highlighter-rouge">git blame</code>来标注文件,查看那个方法的每一行分别是由谁在哪一天修改的。下面这个例子使用了<code class="language-plaintext highlighter-rouge">-L</code>选项来限制输出范围在第12至22行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git blame -L 12,22 simplegit.rb
^4832fe2 (Scott Chacon 2008-03-15 10:31:28 -0700 12) def show(tree = 'master')
^4832fe2 (Scott Chacon 2008-03-15 10:31:28 -0700 13) command("git show #{tree}")
^4832fe2 (Scott Chacon 2008-03-15 10:31:28 -0700 14) end
^4832fe2 (Scott Chacon 2008-03-15 10:31:28 -0700 15)
9f6560e4 (Scott Chacon 2008-03-17 21:52:20 -0700 16) def log(tree = 'master')
79eaf55d (Scott Chacon 2008-04-06 10:15:08 -0700 17) command("git log #{tree}")
9f6560e4 (Scott Chacon 2008-03-17 21:52:20 -0700 18) end
9f6560e4 (Scott Chacon 2008-03-17 21:52:20 -0700 19)
42cf2861 (Magnus Chacon 2008-04-13 10:45:01 -0700 20) def blame(path)
42cf2861 (Magnus Chacon 2008-04-13 10:45:01 -0700 21) command("git blame #{path}")
42cf2861 (Magnus Chacon 2008-04-13 10:45:01 -0700 22) end
</code></pre></div></div>
<p>请注意第一个域里是最后一次修改该行的那次提交的 SHA-1 值。接下去的两个域是从那次提交中抽取的值——作者姓名和日期——所以你可以方便地获知谁在什么时候修改了这一行。在这后面是行号和文件的内容。请注意<code class="language-plaintext highlighter-rouge">^4832fe2</code>提交的那些行,这些指的是文件最初提交的那些行。那个提交是文件第一次被加入这个项目时存在的,自那以后未被修改过。这会带来小小的困惑,因为你已经至少看到了Git使用<code class="language-plaintext highlighter-rouge">^</code>来修饰一个提交的SHA值的三种不同的意义,但这里确实就是这个意思。</p>
<p>另一件很酷的事情是在 Git 中你不需要显式地记录文件的重命名。它会记录快照然后根据现实尝试找出隐式的重命名动作。这其中有一个很有意思的特性就是你可以让它找出所有的代码移动。如果你在<code class="language-plaintext highlighter-rouge">git blame</code>后加上<code class="language-plaintext highlighter-rouge">-C</code>,Git会分析你在标注的文件然后尝试找出其中代码片段的原始出处,如果它是从其他地方拷贝过来的话。最近,我在将一个名叫<code class="language-plaintext highlighter-rouge">GITServerHandler.m</code>的文件分解到多个文件中,其中一个是<code class="language-plaintext highlighter-rouge">GITPackUpload.m</code>。通过对<code class="language-plaintext highlighter-rouge">GITPackUpload.m</code>执行带<code class="language-plaintext highlighter-rouge">-C</code>参数的blame命令,我可以看到代码块的原始出处:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git blame -C -L 141,153 GITPackUpload.m
f344f58d GITServerHandler.m (Scott 2009-01-04 141)
f344f58d GITServerHandler.m (Scott 2009-01-04 142) - (void) gatherObjectShasFromC
f344f58d GITServerHandler.m (Scott 2009-01-04 143) {
70befddd GITServerHandler.m (Scott 2009-03-22 144) //NSLog(@"GATHER COMMI
ad11ac80 GITPackUpload.m (Scott 2009-03-24 145)
ad11ac80 GITPackUpload.m (Scott 2009-03-24 146) NSString *parentSha;
ad11ac80 GITPackUpload.m (Scott 2009-03-24 147) GITCommit *commit = [g
ad11ac80 GITPackUpload.m (Scott 2009-03-24 148)
ad11ac80 GITPackUpload.m (Scott 2009-03-24 149) //NSLog(@"GATHER COMMI
ad11ac80 GITPackUpload.m (Scott 2009-03-24 150)
56ef2caf GITServerHandler.m (Scott 2009-01-05 151) if(commit) {
56ef2caf GITServerHandler.m (Scott 2009-01-05 152) [refDict setOb
56ef2caf GITServerHandler.m (Scott 2009-01-05 153)
</code></pre></div></div>
<p>这真的非常有用。通常,你会把你拷贝代码的那次提交作为原始提交,因为这是你在这个文件中第一次接触到那几行。Git可以告诉你编写那些行的原始提交,即便是在另一个文件里。</p>
<h3 id="二分查找">二分查找</h3>
<p>标注文件在你知道问题是哪里引入的时候会有帮助。如果你不知道,并且自上次代码可用的状态已经经历了上百次的提交,你可能就要求助于<code class="language-plaintext highlighter-rouge">bisect</code>命令了。<code class="language-plaintext highlighter-rouge">bisect</code>会在你的提交历史中进行二分查找来尽快地确定哪一次提交引入了错误。</p>
<p>例如你刚刚推送了一个代码发布版本到产品环境中,对代码为什么会表现成那样百思不得其解。你回到你的代码中,还好你可以重现那个问题,但是找不到在哪里。你可以对代码执行bisect来寻找。首先你运行<code class="language-plaintext highlighter-rouge">git bisect start</code>启动,然后你用<code class="language-plaintext highlighter-rouge">git bisect bad</code>来告诉系统当前的提交已经有问题了。然后你必须告诉bisect已知的最后一次正常状态是哪次提交,使用<code class="language-plaintext highlighter-rouge">git bisect good [good_commit]</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git bisect start
$ git bisect bad
$ git bisect good v1.0
Bisecting: 6 revisions left to test after this
[ecb6e1bc347ccecc5f9350d878ce677feb13d3b2] error handling on repo
</code></pre></div></div>
<p>Git 发现在你标记为正常的提交(v1.0)和当前的错误版本之间有大约12次提交,于是它检出中间的一个。在这里,你可以运行测试来检查问题是否存在于这次提交。如果是,那么它是在这个中间提交之前的某一次引入的;如果否,那么问题是在中间提交之后引入的。假设这里是没有错误的,那么你就通过<code class="language-plaintext highlighter-rouge">git bisect good</code>来告诉 Git 然后继续你的旅程:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git bisect good
Bisecting: 3 revisions left to test after this
[b047b02ea83310a70fd603dc8cd7a6cd13d15c04] secure this thing
</code></pre></div></div>
<p>现在你在另外一个提交上了,在你刚刚测试通过的和一个错误提交的中点处。你再次运行测试然后发现这次提交是错误的,因此你通过<code class="language-plaintext highlighter-rouge">git bisect bad</code>来告诉Git:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git bisect bad
Bisecting: 1 revisions left to test after this
[f71ce38690acf49c1f3c9bea38e09d82a5ce6014] drop exceptions table
</code></pre></div></div>
<p>这次提交是好的,那么 Git 就获得了确定问题引入位置所需的所有信息。它告诉你第一个错误提交的 SHA-1 值并且显示一些提交说明以及哪些文件在那次提交里修改过,这样你可以找出缺陷被引入的根源:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git bisect good
b047b02ea83310a70fd603dc8cd7a6cd13d15c04 is first bad commit
commit b047b02ea83310a70fd603dc8cd7a6cd13d15c04
Author: PJ Hyett <pjhyett@example.com>
Date: Tue Jan 27 14:48:32 2009 -0800
secure this thing
:040000 040000 40ee3e7821b895e52c1695092db9bdc4c61d1730
f24d3c6ebcfc639b1a3814550e62d60b8e68a8e4 M config
</code></pre></div></div>
<p>当你完成之后,你应该运行<code class="language-plaintext highlighter-rouge">git bisect reset</code>来重设你的HEAD到你开始前的地方,否则你会处于一个诡异的地方:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git bisect reset
</code></pre></div></div>
<p>这是个强大的工具,可以帮助你检查上百的提交,在几分钟内找出缺陷引入的位置。事实上,如果你有一个脚本会在工程正常时返回0,错误时返回非0的话,你可以完全自动地执行<code class="language-plaintext highlighter-rouge">git bisect</code>。首先你需要提供已知的错误和正确提交来告诉它二分查找的范围。你可以通过<code class="language-plaintext highlighter-rouge">bisect start</code>命令来列出它们,先列出已知的错误提交再列出已知的正确提交:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git bisect start HEAD v1.0
$ git bisect run test-error.sh
</code></pre></div></div>
<p>这样会自动地在每一个检出的提交里运行<code class="language-plaintext highlighter-rouge">test-error.sh</code>直到Git找出第一个破损的提交。你也可以运行像<code class="language-plaintext highlighter-rouge">make</code>或者<code class="language-plaintext highlighter-rouge">make tests</code>或者任何你所拥有的来为你执行自动化的测试。</p>
<h2 id="子模块">子模块</h2>
<p>经常有这样的事情,当你在一个项目上工作时,你需要在其中使用另外一个项目。也许它是一个第三方开发的库或者是你独立开发和并在多个父项目中使用的。这个场景下一个常见的问题产生了:你想将两个项目单独处理但是又需要在其中一个中使用另外一个。</p>
<p>这里有一个例子。假设你在开发一个网站,为之创建Atom源。你不想编写一个自己的Atom生成代码,而是决定使用一个库。你可能不得不像CPAN install或者Ruby gem一样包含来自共享库的代码,或者将代码拷贝到你的项目树中。如果采用包含库的办法,那么不管用什么办法都很难去定制这个库,部署它就更加困难了,因为你必须确保每个客户都拥有那个库。把代码包含到你自己的项目中带来的问题是,当上游被修改时,任何你进行的定制化的修改都很难归并。</p>
<p>Git 通过子模块处理这个问题。子模块允许你将一个 Git 仓库当作另外一个Git仓库的子目录。这允许你克隆另外一个仓库到你的项目中并且保持你的提交相对独立。</p>
<h3 id="子模块初步">子模块初步</h3>
<p>假设你想把 Rack 库(一个 Ruby 的 web 服务器网关接口)加入到你的项目中,可能既要保持你自己的变更,又要延续上游的变更。首先你要把外部的仓库克隆到你的子目录中。你通过<code class="language-plaintext highlighter-rouge">git submodule add</code>将外部项目加为子模块:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git submodule add git://github.com/chneukirchen/rack.git rack
Initialized empty Git repository in /opt/subtest/rack/.git/
remote: Counting objects: 3181, done.
remote: Compressing objects: 100% (1534/1534), done.
remote: Total 3181 (delta 1951), reused 2623 (delta 1603)
Receiving objects: 100% (3181/3181), 675.42 KiB | 422 KiB/s, done.
Resolving deltas: 100% (1951/1951), done.
</code></pre></div></div>
<p>现在你就在项目里的<code class="language-plaintext highlighter-rouge">rack</code>子目录下有了一个 Rack 项目。你可以进入那个子目录,进行变更,加入你自己的远程可写仓库来推送你的变更,从原始仓库拉取和归并等等。如果你在加入子模块后立刻运行<code class="language-plaintext highlighter-rouge">git status</code>,你会看到下面两项:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# new file: .gitmodules
# new file: rack
#
</code></pre></div></div>
<p>首先你注意到有一个<code class="language-plaintext highlighter-rouge">.gitmodules</code>文件。这是一个配置文件,保存了项目 URL 和你拉取到的本地子目录</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cat .gitmodules
[submodule "rack"]
path = rack
url = git://github.com/chneukirchen/rack.git
</code></pre></div></div>
<p>如果你有多个子模块,这个文件里会有多个条目。很重要的一点是这个文件跟其他文件一样也是处于版本控制之下的,就像你的<code class="language-plaintext highlighter-rouge">.gitignore</code>文件一样。它跟项目里的其他文件一样可以被推送和拉取。这是其他克隆此项目的人获知子模块项目来源的途径。</p>
<p><code class="language-plaintext highlighter-rouge">git status</code>的输出里所列的另一项目是 rack 。如果你运行在那上面运行<code class="language-plaintext highlighter-rouge">git diff</code>,会发现一些有趣的东西:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git diff --cached rack
diff --git a/rack b/rack
new file mode 160000
index 0000000..08d709f
--- /dev/null
+++ b/rack
@@ -0,0 +1 @@
+Subproject commit 08d709f78b8c5b0fbeb7821e37fa53e69afcf433
</code></pre></div></div>
<p>尽管<code class="language-plaintext highlighter-rouge">rack</code>是你工作目录里的子目录,但 Git 把它视作一个子模块,当你不在那个目录里时并不记录它的内容。取而代之的是,Git 将它记录成来自那个仓库的一个特殊的提交。当你在那个子目录里修改并提交时,子项目会通知那里的 HEAD 已经发生变更并记录你当前正在工作的那个提交;通过那样的方法,当其他人克隆此项目,他们可以重新创建一致的环境。</p>
<p>这是关于子模块的重要一点:你记录他们当前确切所处的提交。你不能记录一个子模块的<code class="language-plaintext highlighter-rouge">master</code>或者其他的符号引用。</p>
<p>当你提交时,会看到类似下面的:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git commit -m 'first commit with submodule rack'
[master 0550271] first commit with submodule rack
2 files changed, 4 insertions(+), 0 deletions(-)
create mode 100644 .gitmodules
create mode 160000 rack
</code></pre></div></div>
<p>注意 rack 条目的 160000 模式。这在Git中是一个特殊模式,基本意思是你将一个提交记录为一个目录项而不是子目录或者文件。</p>
<p>你可以将<code class="language-plaintext highlighter-rouge">rack</code>目录当作一个独立的项目,保持一个指向子目录的最新提交的指针然后反复地更新上层项目。所有的Git命令都在两个子目录里独立工作:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log -1
commit 0550271328a0038865aad6331e620cd7238601bb
Author: Scott Chacon <schacon@gmail.com>
Date: Thu Apr 9 09:03:56 2009 -0700
first commit with submodule rack
$ cd rack/
$ git log -1
commit 08d709f78b8c5b0fbeb7821e37fa53e69afcf433
Author: Christian Neukirchen <chneukirchen@gmail.com>
Date: Wed Mar 25 14:49:04 2009 +0100
Document version change
</code></pre></div></div>
<h3 id="克隆一个带子模块的项目">克隆一个带子模块的项目</h3>
<p>这里你将克隆一个带子模块的项目。当你接收到这样一个项目,你将得到了包含子项目的目录,但里面没有文件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone git://github.com/schacon/myproject.git
Initialized empty Git repository in /opt/myproject/.git/
remote: Counting objects: 6, done.
remote: Compressing objects: 100% (4/4), done.
remote: Total 6 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (6/6), done.
$ cd myproject
$ ls -l
total 8
-rw-r--r-- 1 schacon admin 3 Apr 9 09:11 README
drwxr-xr-x 2 schacon admin 68 Apr 9 09:11 rack
$ ls rack/
$
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">rack</code>目录存在了,但是是空的。你必须运行两个命令:<code class="language-plaintext highlighter-rouge">git submodule init</code>来初始化你的本地配置文件,<code class="language-plaintext highlighter-rouge">git submodule update</code>来从那个项目拉取所有数据并检出你上层项目里所列的合适的提交:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git submodule init
Submodule 'rack' (git://github.com/chneukirchen/rack.git) registered for path 'rack'
$ git submodule update
Initialized empty Git repository in /opt/myproject/rack/.git/
remote: Counting objects: 3181, done.
remote: Compressing objects: 100% (1534/1534), done.
remote: Total 3181 (delta 1951), reused 2623 (delta 1603)
Receiving objects: 100% (3181/3181), 675.42 KiB | 173 KiB/s, done.
Resolving deltas: 100% (1951/1951), done.
Submodule path 'rack': checked out '08d709f78b8c5b0fbeb7821e37fa53e69afcf433'
</code></pre></div></div>
<p>现在你的<code class="language-plaintext highlighter-rouge">rack</code>子目录就处于你先前提交的确切状态了。如果另外一个开发者变更了 rack 的代码并提交,你拉取那个引用然后归并之,将得到稍有点怪异的东西:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git merge origin/master
Updating 0550271..85a3eee
Fast forward
rack | 2 +-
1 files changed, 1 insertions(+), 1 deletions(-)
[master*]$ git status
# On branch master
# Changed but not updated:
# (use "git add <file>..." to update what will be committed)
# (use "git checkout -- <file>..." to discard changes in working directory)
#
# modified: rack
#
</code></pre></div></div>
<p>你归并来的仅仅上是一个指向你的子模块的指针;但是它并不更新你子模块目录里的代码,所以看起来你的工作目录处于一个临时状态:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git diff
diff --git a/rack b/rack
index 6c5e70b..08d709f 160000
--- a/rack
+++ b/rack
@@ -1 +1 @@
-Subproject commit 6c5e70b984a60b3cecd395edd5b48a7575bf58e0
+Subproject commit 08d709f78b8c5b0fbeb7821e37fa53e69afcf433
</code></pre></div></div>
<p>事情就是这样,因为你所拥有的子模块的指针并对应于子模块目录的真实状态。为了修复这一点,你必须再次运行<code class="language-plaintext highlighter-rouge">git submodule update</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git submodule update
remote: Counting objects: 5, done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 3 (delta 1), reused 2 (delta 0)
Unpacking objects: 100% (3/3), done.
From git@github.com:schacon/rack
08d709f..6c5e70b master -> origin/master
Submodule path 'rack': checked out '6c5e70b984a60b3cecd395edd5b48a7575bf58e0'
</code></pre></div></div>
<p>每次你从主项目中拉取一个子模块的变更都必须这样做。看起来很怪但是管用。</p>
<p>一个常见问题是当开发者对子模块做了一个本地的变更但是并没有推送到公共服务器。然后他们提交了一个指向那个非公开状态的指针然后推送上层项目。当其他开发者试图运行<code class="language-plaintext highlighter-rouge">git submodule update</code>,那个子模块系统会找不到所引用的提交,因为它只存在于第一个开发者的系统中。如果发生那种情况,你会看到类似这样的错误:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git submodule update
fatal: reference isn’t a tree: 6c5e70b984a60b3cecd395edd5b48a7575bf58e0
Unable to checkout '6c5e70b984a60b3cecd395edd5ba7575bf58e0' in submodule path 'rack'
</code></pre></div></div>
<p>你不得不去查看谁最后变更了子模块</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log -1 rack
commit 85a3eee996800fcfa91e2119372dd4172bf76678
Author: Scott Chacon <schacon@gmail.com>
Date: Thu Apr 9 09:19:14 2009 -0700
added a submodule reference I will never make public. hahahahaha!
</code></pre></div></div>
<p>然后,你给那个家伙发电子邮件说他一通。</p>
<h3 id="上层项目">上层项目</h3>
<p>有时候,开发者想按照他们的分组获取一个大项目的子目录的子集。如果你是从 CVS 或者 Subversion 迁移过来的话这个很常见,在那些系统中你已经定义了一个模块或者子目录的集合,而你想延续这种类型的工作流程。</p>
<p>在 Git 中实现这个的一个好办法是你将每一个子目录都做成独立的 Git 仓库,然后创建一个上层项目的 Git 仓库包含多个子模块。这个办法的一个优势是你可以在上层项目中通过标签和分支更为明确地定义项目之间的关系。</p>
<h3 id="子模块的问题">子模块的问题</h3>
<p>使用子模块并非没有任何缺点。首先,你在子模块目录中工作时必须相对小心。当你运行<code class="language-plaintext highlighter-rouge">git submodule update</code>,它会检出项目的指定版本,但是不在分支内。这叫做获得一个分离的头——这意味着 HEAD 文件直接指向一次提交,而不是一个符号引用。问题在于你通常并不想在一个分离的头的环境下工作,因为太容易丢失变更了。如果你先执行了一次<code class="language-plaintext highlighter-rouge">submodule update</code>,然后在那个子模块目录里不创建分支就进行提交,然后再次从上层项目里运行<code class="language-plaintext highlighter-rouge">git submodule update</code>同时不进行提交,Git会毫无提示地覆盖你的变更。技术上讲你不会丢失工作,但是你将失去指向它的分支,因此会很难取到。</p>
<p>为了避免这个问题,当你在子模块目录里工作时应使用<code class="language-plaintext highlighter-rouge">git checkout -b work</code>创建一个分支。当你再次在子模块里更新的时候,它仍然会覆盖你的工作,但是至少你拥有一个可以回溯的指针。</p>
<p>切换带有子模块的分支同样也很有技巧。如果你创建一个新的分支,增加了一个子模块,然后切换回不带该子模块的分支,你仍然会拥有一个未被追踪的子模块的目录</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout -b rack
Switched to a new branch "rack"
$ git submodule add git@github.com:schacon/rack.git rack
Initialized empty Git repository in /opt/myproj/rack/.git/
...
Receiving objects: 100% (3184/3184), 677.42 KiB | 34 KiB/s, done.
Resolving deltas: 100% (1952/1952), done.
$ git commit -am 'added rack submodule'
[rack cc49a69] added rack submodule
2 files changed, 4 insertions(+), 0 deletions(-)
create mode 100644 .gitmodules
create mode 160000 rack
$ git checkout master
Switched to branch "master"
$ git status
# On branch master
# Untracked files:
# (use "git add <file>..." to include in what will be committed)
#
# rack/
</code></pre></div></div>
<p>你将不得不将它移走或者删除,这样的话当你切换回去的时候必须重新克隆它——你可能会丢失你未推送的本地的变更或分支。</p>
<p>最后一个需要引起注意的是关于从子目录切换到子模块的。如果你已经跟踪了你项目中的一些文件但是想把它们移到子模块去,你必须非常小心,否则Git会生你的气。假设你的项目中有一个子目录里放了 rack 的文件,然后你想将它转换为子模块。如果你删除子目录然后运行<code class="language-plaintext highlighter-rouge">submodule add</code>,Git会向你大吼:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ rm -Rf rack/
$ git submodule add git@github.com:schacon/rack.git rack
'rack' already exists in the index
</code></pre></div></div>
<p>你必须先将<code class="language-plaintext highlighter-rouge">rack</code>目录撤回。然后你才能加入子模块:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git rm -r rack
$ git submodule add git@github.com:schacon/rack.git rack
Initialized empty Git repository in /opt/testsub/rack/.git/
remote: Counting objects: 3184, done.
remote: Compressing objects: 100% (1465/1465), done.
remote: Total 3184 (delta 1952), reused 2770 (delta 1675)
Receiving objects: 100% (3184/3184), 677.42 KiB | 88 KiB/s, done.
Resolving deltas: 100% (1952/1952), done.
</code></pre></div></div>
<p>现在假设你在一个分支里那样做了。如果你尝试切换回一个仍然在目录里保留那些文件而不是子模块的分支时——你会得到下面的错误:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout master
error: Untracked working tree file 'rack/AUTHORS' would be overwritten by merge.
</code></pre></div></div>
<p>你必须先移除<code class="language-plaintext highlighter-rouge">rack</code>子模块的目录才能切换到不包含它的分支:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ mv rack /tmp/
$ git checkout master
Switched to branch "master"
$ ls
README rack
</code></pre></div></div>
<p>然后,当你切换回来,你会得到一个空的<code class="language-plaintext highlighter-rouge">rack</code>目录。你可以运行<code class="language-plaintext highlighter-rouge">git submodule update</code>重新克隆,也可以将<code class="language-plaintext highlighter-rouge">/tmp/rack</code>目录重新移回空目录。</p>
<h2 id="子树合并">子树合并</h2>
<p>现在你已经看到了子模块系统的麻烦之处,让我们来看一下解决相同问题的另一途径。当 Git 归并时,它会检查需要归并的内容然后选择一个合适的归并策略。如果你归并的分支是两个,Git使用一个_递归_策略。如果你归并的分支超过两个,Git采用_章鱼_策略。这些策略是自动选择的,因为递归策略可以处理复杂的三路归并情况——比如多于一个共同祖先的——但是它只能处理两个分支的归并。章鱼归并可以处理多个分支但是但必须更加小心以避免冲突带来的麻烦,因此它被选中作为归并两个以上分支的默认策略。</p>
<p>实际上,你也可以选择其他策略。其中的一个就是_子树_归并,你可以用它来处理子项目问题。这里你会看到如何换用子树归并的方法来实现前一节里所做的 rack 的嵌入。</p>
<p>子树归并的思想是你拥有两个工程,其中一个项目映射到另外一个项目的子目录中,反过来也一样。当你指定一个子树归并,Git可以聪明地探知其中一个是另外一个的子树从而实现正确的归并——这相当神奇。</p>
<p>首先你将 Rack 应用加入到项目中。你将 Rack 项目当作你项目中的一个远程引用,然后将它检出到它自身的分支:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git remote add rack_remote git@github.com:schacon/rack.git
$ git fetch rack_remote
warning: no common commits
remote: Counting objects: 3184, done.
remote: Compressing objects: 100% (1465/1465), done.
remote: Total 3184 (delta 1952), reused 2770 (delta 1675)
Receiving objects: 100% (3184/3184), 677.42 KiB | 4 KiB/s, done.
Resolving deltas: 100% (1952/1952), done.
From git@github.com:schacon/rack
* [new branch] build -> rack_remote/build
* [new branch] master -> rack_remote/master
* [new branch] rack-0.4 -> rack_remote/rack-0.4
* [new branch] rack-0.9 -> rack_remote/rack-0.9
$ git checkout -b rack_branch rack_remote/master
Branch rack_branch set up to track remote branch refs/remotes/rack_remote/master.
Switched to a new branch "rack_branch"
</code></pre></div></div>
<p>现在在你的<code class="language-plaintext highlighter-rouge">rack_branch</code>分支中就有了Rack项目的根目录,而你自己的项目在<code class="language-plaintext highlighter-rouge">master</code>分支中。如果你先检出其中一个然后另外一个,你会看到它们有不同的项目根目录:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ ls
AUTHORS KNOWN-ISSUES Rakefile contrib lib
COPYING README bin example test
$ git checkout master
Switched to branch "master"
$ ls
README
</code></pre></div></div>
<p>要将 Rack 项目当作子目录拉取到你的<code class="language-plaintext highlighter-rouge">master</code>项目中。你可以在 Git 中用<code class="language-plaintext highlighter-rouge">git read-tree</code>来实现。你会在第9章学到更多与<code class="language-plaintext highlighter-rouge">read-tree</code>和它的朋友相关的东西,当前你会知道它读取一个分支的根目录树到当前的暂存区和工作目录。你只要切换回你的<code class="language-plaintext highlighter-rouge">master</code>分支,然后拉取<code class="language-plaintext highlighter-rouge">rack</code>分支到你主项目的<code class="language-plaintext highlighter-rouge">master</code>分支的<code class="language-plaintext highlighter-rouge">rack</code>子目录:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git read-tree --prefix=rack/ -u rack_branch
</code></pre></div></div>
<p>当你提交的时候,看起来就像你在那个子目录下拥有Rack的文件——就像你从一个tarball里拷贝的一样。有意思的是你可以比较容易地归并其中一个分支的变更到另外一个。因此,如果 Rack 项目更新了,你可以通过切换到那个分支并执行拉取来获得上游的变更:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout rack_branch
$ git pull
</code></pre></div></div>
<p>然后,你可以将那些变更归并回你的 master 分支。你可以使用<code class="language-plaintext highlighter-rouge">git merge -s subtree</code>,它会工作的很好;但是 Git 同时会把历史归并到一起,这可能不是你想要的。为了拉取变更并预置提交说明,需要在<code class="language-plaintext highlighter-rouge">-s subtree</code>策略选项的同时使用<code class="language-plaintext highlighter-rouge">--squash</code>和<code class="language-plaintext highlighter-rouge">--no-commit</code>选项。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout master
$ git merge --squash -s subtree --no-commit rack_branch
Squash commit -- not updating HEAD
Automatic merge went well; stopped before committing as requested
</code></pre></div></div>
<p>所有 Rack 项目的变更都被归并可以进行本地提交。你也可以做相反的事情——在你主分支的<code class="language-plaintext highlighter-rouge">rack</code>目录里进行变更然后归并回<code class="language-plaintext highlighter-rouge">rack_branch</code>分支,然后将它们提交给维护者或者推送到上游。</p>
<p>为了得到<code class="language-plaintext highlighter-rouge">rack</code>子目录和你<code class="language-plaintext highlighter-rouge">rack_branch</code>分支的区别——以决定你是否需要归并它们——你不能使用一般的<code class="language-plaintext highlighter-rouge">diff</code>命令。而是对你想比较的分支运行<code class="language-plaintext highlighter-rouge">git diff-tree</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git diff-tree -p rack_branch
</code></pre></div></div>
<p>或者,为了比较你的<code class="language-plaintext highlighter-rouge">rack</code>子目录和服务器上你拉取时的<code class="language-plaintext highlighter-rouge">master</code>分支,你可以运行</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git diff-tree -p rack_remote/master
</code></pre></div></div>
<h2 id="总结">总结</h2>
<p>你已经看到了很多高级的工具,允许你更加精确地操控你的提交和暂存区。当你碰到问题时,你应该可以很容易找出是哪个分支什么时候由谁引入了它们。如果你想在项目中使用子项目,你也已经学会了一些方法来满足这些需求。到此,你应该能够完成日常里你需要用命令行在 Git 下做的大部分事情,并且感到比较顺手。</p>
05-分布式Git
2012-10-16T00:00:00+00:00
http://wangdaodao.github.io/2012-10-16/distributed-git
<p>为了便于项目中的所有开发者分享代码,我们准备好了一台服务器存放远程 Git 仓库。经过前面几章的学习,我们已经学会了一些基本的本地工作流程中所需用到的命令。接下来,我们要学习下如何利用 Git 来组织和完成分布式工作流程。</p>
<p>特别是,当作为项目贡献者时,我们该怎么做才能方便维护者采纳更新;或者作为项目维护者时,又该怎样有效管理大量贡献者的提交。</p>
<h2 id="分布式工作流程">分布式工作流程</h2>
<p>同传统的集中式版本控制系统(CVCS)不同,开发者之间的协作方式因着 Git 的分布式特性而变得更为灵活多样。在集中式系统上,每个开发者就像是连接在集线器上的节点,彼此的工作方式大体相像。而在 Git 网络中,每个开发者同时扮演着节点和集线器的角色,这就是说,每一个开发者都可以将自己的代码贡献到另外一个开发者的仓库中,或者建立自己的公共仓库,让其他开发者基于自己的工作开始,为自己的仓库贡献代码。于是,Git 的分布式协作便可以衍生出种种不同的工作流程,我会在接下来的章节介绍几种常见的应用方式,并分别讨论各自的优缺点。你可以选择其中的一种,或者结合起来,应用到你自己的项目中。</p>
<h3 id="集中式工作流">集中式工作流</h3>
<p>通常,集中式工作流程使用的都是单点协作模型。一个存放代码仓库的中心服务器,可以接受所有开发者提交的代码。所有的开发者都是普通的节点,作为中心集线器的消费者,平时的工作就是和中心仓库同步数据(见图 5-1)。</p>
<p><a href="/uploads/2012/09/18333fig05010-tn.png"><img src="/uploads/2012/09/18333fig0501-tn.png" alt="图 5-1" /></a>
图 5-1. 集中式工作流</p>
<p>如果两个开发者从中心仓库克隆代码下来,同时作了一些修订,那么只有第一个开发者可以顺利地把数据推送到共享服务器。第二个开发者在提交他的修订之前,必须先下载合并服务器上的数据,解决冲突之后才能推送数据到共享服务器上。在 Git 中这么用也决无问题,这就好比是在用 Subversion(或其他 CVCS)一样,可以很好地工作。</p>
<p>如果你的团队不是很大,或者大家都已经习惯了使用集中式工作流程,完全可以采用这种简单的模式。只需要配置好一台中心服务器,并给每个人推送数据的权限,就可以开展工作了。但如果提交代码时有冲突, Git 根本就不会让用户覆盖他人代码,它直接驳回第二个人的提交操作。这就等于告诉提交者,你所作的修订无法通过快近(fast-forward)来合并,你必须先拉取最新数据下来,手工解决冲突合并后,才能继续推送新的提交。绝大多数人都熟悉和了解这种模式的工作方式,所以使用也非常广泛。</p>
<h3 id="集成管理员工作流">集成管理员工作流</h3>
<p>由于 Git 允许使用多个远程仓库,开发者便可以建立自己的公共仓库,往里面写数据并共享给他人,而同时又可以从别人的仓库中提取他们的更新过来。这种情形通常都会有个代表着官方发布的项目仓库(blessed repository),开发者们由此仓库克隆出一个自己的公共仓库(developer public),然后将自己的提交推送上去,请求官方仓库的维护者拉取更新合并到主项目。维护者在自己的本地也有个克隆仓库(integration manager),他可以将你的公共仓库作为远程仓库添加进来,经过测试无误后合并到主干分支,然后再推送到官方仓库。工作流程看起来就像图 5-2 所示:</p>
<ol>
<li>项目维护者可以推送数据到公共仓库 blessed repository。</li>
<li>贡献者克隆此仓库,修订或编写新代码。</li>
<li>贡献者推送数据到自己的公共仓库 developer public。</li>
<li>贡献者给维护者发送邮件,请求拉取自己的最新修订。</li>
<li>维护者在自己本地的 integration manger 仓库中,将贡献者的仓库加为远程仓库,合并更新并做测试。</li>
<li>维护者将合并后的更新推送到主仓库 blessed repository。</li>
</ol>
<p><a href="/uploads/2012/09/18333fig0502-tn.png"><img src="/uploads/2012/09/18333fig0502-tn.png" alt="图 5-2" /></a>
图 5-2. 集成管理员工作流</p>
<p>在 GitHub 网站上使用得最多的就是这种工作流。人们可以复制(fork 亦即克隆)某个项目到自己的列表中,成为自己的公共仓库。随后将自己的更新提交到这个仓库,所有人都可以看到你的每次更新。这么做最主要的优点在于,你可以按照自己的节奏继续工作,而不必等待维护者处理你提交的更新;而维护者也可以按照自己的节奏,任何时候都可以过来处理接纳你的贡献。</p>
<h3 id="司令官与副官工作流">司令官与副官工作流</h3>
<p>这其实是上一种工作流的变体。一般超大型的项目才会用到这样的工作方式,像是拥有数百协作开发者的 Linux 内核项目就是如此。各个集成管理员分别负责集成项目中的特定部分,所以称为副官(lieutenant)。而所有这些集成管理员头上还有一位负责统筹的总集成管理员,称为司令官(dictator)。司令官维护的仓库用于提供所有协作者拉取最新集成的项目代码。整个流程看起来如图 5-3 所示:</p>
<ol>
<li>一般的开发者在自己的特性分支上工作,并不定期地根据主干分支(dictator 上的 master)衍合。</li>
<li>副官(lieutenant)将普通开发者的特性分支合并到自己的 master 分支中。</li>
<li>司令官(dictator)将所有副官的 master 分支并入自己的 master 分支。</li>
<li>司令官(dictator)将集成后的 master 分支推送到共享仓库 blessed repository 中,以便所有其他开发者以此为基础进行衍合。</li>
</ol>
<p><a href="/uploads/2012/09/18333fig0503-tn.png"><img src="/uploads/2012/09/18333fig0503-tn.png" alt="图 5-3" /></a>
图 5-3. 司令官与副官工作流</p>
<p>这种工作流程并不常用,只有当项目极为庞杂,或者需要多级别管理时,才会体现出优势。利用这种方式,项目总负责人(即司令官)可以把大量分散的集成工作委托给不同的小组负责人分别处理,最后再统筹起来,如此各人的职责清晰明确,也不易出错(译注:此乃分而治之)。</p>
<p>以上介绍的是常见的分布式系统可以应用的工作流程,当然不止于 Git。在实际的开发工作中,你可能会遇到各种为了满足特定需求而有所变化的工作方式。我想现在你应该已经清楚,接下来自己需要用哪种方式开展工作了。下节我还会再举些例子,看看各式工作流中的每个角色具体应该如何操作。</p>
<h2 id="为项目作贡献">为项目作贡献</h2>
<p>接下来,我们来学习一下作为项目贡献者,会有哪些常见的工作模式。</p>
<p>不过要说清楚整个协作过程真的很难,Git 如此灵活,人们的协作方式便可以各式各样,没有固定不变的范式可循,而每个项目的具体情况又多少会有些不同,比如说参与者的规模,所选择的工作流程,每个人的提交权限,以及 Git 以外贡献等等,都会影响到具体操作的细节。</p>
<p>首当其冲的是参与者规模。项目中有多少开发者是经常提交代码的?经常又是多久呢?大多数两至三人的小团队,一天大约只有几次提交,如果不是什么热门项目的话就更少了。可要是在大公司里,或者大项目中,参与者可以多到上千,每天都会有十几个上百个补丁提交上来。这种差异带来的影响是显著的,越是多的人参与进来,就越难保证每次合并正确无误。你正在工作的代码,可能会因为合并进来其他人的更新而变得过时,甚至受创无法运行。而已经提交上去的更新,也可能在等着审核合并的过程中变得过时。那么,我们该怎样做才能确保代码是最新的,提交的补丁也是可用的呢?</p>
<p>接下来便是项目所采用的工作流。是集中式的,每个开发者都具有等同的写权限?项目是否有专人负责检查所有补丁?是不是所有补丁都做过同行复阅(peer-review)再通过审核的?你是否参与审核过程?如果使用副官系统,那你是不是限定于只能向此副官提交?</p>
<p>还有你的提交权限。有或没有向主项目提交更新的权限,结果完全不同,直接决定最终采用怎样的工作流。如果不能直接提交更新,那该如何贡献自己的代码呢?是不是该有个什么策略?你每次贡献代码会有多少量?提交频率呢?</p>
<p>所有以上这些问题都会或多或少影响到最终采用的工作流。接下来,我会在一系列由简入繁的具体用例中,逐一阐述。此后在实践时,应该可以借鉴这里的例子,略作调整,以满足实际需要构建自己的工作流。</p>
<h3 id="提交指南">提交指南</h3>
<p>开始分析特定用例之前,先来了解下如何撰写提交说明。一份好的提交指南可以帮助协作者更轻松更有效地配合。Git 项目本身就提供了一份文档(Git 项目源代码目录中 <code class="language-plaintext highlighter-rouge">Documentation/SubmittingPatches</code>),列数了大量提示,从如何编撰提交说明到提交补丁,不一而足。</p>
<p>首先,请不要在更新中提交多余的白字符(whitespace)。Git 有种检查此类问题的方法,在提交之前,先运行 <code class="language-plaintext highlighter-rouge">git diff --check</code>,会把可能的多余白字符修正列出来。下面的示例,我已经把终端中显示为红色的白字符用 <code class="language-plaintext highlighter-rouge">X</code> 替换掉:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git diff --check
lib/simplegit.rb:5: trailing whitespace.
+ @git_dir = File.expand_path(git_dir)XX
lib/simplegit.rb:7: trailing whitespace.
+ XXXXXXXXXXX
lib/simplegit.rb:26: trailing whitespace.
+ def command(git_cmd)XXXX
</code></pre></div></div>
<p>这样在提交之前你就可以看到这类问题,及时解决以免困扰其他开发者。</p>
<p>接下来,请将每次提交限定于完成一次逻辑功能。并且可能的话,适当地分解为多次小更新,以便每次小型提交都更易于理解。请不要在周末穷追猛打一次性解决五个问题,而最后拖到周一再提交。就算是这样也请尽可能利用暂存区域,将之前的改动分解为每次修复一个问题,再分别提交和加注说明。如果针对两个问题改动的是同一个文件,可以试试看 <code class="language-plaintext highlighter-rouge">git add --patch</code> 的方式将部分内容置入暂存区域(我们会在第六章再详细介绍)。无论是五次小提交还是混杂在一起的大提交,最终分支末端的项目快照应该还是一样的,但分解开来之后,更便于其他开发者复阅。这么做也方便自己将来取消某个特定问题的修复。我们将在第六章介绍一些重写提交历史,同暂存区域交互的技巧和工具,以便最终得到一个干净有意义,且易于理解的提交历史。</p>
<p>最后需要谨记的是提交说明的撰写。写得好可以让大家协作起来更轻松。一般来说,提交说明最好限制在一行以内,50 个字符以下,简明扼要地描述更新内容,空开一行后,再展开详细注解。Git 项目本身需要开发者撰写详尽注解,包括本次修订的因由,以及前后不同实现之间的比较,我们也该借鉴这种做法。另外,提交说明应该用祈使现在式语态,比如,不要说成 “I added tests for” 或 “Adding tests for” 而应该用 “Add tests for”。下面是来自 tpope.net 的 Tim Pope 原创的提交说明格式模版,供参考:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>本次更新的简要描述(50 个字符以内)
如果必要,此处展开详尽阐述。段落宽度限定在 72 个字符以内。
某些情况下,第一行的简要描述将用作邮件标题,其余部分作为邮件正文。
其间的空行是必要的,以区分两者(当然没有正文另当别论)。
如果并在一起,rebase 这样的工具就可能会迷惑。
另起空行后,再进一步补充其他说明。
- 可以使用这样的条目列举式。
- 一般以单个空格紧跟短划线或者星号作为每项条目的起始符。每个条目间用一空行隔开。
不过这里按自己项目的约定,可以略作变化。
</code></pre></div></div>
<p>如果你的提交说明都用这样的格式来书写,好多事情就可以变得十分简单。Git 项目本身就是这样要求的,我强烈建议你到 Git 项目仓库下运行 <code class="language-plaintext highlighter-rouge">git log --no-merges</code> 看看,所有提交历史的说明是怎样撰写的。(译注:如果现在还没有克隆 git 项目源代码,是时候 <code class="language-plaintext highlighter-rouge">git clone git://git.kernel.org/pub/scm/git/git.git</code> 了。)</p>
<p>为简单起见,在接下来的例子(及本书随后的所有演示)中,我都不会用这种格式,而使用 <code class="language-plaintext highlighter-rouge">-m</code> 选项提交 <code class="language-plaintext highlighter-rouge">git commit</code>。不过请还是按照我之前讲的做,别学我这里偷懒的方式。</p>
<h3 id="私有的小型团队">私有的小型团队</h3>
<p>我们从最简单的情况开始,一个私有项目,与你一起协作的还有另外一到两位开发者。这里说私有,是指源代码不公开,其他人无法访问项目仓库。而你和其他开发者则都具有推送数据到仓库的权限。</p>
<p>这种情况下,你们可以用 Subversion 或其他集中式版本控制系统类似的工作流来协作。你仍然可以得到 Git 带来的其他好处:离线提交,快速分支与合并等等,但工作流程还是差不多的。主要区别在于,合并操作发生在客户端而非服务器上。让我们来看看,两个开发者一起使用同一个共享仓库,会发生些什么。第一个人,John,克隆了仓库,作了些更新,在本地提交。(下面的例子中省略了常规提示,用 <code class="language-plaintext highlighter-rouge">...</code> 代替以节约版面。)</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># John's Machine
$ git clone john@githost:simplegit.git
Initialized empty Git repository in /home/john/simplegit/.git/
...
$ cd simplegit/
$ vim lib/simplegit.rb
$ git commit -am 'removed invalid default value'
[master 738ee87] removed invalid default value
1 files changed, 1 insertions(+), 1 deletions(-)
</code></pre></div></div>
<p>第二个开发者,Jessica,一样这么做:克隆仓库,提交更新:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># Jessica's Machine
$ git clone jessica@githost:simplegit.git
Initialized empty Git repository in /home/jessica/simplegit/.git/
...
$ cd simplegit/
$ vim TODO
$ git commit -am 'add reset task'
[master fbff5bc] add reset task
1 files changed, 1 insertions(+), 0 deletions(-)
</code></pre></div></div>
<p>现在,Jessica 将她的工作推送到服务器上:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># Jessica's Machine
$ git push origin master
...
To jessica@githost:simplegit.git
1edee6b..fbff5bc master -> master
</code></pre></div></div>
<p>John 也尝试推送自己的工作上去:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># John's Machine
$ git push origin master
To john@githost:simplegit.git
! [rejected] master -> master (non-fast forward)
error: failed to push some refs to 'john@githost:simplegit.git'
</code></pre></div></div>
<p>John 的推送操作被驳回,因为 Jessica 已经推送了新的数据上去。请注意,特别是你用惯了 Subversion 的话,这里其实修改的是两个文件,而不是同一个文件的同一个地方。Subversion 会在服务器端自动合并提交上来的更新,而 Git 则必须先在本地合并后才能推送。于是,John 不得不先把 Jessica 的更新拉下来:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git fetch origin
...
From john@githost:simplegit
+ 049d078...fbff5bc master -> origin/master
</code></pre></div></div>
<p>此刻,John 的本地仓库如图 5-4 所示:</p>
<p><a href="/uploads/2012/09/18333fig0504-tn.png"><img src="/uploads/2012/09/18333fig0504-tn.png" alt="图 5-4" /></a>
图 5-4. John 的仓库历史</p>
<p>虽然 John 下载了 Jessica 推送到服务器的最近更新(fbff5),但目前只是 <code class="language-plaintext highlighter-rouge">origin/master</code> 指针指向它,而当前的本地分支 <code class="language-plaintext highlighter-rouge">master</code> 仍然指向自己的更新(738ee),所以需要先把她的提交合并过来,才能继续推送数据:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git merge origin/master
Merge made by recursive.
TODO | 1 +
1 files changed, 1 insertions(+), 0 deletions(-)
</code></pre></div></div>
<p>还好,合并过程非常顺利,没有冲突,现在 John 的提交历史如图 5-5 所示:</p>
<p><a href="/uploads/2012/09/18333fig0505-tn.png"><img src="/uploads/2012/09/18333fig0505-tn.png" alt="图 5-5" /></a>
图 5-5. 合并 origin/master 后 John 的仓库历史</p>
<p>现在,John 应该再测试一下代码是否仍然正常工作,然后将合并结果(72bbc)推送到服务器上:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git push origin master
...
To john@githost:simplegit.git
fbff5bc..72bbc59 master -> master
</code></pre></div></div>
<p>最终,John 的提交历史变为图 5-6 所示:</p>
<p><a href="/uploads/2012/09/18333fig0506-tn.png"><img src="/uploads/2012/09/18333fig0506-tn.png" alt="图 5-6" /></a>
图 5-6. 推送后 John 的仓库历史</p>
<p>而在这段时间,Jessica 已经开始在另一个特性分支工作了。她创建了 <code class="language-plaintext highlighter-rouge">issue54</code> 并提交了三次更新。她还没有下载 John 提交的合并结果,所以提交历史如图 5-7 所示:</p>
<p><a href="/uploads/2012/09/18333fig0507-tn.png"><img src="/uploads/2012/09/18333fig0507-tn.png" alt="图 5-7" /></a>
图 5-7. Jessica 的提交历史</p>
<p>Jessica 想要先和服务器上的数据同步,所以先下载数据:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># Jessica's Machine
$ git fetch origin
...
From jessica@githost:simplegit
fbff5bc..72bbc59 master -> origin/master
</code></pre></div></div>
<p>于是 Jessica 的本地仓库历史多出了 John 的两次提交(738ee 和 72bbc),如图 5-8 所示:</p>
<p><a href="/uploads/2012/09/18333fig0508-tn.png"><img src="/uploads/2012/09/18333fig0508-tn.png" alt="图 5-8" /></a>
图 5-8. 获取 John 的更新之后 Jessica 的提交历史</p>
<p>此时,Jessica 在特性分支上的工作已经完成,但她想在推送数据之前,先确认下要并进来的数据究竟是什么,于是运行 <code class="language-plaintext highlighter-rouge">git log</code> 查看:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log --no-merges origin/master ^issue54
commit 738ee872852dfaa9d6634e0dea7a324040193016
Author: John Smith <jsmith@example.com>
Date: Fri May 29 16:01:27 2009 -0700
removed invalid default value
</code></pre></div></div>
<p>现在,Jessica 可以将特性分支上的工作并到 <code class="language-plaintext highlighter-rouge">master</code> 分支,然后再并入 John 的工作(<code class="language-plaintext highlighter-rouge">origin/master</code>)到自己的 <code class="language-plaintext highlighter-rouge">master</code> 分支,最后再推送回服务器。当然,得先切回主分支才能集成所有数据:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout master
Switched to branch "master"
Your branch is behind 'origin/master' by 2 commits, and can be fast-forwarded.
</code></pre></div></div>
<p>要合并 <code class="language-plaintext highlighter-rouge">origin/master</code> 或 <code class="language-plaintext highlighter-rouge">issue54</code> 分支,谁先谁后都没有关系,因为它们都在上游(upstream)(译注:想像分叉的更新像是汇流成河的源头,所以上游 upstream 是指最新的提交),所以无所谓先后顺序,最终合并后的内容快照都是一样的,而仅是提交历史看起来会有些先后差别。Jessica 选择先合并 <code class="language-plaintext highlighter-rouge">issue54</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git merge issue54
Updating fbff5bc..4af4298
Fast forward
README | 1 +
lib/simplegit.rb | 6 +++++-
2 files changed, 6 insertions(+), 1 deletions(-)
</code></pre></div></div>
<p>正如所见,没有冲突发生,仅是一次简单快进。现在 Jessica 开始合并 John 的工作(<code class="language-plaintext highlighter-rouge">origin/master</code>):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git merge origin/master
Auto-merging lib/simplegit.rb
Merge made by recursive.
lib/simplegit.rb | 2 +-
1 files changed, 1 insertions(+), 1 deletions(-)
</code></pre></div></div>
<p>所有的合并都非常干净。现在 Jessica 的提交历史如图 5-9 所示:</p>
<p><a href="/uploads/2012/09/18333fig0509-tn.png"><img src="/uploads/2012/09/18333fig0509-tn.png" alt="图 5-9" /></a>
图 5-9. 合并 John 的更新后 Jessica 的提交历史</p>
<p>现在 Jessica 已经可以在自己的 <code class="language-plaintext highlighter-rouge">master</code> 分支中访问 <code class="language-plaintext highlighter-rouge">origin/master</code> 的最新改动了,所以她应该可以成功推送最后的合并结果到服务器上(假设 John 此时没再推送新数据上来):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git push origin master
...
To jessica@githost:simplegit.git
72bbc59..8059c15 master -> master
</code></pre></div></div>
<p>至此,每个开发者都提交了若干次,且成功合并了对方的工作成果,最新的提交历史如图 5-10 所示:</p>
<p><a href="/uploads/2012/09/18333fig0510-tn.png"><img src="/uploads/2012/09/18333fig0510-tn.png" alt="图 5-10" /></a>
图 5-10. Jessica 推送数据后的提交历史</p>
<p>以上就是最简单的协作方式之一:先在自己的特性分支中工作一段时间,完成后合并到自己的 <code class="language-plaintext highlighter-rouge">master</code> 分支;然后下载合并 <code class="language-plaintext highlighter-rouge">origin/master</code> 上的更新(如果有的话),再推回远程服务器。一般的协作流程如图 5-11 所示:</p>
<p><a href="/uploads/2012/09/18333fig0511-tn.png"><img src="/uploads/2012/09/18333fig0511-tn.png" alt="图 5-11" /></a>
图 5-11. 多用户共享仓库协作方式的一般工作流程时序</p>
<h3 id="私有团队间协作">私有团队间协作</h3>
<p>现在我们来看更大一点规模的私有团队协作。如果有几个小组分头负责若干特性的开发和集成,那他们之间的协作过程是怎样的。</p>
<p>假设 John 和 Jessica 一起负责开发某项特性 A,而同时 Jessica 和 Josie 一起负责开发另一项功能 B。公司使用典型的集成管理员式工作流,每个组都有一名管理员负责集成本组代码,及更新项目主仓库的 <code class="language-plaintext highlighter-rouge">master</code> 分支。所有开发都在代表小组的分支上进行。</p>
<p>让我们跟随 Jessica 的视角看看她的工作流程。她参与开发两项特性,同时和不同小组的开发者一起协作。克隆生成本地仓库后,她打算先着手开发特性 A。于是创建了新的 <code class="language-plaintext highlighter-rouge">featureA</code> 分支,继而编写代码:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># Jessica's Machine
$ git checkout -b featureA
Switched to a new branch "featureA"
$ vim lib/simplegit.rb
$ git commit -am 'add limit to log function'
[featureA 3300904] add limit to log function
1 files changed, 1 insertions(+), 1 deletions(-)
</code></pre></div></div>
<p>此刻,她需要分享目前的进展给 John,于是她将自己的 <code class="language-plaintext highlighter-rouge">featureA</code> 分支提交到服务器。由于 Jessica 没有权限推送数据到主仓库的 <code class="language-plaintext highlighter-rouge">master</code> 分支(只有集成管理员有此权限),所以只能将此分支推上去同 John 共享协作:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git push origin featureA
...
To jessica@githost:simplegit.git
* [new branch] featureA -> featureA
</code></pre></div></div>
<p>Jessica 发邮件给 John 让他上来看看 <code class="language-plaintext highlighter-rouge">featureA</code> 分支上的进展。在等待他的反馈之前,Jessica 决定继续工作,和 Josie 一起开发 <code class="language-plaintext highlighter-rouge">featureB</code> 上的特性 B。当然,先创建此分支,分叉点以服务器上的 <code class="language-plaintext highlighter-rouge">master</code> 为起点:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># Jessica's Machine
$ git fetch origin
$ git checkout -b featureB origin/master
Switched to a new branch "featureB"
</code></pre></div></div>
<p>随后,Jessica 在 <code class="language-plaintext highlighter-rouge">featureB</code> 上提交了若干更新:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ vim lib/simplegit.rb
$ git commit -am 'made the ls-tree function recursive'
[featureB e5b0fdc] made the ls-tree function recursive
1 files changed, 1 insertions(+), 1 deletions(-)
$ vim lib/simplegit.rb
$ git commit -am 'add ls-files'
[featureB 8512791] add ls-files
1 files changed, 5 insertions(+), 0 deletions(-)
</code></pre></div></div>
<p>现在 Jessica 的更新历史如图 5-12 所示:</p>
<p><a href="/uploads/2012/09/18333fig0512-tn.png"><img src="/uploads/2012/09/18333fig0512-tn.png" alt="图 5-12" /></a>
图 5-12. Jessica 的更新历史</p>
<p>Jessica 正准备推送自己的进展上去,却收到 Josie 的来信,说是她已经将自己的工作推到服务器上的 <code class="language-plaintext highlighter-rouge">featureBee</code> 分支了。这样,Jessica 就必须先将 Josie 的代码合并到自己本地分支中,才能再一起推送回服务器。她用 <code class="language-plaintext highlighter-rouge">git fetch</code> 下载 Josie 的最新代码:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git fetch origin
...
From jessica@githost:simplegit
* [new branch] featureBee -> origin/featureBee
</code></pre></div></div>
<p>然后 Jessica 使用 <code class="language-plaintext highlighter-rouge">git merge</code> 将此分支合并到自己分支中:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git merge origin/featureBee
Auto-merging lib/simplegit.rb
Merge made by recursive.
lib/simplegit.rb | 4 ++++
1 files changed, 4 insertions(+), 0 deletions(-)
</code></pre></div></div>
<p>合并很顺利,但另外有个小问题:她要推送自己的 <code class="language-plaintext highlighter-rouge">featureB</code> 分支到服务器上的 <code class="language-plaintext highlighter-rouge">featureBee</code> 分支上去。当然,她可以使用冒号(:)格式指定目标分支:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git push origin featureB:featureBee
...
To jessica@githost:simplegit.git
fba9af8..cd685d1 featureB -> featureBee
</code></pre></div></div>
<p>我们称此为_refspec_。更多有关于 Git refspec 的讨论和使用方式会在第九章作详细阐述。</p>
<p>接下来,John 发邮件给 Jessica 告诉她,他看了之后作了些修改,已经推回服务器 <code class="language-plaintext highlighter-rouge">featureA</code> 分支,请她过目下。于是 Jessica 运行 <code class="language-plaintext highlighter-rouge">git fetch</code> 下载最新数据:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git fetch origin
...
From jessica@githost:simplegit
3300904..aad881d featureA -> origin/featureA
</code></pre></div></div>
<p>接下来便可以用 <code class="language-plaintext highlighter-rouge">git log</code> 查看更新了些什么:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log origin/featureA ^featureA
commit aad881d154acdaeb2b6b18ea0e827ed8a6d671e6
Author: John Smith <jsmith@example.com>
Date: Fri May 29 19:57:33 2009 -0700
changed log output to 30 from 25
</code></pre></div></div>
<p>最后,她将 John 的工作合并到自己的 <code class="language-plaintext highlighter-rouge">featureA</code> 分支中:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout featureA
Switched to branch "featureA"
$ git merge origin/featureA
Updating 3300904..aad881d
Fast forward
lib/simplegit.rb | 10 +++++++++-
1 files changed, 9 insertions(+), 1 deletions(-)
</code></pre></div></div>
<p>Jessica 稍做一番修整后同步到服务器:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git commit -am 'small tweak'
[featureA ed774b3] small tweak
1 files changed, 1 insertions(+), 1 deletions(-)
$ git push origin featureA
...
To jessica@githost:simplegit.git
3300904..ed774b3 featureA -> featureA
</code></pre></div></div>
<p>现在的 Jessica 提交历史如图 5-13 所示:</p>
<p><a href="/uploads/2012/09/18333fig0513-tn.png"><img src="/uploads/2012/09/18333fig0513-tn.png" alt="图 5-13" /></a>
图 5-13. 在特性分支中提交更新后的提交历史</p>
<p>现在,Jessica,Josie 和 John 通知集成管理员服务器上的 <code class="language-plaintext highlighter-rouge">featureA</code> 及 <code class="language-plaintext highlighter-rouge">featureBee</code> 分支已经准备好,可以并入主线了。在管理员完成集成工作后,主分支上便多出一个新的合并提交(5399e),用 fetch 命令更新到本地后,提交历史如图 5-14 所示:</p>
<p><a href="/uploads/2012/09/18333fig0514-tn.png"><img src="/uploads/2012/09/18333fig0514-tn.png" alt="图 5-14" /></a>
图 5-14. 合并特性分支后的 Jessica 提交历史</p>
<p>许多开发小组改用 Git 就是因为它允许多个小组间并行工作,而在稍后恰当时机再行合并。通过共享远程分支的方式,无需干扰整体项目代码便可以开展工作,因此使用 Git 的小型团队间协作可以变得非常灵活自由。以上工作流程的时序如图 5-15 所示:</p>
<p><a href="/uploads/2012/09/18333fig0515-tn.png"><img src="/uploads/2012/09/18333fig0515-tn.png" alt="图 5-15" /></a>
图 5-15. 团队间协作工作流程基本时序</p>
<h3 id="公开的小型项目">公开的小型项目</h3>
<p>上面说的是私有项目协作,但要给公开项目作贡献,情况就有些不同了。因为你没有直接更新主仓库分支的权限,得寻求其它方式把工作成果交给项目维护人。下面会介绍两种方法,第一种使用 git 托管服务商提供的仓库复制功能,一般称作 fork,比如 repo.or.cz 和 GitHub 都支持这样的操作,而且许多项目管理员都希望大家使用这样的方式。另一种方法是通过电子邮件寄送文件补丁。</p>
<p>但不管哪种方式,起先我们总需要克隆原始仓库,而后创建特性分支开展工作。基本工作流程如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone (url)
$ cd project
$ git checkout -b featureA
$ (work)
$ git commit
$ (work)
$ git commit
</code></pre></div></div>
<p>你可能想到用 <code class="language-plaintext highlighter-rouge">rebase -i</code> 将所有更新先变作单个提交,又或者想重新安排提交之间的差异补丁,以方便项目维护者审阅 – 有关交互式衍合操作的细节见第六章。</p>
<p>在完成了特性分支开发,提交给项目维护者之前,先到原始项目的页面上点击“Fork”按钮,创建一个自己可写的公共仓库(译注:即下面的 url 部分,参照后续的例子,应该是 <code class="language-plaintext highlighter-rouge">git://githost/simplegit.git</code>)。然后将此仓库添加为本地的第二个远端仓库,姑且称为 <code class="language-plaintext highlighter-rouge">myfork</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git remote add myfork (url)
</code></pre></div></div>
<p>你需要将本地更新推送到这个仓库。要是将远端 master 合并到本地再推回去,还不如把整个特性分支推上去来得干脆直接。而且,假若项目维护者未采纳你的贡献的话(不管是直接合并还是 cherry pick),都不用回退(rewind)自己的 master 分支。但若维护者合并或 cherry-pick 了你的工作,最后总还可以从他们的更新中同步这些代码。好吧,现在先把 featureA 分支整个推上去:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git push myfork featureA
</code></pre></div></div>
<p>然后通知项目管理员,让他来抓取你的代码。通常我们把这件事叫做 pull request。可以直接用 GitHub 等网站提供的 “pull request” 按钮自动发送请求通知;或手工把 <code class="language-plaintext highlighter-rouge">git request-pull</code> 命令输出结果电邮给项目管理员。</p>
<p><code class="language-plaintext highlighter-rouge">request-pull</code> 命令接受两个参数,第一个是本地特性分支开始前的原始分支,第二个是请求对方来抓取的 Git 仓库 URL(译注:即下面 <code class="language-plaintext highlighter-rouge">myfork</code> 所指的,自己可写的公共仓库)。比如现在Jessica 准备要给 John 发一个 pull requst,她之前在自己的特性分支上提交了两次更新,并把分支整个推到了服务器上,所以运行该命令会看到:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git request-pull origin/master myfork
The following changes since commit 1edee6b1d61823a2de3b09c160d7080b8d1b3a40:
John Smith (1):
added a new function
are available in the git repository at:
git://githost/simplegit.git featureA
Jessica Smith (2):
add limit to log function
change log output to 30 from 25
lib/simplegit.rb | 10 +++++++++-
1 files changed, 9 insertions(+), 1 deletions(-)
</code></pre></div></div>
<p>输出的内容可以直接发邮件给管理者,他们就会明白这是从哪次提交开始旁支出去的,该到哪里去抓取新的代码,以及新的代码增加了哪些功能等等。</p>
<p>像这样随时保持自己的 <code class="language-plaintext highlighter-rouge">master</code> 分支和官方 <code class="language-plaintext highlighter-rouge">origin/master</code> 同步,并将自己的工作限制在特性分支上的做法,既方便又灵活,采纳和丢弃都轻而易举。就算原始主干发生变化,我们也能重新衍合提供新的补丁。比如现在要开始第二项特性的开发,不要在原来已推送的特性分支上继续,还是按原始 <code class="language-plaintext highlighter-rouge">master</code> 开始:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout -b featureB origin/master
$ (work)
$ git commit
$ git push myfork featureB
$ (email maintainer)
$ git fetch origin
</code></pre></div></div>
<p>现在,A、B 两个特性分支各不相扰,如同竹筒里的两颗豆子,队列中的两个补丁,你随时都可以分别从头写过,或者衍合,或者修改,而不用担心特性代码的交叉混杂。如图 5-16 所示:</p>
<p><a href="/uploads/2012/09/18333fig0516-tn.png"><img src="/uploads/2012/09/18333fig0516-tn.png" alt="图 5-16" /></a>
图 5-16. featureB 以后的提交历史</p>
<p>假设项目管理员接纳了许多别人提交的补丁后,准备要采纳你提交的第一个分支,却发现因为代码基准不一致,合并工作无法正确干净地完成。这就需要你再次衍合到最新的 <code class="language-plaintext highlighter-rouge">origin/master</code>,解决相关冲突,然后重新提交你的修改:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout featureA
$ git rebase origin/master
$ git push -f myfork featureA
</code></pre></div></div>
<p>自然,这会重写提交历史,如图 5-17 所示:</p>
<p><a href="/uploads/2012/09/18333fig0517-tn.png"><img src="/uploads/2012/09/18333fig0517-tn.png" alt="图 5-17" /></a>
图 5-17. featureA 重新衍合后的提交历史</p>
<p>注意,此时推送分支必须使用 <code class="language-plaintext highlighter-rouge">-f</code> 选项(译注:表示 force,不作检查强制重写)替换远程已有的 <code class="language-plaintext highlighter-rouge">featureA</code> 分支,因为新的 commit 并非原来的后续更新。当然你也可以直接推送到另一个新的分支上去,比如称作 <code class="language-plaintext highlighter-rouge">featureAv2</code>。</p>
<p>再考虑另一种情形:管理员看过第二个分支后觉得思路新颖,但想请你改下具体实现。我们只需以当前 <code class="language-plaintext highlighter-rouge">origin/master</code> 分支为基准,开始一个新的特性分支 <code class="language-plaintext highlighter-rouge">featureBv2</code>,然后把原来的 <code class="language-plaintext highlighter-rouge">featureB</code> 的更新拿过来,解决冲突,按要求重新实现部分代码,然后将此特性分支推送上去:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout -b featureBv2 origin/master
$ git merge --no-commit --squash featureB
$ (change implementation)
$ git commit
$ git push myfork featureBv2
</code></pre></div></div>
<p>这里的 <code class="language-plaintext highlighter-rouge">--squash</code> 选项将目标分支上的所有更改全拿来应用到当前分支上,而 <code class="language-plaintext highlighter-rouge">--no-commit</code> 选项告诉 Git 此时无需自动生成和记录(合并)提交。这样,你就可以在原来代码基础上,继续工作,直到最后一起提交。</p>
<p>好了,现在可以请管理员抓取 <code class="language-plaintext highlighter-rouge">featureBv2</code> 上的最新代码了,如图 5-18 所示:</p>
<p><a href="/uploads/2012/09/18333fig0518-tn.png"><img src="/uploads/2012/09/18333fig0518-tn.png" alt="图 5-18" /></a>
图 5-18. featureBv2 之后的提交历史</p>
<h3 id="公开的大型项目">公开的大型项目</h3>
<p>许多大型项目都会立有一套自己的接受补丁流程,你应该注意下其中细节。但多数项目都允许通过开发者邮件列表接受补丁,现在我们来看具体例子。</p>
<p>整个工作流程类似上面的情形:为每个补丁创建独立的特性分支,而不同之处在于如何提交这些补丁。不需要创建自己可写的公共仓库,也不用将自己的更新推送到自己的服务器,你只需将每次提交的差异内容以电子邮件的方式依次发送到邮件列表中即可。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout -b topicA
$ (work)
$ git commit
$ (work)
$ git commit
</code></pre></div></div>
<p>如此一番后,有了两个提交要发到邮件列表。我们可以用 <code class="language-plaintext highlighter-rouge">git format-patch</code> 命令来生成 mbox 格式的文件然后作为附件发送。每个提交都会封装为一个 <code class="language-plaintext highlighter-rouge">.patch</code> 后缀的 mbox 文件,但其中只包含一封邮件,邮件标题就是提交消息(译注:额外有前缀,看例子),邮件内容包含补丁正文和 Git 版本号。这种方式的妙处在于接受补丁时仍可保留原来的提交消息,请看接下来的例子:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git format-patch -M origin/master
0001-add-limit-to-log-function.patch
0002-changed-log-output-to-30-from-25.patch
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">format-patch</code> 命令依次创建补丁文件,并输出文件名。上面的 <code class="language-plaintext highlighter-rouge">-M</code> 选项允许 Git 检查是否有对文件重命名的提交。我们来看看补丁文件的内容:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cat 0001-add-limit-to-log-function.patch
From 330090432754092d704da8e76ca5c05c198e71a8 Mon Sep 17 00:00:00 2001
From: Jessica Smith <jessica@example.com>
Date: Sun, 6 Apr 2008 10:17:23 -0700
Subject: [PATCH 1/2] add limit to log function
Limit log functionality to the first 20
---
lib/simplegit.rb | 2 +-
1 files changed, 1 insertions(+), 1 deletions(-)
diff --git a/lib/simplegit.rb b/lib/simplegit.rb
index 76f47bc..f9815f1 100644
--- a/lib/simplegit.rb
+++ b/lib/simplegit.rb
@@ -14,7 +14,7 @@ class SimpleGit
end
def log(treeish = 'master')
- command("git log #{treeish}")
+ command("git log -n 20 #{treeish}")
end
def ls_tree(treeish = 'master')
--
1.6.2.rc1.20.g8c5b.dirty
</code></pre></div></div>
<p>如果有额外信息需要补充,但又不想放在提交消息中说明,可以编辑这些补丁文件,在第一个 <code class="language-plaintext highlighter-rouge">---</code> 行之前添加说明,但不要修改下面的补丁正文,比如例子中的 <code class="language-plaintext highlighter-rouge">Limit log functionality to the first 20</code> 部分。这样,其它开发者能阅读,但在采纳补丁时不会将此合并进来。</p>
<p>你可以用邮件客户端软件发送这些补丁文件,也可以直接在命令行发送。有些所谓智能的邮件客户端软件会自作主张帮你调整格式,所以粘贴补丁到邮件正文时,有可能会丢失换行符和若干空格。Git 提供了一个通过 IMAP 发送补丁文件的工具。接下来我会演示如何通过 Gmail 的 IMAP 服务器发送。另外,在 Git 源代码中有个 <code class="language-plaintext highlighter-rouge">Documentation/SubmittingPatches</code> 文件,可以仔细读读,看看其它邮件程序的相关导引。</p>
<p>首先在 <code class="language-plaintext highlighter-rouge">~/.gitconfig</code> 文件中配置 imap 项。每个选项都可用 <code class="language-plaintext highlighter-rouge">git config</code> 命令分别设置,当然直接编辑文件添加以下内容更便捷:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[imap]
folder = "[Gmail]/Drafts"
host = imaps://imap.gmail.com
user = user@gmail.com
pass = p4ssw0rd
port = 993
sslverify = false
</code></pre></div></div>
<p>如果你的 IMAP 服务器没有启用 SSL,就无需配置最后那两行,并且 host 应该以 <code class="language-plaintext highlighter-rouge">imap://</code> 开头而不再是有 <code class="language-plaintext highlighter-rouge">s</code> 的 <code class="language-plaintext highlighter-rouge">imaps://</code>。保存配置文件后,就能用 <code class="language-plaintext highlighter-rouge">git send-email</code> 命令把补丁作为邮件依次发送到指定的 IMAP 服务器上的文件夹中(译注:这里就是 Gmail 的 <code class="language-plaintext highlighter-rouge">[Gmail]/Drafts</code> 文件夹。但如果你的语言设置不是英文,此处的文件夹 Drafts 字样会变为对应的语言。):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git send-email *.patch
0001-added-limit-to-log-function.patch
0002-changed-log-output-to-30-from-25.patch
Who should the emails appear to be from? [Jessica Smith <jessica@example.com>]
Emails will be sent from: Jessica Smith <jessica@example.com>
Who should the emails be sent to? jessica@example.com
Message-ID to be used as In-Reply-To for the first email? y
</code></pre></div></div>
<p>接下来,Git 会根据每个补丁依次输出类似下面的日志:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>(mbox) Adding cc: Jessica Smith <jessica@example.com> from
\line 'From: Jessica Smith <jessica@example.com>'
OK. Log says:
Sendmail: /usr/sbin/sendmail -i jessica@example.com
From: Jessica Smith <jessica@example.com>
To: jessica@example.com
Subject: [PATCH 1/2] added limit to log function
Date: Sat, 30 May 2009 13:29:15 -0700
Message-Id: <1243715356-61726-1-git-send-email-jessica@example.com>
X-Mailer: git-send-email 1.6.2.rc1.20.g8c5b.dirty
In-Reply-To: <y>
References: <y>
Result: OK
</code></pre></div></div>
<p>最后,到 Gmail 上打开 Drafts 文件夹,编辑这些邮件,修改收件人地址为邮件列表地址,另外给要抄送的人也加到 Cc 列表中,最后发送。</p>
<h3 id="小结">小结</h3>
<p>本节主要介绍了常见 Git 项目协作的工作流程,还有一些帮助处理这些工作的命令和工具。接下来我们要看看如何维护 Git 项目,并成为一个合格的项目管理员,或是集成经理。</p>
<h2 id="项目的管理">项目的管理</h2>
<p>既然是相互协作,在贡献代码的同时,也免不了要维护管理自己的项目。像是怎么处理别人用 <code class="language-plaintext highlighter-rouge">format-patch</code> 生成的补丁,或是集成远端仓库上某个分支上的变化等等。但无论是管理代码仓库,还是帮忙审核收到的补丁,都需要同贡献者约定某种长期可持续的工作方式。</p>
<h3 id="使用特性分支进行工作">使用特性分支进行工作</h3>
<p>如果想要集成新的代码进来,最好局限在特性分支上做。临时的特性分支可以让你随意尝试,进退自如。比如碰上无法正常工作的补丁,可以先搁在那边,直到有时间仔细核查修复为止。创建的分支可以用相关的主题关键字命名,比如 <code class="language-plaintext highlighter-rouge">ruby_client</code> 或者其它类似的描述性词语,以帮助将来回忆。Git 项目本身还时常把分支名称分置于不同命名空间下,比如 <code class="language-plaintext highlighter-rouge">sc/ruby_client</code> 就说明这是 <code class="language-plaintext highlighter-rouge">sc</code> 这个人贡献的。现在从当前主干分支为基础,新建临时分支:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git branch sc/ruby_client master
</code></pre></div></div>
<p>另外,如果你希望立即转到分支上去工作,可以用 <code class="language-plaintext highlighter-rouge">checkout -b</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout -b sc/ruby_client master
</code></pre></div></div>
<p>好了,现在已经准备妥当,可以试着将别人贡献的代码合并进来了。之后评估一下有没有问题,最后再决定是不是真的要并入主干。</p>
<h3 id="采纳来自邮件的补丁">采纳来自邮件的补丁</h3>
<p>如果收到一个通过电邮发来的补丁,你应该先把它应用到特性分支上进行评估。有两种应用补丁的方法:<code class="language-plaintext highlighter-rouge">git apply</code> 或者 <code class="language-plaintext highlighter-rouge">git am</code>。</p>
<h4 id="使用-apply-命令应用补丁">使用 apply 命令应用补丁</h4>
<p>如果收到的补丁文件是用 <code class="language-plaintext highlighter-rouge">git diff</code> 或由其它 Unix 的 <code class="language-plaintext highlighter-rouge">diff</code> 命令生成,就该用 <code class="language-plaintext highlighter-rouge">git apply</code> 命令来应用补丁。假设补丁文件存在 <code class="language-plaintext highlighter-rouge">/tmp/patch-ruby-client.patch</code>,可以这样运行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git apply /tmp/patch-ruby-client.patch
</code></pre></div></div>
<p>这会修改当前工作目录下的文件,效果基本与运行 <code class="language-plaintext highlighter-rouge">patch -p1</code> 打补丁一样,但它更为严格,且不会出现混乱。如果是 <code class="language-plaintext highlighter-rouge">git diff</code> 格式描述的补丁,此命令还会相应地添加,删除,重命名文件。当然,普通的 <code class="language-plaintext highlighter-rouge">patch</code> 命令是不会这么做的。另外请注意,<code class="language-plaintext highlighter-rouge">git apply</code> 是一个事务性操作的命令,也就是说,要么所有补丁都打上去,要么全部放弃。所以不会出现 <code class="language-plaintext highlighter-rouge">patch</code> 命令那样,一部分文件打上了补丁而另一部分却没有,这样一种不上不下的修订状态。所以总的来说,<code class="language-plaintext highlighter-rouge">git apply</code> 要比 <code class="language-plaintext highlighter-rouge">patch</code> 严谨许多。因为仅仅是更新当前的文件,所以此命令不会自动生成提交对象,你得手工缓存相应文件的更新状态并执行提交命令。</p>
<p>在实际打补丁之前,可以先用 <code class="language-plaintext highlighter-rouge">git apply --check</code> 查看补丁是否能够干净顺利地应用到当前分支中:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git apply --check 0001-seeing-if-this-helps-the-gem.patch
error: patch failed: ticgit.gemspec:1
error: ticgit.gemspec: patch does not apply
</code></pre></div></div>
<p>如果没有任何输出,表示我们可以顺利采纳该补丁。如果有问题,除了报告错误信息之外,该命令还会返回一个非零的状态,所以在 shell 脚本里可用于检测状态。</p>
<h4 id="使用-am-命令应用补丁">使用 am 命令应用补丁</h4>
<p>如果贡献者也用 Git,且擅于制作 <code class="language-plaintext highlighter-rouge">format-patch</code> 补丁,那你的合并工作将会非常轻松。因为这些补丁中除了文件内容差异外,还包含了作者信息和提交消息。所以请鼓励贡献者用 <code class="language-plaintext highlighter-rouge">format-patch</code> 生成补丁。对于传统的 <code class="language-plaintext highlighter-rouge">diff</code> 命令生成的补丁,则只能用 <code class="language-plaintext highlighter-rouge">git apply</code> 处理。</p>
<p>对于 <code class="language-plaintext highlighter-rouge">format-patch</code> 制作的新式补丁,应当使用 <code class="language-plaintext highlighter-rouge">git am</code> 命令。从技术上来说,<code class="language-plaintext highlighter-rouge">git am</code> 能够读取 mbox 格式的文件。这是种简单的纯文本文件,可以包含多封电邮,格式上用 From 加空格以及随便什么辅助信息所组成的行作为分隔行,以区分每封邮件,就像这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>From 330090432754092d704da8e76ca5c05c198e71a8 Mon Sep 17 00:00:00 2001
From: Jessica Smith <jessica@example.com>
Date: Sun, 6 Apr 2008 10:17:23 -0700
Subject: [PATCH 1/2] add limit to log function
Limit log functionality to the first 20
</code></pre></div></div>
<p>这是 <code class="language-plaintext highlighter-rouge">format-patch</code> 命令输出的开头几行,也是一个有效的 mbox 文件格式。如果有人用 <code class="language-plaintext highlighter-rouge">git send-email</code> 给你发了一个补丁,你可以将此邮件下载到本地,然后运行 <code class="language-plaintext highlighter-rouge">git am</code> 命令来应用这个补丁。如果你的邮件客户端能将多封电邮导出为 mbox 格式的文件,就可以用 <code class="language-plaintext highlighter-rouge">git am</code> 一次性应用所有导出的补丁。</p>
<p>如果贡献者将 <code class="language-plaintext highlighter-rouge">format-patch</code> 生成的补丁文件上传到类似 Request Ticket 一样的任务处理系统,那么可以先下载到本地,继而使用 <code class="language-plaintext highlighter-rouge">git am</code> 应用该补丁:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git am 0001-limit-log-function.patch
Applying: add limit to log function
</code></pre></div></div>
<p>你会看到它被干净地应用到本地分支,并自动创建了新的提交对象。作者信息取自邮件头 <code class="language-plaintext highlighter-rouge">From</code> 和 <code class="language-plaintext highlighter-rouge">Date</code>,提交消息则取自 <code class="language-plaintext highlighter-rouge">Subject</code> 以及正文中补丁之前的内容。来看具体实例,采纳之前展示的那个 mbox 电邮补丁后,最新的提交对象为:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log --pretty=fuller -1
commit 6c5e70b984a60b3cecd395edd5b48a7575bf58e0
Author: Jessica Smith <jessica@example.com>
AuthorDate: Sun Apr 6 10:17:23 2008 -0700
Commit: Scott Chacon <schacon@gmail.com>
CommitDate: Thu Apr 9 09:19:06 2009 -0700
add limit to log function
Limit log functionality to the first 20
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">Commit</code> 部分显示的是采纳补丁的人,以及采纳的时间。而 <code class="language-plaintext highlighter-rouge">Author</code> 部分则显示的是原作者,以及创建补丁的时间。</p>
<p>有时,我们也会遇到打不上补丁的情况。这多半是因为主干分支和补丁的基础分支相差太远,但也可能是因为某些依赖补丁还未应用。这种情况下,<code class="language-plaintext highlighter-rouge">git am</code> 会报错并询问该怎么做:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git am 0001-seeing-if-this-helps-the-gem.patch
Applying: seeing if this helps the gem
error: patch failed: ticgit.gemspec:1
error: ticgit.gemspec: patch does not apply
Patch failed at 0001.
When you have resolved this problem run "git am --resolved".
If you would prefer to skip this patch, instead run "git am --skip".
To restore the original branch and stop patching run "git am --abort".
</code></pre></div></div>
<p>Git 会在有冲突的文件里加入冲突解决标记,这同合并或衍合操作一样。解决的办法也一样,先编辑文件消除冲突,然后暂存文件,最后运行 <code class="language-plaintext highlighter-rouge">git am --resolved</code> 提交修正结果:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ (fix the file)
$ git add ticgit.gemspec
$ git am --resolved
Applying: seeing if this helps the gem
</code></pre></div></div>
<p>如果想让 Git 更智能地处理冲突,可以用 <code class="language-plaintext highlighter-rouge">-3</code> 选项进行三方合并。如果当前分支未包含该补丁的基础代码或其祖先,那么三方合并就会失败,所以该选项默认为关闭状态。一般来说,如果该补丁是基于某个公开的提交制作而成的话,你总是可以通过同步来获取这个共同祖先,所以用三方合并选项可以解决很多麻烦:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git am -3 0001-seeing-if-this-helps-the-gem.patch
Applying: seeing if this helps the gem
error: patch failed: ticgit.gemspec:1
error: ticgit.gemspec: patch does not apply
Using index info to reconstruct a base tree...
Falling back to patching base and 3-way merge...
No changes -- Patch already applied.
</code></pre></div></div>
<p>像上面的例子,对于打过的补丁我又再打一遍,自然会产生冲突,但因为加上了 <code class="language-plaintext highlighter-rouge">-3</code> 选项,所以它很聪明地告诉我,无需更新,原有的补丁已经应用。</p>
<p>对于一次应用多个补丁时所用的 mbox 格式文件,可以用 <code class="language-plaintext highlighter-rouge">am</code> 命令的交互模式选项 <code class="language-plaintext highlighter-rouge">-i</code>,这样就会在打每个补丁前停住,询问该如何操作:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git am -3 -i mbox
Commit Body is:
--------------------------
seeing if this helps the gem
--------------------------
Apply? [y]es/[n]o/[e]dit/[v]iew patch/[a]ccept all
</code></pre></div></div>
<p>在多个补丁要打的情况下,这是个非常好的办法,一方面可以预览下补丁内容,同时也可以有选择性的接纳或跳过某些补丁。</p>
<p>打完所有补丁后,如果测试下来新特性可以正常工作,那就可以安心地将当前特性分支合并到长期分支中去了。</p>
<h3 id="检出远程分支">检出远程分支</h3>
<p>如果贡献者有自己的 Git 仓库,并将修改推送到此仓库中,那么当你拿到仓库的访问地址和对应分支的名称后,就可以加为远程分支,然后在本地进行合并。</p>
<p>比如,Jessica 发来一封邮件,说在她代码库中的 <code class="language-plaintext highlighter-rouge">ruby-client</code> 分支上已经实现了某个非常棒的新功能,希望我们能帮忙测试一下。我们可以先把她的仓库加为远程仓库,然后抓取数据,完了再将她所说的分支检出到本地来测试:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git remote add jessica git://github.com/jessica/myproject.git
$ git fetch jessica
$ git checkout -b rubyclient jessica/ruby-client
</code></pre></div></div>
<p>若是不久她又发来邮件,说还有个很棒的功能实现在另一分支上,那我们只需重新抓取下最新数据,然后检出那个分支到本地就可以了,无需重复设置远程仓库。</p>
<p>这种做法便于同别人保持长期的合作关系。但前提是要求贡献者有自己的服务器,而我们也需要为每个人建一个远程分支。有些贡献者提交代码补丁并不是很频繁,所以通过邮件接收补丁效率会更高。同时我们自己也不会希望建上百来个分支,却只从每个分支取一两个补丁。但若是用脚本程序来管理,或直接使用代码仓库托管服务,就可以简化此过程。当然,选择何种方式取决于你和贡献者的喜好。</p>
<p>使用远程分支的另外一个好处是能够得到提交历史。不管代码合并是不是会有问题,至少我们知道该分支的历史分叉点,所以默认会从共同祖先开始自动进行三方合并,无需 <code class="language-plaintext highlighter-rouge">-3</code> 选项,也不用像打补丁那样祈祷存在共同的基准点。</p>
<p>如果只是临时合作,只需用 <code class="language-plaintext highlighter-rouge">git pull</code> 命令抓取远程仓库上的数据,合并到本地临时分支就可以了。一次性的抓取动作自然不会把该仓库地址加为远程仓库。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git pull git://github.com/onetimeguy/project.git
From git://github.com/onetimeguy/project
* branch HEAD -> FETCH_HEAD
Merge made by recursive.
</code></pre></div></div>
<h3 id="决断代码取舍">决断代码取舍</h3>
<p>现在特性分支上已合并好了贡献者的代码,是时候决断取舍了。本节将回顾一些之前学过的命令,以看清将要合并到主干的是哪些代码,从而理解它们到底做了些什么,是否真的要并入。</p>
<p>一般我们会先看下,特性分支上都有哪些新增的提交。比如在 <code class="language-plaintext highlighter-rouge">contrib</code> 特性分支上打了两个补丁,仅查看这两个补丁的提交信息,可以用 <code class="language-plaintext highlighter-rouge">--not</code> 选项指定要屏蔽的分支 <code class="language-plaintext highlighter-rouge">master</code>,这样就会剔除重复的提交历史:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log contrib --not master
commit 5b6235bd297351589efc4d73316f0a68d484f118
Author: Scott Chacon <schacon@gmail.com>
Date: Fri Oct 24 09:53:59 2008 -0700
seeing if this helps the gem
commit 7482e0d16d04bea79d0dba8988cc78df655f16a0
Author: Scott Chacon <schacon@gmail.com>
Date: Mon Oct 22 19:38:36 2008 -0700
updated the gemspec to hopefully work better
</code></pre></div></div>
<p>还可以查看每次提交的具体修改。请牢记,在 <code class="language-plaintext highlighter-rouge">git log</code> 后加 <code class="language-plaintext highlighter-rouge">-p</code> 选项将展示每次提交的内容差异。</p>
<p>如果想看当前分支同其他分支合并时的完整内容差异,有个小窍门:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git diff master
</code></pre></div></div>
<p>虽然能得到差异内容,但请记住,结果有可能和我们的预期不同。一旦主干 <code class="language-plaintext highlighter-rouge">master</code> 在特性分支创建之后有所修改,那么通过 <code class="language-plaintext highlighter-rouge">diff</code> 命令来比较的,是最新主干上的提交快照。显然,这不是我们所要的。比方在 <code class="language-plaintext highlighter-rouge">master</code> 分支中某个文件里添了一行,然后运行上面的命令,简单的比较最新快照所得到的结论只能是,特性分支中删除了这一行。</p>
<p>这个很好理解:如果 <code class="language-plaintext highlighter-rouge">master</code> 是特性分支的直接祖先,不会产生任何问题;如果它们的提交历史在不同的分叉上,那么产生的内容差异,看起来就像是增加了特性分支上的新代码,同时删除了 <code class="language-plaintext highlighter-rouge">master</code> 分支上的新代码。</p>
<p>实际上我们真正想要看的,是新加入到特性分支的代码,也就是合并时会并入主干的代码。所以,准确地讲,我们应该比较特性分支和它同 <code class="language-plaintext highlighter-rouge">master</code> 分支的共同祖先之间的差异。</p>
<p>我们可以手工定位它们的共同祖先,然后与之比较:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git merge-base contrib master
36c7dba2c95e6bbb78dfa822519ecfec6e1ca649
$ git diff 36c7db
</code></pre></div></div>
<p>但这么做很麻烦,所以 Git 提供了便捷的 <code class="language-plaintext highlighter-rouge">...</code> 语法。对于 <code class="language-plaintext highlighter-rouge">diff</code> 命令,可以把 <code class="language-plaintext highlighter-rouge">...</code> 加在原始分支(拥有共同祖先)和当前分支之间:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git diff master...contrib
</code></pre></div></div>
<p>现在看到的,就是实际将要引入的新代码。这是一个非常有用的命令,应该牢记。</p>
<h3 id="代码集成">代码集成</h3>
<p>一旦特性分支准备停当,接下来的问题就是如何集成到更靠近主线的分支中。此外还要考虑维护项目的总体步骤是什么。虽然有很多选择,不过我们这里只介绍其中一部分。</p>
<h4 id="合并流程">合并流程</h4>
<p>一般最简单的情形,是在 <code class="language-plaintext highlighter-rouge">master</code> 分支中维护稳定代码,然后在特性分支上开发新功能,或是审核测试别人贡献的代码,接着将它并入主干,最后删除这个特性分支,如此反复。来看示例,假设当前代码库中有两个分支,分别为 <code class="language-plaintext highlighter-rouge">ruby_client</code> 和 <code class="language-plaintext highlighter-rouge">php_client</code>,如图 5-19 所示。然后先把 <code class="language-plaintext highlighter-rouge">ruby_client</code> 合并进主干,再合并 <code class="language-plaintext highlighter-rouge">php_client</code>,最后的提交历史如图 5-20 所示。</p>
<p><a href="/uploads/2012/09/18333fig0519-tn.png"><img src="/uploads/2012/09/18333fig0519-tn.png" alt="图 5-19" /></a>
图 5-19. 多个特性分支</p>
<p><a href="/uploads/2012/09/18333fig0520-tn.png"><img src="/uploads/2012/09/18333fig0520-tn.png" alt="图 5-20" /></a>
图 5-20. 合并特性分支之后</p>
<p>这是最简单的流程,所以在处理大一些的项目时可能会有问题。</p>
<p>对于大型项目,至少需要维护两个长期分支 <code class="language-plaintext highlighter-rouge">master</code> 和 <code class="language-plaintext highlighter-rouge">develop</code>。新代码(图 5-21 中的 <code class="language-plaintext highlighter-rouge">ruby_client</code>)将首先并入 <code class="language-plaintext highlighter-rouge">develop</code> 分支(图 5-22 中的 <code class="language-plaintext highlighter-rouge">C8</code>),经过一个阶段,确认 <code class="language-plaintext highlighter-rouge">develop</code> 中的代码已稳定到可发行时,再将 <code class="language-plaintext highlighter-rouge">master</code> 分支快进到稳定点(图 5-23 中的 <code class="language-plaintext highlighter-rouge">C8</code>)。而平时这两个分支都会被推送到公开的代码库。</p>
<p><a href="/uploads/2012/09/18333fig0521-tn.png"><img src="/uploads/2012/09/18333fig0521-tn.png" alt="图 5-21" /></a>
图 5-21. 特性分支合并前</p>
<p><a href="/uploads/2012/09/18333fig0522-tn.png"><img src="/uploads/2012/09/18333fig0522-tn.png" alt="图 5-22" /></a>
图 5-22. 特性分支合并后</p>
<p><a href="/uploads/2012/09/18333fig0523-tn.png"><img src="/uploads/2012/09/18333fig0523-tn.png" alt="图 5-23" /></a>
图 5-23. 特性分支发布后</p>
<p>这样,在人们克隆仓库时就有两种选择:既可检出最新稳定版本,确保正常使用;也能检出开发版本,试用最前沿的新特性。你也可以扩展这个概念,先将所有新代码合并到临时特性分支,等到该分支稳定下来并通过测试后,再并入 <code class="language-plaintext highlighter-rouge">develop</code> 分支。然后,让时间检验一切,如果这些代码确实可以正常工作相当长一段时间,那就有理由相信它已经足够稳定,可以放心并入主干分支发布。</p>
<h4 id="大项目的合并流程">大项目的合并流程</h4>
<p>Git 项目本身有四个长期分支:用于发布的 <code class="language-plaintext highlighter-rouge">master</code> 分支、用于合并基本稳定特性的 <code class="language-plaintext highlighter-rouge">next</code> 分支、用于合并仍需改进特性的 <code class="language-plaintext highlighter-rouge">pu</code> 分支(pu 是 proposed updates 的缩写),以及用于除错维护的 <code class="language-plaintext highlighter-rouge">maint</code> 分支(maint 取自 maintenance)。维护者可以按照之前介绍的方法,将贡献者的代码引入为不同的特性分支(如图 5-24 所示),然后测试评估,看哪些特性能稳定工作,哪些还需改进。稳定的特性可以并入 <code class="language-plaintext highlighter-rouge">next</code> 分支,然后再推送到公共仓库,以供其他人试用。</p>
<p><a href="/uploads/2012/09/18333fig0524-tn.png"><img src="/uploads/2012/09/18333fig0524-tn.png" alt="图 5-24" /></a>
图 5-24. 管理复杂的并行贡献</p>
<p>仍需改进的特性可以先并入 <code class="language-plaintext highlighter-rouge">pu</code> 分支。直到它们完全稳定后再并入 <code class="language-plaintext highlighter-rouge">master</code>。同时一并检查下 <code class="language-plaintext highlighter-rouge">next</code> 分支,将足够稳定的特性也并入 <code class="language-plaintext highlighter-rouge">master</code>。所以一般来说,<code class="language-plaintext highlighter-rouge">master</code> 始终是在快进,<code class="language-plaintext highlighter-rouge">next</code> 偶尔做下衍合,而 <code class="language-plaintext highlighter-rouge">pu</code> 则是频繁衍合,如图 5-25 所示:</p>
<p><a href="/uploads/2012/09/18333fig0525-tn.png"><img src="/uploads/2012/09/18333fig0525-tn.png" alt="图 5-25" /></a>
图 5-25. 将特性并入长期分支</p>
<p>并入 <code class="language-plaintext highlighter-rouge">master</code> 后的特性分支,已经无需保留分支索引,放心删除好了。Git 项目还有一个 <code class="language-plaintext highlighter-rouge">maint</code> 分支,它是以最近一次发行版为基础分化而来的,用于维护除错补丁。所以克隆 Git 项目仓库后会得到这四个分支,通过检出不同分支可以了解各自进展,或是试用前沿特性,或是贡献代码。而维护者则通过管理这些分支,逐步有序地并入第三方贡献。</p>
<h4 id="衍合与挑拣cherry-pick的流程">衍合与挑拣(cherry-pick)的流程</h4>
<p>一些维护者更喜欢衍合或者挑拣贡献者的代码,而不是简单的合并,因为这样能够保持线性的提交历史。如果你完成了一个特性的开发,并决定将它引入到主干代码中,你可以转到那个特性分支然后执行衍合命令,好在你的主干分支上(也可能是<code class="language-plaintext highlighter-rouge">develop</code>分支之类的)重新提交这些修改。如果这些代码工作得很好,你就可以快进<code class="language-plaintext highlighter-rouge">master</code>分支,得到一个线性的提交历史。</p>
<p>另一个引入代码的方法是挑拣。挑拣类似于针对某次特定提交的衍合。它首先提取某次提交的补丁,然后试着应用在当前分支上。如果某个特性分支上有多个commits,但你只想引入其中之一就可以使用这种方法。也可能仅仅是因为你喜欢用挑拣,讨厌衍合。假设你有一个类似图 5-26 的工程。</p>
<p><a href="/uploads/2012/09/18333fig0526-tn.png"><img src="/uploads/2012/09/18333fig0526-tn.png" alt="图 5-26" /></a>
图 5-26. 挑拣(cherry-pick)之前的历史</p>
<p>如果你希望拉取<code class="language-plaintext highlighter-rouge">e43a6</code>到你的主干分支,可以这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git cherry-pick e43a6fd3e94888d76779ad79fb568ed180e5fcdf
Finished one cherry-pick.
[master]: created a0a41a9: "More friendly message when locking the index fails."
3 files changed, 17 insertions(+), 3 deletions(-)
</code></pre></div></div>
<p>这将会引入<code class="language-plaintext highlighter-rouge">e43a6</code>的代码,但是会得到不同的SHA-1值,因为应用日期不同。现在你的历史看起来像图 5-27.</p>
<p><a href="/uploads/2012/09/18333fig0527-tn.png"><img src="/uploads/2012/09/18333fig0527-tn.png" alt="图 5-27" /></a>
图 5-27. 挑拣(cherry-pick)之后的历史</p>
<p>现在,你可以删除这个特性分支并丢弃你不想引入的那些commit。</p>
<h3 id="给发行版签名">给发行版签名</h3>
<p>你可以删除上次发布的版本并重新打标签,也可以像第二章所说的那样建立一个新的标签。如果你决定以维护者的身份给发行版签名,应该这样做:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git tag -s v1.5 -m 'my signed 1.5 tag'
You need a passphrase to unlock the secret key for
user: "Scott Chacon <schacon@gmail.com>"
1024-bit DSA key, ID F721C45A, created 2009-02-09
</code></pre></div></div>
<p>完成签名之后,如何分发PGP公钥(public key)是个问题。(译者注:分发公钥是为了验证标签)。还好,Git的设计者想到了解决办法:可以把key(既公钥)作为blob变量写入Git库,然后把它的内容直接写在标签里。<code class="language-plaintext highlighter-rouge">gpg --list-keys</code>命令可以显示出你所拥有的key:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ gpg --list-keys
/Users/schacon/.gnupg/pubring.gpg
---------------------------------
pub 1024D/F721C45A 2009-02-09 [expires: 2010-02-09]
uid Scott Chacon <schacon@gmail.com>
sub 2048g/45D02282 2009-02-09 [expires: 2010-02-09]
</code></pre></div></div>
<p>然后,导出key的内容并经由管道符传递给<code class="language-plaintext highlighter-rouge">git hash-object</code>,之后钥匙会以blob类型写入Git中,最后返回这个blob量的SHA-1值:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ gpg -a --export F721C45A | git hash-object -w --stdin
659ef797d181633c87ec71ac3f9ba29fe5775b92
</code></pre></div></div>
<p>现在你的Git已经包含了这个key的内容了,可以通过不同的SHA-1值指定不同的key来创建标签。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git tag -a maintainer-pgp-pub 659ef797d181633c87ec71ac3f9ba29fe5775b92
</code></pre></div></div>
<p>在运行<code class="language-plaintext highlighter-rouge">git push --tags</code>命令之后,<code class="language-plaintext highlighter-rouge">maintainer-pgp-pub</code>标签就会公布给所有人。如果有人想要校验标签,他可以使用如下命令导入你的key:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git show maintainer-pgp-pub | gpg --import
</code></pre></div></div>
<p>人们可以用这个key校验你签名的所有标签。另外,你也可以在标签信息里写入一个操作向导,用户只需要运行<code class="language-plaintext highlighter-rouge">git show <tag></code>查看标签信息,然后按照你的向导就能完成校验。</p>
<h3 id="生成内部版本号">生成内部版本号</h3>
<p>因为Git不会为每次提交自动附加类似’v123’的递增序列,所以如果你想要得到一个便于理解的提交号可以运行<code class="language-plaintext highlighter-rouge">git describe</code>命令。Git将会返回一个字符串,由三部分组成:最近一次标定的版本号,加上自那次标定之后的提交次数,再加上一段SHA-1值of the commit you’re describing:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git describe master
v1.6.2-rc1-20-g8c5b85c
</code></pre></div></div>
<p>这个字符串可以作为快照的名字,方便人们理解。如果你的Git是你自己下载源码然后编译安装的,你会发现<code class="language-plaintext highlighter-rouge">git --version</code>命令的输出和这个字符串差不多。如果在一个刚刚打完标签的提交上运行<code class="language-plaintext highlighter-rouge">describe</code>命令,只会得到这次标定的版本号,而没有后面两项信息。</p>
<p><code class="language-plaintext highlighter-rouge">git describe</code>命令只适用于有标注的标签(通过<code class="language-plaintext highlighter-rouge">-a</code>或者<code class="language-plaintext highlighter-rouge">-s</code>选项创建的标签),所以发行版的标签都应该是带有标注的,以保证<code class="language-plaintext highlighter-rouge">git describe</code>能够正确的执行。你也可以把这个字符串作为<code class="language-plaintext highlighter-rouge">checkout</code>或者<code class="language-plaintext highlighter-rouge">show</code>命令的目标,因为他们最终都依赖于一个简短的SHA-1值,当然如果这个SHA-1值失效他们也跟着失效。最近Linux内核为了保证SHA-1值的唯一性,将位数由8位扩展到10位,这就导致扩展之前的<code class="language-plaintext highlighter-rouge">git describe</code>输出完全失效了。</p>
<h3 id="准备发布">准备发布</h3>
<p>现在可以发布一个新的版本了。首先要将代码的压缩包归档,方便那些可怜的还没有使用Git的人们。可以使用<code class="language-plaintext highlighter-rouge">git archive</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git archive master --prefix='project/' | gzip > `git describe master`.tar.gz
$ ls *.tar.gz
v1.6.2-rc1-20-g8c5b85c.tar.gz
</code></pre></div></div>
<p>这个压缩包解压出来的是一个文件夹,里面是你项目的最新代码快照。你也可以用类似的方法建立一个zip压缩包,在<code class="language-plaintext highlighter-rouge">git archive</code>加上<code class="language-plaintext highlighter-rouge">--format=zip</code>选项:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git archive master --prefix='project/' --format=zip > `git describe master`.zip
</code></pre></div></div>
<p>现在你有了一个tar.gz压缩包和一个zip压缩包,可以把他们上传到你网站上或者用e-mail发给别人。</p>
<h3 id="制作简报">制作简报</h3>
<p>是时候通知邮件列表里的朋友们来检验你的成果了。使用<code class="language-plaintext highlighter-rouge">git shortlog</code>命令可以方便快捷的制作一份修改日志(changelog),告诉大家上次发布之后又增加了哪些特性和修复了哪些bug。实际上这个命令能够统计给定范围内的所有提交;假如你上一次发布的版本是v1.0.1,下面的命令将给出自从上次发布之后的所有提交的简介:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git shortlog --no-merges master --not v1.0.1
Chris Wanstrath (8):
Add support for annotated tags to Grit::Tag
Add packed-refs annotated tag support.
Add Grit::Commit#to_patch
Update version and History.txt
Remove stray `puts`
Make ls_tree ignore nils
Tom Preston-Werner (4):
fix dates in history
dynamic version method
Version bump to 1.0.2
Regenerated gemspec for version 1.0.2
</code></pre></div></div>
<p>这就是自从v1.0.1版本以来的所有提交的简介,内容按照作者分组,以便你能快速的发e-mail给他们。</p>
<h2 id="小结-1">小结</h2>
<p>你学会了如何使用Git为项目做贡献,也学会了如何使用Git维护你的项目。恭喜!你已经成为一名高效的开发者。在下一章你将学到更强大的工具来处理更加复杂的问题,之后你会变成一位Git大师。</p>
04-服务器上的Git
2012-10-15T00:00:00+00:00
http://wangdaodao.github.io/2012-10-15/git-server
<p>到目前为止,你应该已经学会了使用 Git 来完成日常工作。然而,如果想与他人合作,还需要一个远程的 Git 仓库。尽管技术上可以从个人的仓库里推送和拉取修改内容,但我们不鼓励这样做,因为一不留心就很容易弄混其他人的进度。另外,你也一定希望合作者们即使在自己不开机的时候也能从仓库获取数据 — 拥有一个更稳定的公共仓库十分有用。因此,更好的合作方式是建立一个大家都可以访问的共享仓库,从那里推送和拉取数据。我们将把这个仓库称为 “Git 服务器”;代理一个 Git 仓库只需要花费很少的资源,几乎从不需要整个服务器来支持它的运行。</p>
<p>架设一台 Git 服务器并不难。第一步是选择与服务器通讯的协议。本章第一节将介绍可用的协议以及各自优缺点。下面一节将介绍一些针对各个协议典型的设置以及如何在服务器上实施。最后,如果你不介意在他人服务器上保存你的代码,又想免去自己架设和维护服务器的麻烦,倒可以试试我们介绍的几个仓库托管服务。</p>
<p>如果你对架设自己的服务器没兴趣,可以跳到本章最后一节去看看如何申请一个代码托管服务的账户然后继续下一章,我们会在那里讨论分布式源码控制环境的林林总总。</p>
<p>远程仓库通常只是一个_裸仓库(bare repository)_ — 即一个没有当前工作目录的仓库。因为该仓库只是一个合作媒介,所以不需要从硬盘上取出最新版本的快照;仓库里存放的仅仅是 Git 的数据。简单地说,裸仓库就是你工作目录中 <code class="language-plaintext highlighter-rouge">.git</code> 子目录内的内容。</p>
<h2 id="协议">协议</h2>
<p>Git 可以使用四种主要的协议来传输数据:本地传输,SSH 协议,Git 协议和 HTTP 协议。下面分别介绍一下哪些情形应该使用(或避免使用)这些协议。</p>
<p>值得注意的是,除了 HTTP 协议外,其他所有协议都要求在服务器端安装并运行 Git。</p>
<h3 id="本地协议">本地协议</h3>
<p>最基本的就是_本地协议(Local protocol)_,所谓的远程仓库在该协议中的表示,就是硬盘上的另一个目录。这常见于团队每一个成员都对一个共享的文件系统(例如 NFS)拥有访问权,或者比较少见的多人共用同一台电脑的情况。后面一种情况并不安全,因为所有代码仓库实例都储存在同一台电脑里,增加了灾难性数据损失的可能性。</p>
<p>如果你使用一个共享的文件系统,就可以在一个本地文件系统中克隆仓库,推送和获取。克隆的时候只需要将远程仓库的路径作为 URL 使用,比如下面这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone /opt/git/project.git
</code></pre></div></div>
<p>或者这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone file:///opt/git/project.git
</code></pre></div></div>
<p>如果在 URL 开头明确使用 <code class="language-plaintext highlighter-rouge">file://</code> ,那么 Git 会以一种略微不同的方式运行。如果你只给出路径,Git 会尝试使用硬链接或直接复制它所需要的文件。如果使用了 <code class="language-plaintext highlighter-rouge">file://</code> ,Git 会调用它平时通过网络来传输数据的工序,而这种方式的效率相对较低。使用 <code class="language-plaintext highlighter-rouge">file://</code> 前缀的主要原因是当你需要一个不包含无关引用或对象的干净仓库副本的时候 — 一般指从其他版本控制系统导入的,或类似情形(参见第 9 章的维护任务)。我们这里仅仅使用普通路径,这样更快。</p>
<p>要添加一个本地仓库作为现有 Git 项目的远程仓库,可以这样做:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git remote add local_proj /opt/git/project.git
</code></pre></div></div>
<p>然后就可以像在网络上一样向这个远程仓库推送和获取数据了。</p>
<h4 id="优点">优点</h4>
<p>基于文件仓库的优点在于它的简单,同时保留了现存文件的权限和网络访问权限。如果你的团队已经有一个全体共享的文件系统,建立仓库就十分容易了。你只需把一份裸仓库的副本放在大家都能访问的地方,然后像对其他共享目录一样设置读写权限就可以了。我们将在下一节“在服务器上部署 Git ”中讨论如何导出一个裸仓库的副本。</p>
<p>这也是从别人工作目录中获取工作成果的快捷方法。假如你和你的同事在一个项目中合作,他们想让你检出一些东西的时候,运行类似 <code class="language-plaintext highlighter-rouge">git pull /home/john/project</code> 通常会比他们推送到服务器,而你再从服务器获取简单得多。</p>
<h4 id="缺点">缺点</h4>
<p>这种方法的缺点是,与基本的网络连接访问相比,难以控制从不同位置来的访问权限。如果你想从家里的笔记本电脑上推送,就要先挂载远程硬盘,这和基于网络连接的访问相比更加困难和缓慢。</p>
<p>另一个很重要的问题是该方法不一定就是最快的,尤其是对于共享挂载的文件系统。本地仓库只有在你对数据访问速度快的时候才快。在同一个服务器上,如果二者同时允许 Git 访问本地硬盘,通过 NFS 访问仓库通常会比 SSH 慢。</p>
<h3 id="ssh-协议">SSH 协议</h3>
<p>Git 使用的传输协议中最常见的可能就是 SSH 了。这是因为大多数环境已经支持通过 SSH 对服务器的访问 — 即便还没有,架设起来也很容易。SSH 也是唯一一个同时支持读写操作的网络协议。另外两个网络协议(HTTP 和 Git)通常都是只读的,所以虽然二者对大多数人都可用,但执行写操作时还是需要 SSH。SSH 同时也是一个验证授权的网络协议;而因为其普遍性,一般架设和使用都很容易。</p>
<p>通过 SSH 克隆一个 Git 仓库,你可以像下面这样给出 ssh:// 的 URL:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone ssh://user@server:project.git
</code></pre></div></div>
<p>或者不指明某个协议 — 这时 Git 会默认使用 SSH :</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone user@server:project.git
</code></pre></div></div>
<p>如果不指明用户,Git 会默认使用当前登录的用户名连接服务器。</p>
<h4 id="优点-1">优点</h4>
<p>使用 SSH 的好处有很多。首先,如果你想拥有对网络仓库的写权限,基本上不可能不使用 SSH。其次,SSH 架设相对比较简单 — SSH 守护进程很常见,很多网络管理员都有一些使用经验,而且很多操作系统都自带了它或者相关的管理工具。再次,通过 SSH 进行访问是安全的 — 所有数据传输都是加密和授权的。最后,和 Git 及本地协议一样,SSH 也很高效,会在传输之前尽可能压缩数据。</p>
<h4 id="缺点-1">缺点</h4>
<p>SSH 的限制在于你不能通过它实现仓库的匿名访问。即使仅为读取数据,人们也必须在能通过 SSH 访问主机的前提下才能访问仓库,这使得 SSH 不利于开源的项目。如果你仅仅在公司网络里使用,SSH 可能是你唯一需要使用的协议。如果想允许对项目的匿名只读访问,那么除了为自己推送而架设 SSH 协议之外,还需要支持其他协议以便他人访问读取。</p>
<h3 id="git-协议">Git 协议</h3>
<p>接下来是 Git 协议。这是一个包含在 Git 软件包中的特殊守护进程; 它会监听一个提供类似于 SSH 服务的特定端口(9418),而无需任何授权。打算支持 Git 协议的仓库,需要先创建 <code class="language-plaintext highlighter-rouge">git-export-daemon-ok</code> 文件 — 它是协议进程提供仓库服务的必要条件 — 但除此之外该服务没有什么安全措施。要么所有人都能克隆 Git 仓库,要么谁也不能。这也意味着该协议通常不能用来进行推送。你可以允许推送操作;然而由于没有授权机制,一旦允许该操作,网络上任何一个知道项目 URL 的人将都有推送权限。不用说,这是十分罕见的情况。</p>
<h4 id="优点-2">优点</h4>
<p>Git 协议是现存最快的传输协议。如果你在提供一个有很大访问量的公共项目,或者一个不需要对读操作进行授权的庞大项目,架设一个 Git 守护进程来供应仓库是个不错的选择。它使用与 SSH 协议相同的数据传输机制,但省去了加密和授权的开销。</p>
<h4 id="缺点-2">缺点</h4>
<p>Git 协议消极的一面是缺少授权机制。用 Git 协议作为访问项目的唯一方法通常是不可取的。一般的做法是,同时提供 SSH 接口,让几个开发者拥有推送(写)权限,其他人通过 <code class="language-plaintext highlighter-rouge">git://</code> 拥有只读权限。Git 协议可能也是最难架设的协议。它要求有单独的守护进程,需要定制 — 我们将在本章的 “Gitosis” 一节详细介绍它的架设 — 需要设定 <code class="language-plaintext highlighter-rouge">xinetd</code> 或类似的程序,而这些工作就没那么轻松了。该协议还要求防火墙开放 9418 端口,而企业级防火墙一般不允许对这个非标准端口的访问。大型企业级防火墙通常会封锁这个少见的端口。</p>
<h3 id="https-协议">HTTP/S 协议</h3>
<p>最后还有 HTTP 协议。HTTP 或 HTTPS 协议的优美之处在于架设的简便性。基本上,只需要把 Git 的裸仓库文件放在 HTTP 的根目录下,配置一个特定的 <code class="language-plaintext highlighter-rouge">post-update</code> 挂钩(hook)就可以搞定(Git 挂钩的细节见第 7 章)。此后,每个能访问 Git 仓库所在服务器上 web 服务的人都可以进行克隆操作。下面的操作可以允许通过 HTTP 对仓库进行读取:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cd /var/www/htdocs/
$ git clone --bare /path/to/git_project gitproject.git
$ cd gitproject.git
$ mv hooks/post-update.sample hooks/post-update
$ chmod a+x hooks/post-update
</code></pre></div></div>
<p>这样就可以了。Git 附带的 <code class="language-plaintext highlighter-rouge">post-update</code> 挂钩会默认运行合适的命令(<code class="language-plaintext highlighter-rouge">git update-server-info</code>)来确保通过 HTTP 的获取和克隆正常工作。这条命令在你用 SSH 向仓库推送内容时运行;之后,其他人就可以用下面的命令来克隆仓库:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone http://example.com/gitproject.git
</code></pre></div></div>
<p>在本例中,我们使用了 Apache 设定中常用的 <code class="language-plaintext highlighter-rouge">/var/www/htdocs</code> 路径,不过你可以使用任何静态 web 服务 — 把裸仓库放在它的目录里就行。 Git 的数据是以最基本的静态文件的形式提供的(关于如何提供文件的详情见第 9 章)。</p>
<p>通过 HTTP 进行推送操作也是可能的,不过这种做法不太常见,并且牵扯到复杂的 WebDAV 设定。由于很少用到,本书将略过对该内容的讨论。如果对 HTTP 推送协议感兴趣,不妨打开这个地址看一下操作方法:<code class="language-plaintext highlighter-rouge">http://www.kernel.org/pub/software/scm/git/docs/howto/setup-git-server-over-http.txt</code> 。通过 HTTP 推送的好处之一是你可以使用任何 WebDAV 服务器,不需要为 Git 设定特殊环境;所以如果主机提供商支持通过 WebDAV 更新网站内容,你也可以使用这项功能。</p>
<h4 id="优点-3">优点</h4>
<p>使用 HTTP 协议的好处是易于架设。几条必要的命令就可以让全世界读取到仓库的内容。花费不过几分钟。HTTP 协议不会占用过多服务器资源。因为它一般只用到静态的 HTTP 服务提供所有数据,普通的 Apache 服务器平均每秒能支撑数千个文件的并发访问 — 哪怕让一个小型服务器超载都很难。</p>
<p>你也可以通过 HTTPS 提供只读的仓库,这意味着你可以加密传输内容;你甚至可以要求客户端使用特定签名的 SSL 证书。一般情况下,如果到了这一步,使用 SSH 公共密钥可能是更简单的方案;不过也存在一些特殊情况,这时通过 HTTPS 使用带签名的 SSL 证书或者其他基于 HTTP 的只读连接授权方式是更好的解决方案。</p>
<p>HTTP 还有个额外的好处:HTTP 是一个如此常见的协议,以至于企业级防火墙通常都允许其端口的通信。</p>
<h4 id="缺点-3">缺点</h4>
<p>HTTP 协议的消极面在于,相对来说客户端效率更低。克隆或者下载仓库内容可能会花费更多时间,而且 HTTP 传输的体积和网络开销比其他任何一个协议都大。因为它没有按需供应的能力 — 传输过程中没有服务端的动态计算 — 因而 HTTP 协议经常会被称为_傻瓜(dumb)_协议。更多 HTTP 协议和其他协议效率上的差异见第 9 章。</p>
<h2 id="在服务器上部署-git">在服务器上部署 Git</h2>
<p>开始架设 Git 服务器前,需要先把现有仓库导出为裸仓库 — 即一个不包含当前工作目录的仓库。做法直截了当,克隆时用 <code class="language-plaintext highlighter-rouge">--bare</code> 选项即可。裸仓库的目录名一般以 <code class="language-plaintext highlighter-rouge">.git</code> 结尾,像这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone --bare my_project my_project.git
Initialized empty Git repository in /opt/projects/my_project.git/
</code></pre></div></div>
<p>该命令的输出或许会让人有些不解。其实 <code class="language-plaintext highlighter-rouge">clone</code> 操作基本上相当于 <code class="language-plaintext highlighter-rouge">git init</code> 加 <code class="language-plaintext highlighter-rouge">git fetch</code>,所以这里出现的其实是 <code class="language-plaintext highlighter-rouge">git init</code> 的输出,先由它建立一个空目录,而之后传输数据对象的操作并无任何输出,只是悄悄在幕后执行。现在 <code class="language-plaintext highlighter-rouge">my_project.git</code> 目录中已经有了一份 Git 目录数据的副本。</p>
<p>整体上的效果大致相当于:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cp -Rf my_project/.git my_project.git
</code></pre></div></div>
<p>但在配置文件中有若干小改动,不过对用户来讲,使用方式都一样,不会有什么影响。它仅取出 Git 仓库的必要原始数据,存放在该目录中,而不会另外创建工作目录。</p>
<h3 id="把裸仓库移到服务器上">把裸仓库移到服务器上</h3>
<p>有了裸仓库的副本后,剩下的就是把它放到服务器上并设定相关协议。假设一个域名为 <code class="language-plaintext highlighter-rouge">git.example.com</code> 的服务器已经架设好,并可以通过 SSH 访问,我们打算把所有 Git 仓库储存在 <code class="language-plaintext highlighter-rouge">/opt/git</code> 目录下。只要把裸仓库复制过去:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ scp -r my_project.git user@git.example.com:/opt/git
</code></pre></div></div>
<p>现在,所有对该服务器有 SSH 访问权限,并可读取 <code class="language-plaintext highlighter-rouge">/opt/git</code> 目录的用户都可以用下面的命令克隆该项目:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone user@git.example.com:/opt/git/my_project.git
</code></pre></div></div>
<p>如果某个 SSH 用户对 <code class="language-plaintext highlighter-rouge">/opt/git/my_project.git</code> 目录有写权限,那他就有推送权限。如果到该项目目录中运行 <code class="language-plaintext highlighter-rouge">git init</code> 命令,并加上 <code class="language-plaintext highlighter-rouge">--shared</code> 选项,那么 Git 会自动修改该仓库目录的组权限为可写(译注:实际上 <code class="language-plaintext highlighter-rouge">--shared</code> 可以指定其他行为,只是默认为将组权限改为可写并执行 <code class="language-plaintext highlighter-rouge">g+sx</code>,所以最后会得到 <code class="language-plaintext highlighter-rouge">rws</code>。)。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ ssh user@git.example.com
$ cd /opt/git/my_project.git
$ git init --bare --shared
</code></pre></div></div>
<p>由此可见,根据现有的 Git 仓库创建一个裸仓库,然后把它放上你和同事都有 SSH 访问权的服务器是多么容易。现在已经可以开始在同一项目上密切合作了。</p>
<p>值得注意的是,这的的确确是架设一个少数人具有连接权的 Git 服务的全部 — 只要在服务器上加入可以用 SSH 登录的帐号,然后把裸仓库放在大家都有读写权限的地方。一切都准备停当,无需更多。</p>
<p>下面的几节中,你会了解如何扩展到更复杂的设定。这些内容包含如何避免为每一个用户建立一个账户,给仓库添加公共读取权限,架设网页界面,使用 Gitosis 工具等等。然而,只是和几个人在一个不公开的项目上合作的话,仅仅是一个 SSH 服务器和裸仓库就足够了,记住这点就可以了。</p>
<h3 id="小型安装">小型安装</h3>
<p>如果设备较少或者你只想在小型开发团队里尝试 Git ,那么一切都很简单。架设 Git 服务最复杂的地方在于账户管理。如果需要仓库对特定的用户可读,而给另一部分用户读写权限,那么访问和许可的安排就比较困难。</p>
<h4 id="ssh-连接">SSH 连接</h4>
<p>如果已经有了一个所有开发成员都可以用 SSH 访问的服务器,架设第一个服务器将变得异常简单,几乎什么都不用做(正如上节中介绍的那样)。如果需要对仓库进行更复杂的访问控制,只要使用服务器操作系统的本地文件访问许可机制就行了。</p>
<p>如果需要团队里的每个人都对仓库有写权限,又不能给每个人在服务器上建立账户,那么提供 SSH 连接就是唯一的选择了。我们假设用来共享仓库的服务器已经安装了 SSH 服务,而且你通过它访问服务器。</p>
<p>有好几个办法可以让团队的每个人都有访问权。第一个办法是给每个人建立一个账户,直截了当但略过繁琐。反复运行 <code class="language-plaintext highlighter-rouge">adduser</code> 并给所有人设定临时密码可不是好玩的。</p>
<p>第二个办法是在主机上建立一个 <code class="language-plaintext highlighter-rouge">git</code> 账户,让每个需要写权限的人发送一个 SSH 公钥,然后将其加入 <code class="language-plaintext highlighter-rouge">git</code> 账户的 <code class="language-plaintext highlighter-rouge">~/.ssh/authorized_keys</code> 文件。这样一来,所有人都将通过 <code class="language-plaintext highlighter-rouge">git</code> 账户访问主机。这丝毫不会影响提交的数据 — 访问主机用的身份不会影响提交对象的提交者信息。</p>
<p>另一个办法是让 SSH 服务器通过某个 LDAP 服务,或者其他已经设定好的集中授权机制,来进行授权。只要每个人都能获得主机的 shell 访问权,任何可用的 SSH 授权机制都能达到相同效果。</p>
<h2 id="生成-ssh-公钥">生成 SSH 公钥</h2>
<p>大多数 Git 服务器都会选择使用 SSH 公钥来进行授权。系统中的每个用户都必须提供一个公钥用于授权,没有的话就要生成一个。生成公钥的过程在所有操作系统上都差不多。首先先确认一下是否已经有一个公钥了。SSH 公钥默认储存在账户的主目录下的 <code class="language-plaintext highlighter-rouge">~/.ssh</code> 目录。进去看看:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cd ~/.ssh
$ ls
authorized_keys2 id_dsa known_hosts
config id_dsa.pub
</code></pre></div></div>
<p>关键是看有没有用 <code class="language-plaintext highlighter-rouge">something</code> 和 <code class="language-plaintext highlighter-rouge">something.pub</code> 来命名的一对文件,这个 <code class="language-plaintext highlighter-rouge">something</code> 通常就是 <code class="language-plaintext highlighter-rouge">id_dsa</code> 或 <code class="language-plaintext highlighter-rouge">id_rsa</code>。有 <code class="language-plaintext highlighter-rouge">.pub</code> 后缀的文件就是公钥,另一个文件则是密钥。假如没有这些文件,或者干脆连 <code class="language-plaintext highlighter-rouge">.ssh</code> 目录都没有,可以用 <code class="language-plaintext highlighter-rouge">ssh-keygen</code> 来创建。该程序在 Linux/Mac 系统上由 SSH 包提供,而在 Windows 上则包含在 MSysGit 包里:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/schacon/.ssh/id_rsa):
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /Users/schacon/.ssh/id_rsa.
Your public key has been saved in /Users/schacon/.ssh/id_rsa.pub.
The key fingerprint is:
43:c5:5b:5f:b1:f1:50:43:ad:20:a6:92:6a:1f:9a:3a schacon@agadorlaptop.local
</code></pre></div></div>
<p>它先要求你确认保存公钥的位置(<code class="language-plaintext highlighter-rouge">.ssh/id_rsa</code>),然后它会让你重复一个密码两次,如果不想在使用公钥的时候输入密码,可以留空。</p>
<p>现在,所有做过这一步的用户都得把它们的公钥给你或者 Git 服务器的管理员(假设 SSH 服务被设定为使用公钥机制)。他们只需要复制 <code class="language-plaintext highlighter-rouge">.pub</code> 文件的内容然后发邮件给管理员。公钥的样子大致如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cat ~/.ssh/id_rsa.pub
ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAklOUpkDHrfHY17SbrmTIpNLTGK9Tjom/BWDSU
GPl+nafzlHDTYW7hdI4yZ5ew18JH4JW9jbhUFrviQzM7xlELEVf4h9lFX5QVkbPppSwg0cda3
Pbv7kOdJ/MTyBlWXFCR+HAo3FXRitBqxiX1nKhXpHAZsMciLq8V6RjsNAQwdsdMFvSlVK/7XA
t3FaoJoAsncM1Q9x5+3V0Ww68/eIFmb1zuUFljQJKprrX88XypNDvjYNby6vw/Pb0rwert/En
mZ+AW4OZPnTPI89ZPmVMLuayrD2cE86Z/il8b+gw3r3+1nKatmIkjn2so1d01QraTlMqVSsbx
NrRFi9wrf+M7Q== schacon@agadorlaptop.local
</code></pre></div></div>
<p>关于在多个操作系统上设立相同 SSH 公钥的教程,可以查阅 GitHub 上有关 SSH 公钥的向导:<code class="language-plaintext highlighter-rouge">http://github.com/guides/providing-your-ssh-key</code>。</p>
<h2 id="架设服务器">架设服务器</h2>
<p>现在我们过一边服务器端架设 SSH 访问的流程。本例将使用 <code class="language-plaintext highlighter-rouge">authorized_keys</code> 方法来给用户授权。我们还将假定使用类似 Ubuntu 这样的标准 Linux 发行版。首先,创建一个名为 ‘git’ 的用户,并为其创建一个 <code class="language-plaintext highlighter-rouge">.ssh</code> 目录。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ sudo adduser git
$ su git
$ cd
$ mkdir .ssh
</code></pre></div></div>
<p>接下来,把开发者的 SSH 公钥添加到这个用户的 <code class="language-plaintext highlighter-rouge">authorized_keys</code> 文件中。假设你通过电邮收到了几个公钥并存到了临时文件里。重复一下,公钥大致看起来是这个样子:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cat /tmp/id_rsa.john.pub
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQCB007n/ww+ouN4gSLKssMxXnBOvf9LGt4L
ojG6rs6hPB09j9R/T17/x4lhJA0F3FR1rP6kYBRsWj2aThGw6HXLm9/5zytK6Ztg3RPKK+4k
Yjh6541NYsnEAZuXz0jTTyAUfrtU3Z5E003C4oxOj6H0rfIF1kKI9MAQLMdpGW1GYEIgS9Ez
Sdfd8AcCIicTDWbqLAcU4UpkaX8KyGlLwsNuuGztobF8m72ALC/nLF6JLtPofwFBlgc+myiv
O7TCUSBdLQlgMVOFq1I2uPWQOkOWQAHukEOmfjy2jctxSDBQ220ymjaNsHT4kgtZg2AYYgPq
dAv8JggJICUvax2T9va5 gsg-keypair
</code></pre></div></div>
<p>只要把它们逐个追加到 <code class="language-plaintext highlighter-rouge">authorized_keys</code> 文件尾部即可:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cat /tmp/id_rsa.john.pub >> ~/.ssh/authorized_keys
$ cat /tmp/id_rsa.josie.pub >> ~/.ssh/authorized_keys
$ cat /tmp/id_rsa.jessica.pub >> ~/.ssh/authorized_keys
</code></pre></div></div>
<p>现在可以用 <code class="language-plaintext highlighter-rouge">--bare</code> 选项运行 <code class="language-plaintext highlighter-rouge">git init</code> 来建立一个裸仓库,这会初始化一个不包含工作目录的仓库。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cd /opt/git
$ mkdir project.git
$ cd project.git
$ git --bare init
</code></pre></div></div>
<p>这时,Join,Josie 或者 Jessica 就可以把它加为远程仓库,推送一个分支,从而把第一个版本的项目文件上传到仓库里了。值得注意的是,每次添加一个新项目都需要通过 shell 登入主机并创建一个裸仓库目录。我们不妨以 <code class="language-plaintext highlighter-rouge">gitserver</code> 作为 <code class="language-plaintext highlighter-rouge">git</code> 用户及项目仓库所在的主机名。如果在网络内部运行该主机,并在 DNS 中设定 <code class="language-plaintext highlighter-rouge">gitserver</code> 指向该主机,那么以下这些命令都是可用的:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># 在 John 的电脑上
$ cd myproject
$ git init
$ git add .
$ git commit -m 'initial commit'
$ git remote add origin git@gitserver:/opt/git/project.git
$ git push origin master
</code></pre></div></div>
<p>这样,其他人的克隆和推送也一样变得很简单:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone git@gitserver:/opt/git/project.git
$ vim README
$ git commit -am 'fix for the README file'
$ git push origin master
</code></pre></div></div>
<p>用这个方法可以很快捷地为少数几个开发者架设一个可读写的 Git 服务。</p>
<p>作为一个额外的防范措施,你可以用 Git 自带的 <code class="language-plaintext highlighter-rouge">git-shell</code> 工具限制 <code class="language-plaintext highlighter-rouge">git</code> 用户的活动范围。只要把它设为 <code class="language-plaintext highlighter-rouge">git</code> 用户登入的 shell,那么该用户就无法使用普通的 bash 或者 csh 什么的 shell 程序。编辑 <code class="language-plaintext highlighter-rouge">/etc/passwd</code> 文件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ sudo vim /etc/passwd
</code></pre></div></div>
<p>在文件末尾,你应该能找到类似这样的行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git:x:1000:1000::/home/git:/bin/sh
</code></pre></div></div>
<p>把 <code class="language-plaintext highlighter-rouge">bin/sh</code> 改为 <code class="language-plaintext highlighter-rouge">/usr/bin/git-shell</code> (或者用 <code class="language-plaintext highlighter-rouge">which git-shell</code> 查看它的实际安装路径)。该行修改后的样子如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git:x:1000:1000::/home/git:/usr/bin/git-shell
</code></pre></div></div>
<p>现在 <code class="language-plaintext highlighter-rouge">git</code> 用户只能用 SSH 连接来推送和获取 Git 仓库,而不能直接使用主机 shell。尝试普通 SSH 登录的话,会看到下面这样的拒绝信息:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ ssh git@gitserver
fatal: What do you think I am? A shell?
Connection to gitserver closed.
</code></pre></div></div>
<h2 id="公共访问">公共访问</h2>
<p>匿名的读取权限该怎么实现呢?也许除了内部私有的项目之外,你还需要托管一些开源项目。或者因为要用一些自动化的服务器来进行编译,或者有一些经常变化的服务器群组,而又不想整天生成新的 SSH 密钥 — 总之,你需要简单的匿名读取权限。</p>
<p>或许对小型的配置来说最简单的办法就是运行一个静态 web 服务,把它的根目录设定为 Git 仓库所在的位置,然后开启本章第一节提到的 <code class="language-plaintext highlighter-rouge">post-update</code> 挂钩。这里继续使用之前的例子。假设仓库处于 <code class="language-plaintext highlighter-rouge">/opt/git</code> 目录,主机上运行着 Apache 服务。重申一下,任何 web 服务程序都可以达到相同效果;作为范例,我们将用一些基本的 Apache 设定来展示大体需要的步骤。</p>
<p>首先,开启挂钩:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cd project.git
$ mv hooks/post-update.sample hooks/post-update
$ chmod a+x hooks/post-update
</code></pre></div></div>
<p>如果用的是 Git 1.6 之前的版本,则可以省略 <code class="language-plaintext highlighter-rouge">mv</code> 命令 — Git 是从较晚的版本才开始在挂钩实例的结尾添加 .sample 后缀名的。</p>
<p><code class="language-plaintext highlighter-rouge">post-update</code> 挂钩是做什么的呢?其内容大致如下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cat .git/hooks/post-update
#!/bin/sh
exec git-update-server-info
</code></pre></div></div>
<p>意思是当通过 SSH 向服务器推送时,Git 将运行这个 <code class="language-plaintext highlighter-rouge">git-update-server-info</code> 命令来更新匿名 HTTP 访问获取数据时所需要的文件。</p>
<p>接下来,在 Apache 配置文件中添加一个 VirtualHost 条目,把文档根目录设为 Git 项目所在的根目录。这里我们假定 DNS 服务已经配置好,会把对 <code class="language-plaintext highlighter-rouge">.gitserver</code> 的请求发送到这台主机:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><VirtualHost *:80>
ServerName git.gitserver
DocumentRoot /opt/git
<Directory /opt/git/>
Order allow, deny
allow from all
</Directory>
</VirtualHost>
</code></pre></div></div>
<p>另外,需要把 <code class="language-plaintext highlighter-rouge">/opt/git</code> 目录的 Unix 用户组设定为 <code class="language-plaintext highlighter-rouge">www-data</code> ,这样 web 服务才可以读取仓库内容,因为运行 CGI 脚本的 Apache 实例进程默认就是以该用户的身份起来的:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ chgrp -R www-data /opt/git
</code></pre></div></div>
<p>重启 Apache 之后,就可以通过项目的 URL 来克隆该目录下的仓库了。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone http://git.gitserver/project.git
</code></pre></div></div>
<p>这一招可以让你在几分钟内为相当数量的用户架设好基于 HTTP 的读取权限。另一个提供非授权访问的简单方法是开启一个 Git 守护进程,不过这将要求该进程作为后台进程常驻 — 接下来的这一节就要讨论这方面的细节。</p>
<h2 id="gitweb">GitWeb</h2>
<p>现在我们的项目已经有了可读可写和只读的连接方式,不过如果能有一个简单的 web 界面访问就更好了。Git 自带一个叫做 GitWeb 的 CGI 脚本,运行效果可以到 <code class="language-plaintext highlighter-rouge">http://git.kernel.org</code> 这样的站点体验下(见图 4-1)。</p>
<p><a href="/uploads/2012/09/18333fig0401-tn.png"><img src="/uploads/2012/09/18333fig0401-tn.png" alt="图 4-1" /></a>
Figure 4-1. 基于网页的 GitWeb 用户界面</p>
<p>如果想看看自己项目的效果,不妨用 Git 自带的一个命令,可以使用类似 <code class="language-plaintext highlighter-rouge">lighttpd</code> 或 <code class="language-plaintext highlighter-rouge">webrick</code> 这样轻量级的服务器启动一个临时进程。如果是在 Linux 主机上,通常都预装了 <code class="language-plaintext highlighter-rouge">lighttpd</code> ,可以到项目目录中键入 <code class="language-plaintext highlighter-rouge">git instaweb</code> 来启动。如果用的是 Mac ,Leopard 预装了 Ruby,所以 <code class="language-plaintext highlighter-rouge">webrick</code> 应该是最好的选择。如果要用 lighttpd 以外的程序来启动 <code class="language-plaintext highlighter-rouge">git instaweb</code>,可以通过 <code class="language-plaintext highlighter-rouge">--httpd</code> 选项指定:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git instaweb --httpd=webrick
[2009-02-21 10:02:21] INFO WEBrick 1.3.1
[2009-02-21 10:02:21] INFO ruby 1.8.6 (2008-03-03) [universal-darwin9.0]
</code></pre></div></div>
<p>这会在 1234 端口开启一个 HTTPD 服务,随之在浏览器中显示该页,十分简单。关闭服务时,只需在原来的命令后面加上 <code class="language-plaintext highlighter-rouge">--stop</code> 选项就可以了:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git instaweb --httpd=webrick --stop
</code></pre></div></div>
<p>如果需要为团队或者某个开源项目长期运行 GitWeb,那么 CGI 脚本就要由正常的网页服务来运行。一些 Linux 发行版可以通过 <code class="language-plaintext highlighter-rouge">apt</code> 或 <code class="language-plaintext highlighter-rouge">yum</code> 安装一个叫做 <code class="language-plaintext highlighter-rouge">gitweb</code> 的软件包,不妨首先尝试一下。我们将快速介绍一下手动安装 GitWeb 的流程。首先,你需要 Git 的源码,其中带有 GitWeb,并能生成定制的 CGI 脚本:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone git://git.kernel.org/pub/scm/git/git.git
$ cd git/
$ make GITWEB_PROJECTROOT="/opt/git" \
prefix=/usr gitweb/gitweb.cgi
$ sudo cp -Rf gitweb /var/www/
</code></pre></div></div>
<p>注意,通过指定 <code class="language-plaintext highlighter-rouge">GITWEB_PROJECTROOT</code> 变量告诉编译命令 Git 仓库的位置。然后,设置 Apache 以 CGI 方式运行该脚本,添加一个 VirtualHost 配置:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><VirtualHost *:80>
ServerName gitserver
DocumentRoot /var/www/gitweb
<Directory /var/www/gitweb>
Options ExecCGI +FollowSymLinks +SymLinksIfOwnerMatch
AllowOverride All
order allow,deny
Allow from all
AddHandler cgi-script cgi
DirectoryIndex gitweb.cgi
</Directory>
</VirtualHost>
</code></pre></div></div>
<p>不难想象,GitWeb 可以使用任何兼容 CGI 的网页服务来运行;如果偏向使用其他 web 服务器,配置也不会很麻烦。现在,通过 <code class="language-plaintext highlighter-rouge">http://gitserver</code> 就可以在线访问仓库了,在 <code class="language-plaintext highlighter-rouge">http://git.server</code> 上还可以通过 HTTP 克隆和获取仓库的内容。</p>
<h2 id="gitosis">Gitosis</h2>
<p>把所有用户的公钥保存在 <code class="language-plaintext highlighter-rouge">authorized_keys</code> 文件的做法,只能凑和一阵子,当用户数量达到几百人的规模时,管理起来就会十分痛苦。每次改删用户都必须登录服务器不去说,这种做法还缺少必要的权限管理 — 每个人都对所有项目拥有完整的读写权限。</p>
<p>幸好我们还可以选择应用广泛的 Gitosis 项目。简单地说,Gitosis 就是一套用来管理 <code class="language-plaintext highlighter-rouge">authorized_keys</code> 文件和实现简单连接限制的脚本。有趣的是,用来添加用户和设定权限的并非通过网页程序,而只是管理一个特殊的 Git 仓库。你只需要在这个特殊仓库内做好相应的设定,然后推送到服务器上,Gitosis 就会随之改变运行策略,听起来就很酷,对吧?</p>
<p>Gitosis 的安装算不上傻瓜化,但也不算太难。用 Linux 服务器架设起来最简单 — 以下例子中,我们使用装有 Ubuntu 8.10 系统的服务器。</p>
<p>Gitosis 的工作依赖于某些 Python 工具,所以首先要安装 Python 的 setuptools 包,在 Ubuntu 上称为 python-setuptools:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ apt-get install python-setuptools
</code></pre></div></div>
<p>接下来,从 Gitosis 项目主页克隆并安装:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone git://eagain.net/gitosis.git
$ cd gitosis
$ sudo python setup.py install
</code></pre></div></div>
<p>这会安装几个供 Gitosis 使用的工具。默认 Gitosis 会把 <code class="language-plaintext highlighter-rouge">/home/git</code> 作为存储所有 Git 仓库的根目录,这没什么不好,不过我们之前已经把项目仓库都放在 <code class="language-plaintext highlighter-rouge">/opt/git</code> 里面了,所以为方便起见,我们可以做一个符号连接,直接划转过去,而不必重新配置:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ ln -s /opt/git /home/git/repositories
</code></pre></div></div>
<p>Gitosis 将会帮我们管理用户公钥,所以先把当前控制文件改名备份,以便稍后重新添加,准备好让 Gitosis 自动管理 <code class="language-plaintext highlighter-rouge">authorized_keys</code> 文件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ mv /home/git/.ssh/authorized_keys /home/git/.ssh/ak.bak
</code></pre></div></div>
<p>接下来,如果之前把 <code class="language-plaintext highlighter-rouge">git</code> 用户的登录 shell 改为 <code class="language-plaintext highlighter-rouge">git-shell</code> 命令的话,先恢复 ‘git’ 用户的登录 shell。改过之后,大家仍然无法通过该帐号登录(译注:因为 <code class="language-plaintext highlighter-rouge">authorized_keys</code> 文件已经没有了。),不过不用担心,这会交给 Gitosis 来实现。所以现在先打开 <code class="language-plaintext highlighter-rouge">/etc/passwd</code> 文件,把这行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git:x:1000:1000::/home/git:/usr/bin/git-shell
</code></pre></div></div>
<p>改回:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git:x:1000:1000::/home/git:/bin/sh
</code></pre></div></div>
<p>好了,现在可以初始化 Gitosis 了。你可以用自己的公钥执行 <code class="language-plaintext highlighter-rouge">gitosis-init</code> 命令,要是公钥不在服务器上,先临时复制一份:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ sudo -H -u git gitosis-init < /tmp/id_dsa.pub
Initialized empty Git repository in /opt/git/gitosis-admin.git/
Reinitialized existing Git repository in /opt/git/gitosis-admin.git/
</code></pre></div></div>
<p>这样该公钥的拥有者就能修改用于配置 Gitosis 的那个特殊 Git 仓库了。接下来,需要手工对该仓库中的 <code class="language-plaintext highlighter-rouge">post-update</code> 脚本加上可执行权限:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ sudo chmod 755 /opt/git/gitosis-admin.git/hooks/post-update
</code></pre></div></div>
<p>基本上就算是好了。如果设定过程没出什么差错,现在可以试一下用初始化 Gitosis 的公钥的拥有者身份 SSH 登录服务器,应该会看到类似下面这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ ssh git@gitserver
PTY allocation request failed on channel 0
fatal: unrecognized command 'gitosis-serve schacon@quaternion'
Connection to gitserver closed.
</code></pre></div></div>
<p>说明 Gitosis 认出了该用户的身份,但由于没有运行任何 Git 命令,所以它切断了连接。那么,现在运行一个实际的 Git 命令 — 克隆 Gitosis 的控制仓库:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># 在你本地计算机上
$ git clone git@gitserver:gitosis-admin.git
</code></pre></div></div>
<p>这会得到一个名为 <code class="language-plaintext highlighter-rouge">gitosis-admin</code> 的工作目录,主要由两部分组成:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cd gitosis-admin
$ find .
./gitosis.conf
./keydir
./keydir/scott.pub
</code></pre></div></div>
<p><code class="language-plaintext highlighter-rouge">gitosis.conf</code> 文件是用来设置用户、仓库和权限的控制文件。<code class="language-plaintext highlighter-rouge">keydir</code> 目录则是保存所有具有访问权限用户公钥的地方— 每人一个。在 <code class="language-plaintext highlighter-rouge">keydir</code> 里的文件名(比如上面的 <code class="language-plaintext highlighter-rouge">scott.pub</code>)应该跟你的不一样 — Gitosis 会自动从使用 <code class="language-plaintext highlighter-rouge">gitosis-init</code> 脚本导入的公钥尾部的描述中获取该名字。</p>
<p>看一下 <code class="language-plaintext highlighter-rouge">gitosis.conf</code> 文件的内容,它应该只包含与刚刚克隆的 <code class="language-plaintext highlighter-rouge">gitosis-admin</code> 相关的信息:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cat gitosis.conf
[gitosis]
[group gitosis-admin]
writable = gitosis-admin
members = scott
</code></pre></div></div>
<p>它显示用户 <code class="language-plaintext highlighter-rouge">scott</code> — 初始化 Gitosis 公钥的拥有者 — 是唯一能管理 <code class="language-plaintext highlighter-rouge">gitosis-admin</code> 项目的人。</p>
<p>现在我们来添加一个新项目。为此我们要建立一个名为 <code class="language-plaintext highlighter-rouge">mobile</code> 的新段落,在其中罗列手机开发团队的开发者,以及他们拥有写权限的项目。由于 ‘scott’ 是系统中的唯一用户,我们把他设为唯一用户,并允许他读写名为 <code class="language-plaintext highlighter-rouge">iphone_project</code> 的新项目:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[group mobile]
writable = iphone_project
members = scott
</code></pre></div></div>
<p>修改完之后,提交 <code class="language-plaintext highlighter-rouge">gitosis-admin</code> 里的改动,并推送到服务器使其生效:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git commit -am 'add iphone_project and mobile group'
[master]: created 8962da8: "changed name"
1 files changed, 4 insertions(+), 0 deletions(-)
$ git push
Counting objects: 5, done.
Compressing objects: 100% (2/2), done.
Writing objects: 100% (3/3), 272 bytes, done.
Total 3 (delta 1), reused 0 (delta 0)
To git@gitserver:/opt/git/gitosis-admin.git
fb27aec..8962da8 master -> master
</code></pre></div></div>
<p>在新工程 <code class="language-plaintext highlighter-rouge">iphone_project</code> 里首次推送数据到服务器前,得先设定该服务器地址为远程仓库。但你不用事先到服务器上手工创建该项目的裸仓库— Gitosis 会在第一次遇到推送时自动创建:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git remote add origin git@gitserver:iphone_project.git
$ git push origin master
Initialized empty Git repository in /opt/git/iphone_project.git/
Counting objects: 3, done.
Writing objects: 100% (3/3), 230 bytes, done.
Total 3 (delta 0), reused 0 (delta 0)
To git@gitserver:iphone_project.git
* [new branch] master -> master
</code></pre></div></div>
<p>请注意,这里不用指明完整路径(实际上,如果加上反而没用),只需要一个冒号加项目名字即可 — Gitosis 会自动帮你映射到实际位置。</p>
<p>要和朋友们在一个项目上协同工作,就得重新添加他们的公钥。不过这次不用在服务器上一个一个手工添加到 <code class="language-plaintext highlighter-rouge">~/.ssh/authorized_keys</code> 文件末端,而只需管理 <code class="language-plaintext highlighter-rouge">keydir</code> 目录中的公钥文件。文件的命名将决定在 <code class="language-plaintext highlighter-rouge">gitosis.conf</code> 中对用户的标识。现在我们为 John,Josie 和 Jessica 添加公钥:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cp /tmp/id_rsa.john.pub keydir/john.pub
$ cp /tmp/id_rsa.josie.pub keydir/josie.pub
$ cp /tmp/id_rsa.jessica.pub keydir/jessica.pub
</code></pre></div></div>
<p>然后把他们都加进 ‘mobile’ 团队,让他们对 <code class="language-plaintext highlighter-rouge">iphone_project</code> 具有读写权限:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[group mobile]
writable = iphone_project
members = scott john josie jessica
</code></pre></div></div>
<p>如果你提交并推送这个修改,四个用户将同时具有该项目的读写权限。</p>
<p>Gitosis 也具有简单的访问控制功能。如果想让 John 只有读权限,可以这样做:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[group mobile]
writable = iphone_project
members = scott josie jessica
[group mobile_ro]
readonly = iphone_project
members = john
</code></pre></div></div>
<p>现在 John 可以克隆和获取更新,但 Gitosis 不会允许他向项目推送任何内容。像这样的组可以随意创建,多少不限,每个都可以包含若干不同的用户和项目。甚至还可以指定某个组为成员之一(在组名前加上 <code class="language-plaintext highlighter-rouge">@</code> 前缀),自动继承该组的成员:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[group mobile_committers]
members = scott josie jessica
[group mobile]
writable = iphone_project
members = @mobile_committers
[group mobile_2]
writable = another_iphone_project
members = @mobile_committers john
</code></pre></div></div>
<p>如果遇到意外问题,试试看把 <code class="language-plaintext highlighter-rouge">loglevel=DEBUG</code> 加到 <code class="language-plaintext highlighter-rouge">[gitosis]</code> 的段落(译注:把日志设置为调试级别,记录更详细的运行信息。)。如果一不小心搞错了配置,失去了推送权限,也可以手工修改服务器上的 <code class="language-plaintext highlighter-rouge">/home/git/.gitosis.conf</code> 文件 — Gitosis 实际是从该文件读取信息的。它在得到推送数据时,会把新的 <code class="language-plaintext highlighter-rouge">gitosis.conf</code> 存到该路径上。所以如果你手工编辑该文件的话,它会一直保持到下次向 <code class="language-plaintext highlighter-rouge">gitosis-admin</code> 推送新版本的配置内容为止。</p>
<h2 id="gitolite">Gitolite</h2>
<p>Note: the latest copy of this section of the ProGit book is always available within the <a href="http://github.com/sitaramc/gitolite/blob/pu/doc/progit-article.mkd">gitolite documentation</a>. The author would also like to humbly state that, while this section is accurate, and <em>can</em> (and often <em>has</em>) been used to install gitolite without reading any other documentation, it is of necessity not complete, and cannot completely replace the enormous amount of documentation that gitolite comes with.</p>
<p>Git has started to become very popular in corporate environments, which tend to have some additional requirements in terms of access control. Gitolite was originally created to help with those requirements, but it turns out that it’s equally useful in the open source world: the Fedora Project controls access to their package management repositories (over 10,000 of them!) using gitolite, and this is probably the largest gitolite installation anywhere too.</p>
<p>Gitolite allows you to specify permissions not just by repository, but also by branch or tag names within each repository. That is, you can specify that certain people (or groups of people) can only push certain “refs” (branches or tags) but not others.</p>
<h3 id="installing">Installing</h3>
<p>Installing Gitolite is very easy, even if you don’t read the extensive documentation that comes with it. You need an account on a Unix server of some kind; various Linux flavours, and Solaris 10, have been tested. You do not need root access, assuming git, perl, and an openssh compatible ssh server are already installed. In the examples below, we will use the <code class="language-plaintext highlighter-rouge">gitolite</code> account on a host called <code class="language-plaintext highlighter-rouge">gitserver</code>.</p>
<p>Gitolite is somewhat unusual as far as “server” software goes – access is via ssh, and so every userid on the server is a potential “gitolite host”. As a result, there is a notion of “installing” the software itself, and then “setting up” a user as a “gitolite host”.</p>
<p>Gitolite has 4 methods of installation. People using Fedora or Debian systems can obtain an RPM or a DEB and install that. People with root access can install it manually. In these two methods, any user on the system can then become a “gitolite host”.</p>
<p>People without root access can install it within their own userids. And finally, gitolite can be installed by running a script <em>on the workstation</em>, from a bash shell. (Even the bash that comes with msysgit will do, in case you’re wondering.)</p>
<p>We will describe this last method in this article; for the other methods please see the documentation.</p>
<p>You start by obtaining public key based access to your server, so that you can log in from your workstation to the server without getting a password prompt. The following method works on Linux; for other workstation OSs you may have to do this manually. We assume you already had a key pair generated using <code class="language-plaintext highlighter-rouge">ssh-keygen</code>.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ ssh-copy-id -i ~/.ssh/id_rsa gitolite@gitserver
</code></pre></div></div>
<p>This will ask you for the password to the gitolite account, and then set up public key access. This is <strong>essential</strong> for the install script, so check to make sure you can run a command without getting a password prompt:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ ssh gitolite@gitserver pwd
/home/gitolite
</code></pre></div></div>
<p>Next, you clone Gitolite from the project’s main site and run the “easy install” script (the third argument is your name as you would like it to appear in the resulting gitolite-admin repository):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone git://github.com/sitaramc/gitolite
$ cd gitolite/src
$ ./gl-easy-install -q gitolite gitserver sitaram
</code></pre></div></div>
<p>And you’re done! Gitolite has now been installed on the server, and you now have a brand new repository called <code class="language-plaintext highlighter-rouge">gitolite-admin</code> in the home directory of your workstation. You administer your gitolite setup by making changes to this repository and pushing.</p>
<p>That last command does produce a fair amount of output, which might be interesting to read. Also, the first time you run this, a new keypair is created; you will have to choose a passphrase or hit enter for none. Why a second keypair is needed, and how it is used, is explained in the “ssh troubleshooting” document that comes with Gitolite. (Hey the documentation has to be good for <em>something</em>!)</p>
<p>Repos named <code class="language-plaintext highlighter-rouge">gitolite-admin</code> and <code class="language-plaintext highlighter-rouge">testing</code> are created on the server by default. If you wish to clone either of these locally (from an account that has SSH console access to the gitolite account via <em>authorized_keys</em>), type:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone gitolite:gitolite-admin
$ git clone gitolite:testing
</code></pre></div></div>
<p>To clone these same repos from any other account:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone gitolite@servername:gitolite-admin
$ git clone gitolite@servername:testing
</code></pre></div></div>
<h3 id="customising-the-install">Customising the Install</h3>
<p>While the default, quick, install works for most people, there are some ways to customise the install if you need to. If you omit the <code class="language-plaintext highlighter-rouge">-q</code> argument, you get a “verbose” mode install – detailed information on what the install is doing at each step. The verbose mode also allows you to change certain server-side parameters, such as the location of the actual repositories, by editing an “rc” file that the server uses. This “rc” file is liberally commented so you should be able to make any changes you need quite easily, save it, and continue. This file also contains various settings that you can change to enable or disable some of gitolite’s advanced features.</p>
<h3 id="config-file-and-access-control-rules">Config File and Access Control Rules</h3>
<p>Once the install is done, you switch to the <code class="language-plaintext highlighter-rouge">gitolite-admin</code> repository (placed in your HOME directory) and poke around to see what you got:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cd ~/gitolite-admin/
$ ls
conf/ keydir/
$ find conf keydir -type f
conf/gitolite.conf
keydir/sitaram.pub
$ cat conf/gitolite.conf
#gitolite conf
# please see conf/example.conf for details on syntax and features
repo gitolite-admin
RW+ = sitaram
repo testing
RW+ = @all
</code></pre></div></div>
<p>Notice that “sitaram” (the last argument in the <code class="language-plaintext highlighter-rouge">gl-easy-install</code> command you gave earlier) has read-write permissions on the <code class="language-plaintext highlighter-rouge">gitolite-admin</code> repository as well as a public key file of the same name.</p>
<p>The config file syntax for gitolite is liberally documented in <code class="language-plaintext highlighter-rouge">conf/example.conf</code>, so we’ll only mention some highlights here.</p>
<p>You can group users or repos for convenience. The group names are just like macros; when defining them, it doesn’t even matter whether they are projects or users; that distinction is only made when you <em>use</em> the “macro”.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>@oss_repos = linux perl rakudo git gitolite
@secret_repos = fenestra pear
@admins = scott # Adams, not Chacon, sorry :)
@interns = ashok # get the spelling right, Scott!
@engineers = sitaram dilbert wally alice
@staff = @admins @engineers @interns
</code></pre></div></div>
<p>You can control permissions at the “ref” level. In the following example, interns can only push the “int” branch. Engineers can push any branch whose name starts with “eng-“, and tags that start with “rc” followed by a digit. And the admins can do anything (including rewind) to any ref.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>repo @oss_repos
RW int$ = @interns
RW eng- = @engineers
RW refs/tags/rc[0-9] = @engineers
RW+ = @admins
</code></pre></div></div>
<p>The expression after the <code class="language-plaintext highlighter-rouge">RW</code> or <code class="language-plaintext highlighter-rouge">RW+</code> is a regular expression (regex) that the refname (ref) being pushed is matched against. So we call it a “refex”! Of course, a refex can be far more powerful than shown here, so don’t overdo it if you’re not comfortable with perl regexes.</p>
<p>Also, as you probably guessed, Gitolite prefixes <code class="language-plaintext highlighter-rouge">refs/heads/</code> as a syntactic convenience if the refex does not begin with <code class="language-plaintext highlighter-rouge">refs/</code>.</p>
<p>An important feature of the config file’s syntax is that all the rules for a repository need not be in one place. You can keep all the common stuff together, like the rules for all <code class="language-plaintext highlighter-rouge">oss_repos</code> shown above, then add specific rules for specific cases later on, like so:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>repo gitolite
RW+ = sitaram
</code></pre></div></div>
<p>That rule will just get added to the ruleset for the <code class="language-plaintext highlighter-rouge">gitolite</code> repository.</p>
<p>At this point you might be wondering how the access control rules are actually applied, so let’s go over that briefly.</p>
<p>There are two levels of access control in gitolite. The first is at the repository level; if you have read (or write) access to <em>any</em> ref in the repository, then you have read (or write) access to the repository.</p>
<p>The second level, applicable only to “write” access, is by branch or tag within a repository. The username, the access being attempted (<code class="language-plaintext highlighter-rouge">W</code> or <code class="language-plaintext highlighter-rouge">+</code>), and the refname being updated are known. The access rules are checked in order of appearance in the config file, looking for a match for this combination (but remember that the refname is regex-matched, not merely string-matched). If a match is found, the push succeeds. A fallthrough results in access being denied.</p>
<h3 id="advanced-access-control-with-deny-rules">Advanced Access Control with “deny” rules</h3>
<p>So far, we’ve only seen permissions to be one or <code class="language-plaintext highlighter-rouge">R</code>, <code class="language-plaintext highlighter-rouge">RW</code>, or <code class="language-plaintext highlighter-rouge">RW+</code>. However, gitolite allows another permission: <code class="language-plaintext highlighter-rouge">-</code>, standing for “deny”. This gives you a lot more power, at the expense of some complexity, because now fallthrough is not the <em>only</em> way for access to be denied, so the <em>order of the rules now matters</em>!</p>
<p>Let us say, in the situation above, we want engineers to be able to rewind any branch <em>except</em> master and integ. Here’s how to do that:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> RW master integ = @engineers
- master integ = @engineers
RW+ = @engineers
</code></pre></div></div>
<p>Again, you simply follow the rules top down until you hit a match for your access mode, or a deny. Non-rewind push to master or integ is allowed by the first rule. A rewind push to those refs does not match the first rule, drops down to the second, and is therefore denied. Any push (rewind or non-rewind) to refs other than master or integ won’t match the first two rules anyway, and the third rule allows it.</p>
<h3 id="restricting-pushes-by-files-changed">Restricting pushes by files changed</h3>
<p>In addition to restricting what branches a user can push changes to, you can also restrict what files they are allowed to touch. For example, perhaps the Makefile (or some other program) is really not supposed to be changed by just anyone, because a lot of things depend on it or would break if the changes are not done <em>just right</em>. You can tell gitolite:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>repo foo
RW = @junior_devs @senior_devs
RW NAME/ = @senior_devs
- NAME/Makefile = @junior_devs
RW NAME/ = @junior_devs
</code></pre></div></div>
<p>This powerful feature is documented in <code class="language-plaintext highlighter-rouge">conf/example.conf</code>.</p>
<h3 id="personal-branches">Personal Branches</h3>
<p>Gitolite also has a feature called “personal branches” (or rather, “personal branch namespace”) that can be very useful in a corporate environment.</p>
<p>A lot of code exchange in the git world happens by “please pull” requests. In a corporate environment, however, unauthenticated access is a no-no, and a developer workstation cannot do authentication, so you have to push to the central server and ask someone to pull from there.</p>
<p>This would normally cause the same branch name clutter as in a centralised VCS, plus setting up permissions for this becomes a chore for the admin.</p>
<p>Gitolite lets you define a “personal” or “scratch” namespace prefix for each developer (for example, <code class="language-plaintext highlighter-rouge">refs/personal/<devname>/*</code>); see the “personal branches” section in <code class="language-plaintext highlighter-rouge">doc/3-faq-tips-etc.mkd</code> for details.</p>
<h3 id="wildcard-repositories">“Wildcard” repositories</h3>
<p>Gitolite allows you to specify repositories with wildcards (actually perl regexes), like, for example <code class="language-plaintext highlighter-rouge">assignments/s[0-9][0-9]/a[0-9][0-9]</code>, to pick a random example. This is a <em>very</em> powerful feature, which has to be enabled by setting <code class="language-plaintext highlighter-rouge">$GL_WILDREPOS = 1;</code> in the rc file. It allows you to assign a new permission mode (“C”) which allows users to create repositories based on such wild cards, automatically assigns ownership to the specific user who created it, allows him/her to hand out R and RW permissions to other users to collaborate, etc. This feature is documented in <code class="language-plaintext highlighter-rouge">doc/4-wildcard-repositories.mkd</code>.</p>
<h3 id="other-features">Other Features</h3>
<p>We’ll round off this discussion with a sampling of other features, all of which, and many more, are described in great detail in the “faqs, tips, etc” and other documents.</p>
<p><strong>Logging</strong>: Gitolite logs all successful accesses. If you were somewhat relaxed about giving people rewind permissions (<code class="language-plaintext highlighter-rouge">RW+</code>) and some kid blew away “master”, the log file is a life saver, in terms of easily and quickly finding the SHA that got hosed.</p>
<p><strong>Git outside normal PATH</strong>: One extremely useful convenience feature in gitolite is support for git installed outside the normal <code class="language-plaintext highlighter-rouge">$PATH</code> (this is more common than you think; some corporate environments or even some hosting providers refuse to install things system-wide and you end up putting them in your own directories). Normally, you are forced to make the <em>client-side</em> git aware of this non-standard location of the git binaries in some way. With gitolite, just choose a verbose install and set <code class="language-plaintext highlighter-rouge">$GIT_PATH</code> in the “rc” files. No client-side changes are required after that :-)</p>
<p><strong>Access rights reporting</strong>: Another convenient feature is what happens when you try and just ssh to the server. Gitolite shows you what repos you have access to, and what that access may be. Here’s an example:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> hello sitaram, the gitolite version here is v1.5.4-19-ga3397d4
the gitolite config gives you the following access:
R anu-wsd
R entrans
R W git-notes
R W gitolite
R W gitolite-admin
R indic_web_input
R shreelipi_converter
</code></pre></div></div>
<p><strong>Delegation</strong>: For really large installations, you can delegate responsibility for groups of repositories to various people and have them manage those pieces independently. This reduces the load on the main admin, and makes him less of a bottleneck. This feature has its own documentation file in the <code class="language-plaintext highlighter-rouge">doc/</code> directory.</p>
<p><strong>Gitweb support</strong>: Gitolite supports gitweb in several ways. You can specify which repos are visible via gitweb. You can set the “owner” and “description” for gitweb from the gitolite config file. Gitweb has a mechanism for you to implement access control based on HTTP authentication, so you can make it use the “compiled” config file that gitolite produces, which means the same access control rules (for read access) apply for gitweb and gitolite.</p>
<p><strong>Mirroring</strong>: Gitolite can help you maintain multiple mirrors, and switch between them easily if the primary server goes down.</p>
<h2 id="git-守护进程">Git 守护进程</h2>
<p>对于提供公共的,非授权的只读访问,我们可以抛弃 HTTP 协议,改用 Git 自己的协议,这主要是出于性能和速度的考虑。Git 协议远比 HTTP 协议高效,因而访问速度也快,所以它能节省很多用户的时间。</p>
<p>重申一下,这一点只适用于非授权的只读访问。如果建在防火墙之外的服务器上,那么它所提供的服务应该只是那些公开的只读项目。如果是在防火墙之内的服务器上,可用于支撑大量参与人员或自动系统(用于持续集成或编译的主机)只读访问的项目,这样可以省去逐一配置 SSH 公钥的麻烦。</p>
<p>但不管哪种情形,Git 协议的配置设定都很简单。基本上,只要以守护进程的形式运行该命令即可:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git daemon --reuseaddr --base-path=/opt/git/ /opt/git/
</code></pre></div></div>
<p>这里的 <code class="language-plaintext highlighter-rouge">--reuseaddr</code> 选项表示在重启服务前,不等之前的连接超时就立即重启。而 <code class="language-plaintext highlighter-rouge">--base-path</code> 选项则允许克隆项目时不必给出完整路径。最后面的路径告诉 Git 守护进程允许开放给用户访问的仓库目录。假如有防火墙,则需要为该主机的 9418 端口设置为允许通信。</p>
<p>以守护进程的形式运行该进程的方法有很多,但主要还得看用的是什么操作系统。在 Ubuntu 主机上,可以用 Upstart 脚本达成。编辑该文件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>/etc/event.d/local-git-daemon
</code></pre></div></div>
<p>加入以下内容:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>start on startup
stop on shutdown
exec /usr/bin/git daemon \
--user=git --group=git \
--reuseaddr \
--base-path=/opt/git/ \
/opt/git/
respawn
</code></pre></div></div>
<p>出于安全考虑,强烈建议用一个对仓库只有读取权限的用户身份来运行该进程 — 只需要简单地新建一个名为 <code class="language-plaintext highlighter-rouge">git-ro</code> 的用户(译注:新建用户默认对仓库文件不具备写权限,但这取决于仓库目录的权限设定。务必确认 <code class="language-plaintext highlighter-rouge">git-ro</code> 对仓库只能读不能写。),并用它的身份来启动进程。这里为了简化,后面我们还是用之前运行 Gitosis 的用户 ‘git’。</p>
<p>这样一来,当你重启计算机时,Git 进程也会自动启动。要是进程意外退出或者被杀掉,也会自行重启。在设置完成后,不重启计算机就启动该守护进程,可以运行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>initctl start local-git-daemon
</code></pre></div></div>
<p>而在其他操作系统上,可以用 <code class="language-plaintext highlighter-rouge">xinetd</code>,或者 <code class="language-plaintext highlighter-rouge">sysvinit</code> 系统的脚本,或者其他类似的脚本 — 只要能让那个命令变为守护进程并可监控。</p>
<p>接下来,我们必须告诉 Gitosis 哪些仓库允许通过 Git 协议进行匿名只读访问。如果每个仓库都设有各自的段落,可以分别指定是否允许 Git 进程开放给用户匿名读取。比如允许通过 Git 协议访问 iphone_project,可以把下面两行加到 <code class="language-plaintext highlighter-rouge">gitosis.conf</code> 文件的末尾:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[repo iphone_project]
daemon = yes
</code></pre></div></div>
<p>在提交和推送完成后,运行中的 Git 守护进程就会响应来自 9418 端口对该项目的访问请求。</p>
<p>如果不考虑 Gitosis,单单起了 Git 守护进程的话,就必须到每一个允许匿名只读访问的仓库目录内,创建一个特殊名称的空文件作为标志:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cd /path/to/project.git
$ touch git-daemon-export-ok
</code></pre></div></div>
<p>该文件的存在,表明允许 Git 守护进程开放对该项目的匿名只读访问。</p>
<p>Gitosis 还能设定哪些项目允许放在 GitWeb 上显示。先打开 GitWeb 的配置文件 <code class="language-plaintext highlighter-rouge">/etc/gitweb.conf</code>,添加以下四行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$projects_list = "/home/git/gitosis/projects.list";
$projectroot = "/home/git/repositories";
$export_ok = "git-daemon-export-ok";
@git_base_url_list = ('git://gitserver');
</code></pre></div></div>
<p>接下来,只要配置各个项目在 Gitosis 中的 <code class="language-plaintext highlighter-rouge">gitweb</code> 参数,便能达成是否允许 GitWeb 用户浏览该项目。比如,要让 iphone_project 项目在 GitWeb 里出现,把 <code class="language-plaintext highlighter-rouge">repo</code> 的设定改成下面的样子:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[repo iphone_project]
daemon = yes
gitweb = yes
</code></pre></div></div>
<p>在提交并推送过之后,GitWeb 就会自动开始显示 iphone_project 项目的细节和历史。</p>
<h2 id="git-托管服务">Git 托管服务</h2>
<p>如果不想经历自己架设 Git 服务器的麻烦,网络上有几个专业的仓库托管服务可供选择。这样做有几大优点:托管账户的建立通常比较省时,方便项目的启动,而且不涉及服务器的维护和监控。即使内部创建并运行着自己的服务器,同时为开源项目提供一个公共托管站点还是有好处的 — 让开源社区更方便地找到该项目,并给予帮助。</p>
<p>目前,可供选择的托管服务数量繁多,各有利弊。在 Git 官方 wiki 上的 Githosting 页面有一个最新的托管服务列表:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>http://git.or.cz/gitwiki/GitHosting
</code></pre></div></div>
<p>由于本书无法全部一一介绍,而本人(译注:指本书作者 Scott Chacon。)刚好在其中一家公司工作,所以接下来我们将会介绍如何在 GitHub 上建立新账户并启动项目。至于其他托管服务大体也是这么一个过程,基本的想法都是差不多的。</p>
<p>GitHub 是目前为止最大的开源 Git 托管服务,并且还是少数同时提供公共代码和私有代码托管服务的站点之一,所以你可以在上面同时保存开源和商业代码。事实上,本书就是放在 GitHub 上合作编著的。(译注:本书的翻译也是放在 GitHub 上广泛协作的。)</p>
<h3 id="github">GitHub</h3>
<p>GitHub 和大多数的代码托管站点在处理项目命名空间的方式上略有不同。GitHub 的设计更侧重于用户,而不是完全基于项目。也就是说,如果我在 GitHub 上托管一个名为 <code class="language-plaintext highlighter-rouge">grit</code> 的项目的话,它的地址不会是 <code class="language-plaintext highlighter-rouge">github.com/grit</code>,而是按在用户底下 <code class="language-plaintext highlighter-rouge">github.com/shacon/grit</code> (译注:本书作者 Scott Chacon 在 GitHub 上的用户名是 <code class="language-plaintext highlighter-rouge">shacon</code>。)。不存在所谓某个项目的官方版本,所以假如第一作者放弃了某个项目,它可以无缝转移到其它用户的名下。</p>
<p>GitHub 同时也是一个向使用私有仓库的用户收取费用的商业公司,但任何人都可以方便快捷地申请到一个免费账户,并在上面托管数量不限的开源项目。接下来我们快速介绍一下 GitHub 的基本使用。</p>
<h3 id="建立新账户">建立新账户</h3>
<p>首先注册一个免费账户。访问 Pricing and Signup 页面 <code class="language-plaintext highlighter-rouge">http://github.com/plans</code> 并点击 Free acount 里的 Sign Up 按钮(见图 4-2),进入注册页面。</p>
<p><a href="/uploads/2012/09/18333fig0402-tn.png"><img src="/uploads/2012/09/18333fig0402-tn.png" alt="图 4-2" /></a>
图 4-2. GitHub 服务简介页面</p>
<p>选择一个系统中尚未使用的用户名,提供一个与之相关联的电邮地址,并输入密码(见图 4-3):</p>
<p><a href="/uploads/2012/09/18333fig0403-tn.png"><img src="/uploads/2012/09/18333fig0403-tn.png" alt="图 4-3" /></a>
图 4-3. GitHub 用户注册表单</p>
<p>如果方便,现在就可以提供你的 SSH 公钥。我们在前文的”小型安装” 一节介绍过生成新公钥的方法。把新生成的公钥复制粘贴到 SSH Public Key 文本框中即可。要是对生成公钥的步骤不太清楚,也可以点击 “explain ssh keys” 链接,会显示各个主流操作系统上完成该步骤的介绍。点击 “I agree,sign me up” 按钮完成用户注册,并转到该用户的 dashboard 页面(见图 4-4):</p>
<p><a href="/uploads/2012/09/18333fig0404-tn.png"><img src="/uploads/2012/09/18333fig0404-tn.png" alt="图 4-4" /></a>
图 4-4. GitHub 的用户面板</p>
<p>接下来就可以建立新仓库了。</p>
<h3 id="建立新仓库">建立新仓库</h3>
<p>点击用户面板上仓库旁边的 “create a new one” 链接,显示 Create a New Repository 的表单(见图 4-5):</p>
<p><a href="/uploads/2012/09/18333fig0405-tn.png"><img src="/uploads/2012/09/18333fig0405-tn.png" alt="图 4-5" /></a>
图 4-5. 在 GitHub 上建立新仓库</p>
<p>当然,项目名称是必不可少的,此外也可以适当描述一下项目的情况或者给出官方站点的地址。然后点击 “Create Repository” 按钮,新仓库就建立起来了(见图 4-6):</p>
<p><a href="/uploads/2012/09/18333fig0406-tn.png"><img src="/uploads/2012/09/18333fig0406-tn.png" alt="图 4-6" /></a>
图 4-6. GitHub 上各个项目的概要信息</p>
<p>由于尚未提交代码,点击项目地址后 GitHub 会显示一个简要的指南,告诉你如何新建一个项目并推送上来,如何从现有项目推送,以及如何从一个公共的 Subversion 仓库导入项目(见图 4-7):</p>
<p><a href="/uploads/2012/09/18333fig0407-tn.png"><img src="/uploads/2012/09/18333fig0407-tn.png" alt="图 4-7" /></a>
图 4-7. 新仓库指南</p>
<p>该指南和本书前文介绍的类似,对于新的项目,需要先在本地初始化为 Git 项目,添加要管理的文件并作首次提交:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git init
$ git add .
$ git commit -m 'initial commit'
</code></pre></div></div>
<p>然后在这个本地仓库内把 GitHub 添加为远程仓库,并推送 master 分支上来:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git remote add origin git@github.com:testinguser/iphone_project.git
$ git push origin master
</code></pre></div></div>
<p>现在该项目就托管在 GitHub 上了。你可以把它的 URL 分享给每位对此项目感兴趣的人。本例的 URL 是 <code class="language-plaintext highlighter-rouge">http://github.com/testinguser/iphone_project</code>。而在项目页面的摘要部分,你会发现有两个 Git URL 地址(见图 4-8):</p>
<p><a href="/uploads/2012/09/18333fig0408-tn.png"><img src="/uploads/2012/09/18333fig0408-tn.png" alt="图 4-8" /></a>
图 4-8. 项目摘要中的公共 URL 和私有 URL</p>
<p>Public Clone URL 是一个公开的,只读的 Git URL,任何人都可以通过它克隆该项目。可以随意散播这个 URL,比如发布到个人网站之类的地方等等。</p>
<p>Your Clone URL 是一个基于 SSH 协议的可读可写 URL,只有使用与上传的 SSH 公钥对应的密钥来连接时,才能通过它进行读写操作。其他用户访问该项目页面时只能看到之前那个公共的 URL,看不到这个私有的 URL。</p>
<h3 id="从-subversion-导入项目">从 Subversion 导入项目</h3>
<p>如果想把某个公共 Subversion 项目导入 Git,GitHub 可以帮忙。在指南的最后有一个指向导入 Subversion 页面的链接。点击它会看到一个表单,包含有关导入流程的信息以及一个用来粘贴公共 Subversion 项目连接的文本框(见图 4-9):</p>
<p><a href="/uploads/2012/09/18333fig0409-tn.png"><img src="/uploads/2012/09/18333fig0409-tn.png" alt="图 4-9" /></a>
图 4-9. Subversion 导入界面</p>
<p>如果项目很大,采用非标准结构,或者是私有的,那就无法借助该工具实现导入。到第 7 章,我们会介绍如何手工导入复杂工程的具体方法。</p>
<h3 id="添加协作开发者">添加协作开发者</h3>
<p>现在把团队里的其他人也加进来。如果 John,Josie 和 Jessica 都在 GitHub 注册了账户,要赋予他们对该仓库的推送权限,可以把他们加为项目协作者。这样他们就可以通过各自的公钥访问我的这个仓库了。</p>
<p>点击项目页面上方的 “edit” 按钮或者顶部的 Admin 标签,进入该项目的管理页面(见图 4-10):</p>
<p><a href="/uploads/2012/09/18333fig0410-tn.png"><img src="/uploads/2012/09/18333fig0410-tn.png" alt="图 4-10" /></a>
图 4-10. GitHub 的项目管理页面</p>
<p>为了给另一个用户添加项目的写权限,点击 “Add another collaborator” 链接,出现一个用于输入用户名的表单。在输入的同时,它会自动跳出一个符合条件的候选名单。找到正确用户名之后,点 Add 按钮,把该用户设为项目协作者(见图 4-11):</p>
<p><a href="/uploads/2012/09/18333fig0411-tn.png"><img src="/uploads/2012/09/18333fig0411-tn.png" alt="图 4-11" /></a>
图 4-11. 为项目添加协作者</p>
<p>添加完协作者之后,就可以在 Repository Collaborators 区域看到他们的名单(见图 4-12):</p>
<p><a href="/uploads/2012/09/18333fig0412-tn.png"><img src="/uploads/2012/09/18333fig0412-tn.png" alt="图 4-12" /></a>
图 4-12. 项目协作者名单</p>
<p>如果要取消某人的访问权,点击 “revoke” 即可取消他的推送权限。对于将来的项目,你可以从现有项目复制协作者名单,或者直接借用协作者群组。</p>
<h3 id="项目页面">项目页面</h3>
<p>在推送或从 Subversion 导入项目之后,你会看到一个类似图 4-13 的项目主页:</p>
<p><a href="/uploads/2012/09/18333fig0413-tn.png"><img src="/uploads/2012/09/18333fig0413-tn.png" alt="图 4-13" /></a>
图 4-13. GitHub 上的项目主页</p>
<p>别人访问你的项目时看到的就是这个页面。它有若干导航标签,Commits 标签用于显示提交历史,最新的提交位于最上方,这和 <code class="language-plaintext highlighter-rouge">git log</code> 命令的输出类似。Network 标签展示所有派生了该项目并做出贡献的用户的关系图谱。Downloads 标签允许你上传项目的二进制文件,提供下载该项目各个版本的 tar/zip 包。Wiki 标签提供了一个用于撰写文档或其他项目相关信息的 wiki 站点。Graphs 标签包含了一些可视化的项目信息与数据。默认打开的 Source 标签页面,则列出了该项目的目录结构和概要信息,并在下方自动展示 README 文件的内容(如果该文件存在的话),此外还会显示最近一次提交的相关信息。</p>
<h3 id="派生项目">派生项目</h3>
<p>如果要为一个自己没有推送权限的项目贡献代码,GitHub 鼓励使用派生(fork)。到那个感兴趣的项目主页上,点击页面上方的 “fork” 按钮,GitHub 就会为你复制一份该项目的副本到你的仓库中,这样你就可以向自己的这个副本推送数据了。</p>
<p>采取这种办法的好处是,项目拥有者不必忙于应付赋予他人推送权限的工作。随便谁都可以通过派生得到一个项目副本并在其中展开工作,事后只需要项目维护者将这些副本仓库加为远程仓库,然后提取更新合并即可。</p>
<p>要派生一个项目,到原始项目的页面(本例中是 mojombo/chronic)点击 “fork” 按钮(见图 4-14):</p>
<p><a href="/uploads/2012/09/18333fig0414-tn.png"><img src="/uploads/2012/09/18333fig0414-tn.png" alt="图 4-14" /></a>
图 4-14. 点击 “fork” 按钮获得任意项目的可写副本</p>
<p>几秒钟之后,你将进入新建的项目页面,会显示该项目派生自哪一个项目(见图 4-15):</p>
<p><a href="/uploads/2012/09/18333fig0415-tn.png"><img src="/uploads/2012/09/18333fig0415-tn.png" alt="图 4-15" /></a>
图 4-15. 派生后得到的项目副本</p>
<h3 id="github-小结">GitHub 小结</h3>
<p>关于 GitHub 就先介绍这么多,能够快速达成这些事情非常重要(译注:门槛的降低和完成基本任务的简单高效,对于推动开源项目的协作发展有着举足轻重的意义。)。短短几分钟内,你就能创建一个新账户,添加一个项目并开始推送。如果项目是开源的,整个庞大的开发者社区都可以立即访问它,提供各式各样的帮助和贡献。最起码,这也是一种 Git 新手立即体验尝试 Git 的捷径。</p>
<h2 id="小结">小结</h2>
<p>我们讨论并介绍了一些建立远程 Git 仓库的方法,接下来你可以通过这些仓库同他人分享或合作。</p>
<p>运行自己的服务器意味着更多的控制权以及在防火墙内部操作的可能性,当然这样的服务器通常需要投入一定的时间精力来架设维护。如果直接托管,虽然能免去这部分工作,但有时出于安全或版权的考虑,有些公司禁止将商业代码托管到第三方服务商。</p>
<p>所以究竟采取哪种方案,并不是个难以取舍的问题,或者其一,或者相互配合,哪种合适就用哪种。</p>
03-Git分支
2012-10-14T00:00:00+00:00
http://wangdaodao.github.io/2012-10-14/git-branching
<p>几乎每一种版本控制系统都以某种形式支持分支。使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同时继续工作。在很多版本控制系统中,这是个昂贵的过程,常常需要创建一个源代码目录的完整副本,对大型项目来说会花费很长时间。</p>
<p>有人把 Git 的分支模型称为“必杀技特性”,而正是因为它,将 Git 从版本控制系统家族里区分出来。Git 有何特别之处呢?Git 的分支可谓是难以置信的轻量级,它的新建操作几乎可以在瞬间完成,并且在不同分支间切换起来也差不多一样快。和许多其他版本控制系统不同,Git 鼓励在工作流程中频繁使用分支与合并,哪怕一天之内进行许多次都没有关系。理解分支的概念并熟练运用后,你才会意识到为什么 Git 是一个如此强大而独特的工具,并从此真正改变你的开发方式。</p>
<h2 id="何谓分支">何谓分支</h2>
<p>为了理解 Git 分支的实现方式,我们需要回顾一下 Git 是如何储存数据的。或许你还记得第一章的内容,Git 保存的不是文件差异或者变化量,而只是一系列文件快照。</p>
<p>在 Git 中提交时,会保存一个提交(commit)对象,该对象包含一个指向暂存内容快照的指针,包含本次提交的作者等相关附属信息,包含零个或多个指向该提交对象的父对象指针:首次提交是没有直接祖先的,普通提交有一个祖先,由两个或多个分支合并产生的提交则有多个祖先。</p>
<p>为直观起见,我们假设在工作目录中有三个文件,准备将它们暂存后提交。暂存操作会对每一个文件计算校验和(即第一章中提到的 SHA-1 哈希字串),然后把当前版本的文件快照保存到 Git 仓库中(Git 使用 blob 类型的对象存储这些快照),并将校验和加入暂存区域:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git add README test.rb LICENSE
$ git commit -m 'initial commit of my project'
</code></pre></div></div>
<p>当使用 <code class="language-plaintext highlighter-rouge">git commit</code> 新建一个提交对象前,Git 会先计算每一个子目录(本例中就是项目根目录)的校验和,然后在 Git 仓库中将这些目录保存为树(tree)对象。之后 Git 创建的提交对象,除了包含相关提交信息以外,还包含着指向这个树对象(项目根目录)的指针,如此它就可以在将来需要的时候,重现此次快照的内容了。</p>
<p>现在,Git 仓库中有五个对象:三个表示文件快照内容的 blob 对象;一个记录着目录树内容及其中各个文件对应 blob 对象索引的 tree 对象;以及一个包含指向 tree 对象(根目录)的索引和其他提交信息元数据的 commit 对象。概念上来说,仓库中的各个对象保存的数据和相互关系看起来如图 3-1 所示:</p>
<p><a href="/uploads/2012/09/18333fig0301-tn.png"><img src="/uploads/2012/09/18333fig0301-tn.png" alt="图 3-1" /></a>
图 3-1. 单个提交对象在仓库中的数据结构</p>
<p>作些修改后再次提交,那么这次的提交对象会包含一个指向上次提交对象的指针(译注:即下图中的 parent 对象)。两次提交后,仓库历史会变成图 3-2 的样子:</p>
<p><a href="/uploads/2012/09/18333fig0302-tn.png"><img src="/uploads/2012/09/18333fig0302-tn.png" alt="图 3-2" /></a>
图 3-2. 多个提交对象之间的链接关系</p>
<p>现在来谈分支。Git 中的分支,其实本质上仅仅是个指向 commit 对象的可变指针。Git 会使用 master 作为分支的默认名字。在若干次提交后,你其实已经有了一个指向最后一次提交对象的 master 分支,它在每次提交的时候都会自动向前移动。</p>
<p><a href="/uploads/2012/09/18333fig0303-tn.png"><img src="/uploads/2012/09/18333fig0303-tn.png" alt="图 3-3" /></a>
图 3-3. 分支其实就是从某个提交对象往回看的历史</p>
<p>那么,Git 又是如何创建一个新的分支的呢?答案很简单,创建一个新的分支指针。比如新建一个 testing 分支,可以使用 <code class="language-plaintext highlighter-rouge">git branch</code> 命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git branch testing
</code></pre></div></div>
<p>这会在当前 commit 对象上新建一个分支指针(见图 3-4)。</p>
<p><a href="/uploads/2012/09/18333fig0304-tn.png"><img src="/uploads/2012/09/18333fig0304-tn.png" alt="图 3-4" /></a>
图 3-4. 多个分支指向提交数据的历史</p>
<p>那么,Git 是如何知道你当前在哪个分支上工作的呢?其实答案也很简单,它保存着一个名为 HEAD 的特别指针。请注意它和你熟知的许多其他版本控制系统(比如 Subversion 或 CVS)里的 HEAD 概念大不相同。在 Git 中,它是一个指向你正在工作中的本地分支的指针(译注:将 HEAD 想象为当前分支的别名。)。运行 <code class="language-plaintext highlighter-rouge">git branch</code> 命令,仅仅是建立了一个新的分支,但不会自动切换到这个分支中去,所以在这个例子中,我们依然还在 master 分支里工作(参考图 3-5)。</p>
<p><a href="/uploads/2012/09/18333fig0305-tn.png"><img src="/uploads/2012/09/18333fig0305-tn.png" alt="图 3-5" /></a>
图 3-5. HEAD 指向当前所在的分支</p>
<p>要切换到其他分支,可以执行 <code class="language-plaintext highlighter-rouge">git checkout</code> 命令。我们现在转换到新建的 testing 分支:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout testing
</code></pre></div></div>
<p>这样 HEAD 就指向了 testing 分支(见图3-6)。</p>
<p><a href="/uploads/2012/09/18333fig0306-tn.png"><img src="/uploads/2012/09/18333fig0306-tn.png" alt="图 3-6" /></a>
图 3-6. HEAD 在你转换分支时指向新的分支</p>
<p>这样的实现方式会给我们带来什么好处呢?好吧,现在不妨再提交一次:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ vim test.rb
$ git commit -a -m 'made a change'
</code></pre></div></div>
<p>图 3-7 展示了提交后的结果。</p>
<p><a href="/uploads/2012/09/18333fig0307-tn.png"><img src="/uploads/2012/09/18333fig0307-tn.png" alt="图 3-7" /></a>
图 3-7. 每次提交后 HEAD 随着分支一起向前移动</p>
<p>非常有趣,现在 testing 分支向前移动了一格,而 master 分支仍然指向原先 <code class="language-plaintext highlighter-rouge">git checkout</code> 时所在的 commit 对象。现在我们回到 master 分支看看:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout master
</code></pre></div></div>
<p>图 3-8 显示了结果。</p>
<p><a href="/uploads/2012/09/18333fig0308-tn.png"><img src="/uploads/2012/09/18333fig0308-tn.png" alt="图 3-8" /></a>
图 3-8. HEAD 在一次 checkout 之后移动到了另一个分支</p>
<p>这条命令做了两件事。它把 HEAD 指针移回到 master 分支,并把工作目录中的文件换成了 master 分支所指向的快照内容。也就是说,现在开始所做的改动,将始于本项目中一个较老的版本。它的主要作用是将 testing 分支里作出的修改暂时取消,这样你就可以向另一个方向进行开发。</p>
<p>我们作些修改后再次提交:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ vim test.rb
$ git commit -a -m 'made other changes'
</code></pre></div></div>
<p>现在我们的项目提交历史产生了分叉(如图 3-9 所示),因为刚才我们创建了一个分支,转换到其中进行了一些工作,然后又回到原来的主分支进行了另外一些工作。这些改变分别孤立在不同的分支里:我们可以在不同分支里反复切换,并在时机成熟时把它们合并到一起。而所有这些工作,仅仅需要 <code class="language-plaintext highlighter-rouge">branch</code> 和 <code class="language-plaintext highlighter-rouge">checkout</code> 这两条命令就可以完成。</p>
<p><a href="/uploads/2012/09/18333fig0309-tn.png"><img src="/uploads/2012/09/18333fig0309-tn.png" alt="图 3-9" /></a>
图 3-9. 不同流向的分支历史</p>
<p>由于 Git 中的分支实际上仅是一个包含所指对象校验和(40 个字符长度 SHA-1 字串)的文件,所以创建和销毁一个分支就变得非常廉价。说白了,新建一个分支就是向一个文件写入 41 个字节(外加一个换行符)那么简单,当然也就很快了。</p>
<p>这和大多数版本控制系统形成了鲜明对比,它们管理分支大多采取备份所有项目文件到特定目录的方式,所以根据项目文件数量和大小不同,可能花费的时间也会有相当大的差别,快则几秒,慢则数分钟。而 Git 的实现与项目复杂度无关,它永远可以在几毫秒的时间内完成分支的创建和切换。同时,因为每次提交时都记录了祖先信息(译注:即 <code class="language-plaintext highlighter-rouge">parent</code> 对象),将来要合并分支时,寻找恰当的合并基础(译注:即共同祖先)的工作其实已经自然而然地摆在那里了,所以实现起来非常容易。Git 鼓励开发者频繁使用分支,正是因为有着这些特性作保障。</p>
<p>接下来看看,我们为什么应该频繁使用分支。</p>
<h2 id="分支的新建与合并">分支的新建与合并</h2>
<p>现在让我们来看一个简单的分支与合并的例子,实际工作中大体也会用到这样的工作流程:</p>
<ol>
<li>开发某个网站。</li>
<li>为实现某个新的需求,创建一个分支。</li>
<li>在这个分支上开展工作。</li>
</ol>
<p>假设此时,你突然接到一个电话说有个很严重的问题需要紧急修补,那么可以按照下面的方式处理:</p>
<ol>
<li>返回到原先已经发布到生产服务器上的分支。</li>
<li>为这次紧急修补建立一个新分支,并在其中修复问题。</li>
<li>通过测试后,回到生产服务器所在的分支,将修补分支合并进来,然后再推送到生产服务器上。</li>
<li>切换到之前实现新需求的分支,继续工作。</li>
</ol>
<h3 id="分支的新建与切换">分支的新建与切换</h3>
<p>首先,我们假设你正在项目中愉快地工作,并且已经提交了几次更新(见图 3-10)。</p>
<p><a href="/uploads/2012/09/18333fig0310-tn.png"><img src="/uploads/2012/09/18333fig0310-tn.png" alt="图 3-10" /></a>
图 3-10. 一个简短的提交历史</p>
<p>现在,你决定要修补问题追踪系统上的 #53 问题。顺带说明下,Git 并不同任何特定的问题追踪系统打交道。这里为了说明要解决的问题,才把新建的分支取名为 iss53。要新建并切换到该分支,运行 <code class="language-plaintext highlighter-rouge">git checkout</code> 并加上 <code class="language-plaintext highlighter-rouge">-b</code> 参数:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout -b iss53
Switched to a new branch "iss53"
</code></pre></div></div>
<p>这相当于执行下面这两条命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git branch iss53
$ git checkout iss53
</code></pre></div></div>
<p>图 3-11 示意该命令的执行结果。</p>
<p><a href="/uploads/2012/09/18333fig0311-tn.png"><img src="/uploads/2012/09/18333fig0311-tn.png" alt="图 3-11" /></a>
图 3-11. 创建了一个新分支的指针</p>
<p>接着你开始尝试修复问题,在提交了若干次更新后,<code class="language-plaintext highlighter-rouge">iss53</code> 分支的指针也会随着向前推进,因为它就是当前分支(换句话说,当前的 <code class="language-plaintext highlighter-rouge">HEAD</code> 指针正指向 <code class="language-plaintext highlighter-rouge">iss53</code>,见图 3-12):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ vim index.html
$ git commit -a -m 'added a new footer [issue 53]'
</code></pre></div></div>
<p><a href="/uploads/2012/09/18333fig0312-tn.png"><img src="/uploads/2012/09/18333fig0312-tn.png" alt="图 3-12" /></a>
图 3-12. iss53 分支随工作进展向前推进</p>
<p>现在你就接到了那个网站问题的紧急电话,需要马上修补。有了 Git ,我们就不需要同时发布这个补丁和 <code class="language-plaintext highlighter-rouge">iss53</code> 里作出的修改,也不需要在创建和发布该补丁到服务器之前花费大力气来复原这些修改。唯一需要的仅仅是切换回 <code class="language-plaintext highlighter-rouge">master</code> 分支。</p>
<p>不过在此之前,留心你的暂存区或者工作目录里,那些还没有提交的修改,它会和你即将检出的分支产生冲突从而阻止 Git 为你切换分支。切换分支的时候最好保持一个清洁的工作区域。稍后会介绍几个绕过这种问题的办法(分别叫做 stashing 和 commit amending)。目前已经提交了所有的修改,所以接下来可以正常转换到 <code class="language-plaintext highlighter-rouge">master</code> 分支:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout master
Switched to branch "master"
</code></pre></div></div>
<p>此时工作目录中的内容和你在解决问题 #53 之前一模一样,你可以集中精力进行紧急修补。这一点值得牢记:Git 会把工作目录的内容恢复为检出某分支时它所指向的那个提交对象的快照。它会自动添加、删除和修改文件以确保目录的内容和你当时提交时完全一样。</p>
<p>接下来,你得进行紧急修补。我们创建一个紧急修补分支 <code class="language-plaintext highlighter-rouge">hotfix</code> 来开展工作,直到搞定(见图 3-13):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout -b 'hotfix'
Switched to a new branch "hotfix"
$ vim index.html
$ git commit -a -m 'fixed the broken email address'
[hotfix]: created 3a0874c: "fixed the broken email address"
1 files changed, 0 insertions(+), 1 deletions(-)
</code></pre></div></div>
<p><a href="/uploads/2012/09/18333fig0313-tn.png"><img src="/uploads/2012/09/18333fig0313-tn.png" alt="图 3-13" /></a>
图 3-13. hotfix 分支是从 master 分支所在点分化出来的</p>
<p>有必要作些测试,确保修补是成功的,然后回到 <code class="language-plaintext highlighter-rouge">master</code> 分支并把它合并进来,然后发布到生产服务器。用 <code class="language-plaintext highlighter-rouge">git merge</code> 命令来进行合并:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout master
$ git merge hotfix
Updating f42c576..3a0874c
Fast forward
README | 1 -
1 files changed, 0 insertions(+), 1 deletions(-)
</code></pre></div></div>
<p>请注意,合并时出现了“Fast forward”的提示。由于当前 <code class="language-plaintext highlighter-rouge">master</code> 分支所在的提交对象是要并入的 <code class="language-plaintext highlighter-rouge">hotfix</code> 分支的直接上游,Git 只需把 <code class="language-plaintext highlighter-rouge">master</code> 分支指针直接右移。换句话说,如果顺着一个分支走下去可以到达另一个分支的话,那么 Git 在合并两者时,只会简单地把指针右移,因为这种单线的历史分支不存在任何需要解决的分歧,所以这种合并过程可以称为快进(Fast forward)。</p>
<p>现在最新的修改已经在当前 <code class="language-plaintext highlighter-rouge">master</code> 分支所指向的提交对象中了,可以部署到生产服务器上去了(见图 3-14)。</p>
<p><a href="/uploads/2012/09/18333fig0314-tn.png"><img src="/uploads/2012/09/18333fig0314-tn.png" alt="图 3-14" /></a>
图 3-14. 合并之后,master 分支和 hotfix 分支指向同一位置。</p>
<p>在那个超级重要的修补发布以后,你想要回到被打扰之前的工作。由于当前 <code class="language-plaintext highlighter-rouge">hotfix</code> 分支和 <code class="language-plaintext highlighter-rouge">master</code> 都指向相同的提交对象,所以 <code class="language-plaintext highlighter-rouge">hotfix</code> 已经完成了历史使命,可以删掉了。使用 <code class="language-plaintext highlighter-rouge">git branch</code> 的 <code class="language-plaintext highlighter-rouge">-d</code> 选项执行删除操作:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git branch -d hotfix
Deleted branch hotfix (3a0874c).
</code></pre></div></div>
<p>现在回到之前未完成的 #53 问题修复分支上继续工作(图 3-15):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout iss53
Switched to branch "iss53"
$ vim index.html
$ git commit -a -m 'finished the new footer [issue 53]'
[iss53]: created ad82d7a: "finished the new footer [issue 53]"
1 files changed, 1 insertions(+), 0 deletions(-)
</code></pre></div></div>
<p><a href="/uploads/2012/09/18333fig0315-tn.png"><img src="/uploads/2012/09/18333fig0315-tn.png" alt="图 3-15" /></a>
图 3-15. iss53 分支可以不受影响继续推进。</p>
<p>不用担心之前 <code class="language-plaintext highlighter-rouge">hotfix</code> 分支的修改内容尚未包含到 <code class="language-plaintext highlighter-rouge">iss53</code> 中来。如果确实需要纳入此次修补,可以用 <code class="language-plaintext highlighter-rouge">git merge master</code> 把 master 分支合并到 <code class="language-plaintext highlighter-rouge">iss53</code>;或者等 <code class="language-plaintext highlighter-rouge">iss53</code> 完成之后,再将 <code class="language-plaintext highlighter-rouge">iss53</code> 分支中的更新并入 <code class="language-plaintext highlighter-rouge">master</code>。</p>
<h3 id="分支的合并">分支的合并</h3>
<p>在问题 #53 相关的工作完成之后,可以合并回 <code class="language-plaintext highlighter-rouge">master</code> 分支。实际操作同前面合并 <code class="language-plaintext highlighter-rouge">hotfix</code> 分支差不多,只需回到 <code class="language-plaintext highlighter-rouge">master</code> 分支,运行 <code class="language-plaintext highlighter-rouge">git merge</code> 命令指定要合并进来的分支:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout master
$ git merge iss53
Merge made by recursive.
README | 1 +
1 files changed, 1 insertions(+), 0 deletions(-)
</code></pre></div></div>
<p>请注意,这次合并操作的底层实现,并不同于之前 <code class="language-plaintext highlighter-rouge">hotfix</code> 的并入方式。因为这次你的开发历史是从更早的地方开始分叉的。由于当前 <code class="language-plaintext highlighter-rouge">master</code> 分支所指向的提交对象(C4)并不是 <code class="language-plaintext highlighter-rouge">iss53</code> 分支的直接祖先,Git 不得不进行一些额外处理。就此例而言,Git 会用两个分支的末端(C4 和 C5)以及它们的共同祖先(C2)进行一次简单的三方合并计算。图 3-16 用红框标出了 Git 用于合并的三个提交对象:</p>
<p><a href="/uploads/2012/09/18333fig0316-tn.png"><img src="/uploads/2012/09/18333fig0316-tn.png" alt="图 3-16" /></a>
图 3-16. Git 为分支合并自动识别出最佳的同源合并点。</p>
<p>这次,Git 没有简单地把分支指针右移,而是对三方合并后的结果重新做一个新的快照,并自动创建一个指向它的提交对象(C6)(见图 3-17)。这个提交对象比较特殊,它有两个祖先(C4 和 C5)。</p>
<p>值得一提的是 Git 可以自己裁决哪个共同祖先才是最佳合并基础;这和 CVS 或 Subversion(1.5 以后的版本)不同,它们需要开发者手工指定合并基础。所以此特性让 Git 的合并操作比其他系统都要简单不少。</p>
<p><a href="/uploads/2012/09/18333fig0317-tn.png"><img src="/uploads/2012/09/18333fig0317-tn.png" alt="图 3-17" /></a>
图 3-17. Git 自动创建了一个包含了合并结果的提交对象。</p>
<p>既然之前的工作成果已经合并到 <code class="language-plaintext highlighter-rouge">master</code> 了,那么 <code class="language-plaintext highlighter-rouge">iss53</code> 也就没用了。你可以就此删除它,并在问题追踪系统里关闭该问题。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git branch -d iss53
</code></pre></div></div>
<h3 id="遇到冲突时的分支合并">遇到冲突时的分支合并</h3>
<p>有时候合并操作并不会如此顺利。如果在不同的分支中都修改了同一个文件的同一部分,Git 就无法干净地把两者合到一起(译注:逻辑上说,这种问题只能由人来裁决。)。如果你在解决问题 #53 的过程中修改了 <code class="language-plaintext highlighter-rouge">hotfix</code> 中修改的部分,将得到类似下面的结果:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git merge iss53
Auto-merging index.html
CONFLICT (content): Merge conflict in index.html
Automatic merge failed; fix conflicts and then commit the result.
</code></pre></div></div>
<p>Git 作了合并,但没有提交,它会停下来等你解决冲突。要看看哪些文件在合并时发生冲突,可以用 <code class="language-plaintext highlighter-rouge">git status</code> 查阅:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>[master*]$ git status
index.html: needs merge
# On branch master
# Changed but not updated:
# (use "git add <file>..." to update what will be committed)
# (use "git checkout -- <file>..." to discard changes in working directory)
#
# unmerged: index.html
#
</code></pre></div></div>
<p>任何包含未解决冲突的文件都会以未合并(unmerged)的状态列出。Git 会在有冲突的文件里加入标准的冲突解决标记,可以通过它们来手工定位并解决这些冲突。可以看到此文件包含类似下面这样的部分:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><<<<<<< HEAD:index.html
<div id="footer">contact : email.support@github.com</div>
=======
<div id="footer">
please contact us at support@github.com
</div>
>>>>>>> iss53:index.html
</code></pre></div></div>
<p>可以看到 <code class="language-plaintext highlighter-rouge">=======</code> 隔开的上半部分,是 <code class="language-plaintext highlighter-rouge">HEAD</code>(即 <code class="language-plaintext highlighter-rouge">master</code> 分支,在运行 <code class="language-plaintext highlighter-rouge">merge</code> 命令时所切换到的分支)中的内容,下半部分是在 <code class="language-plaintext highlighter-rouge">iss53</code> 分支中的内容。解决冲突的办法无非是二者选其一或者由你亲自整合到一起。比如你可以通过把这段内容替换为下面这样来解决:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div id="footer">
please contact us at email.support@github.com
</div>
</code></pre></div></div>
<p>这个解决方案各采纳了两个分支中的一部分内容,而且我还删除了 <code class="language-plaintext highlighter-rouge"><<<<<<<</code>,<code class="language-plaintext highlighter-rouge">=======</code> 和 <code class="language-plaintext highlighter-rouge">>>>>>>></code> 这些行。在解决了所有文件里的所有冲突后,运行 <code class="language-plaintext highlighter-rouge">git add</code> 将把它们标记为已解决状态(译注:实际上就是来一次快照保存到暂存区域。)。因为一旦暂存,就表示冲突已经解决。如果你想用一个有图形界面的工具来解决这些问题,不妨运行 <code class="language-plaintext highlighter-rouge">git mergetool</code>,它会调用一个可视化的合并工具并引导你解决所有冲突:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git mergetool
merge tool candidates: kdiff3 tkdiff xxdiff meld gvimdiff opendiff emerge vimdiff
Merging the files: index.html
Normal merge conflict for 'index.html':
{local}: modified
{remote}: modified
Hit return to start merge resolution tool (opendiff):
</code></pre></div></div>
<p>如果不想用默认的合并工具(Git 为我默认选择了 <code class="language-plaintext highlighter-rouge">opendiff</code>,因为我在 Mac 上运行了该命令),你可以在上方”merge tool candidates”里找到可用的合并工具列表,输入你想用的工具名。我们将在第七章讨论怎样改变环境中的默认值。</p>
<p>退出合并工具以后,Git 会询问你合并是否成功。如果回答是,它会为你把相关文件暂存起来,以表明状态为已解决。</p>
<p>再运行一次 <code class="language-plaintext highlighter-rouge">git status</code> 来确认所有冲突都已解决:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# modified: index.html
#
</code></pre></div></div>
<p>如果觉得满意了,并且确认所有冲突都已解决,也就是进入了暂存区,就可以用 <code class="language-plaintext highlighter-rouge">git commit</code> 来完成这次合并提交。提交的记录差不多是这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Merge branch 'iss53'
Conflicts:
index.html
#
# It looks like you may be committing a MERGE.
# If this is not correct, please remove the file
# .git/MERGE_HEAD
# and try again.
#
</code></pre></div></div>
<p>如果想给将来看这次合并的人一些方便,可以修改该信息,提供更多合并细节。比如你都作了哪些改动,以及这么做的原因。有时候裁决冲突的理由并不直接或明显,有必要略加注解。</p>
<h2 id="分支的管理">分支的管理</h2>
<p>到目前为止,你已经学会了如何创建、合并和删除分支。除此之外,我们还需要学习如何管理分支,在日后的常规工作中会经常用到下面介绍的管理命令。</p>
<p><code class="language-plaintext highlighter-rouge">git branch</code> 命令不仅仅能创建和删除分支,如果不加任何参数,它会给出当前所有分支的清单:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git branch
iss53
* master
testing
</code></pre></div></div>
<p>注意看 <code class="language-plaintext highlighter-rouge">master</code> 分支前的 <code class="language-plaintext highlighter-rouge">*</code> 字符:它表示当前所在的分支。也就是说,如果现在提交更新,<code class="language-plaintext highlighter-rouge">master</code> 分支将随着开发进度前移。若要查看各个分支最后一个提交对象的信息,运行 <code class="language-plaintext highlighter-rouge">git branch -v</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git branch -v
iss53 93b412c fix javascript issue
* master 7a98805 Merge branch 'iss53'
testing 782fd34 add scott to the author list in the readmes
</code></pre></div></div>
<p>要从该清单中筛选出你已经(或尚未)与当前分支合并的分支,可以用 <code class="language-plaintext highlighter-rouge">--merge</code> 和 <code class="language-plaintext highlighter-rouge">--no-merged</code> 选项(Git 1.5.6 以上版本)。比如用 <code class="language-plaintext highlighter-rouge">git branch --merge</code> 查看哪些分支已被并入当前分支(译注:也就是说哪些分支是当前分支的直接上游。):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git branch --merged
iss53
* master
</code></pre></div></div>
<p>之前我们已经合并了 <code class="language-plaintext highlighter-rouge">iss53</code>,所以在这里会看到它。一般来说,列表中没有 <code class="language-plaintext highlighter-rouge">*</code> 的分支通常都可以用 <code class="language-plaintext highlighter-rouge">git branch -d</code> 来删掉。原因很简单,既然已经把它们所包含的工作整合到了其他分支,删掉也不会损失什么。</p>
<p>另外可以用 <code class="language-plaintext highlighter-rouge">git branch --no-merged</code> 查看尚未合并的工作:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git branch --no-merged
testing
</code></pre></div></div>
<p>它会显示还未合并进来的分支。由于这些分支中还包含着尚未合并进来的工作成果,所以简单地用 <code class="language-plaintext highlighter-rouge">git branch -d</code> 删除该分支会提示错误,因为那样做会丢失数据:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git branch -d testing
error: The branch 'testing' is not an ancestor of your current HEAD.
If you are sure you want to delete it, run 'git branch -D testing'.
</code></pre></div></div>
<p>不过,如果你确实想要删除该分支上的改动,可以用大写的删除选项 <code class="language-plaintext highlighter-rouge">-D</code> 强制执行,就像上面提示信息中给出的那样。</p>
<h2 id="利用分支进行开发的工作流程">利用分支进行开发的工作流程</h2>
<p>现在我们已经学会了新建分支和合并分支,可以(或应该)用它来做点什么呢?在本节,我们会介绍一些利用分支进行开发的工作流程。而正是由于分支管理的便捷,才衍生出了这类典型的工作模式,你可以根据项目的实际情况选择一种用用看。</p>
<h3 id="长期分支">长期分支</h3>
<p>由于 Git 使用简单的三方合并,所以就算在较长一段时间内,反复多次把某个分支合并到另一分支,也不是什么难事。也就是说,你可以同时拥有多个开放的分支,每个分支用于完成特定的任务,随着开发的推进,你可以随时把某个特性分支的成果并到其他分支中。</p>
<p>许多使用 Git 的开发者都喜欢用这种方式来开展工作,比如仅在 <code class="language-plaintext highlighter-rouge">master</code> 分支中保留完全稳定的代码,即已经发布或即将发布的代码。与此同时,他们还有一个名为 <code class="language-plaintext highlighter-rouge">develop</code> 或 <code class="language-plaintext highlighter-rouge">next</code> 的平行分支,专门用于后续的开发,或仅用于稳定性测试 — 当然并不是说一定要绝对稳定,不过一旦进入某种稳定状态,便可以把它合并到 <code class="language-plaintext highlighter-rouge">master</code> 里。这样,在确保这些已完成的特性分支(短期分支,比如之前的 <code class="language-plaintext highlighter-rouge">iss53</code> 分支)能够通过所有测试,并且不会引入更多错误之后,就可以并到主干分支中,等待下一次的发布。</p>
<p>本质上我们刚才谈论的,是随着提交对象不断右移的指针。稳定分支的指针总是在提交历史中落后一大截,而前沿分支总是比较靠前(见图 3-18)。</p>
<p><a href="/uploads/2012/09/18333fig0318-tn.png"><img src="/uploads/2012/09/18333fig0318-tn.png" alt="图 3-18" /></a>
图 3-18. 稳定分支总是比较老旧。</p>
<p>或者把它们想象成工作流水线,或许更好理解一些,经过测试的提交对象集合被遴选到更稳定的流水线(见图 3-19)。</p>
<p><a href="/uploads/2012/09/18333fig0319-tn.png"><img src="/uploads/2012/09/18333fig0319-tn.png" alt="图 3-19" /></a>
图 3-19. 想象成流水线可能会容易点。</p>
<p>你可以用这招维护不同层次的稳定性。某些大项目还会有个 <code class="language-plaintext highlighter-rouge">proposed</code>(建议)或 <code class="language-plaintext highlighter-rouge">pu</code>(proposed updates,建议更新)分支,它包含着那些可能还没有成熟到进入 <code class="language-plaintext highlighter-rouge">next</code> 或 <code class="language-plaintext highlighter-rouge">master</code> 的内容。这么做的目的是拥有不同层次的稳定性:当这些分支进入到更稳定的水平时,再把它们合并到更高层分支中去。再次说明下,使用多个长期分支的做法并非必需,不过一般来说,对于特大型项目或特复杂的项目,这么做确实更容易管理。</p>
<h3 id="特性分支">特性分支</h3>
<p>在任何规模的项目中都可以使用特性(Topic)分支。一个特性分支是指一个短期的,用来实现单一特性或与其相关工作的分支。可能你在以前的版本控制系统里从未做过类似这样的事情,因为通常创建与合并分支消耗太大。然而在 Git 中,一天之内建立、使用、合并再删除多个分支是常见的事。</p>
<p>我们在上节的例子里已经见过这种用法了。我们创建了 <code class="language-plaintext highlighter-rouge">iss53</code> 和 <code class="language-plaintext highlighter-rouge">hotfix</code> 这两个特性分支,在提交了若干更新后,把它们合并到主干分支,然后删除。该技术允许你迅速且完全的进行语境切换 — 因为你的工作分散在不同的流水线里,每个分支里的改变都和它的目标特性相关,浏览代码之类的事情因而变得更简单了。你可以把作出的改变保持在特性分支中几分钟,几天甚至几个月,等它们成熟以后再合并,而不用在乎它们建立的顺序或者进度。</p>
<p>现在我们来看一个实际的例子。请看图 3-20,由下往上,起先我们在 <code class="language-plaintext highlighter-rouge">master</code> 工作到 C1,然后开始一个新分支 <code class="language-plaintext highlighter-rouge">iss91</code> 尝试修复 91 号缺陷,提交到 C6 的时候,又冒出一个解决该问题的新办法,于是从之前 C4 的地方又分出一个分支 <code class="language-plaintext highlighter-rouge">iss91v2</code>,干到 C8 的时候,又回到主干 <code class="language-plaintext highlighter-rouge">master</code> 中提交了 C9 和 C10,再回到 <code class="language-plaintext highlighter-rouge">iss91v2</code> 继续工作,提交 C11,接着,又冒出个不太确定的想法,从 <code class="language-plaintext highlighter-rouge">master</code> 的最新提交 C10 处开了个新的分支 <code class="language-plaintext highlighter-rouge">dumbidea</code> 做些试验。</p>
<p><a href="/uploads/2012/09/18333fig0320-tn.png"><img src="/uploads/2012/09/18333fig0320-tn.png" alt="图 3-20" /></a>
图 3-20. 拥有多个特性分支的提交历史。</p>
<p>现在,假定两件事情:我们最终决定使用第二个解决方案,即 <code class="language-plaintext highlighter-rouge">iss91v2</code> 中的办法;另外,我们把 <code class="language-plaintext highlighter-rouge">dumbidea</code> 分支拿给同事们看了以后,发现它竟然是个天才之作。所以接下来,我们准备抛弃原来的 <code class="language-plaintext highlighter-rouge">iss91</code> 分支(实际上会丢弃 C5 和 C6),直接在主干中并入另外两个分支。最终的提交历史将变成图 3-21 这样:</p>
<p><a href="/uploads/2012/09/18333fig0321-tn.png"><img src="/uploads/2012/09/18333fig0321-tn.png" alt="图 3-21" /></a>
图 3-21. 合并了 dumbidea 和 iss91v2 后的分支历史。</p>
<p>请务必牢记这些分支全部都是本地分支,这一点很重要。当你在使用分支及合并的时候,一切都是在你自己的 Git 仓库中进行的 — 完全不涉及与服务器的交互。</p>
<h2 id="远程分支">远程分支</h2>
<p>远程分支(remote branch)是对远程仓库中的分支的索引。它们是一些无法移动的本地分支;只有在 Git 进行网络交互时才会更新。远程分支就像是书签,提醒着你上次连接远程仓库时上面各分支的位置。</p>
<p>我们用 <code class="language-plaintext highlighter-rouge">(远程仓库名)/(分支名)</code> 这样的形式表示远程分支。比如我们想看看上次同 <code class="language-plaintext highlighter-rouge">origin</code> 仓库通讯时 <code class="language-plaintext highlighter-rouge">master</code> 分支的样子,就应该查看 <code class="language-plaintext highlighter-rouge">origin/master</code> 分支。如果你和同伴一起修复某个问题,但他们先推送了一个 <code class="language-plaintext highlighter-rouge">iss53</code> 分支到远程仓库,虽然你可能也有一个本地的 <code class="language-plaintext highlighter-rouge">iss53</code> 分支,但指向服务器上最新更新的却应该是 <code class="language-plaintext highlighter-rouge">origin/iss53</code> 分支。</p>
<p>可能有点乱,我们不妨举例说明。假设你们团队有个地址为 <code class="language-plaintext highlighter-rouge">git.ourcompany.com</code> 的 Git 服务器。如果你从这里克隆,Git 会自动为你将此远程仓库命名为 <code class="language-plaintext highlighter-rouge">origin</code>,并下载其中所有的数据,建立一个指向它的 <code class="language-plaintext highlighter-rouge">master</code> 分支的指针,在本地命名为 <code class="language-plaintext highlighter-rouge">origin/master</code>,但你无法在本地更改其数据。接着,Git 建立一个属于你自己的本地 <code class="language-plaintext highlighter-rouge">master</code> 分支,始于 <code class="language-plaintext highlighter-rouge">origin</code> 上 <code class="language-plaintext highlighter-rouge">master</code> 分支相同的位置,你可以就此开始工作(见图 3-22):</p>
<p><a href="/uploads/2012/09/18333fig0322-tn.png"><img src="/uploads/2012/09/18333fig0322-tn.png" alt="图 3-22" /></a>
图 3-22. 一次 Git 克隆会建立你自己的本地分支 master 和远程分支 origin/master,并且将它们都指向 <code class="language-plaintext highlighter-rouge">origin</code> 上的 <code class="language-plaintext highlighter-rouge">master</code> 分支。</p>
<p>如果你在本地 <code class="language-plaintext highlighter-rouge">master</code> 分支做了些改动,与此同时,其他人向 <code class="language-plaintext highlighter-rouge">git.ourcompany.com</code> 推送了他们的更新,那么服务器上的 <code class="language-plaintext highlighter-rouge">master</code> 分支就会向前推进,而于此同时,你在本地的提交历史正朝向不同方向发展。不过只要你不和服务器通讯,你的 <code class="language-plaintext highlighter-rouge">origin/master</code> 指针仍然保持原位不会移动(见图 3-23)。</p>
<p><a href="/uploads/2012/09/18333fig0323-tn.png"><img src="/uploads/2012/09/18333fig0323-tn.png" alt="图 3-23" /></a>
图 3-23. 在本地工作的同时有人向远程仓库推送内容会让提交历史开始分流。</p>
<p>可以运行 <code class="language-plaintext highlighter-rouge">git fetch origin</code> 来同步远程服务器上的数据到本地。该命令首先找到 <code class="language-plaintext highlighter-rouge">origin</code> 是哪个服务器(本例为 <code class="language-plaintext highlighter-rouge">git.ourcompany.com</code>),从上面获取你尚未拥有的数据,更新你本地的数据库,然后把 <code class="language-plaintext highlighter-rouge">origin/master</code> 的指针移到它最新的位置上(见图 3-24)。</p>
<p><a href="/uploads/2012/09/18333fig0324-tn.png"><img src="/uploads/2012/09/18333fig0324-tn.png" alt="图 3-24" /></a>
图 3-24. git fetch 命令会更新 remote 索引。</p>
<p>为了演示拥有多个远程分支(在不同的远程服务器上)的项目是如何工作的,我们假设你还有另一个仅供你的敏捷开发小组使用的内部服务器 <code class="language-plaintext highlighter-rouge">git.team1.ourcompany.com</code>。可以用第二章中提到的 <code class="language-plaintext highlighter-rouge">git remote add</code> 命令把它加为当前项目的远程分支之一。我们把它命名为 <code class="language-plaintext highlighter-rouge">teamone</code>,以便代替完整的 Git URL 以方便使用(见图 3-25)。</p>
<p><a href="/uploads/2012/09/18333fig0325-tn.png"><img src="/uploads/2012/09/18333fig0325-tn.png" alt="图 3-25" /></a>
图 3-25. 把另一个服务器加为远程仓库</p>
<p>现在你可以用 <code class="language-plaintext highlighter-rouge">git fetch teamone</code> 来获取小组服务器上你还没有的数据了。由于当前该服务器上的内容是你 <code class="language-plaintext highlighter-rouge">origin</code> 服务器上的子集,Git 不会下载任何数据,而只是简单地创建一个名为 <code class="language-plaintext highlighter-rouge">teamone/master</code> 的远程分支,指向 <code class="language-plaintext highlighter-rouge">teamone</code> 服务器上 <code class="language-plaintext highlighter-rouge">master</code> 分支所在的提交对象 <code class="language-plaintext highlighter-rouge">31b8e</code>(见图 3-26)。</p>
<p><a href="/uploads/2012/09/18333fig0326-tn.png"><img src="/uploads/2012/09/18333fig0326-tn.png" alt="图 3-26" /></a>
图 3-26. 你在本地有了一个指向 teamone 服务器上 master 分支的索引。</p>
<h3 id="推送本地分支">推送本地分支</h3>
<p>要想和其他人分享某个本地分支,你需要把它推送到一个你拥有写权限的远程仓库。你创建的本地分支不会因为你的写入操作而被自动同步到你引入的远程服务器上,你需要明确地执行推送分支的操作。换句话说,对于无意分享的分支,你尽管保留为私人分支好了,而只推送那些协同工作要用到的特性分支。</p>
<p>如果你有个叫 <code class="language-plaintext highlighter-rouge">serverfix</code> 的分支需要和他人一起开发,可以运行 <code class="language-plaintext highlighter-rouge">git push (远程仓库名) (分支名)</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git push origin serverfix
Counting objects: 20, done.
Compressing objects: 100% (14/14), done.
Writing objects: 100% (15/15), 1.74 KiB, done.
Total 15 (delta 5), reused 0 (delta 0)
To git@github.com:schacon/simplegit.git
* [new branch] serverfix -> serverfix
</code></pre></div></div>
<p>这里其实走了一点捷径。Git 自动把 <code class="language-plaintext highlighter-rouge">serverfix</code> 分支名扩展为 <code class="language-plaintext highlighter-rouge">refs/heads/serverfix:refs/heads/serverfix</code>,意为“取出我在本地的 serverfix 分支,推送到远程仓库的 serverfix 分支中去”。我们将在第九章进一步介绍 <code class="language-plaintext highlighter-rouge">refs/heads/</code> 部分的细节,不过一般使用的时候都可以省略它。也可以运行 <code class="language-plaintext highlighter-rouge">git push origin serverfix:serferfix</code> 来实现相同的效果,它的意思是“上传我本地的 serverfix 分支到远程仓库中去,仍旧称它为 serverfix 分支”。通过此语法,你可以把本地分支推送到某个命名不同的远程分支:若想把远程分支叫作 <code class="language-plaintext highlighter-rouge">awesomebranch</code>,可以用 <code class="language-plaintext highlighter-rouge">git push origin serverfix:awesomebranch</code> 来推送数据。</p>
<p>接下来,当你的协作者再次从服务器上获取数据时,他们将得到一个新的远程分支 <code class="language-plaintext highlighter-rouge">origin/serverfix</code>,并指向服务器上 <code class="language-plaintext highlighter-rouge">serverfix</code> 所指向的版本:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git fetch origin
remote: Counting objects: 20, done.
remote: Compressing objects: 100% (14/14), done.
remote: Total 15 (delta 5), reused 0 (delta 0)
Unpacking objects: 100% (15/15), done.
From git@github.com:schacon/simplegit
* [new branch] serverfix -> origin/serverfix
</code></pre></div></div>
<p>值得注意的是,在 <code class="language-plaintext highlighter-rouge">fetch</code> 操作下载好新的远程分支之后,你仍然无法在本地编辑该远程仓库中的分支。换句话说,在本例中,你不会有一个新的 <code class="language-plaintext highlighter-rouge">serverfix</code> 分支,有的只是一个你无法移动的 <code class="language-plaintext highlighter-rouge">origin/serverfix</code> 指针。</p>
<p>如果要把该远程分支的内容合并到当前分支,可以运行 <code class="language-plaintext highlighter-rouge">git merge origin/serverfix</code>。如果想要一份自己的 <code class="language-plaintext highlighter-rouge">serverfix</code> 来开发,可以在远程分支的基础上分化出一个新的分支来:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout -b serverfix origin/serverfix
Branch serverfix set up to track remote branch refs/remotes/origin/serverfix.
Switched to a new branch "serverfix"
</code></pre></div></div>
<p>这会切换到新建的 <code class="language-plaintext highlighter-rouge">serverfix</code> 本地分支,其内容同远程分支 <code class="language-plaintext highlighter-rouge">origin/serverfix</code> 一致,这样你就可以在里面继续开发了。</p>
<h3 id="跟踪远程分支">跟踪远程分支</h3>
<p>从远程分支 <code class="language-plaintext highlighter-rouge">checkout</code> 出来的本地分支,称为_跟踪分支(tracking branch)。跟踪分支是一种和某个远程分支有直接联系的本地分支。在跟踪分支里输入 <code class="language-plaintext highlighter-rouge">git push</code>,Git 会自行推断应该向哪个服务器的哪个分支推送数据。同样,在这些分支里运行 <code class="language-plaintext highlighter-rouge">git pull</code> 会获取所有远程索引,并把它们的数据都合并到本地分支中来。</p>
<p>在克隆仓库时,Git 通常会自动创建一个名为 <code class="language-plaintext highlighter-rouge">master</code> 的分支来跟踪 <code class="language-plaintext highlighter-rouge">origin/master</code>。这正是 <code class="language-plaintext highlighter-rouge">git push</code> 和 <code class="language-plaintext highlighter-rouge">git pull</code> 一开始就能正常工作的原因。当然,你可以随心所欲地设定为其它跟踪分支,比如 <code class="language-plaintext highlighter-rouge">origin</code> 上除了 <code class="language-plaintext highlighter-rouge">master</code> 之外的其它分支。刚才我们已经看到了这样的一个例子:<code class="language-plaintext highlighter-rouge">git checkout -b [分支名] [远程名]/[分支名]</code>。如果你有 1.6.2 以上版本的 Git,还可以用 <code class="language-plaintext highlighter-rouge">--track</code> 选项简化:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout --track origin/serverfix
Branch serverfix set up to track remote branch refs/remotes/origin/serverfix.
Switched to a new branch "serverfix"
</code></pre></div></div>
<p>要为本地分支设定不同于远程分支的名字,只需在第一个版本的命令里换个名字:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout -b sf origin/serverfix
Branch sf set up to track remote branch refs/remotes/origin/serverfix.
Switched to a new branch "sf"
</code></pre></div></div>
<p>现在你的本地分支 <code class="language-plaintext highlighter-rouge">sf</code> 会自动将推送和抓取数据的位置定位到 <code class="language-plaintext highlighter-rouge">origin/serverfix</code> 了。</p>
<h3 id="删除远程分支">删除远程分支</h3>
<p>如果不再需要某个远程分支了,比如搞定了某个特性并把它合并进了远程的 <code class="language-plaintext highlighter-rouge">master</code> 分支(或任何其他存放稳定代码的分支),可以用这个非常无厘头的语法来删除它:<code class="language-plaintext highlighter-rouge">git push [远程名] :[分支名]</code>。如果想在服务器上删除 <code class="language-plaintext highlighter-rouge">serverfix</code> 分支,运行下面的命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git push origin :serverfix
To git@github.com:schacon/simplegit.git
- [deleted] serverfix
</code></pre></div></div>
<p>咚!服务器上的分支没了。你最好特别留心这一页,因为你一定会用到那个命令,而且你很可能会忘掉它的语法。有种方便记忆这条命令的方法:记住我们不久前见过的 <code class="language-plaintext highlighter-rouge">git push [远程名] [本地分支]:[远程分支]</code> 语法,如果省略 <code class="language-plaintext highlighter-rouge">[本地分支]</code>,那就等于是在说“在这里提取空白然后把它变成<code class="language-plaintext highlighter-rouge">[远程分支]</code>”。</p>
<h2 id="分支的衍合">分支的衍合</h2>
<p>把一个分支中的修改整合到另一个分支的办法有两种:<code class="language-plaintext highlighter-rouge">merge</code> 和 <code class="language-plaintext highlighter-rouge">rebase</code>(译注:<code class="language-plaintext highlighter-rouge">rebase</code> 的翻译暂定为“衍合”,大家知道就可以了。)。在本章我们会学习什么是衍合,如何使用衍合,为什么衍合操作如此富有魅力,以及我们应该在什么情况下使用衍合。</p>
<h3 id="基本的衍合操作">基本的衍合操作</h3>
<p>请回顾之前有关合并的一节(见图 3-27),你会看到开发进程分叉到两个不同分支,又各自提交了更新。</p>
<p><a href="/uploads/2012/09/18333fig0327-tn.png"><img src="/uploads/2012/09/18333fig0327-tn.png" alt="图 3-27" /></a>
图 3-27. 最初分叉的提交历史。</p>
<p>之前介绍过,最容易的整合分支的方法是 <code class="language-plaintext highlighter-rouge">merge</code> 命令,它会把两个分支最新的快照(C3 和 C4)以及二者最新的共同祖先(C2)进行三方合并,合并的结果是产生一个新的提交对象(C5)。如图 3-28 所示:</p>
<p><a href="/uploads/2012/09/18333fig0328-tn.png"><img src="/uploads/2012/09/18333fig0328-tn.png" alt="图 3-28" /></a>
图 3-28. 通过合并一个分支来整合分叉了的历史。</p>
<p>其实,还有另外一个选择:你可以把在 C3 里产生的变化补丁在 C4 的基础上重新打一遍。在 Git 里,这种操作叫做_衍合(rebase)_。有了 <code class="language-plaintext highlighter-rouge">rebase</code> 命令,就可以把在一个分支里提交的改变移到另一个分支里重放一遍。</p>
<p>在上面这个例子中,运行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout experiment
$ git rebase master
First, rewinding head to replay your work on top of it...
Applying: added staged command
</code></pre></div></div>
<p>它的原理是回到两个分支最近的共同祖先,根据当前分支(也就是要进行衍合的分支 <code class="language-plaintext highlighter-rouge">experiment</code>)后续的历次提交对象(这里只有一个 C3),生成一系列文件补丁,然后以基底分支(也就是主干分支 <code class="language-plaintext highlighter-rouge">master</code>)最后一个提交对象(C4)为新的出发点,逐个应用之前准备好的补丁文件,最后会生成一个新的合并提交对象(C3’),从而改写 <code class="language-plaintext highlighter-rouge">experiment</code> 的提交历史,使它成为 <code class="language-plaintext highlighter-rouge">master</code> 分支的直接下游,如图 3-29 所示:</p>
<p><a href="/uploads/2012/09/18333fig0329-tn.png"><img src="/uploads/2012/09/18333fig0329-tn.png" alt="图 3-29" /></a>
图 3-29. 把 C3 里产生的改变到 C4 上重演一遍。</p>
<p>现在回到 <code class="language-plaintext highlighter-rouge">master</code> 分支,进行一次快进合并(见图 3-30):</p>
<p><a href="/uploads/2012/09/18333fig0330-tn.png"><img src="/uploads/2012/09/18333fig0330-tn.png" alt="图 3-30" /></a>
图 3-30. master 分支的快进。</p>
<p>现在的 C3’ 对应的快照,其实和普通的三方合并,即上个例子中的 C5 对应的快照内容一模一样了。虽然最后整合得到的结果没有任何区别,但衍合能产生一个更为整洁的提交历史。如果视察一个衍合过的分支的历史记录,看起来会更清楚:仿佛所有修改都是在一根线上先后进行的,尽管实际上它们原本是同时并行发生的。</p>
<p>一般我们使用衍合的目的,是想要得到一个能在远程分支上干净应用的补丁 — 比如某些项目你不是维护者,但想帮点忙的话,最好用衍合:先在自己的一个分支里进行开发,当准备向主项目提交补丁的时候,根据最新的 <code class="language-plaintext highlighter-rouge">origin/master</code> 进行一次衍合操作然后再提交,这样维护者就不需要做任何整合工作(译注:实际上是把解决分支补丁同最新主干代码之间冲突的责任,化转为由提交补丁的人来解决。),只需根据你提供的仓库地址作一次快进合并,或者直接采纳你提交的补丁。</p>
<p>请注意,合并结果中最后一次提交所指向的快照,无论是通过衍合,还是三方合并,都会得到相同的快照内容,只不过提交历史不同罢了。衍合是按照每行的修改次序重演一遍修改,而合并是把最终结果合在一起。</p>
<h3 id="有趣的衍合">有趣的衍合</h3>
<p>衍合也可以放到其他分支进行,并不一定非得根据分化之前的分支。以图 3-31 的历史为例,我们为了给服务器端代码添加一些功能而创建了特性分支 <code class="language-plaintext highlighter-rouge">server</code>,然后提交 C3 和 C4。然后又从 C3 的地方再增加一个 <code class="language-plaintext highlighter-rouge">client</code> 分支来对客户端代码进行一些相应修改,所以提交了 C8 和 C9。最后,又回到 <code class="language-plaintext highlighter-rouge">server</code> 分支提交了 C10。</p>
<p><a href="/uploads/2012/09/18333fig0331-tn.png"><img src="/uploads/2012/09/18333fig0331-tn.png" alt="图 3-31" /></a>
图 3-31. 从一个特性分支里再分出一个特性分支的历史。</p>
<p>假设在接下来的一次软件发布中,我们决定先把客户端的修改并到主线中,而暂缓并入服务端软件的修改(因为还需要进一步测试)。这个时候,我们就可以把基于 <code class="language-plaintext highlighter-rouge">server</code> 分支而非 <code class="language-plaintext highlighter-rouge">master</code> 分支的改变(即 C8 和 C9),跳过 <code class="language-plaintext highlighter-rouge">server</code> 直接放到 <code class="language-plaintext highlighter-rouge">master</code> 分支中重演一遍,但这需要用 <code class="language-plaintext highlighter-rouge">git rebase</code> 的 <code class="language-plaintext highlighter-rouge">--onto</code> 选项指定新的基底分支 <code class="language-plaintext highlighter-rouge">master</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git rebase --onto master server client
</code></pre></div></div>
<p>这好比在说:“取出 <code class="language-plaintext highlighter-rouge">client</code> 分支,找出 <code class="language-plaintext highlighter-rouge">client</code> 分支和 <code class="language-plaintext highlighter-rouge">server</code> 分支的共同祖先之后的变化,然后把它们在 <code class="language-plaintext highlighter-rouge">master</code> 上重演一遍”。是不是有点复杂?不过它的结果如图 3-32 所示,非常酷(译注:虽然 <code class="language-plaintext highlighter-rouge">client</code> 里的 C8, C9 在 C3 之后,但这仅表明时间上的先后,而非在 C3 修改的基础上进一步改动,因为 <code class="language-plaintext highlighter-rouge">server</code> 和 <code class="language-plaintext highlighter-rouge">client</code> 这两个分支对应的代码应该是两套文件,虽然这么说不是很严格,但应理解为在 C3 时间点之后,对另外的文件所做的 C8,C9 修改,放到主干重演。):</p>
<p><a href="/uploads/2012/09/18333fig0332-tn.png"><img src="/uploads/2012/09/18333fig0332-tn.png" alt="图 3-32" /></a>
图 3-32. 将特性分支上的另一个特性分支衍合到其他分支。</p>
<p>现在可以快进 <code class="language-plaintext highlighter-rouge">master</code> 分支了(见图 3-33):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout master
$ git merge client
</code></pre></div></div>
<p><a href="/uploads/2012/09/18333fig0333-tn.png"><img src="/uploads/2012/09/18333fig0333-tn.png" alt="图 3-33" /></a>
图 3-33. 快进 master 分支,使之包含 client 分支的变化。</p>
<p>现在我们决定把 <code class="language-plaintext highlighter-rouge">server</code> 分支的变化也包含进来。我们可以直接把 <code class="language-plaintext highlighter-rouge">server</code> 分支衍合到 <code class="language-plaintext highlighter-rouge">master</code>,而不用手工切换到 <code class="language-plaintext highlighter-rouge">server</code> 分支后再执行衍合操作 — <code class="language-plaintext highlighter-rouge">git rebase [主分支] [特性分支]</code> 命令会先取出特性分支 <code class="language-plaintext highlighter-rouge">server</code>,然后在主分支 <code class="language-plaintext highlighter-rouge">master</code> 上重演:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git rebase master server
</code></pre></div></div>
<p>于是,<code class="language-plaintext highlighter-rouge">server</code> 的进度应用到 <code class="language-plaintext highlighter-rouge">master</code> 的基础上,如图 3-34 所示:</p>
<p><a href="/uploads/2012/09/18333fig0334-tn.png"><img src="/uploads/2012/09/18333fig0334-tn.png" alt="图 3-34" /></a>
图 3-34. 在 master 分支上衍合 server 分支。</p>
<p>然后就可以快进主干分支 <code class="language-plaintext highlighter-rouge">master</code> 了:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout master
$ git merge server
</code></pre></div></div>
<p>现在 <code class="language-plaintext highlighter-rouge">client</code> 和 <code class="language-plaintext highlighter-rouge">server</code> 分支的变化都已经集成到主干分支来了,可以删掉它们了。最终我们的提交历史会变成图 3-35 的样子:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git branch -d client
$ git branch -d server
</code></pre></div></div>
<p><a href="/uploads/2012/09/18333fig0335-tn.png"><img src="/uploads/2012/09/18333fig0335-tn.png" alt="图 3-35" /></a>
图 3-35. 最终的提交历史</p>
<h3 id="衍合的风险">衍合的风险</h3>
<p>呃,奇妙的衍合也并非完美无缺,要用它得遵守一条准则:</p>
<p><strong>一旦分支中的提交对象发布到公共仓库,就千万不要对该分支进行衍合操作。</strong></p>
<p>如果你遵循这条金科玉律,就不会出差错。否则,人民群众会仇恨你,你的朋友和家人也会嘲笑你,唾弃你。</p>
<p>在进行衍合的时候,实际上抛弃了一些现存的提交对象而创造了一些类似但不同的新的提交对象。如果你把原来分支中的提交对象发布出去,并且其他人更新下载后在其基础上开展工作,而稍后你又用 <code class="language-plaintext highlighter-rouge">git rebase</code> 抛弃这些提交对象,把新的重演后的提交对象发布出去的话,你的合作者就不得不重新合并他们的工作,这样当你再次从他们那里获取内容时,提交历史就会变得一团糟。</p>
<p>下面我们用一个实际例子来说明为什么公开的衍合会带来问题。假设你从一个中央服务器克隆然后在它的基础上搞了一些开发,提交历史类似图 3-36 所示:</p>
<p><a href="/uploads/2012/09/18333fig0336-tn.png"><img src="/uploads/2012/09/18333fig0336-tn.png" alt="图 3-36" /></a>
图 3-36. 克隆一个仓库,在其基础上工作一番。</p>
<p>现在,某人在 C1 的基础上做了些改变,并合并他自己的分支得到结果 C6,推送到中央服务器。当你抓取并合并这些数据到你本地的开发分支中后,会得到合并结果 C7,历史提交会变成图 3-37 这样:</p>
<p><a href="/uploads/2012/09/18333fig0337-tn.png"><img src="/uploads/2012/09/18333fig0337-tn.png" alt="图 3-37" /></a>
图 3-37. 抓取他人提交,并入自己主干。</p>
<p>接下来,那个推送 C6 上来的人决定用衍合取代之前的合并操作;继而又用 <code class="language-plaintext highlighter-rouge">git push --force</code> 覆盖了服务器上的历史,得到 C4’。而之后当你再从服务器上下载最新提交后,会得到:</p>
<p><a href="/uploads/2012/09/18333fig0338-tn.png"><img src="/uploads/2012/09/18333fig0338-tn.png" alt="图 3-38" /></a>
图 3-38. 有人推送了衍合后得到的 C4’,丢弃了你作为开发基础的 C4 和 C6。</p>
<p>下载更新后需要合并,但此时衍合产生的提交对象 C4’ 的 SHA-1 校验值和之前 C4 完全不同,所以 Git 会把它们当作新的提交对象处理,而实际上此刻你的提交历史 C7 中早已经包含了 C4 的修改内容,于是合并操作会把 C7 和 C4’ 合并为 C8(见图 3-39):</p>
<p><a href="/uploads/2012/09/18333fig0339-tn.png"><img src="/uploads/2012/09/18333fig0339-tn.png" alt="图 3-39" /></a>
图 3-39. 你把相同的内容又合并了一遍,生成一个新的提交 C8。</p>
<p>C8 这一步的合并是迟早会发生的,因为只有这样你才能和其他协作者提交的内容保持同步。而在 C8 之后,你的提交历史里就会同时包含 C4 和 C4’,两者有着不同的 SHA-1 校验值,如果用 <code class="language-plaintext highlighter-rouge">git log</code> 查看历史,会看到两个提交拥有相同的作者日期与说明,令人费解。而更糟的是,当你把这样的历史推送到服务器后,会再次把这些衍合后的提交引入到中央服务器,进一步困扰其他人(译注:这个例子中,出问题的责任方是那个发布了 C6 后又用衍合发布 C4’ 的人,其他人会因此反馈双重历史到共享主干,从而混淆大家的视听。)。</p>
<p>如果把衍合当成一种在推送之前清理提交历史的手段,而且仅仅衍合那些尚未公开的提交对象,就没问题。如果衍合那些已经公开的提交对象,并且已经有人基于这些提交对象开展了后续开发工作的话,就会出现叫人沮丧的麻烦。</p>
<h2 id="小结">小结</h2>
<p>读到这里,你应该已经学会了如何创建分支并切换到新分支,在不同分支间转换,合并本地分支,把分支推送到共享服务器上,使用共享分支与他人协作,以及在分享之前进行衍合。</p>
02-Git基础
2012-10-13T00:00:00+00:00
http://wangdaodao.github.io/2012-10-13/git-basics
<p>读完本章你就能上手使用 Git 了。本章将介绍几个最基本的,也是最常用的 Git 命令,以后绝大多数时间里用到的也就是这几个命令。读完本章,你就能初始化一个新的代码仓库,做一些适当配置;开始或停止跟踪某些文件;暂存或提交某些更新。我们还会展示如何让 Git 忽略某些文件,或是名称符合特定模式的文件;如何既快且容易地撤消犯下的小错误;如何浏览项目的更新历史,查看某两次更新之间的差异;以及如何从远程仓库拉数据下来或者推数据上去。</p>
<h2 id="取得项目的-git-仓库">取得项目的 Git 仓库</h2>
<p>有两种取得 Git 项目仓库的方法。第一种是在现存的目录下,通过导入所有文件来创建新的 Git 仓库。第二种是从已有的 Git 仓库克隆出一个新的镜像仓库来。</p>
<h3 id="在工作目录中初始化新仓库">在工作目录中初始化新仓库</h3>
<p>要对现有的某个项目开始用 Git 管理,只需到此项目所在的目录,执行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git init
</code></pre></div></div>
<p>初始化后,在当前目录下会出现一个名为 .git 的目录,所有 Git 需要的数据和资源都存放在这个目录中。不过目前,仅仅是按照既有的结构框架初始化好了里边所有的文件和目录,但我们还没有开始跟踪管理项目中的任何一个文件。(在第九章我们会详细说明刚才创建的 <code class="language-plaintext highlighter-rouge">.git</code> 目录中究竟有哪些文件,以及都起些什么作用。)</p>
<p>如果当前目录下有几个文件想要纳入版本控制,需要先用 git add 命令告诉 Git 开始对这些文件进行跟踪,然后提交:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git add *.c
$ git add README
$ git commit -m 'initial project version'
</code></pre></div></div>
<p>稍后我们再逐一解释每条命令的意思。不过现在,你已经得到了一个实际维护着若干文件的 Git 仓库。</p>
<h3 id="从现有仓库克隆">从现有仓库克隆</h3>
<p>如果想对某个开源项目出一份力,可以先把该项目的 Git 仓库复制一份出来,这就需要用到 git clone 命令。如果你熟悉其他的 VCS 比如 Subversion,你可能已经注意到这里使用的是 clone 而不是 checkout。这是个非常重要的差别,Git 收取的是项目历史的所有数据(每一个文件的每一个版本),服务器上有的数据克隆之后本地也都有了。实际上,即便服务器的磁盘发生故障,用任何一个克隆出来的客户端都可以重建服务器上的仓库,回到当初克隆时的状态(虽然可能会丢失某些服务器端的挂钩设置,但所有版本的数据仍旧还在,有关细节请参考第四章)。</p>
<p>克隆仓库的命令格式为 <code class="language-plaintext highlighter-rouge">git clone [url]</code>。比如,要克隆 Ruby 语言的 Git 代码仓库 Grit,可以用下面的命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone git://github.com/schacon/grit.git
</code></pre></div></div>
<p>这会在当前目录下创建一个名为“grit”的目录,其中包含一个 <code class="language-plaintext highlighter-rouge">.git</code> 的目录,用于保存下载下来的所有版本记录,然后从中取出最新版本的文件拷贝。如果进入这个新建的 <code class="language-plaintext highlighter-rouge">grit</code> 目录,你会看到项目中的所有文件已经在里边了,准备好后续的开发和使用。如果希望在克隆的时候,自己定义要新建的项目目录名称,可以在上面的命令末尾指定新的名字:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone git://github.com/schacon/grit.git mygrit
</code></pre></div></div>
<p>唯一的差别就是,现在新建的目录成了 mygrit,其他的都和上边的一样。</p>
<p>Git 支持许多数据传输协议。之前的例子使用的是 <code class="language-plaintext highlighter-rouge">git://</code> 协议,不过你也可以用 <code class="language-plaintext highlighter-rouge">http(s)://</code> 或者 <code class="language-plaintext highlighter-rouge">user@server:/path.git</code> 表示的 SSH 传输协议。我们会在第四章详细介绍所有这些协议在服务器端该如何配置使用,以及各种方式之间的利弊。</p>
<h2 id="记录每次更新到仓库">记录每次更新到仓库</h2>
<p>现在我们手上已经有了一个真实项目的 Git 仓库,并从这个仓库中取出了所有文件的工作拷贝。接下来,对这些文件作些修改,在完成了一个阶段的目标之后,提交本次更新到仓库。</p>
<p>请记住,工作目录下面的所有文件都不外乎这两种状态:已跟踪或未跟踪。已跟踪的文件是指本来就被纳入版本控制管理的文件,在上次快照中有它们的记录,工作一段时间后,它们的状态可能是未更新,已修改或者已放入暂存区。而所有其他文件都属于未跟踪文件。它们既没有上次更新时的快照,也不在当前的暂存区域。初次克隆某个仓库时,工作目录中的所有文件都属于已跟踪文件,且状态为未修改。</p>
<p>在编辑过某些文件之后,Git 将这些文件标为已修改。我们逐步把这些修改过的文件放到暂存区域,直到最后一次性提交所有这些暂存起来的文件,如此重复。所以使用 Git 时的文件状态变化周期如图 2-1 所示。</p>
<p><a href="/uploads/2012/09/18333fig0201-tn.png"><img src="/uploads/2012/09/18333fig0201-tn.png" alt="图 2-1" /></a>
图 2-1. 文件的状态变化周期</p>
<h3 id="检查当前文件状态">检查当前文件状态</h3>
<p>要确定哪些文件当前处于什么状态,可以用 git status 命令。如果在克隆仓库之后立即执行此命令,会看到类似这样的输出:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git status
# On branch master
nothing to commit (working directory clean)
</code></pre></div></div>
<p>这说明你现在的工作目录相当干净。换句话说,当前没有任何跟踪着的文件,也没有任何文件在上次提交后更改过。此外,上面的信息还表明,当前目录下没有出现任何处于未跟踪的新文件,否则 Git 会在这里列出来。最后,该命令还显示了当前所在的分支是 master,这是默认的分支名称,实际是可以修改的,现在先不用考虑。下一章我们就会详细讨论分支和引用。</p>
<p>现在让我们用 vim 编辑一个新文件 README,保存退出后运行 <code class="language-plaintext highlighter-rouge">git status</code> 会看到该文件出现在未跟踪文件列表中:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ vim README
$ git status
# On branch master
# Untracked files:
# (use "git add <file>..." to include in what will be committed)
#
# README
nothing added to commit but untracked files present (use "git add" to track)
</code></pre></div></div>
<p>就是在“Untracked files”这行下面。Git 不会自动将之纳入跟踪范围,除非你明明白白地告诉它“我需要跟踪该文件”,因而不用担心把临时文件什么的也归入版本管理。不过现在的例子中,我们确实想要跟踪管理 README 这个文件。</p>
<h3 id="跟踪新文件">跟踪新文件</h3>
<p>使用命令 <code class="language-plaintext highlighter-rouge">git add</code> 开始跟踪一个新文件。所以,要跟踪 README 文件,运行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git add README
</code></pre></div></div>
<p>此时再运行 <code class="language-plaintext highlighter-rouge">git status</code> 命令,会看到 README 文件已被跟踪,并处于暂存状态:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# new file: README
#
</code></pre></div></div>
<p>只要在 “Changes to be committed” 这行下面的,就说明是已暂存状态。如果此时提交,那么该文件此时此刻的版本将被留存在历史记录中。你可能会想起之前我们使用 <code class="language-plaintext highlighter-rouge">git init</code> 后就运行了 <code class="language-plaintext highlighter-rouge">git add</code> 命令,开始跟踪当前目录下的文件。在 <code class="language-plaintext highlighter-rouge">git add</code> 后面可以指明要跟踪的文件或目录路径。如果是目录的话,就说明要递归跟踪该目录下的所有文件。(译注:其实 <code class="language-plaintext highlighter-rouge">git add</code> 的潜台词就是把目标文件快照放入暂存区域,也就是 add file into staged area,同时未曾跟踪过的文件标记为需要跟踪。这样就好理解后续 add 操作的实际意义了。)</p>
<h3 id="暂存已修改文件">暂存已修改文件</h3>
<p>现在我们修改下之前已跟踪过的文件 <code class="language-plaintext highlighter-rouge">benchmarks.rb</code>,然后再次运行 <code class="language-plaintext highlighter-rouge">status</code> 命令,会看到这样的状态报告:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# new file: README
#
# Changed but not updated:
# (use "git add <file>..." to update what will be committed)
#
# modified: benchmarks.rb
#
</code></pre></div></div>
<p>文件 benchmarks.rb 出现在 “Changed but not updated” 这行下面,说明已跟踪文件的内容发生了变化,但还没有放到暂存区。要暂存这次更新,需要运行 <code class="language-plaintext highlighter-rouge">git add</code> 命令(这是个多功能命令,根据目标文件的状态不同,此命令的效果也不同:可以用它开始跟踪新文件,或者把已跟踪的文件放到暂存区,还能用于合并时把有冲突的文件标记为已解决状态等)。现在让我们运行 <code class="language-plaintext highlighter-rouge">git add</code> 将 benchmarks.rb 放到暂存区,然后再看看 <code class="language-plaintext highlighter-rouge">git status</code> 的输出:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git add benchmarks.rb
$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# new file: README
# modified: benchmarks.rb
#
</code></pre></div></div>
<p>现在两个文件都已暂存,下次提交时就会一并记录到仓库。假设此时,你想要在 benchmarks.rb 里再加条注释,重新编辑存盘后,准备好提交。不过且慢,再运行 <code class="language-plaintext highlighter-rouge">git status</code> 看看:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ vim benchmarks.rb
$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# new file: README
# modified: benchmarks.rb
#
# Changed but not updated:
# (use "git add <file>..." to update what will be committed)
#
# modified: benchmarks.rb
#
</code></pre></div></div>
<p>怎么回事?benchmarks.rb 文件出现了两次!一次算未暂存,一次算已暂存,这怎么可能呢?好吧,实际上 Git 只不过暂存了你运行 git add 命令时的版本,如果现在提交,那么提交的是添加注释前的版本,而非当前工作目录中的版本。所以,运行了 <code class="language-plaintext highlighter-rouge">git add</code> 之后又作了修订的文件,需要重新运行 <code class="language-plaintext highlighter-rouge">git add</code> 把最新版本重新暂存起来:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git add benchmarks.rb
$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# new file: README
# modified: benchmarks.rb
#
</code></pre></div></div>
<h3 id="忽略某些文件">忽略某些文件</h3>
<p>一般我们总会有些文件无需纳入 Git 的管理,也不希望它们总出现在未跟踪文件列表。通常都是些自动生成的文件,比如日志文件,或者编译过程中创建的临时文件等。我们可以创建一个名为 .gitignore 的文件,列出要忽略的文件模式。来看一个实际的例子:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cat .gitignore
*.[oa]
*~
</code></pre></div></div>
<p>第一行告诉 Git 忽略所有以 .o 或 .a 结尾的文件。一般这类对象文件和存档文件都是编译过程中出现的,我们用不着跟踪它们的版本。第二行告诉 Git 忽略所有以波浪符(<code class="language-plaintext highlighter-rouge">~</code>)结尾的文件,许多文本编辑软件(比如 Emacs)都用这样的文件名保存副本。此外,你可能还需要忽略 log,tmp 或者 pid 目录,以及自动生成的文档等等。要养成一开始就设置好 .gitignore 文件的习惯,以免将来误提交这类无用的文件。</p>
<p>文件 .gitignore 的格式规范如下:</p>
<ul>
<li>所有空行或者以注释符号 # 开头的行都会被 Git 忽略。</li>
<li>可以使用标准的 glob 模式匹配。</li>
<li>匹配模式最后跟反斜杠(<code class="language-plaintext highlighter-rouge">/</code>)说明要忽略的是目录。</li>
<li>要忽略指定模式以外的文件或目录,可以在模式前加上惊叹号(<code class="language-plaintext highlighter-rouge">!</code>)取反。</li>
</ul>
<p>所谓的 glob 模式是指 shell 所使用的简化了的正则表达式。星号(<code class="language-plaintext highlighter-rouge">*</code>)匹配零个或多个任意字符;<code class="language-plaintext highlighter-rouge">[abc]</code> 匹配任何一个列在方括号中的字符(这个例子要么匹配一个 a,要么匹配一个 b,要么匹配一个 c);问号(<code class="language-plaintext highlighter-rouge">?</code>)只匹配一个任意字符;如果在方括号中使用短划线分隔两个字符,表示所有在这两个字符范围内的都可以匹配(比如 <code class="language-plaintext highlighter-rouge">[0-9]</code> 表示匹配所有 0 到 9 的数字)。</p>
<p>我们再看一个 .gitignore 文件的例子:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># 此为注释 – 将被 Git 忽略
*.a # 忽略所有 .a 结尾的文件
!lib.a # 但 lib.a 除外
/TODO # 仅仅忽略项目根目录下的 TODO 文件,不包括 subdir/TODO
build/ # 忽略 build/ 目录下的所有文件
doc/*.txt # 会忽略 doc/notes.txt 但不包括 doc/server/arch.txt
</code></pre></div></div>
<h3 id="查看已暂存和未暂存的更新">查看已暂存和未暂存的更新</h3>
<p>实际上 <code class="language-plaintext highlighter-rouge">git status</code> 的显示比较简单,仅仅是列出了修改过的文件,如果要查看具体修改了什么地方,可以用 <code class="language-plaintext highlighter-rouge">git diff</code> 命令。稍后我们会详细介绍 <code class="language-plaintext highlighter-rouge">git diff</code>,不过现在,它已经能回答我们的两个问题了:当前做的哪些更新还没有暂存?有哪些更新已经暂存起来准备好了下次提交? <code class="language-plaintext highlighter-rouge">git diff</code> 会使用文件补丁的格式显示具体添加和删除的行。</p>
<p>假如再次修改 README 文件后暂存,然后编辑 benchmarks.rb 文件后先别暂存,运行 <code class="language-plaintext highlighter-rouge">status</code> 命令,会看到:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# new file: README
#
# Changed but not updated:
# (use "git add <file>..." to update what will be committed)
#
# modified: benchmarks.rb
#
</code></pre></div></div>
<p>要查看尚未暂存的文件更新了哪些部分,不加参数直接输入 <code class="language-plaintext highlighter-rouge">git diff</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git diff
diff --git a/benchmarks.rb b/benchmarks.rb
index 3cb747f..da65585 100644
--- a/benchmarks.rb
+++ b/benchmarks.rb
@@ -36,6 +36,10 @@ def main
@commit.parents[0].parents[0].parents[0]
end
+ run_code(x, 'commits 1') do
+ git.commits.size
+ end
+
run_code(x, 'commits 2') do
log = git.commits('master', 15)
log.size
</code></pre></div></div>
<p>此命令比较的是工作目录中当前文件和暂存区域快照之间的差异,也就是修改之后还没有暂存起来的变化内容。</p>
<p>若要看已经暂存起来的文件和上次提交时的快照之间的差异,可以用 <code class="language-plaintext highlighter-rouge">git diff --cached</code> 命令。(Git 1.6.1 及更高版本还允许使用 <code class="language-plaintext highlighter-rouge">git diff --staged</code>,效果是相同的,但更好记些。)来看看实际的效果:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git diff --cached
diff --git a/README b/README
new file mode 100644
index 0000000..03902a1
--- /dev/null
+++ b/README2
@@ -0,0 +1,5 @@
+grit
+ by Tom Preston-Werner, Chris Wanstrath
+ http://github.com/mojombo/grit
+
+Grit is a Ruby library for extracting information from a Git repository
</code></pre></div></div>
<p>请注意,单单 <code class="language-plaintext highlighter-rouge">git diff</code> 不过是显示还没有暂存起来的改动,而不是这次工作和上次提交之间的差异。所以有时候你一下子暂存了所有更新过的文件后,运行 <code class="language-plaintext highlighter-rouge">git diff</code> 后却什么也没有,就是这个原因。</p>
<p>像之前说的,暂存 benchmarks.rb 后再编辑,运行 <code class="language-plaintext highlighter-rouge">git status</code> 会看到暂存前后的两个版本:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git add benchmarks.rb
$ echo '# test line' >> benchmarks.rb
$ git status
# On branch master
#
# Changes to be committed:
#
# modified: benchmarks.rb
#
# Changed but not updated:
#
# modified: benchmarks.rb
#
</code></pre></div></div>
<p>现在运行 <code class="language-plaintext highlighter-rouge">git diff</code> 看暂存前后的变化:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git diff
diff --git a/benchmarks.rb b/benchmarks.rb
index e445e28..86b2f7c 100644
--- a/benchmarks.rb
+++ b/benchmarks.rb
@@ -127,3 +127,4 @@ end
main()
##pp Grit::GitRuby.cache_client.stats
+# test line
</code></pre></div></div>
<p>然后用 <code class="language-plaintext highlighter-rouge">git diff --cached</code> 查看已经暂存起来的变化:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git diff --cached
diff --git a/benchmarks.rb b/benchmarks.rb
index 3cb747f..e445e28 100644
--- a/benchmarks.rb
+++ b/benchmarks.rb
@@ -36,6 +36,10 @@ def main
@commit.parents[0].parents[0].parents[0]
end
+ run_code(x, 'commits 1') do
+ git.commits.size
+ end
+
run_code(x, 'commits 2') do
log = git.commits('master', 15)
log.size
</code></pre></div></div>
<h3 id="提交更新">提交更新</h3>
<p>现在的暂存区域已经准备妥当可以提交了。在此之前,请一定要确认还有什么修改过的或新建的文件还没有 <code class="language-plaintext highlighter-rouge">git add</code> 过,否则提交的时候不会记录这些还没暂存起来的变化。所以,每次准备提交前,先用 <code class="language-plaintext highlighter-rouge">git status</code> 看下,是不是都已暂存起来了,然后再运行提交命令 <code class="language-plaintext highlighter-rouge">git commit</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git commit
</code></pre></div></div>
<p>这种方式会启动文本编辑器以便输入本次提交的说明。(默认会启用 shell 的环境变量 <code class="language-plaintext highlighter-rouge">$EDITOR</code> 所指定的软件,一般都是 vim 或 emacs。当然也可以按照第一章介绍的方式,使用 <code class="language-plaintext highlighter-rouge">git config --global core.editor</code> 命令设定你喜欢的编辑软件。)</p>
<p>编辑器会显示类似下面的文本信息(本例选用 Vim 的屏显方式展示):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# new file: README
# modified: benchmarks.rb
~
~
~
".git/COMMIT_EDITMSG" 10L, 283C
</code></pre></div></div>
<p>可以看到,默认的提交消息包含最后一次运行 <code class="language-plaintext highlighter-rouge">git status</code> 的输出,放在注释行里,另外开头还有一空行,供你输入提交说明。你完全可以去掉这些注释行,不过留着也没关系,多少能帮你回想起这次更新的内容有哪些。(如果觉得这还不够,可以用 <code class="language-plaintext highlighter-rouge">-v</code> 选项将修改差异的每一行都包含到注释中来。)退出编辑器时,Git 会丢掉注释行,将说明内容和本次更新提交到仓库。</p>
<p>另外也可以用 -m 参数后跟提交说明的方式,在一行命令中提交更新:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git commit -m "Story 182: Fix benchmarks for speed"
[master]: created 463dc4f: "Fix benchmarks for speed"
2 files changed, 3 insertions(+), 0 deletions(-)
create mode 100644 README
</code></pre></div></div>
<p>好,现在你已经创建了第一个提交!可以看到,提交后它会告诉你,当前是在哪个分支(master)提交的,本次提交的完整 SHA-1 校验和是什么(<code class="language-plaintext highlighter-rouge">463dc4f</code>),以及在本次提交中,有多少文件修订过,多少行添改和删改过。</p>
<p>记住,提交时记录的是放在暂存区域的快照,任何还未暂存的仍然保持已修改状态,可以在下次提交时纳入版本管理。每一次运行提交操作,都是对你项目作一次快照,以后可以回到这个状态,或者进行比较。</p>
<h3 id="跳过使用暂存区域">跳过使用暂存区域</h3>
<p>尽管使用暂存区域的方式可以精心准备要提交的细节,但有时候这么做略显繁琐。Git 提供了一个跳过使用暂存区域的方式,只要在提交的时候,给 <code class="language-plaintext highlighter-rouge">git commit</code> 加上 <code class="language-plaintext highlighter-rouge">-a</code> 选项,Git 就会自动把所有已经跟踪过的文件暂存起来一并提交,从而跳过 <code class="language-plaintext highlighter-rouge">git add</code> 步骤:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git status
# On branch master
#
# Changed but not updated:
#
# modified: benchmarks.rb
#
$ git commit -a -m 'added new benchmarks'
[master 83e38c7] added new benchmarks
1 files changed, 5 insertions(+), 0 deletions(-)
</code></pre></div></div>
<p>看到了吗?提交之前不再需要 <code class="language-plaintext highlighter-rouge">git add</code> 文件 benchmarks.rb 了。</p>
<h3 id="移除文件">移除文件</h3>
<p>要从 Git 中移除某个文件,就必须要从已跟踪文件清单中移除(确切地说,是从暂存区域移除),然后提交。可以用 <code class="language-plaintext highlighter-rouge">git rm</code> 命令完成此项工作,并连带从工作目录中删除指定的文件,这样以后就不会出现在未跟踪文件清单中了。</p>
<p>如果只是简单地从工作目录中手工删除文件,运行 <code class="language-plaintext highlighter-rouge">git status</code> 时就会在 “Changed but not updated” 部分(也就是_未暂存_清单)看到:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ rm grit.gemspec
$ git status
# On branch master
#
# Changed but not updated:
# (use "git add/rm <file>..." to update what will be committed)
#
# deleted: grit.gemspec
#
</code></pre></div></div>
<p>然后再运行 <code class="language-plaintext highlighter-rouge">git rm</code> 记录此次移除文件的操作:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git rm grit.gemspec
rm 'grit.gemspec'
$ git status
# On branch master
#
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# deleted: grit.gemspec
#
</code></pre></div></div>
<p>最后提交的时候,该文件就不再纳入版本管理了。如果删除之前修改过并且已经放到暂存区域的话,则必须要用强制删除选项 <code class="language-plaintext highlighter-rouge">-f</code>(译注:即 force 的首字母),以防误删除文件后丢失修改的内容。</p>
<p>另外一种情况是,我们想把文件从 Git 仓库中删除(亦即从暂存区域移除),但仍然希望保留在当前工作目录中。换句话说,仅是从跟踪清单中删除。比如一些大型日志文件或者一堆 <code class="language-plaintext highlighter-rouge">.a</code> 编译文件,不小心纳入仓库后,要移除跟踪但不删除文件,以便稍后在 <code class="language-plaintext highlighter-rouge">.gitignore</code> 文件中补上,用 <code class="language-plaintext highlighter-rouge">--cached</code> 选项即可:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git rm --cached readme.txt
</code></pre></div></div>
<p>后面可以列出文件或者目录的名字,也可以使用 glob 模式。比方说:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git rm log/\*.log
</code></pre></div></div>
<p>注意到星号 <code class="language-plaintext highlighter-rouge">*</code> 之前的反斜杠 <code class="language-plaintext highlighter-rouge">\</code>,因为 Git 有它自己的文件模式扩展匹配方式,所以我们不用 shell 来帮忙展开(译注:实际上不加反斜杠也可以运行,只不过按照 shell 扩展的话,仅仅删除指定目录下的文件而不会递归匹配。上面的例子本来就指定了目录,所以效果等同,但下面的例子就会用递归方式匹配,所以必须加反斜杠。)。此命令删除所有 <code class="language-plaintext highlighter-rouge">log/</code> 目录下扩展名为 <code class="language-plaintext highlighter-rouge">.log</code> 的文件。类似的比如:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git rm \*~
</code></pre></div></div>
<p>会递归删除当前目录及其子目录中所有 <code class="language-plaintext highlighter-rouge">~</code> 结尾的文件。</p>
<h3 id="移动文件">移动文件</h3>
<p>不像其他的 VCS 系统,Git 并不跟踪文件移动操作。如果在 Git 中重命名了某个文件,仓库中存储的元数据并不会体现出这是一次改名操作。不过 Git 非常聪明,它会推断出究竟发生了什么,至于具体是如何做到的,我们稍后再谈。</p>
<p>既然如此,当你看到 Git 的 <code class="language-plaintext highlighter-rouge">mv</code> 命令时一定会困惑不已。要在 Git 中对文件改名,可以这么做:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git mv file_from file_to
</code></pre></div></div>
<p>它会恰如预期般正常工作。实际上,即便此时查看状态信息,也会明白无误地看到关于重命名操作的说明:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git mv README.txt README
$ git status
# On branch master
# Your branch is ahead of 'origin/master' by 1 commit.
#
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# renamed: README.txt -> README
#
</code></pre></div></div>
<p>其实,运行 <code class="language-plaintext highlighter-rouge">git mv</code> 就相当于运行了下面三条命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ mv README.txt README
$ git rm README.txt
$ git add README
</code></pre></div></div>
<p>如此分开操作,Git 也会意识到这是一次改名,所以不管何种方式都一样。当然,直接用 <code class="language-plaintext highlighter-rouge">git mv</code> 轻便得多,不过有时候用其他工具批处理改名的话,要记得在提交前删除老的文件名,再添加新的文件名。</p>
<h2 id="查看提交历史">查看提交历史</h2>
<p>在提交了若干更新之后,又或者克隆了某个项目,想回顾下提交历史,可以使用 <code class="language-plaintext highlighter-rouge">git log</code> 命令查看。</p>
<p>接下来的例子会用我专门用于演示的 simplegit 项目,运行下面的命令获取该项目源代码:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git clone git://github.com/schacon/simplegit-progit.git
</code></pre></div></div>
<p>然后在此项目中运行 <code class="language-plaintext highlighter-rouge">git log</code>,应该会看到下面的输出:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log
commit ca82a6dff817ec66f44342007202690a93763949
Author: Scott Chacon <schacon@gee-mail.com>
Date: Mon Mar 17 21:52:11 2008 -0700
changed the version number
commit 085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7
Author: Scott Chacon <schacon@gee-mail.com>
Date: Sat Mar 15 16:40:33 2008 -0700
removed unnecessary test code
commit a11bef06a3f659402fe7563abf99ad00de2209e6
Author: Scott Chacon <schacon@gee-mail.com>
Date: Sat Mar 15 10:31:28 2008 -0700
first commit
</code></pre></div></div>
<p>默认不用任何参数的话,<code class="language-plaintext highlighter-rouge">git log</code> 会按提交时间列出所有的更新,最近的更新排在最上面。看到了吗,每次更新都有一个 SHA-1 校验和、作者的名字和电子邮件地址、提交时间,最后缩进一个段落显示提交说明。</p>
<p><code class="language-plaintext highlighter-rouge">git log</code> 有许多选项可以帮助你搜寻感兴趣的提交,接下来我们介绍些最常用的。</p>
<p>我们常用 <code class="language-plaintext highlighter-rouge">-p</code> 选项展开显示每次提交的内容差异,用 <code class="language-plaintext highlighter-rouge">-2</code> 则仅显示最近的两次更新:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log -p -2
commit ca82a6dff817ec66f44342007202690a93763949
Author: Scott Chacon <schacon@gee-mail.com>
Date: Mon Mar 17 21:52:11 2008 -0700
changed the version number
diff --git a/Rakefile b/Rakefile
index a874b73..8f94139 100644
--- a/Rakefile
+++ b/Rakefile
@@ -5,7 +5,7 @@ require 'rake/gempackagetask'
spec = Gem::Specification.new do |s|
- s.version = "0.1.0"
+ s.version = "0.1.1"
s.author = "Scott Chacon"
commit 085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7
Author: Scott Chacon <schacon@gee-mail.com>
Date: Sat Mar 15 16:40:33 2008 -0700
removed unnecessary test code
diff --git a/lib/simplegit.rb b/lib/simplegit.rb
index a0a60ae..47c6340 100644
--- a/lib/simplegit.rb
+++ b/lib/simplegit.rb
@@ -18,8 +18,3 @@ class SimpleGit
end
end
-
-if $0 == __FILE__
- git = SimpleGit.new
- puts git.show
-end
\ No newline at end of file
</code></pre></div></div>
<p>在做代码审查,或者要快速浏览其他协作者提交的更新都作了哪些改动时,就可以用这个选项。此外,还有许多摘要选项可以用,比如 <code class="language-plaintext highlighter-rouge">--stat</code>,仅显示简要的增改行数统计:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log --stat
commit ca82a6dff817ec66f44342007202690a93763949
Author: Scott Chacon <schacon@gee-mail.com>
Date: Mon Mar 17 21:52:11 2008 -0700
changed the version number
Rakefile | 2 +-
1 files changed, 1 insertions(+), 1 deletions(-)
commit 085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7
Author: Scott Chacon <schacon@gee-mail.com>
Date: Sat Mar 15 16:40:33 2008 -0700
removed unnecessary test code
lib/simplegit.rb | 5 -----
1 files changed, 0 insertions(+), 5 deletions(-)
commit a11bef06a3f659402fe7563abf99ad00de2209e6
Author: Scott Chacon <schacon@gee-mail.com>
Date: Sat Mar 15 10:31:28 2008 -0700
first commit
README | 6 ++++++
Rakefile | 23 +++++++++++++++++++++++
lib/simplegit.rb | 25 +++++++++++++++++++++++++
3 files changed, 54 insertions(+), 0 deletions(-)
</code></pre></div></div>
<p>每个提交都列出了修改过的文件,以及其中添加和移除的行数,并在最后列出所有增减行数小计。还有个常用的 <code class="language-plaintext highlighter-rouge">--pretty</code> 选项,可以指定使用完全不同于默认格式的方式展示提交历史。比如用 <code class="language-plaintext highlighter-rouge">oneline</code> 将每个提交放在一行显示,这在提交数很大时非常有用。另外还有 <code class="language-plaintext highlighter-rouge">short</code>,<code class="language-plaintext highlighter-rouge">full</code> 和 <code class="language-plaintext highlighter-rouge">fuller</code> 可以用,展示的信息或多或少有些不同,请自己动手实践一下看看效果如何。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log --pretty=oneline
ca82a6dff817ec66f44342007202690a93763949 changed the version number
085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7 removed unnecessary test code
a11bef06a3f659402fe7563abf99ad00de2209e6 first commit
</code></pre></div></div>
<p>但最有意思的是 <code class="language-plaintext highlighter-rouge">format</code>,可以定制要显示的记录格式,这样的输出便于后期编程提取分析,像这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log --pretty=format:"%h - %an, %ar : %s"
ca82a6d - Scott Chacon, 11 months ago : changed the version number
085bb3b - Scott Chacon, 11 months ago : removed unnecessary test code
a11bef0 - Scott Chacon, 11 months ago : first commit
</code></pre></div></div>
<p>表 2-1 列出了常用的格式占位符写法及其代表的意义。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>选项 说明
%H 提交对象(commit)的完整哈希字串
%h 提交对象的简短哈希字串
%T 树对象(tree)的完整哈希字串
%t 树对象的简短哈希字串
%P 父对象(parent)的完整哈希字串
%p 父对象的简短哈希字串
%an 作者(author)的名字
%ae 作者的电子邮件地址
%ad 作者修订日期(可以用 -date= 选项定制格式)
%ar 作者修订日期,按多久以前的方式显示
%cn 提交者(committer)的名字
%ce 提交者的电子邮件地址
%cd 提交日期
%cr 提交日期,按多久以前的方式显示
%s 提交说明
</code></pre></div></div>
<p>你一定奇怪_作者(author)_和_提交者(committer)_之间究竟有何差别,其实作者指的是实际作出修改的人,提交者指的是最后将此工作成果提交到仓库的人。所以,当你为某个项目发布补丁,然后某个核心成员将你的补丁并入项目时,你就是作者,而那个核心成员就是提交者。我们会在第五章再详细介绍两者之间的细微差别。</p>
<p>用 oneline 或 format 时结合 <code class="language-plaintext highlighter-rouge">--graph</code> 选项,可以看到开头多出一些 ASCII 字符串表示的简单图形,形象地展示了每个提交所在的分支及其分化衍合情况。在我们之前提到的 Grit 项目仓库中可以看到:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log --pretty=format:"%h %s" --graph
* 2d3acf9 ignore errors from SIGCHLD on trap
* 5e3ee11 Merge branch 'master' of git://github.com/dustin/grit
|\
| * 420eac9 Added a method for getting the current branch.
* | 30e367c timeout code and tests
* | 5a09431 add timeout protection to grit
* | e1193f8 support for heads with slashes in them
|/
* d6016bc require time for xmlschema
* 11d191e Merge branch 'defunkt' into local
</code></pre></div></div>
<p>以上只是简单介绍了一些 <code class="language-plaintext highlighter-rouge">git log</code> 命令支持的选项。表 2-2 还列出了一些其他常用的选项及其释义。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>选项 说明
-p 按补丁格式显示每个更新之间的差异。
--stat 显示每次更新的文件修改统计信息。
--shortstat 只显示 --stat 中最后的行数修改添加移除统计。
--name-only 仅在提交信息后显示已修改的文件清单。
--name-status 显示新增、修改、删除的文件清单。
--abbrev-commit 仅显示 SHA-1 的前几个字符,而非所有的 40 个字符。
--relative-date 使用较短的相对时间显示(比如,“2 weeks ago”)。
--graph 显示 ASCII 图形表示的分支合并历史。
--pretty 使用其他格式显示历史提交信息。可用的选项包括 oneline,short,full,fuller 和 format(后跟指定格式)。
</code></pre></div></div>
<h3 id="限制输出长度">限制输出长度</h3>
<p>除了定制输出格式的选项之外,<code class="language-plaintext highlighter-rouge">git log</code> 还有许多非常实用的限制输出长度的选项,也就是只输出部分提交信息。之前我们已经看到过 <code class="language-plaintext highlighter-rouge">-2</code> 了,它只显示最近的两条提交,实际上,这是 <code class="language-plaintext highlighter-rouge">-<n></code> 选项的写法,其中的 <code class="language-plaintext highlighter-rouge">n</code> 可以是任何自然数,表示仅显示最近的若干条提交。不过实践中我们是不太用这个选项的,Git 在输出所有提交时会自动调用分页程序(less),要看更早的更新只需翻到下页即可。</p>
<p>另外还有按照时间作限制的选项,比如 <code class="language-plaintext highlighter-rouge">--since</code> 和 <code class="language-plaintext highlighter-rouge">--until</code>。下面的命令列出所有最近两周内的提交:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log --since=2.weeks
</code></pre></div></div>
<p>你可以给出各种时间格式,比如说具体的某一天(“2008-01-15”),或者是多久以前(“2 years 1 day 3 minutes ago”)。</p>
<p>还可以给出若干搜索条件,列出符合的提交。用 <code class="language-plaintext highlighter-rouge">--author</code> 选项显示指定作者的提交,用 <code class="language-plaintext highlighter-rouge">--grep</code> 选项搜索提交说明中的关键字。(请注意,如果要得到同时满足这两个选项搜索条件的提交,就必须用 <code class="language-plaintext highlighter-rouge">--all-match</code> 选项。否则,满足任意一个条件的提交都会被匹配出来)</p>
<p>另一个真正实用的<code class="language-plaintext highlighter-rouge">git log</code>选项是路径(path),如果只关心某些文件或者目录的历史提交,可以在 <code class="language-plaintext highlighter-rouge">git log</code> 选项的最后指定它们的路径。因为是放在最后位置上的选项,所以用两个短划线(<code class="language-plaintext highlighter-rouge">--</code>)隔开之前的选项和后面限定的路径名。</p>
<p>表 2-3 还列出了其他常用的类似选项。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>选项 说明
-(n) 仅显示最近的 n 条提交
--since, --after 仅显示指定时间之后的提交。
--until, --before 仅显示指定时间之前的提交。
--author 仅显示指定作者相关的提交。
--committer 仅显示指定提交者相关的提交。
</code></pre></div></div>
<p>来看一个实际的例子,如果要查看 Git 仓库中,2008 年 10 月期间,Junio Hamano 提交的但未合并的测试脚本(位于项目的 t/ 目录下的文件),可以用下面的查询命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log --pretty="%h - %s" --author=gitster --since="2008-10-01" \
--before="2008-11-01" --no-merges -- t/
5610e3b - Fix testcase failure when extended attribute
acd3b9e - Enhance hold_lock_file_for_{update,append}()
f563754 - demonstrate breakage of detached checkout wi
d1a43f2 - reset --hard/read-tree --reset -u: remove un
51a94af - Fix "checkout --track -b newbranch" on detac
b0ad11e - pull: allow "git pull origin $something:$cur
</code></pre></div></div>
<p>Git 项目有 20,000 多条提交,但我们给出搜索选项后,仅列出了其中满足条件的 6 条。</p>
<h3 id="使用图形化工具查阅提交历史">使用图形化工具查阅提交历史</h3>
<p>有时候图形化工具更容易展示历史提交的变化,随 Git 一同发布的 gitk 就是这样一种工具。它是用 Tcl/Tk 写成的,基本上相当于 <code class="language-plaintext highlighter-rouge">git log</code> 命令的可视化版本,凡是 <code class="language-plaintext highlighter-rouge">git log</code> 可以用的选项也都能用在 gitk 上。在项目工作目录中输入 gitk 命令后,就会启动图 2-2 所示的界面。</p>
<p><a href="/uploads/2012/09/18333fig0202-tn.png"><img src="/uploads/2012/09/18333fig0202-tn.png" alt="图 2-2" /></a>
图 2-2. gitk 的图形界面</p>
<p>上半个窗口显示的是历次提交的分支祖先图谱,下半个窗口显示当前点选的提交对应的具体差异。</p>
<h2 id="撤消操作">撤消操作</h2>
<p>任何时候,你都有可能需要撤消刚才所做的某些操作。接下来,我们会介绍一些基本的撤消操作相关的命令。请注意,有些撤销操作是不可逆的,所以请务必谨慎小心,一旦失误,就有可能丢失部分工作成果。</p>
<h3 id="修改最后一次提交">修改最后一次提交</h3>
<p>有时候我们提交完了才发现漏掉了几个文件没有加,或者提交信息写错了。想要撤消刚才的提交操作,可以使用 <code class="language-plaintext highlighter-rouge">--amend</code> 选项重新提交:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git commit --amend
</code></pre></div></div>
<p>此命令将使用当前的暂存区域快照提交。如果刚才提交完没有作任何改动,直接运行此命令的话,相当于有机会重新编辑提交说明,但将要提交的文件快照和之前的一样。</p>
<p>启动文本编辑器后,会看到上次提交时的说明,编辑它确认没问题后保存退出,就会使用新的提交说明覆盖刚才失误的提交。</p>
<p>如果刚才提交时忘了暂存某些修改,可以先补上暂存操作,然后再运行 <code class="language-plaintext highlighter-rouge">--amend</code> 提交:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git commit -m 'initial commit'
$ git add forgotten_file
$ git commit --amend
</code></pre></div></div>
<p>上面的三条命令最终只是产生一个提交,第二个提交命令修正了第一个的提交内容。</p>
<h3 id="取消已经暂存的文件">取消已经暂存的文件</h3>
<p>接下来的两个小节将演示如何取消暂存区域中的文件,以及如何取消工作目录中已修改的文件。不用担心,查看文件状态的时候就提示了该如何撤消,所以不需要死记硬背。来看下面的例子,有两个修改过的文件,我们想要分开提交,但不小心用 <code class="language-plaintext highlighter-rouge">git add .</code> 全加到了暂存区域。该如何撤消暂存其中的一个文件呢?其实,<code class="language-plaintext highlighter-rouge">git status</code> 的命令输出已经告诉了我们该怎么做:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git add .
$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# modified: README.txt
# modified: benchmarks.rb
#
</code></pre></div></div>
<p>就在 “Changes to be committed” 下面,括号中有提示,可以使用 <code class="language-plaintext highlighter-rouge">git reset HEAD <file>...</code> 的方式取消暂存。好吧,我们来试试取消暂存 benchmarks.rb 文件:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git reset HEAD benchmarks.rb
benchmarks.rb: locally modified
$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# modified: README.txt
#
# Changed but not updated:
# (use "git add <file>..." to update what will be committed)
# (use "git checkout -- <file>..." to discard changes in working directory)
#
# modified: benchmarks.rb
#
</code></pre></div></div>
<p>这条命令看起来有些古怪,先别管,能用就行。现在 benchmarks.rb 文件又回到了之前已修改未暂存的状态。</p>
<h3 id="取消对文件的修改">取消对文件的修改</h3>
<p>如果觉得刚才对 benchmarks.rb 的修改完全没有必要,该如何取消修改,回到之前的状态(也就是修改之前的版本)呢?<code class="language-plaintext highlighter-rouge">git status</code> 同样提示了具体的撤消方法,接着上面的例子,现在未暂存区域看起来像这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code># Changed but not updated:
# (use "git add <file>..." to update what will be committed)
# (use "git checkout -- <file>..." to discard changes in working directory)
#
# modified: benchmarks.rb
#
</code></pre></div></div>
<p>在第二个括号中,我们看到了抛弃文件修改的命令(至少在 Git 1.6.1 以及更高版本中会这样提示,如果你还在用老版本,我们强烈建议你升级,以获取最佳的用户体验),让我们试试看:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git checkout -- benchmarks.rb
$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# modified: README.txt
#
</code></pre></div></div>
<p>可以看到,该文件已经恢复到修改前的版本。你可能已经意识到了,这条命令有些危险,所有对文件的修改都没有了,因为我们刚刚把之前版本的文件复制过来重写了此文件。所以在用这条命令前,请务必确定真的不再需要保留刚才的修改。如果只是想回退版本,同时保留刚才的修改以便将来继续工作,可以用下章介绍的 stashing 和分支来处理,应该会更好些。</p>
<p>记住,任何已经提交到 Git 的都可以被恢复。即便在已经删除的分支中的提交,或者用 <code class="language-plaintext highlighter-rouge">--amend</code> 重新改写的提交,都可以被恢复(关于数据恢复的内容见第九章)。所以,你可能失去的数据,仅限于没有提交过的,对 Git 来说它们就像从未存在过一样。</p>
<h2 id="远程仓库的使用">远程仓库的使用</h2>
<p>要参与任何一个 Git 项目的协作,必须要了解该如何管理远程仓库。远程仓库是指托管在网络上的项目仓库,可能会有好多个,其中有些你只能读,另外有些可以写。同他人协作开发某个项目时,需要管理这些远程仓库,以便推送或拉取数据,分享各自的工作进展。管理远程仓库的工作,包括添加远程库,移除废弃的远程库,管理各式远程库分支,定义是否跟踪这些分支,等等。本节我们将详细讨论远程库的管理和使用。</p>
<h3 id="查看当前的远程库">查看当前的远程库</h3>
<p>要查看当前配置有哪些远程仓库,可以用 <code class="language-plaintext highlighter-rouge">git remote</code> 命令,它会列出每个远程库的简短名字。在克隆完某个项目后,至少可以看到一个名为 origin 的远程库,Git 默认使用这个名字来标识你所克隆的原始仓库:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone git://github.com/schacon/ticgit.git
Initialized empty Git repository in /private/tmp/ticgit/.git/
remote: Counting objects: 595, done.
remote: Compressing objects: 100% (269/269), done.
remote: Total 595 (delta 255), reused 589 (delta 253)
Receiving objects: 100% (595/595), 73.31 KiB | 1 KiB/s, done.
Resolving deltas: 100% (255/255), done.
$ cd ticgit
$ git remote
origin
</code></pre></div></div>
<p>也可以加上 <code class="language-plaintext highlighter-rouge">-v</code> 选项(译注:此为 <code class="language-plaintext highlighter-rouge">--verbose</code> 的简写,取首字母),显示对应的克隆地址:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git remote -v
origin git://github.com/schacon/ticgit.git
</code></pre></div></div>
<p>如果有多个远程仓库,此命令将全部列出。比如在我的 Grit 项目中,可以看到:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ cd grit
$ git remote -v
bakkdoor git://github.com/bakkdoor/grit.git
cho45 git://github.com/cho45/grit.git
defunkt git://github.com/defunkt/grit.git
koke git://github.com/koke/grit.git
origin git@github.com:mojombo/grit.git
</code></pre></div></div>
<p>这样一来,我就可以非常轻松地从这些用户的仓库中,拉取他们的提交到本地。请注意,上面列出的地址只有 origin 用的是 SSH URL 链接,所以也只有这个仓库我能推送数据上去(我们会在第四章解释原因)。</p>
<h3 id="添加远程仓库">添加远程仓库</h3>
<p>要添加一个新的远程仓库,可以指定一个简单的名字,以便将来引用,运行 <code class="language-plaintext highlighter-rouge">git remote add [shortname] [url]</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git remote
origin
$ git remote add pb git://github.com/paulboone/ticgit.git
$ git remote -v
origin git://github.com/schacon/ticgit.git
pb git://github.com/paulboone/ticgit.git
</code></pre></div></div>
<p>现在可以用字串 pb 指代对应的仓库地址了。比如说,要抓取所有 Paul 有的,但本地仓库没有的信息,可以运行 <code class="language-plaintext highlighter-rouge">git fetch pb</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git fetch pb
remote: Counting objects: 58, done.
remote: Compressing objects: 100% (41/41), done.
remote: Total 44 (delta 24), reused 1 (delta 0)
Unpacking objects: 100% (44/44), done.
From git://github.com/paulboone/ticgit
* [new branch] master -> pb/master
* [new branch] ticgit -> pb/ticgit
</code></pre></div></div>
<p>现在,Paul 的主干分支(master)已经完全可以在本地访问了,对应的名字是 <code class="language-plaintext highlighter-rouge">pb/master</code>,你可以将它合并到自己的某个分支,或者切换到这个分支,看看有些什么有趣的更新。</p>
<h3 id="从远程仓库抓取数据">从远程仓库抓取数据</h3>
<p>正如之前所看到的,可以用下面的命令从远程仓库抓取数据到本地:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git fetch [remote-name]
</code></pre></div></div>
<p>此命令会到远程仓库中拉取所有你本地仓库中还没有的数据。运行完成后,你就可以在本地访问该远程仓库中的所有分支,将其中某个分支合并到本地,或者只是取出某个分支,一探究竟。(我们会在第三章详细讨论关于分支的概念和操作。)</p>
<p>如果是克隆了一个仓库,此命令会自动将远程仓库归于 origin 名下。所以,<code class="language-plaintext highlighter-rouge">git fetch origin</code> 会抓取从你上次克隆以来别人上传到此远程仓库中的所有更新(或是上次 fetch 以来别人提交的更新)。有一点很重要,需要记住,fetch 命令只是将远端的数据拉到本地仓库,并不自动合并到当前工作分支,只有当你确实准备好了,才能手工合并。</p>
<p>如果设置了某个分支用于跟踪某个远端仓库的分支(参见下节及第三章的内容),可以使用 <code class="language-plaintext highlighter-rouge">git pull</code> 命令自动抓取数据下来,然后将远端分支自动合并到本地仓库中当前分支。在日常工作中我们经常这么用,既快且好。实际上,默认情况下 <code class="language-plaintext highlighter-rouge">git clone</code> 命令本质上就是自动创建了本地的 master 分支用于跟踪远程仓库中的 master 分支(假设远程仓库确实有 master 分支)。所以一般我们运行 <code class="language-plaintext highlighter-rouge">git pull</code>,目的都是要从原始克隆的远端仓库中抓取数据后,合并到工作目录中的当前分支。</p>
<h3 id="推送数据到远程仓库">推送数据到远程仓库</h3>
<p>项目进行到一个阶段,要同别人分享目前的成果,可以将本地仓库中的数据推送到远程仓库。实现这个任务的命令很简单: <code class="language-plaintext highlighter-rouge">git push [remote-name] [branch-name]</code>。如果要把本地的 master 分支推送到 <code class="language-plaintext highlighter-rouge">origin</code> 服务器上(再次说明下,克隆操作会自动使用默认的 master 和 origin 名字),可以运行下面的命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git push origin master
</code></pre></div></div>
<p>只有在所克隆的服务器上有写权限,或者同一时刻没有其他人在推数据,这条命令才会如期完成任务。如果在你推数据前,已经有其他人推送了若干更新,那你的推送操作就会被驳回。你必须先把他们的更新抓取到本地,合并到自己的项目中,然后才可以再次推送。有关推送数据到远程仓库的详细内容见第三章。</p>
<h3 id="查看远程仓库信息">查看远程仓库信息</h3>
<p>我们可以通过命令 <code class="language-plaintext highlighter-rouge">git remote show [remote-name]</code> 查看某个远程仓库的详细信息,比如要看所克隆的 <code class="language-plaintext highlighter-rouge">origin</code> 仓库,可以运行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git remote show origin
* remote origin
URL: git://github.com/schacon/ticgit.git
Remote branch merged with 'git pull' while on branch master
master
Tracked remote branches
master
ticgit
</code></pre></div></div>
<p>除了对应的克隆地址外,它还给出了许多额外的信息。它友善地告诉你如果是在 master 分支,就可以用 <code class="language-plaintext highlighter-rouge">git pull</code> 命令抓取数据合并到本地。另外还列出了所有处于跟踪状态中的远端分支。</p>
<p>上面的例子非常简单,而随着使用 Git 的深入,<code class="language-plaintext highlighter-rouge">git remote show</code> 给出的信息可能会像这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git remote show origin
* remote origin
URL: git@github.com:defunkt/github.git
Remote branch merged with 'git pull' while on branch issues
issues
Remote branch merged with 'git pull' while on branch master
master
New remote branches (next fetch will store in remotes/origin)
caching
Stale tracking branches (use 'git remote prune')
libwalker
walker2
Tracked remote branches
acl
apiv2
dashboard2
issues
master
postgres
Local branch pushed with 'git push'
master:master
</code></pre></div></div>
<p>它告诉我们,运行 <code class="language-plaintext highlighter-rouge">git push</code> 时缺省推送的分支是什么(译注:最后两行)。它还显示了有哪些远端分支还没有同步到本地(译注:第六行的 <code class="language-plaintext highlighter-rouge">caching</code> 分支),哪些已同步到本地的远端分支在远端服务器上已被删除(译注:<code class="language-plaintext highlighter-rouge">Stale tracking branches</code> 下面的两个分支),以及运行 <code class="language-plaintext highlighter-rouge">git pull</code> 时将自动合并哪些分支(译注:前四行中列出的 <code class="language-plaintext highlighter-rouge">issues</code> 和 <code class="language-plaintext highlighter-rouge">master</code> 分支)。</p>
<h3 id="远程仓库的删除和重命名">远程仓库的删除和重命名</h3>
<p>在新版 Git 中可以用 <code class="language-plaintext highlighter-rouge">git remote rename</code> 命令修改某个远程仓库在本地的简短名称,比如想把 <code class="language-plaintext highlighter-rouge">pb</code> 改成 <code class="language-plaintext highlighter-rouge">paul</code>,可以这么运行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git remote rename pb paul
$ git remote
origin
paul
</code></pre></div></div>
<p>注意,对远程仓库的重命名,也会使对应的分支名称发生变化,原来的 <code class="language-plaintext highlighter-rouge">pb/master</code> 分支现在成了 <code class="language-plaintext highlighter-rouge">paul/master</code>。</p>
<p>碰到远端仓库服务器迁移,或者原来的克隆镜像不再使用,又或者某个参与者不再贡献代码,那么需要移除对应的远端仓库,可以运行 <code class="language-plaintext highlighter-rouge">git remote rm</code> 命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git remote rm paul
$ git remote
origin
</code></pre></div></div>
<h2 id="打标签">打标签</h2>
<p>同大多数 VCS 一样,Git 也可以对某一时间点上的版本打上标签。人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做。本节我们一起来学习如何列出所有可用的标签,如何新建标签,以及各种不同类型标签之间的差别。</p>
<h3 id="列显已有的标签">列显已有的标签</h3>
<p>列出现有标签的命令非常简单,直接运行 <code class="language-plaintext highlighter-rouge">git tag</code> 即可:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git tag
v0.1
v1.3
</code></pre></div></div>
<p>显示的标签按字母顺序排列,所以标签的先后并不表示重要程度的轻重。</p>
<p>我们可以用特定的搜索模式列出符合条件的标签。在 Git 自身项目仓库中,有着超过 240 个标签,如果你只对 1.4.2 系列的版本感兴趣,可以运行下面的命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git tag -l 'v1.4.2.*'
v1.4.2.1
v1.4.2.2
v1.4.2.3
v1.4.2.4
</code></pre></div></div>
<h3 id="新建标签">新建标签</h3>
<p>Git 使用的标签有两种类型:轻量级的(lightweight)和含附注的(annotated)。轻量级标签就像是个不会变化的分支,实际上它就是个指向特定提交对象的引用。而含附注标签,实际上是存储在仓库中的一个独立对象,它有自身的校验和信息,包含着标签的名字,电子邮件地址和日期,以及标签说明,标签本身也允许使用 GNU Privacy Guard (GPG) 来签署或验证。一般我们都建议使用含附注型的标签,以便保留相关信息;当然,如果只是临时性加注标签,或者不需要旁注额外信息,用轻量级标签也没问题。</p>
<h3 id="含附注的标签">含附注的标签</h3>
<p>创建一个含附注类型的标签非常简单,用 <code class="language-plaintext highlighter-rouge">-a</code> (译注:取 <code class="language-plaintext highlighter-rouge">annotated</code> 的首字母)指定标签名字即可:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git tag -a v1.4 -m 'my version 1.4'
$ git tag
v0.1
v1.3
v1.4
</code></pre></div></div>
<p>而 <code class="language-plaintext highlighter-rouge">-m</code> 选项则指定了对应的标签说明,Git 会将此说明一同保存在标签对象中。如果没有给出该选项,Git 会启动文本编辑软件供你输入标签说明。</p>
<p>可以使用 <code class="language-plaintext highlighter-rouge">git show</code> 命令查看相应标签的版本信息,并连同显示打标签时的提交对象。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git show v1.4
tag v1.4
Tagger: Scott Chacon <schacon@gee-mail.com>
Date: Mon Feb 9 14:45:11 2009 -0800
my version 1.4
commit 15027957951b64cf874c3557a0f3547bd83b3ff6
Merge: 4a447f7... a6b4c97...
Author: Scott Chacon <schacon@gee-mail.com>
Date: Sun Feb 8 19:02:46 2009 -0800
Merge branch 'experiment'
</code></pre></div></div>
<p>我们可以看到在提交对象信息上面,列出了此标签的提交者和提交时间,以及相应的标签说明。</p>
<h3 id="签署标签">签署标签</h3>
<p>如果你有自己的私钥,还可以用 GPG 来签署标签,只需要把之前的 <code class="language-plaintext highlighter-rouge">-a</code> 改为 <code class="language-plaintext highlighter-rouge">-s</code> (译注: 取 <code class="language-plaintext highlighter-rouge">signed</code> 的首字母)即可:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git tag -s v1.5 -m 'my signed 1.5 tag'
You need a passphrase to unlock the secret key for
user: "Scott Chacon <schacon@gee-mail.com>"
1024-bit DSA key, ID F721C45A, created 2009-02-09
</code></pre></div></div>
<p>现在再运行 <code class="language-plaintext highlighter-rouge">git show</code> 会看到对应的 GPG 签名也附在其内:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git show v1.5
tag v1.5
Tagger: Scott Chacon <schacon@gee-mail.com>
Date: Mon Feb 9 15:22:20 2009 -0800
my signed 1.5 tag
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.8 (Darwin)
iEYEABECAAYFAkmQurIACgkQON3DxfchxFr5cACeIMN+ZxLKggJQf0QYiQBwgySN
Ki0An2JeAVUCAiJ7Ox6ZEtK+NvZAj82/
=WryJ
-----END PGP SIGNATURE-----
commit 15027957951b64cf874c3557a0f3547bd83b3ff6
Merge: 4a447f7... a6b4c97...
Author: Scott Chacon <schacon@gee-mail.com>
Date: Sun Feb 8 19:02:46 2009 -0800
Merge branch 'experiment'
</code></pre></div></div>
<p>稍后我们再学习如何验证已经签署的标签。</p>
<h3 id="轻量级标签">轻量级标签</h3>
<p>轻量级标签实际上就是一个保存着对应提交对象的校验和信息的文件。要创建这样的标签,一个 <code class="language-plaintext highlighter-rouge">-a</code>,<code class="language-plaintext highlighter-rouge">-s</code> 或 <code class="language-plaintext highlighter-rouge">-m</code> 选项都不用,直接给出标签名字即可:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git tag v1.4-lw
$ git tag
v0.1
v1.3
v1.4
v1.4-lw
v1.5
</code></pre></div></div>
<p>现在运行 <code class="language-plaintext highlighter-rouge">git show</code> 查看此标签信息,就只有相应的提交对象摘要:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git show v1.4-lw
commit 15027957951b64cf874c3557a0f3547bd83b3ff6
Merge: 4a447f7... a6b4c97...
Author: Scott Chacon <schacon@gee-mail.com>
Date: Sun Feb 8 19:02:46 2009 -0800
Merge branch 'experiment'
</code></pre></div></div>
<h3 id="验证标签">验证标签</h3>
<p>可以使用 <code class="language-plaintext highlighter-rouge">git tag -v [tag-name]</code> (译注:取 <code class="language-plaintext highlighter-rouge">verify</code> 的首字母)的方式验证已经签署的标签。此命令会调用 GPG 来验证签名,所以你需要有签署者的公钥,存放在 keyring 中,才能验证:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git tag -v v1.4.2.1
object 883653babd8ee7ea23e6a5c392bb739348b1eb61
type commit
tag v1.4.2.1
tagger Junio C Hamano <junkio@cox.net> 1158138501 -0700
GIT 1.4.2.1
Minor fixes since 1.4.2, including git-mv and git-http with alternates.
gpg: Signature made Wed Sep 13 02:08:25 2006 PDT using DSA key ID F3119B9A
gpg: Good signature from "Junio C Hamano <junkio@cox.net>"
gpg: aka "[jpeg image of size 1513]"
Primary key fingerprint: 3565 2A26 2040 E066 C9A7 4A7D C0C6 D9A4 F311 9B9A
</code></pre></div></div>
<p>若是没有签署者的公钥,会报告类似下面这样的错误:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gpg: Signature made Wed Sep 13 02:08:25 2006 PDT using DSA key ID F3119B9A
gpg: Can't check signature: public key not found
error: could not verify the tag 'v1.4.2.1'
</code></pre></div></div>
<h3 id="后期加注标签">后期加注标签</h3>
<p>你甚至可以在后期对早先的某次提交加注标签。比如在下面展示的提交历史中:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log --pretty=oneline
15027957951b64cf874c3557a0f3547bd83b3ff6 Merge branch 'experiment'
a6b4c97498bd301d84096da251c98a07c7723e65 beginning write support
0d52aaab4479697da7686c15f77a3d64d9165190 one more thing
6d52a271eda8725415634dd79daabbc4d9b6008e Merge branch 'experiment'
0b7434d86859cc7b8c3d5e1dddfed66ff742fcbc added a commit function
4682c3261057305bdd616e23b64b0857d832627b added a todo file
166ae0c4d3f420721acbb115cc33848dfcc2121a started write support
9fceb02d0ae598e95dc970b74767f19372d61af8 updated rakefile
964f16d36dfccde844893cac5b347e7b3d44abbc commit the todo
8a5cbc430f1a9c3d00faaeffd07798508422908a updated readme
</code></pre></div></div>
<p>我们忘了在提交 “updated rakefile” 后为此项目打上版本号 v1.2,没关系,现在也能做。只要在打标签的时候跟上对应提交对象的校验和(或前几位字符)即可:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git tag -a v1.2 9fceb02
</code></pre></div></div>
<p>可以看到我们已经补上了标签:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git tag
v0.1
v1.2
v1.3
v1.4
v1.4-lw
v1.5
$ git show v1.2
tag v1.2
Tagger: Scott Chacon <schacon@gee-mail.com>
Date: Mon Feb 9 15:32:16 2009 -0800
version 1.2
commit 9fceb02d0ae598e95dc970b74767f19372d61af8
Author: Magnus Chacon <mchacon@gee-mail.com>
Date: Sun Apr 27 20:43:35 2008 -0700
updated rakefile
...
</code></pre></div></div>
<h3 id="分享标签">分享标签</h3>
<p>默认情况下,<code class="language-plaintext highlighter-rouge">git push</code> 并不会把标签传送到远端服务器上,只有通过显式命令才能分享标签到远端仓库。其命令格式如同推送分支,运行 <code class="language-plaintext highlighter-rouge">git push origin [tagname]</code> 即可:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git push origin v1.5
Counting objects: 50, done.
Compressing objects: 100% (38/38), done.
Writing objects: 100% (44/44), 4.56 KiB, done.
Total 44 (delta 18), reused 8 (delta 1)
To git@github.com:schacon/simplegit.git
* [new tag] v1.5 -> v1.5
</code></pre></div></div>
<p>如果要一次推送所有本地新增的标签上去,可以使用 <code class="language-plaintext highlighter-rouge">--tags</code> 选项:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git push origin --tags
Counting objects: 50, done.
Compressing objects: 100% (38/38), done.
Writing objects: 100% (44/44), 4.56 KiB, done.
Total 44 (delta 18), reused 8 (delta 1)
To git@github.com:schacon/simplegit.git
* [new tag] v0.1 -> v0.1
* [new tag] v1.2 -> v1.2
* [new tag] v1.4 -> v1.4
* [new tag] v1.4-lw -> v1.4-lw
* [new tag] v1.5 -> v1.5
</code></pre></div></div>
<p>现在,其他人克隆共享仓库或拉取数据同步后,也会看到这些标签。</p>
<h2 id="技巧和窍门">技巧和窍门</h2>
<p>在结束本章之前,我还想和大家分享一些 Git 使用的技巧和窍门。很多使用 Git 的开发者可能根本就没用过这些技巧,我们也不是说在读过本书后非得用这些技巧不可,但至少应该有所了解吧。说实话,有了这些小窍门,我们的工作可以变得更简单,更轻松,更高效。</p>
<h3 id="自动补全">自动补全</h3>
<p>如果你用的是 Bash shell,可以试试看 Git 提供的自动补全脚本。下载 Git 的源代码,进入 <code class="language-plaintext highlighter-rouge">contrib/completion</code> 目录,会看到一个 <code class="language-plaintext highlighter-rouge">git-completion.bash</code> 文件。将此文件复制到你自己的用户主目录中(译注:按照下面的示例,还应改名加上点:<code class="language-plaintext highlighter-rouge">cp git-completion.bash ~/.git-completion.bash</code>),并把下面一行内容添加到你的 <code class="language-plaintext highlighter-rouge">.bashrc</code> 文件中:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>source ~/.git-completion.bash
</code></pre></div></div>
<p>也可以为系统上所有用户都设置默认使用此脚本。Mac 上将此脚本复制到 <code class="language-plaintext highlighter-rouge">/opt/local/etc/bash_completion.d</code> 目录中,Linux 上则复制到 <code class="language-plaintext highlighter-rouge">/etc/bash_completion.d/</code> 目录中。这两处目录中的脚本,都会在 Bash 启动时自动加载。</p>
<p>如果在 Windows 上安装了 msysGit,默认使用的 Git Bash 就已经配好了这个自动补全脚本,可以直接使用。</p>
<p>在输入 Git 命令的时候可以敲两次跳格键(Tab),就会看到列出所有匹配的可用命令建议:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git co<tab><tab>
commit config
</code></pre></div></div>
<p>此例中,键入 git co 然后连按两次 Tab 键,会看到两个相关的建议(命令) commit 和 config。继而输入 <code class="language-plaintext highlighter-rouge">m<tab></code> 会自动完成 <code class="language-plaintext highlighter-rouge">git commit</code> 命令的输入。</p>
<p>命令的选项也可以用这种方式自动完成,其实这种情况更实用些。比如运行 <code class="language-plaintext highlighter-rouge">git log</code> 的时候忘了相关选项的名字,可以输入开头的几个字母,然后敲 Tab 键看看有哪些匹配的:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git log --s<tab>
--shortstat --since= --src-prefix= --stat --summary
</code></pre></div></div>
<p>这个技巧不错吧,可以节省很多输入和查阅文档的时间。</p>
<h3 id="git-命令别名">Git 命令别名</h3>
<p>Git 并不会推断你输入的几个字符将会是哪条命令,不过如果想偷懒,少敲几个命令的字符,可以用 <code class="language-plaintext highlighter-rouge">git config</code> 为命令设置别名。来看看下面的例子:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global alias.co checkout
$ git config --global alias.br branch
$ git config --global alias.ci commit
$ git config --global alias.st status
</code></pre></div></div>
<p>现在,如果要输入 <code class="language-plaintext highlighter-rouge">git commit</code> 只需键入 <code class="language-plaintext highlighter-rouge">git ci</code> 即可。而随着 Git 使用的深入,会有很多经常要用到的命令,遇到这种情况,不妨建个别名提高效率。</p>
<p>使用这种技术还可以创造出新的命令,比方说取消暂存文件时的输入比较繁琐,可以自己设置一下:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global alias.unstage 'reset HEAD --'
</code></pre></div></div>
<p>这样一来,下面的两条命令完全等同:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git unstage fileA
$ git reset HEAD fileA
</code></pre></div></div>
<p>显然,使用别名的方式看起来更清楚。另外,我们还经常设置 <code class="language-plaintext highlighter-rouge">last</code> 命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global alias.last 'log -1 HEAD'
</code></pre></div></div>
<p>然后要看最后一次的提交信息,就变得简单多了:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git last
commit 66938dae3329c7aebe598c2246a8e6af90d04646
Author: Josh Goebel <dreamer3@example.com>
Date: Tue Aug 26 19:48:51 2008 +0800
test for current head
Signed-off-by: Scott Chacon <schacon@example.com>
</code></pre></div></div>
<p>可以看出,实际上 Git 只是简单地在命令中替换了你设置的别名。不过有时候我们希望运行某个外部命令,而非 Git 的子命令,这个好办,只需要在命令前加上 <code class="language-plaintext highlighter-rouge">!</code> 就行。如果你自己写了些处理 Git 仓库信息的脚本的话,就可以用这种技术包装起来。作为演示,我们可以设置用 <code class="language-plaintext highlighter-rouge">git visual</code> 启动 <code class="language-plaintext highlighter-rouge">gitk</code>:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global alias.visual "!gitk"
</code></pre></div></div>
<h2 id="小结">小结</h2>
<p>到目前为止,你已经学会了最基本的 Git 本地操作:创建和克隆仓库,做出修改,暂存并提交这些修改,以及查看所有历史修改记录。接下来,我们将学习 Git 的必杀技特性:分支模型。</p>
01-Git起步
2012-10-12T00:00:00+00:00
http://wangdaodao.github.io/2012-10-12/introduction-git
<h2 id="关于版本控制">关于版本控制</h2>
<p>什么是版本控制?我为什么要关心它呢?版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统。在本书所展示的例子中,我们仅对保存着软件源代码的文本文件作版本控制管理,但实际上,你可以对任何类型的文件进行版本控制。</p>
<p>如果你是位图形或网页设计师,可能会需要保存某一幅图片或页面布局文件的所有修订版本(这或许是你非常渴望拥有的功能)。采用版本控制系统(VCS)是个明智的选择。有了它你就可以将某个文件回溯到之前的状态,甚至将整个项目都回退到过去某个时间点的状态。你可以比较文件的变化细节,查出最后是谁修改了哪个地方,从而找出导致怪异问题出现的原因,又是谁在何时报告了某个功能缺陷等等。使用版本控制系统通常还意味着,就算你乱来一气把整个项目中的文件改的改删的删,你也照样可以轻松恢复到原先的样子。但额外增加的工作量却微乎其微。</p>
<h3 id="本地版本控制系统">本地版本控制系统</h3>
<p>许多人习惯用复制整个项目目录的方式来保存不同的版本,或许还会改名加上备份时间以示区别。这么做唯一的好处就是简单。不过坏处也不少:有时候会混淆所在的工作目录,一旦弄错文件丢了数据就没法撤销恢复。</p>
<p>为了解决这个问题,人们很久以前就开发了许多种本地版本控制系统,大多都是采用某种简单的数据库来记录文件的历次更新差异(见图 1-1)。</p>
<p><a href="/uploads/2012/09/18333fig0101-tn.png"><img src="/uploads/2012/09/18333fig0101-tn.png" alt="图 1-1" /></a>
图 1-1. 本地版本控制系统</p>
<p>其中最流行的一种叫做 rcs,现今许多计算机系统上都还看得到它的踪影。甚至在流行的 Mac OS X 系统上安装了开发者工具包之后,也可以使用 rcs 命令。它的工作原理基本上就是保存并管理文件补丁(patch)。文件补丁是一种特定格式的文本文件,记录着对应文件修订前后的内容变化。所以,根据每次修订后的补丁,rcs 可以通过不断打补丁,计算出各个版本的文件内容。</p>
<h3 id="集中化的版本控制系统">集中化的版本控制系统</h3>
<p>接下来人们又遇到一个问题,如何让在不同系统上的开发者协同工作?于是,集中化的版本控制系统( Centralized Version Control Systems,简称 CVCS )应运而生。这类系统,诸如 CVS,Subversion 以及 Perforce 等,都有一个单一的集中管理的服务器,保存所有文件的修订版本,而协同工作的人们都通过客户端连到这台服务器,取出最新的文件或者提交更新。多年以来,这已成为版本控制系统的标准做法(见图 1-2)。</p>
<p><a href="/uploads/2012/09/18333fig0102-tn.png"><img src="/uploads/2012/09/18333fig0102-tn.png" alt="图 1-2" /></a>
图 1-2. 集中化的版本控制系统</p>
<p>这种做法带来了许多好处,特别是相较于老式的本地 VCS 来说。现在,每个人都可以在一定程度上看到项目中的其他人正在做些什么。而管理员也可以轻松掌控每个开发者的权限,并且管理一个 CVCS 要远比在各个客户端上维护本地数据库来得轻松容易。</p>
<p>事分两面,有好有坏。这么做最显而易见的缺点是中央服务器的单点故障。如果宕机一小时,那么在这一小时内,谁都无法提交更新,也就无法协同工作。要是中央服务器的磁盘发生故障,碰巧没做备份,或者备份不够及时,就会有丢失数据的风险。最坏的情况是彻底丢失整个项目的所有历史更改记录,而被客户端偶然提取出来的保存在本地的某些快照数据就成了恢复数据的希望。但这样的话依然是个问题,你不能保证所有的数据都已经有人事先完整提取出来过。本地版本控制系统也存在类似问题,只要整个项目的历史记录被保存在单一位置,就有丢失所有历史更新记录的风险。</p>
<h3 id="分布式版本控制系统">分布式版本控制系统</h3>
<p>于是分布式版本控制系统( Distributed Version Control System,简称 DVCS )面世了。在这类系统中,像 Git,Mercurial,Bazaar 以及 Darcs 等,客户端并不只提取最新版本的文件快照,而是把代码仓库完整地镜像下来。这么一来,任何一处协同工作用的服务器发生故障,事后都可以用任何一个镜像出来的本地仓库恢复。因为每一次的提取操作,实际上都是一次对代码仓库的完整备份(见图 1-3)。</p>
<p><a href="/uploads/2012/09/18333fig0103-tn.png"><img src="/uploads/2012/09/18333fig0103-tn.png" alt="图 1-3" /></a>
图 1-3. 分布式版本控制系统</p>
<p>更进一步,许多这类系统都可以指定和若干不同的远端代码仓库进行交互。籍此,你就可以在同一个项目中,分别和不同工作小组的人相互协作。你可以根据需要设定不同的协作流程,比如层次模型式的工作流,而这在以前的集中式系统中是无法实现的。</p>
<h2 id="git-简史">Git 简史</h2>
<p>同生活中的许多伟大事件一样,Git 诞生于一个极富纷争大举创新的年代。Linux 内核开源项目有着为数众广的参与者。绝大多数的 Linux 内核维护工作都花在了提交补丁和保存归档的繁琐事务上(1991-2002年间)。到 2002 年,整个项目组开始启用分布式版本控制系统 BitKeeper 来管理和维护代码。</p>
<p>到了 2005 年,开发 BitKeeper 的商业公司同 Linux 内核开源社区的合作关系结束,他们收回了免费使用 BitKeeper 的权力。这就迫使 Linux 开源社区(特别是 Linux 的缔造者 Linus Torvalds )不得不吸取教训,只有开发一套属于自己的版本控制系统才不至于重蹈覆辙。他们对新的系统制订了若干目标:</p>
<ul>
<li>速度</li>
<li>简单的设计</li>
<li>对非线性开发模式的强力支持(允许上千个并行开发的分支)</li>
<li>完全分布式</li>
<li>有能力高效管理类似 Linux 内核一样的超大规模项目(速度和数据量)</li>
</ul>
<p>自诞生于 2005 年以来,Git 日臻成熟完善,在高度易用的同时,仍然保留着初期设定的目标。它的速度飞快,极其适合管理大项目,它还有着令人难以置信的非线性分支管理系统(见第三章),可以应付各种复杂的项目开发需求。</p>
<h2 id="git-基础">Git 基础</h2>
<p>那么,简单地说,Git 究竟是怎样的一个系统呢?请注意,接下来的内容非常重要,若是理解了 Git 的思想和基本工作原理,用起来就会知其所以然,游刃有余。在开始学习 Git 的时候,请不要尝试把各种概念和其他版本控制系统(诸如 Subversion 和 Perforce 等)相比拟,否则容易混淆每个操作的实际意义。Git 在保存和处理各种信息的时候,虽然操作起来的命令形式非常相近,但它与其他版本控制系统的做法颇为不同。理解这些差异将有助于你准确地使用 Git 提供的各种工具。</p>
<h3 id="直接记录快照而非差异比较">直接记录快照,而非差异比较</h3>
<p>Git 和其他版本控制系统的主要差别在于,Git 只关心文件数据的整体是否发生变化,而大多数其他系统则只关心文件内容的具体差异。这类系统(CVS,Subversion,Perforce,Bazaar 等等)每次记录有哪些文件作了更新,以及都更新了哪些行的什么内容,请看图 1-4。</p>
<p><a href="/uploads/2012/09/18333fig0104-tn.png"><img src="/uploads/2012/09/18333fig0104-tn.png" alt="图 1-4" /></a>
图 1-4. 其他系统在每个版本中记录着各个文件的具体差异</p>
<p>Git 并不保存这些前后变化的差异数据。实际上,Git 更像是把变化的文件作快照后,记录在一个微型的文件系统中。每次提交更新时,它会纵览一遍所有文件的指纹信息并对文件作一快照,然后保存一个指向这次快照的索引。为提高性能,若文件没有变化,Git 不会再次保存,而只对上次保存的快照作一链接。Git 的工作方式就像图 1-5 所示。</p>
<p><a href="/uploads/2012/09/18333fig0105-tn.png"><img src="/uploads/2012/09/18333fig0105-tn.png" alt="图 1-5" /></a>
图 1-5. Git 保存每次更新时的文件快照</p>
<p>这是 Git 同其他系统的重要区别。它完全颠覆了传统版本控制的套路,并对各个环节的实现方式作了新的设计。Git 更像是个小型的文件系统,但它同时还提供了许多以此为基础的超强工具,而不只是一个简单的 VCS。稍后在第三章讨论 Git 分支管理的时候,我们会再看看这样的设计究竟会带来哪些好处。</p>
<h3 id="近乎所有操作都是本地执行">近乎所有操作都是本地执行</h3>
<p>在 Git 中的绝大多数操作都只需要访问本地文件和资源,不用连网。但如果用 CVCS 的话,差不多所有操作都需要连接网络。因为 Git 在本地磁盘上就保存着所有当前项目的历史更新,所以处理起来速度飞快。</p>
<p>举个例子,如果要浏览项目的历史更新摘要,Git 不用跑到外面的服务器上去取数据回来,而直接从本地数据库读取后展示给你看。所以任何时候你都可以马上翻阅,无需等待。如果想要看当前版本的文件和一个月前的版本之间有何差异,Git 会取出一个月前的快照和当前文件作一次差异运算,而不用请求远程服务器来做这件事,或是把老版本的文件拉到本地来作比较。</p>
<p>用 CVCS 的话,没有网络或者断开 VPN 你就无法做任何事情。但用 Git 的话,就算你在飞机或者火车上,都可以非常愉快地频繁提交更新,等到了有网络的时候再上传到远程仓库。同样,在回家的路上,不用连接 VPN 你也可以继续工作。换作其他版本控制系统,这么做几乎不可能,抑或非常麻烦。比如 Perforce,如果不连到服务器,几乎什么都做不了(译注:默认无法发出命令 <code class="language-plaintext highlighter-rouge">p4 edit file</code> 开始编辑文件,因为 Perforce 需要联网通知系统声明该文件正在被谁修订。但实际上手工修改文件权限可以绕过这个限制,只是完成后还是无法提交更新。);如果是 Subversion 或 CVS,虽然可以编辑文件,但无法提交更新,因为数据库在网络上。看上去好像这些都不是什么大问题,但实际体验过之后,你就会惊喜地发现,这其实是会带来很大不同的。</p>
<h3 id="时刻保持数据完整性">时刻保持数据完整性</h3>
<p>在保存到 Git 之前,所有数据都要进行内容的校验和(checksum)计算,并将此结果作为数据的唯一标识和索引。换句话说,不可能在你修改了文件或目录之后,Git 一无所知。这项特性作为 Git 的设计哲学,建在整体架构的最底层。所以如果文件在传输时变得不完整,或者磁盘损坏导致文件数据缺失,Git 都能立即察觉。</p>
<p>Git 使用 SHA-1 算法计算数据的校验和,通过对文件的内容或目录的结构计算出一个 SHA-1 哈希值,作为指纹字符串。该字串由 40 个十六进制字符(0-9 及 a-f)组成,看起来就像是:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>24b9da6552252987aa493b52f8696cd6d3b00373
</code></pre></div></div>
<p>Git 的工作完全依赖于这类指纹字串,所以你会经常看到这样的哈希值。实际上,所有保存在 Git 数据库中的东西都是用此哈希值来作索引的,而不是靠文件名。</p>
<h3 id="多数操作仅添加数据">多数操作仅添加数据</h3>
<p>常用的 Git 操作大多仅仅是把数据添加到数据库。因为任何一种不可逆的操作,比如删除数据,都会使回退或重现历史版本变得困难重重。在别的 VCS 中,若还未提交更新,就有可能丢失或者混淆一些修改的内容,但在 Git 里,一旦提交快照之后就完全不用担心丢失数据,特别是养成定期推送到其他仓库的习惯的话。</p>
<p>这种高可靠性令我们的开发工作安心不少,尽管去做各种试验性的尝试好了,再怎样也不会弄丢数据。至于 Git 内部究竟是如何保存和恢复数据的,我们会在第九章讨论 Git 内部原理时再作详述。</p>
<h3 id="文件的三种状态">文件的三种状态</h3>
<p>好,现在请注意,接下来要讲的概念非常重要。对于任何一个文件,在 Git 内都只有三种状态:已提交(committed),已修改(modified)和已暂存(staged)。已提交表示该文件已经被安全地保存在本地数据库中了;已修改表示修改了某个文件,但还没有提交保存;已暂存表示把已修改的文件放在下次提交时要保存的清单中。</p>
<p>由此我们看到 Git 管理项目时,文件流转的三个工作区域:Git 的工作目录,暂存区域,以及本地仓库。</p>
<p><a href="/uploads/2012/09/18333fig0106-tn.png"><img src="/uploads/2012/09/18333fig0106-tn.png" alt="图 1-6" /></a>
图 1-6. 工作目录,暂存区域,以及本地仓库</p>
<p>每个项目都有一个 Git 目录(译注:如果 <code class="language-plaintext highlighter-rouge">git clone</code> 出来的话,就是其中 <code class="language-plaintext highlighter-rouge">.git</code> 的目录;如果 <code class="language-plaintext highlighter-rouge">git clone --bare</code> 的话,新建的目录本身就是 Git 目录。),它是 Git 用来保存元数据和对象数据库的地方。该目录非常重要,每次克隆镜像仓库的时候,实际拷贝的就是这个目录里面的数据。</p>
<p>从项目中取出某个版本的所有文件和目录,用以开始后续工作的叫做工作目录。这些文件实际上都是从 Git 目录中的压缩对象数据库中提取出来的,接下来就可以在工作目录中对这些文件进行编辑。</p>
<p>所谓的暂存区域只不过是个简单的文件,一般都放在 Git 目录中。有时候人们会把这个文件叫做索引文件,不过标准说法还是叫暂存区域。</p>
<p>基本的 Git 工作流程如下:</p>
<ol>
<li>在工作目录中修改某些文件。</li>
<li>对修改后的文件进行快照,然后保存到暂存区域。</li>
<li>提交更新,将保存在暂存区域的文件快照永久转储到 Git 目录中。</li>
</ol>
<p>所以,我们可以从文件所处的位置来判断状态:如果是 Git 目录中保存着的特定版本文件,就属于已提交状态;如果作了修改并已放入暂存区域,就属于已暂存状态;如果自上次取出后,作了修改但还没有放到暂存区域,就是已修改状态。到第二章的时候,我们会进一步了解其中细节,并学会如何根据文件状态实施后续操作,以及怎样跳过暂存直接提交。</p>
<h2 id="安装-git">安装 Git</h2>
<p>是时候动手尝试下 Git 了,不过得先安装好它。有许多种安装方式,主要分为两种,一种是通过编译源代码来安装;另一种是使用为特定平台预编译好的安装包。</p>
<h3 id="从源代码安装">从源代码安装</h3>
<p>若是条件允许,从源代码安装有很多好处,至少可以安装最新的版本。Git 的每个版本都在不断尝试改进用户体验,所以能通过源代码自己编译安装最新版本就再好不过了。有些 Linux 版本自带的安装包更新起来并不及时,所以除非你在用最新的 distro 或者 backports,那么从源代码安装其实该算是最佳选择。</p>
<p>Git 的工作需要调用 curl,zlib,openssl,expat,libiconv 等库的代码,所以需要先安装这些依赖工具。在有 yum 的系统上(比如 Fedora)或者有 apt-get 的系统上(比如 Debian 体系),可以用下面的命令安装:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ yum install curl-devel expat-devel gettext-devel \
openssl-devel zlib-devel
$ apt-get install libcurl4-gnutls-dev libexpat1-dev gettext \
libz-dev libssl-dev
</code></pre></div></div>
<p>之后,从下面的 Git 官方站点下载最新版本源代码:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>http://git-scm.com/download
</code></pre></div></div>
<p>然后编译并安装:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ tar -zxf git-1.7.2.2.tar.gz
$ cd git-1.7.2.2
$ make prefix=/usr/local all
$ sudo make prefix=/usr/local install
</code></pre></div></div>
<p>现在已经可以用 <code class="language-plaintext highlighter-rouge">git</code> 命令了,用 <code class="language-plaintext highlighter-rouge">git</code> 把 Git 项目仓库克隆到本地,以便日后随时更新:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git clone git://git.kernel.org/pub/scm/git/git.git
</code></pre></div></div>
<h3 id="在-linux-上安装">在 Linux 上安装</h3>
<p>如果要在 Linux 上安装预编译好的 Git 二进制安装包,可以直接用系统提供的包管理工具。在 Fedora 上用 yum 安装:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ yum install git-core
</code></pre></div></div>
<p>在 Ubuntu 这类 Debian 体系的系统上,可以用 apt-get 安装:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ apt-get install git-core
</code></pre></div></div>
<h3 id="在-mac-上安装">在 Mac 上安装</h3>
<p>在 Mac 上安装 Git 有两种方式。最容易的当属使用图形化的 Git 安装工具,界面如图 1-7,下载地址在:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>http://code.google.com/p/git-osx-installer
</code></pre></div></div>
<p><a href="/uploads/2012/09/18333fig0107-tn.png"><img src="/uploads/2012/09/18333fig0107-tn.png" alt="图 1-7" /></a>
图 1-7. Git OS X 安装工具</p>
<p>另一种是通过 MacPorts (<code class="language-plaintext highlighter-rouge">http://www.macports.org</code>) 安装。如果已经装好了 MacPorts,用下面的命令安装 Git:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ sudo port install git-core +svn +doc +bash_completion +gitweb
</code></pre></div></div>
<p>这种方式就不需要再自己安装依赖库了,Macports 会帮你搞定这些麻烦事。一般上面列出的安装选项已经够用,要是你想用 Git 连接 Subversion 的代码仓库,还可以加上 +svn 选项,具体将在第八章作介绍。(译注:还有一种是使用 homebrew(<code class="language-plaintext highlighter-rouge">https://github.com/mxcl/homebrew</code>):<code class="language-plaintext highlighter-rouge">brew install git</code>。)</p>
<h3 id="在-windows-上安装">在 Windows 上安装</h3>
<p>在 Windows 上安装 Git 同样轻松,有个叫做 msysGit 的项目提供了安装包,可以到 Google Code 的页面上下载 exe 安装文件并运行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>http://code.google.com/p/msysgit
</code></pre></div></div>
<p>完成安装之后,就可以使用命令行的 <code class="language-plaintext highlighter-rouge">git</code> 工具(已经自带了 ssh 客户端)了,另外还有一个图形界面的 Git 项目管理工具。</p>
<h2 id="初次运行-git-前的配置">初次运行 Git 前的配置</h2>
<p>一般在新的系统上,我们都需要先配置下自己的 Git 工作环境。配置工作只需一次,以后升级时还会沿用现在的配置。当然,如果需要,你随时可以用相同的命令修改已有的配置。</p>
<p>Git 提供了一个叫做 git config 的工具(译注:实际是 <code class="language-plaintext highlighter-rouge">git-config</code> 命令,只不过可以通过 <code class="language-plaintext highlighter-rouge">git</code> 加一个名字来呼叫此命令。),专门用来配置或读取相应的工作环境变量。而正是由这些环境变量,决定了 Git 在各个环节的具体工作方式和行为。这些变量可以存放在以下三个不同的地方:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">/etc/gitconfig</code> 文件:系统中对所有用户都普遍适用的配置。若使用 <code class="language-plaintext highlighter-rouge">git config</code> 时用 ` –system` 选项,读写的就是这个文件。</li>
<li><code class="language-plaintext highlighter-rouge">~/.gitconfig</code> 文件:用户目录下的配置文件只适用于该用户。若使用 <code class="language-plaintext highlighter-rouge">git config</code> 时用 ` –global` 选项,读写的就是这个文件。</li>
<li>当前项目的 git 目录中的配置文件(也就是工作目录中的 <code class="language-plaintext highlighter-rouge">.git/config</code> 文件):这里的配置仅仅针对当前项目有效。每一个级别的配置都会覆盖上层的相同配置,所以 <code class="language-plaintext highlighter-rouge">.git/config</code> 里的配置会覆盖 <code class="language-plaintext highlighter-rouge">/etc/gitconfig</code> 中的同名变量。</li>
</ul>
<p>在 Windows 系统上,Git 会找寻用户主目录下的 <code class="language-plaintext highlighter-rouge">.gitconfig</code> 文件。主目录即 <code class="language-plaintext highlighter-rouge">$HOME</code> 变量指定的目录,一般都是 <code class="language-plaintext highlighter-rouge">C:\Documents and Settings\$USER</code>。此外,Git 还会尝试找寻 <code class="language-plaintext highlighter-rouge">/etc/gitconfig</code> 文件,只不过看当初 Git 装在什么目录,就以此作为根目录来定位。</p>
<h3 id="用户信息">用户信息</h3>
<p>第一个要配置的是你个人的用户名称和电子邮件地址。这两条配置很重要,每次 Git 提交时都会引用这两条信息,说明是谁提交了更新,所以会随更新内容一起被永久纳入历史记录:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com
</code></pre></div></div>
<p>如果用了 <code class="language-plaintext highlighter-rouge">--global</code> 选项,那么更改的配置文件就是位于你用户主目录下的那个,以后你所有的项目都会默认使用这里配置的用户信息。如果要在某个特定的项目中使用其他名字或者电邮,只要去掉 <code class="language-plaintext highlighter-rouge">--global</code> 选项重新配置即可,新的设定保存在当前项目的 <code class="language-plaintext highlighter-rouge">.git/config</code> 文件里。</p>
<h3 id="文本编辑器">文本编辑器</h3>
<p>接下来要设置的是默认使用的文本编辑器。Git 需要你输入一些额外消息的时候,会自动调用一个外部文本编辑器给你用。默认会使用操作系统指定的默认编辑器,一般可能会是 Vi 或者 Vim。如果你有其他偏好,比如 Emacs 的话,可以重新设置:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global core.editor emacs
</code></pre></div></div>
<h3 id="差异分析工具">差异分析工具</h3>
<p>还有一个比较常用的是,在解决合并冲突时使用哪种差异分析工具。比如要改用 vimdiff 的话:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --global merge.tool vimdiff
</code></pre></div></div>
<p>Git 可以理解 kdiff3,tkdiff,meld,xxdiff,emerge,vimdiff,gvimdiff,ecmerge,和 opendiff 等合并工具的输出信息。当然,你也可以指定使用自己开发的工具,具体怎么做可以参阅第七章。</p>
<h3 id="查看配置信息">查看配置信息</h3>
<p>要检查已有的配置信息,可以使用 <code class="language-plaintext highlighter-rouge">git config --list</code> 命令:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config --list
user.name=Scott Chacon
user.email=schacon@gmail.com
color.status=auto
color.branch=auto
color.interactive=auto
color.diff=auto
...
</code></pre></div></div>
<p>有时候会看到重复的变量名,那就说明它们来自不同的配置文件(比如 <code class="language-plaintext highlighter-rouge">/etc/gitconfig</code> 和 <code class="language-plaintext highlighter-rouge">~/.gitconfig</code>),不过最终 Git 实际采用的是最后一个。</p>
<p>也可以直接查阅某个环境变量的设定,只要把特定的名字跟在后面即可,像这样:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git config user.name
Scott Chacon
</code></pre></div></div>
<h2 id="获取帮助">获取帮助</h2>
<p>想了解 Git 的各式工具该怎么用,可以阅读它们的使用帮助,方法有三:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git help <verb>
$ git <verb> --help
$ man git-<verb>
</code></pre></div></div>
<p>比如,要学习 config 命令可以怎么用,运行:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ git help config
</code></pre></div></div>
<p>我们随时都可以浏览这些帮助信息而无需连网。不过,要是你觉得还不够,可以到 Frenode IRC 服务器(irc.freenode.net)上的 <code class="language-plaintext highlighter-rouge">#git</code> 或 <code class="language-plaintext highlighter-rouge">#github</code> 频道寻求他人帮助。这两个频道上总有着上百号人,大多都有着丰富的 git 知识,并且乐于助人。</p>
<h2 id="小结">小结</h2>
<p>至此,你该对 Git 有了点基本认识,包括它和以前你使用的 CVCS 之间的差别。现在,在你的系统上应该已经装好了 Git,设置了自己的名字和电邮。接下来让我们继续学习 Git 的基础知识。</p>
GAE翻墙教程
2012-09-16T00:00:00+00:00
http://wangdaodao.github.io/2012-09-16/use-the-gae-over-the-gfw
<p>站在墙内,总是想爬墙头上看看墙外的世界,<em>GFW</em>的存在,导致了各种个样的办法来翻过这堵墙!现在,叨叨终于会翻墙了,使用的是<em>GoAgent</em>,经常翻墙的应该不会陌生吧!下面就记录下教程,也算做一个备份吧!</p>
<p>使用<em>GoAgent</em>浏览“某些网站”的具体步骤:</p>
<p>##第一步:申请创建一个Application</p>
<p>###Step 1 -申请Google App Engine账号</p>
<p>登录<a href="http://appengine.google.com">http://appengine.google.com</a>,如果你已经拥有一个<em>Gmail</em>账户,直接输入账号密码就可以登录;如果没有则需要新申请一个<em>Gmail</em>账户。</p>
<p>###Step 2 -创建Application</p>
<p><img src="/uploads/2012/09/create-application.jpg" alt="create-application" /></p>
<p>###Step 3 -通过短信验证你的账户</p>
<p><img src="/uploads/2012/09/verify-your-account-by-SMS.jpg" alt="verify-your-account-by-SMS" /></p>
<p>需要短信验证才可以进行下一步操作,<em>Country and Carrier</em>(国家和运营商)处选择<em>Other</em>,<em>Mobile Number</em>(手机号码)处填写你的个人手机号码号码,格式为+8613912345678</p>
<p>###Step 4 -将手机收到的验证码输入并Send</p>
<p><img src="/uploads/2012/09/authentication-code.jpg" alt="authentication-code" /></p>
<p>你将会收到谷歌发给你的短信,短信内容大致为:<strong>Google App Engine:XXXXXX(六位数字)</strong>。</p>
<p>###Step 5 -创建一个属于你的Application</p>
<p><img src="/uploads/2012/09/Create-an-Application.jpg" alt="Create-an-Application" /></p>
<p>1)输入一个<em>Application ID</em>,允许使用英文字母和短横杆;
2)点击<em>Check Available</em>,检查一下是否可用;
3)输入<em>Application</em>名称,这里可以随便填;
4)如果您的应用程序使用验证,任何人都可以与一个有效的<em>Google</em>帐户登录;
5)最后<em>Creat Application</em></p>
<p><img src="/uploads/2012/09/Application-registered-successfully.jpg" alt="Application-registered-successfully" /></p>
<p><strong>注:每个Gmail账户最多只能够创建10个Google App Engine应用,每个应用每天有1GB免费流量。如果你经常下载或者观看视频,建议多创建几个Google App Engine应用。</strong></p>
<p>##第二步:修改谷歌账号两步验证</p>
<p>###Step 1 -进入<a href="https://www.google.com/settings">谷歌账户设置页面</a></p>
<p>在安全性-两步认证处,点击修改;</p>
<p><img src="/uploads/2012/09/Google-Account-Setting.jpg" alt="Google-Account-Setting" /></p>
<p>###Step 2 -开始设置Google账户</p>
<p>这一步会用手机验证!此处你需要点击发送验证码,获取验证码后提交确认进入下一步;</p>
<p><img src="/uploads/2012/09/phone-setting.jpg" alt="phone-setting" /></p>
<p>通过验证后,会让你选择,是否信任当前计算机,如果当前计算机不是你个人的计算机,不要勾选信任此计算机,然后就是激活!这里,由于我已经激活过了,就没办法截图了,相信大家应该可以激活!</p>
<p>###Step 3 -开始为你的Application创建密码,非常重要!</p>
<p><img src="/uploads/2012/09/Generate-password.jpg" alt="Generate-password" /></p>
<p>1)输入刚才申请的<em>Application ID</em>,例如daodao-wang;
2)点击<em>Generate password</em>,创建密码;</p>
<p>###Step 4 -把生成的密码记下来,后面会用到的。</p>
<p><img src="/uploads/2012/09/get-a-password.jpg" alt="get-a-password" /></p>
<p>##第三步:配置goagent客户端</p>
<p>###Step 1 -下载goagent客户端</p>
<p><a href="http://code.google.com/p/goagent/">Download</a></p>
<p>###Step 2 -修改local\proxy.ini</p>
<table>
<tbody>
<tr>
<td>修改local\proxy.ini中的[gae]下的appid=你的<em>appid</em>(多appid请用</td>
<td>隔开),即前面创建创建<em>Application</em>所设定的<em>Application ID</em>,如我设定的daodao-wang;</td>
</tr>
</tbody>
</table>
<p><img src="/uploads/2012/09/change-your-appid.jpg" alt="change-your-appid" /></p>
<p>###Step 3 -双击server\uploader.bat</p>
<p><strong>Windows 7或Windows 8用户最好以管理员身份运行</strong>,根据提示依次输入<em>Application ID</em>,邮箱地址,和修改谷歌账号两步验证Step 8中生成的16位密码。(注,输入密码时,文字是不可见的,确定输入后回车确认即可。</p>
<p><img src="/uploads/2012/09/uploader1.jpg" alt="uploader1" /></p>
<p><img src="/uploads/2012/09/uploader2.jpg" alt="uploader2" /></p>
<p>##第四步:开始使用GoAgent</p>
<p>使用<em>GoAgent</em>上网前,你必须运行local\goagent.exe(以管理员身份运行),就刚才下载的<em>goagent</em>压缩包里面的文件。</p>
<p><img src="/uploads/2012/09/GoAgent.jpg" alt="GoAgent" /></p>
<p>如果你使用的是<em>Chrome</em>,请参考以下教程:</p>
<p>1)<em>Chrome</em>请安装<em>SwitchySharp</em>插件;</p>
<p>2)导入<em>SwitchySharp</em>配置,<a href="http://goagent.googlecode.com/files/SwitchyOptions.bak">下载地址:http://goagent.googlecode.com/files/SwitchyOptions.bak</a>,进入<em>SwitchySharp</em>设置界面,点击“导入/导出”-“从文件恢复”,导入刚才下载的<em>SwitchyOptions.bak</em></p>
<p><img src="/uploads/2012/09/switchysharp.jpg" alt="switchysharp" /></p>
<p>3)使用<em>Chrome</em>浏览<em>Twitter</em>、<em>Facebook</em>,<em>YouTube</em>等网站时,记得切换到<em>GoAgent</em></p>
<p><img src="/uploads/2012/09/chrome-goagent.jpg" alt="chrome-goagent" /></p>
<p>如果你使用的是<em>Firefox</em>,请参考以下教程:</p>
<p>1)安装火狐附加组件<a href="https://addons.mozilla.org/zh-cn/firefox/addon/autoproxy/">AutoProxy</a>;安装完毕后重启<em>Firefox</em>,提示规则列表,记得选中确定;</p>
<p><img src="/uploads/2012/09/gfwlist.jpg" alt="gfwlist" /></p>
<p>2)FireFox->选项->高级->加密->查看证书->证书机构->导入证书, 选择<em>local\ca.crt</em>, 勾选所有项,导入。</p>
<p><img src="/uploads/2012/09/certificate.jpg" alt="certificate" /></p>
<p>3)添加代理设置,点击<em>AutoProxy</em>图标旁边的三角按钮,在下拉菜单中选择<em>preferences</em>或者使用快捷键<em>Ctrl+Alt+P</em>进入附加组件首选项设置,然后点击<em>Proxy Server</em>,选择<em>Edit Proxy Server</em>,添加代理地址,如下图:</p>
<p><img src="/uploads/2012/09/Edit-Proxy-Server.jpg" alt="Edit-Proxy-Server" /></p>
<p>4)修改默认代理,同样是<em>preferences</em>界面点击<em>Proxy Server</em>,选择<em>Choose Proxy Server</em>,将默认的Proxy改成刚才添加的;</p>
<p><img src="/uploads/2012/09/choose-proxy-server.jpg" alt="choose-proxy-server" /></p>
<p>5)使用<em>AutoProxy</em>会自动根据已定规则决定是否使用<em>Proxy</em>的。</p>
<p>注意:切记需要连接外网时运行文件夹<em>local</em>下的goagent.exe,否则无法连接外网。</p>
<p>教程很长,看到这里大家照着做,应该可以搞定,如果搞不定了,那就用这个<a href="https://code.google.com/p/icefox/">工具</a>吧,安装下就可以翻墙了!</p>
用PSD生成干净的Web2.0代码
2011-06-24T00:00:00+00:00
http://wangdaodao.github.io/2011-06-24/psd2html
<p>首先,这篇文章不是我原创的,是看到<a href="http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/">这篇</a>国外文章觉得写的很好,觉得很有必要翻译一下。提醒一下,这篇文章很长,如果没有耐性看下去的话,那我劝你还是不要浪费时间看了,别看到一半就关闭了。要是有耐心看下去的话,建议准备好咖啡等一些能让你提神的东西!OK,让我们一起开始这漫长的学习吧!教程中用到的素材,<a href="http://downloads.sixrevisions.com/clean-web-2.0-source.zip">clean-web-2.0-source.zip</a> (ZIP, 3.4 MB)!</p>
<h2 id="设置文件结构">设置文件结构</h2>
<p>一.在电脑上创建一个模板文件夹并将其命名为web2上,这将是我们的工作目录。</p>
<p>二.web2内文件夹,创建以下内容:</p>
<ol>
<li>img文件夹 -将包含在本教程中使用的所有图像。</li>
<li>index.html- 我们的网站模板。</li>
<li>styles.css- 我们的样式表。</li>
<li>javascript.js- 这将包含我们的脚本。</li>
</ol>
<p><a href="/uploads/2011/06/psd2web2_01.png"><img src="/uploads/2011/06/psd2web2_01.png" alt="设置文件结构" /></a></p>
<p>三.用你习惯的编辑器打开<code class="language-plaintext highlighter-rouge">index.html</code>和<code class="language-plaintext highlighter-rouge">styles.css</code>,此外还要打开PSD,准备切片!如果切片你还不会,我建议你去先熟悉下<code class="language-plaintext highlighter-rouge">photoshop</code>!</p>
<h2 id="创建网页背景">创建网页背景</h2>
<p>四.在<code class="language-plaintext highlighter-rouge">Photoshop</code>中,按照图片上显示的只显示<code class="language-plaintext highlighter-rouge">bg</code>和<code class="language-plaintext highlighter-rouge">diagonal lines</code>这两个图层!</p>
<p><a href="/uploads/2011/06/psd2web2_02.png"><img src="/uploads/2011/06/psd2web2_02.png" alt="创建网页背景" /></a></p>
<p>五.使用矩形选框工具选取一个20像素框框。切背景图有点技巧,就是能用纯色的话,就用代码,不用切到图片里面!</p>
<p><a href="/uploads/2011/06/psd2web2_03.png"><img src="/uploads/2011/06/psd2web2_03.png" alt="创建网页背景" /></a></p>
<p>六.确保选取的框是选定的,使用编辑>“复制合并(<code class="language-plaintext highlighter-rouge">按Ctrl + Shift+ C</code>)把里面的20像素复制到一个新的文档中。在里面保存成<code class="language-plaintext highlighter-rouge">bg_body.jpg</code>到<code class="language-plaintext highlighter-rouge">img</code>文件夹中。</p>
<p><a href="/uploads/2011/06/psd2web2_04.png"><img src="/uploads/2011/06/psd2web2_04.png" alt="创建网页背景" /></a></p>
<h2 id="设置html和css">设置HTML和CSS</h2>
<p>七.我们首先要做的是在我们的HTML文档的<code class="language-plaintext highlighter-rouge">head</code>中引入<code class="language-plaintext highlighter-rouge">style.css</code>和<code class="language-plaintext highlighter-rouge">javascript.js</code>。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript.js"></script>
</head>
</code></pre></div></div>
<p>八.让我们在<code class="language-plaintext highlighter-rouge">styles.css</code>中写一些基本的样式规则,我们将采取CSS重置技术(叨叨这里不推荐这样的重置方法)。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>/* CSS Reset */
* { margin:0; padding:0; }
</code></pre></div></div>
<p>放一段我的重置样式,需要根据项目情况来删除不必要的标签</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dd, ul, ol, pre,fieldset,legend, button, input, textarea, th, td { margin: 0; padding: 0; }
body { font:12px/1.5 "Microsoft YaHei",微软雅黑, Arial, Verdana, Sans-Serif; color:#000; position:relative; width:100%; height:100%; margin:0 auto; }
html { width:100%; height:100%; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; }
code, kbd, pre, samp, tt { font-family: "Courier New", 9, monospace; }
small { font-size: 12px; }
ul, ol { list-style: none; }
a { text-decoration: none; }
a:link, a:visited , ins { text-decoration: none; }
a:hover, a:active { text-decoration: underline; }
abbr, acronym { border: 0; font-variant: normal; }
sup{ vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; }
legend { color: #000; }
fieldset, img { border: none; }
img{ vertical-align: middle; }
button, input, select, textarea { font-size: 100%; }
table { border-collapse: collapse; border-spacing: 0; }
caption { text-align: left; }
hr { border: none; height: 1px; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
</code></pre></div></div>
<h2 id="使用网页背景">使用网页背景</h2>
<p>九.我们要重复刚才切的20像素背景下,我们将在body设置为背景。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>body {
background:#59d3fa url(img/body_bg.jpg) repeat-x 0 0;
}
</code></pre></div></div>
<h2 id="设置布局的容器div">设置布局的容器div</h2>
<p>十.让我们切换到HTML。我们要写一个宽为1024px的容器<code class="language-plaintext highlighter-rouge">#container</code>。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><body>
<div id="container">
<!-- content goes here -->
</div>
</body>
</code></pre></div></div>
<p>十一.我们要给<code class="language-plaintext highlighter-rouge">#container</code>宽度为1024px,而且要居中!在这里,我觉得1024可能有点太宽了,960px也是不错的!</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#container {
width:1024px;
margin:0 auto;
}
</code></pre></div></div>
<h2 id="创建logo">创建LOGO</h2>
<p>十二.打开所有图层,选择logo!使用矩形选框工具的选择宽125px高320px的logo。使用<code class="language-plaintext highlighter-rouge">Photoshop</code>,配合“参考线”,这样才能更容易更准确的保证一切都正确对齐。</p>
<p><a href="/uploads/2011/06/psd2web2_05.png"><img src="/uploads/2011/06/psd2web2_05.png" alt="创建LOGO" /></a></p>
<p>十三.复制合并(按<code class="language-plaintext highlighter-rouge">Ctrl + Shift+ C</code>),然后粘贴到新文档中。</p>
<p>十四.我们要用CSS精灵,这样当用户鼠标放上去的时候,可以有一个颜色变暗的效果。增加画布大小,图像“>画布大小(按<code class="language-plaintext highlighter-rouge">Ctrl + Alt + C</code>)。输入的双倍高度,更改锚顶部中间位置。</p>
<p><a href="/uploads/2011/06/psd2web2_06.png"><img src="/uploads/2011/06/psd2web2_06.png" alt="创建LOGO" /></a></p>
<p>十五.复制图层1,然后使用移动工具将其移动到底层。</p>
<p><a href="/uploads/2011/06/psd2web2_07.png"><img src="/uploads/2011/06/psd2web2_07.png" alt="创建LOGO" /></a></p>
<p>十六.随着复制层移动,使用图像>调整>替换颜色。请确保图片框被选中。单击颜色框中选择改变色调,饱和度和亮度值直到你得到你喜欢的效果。在下面的图中,您会看到我用的设置。</p>
<p><a href="/uploads/2011/06/psd2web2_08.png"><img src="/uploads/2011/06/psd2web2_08.png" alt="创建LOGO" /></a></p>
<p>十七.图片另存为logo.jpg!从现在起,储存图片要使用相同的设置。我用的JPEG,质量非常高,如果更改了默认设置,一定要保证图片质量的一致性。</p>
<p>创建导航菜单</p>
<p>十八.和logo一样,创建一个高125px宽640px的选区。</p>
<p><a href="/uploads/2011/06/psd2web2_09.png"><img src="/uploads/2011/06/psd2web2_09.png" alt="创建导航菜单" /></a></p>
<p>十九.复制选择,然后粘贴到一个新的文档。</p>
<p>二十.就像在第14步,画布的高度为250像素,图像>画布大小(按<code class="language-plaintext highlighter-rouge">Ctrl + Alt+ C</code>)后,不要忘记改变顶部中间。然后再复制图层1,并使用移动工具将其移动到底层。</p>
<p><a href="/uploads/2011/06/psd2web2_10.png"><img src="/uploads/2011/06/psd2web2_10.png" alt="创建导航菜单" /></a></p>
<p>二十一.按照步骤16,以取代底层的颜色。我用的颜色<code class="language-plaintext highlighter-rouge">#e2e2e2</code>。</p>
<p><a href="/uploads/2011/06/psd2web2_11.png"><img src="/uploads/2011/06/psd2web2_11.png" alt="创建导航菜单" /></a></p>
<p>二十二.将图像menu.jpg存到IMG文件夹内。</p>
<h2 id="编写head中的代码">编写head中的代码</h2>
<p>二十三.让我们切换到HTML/ CSS中。首先,我们将开始与标记。在<code class="language-plaintext highlighter-rouge">#container</code>容器里面,我们使用另一个div来创建我们的标头部分我们命名为<code class="language-plaintext highlighter-rouge">#header</code>。你也可以用其他来命名,这取决于你的结构,不过我还是建议用简单易懂的方式来命名,便于以后修改。根据我上篇介绍的语义化,这里我们用h1来放logo。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div id="container">
<div id="header">
<h1><a href="#">Creativo</a></h1>
<ul>
<li id="home"><a href="#">Home</a></li>
<li id="about"><a href="#">About</a></li>
<li id="work"><a href="#">Work</a></li>
<li id="contact"><a href="#">Contact</a></li>
</ul>
</div>
</div>
</code></pre></div></div>
<h2 id="logo的样式">LOGO的样式</h2>
<p>二十四.首先,让我们定义<code class="language-plaintext highlighter-rouge">#header</code>的样式。我们在网页顶部一些空间,因此,我们需要给它一个上边距属性。由于我们的内容区域是960px,我们会给#header一个960px宽度,这样当用户最小化的Web浏览器,仍然有保证在左右两边有一些空余。我们还必须让他居中。下面,我用margin属性的简写,这些数字对应于顶部(90px),右(自动),底部(0),左(自动)的外边距。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#header {
height:125px;
width:960px;
margin:90px auto 0 auto;
}
</code></pre></div></div>
<p>二十五.让我们开始写logo的样式。我们把h1元素转变成一个块元素的。我们利用我们先前创建的标志(第17步)为背景,并隐藏的文本。这种替换背景图像文本的方法被称为CSS背景图片替换。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#header h1 {
display:block;
float:left;
width:320px;
height:125px;
background:url(img/logo.jpg) no-repeat 0 0;
text-indent:-10000px;
}
</code></pre></div></div>
<p><a href="/uploads/2011/06/psd2web2_12.png"><img src="/uploads/2011/06/psd2web2_12.png" alt="LOGO的样式" /></a></p>
<p>二十六.为了使LOGO可点击,我们也需要h1内部的元素a元素是块元素,并给它相同的宽度和高度。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#header h1 a {
display:block;
width:100%;
height:100%;
}
</code></pre></div></div>
<p>二十七.为了让鼠标放上去有效果,这里用了css的伪类<code class="language-plaintext highlighter-rouge">a:hover</code>。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#header h1 a:hover {
background:url(img/logo.jpg) no-repeat 0 -125px;
}
</code></pre></div></div>
<h2 id="制作导航菜单的样式">制作导航菜单的样式</h2>
<p>二十八.在主导航上,我们还需要将其转换为一个右浮动块元素并且不使用列表的默认样式。然后,我们将背景设置为menu.jpg。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#header ul {
display:block;
float:right;
width:640px;
height:125px;
background:url(img/menu.jpg) no-repeat 0 0;
list-style:none;
}
</code></pre></div></div>
<p>二十九.对于列表项,我们要让他成为块元素,然后左浮动,使他们并排显示。然后,就像logo一样,我们使用隐藏文本。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#header ul li {
display:block;
float:left;
height:125px;
text-indent:-10000px;
}
</code></pre></div></div>
<p>三十.我们需要为每个列表项自定义宽度,使每个菜单项可点击的区域是准确的。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#home {
width:160px;
}
#about {
width:137px;
}
#work {
width:129px;
}
#contact {
width:210px;
}
</code></pre></div></div>
<p>三十一.我们设置a的子集的列表元素的宽度和高度等于其父块。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#header ul li a {
display:block;
width:100%;
height:100%;
}
</code></pre></div></div>
<p>三十二.最后,我们使用<code class="language-plaintext highlighter-rouge">background-position</code>这个属性来实现鼠标放上去的效果。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#home a:hover {
background:url(img/menu.jpg) no-repeat 0 -125px;
}
#about a:hover {
background:url(img/menu.jpg) no-repeat -160px -125px;
}
#work a:hover {
background:url(img/menu.jpg) no-repeat -297px -125px;
}
#contact a:hover {
background:url(img/menu.jpg) no-repeat -426px -125px;
}
</code></pre></div></div>
<p>三十三.在Web浏览器预览,悬停在LOGO和菜单项,就应该改变颜色。</p>
<h2 id="创建特色区的背景">创建“特色区”的背景</h2>
<p>让我们调用图片显示的的一部分,文本上写着“建立网站… …”,以及“了解更多”按钮 – “特色区”。</p>
<p><a href="/uploads/2011/06/psd2web2_13.png"><img src="/uploads/2011/06/psd2web2_13.png" alt="创建特色区的背景" /></a></p>
<p>三十四.在图层中选择<code class="language-plaintext highlighter-rouge">featuredarea</code>文件夹,关闭除子标题和主标题层,使“了解更多”按钮。</p>
<p><a href="/uploads/2011/06/psd2web2_14.png"><img src="/uploads/2011/06/psd2web2_14.png" alt="创建特色区的背景" /></a></p>
<p>三十五.创建一个选区,完全选择到“特色区”,宽960px高360px。</p>
<p><a href="/uploads/2011/06/psd2web2_15.png"><img src="/uploads/2011/06/psd2web2_15.png" alt="创建特色区的背景" /></a></p>
<p>三十六.复制到一个新文档,然后保存为<code class="language-plaintext highlighter-rouge">featured_bg.jpg</code>到IMG文件夹中。</p>
<p><a href="/uploads/2011/06/psd2web2_16.png"><img src="/uploads/2011/06/psd2web2_16.png" alt="创建特色区的背景" /></a></p>
<h2 id="创建特色区按钮">创建“特色区”按钮</h2>
<p>三十七.让我们切出“了解更多”按钮。打开图层面板<code class="language-plaintext highlighter-rouge">learnmore</code>的文件夹,它里面的<code class="language-plaintext highlighter-rouge">taglines</code>文件夹。</p>
<p><a href="/uploads/2011/06/psd2web2_17.png"><img src="/uploads/2011/06/psd2web2_17.png" alt="创建特色区的按钮" /></a></p>
<p>三十八.在按钮周围创建一个高60px宽280px选区。</p>
<p><a href="/uploads/2011/06/psd2web2_18.png"><img src="/uploads/2011/06/psd2web2_18.png" alt="创建特色区的按钮" /></a></p>
<p>三十九.复制到新文档。我们要用CSS精灵做一个鼠标放上的特效。新建两倍高度的画布,复制图层1,移动重复下到底底,就像在步骤14至17。对于选择颜色,我用:<code class="language-plaintext highlighter-rouge">#0a72a6</code>。唯一的替代价值,我改变了色调的设置,我设置的为10。保存<code class="language-plaintext highlighter-rouge">learnmore.jpg</code>到img文件夹中。</p>
<h2 id="创建显示器图片">创建显示器图片</h2>
<p>四十.关于右边布局的显示器也只是一个图像。如果个人有兴趣可以使用一个很酷的幻灯片里的内容,今天我们不打算使用幻灯片。打开<code class="language-plaintext highlighter-rouge">featuredarea</code>文件夹!</p>
<p>四十一.创建一个高370px宽375px的选区,围绕显示器选择。</p>
<p><a href="/uploads/2011/06/psd2web2_19.png"><img src="/uploads/2011/06/psd2web2_19.png" alt="创建显示器图片" /></a></p>
<p>四十二.复制到一个新文档,然后保存为<code class="language-plaintext highlighter-rouge">monitor.jpg</code>。</p>
<h2 id="特色区代码">“特色区”代码</h2>
<p>现在,我们要写的“特色区”HTML和CSS。因此,打开<code class="language-plaintext highlighter-rouge">index.html</code>。</p>
<p>四十三.对于“特色区”,我们将使用块显示元素p。您当然可以使用一个div,但我选择一个段落。 “了解详情”按钮是一个a元素,显示器屏幕上只是一个段落内的图像。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><p id="featuredText">
We build websites that blow you away[...]
<a href="#" id="learnMoreButton">learn more.</a>
<img id="monitor" src="img/monitor.jpg" width="375" height="370" alt="scrn" />
</p>
</code></pre></div></div>
<p>四十四.写出段落样式,我们需要设置属性的相对位置,将自己定位相对于<code class="language-plaintext highlighter-rouge">#featuredText</code>,而不是网页的身体。我们设置为背景<code class="language-plaintext highlighter-rouge">featured_bg.jpg</code>和缩进文本左就像前面的例子。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>p#featuredText {
display:block;
position:relative;
float:left;
width:100%;
height:375px;
background:url(img/featured_bg.jpg) no-repeat 0 0;
text-indent:-10000px;
}
</code></pre></div></div>
<p>四十五.下一步,我们写“了解更多”按钮的样式。我们使用<code class="language-plaintext highlighter-rouge">learnmore.jpg</code>为背景。我们声明一个悬停样式规则,使我们可以得到就像在标志的CSS悬停效果。我们也绝对位置上的<code class="language-plaintext highlighter-rouge">#featuredText</code>容器右上角的显示器。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>a#learnMoreButton {
display:block;
width:280px;
height:60px;
background:url(img/learnmore.jpg) no-repeat 0 0;
margin:200px 0 0 132px;
}
a:hover#learnMoreButton {
background-position:0 -60px;
}
#monitor {
position: absolute;
top:0;
right:0;
}
</code></pre></div></div>
<p><a href="/uploads/2011/06/psd2web2_20.png"><img src="/uploads/2011/06/psd2web2_20.png" alt="特色区代码" /></a></p>
<h2 id="创建圆角框">创建圆角框</h2>
<p>四十六.下一步是创建圆角框。该图片采用了非网络安全的字体,所以我们要更换网页安全字体(宋体)。首先,在<code class="language-plaintext highlighter-rouge">Photoshop</code>调色板文件夹中关闭box,box2和box3图层的文字图层。</p>
<p><a href="/uploads/2011/06/psd2web2_21.png"><img src="/uploads/2011/06/psd2web2_21.png" alt="创建圆角框" /></a></p>
<p>四十七.围绕第一个box,创建一个高185px宽320px的选区。使用合并复制,然后粘贴到另一个文件中,保存box1.jpg到img文件夹中。</p>
<p><a href="/uploads/2011/06/psd2web2_22.png"><img src="/uploads/2011/06/psd2web2_22.png" alt="创建圆角框" /></a></p>
<p>四十八.按照第四十七步,重复第二个框和第三个框。然后保存为box2.jpg和box3.jpg到img文件夹中。</p>
<h2 id="编写box的代码">编写box的代码</h2>
<p>四十九.我们将创建一个DIV包含的盒子称为<code class="language-plaintext highlighter-rouge">#boxContainer</code>。在这个DIV,我们将创建三个box,这样我们就可以设置相应的CSS背景!</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div id="boxContainer">
<div class="box client">
<h2>Client list</h2>
<p>We have a wide range of clients from [...]<p>
</div>
<div class="box work">
<h2>Our work</h2>
<p>Check out the work we have done for our various [...]</p>
</div>
<div class="box book">
<h2>Book now!</h2>
<p>[...] Click here to get a <strong>free quote</strong>!</p>
</div>
</div>
</code></pre></div></div>
<h2 id="box的样式">box的样式</h2>
<p>五十.我们做一个向左浮动div框,使它们旁边显示给对方。我们给H2元素的文本设置属性大写,以便它的文字全部大写。然后为<code class="language-plaintext highlighter-rouge">.client</code>,<code class="language-plaintext highlighter-rouge">.work</code>,<code class="language-plaintext highlighter-rouge">.book</code>写样式,我们为每个box写适当的背景。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.box {
width:320px;
height:185px;
float:left;
}
.box h2 {
font:bold 20px Verdana, Geneva, sans-serif;
color:#0f83bc;
text-transform:uppercase;
margin:35px 0 0 140px;
}
.box p {
font:normal 12px/18px Verdana, Geneva, sans-serif;
color:#0c3b4a;
margin:0 30px 0 140px;
}
.client {
background:url(img/box1.jpg) no-repeat 0 0;
}
.work {
background:url(img/box2.jpg) no-repeat 0 0;
}
.book {
background:url(img/box3.jpg) no-repeat 0 0;
}
</code></pre></div></div>
<h2 id="左栏代码和样式">左栏代码和样式</h2>
<p>五十一.下面的框,有一个内容区域,有一个标题为“Need we say more?”我们将称之为“left column”,并把里面的div的文本称为<code class="language-plaintext highlighter-rouge">#leftCol</code>。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div id="leftCol">
<h2>Need us say more?</h2>
<p>Creativo is a Web Design and Development[...]</p>
</div>
</code></pre></div></div>
<p>五十二.我们给<code class="language-plaintext highlighter-rouge">#leftCol</code>的宽度等于两个box以上的宽度,赋予一个对称位。我们必须给它一个左边距,以配合第一个box,一个上边距给下面box一些空间,然后我们给里面的文字弄一些列样式。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#leftCol {
width:640px;
float:left;
margin:20px 0 0 10px;
}
#leftCol h2 {
font:bold 20px/24px Verdana, Geneva, sans-serif;
color:#094e64;
}
#leftCol p {
font:normal 14px/20px Arial, Helvetica, sans-serif;
color:#094e64;
margin-top:10px;
}
</code></pre></div></div>
<h2 id="创建搜索表单">创建搜索表单</h2>
<p>五十三.在Photoshop中,关闭除了“开始”按钮的图层和输入文字的图层。</p>
<p><a href="/uploads/2011/06/psd2web2_23.png"><img src="/uploads/2011/06/psd2web2_23.png" alt="创建搜索表单" /></a></p>
<p>五十四.创建一个矩形选框高110px宽320px。</p>
<p><a href="/uploads/2011/06/psd2web2_24.png"><img src="/uploads/2011/06/psd2web2_24.png" alt="创建搜索表单" /></a></p>
<p>五十五.复制选择(使用合并拷贝),粘贴到一个新的文档,保存为newsletter_bg.jpg。</p>
<p>五十六.创建一个围绕Go按钮的选区,复制,然后粘贴到另一个文档中保存为go.jpg。</p>
<h2 id="编写搜索框代码">编写搜索框代码</h2>
<p>五十七.对于表单的形式,我们使用一个form元素,为文本标签,文本输入,和一个提交按钮。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><form id="newsletter" action="" method="get">
<label for="emailInput">Sign Up for Our Monthly Newsletter: </label>
<input id="emailInput" name="emailInput" type="text" />
<input id="submitButton" name="submitButton" value="Go" type="image" src="img/go.jpg" />
</form>
</code></pre></div></div>
<p>五十八.我们给搜索框一个相对位置,使我们可以用绝对定位来定位输入和按钮。我们去掉<code class="language-plaintext highlighter-rouge">#emailInput</code>边框。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#newsletter {
position:relative;
width:320px;
height:110px;
float:left;
background:url(img/newsletter_bg.jpg) no-repeat 0 0;
margin:20px 0 50px 0;
}
#newsletter label {
font:bold 16px Verdana, Geneva, sans-serif;
letter-spacing:-1px;
margin-top:26px;
width:100%;
display:block;
color:#fff;
text-align:center;
}
#emailInput {
position:absolute;
top:51px;
left:5px;
width:200px;
margin:0px 0 0 30px;
font:bold 20px Verdana, Geneva, sans-serif;
color:#999;
border:0;
background-color:transparent;
border:none;
}
#submitButton {
position:absolute;
top:43px;
right:27px;
width:50px;
height:40px;
margin-top:5px;
padding:0;
}
</code></pre></div></div>
<h2 id="编写底部代码">编写底部代码</h2>
<p>我们要减少不必要的页脚内容,我们的页脚将用纯HTML和CSS来编写。</p>
<p>HTML代码</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><div id="footer">
<p>Creativo Design &#169; 2009. All Rights Reserved. </p>
</div>
</code></pre></div></div>
<p>CSS代码</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>#footer {
clear:both;
width:940px;
border-top:1px dashed #094e64;
}
#footer p {
margin:15px 0;
font:bold 12px Arial, Helvetica, sans-serif;
color:#094e64;
}
</code></pre></div></div>
<h2 id="一些jquery的效果">一些jquery的效果</h2>
<p>五十九.首先,HTML文件头部包括<code class="language-plaintext highlighter-rouge">jQuery</code>库和<code class="language-plaintext highlighter-rouge">javascript.js</code>。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
</code></pre></div></div>
<p>六十.让我们在style.css中写上以下样式</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>span.logoHover {
display:block;
width:100%;
height:100%;
background:#ccc url(img/logo.jpg) no-repeat 0 -125px;
}
span.logoHover a {
display:block;
width:100%;
height:100%;
}
</code></pre></div></div>
<p>六十一.让我们把一下的代码写入到<code class="language-plaintext highlighter-rouge">javascript.js</code>,阅读注释可以帮助你看懂。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$(document).ready(function(){
// Remove CSS style of hover
$('#header h1 a:hover').css('background','none');
// Bind a mouseenter event to #header > h1 > a element
$('#header h1 a')
.bind('mouseenter',function(){
// Insert a span > a element in DOM that we will fade in
// with class name .logoHover
$(this)
.before('<span class="logoHover"><a href="#">home</a></span>');
// Hide new DOM element immediately, then fade it in
$('.logoHover')
.hide().fadeIn()
// When mouse leaves logoHover, fade out, on complete, remove
// from DOM.
.bind('mouseleave', function(){
$(this).fadeOut('normal', function(){
$(this).remove()
});
});
});
});
</code></pre></div></div>
<p><a href="/uploads/2011/06/psd2web2_25.png"><img src="/uploads/2011/06/psd2web2_25.png" alt="最终效果" /></a></p>
<p><a href="http://sixrevisions.com/demo/web2_layout/index.html">最终效果</a></p>
<p>原文:</p>
<p><a href="http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/">Coding a Clean Web 2.0 Style Web Design from Photoshop</a></p>
<p>姊妹篇:</p>
<p><a href="http://sixrevisions.com/tutorials/photoshop-tutorials/how-to-create-a-clean-web-20-style-web-design-in-photoshop/">How to Create a Clean Web 2.0 Style Web Design in Photoshop</a></p>