基于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 相关文章推荐
List Installed Software Features
Jun 11 Javascript
取键盘键位ASCII码的网页
Jul 30 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
js实现跨域的多种方法
Dec 25 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
Vue实现todolist删除功能
Jun 26 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
Javascript通过控制类名更改样式
May 24 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
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
python中的json总结
2018/10/11 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
python_mask_array的用法
2020/02/18 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
物业管理委托协议(2篇)
2014/09/23 职场文书
师德师风事迹材料
2014/12/20 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
雄兵连:第三季先行图公开,天使恶魔联合,银河之力的新力量
2021/06/11 国漫