js 发布订阅，移动端简单事件，h5新增属性

发布订阅

	先进行订阅，订阅时把事件存储到一个事件池中，然后到了条件成立时，遍历事件池中的方法，把订阅的方法都执行；

      let box = document.getElementById("box");
        // 订阅
        function on(curEle,type,fn){
            if(!curEle[type]){// 第一次进来，给其一个默认值是[];也只有第一次执行时，会执行；
            // 给元素新增一个键值对；属性名是type的值；属性值[];
                curEle[type]=[];
            }
            let arr = curEle[type];// 事件池；放在了元素的一个属性上；
            // find : 找true；如果找到满足条件，会立即停止循环
            // 为了防止重复添加fn;所以先判断；如果不存在，加进去；
            let isHas = arr.find(function(item){return item===fn});
            if(!isHas){//  如果找不到，返回undefined；说明不存在这个fn，需要将fn放入事件池中
                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];
            // 通过filter，过滤出去fn;
            for (let i=0;i<arr.length;i++){
                if(fn===arr[i]){
                    // arr.splice(i,1);
                    // i--;
                    arr[i]=null;// 不会产生数组的塌陷；
                }
            }
            // curEle[type]=arr.filter(function(item){
            //     return item!==fn;
            // })
        }
        // $on  $emit 
        on(box,"boiling",fn1);
        on(box,"boiling",fn2);
        on(box,"boiling",fn3);
        off(box,"boiling",fn2);
        // box :{boiling:[fn1,fn2],working:[fn3]}

        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>
        //type类型
        //text  文本框 可输入内容
        //password 密码形式 会把输入的内容隐藏成点
        //checkbox  复选框
        //radio  单选框   可以筛选出一组name相同的值
        //button 转成可点击的按钮
        //form:
                //action 发送请求的地址  method:请求方式 get  post
                //from表单中input框中name属性是请求参数的属性名  input框中内容是属性名对应的属性值
                //email:要符合邮箱的格式
                //file :上传文件
                //color:调取电脑颜色板
                //date:日期
                // tel
        
        
    </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: 100px;
            height: 100px;
            background: aqua;
        }

        /* screen 屏幕 */
        @media screen and (min-width:1200px) {

            /* 当屏幕样式超过1200px时 该样式生效 */
            .box {
                background: black
            }
        }

        @media screen and (min-width:1250px) {

            /* 当屏幕样式超过1200px时 该样式生效 */
            .box {
                background: yellow;
                width: 300px;
                height: 300px;
            }
        }

        @media all and (max-width:800px) and (min-width: 600px) {
            /* 当屏幕样式超过1200px时 该样式生效 */

            .box {
                background: green;
                width: 200px;
                height: 200px;
            }

    </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布局

	根据当前屏幕的宽度计算出一个最新的宽度来，来适应整体的布局；


        // 375 
        // 各个手机屏幕大小不同
        // 设计稿： UI 
        // 市场运营===> 产品 ==> UI(设计稿) ==> 前端
        // 移动端的设计稿，一般分为两种宽度 大多数的设计稿宽度是750px;
        // 每一个盒子宽度占据整个设计稿的宽度的比例是不变的；
        // 不同的手机得到的可视窗口的宽度都不一样：document.documentElemen.clientWidth
        // 1rem相当于一个HTML的font-size 的属性值；rem是一个相对的单位；如果屏幕的代大小发生改变，计算出当前屏幕下最新的html对应的font-size值；

        // 750px          250px        2.5rem;      100px
        // 375px          125px        2.5rem       50px
  
        // 750px                                     100px 
        // document.documentElement.clientWidth       ?
        // 为了得到当前最新的html对应的font-size;
        function reset(){
            // window的resize： 当可视窗口发生改变时，触发的回调；
            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: 0px;
            padding:0px;
        }
        #div1{ /*红色半透明遮盖层A*/
            width: 300px;
            height: 300px;
            background-color: rgba(255,0,0,0.25);        
        }
        #div2{ /*黄色内容层B*/
            width: 240px;
            height: 240px;
            background-color: yellow;
            position: absolute;
            left: 30px;
            top: 30px;
            z-index: -1;
        }
        #console{ /*绿色状态输出框*/
            border: 1px solid green;
            position: absolute;
            top: 300px;
            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()//阻止事件默认行为 nA39
            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);
            
        }
        // div1.onclick = handle
        div2.addEventListener('click',handle);
        div1.addEventListener("touchend",handle);
        // div1.addEventListener("touchstart",handle);
        
        //点透：移动端onclick有延迟
        //由于touch事件早于onclick事件，所以在触发touch事件时将外层元素隐藏，那么当touch事件触发完毕，再去触发onclick时，这时点击的元素就是里面的元素。  出现点透现象

        //解决方案：，
       // 1.应统一使用touch事件由于click事件在移动端的延迟要大很多
       //2.   e.preventDefault()//阻止事件默认行为 
        </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: 200px;
        height: 200px;
        background: aquamarine;
        margin: auto;
    }
    
    
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
    //querySelector经常适用于移动端  兼容性比较好
    let box = document.querySelector('.box')
   //onclick会有延迟

//    touch事件  只应用于移动端
//  ontouchstart  触摸开始执行的方法

//touchstart触摸开始
//touchmove触摸移动


// box.ondblclick = function(){
        //     console.log(999);
        // }//没有这个事件
box.onclick = function(){
    console.log(800);
    
}
//touchend触摸结束
   box.addEventListener('touchstart',function(e){
       //事件对象  mouseEvent  keyboardEvent touchEvent
       //移动端事件信息存放事件对象的touches的值中
       console.log(100);
       console.log(e);
       console.log(e.touches[0].clientX)//211.15794372558594
       
   })
   box.addEventListener('touchmove',function(e){
       //事件对象  mouseEvent  keyboardEvent touchEvent
       //移动端事件信息存放事件对象的touches的值中
       console.log(200);  
       console.log(e.touches[0].clientX)    
   })
   box.addEventListener('touchend',function(e){
       //事件对象  mouseEvent  keyboardEvent touchEvent
       //移动端事件信息存放事件对象的touches的值中
    //    console.log(e);
       console.log(e.changedTouches[0].clientX)
       console.log(300);      
   })
   //onclick 最后执行  在touchend之后  一旦在元素上滑动  会触发touchmove事件  onclick事件则不会执行
    //touchstart=>touchend=>onclick 

    //FastClick 的原理：给元素绑定的点击事件  改造了给body绑定touch事件，元素事件触发时，会冒泡到body，触发body的touch的事件，由于touch事件不存在延迟，所以就没有300ms的延迟了 
    </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.play() 最新谷歌浏览器为了节省性能 禁掉了音频的自动播放功能
        //play播放
        //pause暂停
        //paused:属性名：当音乐播放时  该值为false状态 如果是暂停状态 为true
        //duration:当前音频总时长  是秒
        //currentTime:当前音乐播放过的时间   时时刻刻获取到当前音乐播放时间
        //canplay:当音频资源加载完毕，会立即触发这个canplay事件
        
      
        music.addEventListener('canplay',function(){
            console.log(music.duration);
        })
        btn1.onclick = function(){
            music.play()
            // console.log(music.paused);
            // console.log(music.duration);
            console.dir(music)
        }
        btn2.onclick = function(){
            music.pause()
            console.log(music.paused);
        }
        // window.onload = function(){
        //     console.log(music.duration);
        // }
    </script>
    
</body>
</html>```

致我逝去的青春

发布了17 篇原创文章 · 获赞 23 · 访问量 336

私信关注

js 发布订阅，移动端简单事件，h5新增属性

发布订阅

移动端

H5新增属性

input

CSS3动画

媒体查询

flex布局

rem布局

移动端点透

移动端touch事件

移动端音视频

猜你喜欢