• 【转】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();
           }
       });
         

     
     
     
     
    原文地址:
     
     
     
  • 相关阅读:
    Django之数据库--ORM
    Vue 父子组件
    axios封装
    DRF常用功能
    DRF框架之Serializer序列化器的反序列化操作
    Django、DRF有什么不同
    RESTFUL风格
    判断ViewPager滑动方向
    Incompatible integer to pointer conversion sending 'NSInteger' (aka 'int') to parameter of type 'id'
    AchartEngine使用
  • 原文地址:https://www.cnblogs.com/grape1211/p/4050209.html
Copyright © 2020-2023  润新知