当前分类 / 框架 / 总共10篇

Justified Gallery 使用中文文档

2020-05-28 · 大约 400 个字 · 预计 2 分钟读完

JavaScript · 框架

JavaScript · 框架 · JustifiedGallery · jQuery · 瀑布流

Justified Gallery 是一个方便你创建瀑布流照片的 JavaScript 库，它可以帮助你优雅的排列图片显示，使用它的网站有 500px、Flickr 和 Google.

官网地址：https://miromannino.github.io/Justified-Gallery/

如何使用

下载地址：https://github.com/miromannino/Justified-Gallery/releases

这个库使用的前提是引入 jQuery 如果你的浏览器不是旧的很离谱它都可以很好的工作。

1
2
<link rel="stylesheet" href="css/justifiedGallery.css" />
<script src="js/jquery.justifiedGallery.js"></script>

阿里开源游戏引擎 Hilo

2019-08-02 · 大约 1800 个字 · 预计 9 分钟读完

Web前端 · 框架

Web前端 · 框架 · Hilo · 游戏 · Canvas · WebGL

HelloWorld

Hilo 的库是模块化的，下载地址：https://github.com/hiloteam/Hilo/tree/dev/build

Hilo 除了提供一个独立无依赖的版本（Standalone）外，还提供AMD、CommonJS、CMD、CommonJS等多种模块范式的版本。开发者可以根据自己的习惯，下载Hilo的不同范式版本使用。

1
2
3
4
5
6
7
hilo/
└── build/
    ├── standalone/     #Standalone独立版本
    ├── amd/            #RequireJS(AMD) 版本
    ├── commonjs/       #CommonJS 版本
    ├── kissy/          #SeaJS(CMD) 版本
    └── cmd/            #Kissy 版本

我们暂不考虑其他范式版本，引入 hilo-standalone 独立版本。

1
<script type="text/javascript" src="hilo-standalone.js"></script>

最基础的 Hilo 必须包含舞台（Stage），定时器（Ticker），可是对象（View）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body onload="init();">
    <div id="game-container"></div>
    <script type="text/javascript">
        function init(){
            //初始化舞台
            var stage = new Hilo.Stage({
                renderType: 'canvas',
                container: 'game-container',
                width: 320,
                height: 480
            });

            //启动舞台定时器
            var ticker = new Hilo.Ticker(20);
            ticker.addTick(stage);
            ticker.start();

            //创建一个图片对象
            var bmp = new Hilo.Bitmap({
                image: 'fish.png',
                rect: [0, 0, 174, 126],
                x: 75,
                y: 50
            }).addTo(stage);
        }
    </script>
</body>

上面我们将一个长图（包含很多精灵的动作）显示第一帧，然后将舞台绑定到 game-container 中，实际上在里面创建了一个 canvas 对象。

Canvas 基础图形3D框架 Zdog

2019-07-30 · 大约 600 个字 · 预计 3 分钟读完

Web前端 · 框架

Web前端 · 框架 · Zdog · 3D · 图形图像 · Canvas

框架介绍

Zdog 是一个开源的基于 Canvas 和 SVG 的 3D 图形渲染引擎，官网地址：https://zzz.dog/

Zdog引擎示例

Canvas基础

Canvas就像一块画布，我们可以在这个画布上面绘制我们需要的图形。canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

1
<canvas id="testcanvas" width="500" height="500" style="border:1px solid red"></canvas>

例如在上面的 200x200 画布内绘制两个矩形：

1
2
3
4
5
6
7
var c = document.getElementById('testcanvas');
var p = c.getContext("2d");

p.fillStyle="#FF0000";
p.fillRect(0, 0, 300, 300);
p.fillStyle="rgba(0,0,255,0.5)";
p.fillRect(200,200,500,500);

使用Canvas绘制两个矩形

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

Rxjava2使用总结

2019-06-13 · 大约 800 个字 · 预计 4 分钟读完

Android · 框架

RxJava · 响应式编程 · 函数式编程

前言

Rxjava2 是 函数式编程 和 响应式编程 两种牛逼的思想结合的产物，也是在 Java 中这两种思想的一种实现。

函数响应式编程 (Functional Reactive Programming:FRP)：是一种通过一系列函数的组合调用来发射，转变，监听，响应数据流的编程范式。

在 Rxjava2 中提供了 5种 观察者模式来实现这种函数响应式编程思想。

ObservableSource/Observer

可通过 onNext 方法发送单条数据或者数据序列，通过 onComplete 发送完成通知或通过 onError 发送异常通知，不支持 背压策略。

抽象类 Observable 是接口 ObservableSource 下的一个抽象实现，我们可以通过 Observable 创建一个可观察对象发射数据流。

1
2
3
4
5
6
7
Observable<String> observable = Observable.create(new ObservableOnSubscribe<String>() {
    @Override
    public void subscribe(ObservableEmitter<String> emitter) throws Exception {
        emitter.onNext("Hello World");
        emitter.onComplete();
    }
});

调用 Observable.create 方法，创建一个可观察对象，并通过 onNext 发送一条数据 “Hello World”，然后通过 onComplete 发送完成通知。

CSS 框架 Bulma 中文文档「译」

2019-06-05 · 大约 1200 个字 · 预计 6 分钟读完

Web前端 · 框架

CSS · 框架 · Bulma · scss · 网格布局 · 响应式

前言

网页样式需要大量时间开发，最省事的方法就是使用 CSS 框架。Bootstrap 是最著名的 CSS 框架，但是今天我想推荐另一个更轻量化、更易用的框架Bulma。有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。

Get Start

我们可以使用多种方式来引入并使用bulma:

1
npm install bulma

使用CDN的方式：https://cdnjs.com/libraries/bulma

下载css样式并引入，下载地址：https://github.com/jgthms/bulma/tree/master/css

如果你要使用图标请记得引入fontawesome

1
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

引入后还需要一些HTML格式上的要求：

使用HTML5 Doctype

1
<!DOCTYPE html>

设置viewport Meta标签

1
<meta name="viewport" content="width=device-width, initial-scale=1">

Dagger2入门学习之MVP项目整合(下)

2018-02-03 · 大约 900 个字 · 预计 4 分钟读完

Android · 框架

Android · Dagger · Dagger2 · 依赖注入 · MVP

上一篇Dagger2入门学习之MVP项目整合(上)的最后我们列举了Dagger的关键注释，其中@Singleton和@Scope还没有接触，接下来我们来先看看这两个标签的使用。

@Singleton

类似于SharedPreferences对象，我们可能在整个App的生命周期中只需要一个单例，而不需要每次都通过application.getSharedPreferences(“spfile”, Context.MODE_PRIVATE)获得新的对象，那么怎么办呢，我们只需要在你需要单例的对象提供方法上加一个注解@Singleton ,类似这样：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
@Module
public class AppModule {

    private MyApplication application;

    public AppModule(MyApplication application) {
        this.application = application;
    }

    //全局单例SharedPreferences
    @Provides
    @Singleton
    SharedPreferences provideSharedPreferences() {
        return application.getSharedPreferences("spfile", Context.MODE_PRIVATE);
    }

    @Provides
    MyApplication provideApplication() {
        return application;
    }
}

只需要一个@Singleton,无论我们在多少个Activity容器中通过@Inject获取这个SharedPreferences对象的实例，该对象都是同一个对象，从而实现了全局单例的效果。

Dagger2入门学习之MVP项目整合(上)

2018-02-03 · 大约 1000 个字 · 预计 5 分钟读完

Android · 框架

Android · Dagger · Dagger2 · 依赖注入 · MVP

Dagger基础回顾

在前面一篇Dagger2基础传送门我们得出了一个结论。

若一个类（Xx）的构造函数被@inject标注，则该类编译时会产生Xx_Factory.
若一个类（Xx）的成员变量被@inject标注，则该类编译时会产生Xx_MembersInjector.
@Component标注的接口（Xx）在编译时生成DaggerXx,负责将上面两个联系起来。

下面我们通过前面提到的这个例子再来回顾一下这个结论

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/**
 * Created by 水寒 on 2017/11/16.
 */

public class Province {

    @Inject
    public City city;

    @Inject
    public Province(City city) {
        this.city = city;
    }

    public String showAddress() {
        return "四川省" + city.show();
    }
}

Dagger2会在编译过程中生成对应的依赖项，这些依赖项在Android Studio该路径下，如图所示：

Dagger依赖生成文件目录

Dagger2入门学习记录

2017-11-16 · 大约 2000 个字 · 预计 10 分钟读完

Android · 框架

Android · Dagger · Dagger2 · 依赖注入

最近在重新搭建android工程听到dagger2这个框架，然后去Github上看了一下，天啊！2w多的star，呃，是应该看一下这玩意是个什么东西了，竟然这么火。

百度了一下大概看了一下其他关于dagger的文章大概知道这玩意是干啥的了。

Dagger2是Dagger的升级版，是一个依赖注入框架，现在由Google接手维护。

我们要搞清楚这个框架怎么用必须先知道什么是依赖注入和依赖注入的好处。

什么是依赖注入

依赖注入是面向对象编程的一种设计模式，其目的是为了降低程序耦合，这个耦合就是类之间的依赖引起的。

举个例子：我们在写面向对象程序时，往往会用到组合，即在一个类中引用另一个类，从而可以调用引用的类的方法完成某些功能,就像下面这样.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
public class ClassA {
    ...
    ClassB b;
    ...
    public ClassA() {
        b = new ClassB();
    }

    public void do() {
        ...
        b.doSomething();
        ...
    }
}

这个时候就产生了依赖问题，ClassA依赖于ClassB，必须借助ClassB的方法，才能完成一些功能。这样看好像并没有什么问题，但是我们在ClassA的构造方法里面直接创建了ClassB的实例，问题就出现在这，在ClassA里直接创建ClassB实例，违背了单一职责原则，ClassB实例的创建不应由ClassA来完成；其次耦合度增加，扩展性差，如果我们想在实例化ClassB的时候传入参数，那么不得不改动ClassA的构造方法，不符合开闭原则。

Retrofit封装网络请求框架

2017-11-09 · 大约 300 个字 · 预计 1 分钟读完

Android · 框架

Retrofit · 框架 · 网络

Retrofit

A type-safe HTTP client for Android and Java 适用于Java和Android的安全的HTTP客户端

Retrofit是一个RESTful的可用于Android和Java的HTTP网络请求框架的封装，使用它可以简化我们的网络操作，提高效率和正确率。它将请求过程和底层代码封装起来只暴露我们业务中的请求和返回数据模型。

值得注意的是，Retrofit并不是完成了网络请求，而是对网络请求框架Okhttp的封装，在Retrofit 2.0开始内置了Okhttp.

开始使用Retrofit,引入依赖：

1
compile 'com.squareup.retrofit2:retrofit:2.0.2'

定义一个Service接口并定义listRepos()请求。

1
2
3
4
public interface GitHubService {
	@GET("users/{user}/repos")
	Call<List<Repo>> listRepos(@Path("user") String user);
}

这是一个Retrofit将Rest API(服务端post或get请求)转换为Java接口的例子

每一个由接口返回的Call对象都可以与远程web服务端进行同步或者异步的HTTP请求通信。例如：

1
Call<List<Repo>> repos = service.listRepos("octocat");

Service接口有了，接下来就是初始化（构造）Retrofit：

1
2
3
4
Retrofit retrofit = new Retrofit.Builder()
    .baseUrl("https://api.github.com/")
    .build();
GitHubService service = retrofit.create(GitHubService.class);

为什么选择Retrofit

AsyncTask ,Volley和Retrofit的对比

	One Discussion	Dashboard( 7 request )	25 Discussions
AsyncTask	941ms	4539ms	13957ms
Volley	560ms	2202ms	4275ms
Retrofit	312ms	889ms	1059ms

从响应式编程谈RxJava

2017-11-05 · 大约 1800 个字 · 预计 9 分钟读完

Android · 框架

Android · RxJava · 响应式 · RxAndroid

参考链接：

响应式编程

响应式编程是一种基于异步数据流概念的编程模式

响应式编程关键性概念就是事件，在某种程度上，这并不是什么新东西。事件总线(Event buses)或咱们常见的单击事件就是一个异步事件流，你可以观察这个流，也可以基于这个流做一些自定义操作（原文：side effects，副作用，本文皆翻译为自定义操作）。响应式就是基于这种想法。你能够创建所有事物的数据流，而不仅仅只是单击和悬停事件数据流。流廉价且无处不在，任何事物都可以当作一个流：变量、用户输入、属性、缓存、数据结构等等。比如，假设你的微博评论就是一个跟单击事件一样的数据流，你能够监听这个流，并做出响应。

最重要的是，有一堆的函数能够 创建（create）任何流，也能将任何流进行 组合（combine）和 过滤（filter）。这正是 函数式 的魔力所在。一个流能作为另一个流的 输入(input)，甚至多个流也可以作为其它流的输入。你能 合并（merge）两个流。你还能通过 过滤（filter）一个流得到那些你感兴趣的事件。你能将一个流中的数据 映射（map）到一个新的流中。

响应式编程流模型