在多人合作完成网页,经常遇到大家的js代码相互影响的问题。现在有许多模块化的前端框架,应该是可以解决这个问题。但本人并非前端开发人员,那些框架都没用过,只对jquery相对熟悉,就想用jQuery来解决这个问题。
首先相互影响主要有两个方面,一是js代码中定义的function名重复,导致覆盖问题;另一个是js操作页面元素时,大家使用的id、name、class等可能重复,导致操作了错误的对象。
对于第一点,采用的是定义一个注册函数,其他自定义的方法都要通过调用注册函数进行注册,注册时去检查该函数是否已经存在。对于第二点,考虑使用div作为容器(当然其他标签元素也可以),一个功能模块放到一个容器中,一个模块的js只操作对应容器中的元素,该模块只通过容器进行对外的交互(模块化后一个模块只知道自己的容器是谁,数据传递只在模块和容器间进行)。
下面是自定义的注册函数$r,参数有两个,第一个参数是功能模块函数,要求把一个功能的js代码块写到一个函数中,传递给注册函数。第二个参数是模块名称字符串,多级采用“.”来分隔。
// 注册函数$r
window.$r = function(){
var i, func, modelName, name, model, paramArr;
func = arguments[0];
modelName = arguments[1];
if(typeof func != 'function'){
console.error('第一个参数不是function');
return;
}
if(typeof modelName != 'string'){
console.error('第二个参数应当为模块名字符串');
return;
}
paramArr = modelName.split('.');
model = window;
name = '';
for(i=0; i<paramArr.length; i++){
if(i == paramArr.length - 1){
if(typeof model[paramArr[i]] != 'undefined'){
console.error('模块"' + modelName + '"已存在');
return;
}
model[paramArr[i]] = checkParamProxy;
return checkParamProxy;
}
model = model[paramArr[i]] = model[paramArr[i]] || {};
if(typeof model != 'object'){
for(j=0; j<i; j++){}
console.error('"' + name + paramArr[i] + '"不是object');
return;
}
name += paramArr[i] + '.';
}
function checkParamProxy($p){
if(typeof $p == 'undefined'){
console.error('模块' + modelName + '需要传入一个jQuery类型参数作为容器');
return;
}
if($p instanceof jQuery){
return func.call($p, $p);
}
console.error('"' + $p + '"不是jQuery对象');
return;
}
}
下面举个示例,页面代码如下,里面就两个div,container1和container2,当作容器使用。
<html>
<head>
<meta charset="UTF-8"/>
<title>Register</title>
</head>
<body>
<div id="container1"></div>
<div id="container2"></div>
</body>
</html>
现在注册一个绘制内切椭圆或圆形的js模块,模块名叫“graph.ellipse”,然后将容器container1的jQuery对象作为参数赋给graph.ellipse
// 注册graph.ellipse模块
$r(function($c){ // $c为容器的jQuery对象,也可通过this来获取
$c.html('<div></div>');
$c.on('change', function(){
var color = $c.data('color');
$c.children().css({'border-color':color});
})
$c.trigger('loaded');
}, 'graph.ellipse');
graph.ellipse($('#container1')); // 将container1作为模块容器
这样就得到了一个宽高为100px的圆。
在graph.ellipse模块中,将操作都限定在$c(示例中即$('#container1'))内,比如用$c.find(e|o|e)查找元素,用$c.append(content|fn)追加元素等,这样就确保不会对其他模块产生影响。模块对外交互采用$c.trigger(type)和$c.on(type,fn)触发绑定事件机制,比如示例中$c.trigger('loaded')触发一个loaded加载完成事件,需要在模块加载完成后执行的操作,就可以在外部用$('#container1').on('loaded',function(){// TODO graph.ellipse模块加载完成后执行})来实现。外部要改变圆的颜色,就可以用$('#container1').data({'color':'#27ae60'}).trigger('change')触发容器上的change事件,得到一个绿色的圆。
在网络上也时不时会看到,“是时候和jQuery说拜拜了”,最著名的莫过于在2013年的这篇文章You Might Not Need jQuery。
15个jQuery小技巧:返回顶部按钮,预加载图像,检查图像是否加载,自动修复破坏的图像,悬停切换类,禁用输入字段,停止加载链接,淡入/滑动切换,简单的手风琴...
jquery插件是用来扩展jquery对象的一种方法,它的使用方法是通过jquery对象$来调用。其中Jquery插件开发一共有三种方式:$.extend(),$.fn,$.widget()
在JQuery中,可以使用trigger()方法完成模拟操作,trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。rigger(type[,data])方法有两个参数
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
jquery是对js语言的封装、扩展,实现了对浏览器的兼容,使用jquery能让操作更方便简洁,这篇文章主要讲解原生js中Dom对象和jquery对象的相互转换。
在使用jquery.pagination.js插件的时候,会出现pagination is not a function的错误,这是什么原因导致的呢?这里为大家整理一下,请对比自己的代码参考!
整理一些简单技巧的集合,帮你提升 jQuery 技能,你可以直接拿来使用,下面内容包括:禁止右键点击、隐藏搜索文本框文字、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器...
jQuery提供了JS未能提供的动画效果,利用jQuery的动画效果,可以极大的简化JS动画部分的逻辑,包括:滑入滑出动画、淡入淡出动画、显示隐藏动画、停止动画、自定义动画
在网页的实际应用中,需要根据不同的条件来改变元素的CSS样式,通过动态的给元素添加删除一个CSS类可以实现此功能,下面通过实例来介绍一下如何实现此种功能。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!