zoukankan      html  css  js  c++  java
  • 【转】require.js学习笔记(一)

    一、立即执行函数

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

    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();
           }
       });
         

     
     
     
     
    原文地址:
     
     
     
  • 相关阅读:
    【iOS开发每日小笔记(十二)】仿Facebook登录界面 错误提示抖动 利用CAAnimation设置动画效果
    《跑酷好基友》(英文名:BothLive)隐私政策声明
    【iOS开发每日小笔记(十一)】iOS8更新留下的“坑” NSAttributedString设置下划线 NSUnderlineStyleAttributeName 属性必须为NSNumber
    【iOS开发每日小笔记(十)】自制带圆框的头像 利用在CALayer设置“寄宿图”
    【iOS开发每日小笔记(九)】在子线程中使用runloop,正确操作NSTimer计时的注意点 三种可选方法
    2018/3/29
    2018/3/26
    2018/3/25
    BZOJ[3091] 城市旅行
    2018/3/23
  • 原文地址:https://www.cnblogs.com/grape1211/p/4050209.html
Copyright © 2011-2022 走看看