macleer的博客

转载 阿里巴巴为什么能抗住90秒100亿？看完这篇你就明白了！

1、概述本文以淘宝作为例子，介绍从一百个并发到千万级并发情况下服务端的架构的演进过程，同时列举出每个演进阶段会遇到的相关技术，让大家对架构的演进有一个整体的认知，文章最后汇总了一些架构设计的原则。2、基本概念在介绍架构之前，为了避免部分读者对架构设计中的一些概念不了解，下面对几个最基础的概念进行介绍。1）什么是分布式？系统中的多个模块在不同服务器上部署，即可称为分布式系统，如Tomcat和数据库分别部署在不同的服务器上，或两个相同功能的Tomcat分别部署在不同服务器上。2）什么是高可

转载 react-router 学习笔记之Link带参数传值

1、通过to='xx/xx'直接条状点击2、to=对象，带参数跳转（pathname, query, hash, state(额外数据）），注意:这些参数都被存放到this.props.location中 <Link to={{pathname:"/select", hash:'#ahash', query:{foo: 'bar', boo:'boz'}, state:{d

转载 【react-router】hashhistory 与 browserhistory有什么区别

使用 hashHistory，浏览器上看到的 url 会是这样的: /#/user/haishanh?_k=adseis使用 browserHistory，浏览器上看到的 url 会是这样的：/user/haishanh看起来当然 browserHistory 很好很理想，但 browserHistory 需要 server 端支持。 而使用hashHistory的时候，因为

转载 ES6解构赋值

数组的解构赋值数组的解构赋值需要左边的变量结构需要等于右边的值的结构，即给对应位置的变量声明对应位置的值，变量的取值由位置决定只要某种数据类型具有迭代器(iterator)接口，就可以使用数组的解构赋值，不一定非是数组es6中具有iterator接口的数据类型有：数组，类数组对象，字符串，Set，Map，Generator函数注：对象不具有iterator接口，需要

转载 React.createClass和extends Component的区别

createClass本质上是一个工厂函数，extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。createClass方式的方法定义使用逗号,隔开，因为creatClass本质上是一个函数，传递给它的是一个Object；而class的方式定义方法时务必谨记不要使用逗号隔开，这是ES6 class的语法规范。Reac

原创 纯CSS垂直居中

1.高度不确定垂直居中transform:translateY(-50%);main> div> I'm a block-level element with an unknown height, centered vertically within my parent. div> main>main {    background

转载 CSS 奇思妙想

转载自：http://sbco.cc/magicCss/html/index.html

原创 WebGL 小计

一。renderer 渲染器//开启Three.js渲染器var renderer;//声明全局变量（对象）function initThree() { width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽 height = document.getElementById('canv

原创 CSS镂空图表原理

借用张大神链接  http://www.zhangxinxu.com/study/201307/background-color-insert-background-image.html##

转载 JS原型对象和原型链

JS原型对象和原型链在Javascript中，万物皆对象，但对象也有区别，大致可以分为两类，即：普通对象Object 和 函数对象Function。一般而言，通过new Function产生的对象是函数对象，其他对象都是普通对象。举例说明：function f1(){ //todo}var f2 = function(){ //todo};var f

原创 js 跨域总结

1.window.domain强制设置相关页面 window.domain相同a.html  document.domain = 'a.com';b.htmldocument.domain = 'a.com';2.window.name  同一窗口，动态改变链接 window.name 是不变的，最多保留2M数据a.htmlwindo

转载 HTML5新特性之Mutation Observer

Mutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知。要概念上，它很接近事件。可以理解为，当DOM发生变动会触发Mutation Observer事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说DOM发生变动立刻会触发相应的事件；Mutation Observer则是异步触发，DOM发生变

转载 javascript中in和hasOwnProperty区别

in操作符只要通过对象能访问到属性就返回true。hasOwnProperty()只在属性存在于实例中时才返回true。使用delete操作符则可以完全删除实例属性，从而让我们能巩固重新访问原型中的属性。function Person(){}Person.prototype.name = "Nicholas";Person.prototype.age = 29;Person.pro

原创 HTML5 canvas drawImage() 方法

定义和用法drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。JavaScript 语法 1在画布上定位图像：context.drawImage(img,x,y);JavaScript 语法 2在画布上定位图像，并规定图像的宽度和高度：cont

转载 ES5中新增的Array方法详细说明

一、前言-索引ES5中新增的不少东西，了解之对我们写JavaScript会有不少帮助，比如数组这块，我们可能就不需要去有板有眼地for循环了。ES5中新增了写数组方法，如下：forEach (js v1.6)map (js v1.6)filter (js v1.6)some (js v1.6)every (js v1.6)indexOf (js v1.6)lastIndexOf (

转载 JS中的call()和apply()方法

1、方法定义call方法:语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]])定义：调用一个对象的一个方法，以另一个对象替换当前对象。说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Globa

原创 圆形径向渐变按钮

转载 ASP.Net MVC3安全升级导致程序集从3.0.0.0变为3.0.0.1

开发环境一般引用的是本机 C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET MVC 3\Assemblies下的System.Web.Mvc.dll，当系统更新时，此文件会更新为高级版本，从而和已经部署到服务器上的System.Web.Mvc.dll版本不一致。从能在线上运行时报下面的错误：Assembly 'TestUnsafe, Versio

原创 备注一下

页面渲染时，如果一个元素的父节点是隐藏的状态，子元素width=100%，通过js获取子元素宽度时，是得不到正确值的。如下：            alert(document.getElementById("AA").offsetWidth);   //显示为100

转载 css计数器详解

就是采用css给一些html元素自动生成编号，比如类似1.3.2这种，先看个效果：对，就是这种类似Word里面很常见的效果，代码如下：style type="text/css">#demo1 ol { counter-reset: section; list-style-type: none; }#demo1 ol li { counter-increment: section;

转载 replace()可以接受回调函数

这是JavaScript最鲜为人知的秘密之一，v1.3中首次引入。大部分情况下，replace()的使用荧光类似下面：alert('10 13 21 48 52'.replace(/\d+/g, '*')); //用 * 替换所有的数字这是一个简单的替换，一个字符串，一个星号。但是，如果我们希望在替换发生的时候有更多的控制，该怎么办呢？我们只希望替换30以下的数值，该怎么办呢？此时

原创 Tween.js各类原生动画运动缓动算法

Linear：线性匀速运动效果；Quadratic：二次方的缓动（t^2）；Cubic：三次方的缓动（t^3）；Quartic：四次方的缓动（t^4）；Quintic：五次方的缓动（t^5）；Sinusoidal：正弦曲线的缓动（sin(t)）；Exponential：指数曲线的缓动（2^t）；Circular：圆形曲线的缓动（sqrt(1-t^2)）；Elastic：指数衰减的正弦曲线缓动；Ba

转载 documentElement 和 body 相关说明

body是DOM对象里的body子节点，即 标签；documentElement 是整个节点树的根节点root，即 标签；DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document

转载 纯CSS实现侧边栏/分栏高度自动相等

#content{overflow:hidden;}.left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background:#cad5eb; float:left;}.right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; backgroun

转载 hasLayout 简介

IE使用Layout概念来控制元素的尺寸和位置。如果一个元素有Layout，它就有自身的尺寸和位置；如果没有，它的尺寸和位置由最近的拥有布局的祖先元素控制。在默认情况下，拥有Layout的元素包括：, , , , , , , , , , , , （注意，和默认不拥有Layout。）凡是具有以下CSS属性的元素，也会拥有布局：pos

转载 三栏网页宽度自适应布局方法，margin负值法

#main {    float:left;    height:100%;    width:100%;}#main #body {    background:#ffe6b8 none repeat scroll 0 0;    height:100%;    margin:0 210px;}

原创 Html5 input[type='file'] 把图片转换成base64

function _addImgFileListener(obj, fun)    {        $(obj).change(function ()        {             try            {                var file = this.files[0];                var reader = ne

转载 javascript中onmouse事件在div中失效问题的解决方法

我们预期只有当鼠标从div中移开的时候才会触发onmouseout事件，可事实上，当我们移到div中的元素时，例如：本例中的a标签时，就会触发 onmousout事件也就是说，移到对象的子对象上，也算onmouseout了。但这往往会达不到我们想要的预期效果。这是由于javascript自身的冒泡特性导致的（即在子元素上触发了事件，并冒泡到了父元素-堆栈后进先出算法）。今天在网上搜了一

转载 C#读写txt文件的两种方法介绍

(1).使用FileStream类进行文件的读取，并将它转换成char数组，然后输出。byte[] byData = new byte[100];        char[] charData = new char[1000];        public void Read()        {            try            {       

原创 CSS3 @media 查询

实例如果文档宽度小于 300 像素则修改背景演示(background-color):@media screen and (max-width: 300px){    body {       background-color:lightblue;    }}CSS 语法@media mediatype and|not|only (med

转载 CSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动

很简单，只要一行代码就搞定了：.wrap-outer { margin-left: calc(100vw - 100%);}或者：.wrap-outer { padding-left: calc(100vw - 100%);}然后就可以庆祝放鞭炮啦！！首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实

转载 ！function()()和~function(){}意义，(function(){}())和(function(){})()区别

就javascript的语法而言，如果一条语句是以function关键字开始，那么这段会被判定为函数定义。而函数定义是不能被立即执行的，这无疑会导致语法的错误（SyntaxError），因此就必须有一个办法，使解析器可以将之识别为函数表达式。解析器识别函数定义的条件是以function关键字开始，那么自然，只要在function关键字的前面有任何其他的元素，就会从函数定义转变为函数表达式，以下

转载 JS: 关于自执行的匿名函数

1. 什么是自执行的匿名函数?   它是指形如这样的函数: (function {// code})();  2. 疑问  为什么(function {// code})();可以被执行, 而function {// code}();却会报错?  3. 分析  (1). 首先, 要清楚两者的区别:        (function {// code})是表达式, f

转载 CSS的单位及css3的calc()及line-height百分比

单位介绍说到css的单位，大家应该首先想到的是px,也就是像素，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的开发，都用到了css3技术，在css3中，新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等等，那现在对这些单位分别做一下详细的介绍吧。em做前端的应该对e

转载 使用IPostBackEventHandler让JavaScript“调用”回传事件

在由ASP.NET所谓前台调用后台、后台调用前台想到HTTP——实践篇（二）通过自己模拟HTML标签事件与服务器交互，讲了ASP.NET的服务器控件是怎么render成HTML后市怎么“调用”后台方法的，有同学看了后问了我个问题：你讲的方式确实可以，但我遇到的问题时这样的，我想让自己写的DIV点击一下提交表单，我是自己写post好呢还是用页面上的__doPostBack方法好呢？我想了一下，觉

转载 Web.config配置文件详解(新手必看)

花了点时间整理了一下ASP.NET Web.config配置文件的基本使用方法。很适合新手参看，由于Web.config在使用很灵活，可以自定义一些节点。所以这里只介绍一些比较常用的节点。xmlversion="1.0"?>注意: 除了手动编辑此文件以外，您还可以使用 Web 管理工具来配置应用程序的设置。可以使用 Visual Studio 中的“网站”->“Asp.Net 配置”选

原创 多坐标点地图全部显示

double min_latitude = 0, min_longitude = 0, max_latitude = 0, max_longitude = 0; double lat = 0, lng = 0; try { for (int i = 0; i < locationData.length(); i++) { JSONObject item = location