每日记忆重现

最新推荐文章于 2024-07-19 10:28:14 发布

choushan2059

最新推荐文章于 2024-07-19 10:28:14 发布

阅读量94

点赞数

文章标签： json 数据结构与算法 python

原文链接：https://my.oschina.net/u/3033241/blog/880311

版权

Today memory

现有计划是两天JS一天python 早日将基础回顾完全

###2017.4.20 ####二叉树的基本创建 //创建二叉树初始化 function BST() { var Node = function (key) { this.key = key; this.left = null; this.right = null; }; var root = null;

    //插入二叉树的键
    this.insert = function (key) {
        var newNode = new Node(key);
        if (root === null)
        {
            root = newNode;
        } else {
            insertNode(root,newNode);
        }
    };
	//建立一个插入函数
    var insertNode = function (node,newNode) {
    	//先与左节点进行比较
        if (newNode.key < node.key)
        {	//判断左节点是否为空 空则直接插入
            if (node.left === null)
            {
                node.left = newNode;
            } else {
               //非空则进行递归，与下一个子节点进行操作 
             insertNode(node.left,newNode)
            }
        } else {
            if ( node.right === null )
            {
                newNode.right = newNode;
            } else {
                insertNode(node.right,newNode);
            }
        }

    }
}

###2017.4.21 ####对于js中this的详细解析：

this遵守一个总原则，就是this指的调用函数的那一个对象。当没对象对其进行调用时，则值全局对象Global。当有对象对其进行调用时，则退出全局对象指向当前调用对象。
使用apply（）函数方法可以改变函数的调用对象。为空值时为全局。该方法接受两个参数，第一个是在其中运行函数的作用域，第二个是参数数组。call（）与它功能相同，就是第二个参数call必须将数组[]一个一个列举出来.当然，两个方法第二个参数可省略

swith 语句的设置主要是为了避免让开发者编写过多的if ...else if语句

for...in 语句用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作，对于forin官方的说法是：是一种精准的迭代语句，可用于枚举对象的属性。并且获取对象的属性没有顺序，不可预测。有哟个缺点，当对象的属性为null或者undefined时，不执行循环体()。可以再对数组和对象在进行深入的探讨:在遍历数组对象时，它取的是array的[]属性1,2，3..在取其他对象时，也为取属性(不是属性值).注意，for循环的变量为number类型，而foreach循环则为string类型。在实际使用中，还是建议使用for循环，因为后者容易会被js的拓展数组对象影响导致输出错误

函数的创建问题：

	//注意！！！ 使用不带原括号的函数名是访问函数，带原括号则为调用函数
    //函数为对象，所以与其他引用类型一样，函数名也只是一个指向函数对象的指针，so 没有重载也就是会产生覆盖
    
    //对于两种创建方式来讲，解析器会率先读取前者并使其在任何位置可访问，而后者必须到他当前位置才会对其进行解析，就意味着位于它前的代码不能对他进行调用
    //函数声明式创建
    function xxx(){
    }
    //函数表达式创建
    var the_function = function xxx(){
    };

函数的内部属性：两个特殊对象arguments和this与新增的caller caller是保存着调用当前函数的函数的内容 arguments是一个类数组对象，包含了传入了函数中的所有参数，该对象还有一个callee指针属性，指向拥有这个arguments对象的函数。一般用于递归中减少因为名称造成耦合的现象，如： function xyx (num){ if(num>=1) { return num * xyx(num-1); } else { return num; } } //当函数改名时，会造成耦合 //修改第四行如下： return num * argument.callee(num-1);
函数的另外两个属性与方法：length//表示函数希望接受的参数，prototype//保存所有实例方法，无法枚举so不能使用forin。方法:实际上就是设置函数体内this对象的值。apply（）与call（）//前文说过。需要注意的是。他们的真正用法是扩充函数的作用域，可以直接指向需要指向的作用域：使用此方法的好处是灵活度高，耦合小。 此外，还需要注意此两种方法是暂时改变，还有一个方法bind（）则为重新创建一个实例

	window.color = "red";
    var o = {color:"blue"};
    function saycolor() {
    	consolo.log(this.color);
    }
    saycolor();//red
    saycolor.call(window);//red
    saycolor.call(0);//blue

###2017.4.25 ####彻底弄清事件冒泡！！！今天，在整理工作室纳新思路时，自己实现一个登陆弹窗时出现了问题，问题在于当点击弹窗以外的区域时，弹窗也不会消失，但我的代码没毛病呀，阿西吧。__惨痛的教训，花费了大量时间去找问题的原因所在__源码如下：

//登陆相关
var other = window.document;
var theclick = true;
function login() {
logtxt[0].style.display = "none";
textin[0].onclick = function () {
    //判断是否登陆
 };
//弹出登陆窗相关
adminin[0].onclick = function () {
    logtxt[0].style.display = "block";
    getbody.style.background = "black";

    //当登陆界面弹出时，才出发此事件
    other.onclick = function () {
        choose_bar[0].onclick = function () {
            theclick = false;
            this.style.display = "block";
        };
        if (theclick) {
            logtxt[0].style.display = "none";
            getbody.style.backgroundImage = "url('back3.jpg')";
        }
        theclick = true;
    };
    //退出框弹出
    /*closediv[0].onclick = function () {
        logtxt[0].style.display = "none";
        getbody.style.backgroundImage = "url('back3.jpg')";
    };*/
};
}login();

经过修改后的代码如下，啦啦啦啦：

//问题的原因是：我光顾着思考弹窗关闭事件是在打开弹窗后发生的
//登陆相关
function login() {
var other = window.document;
var theclick = true;
thehover[0].style.display = "none";
textin[0].onclick = function () {
    //判断是否登陆
};
//弹出登陆窗相关
adminin[0].addEventListener("click",function () {
    thehover[0].style.display = "block";
    thehover[0].style.background = "black";
    theclick = false;
},true);
other.onclick = function () {
    if (theclick) {
        thehover[0].style.display = "none";
        thehover[0].style.backgroundImage = "url('back3.jpg')";
    } else {
        thehover[0].style.display = "block";
        thehover[0].style.background = "black";
        theclick = true;
    }
};
logtxt[0].addEventListener("click",function () {
    theclick = false;
},true);
//退出框弹出
closediv[0].addEventListener("click",function () {
    theclick = true;
},true);
}login();

对于冒泡，addEventListener
为此，我专门写了一个demo来阐明js事件冒泡的机理

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

<button type="button" id="two">2</button>
<div id="three" style="width: 200px; height: 200px; background: black">
<button type="button" id="one">1</button>
</div>
<script>
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");

var the_num = true;
var other = window.document;

two.addEventListener("click",function () {
    three.style.display = "block";
    the_num = false;
},true);

other.onclick = function () {
    if (the_num)
    {
        three.style.display = "none";
    } else {
        three.style.display = "block";
        the_num = true;
    }
};
three.addEventListener("click",function(){
    the_num = false;
},true);
one.addEventListener("click",function(){
    the_num = true;
},true);
</script>
</body>
</html>

###2017.4.26

w3c提出的新css属性之----Flex布局（弹性布局）

对于传统的布局来说，多为基于div盒状模型，依赖于三大布局属性（display,position,float）
对于display来说，大致可将html元素分为块状元素（block），内联元素也称作行内元素（inline），inline-block(内联块状元素)。但也远远不止这些，比如我们即将学习的flex。对于以上三种基本元素，详细说明为：
块级元素：

每一个元素都独占一行。
元素高宽可设置。
在宽度不设定的情况下，子级块状元素与父级块状元素宽度保持一致。

内联元素：

与其余元素一行。
高宽不可设置。
宽度为内容的宽，不可变。

内联块状元素：

宽高可设置且可与内联，内联块级元素一行。

再多说一个html元素的嵌套规则：

块级可包块与内联，但内联只可以包内联。
有几个特殊情况：h1~h6，p，dt只可以包内联，li可包块哦

浮动float :__必须设置宽度__对于浮动元素来说，它脱离了文档流，但是__其余区域的内联元素还是会围绕浮动元素，浮动元素本身也具有边界。__这里还有一句话需要唠叨，就是当父元素不为浮动但子元素为浮动时，父元素高度就会为零，可在最后一个子元素之后添加一个空盒子属性为（clear:both;）。
定位position :不用设置宽度，也脱离了文档流，但与浮动不同，它将所有定义元素全部脱离。大致分为：static,absolute,relative,flxed和inherit。第一个和最后一个不用介绍，你懂的。第二到第四依次为---

绝对定位，它的定位是根据父级元素来进行定位，而且定位后它原位置不保留。如父级元素没有进行定位设置则以body为坐标进行设置。可以对父元素进行relative设置从而对子元素使用绝对定位。
相对定位，顾名思义，就是根据元素本身应在的位置进行定位，保留元素初始位置。
固定定位，相对于视窗进行对位，就是以浏览器视窗进行定位，卡在那不动了，哈哈哈哈

#####好好好，现在言归正传回到Flex布局

任何一个元素都可以指定display:flex; 行内元素也行display：inline-flex;注意，当设置这个属性后，子元素的float，clear与vertical-align属性将失效。采用flex布局的元素（称作容器）它的子元素将自动成为flex成员（项目）
基础：首先，存在两根轴：水平的为主轴，垂直的为交叉轴。与当前容器边界的交点分别为main start(end)与cross start(end)。项目主要呈主轴排列，项目占据的主轴空间为main size,交叉轴为 cross size.
容器属性：

flex-direction:决定主轴的方向：为 flex-direction: row | row_reverse | column | column-reverse; 分别-> <- ^ v 即右上下 2.flex-wrap：换行规则：flex-wrap: nowrap | wrap | wrap-reverse;为不换，先在上和先在下 3.。。。我擦，日了狗，好吧，还有更简单的属性设置方式：为 flex-flow: <flex-derection> || <flex-weap> ，row nowrap
justify-content属性规定了项目在主奏上的对其方式：justify: flex-start | flex-end | center | space-between | apance-around
align-items定义项目在交叉轴如何对齐：align-items: flex-start | flex-end | center | baseline(第一行文字对齐) | stretch（全占满）;
align-content：定义了多根轴线的对齐方式: align-content: flex-start | flex-end | center | space-between | space-around | stretch;

项目属性：

order 定义排序，从小到大。
flex-grow与flex-shrink 定义放大缩小比例默认为零
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。
我日。。。又来一个 flex综合前三：flex：none（ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>）；该属性有两个快捷值，为：flex：auto (1 1 auto)；和 flex：none (0 0 auto)；
align-self 设置单个项目与其他项目不一样的对齐方式： align-self: auto | flex-start | flex-end | center | baseline | stretch;

总结：总的来说可以分为两大属性：容器属性和项目属性。

容器属性可以归纳常用的为：flex-flow初始化设定主轴方向与项目的换行规则，justify-content与align-items定义设置项目在主轴和交叉轴的对齐方式。
项目属性可归纳为：flex：auto (1 1 auto)；和 flex：none (0 0 auto)；来确定项目的初始化设定，align-self来单独对项目进行交叉轴的设定。

好，现在进行骰子布局练习

###2017.5.4 ####js AJAX知识梳理

ajax知识，在js中运用ajax大致可以分为以下知识点

对浏览器环境进行检测来新建不同ajax对象

//ie系与chrome系
window.ActiveXObject    window.XMLHttpRequest

ajax对象的建立

var newajax = new ActiveXobject("Microsoft.XMLHTTP)    
var newajax = new XMLHttpRequest

对服务器返回不同状态采用不同的处理方式 每当readyState改变时，就会触发onreadystatechange事件，特别注意。XMLHttpRequest有三个重要的属性：onreadystatechange//每当readyState改变时就会调用该函数,readState//存有XMLHttpRequest五个状态（0.请求未初始化 1.服务器连接已建立 2.请求已接受 3.请求处理中 4.请求已完成且响应就绪），status//200与404.综上，当使用调用函数进行响应后进行的操作时，可以使用双向判定，如：

newajax.onreadystatechange = function () {
    if (newajax.readyState == 4 && newajax.status == 200)
      {
        //执行操作
    }
}

对调用函数进行设置

newajax.onreadystatechange = function () {}

对返回数据进行处理

var get_date = newajax.responseText

设置请求

newajax.open("GET/POST","exmple.php",true/false)

处理请求

newajax.send()

在进行ajax传输时，经常会用到json来进行数据传输，js已经为我们定义好了json的解析工具

var get_json = JSON.parse();

#####JSON常用知识

json格式是一种用于交互的文本格式，目的时取代繁琐笨重的XML
json对值的类型和格式有严格的规定：每一个json对象只能是一个值，要么是简单类型要么是复合类型

复合类型的值只能是数组或对象 2.简单类型只能为四种：字符串，数值（十进制），布尔值和null 3.字符串必须使用双引号表示 4.对象的键名必须放在双引号内 5.数组或者对象最后一个成员后不能加逗号

json的用法： JSON.stringify()与JSON.parse（）
JSON.stringify()用于将一个值转换为字符串，可用parse还原 当原始中有一个成员的值是undefined或者函数，会被过滤为空,如是数组，则会被设置为null,而且会忽略原值中的不可遍历属性。另外，可接受三个参数JSON.stringify(,对象过滤白名单【key,key...】与对象处理函数,每行前加xx增加可读性)//处理函数为

function f(key,value) {
    if(key=== 1)
        {
            vreturn alue + 100;
        }
       if(.....)
}

JSON用于将JSON字符串转换为对象当传入的不是有效格式的话，该方法报错。可使用try进行解析错误。另外，此方法也可接受处理函数. JSON.parse(,)

转载于:https://my.oschina.net/u/3033241/blog/880311

choushan2059

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
每日记忆重现

Today memory现有计划是两天JS一天python 早日将基础回顾完全###2017.4.20####二叉树的基本创建//创建二叉树初始化function BST() {var Node = function (key) {this.key = key;this....
复制链接

扫一扫