规划主要分为两部分: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. php : 工厂类演示

    工厂类的目的: 通过类名, 动态创建该类的对象实例 <?php /* * 工厂类演示 */ class A{} class B{} // 工厂类: 有一个静态方法,通过该方法,能够获得指定类的对 ...

  2. 跨站脚本 XSS<一:介绍>

    *XSS 利用的是用户对指定网站的信任,CSRF 利用的是网站对用户网页浏览器的信任 跨站脚本(Cross-site scripting,通常简称为XSS)是一种网站应用程序的安全漏洞攻击,是代码注入 ...

  3. Deep Learning 8_深度学习UFLDL教程:Stacked Autocoders and Implement deep networks for digit classification_Exercise(斯坦福大学深度学习教程)

    前言 1.理论知识:UFLDL教程.Deep learning:十六(deep networks) 2.实验环境:win7, matlab2015b,16G内存,2T硬盘 3.实验内容:Exercis ...

  4. 【java基础】方法2

    让形参可变的方法 jdk1.5之后,java允许定义形参长度可变的参数,允许为方法指定数量不确定的形参. package object; public class VariableParam { // ...

  5. Android 四大组件之三(广播)

    1.Android广播机制概述 Android广播分为两个方面:广播发送者和广播接收者,通常情况下,BroadcastReceiver指的就是广播接收者(广播接收器).广播作为Android组件间的通 ...

  6. mac下使用brew安装ffmpeg支持x265

    使用brew install ffmpeg 安装ffmpeg默认是没有支持x265的, 使用brew info ffmpeg 获取安装选项帮助, 使用brew reinstall ffmpeg --w ...

  7. Using Spring Boot without the parent POM

    Using Spring Boot without the parent POM: 问题 spring boot项目一般情况下的parent如下: <parent> <groupId ...

  8. Android开发--ImageView的应用

    1.简介 当要在屏幕上显示图片时,ImageView用于创建显示图片所需的对象.另外,通过设置ImageView可以改变图片的有关属性. 2.构建 使用Images & Media中的部件来实 ...

  9. Linux字符设备

    一.linux系统将设备分为3类:字符设备.块设备.网络设备. 字符设备:是指只能一个字节一个字节读写的设备,不能随机读取设备内存中的某一数据,读取数据需要按照先后数据.字符设备是面向流的设备,常见的 ...

  10. SAP常用命令及BASIS操作

    Pfcg         角色,权限参数文件配置Su53        查看权限对象  st01  跟踪St22         看dump,以分析错误  eg.找到ABAP程序出错的地方,找出fou ...