项目中jQuery使用最佳实践

最新推荐文章于 2024-08-17 11:34:01 发布

峰际流云

最新推荐文章于 2024-08-17 11:34:01 发布

阅读量2.1k

点赞数

分类专栏： js jQuery 文章标签： web 前端 js 项目管理

本文链接：https://blog.csdn.net/xieguojun2013/article/details/17618473

版权

js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jQuery

2 篇文章 0 订阅

订阅专栏

目前jQuery已成为web前端最受欢迎的框架，各大网站均能找到它的影子，比如CSDN。结合本人的工作和最近几个月的学习，说说在一个比较大的项目里，如何有效并规范地使用该框架。虽然jQuery的使用非常简单灵活，没有太多的限制，可以在页面或脚本文件中自由使用，但是对于一个比较大型的项目来说，合理规范js代码及框架的使用，对于项目管理和长期维护工作来说都是非常重要的。

本人所在的项目是一个大型的互联网项目，其中使用了大量的开源项目。而前端使用的就是jQuery库，项目还基于jQueryUI进行了二次开发，形成了自己的前端UI库，统一了界面风格。整体对jQuery的使用非常深入，由于项目规模非常大，对编程规范的要求也非常高，像界面的渲染、参数的传递、事件监听器的注册、命名空间的使用等都有规范要求。按照规范编程的好处就是新手进入项目并熟悉的过程会大大缩短，可维护性大大提高。同时对于开发人员来说，开发的效率也大幅提高，形成一种开发的套路。

对于脚本化web页面，无非就是通过js代码来操作html元素，以达到使html页面动态化的目的。然而为了使页面结构与JS代码分离，我们通常是将JS代码统一写在一个外部js文件中或写在页面的<script>标签中。而这些js代码可以通过原生的js API或jQuery来获取要操作的元素，从而完成诸如页面元素增删、注册事件监听器、动态加载数据等动作。下面是一个使用jQuery的js'文件模板。

(function($){
   /*以下代码定义命名空间，以便在其他js代码块中使用该文件中定义的对象*/
   var pageName= Web.moduleName.pageName;
   /*...*/
   /*引入其他命名空间对象*/
   var common = Web.moduleName.common;
   /*...*/

   /*该函数中使用的变量定义*/
   var foo,bar="test";
   /*...*/

   /*给命名空间中的对象增加方法和行为*/
   $.extend(pageName,{
     /*config为通过命名空间调用该方法时传入的参数,一般为对象*/
     /*init方法为pageName对象对外暴露的初始化接口*/
     /*使用实参config初始化函数内定义的变量，以便对象中的其他方法使用*/ 
        init:function(config){ 
        foo = config.foo;bar = config.bar;
        /*调用页面初始化代码写在这里*/
        _initUI();
        /*调用加载数据方法代码写在这里*/
        _loadData();
        /*调用注册事件监听器方法代码写在这里*/
        _registerEventHandler();
           /*...*/
        /*其他的处理过程*/
          /*...*/
       },     
      _initUI：function(){    
          /*...*/
       },   
      _loadData:function(){
         /*...*/
       },
      _registerEventHandler：function(){
         /*...*/
       }
 });
})(jQuery);

js模板主要定义了一个命名空间中的对象的各种方法，方法的执行依赖于传递给该对象的配置选项参数。所以在页面文件中执行该对象的方法时（init），必须将用于初始化的参数配置选项传递给该对象。由于对象中方法执行的操作都是DOM操作，需要在web浏览器渲染页面结构后才能执行，否则js代码的执行会报错。一般将引入上述js文件的语句及执行对象初始化的代码放在页面的最后。如下所示：

<html>
<head></head>
<body>
<div></div>
...
<!-- 引入外部js文件 -->
<script src= './web.moduleName.page.js></scirpt>
<script>
<!-- 执行外部js文件中对象的方法 -->
$(function(){
/*调用init方法*/
 Web.moduleName.pageName.init({
  foo:"value1",
  bar:"value2"
  /*其他选项*/
});
});
</script>
</body>
</html>

通常情况下，除了静态页面，动态页面都是使用其他服务器端编程技术诸如php、jsp、asp等在请求到达后，动态生成请求的响应内容，故上述代码中的value1、value2都是在服务器端通过业务逻辑的处理后返回的数据。刚好也可以使页面根据业务逻辑的处理结果来渲染结构。
以上是项目中使用jQuey的一种规范的方法，简洁明朗，结构清晰，可读性强。每个页面都可以按照这个标准写法去编写，可以大大提高项目代码的可维护性，同时使大规模团队开发成为可能。