当前标签 / 框架 / 总共7篇

阿里开源游戏引擎 Hilo

2019-08-02 · 大约 1400 个字 · 预计 7 分钟读完

HelloWorld

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

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

hilo/
└── build/
    ├── standalone/     #Standalone独立版本
    ├── amd/            #RequireJS(AMD) 版本
    ├── commonjs/       #CommonJS 版本
    ├── kissy/          #SeaJS(CMD) 版本
    └── cmd/            #Kissy 版本

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

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

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

<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 · 大约 400 个字 · 预计 2 分钟读完

Web前端 · 框架

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

框架介绍

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

Zdog引擎示例

Canvas基础

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

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

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

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 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

VueJs源码学习[2]--源码构建

2019-07-17 · 大约 700 个字 · 预计 4 分钟读完

JavaScript · Vue

JavaScript · 框架 · Vue

特别说明：本文是转载文章，但是可能会在原文基础上新增注释和修改或附加自己的理解。

本文转载自：https://ustbhuangyi.github.io/vue-analysis/

目录结构

Vue.js 的源码都在 src 目录下，其目录结构如下。

src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

compiler

compiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 ast 语法树，ast 语法树优化，代码生成等功能。

编译的工作可以在构建时做（借助 webpack、vue-loader 等辅助插件）；也可以在运行时做，使用包含构建功能的 Vue.js。显然，编译是一项耗性能的工作，所以更推荐前者——离线编译。

core

core 目录包含了 Vue.js 的核心代码，包括内置组件、全局 API 封装，Vue 实例化、观察者、虚拟 DOM、工具函数等等。

这里的代码可谓是 Vue.js 的灵魂，也是我们之后需要重点分析的地方。

VueJs源码学习[1]--Flow类型检测

2019-07-17 · 大约 400 个字 · 预计 2 分钟读完

JavaScript · Vue

JavaScript · Vue · 框架 · 源码分析 · flow · ESLint · Babel · ES2015

特别说明：本问是转载文章，但是可能会在原文基础上新增注释和修改或附加自己的理解。

本文转载自：https://ustbhuangyi.github.io/vue-analysis/

Flow 是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查，所以了解 Flow 有助于我们阅读源码。

为什么用 Flow

JavaScript 是动态类型语言，它的灵活性有目共睹，但是过于灵活的副作用是很容易就写出非常隐蔽的隐患代码，在编译期甚至看上去都不会报错，但在运行阶段就可能出现各种奇怪的 bug。类型检查是当前动态类型语言的发展趋势，所谓类型检查，就是在编译期尽早发现（由类型错误引起的）bug，又不影响代码运行（不需要运行时动态检查类型），使编写 JavaScript 具有和编写 Java 等强类型语言相近的体验。项目越复杂就越需要通过工具的手段来保证项目的维护性和增强代码的可读性。 Vue.js 在做 2.0 重构的时候，在 ES2015 的基础上，除了 ESLint 保证代码风格之外，也引入了 Flow 做静态类型检查。之所以选择 Flow，主要是因为 Babel 和 ESLint 都有对应的 Flow 插件以支持语法，可以完全沿用现有的构建配置，非常小成本的改动就可以拥有静态类型检查的能力。

CSS 框架 Bulma 中文文档（翻译）

2019-06-05 · 大约 900 个字 · 预计 4 分钟读完

Web前端 · 框架

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

前言

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

Get Start

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

npm install bulma

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

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

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

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

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

使用HTML5 Doctype
```
<!DOCTYPE html>
```

设置viewport Meta标签

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

MVP架构的Android基础框架

2017-11-10 · 大约 200 个字 · 预计 1 分钟读完

软件工程 · 架构

Android · MVP · Retrofit · RxJava · Fresco · 框架

说明

这是我开源的一个基于MVP架构的Android开发基础框架，源码开放在gitlab上。

仓库地址：https://gitlab.com/lxqxsyu/TestKotlin

框架介绍

MVP架构，Retrofit+Rxjava+Okhttp网络请求，可切换Glide和Fresco图片框架，封装基础刷新分页加载，部分功能后期会有所改进。

框架整体结构

Retrofit封装网络请求框架

2017-11-09 · 大约 200 个字 · 预计 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,引入依赖：

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

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

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

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

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

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

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

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