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

作者: ab6973df9221 | 来源:发表于2019-04-19 16:36 被阅读1次

　　好程序员web前端培训教程分享Javascript设计模式

方法一对象字面量表示法　　在对象字面量表示法中，一个对象被描述为一组包含在大括号中，以逗号分隔的name/value 对。对象内的名称可以是字符串或标识符，后面跟着一个冒号。对象中最后一个 name/value 对不加逗号，否则会出错。　　/**

[if !supportLists]1. [endif]　　* 使用字面量表示法定义模块

[if !supportLists]2. [endif]　　*/

[if !supportLists]3. [endif]　　var myModule = {

[if !supportLists]4. [endif]　　myProperty: "someValue",

[if !supportLists]5. [endif]　　myConfig: {

[if !supportLists]6. [endif]　　useCaching: true,

[if !supportLists]7. [endif]　　language: "en"

[if !supportLists]8. [endif]　　},

[if !supportLists]9. [endif]　　myMethod: function () {

[if !supportLists]10. [endif]　　console.log("the first method");

[if !supportLists]11. [endif]　　},

[if !supportLists]12. [endif]　　myMethod2: function () {

[if !supportLists]13. [endif]　　console.log("the second method");

[if !supportLists]14. [endif]　　},

[if !supportLists]15. [endif]　　};

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

[if !supportLists]1. [endif]　　console.log(myModule.myConfig); // {useCaching: true, language: 'en'}

[if !supportLists]2. [endif]　　console.log(myModule.myConfig.useCaching); // true

[if !supportLists]3. [endif]　　myModule.myMethod(); // the first method

[if !supportLists]4. [endif]　　myModule.myMethod2(); // the second method

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

[if !supportLists]1. [endif]　　* Module方法定义

[if !supportLists]2. [endif]　　*/

[if !supportLists]3. [endif]　　var myNameSpace = (function () {

[if !supportLists]4. [endif]　　// 私有变量

[if !supportLists]5. [endif]　　var myPrivateVar = 0;

[if !supportLists]6. [endif]　　// 私有函数

[if !supportLists]7. [endif]　　var myPrivateMethod = function (foo) {

[if !supportLists]8. [endif]　　console.log(foo);

[if !supportLists]9. [endif]　　};

[if !supportLists]10. [endif]　　// 公有API

[if !supportLists]11. [endif]　　return {

[if !supportLists]12. [endif]　　// 公有变量

[if !supportLists]13. [endif]　　myPublicVar: "foo",

[if !supportLists]14. [endif]　　// 公有方法

[if !supportLists]15. [endif]　　myPublicFunction: function (bar) {

[if !supportLists]16. [endif]　　// 操作私有变量

[if !supportLists]17. [endif]　　myPrivateVar ++;

[if !supportLists]18. [endif]　　// 调用私有函数

[if !supportLists]19. [endif]　　myPrivateMethod(bar);

[if !supportLists]20. [endif]　　},

[if !supportLists]21. [endif]　　// 公有方法二

[if !supportLists]22. [endif]　　myPublicFunction2: function () {

[if !supportLists]23. [endif]　　console.log("success");

[if !supportLists]24. [endif]　　}

[if !supportLists]25. [endif]　　};

[if !supportLists]26. [endif]　　}) ();

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

[if !supportLists]1. [endif]

[if !supportLists]2. [endif]　　console.log(myNameSpace.myPrivateVar); // undefined

[if !supportLists]3. [endif]　　console.log(myNameSpace.myPublicVar); // foo

[if !supportLists]4. [endif]　　console.log(myNameSpace.myPublicFunction); // Function

[if !supportLists]5. [endif]　　myNameSpace.myPublicFunction2(); // success

[if !supportLists]6. [endif]　　myNameSpace.myPublicFunction("i am first"); // i am first

网友评论

好程序员大前端

本文标题：好程序员教程分享Javascript设计模式

本文链接：https://www.haomeiwen.com/subject/fyqcgqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

好程序员大前端