如何在一个网站或者一个页面规划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,"请输入要搜索的");
};