好程序员教程分享Javascript设计模式

简介:   好程序员教程分享Javascript设计模式方法一 对象字面量表示法  在对象字面量表示法中,一个对象被描述为一组包含在大括号中,以逗号分隔的 name/value 对。对象内的名称可以是字符串或标识符,后面跟着一个冒号。

  好程序员教程分享Javascript设计模式
方法一 对象字面量表示法
  在对象字面量表示法中,一个对象被描述为一组包含在大括号中,以逗号分隔的 name/value 对。对象内的名称可以是字符串或标识符,后面跟着一个冒号。对象中最后一个 name/value 对不加逗号,否则会出错。

  /**
1.

  * 使用字面量表示法定义模块


2.

  */


3.

  var myModule = {


4.

  myProperty: "someValue",


5.

  myConfig: {


6.

  useCaching: true,


7.

  language: "en"


8.

  },


9.

  myMethod: function () {


10.

  console.log("the first method");


11.

  },


12.

  myMethod2: function () {


13.

  console.log("the second method");


14.

  },


15.

  };

  console.log(myModule.myProperty); // someValue
1.

  console.log(myModule.myConfig); // {useCaching: true, language: 'en'}


2.

  console.log(myModule.myConfig.useCaching); // true


3.

  myModule.myMethod(); // the first method


4.

  myModule.myMethod2(); // the second method

  方法二 Module模式
  Module模式使用闭包封装“私有”状态和组织。它提供了一种包装混合公有/私有方法和变量的方式
  ,防止其污染全局命名空间,防止其泄露到全局作用域。通过该模式,只需返回一个公有API,而其他的一切则都维持在私有闭包里。
  /**
1.

  * Module方法定义


2.

  */


3.

  var myNameSpace = (function () {


4.

  // 私有变量


5.

  var myPrivateVar = 0;


6.

  // 私有函数


7.

  var myPrivateMethod = function (foo) {


8.

  console.log(foo);


9.

  };


10.

  // 公有API


11.

  return {


12.

  // 公有变量


13.

  myPublicVar: "foo",


14.

  // 公有方法


15.

  myPublicFunction: function (bar) {


16.

  // 操作私有变量


17.

  myPrivateVar ++;


18.

  // 调用私有函数


19.

  myPrivateMethod(bar);


20.

  },


21.

  // 公有方法二


22.

  myPublicFunction2: function () {


23.

  console.log("success");


24.

  }


25.

  };


26.

  }) ();

  console.log(myNameSpace.myPrivateVar); // undefined
1.
2.

  console.log(myNameSpace.myPrivateVar); // undefined


3.

  console.log(myNameSpace.myPublicVar); // foo


4.

  console.log(myNameSpace.myPublicFunction); // Function


5.

  myNameSpace.myPublicFunction2(); // success


6.

  myNameSpace.myPublicFunction("i am first"); // i am first

相关文章
|
3天前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
12 3
|
3月前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
161 0
|
3天前
|
JavaScript 前端开发 Java
Node.js 教程
10月更文挑战第1天
10 0
|
1月前
|
设计模式 C# 开发者
C#设计模式入门实战教程
C#设计模式入门实战教程
|
2月前
|
JavaScript NoSQL 前端开发
|
2月前
|
存储 JavaScript 前端开发
后端程序员的前端基础-前端三剑客之JavaScript
后端程序员的前端基础-前端三剑客之JavaScript
26 4
|
2月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
30 0
|
2月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
2月前
|
JavaScript 前端开发 程序员
程序员必看:利用JavaScript的算术运算符大幅提升代码效率?
程序员必看:利用JavaScript的算术运算符大幅提升代码效率?
|
3月前
|
设计模式 测试技术 Python
《手把手教你》系列基础篇(九十二)-java+ selenium自动化测试-框架设计基础-POM设计模式简介(详解教程)
【7月更文挑战第10天】Page Object Model (POM)是Selenium自动化测试中的设计模式,用于提高代码的可读性和维护性。POM将每个页面表示为一个类,封装元素定位和交互操作,使得测试脚本与页面元素分离。当页面元素改变时,只需更新对应页面类,减少了脚本的重复工作和维护复杂度,有利于团队协作。POM通过创建页面对象,管理页面元素集合,将业务逻辑与元素定位解耦合,增强了代码的复用性。示例展示了不使用POM时,脚本直接混杂了元素定位和业务逻辑,而POM则能解决这一问题。
54 6