2017年03月_筱葭

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

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

2017-03-31 18:26:07 3070 1

原创浅谈node.js和npm

node.js 是运行在服务端的 JavaScript。node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。 1、node.js 应用的组成：1) 引入required模块：使用 require

2017-03-31 16:40:52 1006

原创浅谈node.js RESTful API

REST即表述性状态传递，Representational State Transfer，简称REST，是一种软件架构风格，是一组架构约束条件和原则，满足这些约束条件和原则的应用程序或设计就是RESTful。需要注意的是，REST是设计风格而不是标准。REST通常基于使用HTTP，URI，和XML以及HTML这些现有的广泛流行的协议和标准。REST 通常使用 JSON 数据格式。 RE

2017-03-31 15:02:44 1287

原创浅谈node.js Express框架

REST即表述性状态传递，Representational State Transfer，简称REST，是一种软件架构风格，是一组架构约束条件和原则，满足这些约束条件和原则的应用程序或设计就是RESTful。需要注意的是，REST是设计风格而不是标准。REST通常基于使用HTTP，URI，和XML以及HTML这些现有的广泛流行的协议和标准。REST 通常使用 JSON 数据格式。 RE

2017-03-31 14:59:44 541

原创浅谈前端构建工具gulp

1、gulpgulp是一个前端自动化的构建工具，采用这个工具，可以提升性能和效率。 2、为什么要用gulp1) .js和.css属于静态文件，由于浏览器存在缓存机制，为了避免缓存带来的问题，可以利用构建工具，给每一个静态文件添加一个版本号以区别文件。2) 性能优化：文件合并，减少http请求；文件压缩，减少文件体积，加快下载速度；3) 效率提升：自动添加CSS3的vendo

2017-03-30 17:14:07 923

原创浅谈MVC与前后端分离

1、MVCMVC是一种经典的设计模式，Model-View-Controller，即模型-视图-控制器。1) 模型是用于封装数据的载体，其本质是一个普通的Java Bean，包含一系列的成员变量及其getter/setter方法；2) 视图而言，更加偏重于展现，在Java中可通过JSP来充当视图，或通过纯HTML进行展现，目前的主流是纯HTML；模型和视图需要通过控制器来进行粘合，

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

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

全局对象是最顶层的对象，在浏览器环境指的是window对象，在Node.js指的是global对象。在ES5中，全局对象的属性与全局变量是等价的，也就是说，全局对象的属性赋值与全局变量的赋值是等价的。window.i = 5;alert(a); // 5i = 10;alert(window.i); // 10未声明的全局变量，自动成为全局对象window的属性，这会带来问题：无

2017-03-30 11:50:09 15434 1

原创浅谈ES6 const命令

ES5只有两种声明变量的方式：var和function，ES6还添加了两种常用的声明变量的方式：let和const，let的介绍请见：下面介绍ES6的const命令：const声明一个只读的常量，一旦声明，常量的值就不能改变，这意味着，const一旦声明常量，就必须立即初始化，不能等到之后再赋值。因此，改变常量和只声明不赋初始值都会报错。const的作用域与let命令相同，只在声明所在

2017-03-30 11:29:14 5329 1

原创浅谈ES6 块级作用域

1、为什么需要块级作用域ES5只有全局作用域和函数作用域，没有块级作用域，会带来以下问题：1) 变量提升导致内层变量可能会覆盖外层变量；var i = 5;function func() { console.log(i); if (true) { var i = 6; }}func(); // undefined2) 用来计数的循环变量泄露为全局变量for (v

2017-03-30 11:07:41 7237 2

原创浅谈ES6 let命令

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

2017-03-29 17:37:49 995

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

1、架构：软件架构，也成称为软件体系结构，简单地说就是一种设计方案，将用户的不同需求抽象成组件，且能够描述组件之间的通信和调用。软件架构会分析工程中的问题，针对问题设计解决方案，针对解决方案分析应具有的功能，针对功能设计软件系统的层次和模块及层次模块之间的逻辑交互关系，确定各个功能如何由这些逻辑实现。开发人员可以根据软件架构分析出来的层次和架构进行软件编写。2、框架：软件框架，

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

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

前端项目发展的四个阶段：1、库/框架库：jQuery框架：vue、React、Angularjs 2、构建优化选择Gulp, Grunt, Webpack 等构建工具，对代码进行压缩、校验，再以页面为单位进行简单的资源合并。 3、JavaScript和CSS模块化开发分而治之是软件工程中的重要思想，模块化是目前前端最流行的分治手段。模块化开发的最大价值不是复用，

2017-03-28 23:18:07 1707

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

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

2017-03-28 21:50:19 2410

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

刮奖图片通过设置div的背景图片实现，设置一个完全罩住刮奖图片的canvas，在canvas中绘制了一块等大的浅灰色矩形，使其盖住下方的刮奖图片。为使得手指划过画布时，擦除掉相应区域的浅灰色，可以运用canvas中的globalCompositeOperation属性，通过将其设置为destination-out，使得在已填充颜色的基础上再次进行绘制时，所绘制的区域变得透明，从而露出下方的刮奖

2017-03-28 19:50:44 5950 2

原创【Leetcode】507. Perfect Number

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

2017-03-26 16:21:19 1415

原创浅谈HTML5 canvas（二）

1、变换通过上下文的变换，可以将处理后的图像绘制到画布上。可以通过如下方法来变换上下文：①　rotate(angle)：围绕圆点旋转angle弧度；②　scale(x, y)：缩放图像，在x方向乘以x，在y方向乘以y；③　translate(x, y)：将坐标圆点移动到(x, y)，执行该变换后，坐标(0, 0)会变为之前由(x, y)表示的点;④　Transform(m1

2017-03-26 13:47:33 1342

原创【Leetcode】415. Add Strings

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

2017-03-26 10:05:31 264

原创【Leetcode】414. Third Maximum Number

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

2017-03-25 12:07:12 447

原创浅谈HTML5 canvas（一）

：HTML5添加的最受欢迎的功能就是元素，这个元素负责在页面中设定一个区域，然后就可以通过JavaScript动态在这个区域绘制图形。主流浏览器都支持canvas，如IE9+、FireFox1.5+、Safari2+、Opera9+、Chrome、iOS版Safari及安卓版Webkit。Canvas除了具备基本绘图能力的2D上下文，还有一个名为WebGL的3D上下文。目前支持canv

2017-03-24 23:05:07 5349

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

1、DOM中的事件模拟1) DOM中的事件模拟有以下3个步骤：步骤1：创建事件对象event可以在document对象上使用createEvent()方法创建event对象，此方法接收一个参数，即要创建的事件类型的字符串。在DOM2级中这些字符串都使用英文复数形式，而在DOM3级中都变成了单数。这个字符串可以是以下几个字符串之一：①　UIEvents：一般化的UI事件，鼠标事件和键

2017-03-24 23:02:53 3871

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

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

2017-03-24 18:42:48 427

原创浅谈JavaScript的事件对象event

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

2017-03-24 17:38:55 768

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

JavaScript和HTML之间的交互是通过事件实现的。 IE9、Firefox、Opera、Sarifi、Chrome都已经实现了DOM2级事件模块的核心部分，IE8是最后一个仍然使用其专有事件系统的主要浏览器。事件流：事件流描述的是从页面中接受事件的顺序，但IE和Netscape却提出了完全相反的事件流的概念，IE的事件流是事件冒泡流，而Netscape的事件流是事件捕

2017-03-24 11:22:23 1094

原创【Leetcode】412. Fizz Buzz

思路：先判断是否被15整除，再判断是否被3整除，再判断是否被5整除。public class Solution { public List fizzBuzz(int n) { List result = new ArrayList(); for (int i = 1; i <= n; i++) { if (i % 3 == 0

2017-03-24 09:45:56 740

原创【Leetcode】409. Longest Palindrome

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

2017-03-23 13:21:29 294

原创【Leetcode】506. Relative Ranks

思路：(1)用Map存储原数组中每个数的下标。(2)对原数组进行排序。(3)从后往前依次判断，前三位依次授予"Gold Medal", "Silver Medal", "Bronze Medal"，后面的依次授予"4"，"5"，"6"，...public class Solution { public String[] findRelativeRanks(int[] num

2017-03-22 13:30:29 1284

原创【Leetcode】463. Island Perimeter

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

2017-03-21 15:06:31 336

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

1、Ajax浏览器缓存Ajax请求成功后，会把请求的URL和返回的响应结果保存在浏览器缓存内，下一次调用Ajax发送相同的请求（两次请求的URL完全相同，包括参数）时，为了提高页面的响应速度和用户体验，同时节省网络通信资源，会直接从缓存中把数据取出来，此时浏览器不会与服务器交互。 2、Ajax浏览器缓存的优点对一些静态内容的请求，如图片，CSS文件，JS脚本等，更加快捷，提高了页面

2017-03-20 23:10:01 934

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

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

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

原创【Leetcode】543. Diameter of Binary Tree

思路：通过递归计算左右子树的深度来计算根节点的diameter（记为temp），通过和类变量 diameter 进行比较，保存较大值。在每一次递归结束后，返回左右子树的深度，将二者相加再加2就是根节点的diameter。/** * Definition for a binary tree node. * public class TreeNode { * int

2017-03-20 11:24:48 2807

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

1、Blob是什么？在计算机中，Blob常常是数据库中用来存储二进制文件的字段类型，MySQL中的Blob类型就只是个二进制数据容器。在HTML5中，Blob是一种JavaScript的对象类型，Blob对象除了存放二进制数据外还可以设置这个数据的MIME类型，这相当于对文件的存储。一个Blob对象是一个包含只读原始数据的类文件对象。2、创建Blob对象在新的方法中可以直接

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

原创【Leetcode】459. Repeated Substring Pattern

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

2017-03-19 10:39:17 393

原创【Leetcode】455. Assign Cookies

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

2017-03-18 10:37:44 338

原创【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; int min = Integer.MAX_VALUE; for (int

2017-03-16 14:45:11 341

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

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

2017-03-16 11:50:12 1316

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

方法一：float#div1{ width:50%; height:300px; background:blue; float:left;}#div2{ width:50%; height:300px; background:green; float:left;}方法二：display:table-cell#parent{ width:100%; di

2017-03-16 11:10:26 23293 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 455

原创浅谈JSONP

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

2017-03-16 10:27:16 494

原创浅谈数组全排列、去重、求最大值的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 { var temp = []; for (var i = 0; i < arr.leng

2017-03-15 21:17:50 1784

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

readonly和disabled是用在表单中的两个属性。相同点：使用户不能够更改表单域中的内容。不同点：①　Readonly只是使表单元素不能输入，外观不会变化；而disabled会使表单元素外观变化，如变灰。②　readonly只针对input(text / password)和textarea有效；而disabled对于所有的表单元素都有效，包括select、

2017-03-15 20:24:07 2607

空空如也

空空如也