×

分享JS优化的基本知识点

作者:天空2019.01.07来源:Web前端之家浏览:8065评论:0
关键词:js优化

分享JS优化的基本知识点。

松耦合

当修改一个组件而不需要更改其他组件时,就做到了松耦合

1、将JS从CSS中抽离:不要使用CSS表达式

//不好的做法
.box{width: expression(document.body.offsetWidth + 'px')}

2、将CSS从JS中抽离:通过JS修改CSS样式时,使用className或classList,不要逐条修改style样式

(1).

//不好的做法一
ele.style.color = 'red';
ele.style.left= '10px';
//不好的做法二
ele.style.cssText ='color:red;left:10px;';

(2).

.reveal{color:red;left:10px;}
//好的做法一
ele.className += 'reveal';
//好的做法二
ele.classList.add('reveal');

3、将JS从HTML中抽离:从JS文件放入外置文件中

4、将HTML从JS中抽离:不要在innerHTML中拼接DOM结构,而是使用字符串模板,如handlerbars

全局变量

创建全局变量被认为是糟糕的实践,尤其在团队开发的大背景下更是问题多多。随着代码量的增长,全局变量会导致一些非常重要的可维护性难题,全局变量越多,引入错误的概率会变得越高

一般而言,有如下三种解决办法

1、零全局变量

实现方法是使用一个立即调用函数IIFE并将所有脚本放置其中

(function(){
 var doc = win.document;
})(window);

这种模式的使用场景有限,只要代码需要被其他的代码所依赖,或者需要在运行中被不断扩展或修改,就不能使用这种方式

2、单全局变量和命名空间

依赖尽可能少的全局变量,即只创建一个全局变量,使用单变量模式,如YUI或jQuery

单全局变量,即所创建的这个唯一全局对象名是独一无二的,并将所有的功能代码都挂载到这个全局对象上。因此,每个可能的全局变量,都成为唯一全局变量的属性,从而不会创建多个全局变量

命名空间是简单的通过全局对象的单一属性表示的功能性分组。比如Y.DOM下的所有方法都是和DOM操作相关的,Y.Event下的所有方法都是和事件相关的。常见的约定是每个文件中都通过新的全局对象来声明自己的命名空间

3、使用模块

模块是一种通用的功能片段,它并没有创建新的全局变量或命名空间。相反,所有的这些代码都存放于一个表示执行一个任务或发布一个接口的单函数中。可以用一个名称来表示这个模块,同样这个模块可以依赖其他模块

事件处理

将事件处理相关的代码和事件环境耦合在一起,导致可维护性很糟糕

1、隔离应用逻辑

将应用逻辑从所有事件处理程序中抽离出来是一种最佳实践,将应用逻辑和事件处理的代码拆分开来

//不好的做法
function handleClick(event){
 var popup = document.getElementById('popup');
 popup.style.left = event.clientX + 'px';
 popup.style.top = event.clientY + 'px';
 popup.className = 'reveal';
}/欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:619586920
addListener(element,'click',handleClick);
//好的做法
var MyApplication = {
 handleClick: function(event){
  this.showPopup(event);
 },/欢迎加入前端全栈开发交流圈一起吹水聊天学习交流:619586920
 showPopup: function(event){
  var popup = document.getElementById('popup');
  popup.style.left = event.clientX + 'px';
  popup.style.top = event.clientY + 'px';
  popup.className = 'reveal';
 }
};
addListener(element,'click',function(event){
 MyApplication.handleClick(event);
});

2、不要分发事件对象

应用逻辑不应当依赖于event对象来正确完成功能,方法接口应该表明哪些数据是必要的。代码不清晰就会导致bug。最好的办法是让事件处理程序使用event对象来处理事件,然后拿到所有需要的数据传给应用逻辑

//改进的做法
var MyApplication = {
 handleClick: function(event){
  this.showPopup(event.clientX,event.clientY);
 },
 showPopup: function(x,y){
  var popup = document.getElementById('popup');
  popup.style.left = x + 'px';
  popup.style.top = y + 'px';
  popup.className = 'reveal';
 }
};
addListener(element,'click',function(event){
 MyApplication.handleClick(event);
});

当处理事件时,最好让事件程序成为接触到event对象的唯一的函数。事件处理程序应当在进入应用逻辑之前针对event对象执行任何必要的操作,包括阻止事件冒泡,都应当直接包含在事件处理程序中。

//改进的做法
var MyApplication = {
 handleClick: function(event){
  event.preventDefault();
  event.stopPropagation();
  this.showPopup(event.clientX,event.clientY);
 },
 showPopup: function(x,y){
  var popup = document.getElementById('popup');
  popup.style.left = x + 'px';
  popup.style.top = y + 'px';
  popup.className = 'reveal';
 }
};
addListener(element,'click',function(event){
 MyApplication.handleClick(event);
});

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js28352385023985.html

网友评论文明上网理性发言 已有0人参与

发表评论: