反向代理以及负载均衡配置

发表于 2018-05-24

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    upstream firsttest {
      server IP地址1;
      server IP地址2;
    }
    server {
        listen       80;
	location / {
        	proxy_pass  http://firsttest;
	}
    }
}

Ubuntu我的 nginx.conf 在路径 /etc/nginx 下面

CentOS我的 nginx.conf 也在这个路径下面

nginx基本配置与说明

发表于 2018-05-24

#####运行用户
user nobody;

#####启动进程,通常设置成和cpu的数量相等
worker_processes 1;

#####全局错误日志及PID文件
#error_log logs/error.log;

#error_log logs/error.log notice;

#error_log logs/error.log info;

#pid logs/nginx.pid;

#工作模式及连接数上限
events {

#epoll是多路复用IO(I/O Multiplexing)中的一种方式,
#仅用于linux2.6以上内核,可以大大提高nginx的性能
use   epoll; 
#单个后台worker process进程的最大并发链接数    
worker_connections  1024;
# 并发总数是 worker_processes 和 worker_connections 的乘积
# 即 max_clients = worker_processes * worker_connections
# 在设置了反向代理的情况下，max_clients = worker_processes * worker_connections / 4  为什么
# 为什么上面反向代理要除以4，应该说是一个经验值
# 根据以上条件，正常情况下的Nginx Server可以应付的最大连接数为：4 * 8000 = 32000
# worker_connections 值的设置跟物理内存大小有关
# 因为并发受IO约束，max_clients的值须小于系统可以打开的最大文件数
# 而系统可以打开的最大文件数和内存大小成正比，一般1GB内存的机器上可以打开的文件数大约是10万左右
# 我们来看看360M内存的VPS可以打开的文件句柄数是多少：
# $ cat /proc/sys/fs/file-max
# 输出 34336
# 32000 < 34336，即并发连接总数小于系统可以打开的文件句柄总数，这样就在操作系统可以承受的范围之内
# 所以，worker_connections 的值需根据 worker_processes 进程数目和系统可以打开的最大文件总数进行适当地进行设置
# 使得并发总数小于操作系统可以打开的最大文件数目
# 其实质也就是根据主机的物理CPU和内存进行配置
# 当然，理论上的并发总数可能会和实际有所偏差，因为主机还有其他的工作进程需要消耗系统资源。
# ulimit -SHn 65535

}

http {

#设定mime类型,类型由mime.type文件定义
include    mime.types;
default_type  application/octet-stream;
#设定日志格式
log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                  '$status $body_bytes_sent "$http_referer" '
                  '"$http_user_agent" "$http_x_forwarded_for"';
access_log  logs/access.log  main;
#sendfile 指令指定 nginx 是否调用 sendfile 函数（zero copy 方式）来输出文件，
#对于普通应用，必须设为 on,
#如果用来进行下载等应用磁盘IO重负载应用，可设置为 off，
#以平衡磁盘与网络I/O处理速度，降低系统的uptime.
sendfile     on;
#tcp_nopush     on;
#连接超时时间
#keepalive_timeout  0;
keepalive_timeout  65;
tcp_nodelay     on;
#开启gzip压缩
gzip  on;
gzip_disable "MSIE [1-6].";
#设定请求缓冲
client_header_buffer_size    128k;
large_client_header_buffers  4 128k;
#设定虚拟主机配置
server {
    #侦听80端口
    listen    80;
    #定义使用 www.nginx.cn访问
    server_name  www.nginx.cn;
    #定义服务器的默认网站根目录位置
    root html;
    #设定本虚拟主机的访问日志
    access_log  logs/nginx.access.log  main;
    #默认请求
    location / {
        #定义首页索引文件的名称
        index index.php index.html index.htm;   
    }
    # 定义错误提示页面
    error_page   500 502 503 504 /50x.html;
    location = /50x.html {
    }
    #静态文件，nginx自己处理
    location ~ ^/(images|javascript|js|css|flash|media|static)/ {
        #过期30天，静态文件不怎么更新，过期可以设大一点，
        #如果频繁更新，则可以设置得小一点。
        expires 30d;
    }
    #PHP 脚本请求全部转发到 FastCGI处理. 使用FastCGI默认配置.
    location ~ .php$ {
        fastcgi_pass 127.0.0.1:9000;
        fastcgi_index index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
    #禁止访问 .htxxx 文件
        location ~ /.ht {
        deny all;
    }
}

}
`

函数式编程DEMO

发表于 2018-05-24

var memoize = function(f) {
    var cache = {};
    return function() {
        var arg_str = JSON.stringify(arguments);
        cache[arg_str] = cache[arg_str] || f.apply(f, arguments);
        return cache[arg_str];
    };
};

var squareNumber  = memoize(function(x){ return x*x; });

squareNumber(4);
//=> 16

squareNumber(4); // 从缓存中读取输入值为 4 的结果
//=> 16

squareNumber(5);
//=> 25

squareNumber(5); // 从缓存中读取输入值为 5 的结果
//=> 25

函数式编程——柯里化

发表于 2018-05-24

function curry(fn) {
    const g = (...allArgs) => allArgs.length >= fn.length ?
        fn(...allArgs) : 
        (...args) => g(...allArgs, ...args);
    return g;
}

函数式编程——单例模式

发表于 2018-05-24

师兄写的，，，忘了地址了

// 这里我们创建了一个单例模式
let single = function (fn) {
    let ret;
    return function () {
        return ret || (ret = fn.apply(this, arguments));
    }
};

let bindEvent = single(function () {
    // 虽然下面的renders函数执行3次，bindEvent也执行了3次
    // 但是根据单例模式的特点，box上绑定的click事件只绑定了1次
    // document.getElementById('box').onclick = function() {
    //     alert('click');
    // }
    document.getElementById('box').addEventListener('click', function () {
        console.log('click')
    })
    return true;
});

let renders = function() {
    console.log('渲染');
    bindEvent();
}

renders();
renders();
renders();

函数式编程——判断类型

发表于 2018-05-24

// 返回一个判断类型的函数
function isType(Type) {
    return function (val) {
        return Object.prototype.toString.call(val) === `[object ${Type}]`
    }
}
isFunction = isType('Function');
isString = isType('String');
isDate = isType('Date');
isNumber = isType('Number'); // NaN 也是number
isObject = isType('Object');
isUndefine = isType('Undefined');
isNull = isType('Null')

事件代理——jQuery-bind()方法

发表于 2018-05-24

首先是样式美化（仅仅是为了好看）：

ul {
	margin: 0;
	padding: 0;
	font-size: 0;
}

li {
	display: inline-block;
	font-size: 15px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	cursor: pointer;
	border-radius: 20%;
	transition: border-radius 1s, background-color .5s, color .5s;
}

li:hover {
	background-color: rgba(0,0,0,.3);
	border-radius: 50%;
	color: #fff;
}

html内容（一个容器，加上id方便js选取）：

1	<ul id="ul"></ul>

这里我们使用artTemplate做数据的渲染：

<script type="text/javascript" src="js/template-web.js" ></script>
<script type="text/template" id="tpl">
	<% for(var i = 0; i < 9; i++){ %>
		<% if (i<num) { %>
			<li><%= i %></li>
		<% } else { %>
			<li><%= i %></li>
		<% } %>
	<% } %>
</script>

注意引入template-web.js
将模板书写到script标签里面，注意：type="text/template"

// 定义一个方法
/*
 * pr 代理事件的父级容器
 * ch 绑定时间的子元素
 * data 需要传入的数据
 * fn 回调
 */
function bind (pr, ch, data, fn) {
	document.getElementById(pr).addEventListener('click', function (event) {
		if (event.target.localName === ch) {
			fn.call(event.target, da)
		}
	})
}
// 1.先绑定时间
bind('ul', 'li', {name:'张三'}, function (d) {
	console.log(d, this.innerHTML)
})

// 定义要数据
var da = {
	num: 5
}

// 用模板生成字符串
var html = template('tpl', da);
// 在容器`ul`中插入元素
document.getElementById('ul').innerHTML = html;

在上面的代码中，我们先将事件绑定，在通过模板拼接字符串，在页面中插入元素

如果不通过事件代理的方式直接通过绑定事件

document.getElementById(''ul).addEventListener("click", function () {
  console.log(123);
})
// 或者
document.getElementById(''ul).onclick = function () {
  console.log(123);
}

再之后插入的元素是没有click事件的。

swiper——轮播图

发表于 2018-05-24

效果如下图：

轮播图

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="css/swiper.min.css">
    <style>
      html, body {
        position: relative;
        height: 100%;
      }
      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
      }
      .swiper-container {
        width: 100%;
        height: 150px;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        width: 70%;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
    </style>
</head>
<body>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
  </div>
  <script src="js/zepto.min.js"></script>
  <script src="js/swiper.min.js"></script>
  <script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 'auto',
      loopedSlides: 10,
      loop : true,
      spaceBetween: 10,
      centeredSlides: true,
      autoplay: {
        delay: 1000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      }
    });
  </script>
</body>
</html>

JS循环绑定事件

发表于 2018-05-24

点击li 打印对应内容的数字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	  <ul>
	  	<li>1</li>
	  	<li>2</li>
	  	<li>3</li>
	  	<li>4</li>
	  	<li>5</li>
	  </ul>
	</body>
</html>

// 方法一：
var list_li = document.getElementsByTagName('li');
for (var i = 0; i < list_li.length; i++) {
	(function (i) {
		list_li[i].onclick = function () {
			console.log(i + 1)
		}
	})(i)
}

// 方法二：
var list_li = document.getElementsByTagName('li');
for (var i = 0; i < list_li.length; i++) {
	list_li[i].onclick = function () {
		console.log(this.innerHTML);
	}
}

// 方法三：
var list_li = document.getElementsByTagName('li');
for (var i = 0; i < list_li.length; i++) {
	list_li[i].index = i;
	list_li[i].onclick = function () {
		console.log(this.index + 1)
	}
}

方法四：
var list_li = document.getElementsByTagName('li');
for (var i = 0; i < list_li.length; i++) {
	list_li[i].onclick = function (n) {
		return function () {
			console.log(list_li[n].innerHTML)
			console.log(n + 1)
		}
	}(i)
}

jQuery代码-2

发表于 2018-05-24

// jQuery 单例
(function ($) {
    var index = {
        init: function () {
            // 一些jQuery对象的储存
            this.render();
            // 事件的绑定
            this.bind();
            this.ajaxSeeting()
        },
        datas: {
            ajaxPath: 'http://localhost/test/api.php',
            currentRequests: {},
            id: 1
        },
        ajaxSeeting: function () {
            var me = this;

            // 设置Ajax请求的默认值
            $.ajaxSetup({
                url: me.datas.ajaxPath,
                dataType: 'json',
                beforeSend: function (xhr, settings) {
                    settings.data = settings.data + '&k=2&v=9'
                },
                statusCode: {
                    404: function () {
                        // Do something
                        console.log(404)
                    },
                    405: function () {
                        // Do something
                        console.log(405)
                    },
                    500: function () {
                        // Do something
                        console.log(500)
                    },
                    502: function () {
                        // Do something
                        console.log(502)
                    }
                }
            });

            // 预过滤器
            $.ajaxPrefilter(function (options, originalOptions, jqXHR) {
                console.log(options, originalOptions, jqXHR)
                // 自定义abortOnRetry选项被设置为true
                // 那么调用$.ajax()会自动中止请求相同的URL：
                if (options.abortOnRetry) {
                    if (me.datas.currentRequests[options.url]) {
                        me.datas.currentRequests[options.url].abort();
                    }
                    me.datas.currentRequests[options.url] = jqXHR;
                }

                // 代理服务器跨域请求
                // if (options.crossDomain) {
                //     options.url = 'http://localhost/test' + decodeURIComponent(options.url);
                //     options.crossDomain = false;
                // }
            });
        },
        render: function () {
            var me = this;
            me.btn = $('#btn');
        },
        bind: function () {
            var me = this;
            me.btn.on('click', $.proxy(me['_do'], this, me.datas.id))
        },
        _do: function (id) {
            $.ajax({
                // 同一域中强制跨域请求
                crossDomain: true,
                abortOnRetry: true,
                type: 'POST',
                // content: this,
                data: {
                    id: id
                }
            }).done(function (data, textStatus, jqXHR) {
                console.log('Success...')
            }).fail(function (jqXHR, textStatus, errorThrown) {
                console.log('Error...')
            }).always(function (jqXHR, textStatus, errorThrown) {
                console.log('Complete...')
            })
        }
    };
    index.init();
    exports = index;
})(jQuery);