博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript 编程模式
阅读量:6836 次
发布时间:2019-06-26

本文共 4319 字,大约阅读时间需要 14 分钟。

编程模式,是源自经验和探索总结出的最佳实践方案,既有助于可读性和可维护性,也有助于提升整体性能。

 

行为隔离

 

总则:结构、样式和行为之间两两隔离。

  • 避免在结构中使用内联事件

  • 尽量少用 <script> 标签

  • 考虑 JavaScript 被禁用的情况,添加一些替换标签

  •  

命名空间

 

为了减少命名冲突,优化 JavaScript 性能,尽量只定义几个全局变量,并将其他变量和方法定义为这几个变量的属性。

//定义全局变量var MYAPP = window.MYAPP || {};//定义属性MYAPP.event = {};//定义方法MYAPP.event = {  addListener : function() {    //执行相关的逻辑操作  }  removeListener : function() {    //执行相关的逻辑操作  }  //其他方法};

在命名空间中使用构造器函数。

MYAPP.dom = {};MYAPP.dom.Element = function (type, prop) {  var tep = document.createElement(type);  for (var i in prop) {    tmp.setAttribute(i, prop[i]);  }  return tmp;}

命名空间方法:

var MYAPP = window.MYAPP || {};MYAPP.namespace = function (name) {  var parts = name.split(“.”);  var current = MYAPP;  for (var i in parts) {    if (!current[parts[i]]) {      current[parts[i]] = {};    }    current = current[parts[i]];  } }MYAPP.namespace(“dom.event”);// 上述操作等价于:var MYAPP = {    dom: {        event: {}    }}

 

初始化功能

 

由于浏览器的不一致性,当我们使用 JavaScript 操作 DOM 或 BOM 前,通常会进行一定的功能检测。如果在运行前需要检测的功能较多,那么就会严重影响脚本的执行速度。对于这个问题,可以通过初始化功能解决,即在脚本加载后,立即对重要的函数执行功能检测。如此,后续就无需检测功能,可以直接执行相关的函数。

var MYAPP = window.MYAPP || {};MYAPP.event = {  addListener: null,  removeListener: null};// 初始化功能演示如下:if (typeof window.addEventListener === ‘function’) {  MYAPP.event.addListener = function (el, type, fn) {    el.addEventListener(type, fn, false);  };  MYAPP.event.removeListener = function (el, type, fn) {    el.removeEventListener(type, fn, false);  };} else if (typeof document.attachEvent === “function”) {  MYAPP.event.addListener = function (el, type, fn) {    el.attachEvent(“on” + type, fn);  };  MYAPP.event.removeListener = function (el, type, fn) {    el.detachEvent(“on” + type, fn);  };} else {  MYAPP.event.addListener = function (el, type, fn) {    el[“on” + type] = fn;  };  MYAPP.event.removeListener = function (el, type, fn) {    el[“on” + type] = null;  }; }

 

延迟定义

 

延迟定义,恰巧与初始化模式的思想相反。对于那些不一定会被调用的函数,可以让其被调用时再初始化,并且只进行一次初始化。

var MYAPP = window.MYAPP || {};MYAPP.event = {  addListener: function(el, type, fn) {    if (typeof window.addEventListener === ‘function’) {      MYAPP.event.addListener = function (el, type, fn) {        el.addEventListener(type, fn, false);      };    } else if (typeof document.attachEvent === “function”) {      MYAPP.event.addListener = function (el, type, fn) {        el.attachEvent(“on” + type, fn);      };    } else {      MYAPP.event.addListener = function (el, type, fn) {        el[“on” + type] = fn;      };    }    MYAPP.event.addListener(el, type, fn);  }};

这个地方我需要修改一下,使用可以重写自己的函数。

 

配置对象

 

配置对象模式,适用于向函数中传递多个参数。简单的说,就是将参数集合放入一个对象中,将对象传给参数,这个对象甚至可以是一个 JSON 文件。当参数量较少时,就像是传统的传参,当参数集庞大时,就如同传递环境配置变量。将变量和函数解耦,是非常不错的实践:

  • 无需考虑参数的顺序

  • 可以忽略某些参数

  • 具有更好的可读性和可维护性

var MYAPP = window.MYAPP || {};MYAPP.dom = {};MYAPP.dom.Button = function(text, conf) {    var type = conf.type || “submit”;    var color = conf.color || “red”}// 使用方式var conf = {    type: “reset”,    color: “green”};new MYAPP.dom.Button(“Reset”, conf);

 

私有变量和方法

 

与 C++、JAVA 不同,JavaScript 中并没有控制访问权限的修饰符,但我们可以使用局部变量和函数来实现类似的权限控制。

var MYAPP = window.MYAPP || {};MYAPP.dom = {};MYAPP.dom.Button = function (text, conf) {  var styles = {    color: “black”  }  function setStyles() {    for (var i in styles) {      b.style[i] = conf[i] || styles[i];    }  }  conf = conf || {};  var b = document.createElement(“input”);  b.type = conf[“type”] || “submit”;  b.value = text;  setStyles();  return b;}

在这里,styles 是一个私有属性,而 setStyle() 则是一个私有方法。构造器可以在内部调用它们(它们也可以访问构造器中的任何对象),但它们不能被外部代码所调用。

 

特权函数

 

在上例中,我们可以为 b 添加一个 getDefaults() 方法,返回 styles 对象,从而实现对内部属性或方法的访问,这个 getDefaults() 就是一种特权函数。

 

私有函数的公有化

 

为了防止外部修改,将函数设为私有,有时候又想外部可以访问到,所以有需要设为公有。解决方案是,使用公有变量引用私有函数,即可将其公有化。

var MYAPP = window.MYAPP || {};MYAPP.dom = {};MYAPP.dom.Button = (function () {  var _setStyle = {};  var _getStyle = ();  return {    setStyle: _setStyle,    getStyle: _getStyle,    yetAnother: _setStyle  };  })();

 

自执行的函数

 

使用立即执行的匿名函数,同样可以保证全局命名空间不会受到污染。这种函数的所有变量都是局部的,并在函数返回时被销毁(非闭包)。

适合于执行一次性的初始化任务。

(function(){    //编写逻辑操作代码})()

 

链式调用

 

链式调用,是一种便捷的调用方式。其实现本质是使用一致的上下文对象,并在链式方法间传递这个对象。这种灵活的调用方式也是 jQuery 的一大特色。

 

JSON

 

JSON 是一种轻量级的数据交换格式。由于它本身就是由类似 JavaScript 的对象和数组标记的数据构成的,所以解析起来非常方便。

说道解析,我们可以使用 JavaScript 的 eval() 方法转换;但是由于 eval() 本身的缺陷,这件事还是使用更安全的方法吧,比如 JavaScript 的某些库(http://json.org):

var obj = JSON.parse(xhr.respnseText);

转载于:https://www.cnblogs.com/wicrecend/p/4489097.html

你可能感兴趣的文章
Exchange 2010和Exchange 2016共存部署-10:配置多域名证书
查看>>
SFB 项目经验-03-共存迁移-Lync 2013-TO-SFB 2015-完成
查看>>
F5 配置手册 -F5 BIG-IP 10.1-2-配置-基本参数
查看>>
《统一沟通-微软-实战》-6-部署-2-中介服务器-1-定义中介服务器
查看>>
虚拟化,可实现国产化替代
查看>>
PowerShell通过安全组创建计算机账号
查看>>
Linux LVM逻辑卷配置过程详解(创建,增加,减少,删除,卸载)
查看>>
《兵临城下》:360输在“斯大林格勒”?
查看>>
《塞洛特傳說》道具系统
查看>>
MCollective架构篇4-MCollective各种插件的部署及测试
查看>>
第五章 Python函数你知多少
查看>>
百度推出飓风算法,严厉打击恶劣采集
查看>>
Android帧缓冲区(Frame Buffer)硬件抽象层(HAL)模块Gralloc的实现原理分析(4)...
查看>>
组策略部署软件----将部署的软件分类
查看>>
系统管理员在企业中的职业定位及发展方向 连载(二)
查看>>
完美世界推穿戴式设备:能消灭“宅玩家”吗?
查看>>
关东升的《从零开始学Swift》3月9日已经上架
查看>>
IFA与“色“俱进,三星“量子点+曲面”如何掀起新变革?
查看>>
2013年4月工作小结 -- 穿越前的回眸
查看>>
用什么样的个人笔记类软件?OneNote、EverNote(印象笔记)、为知笔记、麦库记事、有道云笔记……...
查看>>