好程序员分享JavaScript代码组织结构良好的5个特点

简介:   好程序员JavaScript代码组织结构良好的5个特点,随着JavaScript项目的成长,如果你不小心处理的话,他们往往会变得难以管理。我们发现自己常常陷入的一些问题: 当在创建新的页面时发现,很难重用或测试之前写的代码。

  好程序员JavaScript代码组织结构良好的5个特点,随着JavaScript项目的成长,如果你不小心处理的话,他们往往会变得难以管理。我们发现自己常常陷入的一些问题: 当在创建新的页面时发现,很难重用或测试之前写的代码。

  当我们更深处地研究这些问题,我们发现根本原因是无效的依赖管理造成的。比如,脚本A依赖脚本B,并且脚本B又依赖脚本C,当C没有被正确引入时,整个依赖链就无法正常工作了。

  为了解决这个问题,我们已经采取了异步模块定义(AMD)的模式,并引入require.js到我们的技术堆栈。经过对AMD的进一步探索,我们已经基本确定,组织严密的JavaScript一般都呈现以下五个特点:

  始终声明我们的依赖 为第三方代码库添加shim(垫片) 定义跟调用应该分离 依赖应该异步加载 模块不应依赖全局变量

  让我们详细讨论一下。

  始终声明我们的依赖

  我们最常碰到了的一个问题是,我们会经常忽略那些会被确定加载的依赖项。举例来说,如果我们创建了一个jQuery插件,一般认为没有必要申报jQuery的依赖,因为它在大多数页面都是默认装载的。虽然这似乎适用于大多数的网页,但当我们试图进行单元测试或在一个全新的页面加载时,它就变成一个问题。

  始终声明我们的依赖,我们就消除了JavaScript中90%的问题。可重用的代码变得更可靠,单元测试的数量增加了4倍也是一个因素。

  为第三方代码库添加shim(垫片)

  在管理JavaScript依赖时经常碰到的一个有趣问题是,较旧的第三方库可能无法和您的依赖关系管理系统配合工作。例如,你们内部使用了jQuery的一个很酷的插件,但它对require.js一无所知。这会成为一个问题,因为第一个特点,我们来添加对这个插件的引用。
  解决的办法是通过依赖管理工具为这个插件制作一个垫片。在require.js中,这可以很容易地通过配置来完成:

  var require = {
1.

  "shim": {


2.

  "lib/cool-plugin": {


3.

  "deps": ["lib/jquery"]


4.

  }


5.

  }


6.

  }

  有了这个简单的配置,每一个加载 lib/cool-plugin.js 的脚本都会自动加载jQuery。将有助于满足所有相关性.

  最终的结果是代码更容易测试和重用,因为你总是有一个require()来调用所需的功能。

  定义跟调用应该分离

  这是限制JavaScript代码的可重用性和可测试性的一个常见问题。问题表现在一个单一的文件即定义了一个类/函数又调用了它。考虑下面的代码:

  ## js/User.js
1.

  define(functino(require) {


2.

  var User = function(name, greeter) {


3.

  this.name = name;


4.

  this.greeter = greeter;


5.

  };


6.

  User.prototype.sayHello = function() {


7.

  this.greeter("Hello, " + this.name);


8.

  };


9.

  var user = new User('Alice', window.alert);


10.

  user.sayHello();


11.

  });

  在这个例子中,一个单一的文件即定义了User类又调用它。这将很难重用这个代码,因为只要加载这个脚本就会出现alert。同样greeter这个非常难以测试。

  解决的办法是保持定义和执行的分离。这有助于确保可重用性和可测性:

  ## js/User.js
1.

  define(functino(require) {


2.

  var User = function(name, greeter) {


3.

  this.name = name;


4.

  this.greeter = greeter;


5.

  };


6.

  User.prototype.sayHello = function() {


7.

  this.greeter("Hello, " + this.name);


8.

  };


9.

  return User;


10.

  });


11.

  ## js/my-page.js


12.

  define(functino(require) {


13.

  var User = require('js/User');


14.

  var user = new User('Alice', window.alert);


15.

  user.sayHello();


16.

  });

  这种变化,User类可以安全地在许多脚本中重用。

  依赖应该异步加载

  因为试图同步加载脚本会导致浏览器锁死,这是非常重要的,你的脚本和你的模块应该使用异步加载机制。 Require.js在默认情况下,所有异步加载你的模块,只有所有的的依赖都加载完以后才会执行你的模块代码的函数。

  通过使用一个闭包,我们可以进一步利用“use strict”的好处。

  模块不应依赖全局变量

  为了进一步加强我们的JavaScript代码库,我们已经(几乎)完全消灭了全局变量(除了由require.js提供的全局变量,如require()和define())。全局变量是臭名昭著的潜在的进入模块的“隐藏的依赖关系”,它会使代码很难重用或测试。

  Require.js也让我们转换第三方全局变量,require() - 通过垫补功能能模块。在这个例子中,lib/calculator 创建一个全局的计算器对象,这个库是被require化的。

  var require = {
1.

  "shim" : {


2.

  "lib/calculator": {


3.

  "export": "Calc"


4.

  }


5.

  }


6.

  }

相关文章
|
29天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
53 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
123 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
1月前
|
人工智能 JavaScript 前端开发
一段 JavaScript 代码,集成网站AI语音助手
根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体。
|
2月前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
147 15
在 golang 中执行 javascript 代码的方案详解
|
3月前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
3月前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
83 3
|
3月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
416 1
|
3月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
784 4
|
3月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
180 6

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    47
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    57