前端开发一些常用技巧               模块化结构       &&&&&     命名空间处理 奇技淫巧!!!!!!2016-09-29    17:16:39

#####背景:

  

前端开发过程中,创建js对象非常容易,但是要把代码变得更容易维护,那么就需要一些方法来实现约束和规范。

使用命名空间可以减少全局变量的使用,同时避免命名冲突和额外前缀,在命名空间下定义属性方法,更加面向对象有木有!!

## 实践如图:

####Debugger调试【结合debugger来解释 这个namespace方法的实现】

Step1  :   当执行完第一个紫色框的时候  我控制台输出myApp ,如图:

  

  

这就相当于在  全局定义了myApp 的子属性

Step2  :  当执行完第二个紫色框的时候   我控制台输出myApp , 如图:

  

执行完第二部分代码的时候  就相当于  给myApp对象子属性添加  子方法 ;----》 这样就简单了实现了 我需要的效果。。。。。

####代码

            var  myApp  =myApp||{};
myApp.namespace = function(ns_string){
debugger;
var parts =ns_string.split('.'), //[myApp,module1,module2,module3]
parent =myApp;
if(parts[0]==="myApp"){
parts =parts.slice(1); //[module1,module2,module3]
}
for (var i = 0; i < parts.length; i++) {
if(typeof parent[parts[i]]==="undefined"){
parent[parts[i]] = {};
}
parent =parent[parts[i]];
console.log(parent);
}
return parent;
}
debugger;
myApp.namespace("myApp.module1.module2.module3"); myApp.module1.del = function(x,y){
return x-y;
}
myApp.module1.module2.add =function(x,y){
return x+y;
}
myApp.module1.module2.module3.add1= function(x,y){
return x+y;
}
var val1 = myApp.module1.del(4,2);
var val2 = myApp.module1.module2.add(1,2);
var val3 = myApp.module1.module2.module3.add1(22,33);
console.log(val1);
console.log(val2);
console.log(val3);

JS~~~ 前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧!!!!!!的更多相关文章

  1. sublime前端开发工具常用技巧

    ctrl+N//新建文件夹ctrl+shift+p//打开命令行!,ctrl+E//快速生成html模板ctrl+E//自动补齐ctrl+P(#@)//goto 任何地方,其中#查找元素,@查找样式c ...

  2. [转] Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  3. Web前端开发工程师常用技术网站整理

    1.常用工具相关 有道云笔记 http://note.youdao.com/signIn/index.html 36镇-最好用的共享收藏夹 http://www.36zhen.com/ 浏览器同步测试 ...

  4. JS前端开发判断是否是手机端并跳转操作(小结)

    JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...

  5. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  6. FIS.js前端开发的使用说明文档

    文档结构 什么是FIS 部署FIS FIS基本使用 模块定义 加载方式 调用Tangram 2.0 一.什么是FIS FIS提供了一套贯穿开发流程的开发体系和集成开发环境,为产品线提供前端开发底层架构 ...

  7. yii项目开发项目常用技巧和方法汇总

    1.使用CActiveForm类组件如何输出不带html属性的结果 eg:<?php echo $form->textField($model,'email',array('size'=& ...

  8. 【前端】javaScript 常用技巧总结

    javaScript 常用技巧总结 1.  彻底屏蔽鼠标右键  oncontextmenu="window.event.returnValue=false" <table b ...

  9. api日常总结:前端常用js函数和CSS常用技巧

    我的移动端media html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font- ...

随机推荐

  1. Linux 命令 find

    find命令的基本格式是:find [路径] [选项] [操作]路径是find命令所查找的范围,如用.来表示当前目录,用/来表示根目录,选项用于指定查找条件,如:可以指定按照文件的属主,更改时间文件类 ...

  2. 深入理解unslider.js源码

    最近用到了一个挺好用的幻灯片插件,叫做unslider.js,就想看看怎么实现幻灯片功能,就看看源码,顺便自己也学习学习.看完之后收获很多,这里和大家分享一下. unslider.js 源码和使用教程 ...

  3. hightchart属性(更新中...)

    legend:{ layout: 'vertical', //legend中内容垂直放置 align: 'right', //放在图表右边 verticalAlign: 'middle',    // ...

  4. mysql 获取当前日期及格式化 (转)

    MYSQL 获取当前日期及日期格式获取系统日期: NOW()格式化日期: DATE_FORMAT(date, format)注: date:时间字段format:日期格式 返回系统日期,输出 2009 ...

  5. Vue.js常用指令总结

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind ...

  6. 控制ClistCtrl的滚动的位置

    int nItem = m_listCtrl.GetTopIndex(); CRect rc; m_listCtrl.GetItemRect(nItem, rc, LVIR_BOUNDS); CSiz ...

  7. Linux系统启动错误 contains a file system with errors, check forced解决方法

    /dev/sda1 contains a file system with errors, check forced./dev/sda1: Inodes that were part of a cor ...

  8. C++开发过程多线程同步lock的实现

    在程序开发过程经常使用到多线程,而多线程始终与锁存在紧密地联系,以下详细的介绍如何在C++程序开发过程中自定义锁的几种方法. 1. 下面给出一段代码展现如何通过Mutex实现锁的功能(window p ...

  9. ubuntu随笔

    在命令行里输入 sudo nautilus 之后输入你的用户的密码,会弹出一个目录窗口来,可以复制到这来

  10. java虚拟机之垃圾回收算法

    标记-清除算法: 这是最基础的,就是之前所讲的两次标记,首先标记出所有 需要回收的对象,然后进行统一清除, 这有两缺点:一是效率低,标记和清除(开启低优先级进行回收)都是低效率的.第二是空间问题,标记 ...