The first glance at JavaScript-白红宇

The first glance at JavaScript

阅读量：5220 次

发布时间：2019-06-14

本文共 3418 字，大约阅读时间需要 11 分钟。

＞＞在哪里放置 JavaScript

JavaScript可以放置在Head或者Body之中，也可以从外部引用。

HTML内嵌JavaScript

外部引用JavaScript

把 .js 文件放到网站目录中通常存放脚本的子目录中，这样更容易管理和维护。

不过，从Performance的角度来看，无论是哪种方式，都放尽量发在Html Body的最后部分，免得Loading JavaScript会block影响整个html页面的loading。

>> Values/Types

Booleans: true/false

Numbers: 1, 1.0

Strings: "abc", 'abc'

Functions:

function twice(x) {        return 2 * x;    }    console.log(twice(4)); // 8

Objects:

var obj = {        propName1: 123,        propName2: "abc"};obj.propName1 = 456;obj["propName1"] = 456; // same as previous statement

Arrays:

var arr = [true, "abc", 123];console.log(arr[1]); // abcconsole.log(arr.length); // 3

undefined

null

>>条件控制

if- else if - else:

switch - case

>>循环控制

for loop:

while:

do-while:

for ... in:

break - continue:

>> Event

onload/onUnload:

onload在导入页面的时候触发，而onUnload则是在退出的时候触发。

onFocus, onBlur 和 onChange：

通常相互配合用来验证表单。

onSubmit

用于在提交表单之前验证所有的表单域。

onMouseOver 和 onMouseOut

常用来用来创建“动态的”按钮。

>> Error Handling

Exception(try/catch, throw):

onerror:

>> High Performance JavaScript

1. Always prefer the Single var pattern.

JavaScript Engine hosts all the vars to the top of the function. So even if we declare our var at the bottom of the function, it doesn’t matter.

function foo() {    var c = 1;    //lots of logic    //and then    var d = 0;var e;} function foo() {    var c = 1, d = 0, e;}

2. Cache your objects whenever possible.

Piaoger在jsperf试过，把length存起来还是很有用的，大约有10%的性能差异。

//Goodfor (var i = 0, x = p.length; i

3. Avoid memory leaks and circular references in your closures.

From:

//Classic case for circular referencesfunction foo(e,d) {    $(e).on("click", function() {        //Do something with d    });}

To:

//Break the cycle!function foo(e, d) {
        $(e).on("click", cbk(d));}function cbk (d) {}

4. Move common functions to prototype:

Everytime you create a new person, JS Engine allocates memory for firstName, lastName and getName. I don't mean to say that this is wrong but this is inefficient. Isn't it? So, what's the solution? Move getName to prototype!

From:

function Person(fname,lname) {    this.firstName = fname;    this.lastName = lname;     this.getName = function(){        return this.firstName + ' ' + this.lastName;    } }//lets say you are doing something like this in your codevar p1 = new Person("Jack", "Smith");var p2 = new Person("John", "Doe");

To:

//BetterPerson.prototype = {   getName : function(){       return this.firstName + ' ' + this.lastName;   }}

5. How to clean a array

//lets try the cleanup differently! arr.length = 0;

6. Avoid anonymous functions inside setTimeout or setInterval之类的函数或者循环内

JS Engine simply creates a new anonymous function every 2 seconds! More garbage and you know the consequence! The solution is obviously to use a named function and reference it inside setTimeout.

From:

setTimeout(function(){     //do Something  }, 2000);

To:

//Much better  function myCallback(){     //do Something  };  setTimeout(myCallback, 2000);

7， Using static classes

See if you can get away by using Static classes in your app. Use instance classes only when necessary. The idea is to use memory sparingly - only when it's an absolute necessity.

//Simpler and better   var MyApp = MyApp || {};   MyApp = (function () {    var doSomething = function() { }    return {        init: function (a) {                    };    };})();MyApp.init();

From

>> More Materials: