JS~~~ 前端开发一些常用技巧 模块化结构 命名空间处理 奇技淫巧!!!!!!...

 前端开发一些常用技巧               模块化结构       &&&&&     命名空间处理 奇技淫巧!!!!!!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);

 

转载于:https://www.cnblogs.com/xianfei689/p/5920695.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/417997.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode 英伟达tk1_英伟达的未来,不只是GPU

成立于1993年的英伟达&#xff0c;最为人熟知的就是他们的GPU。尤其是进入最近几年&#xff0c;因为AI的火热&#xff0c;英伟达GPU的关注度暴增&#xff0c;行业对他们在这个领域的认可程度也达到了前所未有的高度。但其实GPU只是英伟达的根本。历经过去几年的收购和产品线拓展…

语法2

页面(PAGE)标记(TAGS) HTML 文件结构(Document Structures)<html>...</html><head>...</head><body>...</body><HTML><HEAD> <title>, <base>, <link>, <isindex>, <meta></HEAD><…

生成n对括号的合法全排列

生成n对括号的合法全排列&#xff1a; 给定一整数N&#xff0c;输出N对括号的合法全排列 例&#xff1a; 2 3 ()() (()) ()()() (())() ()(()) ((())) 分析&#xff1a; 很经典的需要迭代来进行实现。 迭代的关键在于找到跳出迭代的条件&#xff0c;以及每次迭代的策略。 出口&…

springMVC 源码学习-请求映射原理

一、DispatcherServlet的继承关系 1、FrameworkServlet HttpServlet中的doGet等方法在FrameworkServlet之中重写了&#xff0c;都是调用该方法&#xff1a; 在这个方法内部调用doServlce的方法 这个doService的方法在FrameworkServlet中是一个抽象方法&#xff0c;说明是交给它…

constraintlayout布局新特性_AMD发布Ryzen PRO 4000系列移动处理器:多了超线程和商用安全特性...

昨日晚间&#xff0c;AMD正式发布了基于Renoir的最新一代商用移动处理器Ryzen PRO 4000系列&#xff0c;本次共发布3款处理器&#xff0c;分别是Ryzen 7 PRO 4750U、Ryzen 5 PRO 4650U和Ryzen 3 PRO 4450U&#xff0c;我们制作了规格对比表&#xff0c;如下&#xff1a;从规格对…

易支付系统源码_刷脸支付系统源码,插件源码合作模式有哪些,采购源码需要注意什么...

对刷脸支付比较关注的朋友&#xff0c;应该都知道源码。当拥有这个&#xff0c;就意味着有了独立的系统。也意味着可以打造自己的品牌&#xff0c;转化自己资源&#xff0c;获取更多的利润。但是想拥有一套源码也是不简单的&#xff0c;不仅因为编写的难度和价格&#xff0c;也…

SpringMVC源码-不同类型的参数解析

随便写一个demo: RequestMapping("/car/{id}")public Map<String, Object> getCar(PathVariable("id") Integer id,RequestParam("type") String type,RequestParam("hobby") List<String> hobby){Map<String, Object&…

raid5 合适 多少块硬盘_raid1 raid2 raid5 raid6 raid10如何选择使用?各需要几块硬盘?...

我们在做监控项目存储时&#xff0c;经常会用到磁盘阵列&#xff0c;什么是磁盘阵列呢&#xff1f;那为什么要做磁盘阵列呢&#xff1f;raid1 raid2 raid5 raid6 raid10各有什么优势&#xff1f;本期我们来看下。一、什么是Raid&#xff1f;它有什么作用&#xff1f;1、什么是R…

SpringMVC 源码学习 返回值处理

SpringMVC中对返回值的数据基本分为两类&#xff1a; 1、响应数据 2、响应页面 一、响应数据 响应数据大多数都是将返回值的格式转换为JSON格式然后展示在页面或者保存i起来。 第一步&#xff1a;在SpringBoot中需要引入json场景 <dependency><groupId>org.sprin…

body div js 放大图片_jquery图片放大插件鼠标悬停图片放大效果

都知道jquery都插件是非常强大的&#xff0c;最近分享点jquery插件效果&#xff0c;方便效果开发使用。一、HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> …

预览docx_Windows-快速预览文件-QuickLook

开源、免费的文件快速预览工具&#xff0c; 支持图片、文档、音视频、代码文本、压缩包等多种格式。获得 Mac OS 空格键快速预览文件相同的体验效果图文件夹音视频 浏览压缩包&#xff0c;文本支持的格式&#xff1a;图片&#xff1a;.png, .jpg, .bmp, .gif, .psd, .apng&…

json 微信小程序 筛选_微信小程序学习记录

全局配置app.json 文件用来对微信小程序进行全局配置。pages 类型为 String Array 是 页​面路径列表&#xff0c;创建目录和更改时会自动更改文件。用于指定小程序由哪些页面组成&#xff0c;每一项都对应一个页面的 路径文件名 信息。window 用于设置小程序的状态栏、导航条、…

一定质量的封闭气体被压缩后_多晶硅氯氢化装置补充氢隔膜压缩机十字头铜套磨损原因分析与改善探讨...

潘祝新&#xff0c;王永(江苏中能硅业科技发展有限公司&#xff0c;江苏徐州221004)[摘要]&#xff1a;补充氢气压缩机是多晶硅行业氯氢化装置中的关键设备&#xff0c;它为生产系统的稳定运行不断的补充高纯氢气&#xff0c;其稳定而高效的运行对于生产系统的稳定性及提高氯硅…

vue 生成发布包_年轻人如何从0到1封装发布一个vue组件__Vue.js

封装发布组件是前端开发中非常重要的能力&#xff0c;通过对常用组件的封装可以提升团队开发的效率&#xff0c;避免重复劳作且不方便维护。好的组件的抽象和封装能让组件得到更广泛和多环境兼容的应用。本文讲述了如何一步步从0到1封装发布一个常用的toast组件的过程。本文是搭…