js基础

设计模式
1. 工厂模式：实质是定义一个创建对象的接口，但是让实现这个接口的类来决定实例化哪个类。工厂方法让类的实例化推迟到子类中进行。
  1. 让对象的调用者和对象创建过程分离，当对象调用者需要对象时，直接向工厂请求即可
2. 单例模式：如果一个类始终只能创建一个实例，则这个类被称为单例类，这种模式就被称为单例模式。
3. 观察者模式：目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。具体观察者和具体目标继承各自的基类，然后具体观察者把自己注册到具体目标里，在具体目标发生变化时候，调度观察者的更新方法。
  1. 　
4. 发布/订阅模式：订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布该事件到调度中心（顺带上下文），由调度中心统一调度订阅者注册到调度中心的处理代码
  1. 　　
操作节点
1. 子节点：
  1. 　childNodes 获取到包括文本节点和元素节点文本节点：nodeType == 3 元素节点：nodeType == 1
  2. 　children（只能一层）
2. 父节点：
  1. 　parentNode
  2. 　offsetParent: 获取元素用来定位的父级，如position:absolute 相对父级是谁
3. 首尾子节点：
  1. 　firstChild IE6-8 firstElementChild 其他浏览器
  2. 　lastChild lastElementChild
4. 兄弟节点
  1. 　nextSibling、nextElementSibling
  2. 　previousSibling、previousElementSibling
操作元素
1. 操作元素属性
  1. 　obj.style.display
  2. getAttribute(名称)、 setAttribute(名称,值)、removeAttribute(名称)
2. DOM元素灵活查找
  1. 　obj.className =='aa'
3. 创建DOM元素
  1. 　cDom = createElement（标签名）创建一个dom节点
  2. pDom.appendChild(cDom) 插到父元素里面
4. 插入元素
  1. 　insertBefore(子节点，在谁之前)
5. 删除dom元素
  1. pDom.removeChild(元素)
文档碎片（相当于一次性把零散的东西拿来）
1. 　document.createDocumentFragment()
2. 　可以提高DOM操作性能（理论上）
表格
1. 　table.tBodies[0].rows[1].cells[1] table的tbody的所有行的所有单元格
2. 　thead tFoot 只有一个
字符串
1. 　搜索：str.search（'a'） //找到并且返回字符串出现的位置，没找到返回‘-1’
　事件
1. 　鼠标：贪吃蛇 onmousemove(ev) let oEvent = ev||event oEvent.clientX oEvent.clientY+scrollTop offsetTop offsetLeft
2. 　键盘：onkeydown onkeyup 有一个键没有keyCode ?? ctrlKey、shiftKey、altKey keyCode
　默认行为
1. 　拖拽
  1. 　document.oncontextmenu=function(){return false; //阻止默认事件} 右键菜单
　绑定事件
1. 　obj.onclick = 的方式 obj定义两个function前者会被覆盖可用attachEvent（addEventListener）同时加好几个函数
2. attachEvent(‘onclick’,function(){}) detachEvent(事件名称，函数) IE addEventListener('click',function(){},false) removeEventListener chrome
3. 处理兼容
  1. ```
  if(obj.attachEvent){
      可用attachEvent
  }else{
      用addEventListener
  }
```
2. ie9以下执行会与绑定的顺序相反，IE9及一上及其他无此问题
4. 磁性吸附：当距离小于50时，left = 0
5. 事件捕获 obj.setCapture() obj.releaseCapture() IE
6. 自定义滚动条
ajax
1. get
  1. 容量小
  2. 安全差
  3. 有缓存（用时间戳）
2. post
  1. 容量大（2G）
  2. 更安全
  3. 无缓存

创建ajax

let oAjax = new XMLHttpRequest(); 非ie6 //创建ajax对象
let oAjax = new ActiveXObject("Microsoft.XMLHTTP") IE6
小知识：
1. 　用没有定义的变量 --- 报错 alert(a)
2. 用没有定义的属性 --- undefined alert(window.a)
3. 解决兼容 if(window.XMLHttpRequest){}else{}
oAjax.open(请求方式，url(请求地址),同步(false)还是异步(true)) //连接服务器
oAjax.send() //发送请求

oAjax.onreadyctatechange =  function(){
    if(oAjax.readyState == 4){
       if(aAjax.status == 200){ 
          oAjax.responesText   //响应文本
       }
　　}    //浏览器和服务器进行到哪一步 
           0：（未初始化）还没有调用open()方法
           1：（载入）已调用send()方法，正在发送请求
           2：（载入完成）send()方法完成，已收到全部响应内容
           3：（解析）正在解析响应内容
           4：（完成）响应内容解析完成，可以在客户端调用了
}

//接受返回信息

面向对象：只关注对象提供的功能，不关注其内部细节
1. 抽象：抽出核心、最主要的特性、跟问题相关的特征抽出来
2. 封装：看不到里面的东西，用好表面的功能就行
3. 继承：从父类上继承出一些方法、属性、子类，又有一些自己的特性
  1. 多重继承：
  2. 多态
4. 变量：自由的，不属于任何属性：属于一个对象
5. 函数：自由的方法：属于一个对象
工厂模式：就是一个function

new

        function A(){
          this.name=1234;
         // return {};
          }
        A.prototype.getname=function(){
            console.log(this.name);
            }
        function CreateObj(){
           var fn=[].shift.call(arguments);
           var args=arguments;
           var obj=new Object();
           var ret=fn.apply(obj,args);
           obj.__proto__=fn.prototype;
           return typeof ret ==='object'?ret:obj;
           }
    var a=CreateObj(A);
    console.log(a);

call apply bind区别
1. call和apply都是改变上下文中的this并立即执行这个函数，bind方法可以让对应的函数想什么时候调就什么时候调用，并且可以将参数在执行的时候添加，这是它们的区别，根据自己的实际情况来选择使用。
类（模子---面包模子）对象（成品 --- 面包）
json对象的应用
1. 　命名空间 -- a = {} b={}
2. 把同一类放在一起，防止冲突
继承：
系统对象
1. 本地对象
2. 内置对象
3. 宿主对象
  1. 　BOM DOM
5. BOM
  1. 　window.open(url,_self/_blank)
  2. window.close() 火狐下面必须得是自己开的才可以window.open开的
  3. window.navigator.userAgent'
  4. 　window.location
  5. 系统对话框：alert confirm prompt
  6. window对象常用事件 onload onscroll onresize
js 自定义事件和触发
1. 　document.createEvent()
2. 　event.initEvent()
3. element.dispatchEvent()
4. 　
```
$(dom).addEvent("alert", function() {
    alert("弹弹弹，弹走鱼尾纹~~");
});

// 创建
var evt = document.createEvent("HTMLEvents");
// 初始化
evt.initEvent("alert", false, false);

// 触发, 即弹出文字
dom.dispatchEvent(evt);
```
  initEvent(eventName, canBubble, preventDefault). 分别表示事件名称，是否可以冒泡，是否阻止事件的默认操作。
5. dispatchEvent()就是触发执行了，dom.dispatchEvent(eventObject), 参数eventObject表示事件对象，是createEvent()方法返回的创建的Event对象。
document.compatMode
1. IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的
2. 在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。
3. document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat，对其解释如下：
  
  BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
  
  CSS1Compat Standards-compliant mode is switched on. (Standards Mode)
4. var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
arguments.length是实参长度，arguments.callee.length是形参长度，由此可以判断调用时形参长度是否和实参长度一致。

function show(){
     
}
show() //创建一个临时闭包空间，运行函数里面的代码，this指向是window对象

function Show(){
            
}
new Show()  //创建一个被持有句柄的闭包空间，运行函数里面的代码，this指向就是当前这块空间的引用

~~ 的用途：将操作数转化为 32 位有符号整数。 ----- 它会损失精度，包括小数和整数部分。
!! 最主要的用途：将操作数转化为布尔类型。
异步操作：
1. 通常io（ajax获取服务器数据)、用户/浏览器自执行事件（onclick、onload、onkeyup等等）以及定时器（setTimeout、setInterval）都可以算作异步操作
2. 这里的异步任务并不一定是按照文档定义的顺序推入队列中
3. ```
//第一个推入队列中
setTimeout(function(){
  console.log("1");
},0);
//第三个推入队列中
setTimeout(function(){
 console.log("2");
},1000);
//第二个推入队列中
setTimeout(function(){
  console.log("3");
},0);
```

posted @ 2017-06-12 21:01 Caraxiong 阅读(142) 评论(0) 收藏举报

刷新页面返回顶部

Caraxiong

js基础

公告