一、立即执行函数

立即执行函数可以有效避免临时变量污染全局空间。可以在页面初始化时,在立即执行函数内实现一次执行变量的定义及使用。

for (var i = 0; i < elems.length; i++) {

    (function (lockedInIndex) {  

        elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + lockedInIndex);
}, 'false'); })(i); //入参 }
使用立即执行函数,可以达到不暴露私有成员的目的
var module1 = (function(){
    var _count = 0;
    var m1 = function(){
      //...
    };
    var m2 = function(){
      //...
    };
    return {
      m1 : m1,
      m2 : m2
    };
  })(); //无法读取_count
 
对比立即执行函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var a = function() {
alert(12)
var _count=1;
var m1 = function(){
      alert(1);
    };
    var m2 = function(){
      alert(2);
    };
    return {
      m1 : m1,
      m2 : m2
    };
}; var b = a();
b.m1(); var a2 = (function() {
alert(12);
var _count=1;
var m1 = function(){
      alert(1);
    };
    var m2 = function(){
      alert(2);
    };
    return {
      m1 : m1,
      m2 : m2
    };
})();
a2.m2();
</script>
</body>
</html>
 

二、模块规范

目前主要的模块规范有commonJS与AMD
 

1.commonJS

commonJS是服务器端模块规范,nodeJs遵循此规范。因为服务端JS文件存放于本地,加载速度快,所以其加载模块(一个文件即一个模块)方式为同步加载,不适用于浏览器。

function foobar(){
this.foo = function(){
console.log('Hello foo');
} this.bar = function(){
console.log('Hello bar');
}
} exports.foobar = foobar; //通过export实现与外部通信
var foobar = require('./foobar').foobar,
test = new foobar(); test.bar();

2.AMD规范

  作为一个规范,只需定义其语法API,而不关心其实现。AMD规范简单到只有一个API,即define函数:

  define([module-name?], [array-of-dependencies?], [module-factory-or-object]);

  其中:

  ◆  module-name: 模块标识,可以省略。

  ◆  array-of-dependencies: 所依赖的模块,可以省略。

  ◆  module-factory-or-object: 模块的实现,或者一个JavaScript对象。

  从中可以看到,第一个参数和第二个参数都是可以省略的,第三个参数则是模块的具体实现本身。后面将介绍在不同的应用场景下,他们会使用不同的参数组合。从这个define函数AMD中的A:Asynchronous,我们也不难想到define函数具有的另外一个性质,异步性。当define函数执行时,它首先会异步的去调用第二个参数中列出的依赖模块,当所有的模块被载入完成之后,如果第三个参数是一个回调函数则执行,然后告诉系统模块可用,也就通知了依赖于自己的模块自己已经可用。

  由于AMD规范的异步性,其与COMMONJS不同,更适用于客户端浏览器。require.js即遵循AMD规范。

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//Or:
return require("beta").verb();
}
});
 
 
 
 
原文地址:
 
 
 

【转】require.js学习笔记(一)的更多相关文章

  1. 【转】require.js学习笔记(二)

    require.js遵循AMD规范,通过define定义模块,require异步加载模块,一个js文件即一个模块. 一.模块加载require1.加载符合AMD规范模块 HTML: <scrip ...

  2. require.js学习笔记(内容属于转载总结)

    <script data-main="src/app" src="src/lib/require.js"></script> backb ...

  3. require.js学习笔记

    使用require.js的好处? 1 有效的防止命名冲突(可以将变量封装在模块内,通过暴露出的接口解决命名冲突) 2 解决不同JS文件中的依赖 3 可以让我们的代码以模块化的方式组织 官方网站http ...

  4. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  6. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  7. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  8. Node.js学习笔记(2):基本模块

    Node.js学习笔记(2):基本模块 模块 引入模块 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式.在No ...

  9. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

随机推荐

  1. [z] Git pull 强制覆盖本地文件

    git fetch --all git reset --hard origin/master git pull git fetch 只是下载远程的库的内容,不做任何的合并 git reset 把HEA ...

  2. laravel中类似于thinkPHP中trace功能

    答案来自https://segmentfault.com/q/1010000007716945 一楼: 到 https://packagist.org 上搜索你想要的关键词,比如查debugbar 列 ...

  3. Oracle to_char函数的使用方法

    Oracle to_char函数的功能是将数值型或者日期型转化为字符型,下面就为您详细介绍Oracle to_char函数的使用,希望对您能有所帮助. Postgres 格式化函数提供一套有效的工具用 ...

  4. (转找了好久)实现一个2008serve的IIS的虚拟目录(通过网络路径(UNC)的形式,共享在另外一个2008服务器上

    目的:实现一个2008serve的IIS的虚拟目录(通过网络路径(UNC)的形式,共享在另外一个2008服务器上) 准备工作 1.共享资源服务器为 ShareServer,IP地址为:192.168. ...

  5. 继承 (js原型链)

    原型链是实现继承的主要方法.基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法. 1.构造函数.原型.实例的关系: 每个构造函数都有原型属性(Prototype),指向一个原型对象(函数创 ...

  6. iOS.Objective-C.Dependency.Graphing-v0.1

    当Project越来越复杂,模块间的依赖就会很复杂,不合理的依赖就出现:不必要的依赖,双向依赖等等. 在iOS Application Project中可以将依赖定义为:对某个头文件的import. ...

  7. BZOJ1084或洛谷2331 [SCOI2005]最大子矩阵

    BZOJ原题链接 洛谷原题链接 注意该题的子矩阵可以是空矩阵,即可以不选,答案的下界为\(0\). 设\(f[i][j][k]\)表示前\(i\)行选择了\(j\)个子矩阵,选择的方式为\(k\)时的 ...

  8. PS制作纸质复古野外露营插画分享

    经常有人说一些复古风,就觉得蛮难,其实制作过程其实没有想象中复杂,从1850年到2017年,通过这160多年里的平面设计,给我们的作品添加上一些新鲜的灵感和活力,本次教程就来教大家用PS做出耐看的纸质 ...

  9. 去掉tableView空白区域的分割线

    //把多余的分割线去掉 UIView * footerView = [[UIView alloc] initWithFrame:CGRectZero]; self.tableView.tableFoo ...

  10. PHP图片处理库Grafika详细教程

    转载自51CTO 开发频道 1.图像基本处理:http://developer.51cto.com/art/201611/520928.htm 2.图像特效处理模块:http://developer. ...