Rhea's Blog

Friday, March 20, 2015

close in ModalService --- AngularJS

The close of Modal is in ModalService.

beforeEach(inject(function(_ModalService_){

close = ModalService.close;

}))

Monday, March 16, 2015

Notes of SCOPE & CLOSURE JS

1. If an RHS look-up fails to ever find a variable, anywhere in the nested scopes, this results in a ReferenceError being thrown by the engine. I's important to note that the error is of the type ReferenceError.
If the engine is performing an LHS look-up and it arrives at the top floor (global scope) without finding it, if the program is not running in "strict mode", then the global scope will create a new variable of that name in the global scope, and hand it back to Engine.

2. Cheating Lexical
1) eval
2) with: Even though a with block treats an object like a lexical scope, a normal var declaration inside that with block will not be scoped to that with block, but instead the containing function scope.

Wednesday, March 11, 2015

Notes: John Papa - 10 AngularJS Patterns (Codes on the Beach 2014)

BE CONSISTENT!

1. Structure Patterns
1) By Type:
app/
controllers/
services/
views/
factories/
directives/
2)By Feature
app/
dashboard/
layout/
people/
services/
Speakers/
Tracks/
Sessions
3) Somewhere in the middle
LIFT
2. Data Patterns
Separation of Concerns
Don't put data access in the Controller
3. Decorate the $exceptionHandler Service
4. Modularity
Each module can be app, service or widgets
Modules are containers
Defining a Module:

set a module

var app = angular.module('myApp',[]);

get a module

var app = angular.module('myApp');

inject dependencies into a Module (like a wrapper ):

angular.module('app',[
   'app.avengers',
   'app.dashboard',
   'app.widgets',
   'app.layout'
]);

Categories of Dependencies:

angular.module('app',[
   //Angular Modules
   'ngRoute',
   //Custome Modules
   'common',
   // 3rd Party Modules
   'ui.bootstrap',
   'breeze.angular'
]);

avengers ngAnimate
ModularApp dashboard core ngRoute
widgets common
layout ui-bootstrap

5. Controller pattern
Controller is like a constructor

angular
    .module('app.avengers')
    .controller('Avenger',Avenger);

// "Classic" $scope syntax
function Avenger($scope){
    $scope.name = 'Captain America';
    $scope.prop = 'shield';
}

// "Controller As" syntax
function Avenger(){
    var vm = this;
    vm.name = 'Captain America';
    vm.prop = 'shield';
}

6. Clean Code
IIFE(Immediately Invoked Function Expression)
7. Dependency Injection
Safely Minify Dependencies

angular
    .module('app.dashboard')
    .controller('Dashboard',Dashboard);

function Dashboard(common, dataservice){
    // when minified, the common and dataservice may become a and b, which won't be found
}

Safe way 1: Inline Dependency Array

angular
    .module('app.dashboard')
    .controller('Dashboard',['common','dataservice',Dashboard]);
function Dashboard(common, dataservice){
}

Safe way 2: $inject

angular
    .module('app.dashboard')
    .controller('Dashboard',Dashboard);
Dashboard.$inject = ['$q','dataservice','logger'];
function Dashboard($q, dataservice, logger){
}

8. Tasks and Annotations
Grunt: Configuration over code; File based
Gulp: Code over configuration; Stream based
9. Breeze, Local Storage, Validation, Karma, Gulp and More

Saturday, March 7, 2015

Problem when assigning value to a variable defined outside of a function

I wrote this code:

searchBtnIsEnabled: {value: function(){
    var isEnabled;
    this.searchBtn.isEnabled().then(function(result){
      isEnabled = result;
      console.log("the isEnabled is: "+isEnabled);
    });
    console.log(isEnabled);
  }}

But the logged isEnabled is undefined. Then I change it to:

searchBtnIsEnabled: {value: function(callback){
    this.searchBtn.isEnabled().then(function(result){
      callback(result);
    })
  }}

this.searchBtnIsEnabled(function(enable){
    console.log("The enable is: "+enable);
})

Then it works.

REASON : Javascript Asynchronous

Please read:
http://tech.pro/blog/1402/five-patterns-to-help-you-tame-asynchronous-javascript
http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron

Friday, March 6, 2015

Repost: JavaScript "this"

Source Link:
http://www.2ality.com/2014/05/this.html

Author: Dr. Axel Rauschmayer

JavaScript’s “this”: how it works, where it can trip you up

Labels: dev, javascript, jslang

In JavaScript, the special variable this is relatively complicated, because it is available everywhere, not just in object-oriented settings. This blog post explains how this works and where it can cause problems, concluding with best practices.To understand this, it is best to partition the locations where it can be used into three categories:

In functions: this is an extra, often implicit, parameter.
Outside functions (in the top-level scope): this refers to the global object in browsers and to a module’s exports in Node.js.
In a string passed to eval(): eval() either picks up the current value ofthis or sets it to the global object, depending on whether it is called directly or indirectly.

Let’s examine each of these categories.

`this` in functions

That’s the most common way of using this, because functions represent all callable constructs in JavaScript, by playing three different roles:

Real functions (this is the global object in sloppy mode, undefined in strict mode)
Constructors (this refers to the newly created instance)
Methods (this refers to the receiver of the method call)

In functions, this can be thought of as an extra, often implicit, parameter.

`this` in real functions

In real functions, the value of this depends on the mode one is in:

Sloppy mode: this refers to the global object (window in browsers).

    function sloppyFunc() {
        console.log(this === window); // true
    }
    sloppyFunc();

Strict mode: this has the value undefined.

    function strictFunc() {
        'use strict';
        console.log(this === undefined); // true
    }
    strictFunc();

That is, this is an implicit parameter that is set to a default value (window or undefined). You can, however, make a function call via call() or apply() and specify the value ofthis explicitly:

    function func(arg1, arg2) {
        console.log(this); // a
        console.log(arg1); // b
        console.log(arg2); // c
    }
    func.call('a', 'b', 'c'); // (this, arg1, arg2)
    func.apply('a', ['b', 'c']); // (this, arrayWithArgs)

`this` in constructors

Functions become constructors if you invoke them via the new operator. That operator creates a new object and passes it to the constructor via this:

    var savedThis;
    function Constr() {
        savedThis = this;
    }
    var inst = new Constr();
    console.log(savedThis === inst); // true

Implemented in JavaScript, the new operator looks roughly as follows (a more accurate implementation is slightly more complex):

    function newOperator(Constr, arrayWithArgs) {
        var thisValue = Object.create(Constr.prototype);
        Constr.apply(thisValue, arrayWithArgs);
        return thisValue;
    }

`this` in methods

In methods, things are similar to more traditional object-oriented languages: this refers to the receiver, the object on which the method has been invoked.

    var obj = {
        method: function () {
            console.log(this === obj); // true
        }
    }
    obj.method();

`this` in the top-level scope

In browsers, the top-level scope is the global scope and this refers to the global object(like window does):

    <script>
        console.log(this === window); // true
    </script>

In Node.js, you normally execute code in modules. Therefore, the top-level scope is a special module scope:

    // `global` (not `window`) refers to global object:
    console.log(Math === global.Math); // true

    // `this` doesn’t refer to the global object:
    console.log(this !== global); // true
    // `this` refers to a module’s exports:
    console.log(this === module.exports); // true

`this` in `eval()`

eval() can be called either directly (via a real function call) or indirectly (via some other means). The details are explained here.If eval() is called indirectly, this refers to the global object:

    > (0,eval)('this === window')
    true

Otherwise, if eval() is called directly, this remains the same as in the surroundings ofeval(). For example:

    // Real functions
    function sloppyFunc() {
        console.log(eval('this') === window); // true
    }
    sloppyFunc();

    function strictFunc() {
        'use strict';
        console.log(eval('this') === undefined); // true
    }
    strictFunc();

    // Constructors
    var savedThis;
    function Constr() {
        savedThis = eval('this');
    }
    var inst = new Constr();
    console.log(savedThis === inst); // true

    // Methods
    var obj = {
        method: function () {
            console.log(eval('this') === obj); // true
        }
    }
    obj.method();

`this`-related pitfalls

There are three this-related pitfalls that you should be aware of. Note that in each case, strict mode makes things safer, because this is undefined in real functions and you get warnings when things go wrong.

Pitfall: forgetting `new`

If you invoke a constructor and forget the new operator, you are accidently using it as a real function. Hence, this does not have the correct value. In sloppy mode, this iswindow and you’ll create global variables:

    function Point(x, y) {
        this.x = x;
        this.y = y;
    }
    var p = Point(7, 5); // we forgot new!
    console.log(p === undefined); // true

    // Global variables have been created:
    console.log(x); // 7
    console.log(y); // 5

Thankfully, you get a warning in strict mode (this === undefined):

    function Point(x, y) {
        'use strict';
        this.x = x;
        this.y = y;
    }
    var p = Point(7, 5);
    // TypeError: Cannot set property 'x' of undefined

Pitfall: extracting methods improperly

If you retrieve the value of a method (instead of invoking it), you turn the method into a function. Calling the value results in a function call, not a method call. This kind of extraction can happen when you pass a method as an argument for a function or method call. Real-world examples include setTimeout() and registering event handlers. I’ll use the function callIt() to simulate this use case synchronously:

    /** Similar to setTimeout() and setImmediate() */
    function callIt(func) {
        func();
    }

If you call a sloppy-mode method as a function, this refers to the global object and global variables will be created:

    var counter = {
        count: 0,
        // Sloppy-mode method
        inc: function () {
            this.count++;
        }
    }

    callIt(counter.inc);

    // Didn’t work:
    console.log(counter.count); // 0

    // Instead, a global variable has been created
    // (NaN is result of applying ++ to undefined):
    console.log(count);  // NaN

If you call a strict-mode method as a function, this is undefined. Things don’t work, either. But at least you get a warning:

    var counter = {
        count: 0,
        // Strict-mode method
        inc: function () {
            'use strict';
            this.count++;
        }
    }

    callIt(counter.inc);

    // TypeError: Cannot read property 'count' of undefined
    console.log(counter.count);

The fix is to use bind():

    var counter = {
        count: 0,
        inc: function () {
            this.count++;
        }
    }

    callIt(counter.inc.bind(counter));

    // It worked!
    console.log(counter.count); // 1

bind() created a new function that always receives a this whose value is counter.

Pitfall: shadowing `this`

When you use a real function inside a method, it is easy to forget that the former has its own this (even though it has no need for it). Therefore, you can’t refer from the former to the method’s this, because it is shadowed. Let’s look at an example where things go wrong:

    var obj = {
        name: 'Jane',
        friends: [ 'Tarzan', 'Cheeta' ],
        loop: function () {
            'use strict';
            this.friends.forEach(
                function (friend) {
                    console.log(this.name+' knows '+friend);
                }
            );
        }
    };
    obj.loop();
    // TypeError: Cannot read property 'name' of undefined

In the previous example, this.name fails, because the function’s this is undefined, it is not the same as the this of the method loop(). There are three ways to fix … this.Fix 1: that = this. Assign this to a variable that isn’t shadowed (another popular name is self) and use that one.

    loop: function () {
        'use strict';
        var that = this;
        this.friends.forEach(function (friend) {
            console.log(that.name+' knows '+friend);
        });
    }

Fix 2: bind(). Use bind() to create a function whose this always has the correct value (the method’s this in the following example).

    loop: function () {
        'use strict';
        this.friends.forEach(function (friend) {
            console.log(this.name+' knows '+friend);
        }.bind(this));
    }

Fix 3: forEach’s second parameter. This method has a second parameter whose value is passed to the callback as this.

    loop: function () {
        'use strict';
        this.friends.forEach(function (friend) {
            console.log(this.name+' knows '+friend);
        }, this);
    }

Best practices

Conceptually, I think of real functions as not having their own this and think of the aforementioned fixes as keeping up that illusion. ECMAScript 6 supports this approach via arrow functions – functions without their own this. Inside such functions, you can freely use this, because there is no shadowing:

    loop: function () {
        'use strict';
        // The parameter of forEach() is an arrow function
        this.friends.forEach(friend => {
            // `this` is loop’s `this`
            console.log(this.name+' knows '+friend);
        });
    }

I don’t like APIs that use this as an additional parameter of real functions:

    beforeEach(function () {  
        this.addMatchers({  
            toBeInRange: function (start, end) {  
                ...
            }  
        });  
    });

Turning such an implicit parameter into an explicit one makes things more obvious and is compatible with arrow functions.

    beforeEach(api => {
        api.addMatchers({
            toBeInRange(start, end) {
                ...
            }
        });
    });

Thursday, March 5, 2015

Repost: Understanding Baidu — The Chinese Google

Source Link of the Article:
http://www.sitepoint.com/baidu-chinese-google/

Shaumik Daityari

Published February 28, 2015

Although China represents a huge chunk of netizens (over 600 million users), the Chinese government is very strict when it comes to what content is shown to its people. They have stringent regulations and their ruthlessness is shown in partially or fully blocking popular websites like Google and Facebook in the past.

In spite of the absence of these American giants in the Chinese world, local websites have emerged, which perform the tasks of their American counterparts quite well. In this post, we look at the progress of one such website — Baidu.

Although the primary product of Baidu is the search engine, it also has services like Baidu Yun (cloud services), Baidu News, Baidu Dictionary and many more. Baidu’s advertisements are also similar to Google’s Adwords and AdSense. In this article, let’s focus on the search engine and how to give your site the best chance of appearing in Chinese search results.

Why Care about Baidu?

Source: NetMarketShare

To understand the importance of Baidu, you should consider the market share of different search engines. As the January 2015 search engine market share results show, Google accounts for over two thirds of searches, but Baidu comes in second with 18.7%. Bing currently has 8.7% and Yahoo is close behind with 7.8%

Baidu boasts more than 60% of Chinese search traffic but it is also known to refer over a quarter of its traffic to its own properties.

Getting Ready for Baidu

If the primary audience of your website is English speaking then it’s not necessary or wise to implement any of the tips that I provide here. However, if you run a product line or service with a large portion of your audience being Chinese-speaking, you can’t ignore this huge potential market. Let’s have a look at what you can do to help your website attract more Baidu users.

Use Chinese Keywords in Meta Tags

Although Google does not use the “keywords” meta tag to rank search results, Baidu has no such policy. Therefore, you can add Chinese words to your meta description and meta keywords. I’m not saying that you’ll immediately shoot to the top of Baidu’s rankings but it looks like at this stage, it can’t hurt!

An easy approach to this would be to translate your existing keywords and make copies of them in Chinese. Naturally, this leads to redundancy and you would do this only if you cater to a Chinese audience.

Here is a look at the different types of meta tags and their usage.

Be careful with JavaScript and Flash

Although web crawlers do not have the ability to execute JavaScript, the Google crawler is smarter and sometimes tries to crawl pages that the JavaScript pages point to. However, the Baidu crawler absolutely hasno way of interpreting your JavaScript. You should therefore have alternate text for anything that might be invisible to the crawler. You may also want to provide alternate non-JavaScript versions of webpages to point the crawlers to.

In addition to JavaScript, the Baidu crawler also has no way of detecting Flash content. If you can’t avoid Flash content, make sure you provide alternate text strings that describe the content and relevant meta tags.

Avoid sensitive content

The reason the American giants aren’t successful in China is because of the strong censorship by the Chinese government. Baidu adheres to those censorship policies. If you host content that the Chinese government thinks is not suitable for the Chinese public, your website will be taken off Baidu search results. You may refer to the list of blacklisted keywords in China to make sure you do not violate any terms.

Avoid duplicate content

By now you should know that every search engine hates duplicate content, Baidu is not different. Make sure you write a proper robots.txt to tell the crawler explicitly what to search for.

Get a Chinese domain

Baidu prefers sites hosted locally, so there is a higher preference to sites with the domain .cn or .com.cn. If you want significant traffic from China (this might be important for e-commerce sites for instance), it may be worth maintaining a Chinese version of your website with a .cn domain name to rank higher in Baidu.

Final Thoughts

Baidu has a huge market share and as a webmaster, you should be aware of its potential to drive Chinese traffic. If a large portion of your users or target market is Chinese and Baidu doesn’t index your website properly, you are missing out.

Repost: Understanding module.exports and exports in Node.js

Source Link of the article:

http://www.sitepoint.com/understanding-module-exports-exports-node-js/

Cho S. Kim

Published July 18, 2014

As developers, we often face situations where we need to use unfamiliar code. A question will arise during these moments. How much time should I invest in understanding the code that I’m about to use? A typical answer is learn enough to start coding; then explore that topic further when time permits. Well, the time has come to gain a better understanding of module.exports and exports in Node.js. Here’s what I have learned.

What is a Module

A module encapsulates related code into a single unit of code. When creating a module, this can be interpreted as moving all related functions into a file. Let’s illustrate this point with an example involving an application built with Node.js. Imagine that we created a file called greetings.js and it contains the following two functions:

// greetings.js

sayHelloInEnglish = function() {

  return "Hello";

};

sayHelloInSpanish = function() {

  return "Hola";

};

Exporting a Module

The utility of greetings.js increases when its encapsulated code can be utilized in other files. So let’s refactor greetings.js to achieve this goal. To comprehend what is actually happening, we can follow a three-step process:

1) Imagine that this line of code exists as the first line of code in greetings.js:

// greetings.js

var exports = module.exports = {};

2) Assign any expression in greetings.js that we want to become available in other files to the exportsobject:

// greetings.js

// var exports = module.exports = {};

exports.sayHelloInEnglish = function() {

  return "HELLO";

};

exports.sayHelloInSpanish = function() {

  return "Hola";

};

In the code above, we could have replaced exports with module.exports and achieved the same result. If this seems confusing, remember that exports and module.exports reference the same object.

3) This is the current value of module.exports:

module.exports = {

  sayHelloInEnglish: function() {

    return "HELLO";

  },

  sayHelloInSpanish: function() {

    return "Hola";

  }

};

Importing a Module

Let’s import the publicly available methods of greetings.js to a new file called main.js. This process can be described in three steps:

1) The keyword require is used in Node.js to import modules. Imagine that this is how require is defined:

var require = function(path) {

  // ...

  return module.exports;

};

2) Let’s require greetings.js in main.js:

// main.js

var greetings = require("./greetings.js");

The above code is equivalent to this:

// main.js

var greetings = {

  sayHelloInEnglish: function() {

    return "HELLO";

  },

  sayHelloInSpanish: function() {

    return "Hola";

  }

};

3) We can now access the publicly available methods of greetings.js as a property of our greetingsvariable in main.js.

// main.js

var greetings = require("./greetings.js");

// "Hello"

greetings.sayHelloInEnglish();

// "Hola"  

greetings.sayHelloInSpanish();

Salient Points

The keyword require returns an object, which references the value of module.exports for a given file. If a developer unintentionally or intentionally re-assigns module.exports to a different object or different data structure, then any properties added to the original module.exports object will be unaccessible.

An example will help elaborate this point:

// greetings.js

// var exports = module.exports = {};

exports.sayHelloInEnglish = function() {

  return "HELLO";

};

exports.sayHelloInSpanish = function() {

  return "Hola";

};

/* 

 * this line of code re-assigns  

 * module.exports

 */

module.exports = "Bonjour";

Now let’s require greetings.js in main.js:

// main.js

var greetings = require("./greetings.js");

At this moment, nothing is different than before. We assign the variable greetings to any code that is publicly available in greetings.js.

The consequence of re-assigning module.exports to a data structure other than its default value is revealed when we attempt to invoke sayHelloInEnglish and sayHelloInSpanish:

// main.js

// var greetings = require("./greetings.js");

/*

 * TypeError: object Bonjour has no 

 * method 'sayHelloInEnglish'

 */

greetings.sayHelloInEnglish();

/* 

 * TypeError: object Bonjour has no 

 * method 'sayHelloInSpanish'

 */

greetings.sayHelloInSpanish();

To understand why these errors are occuring, let’s log the value of greetings to a console:

// "Bonjour"

console.log(greetings);

At this point, we are trying to access the methods sayHelloInEnglish and sayHelloInSpanish on the string “Bonjour.” module.exports, in other words, is no longer referencing the default object that contain those methods.

Conclusion

Importing and exporting modules is a ubiqutous task in Node.js. I hope that the difference between exportsand module.exports is clearer. Moreover, if you ever encounter an error in accessing publicly available methods in the future, then I hope that you have a better understanding of why those errors may occur.