BOM (1)
2017-01-24 15:12:42 0 举报AI智能生成
BOM（Bill of Materials）是一份包含制造某种产品所需的所有原材料、部件、组件和组装件的清单。它通常按照产品的层次结构进行组织，从顶级产品开始，逐层分解到底层的零部件。BOM不仅列出了每个部件的名称和数量，还可能包括供应商信息、采购价格、库存位置等其他相关信息。它是制造业的核心文档之一，对于控制成本、提高生产效率、确保产品质量等方面都起着重要作用。
作者其他创作
大纲/内容
window
2个角色
1. 代替global充当全局对象
2. 封装BOM API
打开和关闭窗口
打开
var pop=window.open("url","name",config)
其中config:
“left=?,top=?,width=?,height=?”
name
自定义名称
在新窗口打开，只能打开一个
_blank, _self
关闭
window.close()
窗口大小和窗口位置
窗口大小
属性
完整大小:
.outerWidth
.outerHeight
文档显示区大小
.innerWidth
.innerHeight
方法
pop.resizeTo(width, height)
pop.resizeBy(width的增量,height的增量)
窗口定位
属性
.screenLeft||.screenX
.screenTop||.screenY
方法
pop.moveTo(left,top)
pop.moveBy(left的增量,top的增量)
定时器
周期性定时器
让程序每隔一段时间间隔反复自动执行一段程序
3件事
1. 任务函数
function task(){...}
2. 启动定时器
timer=setInterval(task, interval)
3. 停止定时器
clearInterval(timer); timer=null
一次性定时器
让程序先等待一段时间，再执行一次任务，执行完自动停止定时器
3件事
1. 任务函数
function task(){...}
2. 启动定时器
timer=setTimeout(task, wait)
3. 停止定时器
clearTimeout(timer); timer=null
定时器原理
定时器中的回调函数必须在主程序最后一句话执行完才能开始执行
回调函数中的this->window
动画
属性
三要素
总距离: DISTANCE; 总时间: DURATION; 总步数: STEPS
计算
时间间隔interval: DURATION/STEPS
步长step: DISTANCE/STEPS
timer
只要可能停止
moved
记录已经移动的步数
判断何时停止
方法:
动画启动
move:function(){
setInterval(this.moveStep.bind(this), interval)
}
移动一步
moveStep:function(){
...
moved++;
if(moved==STEPS){
clearInterval(timer)
timer=null;
}
}
让一项任务在动画结束后才执行:
动画启动
move:function(callback){
setInterval(this.moveStep.bind(this,callback), interval)
}
移动一步
moveStep:function(callback){
...
moved++;
if(moved>=STEPS){
clearInterval(timer)
callback();
}
}
启动动画
move(function(){...//在动画结束后才执行的代码段...})
停止定时器
1. 手动调用clearXXX(timer)
2. 自动停止
在task函数中判断临界值，只要达到临界值，就自动调用clearXXX(timer)
history
history.go(n)
navigator
封装浏览器配置信息的对象
包括
cookieEnabled
判断浏览器是否启用cookie
bool
plugins
封装所有插件信息的集合
userAgent
包含浏览器名称，版本号，内核的字符串
document
location
封装当前窗口正在打开的url的对象
属性
href
protocol
host
hostname
port
pathname
hash
search
方法
在当前窗口打开，可后退
location.assign("新url")
在当前窗口打开，不可后退
location.replace("新url")
重新加载当前页面
location.reload(false/true)
参数force
是否跳过服务器缓存，强制从服务器硬盘获取
screen
完整大小：
screen.width/height
鉴别设备类型
lg
>=1200
PC
md
>=992
Pad
sm
>=768
Phone
xs
去掉任务栏之后剩余的可用大小
screen.availWidth/availHeight
event
绑定
3种
1. 在html中
html
<any on事件名="函数(this)"
js
function 函数(any){...}
问题:
不便于维护
2. 在js中动态绑定
1. 一个事件仅绑定一个处理函数
elem.on事件名=function(){
//this->elem
}
问题:
1. 一个事件只能绑定一个处理函数
2. 不能被remove移除掉
2. 一个事件可绑定多个处理函数
elem.addEventListener("事件名",fn);
elem.removeEventListener("事件名",fn)
强调:
如果一个处理函数可能被移除，在绑定时不能使用匿名函数，必须使用有名的函数
事件模型
DOM
3个阶段
1. 捕获
由外向内记录各级元素绑定的事件处理函数
2. 目标触发
优先触发目标元素上的事件处理函数
3. 冒泡
由内向外依次触发各级父元素的事件处理函数
IE8
2个阶段
没有捕获
事件对象
获取
事件对象默认作为处理函数的第一个参数传入
操作
取消冒泡/停止蔓延
function(e){
e. stopPropagation();
}
利用冒泡
问题
浏览器触发事件，采用的是遍历所有事件监听对象的方式
如果事件监听越多，响应事件就越慢
优化
尽量少的添加事件监听
如何
如果多个平级子元素绑定相同的事件监听，则只需在父元素绑定一次，所有子元素共用
2个问题:
1. 如何获得目标元素
e.target
2. 如果筛选目标元素
元素名nodeName
class
取消事件/阻止默认行为
e.preventDefault()
何时
阻止<a href="#xxx" 修改url
在表单的onsubmit事件结尾阻止表单提交
事件坐标
相对于屏幕左上角
e.screenX/screenY
相对于文档显示区左上角
e.clientX/clientY
e.x/y
相对于触发事件元素的左上角
e.offsetX/offsetY
页面滚动
事件
window.onscroll
获得页面滚动过的高度
document.body.scrollTop
document.documentElement.scrollTop
方法
window.scrollBy(left的增量，top的增量)
window.scrollTo(left,top)
0 条评论
下一页
