基于jQuery架构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能力也就是这样简单。

赞 (0)

相关推荐

  • 大型JavaScript应用程序架构设计模式

    大型JavaScript应用程序架构设计模式

    PDF版的PPT下载地址:http://www.slideshare.net/jibyjohnc/jqquerysummit-largescale-javascript-application-architecture 注:在整理的过程中,发现作者有些思想是返来复去地说,所以删减了一部分,如果你的英文良好,请直接阅读英文的PPT. 以下是本文的主要章节: 1. 什么叫"JavaScript大型程序"? 2. 顾当前的程序架构 3. 长远考虑 4. 头脑风暴 5. 建议的架构 5.1 设

  • 基于jQuery架构javascript基础体系

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

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

    前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: ·  简单直观 ·  功能强大 ·  可扩展的 ·  快如闪电 这些特性看起来很厉害,但几乎每个模版引擎,都会这么宣传... 由于工作需要,小菜才接触到此款模版引擎.使用了一段时间,发现它确实比较强大,但小菜觉得有些地方强大的过头了,反倒让人觉得很难理解. 另一方面,JsRender的官方文档比较详细,但其他资料出奇的少,遇到点什么问题,基本搜不到,不仅仅是相关问题搜不到,几乎就是没有结果. 再加上Js

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

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

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

  • Javascript基于jQuery UI实现选中区域拖拽效果

    Javascript基于jQuery UI实现选中区域拖拽效果

    一.效果展示 普通的三个div 鼠标拖动选中效果 选中所有的div 这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下. 二.代码实现 整个代码其实也不难,需要用到一个博主自己封装的js文件. AreaSelect.js 考虑到代码量有点大,并且知乎没有代码折叠功能,所以这里就留一个文件名.等博主抽时间将它开源到github上面去,当然,有需要的朋友也可以直接联系博主,博主免费提供! 引入这个js后,还需要引用jquery和jquery UI相关文件. <script

  • 基于jQuery的$.getScript方法去加载javaScript文档解析

    1.两个文件的代码如下: <script> function Ajax(){ //将9-4.html中的Ajax()函数进行修改 $.getScript('9-8.js',function(data){ var html ="<table border='1' cellpadding='2'>"; $.each(comments, function(Index, comment) { html += '<tr><td>' + commen

  • 深入浅析javascript继承体系

    深入浅析javascript继承体系

    最近做web项目,接触了jquery等框架,虽然使用方便,但是还是想学习下Javascript,今天分享下最近对js原型继承的理解,不足之处欢迎指正. 一.构造器的原型属性与原型对象 刚接触js时通常依样画瓢,用函数new一个实例,也不知道其原因,只听说js中函数即对象.原来js中没有采用Java等语言中的类继承体系,而是使用原型对象(prototype)实现继承体系,具体说是利用"构造器"实现类的功能. 首先解释下原型继承中的两个重要概念:原型属性.原型对象(实例). 就js对象系统

  • 基于jquery实现导航菜单高亮显示（两种方法）

    基于jquery实现导航菜单高亮显示（两种方法）

    项目需求: 实现原理:当选中当前元素时,给当前元素添加样式,同级元素移除样式. 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如下: 示例代码一: 具体示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

  • php基于jquery的ajax技术传递json数据简单实例

    本文实例讲述了php基于jquery的ajax技术传递json数据简单实现方法.分享给大家供大家参考,具体如下: html页面: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.2.mi

  • Javascript基础_嵌入图像的简单实现

    Javascript基础_嵌入图像的简单实现

    img元素允许我们在HTML文档里嵌入图像. 要嵌入一张图像需要使用src和alt属性,代码如下: <img src="../img/example/img-map.jpg" alt="Products Image" width="580" height="266" /> 显示效果: 1 在超链接里嵌入图像 img元素的一个常见用法是结合a元素创建一个基于图像的超链接,代码如下: <a href="

  • 基于Jquery.history解决ajax的前进后退问题

    以下内容是关于Jquery.history解决ajax的前进后退问题,具体详情请看下文. 本文的前提是基于后台的,所以这里不会考虑seo的问题.同时,基于后台的管理系统,也不需要被收藏,所以也不会考虑刷新的这种类似直接敲网址的情况!!! 这里使用的是html5中的history.state 来解决. 网上已经有了js的开源解决方案pushState.详见pjax 但是这个方案不适合我的项目(后台项目),尤其是主要的方法有点不够用. 我使用的是  jquery.history.js  可以参考这个

随机推荐