fmujie 发布的文章

expressLove


昨天晚上吧,将很久之前自己写的一个表白页面拼合了upupoo上几个大神做的一些特效啥的整合到了一起(~手动护身障,菜鸟的狗命要紧~)放在了服务器上(~手动滑稽~)

需要的哥们点这自取哈~或者扫码进入~


exl.png


“要想生活过得去,就得头上带点绿~”

GitHub项目地址

初识Git第三章


Git文件操作

$ git add [file1 file2 ...]
$ git add .   #一次性添加全部文件包括当前目录
$ git rm      #删除
$ git mv      #文件改名(文件移动)

文件操作1.png

文件操作2.png

文件操作3.png

文件操作4.png

Git忽略管理

设置Git忽略的文件,这些文件不参与Git库的提交和管理。(例如[node_modules]文件夹)

  • gitignore

忽略管理1.png

忽略管理2.png

更新最近的提交

  • git commit -m "commit message"
  • git commit --amend
  • git commit -am "commit message" [--amend]

更新最后的修改1.png

更新最后的修改2.png

更新最后的修改3.png


初识Git第二章


查看提交履历

  $ git log
  $ git log --oneline
  $ git log -n

产看履历1.png

提交履历2.png

提交履历3.png

把握Git状态

$ git status
$ git checkout -- [file] #切换版本

git状态.png
git状态2.png

git状态3.png

git状态4.png

git状态5.png

比较修改内容

  $ git diff [--cached] #缓冲区

比较修改内容1.png

比较修改内容2.png


初识Git第一章


什么是Git?

Git是一套程序源代码的分布式版本管理系统,用于最初用于管理Linux核心代码的开发,后来被多个开源工程采用,现在已经成为互联网协作开发的标准的源代码管理软件。

官方网站
https://git-scm.com/
Git安装
https://git-scm.com/downloads
Git检查安装版本
$ git version
Git在线体验
https://try.github.io/

采用Git的云服务

  • GitHub
  • gitee(oschina)
  • 等等...

理解版本管理的流程

  • 代码开发流程

1.系统开发,编写代码
2.提交代码给Git本地库
3.将代码提交到Git远程库,分享给团队其他人
4.从远程库获取最新代码
5.继续修改编写代码
6.重复第二步及以后的操作
  • Git基础概念

1.本地工作文件夹
2.Git索引区(Stage)
3.Git库(Repository)
local:本地库
remote:远程库(服务器端)

Git初始设定

  • 建立一个Git库

$ git init
初始化仓库
  • 设置基础信息

$ git config -l #查看配置信息
$ git config --global user.name "" #全局设置你的用户名
$ git config --global user.email "" #全局设置你的邮箱
配置信息
  • 方便的命令

$ git config --help
Windows用户浏览器弹出

第一次提交

  • 建立文件(本地工作文件夹)

  • 追加文件(索引区)

  • 提交文件(本地库)

第一次提交.png

第一次提交2.png

第一次提交3.png

第一次提交4.png


小马视频学习归纳与整理,在此感谢小马视频ORYouTube地址


ES6 learning(入门)第二记


解构赋值

解构赋值的写法

  • 数组赋值
let [a, b, c] = [10, 20, 30];
console.log(a, b, c);

数组赋值.png

let [x, y, ...other] = [1, 2, 3, 4, 5];
console.log(x, y, other);

数组赋值2.png

  • 对象赋值
let {name, age} = {name: 'fmujie', age: 18};
console.log(name, age);

  • 函数赋值
function test() {
    return [10, 20];
}
let [num1, num2] = test();
console.log(num1, num2);

函数赋值.png

  • 函数参数名指定
function test({x=3, y=3}) {
    return x + y;
}
console.log(test());
console.log(test({x:10}));
console.log(test({y:10}));
console.log(test({x:10, y:20}));

函数参数名指定.png

数组循环(for...of)

新的数组循环方式

let list = [10, 20, 30];
Array.prototype.Len = function() {};//给数组的属性增加一个方法

for(let val of list) {//ES6 val为值 list当作数组使用 for...of仅仅取出数组的值
    console.log(val);
}
for(let val in list) {//ES5 val为下标 list当作变量使用 for...in取出所有属性(循环对象使用)
    console.log(val, list[val]);
}

数组循环.png

函数的默认值

定义函数时给出参数的默认值

  • 字符参数
function sayHello(name = "fmujie") {
    console.log(`hello ${name}`);
}
sayHello();
sayHello('billy');

字符传参.png

  • 数值计算
function add(a = 1, b = a) {
    return a + b;
}
console.log(add());
console.log(add(10));
console.log(add(10, 20));

数值传参.png

  • 必须指定参数
function required() {
    throw new Error("参数未指定");
}

function sayBye(name = required()) {
    console.log(`${ name } bye!`);
}
sayBye(fmujie);
sayBye();

指定参数.png

箭头函数

通过箭头函数简化代码

let list = [10, 20, 30];
//ES5
let newList = list.map(function(value, index) {
    return value * value;
});
console.log(newList);
//ES6
newList = list.map((value, index) => {
    return value * value;
});
console.log(newList);
newList = list.map(value => {
    return value * value;
});
console.log(newList);

箭头函数.png

map()语法

array.map(function(currentValue,index,arr), thisValue)

参数说明

参数描述
function(currentValue, index,arr)必须。函数,数组中的每个元素都会执行这个函数 函数参数: 参数描述currentValue必须。当前元素的值index可选。当前元素的索引值arr可选。当前元素属于的数组对象
thisValue可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。

可变长参数

定义参数时,可以将参数指定为可变长的数组

function sum(...args) {
    let result = 0;
    args.forEach(val => {
        result += val;
    })
    return result;
}
console.log(sum(1, 2, 3));
console.log(sum(1, 2, 3, 4, 5));

可变长参数.png

基本对象定义

JS基本对象定义

let title = "ES6从入门到放弃";
let price = -250;
let publish = "怎么也学不会出版社";

let book = {
    title, price, publish,
    toString() {
        console.log(`<<${this.title}>> is ${this.price}RMB`)
    }
}
book['lang'] = "简体中文";

console.log(book);
book.toString();

基本对象定义.png

类定义

ES6的类定义

class Player {
    constructor(name, sex) {
        this.name = name;
        this.sex = sex;
    }
    show() {
        console.log(`${this.name}的性别是${this.sex}`);
    }
    static info() {//不用实例化就能使用的方法
        console.log("这是一个球员类,您可以使用它建立自己的球员。");
    }
}
let player = new Player("库里", "男");
console.log(player.name, player.sex);
player.show();
Player.info();//只有类名才能引用到静态方法
player.info();//引用不了

类定义.png

setter/getter的定义

在类中定义setter/getter方法

class Player {
    constructor(name, sex) {
        this.name = name;
        this.sex = sex;
    }
    get age() {
        return this.age;
    }
    set age(val) {
        this.age = val;
    }
}
let player = new Player("库里", "男");
player.age = 18;
console.log(player);

gettersetter.png

类继承

ES6面向对象的编程之类继承

class Car {
    constructor(brand) {
        this.brand = brand;
    }
    show() {
        console.log(`本车品牌为${this.brand}`);
    }
}

class Lexus extends Car {
    constructor(brand, lineup) {
        super(brand);
        this.lineup = lineup;
    }
    getPrice() {
        switch(this.lineup) {
            case "RX":
                return 60;
            case "NX":
                return 40;
            default:
                throw new Error("未知车类");
        }
    }
}

let mycar = new Lexus("Lexus", "RX");
mycar.show();
console.log("价格:", mycar.getPrice(), "万");

类继承.png

ES6入门系列说明:本系列仅仅作为ES6入门教学视频的归纳总结与记录,在此感谢小马视频ORYouTube地址


召唤看板娘