js基础
- 设计模式
- 工厂模式: 实质是定义一个创建对象的接口,但是让实现这个接口的类来决定实例化哪个类。工厂方法让类的实例化推迟到子类中进行。
- 让对象的调用者和对象创建过程分离,当对象调用者需要对象时,直接向工厂请求即可
- 单例模式:如果一个类始终只能创建一个实例,则这个类被称为单例类,这种模式就被称为单例模式。
- 观察者模式:目标和观察者是基类,目标提供维护观察者的一系列方法,观察者提供更新接口。具体观察者和具体目标继承各自的基类,然后具体观察者把自己注册到具体目标里,在具体目标发生变化时候,调度观察者的更新方法。
-
- 发布/订阅模式:订阅者把自己想订阅的事件注册到调度中心,当该事件触发时候,发布者发布该事件到调度中心(顺带上下文),由调度中心统一调度订阅者注册到调度中心的处理代码
-
- 工厂模式: 实质是定义一个创建对象的接口,但是让实现这个接口的类来决定实例化哪个类。工厂方法让类的实例化推迟到子类中进行。
- 操作节点
- 子节点:
- childNodes 获取到包括文本节点和元素节点 文本节点:nodeType == 3 元素节点:nodeType == 1
- children(只能一层)
- 父节点:
- parentNode
- offsetParent: 获取元素用来定位的父级,如position:absolute 相对父级是谁
- 首尾子节点:
- firstChild IE6-8 firstElementChild 其他浏览器
- lastChild lastElementChild
- 兄弟节点
- nextSibling、nextElementSibling
- previousSibling、previousElementSibling
- 子节点:
- 操作元素
- 操作元素属性
- obj.style.display
- getAttribute(名称)、 setAttribute(名称,值)、removeAttribute(名称)
- DOM元素灵活查找
- obj.className =='aa'
- 创建DOM元素
- cDom = createElement(标签名) 创建一个dom节点
- pDom.appendChild(cDom) 插到父元素里面
- 插入元素
- insertBefore(子节点,在谁之前)
- 删除dom元素
- pDom.removeChild(元素)
- 操作元素属性
- 文档碎片(相当于一次性把零散的东西拿来)
- document.createDocumentFragment()
- 可以提高DOM操作性能(理论上)
- 表格
- table.tBodies[0].rows[1].cells[1] table的tbody的所有行的所有单元格
- thead tFoot 只有一个
- 字符串
- 搜索:str.search('a') //找到并且返回字符串出现的位置,没找到返回‘-1’
- 事件
- 鼠标:贪吃蛇 onmousemove(ev) let oEvent = ev||event oEvent.clientX oEvent.clientY+scrollTop offsetTop offsetLeft
- 键盘:onkeydown onkeyup 有一个键没有keyCode ?? ctrlKey、shiftKey、altKey keyCode
- 默认行为
- 拖拽
- document.oncontextmenu=function(){return false; //阻止默认事件} 右键菜单
- 拖拽
- 绑定事件
- obj.onclick = 的方式 obj定义两个function前者会被覆盖 可用attachEvent(addEventListener)同时加好几个函数
- attachEvent(‘onclick’,function(){}) detachEvent(事件名称,函数) IE addEventListener('click',function(){},false) removeEventListener chrome
- 处理兼容
-
if(obj.attachEvent){ 可用attachEvent }else{ 用addEventListener }
- ie9以下执行会与绑定的顺序相反,IE9及一上 及其他无此问题
-
- 磁性吸附:当距离小于50时,left = 0
- 事件捕获 obj.setCapture() obj.releaseCapture() IE
- 自定义滚动条
- ajax
- get
- 容量小
- 安全差
- 有缓存(用时间戳)
- post
- 容量大(2G)
- 更安全
- 无缓存
- get
- 创建ajax
- let oAjax = new XMLHttpRequest(); 非ie6 //创建ajax对象
- let oAjax = new ActiveXObject("Microsoft.XMLHTTP") IE6
- 小知识:
- 用没有定义的变量 --- 报错 alert(a)
- 用没有定义的属性 --- undefined alert(window.a)
- 解决兼容 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:(完成)响应内容解析完成,可以在客户端调用了 }
- 面向对象:只关注对象提供的功能,不关注其内部细节
- 抽象:抽出核心、最主要的特性、跟问题相关的特征抽出来
- 封装:看不到里面的东西,用好表面的功能就行
- 继承:从父类上继承出一些方法、属性、子类,又有一些自己的特性
- 多重继承:
- 多态
- 变量:自由的,不属于任何 属性:属于一个对象
- 函数:自由的 方法:属于一个对象
- 工厂模式:就是一个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区别
- call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别,根据自己的实际情况来选择使用。
- 类(模子---面包模子) 对象(成品 --- 面包)
- json对象的应用
- 命名空间 -- a = {} b={}
- 把同一类放在一起,防止冲突
- 继承:
- 系统对象
- 本地对象
- 内置对象
- 宿主对象
- BOM DOM
- BOM
- window.open(url,_self/_blank)
- window.close() 火狐下面必须得是自己开的才可以window.open开的
- window.navigator.userAgent'
- window.location
- 系统对话框:alert confirm prompt
- window对象常用事件 onload onscroll onresize
- js 自定义事件和触发
- document.createEvent()
- event.initEvent()
- element.dispatchEvent()
-
$(dom).addEvent("alert", function() { alert("弹弹弹,弹走鱼尾纹~~"); }); // 创建 var evt = document.createEvent("HTMLEvents"); // 初始化 evt.initEvent("alert", false, false); // 触发, 即弹出文字 dom.dispatchEvent(evt);
initEvent(eventName, canBubble, preventDefault)
. 分别表示事件名称,是否可以冒泡,是否阻止事件的默认操作。 dispatchEvent()
就是触发执行了,dom.dispatchEvent(eventObject)
, 参数eventObject
表示事件对象,是createEvent()
方法返回的创建的Event
对象。
- document.compatMode
- IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的
- 在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。
-
document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat,对其解释如下:
BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)
- 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 位有符号整数。 ----- 它会损失精度,包括小数和整数部分。
- !! 最主要的用途:将操作数转化为布尔类型。
- 异步操作:
- 通常io(ajax获取服务器数据)、用户/浏览器自执行事件(onclick、onload、onkeyup等等)以及定时器(setTimeout、setInterval)都可以算作异步操作
- 这里的异步任务并不一定是按照文档定义的顺序推入队列中
-
//第一个推入队列中 setTimeout(function(){ console.log("1"); },0); //第三个推入队列中 setTimeout(function(){ console.log("2"); },1000); //第二个推入队列中 setTimeout(function(){ console.log("3"); },0);
如若喜欢,欢迎转载,请在文章页面明显位置给出此文链接!
若您觉得这篇文章还不错请点击下右下角的推荐,有了您的支持才能激发作者更大的写作热情,非常感谢!