自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 浅谈node.js 回调函数与事件机制

node.js 是单进程单线程应用程序,但通过事件和回调支持并发,所以性能非常高。 node.js 的每一个API都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发。 node.js 基本上所有的事件机制都是用设计模式中观察者模式实现。node.js 单线程类似进入一个while...

2017-03-31 18:26:07 2602 0

原创 浅谈node.js和npm

node.js 是运行在服务端的 JavaScript。 node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。 node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好...

2017-03-31 16:40:52 719 0

原创 浅谈node.js RESTful API

REST即表述性状态传递,Representational State Transfer,简称REST,是一种软件架构风格,是一组架构约束条件和原则,满足这些约束条件和原则的应用程序或设计就是RESTful。需要注意的是,REST是设计风格而不是标准。REST通常基于使用HTTP,URI,和XML...

2017-03-31 15:02:44 985 0

原创 浅谈node.js Express框架

REST即表述性状态传递,Representational State Transfer,简称REST,是一种软件架构风格,是一组架构约束条件和原则,满足这些约束条件和原则的应用程序或设计就是RESTful。需要注意的是,REST是设计风格而不是标准。REST通常基于使用HTTP,URI,和XML...

2017-03-31 14:59:44 415 0

原创 浅谈前端构建工具gulp

1、gulp gulp是一个前端自动化的构建工具,采用这个工具,可以提升性能和效率。   2、为什么要用gulp 1) .js和.css属于静态文件,由于浏览器存在缓存机制,为了避免缓存带来的问题,可以利用构建工具,给每一个静态文件添加一个版本号以区别文件。 2) 性能优化:文件合并,减少http...

2017-03-30 17:14:07 656 0

原创 浅谈MVC与前后端分离

1、MVC MVC是一种经典的设计模式,Model-View-Controller,即模型-视图-控制器。 1) 模型是用于封装数据的载体,其本质是一个普通的Java Bean,包含一系列的成员变量及其getter/setter方法; 2) 视图而言,更加偏重于展现,在Java中可通过JSP来充当...

2017-03-30 15:25:41 15428 2

原创 浅谈ES6 全局变量和全局对象的属性

全局对象是最顶层的对象,在浏览器环境指的是window对象,在Node.js指的是global对象。 在ES5中,全局对象的属性与全局变量是等价的,也就是说,全局对象的属性赋值与全局变量的赋值是等价的。 window.i = 5; alert(a); // 5 i = 10; alert(wind...

2017-03-30 11:50:09 11621 0

原创 浅谈ES6 const命令

ES5只有两种声明变量的方式:var和function,ES6还添加了两种常用的声明变量的方式:let和const,let的介绍请见: 下面介绍ES6的const命令: const声明一个只读的常量,一旦声明,常量的值就不能改变,这意味着,const一旦声明常量,就必须立即初始化,不能等到之后再赋...

2017-03-30 11:29:14 4533 0

原创 浅谈ES6 块级作用域

1、为什么需要块级作用域 ES5只有全局作用域和函数作用域,没有块级作用域,会带来以下问题: 1) 变量提升导致内层变量可能会覆盖外层变量; var i = 5; function func() { console.log(i); if (true) { var i = 6; } } f...

2017-03-30 11:07:41 5894 1

原创 浅谈ES6 let命令

ES6新增了let命令,用来声明变量,它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。 1、for循环的计数器,就很合适使用let。 var a = []; for (var i = 0; i a[i] = function() { console.log(i); } ...

2017-03-29 17:37:49 753 0

原创 浅谈架构、框架、模式、模块、组件、插件、控件、中间件

1、架构: 软件架构,也成称为软件体系结构,简单地说就是一种设计方案,将用户的不同需求抽象成组件,且能够描述组件之间的通信和调用。软件架构会分析工程中的问题,针对问题设计解决方案,针对解决方案分析应具有的功能,针对功能设计软件系统的层次和模块及层次模块之间的逻辑交互关系,确定各个功能如何由这些逻...

2017-03-29 10:35:33 8189 2

原创 浅谈前端项目发展的四个阶段——库/框架、构建优化、模块化开发、组件化开发和资源管理

前端项目发展的四个阶段: 1、库/框架 库:jQuery 框架:vue、React、Angularjs   2、构建优化 选择Gulp, Grunt, Webpack 等构建工具,对代码进行压缩、校验,再以页面为单位进行简单的资源合并。   3、JavaScript和CSS模块化开发 分而治之是软...

2017-03-28 23:18:07 1102 0

原创 浅谈CSS预处理器SASS、LESS、Stylus

1、背景 CSS不是一种编程语言,可以用它开发网页样式,但是没法用它编程,它没有自己的变量、简单的逻辑程序、函数及其他编程语法,只是一行行单纯的属性描述,写起来相当费事,而且代码难以组织和维护。 为了加入一些编程元素,让CSS能像其他程序语言一样可以做一些预定的处理,CSS预处器应运而生。 ...

2017-03-28 21:50:19 1872 0

原创 浅谈HTML5 canvas实现移动端刮奖效果

刮奖图片通过设置div的背景图片实现,设置一个完全罩住刮奖图片的canvas,在canvas中绘制了一块等大的浅灰色矩形,使其盖住下方的刮奖图片。 为使得手指划过画布时,擦除掉相应区域的浅灰色,可以运用canvas中的globalCompositeOperation属性,通过将其设置为destin...

2017-03-28 19:50:44 4874 1

原创 【Leetcode】507. Perfect Number

思路: 首先0和1都不满足。result初始化为num。 依次寻找num的每个因子i,若i不是完全平方数的两个平方根因子且不为1,result减去 i 及num / i,否则result只减i即可。 public class Solution { public boolean checkP...

2017-03-26 16:21:19 1312 0

原创 浅谈HTML5 canvas(二)

1、变换 通过上下文的变换,可以将处理后的图像绘制到画布上。 可以通过如下方法来变换上下文: ① rotate(angle):围绕圆点旋转angle弧度; ② scale(x, y):缩放图像,在x方向乘以x,在y方向乘以y; ③ translate(x, y):将坐标圆点移动到(x, y),执行...

2017-03-26 13:47:33 1137 0

原创 【Leetcode】415. Add Strings

方法一: 思路: 将String转换为char数组。从后往前逐位对呀相加,每位相加结果若大于9需对10取余,并用flag标记进位。 注意所有位相加完毕后,需要判断flag即最高位是否有进位,若有还需在结果字符串前面加上“1”。 public class Solution { pub...

2017-03-26 10:05:31 208 0

原创 【Leetcode】414. Third Maximum Number

思路: 将数组升序排列。 j记录当前找到的是第几大数。 从最后一个元素开始往前处理,一旦j==3,立即返回当前元素,若当前元素与前一个元素不等,则j++。 遍历完毕后,若j还未到达3,则返回最后一个元素,否则返回第一个数。 public class Solution { publ...

2017-03-25 12:07:12 365 0

原创 浅谈HTML5 canvas(一)

: HTML5添加的最受欢迎的功能就是元素,这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态在这个区域绘制图形。 主流浏览器都支持canvas,如IE9+、FireFox1.5+、Safari2+、Opera9+、Chrome、iOS版Safari及安卓版Webkit。 C...

2017-03-24 23:05:07 4150 0

原创 浅谈JavaScript模拟事件和自定义事件

1、DOM中的事件模拟 1) DOM中的事件模拟有以下3个步骤: 步骤1:创建事件对象event 可以在document对象上使用createEvent()方法创建event对象,此方法接收一个参数,即要创建的事件类型的字符串。在DOM2级中这些字符串都使用英文复数形式,而在DOM3级中都变成了单...

2017-03-24 23:02:53 3415 0

原创 浅谈JavaScript事件的内存与性能

在JavaScript中,添加到页面上的事件处理程序数量直接关系到页面的整体运行性能,导致这个问题的原因有几个: ① 每个函数都是对象,都会占用内存,内存中的对象越多,性能就越差; ② 必须事先指定所有事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间。 因此,必须利用好事件处理程序...

2017-03-24 18:42:48 322 0

原创 浅谈JavaScript的事件对象event

事件对象event包含导致事件的元素、事件的类型以及其他与特定事件相关的信息。 1、DOM中的事件对象 属性/方法 类型 说明 bubbles Boolean 表明事件是否冒泡 cancelabel Boolean 表明是否可以取消事件的默认行为 ...

2017-03-24 17:38:55 418 0

原创 浅谈JavaScript中的五种为事件指定处理程序的方式

JavaScript和HTML之间的交互是通过事件实现的。   IE9、Firefox、Opera、Sarifi、Chrome都已经实现了DOM2级事件模块的核心部分,IE8是最后一个仍然使用其专有事件系统的主要浏览器。   事件流: 事件流描述的是从页面中接受事件的顺序,但IE和Netscape...

2017-03-24 11:22:23 834 0

原创 【Leetcode】412. Fizz Buzz

思路: 先判断是否被15整除,再判断是否被3整除,再判断是否被5整除。 public class Solution { public List fizzBuzz(int n) { List result = new ArrayList(); for (int...

2017-03-24 09:45:56 312 0

原创 【Leetcode】409. Longest Palindrome

思路: 用一个Set存储前面出现过的字母,遍历整个字符串,如果Set中没有出现过,则加入Set,否则移除该字符并加二计数,最后再判断是否Set为空,若是则计数加一。 public class Solution { public int longestPalindrome(String ...

2017-03-23 13:21:29 246 0

原创 【Leetcode】506. Relative Ranks

思路: (1)用Map存储原数组中每个数的下标。 (2)对原数组进行排序。 (3)从后往前依次判断,前三位依次授予"Gold Medal", "Silver Medal", "Bronze Medal",后面的依次授予"4...

2017-03-22 13:30:29 1227 0

原创 【Leetcode】463. Island Perimeter

思路: 一旦遇到岛,result先加4,然后依次判断其右边和下边相邻的是不是岛,若是,则result减2。 public class Solution { public int islandPerimeter(int[][] grid) { int rows = gri...

2017-03-21 15:06:31 280 0

原创 浅谈TCP和UDP对应的协议

1、Ajax浏览器缓存 Ajax请求成功后,会把请求的URL和返回的响应结果保存在浏览器缓存内,下一次调用Ajax发送相同的请求(两次请求的URL完全相同,包括参数)时,为了提高页面的响应速度和用户体验,同时节省网络通信资源,会直接从缓存中把数据取出来,此时浏览器不会与服务器交互。   2、Aja...

2017-03-20 23:10:01 341 0

原创 浅谈文档加载完成事件——document.ready和onload的区别

文档加载完成的两种事件 ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件)onload,指示页面包含图片等非文字媒体文件在内的所有元素都加载完成。   1、DOM ready 文档加载的顺序:域名解析-->加载HTML-->加载JavaScript和...

2017-03-20 11:52:45 6989 1

原创 【Leetcode】543. Diameter of Binary Tree

思路: 通过递归计算左右子树的深度来计算根节点的diameter(记为temp),通过和类变量 diameter 进行比较,保存较大值。 在每一次递归结束后,返回左右子树的深度,将二者相加再加2就是根节点的diameter。 /** * Definition for a binary tre...

2017-03-20 11:24:48 2621 0

原创 浅谈HTML5中的二进制大对象Blob

1、Blob是什么? 在计算机中,Blob常常是数据库中用来存储二进制文件的字段类型,MySQL中的Blob类型就只是个二进制数据容器。 在HTML5中,Blob是一种JavaScript的对象类型,Blob对象除了存放二进制数据外还可以设置这个数据的MIME类型,这相当于对文件的存储。一个Blo...

2017-03-19 15:15:34 4859 1

原创 【Leetcode】459. Repeated Substring Pattern

方法一: 思路: (1)次取长度为1,2,3,...的子串,判断是否可以构成整个字符串 (2)整个字符串长度要能整除子串才有可能满足 public class Solution { public boolean repeatedSubstringPattern(String s) { ...

2017-03-19 10:39:17 296 0

原创 【Leetcode】455. Assign Cookies

思路: (1)先对g和s进行排序。 (2)遍历g数组,依次为每个孩子分配蛋糕。 (3)对每一个孩子,在s找出第一个不比他最小满意度小的蛋糕,若找着,则计数,并指定下一次从下一个蛋糕开始继续找,否则,以后的孩子最小满意度更大,更不可能找到满足的蛋糕,跳出循环。 public class Soluti...

2017-03-18 10:37:44 261 0

原创 【Leetcode】453. Minimum Moves to Equal Array Elements

思路: 全部n-1个值加1就是一个值减1。 公式:sum - len * min。 public class Solution { public int minMoves(int[] nums) { int sum = 0, len = nums.length; ...

2017-03-16 14:45:11 268 0

原创 浅谈解析XML文件的跨浏览器实例

所有现代浏览器都有读取和操作 XML 的内建 XML 解析器。 解析器把 XML 载入内存,然后把它转换为可通过 JavaScript 访问的 XML DOM 对象。 if (window.XMLHttpRequest) // IE7+, Firefox, Chrome, Opera, Saf...

2017-03-16 11:50:12 1135 0

原创 浅谈实现两个div并列的多种方法

方法一:float #div1{ width:50%; height:300px; background:blue; float:left; } #div2{ width:50%; height:300px; background:green; float:left; } 方法...

2017-03-16 11:10:26 9422 1

原创 浅谈JavaScript的浮点数值

浮点数的最高精度是17位小数,但在进行算术运算时其精确度远远不如整数,0.1+0.2的结果不是0.3,而是0.30000000000000004。这个小小的舍入误差会导致无法测定特定的浮点数值,如if (0.1 + 0.2 == 0.3)得到的是false。 JS的浮点数值必须包含一个小...

2017-03-16 10:52:00 252 0

原创 浅谈JSONP

JSONP是JSON with Padding的略称,是一个非官方的协议,允许在服务器端集成Script tags返回至客户端,通过JavaScript callback的形式实现跨域访问。 JSONP比JSON外面有多了一层,callback()。也就是说,在服务器端需要先将查询结果转换成JSO...

2017-03-16 10:27:16 391 0

原创 浅谈数组全排列、去重、求最大值的JavaScript实现

1、全排列(递归) function permutation(arr){ if (arr.length == 1) return arr; else if (arr.length == 2) return [[arr[0],arr[1]],[arr[1],arr[0]]]; else...

2017-03-15 21:17:50 1505 0

原创 浅谈表单元素的readonly和disabled属性

readonly和disabled是用在表单中的两个属性。   相同点: 使用户不能够更改表单域中的内容。   不同点: ① Readonly只是使表单元素不能输入,外观不会变化;而disabled会使表单元素外观变化,如变灰。 ② readonly只针对input(text / password...

2017-03-15 20:24:07 1580 0

提示
确定要删除当前文章?
取消 删除