基于jQuery架构javascript基础体系


Posted in Javascript onJanuary 01, 2011

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

Javascript 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
jQuery链使用指南
Jan 20 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
jQuery技巧总结
Jan 01 #Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 #Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 #Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 #Javascript
Javascript事件热键兼容ie|firefox
Dec 30 #Javascript
某人初学javascript的时候写的学习笔记
Dec 30 #Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 #Javascript
You might like
PHP集成FCK的函数代码
2008/09/27 PHP
PHP源码之explode使用说明
2011/08/05 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
Python搭建FTP服务器的方法示例
2018/01/19 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python定义类self用法实例解析
2020/01/22 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
学校食堂采购员岗位职责
2013/12/05 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript
HDFS免重启挂载新磁盘
2022/04/06 Servers