Js Pattern - Namespace Pattern

简介: bad code // BEFORE: 5 globals // Warning: antipattern // constructors function Parent() {} function Child() {} // a variable var some_var...

bad code

// BEFORE: 5 globals
// Warning: antipattern

// constructors
function Parent() {}
function Child() {}

// a variable
var some_var = 1;

// some objects
var module1 = {};
module1.data = {a: 1, b: 2};

var module2 = {};

 

good code

// AFTER: 1 global
// global object
var MYAPP = {};

// constructors
MYAPP.Parent = function () {};
MYAPP.Child = function () {};

// a variable
MYAPP.some_var = 1;

// an object container
MYAPP.modules = {};

// nested objects
MYAPP.modules.module1 = {};
MYAPP.modules.module1.data = {a: 1, b: 2};
MYAPP.modules.module2 = {};

 

Some of the properties you’re adding to the namespace may already exist, and you could be overwriting them.
Therefore before adding a property or creating a namespace, it’s best to check first that it doesn’t already exist

// unsafe
var MYAPP = {};

// better
if (typeof MYAPP === "undefined") {
    var MYAPP = {};
}

// or shorter
var MYAPP = MYAPP || {};

 

 

目录
相关文章
|
设计模式 缓存 JavaScript
JavaScript 的优雅编程技巧:Singleton Pattern
JavaScript 的优雅编程技巧:Singleton Pattern
|
设计模式 存储 前端开发
使用 JS 快速理解 Container/Presentational Pattern
在现代Web前端开发中,构建可维护、可扩展的应用程序变得越来越重要。为了实现这一目标,开发者需要遵循一些设计模式和最佳实践。其中之一是Container/Presentational(容器/展示)模式,它是一种用于组织和管理前端代码的技术。 本文将深入探讨Container/Presentational模式的概念,介绍如何使用JavaScript实现它,并探讨它在开发中的应用场景、优点和缺点。我们还将介绍一些知名项目中使用到这种模式的实际案例。
287 0
|
设计模式 JavaScript 调度
JS案例:Observer Pattern(观察者模式)和Publisher-Subscriber Pattern(发布者/订阅者模式)
JS案例:Observer Pattern(观察者模式)和Publisher-Subscriber Pattern(发布者/订阅者模式)
136 0
JS案例:Observer Pattern(观察者模式)和Publisher-Subscriber Pattern(发布者/订阅者模式)
|
JavaScript 前端开发
深入理解 JavaScript 单例模式 (Singleton Pattern)
<button>Owen</button> <div id="modal"> <div class="main"> <div> 我是弹框 </div> </div> </div>
560 0
|
JavaScript
Js Pattern - Self Define Function
This pattern is useful when your function has some initial preparatory work to do andit needs to do it only once.
966 0
|
JavaScript
关于js中namespace命名空间模式
命名空间有助于减少程序中所需要的全局变量的数量,并且同时有助于避免命名冲突或过长的名字前缀。关于命名空间的例子: /** * 创建全局对象MYAPP * @module MYAPP * @title MYAPP Global */ var MYAPP = MYAPP || {}; /** * 返回指定的命名空间,如果命名空间不存在则创建命名空间。
919 0
|
JavaScript 前端开发 设计模式
JavaScript设计模式学习(四)单件(Singleton Pattern)
  单件是JavaScript中最基本、最有用的设计模式,而你今后也会经常的使用这个模式。通过单件,我们可以把统一到一个逻辑单元中并且提供一个唯一的入口,这就保证你所有的引用都是用的这个全局资源。
914 0
|
2月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
35 1
JavaScript中的原型 保姆级文章一文搞懂
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
114 2
|
2月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
22 0