@黄小泽的个人博客

工作区与缓存区之间操作：正向git add <FileName>将单个文件添加至缓存区git add .将多个文件添加至缓存区逆向git reset HEAD <FileName>把放进缓存区的单个文件撤销，工作区文件不受影响git reset HEAD .把放进缓存区的多个文件撤销，工作区文件不受影响git checkout --<FileName>把本地区的单个文件撤销，并替换为缓存区版本git checkout -- . ...

在使用Create React App创建的React项目，通常会通过import引用所需的组件(如import HelloWorld from './HelloWorld')，当项目打包成生产环境代码时，通过这种方式引用的js文件都会被打包到一起。当前端项目代码量足够大时，这意味最终打包出来的index.js代码量也将会非常大，这明显不利于实现页面的秒加载。遇到这种场景，懒加载就提供了解决方案。...

js开发过程中，有可能遇到参数传输出现乱码等问题，那么怎么解决这类问题呢？那就是对参数进行Base64编码，在传输完成后，在通过解码获取原参数值。为了实现这个功能，我们需要用到Base64.js，其源码如下：Base64.js//Base64.js/************************** base64编码 ***************************/var k

本篇主要介绍clientLeft、offsetLeft、clientX、offsetX这四种元素属性的区别，首先我们要理解清楚它们的概念：clientLeft：该元素对象的左边框宽度。clientWidth：该元素对象的左内边框至右内边框的距离。offsetLeft：该元素左外边框至窗口左边界的距离。offsetWidth：该元素左外边框至右外边框的距离。我们可以参考下图所示：...

HTML5开发有时需要实现自定义事件，如预加载图片需要知道加载进度事件，本篇以图片预加载功能为例，介绍如何实现自定义事件。下面的ImgsLoader工具类，可以实现多图片预加载。 &lt;script src="ImgsLoader.js"&gt;&lt;/script&gt; 然后将图片路径放到一个数组imgs中，然后调用load（imgs）方法即可，如 var ...

说明本篇内容可以看做是一篇关于canvas的API文档，由于全文的篇幅较长，通常用于作为API文档查看，可通过目录查找。本篇也可做为想详细了解canvas所有操作的学习文章。Canvas 对象表示一个 HTML 画布元素&lt;canvas&gt;。它没有自己的行为，但是定义了一个 API 支持脚本化绘图操作。我们可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过 CanvasRe...

自由变换工具类似于PS中Ctrl+T功能，实现图片的缩放、斜切、旋转和位移。本实例已兼容不同容器的自由变换：一种是canvas，另一种是div。canvas容器格式：仅支持&lt;img&gt;标签，控制点的渲染由canvas完成。 &lt;body&gt; &lt;canvas id="stage" width="640" height="480"&gt; ..

做JavaWeb开发，难免会遇到登录系统保持登录状态的问题？比如说我登录过后关闭浏览器，下次再访问相同的网站，默认会显示已登录状态，一段时间内就不必再重新登录了；再比如站在后台接口设计的角度去考虑，用户登录后，做了一系列的用户操作接口，那么这些接口不可能都带上一个userid的字段吧，这样不仅开发麻烦，而且容易被黑客攻击。那么如何解决这些问题呢？那就是通过代理服务对客户端请求的拦截来实现，经过验证...

RequireJS实例教程

React是纯View层，但在最新的React V16版本中，按传统的纯js脚本开发已经不能适应项目的需要，配合Webpack打包，可以够更便捷地管理项目和更新插件；再者，使用ES6开发，将大大地提高团队地开发效率。本篇主要是介绍如何部署React+Webpack组合搭建，那么我们一步步来吧。一.创建目录结构创建一个web项目ReactWebpack，目录结构如图所示：app目录：...

源码：&lt;!-- 建站Demo--&gt;&lt;!DOCTYPE html&gt;&lt;meta charset="utf-8" /&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt;

Webpack 是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。一.安装可以通过npm来安装，全局安装：$ npm install -

本篇博客主要针对CSS3一个很常用的知识点进行归纳总结，那就是选择器。目的：通过选择器的使用，开发者可以快速地选取到目标元素。本篇通过以下几方面介绍选择器：通配符 直接子节点 常用伪类选择 位置选择 属性选择 状态选择 过滤选择通配符通配符包括三种：（1）通配符^，表示开头匹配。（2）通配符$，表示结尾匹配。（3）通配符*，表示包含匹配。它的用法如下：&...

本篇博客主要针对CSS3样式用法的一些知识点进行归纳总结，本篇通过以下几方面介绍样式用法：字体样式 盒子样式 背景及边框样式 变形样式 动画样式 Media Queries样式 滤镜样式 定位样式字体样式字体基础样式设置：font-family：字体格式font-size：字体大小font-weight：字体粗细text-shadow：字体阴影&lt;...

做前端开发已经有一些年头了，最近忽然有个想法，想写一些现在仍然在迭代更新而且非常实用的前端框架的文章，毕竟个人需要记忆的东西太多，一是怕自己遗忘了，其次还是想分享一下自己的一些经验，希望能帮助到一些前端开发人员，如果是非常厉害的前端大牛，可以省略这些文章。一.PixiJS简介 本次系列要介绍的前端框架是PixiJS，PixiJS是一个快速的轻量级的2D动画渲染引擎，主要使用了WebGL技术

博主曾经有过2年的AS3开发经验，发现PixiJS框架与AS3有太多相似之处，就连对象的函数和事件都大体类似。曾经有过AS3开发经验的前端朋友，对容器、精灵的概念应该都了然于胸了。一.container容器和Sprite精灵概念(1)容器表示显示对象的集合。它是作为其他对象的容器的所有显示对象的基类，即容器是用来管理多个精灵的显示对象。创建方法：var container

上篇介绍了基本显示对象PIXI.DisplayObject及该对象与Container、Sprite之间的继承关系，本篇将对Container、Sprite独有的函数与事件进行详细分析。一.容器PIXI.Container的[独有]参考函数与事件-----------------------------------------------------------------

一.交互事件概念事件交互是指显示对象PIXI.Sprite、PIXI.Container与用户交互所触发的事件。常用的交互事件主要有如点击、拖拽等。在PixiJS中所触发的事件可以分为4种类型：鼠标左键触发，鼠标右键触发，触摸屏触发，兼容鼠标和触摸屏的共同触发。二.交互事件参考1.鼠标左键触发事件：click：点击事件mousedown：鼠标按下mousemov

一.文本文本对象PIXI.Text是指创建一行或多行文字，可以使用'\n'来实现换行，文本对象PIXI.Text的继承关系是：PIXI.Text->PIXI.Sprite文本PIXI.Text的创建代码如下：var text = new PIXI.Text('This is a pixi text',{fontFamily : 'Arial', fontSize: 24, fi

pixi.js系列（7）画布副本绘制、图片平铺效果的应用

一.粒子容器粒子容器PIXI.particles.ParticleContainer是一个能容纳大量显示精灵的容器，其具有快速、高效的特点，支持容期内显示对象的位置变化、大小缩放和角度旋转；然而出于性能的考虑，同时也屏蔽了容器内显示对象如基色变化、遮罩层等特效功能。粒子容器继承于PIXI.Container。创建方法如下：new PIXI.particles.ParticleContain

逐帧动画是一种常见的动画形式（Frame By Frame），其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转

pixi引擎是将图像都绘制到同一个canvas对象中，下面是最简单的创建canvas对象的源码：var app = new PIXI.Application(800, 500, { backgroundColor: 0x1099bb});document.body.appendChild(app.view);其中，app.view就是canvas对象。通过查看canvas的API可以

在介绍骨骼动画之前，我先介绍一下DragonBones，它的中文名是龙骨，是一套由Egret团队制作的独立的骨骼动画编辑器，我们PIXI播放骨骼动画所需的图片和JSON数据都是从该编辑器生成和导出的。想了解DragonBones可以在百度上搜索“白鹭时代”或者访问网页：https://www.egret.com/。主页的“产品”栏中就有DragonBones项，如下图所示。进入Drag

AngularJS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。AngularJS现行主要区分为2个版本系列，分别是AngularJS1.x和AngularJS2，两个版本间的使用上有不少的区别，虽说AngularJS2是对AngularJS1.x的升级和精简，但在资料...

最近使用到了一种nwjs技术进行开发，实际上nwjs是基于nodejs的，它支持nodejs所有的api，主要用于跨平台轻量级桌面应用开发，运行环境包括32位和64位的Window、Linux和Mac OS。在博主看来，nwjs技术实际上就是结合web前端技术编写本地应用的一种技术。截止现在，nwjs最新的稳定版本是v0.12.3，基本上只要熟悉HTML5、JS 和CSS3的开发者们都可以轻松上手

本节主要给大家介绍一些关于nwjs的相关教程，尽管大多都是英文，若有些连接打不开，如youtube，你懂的怎么打开，是么？书本(1)NW.js in Action by Paul. B. Jensen地址：https://www.manning.com/books/nw-js-in-action（点击打开链接）(2)Windows Desktop App Creatio

本节开始，部分内容参照我们的nwjs前辈玄魂的文章，其中也会加入博主在使用nwjs开发项目过程中总结的一些实战经验。我们都是站在巨人的肩上继续努力学习，去其糟粕留其精华，好的技术就应该不断总结和传播，那么我们现在开始吧！基本程序结构

本节主要介绍Native UI API 概述和应用规范，在后续节中再详细介绍Native UI API的主要控件接口。Native UI API，是提供了在代码中访问、控制应用程序界面显示的接口。常见用途是用户通过操作应用显示界面的控件便捷地实现自己想要的服务。（一）概述这里是我们在node-webkit下创建Native UI控件的APIs。实际上，去使用我们的Native

本节主要介绍Native UI API中Window的基本使用方法。简单的说，Window就是使用nwjs开发的应用程序在桌面显示的容器（窗口）。node-webkit >= v0.3.0才支持Window API，Window是在DOM Window的基础上进行封装，它扩展了DOM Window的操作，同时可以接收各类的窗口事件。每一个window都继承 了node.js中的 EventEm

本节主要讲无边框窗口。Frameless window，是没有操作系统默认样式的边框的窗口，也就意味着最大、最小和关闭按钮也访问不到，同时默认情况下窗口不能被拖拽。但你可以使用上一节的知识对无边框窗口进行操作。无边框窗口例子：（一）设置无边框窗口只要你在package.json的window区域做如下参数设置，即可设置无边框窗口：{ "window": {

本节主要介绍Native UI API 中菜单栏的使用，菜单栏分为两类：一类是普通菜单栏，另一类是上下文菜单栏（右键弹出）。（一）例子 menuDemo menu api 测试 // Load native UI library var gui = require('nw.gui'); var win = gui.Window.get(

菜单项MenuItem在菜单里代表其中一个选项。它可以作为分割线也可以作为一个普通的选项，但它必须具备标题和图标，菜单项通常情况下会跟菜单Menu一起使用。（一）例子// Load native UI libraryvar gui = require('nw.gui');var item;// Create a separatoritem = new gui.MenuItem({

本节主要介绍Native UI API 的 App使用，APP类别的API 是针对当前正在运行的应用程序实例，即获取应用的相关信息，启动应用时的传参及应用运行过程中的底层控制等。（一）例子// Load native UI libraryvar gui = require('nw.gui');// Print argumentsconsole.log(gui.App.argv);

Clipboard是对操作系统剪贴板的一个抽象，目前只支持获取和设置纯文本内容。（一）例子// Load native UI libraryvar gui = require('nw.gui');// We can not create a clipboard, we have to receive the system clipboardvar clipboard = gui.C

托盘在不同操作系统下有不同控制的抽象。它通常存在于系统的通知区域，在苹果系统成为状态项，在GTK称为状态图标，在Window系统下称为系统托盘图标。（一）例子 var isShowWindow = true; // Load native UI library var gui = require('nw.gui'); var win = gui.Window.get(); var

本地应用一个很重要的因素就是使用本地文件对话框能力。HTML5对文件对话框提供了有限的支持，你可以使用<input type='file' /> 让用户上传文件。但是对node-webkit是远远不够的，我们扩展了input。

本节主要介绍Native UI API中一些不常用的功能，包括Shell、Handling files and arguments、Screen。（一）ShellShell主要用来处理桌面相关应用的工作。如使用默认浏览器打开一个网页地址、使用文本的方式打开一个文件、在文件资源管理器中打开文件。// Load native UI library.var gui = require('n

本节将介绍node-webkit 应用分别在Windows、Linux和Mac OS环境下如何启动。node-webkit可以通过两种方式启动：1）通过文件夹，将启动路径指向文件夹2）通过.nw文件（即ZIP压缩包），将启动路径指向.nw文件无论哪种方式启动，应用都需要包含package.json文件，当node-webkit启动时这个文件将会被解析。如果这个文件丢失，node-w

在Node.js中有三种模块类型：1）内部模块（部分Node API）2）用JavaScript写的第三方模块3）C/C++插件的第三方模块这些所有的模块类型，都在会在node-webkit中使用到。你可以在Node's wiki中找到很多这方面的资料和开源代码。如https://github.com/nodejs/node-v0.x-archive/wiki/Module