javascript - js 在定义一个页面上的事件的时候，你们是怎么做的？？

Question

两段较长的代码：

I 普通写法：

(function(){
   /*** 定义相关变量 ***/
   var con = $id('container');
   var leftCon = $cn('left')[0];
   var rightCon = $cn('right')[0];
   var thumb = $cn('user_thumb' , leftCon)[0];
   var menusList = $id('func_area');
   .....
   
   /*** 初始化 ***/
   checkEleH();
   menuSlide(menus , levelTwo);
   showTime();
   resizeIfr();
   window.addEventListener('resize' , resizeIfr , false);
   window.addEventListener('resize' , checkEleH ,false);
   
   /*** 工具函数 ***/
   function checkEleH({...}
   function menuSlide(menus , levelTwoList){...}
   function showTime(){...}
}());

II 面向对象的写法

(function(){
// 定义搜索功能
function Search(){
  this.searchForm = $id('search_form');
  this.main = $cn('search_result')[0];
  this.startBtn = $id('start_btn');
  this.endBtn = $id('end_btn');
  ...
}

Search.prototype = {
  // 变量重置
  init: function(){...} , 
  
  setVar: function(){...} ,
  
  clearTimeout: function(){...} ,
  // 发起搜索 
  search: function(){...} ,

  // 终止搜索
  stopSearch: function(){...} , 
  
  initial: function(self){
    self.startBtn.addEventListener('click' , function(){
      self.search();
      cso.remove(self.searching , 'hide');
      cso.remove(self.stopBtn , 'hide');
    } , false);

    self.stopBtn.addEventListener('click' , function(){ 
      self.stopSearch();
      cso.add(this , 'hide');
    } , false);
  }
};


/*
  * 上面的对象定义了页面所有的事件
  * 下面只需要简单的调用一下初始文件，整个页面的 所有 js 事件就都定义了
*/
var search = new Search();
search.initial(search);
})();

不知道这两种写法的优缺点是什么？？ 有没有更好的写法？？ 大牛们都是怎样组织代码去实现一个页面的 js 的？？

Answer 1

面向对象的写法采用了构造函数模式和原型模式，构建函数用于定义实体属性，原型模式用于定义方法和共享的属性。这样，Search的实例会有自己的一份实力属性的副本，又同时共享着方法的应用，最大限度地节省了内存