基于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 相关文章推荐
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
Node 模块原理与用法详解
May 13 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 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
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
初学Javascript的一些总结
2008/11/03 Javascript
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
使用Python实现简单的服务器功能
2017/08/25 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
北大研究生linux应用求职信
2013/10/29 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
《开国大典》教学反思
2014/04/19 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
Vue Element plus使用方法梳理
2022/12/24 Vue.js