Giter VIP home page Giter VIP logo

cat's People

Contributors

ilife5 avatar shirlyfe avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

shirlyfe gogoyqj jieme

cat's Issues

为何最新的avalon无法转为commonjs

根据步骤操作，md文件里的例子都可以执行，并成功从AMD转为commonjs。
但最新的avalon就无法转换，尝试了avalon.js版本和avalon.shim版本，都无法生效？

CommonJs Modules --> AMD

CommonJs Modules --> AMD

基本方法模块

此类模块使用exports导出方法，特点是无依赖

math.js (CommonJs Module)

exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};

等价于：

math.js (AMD Module)

define([], function() {
    return {
        add : function() {
            var sum = 0, i = 0, args = arguments, l = args.length;
            while (i < l) {
                sum += args[i++];
            }
            return sum;
        }
    };
});

有依赖的方法模块

此类模块依赖其他模块，通过exports导出方法

increment.js (CommonJs Module)

var add = require('math').add;
exports.increment = function(val) {
    return add(val, 1);
};

等价于

increment.js(AMD Module)

define(['math'], function(math) {
    var add = math.add;
    return {
        increment : function(val) {
            return add(val, 1);
        }
    };
});

业务代码，无导出

program.js (CommonJs Module)

var inc = require('increment').increment;
var a = 1;
inc(a); // 2

program.js (AMD Module)

define(['increment'], function(increment) {
    var inc = increment.increment;
    var a = 1;
    inc(a); //2
});

扩展的CommonJs Module

这里列出扩展过的CommonJs Module的使用方法及AMD Module的转换方法，扩展来源于fekit，avalon。

Calculation.js (extend CommonJs Module)

//将构造函数Calculation通过module.exports导出
function Calculation() {
}

Calculation.prototype.add = function(x, y) {
    return x + y;
};

module.exports = Calculation;

Calculation.js (AMD Module)

define([], function() {
    function Calculation() {
    }

    Calculation.prototype.add = function(x, y) {
        return x + y;
    }; 

    return Calculation;
});

无任何导出，功能是执行函数或者向全局对象添加方法

add.js (extend CommonJs Module)

//向avalon添加add方法
require('avalon');

function add(){
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
}

avalon.add = add;

add.js (AMD Module)

//如果avalon并没有
define(['avalon'], function(avalon) {
   function add(){
        var sum = 0, i = 0, args = arguments, l = args.length;
        while (i < l) {
            sum += args[i++];
        }
        return sum;
    }

    avalon.add = add; 
});

作为入口，引入需要的包

common.js (extend CommonJs Module)

require('avalon');
require('jquery');
require('./libs/json2');

common.js (AMD Module)

define(['avalon', 'jquery', './libs/json2'], function(avalon, jquery, json2) {});

引入string类型的文件

biz.js (extend CommonJs Module)

var tpl = require('../templates/start'); //may be ../templates/start.string

//...

$container.append(tpl);

biz.js (AMD Module)

define(['text!../templates/start'], function (template) {
    //...

    $container.append(template);
});

fekit moudles Usage

Usage

使用module.exports导出构造函数

Calculation.js

//将构造函数Calculation通过module.exports导出
function Calculation() {
}

Calculation.prototype.add = function(x, y) {
    return x + y;
};

module.exports = Calculation;

使用exports导出方法

math.js

exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};

increment.js

var add = require('math').add;

exports.increment = function(val) {
    return add(val, 1);
};

无任何导出，功能是执行函数或者向全局对象添加方法

add.js

//向avalon添加add方法
function add(){
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
}

avalon.add = add;

作为入口，引入需要的包

//引入avalon json2.js 及jquery
require('avalon');
require('json2');
require('jquery');

CommonJs Modules spec and usage

Spec

Module Context

  • In a module, there is a free variable "require", which conforms to the above definiton.

  • In a module, there is a free variable called "exports", that is an object that the module may add its API to as it executes.

    modules must use the "exports" object as the only means of exporting.

  • In a module, there must be a free variable "module", that is an Object.

    The "module" object must have a "id" property that is the top-level "id" of the module. The "id" property must be such that require(module.id) will return the exports object from which the module.id originated. (That is to say module.id can be passed to another module, and requiring that must return the original module). When feasible this property should be read-only, don't delete.

    The "module" object may have a "uri" String that is the fully-qualified URI to the resource from which the module was created. The "uri" property must not exist in a sandbox.

Usage

math.js

exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};

increment.js

var add = require('math').add;
exports.increment = function(val) {
    return add(val, 1);
};

program.js

var inc = require('increment').increment;
var a = 1;
inc(a); // 2

module.id == "program";

参考：Modules 1.1.1

AMD Modules --> CommonJs Modules

AMD Modules --> CommonJs Modules

使用了id, dependencies, factory的module

alpha.js (AMD Module)

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
   exports.verb = function() {
       return beta.verb();
   }
});

转换为：

alpha.js (CommonJs Module)

var beta = require('beta');

exports.verb = function() {
    return beta.verb();
};

返回对象字面量的匿名模块

alpha.js (AMD Module)

define(["alpha"], function (alpha) {
    return {
        verb: function(){
            return alpha.verb() + 2;
        }
    };
});

转换为：

alpha.js (CommonJs Module)

var alpha = require('alpha');

exports.verb = function() {
    return alpha.verb() + 2;
};

定义没有依赖的对象字面量

Math.js (AMD Module)

define({
    add: function(x, y){
        return x + y;
    }
});

转换为：

Math.js (CommonJs Module)

exports.add = function(x, y) {
    return x + y;
};

使用CommonJs wrapper 定义的模块

action.js (AMD Module)

define(function (require, exports, module) {
    var a = require('a'),
        b = require('b');

    exports.action = function () {};
});

action.js (CommonJs Module)

var a = require('a'),
    b = require('b');

exports.action = function () {};

使用text!插件

biz.js (AMD Module)

define(['text!../templates/start'], function (template) {
    //...

    $container.append(template);
});

biz.js (CommonJs Module)

var tpl = require('../templates/start'); 

//...

$container.append(tpl);

AMD usage

创建一个id为"alpha"的模块，使用了require，exports，和id为"beta"的模块:

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

返回对象字面量的匿名模块：

define(["alpha"], function (alpha) {
    return {
        verb: function(){
            return alpha.verb() + 2;
        }
    };
});

没有依赖的模块可以用来直接定义对象字面量：

define({
    add: function(x, y){
        return x + y;
    }
});

使用简单CJS包装定义模块

define(function (require, exports, module) {
    var a = require('a'),
        b = require('b');

    exports.action = function () {};
});

参考：AMD.md

AMD中text plugin转化到NodeJs时的形式

AMD代码

define(['text!../templates/start', 'jquery'], function (template, jquery) {
    var $container = $('container');
    $container.append(template);
});

在转换到nodejs模式时，如何处理text!../templates/start的情形

avalon 加载器模块标识

具体约定如下：

  1. 每个模块标识的字符串组成只能是合法URL路径，因此只能是英文字母，数字，点号，斜扛，#号。
  2. 如果模块标识是 以"./"开头，则表示相对于它的父模块的目录中找。
  3. 如果模块标识是 以"../"开头，则表示相对于它的父模块的父目录中找。
  4. 如果模块标识不以点号或斜扛开始，则有以下三种情况
    1. 如果此模块标识在 $.config.alias存在对应值，换言之某一模块定义了一个别名，则用此模块的具体路径加载文件。
    2. 如果此模块标识 以http://、https://、file:/// 等协议开头的绝对路径，直接用它加载文件。
    3. 否则我们将在引入框架种子模块（avalon.js）的目录下寻找是否有同名JS文件，然后指向它。
  5. 对于JS模块，它可以省略后缀名，即“.js”可有可无；但对于CSS需要使用css!插件机制。
  6. 框架种子模块的目录保存于 $.config.base属性中。
  7. ready!是系统占位符，用于表示DOM树是否加载完毕，不会进行路径转换。

CMD spec and usage

Spec

Module Definition

A module is defined with define keyword, which is a function.

define(factory);
  1. The define function accepts a single argument, the module factory.
  2. The factory may be a function or other valid values.
  3. If factory is a function, the first three parameters of the function, if specified, must be "require", "exports", and "module", in that order.
  4. If factory is not a function, then the module's exports are set to that object.

Module Context

In a module, there are three free variables: require, exports and module.

define(function(require, exports, module) {

  // The module code goes here

});

The require Function

  1. require is a function
    1. require accepts a module identifier.
    2. require returns the exported API of the foreign module.
    3. If requested module cannot be returned, require should return null.
  2. require.async is a function
    1. require.async accepts a list of module identifiers and a optional callback function.
    2. The callback function receives module exports as function arguments, listed in the same order as the order in the first argument.
    3. If requested module cannot be returned, the callback should receive null correspondingly.

The exports Object

In a module, there is a free variable called "exports", that is an object that the module may add its API to as it executes.

The module Object

  1. module.uri

    The full resolved uri to the module.

  2. module.dependencies

    A list of module identifiers that required by the module.

  3. module.exports

    The exported API of the module. It is the same as exports object.

Usage

A typical sample

math.js

define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});

increment.js

define(function(require, exports, module) {
  var add = require('math').add;
  exports.increment = function(val) {
    return add(val, 1);
  };
});

program.js

define(function(require, exports, module) {
  var inc = require('increment').increment;
  var a = 1;
  inc(a); // 2

  module.id == "program";
});

Wrapped modules with non-function factory

object-data.js

define({
    foo: "bar"
});

array-data.js

define([
    'foo',
    'bar'
]);

string-data.js

define('foo bar');

各模块之间的关系转化

CJS

CommonJs Modules --> AMD

基本方法模块

此类模块使用exports导出方法，特点是无依赖

math.js (CommonJs Module)

exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};

等价于：

math.js (AMD Module)

define([], function() {
    return {
        add : function() {
            var sum = 0, i = 0, args = arguments, l = args.length;
            while (i < l) {
                sum += args[i++];
            }
            return sum;
        }
    };
});

有依赖的方法模块

此类模块依赖其他模块，通过exports导出方法

increment.js (CommonJs Module)

var add = require('math').add;
exports.increment = function(val) {
    return add(val, 1);
};

等价于

increment.js(AMD Module)

define(['math'], function(math) {
    var add = math.add;
    return {
        increment : function(val) {
            return add(val, 1);
        }
    };
});

业务代码，无导出

program.js (CommonJs Module)

var inc = require('increment').increment;
var a = 1;
inc(a); // 2

program.js (AMD Module)

define(['increment'], function(increment) {
    var inc = increment.increment;
    var a = 1;
    inc(a); //2
});

扩展的CommonJs Module

这里列出扩展过的CommonJs Module的使用方法及AMD Module的转换方法，扩展来源于fekit，avalon。

Calculation.js (extend CommonJs Module)

//将构造函数Calculation通过module.exports导出
function Calculation() {
}

Calculation.prototype.add = function(x, y) {
    return x + y;
};

module.exports = Calculation;

Calculation.js (AMD Module)

define([], function() {
    function Calculation() {
    }

    Calculation.prototype.add = function(x, y) {
        return x + y;
    };

    return Calculation;
});

无任何导出，功能是执行函数或者向全局对象添加方法

add.js (extend CommonJs Module)

//向avalon添加add方法
require('avalon');

function add(){
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
}

avalon.add = add;

add.js (AMD Module)

//如果avalon并没有
define(['avalon'], function(avalon) {
   function add(){
        var sum = 0, i = 0, args = arguments, l = args.length;
        while (i < l) {
            sum += args[i++];
        }
        return sum;
    }

    avalon.add = add;
});

作为入口，引入需要的包

common.js (extend CommonJs Module)

require('avalon');
require('jquery');
require('./libs/json2');

common.js (AMD Module)

define(['avalon', 'jquery', './libs/json2'], function(avalon, jquery, json2) {});

引入string类型的文件

biz.js (extend CommonJs Module)

var tpl = require('../templates/start'); //may be ../templates/start.string

//...

$container.append(tpl);

biz.js (AMD Module)

define(['text!../templates/start'], function (template) {
    //...

    $container.append(template);
});

AMD Modules --> CommonJs Modules

使用了id, dependencies, factory的module

alpha.js (AMD Module)

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
   exports.verb = function() {
       return beta.verb();
   }
});

转换为：

alpha.js (CommonJs Module)

var beta = require('beta');

exports.verb = function() {
    return beta.verb();
};

返回对象字面量的匿名模块

alpha.js (AMD Module)

define(["alpha"], function (alpha) {
    return {
        verb: function(){
            return alpha.verb() + 2;
        }
    };
});

转换为：

alpha.js (CommonJs Module)

var alpha = require('alpha');

exports.verb = function() {
    return alpha.verb() + 2;
};

定义没有依赖的对象字面量

add.js (AMD Module)

define({
    add: function(x, y){
        return x + y;
    }
});

转换为：

add.js (CommonJs Module)

exports.add = function(x, y) {
    return x + y;
};

使用CommonJs wrapper 定义的模块

action.js (AMD Module)

define(function (require, exports, module) {
    var a = require('a'),
        b = require('b');

    exports.action = function () {};
});

action.js (CommonJs Module)

var a = require('a'),
    b = require('b');

exports.action = function () {};

使用text!插件

biz.js (AMD Module)

define(['text!../templates/start'], function (template) {
    //...

    $container.append(template);
});

biz.js (CommonJs Module)

var tpl = require('../templates/start');

//...

$container.append(tpl);

AMD Modules --> CommonJs Modules

使用了id, dependencies, factory的module

alpha.js (AMD Module)

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
   exports.verb = function() {
       return beta.verb();
   }
});

转换为：

alpha.js (CommonJs Module)

var beta = require('beta');

exports.verb = function() {
    return beta.verb();
};

返回对象字面量的匿名模块

alpha.js (AMD Module)

define(["alpha"], function (alpha) {
    return {
        verb: function(){
            return alpha.verb() + 2;
        }
    };
});

转换为：

alpha.js (CommonJs Module)

var alpha = require('alpha');

exports.verb = function() {
    return alpha.verb() + 2;
};

定义没有依赖的对象字面量

Math.js (AMD Module)

define({
    add: function(x, y){
        return x + y;
    }
});

转换为：

Math.js (CommonJs Module)

exports.add = function(x, y) {
    return x + y;
};

使用CommonJs wrapper 定义的模块

action.js (AMD Module)

define(function (require, exports, module) {
    var a = require('a'),
        b = require('b');

    exports.action = function () {};
});

action.js (CommonJs Module)

var a = require('a'),
    b = require('b');

exports.action = function () {};

使用text!插件

biz.js (AMD Module)

define(['text!../templates/start'], function (template) {
    //...

    $container.append(template);
});

biz.js (CommonJs Module)

var tpl = require('../templates/start');

//...

$container.append(tpl);

Modules 1.1.1 Usage

math.js

exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
        sum += args[i++];
    }
    return sum;
};

increment.js

var add = require('math').add;
exports.increment = function(val) {
    return add(val, 1);
};

program.js

var inc = require('increment').increment;
var a = 1;
inc(a); // 2

module.id == "program";

CMD Usage

math.js

define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});

increment.js

define(function(require, exports, module) {
  var add = require('math').add;
  exports.increment = function(val) {
    return add(val, 1);
  };
});

program.js

define(function(require, exports, module) {
  var inc = require('increment').increment;
  var a = 1;
  inc(a); // 2

  module.id == "program";
});

Wrapped modules with non-function factory

object-data.js

define({
    foo: "bar"
});

array-data.js

define([
    'foo',
    'bar'
]);

string-data.js

define('foo bar');

avalon加载器模块标识

具体约定如下：

  1. 每个模块标识的字符串组成只能是合法URL路径，因此只能是英文字母，数字，点号，斜扛，#号。
  2. 如果模块标识是 以"./"开头，则表示相对于它的父模块的目录中找。
  3. 如果模块标识是 以"../"开头，则表示相对于它的父模块的父目录中找。
  4. 如果模块标识不以点号或斜扛开始，则有以下三种情况
    1. 如果此模块标识在 $.config.alias存在对应值，换言之某一模块定义了一个别名，则用此模块的具体路径加载文件。
    2. 如果此模块标识 以http://、https://、file:/// 等协议开头的绝对路径，直接用它加载文件。
    3. 否则我们将在引入框架种子模块（avalon.js）的目录下寻找是否有同名JS文件，然后指向它。
  5. 对于JS模块，它可以省略后缀名，即“.js”可有可无；但对于CSS需要使用css!插件机制。
  6. 框架种子模块的目录保存于 $.config.base属性中。
  7. ready!是系统占位符，用于表示DOM树是否加载完毕，不会进行路径转换。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.