* 为什么要模块化?

  • 解决文件依赖
  • 解决命名冲突

* JS中模块的定义

通常,我们可以这样定义一个模块。
利用闭包特性定义一个模块,对全局暴露一个变量,外部不能访问模块内部定义的变量和方法。
  1. 立即执行函数,闭包
  2. var myModule = (function(){
  3. var var1 = 1;
  4. var var2 = 2;
  5. function fn1(){
  6. }
  7. function fn2(){
  8. }
  9. return {
  10. fn1: fn1,
  11. fn2: fn2
  12. };
  13. })();

node.js中的模块化

node中模块的引入是同步的,遵循CommonJS规范。

sea.js

       遵循CMD (通用模块定义) ,对于依赖的模块,就近依赖,延迟执行。

sea.js写法

  1. define(function(require,exports,module){
  2. var a = require('./a')
  3. a.todo()
  4. //***省略100行
  5. var b = require('./b') //依赖就近书写
  6. b.todo()
  7. //.....
  8. })

define定义模块

    define函数用来定义模块
        define(factory)  factory为模块的构造方法
  1. define(function(require,exports,module){
  2. // 模块代码
  3. });

        define(id?,deps?,factiory)
            id表示模块标识,数组deps是模块依赖,两个参数都可以省略,可以通过构建工具自动生成。

修改jquery为CMD模块

define.cmd Object  一个空对象,可用来判定当前页面是否有 CMD 模块加载器:

对于非seajs模块化的类库,我们可以手动定义它,通过define的cmd规范定义就可以正常使用了
  1. if (typeof define === 'function' && define.cmd) {
  2. define(function (require, exports, module) {
  3. module.exports = jQuery;
  4. })

 暴露接口

exports
module.exports
return

一定不能为exports赋值对象,因为exports仅仅是module.exports的一个引用

  1. define(function(require,exports){
  2.  // 第一种
  3. exports.foo = 'bar';
  4. exports.do = function(){}
  5. //第二种
  6. return {
  7. foo : 'bar',
  8. do : function(){}
  9. };
  10. //第三种
  11.    module.exports = {
  12.        foo : 'bar',
  13.        do : function(){};
  14. }
  15. });

启动

  1. <script type="text/javascript" src="sea.js"></script>
  2. <script>
  3. seajs.use('main/main') //这个文件会第一个被sea.js加载
  4. </script>

sea.js模块化编程的更多相关文章

  1. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  2. require.js实现js模块化编程(一)

    1.认识require.js: 官方文档:http://requirejs.org/RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的Requ ...

  3. require.js实现js模块化编程(二):RequireJS Optimizer

    require.js实现js模块化编程(二):RequireJS Optimizer 这一节,我们主要学习一下require.js所提供的一个优化工具r.js的用法. 1.认识RequireJS Op ...

  4. 初步理解require.js模块化编程

    初步理解require.js模块化编程 一.Javascript模块化编程 目前,通行的Javascript模块规范共有两种:CommonJS和AMD. 1.commonjs 2009年,美国程序员R ...

  5. [转]js模块化编程之彻底弄懂CommonJS和AMD/CMD!

    原文: https://www.cnblogs.com/chenguangliang/p/5856701.html ------------------------------------------ ...

  6. JS模块化编程之加载器原理

    世面上有好多JavaScript的加载器,比如 sea.js, require.js, yui loader, labJs...., 加载器的使用范围是一些比较大的项目, 个人感觉如果是小项目的话可以 ...

  7. js模块化编程总结

    大家都知道,js中的变量(variable)有其作用范围,比如:函数里用var定义的变量在函数外是看不到的,而定义在函数外面的变量(不能有没有var修饰)均是全局变量,在js程序的任何位置都可以访问. ...

  8. js模块化编程之彻底弄懂CommonJS和AMD/CMD!

    先回答我:为什么模块很重要? 答:因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块.但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写 ...

  9. 好文推荐系列-------(5)js模块化编程

    本文主要来源于阮一峰的<Javascript模块化编程>系列文章整合,原文地址:http://www.ruanyifeng.com/blog/2012/10/javascript_modu ...

随机推荐

  1. Android之SQLite数据存储

    一.SQLite保存数据介绍 将数据库保存在数据库对于重复或者结构化数据(比如契约信息)而言是理想之选.SQL数据库的主要原则之一是架构:数据库如何组织正式声明.架构体现于用于创建数据库的SQL语句. ...

  2. Mysql 忘记root密码处理办法

    一.更改my.cnf配置文件 1.用命令编辑/etc/my.cnf配置文件,即:vim /etc/my.cnf 或者 vi /etc/my.cnf 2.在[mysqld]下添加skip-grant-t ...

  3. 跟着老男孩教育学Python开发【第一篇】:初识Python

    Python简介 Python前世今生 Python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...

  4. vs生成pro

    1.修改.vcxproj文件   <PropertyGroup Label="Globals">    <ProjectGuid>{AAAA4039-13B ...

  5. Linux文件查找.md

    Linux 文件查找 在Linux系统的查找相关的命令: which 查看可执行文件的位置 whereis 查看文件的位置 locate 配合数据库查看文件位置 find 实际搜寻硬盘查询文件名称 w ...

  6. 技术笔记:Indy控件发送邮件

    工作中有个需求需要发送邮件,因为使用的delphi6,所以自然就选择了indy组件,想想这事挺简单的.实现的过程倒是简单,看着Indy的demo很快就完了,毕竟也不是很复杂的功能. 功能要求: 1.压 ...

  7. WCF : 如何将NetTcpBinding寄宿在IIS7上

    摘要 : 从IIS 7 开始, IIS增加了对非HTTP协议的支持. 因此, 自IIS 7之后, 可以将NetTcpBinding等非HTTP协议的Bindings直接寄宿在IIS上面. 本文将介绍如 ...

  8. CSharpGL(12)用T4模板生成CSSL及其renderer代码

    CSharpGL(12)用T4模板生成CSSL及其renderer代码 2016-08-13 由于CSharpGL一直在更新,现在这个教程已经不适用最新的代码了.CSharpGL源码中包含10多个独立 ...

  9. Redis学习手册(目录)

    为什么自己当初要选择Redis作为数据存储解决方案中的一员呢?现在能想到的原因主要有三.其一,Redis不仅性能高效,而且完全免费.其二,是基于C/C++开发的服务器,这里应该有一定的感情因素吧.最后 ...

  10. PHP 面向对象编程和设计模式 (2/5) - 静态变量、属性和方法及延迟绑定

    PHP高级程序设计 学习笔记 2014.06.10 Static(静态)关键字用来定义静态方法和属性,static 也可用于定义静态变量以及后期静态绑定. 1.静态变量 static variable ...