如何在一個網站或者一個頁面規劃JS

規劃主要分爲兩部分:1.JS的分層,2.Js的規劃

1.JS的分層(功能)

  1-1.底層的庫 : jquery
  1-2.組件(ui) : 好比拖拽等,模塊之間沒有必然的聯繫,能夠重複利用
  1-3.應用 : 邏輯部分 

2.js的規劃(管理)

避免全局和方法,能夠採用命名空間,閉包, 面向對象的寫法.便於管理.模塊化 (seaJs,requireJs)咱們能夠用數軸來比喻規劃,X軸是功能,Y軸是管理.好比圖書館,這個圖書館的每一層書是不同的,這就比如是咱們X軸功能的區分,圖書館的每一層書如何擺放,是放書架上仍是桌子上,這些是 經過規劃書籍來完善的,這就比如Y軸的管理.

用命名空間作案例:

先定義一個總的命名空間,而後給它添加多個屬性名,這些屬性名都是不一樣的功能模塊.最後在window.onload中調用便可.

window.onload = function(){
   mv.app.toTip();
};  

var jd = {};

mv.tools={}; //

mv.ui={}; //能夠複用的效果加到這裏,好比輸入框鼠標失去,得到焦點,下面以textChange舉例

mv.ui.textChange=function(obj,str){//輸入框效果    obj.onfocus = function(){        if(this.value == str){          this.value = "";       };   };   obj.onblur = function(){      if(this.value == ""){         this.value = str;     };  };};mv.app={};mv.app.toTip = function(){     mv.ui.textChange(oDiv1,"請輸入要搜索的");};