规划主要分为两部分: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,"请输入要搜索的");
};

如何在一个网站或者一个页面规划JS的更多相关文章

  1. 如何在一个网站或者一个页面,去书写你的JS代码

    // JavaScript Document //如何在一个网站或者一个页面,去书写你的JS代码: //1.js的分层(功能) : jquery(tools) 组件(ui) 应用(app), mvc( ...

  2. 如何在一个网站或者页面写js

    如何在一个网站或者页面写js: 1. JS的分层(功能):jquery(tools)  组件(ui)  应用(app).mvc(backboneJS) 2. JS的规划(管理):避免全局变量和方法(命 ...

  3. 用js把数据从一个页面传到另一个页面

    用js把数据从一个页面传到另一个页面的层里? 如果是传到新页面的话,你网站基于什么语言开发直接用get或者post获取,然后输出到这个层 通过url传参 如果是HTML页面的话JS传到新页面就wind ...

  4. JavaScript网站设计实践(七)编写最后一个页面 改进表单

    一.最后一个页面 contact.html.改进表单 在该页面实现的功能: 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证. 在前台最简单的验证:检 ...

  5. 纯JS焦点图特效(可一个页面多用)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 【真的是随笔】如何利用htaccess把网站流量引到一个页面上(站点维护页效果)

    咕咕咕,好久没来博客园转悠了,最近(这个最近好长啊)一直没时间写博(事实上也不知道写点什么有逼格的东西),所以一直都在潜水,,,(此处省略n字) 好了切入正题,关于如何把网站的所有流量引向一个页面的方 ...

  7. [HTML]js实现页面跳转,页面A跳到另一个页面B.以及页面传值(中文)

    要实现从一个页面A跳到另一个页面B,js实现就在A的js代码加跳转代码 JS跳转大概有以下几种方式: 第一种:(跳转到b.html)<script language="javascri ...

  8. 用原生js实现一个页面乘法口诀表

    今天我自己用js实现了一个页面乘法口诀表(如图)来共享给大家,做的不是很好,如果大家有新的想法可以跟我交流哦. 代码如下: <!doctype html><html lang=&qu ...

  9. js实现把一个页面层数据传递到另一个页面

    由于之前面试,被问到过此问题,所以今天特意整理了一下.由于自己技术水平有限,若存在错误,欢迎提出批评. 本博客整理了两种方式从一个页面层向另一个页面层传递参数. 一. 通过cookie方式 1. 传递 ...

随机推荐

  1. C#浅拷贝与深拷贝区别

    也许会有人这样解释C# 中浅拷贝与深拷贝区别: 浅拷贝是对引用类型拷贝地址,对值类型直接进行拷贝. 不能说它完全错误,但至少还不够严谨.比如:string 类型咋说? 其实,我们可以通过实践来寻找答案 ...

  2. Android Gradle 完整指南

    为什么需要学Gradle? Gradle 是 Android 现在主流的编译工具,虽然在Gradle 出现之前和之后都有对应更快的编译工具出现,但是 Gradle 的优势就在于它是亲儿子,Gradle ...

  3. java.lang.OutOfMemoryError: PermGen space异常处理(内存溢出)

    楼主刚接触到这个问题,问度娘,直接查到的都是让 在tomcat>bin>catalina.sh文件的“echo "Using CATALINA_BASE: $CATALINA_B ...

  4. spring文件下载记录

    /** * 下载方法 * @param request * @param response * @param storeName 文件在存在位置的名字(需要带着后缀) * @param content ...

  5. zabbix3.0.4 部署之一 (简介)

    官方网站:http://www.zabbix.com/ 下载地址:http://www.zabbix.com/download.php zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视 ...

  6. Win7精简成功后的总结

    vsax 发表于 2014-7-20 20:59:43  https://www.itsk.com/forum.php?mod=viewthread&tid=333816&highli ...

  7. 【转】 memset()的效率以及源码分析

    void *memset(void *s, int ch, size_t n);作用:将s所指向的某一块内存中的每个字节的内容全部设置为ch指定的ASCII值, 块的大小由第三个参数指定,这个函数通常 ...

  8. ubuntu下添加/删除启动服务项

    在网上查了一下,命令如下 1.添加一个服务: $sudo update-rc.d ServiceName default 2.删除一个服务 $sudo update-rc.d ServiceName ...

  9. PetShop的系统架构设计

    <解剖PetShop>系列 一.PetShop的系统架构设计 http://www.cnblogs.com/wayfarer/archive/2007/03/23/375382.html ...

  10. CSS中!important的优先级

    本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...