白色的海-CSDN博客

原创为jQuery写插件

很多场合，我们都会调用jQuery的插件去完成某个功能，比如slider。如下图，做一个div，通过“$( "#slider" ).slider();”的方式直接将div变成slider，比起slider($('#slider'))更贴近jQuery的链式调用写法，可读性和通用性更好些。那么，我们也来为jQuery写插件。便于项目中的组件化。方法是非常简单

2015-12-24 19:05:50 438

原创 css毛玻璃效果

毛玻璃其实就是磨砂玻璃，能够模糊的看清背后的风景，让人感觉有种朦胧美，让界面看上去有些层次感。比如：高大上啊，接下来肯定是眼馋手痒的过程。。。当然，用ps搞一个全景毛玻璃背景毫无疑问是最省事的，那接下来就没啥事可干了。当然no no no了。毛玻璃无疑就是种模糊了，少不了filter blur。最终效果（chrome）：天气预

2015-12-21 10:32:56 14596

原创网页中多个图标在一张图片上，使用css将各图标显示

现在的网页中显示很多图标算是常态，发现项目中页面上用到的图标都是单个图标单个文件，用的时候直接往页面上挂，这确实很常态。如果，网站是挂在外网上，或者网速过低，又大量使用图标的情况下，由于浏览器和服务器的并发连接数是受限的，通常是4~8个，那么图标显示过慢或者超时的情况就会发生。当然了，像采用CDN，或者按照浏览器的并发数对图片文件进行域名分散存储处理也是再好不过的，但不是都有这样的

2015-12-13 20:35:56 6821

原创解决在IE中获取数据的缓存问题，运行环境为node.js

IE下默认会开启缓存策略，不管是页面还是通过ajax请求的数据都会议一个url，url是uri（统一资源定位符）的实例，url就是资源的标识符。写一个demo进行验证，测试环境：IE8，node.js 0.12.7，页面模板为jade。页面代码：testCache.jade页面上放一个按钮，点下后从后台获取一个自增的数值显示在按钮上。doctype htm

2015-12-01 10:56:48 1843

原创 javascript设计模式实践之策略模式--输入验证

策略模式中的策略就是一种算法或者业务规则，将这些策略作为函数进行封装，并向外提供统一的调用执行。先定义一个简单的输入表单： .form{ width: 400px; height: 200px; #margin: 0

2015-11-27 15:03:30 677

原创 html的块级block、内联inline、内联块级inline-block元素基础

概念块级：block内联：inline内联块级：inline-block 在html元素中，元素会有display属性display属性默认值是block，那么该元素是块级元素。display属性默认值是inline，那么该元素是内联元素。没有元素的display默认值是inline-block。display属性值可以被设置

2015-11-21 23:05:31 3178

原创 jquery的promise实践--连续加载图片

在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能。现在就更进一步，完成一个能够一张一张的连续图片加载的功能。功能：1.一张一张加载图片。2.加载错误，超时后显示加载失败图片。对于功能的要求，肯定会存在对加载状态事件的处理以及完成时回调函数的处理，这样不仅会造成代码上的混乱，甚至破坏各种原则，就不再用普通的方法去写了。

2015-11-12 18:15:42 645

原创 jquery的ready事件的实现机制浅析

页面初始化中，用的较多的就是$(document).ready(function(){//代码}); 或 $(window).load(function(){//代码});他们的区别就是，ready是在DOM的结构加载完后就触发，load是在页面内包括DOM结构，css，js，图片等都加载完成后再触发，显然ready更适合作为页面初始化使用。但有时候也不尽然。需要进一步查看其内部机制。

2015-11-10 14:11:59 441

原创 javascript设计模式实践之代理模式--图片预加载

图片的预加载就是在加载大图片前，先显示一个loading.gif，就算在网络比较慢的时候也能让人知道正在加载，总比啥反应都没有强。下面这段代码就是预加载的一个简单的实现，假设先不处理加载图片时的onError，onAbort，超时的问题。只关注代码的结构。加载图片

2015-11-05 14:49:26 402

原创 html的<meta>标签的作用

标签包含了页面文档的上下文信息。主要包含的上下文信息：1.配置了服务器向浏览器响应时，http协议的head信息，浏览器根据head执行相应操作。2.对页面的描述信息，便于搜索引擎分类查找。在 HTML 中，标签没有结束标签。在 XHTML 中，标签必须被正确地关闭。标签必选的属性是content。标签可选的属性是name

2015-11-02 10:12:18 503

原创 html的<!DOCTYPE>标签初窥

标签必须放在整个html文档的第一行，之后一行就是从标签开始，所有浏览器都支持标签。标签是用来告诉浏览器用哪个html版本解析当前的html页面。其中很多DOCTYPE中都带有DTD声明，DTD就是html文档的规范说明，主要有：strict（严格）、transitional（过度）、frameset（框架），严格类型的DTD包含了大部分的html元素和属性，但一些过时的元素已经不

2015-10-19 19:20:24 415

原创 html中charset和content-language的区别

假设下面的这一段html中meta的两行配置。这里面配置了charset和Content-Language。Content-Language：表示当前页面的语言。charset：表示编码字符集任何一种语言可能都会对应有几种编码字符集。比如中文的编码字符集就有中国国家标准总局编制的GB2312，GB18

2015-10-18 17:54:56 764

原创 for循环的一种简化

数组：var arr = [1, 2, 3, 5, 6];传统的教科书式的循环写法：for(var i=0; i; i++){ console.log(arr[i]);}简化版：for(var i= 0, t; t=arr[i++];){ console.log(t);} 条件表达式部分只要判断为假就会退出循环，只要条件表达式的结果是null

2015-10-10 19:06:25 433

原创画一画javascript原型链

在javascript中，几种数据类型String，Number，Boolean，Object，Function都是函数，可称之为函数对象。可以说拥有prototype属性的都是函数。所有对象都拥有__proto__属性，因为原型链就是靠__proto__的指向进行构建。使用函数，并在该函数前添加new操作符的调用，可构建一个对象，如：function Foo()

2015-10-10 18:32:20 404

原创替换html元素

html：被替换的元素1.使用DOM对象添加元素var elemOld = document.getElementById('divBeReplaced');var elemParent = elemOld.parentNode;var elemNew = document.createElement('div');elemNew.innerHTML = '新

2015-10-10 18:30:30 348

原创添加html元素

html： 1.使用DOM对象添加元素var el = document.createElement('div');el.innerHTML = '用DOM添加的元素';var elContainer = document.getElementById('divContainer');elContainer.appendChild(el); 2.使用

2015-10-10 18:28:22 294

原创 node.js下LDAP查询实践

目标：从一个LDAP Server获取uid=kxh的用户数据LDAP地址为：ldap://10.233.21.116:389 在工程根目录中，先npm一个LDAP的访问库ldpajsnpm install ldapjs在工程根目录中，创建一个app.jsvar ldap = require("ldapjs");//创建LDAP client

2015-10-09 13:38:11 719

原创删除html元素

如果需要将id是‘div2js’的div元素删除。1.使用DOM对象首先需要找到被删元素的父元素，通过父元素将其需要删除的子元素删除。var el = document.getElementById('div2js');el.parentNode.removeChild(el); 2.使用JQuery直接找到并删除。$('#div2js'

2015-10-09 13:36:52 351

原创创建html元素

如果我要创建一个div元素。1.使用DOM对象创建：使用document.createElement('div')方法创建元素。 2.使用JQuery创建：使用$('通过JQuery创建的新元素')的方法直接创建元素。

2015-10-09 13:35:56 276

原创上传文件被nginx全部缓存的问题

nginx采用1.5.6。后端采用nodejs+formidable的方式接受上传文件，本问题的对应与采用什么样的后端没太大关系，这里只是交代一下。问题：在前端页面上将文件上传，nginx没有将每一块收到的文件数据块转发给后端，而是全部缓存了下来，全部收取完成后再一块一块的转发给后端，显而易见的是上传时间就被延长了许多。涉及问题的模块：ngx_http_c

2015-10-09 13:35:01 1501

原创使用nodejs+express(4.x+)实现文件上传

最简单的做法是通过“connect-multiparty”中间件实现上传。通过在项目中npm install connect-multiparty进行安装。用法：var multipart = require('connect-multiparty');var multipartMiddleware = multipart();app.post('/upload',

2015-10-09 13:32:12 710

原创 web前端学习笔记---实现雪花飘落的效果

看了javascript网页特效实例大全中的图片飘下的效果实例，觉得值得动手学习下。就把图片改成雪花图，完成一个雪花飘下的效果。并且，其中有些内容比较陈旧了，那么就学者改掉吧。包括：1.对left和top的操作仅支持IE浏览器，这咋行，必须得支持chrome。2.控制图片下落的过程还要去检索element，不好吧，那就改成数组维持，直接操作数组中维持的对象，

2015-10-09 13:30:19 1795 1

原创 web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别

通过一个demo测试这三个属性的差别。说明：scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。 clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。 offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。该demo就在页面中放一个te

2015-10-09 13:26:09 346

原创 web前端学习笔记---利用css+filter完成简单的图片透明效果

完成简单的透明度控制功能使用filter的功能对图片元素进行透明度控制。支持IE8，Chrome浏览器。 /*透明20%*/ .opacity-20 { filter:alpha(opacity=20); /*支持IE浏览器的filter*/ -webkit-filter:opacity(0.2); /*支持chrome浏览器filter*

2015-10-08 17:52:26 390

原创使用archiver在nodejs下打包

archiver是一个在nodejs中能跨平台实现打包功能的模块，可以打zip和tar包，是一个比较好用的三方模块。使用前先安装archiver模块。npm install archiver建立一段代码var archiver = require('archiver');var fs = require('fs');//被打包文件var files

2015-10-08 17:50:32 616

原创 node.js下when.js(Promises/A)的实践

假设一个业务场景：通过rss地址，获取rss并保存于文件，rss地址保存于文件中。完成该场景的业务需要完成3个任务：1.从文件中读取rss地址。2.获取rss。3.保存于文件。最后将这三个任务进行整合。准备：存放rss地址的文件，address.txt。http://programmer.csdn.net/rss_p

2015-10-08 17:45:41 338

原创交换排序---快速排序算法（Javascript版）

快速排序是对冒泡排序的一种改进。通过一趟排序将要排序的数据分割成独立的两部分，其中一部分的所有数据都比另外一部分的所有数据都要小，然后再按此方法对这两部分数据分别进行快速排序，整个排序过程可以递归进行，最终达到整个数据变成有序序列。假设要排序的数组是A[0]……A[N-1]，首先任意选取一个数据（通常选用数组的第一个数）作为基准数据，然后将所有比它小的数都放到它前面，所有比它大的数都放到它

2015-10-08 17:44:39 293

原创交换排序---冒泡排序算法（Javascript版）

比较相邻的元素。如果第一个比第二个大，就交换他们两个。对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。针对所有的元素重复以上的步骤，除了最后一个。持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。function sort(elements){ for(var i=0;i<elements.length-1;

2015-10-08 17:42:39 258

原创选择排序---堆排序算法（Javascript版）

堆排序分为两个过程：1.建堆。堆实质上是完全二叉树，必须满足：树中任一非叶子结点的关键字均不大于（或不小于）其左右孩子（若存在）结点的关键字。堆分为：大根堆和小根堆，升序排序采用大根堆，降序排序采用小根堆。如果是大根堆，则通过调整函数将值最大的节点调整至堆根。2.将堆根保存于尾部，并对剩余序列调用调整函数，调整完成后，再将最大跟保存于尾部-1（-1，-2，.

2015-10-08 17:40:16 279

原创选择排序---直接选择排序算法（Javascript版）

在要排序的一组数列中，选出最小（或者最大）的一个数与第1个位置的数交换；然后在剩下的数当中再找最小（或者最大）的与第2个位置的数交换，依次类推，直到第n-1个元素（倒数第二个数）和第n个元素（最后一个数）比较为止。function sort(elements){ for(i = 0; i < elements.length; i++){ //将当前位置作为关键位置（最小位置）

2015-10-08 17:38:25 316

原创插入排序---希尔插入排序算法（Javascript版）

取一个小于n的整数作为第一个增量，把序列分组。所有距离为增量的倍数的元素放在同一个组中。先在各组内进行直接插入排序；然后，取第二个增量（第二个一般的初次取序列的一半为增量，以后每次减半，直到增量为1。以下代码在nodejs中执行通过。function shellInsertSort(elements, di){ //从增量的所在位置开始 for(

2015-10-08 17:37:04 378

原创插入排序---直接插入排序算法（Javascript版）

将n个元素的数列分为已有序和无序两个部分。数列：{a1，a2，a3，a4，…，an}将该数列的第一元素视为有序数列，后面都视为无序数列：{{a1}，{a2，a3，a4，…，an}}将无序数列中的元素插入到有序数列的对应位置，插入前通过比大小的方式找到其在有序数列中的对应位置。代码：以下代码在nodejs环境中执行通过。functio

2015-10-08 17:34:50 370

原创检测IP地址的正则表达式

正则表达式：((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?) ((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)红色块代表：第一个字符是2，第二个字符是0到4，第三个字符是任意一位数字。表示200~249。

2015-10-08 17:33:50 276

原创 setTimeout，setInterval，process.nextTick，setImmediate in Nodejs

Nodejs的特点是事件驱动，异步I/O产生的高并发，产生此特点的引擎是事件循环，事件被分门别类地归到对应的事件观察者上，比如idle观察者，定时器观察者，I/O观察者等等，事件循环每次循环称为Tick，每次Tick按照先后顺序从事件观察者中取出事件进行处理。调用setTimeout()或setInterval()时创建的计时器会被放入定时器观察者内部的红黑树中，每次Tick时，会从该

2015-10-08 15:33:07 668

原创 nodejs中exports与module.exports的实践

只要是在nodejs中写自己的文件模块就少不了会遇到module.exports和exports的使用，看别人的代码大多都会使用“module.exports=exports=”怪异的串联用法，一问原因，貌似都是云里雾里，如此写法更像是保守的防止性写法。这种问题除了看源代码外，只能写点代码进行求证。写了两个模块文件，provider.js产生任意类型的对象， customer.js

2015-10-08 15:27:18 268

原创 javascript，一道容易犯错的小题

越是基础的东西，越容易被忽视，接下来就来一道小题，看看我们掌握了没。for(i=0, j=0, l=0; i<10, j<11, l<14; i++, j++, l++){ a = i + j;}上面这段代码执行后，变量“a”的结果是什么？，代码不存在任何错误。答案在下面。。。。。。。。。。。

2015-10-08 15:25:54 238

原创 javascript，clone对象

开发中，打断对象间的引用关系，只想下个副本的情况无处不在，clone一个对象就在所难免了。 JavaScript中，简单的方法就是用JSON函数，将对象stringify成字符串，再parse成一个新对象。要么就是从网上搜个代码，开源社区里面clone的代码还是有不少的。代码虽然可以找得到，但，东西永远是别人的，动手学着码永远是个不变的主题。自己写了两个克隆的函数

2015-10-08 15:21:09 244

原创 CoffeeScript之，存在操作符“?”

在javascript中，我们调用对象变量的某个方法之前，经常会向下面的代码一样判断该对象是否存在，该变量定义过并且值不是null的话就调用相应的方法。if (typeof p !== "undefined" && p !== null) { p.sayHello();}到了CoffeeScript中，上面的代码直接被简化成：p?.sayHello()意思就是变量p定义且被实

2015-10-08 15:18:07 231

原创 javascript之，深扒typeof，instanceof操作符

写javascirpt代码时，typeof和instanceof这两个操作符时不时就会用到，堪称必用。但是！使用它们总是不能直接的得到想要的结果，非常纠结，普遍的说法认为“这两个操作符或许是javascript中最大的设计缺陷，因为几乎不可能从他们那里得到想要的结果”typeof说明：typeof返回一个表达式的数据类型的字符串，返回结果为js基本的数据类型，包括number,bo

2015-10-08 15:07:19 287

原创 npm批量安装需要的模块

用npm安装express，就在命令行中输入：npm i express再用npm安装ejs，就要再在命令行中输入：npm i ejs如果要同时安装很多模块，就要输入多行命令，而且在团队开发中每个人都要这么做一边，虽然不是什么大事，但就是麻烦。npm通过“package.json”文件支持批量安装。这个文件里可以描述依赖的模块，并且可以指定模块的版本。在当前

2015-10-08 15:03:30 4190 1