代码牛

代码牛 查看完整档案

昆明编辑  |  填写毕业院校XXX  |  JavaWeb开发工程师 编辑 vidanao.com 编辑
编辑
       _     _                         
      (_)   | |                        
__   ___  __| | __ _ _ __   __ _  ___  
\ \ / / |/ _` |/ _` | '_ \ / _` |/ _ \ 
 \ V /| | (_| | (_| | | | | (_| | (_) |
  \_/ |_|\__,_|\__,_|_| |_|\__,_|\___/                                                    

我的个人主页:https://github.com/Liwengbin

个人动态

代码牛 发布了文章 · 2020-11-27

Java8新特性-函数式编程(Stream/Function/Optional/Consumer)

Java8新引入函数式编程方式,大大的提高了编码效率。本文将对涉及的对象等进行统一的学习及记录。

首先需要清楚一个概念:函数式接口;它指的是有且只有一个未实现的方法的接口,一般通过FunctionalInterface这个注解来表明某个接口是一个函数式接口。函数式接口是Java支持函数式编程的基础。

本文目录:

1 Java8函数式编程语法入门

Java8中函数式编程语法能够精简代码。
使用Consumer作为示例,它是一个函数式接口,包含一个抽象方法accept,这个方法只有输入而无输出。
现在我们要定义一个Consumer对象,传统的方式是这样定义的:

Consumer c = new Consumer() {
    @Override
    public void accept(Object o) {
        System.out.println(o);
    }
};

而在Java8中,针对函数式编程接口,可以这样定义:

Consumer c = (o) -> {
    System.out.println(o);
};

上面已说明,函数式编程接口都只有一个抽象方法,因此在采用这种写法时,编译器会将这段函数编译后当作该抽象方法的实现。
如果接口有多个抽象方法,编译器就不知道这段函数应该是实现哪个方法的了。
因此,=后面的函数体我们就可以看成是accept函数的实现。

  • 输入:->前面的部分,即被()包围的部分。此处只有一个输入参数,实际上输入是可以有多个的,如两个参数时写法:(a, b);当然也可以没有输入,此时直接就可以是()。
  • 函数体:->后面的部分,即被{}包围的部分;可以是一段代码。
  • 输出:函数式编程可以没有返回值,也可以有返回值。如果有返回值时,需要代码段的最后一句通过return的方式返回对应的值。

当函数体中只有一个语句时,可以去掉{}进一步简化:

Consumer c = (o) -> System.out.println(o);

然而这还不是最简的,由于此处只是进行打印,调用了System.out中的println静态方法对输入参数直接进行打印,因此可以简化成以下写法:

Consumer c = System.out::println;

它表示的意思就是针对输入的参数将其调用System.out中的静态方法println进行打印。
到这一步就可以感受到函数式编程的强大能力。
通过最后一段代码,我们可以简单的理解函数式编程,Consumer接口直接就可以当成一个函数了,这个函数接收一个输入参数,然后针对这个输入进行处理;当然其本质上仍旧是一个对象,但我们已经省去了诸如老方式中的对象定义过程,直接使用一段代码来给函数式接口对象赋值。
而且最为关键的是,这个函数式对象因为本质上仍旧是一个对象,因此可以做为其它方法的参数或者返回值,可以与原有的代码实现无缝集成!

下面对Java中的几个预先定义的函数式接口及其经常使用的类进行分析学习。

2 Java函数式接口

2.1 Consumer

Consumer是一个函数式编程接口; 顾名思义,Consumer的意思就是消费,即针对某个东西我们来使用它,因此它包含有一个有输入而无输出的accept接口方法;
除accept方法,它还包含有andThen这个方法;
其定义如下:

default Consumer<T> andThen(Consumer<? super T> after) {
    Objects.requireNonNull(after);
    return (T t) -> { accept(t); after.accept(t); };
}

可见这个方法就是指定在调用当前Consumer后是否还要调用其它的Consumer;
使用示例:

public static void consumerTest() {
    Consumer f = System.out::println;
    Consumer f2 = n -> System.out.println(n + "-F2");

    //执行完F后再执行F2的Accept方法
    f.andThen(f2).accept("test");

    //连续执行F的Accept方法
    f.andThen(f).andThen(f).andThen(f).accept("test1");
}

2.2 Function

Function也是一个函数式编程接口;它代表的含义是“函数”,而函数经常是有输入输出的,因此它含有一个apply方法,包含一个输入与一个输出;
除apply方法外,它还有compose与andThen及indentity三个方法,其使用见下述示例;

/**
 * Function测试
 */
public static void functionTest() {
    Function<Integer, Integer> f = s -> s++;
    Function<Integer, Integer> g = s -> s * 2;

    /**
     * 下面表示在执行F时,先执行G,并且执行F时使用G的输出当作输入。
     * 相当于以下代码:
     * Integer a = g.apply(1);
     * System.out.println(f.apply(a));
     */
    System.out.println(f.compose(g).apply(1));

    /**
     * 表示执行F的Apply后使用其返回的值当作输入再执行G的Apply;
     * 相当于以下代码
     * Integer a = f.apply(1);
     * System.out.println(g.apply(a));
     */
    System.out.println(f.andThen(g).apply(1));

    /**
     * identity方法会返回一个不进行任何处理的Function,即输出与输入值相等; 
     */
    System.out.println(Function.identity().apply("a"));
}

2.3 Predicate

Predicate为函数式接口,predicate的中文意思是“断定”,即判断的意思,判断某个东西是否满足某种条件; 因此它包含test方法,根据输入值来做逻辑判断,其结果为True或者False。
它的使用方法示例如下:

/**
 * Predicate测试
 */
private static void predicateTest() {
    Predicate<String> p = o -> o.equals("test");
    Predicate<String> g = o -> o.startsWith("t");

    /**
     * negate: 用于对原来的Predicate做取反处理;
     * 如当调用p.test("test")为True时,调用p.negate().test("test")就会是False;
     */
    Assert.assertFalse(p.negate().test("test"));

    /**
     * and: 针对同一输入值,多个Predicate均返回True时返回True,否则返回False;
     */
    Assert.assertTrue(p.and(g).test("test"));

    /**
     * or: 针对同一输入值,多个Predicate只要有一个返回True则返回True,否则返回False
     */
    Assert.assertTrue(p.or(g).test("ta"));
}

3 函数式编程接口的使用

通过Stream以及Optional两个类,可以进一步利用函数式接口来简化代码。

3.1 Stream

Stream可以对多个元素进行一系列的操作,也可以支持对某些操作进行并发处理。

3.1.1 Stream对象的创建

Stream对象的创建途径有以下几种

a. 创建空的Stream对象

Stream stream = Stream.empty();

b. 通过集合类中的stream或者parallelStream方法创建;

List<String> list = Arrays.asList("a", "b", "c", "d");
Stream listStream = list.stream();                   //获取串行的Stream对象
Stream parallelListStream = list.parallelStream();   //获取并行的Stream对象

c. 通过Stream中的of方法创建:

Stream s = Stream.of("test");
Stream s1 = Stream.of("a", "b", "c", "d");

d. 通过Stream中的iterate方法创建:
iterate方法有两个不同参数的方法:

public static<T> Stream<T> iterate(final T seed, final UnaryOperator<T> f);  
public static<T> Stream<T> iterate(T seed, Predicate<? super T> hasNext, UnaryOperator<T> next)

其中第一个方法将会返回一个无限有序值的Stream对象:它的第一个元素是seed,第二个元素是f.apply(seed); 第N个元素是f.apply(n-1个元素的值);生成无限值的方法实际上与Stream的中间方法类似,在遇到中止方法前一般是不真正的执行的。因此无限值的这个方法一般与limit等方法一起使用,来获取前多少个元素。
当然获取前多少个元素也可以使用第二个方法。
第二个方法与第一个方法生成元素的方式类似,不同的是它返回的是一个有限值的Stream;中止条件是由hasNext来断定的。

第二种方法的使用示例如下:

/**
 * 本示例表示从1开始组装一个序列,第一个是1,第二个是1+1即2,第三个是2+1即3..,直接10时中止;
 * 也可简化成以下形式:
 *        Stream.iterate(1,
 *        n -> n <= 10,
 *        n -> n+1).forEach(System.out::println);
 * 写成以下方式是为简化理解
 */
Stream.iterate(1,
        new Predicate<Integer>() {
            @Override
            public boolean test(Integer integer) {
                return integer <= 10;
            }
        },
    new UnaryOperator<Integer>() {
        @Override
        public Integer apply(Integer integer) {
            return integer+1;
        }
}).forEach(System.out::println);

e. 通过Stream中的generate方法创建
与iterate中创建无限元素的Stream类似,不过它的每个元素与前一元素无关,且生成的是一个无序的队列。也就是说每一个元素都可以随机生成。因此一般用来创建常量的Stream以及随机的Stream等。
示例如下:

/**
 * 随机生成10个Double元素的Stream并将其打印
 */
Stream.generate(new Supplier<Double>() {
    @Override
    public Double get() {
        return Math.random();
    }
}).limit(10).forEach(System.out::println);

//上述写法可以简化成以下写法:
Stream.generate(() -> Math.random()).limit(10).forEach(System.out::println);

f. 通过Stream中的concat方法连接两个Stream对象生成新的Stream对象
这个比较好理解不再赘述。

3.1.2 Stream对象的使用

Stream对象提供多个非常有用的方法,这些方法可以分成两类:
中间操作:将原始的Stream转换成另外一个Stream;如filter返回的是过滤后的Stream。
终端操作:产生的是一个结果或者其它的复合操作;如count或者forEach操作。

其清单如下所示,方法的具体说明及使用示例见后文。
所有中间操作

方法说明
sequential返回一个相等的串行的Stream对象,如果原Stream对象已经是串行就可能会返回原对象
parallel返回一个相等的并行的Stream对象,如果原Stream对象已经是并行的就会返回原对象
unordered返回一个不关心顺序的Stream对象,如果原对象已经是这类型的对象就会返回原对象
onClose返回一个相等的Steam对象,同时新的Stream对象在执行Close方法时会调用传入的Runnable对象
close关闭Stream对象
filter元素过滤:对Stream对象按指定的Predicate进行过滤,返回的Stream对象中仅包含未被过滤的元素
map元素一对一转换:使用传入的Function对象对Stream中的所有元素进行处理,返回的Stream对象中的元素为原元素处理后的结果
mapToInt元素一对一转换:将原Stream中的使用传入的IntFunction加工后返回一个IntStream对象
flatMap元素一对多转换:对原Stream中的所有元素进行操作,每个元素会有一个或者多个结果,然后将返回的所有元素组合成一个统一的Stream并返回;
distinct去重:返回一个去重后的Stream对象
sorted排序:返回排序后的Stream对象
peek使用传入的Consumer对象对所有元素进行消费后,返回一个新的包含所有原来元素的Stream对象
limit获取有限个元素组成新的Stream对象返回
skip抛弃前指定个元素后使用剩下的元素组成新的Stream返回
takeWhile如果Stream是有序的(Ordered),那么返回最长命中序列(符合传入的Predicate的最长命中序列)组成的Stream;如果是无序的,那么返回的是所有符合传入的Predicate的元素序列组成的Stream。
dropWhile与takeWhile相反,如果是有序的,返回除最长命中序列外的所有元素组成的Stream;如果是无序的,返回所有未命中的元素组成的Stream。

所有终端操作

方法说明
iterator返回Stream中所有对象的迭代器;
spliterator返回对所有对象进行的spliterator对象
forEach对所有元素进行迭代处理,无返回值
forEachOrdered按Stream的Encounter所决定的序列进行迭代处理,无返回值
toArray返回所有元素的数组
reduce使用一个初始化的值,与Stream中的元素一一做传入的二合运算后返回最终的值。每与一个元素做运算后的结果,再与下一个元素做运算。它不保证会按序列执行整个过程。
collect根据传入参数做相关汇聚计算
min返回所有元素中最小值的Optional对象;如果Stream中无任何元素,那么返回的Optional对象为Empty
max与Min相反
count所有元素个数
anyMatch只要其中有一个元素满足传入的Predicate时返回True,否则返回False
allMatch所有元素均满足传入的Predicate时返回True,否则False
noneMatch所有元素均不满足传入的Predicate时返回True,否则False
findFirst返回第一个元素的Optioanl对象;如果无元素返回的是空的Optional; 如果Stream是无序的,那么任何元素都可能被返回。
findAny返回任意一个元素的Optional对象,如果无元素返回的是空的Optioanl。
isParallel判断是否当前Stream对象是并行的

下面就几个比较常用的方法举例说明其用法:

3.1.2.1 filter

用于对Stream中的元素进行过滤,返回一个过滤后的Stream
其方法定义如下:

Stream<T> filter(Predicate<? super T> predicate);

使用示例:

Stream<String> s = Stream.of("test", "t1", "t2", "teeeee", "aaaa");
//查找所有包含t的元素并进行打印
s.filter(n -> n.contains("t")).forEach(System.out::println);

3.1.2.2 map

元素一对一转换。
它接收一个Funcation参数,用其对Stream中的所有元素进行处理,返回的Stream对象中的元素为Function对原元素处理后的结果
其方法定义如下:

<R> Stream<R> map(Function<? super T, ? extends R> mapper);

示例,假设我们要将一个String类型的Stream对象中的每个元素添加相同的后缀.txt,如a变成a.txt,其写法如下:

Stream<String> s = Stream.of("test", "t1", "t2", "teeeee", "aaaa");
s.map(n -> n.concat(".txt")).forEach(System.out::println);

3.1.2.3 flatMap

元素一对多转换:对原Stream中的所有元素使用传入的Function进行处理,每个元素经过处理后生成一个多个元素的Stream对象,然后将返回的所有Stream对象中的所有元素组合成一个统一的Stream并返回;
方法定义如下:

<R> Stream<R> flatMap(Function<? super T, ? extends Stream<? extends R>> mapper);

示例,假设要对一个String类型的Stream进行处理,将每一个元素的拆分成单个字母,并打印:

Stream<String> s = Stream.of("test", "t1", "t2", "teeeee", "aaaa");
s.flatMap(n -> Stream.of(n.split(""))).forEach(System.out::println);

3.1.2.4 takeWhile

方法定义如下:

default Stream<T> takeWhile(Predicate<? super T> predicate)

如果Stream是有序的(Ordered),那么返回最长命中序列(符合传入的Predicate的最长命中序列)组成的Stream;如果是无序的,那么返回的是所有符合传入的Predicate的元素序列组成的Stream。
与Filter有点类似,不同的地方就在当Stream是有序时,返回的只是最长命中序列。
如以下示例,通过takeWhile查找”test”, “t1”, “t2”, “teeeee”, “aaaa”, “taaa”这几个元素中包含t的最长命中序列:

Stream<String> s = Stream.of("test", "t1", "t2", "teeeee", "aaaa", "taaa");
//以下结果将打印: "test", "t1", "t2", "teeeee",最后的那个taaa不会进行打印 
s.takeWhile(n -> n.contains("t")).forEach(System.out::println);

3.1.2.5 dropWhile

与takeWhile相反,如果是有序的,返回除最长命中序列外的所有元素组成的Stream;如果是无序的,返回所有未命中的元素组成的Stream;其定义如下:

default Stream<T> dropWhile(Predicate<? super T> predicate)

如以下示例,通过dropWhile删除”test”, “t1”, “t2”, “teeeee”, “aaaa”, “taaa”这几个元素中包含t的最长命中序列:

Stream<String> s = Stream.of("test", "t1", "t2", "teeeee", "aaaa", "taaa");
//以下结果将打印:"aaaa", "taaa" 
s.dropWhile(n -> n.contains("t")).forEach(System.out::println);

3.1.2.6 reduce与collect

关于reduce与collect由于功能较为复杂,在后续将进行单独分析与学习,此处暂不涉及。

3.2 Optional

用于简化Java中对空值的判断处理,以防止出现各种空指针异常。
Optional实际上是对一个变量进行封装,它包含有一个属性value,实际上就是这个变量的值。

3.2.1 Optional对象创建

它的构造函数都是private类型的,因此要初始化一个Optional的对象无法通过其构造函数进行创建。它提供了一系列的静态方法用于构建Optional对象:

3.2.1.1 empty

用于创建一个空的Optional对象;其value属性为Null。
如:

Optional o = Optional.empty();

3.2.1.2 of

根据传入的值构建一个Optional对象;
传入的值必须是非空值,否则如果传入的值为空值,则会抛出空指针异常。
使用:

o = Optional.of("test");

3.2.1.3 ofNullable

根据传入值构建一个Optional对象
传入的值可以是空值,如果传入的值是空值,则与empty返回的结果是一样的。

3.2.2 方法

Optional包含以下方法:

方法名说明
get获取Value的值,如果Value值是空值,则会抛出NoSuchElementException异常;因此返回的Value值无需再做空值判断,只要没有抛出异常,都会是非空值。
isPresentValue是否为空值的判断;
ifPresent当Value不为空时,执行传入的Consumer;
ifPresentOrElseValue不为空时,执行传入的Consumer;否则执行传入的Runnable对象;
filter当Value为空或者传入的Predicate对象调用test(value)返回False时,返回Empty对象;否则返回当前的Optional对象
map一对一转换:当Value为空时返回Empty对象,否则返回传入的Function执行apply(value)后的结果组装的Optional对象;
flatMap一对多转换:当Value为空时返回Empty对象,否则传入的Function执行apply(value)后返回的结果(其返回结果直接是Optional对象)
or如果Value不为空,则返回当前的Optional对象;否则,返回传入的Supplier生成的Optional对象;
stream如果Value为空,返回Stream对象的Empty值;否则返回Stream.of(value)的Stream对象;
orElseValue不为空则返回Value,否则返回传入的值;
orElseGetValue不为空则返回Value,否则返回传入的Supplier生成的值;
orElseThrowValue不为空则返回Value,否则抛出Supplier中生成的异常对象;

3.2.3 使用场景

常用的使用场景如下:

3.2.3.1 判断结果不为空后使用

如某个函数可能会返回空值,以往的做法:

String s = test();
if (null != s) {
    System.out.println(s);
}

现在的写法就可以是:

Optional<String> s = Optional.ofNullable(test());
s.ifPresent(System.out::println);

乍一看代码复杂度上差不多甚至是略有提升;那为什么要这么做呢?
一般情况下,我们在使用某一个函数返回值时,要做的第一步就是去分析这个函数是否会返回空值;如果没有进行分析或者分析的结果出现偏差,导致函数会抛出空值而没有做检测,那么就会相应的抛出空指针异常!
而有了Optional后,在我们不确定时就可以不用去做这个检测了,所有的检测Optional对象都帮忙我们完成,我们要做的就是按上述方式去处理。

3.2.3.2 变量为空时提供默认值

如要判断某个变量为空时使用提供的值,然后再针对这个变量做某种运算;
以往做法:

if (null == s) {
    s = "test";
}
System.out.println(s);

现在的做法:

Optional<String> o = Optional.ofNullable(s);
System.out.println(o.orElse("test"));

3.2.3.3 变量为空时抛出异常,否则使用

以往写法:

if (null == s) {
    throw new Exception("test");
}
System.out.println(s);

现在写法:

Optional<String> o = Optional.ofNullable(s);
System.out.println(o.orElseThrow(()->new Exception("test")));
查看原文

赞 0 收藏 0 评论 0

代码牛 发布了文章 · 2020-11-25

IntelliJ IDEA 常用快捷键

说IDEA对新手来说难,可能其中一个原因就是快捷键组合多而且复杂但是它也很全,基本所有功能都可以通过快捷键来完成,可以这么说,如果你掌握了所有IDEA的快捷键使用,那么你完全可以丢掉鼠标,而且不影响开发效率。

💡一、Ctrl 快捷键

Ctrl + F    在当前文件进行文本查找 (必备)
Ctrl + R    在当前文件进行文本替换 (必备)
Ctrl + Z    撤销 (必备)
Ctrl + Y    删除光标所在行 或 删除选中的行 (必备)
Ctrl + X    剪切光标所在行 或 剪切选择内容
Ctrl + C    复制光标所在行 或 复制选择内容
Ctrl + D    复制光标所在行 或 复制选择内容,并把复制内容插入光标位置下面 (必备)
Ctrl + W    递进式选择代码块。可选中光标所在的单词或段落,连续按会在原有选中的基础上再扩展选中范围(必备)
Ctrl + E    显示最近打开的文件记录列表 (必备)
Ctrl + N    根据输入的 名/类名 查找类文件 (必备)
Ctrl + G    在当前文件跳转到指定行处
Ctrl + J    插入自定义动态代码模板 (必备)
Ctrl + P    方法参数提示显示 (必备)
Ctrl + Q    光标所在的变量 / 类名 / 方法名等上面(也可以在提示补充的时候按),显示文档内容
Ctrl + U    前往当前光标所在的方法的父类的方法 / 接口定义 (必备)
Ctrl + B    进入光标所在的方法/变量的接口或是定义处,等效于 Ctrl + 左键单击 (必备)
Ctrl + K    版本控制提交项目,需要此项目有加入到版本控制才可用
Ctrl + T    版本控制更新项目,需要此项目有加入到版本控制才可用
Ctrl + H    显示当前类的层次结构
Ctrl + O    选择可重写的方法
Ctrl + I    选择可继承的方法
Ctrl + +    展开代码
Ctrl + -    折叠代码
Ctrl + /    释光标所在行代码,会根据当前不同文件类型使用不同的注释符号 (必备)
Ctrl + [    移动光标到当前所在代码的花括号开始位置
Ctrl + ]    移动光标到当前所在代码的花括号结束位置
Ctrl + F1   在光标所在的错误代码处显示错误信息 (必备)
Ctrl + F3   调转到所选中的词的下一个引用位置 (必备)
Ctrl + F4   关闭当前编辑文件
Ctrl + F8   在 Debug 模式下,设置光标当前行为断点,如果当前已经是断点则去掉断点
Ctrl + F9   执行 Make Project 操作
Ctrl + F11  选中文件 / 文件夹,使用助记符设定 / 取消书签 (必备)
Ctrl + F12  弹出当前文件结构层,可以在弹出的层上直接输入,进行筛选
Ctrl + Tab  编辑窗口切换,如果在切换的过程又加按上 delete,则是关闭对应选中的窗口
Ctrl + End  跳到文件尾
Ctrl + Home 跳到文件头
Ctrl + Space       基础代码补全,默认在 Windows 系统上被输入法占用,需要进行修改,建议修改为 Ctrl +逗号 (必备)
Ctrl + Delete      删除光标后面的单词或是中文句 (必备)
Ctrl +BackSpace    删除光标前面的单词或是中文句 (必备)
Ctrl +1,2,3...9    定位到对应数值的书签位置 (必备)
Ctrl + 左键单击     在打开的文件标题上,弹出该文件路径 (必备)
Ctrl + 光标定位按   Ctrl 不要松开,会显示光标所在的类信息摘要
Ctrl + 左方向键     光标跳转到当前单词 / 中文句的左侧开头位置 (必备)
Ctrl + 右方向键     光标跳转到当前单词 / 中文句的右侧开头位置 (必备)
Ctrl + 前方向键     等效于鼠标滚轮向前效果 (必备)
Ctrl + 后方向键     等效于鼠标滚轮向后效果 (必备)

💡二、Alt 快捷键

Alt + `   显示版本控制常用操作菜单弹出层 (必备)
Alt + Q   弹出一个提示,显示当前类的声明 / 上下文信息
Alt + F1  显示当前文件选择目标弹出层,弹出层中有很多目标可以进行选择 (必备)
Alt + F2  对于前面页面,显示各类浏览器打开目标选择弹出层
Alt + F3  选中文本,逐个往下查找相同文本,并高亮显示
Alt + F7  查找光标所在的方法 / 变量 / 类被调用的地方
Alt + F8  在 Debug 的状态下,选中对象,弹出可输入计算表达式调试框,查看该输入内容的调试结果
Alt + Home   定位 / 显示到当前文件的 Navigation Bar
Alt + Enter  IntelliJ IDEA 根据光标所在问题,提供快速修复选择,光标放在的位置不同提示的结果也不同 (必备)
Alt + Insert 代码自动生成,如生成对象的 set / get 方法,构造函数,toString() 等 (必备)
Alt + 左方向键     切换当前已打开的窗口中的子视图,比如 Debug 窗口中有 Output、Debugger 等子视图,用此快捷键就可以在子视图中切换 (必备)
Alt + 右方向键     按切换当前已打开的窗口中的子视图,比如 Debug 窗口中有 Output、Debugger 等子视图,用此快捷键就可以在子视图中切换 (必备)
Alt + 前方向键     当前光标跳转到当前文件的前一个方法名位置 (必备)
Alt + 后方向键     当前光标跳转到当前文件的后一个方法名位置 (必备)
Alt +1,2,3...9    显示对应数值的选项卡,其中 1 是 Project 用得最多 (必备)

💡三、Shift 快捷键

Shift + F1   如果有外部文档可以连接外部文档
Shift + F2   跳转到上一个高亮错误 或 警告位置
Shift + F3   在查找模式下,查找匹配上一个
Shift + F4   对当前打开的文件,使用新 Windows 窗口打开,旧窗口保留
Shift + F6   对文件 / 文件夹 重命名
Shift + F7   在 Debug 模式下,智能步入。断点所在行上有多个方法调用,会弹出进入哪个方法
Shift + F8   在 Debug 模式下,跳出,表现出来的效果跟 F9 一样
Shift + F9   等效于点击工具栏的 Debug 按钮
Shift + F10  等效于点击工具栏的 Run 按钮
Shift + F11  弹出书签显示层 (必备)
Shift + Tab    取消缩进 (必备)
Shift + ESC    隐藏当前 或 最后一个激活的工具窗口
Shift + End    选中光标到当前行尾位置
Shift + Home   选中光标到当前行头位置
Shift + Enter    开始新一行。光标所在行下空出一行,光标定位到新行位置 (必备)
Shift + 左键单击      在打开的文件名上按此快捷键,可以关闭当前打开文件 (必备)
Shift + 滚轮前后滚动   当前文件的横向滚动轴滚动 (必备)

💡四、Ctrl + Alt 快捷键

Ctrl + Alt + L   格式化代码,可以对当前文件和整个包目录使用 (必备)
Ctrl + Alt + O   优化导入的类,可以对当前文件和整个包目录使用 (必备)
Ctrl + Alt + I   光标所在行 或 选中部分进行自动代码缩进,有点类似格式化
Ctrl + Alt + T   对选中的代码弹出环绕选项弹出层 (必备)
Ctrl + Alt + J   弹出模板选择窗口,将选定的代码加入动态模板中
Ctrl + Alt + H   调用层次
Ctrl + Alt + B   在某个调用的方法名上使用会跳到具体的实现处,可以跳过接口
Ctrl + Alt + V   快速引进变量
Ctrl + Alt + Y   同步、刷新
Ctrl + Alt + S   打开 IntelliJ IDEA 系统设置 (必备)
Ctrl + Alt + F7  显示使用的地方。寻找被该类或是变量被调用的地方,用弹出框的方式找出来
Ctrl + Alt + F11 切换全屏模式
Ctrl + Alt + Enter   光标所在行上空出一行,光标定位到新行 (必备)
Ctrl + Alt + Home    弹出跟当前文件有关联的文件弹出层
Ctrl + Alt + Space   类名自动完成
Ctrl + Alt + 左方向键    退回到上一个操作的地方 (必备)
Ctrl + Alt + 右方向键    前进到上一个操作的地方 (必备)
Ctrl + Alt + 前方向键    在查找模式下,跳到上个查找的文件
Ctrl + Alt + 后方向键    在查找模式下,跳到下个查找的文件

💡五、Ctrl + Shift 快捷键

Ctrl + Shift + F  根据输入内容查找整个项目 或 指定目录内文件 (必备)
Ctrl + Shift + R  根据输入内容替换对应内容,范围为整个项目 或 指定目录内文件 (必备)
Ctrl + Shift + J  自动将下一行合并到当前行末尾 (必备)
Ctrl + Shift + Z  取消撤销 (必备)
Ctrl + Shift + W  递进式取消选择代码块。可选中光标所在的单词或段落,连续按会在原有选中的基础上再扩展取消选中范围 (必备)
Ctrl + Shift + N  通过文件名定位 / 打开文件 / 目录,打开目录需要在输入的内容后面多加一个正斜杠 (必备)
Ctrl + Shift + U  对选中的代码进行大 / 小写轮流转换 (必备)
Ctrl + Shift + T  对当前类生成单元测试类,如果已经存在的单元测试类则可以进行选择 (必备)
Ctrl + Shift + C  复制当前文件磁盘路径到剪贴板 (必备)
Ctrl + Shift + V  弹出缓存的最近拷贝的内容管理器弹出层
Ctrl + Shift + E  显示最近修改的文件列表的弹出层
Ctrl + Shift + H  显示方法层次结构
Ctrl + Shift + B  跳转到类型声明处 (必备)
Ctrl + Shift + I  快速查看光标所在的方法 或 类的定义
Ctrl + Shift + A  查找动作 / 设置
Ctrl + Shift + /  代码块注释 (必备)
Ctrl + Shift + [  选中从光标所在位置到它的顶部中括号位置 (必备)
Ctrl + Shift + ]  选中从光标所在位置到它的底部中括号位置 (必备)
Ctrl + Shift + +  展开所有代码 (必备)
Ctrl + Shift + -  折叠所有代码 (必备)
Ctrl + Shift + F7    高亮显示所有该选中文本,按 Esc 高亮消失 (必备)
Ctrl + Shift + F8    在 Debug 模式下,指定断点进入条件
Ctrl + Shift + F9    编译选中的文件 / 包 / Module
Ctrl + Shift + F12   编辑器最大化 (必备)
Ctrl + Shift + Space 智能代码提示
Ctrl + Shift + Enter 自动结束代码,行末自动添加分号 (必备)
Ctrl + Shift +Backspace  退回到上次修改的地方 (必备)
Ctrl + Shift +1,2,3...9  快速添加指定数值的书签 (必备)
Ctrl + Shift + 左键单击   把光标放在某个类变量上,按此快捷键可以直接定位到该类中 (必备)
Ctrl + Shift + 左方向键    在代码文件上,光标跳转到当前单词 / 中文句的左侧开头位置,同时选中该单词 / 中文句(必备) 
Ctrl + Shift + 右方向键    在代码文件上,光标跳转到当前单词 / 中文句的右侧开头位置,同时选中该单词 / 中文句(必备)
Ctrl + Shift + 前方向键    光标放在方法名上,将方法移动到上一个方法前面,调整方法排序 (必备)
Ctrl + Shift + 后方向键    光标放在方法名上,将方法移动到下一个方法前面,调整方法排序 (必备)

💡六、Alt + Shift 快捷键

Alt + Shift + N     选择 / 添加 task (必备)
Alt + Shift + F     显示添加到收藏夹弹出层 / 添加到收藏夹
Alt + Shift + C     查看最近操作项目的变化情况列表
Alt + Shift + I     查看项目当前文件
Alt + Shift + F7在  Debug 模式下,下一步,进入当前方法体内,如果方法体还有方法,则会进入该内嵌的方法中,依此循环进入
Alt + Shift + F9    弹出 Debug 的可选择菜单
Alt + Shift + F10   弹出 Run 的可选择菜单
Alt + Shift + 前方向键  移动光标所在行向上移动 (必备)
Alt + Shift + 后方向键  移动光标所在行向下移动 (必备)
Alt + Shift + Insert     列编辑模式切换 (必备)
Alt + Shift + 左键双击  按住不放,可以同时选择其他单词 / 中文句 (必备)
Alt + Shift + 左键单击  按住不放,同时设置多个光标 (必备)

💡七、Ctrl + Shift + Alt 快捷键

Ctrl + Shift + Alt + V   无格式黏贴 (必备)
Ctrl + Shift + Alt + N   前往指定的变量 / 方法
Ctrl + Shift + Alt + S   打开当前项目设置 (必备)
Ctrl + Shift + Alt + C   复制参考信息

💡八、其他快捷键

F2   跳转到下一个高亮错误 或 警告位置 (必备)
F3   在查找模式下,定位到下一个匹配处
F4   编辑源 (必备)
F7   在 Debug 模式下,进入下一步,如果当前行断点是一个方法,则进入当前方法体内,如果该方法体还有方法,则不会进入该内嵌的方法中
F8   在 Debug 模式下,进入下一步,如果当前行断点是一个方法,则不进入当前方法体内
F9   在 Debug 模式下,恢复程序运行,但是如果该断点下面代码还有断点则停在下一个断点上
F11  添加书签 (必备)
F12  回到前一个工具窗口 (必备)
Tab缩进 (必备)
ESC     从工具窗口进入代码文件窗口 (必备)
连按两次Shift  弹出 Search Everywhere 弹出层
查看原文

赞 2 收藏 1 评论 0

代码牛 发布了文章 · 2020-11-17

Java Word填充工具

一、简介
  • 功能需求通过填充生成.doc和.docx格式的文档,由于使用easypoi内容太多(冗余),并且生成word的图片,文本换行不易处理。我将word部分代码抽离出来并对代码进行处理逻辑调整。生成单独、简单、易用的工具包ncodev-word
二、解决的问题,使用场景
  • 图片填充问题,文本硬回车和软回车问题。在生成个人信息文档,简历文档时可以很轻松的使用工具来填充生成
三、使用说明
  • 普通文本填充:在word中使用{{}}标记要填充的参数,并在map中设置值;例如:{{name}} map.put("name","普通字段填充")
  • 文本回车换行:
  • rn:硬回车:创建新段落,回车后不缩进
  • n :软回车:不创建新段落,回车后自动缩进
  • 图片填充:标记方法同普通文本一样,map的值是cn.ncodev.model.WordImage类型;
  • 列表填充:如下格式
  • |{{t::list t.name|t.age|t.sex}}|
具体如何使用可以查看测试类:cn.ncodev.FillWordUtilTest
使用示例
/**
 * 07简历带缩进和悬挂格式
 */
@Test
public void exportWord07() {
 map.put("resume","1994.11-2014.09 云南家里蹲土地管理员(1994.11-2014.9云南XXX人民教师抬杠员,获得抬杠金奖)" + ElLabel.CARRIAGE_RETURN_ESCAPE + "2014.09-2020.07 云南昆明 代码搬运工");
    try {
 File file = new File("D:/temporary/07赴台学生备案资料登记表.docx");
        if (file.exists() || file.createNewFile()){
 OutputStream out = new FileOutputStream(file);
            XWPFDocument doc = FillWordUtil.exportWord07("/template/07赴台学生备案资料登记表.docx",map);
            doc.write(out);
            out.close();
        }
 } catch (IOException e) {
 e.printStackTrace();
    }
}

image
image

安装
<dependency>
 <groupId>cn.ncodev.fill</groupId>
 <artifactId>ncodev-word</artifactId>
 <version>1.0-SNAPSHOT</version>
</dependency>
查看原文

赞 0 收藏 0 评论 0

代码牛 提出了问题 · 2019-10-11

今天在做商品规格属性时需要写一个排列组合算法,请大佬帮忙看看

排列组合

let formats = [
    [
        {id: 1,name:'红色'},
        {id: 2,name:'白色'}
    ],
    [
        {id: 1,name:'100*200'},
        {id: 2,name:'50*200'}
    ],
    [
        {id: 1,name:'20厘米'},
        {id: 2,name:'10厘米'}
    ]
]

输出结果:

let result = [
    [
        {id: 1,name:'红色'},
        {id: 1,name:'100*200'},
        {id: 1,name:'20厘米'}
    ],
    [
        {id: 1,name:'红色'},
        {id: 2,name:'50*200'
        },
        {id: 1,name:'20厘米'}
    ],
    [
        {id: 1,name:'红色'},
        {id: 2,name:'50*200'},
        {id: 2,name:'10厘米'}
    ]
]

简化说明:

[[1,2][3,4][5,6]]
排列组合算法得到=》
[
    [1,3,5],
    [1,3,6],
    [1,4,5],
    [1,4,6],
    [2,3,5],
    [2,3,6],
    [2,4,5],
    [2,4,6]
]

关注 4 回答 4

代码牛 回答了问题 · 2019-07-31

js 去掉数组元素,数组中怎么获取这样的值?

 let arr = [
    {id: 1, name: 'something'},
    {id: 2, name: 'anything'},
    {id: 3, name: 'nothing'},
    {id: 4, name: 'anything'}
];

let getId = [1, 3];
//箭头函数
const rest = arr.filter(item=>!getId.includes(item.id))
//非箭头函数
const rest = arr.filter(function(item){
  return getId.includes(item.id)
})
console.log(rest)

关注 5 回答 4

代码牛 收藏了文章 · 2019-07-25

剖析Vue原理&实现双向绑定MVVM

本文能帮你做什么?
1、了解vue的双向数据绑定原理以及核心代码模块
2、缓解好奇心的同时了解如何实现双向绑定
为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理、数据的循环依赖等,也难免存在一些问题,欢迎大家指正。不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读vue源码的时候会更有帮助<
本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm

相信大家对mvvm双向绑定应该都不陌生了,一言不合上代码,下面先看一个本文最终实现的效果吧,和vue一样的语法,如果还不了解双向绑定,猛戳Google

<div id="mvvm-app">
    <input type="text" v-model="word">
    <p>{{word}}</p>
    <button v-on:click="sayHi">change model</button>
</div>

<script data-original="./js/observer.js"></script>
<script data-original="./js/watcher.js"></script>
<script data-original="./js/compile.js"></script>
<script data-original="./js/mvvm.js"></script>
<script>
    var vm = new MVVM({
        el: '#mvvm-app',
        data: {
            word: 'Hello World!'
        },
        methods: {
            sayHi: function() {
                this.word = 'Hi, everybody!';
            }
        }
    });
</script>

效果:
图片描述

几种实现双向绑定的做法

目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input、textare等)添加了change(input)事件,来动态修改model和 view,并没有多高深。所以无需太过介怀是实现的单向或双向绑定。

实现数据绑定的做法有大致如下几种:

发布者-订阅者模式(backbone.js)

脏值检查(angular.js)

数据劫持(vue.js)

发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听,更新数据方式通常做法是 vm.set('property', value),这里有篇文章讲的比较详细,有兴趣可点这里

这种方式现在毕竟太low了,我们更希望通过 vm.property = value 这种方式更新数据,同时自动更新视图,于是有了下面两种方式

脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,最简单的方式就是通过 setInterval() 定时轮询检测数据变动,当然Google不会这么low,angular只有在指定的事件触发时进入脏值检测,大致如下:

  • DOM事件,譬如用户输入文本,点击按钮等。( ng-click )
  • XHR响应事件 ( $http )
  • 浏览器Location变更事件 ( $location )
  • Timer事件( $timeout , $interval )
  • 执行 $digest() 或 $apply()

数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的settergetter,在数据变动时发布消息给订阅者,触发相应的监听回调。

思路整理

已经了解到vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最重要、最基础的内容之一,如果不熟悉defineProperty,猛戳这里
整理了一下,要实现mvvm的双向绑定,就必须要实现以下几点:
1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
4、mvvm入口函数,整合以上三者

上述流程如图所示:
图片描述

1、实现Observer

ok, 思路已经整理完毕,也已经比较明确相关逻辑和模块功能了,let's do it
我们知道可以利用Obeject.defineProperty()来监听属性变动
那么将需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 settergetter
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。。相关代码可以是这样:

var data = {name: 'kindeng'};
observe(data);
data.name = 'dmq'; // 哈哈哈,监听到值变化了 kindeng --> dmq

function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    // 取出所有属性遍历
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });
};

function defineReactive(data, key, val) {
    observe(val); // 监听子属性
    Object.defineProperty(data, key, {
        enumerable: true, // 可枚举
        configurable: false, // 不能再define
        get: function() {
            return val;
        },
        set: function(newVal) {
            console.log('哈哈哈,监听到值变化了 ', val, ' --> ', newVal);
            val = newVal;
        }
    });
}

这样我们已经可以监听每个数据的变化了,那么监听到变化之后就是怎么通知订阅者了,所以接下来我们需要实现一个消息订阅器,很简单,维护一个数组,用来收集订阅者,数据变动触发notify,再调用订阅者的update方法,代码改善之后是这样:

// ... 省略
function defineReactive(data, key, val) {
    var dep = new Dep();
    observe(val); // 监听子属性

    Object.defineProperty(data, key, {
        // ... 省略
        set: function(newVal) {
            if (val === newVal) return;
            console.log('哈哈哈,监听到值变化了 ', val, ' --> ', newVal);
            val = newVal;
            dep.notify(); // 通知所有订阅者
        }
    });
}

function Dep() {
    this.subs = [];
}
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};

那么问题来了,谁是订阅者?怎么往订阅器添加订阅者?
没错,上面的思路整理中我们已经明确订阅者应该是Watcher, 而且var dep = new Dep();是在 defineReactive方法内部定义的,所以想通过dep添加订阅者,就必须要在闭包内操作,所以我们可以在 getter里面动手脚:

// Observer.js
// ...省略
Object.defineProperty(data, key, {
    get: function() {
        // 由于需要在闭包内添加watcher,所以通过Dep定义一个全局target属性,暂存watcher, 添加完移除
        Dep.target && dep.addSub(Dep.target);
        return val;
    }
    // ... 省略
});

// Watcher.js
Watcher.prototype = {
    get: function(key) {
        Dep.target = this;
        this.value = data[key];    // 这里会触发属性的getter,从而添加订阅者
        Dep.target = null;
    }
}

这里已经实现了一个Observer了,已经具备了监听数据和数据变化通知订阅者的功能,完整代码。那么接下来就是实现Compile了

2、实现Compile

compile主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图,如图所示:
图片描述

因为遍历解析的过程有多次操作dom节点,为提高性能和效率,会先将跟节点el转换成文档碎片fragment进行解析编译操作,解析完成,再将fragment添加回原来的真实dom节点中

function Compile(el) {
    this.$el = this.isElementNode(el) ? el : document.querySelector(el);
    if (this.$el) {
        this.$fragment = this.node2Fragment(this.$el);
        this.init();
        this.$el.appendChild(this.$fragment);
    }
}
Compile.prototype = {
    init: function() { this.compileElement(this.$fragment); },
    node2Fragment: function(el) {
        var fragment = document.createDocumentFragment(), child;
        // 将原生节点拷贝到fragment
        while (child = el.firstChild) {
            fragment.appendChild(child);
        }
        return fragment;
    }
};

compileElement方法将遍历所有节点及其子节点,进行扫描解析编译,调用对应的指令渲染函数进行数据渲染,并调用对应的指令更新函数进行绑定,详看代码及注释说明:

Compile.prototype = {
    // ... 省略
    compileElement: function(el) {
        var childNodes = el.childNodes, me = this;
        [].slice.call(childNodes).forEach(function(node) {
            var text = node.textContent;
            var reg = /\{\{(.*)\}\}/;    // 表达式文本
            // 按元素节点方式编译
            if (me.isElementNode(node)) {
                me.compile(node);
            } else if (me.isTextNode(node) && reg.test(text)) {
                me.compileText(node, RegExp.$1);
            }
            // 遍历编译子节点
            if (node.childNodes && node.childNodes.length) {
                me.compileElement(node);
            }
        });
    },

    compile: function(node) {
        var nodeAttrs = node.attributes, me = this;
        [].slice.call(nodeAttrs).forEach(function(attr) {
            // 规定:指令以 v-xxx 命名
            // 如 <span v-text="content"></span> 中指令为 v-text
            var attrName = attr.name;    // v-text
            if (me.isDirective(attrName)) {
                var exp = attr.value; // content
                var dir = attrName.substring(2);    // text
                if (me.isEventDirective(dir)) {
                    // 事件指令, 如 v-on:click
                    compileUtil.eventHandler(node, me.$vm, exp, dir);
                } else {
                    // 普通指令
                    compileUtil[dir] && compileUtil[dir](node, me.$vm, exp);
                }
            }
        });
    }
};

// 指令处理集合
var compileUtil = {
    text: function(node, vm, exp) {
        this.bind(node, vm, exp, 'text');
    },
    // ...省略
    bind: function(node, vm, exp, dir) {
        var updaterFn = updater[dir + 'Updater'];
        // 第一次初始化视图
        updaterFn && updaterFn(node, vm[exp]);
        // 实例化订阅者,此操作会在对应的属性消息订阅器中添加了该订阅者watcher
        new Watcher(vm, exp, function(value, oldValue) {
            // 一旦属性值有变化,会收到通知执行此更新函数,更新视图
            updaterFn && updaterFn(node, value, oldValue);
        });
    }
};

// 更新函数
var updater = {
    textUpdater: function(node, value) {
        node.textContent = typeof value == 'undefined' ? '' : value;
    }
    // ...省略
};

这里通过递归遍历保证了每个节点及子节点都会解析编译到,包括了{{}}表达式声明的文本节点。指令的声明规定是通过特定前缀的节点属性来标记,如<span v-text="content" other-attrv-text便是指令,而other-attr不是指令,只是普通的属性。
监听数据、绑定更新函数的处理是在compileUtil.bind()这个方法中,通过new Watcher()添加回调来接收数据变化的通知

至此,一个简单的Compile就完成了,完整代码。接下来要看看Watcher这个订阅者的具体实现了

3、实现Watcher

Watcher订阅者作为Observer和Compile之间通信的桥梁,主要做的事情是:
1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
如果有点乱,可以回顾下前面的思路整理

function Watcher(vm, exp, cb) {
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    // 此处为了触发属性的getter,从而在dep添加自己,结合Observer更易理解
    this.value = this.get(); 
}
Watcher.prototype = {
    update: function() {
        this.run();    // 属性值变化收到通知
    },
    run: function() {
        var value = this.get(); // 取到最新值
        var oldVal = this.value;
        if (value !== oldVal) {
            this.value = value;
            this.cb.call(this.vm, value, oldVal); // 执行Compile中绑定的回调,更新视图
        }
    },
    get: function() {
        Dep.target = this;    // 将当前订阅者指向自己
        var value = this.vm[exp];    // 触发getter,添加自己到属性订阅器中
        Dep.target = null;    // 添加完毕,重置
        return value;
    }
};
// 这里再次列出Observer和Dep,方便理解
Object.defineProperty(data, key, {
    get: function() {
        // 由于需要在闭包内添加watcher,所以可以在Dep定义一个全局target属性,暂存watcher, 添加完移除
        Dep.target && dep.addDep(Dep.target);
        return val;
    }
    // ... 省略
});
Dep.prototype = {
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update(); // 调用订阅者的update方法,通知变化
        });
    }
};

实例化Watcher的时候,调用get()方法,通过Dep.target = watcherInstance标记订阅者是当前watcher实例,强行触发属性定义的getter方法,getter方法执行的时候,就会在属性的订阅器dep添加当前watcher实例,从而在属性值有变化的时候,watcherInstance就能收到更新通知。

ok, Watcher也已经实现了,完整代码
基本上vue中数据绑定相关比较核心的几个模块也是这几个,猛戳这里 , 在src 目录可找到vue源码。

最后来讲讲MVVM入口文件的相关逻辑和实现吧,相对就比较简单了~

4、实现MVVM

MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。

一个简单的MVVM构造器是这样子:

function MVVM(options) {
    this.$options = options;
    var data = this._data = this.$options.data;
    observe(data, this);
    this.$compile = new Compile(options.el || document.body, this)
}

但是这里有个问题,从代码中可看出监听的数据对象是options.data,每次需要更新视图,则必须通过var vm = new MVVM({data:{name: 'kindeng'}}); vm._data.name = 'dmq'; 这样的方式来改变数据。

显然不符合我们一开始的期望,我们所期望的调用方式应该是这样的:
var vm = new MVVM({data: {name: 'kindeng'}}); vm.name = 'dmq';

所以这里需要给MVVM实例添加一个属性代理的方法,使访问vm的属性代理为访问vm._data的属性,改造后的代码如下:

function MVVM(options) {
    this.$options = options;
    var data = this._data = this.$options.data, me = this;
    // 属性代理,实现 vm.xxx -> vm._data.xxx
    Object.keys(data).forEach(function(key) {
        me._proxy(key);
    });
    observe(data, this);
    this.$compile = new Compile(options.el || document.body, this)
}

MVVM.prototype = {
    _proxy: function(key) {
        var me = this;
        Object.defineProperty(me, key, {
            configurable: false,
            enumerable: true,
            get: function proxyGetter() {
                return me._data[key];
            },
            set: function proxySetter(newVal) {
                me._data[key] = newVal;
            }
        });
    }
};

这里主要还是利用了Object.defineProperty()这个方法来劫持了vm实例对象的属性的读写权,使读写vm实例的属性转成读写了vm._data的属性值,达到鱼目混珠的效果,哈哈

至此,全部模块和功能已经完成了,如本文开头所承诺的两点。一个简单的MVVM模块已经实现,其思想和原理大部分来自经过简化改造的vue源码,猛戳这里可以看到本文的所有相关代码。
由于本文内容偏实践,所以代码量较多,且不宜列出大篇幅代码,所以建议想深入了解的童鞋可以再次结合本文源代码来进行阅读,这样会更加容易理解和掌握。

总结

本文主要围绕“几种实现双向绑定的做法”、“实现Observer”、“实现Compile”、“实现Watcher”、“实现MVVM”这几个模块来阐述了双向绑定的原理和实现。并根据思路流程渐进梳理讲解了一些细节思路和比较关键的内容点,以及通过展示部分关键代码讲述了怎样一步步实现一个双向绑定MVVM。文中肯定会有一些不够严谨的思考和错误,欢迎大家指正,有兴趣欢迎一起探讨和改进~

最后,感谢您的阅读!

查看原文

代码牛 收藏了文章 · 2019-05-14

vue路由篇(动态路由、路由嵌套)

什么是路由?网络原理中,路由指的是根据上一接口的数据包中的IP地址,查询路由表转发到另一个接口,它决定的是一个端到端的网络路径。
web中,路由的概念也是类似,根据URL来将请求分配到指定的一个'端'。(即根据网址找到能处理这个URL的程序或模块)
使用vue.js构建项目,vue.js本身就可以通过组合组件来组成应用程序;当引入vue-router后,我们需要处理的是将组件(components)映射到路由(routes),然后在需要的地方进行使用渲染。

一、基础路由

1、创建vue项目,执行vue init webpack projectName命令,默认安装vue-router。项目创建后,在主组件App.vue中的HTML部分:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

上述代码中,<router-view/>是路由出口,路由匹配到的组件将渲染在这里。

2、文件router/index.js中:

import Vue from 'vue' // 导入vue插件
import Router from 'vue-router' // 导入vue-router
import HelloWorld from '@/components/HelloWorld' // 导入HelloWorld组件

Vue.use(Router) // 引入vue-router
export default new Router({
  routes: [
    {
      path: '/', // 匹配路由的根路径
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

以上代码比较简单,一般的导入、引用操作,其中Vue.use()具体什么作用?
个人理解:Vue.use(plugin, arguments)就是执行一个plugin函数,或执行plugin的install方法进行插件注册(如果plugin是一个函数,则执行;若是一个插件,则执行plugin的install方法...);并向plugin或其install方法传入Vue对象作为第一个参数;如果有多个参数,use的其它参数作为plugin或install的其它参数。(具体需要分析源码,在此不再过多解释)
二、动态路由
什么是动态路由?动态路由是指路由器能够自动的建立自己的路由表,并且能够根据实际情况的变化实时地进行调整。
1、在vue项目中,使用vue-router如果进行不传递参数的路由模式,则称为静态路由;如果能够传递参数,对应的路由数量是不确定的,此时的路由称为动态路由。动态路由,是以冒号为开头的(:),例子如下:

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/RouterComponents/:id',
      name: 'RouterComponents',
      component: RouterComponents
    }
  ]
})

2、路由跳转,执行方式有两大类;
第一大类:router-link模式,直接把参数写在to属性里面:

<router-link :to="{name:'RouterComponents',params:{id:110}}">跳转</router-link>

第二大类:$router.push()模式,代码如下:

methods: {
    changeFuc (val) {
      this.$router.push({
        name: 'RouterComponents',
        params: {id: val}
      })
    }
}

或者:

methods: {
    changeFuc (val) {
      this.$router.push({
        path: `/RouterComponents/${val}`,
      })
    }
}

三、嵌套路由
vue项目中,界面通常由多个嵌套的组件构成;同理,URL中的动态路由也可以按照某种结构对应嵌套的各层组件:

export default new Router({
  routes: [
    {
      path: '/', // 根路由
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/RouterComponents/:id',
      component: RouterComponents,
      children: [
        {
          path: '', // 默认路由
          name: 'ComponentA', // 当匹配上RouterComponents后,默认展示在<router-view>中
          component: ComponentA
        },
        {
          path: '/ComponentB',
          name: 'ComponentB',
          component: ComponentB
        },
      ]
    }
  ]
})
查看原文

代码牛 回答了问题 · 2019-05-14

vue 字符串拼接

使用`

const model = `<img data-original="${res.full_url}" width=100 height=100>`;

关注 3 回答 2

代码牛 收藏了文章 · 2019-05-11

VueJS中学习使用Vuex详解

在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适;简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取、进行修改,并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用:
首先要安装、使用 vuex
首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :

npm install vuex --save

然后 在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:

 
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
 
export default store;

接下来,在 main.js里面引入store,然后再全局注入一下,这样一来就可以在任何一个组件里面使用this.$store了:

import store from './store'//引入store
 
new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
})

说了上面的前奏之后,接下来就是纳入正题了,就是开篇说的state的玩法。回到store文件的index.js里面,我们先声明一个state变量,并赋值一个空对象给它,里面随便定义两个初始属性值;然后再在实例化的Vuex.Store里面传入一个空对象,并把刚声明的变量state仍里面:

 
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={//要设置的全局访问的state对象
     showFooter: true,
     changableNum:0
     //要设置的初始属性值
   };
 const store = new Vuex.Store({
       state
    });
 
export default store;

实际上做完上面的三个步骤后,你已经可以用this.$store.state.showFooter或this.$store.state.changebleNum在任何一个组件里面获取showfooter和changebleNum定义的值了,但这不是理想的获取方式;vuex官方API提供了一个getters,和vue计算属性computed一样,来实时监听state值的变化(最新状态),并把它也仍进Vuex.Store里面,具体看下面代码:

 
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={   //要设置的全局访问的state对象
     showFooter: true,
     changableNum:0
     //要设置的初始属性值
   };
const getters = {   //实时监听state值的变化(最新状态)
    isShow(state) {  //方法名随意,主要是来承载变化的showFooter的值
       return state.showFooter
    },
    getChangedNum(){  //方法名随意,主要是用来承载变化的changableNum的值
       return state.changebleNum
    }
};
const store = new Vuex.Store({
       state,
       getters
});
export default store;

光有定义的state的初始值,不改变它不是我们想要的需求,接下来要说的就是mutations了,mutattions也是一个对象,这个对象里面可以放改变state的初始值的方法,具体的用法就是给里面的方法传入参数state或额外的参数,然后利用vue的双向数据驱动进行值的改变,同样的定义好之后也把这个mutations扔进Vuex.Store里面,如下:

 
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={   //要设置的全局访问的state对象
     showFooter: true,
     changableNum:0
     //要设置的初始属性值
   };
const getters = {   //实时监听state值的变化(最新状态)
    isShow(state) {  //承载变化的showFooter的值
       return state.showFooter
    },
    getChangedNum(){  //承载变化的changebleNum的值
       return state.changableNum
    }
};
const mutations = {
    show(state) {   //自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象);
        state.showFooter = true;
    },
    hide(state) {  //同上
        state.showFooter = false;
    },
    newNum(state,sum){ //同上,这里面的参数除了state之外还传了需要增加的值sum
       state.changableNum+=sum;
    }
};
 const store = new Vuex.Store({
       state,
       getters,
       mutations
});
export default store;

这时候你完全可以用 this.$store.commit('show') 或 this.$store.commit('hide') 以及 this.$store.commit('newNum',6) 在别的组件里面进行改变showfooter和changebleNum的值了,但这不是理想的改变值的方式;因为在 Vuex 中,mutations里面的方法 都是同步事务,意思就是说:比如这里的一个this.$store.commit('newNum',sum)方法,两个组件里用执行得到的值,每次都是一样的,这样肯定不是理想的需求

好在vuex官方API还提供了一个actions,这个actions也是个对象变量,最大的作用就是里面的Action方法 可以包含任意异步操作,这里面的方法是用来异步触发mutations里面的方法,actions里面自定义的函数接收一个context参数和要变化的形参,context与store实例具有相同的方法和属性,所以它可以执行context.commit(' '),然后也不要忘了把它也扔进Vuex.Store里面:

 
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={   //要设置的全局访问的state对象
     showFooter: true,
     changableNum:0
     //要设置的初始属性值
   };
const getters = {   //实时监听state值的变化(最新状态)
    isShow(state) {  //承载变化的showFooter的值
       return state.showFooter
    },
    getChangedNum(){  //承载变化的changebleNum的值
       return state.changableNum
    }
};
const mutations = {
    show(state) {   //自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象);
        state.showFooter = true;
    },
    hide(state) {  //同上
        state.showFooter = false;
    },
    newNum(state,sum){ //同上,这里面的参数除了state之外还传了需要增加的值sum
       state.changableNum+=sum;
    }
};
 const actions = {
    hideFooter(context) {  //自定义触发mutations里函数的方法,context与store 实例具有相同方法和属性
        context.commit('hide');
    },
    showFooter(context) {  //同上注释
        context.commit('show');
    },
    getNewNum(context,num){   //同上注释,num为要变化的形参
        context.commit('newNum',num)
     }
};
  const store = new Vuex.Store({
       state,
       getters,
       mutations,
       actions
});
export default store;

而在外部组件里进行全局执行actions里面方法的时候,你只需要用执行

this.$store.dispatch('hideFooter')

或this.$store.dispatch('showFooter')

以及this.$store.dispatch('getNewNum',6) //6要变化的实参

这样就可以全局改变改变showfooter或changebleNum的值了,如下面的组件中,需求是跳转组件页面后,根据当前所在的路由页面进行隐藏或显示页面底部的tabs选项卡

<template>
  <div id="app">
    <router-view/>
    <FooterBar v-if="isShow" />
  </div>
</template>

<script>
import FooterBar from '@/components/common/FooterBar'
import config from './config/index'
export default {
  name: 'App',
  components:{
    FooterBar:FooterBar
  },
  data(){
    return {
    }
  },
  computed:{
     isShow(){
       return this.$store.getters.isShow;
     }
  },
  watch:{
      $route(to,from){ //跳转组件页面后,监听路由参数中对应的当前页面以及上一个页面
          console.log(to)
        if(to.name=='book'||to.name=='my'){ // to.name来获取当前所显示的页面,从而控制该显示或隐藏footerBar组件
           this.$store.dispatch('showFooter') // 利用派发全局state.showFooter的值来控制        }else{
           this.$store.dispatch('hideFooter')
        }
      }
  }
}
</script>
        }else{
           this.$store.dispatch('hideFooter')
        }
      }
  }
}
</script>

至此就可以做到一呼百应的全局响应状态改变了!

modules 模块化 以及 组件中引入 mapGetters、mapActions 和 mapStates的使用

因为在大多数的项目中,我们对于全局状态的管理并不仅仅一种情况的需求,有时有多方面的需求,比如写一个商城项目,你所用到的全局state可能是关于购物车这一块儿的也有可能是关于商品价格这一块儿的;像这样的情况我们就要考虑使用vuex中的 modules 模块化了,具体怎么使用modules呢?咱们继续一步一步的走:

首先,在store文件夹下面新建一个modules文件夹,然后在modules文件里面建立需要管理状态的js文件,既然要把不同部分的状态分开管理,那就要把它们给分成独立的状态文件了,如下图:
图片描述

而对应的store文件夹下面的index.js 里面的内容就直接改写成:

import Vue from 'vue';
import Vuex from 'vuex';
import footerStatus from './modules/footerStatus'
import collection from './modules/collection'
Vue.use(Vuex);

export default new Vuex.Store({
    modules:{
         footerStatus,
         collection
    }
});

相应的js,其中的 namespaced:true 表示当你需要在别的文件里面使用( mapGetters、mapActions 接下来会说 )时,里面的方法需要注明来自哪一个模块的方法:

//collection.js

const state={
    collects:[],  //初始化一个colects数组
};
const getters={
  renderCollects(state){ //承载变化的collects
    return state.collects;
  }
};
const mutations={
     pushCollects(state,items){ //如何变化collects,插入items
        state.collects.push(items)
     }
 };
const actions={
    invokePushItems(context,item){ //触发mutations里面的pushCollects ,传入数据形参item 对应到items
        context.commit('pushCollects',item);
    }
};
export default {
     namespaced:true,//用于在全局引用此文件里的方法时标识这一个的文件名
     state,
     getters,
     mutations,
     actions
}
 
//footerStatus.js
 
const state={   //要设置的全局访问的state对象
     showFooter: true,
     changableNum:0
     //要设置的初始属性值
   };
const getters = {   //实时监听state值的变化(最新状态)
    isShow(state) {  //承载变化的showFooter的值
       return state.showFooter
    },
    getChangedNum(){  //承载变化的changebleNum的值
       return state.changableNum
    }
};
const mutations = {
    show(state) {   //自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象);
        state.showFooter = true;
    },
    hide(state) {  //同上
        state.showFooter = false;
    },
    newNum(state,sum){ //同上,这里面的参数除了state之外还传了需要增加的值sum
       state.changableNum+=sum;
    }
};
 const actions = {
    hideFooter(context) {  //自定义触发mutations里函数的方法,context与store 实例具有相同方法和属性
        context.commit('hide');
    },
    showFooter(context) {  //同上注释
        context.commit('show');
    },
    getNewNum(context,num){   //同上注释,num为要变化的形参
        context.commit('newNum',num)
     }
};
export default {
    namespaced: true, //用于在全局引用此文里的方法时标识这一个的文件名
    state,
    getters,
    mutations,
    actions
}

这样一改就有了关于两个模块的state管理文件了 footerStatus.js和collection.js,现在你要运行当前的代码话,项目会报错!因为我们把上面的代码模块化分开了,引用的地方还没有改。接下来咱们一起来看看 mapState,mapGetters,mapActions的使用,首先 在需要用的 组件里面先导入 import {mapState,mapGetters,mapActions} from 'vuex';咱们先修正一下隐藏或显示页面底部的tabs选项卡(就是上面举的临时例子)的组件代码

 
<template>
  <div id="app">
    <router-view/>
    <FooterBar v-if="isShow" />
  </div>
</template>
 
<script>
import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
import FooterBar from '@/components/common/FooterBar'
import config from './config/index'
export default {
  name: 'App',
  components:{
    FooterBar:FooterBar
  },
  data(){
    return {
    }
  },
  computed:{
    ...mapState({  //这里的...是超引用,ES6的语法,意思是state里有多少属性值我可以在这里放多少属性值
         isShow:state=>state.footerStatus.showFooter //注意这些与上面的区别就是state.footerStatus,
                                                      //里面定义的showFooter是指footerStatus.js里state的showFooter
      }),
     //你也可以用下面的mapGetters来获取isShow的值,貌似下面的更简洁
    /*...mapGetters('footerStatus',{ //footerStatus指的是modules文件夹下的footerStatus.js模块
         isShow:'isShow' //第一个isShow是我自定义的只要对应template里v-if="isShow"就行,
                         //第二个isShow是对应的footerStatus.js里的getters里的isShow
      })*/
  },
  watch:{
      $route(to,from){
        if(to.name=='book'||to.name=='my'){
           this.$store.dispatch('footerStatus/showFooter') //这里改为'footerStatus/showFooter',
                                                           //意思是指footerStatus.js里actions里的showFooter方法
        }else{
           this.$store.dispatch('footerStatus/hideFooter') //同上注释
        }
      }
  }
}
</script>

现在项目代码应该就不会报错了,好,最后咱们再来看一下mapActions的用法,实际上上面的this.$store.dispatch('footerStatus/showFooter')已经算是一种执行相应模块的action里的方法了,但有时会牵扯的事件的触发及传值,那就会有下面的mapActions用法了,还记得上面的另一个模块collection.js吗?来看一下里面的actions中的方法结构:

const state={
    collects:[],  //初始化一个colects数组
};
const getters={
  renderCollects(state){ //承载变化的collects
    return state.collects;
  }
};
const mutations={
     pushCollects(state,items){ //如何变化collects,插入items
        state.collects.push(items)
     }
 };
const actions={
    invokePushItems(context,item){ //触发mutations里面的pushCollects ,传入数据形参item 对应到items
        context.commit('pushCollects',item);
    }
};

需要传值来实时变动state.collects里的数据,那肯定要在执行它的地方进行传值了,所以下面用到它的地方我们用了个@click来执行这个invokePushItems方法了,并且传入相应的对象数据item,如下:

<template>
  <div >
      <section class="joinState">
           <div class="joinStateHead">
                <span class="h3">全国改性料通讯录</span>
                <span class="joinStatus" @click="invokePushItems(item)">加入收藏列</span>
           </div>
      </section>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  components:{
     conditionFilter
  },
  name: 'bookDetail',
  data () {
    return {
      msg: '',
      item:{
         id:'01',
         productName: '苹果',
         price:'1.6元/斤'
       }
    }
  },
  mounted() {
    this.$store.dispatch('footerStatus/hideFooter')
  },
  methods:{
      ...mapActions('collection',[ //collection是指modules文件夹下的collection.js
          'invokePushItems'  //collection.js文件中的actions里的方法,在上面的@click中执行并传入实参
      ])
  }

}
</script>

这样一来,在这个组件里面操作的 collecttion.js 中的state的数据,在其他的任何的一个组件里面都会得到相应的更新变化了,获取状态的页面代码如下:

<template>
  </div>
    <div>
        <ul>
            <li v-for="(val,index) in arrList" :key="index">
                <h5>{{val.productName}}</h5>
                 <p>{{val.price}}</p>
            </li>
        </ul>
    </div>
</template>

<script>
import {mapState,mapGetters,mapActions} from 'vuex';
    export default {
        name: 'book',
        data() {
            return {
            }
        },
    computed:{
        // ...mapState({  //用mapState来获取collection.js里面的state的属性值
        //    arrList:state=>state.collection.collects
        // }),
        ...mapGetters('collection',{ //用mapGetters来获取collection.js里面的getters
            arrList:'renderCollects'
        })

    }
    }
</script>

至此,vuex中的常用的一些知识点使用算是简单的分享完了,当然了,相信这些只是一些皮毛!只能说是给予刚接触vuex的初学者一个参考与了解吧!有哪里不明白的或不对的,留言下,咱们可以一起讨论、共同学习!

查看原文

认证与成就

  • 获得 423 次点赞
  • 获得 16 枚徽章 获得 0 枚金徽章, 获得 2 枚银徽章, 获得 14 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

注册于 2016-10-17
个人主页被 3.4k 人浏览