AMD/CMD support; add test cases;

change the lib to support reference from AMD, CMD and normal test AoP support for function properties add test cases (gulp and jasmine) update demo page add readme
Ariex · May 9, 2015 · 1740529 · 1740529
1 parent 105da0c
commit 1740529
Show file tree

Hide file tree

Showing 11 changed files with 164 additions and 34 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/demo/vendor
+/unit-test/node_modules
diff --git a/demo/.bowerrc b/demo/.bowerrc
@@ -0,0 +1,3 @@
+{
+  "directory": "vendor"
+}
diff --git a/demo/app.js b/demo/app.js
@@ -0,0 +1,25 @@
+define(function(require) {
+    var obs = require("../src/observable");
+    console.log(obs);
+
+    window.model = {
+        "aaa": "aaa",
+        "bbb": 12345,
+        "arra": [1, 2, 3],
+        "ccc": {
+            "ddd": 123,
+            "arra": [1, 2, 3],
+            "eee": {
+                "fff": "asdjhaskjhad"
+            }
+        },
+        "style": 2,
+        func: function(a,b,c,d,e,f,g){
+        	console.log(a,b,c,d,e,f,g);
+        }
+    };
+
+    var m2 = obs.observe(model, function(prop, value, oldValue) {
+        console.log(prop + ": " + oldValue + " >> " + value);
+    });
+});
diff --git a/demo/bower.json b/demo/bower.json
@@ -0,0 +1,19 @@
+{
+    "name": "unit-test",
+    "version": "0.0.0",
+    "homepage": "https://github.com/Ariex/observable.js",
+    "authors": [
+        "Ariex <[email protected]>"
+    ],
+    "license": "MIT",
+    "directory": "vendor",
+    "ignore": [
+        "**/.*",
+        "node_modules",
+        "vendor",
+        "spec"
+    ],
+    "dependencies": {
+        "requirejs": "~2.1.17"
+    }
+}
diff --git a/demo/default.html b/demo/default.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <script data-main="app.js" src="vendor/requirejs/require.js"></script>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/demo/observable.html b/demo/observable.html
diff --git a/readme.md b/readme.md
@@ -0,0 +1,7 @@
+# observable.js
+## Visioning
+This project aim for build a simple framework to monitor object property changes, which ca be a basic of a MVVM library like AngularJS or others.
+I have build a simple MVVM framework based on this library.
+
+## demo
+Demo is available in demo folder. Library is supporting AMD and CMD and normal reference, but this demo is based on requirejs.
diff --git a/src/observable.js b/src/observable.js
@@ -1,5 +1,15 @@
 "use strict";
-var observable = window.observable || (function() {
+(function(root, factory) {
+	if (typeof define === "function" && define.amd) { // for AMD and normal
+		define(function() {
+			return root.observable = factory();
+		});
+	} else if (typeof module === "object" && module.exports) { // for CommonJS and normal
+		module.exports = (root.observable = factory());
+	} else { // normal
+		root.observable = factory();
+	}
+}(this, function() {
 	var isArray = function(arr) {
 		return Object.prototype.toString.call(arr) === "[object Array]";
 	}
@@ -40,6 +50,18 @@ var observable = window.observable || (function() {
 				}
 			} else if (isFunc(obj)) {
 				// bind for func
+				return function(){
+					// console.log("before func exec");
+					try{
+						obj.apply(this, arguments);
+						// console.log("after func exec");
+					}catch(ex){
+						// console.log("whe error happened");
+						throw ex;
+					}finally{
+						// console.log("exec finished");
+					}
+				}
 			} else {
 				// normal object
 				try {
@@ -49,11 +71,11 @@ var observable = window.observable || (function() {
 					for (var prop in obj) {
 						if (isObj(obj[prop])) {
 							returnObj.observe(obj[prop], valueChangedHandler, path + "." + prop);
-							return;
 						} else if (isArray(obj[prop])) {
 							obj[prop] = returnObj.observe(obj[prop], valueChangedHandler, path + "." + prop);
 						} else if (isFunc(obj[prop])) {
 							// do nothing
+							obj[prop] = returnObj.observe(obj[prop], valueChangedHandler, path + "." + prop);
 						} else {
 							if (hasProp.call(obj, prop)) {
 								// add setter and getter to this prop
@@ -107,4 +129,4 @@ var observable = window.observable || (function() {
 		}
 	};
 	return returnObj;
-})();
+}));
diff --git a/unit-test/gulpfile.js b/unit-test/gulpfile.js
@@ -0,0 +1,12 @@
+var gulp = require('gulp');
+var jasmine = require('gulp-jasmine');
+
+gulp.task('default', function() {
+    return gulp.src([
+            '../lib/jasmine_examples/Player.js',
+            '../lib/jasmine_examples/Song.js',
+            //'spec/jasmine_examples/PlayerSpec.js',
+            'spec/basic-test.js'
+        ])
+        .pipe(jasmine());
+});
diff --git a/unit-test/package.json b/unit-test/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "unit-test",
+  "version": "1.0.0",
+  "description": "unit test for obserbable.js",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "gulp": "^3.8.11",
+    "gulp-jasmine": "^2.0.1"
+  }
+}
diff --git a/unit-test/spec/basic-test.js b/unit-test/spec/basic-test.js
@@ -0,0 +1,44 @@
+describe("Basic-tests", function() {
+	obs = require('../../src/observable');
+	var model;
+
+	beforeEach(function() {
+		model = {
+			"aaa": "aaa",
+			"bbb": 12345,
+			"arra": [1, 2, 3],
+			"ccc": {
+				"ddd": 123,
+				"arra": [1, 2, 3],
+				"eee": {
+					"fff": "asdjhaskjhad"
+				}
+			},
+			"style": 2
+		};
+	});
+	it("Notify when string property updated", function() {
+		var m2 = obs.observe(model, function(prop, value, oldValue){
+			expect(prop === "aaa").toBe(true);
+		});
+		model.aaa="abcdefg";
+	});
+	it("Notify when number property updated", function() {
+		var m2 = obs.observe(model, function(prop, value, oldValue){
+			expect(prop === "bbb" && model.bbb===321).toBe(true);
+		});
+		model.bbb=321;
+	});
+	it("Test deep property change", function() {
+		var m2 = obs.observe(model, function(prop, value, oldValue){
+			expect(prop === "ccc.eee.fff").toBe(true);
+		});
+		model.ccc.eee.fff=321;
+	});
+	it("Notify when array property updated", function() {
+		var m2 = obs.observe(model, function(prop, value, oldValue){
+			expect(model.ccc.arra.length == 4 && model.ccc.arra[3] === 321).toBe(true);
+		});
+		model.ccc.arra.push(321);
+	});
+});