基于jQuery架构javascript基础体系

 更新时间:2011年01月01日 17:51:44   作者:  
jQuery毕竟还只是一个基础的最底层的工具集,封装元素选择器,事件等等,基本上能满足一般的需求,但要从整体的WEB的周度来看,为了提高javascript开发的效率与可重用性,就需要有一个整体的布局
jQuery的使用开始成为javascript开发者的主选产品,但如果没有一个整体的规划,简单的拿来主义势必带来后期维护成本的增加,大量的jQuery插件如同一把双刃剑,一方面大大节省了开发时间与周期,但同时也造成WEB页面加载的负担,带来的难护与二级扩展成本将非常庞大,因此,在使用之前就需要一个最基础的javascript架构体系,能明显基础功能组件,插件组件有效实施与扩展。

我们想,jQuery毕竟还只是一个基础的最底层的工具集,封装元素选择器,事件等等,基本上能满足一般的需求,但要从整体的WEB的周度来看,为了提高javascript开发的效率与可重用性,就需要有一个整体的布局,biuuu认为最简单的思路如下:

1,在现有的ajax接口之上再封装一层操作,主要是用于统一ajax入口,同时可以再细分把GET与POST两种进行分离,通过全局的入口,就能从整理上把关,如过滤参数,检验参数,增加全局参数等,一步到位,可复用性非常高,实现上如下:
复制代码 代码如下:

var ajax= {
get : function(){
jQuery.get(url, [data], [callback], [type])
}
post : function(){
jQuery.post(url, [data], [callback], [type])
}
}

2,封装统一的弹出框,对话框等交互窗口,通过统一接口实现弹窗类操作的交互,节省开发时间,同时有利于整体风格的调整与优化。

3,提供基础的插件加载函数,类似于工厂模式,统一插件加载与调用的入口,对于后期的扩展与维护提供便利,这样就不需要关心插件的更新与升级,只需要调用统一的接口。

4,其实就是一些最基础常用的函数,这个与具体的项目相关,做为全局的工具类。

从上面四点来看,整体的架构思路还只是一个比较浅层次的方案,其实还有安全,性能等方面的考虑,但至少需要有这方面的思路,越是简单就越能体现出架构的合理性,javascript体系也不例外,在实际的使用过程中,通过整合与优化,提高javascript的开发效率与提升javascript能力也就是这样简单。

相关文章

  • jQuery中用on绑定事件时需注意的事项

    jQuery中用on绑定事件时需注意的事项

    本篇文章主要介绍了jQuery中用on绑定事件时需注意的事项,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • imgAreaSelect 中文文档帮助说明

    imgAreaSelect 中文文档帮助说明

    ImgAreaSelect是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,非常的fashion。另外,可以在这个选择图像区域的基础上应用网站的其他一些技术,比如图片拖曳、图片编辑等。
    2011-10-10
  • jQuery实现鼠标单击网页文字后在文本框显示的方法

    jQuery实现鼠标单击网页文字后在文本框显示的方法

    这篇文章主要介绍了jQuery实现鼠标单击网页文字后在文本框显示的方法,可实现鼠标点击上方文字即可在下方勾选处文本框显示对应文字的效果,涉及jQuery鼠标事件及链式操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • Jquery判断页面图片是否加载失败的代码

    Jquery判断页面图片是否加载失败的代码

    这篇文章主要介绍了Jquery判断页面图片是否加载失败,加载失败则显示默认图片的实现方法,需要的朋友可以参考下
    2023-06-06
  • jQuery(非HTML5)可编辑表格实现代码

    jQuery(非HTML5)可编辑表格实现代码

    单击单元格选中,选中过程中使用方向键更换选中的单元格,选中过程中按回车键或者直接双击单元格进入可编辑状态,单元格失去焦点时保存修改的内容
    2012-12-12
  • WEB前端开发都应知道的jquery小技巧及jquery三个简写

    WEB前端开发都应知道的jquery小技巧及jquery三个简写

    一个简单技巧的集合,帮你提升 jQuery 技能,下面脚本之家小编给大家收集整理了web前端开发都应知道的jquery小技巧,对jquery小技巧感兴趣的朋友一起学习吧
    2015-11-11
  • JQuery 选项卡效果(JS与HTML的分离)

    JQuery 选项卡效果(JS与HTML的分离)

    基于JQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离。
    2010-04-04
  • jQuery中wrapInner()方法用法实例

    jQuery中wrapInner()方法用法实例

    这篇文章主要介绍了jQuery中wrapInner()方法用法,实例分析了wrapInner()方法的功能、定义及包裹匹配元素的使用技巧,需要的朋友可以参考下
    2015-01-01
  • EasyUI 中 MenuButton 的使用方法

    EasyUI 中 MenuButton 的使用方法

    在EasyUI 的Demo 中 只有MenuButton 的显示DEMO,没有click 事件的相关操作,项目中正好用到啦,所以研究了下,可以用js 动态的为menu item 绑定click 事件
    2012-07-07
  • jquery性能优化高级技巧

    jquery性能优化高级技巧

    jquery性能优化做好,速度也很快,那么如何提高jquery性能呢,本篇文章给大家介绍jquery性能优化高级技巧,需要的朋友可以参考下
    2015-08-08

最新评论