Dragon_GL-CSDN博客

原创 AceJump：快速定位光标位置，有了他你可以丢弃鼠标了

插件官网下载地址：https://plugins.jetbrains.com/plugin/7086-acejump该插件兼容以下编辑器：IntelliJ IDEA、 PhpStorm、 WebStorm PyCharm、 RubyMine、 AppCode、 CLion、 Gogland、 DataGrip、 Rider、 Android StudioAceJump允许您快速将光

2017-06-15 23:30:59 14774 3

原创 UML之类图

在UML类图中，常见的有以下几种关系: 泛化（Generalization）实现（Realization）关联（Association) 聚合（Aggregation）组合(Composition) 依赖(Dependency)1. 泛化（Generalization）【泛化关系】：是一种继承关系，表示一般与特殊的关系，它指定了子类如何特化父类的

2017-06-03 19:33:12 496

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。一、介绍FileReader接口的方法FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。FileReader接口事件FileReade

2017-05-29 22:53:40 1708

原创使用window.open()打开新的窗口

本实例要在窗口每次被加载的时候弹出一个话框。本实例主要应用 JavaScript 的 window 对象。window 对象的常用方法：alert() 弹出一个警告对话框confirm() 在确认对话框中显示指定的字符串prompt() 弹出一个提示对话框close() 关闭被引用的窗口focus() 将被引用的窗口放在所有打开窗口的前面open() 打开新浏览器窗口并且显示由URL或名

2017-04-20 20:19:08 4381 1

原创图片赖加载

什么是图片赖加载？一般图片懒加载又称图片延时加载、惰性加载。也就是在用户需要使用图片的时候才加载，这样做的好处有：可以减少请求、节省带宽、提高页面加载速度、减少服务器压力, 提高用户体验，防止一次性加载大量数据，而是根据用户需要进行资源的请求。图片赖加载其实在各大论坛、电商网站、图片网站被使用，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会

2017-04-17 21:31:56 924

原创 lambda-view: JS源码阅读工具

Github项目地址：https://github.com/Jianru-Lin/lambda-viewlambda-view能做什么？下面看一下我从lambda-view项目地址处截的一张图。对，标题就是lambda-view: A New Tool for Reading JavaScript Code in 2017，即是一个可以帮助我们更好的阅读JS源文件的这么一个工具。下面，让我们看一下当

2017-03-29 23:09:53 2631

转载多用git少缴税

一、为什么要了解GitGit是一套版本管理系统。看到“Git版本管理”，一大部分盆友已经转身想走，在你握着门把手准备开门走人时，请最后听我说完最后一句：人人都需要版本管理，git可以帮你少交停电/蓝屏/死机税，提高产出效率，不来一发吗？试过半夜写汇报ppt吗？’汇报ppt’→’汇报ppt1’→’汇报ppt11’→’汇报ppt2015-03-17’→’汇报ppt2015-03-17新’→’汇报ppt2

2017-03-28 23:26:40 248

原创 Ubuntu16.04　安装jre和jdk

JRE和JDKJRE(Java Runtime Environment)它是你运行一个基于Java语言应用程序的所正常需要的环境。如果你不是一个程序员的话，这些足够你的需要.JDK代表Java开发工具包，如果你想做一些有关Java的开发(阅读程序), 这正是你所需要的.检查是否已经安装Java在终端输入一下命令java -version如果，输出的是像下面这样的信息，表示你的电脑上还没有安装j

2017-03-28 22:29:48 4118

转载 AutocJS – 为你的文章自动创建目录导航菜单

灵感AnchorJS 是 AutocJS 的创作灵感。既然 AnchorJS 可创建标题的链接，为什么不直接给文章生成一个目录（Table of Contents）导航呢？于是就有了 AutocJS。What is AutocJS?AutocJS 是一个专门用来生成文章目录（Table of Contents）导航的工具。AutocJS 会查找文章指定区域中的所有 h1~h6 的标签，并自动分析文

2017-03-09 19:13:44 2317

原创数据结构与算法 —— 动态规划

简介动态规划有时被认为是与递归相反的算法。递归是从问题的顶部开始，将一个完整的问题一步步分解成一个个子问题，通过解决掉所有分解出来的这些子问题的方式，来解决整个问题。动态规划是从问题的底部开始，先解决掉底部的最简单的小问题，然后，通过已解的这些小问题作为基础合并成一个整体解决方案，从而解决掉整个大问题。使用递归去解决问题虽然简洁，但效率不高。包括JavaScript 在内的众多语言，不能高效

2017-03-06 16:01:21 420

翻译 include-media文档

变量（VARIABLES）断点（breakpoints）$breakpoints: ( 'phone': 320px, 'tablet': 768px, 'desktop': 1024px) !default;说明：创建一个全局断点列表示例：创建一个单独的断点用phone标记$breakpoints: ('phone': 320px);Used by[function] im-

2017-03-06 01:20:53 649

翻译使用@include-media写媒介查询

官网地址： @include-media@include-media的口号是写简单、优雅和可维护的Sass媒介查询。include-media是什么？include-media 是一个Sass库，使用它我们可以用一种容易和优雅的方式，自然和非常简单的语法编写CSS媒介查询。为什么我们需要这个库？我花了很长一段时间尝试不同的可用的库和mixin, 但是，最终它们都不能以优雅的方式满足我的需要。其

2017-03-05 20:24:43 2618

原创 CSS3 媒介查询

一、响应式设计响应式设计，设计可根据所显示的设备屏幕大小（视口宽度）而自动调节改变, 在不同的设备上呈现的会有所不同。按照可用的屏幕属性，响应式设计提供了 UI 的最佳效果。例如，如果网站布局上有一个占据 25% 的屏幕宽度的侧边栏，那么该侧边栏在不同大小的屏幕上的呈现是不同的。该侧边栏在较大的桌面监控器上是宽屏的，在较小的智能手机屏幕上是极其窄的。而在最高的或最小的屏幕上，侧边栏很可能不再是

2017-03-02 23:25:23 582

原创程序员护眼工具（2）—— redshift

redshift 这款软件是受到f.lux的启发开发而来的，修复了许多f.lux的bug。而且支持很多系统ubuntu下安装很简单:sudo apt-get updatesudo apt-get install redshift gtk-redshift这样就安装好了，而且redshift在我的ubuntu14.04安装后自动启动并识别所在地的经纬度自动调整屏幕亮度。比flux方便太多。

2017-02-27 16:18:27 1049

原创 Atom编辑器小试

Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。开发团队将 Atom 称为一个“为 21 世纪创造的可配置的编辑器”，它开源免费跨平台，并且整合 GIT 并提供类似 SublimeText 上类似的 Package Control (包管理)功能，支持插件扩展，可配置性非常高。你可以非常方便地安装和管理各种插件，将 Atom 打造成自己喜欢的开发工具。好了，说了这么多废话，下面看

2016-10-20 13:24:45 847

原创屏幕取词： window.getSelection和document.selection

上周在做扇贝小作业时学到的小技巧，因为平时很多这样的小知识点都是写在电子笔记（有道云笔记和印象笔记）里的。但是随着时间的推移，发觉里面的东西赛的是越来越多了。所以，每隔一段时间就该整理一下才合理，既可以总结最近学习的知识，放到博客里也是分享，希望对需要的朋友有帮助。IE9以下支持：document.selection 　　 IE9、Firefox、Safari、Chrome和Opera支持：wi

2016-10-19 00:34:44 5261 1

原创 React调试方法

做为一个React开发大白，表示不知道该怎么调试它真TMD痛苦！下面来分享下我通过阅读前人博客总结的调试方法。浏览器扩展工具 —— 『React Developer Tools』Facebook其实早为开发人人员提供了一个很给力的调试工具，并且可以在你的Chrome和FireFox上自由安装。对于前端开发者来说，上手使用这个工具没有任何难度。扩展下载地址： https://github.com/fa

2016-10-17 22:53:48 18080

原创 React.createClass( ) 和 React.Component( ) 有什么区别?

之前定义一个组件类时都是这样写的 : 但是，也看到用有扩展 React.Component的写法，于是写出下面类型的code。但是，发现 getInitialState根本没有执行，控制台提示如下信息： Warning: getInitialState was defined on TodoApp, a plain JavaScript class. This is only supporte

2016-10-16 15:05:41 5333

转载 jQuery DOM插入节点操作指南

本章节主要介绍了jQuery在HTML中动态插入节点的各种方法,制作成表格，方便大家对比学习，需要的朋友可以参考下： HTML代码：我想说:jQuery代码：$("p").append("你好");结果：我想说:你好

2016-10-16 12:29:49 510

原创程序员护眼小工具： F.lux

对，你没看错，是F.lux。而不是那个你熟悉的Flux。本人也是在serach Flux时看到这个东东，出于好奇，于是打开链接看了下尝试安装使用体验了一把。安装什么都很简单。好了，不多废话，以下是简单安装使用教程。英文官网下载地址：https://justgetflux.com/安装完即可使用。不过本人尝试发现设置地理坐标不能使用，不过总体感觉影响不大。因为亮度是自己可以自行调节的。有一点需要提

2016-10-05 13:38:29 3749

原创 React调试工具：React Devtools

React Devtools是React官方提供的类似于浏览器调试台的插件。通过在浏览器中安装这个插件，可以查看组件的层次、各个组件的Props、States等信息。并且它的使用方式也很简单。（图片取自网上！）下载：https://github.com/facebook/react-devtools/releases注意：如果是Chrome浏览器就下载.crx后缀的文件。如果是FirFox浏览

2016-10-04 20:13:01 30443 8

原创 React入门

1.1 React 是什么 React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 来自：React 官方网站狭义来讲 React 是 Facebook 内部开源出来的一个前端 UI 开发框架，广义来讲 React 不仅仅是 js 框架本身，更是一套完整的前端开发生态体系，这套体系包括：React.js ReactRen

2016-10-04 19:50:27 347

原创微信小程序尝鲜

9.21号晚，微信向部分公众号发出了应用号“微信小程序”邀请（200个），随后官方也对外宣布已经开始内测。那会人还在南通那边，第二天晚上忍不住找到第一手资料学习了一下。总之，个人观点：门槛又降低了，同时这次腾讯布的局狗大、野心真不小啊。。。小程序是什么？它有着什么样的功能？小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走

2016-10-02 20:17:58 679

原创 JavaScript实现弹出层代码

弹出层效果应该说很是常见了，下面是使用原生JavaScript实现弹出从的方法。好了，废话不多说了。一言不合就上代码。。弹出层js部分代码：样式表代码如下： * { padding: 0; margin: 0; } html, body { font-size: 10px;

2016-09-15 21:01:23 3646

原创节点克隆

对于克隆节点最长用的方法有两种，一、原生JavaScript。二、使用流行类库。这篇文章里我会说下使用原生Javascript方法和jQuery方法克隆节点。以及，两者的异同点。好了，废话也不多说了，进入主题。。在说两种实现克隆节点之前，再啰嗦几句基础的概念：影子克隆和深度克隆var el = document.querySelector('.come-class');// 影子克隆: 只克隆节点

2016-08-08 17:20:29 2507 1

转载一看就懂的ReactJs入门教程（精华版）

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJS的风采吧~~ 章有点长，耐心读完，你会有很大收获哦~一、ReactJS简介React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都

2016-07-29 19:19:30 1027

原创 ubuntu：unrar 的使用

前两天刚装了个Linux系统，摸索了两天，发现不能解压.rar文件。只有安装了解压工具——unrar之后才可以。1、安装 unrar 工具$ sudo apt-get install unrar2、解压到当前目录$ unrar e update.rar3、解压到指定目录$ unrar x update.rar update/4、压缩 $ rar a pg_healthcheck.rar

2016-07-24 17:51:19 2032

原创常用Bracket插件

1、Emmet如果你从事Web前端开发的话，对该插件一定不会陌生。它可以加快你的 HTML 和 CSS 编写速度。2、AngularJS-bracketsBrackets的其中一个优点是支持AngularJS开发，我们只需要安装一款AngularJS代码提示插件即可实现AngularJS指令或服务补全功能。3、Git插件4、Theme-皮肤插件brackets当然也是可以更改主题的。5、Minifi

2016-07-24 15:27:52 10858

原创解决ssh: connect to host 107.21.95.3 port 22: Connection timed out

在Git Shell下输入命令测试刚才的公钥是否认证正确时~$ ssh [email protected] 总是报下面的错误：ssh: connect to host github.com port 22: Connection timed out下面是我找到的解决办法。首先，我们需要在.ssh目录下创建一个config文件，输入如下内容：Host github.com User [email protected]

2016-07-05 18:15:30 31148

原创 JavaScript笔记整理 —— XMLHttpRequest对象

XMLHttpRequest()方法是由JavaScript创建的HTTP请求对象（构造器）。值得一提的是，它最在是在IE中实现的（在IE中他叫做ActiveX）。目前，它已被所有现代浏览器所支持，是一种跨浏览器技术——Ajax应用。实际上，Ajax可以看做是由Js和XML之间建立的异步联系。XHR对象是由Js代码创建的。XML, 最初创建的HTTP请求是用来获取XML文档，XML文档中包含了需

2016-07-03 14:13:38 506

原创 ES6入门 —— Class和Module

一、ClassES6引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。 // 定义类 class Point() { constructor(x, y) { this.x = x; this.y = y; } toString() { re

2016-07-03 14:09:10 13184

原创 ES6入门——Set和Map数据结构

SetES6提供了新的数据结构Set。类似于数组，只不过其成员值都是唯一的，没有重复的值。 Set本身是一个构造函数，用来生成Set数据结构。var s = new Set();// 通过add方法向Set结构中加入成员[2, 3, 5, 4, 5, 2, 2].map(x => s.add(x))for (i of s) { console.log(i) }// 2 3 4 5 （表明s

2016-07-03 14:05:25 13269 2

原创 ES6之——变量的解构赋值

一、数组的结构赋值1>、什么是解构？ES6允许我们队数组和对象中提取值，对变量进行赋值，这被叫做“解构”。通常我们像下面这样为变量赋值：var a = 1; b = 2; c = 3;但是，ES6允许我们像下面这样做：var [a, b, c] = [1, 2, 3];即从数组中提取值，按照位置的对应关系，对变量赋值。2>、嵌套数组解构再来看看嵌套数组解构的例子：var [foo,

2016-07-03 14:01:45 5063

原创 ES6入门——Iterator和for...of循环

Iterator（遍历器）遍历器（Iterator）是一种协议，任何对象只要部署了这个协议，就可以完成遍历操作。在ES6中遍历操作特质for….of循环。它的作用主要有两个：为遍历对象的属性提供统一的接口。使对象的属性能够按次序排列。ES6的遍历器协议规定，部署了next方法的对象，就具备了遍历器功能。next方法必须返回一个包含value和done两个属性的对象。value属性是当前遍历的位

2016-07-03 13:58:53 6029 1

原创 ES6入门——let和const命令

let命令ES6新增了let命令用于声明变量。它的用处和var很相似，只不过let所声明的变量只在let命令所在的代码块内有效。看下下面代码： { let a = 10; var b = 9; } alert( a ); // ReferenceError: a is not defined alert( b ); //9再看看下面代码：

2016-07-03 13:54:48 3844

原创 ES6入门—— ECMAScript简介

ECMAScript 6 （简称ES 6）是JS语言的下一代标准。Mizilla将在这个标准的基础上，退出JavaScript 2.0版。ECMAScript和JavaScript的关系ECMAScript是JavaScript语言的国际化标准，JavaScript是ECMAScript的实现。（前者是后者的规格，后者是前者的实现。但通常两者是可互换的。）ESMAScript历史1996年11月，N

2016-07-03 13:50:37 1046

原创 Css转Sass、Css转Less在线工具

1、Css在线转为Sass/Scss :站点：CSS 2 SASS/SCSS CONVERTER2、Css在线转为Less :站点-1： CSS 2 LESS下面随带推荐一个Less转css的在线工具，站点地址是： LESS 2 CSS 站点-2：FISHSTICSS站点-3：CSS2LESS.NET站点-3：CSS PREprocessorsCSS PREprocessors是一个相当不错的站点

2016-06-25 14:35:13 42937

原创遮罩层——通过阴影弱化背景的四种方案

方法一：代码-1：/* 用于遮挡背景 */.overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, 0.8);}/* 需要吸引用户注意的元素 */.lightbox { position: absolute;

2016-06-24 21:32:37 7512

原创 JavaScript笔记整理——驯服线程和定时器

定时器提供了一种让一段代码在一定毫秒之后，再异步执行的能力。由于Js是单线程的（同一时间只能执行一处Js代码）。定时器提供了一种跳出这种限制的方法，以一种不太直观的方式来执行代码。需要注意的是，定时器并不是Js自身的一个功能。定时器作为对象和方法一部分才能够使用。这也就提醒我们，在非浏览器的环境中使用JS，很可能定时器就不存在了。1、创建和清除定时器JavaScript提供了两种方法创建和清除定时器

2016-06-24 16:23:52 1195

原创 JavaScript笔记整理——递归

递归本词条由“科普中国”百科科学词条编写与应用工作项目审核。程序调用自身的编程技巧称为递归（ recursion）。递归做为一种算法在程序设计语言中广泛应用。一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法，它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解，递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算，大大地减少了程序的代码量。递归的能

2016-06-14 17:28:14 334

空空如也

空空如也