lizhenqiu blog

// 缓存是怎么使用的？
// 一般的缓存结构就是：键值对（对象 或者 数组）
// var obj = {};
// var arr = [];
// 使用缓存的方式：
// 1 先去缓存中查找有没有键对应的数据
// 2 如果有，就直接拿过来使用
// 3 如果没有，就计算或者是查询到，然后，要放到缓存中！
// 4 以后，就通过缓存来去数据
// 简化的步骤：先去缓存中查询有没有，如果没有就计算，并将结果放到缓存中
// 问题：缓存放到什么位置去？？
// 如果是全局变量，此时，任何人都能修改全局变量的内容
// 那就造成：数据不准确
// var obj = {};

// 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89....
var count = 0;
var fib = (function() {
// 使用闭包，将缓存放到闭包中去，
// 此时，就对这个缓存起到了保护的作用
// var cache = {};
var cache = [];

// 这个函数使用来计算：斐波那契数列
return function(n) {
count++;
// 1 先去缓存中查找有没有该键对象的值
if(cache[n] !== undefined) {
// 2 如果有，就直接返回当前的值
return cache[n];
}

// 3 如果没有，就计算，然后要添加到缓存中去
if(n === 0 || n === 1) {
// return 1;
cache[n] = 1;
return cache[n];
}

var temp = arguments.callee(n - 1) + arguments.callee(n - 2);
// 放到缓存中去
cache[n] = temp;
return cache[n];
};
})();

fib(40);

console.log(count);// 计算次数为：79次。

<script type="text/javascript">

function downloadJSAtOnload() {
  
    var element = document.createElement("script");

    element.src = "defer.js";

    document.body.appendChild(element);

}

if (window.addEventListener)

    window.addEventListener("load", downloadJSAtOnload, false);

    else if (window.attachEvent)

   window.attachEvent("onload", downloadJSAtOnload);

   else window.onload = downloadJSAtOnload;

</script>

var a = {};
var b = '我是b1';
a.name = 'aaaa';
(function(a,b) {
    a.name = 'bbbb';
	b='我是b2';
    a = {};
    a.name = 'cccc';
    console.log(a.name);
	console.log(b);
})(a,b); 
console.log(a.name);
console.log(b);

.file {
　　position: relative;
　　height: 40px;
　　line-height: 40px;
}
.file label {
　　display: inline-block;
}
.userdefined-file {
　　position: absolute;
　　top: 0;
　　left: 60px;
　　z-index: 2;
　　width: 300px;
　　height: 40px;
　　line-height: 40px;
　　font-size: 0;  /*应对子元素为 inline-block 引起的外边距*/
}
.userdefined-file input[type="text"] {
　　display: inline-block;
　　vertical-align: middle;
　　padding-right: 14px;
　　padding-left: 14px;
　　width: 220px;
　　box-sizing: border-box;
　　border: 1px solid #ccc;
　　height: 40px;
　　line-height: 40px;
　　font-size: 14px;
　　overflow: hidden;
　　text-overflow: ellipsis;
　　white-space: nowrap;
}
.userdefined-file button {
　　display: inline-block;
　　vertical-align: middle;
　　width: 80px;
　　text-align: center;
　　height: 40px;
　　line-height: 40px;
　　font-size: 14px;
　　background-color: #f54;
　　border: none;
　　color: #fff;
　　cursor: pointer;
}
.file input[type="file"] {
　　position: absolute;
　　top: 0;
　　left: 60px;
　　z-index: 3;
　　opacity: 0;
　　width: 300px;
　　height: 40px;
　　line-height: 40px;
　　cursor: pointer;
}

body { margin: 0; }
input { padding: 0; margin: 0; border: 0; }
.female, .male {
    position: relative;
    height: 40px;
    line-height: 40px;
    margin-left: 40px;
}
.sex label {
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    cursor: pointer;
}
.sex input {
    z-index: 3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

<form action="">
    <div class="sex">
        <div class="female">
            <label for="female">女</label>
            <input type="radio" name="sex" id="female">
            <span class="female-custom"></span> <!-- 同下面的 span 一样作为自定义的元素 -->
        </div>
        <div class="male">
            <label for="male">男</label>
            <input type="radio" name="sex" id="male">
            <span class="male-custom"></span>    
        </div>
    </div>
</form>

body { margin: 0; }
input { padding: 0; margin: 0; border: 0; }
.female, .male {
    position: relative; /* 设置为相对定位，以便让子元素能绝对定位 */
    height: 40px;
    line-height: 40px;
    margin-left: 40px;
}
.sex label {
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    cursor: pointer;
}
.sex input {
    z-index: 3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto; /* 这里及以上的定位，可以让该元素竖直居中。(top: 0; bottom: 0;) */
    opacity: 0;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.sex span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto;
    display: block;
    width: 25px;
    height: 25px;
    border: 1px solid #000;
    border-radius: 50%;
    cursor: pointer;
}        
.sex span.active {
    background-color: #000;            
}

<form action="">
    <div class="fruit">
        <div class="apple">
            <label for="apple">苹果</label>
            <input type="radio" name="fruit" id="apple">
            <div class="user-defined">
                <span class="circle"></span>
            </div>
        </div>
        <div class="banana">
            <label for="banana">香蕉</label>
            <input type="radio" name="fruit" id="banana">
            <div class="user-defined">
                <span class="circle"></span>
            </div>
        </div>
        <div class="orange">
            <label for="orange">橘子</label>
            <input type="radio" name="fruit" id="orange">
            <div class="user-defined">
                <span class="circle"></span>
            </div>
        </div>
    </div>
</form>

* { box-sizing: border-box; }

body { padding: 50px; }

input { padding: 0; margin: 0; border: 0; }

.fruit:before { content: ""; display: table; }

.fruit:after { content: ""; display: table; clear: both; }

.fruit > div { position: relative; float: left; margin-right: 50px; width: 80px; height: 40px; line-height: 40px; }

.fruit > div:last-child { margin-right: 0; }

.fruit label { display: block; width: 50px; height: 40px; line-height: 40px; cursor: pointer; }

.fruit input { z-index: 3; display: block; opacity: 0; position: absolute; top: 0; bottom: 0; left: 50px; margin: auto; width: 30px; height: 30px; cursor: pointer; }

.fruit .user-defined { z-index: 2; position: absolute; top: 0; bottom: 0; left: 50px; margin: auto; width: 30px; height: 30px; border: 1px solid #000; border-radius: 50%; cursor: pointer; }

.fruit .user-defined span.circle  { display: block; width: 24px; height: 24px; margin-top: 2px; margin-left: 2px; background-color: transparent; border-radius: 50%; }

.fruit .user-defined span.active  { background-color: #000; }

JavaScript整理
JavaScript是脚本语言

常用对话框：

alert()——警告对话框，作用是弹出一个警告对话框
confirm()——带确定和取消按钮，返回True或false
prompt()——弹出一个可以输入内容的对话框
JavaScript语法

基本数据类型与C#基本一样，万能变量var——可以随便存储其它类型的值，可以直接使用

显式转换：

parseint()——转换为整数

parsefloat()——转换为小数

运算符：与C#一样

数学运算符：+ - * / % ++ --；

关系运算符：==  !=  >  >=  <  <=；

逻辑运算符:&&  ||  !；

其它运算符:+= -= *= /= %= ?:

分支语句：

if...else

循环语句：

for（）

数组：

new Array（）;——类型固定，长度不固定

数组属性：a.length；数组元素的个数

函数：

function 函数名(参数){}

function(){}——匿名函数

window对象：

window.open("打开的网址""打开的位置")
window.opener——打开此页面的上一个页面
window.close()——关闭当前页面
window.navigate("url")——超链接功能
window.moveTo(x,y)——移动浏览器至某一位置
window.resizeTo(x,y)——设置浏览器的宽高
window.scrollTo(x,y)——锚点功能
定时器：

window.setTimeout(function(){},间隔执行的时间)——等待多久后执行，仅执行一遍
window.setInterval(function(){},间隔执行时间)——每隔多长时间执行一次，不会停止
window.history:

window.history.back()——页面后退
window.history.forward()——页面前进
window.history.go(n)——前进后退,n为正数则前进n个页面，为负数则后退n个页面
window.location.href="url"  ——超链接，主要
window.status——操作页面底部工具条的对象
window.document：

docunment.getElementById("id")；根据id找，最多找一个；
docunment.getElementsByName("name")；根据name找，找出来的是数组；
docunment.getElementsByTagName("name")；根据标签名找，找出来的是数组；
docunment.getElementsByClassName("name") 根据classname找，找出来的是数组；
操作内容：

普通元素：

1.innerHTML：赋值：

var a= document.getElementById("id");

 a.innerHTML = "<h1>aaaaaaa</h1>";

有<h1></h1>元素标记会被编译

取值：会将此元素内的所有内容包括元素标记都取出来

2.interText

赋值：会将赋的东西原样呈现

取值：只取文本内容

 表单元素：所有表单元素取值赋值全用value

操作属性：

 添加修改属性：对象.setAttribute("属性名","值")

如果没有此属性，那么会添加进去
如果已经有了此属性，那么会修改此属性的值

删除属性：对象.removeAttribute("属性名")

获取属性：对象.getAttribute("属性名")

操作样式

添加、修改样式：对象.style.样式名称=值

获取样式：对象.style.样式名称

相关元素

var a = document.getElementById("id");

取同辈的上一个和下一个元素：

var b = a.previousSibling，找a的上一个同辈元素

var b = a.nextSibling，找a的下一个同辈元素

取父级元素：var b = a.parentNode，找a的上一级父级元素

取子级元素：childNodes[n]找第几个

注意：回车和空格都算作一个元素

function student(){

　　this.name　//student所包含的名字属性

　　this.sex　　//student所包含的性别属性

　　this.show=function(){

　　　　console.log(this.name);　　//student所包含的动作

　　}

}

function student(object()){

　　var o=new object();

　　o.name=name;

　　o.nsex=sex;

　　o.show=function(){

　　　　console.log(this.name);　　//student所包含的动作

　　};

　　return o;

　　}

<html>
<head>
<title>欢迎来到手机版</title>
<script>
var ua = navigator.userAgent;
var US = {
    Android:function () {   //安卓
        return ua.match(/Android/i)?true:false;
    },
    BlackBerry:function() {  //黑莓
        return ua.match(/BlackBerry/i)?true:false;
    },
    IOS:function(){  //IOS
        return ua.match(/iPhone|iPad|iPod/i)?true:false;
    },
    //这个其实没啥必要了,可以不用判断这个，毕竟IE是一种古老的东西
    Windows:function() {  
        return ua.match(/IEMobile/i)?true:false;
    },
    isMobile:function() {  //移动设备
        return US.Android()||US.BlackBerry()||US.IOS()||US.Windows();
    }
}
if(US.isMobile()==false){
    window.location = "http://www.baidu.com";     //如果是电脑访问 ，则跳入指定网址。在此以百度为例
}
</script>

</head>
<body><h1>欢迎来到手机版</h1></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现路由</title>
</head>
<body>
    <a href=" ">white</a>
    <a href="#/green" >green</a>
    <a href="#/blue" >blue</a>
    <a href="#/yellow" >yellow</a>
</body>
</html>

<script>

    function Route(){
    }
    Route.prototype.open=function(route,callback){
        var arr={};
        arr[route]=callback;

        window.addEventListener('hashchange',function(){
            var temp=window.location.hash;
            for(var i in arr){
                if(i==temp.slice(1,temp.length)){
                    arr[i]();
                }
            }
        })
    }
    window.Route=new Route();


    function change(color){
        var body=document.getElementsByTagName('body')[0];
        body.style.backgroundColor=color;
        console.log(color);
    }
    
    Route.open('/',function(){
        change('');
    });
    Route.open('/green',function(){
        change('green');
    });
    Route.open('/blue',function(){
        change('blue');
    });
    Route.open('/yellow',function(){
        change('yellow');
    });

</script>

var a=[3,5,0,9,2,7,5];
function quickSort(arr){
　　var len=a.length;
　　if(len<=1) return arr;

　　function sort(low,height){
　　　　var pivot=a[low];
　　　　var i=low,j=height,t;
　　　　if(i>j) return false;
　　　　while(i!=j){
　　　　　　while(a[j]>=pivot&&i<j){
　　　　　　　　j--;
　　　　　　}
　　　　　　while(a[i]<=pivot&&i<j){
　　　　　　　　i++;
　　　　　　}
　　　　　　if(i<j){//把比pivot大的换到右边，小的换到左边
　　　　　　　　t=a[i];
　　　　　　　　a[i]=a[j];
　　　　　　　　a[j]=t;
　　　　　　}
　　　　}
　　　　//此时i和j指向同一个数字，把这个数字和pivot交换
　　　　a[low]=a[i];
　　　　a[i]=pivot;
　　　　//递归：把pivot左边的数进行一次排序，右边的数进行一次排序
　　　　sort(low,i-1);
　　　　sort(i+1,height);
　　}
　　//调用这个排序的函数
　　sort(0,len-1);
　　return a;
}
alert(quickSort(a));

function permute(input) {
  var permArr = [],
  usedChars = [];
  function main(input){
    var i, ch;
    for (i = 0; i < input.length; i++) {
      ch = input.splice(i, 1)[0];
      usedChars.push(ch);
      if (input.length == 0) {
        permArr.push(usedChars.slice());
      }
      main(input);
      input.splice(i, 0, ch);
      usedChars.pop();
    }
    return permArr
  }
  return main(input);
};
console.log(permute([5, 3, 7, 1]));