从移动端工作内容转到桌面端（网页），突然想起了


真的就是，代码中就只有了jquery,什么框架都没用，如React,angular,Vue，也可能是代码是老一代的程序员写的吧，没办法了，对于我们这种只用过框架的人，都无从下手，任务下来后，还是捋起袖子开干啊。

在熟悉代码中，我发现，原来不用框架还可以这么写的….当然从angular->react->jq，我只能去适应别人，毕竟自己是打工的，还是得去熟悉熟悉jquery，顺便去探索原理。

以下系列教程呢，是参考某培训机构找到的视频，宗旨是探索jquery，打基础

jquery-事件框架

1、事件的发展

事件的发展趋势 ： 解耦合 代码分离 目的：团队化作战 降低不同能力之间的合作的彼此依赖

//80年代之前
<button onclick ="alert('nihao')">你好</button>

//90年代分离
<button onclick ='testfn()'> dajia</button>


//2002年

<button id='btn'></button>

可以看出来 dom元素 有个onclick属性，可以处理点击事件，早期也就是弹框直接写在dom元素中

后面越来越复杂，开始创建方法，写点击触发的逻辑

后面直接省了，直接用dom操作区寻找相关的元素id，去添加点击逻辑

比如：

<script>
        document.getElementsByTagName('div')[0].onclick = function(){
           this.style.background='green'
        }
</script>

但是 现在MVVM框架的做法还是选择自定义属性，写个方法，为什么又回到了90年代的做法呢，以前我是想不通的，现在我能想通

因为我TM的哪里知道你js文件放在哪里，在哪里引入的js文件，特别强调是使用arttemplate.js了，我根本不知道在哪里添加的点击事件方法，我还要全局搜索么？

事实是 我现在开发就是在全局搜索元素id，才能找到点击事件的逻辑处理…(>﹏<。)～呜呜呜……

2、jq给元素添加点击事件

  • click
  • bind
  • one
  • delegate
  • on
例子
<body>
    <div>
        <button id="btn1">添加新的p元素</button>
        <button id="btn2">添加新的H3元素</button>


        <p>第一个p元素</p>
        <p>第二个p元素</p>
        <p>第三个p元素</p>
        <p>第四个p元素</p>
        <p>第五个p元素</p>

        <h3>第二个p元素</h3>
        <h3>第三个p元素</h3>
        <h3>第四个p元素</h3>
        <h3>第五个p元素</h3>
    </div>

    <script>
        $("#btn1").click(function(){
            $("div").append("<p>这是一个新的p元素</p>");
        });
        $("#btn2").click(function(){
            $("div").append("<h3>这是一个新的h3元素</h3>");
        });

        //给多个元素绑定事件
        //但是新增的元素不行
        $("div p").each(function(){
            $(this).click(function(){
                $(this).css('color','green')
            })
        })


        //我们可以使用bind来打到同样的目的
        //新的元素也不行
        $("div h3").bind("click", function () {
            $(this).css('color','green')
        })

        //还可以绑定多个
        $("div h3").bind("click", function () {
            $(this).css('background','yellow')
        })

    </script>

    </body>

one:就是只执行一次点击事件

delegate:就适用于给一个列表子元素都绑定一个点击事件

如：

$("div").delegate('h3',"click", function () {
        $(this).css('color','green')
    })

on:可以看源码，bind和click，源码中最后用的还是on

3、手动实现jq的事件框架

好了，jq的使用都已经说清楚了，现在说怎么实现一个事件框架

3.1 建立一个js文件，后//定义一个对象 - 名字是$
var $ = function() {};
3.2 在框架中实例化，这样外面使用的使用就不用实例化了
$ = new $();
3.3巧用extend 分离功能代码
$.extend($,{
    /*绑定事件*/
    on: function (id, type, fn) {
        //var dom = document.getElementById(id);
        var dom = $$.isString(id)?document.getElementById(id):id;
        //如果支持
        //W3C版本 --火狐 谷歌 等大多数浏览器
        //如果你想检测对象是否支持某个属性，方法，可以通过这种方式
        if(dom.addEventListener ) {
            dom.addEventListener(type, fn, false);
        }else if(dom.attachEvent){
            //如果支持 --IE
            dom.attachEvent('on' + type, fn);
        }
    },
    /*解除事件*/
    un:function(id, type, fn) {
        //var dom = document.getElementById(id);
        var dom = $$.isString(id)?document.getElementById(id):id;
        if(dom.removeEventListener){
            dom.removeEventListener(type, fn);
        }else if(dom.detachEvent){
            dom.detachEvent(type, fn);
        }

    },
    /*点击*/
    click : function(id,fn){
        this.on(id,'click',fn);
    },
    /*鼠标移上*/
    mouseover:function(id,fn){
        this.on(id,'mouseover',fn);
    },
    /*鼠标离开*/
    mouseout:function(id,fn){
        this.on(id,'mouseout',fn);
    },
    /*悬浮*/
    hover : function(id,fnOver,fnOut){
        if(fnOver){
            this.on(id,"mouseover",fnOver);
        }
        if(fnOut){
            this.on(id,"mouseout",fnOut);
        }
    }
})
3.4 跟上选择器框架实现
$.prototype = {
    $id:function (str){
        return document.getElementById(str)
    },
    $tag:function(tag){
        return document.getElementsByTagName(tag)
    },
    //去除左边空格
    ltrim:function(str){
        return str.replace(/(^\s*)/g,'');
    },
    //去除右边空格
    rtrim:function(str){
        return str.replace(/(\s*$)/g,'');
    },
    //去除空格
    trim:function(str){
        return str.replace(/(^\s*)|(\s*$)/g, '');
    },
}

可以看到我们还是实现了jq框架的相关代码，可能写的质量和兼容不如jq，但好歹我们知道jq里面是怎么实现的了

结语