requirejs amd module load example
/**
* This example make use of requireJS to provide a clean and simple way to split JavaScript class definitions
* into separate files and avoid global namespace pollution. http://requirejs.org/
*
* We start by defining the definition within the require block inside a function; this means that any
* new variables / methods will not be added to the global namespace; requireJS simply requires us to return
* a single value (function / Object) which represents this definition. In our case, we will be returning
* the Class' function.
*/
define(function () {
// Forces the JavaScript engine into strict mode: http://tinyurl.com/2dondlh
"use strict"; /**
* This is our classes constructor; unlike AS3 this is where we define our member properties (fields).
* To differentiate constructor functions from regular functions, by convention we start the function
* name with a capital letter. This informs users that they must invoke the Person function using
* the `new` keyword and treat it as a constructor (ie: it returns a new instance of the Class).
*/
function Person(name) {
// This first guard ensures that the callee has invoked our Class' constructor function
// with the `new` keyword - failure to do this will result in the `this` keyword referring
// to the callee's scope (typically the window global) which will result in the following fields
// (name and _age) leaking into the global namespace and not being set on this object.
if (!(this instanceof Person)) {
throw new TypeError("Person constructor cannot be called as a function.");
} // Here we create a member property (field) for the Person's name; setting its value
// what the one supplied to the Constructor. Although we don't have to define
// properties ahead of time (they can easily be added at runtime as all Object / functions
// in JavaScript are dynamic) I believe it makes your code easier to follow if you list your
// classes intentions up front (eg: in the Constructor function).
this.name = name; // Here we are defining a private member. As there is no `private` keyword in JavaScript
// there is no way for us to hide this data (without resorting to inelegant hacks); instead
// we choose to use a naming convention where a leading underscore indicates a property
// is private and should not be relied upon as part of the Classes public API.
this._age = -1;
} /**
* Adding static properties is as simple as adding them directly to the constructor
* function directly.
*/
Person.RETIREMENT_AGE = 60; /**
* Public Static methods are defined in the same way; here's a static constructor for our Person class
* which also sets the person's age.
*/
Person.create = function (name, age) {
var result = new Person(name);
result.setAge(age); return result;
}; /**
* Any functions not added to the Person reference won't be visible, or accessible outside of
* this file (closure); however, these methods and functions don't belong to the Person class either
* and are static as a result.
*/
function formatNameAndAge(person) {
// Note that `this` does not refer to the Person object from inside this method.
if (person._age === -1) {
return "We don't know how old " + person.name + " is!";
} return (person.name + ", is " + person._age + " years old and "
+ ((person.canRetire()) ? "can" : "can't") + " retire");
}; /**
* The prototype is a special type of Object which is used as a the blueprint for all instances
* of a given Class; by defining functions and properties on the prototype we reduce memory
* overhead. We can also achieve inheritance by pointing one classes' prototype at another, for
* example, if we introduced a BankManager class which extended our Person class, we could write:
*
* `BankManager.prototype = Person.prototype`
* `BankManager.prototype.constructor = BankManager`
*
* However, due to the dynamic nature of JavaScript I am of the opinion that favouring composition
* over inheritance will make your code easier to read and re-use.
*/
Person.prototype = { /**
* Whenever you replace an Object's Prototype, you need to repoint
* the base Constructor back at the original constructor Function,
* otherwise `instanceof` calls will fail.
*/
constructor: Person, /**
* All methods added to a Class' prototype are public (visible); they are able to
* access the properties and methods of the Person class via the `this` keyword. Note that
* unlike ActionScript, usage of the `this` keyword is required, failure to use it will
* result in the JavaScript engine trying to resolve the definition on the global object.
*/
greet: function () {
// Note we have to use the `this` keyword.
return "Hello, " + this.name;
}, /**
* Even tho the `_age` property is accessible; it still makes a lot of sense to provide
* mutator methods (getters / setters) which make up the public API of a Class - here we
* validate the supplied value; something you can't do when a field is modified directly
*/
setAge: function (value) {
// Ensure the supplied value is numeric.
if (typeof (value) !== 'number') {
throw new TypeError(typeof (value) + " is not a number.");
} // Ensure the supplied value is valid.
if (isNaN(value) || value < 0) {
throw new RangeError("Supplied value is out of range.");
} this._age = value;
}, /**
* This method access both a member property and a static property.
*/
canRetire: function() {
return this._age >= Person.RETIREMENT_AGE;
}, /**
* Finally we can also access 'static' functions and properties.
*/
toString: function() {
// Note that as `formatNameAndAge` is static we must supply a reference
// to `this` so it can operate on this instance.
return formatNameAndAge(this);
}
}; // As mentioned up top, requireJS needs us to return a value - in this files case, we will return
// a reference to the constructor function.
return Person;
});
使用:
require(['site'],function(Person){
var jonny = new Person("Jonny");
jonny.setAge(29);
console.log(jonny.toString());
});
requirejs amd module load example的更多相关文章
- 解决metasploit的module load fail
解决metasploit的module load fail 在exploits文件夹下面新建一个文件夹test 把你要用的rb文件放进去 reload_all 就行了
- 模块化 Sea.js(CMD)规范 RequireJS(AMD)规范 的用法
插入第三方库AMD CMD都 一样 如:JQ(再JQ源码里修改) 使用seajs的步骤 1.HTML里引入seajs <script src="./lib/sea.js"& ...
- 对于requirejs AMD模块加载的理解
个人人为使用模块化加载的优点有三: 1,以我的项目为例:90%为图表展示,使用的是echarts,此文件较大,requirejs可以在同一个版本号(urlArgs)之下缓存文件,那么我就可以在访问登陆 ...
- requireJs,AMD,CMD
知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs. 知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏 ...
- Javascript Module pattern template. Shows a class with a constructor and public/private methods/properties. Also shows compatibility with CommonJS(eg Node.JS) and AMD (eg requireJS) as well as in a br
/** * Created with JetBrains PhpStorm. * User: scotty * Date: 28/08/2013 * Time: 19:39 */ ;(function ...
- AMD及requireJS
前面的话 由CommonJS组织提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供统一的指引.AMD规范就是其中比较著名一个,全称是Asynchronous Module Defi ...
- 详解AMD规范及具体实现requireJS在工程中的使用
前面的话 由CommonJS组织提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供统一的指引.AMD规范就是其中比较著名一个,全称是Asynchronous Module Defi ...
- RequireJS API
可以找到许多的解读,但是原文总是最重要的,也是最正宗的说明,直接访问 RequireJS 有时不太方便,这里将 RequireJS 2.0 API 的原文转载到博客园,方便查看. This is th ...
- JavaScript AMD 模块加载器原理与实现
关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者 ...
随机推荐
- BZOJ3052/UOJ#58 [wc2013]糖果公园 莫队 带修莫队 树上莫队
原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ3052.html 题目传送门 - BZOJ3052 题目传送门 - UOJ#58 题意 给定一棵树,有 ...
- Codeforces 555C Case of Chocolate 其他
原文链接https://www.cnblogs.com/zhouzhendong/p/9272797.html 题目传送门 - CF555C 题意 给定一个 $n\times n(n\leq 10^9 ...
- Spring事务的传播:PROPAGATION_REQUIRED
PROPAGATION_REQUIRED-- 支持当前事务,如果当前没有事务,就新建一个事务.这是最常见的选择. ServiceA { void methodA() { ServiceB.method ...
- Codeforces 948D Perfect Security 【01字典树】
<题目链接> 题目大意: 给定两个长度为n的序列,可以改变第二个序列中数的顺序,使得两个序列相同位置的数异或之后得到的新序列的字典序最小. 解题分析: 用01字典树来解决异或最值问题.因为 ...
- HDU 1540 Tunnel Warfare(经典)(区间合并)【线段树】
<题目链接> 题目大意: 一个长度为n的线段,下面m个操作 D x 表示将单元x毁掉 R 表示修复最后毁坏的那个单元 Q x 询问这个单元以及它周围有多少个连续的单元,如果它本身已经被 ...
- Xamarin Essentials教程打开文件
Xamarin Essentials教程打开文件 FileSystem类的OpenAppPackageFileAsync()方法可以用来打开App包中特定的文件,其语法形式如下: public sta ...
- 37_Reverse3_digit_Integer
描述 反转一个只有3位数的整数. 你可以假设输入一定是一个只有三位数的整数,这个整数大于等于100,小于1000. [ ] 您在真实的面试中是否遇到过这个题? 样例 123 反转之后是 321. 90 ...
- 骚气男孩saochi boy 唐砖 插曲
试听下载链接:https://pan.baidu.com/s/1ObB9FYbgzegcE25io6zCEg
- winfrom datagridview中DataGridViewTextBoxColumn的联动处理
这个问题有两种方法 第一种是用DataGridview中自带的DataGridViewTextBoxColumn 控件,第二种是动态添加combobox控件 方法一: 首先 窗体上拖拽一个 DataG ...
- BZOJ.1071.[SCOI2007]组队(思路)
题目链接 三个限制: \(Ah-AminH+Bv-BminV\leq C\ \to\ Ah+Bv\leq C+AminH+BminV\) \(v\geq minV\) \(h\geq minH\) 记 ...