在做项目的过程中通常会有一些可复用的通用性功能,之前的做法是把这个功能抽取出来独立为一个函数统一放到commonFunctions.js里面(捂脸),实现类似于snippets的代码片段收集。

  function sub(){
    //...
  }
  function sum(){
    //...
  }
  

在理想情况下,开发者只需要实现核心的业务逻辑,其他通用功能可以加载已经实现的模块。

然而,这样的做法并不是最佳实践,在实际的运用中。业务代码时常会与应用的通用代码中的命名出现冲突。这让我想起了cSharp,当初学习cSharp的时候,一些有经验的学长就指点说,做.Net方向的一定要有自己的类库,这样在以后的开发中直接应用对应的命名空间,调用相关函数即可。于是乎琢磨起在目前尚没有命名空间的Javascript中,是不是可以用对象模拟命名空间作为替代方案呢?恰好与前辈想法暗合Why SeaJS

var FocusTech = {};
FocusTech.print = function(str){
// code!
}

然而其中的弊端文中也已给出。即通过命名空间,也只是降低函数命名冲突的概率。

命名冲突和文件依赖,面对前端开发过程中的这两个经典问题。或许前端模块化开发是一个解决方案。


模块规范

异步模块定义AMD:(Asynchronous Module Definition)是 RequireJS 在推广过程中对模块定义的规范化产出。通用模块定义CMD:(Common Module Definition)是Sea.js在推广过程中对模块定义的规范化产出的。

  • AMD 运行时核心思想是「Early Executing」,也就是提前执行依赖。EX:
define(['a', 'b'], function(A, B) {
//运行至此,a.js 和 b.js 已下载完成(运行于浏览器的 Loader 必须如此);
//A、B 两个模块已经执行完,直接可用(这是 AMD 的特性); return function () {};
});
  • CMD 推崇 as lazy as possible.

    在 CMD 规范中,一个模块就是一个文件。代码的书写格式如下:

    define(factory);

  • AMD 是提前执行,CMD 是延迟执行。

    CMD 推崇依赖就近,AMD 推崇依赖前置。看代码:

// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
}) // AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})

对象模拟命名空间

Javascript模块化编程(二):AMD规范

Javascript模块化编程(一):模块的写法

SeaJS与RequireJS最大的区别

让我们再聊聊浏览器资源加载优化

SeaJS 和 RequireJS 的异同

JavaScript模块化开发&&模块规范的更多相关文章

  1. 详解JavaScript模块化开发

    什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...

  2. Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

  3. Javascript模块化开发-轻巧自制

    Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展 ...

  4. (转)详解JavaScript模块化开发

    https://segmentfault.com/a/1190000000733959 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来j ...

  5. Javascript 模块化开发上线解决方案

    最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...

  6. JavaScript模块化开发整理

    在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...

  7. JavaScript模块化开发的那些事

    模块化开发在编程开发中是一个非常重要的概念,一个优秀的模块化项目的后期维护成本可以大大降低.本文主要介绍了JavaScript模块化开发的那些事,文中通过一个小故事比较直观地阐述了模块化开发的过程. ...

  8. JavaScript进阶【一】JavaScript模块化开发的基础知识

    //模块化的最初写法 //1.最初写法 //下面的m1和m2就组成了一个模块 //缺点:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系. f ...

  9. javascript 模块化开发(一)

    什么是模块化 将一组模块(及其依赖项)以正确的顺序拼接到一个文件(或一组文件)中的过程. 传统的模块化做法. 模块是实现特定功能的一组属性和方法的封装. 将模块写成一个对象,所有的模块成员都放到这个对 ...

随机推荐

  1. C++菱形继承的构造函数

    网上搜了很多,大多是关于菱形虚继承的构造函数应该怎么写,或者就是最简单的,四个类都不带参数的构造函数. 本文旨在记录一下困扰了博主1h的问题,非常浅显,有帮助固然好,如果侮辱谁的智商还见谅,当然无限欢 ...

  2. html进阶css(4)

    盒子模型-边框 首先请看下图 <!doctype html> <html> <head> <meta charset="utf-8"> ...

  3. Git(Repo)常用命令收集

    (注意: 只记录工作中实际使用的命令) 同步android源码    repo sync:(可加-c,只取当前分支: 可加-j4,线程数量) 查看android源码下所有项目的git状态    rep ...

  4. iPad学做菜

    项目描述:家常菜.川菜 .鲁菜.东北菜.甜品等各大菜系应有尽有,详细的制作步骤,再也不用为自己不会做饭而烦恼. 主要技术:主界面采用UISplitViewController的结构设计:自定义各大菜系 ...

  5. poj3159 Candies(差分约束)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Candies Time Limit: 1500MS   Memory Limit ...

  6. poj 2112 floyd+Dinic最大流+二分最小值

    题目大意是: K台挤奶机器,C头牛,K不超过30,C不超过200,每台挤奶机器最多可以为M台牛工作,给出这些牛和机器之间,牛和牛之间,机器与机器之间的距离,在保证让最多的牛都有机器挤奶的情况下,给出其 ...

  7. stl学习之模板

    模板是实现代码重用机制的一种工具,实质就是实现类型参数化,即把类型定义为参数. C++提供两种模板:函数模板,类模板.   template<typename T> //或者 templa ...

  8. (原)vs2013静态及动态链接opencv3.0的库

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5477551.html 静态链接步骤如下: 1. 在“通用配置”-“VC++目录”-“包含目录”中添加: ...

  9. jQuery Moblile Demos学习记录Panel

    jQuery Moblile Demos学习记录Panel 11. 二 / Jquery Mobile / 没有评论   本文来源于www.ifyao.com禁止转载!www.ifyao.com 我就 ...

  10. 实习小白笔记一(鼠标悬停、获取多选、提交修改、layer页面、单元格文字长度、json、分页、左连接)

    ①easyui 当鼠标悬停显示单元格信息: $(this).datagrid('doCellTip',{'max-width':'600px','delay':300}); ②jquery 获取che ...