web基础要点记录

var foo = 1;function(){ ???console.log(foo);//undefined ???var foo = 2; ???console.log(foo);//2}//函数声明与变量声明会被JS引擎隐式提升到当前作用域的顶部，但是只提升名称不会提升赋值部分；

var n = 0.3,m = 0.2, i = 0.2, j = 0.1;alert((n - m) == (i - j)); //falsealert((n-m) == 0.1); //falsealert((i-j)==0.1); //true

function a() {}var a;alert(typeof a);//function

var a; function a() { }alert(typeof a);//function

function foo(a) { ???arguments[0] = 2; ???alert(a);//答案：2，因为：a、arguments是对实参的访问，b、通过arguments[i]可以修改指定实参的值}foo(1);

1. CSS3实现圆角（border-radius），阴影（box-shadow），2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜4. 增加了更多的CSS选择器 ?多背景 rgba 5. 在CSS3中唯一引入的伪元素是 ::selection.6. 媒体查询，多栏布局7. border-image

1. 拖拽释放(Drag and drop) 2. 语义化更好的内容标签（header,nav,footer,aside,article,section）3. 音频、视频(audio,video)4. 画布(Canvas) 5. 地理(Geolocation) 6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；7. sessionStorage 的数据在浏览器关闭后自动删除8. 表单控件，calendar、date、time、email、url、search ?9. 新的技术webworker, websocket, Geolocation

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素；p:last-of-type ?选择属于其父元素的最后 <p> 元素的每个 <p> 元素；p:only-of-type ?选择属于其父元素唯一的 <p> 元素的每个 <p> 元素；p:only-child ???选择属于其父元素的唯一子元素的每个 <p> 元素；p:nth-child(2) ?选择属于其父元素的第二个子元素的每个 <p> 元素；:enabled、:disabled 控制表单控件的禁用状态；:checked，单选框或复选框被选中；

Ajax并不算是一种新的技术，全称是asynchronous javascript and xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，
早期的浏览器并不能原生支持ajax，可以使用隐藏帧（iframe）方式变相实现异步效果，后来的浏览器提供了对ajax的原生支持使用ajax原生方式发送请求主要通过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通信效果基本步骤：var xhr =null;//创建对象 if(window.XMLHttpRequest){ ???xhr = new XMLHttpRequest();}else{ ???xhr = new ActiveXObject("Microsoft.XMLHTTP");} ????xhr.open(“方式”,”地址”,”标志位”);//初始化请求 ?????xhr.setRequestHeader(“”,””);//设置http头信息 ?????xhr.onreadystatechange =function(){}//指定回调函数 ?????xhr.send();//发送请求 

100-199 用于指定客户端应相应的某些动作。

200-299 用于表示请求成功。

300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。

400-499 用于指出客户端的错误。

400  语义有误，当前请求无法被服务器理解。

401  当前请求需要用户验证

403  服务器已经理解请求，但是拒绝执行它。

500-599 用于支持服务器错误。

503 – 服务不可用

分为4个步骤：1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，
同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，
这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。4. 此时，Web 服务器提供资源服务，客户端开始下载资源。

确保用户在不同地区能用最快的速度打开网站，其中某个域名崩溃用户也能通过其他域名访问网站，并且不同的资源放到不同的服务器上有利于减轻单台服务器的压力。

function log(){      var args = Array.prototype.slice.call(arguments);  //为了使用unshift数组方法，将argument转化为真正的数组      args.unshift(‘(app)‘);      console.log.apply(console, args);};

var User = {  count: 1,  getCount: function() {    return this.count;  }};console.log(User.getCount());  //1var func = User.getCount;console.log(func());  // undefinedfunc是在winodw的上下文中被执行的，所以会访问不到count属性。

如何确保Uesr总是能访问到func的上下文，即正确返回1Function.prototype.bind = Function.prototype.bind || function(context){   var self = this;   return function(){      return self.apply(context, arguments);   };}var func = User.getCount.bind(User);console.log(func());

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。2、属性和方法被加入到 this 引用的对象中。3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

主要通过requirejs与seajs的对比1、对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.2、CMD 推崇依赖就近，AMD 推崇依赖前置。3. AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，
而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。

Object.hasOwnProperty( ) 检查属性是否被继承 Object.isPrototypeOf( ) 一个对象是否是另一个对象的原型 Object.propertyIsEnumerable( ) 是否可以通过for/in循环看到属性 Object.toLocaleString( ) 返回对象的本地字符串表示 Object.toString( ) 定义一个对象的字符串表示 Object.valueOf( ) 指定对象的原始值

1. 工厂模式function createStudent(name,sex,grade){ ????????????????????????????????????????????????????????????var o = new Object(); ???o.name = name; ???o.sex = sex; ???o.grade = grade; ???o.sayName = function(){ ???????console.log(this.name); ???} ???return o;}var s1 = createStudent(‘Claiyre‘,‘famale‘,1);2. 构造函数模式function Student(name,sex,grade){ ??????????????????????????????????????????????????????this.name = name; ???this.sex = sex; ???this.grade = grade; ???this.sayName = function(){ ???????console.log(this.name); ???}}var s2 = new Student(‘孙悟空‘，‘male‘,2);3. 原型模式function Student_1(){}Student_1.prototype.name = ‘Claiyre‘;Student_1.prototype.sex = ‘female‘;Student_1.prototype.class = 5;Student_1.prototype.sayName = function (){ ???console.log(this.name);}var s5 = new Student_1(); ????????????????????????????????????????????????????????s5.sayName(); ???//Claiyrevar s6 = new Student_1();s6.sayName(); ???//Claiyre4. 混合构造函数和原型模式function Student(name,sex,grade){ ??????????????????????????????????????????????????????this.name = name; ???this.sex = sex; ???this.grade = grade;}Student.prototype.sayName = function(){ ???????console.log(this.name);}Student.prototype.school = ‘Joooh school‘;5. 动态原型模式function Person(name, age, job) { ???//属性 ???this.name = name; ???this.age = age; ???this.job = job; ???// 方法 ???if(typeof this.sayName != ‘function‘) { ???????Person.prototyep.sayName = ?function(){ ???????????alert(this.name); ???????} ???}}var friend = new Person(‘Nicholas‘, 29, ‘Software Engineer‘);friend.sayName();6. 寄生构造函数模式function SpecialArray(){ ???var array = new Array(); ???array.push.apply(array,arguments); ???array.toPipedString = function(){ ???????return this.join("|"); ???}; ???return array;}var colors = new SpecialArray("red","green","pink");alert(colors.toPipedString());// red|green|pinkalert(colors instanceof SpecialArray); // false 7. 稳妥构造函数模式先说稳妥二字，别人定义了一个稳妥对象，即没有公共属性，而且其方法也不引用this对象，这种模式适应于一些安全环境中（禁止使用this和new），或防止数据被其他应用程序改动，像下面这样：function Person(name,age,gender){ ???var obj = new Object(); ???obj.sayName = function(){ ???????alert(name); ???}; ???return obj;}var person = Person("Stan",0000,"male"); // 这里没有使用new操作符person.sayName(); // Stanalert(person instanceof Person); // false

//1. 原型链继承

// 父亲类function Parent() { ???this.value = ‘value‘;}Parent.prototype.sayHi = function() { ????console.log(‘Hi‘);}// 儿子类function Child() {}// 改变儿子的prototype属性为父亲的实例Child.prototype = new Parent();var child = new Child();// 首先现在child实例上进行查找，未找到，// 然后找到原型对象（Parent类的一个实例），在进行查找，未找到，// 在根据__proto__进行找到原型，发现sayHi方法。// 实现了Child继承 child.sayHi();//2. 借用构造函数继承

　　 // 父亲类 ???function Parent(name) { ???????this.name = name; ???????this.color = [‘pink‘, ‘red‘]; ???} ???// 儿子类 ???function Child(name) { ???????Parent.call(this, name); ???????// 定义自己的属性 ???????this.value = ‘test‘; ???} ???var child = new Child(‘qq‘); ???// 将qq传递给Parent ???console.log(child.name); // qq//3. 组合继承(原型+借用构造)

　　 // 父亲类 ???function Parent() { ???????this.color = [‘pink‘, ‘red‘]; ???} ???Parent.prototype.sayHi = function() { ???????console.log(‘Hi‘); ???} ???// 儿子类 ???function Child() { ???????Parent.call(this); // 第二次调用构造函数：在新对象上创建一个color属性 ???} ???Child.prototype = new Parent(); // 第一次调用构造函数Child.prototype将会得到一个color属性，屏蔽了原型中的color属性。//4. 原型式继承

　　function createAnother(o) { ???????// 创建一个临时构造函数 ???????function F() { ???????} ???????// 将传入的对象作为它的原型 ???????F.prototype = o; ???????// 返回一个实例 ???????return new F(); ???}//5. 寄生式继承

　　 function Parent() { ???????this.color = [‘pink‘, ‘red‘]; ???} ???function createAnother(o) { ???????// 获得当前对象的一个克隆 ???????var another = new Object(o); ???????// 增强对象 ???????o.sayHi = function() { ???????????????console.log(‘Hi‘); ???????????} ???????// 返回对象 ???????return another; ???}//6. 寄生组合式继承

　　 // 创建只继承原型对象的函数 ???function inheritPrototype(parent, child) { ???????// 创建一个原型对象副本 ???????var prototype = new Object(parent.prototype); ???????// 设置constructor属性 ???????prototype.constructor = child; ???????child.prototype = prototype; ???} ???// 父亲类 ???function Parent() { ???????this.color = [‘pink‘, ‘red‘]; ???} ???Parent.prototype.sayHi = function() { ???????console.log(‘Hi‘); ???} ???// 儿子类 ???function Child() { ???????Parent.call(this); ???} ???inheritPrototype(Parent, Child);

它们是动态的样式语言，是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。变量符不一样，less是@，而Sass是$;Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持;Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器

在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是，指向该函数所属的对象。全局的this → 指向的是Window对象中的this → 指向其本身事件中this → 指向事件对象

1、尽量减少 HTTP 请求2、使用浏览器缓存3、使用压缩组件4、图片、JS的预载入5、将脚本放在底部6、将样式文件放在页面顶部7、使用外部的JS和CSS8、精简代码

Jquery.extend用来扩展jQuery对象本身；jquery.fn.extend用来扩展jQuery实例