基于jQuery架构javascript基础体系_jquery

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能力也就是这样简单。

时间: 2024-12-03 13:22:21

基于jQuery架构javascript基础体系_jquery的相关文章

基于jQuery的JavaScript模版引擎JsRender使用指南_jquery

前言      JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点:           ·  简单直观           ·  功能强大           ·  可扩展的           ·  快如闪电      这些特性看起来很厉害,但几乎每个模版引擎,都会这么宣传...      由于工作需要,小菜才接触到此款模版引擎.使用了一段时间,发现它确实比较强大,但小菜觉得有些地方强大的过头了,反倒让人觉得很难理解.      另一方面,JsRender的

10个基于jQuery或JavaScript的WYSIWYG 编辑器整理_jquery

在线编辑内容的时候,那些基于 JavaScript 的编辑器帮了我们大忙,这些所见即所得(WYSIWYG)编辑器,给我们提供了类似 Office?的操作体验.如今,任何网站内容管理系统(CMS)和博客系统都需要一个这样的编辑器.本文精选了5个基于 JavaScript?的编辑器,5个基于 jQuery 框架的编辑器. MarkitUp – jQuery Official Website | Demo markItUp! 它不是一个"全功能,乱用"的编辑器.相反,它是一个非常轻量级的,可

基于jquery实现省市联动特效_jquery

本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <!-- 引入jquery --> <script src="http://lib.si

基于jQuery的ajax方法封装_jquery

ajax (ajax开发)简介 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在实际的项目里,ajax的应用频率很高

基于jquery实现无限级树形菜单_jquery

本文实例为大家分享了基于jquery实现无限级树形菜单效果,具有一定的参考价值,具体内容如下 效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无限级树形菜单</title> </head> <script src="jque

基于jquery实现日历签到功能_jquery

在一些任务游戏.贴吧管理中都会有一个签到功能,帮助大家记录登录天数,积累等级经验,这个日历签到功能是如何实现的,本文为大家进行演. 本文实例讲述了基于jquery实现日历签到功能.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

深入分析JQuery和JavaScript的异同_jquery

ps:LZ觉得这个标题有点大了,超出了能力范围,不喜勿碰.目前只记录LZ能力范围内的,日后持续补充. 一.JQuery对象和DOM对象的相互转化(<锋利的JQuery>)        JQuery转化为DOM:           1.var jq = $('#selector');   var dom = jq[index];           2.var jq1 = $('#selector1');  var dom1 = jq1.get(index) 或者 var dom1 = jq

推荐6款基于jQuery实现图片效果插件_jquery

1.基于jQuery实现的汇图网大屏焦点图效果 汇图网大屏jQuery焦点图代码,可设置切换模式,如淡入淡出切换,左右滚动切换,上下滚动切换,可设置是否自动轮播,可设置鼠标划过是否停止播放等. 在线演示 源码下载 2.HTML5基于SVG实现的过山车动画特效 今天我们要分享一款很酷的HTML5/SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,整体动画效果流畅自然,效果非常酷. 在线演示 源码下载 3.jQuery实现苹果官网页面上下滚动全屏效果 这是一款基于

Notify - 基于jquery的消息通知插件_jquery

Sticky是一个简单的页面消息提醒jQuery插件.可以设置让消息在页面的四个角落出现,也可以设置在页面中央出现.可以手动关闭消息,也可以设置成自动关闭. http://thrivingkings.com/sticky/        2)JNotify是一个JQuery插件,基于JQuery UI实现,用于创建页面消息提醒和状态提示条.   http://jnotify.codeplex.com/  演示地址:http://www.fabiofranzini.com/jNotify/Demo