今天受到点心理伤害,写点东西补充下

1.盒子模型:

CSS盒子模型

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在 网页设计中常听的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。那么内容(CONTENT)就是盒子里装的东西;而填充(PADDING)就是怕盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料;边框(BORDER)就是盒子本身了;至于边界(MARGIN)则说明盒子摆放的时候的不能全部堆在一起,要留一定空隙保持通风,同时也为了方便取出。在网页设计上,内容常指文字、图片等元素,但是也可以是小盒子(DIV嵌套),与现实生活中盒子不同的是,现实生活中的东西一般不能大于盒子,否则盒子会被撑坏的,而CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏的。填充只有宽度属性,可以理解为生活中盒子里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的,边界就是该盒子与其它东西要保留多大距离。
每个HTML标记都可看作一个盒子;
每个盒子都有:边界、边框、填充、内容四个属性;
每个属性都包括四个部分:上、右、下、左;这四部分可同时设置,也可分别设置;
====================================================================================================

2.原型链:[在数据结构中学习过链表,链表中一个位置相当于指针,指向下一个结构体]

任何一个对象都有一个prototype的属性,在js中记录为:_proto_:,于是_proto_也一样,每当你去定义一个prototype的时候,相当于把该实例的_proto_指向一个结构体,那么这个被指向的结构体就成为该实例的原型。

var foo = {

x:10,

y:20

};

首先foo是个对象,所以他可定有_proto_属性,只是这里没有显式的指出来,foo会预留一个这样的属性,

__proto__默认的也有指向。它指向的是最高级的object.prototype,而object.prototype的__proto__为空。 

如下图所示:




如果_proto_明确的指向,那么链表就链起来了。


var a = {

x:10,

calculate:function(z){

return this.x+this.y+z;

}

};


var b = {

y:20,

_proto_:a

};

var c = {

y:30,

_proto_:a

};

b.calculate(30);//60



再看constructor


当构造一个prototype的时候,会构造一个原型对象,这个原型对象存储于构造这个prototype的函数的原形方法之中:

function Foo(y){

this.y = y;

}

Foo.prototype.x = 10;

Foo.prototype.calculate = function(z){

return this.x+this.y+z;

};

var b = new Foo(20);

var c = new Foo(30);

alert(b.calculate(30));



=============================================================================================

3.javascript作用域 和 作用域链

简单说:作用域就是变量与函数的可访问范围===作用域控制着变量与函数的可见性和生命周期,在js中,变量的

作用域:【全局作用域+局部作用域】

全局作用域(global scope)

在代码中任何地方都能访问到的对象拥有全局作用域,下面情况是全局作用域:

(1)最外层函数外面定义的变量

如: var bookName = "nodeJs";

function doSomething(){

var blogName = "node develop";

function innerSay(){

alert(blogName);

}

innerSay();

}

alert(bookName ); //nodeJs
alert(blogName); //脚本错误
doSomething(); //node develop
innerSay() //脚本错误
 

(2)未定义直接赋值的变量

function doSomething(){
var  authorName= "山边小溪" ;
blogName= "梦想天空" ;
alert(authorName);
}
doSomething(); //山边小溪
alert(blogName); //梦想天空
alert(authorName); //脚本错误


(3)window对象的属性拥有全局作用域
如window.name,window.location,window.top等等


局部作用域(Local Scope)

和全局作用域相反,局部作用域一般只在固定的代码片段中可访问到,如函数内部,


function doSomething(){
var   blogName= "梦想天空" ;
function   innerSay(){
alert(blogName);
}
innerSay();
}
alert(blogName); //脚本错误
innerSay(); //脚本错误

-----------------------------------------------------

作用域链(scope Chain)

在js中,函数也是对象,实际上在js中一切都是对象,函数对象和其它对象一样

,拥有可以通过代码访问的属性和一系列供js引擎访问的内部属性,

其中一个内部属性是【scope】,

该内部属性包含了函数被创建的作用域中对象的集合,

这个集合被称为函数的作用域链,他决定了哪些数据能被函数访问


当一个函数被创建后,他的作用域链会被创建此函数的作用域中可访问的数据对象填充。例如

function  add(number1,number2){

var sum = number1+number2;

return sum;

}

 在函数add创建时,他的作用域链会填充一个全局对象,该全局对象包含了所有全局变量,如下图:






函数add的作用域将会在执行时用到

var total = add(5,10);

执行此函数时会创建一个称为:“运行时上下文(execution context)”的内部对象,每个运行时上下问都有自己的作用域链,用于标识符解析,当运行时上下文被创建时,他的作用域链初始化为当前运行函数的【scope】所包含的对象。


 很多人觉得闭包很难理解,其实我们只要能明确需要区分函数定义和函数运行这两个时机,记住闭包让函数在运行时能够访问到函数定义时的所处作用域内的所有变量.或者说函数定义时能访问到什么变量,那么在函数运行时通过相同的变量名一样能访问到. 

        关于状态保持是本文的重点,在我看到的多数NodeJS的介绍文章,并没有详解这里,我们只是知道了要解决阻塞问题,但是JavaScript解决阻塞问题的优势在哪里,作为一个前端开发,我想有必要详细解释一下. 
        
        其实说到状态保持还有一个类似的场景,比如用户从A页面提交表单到B页面,如果提交数据校验不通过,则需要返回A页面,同时保持用户在A页面填写的内容并提示用户修改不对的地方.从提交到返回显示这也是一个包含网络交互的异步过程.传统网页,用户的状态通过请求传递到服务端,交由后端状态保持(类似交给db.query的currentSate).而使用Ajax的网页,因为并未离开原页面,那么服务端只要负责校验用户提交的数据是否正确即可,发送错误,返回错误处相关信息即可,这就是所谓前端状态保持.可以看到这个场景里边服务端做的事情变少了,变纯粹了.正如我们的例子中db.query不再存储转发第三个state参数,变得更轻量. 
        
        我们看到通过JavaScript函数式语言特性,匿名函数支持和闭包很漂亮的解决了同步编程到异步编程转化过程中遇到的一系列最重要的问题.但JavaScript是否就是最好的?这就要回答我们引用新技术时需要考虑的最后一个问题了 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值