发布订阅
先进行订阅,订阅时把事件存储到一个事件池中,然后到了条件成立时,遍历事件池中的方法,把订阅的方法都执行;
let box = document. getElementById ( "box" ) ;
function on ( curEle, type, fn) {
if ( ! curEle[ type] ) {
curEle[ type] = [ ] ;
}
let arr = curEle[ type] ;
let isHas = arr. find ( function ( item) { return item=== fn} ) ;
if ( ! isHas) {
arr. push ( fn) ;
}
}
function emit ( curEle, type) {
let arr = curEle[ type] ;
for ( let i= 0 ; i< arr. length; i++ ) {
if ( typeof arr[ i] === "funcion" ) {
arr[ i] ( ) ;
}
}
}
function off ( curEle, type, fn) {
let arr = curEle[ type] ;
for ( let i= 0 ; i< arr. length; i++ ) {
if ( fn=== arr[ i] ) {
arr[ i] = null ;
}
}
}
on ( box, "boiling" , fn1) ;
on ( box, "boiling" , fn2) ;
on ( box, "boiling" , fn3) ;
off ( box, "boiling" , fn2) ;
function fn1 ( ) {
console. log ( "泡面" )
}
function fn2 ( ) {
console. log ( "泡咖啡" )
}
function fn3 ( ) {
console. log ( "泡脚" ) ;
}
setTimeout ( ( ) => {
emit ( box, "boiling" )
} , 3000 )
移动端
移动端: 智能手机 ipad
安卓系统 java IOS系统 object-c
native App : 原生 Andriod IOS
优点:性能好 ,可以调用手机内置各种软件硬件
缺点:不能跨平台,开发成本高
webApp: 用H5,JS开发的网页
优点:开发成本降低,一款产品只需一套代码即可
缺点:性能低,不可以调用手机内置的硬件
hybrid 混合开发 webview:内置浏览器:能够解析前端H5JS开发的代码,而且还可以和手机系统进行交互
web工程师把前端代码最终会嵌套在webview内置的浏览器中
hybrid 集中了nativaApp 和 webApp的优点,公司项目中大量代码由前端H5工程师开发完成,然后嵌套在webview内置的浏览器中
安卓系统 项目审核速度很快 但IOS审核周期
H5新增属性
语义化:代码更加语义化
H5 新增标签 CSS3新增属性
块级元素 div p h1-h6 ul li ol dt table td tr
行内 span a b br em strong i
行内块 img input
H5新增
container
header:头部
nav:
footer
figure
figcaption 图片描述
aside;侧边栏
article ;文章
audio :音频
main:主体
video: 视频
input
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< / head>
< body>
< input type= "password" >
< input type= "checkbox" >
< input type= "radio" name= "a" > 男
< input type= "radio" name= "a" > 女
< input type= "button" value= "提交" >
< input type= "submit" value= "登陆" >
< form action= "http://www.baidu.com" method= "post" >
< input type= "text" name= "username" >
< input type= "text" name= "password" >
< input type= "email" >
< input type= "submit" value= "登陆" >
< input type= "file" >
< input type= "color" >
< input type= "date" >
< input type= "tel" >
< / form>
< script>
< / script>
< / body>
< / html>
CSS3动画
background-size
contain:展示全部图片 按最小的适应
cover:按盒子最大边长去适应 图片有可能展示不全
100% 100% 让图片完全适应盒子宽高 但可能使图片变形
background-clip 裁剪 dashed 虚线
content-box 超出内容去裁剪
border-box 超出border去裁剪
transform
translate:平移 translate(x,y)x正数向右平移,y正数向下平移
scale(1),参数是缩放的倍数 默认按照中心点缩放
rotate(1deg):参数是角度,默认以盒子的中心点旋转,如果角度大于0,顺时针旋转,小于0,逆时针旋转
transform-origin 改变旋转中心点
skew(1deg):默认以中心点变形,角度如果为正,逆时针变形,为负是顺时针变形
媒体查询
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< style>
* {
margin: 0 ;
padding: 0 ;
}
. box {
width: 100 px;
height: 100 px;
background: aqua;
}
@media screen and ( min- width: 1200 px) {
. box {
background: black
}
}
@media screen and ( min- width: 1250 px) {
. box {
background: yellow;
width: 300 px;
height: 300 px;
}
}
@media all and ( max- width: 800 px) and ( min- width: 600 px) {
. box {
background: green;
width: 200 px;
height: 200 px;
}
< / style>
< / head>
< body>
< div class = "box" > < / div>
< / body>
< / html>
flex布局
flex : 弹性布局;
display : flex ;加到了父元素上,那么子元素就是一个一个flex成员
flex- direction : row row- reverse colmun 决定子元素的排列方向
flex- wrap: nowrap : 默认是不换行 wrap : 换行
justify- content属性定义了子元素在主轴上的对齐方式。
justify- content: flex- start | flex- end | center | space- between | space- around;
align- items : align- items属性定义项目在交叉轴上如何对齐。
flex- start | flex- end | center | baseline | stretch;
是设置在item, 是每一个子元素上;
order : 数字;默认是0 ;有了这个按照从小到大的顺序排列;
flex- grow : 按比例分配剩余空间
flex- shrink : 默认都是1 ;都将等比例缩小;
rem布局
根据当前屏幕的宽度计算出一个最新的宽度来,来适应整体的布局;
function reset ( ) {
let winW = document. documentElement. clientWidth;
document. documentElement. style. fontSize= winW* 100 / 750 + "px" ;
}
window. addEventListener ( "resize" , reset) ;
reset ( ) ;
移动端点透
< ! doctype html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< title> 移动端点透问题< / title>
< style>
* {
margin: 0 px;
padding: 0 px;
}
#div1{
width: 300 px;
height: 300 px;
background- color: rgba ( 255 , 0 , 0 , 0.25 ) ;
}
#div2{
width: 240 px;
height: 240 px;
background- color: yellow;
position: absolute;
left: 30 px;
top: 30 px;
z- index: - 1 ;
}
#console{
border: 1 px solid green;
position: absolute;
top: 300 px;
width: 100 % ;
}
< / style>
< / head>
< body>
< div id= "div1" > < / div>
< div id= "div2" >
< a href= "www.baidu.com" > www. baidu. com< / a>
< / div>
< div id= "console" > < / div>
< script>
var div1 = document. getElementById ( "div1" ) ;
var div2 = document. getElementById ( 'div2' ) ;
var con = document. getElementById ( 'console' ) ;
function handle ( e) { var tar = e. target,
eve = e. type;
e. preventDefault ( )
var ele = document. createElement ( "p" ) ;
ele. innerHTML = "target:" + tar. id + " event:" + eve ;
con. appendChild ( ele) ;
if ( tar. id === "div1" ) {
div1. style. display = "none" ;
}
console. log ( 100 ) ;
}
div2. addEventListener ( 'click' , handle) ;
div1. addEventListener ( "touchend" , handle) ;
< / script>
< / body>
< / html>
移动端touch事件
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< style>
. box{
width: 200 px;
height: 200 px;
background: aquamarine;
margin: auto;
}
< / style>
< / head>
< body>
< div class = "box" > < / div>
< script>
let box = document. querySelector ( '.box' )
box. onclick = function ( ) {
console. log ( 800 ) ;
}
box. addEventListener ( 'touchstart' , function ( e) {
console. log ( 100 ) ;
console. log ( e) ;
console. log ( e. touches[ 0 ] . clientX)
} )
box. addEventListener ( 'touchmove' , function ( e) {
console. log ( 200 ) ;
console. log ( e. touches[ 0 ] . clientX)
} )
box. addEventListener ( 'touchend' , function ( e) {
console. log ( e. changedTouches[ 0 ] . clientX)
console. log ( 300 ) ;
} )
< / script>
< / body>
< / html>
移动端音视频
< ! DOCTYPE html>
< html lang= "en" >
< head>
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http- equiv= "X-UA-Compatible" content= "ie=edge" >
< title> Document< / title>
< / head>
< body>
< audio src= "img/myDream.m4a" controls id= "music" > < / audio>
< button id= "btn1" > 播放< / button>
< button id= "btn2" > 暂停< / button>
< script>
music. addEventListener ( 'canplay' , function ( ) {
console. log ( music. duration) ;
} )
btn1. onclick = function ( ) {
music. play ( )
console. dir ( music)
}
btn2. onclick = function ( ) {
music. pause ( )
console. log ( music. paused) ;
}
< / script>
< / body>
< / html> `` `