分类小記下的文章

git入門

December 21, 2013

登錄 -- > New repositories --> 輸入項目名及描述 -- > public 創建readme.md

所以命令都須切換到項目目錄下執行；下載項目

git clone [url]

設置貢獻者

git config --global user.name "elmok1"
git config --global user.email "elmok1@qq.com"

git config --list //顯示更多信息

master:項目主分支的默認名：master

[工作区] //工作文件在这里

[暂存区] //过渡，临时存放

[版本区]

git status //查看工作状态

git add [filename或.]       //工作区-->暂存区
git commit -m "这里是注釋"   //暂存区-->版本库

//或
git commit -a -m "这里是注釋"

git log  //操作日記

红色表示[工作区]--[master +2 ~0 -0 !]：表示[工作区]添加2个新文件，0个修改，0个删除

绿色表示[工作区]--[master +1 ~0 -0 !]：表示[暂存区]添加1个新文件，0个修改，0个删除

查看差異---[工作区] && [暂存区]之間

git diff

查看差異---[暫存區] && [版本区]之間

git diff --cached
//或
git diff --staged

查看差異---[工作区] && [版本区]之間

git diff master

從[暫存區]-->撤銷到 [工作區]

//當
git add .

//則撤銷回[工作區]
git reset HEAD [filename]

從[版本區]-->撤銷到 [工作區],即還原文件內容

git checkout -- [filename]

撤銷一次提交

//當要提2文件，只提了一個
git add fname1.js
git commit -m "fname1.js and fname2"  

//把遺漏的add
git add fname2.js

//再合並提交即可
git commit -m "fname1.js and fname2" --amend //把上一次的提交撤銷並到撤銷的與這次提交合併到一起提交

当在[工作区]删除一个文件时，可以使用此命令删除[暂存区]的文件；

git rm [filename]

當文件已放入[暫存區]，刪除需兩個區同時刪

git rm -f [filename]

[工作区]文件可以存在,要刪除[暫存區]文件

git rm --cached test.txt

针对文件恢复：[commitID]可通過git log查找

git checkout [commitId] [filename]

針對版本恢復

get reset --hard [commitID]

//或
get reset --hard HEAD^      //回到以前的版本；向下
get reset --hard HEAD~2     //回到跳两个以前的版本；向下

reflog:打印最近操作行為，可找之前版本的commitID

git reflog

//再即可
get reset --hard [commitID]

<h2>同步到远程仓库</h2>

確保github賬號同步

git remote //遠程倉庫的名字 origin默認名
git remote -v //查看對應地址
git push origin master // 同步名字，同步分支

多人協作時添加權限

+ New collaborators 輸入賬號elmok2

切換另一賬號elmok2

登錄後，https://github.com/watching,即可

git clone https://github.com/elmok/drag

之後流程一致

git status
git add .
git commit -m "elmok2 change"
git push origin master

切換用戶elmok，更新本地

git fetch //只是獲取，但不合並 【建議】
或
git pull  //獲取後自動合並

<h2>多人協作解決衝突</h2>

產生問題，未先更新直接修改易發生衝突，出現衝突時代碼無法提交

所以需要先獲取最新代碼，再與本地對比

git fetch //只是拉取，但不合並
git diff master origin/master //對比 git diff 本地 遠程，即可打印區別
git merge origin/master  //合並後需要手動解決衝突

//解決衝突後再手動提交即可
git commit -a -m "update"
git push origin master

<h2>當無權限時</h2>

1、fork

github.com fork後，即生成https://github.com/elmok2/drag

git clone https://github.com/elmok2/drag

修改後提交本地[版本庫]

git commit -a -m "fixed bug"
git push origin master

2、在github上pull request

elmok2: new pull request -- > create pull request --> "留言" --> 確認即可

elmok1: pull request --> merge pull request --> 確認合併

回覆留言時，選中留言，按r即可引用

<h2>Git分支</h2>

git branch     //查看分支
git branch new1  //創建分支,當創建分支後，所有狀態都為創建時的狀態，如果在不同的分支上修改不會影響這裏；
git checkout new1  //切換分支

//或一步創建及切換分支
git checkout -b new2

切換到new1，並修改代碼

1.js
var a = 0;

git checkout new1
//之後提交
git commit -a -m "new1 change"

//new1與master合並
git checkout master //注意，運行這裏後，工作區的代碼也會還原，即不會有var a = 0; 這句
//再運行合並
git merge new1   //即master分支下也有var a = 0;

切換到new2

git checkout new2  //加var b = 0;
git commit -a -m "new2 change" //提交

//切換master
git checkout master
git branch --merged //查看我們當前master下面所合並的分支；如new1合併了即會列出
git branch --no-merged //未與master合並的分支

git branch -d new1 //new1已經合併，可以刪除

//假設
git branch -d new2 //失敗因為未合併，所以不能刪除
//所以
git branch -D new2 //大寫D，強制刪除未合併分支

場景：修改代碼，不同分支上修改相同部分，master 及 new1兩分支上分別提交

git checkout master
git commit -a -m "master change" //master 上有版本c6

git checkout new1
git commit -a -m "new1 change" //new1上有版本c7

需要做一個c8版本,先把c6與master合並變為c8

git checkout master  //切換主分支
git merge new1 //merge new1 時出現衝突
git status  //查看衝突文件
//回到工作區文件解決沖突，之後再提交

git commit -a -m "c8"

//後續可以查看分支合併情況
git branch --merged
//已合併且不需要維護的可刪除
git branch -d new1

當開多個分支時，合並時使用git merge,如果有衝突，通過git status列出，再手動去工作區解決衝突，之後再提交即可

<h2>github上的分支</h2>

git branch n1
git checkout n1
git add .
git commit -m "n1 change"
git push origin n1

也可以直接在github上创建分支

branch 输入 n2（在哪个分支上则先切换到哪个分支）

contributors：協作人員

release:標籤,即不同版本；

git tag v1.0
git tag //查看
git push origin v1.0

之後在github是release即可下載v1.0版本；也可以release是直接 Draft a new release，創建一個版本

watch：關注；當有更新時即會提示

<h2>github上创建組織</h2>

+ New organization -- >選擇組織參與人，發起請求，完成；

<h2>github創建博客</h2>

http://jquery.github.io/

https://pages.github.com/

+ New repository -- > Owner Repository name [這裏必須與前面的名字一致]如：Owner為：elmok; 則name:elmok.github.io

勾選：intialize this repository with a README

Add:wordpress （下面那些也可不用設置了，直接本地clone後wordpress上傳即可）

Settings -- > 拉到最下面 AutoMatic Page Generator，自動生成網頁，可能有不同

填寫title及tag等

選擇主題--->發布

elmok.github.io即可

注：如發現404，請稍等，或檢查郵箱是否通過驗證

<h2>git資源</h2>

<a href="http://git.oschina.net/progit/
" target='_blank'>http://git.oschina.net/progit/

http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

Less 語言特性

December 2, 2013

http://less.bootcss.com/features/#mixins-parametric-feature
<h3>變量</h3>

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

/*輸出*/
#header {
  color: #6c94be;
}

注意，由于变量只能定义一次，其本质就是“常量”。

<h3>混合（Mixin）</h3>

相當於“繼承”

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;
}

/*輸出*/
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

class與id同樣適用，當mixin時，()是可選的

.a, #b {
  color: red;
}

.mixin-id {
  #b();
}

/*輸出*/
.mixin-id {
  color: red;
}

header{
  color: #cccccc;
  .nav{
    font-size: 12px;
  }
  .logo{
    width: 300px;
    .img{
      width: 100%;
    }
  }
}

/*輸出*/
header {
  color: #cccccc;
}
header .nav {
  font-size: 12px;
}
header .logo {
  width: 300px;
}
header .logo .img {
  width: 100%;
}

&代表父級

.clearfix {
  display: block;
  zoom: 1;
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

/*輸出*/
.clearfix {
  display: block;
  zoom: 1;
}
.clearfix:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

a {
  color: blue;
  &:hover {
    color: green;
  }
}

/*輸出*/
a {
  color: blue;
}
a:hover {
  color: green;
}

&-生產名

.button{
  &-ok{
    background: #000;
  }
}

/*輸出*/
.button-ok {
  background: #000;
}

&組合

.c{
  &+&{
    color: red;
  }
  &&{
    color:blue;
  }
  & & {
    color:yellow
  }
  &,&con{
      color:pink
  }
}

/*輸出*/
.c + .c {
  color: red;
}
.c.c {
  color: blue;
}
.c .c {
  color: yellow;
}
.c, .ccon {
  color: pink;
}

&同時代表的所有長輩元素，不僅僅是父級,所以多層選擇更簡潔：

.nav{
  .header{
    .logo{
      & input[type=text],& input[type=button]{
        color: green;
      }
    }
  }
}

/*輸出*/
.nav .header .logo input[type=text],
.nav .header .logo input[type=button] {
  color: green;
}

通過&改變選擇器父子關係：

.h{
  .a{
    width:10px;
    .c{
      height:20px;
    }
  }
}
/*輸出*/
.h .a .c {
  height: 20px;
}

.h{
  .a{
    width:10px;
    .c &{    /*使.c成為父級*/
      height:20px;
    }
  }
}
/*輸出*/
.c .h .a {
  height: 20px;
}

生成可能排列的組合

p,a,ul,li{
  width: 10px;
  & &{
    height:0
  }
}

/*輸出*/
p,
a,
ul,
li {
  width: 10px;
}
p p,
p a,
p ul,
p li,
a p,
a a,
a ul,
a li,
ul p,
ul a,
ul ul,
ul li,
li p,
li a,
li ul,
li li {
  height: 0;
}

<h3>运算</h3>
任何数字、颜色或者变量都可以参与运算。下面是一组案例

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

div{
  color: #888 / 4;
  width:@base * 10;
  height: 100% / 2 + @filler;
}

/*輸出*/
div {
  color: #222222;
  width: 50%;
  height: 60%;
}

<h3>函数</h3>
http://baike.renwuyi.com/2015-04/9042.html

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // 0.5轉50%
  color: saturate(@base, 5%); //顏色飽和度+5%
  background-color: spin(lighten(@base, 25%), 8); //顏色亮度+25%,色相+8
}


/*輸出*/
.class {
  width: 50%;
  color: #f6430f;
  background-color: #f8b38d;
}

<h3>命名空間規則</h3>

#logo {
  .img {
    width: 10px;
    height: 10px;
    &:hover {
      background-color: white
    }
  }
}
#nav a {
  color: orange;
  #logo > .img;
}

/*輸出*/
#logo .img {
  width: 10px;
  height: 10px;
}
#logo .img:hover {
  background-color: white;
}
#nav a {
  color: orange;
  width: 10px;
  height: 10px;
}
#nav a:hover {    //注意這一步也帶出
  background-color: white;
}

<h3>變量定義範圍</h3>
先找子範圍，不分前面，找不到再找父；所以下面兩種形式都只會找子範圍內的變量；

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

<h3>导入（Importe）</h3>
和你预期的工作方式一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";

// Variables
@mySelector: banner;

// Usage
.@{mySelector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

// Variables
@images: "../img";
// 用法
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

注意：導入css或inport文件，此種變量定義不再適用；

// Variables 無法輸出
@themes: "../../src/themes";
// Usage
@import "@{themes}/tidal-wave.less";

属性

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

@fnord:  "I am fnord.";
@var:    "fnord";
p{
  content: @@var;
}

可以後聲明

.lazy-eval {
  width: @var;
}
@var: @a;
@a: 9%;

同名變量遵循後蓋前，從裏到外原則

@var: 0;
.class1 {
  @var: 1;
  .class {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

/*輸出*/
.class1 {
  one: 1;
}
.class1 .class {
  three: 3;
}

<h3>Extend 擴展</h3>

nav ul {   //原樣式保持不變
  &:extend(.inline);         //與.inline生成擴展
  background: blue;
}
.inline {
  color: red;
}

/*輸出*/
nav ul {
  background: blue;
}
.inline, nav ul {
  color: red;
}

/*另一種寫法：*/

nav ul:extend(.inline){
  background: blue;
}

/*如果定義兩個空置屬性*/
.e:extend(.f) {}
.e:extend(.g) {}
==》
.e:extend(.f,.g){}

多個擴展只擴展對應的本位元素

.big-division,
.big-bag:extend(.bag),
.big-bucket:extend(.bucket) {
  background: #000;
}

/*如果.bag等存在，則輸出*/

.bag,
.big-bag {
  width: 100%;
}
.bucket,
.big-bucket {
  width: 55px;
}

.bucketone{
  tr{
    color:#cd000c;
  }
}
.some-class:extend(.bucketone tr){
}

/*輸出*/
.bucketone tr,.some-class {
  color: #cd000c;
}

如果extend是引用的屬性，則無法匹配

.a.class,.class.a,.class > .a ，*.class{
  color: blue;
}
.test:extend(.class) {} // 上面的.class都是被引用，所以這句無法匹配，(只有純寫.class{..才能匹配.})

順序不同也無法匹配

link:hover:visited {
  color: blue;
}
.selector:extend(link:visited:hover) {}

nth系也無法匹配

:nth-child(1n+3) {
  color: blue;
}
.child:extend(n+3) {}

引用不重要，以下是相同的

[title=identifier] {
  color: blue;
}
[title='identifier'] {
  color: blue;
}
[title="identifier"] {
  color: blue;
}

Extend的 all,以下replacement將會複製一份與.test同樣結構的屬性

.a.b.test, .test.c {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}
.replacement:extend(.test all) {}

/*輸出*/
.a.b.test, .test.c, .a.b.replacement, .replacement.c {
  color: orange;
}
.test:hover, .replacement:hover {
  color: green;
}

變量生產出的屬性不能被匹配到extend

@variable: .bucket;
@{variable} { // interpolated selector
  color: blue;
}
.some-class:extend(.bucket) {} // does nothing, no match is found

變量與extend也不能匹配

.bucket {
  color: blue;
}
.some-class:extend(@{variable}) {} // interpolated selector matches nothing
@variable: .bucket;

//當然，這麼寫是無任何問題的
.bucket {
  color: blue;
}
@{variable}:extend(.bucket) {}
@variable: .selector;

//輸出：
.bucket,.selector {
  color: blue;
}

@media

1、比如：print裏的@media只會匹配print裏面的

2、寫在@media內部的extend無法繼承子塊的樣式

@media screen {
  .screenClass:extend(.selector) {} // extend inside media
  @media (min-width: 1023px) {
    .selector {  // ruleset inside nested media - extend ignores it
      color: blue;
    }
  }
}

/*輸出*/
@media screen and (min-width: 1023px) {
  .selector {
    color: blue;
  }
}
很明顯：.screenClass:extend(.selector) {}不會被匹配到；

3、extend寫在@media外部可匹配到內部所有選擇器樣式

@media screen {
  .selector {
    color: blue;
  }
  @media (min-width: 1023px) {
    .selector {
      color: blue;
    }
  }
}
.topLevel:extend(.selector) {}

/*輸出*/
@media screen {
  .selector,
  .topLevel {
    color: blue;
  }
}
@media screen and (min-width: 1023px) {
  .selector,
  .topLevel {
    color: blue;
  }
}

/*定义base类*/
@def-bg:#f1f1f1;
@def-col:#464646;

.def-bg{
  background: @def-bg;
  color:@def-col;
}

//子类只改变颜色
.con-bg{
  &:extend(.def-bg);
  background: #cccccc;
}

/*输出*/
.def-bg,
.con-bg {
  background: #f1f1f1;
  color: #464646;
}
.con-bg {
  color: #cccccc;
}

<div class='def-bg con-bg'></div>

使用扩展减少CSS代码

.a(){
  width: 10px;
}
.b{
  .a;
}
.c{
  .a;
}

/*输出*/
.b {
  width: 10px;
}
.c {
  width: 10px;
}

/*使用extend*/
.a{
  width: 10px;
}
.b{
  &:extend(.a);
}
.c{
  &:extend(.a);
}

/*输出*/
.a,
.b,
.c {
  width: 10px;
}

li.list > a {
  width: 10px;
}
button.list-style {
  &:extend(li.list > a); // use the same list styles
}

li.list > a,
button.list-style {
  width: 10px;
}

Webstorm less安裝

December 2, 2013

npm install less -g

記錄安裝路徑如：C:UsersadminAppDataRoamingnpmnode_moduleslessbinlessc

File-->Settings-->Tools-->External Toools-->Add-->

Name:LESS

Program : C:\Program Files\nodejs\node.exe

Parameters : C:\Users\admin\AppData\Roaming\npm\node_modules\less\bin\lessc $FilePath$ $FileDir$\$FileNameWithoutExtension$.css

Working directory :C:\Program Files\nodejs

OK--->Apply
-->Keymap-->External Tools -->LESS -->設置快捷鍵如：Alt + B

畢

資源備忘

August 13, 2013

編輯器：
Simditor: http://simditor.tower.im/
CKEditor: http://ckeditor.com/
Summernote: http://summernote.org/#/

各種各種bug

November 3, 2012

IE下label包圖片無法觸發選框bug

<script type="text/javascript">
    var lb=document.getElementsByTagName('label');
    for (i=0;i<lb.length;i++) {
        lb[i].onclick=function () {
            var lbfor=this.getAttribute('for')?this.getAttribute('for'):this.getAttribute('HTMLfor')+'';
            document.getElementById(lbfor).click();
            document.getElementById(lbfor).focus();
        }
    }
</script>