Examples of jQuery Namespace and Closure Usage

  • 2021-07-10 18:27:35
  • OfStack

This article illustrates the use of jQuery namespaces and closures. Share it for your reference, as follows:


/*
 *  User summary and audit of service company 
 */
(function() {
 "use strict";
 var companyList=new Object();// Declare Namespace 
 // The timestamp is formatted as time 
companyList.getLocalTime = function(nS){
  return new Date(parseInt(nS)).toLocaleString().substr(0,17);
}
 // Energy-saving service company users list
  var keywords_pagenumber=1;
 companyList.getCompanyUser = function(){
   var url="/ptsp/rest/company/register/list";
   $.get(url,{thisPage:keywords_pagenumber},function(data){
     console.log(data.data.rows);
     console.log(data.data.pagination);
     if(data.success){
      var result=data.data.rows;
      var code="";
     for(var i=0;i<result.length;i++){
       for(var i in result){
        var obj=result[i];
        var address=obj[5]+obj[6];
        var sta=obj[8];
        var txt=""
        if("WAIT"==sta){
        txt=" Pending review ";
        }else if("YES"==sta){
        txt=" Approved ";
        }else if("NO"==sta){
        txt=" Do not pass ";
        }
        code +="<tr>"
        +"<td>"+obj[1]+"</td>"
        +"<td>"+obj[2]+"</td>"
        +"<td>"+address+"</td>"
        +"<td><a href='/ptsp/web/preview/image?filename="+obj[4]+"' target='_blank'> View </a></td>"
        +"<td>"+txt+"</td>"
        +"<td>"+companyList.getLocalTime(obj[9])+"</td>"
        +"<td><a class='btn btn-default btn-sm' data-toggle='modal' href='#myModalS' companyId='"+obj[0]+"' onclick='companyList.checkCompany(this);'> Audit </a></td>"
       +"</tr>";
       }
     }
     $("#companyInfo").html(code);
      // Paging 
      keywords_pagenumber=data.data.pagination.thisPage;
      var keywords_pagesize=data.data.pagination.pageRange;
      var dataSize = data.data.pagination.dataSize;
      var totalpage =Math.ceil(dataSize/keywords_pagesize);
      $("#exp_keywords_page").pageBar({
      PageIndex: keywords_pagenumber, // Current page 
      PageSize: keywords_pagesize, // Number of records per page 
      TotalPage: totalpage,// Total pages 
      RecordCount: dataSize,// Total data 
      //isShowPageNumber:false,
      onPageClick:function(page){
       keywords_pagenumber=page;
       companyList.getCompanyUser();
      }
      });
     }
   });
 }
 $(document).ready(function(){
  console.log("check register user");
  // Energy-saving service company users list
  companyList.getCompanyUser();
 });
 // Submit 
 $('#modalForm1').ajaxForm(function(jsonResult) {
   if(jsonResult.success) {
    alert(" Save successfully! ");
    window.location.reload();
   } else {
    alert(jsonResult.msg);
   }
 });
})(jQuery);

Note: The namespace of jQuery is a class similar to css, not package similar to java. The concept of JS closure is very simple, that is, the function uses external variables and can be obtained without passing parameters.

More readers interested in jQuery can check out the topics on this site: "Summary of Usage and Skills of Common Events of jQuery", "Summary of Common Plugins and Usage of jQuery", "Summary of Extension Skills of jQuery" and "Summary of Usage of Selector of jquery"

I hope this article is helpful to everyone's jQuery programming.


Related articles: