月份：2015年9月
动态应用，是相对于网站静态内容而言， 是指以c/c++、php、Java、perl、.net等 服务器端语言开发的网络应用软件，比如论坛、网络相册、交友、BLOG等常见应用。动态应用系统通 常与数据库系统、缓存系统、分布式存储系统等密不可分。
大型动态应用系统平台主要是针对于大流 量、高并发网站建立的底层系统架构。大型网站的运行需要一个可靠、安全、可扩展、易维护的应用系统平台做为支撑，以保证网站应用的平稳运行。
大型动态应用系统又可分为几个子系统：
Web前端系统
负载均衡系统
数据库集群系统
缓存系统
分布式存储系统
分布式服务器管理系统
代码分发系统
Web前端系统
结构图：
大流量网站的底层系统架构
为了达到不同应用的服务器共享、避免单点故障、集中管理、统一配置等目的，不以应用划分服 务器，而是将所有服务器做统一使用，每台服务器都…
Read More
一个小型的网站，可以使用最简单的html静态页面就实现了，配合一些图片达到美化效果，所有的页面均存放在一个目录下，这样的网站对系统架构、性能的要求都很简单。随着互联网业务的不断丰富，网站相关的技术经过这些年的发展，已经细分到很细的方方面面，尤其对于大型网站来说，所采用的技术更是涉及面非常广，从硬件到软件、编程语言、数据库、WebServer、防火墙等各个领域都有了很高的要求，已经不是原来简单的html静态网站所能比拟的。
大型网站，比如门户网站，在面对大量用户访问、高并发请求方面，基本的解决方案集中在这样几个环节：使用高性能的服务器、高性能的数据库、高效率的编程语言、还有高性能的Web容器。这几个解决思路在一定程度上意味着更大的投入。
1、HTML静态化
其实大家都知道，效率最高、消耗最小的就是纯静态化的 html页面，所以我们尽可能使我们的网站上的页面采用静态页面来实现，这个最简单的方法其实也是最有效的方法。但是对于大量内容并且频繁更新的网站，我 们无法全部手动去挨个实现，于是出现了我们常见的信息发布系统CMS，像我们常访问的各个门户站点的新闻频道，甚至他们的其他频道，都是通过信息发布系统 来管理和实现的，信息发布系统可以实现最简单的信息录入自动生成静态页面，还能具备频道管理、权限管理、自动抓取等功能，对于一个大型网站来说，拥有一套高效、可管理的CMS是必不可少的。
除了门户和信息发布类型的网站，对于交互性要求很高的社区类型网站来说，尽可能的静态化也是提高性能的必要手段，将社区内的帖子、文章进行实时的静态化、有更新的时候再重新静态化也是大量使用的策略，像Mop的大杂烩就是使用了这样的策略，网易社区等也是如此。
同时，html静态化也是某些缓存策 略使用的手段，对于系统中频繁使用数据库查询但是内容更新很小的应用，可以考虑使用html静态化来实现。比如论坛中论坛的公用设置信息，这些信息目前的 主流论坛都可以进行后台管理并且存储在数据库中，这些信息其实大量被前台程序调用，但是更新频率很小，可以考虑将这部分内容进行后台更新的时候进行静态 化，这样避免了大量的数据库访问请求。
2、图片服务器分离
大家知道，对于Web服务器来说，不管是Apache、IIS还是其他容器，图片是最消耗资源的，于是我们有必要将图片与页面进行分离，这是基本上大型网站都会采用的策略，他们都有独立的、甚至很多台的图片服务器。这样的架构可以降低提供页面访问请求的服务器系统压力，并且可以保证系统不会因为图片问题而崩溃。
在应用服务器和图片服务器上，可以进行不同的配置优化，比如apache在配置ContentType的时候可以尽量少支持、尽可能少的LoadModule，保证更高的系统消耗和执行效率。
3、数据库集群、库表散列
大型网站都有复杂的应用，这些应用必须使用数据库，那么在面对大量访问的时候，数据库的瓶颈很快就能显现出来，这时一台数据库将很快无法满足应用，于是我们需要使用数据库集群或者库表散列。
在数据库集群方面，很多数据库都有自己的解决方案，Oracle、Sybase等都有很好的方案，常用的MySQL提供的Master/Slave也是类似的方案，您使用了什么样的DB，就参考相应的解决方案来实施即可。
上面提到的数据库集群由于在架构、成本、扩张性方面都会受到所采用DB类型的限制，于是我们需要从应用程序的角度来考虑改善系统架构，库表散列是常用并且最有效的解决方案。
我们在应用程序中安装业务和应用或者功能模块将数据库进行分离，不同的模块对应不同的数据库或者表，再按照一定的策略对某个页面或者功能进行更小的数据库散列，比如用户表，按照用户ID进行表散列，这样就能够低成本的提升系统的性能并且有很好的扩展性。…
Read More
DEMO: http://sources.ikeepstudying.com/menu-mail-qq/
一、这是什么样的一个插件
我们都知道，默认状态下，我们右键web页面，会出现一个上下文菜单，例如下图：
【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)
但是，浏览器默认的右键选项有时候并不是我们所需要的，我们希望浏览器的右键选项菜单更智能，可以灵活自定义。比较有代表性的就是web QQ，例如下面截图：
【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)
QQ邮箱中也是有此功能。
显然这种东西貌似还是蛮强大与实用的，于是我就抽空写了个可以右键自定义上下文菜单的jQuery插件 – smartMenu，直接一行代码绑定，就可以让我们轻松实现页面元素的自定义上下文功能。至于具体如何实用与绑定，就是本文的的主要内容，也即是下文即 将介绍的内容。
二、插件效果、大小、使用等简介
效果
首先，肯定的，自定义的上下文菜单是右键右键某元素（或直接空白处）出现的，其UI风格我沿用了web QQ的相关样式（企鹅的视觉设计还是很赞的），支持分组以及多级菜单，如下效果截图：…
Read More
摘要：本文要实现一个流程图的绘制，最终的目标是实现流程图的自动绘制，并可进行操作，直接点击流程图上对应的方框就可以让后台跑相应的程序。
一、插件介绍
1、图形绘制raphael
其中图形绘制使用了raphael，下载地址：http://raphaeljs.com，它的功能非常强大。
中文帮助教程：http://html5css3webapp.com/raphaelApi.htm#Paper.text
其中有一些DEMO如下：
Web流程图绘制使用raphael
2、鼠标右键菜单栏弹出smartMenu
教程及下载地址：【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)
3、字体大小变化利器插件jquery.fontFlex
随着页面的放大或者缩小，字体也跟随着放大或者缩小。当然，可以设置一个最大值，一个中间值和一个最小值。此效果多半应用于响应式页面中，或者需要适用多版本终端浏览器的页面中
二、使用
1、首先，来看看要实现的流程图的样子。
Web流程图绘制使用raphael
2、代码实现
这里其实就是把上面的插件都引用进来，然后其它的就是用JS不断画椭圆、直线箭头、方框等。
画好之后，添加文字，给方框添加右键点击事件
<!DOCTYPE html>…
Read More
前言
密码，如果设置的太简单，很容易就被攻破，所以很多网站将密码设置的要求设置的挺严格，一般是字母、数字、字符3选2，区分大小写。对于设置得太简单的密码，予以错误提示。或者予以密码等级（低中高）显示，让用户设置高级密码。那如何利用JS实现呢？
代码
链接：https://gist.github.com/xuanfeng/a44f20cb4569d5b4cd5e
function passwordLevel(password) {
var Modes = 0;
for (i = 0; i < password.length; i++) {…
Read More
前言
网站运营久了之后，无法避免会出现图片404的情况，原因可能是图片文件本来就不存在或目前不存在。常见的解决方案是将404图片隐藏或者是替换为默认的图片。
img标签事件属性
img标签可使用的时间属性有：
onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus,…
Read More
DEMO: http://sources.ikeepstudying.com/jsdata/
摘要：本文主要讲了javascript中的基本数据类型，以及值类型和引用类型的区别与使用
一、基本数据类型
在javascript中申明变量使用的关键字都是var，这点与其他的编程语言不尽相同，但是javascript亦含有五种基本的数据类型（也可以 说是简单数据类型），它们分别是：Undefined，Null，Boolean，Number和String。还含有一种复杂数据类型—Object。
(1)、”undefined”——未申明，或者变量的值即为undefined或者未初始化；
(2)、”boolean” ——如果这变量的值是布尔类型；
(3)、”string” ——值是字符串类型；
(4)、”number” ——值是数字类型；
(5)、”object” ——对象或者值为null；
typeof这个关键字是一定要说的，因为javascript是松散类型的，在变量申明时并没有使用与之类型相对应的关键字，如果在代码中想要获知某个变量的基本数据量，就可以使用typeof。这里要注意的是typeof返回的是字符串类型。
(5)、”function” ——函数。
实例验证：
<html>…
Read More
1.遍历数组法
最简单的去重方法， 实现思路：新建一新数组，遍历传入数组，值不在新数组就加入该新数组中；注意点：判断值是否在数组的方法“indexOf”是ECMAScript5 方法，IE8以下不支持，需多写一些兼容低版本浏览器代码，源码如下：
// 最简单数组去重法
function unique1(array){
var n = ; //一个新的临时数组
//遍历当前数组
for(var i = 0; i <…
Read More
前言
最近又写了个网站，也是基于wordpress，LEE周刊官网：www.leeweekly.com。这个网站和轩枫阁的部分功能有所不同，部分功能困扰了挺久，通过Google搜索到了各种解决方案，记录成文备忘。
LEE周刊新版PC官网设计开发总结：http://t.cn/RyzrUD4
functions.php
下面根据需求，对各种能实现进行简单介绍。
先对functions.php文件进行介绍，通过代码实现各功能。
1. widgets sidebar 侧边栏小工具
wordpress二次开发技巧-functions.php篇
/** widgets sidebar 侧边栏小工具*/
if( function_exists('register_sidebar'<span class="crayon-sy">) ) {
…
Read More
SourceTree是个git的GUI软件。
教程将“使用Git”那个小节可视化，更为直观。
第一次启动的时候选择忽略，然后直接进入界面。
使用SourceTree
填入git地址与注册邮箱即可
例如mindset这本书的git地址是：http://182.92.1.69:10080/openmind/mindset.git
其它的书，仿照这种格式，将mindset.git替换成相应名字即可，可在书籍管理界面找到git地址
使用SourceTree
注意：请新建一个独立的空文件夹，如图中的“reading”，防止文档混乱，增加学习成本和出错概率。
完成后是这样
使用SourceTree
进入主界面
使用SourceTree
这时候可以在本地文件夹中操作，任何操作，sourcetree都会察觉到，然后显示在窗口，这时候需要将更改的文件加入缓存，然后上传，如图：
使用SourceTree
使用SourceTree
使用SourceTree
注意：
Commit记得留下更改的痕迹，甚至可以每次更改都commit一次，然后一口气push上去。
push左边那个实心剪头，pull的意思是将服务器的更改和本地合并，这样当别人更改提交后，保证本地和服务器最新版一样。（建议每次准备更改前都pull一遍）…
Read More
本文主要阐述使用js实现思维导图的关键技术点，如果还不知道什么是思维导图的同学，请自行度娘。以下是demo和源码的传送门：
demo：http://sources.ikeepstudying.com/mindmaptree-master/
源码：http://github.com/RockyRen/mindmaptree/tree/master
下载：mindmaptree-master
在源码中我使用了svg绘制思维导图。与canvas相比，svg将图像当成对象，我们可将思维导图中节点和线等图形表现为对象，而且svg更适合用于动态交互的应用
下面介绍几个关键技术点：
子节点位置的重绘
一个基本的思维导图工具应该拥有增加节点和删除节点的功能。在某个节点上增删节点时，为了使得所有子节点的高度相对于该节点垂直居中，都会重新渲染子节点的垂直位置。
如图1所示，首先求得父节点的中心点F的坐标为(hfx, hfy)，设父节点与子节点的水平距离为interval，父节点的宽为parentWidth。作水平线段FC，C点的横坐标即为子节点的横坐标childX。如下图所示：
使用js实现思维导图
为了让子节点间垂直隔开，每一个子节点上下都有补白，所以一个子节点所占的区域高度为该子节点的节点高度加上两个补白高度。迭代所有子节点，求取所有子节 点的区域高度areaHeight，然后在线段FC的C点上作一条长度为areaHeight的垂直平分线AB，所有子节点的垂直区域都在垂直平分线AB 内，这样可以保证所有子节点的高度相对于该节点垂直居中。如下图所示：
使用js实现思维导图
我们需要求得每一个子节点的垂直坐标childY。首先求得A点的垂直坐标startY = hfy –…
Read More
为什么先讲数组
数据结构可以简单的被分为线性结构和非线性结构。
线性结构大致包括：
数组（连续存储）；
链表（离散存储）；
栈（线性结构常见应用，由链表或数组增删和改进功能实现）；
队列（线性结构常见应用，由链表或数组增删和改进功能实现）；
非线性结构大致包括：
树；
图；
其中，数组是应用最广泛的数据存储结构。它被植入到大部分编程语言中。由于数组十分容易懂，所以它被用来作为介绍数据结构的起点非常合适。
JavaScript数组基础知识
在ECMAScript中数组是非常常用的引用类型了。ECMAScript所定义的数组和其他语言中的数组有着很大的区别。那么首先要说的就是数组在js中是一种特殊的对象。
特点：
数组是一组数据的线性集合；
js数组更加类似java中的容器。长度可变，元素类型也可以不同；
数组的长度可以随时修改（length属性）；
常用操作方法：
push、pop
shift、unshift…
Read More
为什么要使用数据结构和算法（程序=数据结构+算法）
数据结构是对在计算机内存中（有时在磁盘中）的数据的一种安排。包括数组、链表、栈、二叉树、哈希表等。 算法是对这些结构中的数据进行各种处理。比如，查找一条特殊的数据项或对数据进行排序。
举一个简单的索引卡的存储问题，每张卡片上写有某人的姓名、电话、住址等信息，可以想象成一本地址薄，那么当我们想要用计算机来处理的时候，问题来了：
如何在计算机内存中安放数据？
所用算法适用于100张卡片，很好，那1000000张呢？
所用算法能够快速插入和删除新的卡片吗？
能够快速查找某一张卡片吗？
如何将卡片按照字母进行排序呢？
事实上，大多数程序比地址簿要复杂得多，想象一下航班预订系统的数据库，存储了旅客和航班的各种信息，需要许多数据结构组成。如果您很清楚这些问题，那么请您对我的博文给出宝贵意见，如果不清楚，那么在我的博文中可以给您一些适当的指引。
随着NodeJs技术的发展，可以在服务器端使用javascript，控制MongoDB进行持久化数据存储。这就需要一些复杂的数据结构和算法来提高程序的性能，仅仅使用数组和for循环来处理数据是远远不够的。
数据结构概述
数据结构
优点
缺点
数组
插入快，如果知道下标，可以非常快的存取
查找慢，删除慢，大小固定
有序数组
比无序数组查找快…
Read More
我们在电商平台购买商品时，在商品列表页根据品牌、款式、价格范围等条件进行筛选查询，当点击某个条件时，在页面上会显示用户所选择的条件集合，并且将对应的符合条件的商品信息展示出来。那么今天我们使用jQuery来实现这一前端效果。
查看演示下载源码
HTML
首先，我们将查询条件分类，在页面中布置条件容器li.select-list和已选择的条件容器div.select-result。
<ul class="select">
<li class="select-list">
<dl id="select1">
<dt>上装：</dt>
