Coding with Javascript

be aware of toFixed function

be aware of this

need provide changing scope function

Test

    function test() {
      console.debug(this)
    }
    
    function test_class_A() {
      this.test = test;
    }
    
    function test_class_B() {
      this.test = test;
    }
    
    var cls1 = new test_class_A(),
      cls2 = new test_class_B();
    cls1.test() // output: test_class_A
    cls2.test() // output: test_class_B

prefer doing calculations on Server

js regards number as float
js store float according to IEEE 754-2008
- 0.1 + 0.2 = 0.30000000000000004
use lib like BigDecimal.js

extend javascript native functions

try Underscore.js

authentication and authorization

do validate both on Server - java and Client - javascript

cache solution

what should be cached
- supporting data
- profile
- ...
do cache on Server (use memory) not on Browser
when / how to update cache

compress and cache statics resources

including image | css | javascript
use browser cache
- check version before loading application resources
- load css | javascript by javascript
- support multiple browsers

load by module / lazy loading

requirejs / seajs

define namespace

short action.common action.module is much better than com.action.web.common

build common utilities

everyone can add utility but need to be reviewed before pushing code

build page by Components

everyone can add components but review also needed

build common ui components with business first

everyone can add common ui components but review also needed
common ui components is one of the components
- office select combo
- ...

construct page by Components not by Templates and Logic

reuse components by configurations
layout page by HTML and fill each div with components

how to load User Context

decouple between pages and modules

just like what CAB does
use event to create and add views
use global event bus

design navigation first

define global constants

do all AJAX request by common utility

maintain API documents

do unit tests

testharness.js

<script src="./resources/testharness.js"></script> <br />
<script src="./resources/testharnessreport.js"></script>

    test(function() {
      var request = window.indexedDB.open("TestDB")
      var resp = window.indexedDB.deleteDatabase('TestDB')
      assert_not_null(resp)
    }, 'test delete db')
    
    test(function() {
      var req = window.indexedDB.open("TestDB")
      assert_not_null(req)
      req.onerror = function(event) {
        assert_unreached('open error', event.target.errorCode)
      }
      req.onsuccess = function(event) {
        assert_not_null(req.result)
      }
    }, 'open db with callbacks')

  /* set divX background to white when the buttonX is clicked */
  var divX = $('#divX')        // var divX = Ext.getCmp('divX')
  var buttonX = $('#buttonX')  // var buttonX = Ext.getCmp('buttonX')
  
  buttonX.click(function(){    // buttonX.on('click',function(){
    updateBackground();      //   updateBackground();
  })                           // })
  
  function updateBackground() {
    divX.setBackground('#fff')
  }

changed to

    /* set divX background to white when the buttonX is clicked */
    var divX = $('#divX')        // var divX = Ext.getCmp('divX')
    var buttonX = $('#buttonX')  // var buttonX = Ext.getCmp('buttonX')
    
    buttonX.click(function(){     // buttonX.on('click',function(){
      updateBackground(divX);   //  updateBackground(divX);
    })                            // })
    
    function updateBackground(divX) {
      divX.setBackground('#fff')
    }

test could be

    test(function() {
      var div = $('<div></div>')
      updateBackground(div)
      assertEqual(div.getStyle().getBackground(), '#fff')
    }, 'test set background')

more references