JS代码优化的代码优化的8点建议点建议
一、松耦合一、松耦合
当修改一个组件而不需要更改其他组件时，就做到了松耦合
1、将JS从CSS中抽离：不要使用CSS表达式
//不好的做法
.box{width: expression(document.body.offsetWidth + 'px')}
2、将CSS从JS中抽离：通过JS修改CSS样式时，使用className或classList，不要逐条修改style样式
//不好的做法一
ele.style.color = 'red';
ele.style.left= '10px';
//不好的做法二
ele.style.cssText ='color:red;left:10px;';
.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){
下载后可阅读完整内容，剩余7页未读，立即下载
weixin_38644688
- 粉丝: 9
- 资源: 932
我的内容管理
展开
最新资源
- C++标准程序库：权威指南
- Java解惑：奇数判断误区与改进方法
- C++编程必读：20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程：从入门到精通
- Spring3.0权威指南：JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略：从环境配置到索引创建
- 内存虚拟硬盘技术：提升电脑速度的秘密武器
- Java操作数据库：保存与显示图片到数据库及页面
- ISO14001：2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发：触发器与控制器重定向技术详解
- FPGA开发实战指南：创新设计与进阶技巧
- ShopExV4.8二次开发入门：解决升级问题与功能扩展
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
