从移动端工作内容转到桌面端（网页），突然想起了
老夫写代码就是一把梭
真的就是，代码中就只有了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里面是怎么实现的了
结语
其实我是想复习一下dom一些操作，才写这篇帖子的 嘿嘿
3322
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
