javascript编程思想

javascript编程开发修炼之道

 

提要文摘附注: 本文的核心内容是围绕javascript前端开发的编程技术要素，来深入地探讨编写高质量的javascript代码的方法、技巧、规范和最佳实践，从而为编写易于维护的Web前端代码打下坚实的基础。

 

 作者：贵源网络

1.javascript基础类库

2.创建静态对象 var obj = {}、window['obj']={};

3.创建实例对象 function fn(){} fn.prototype = {}

4.function对象自执行函数(function(){})()

5.判断对象类型 typeof(obj) == 'number|string|boolean|object|function|undefined'

6.JSON数据传输

7.数组与对象并用

8.ajax数据交互

9.创建common文件

10.类库特效开发

11.运算符与简化写法

12.cookie记录

13.url参数操作

14.正则表达示/expression/

15.扩展内置对象

______________________________________________________

http://www.36ria.com/demo/hover/demo.html

1.javascript基础类库

jQuery.js/jQuery.form.js/jQuery.cookie.js  JSON.js  FIS.js

 

2.创建静态对象 var obj = {}、window['obj']={} 、var obj=new Object();

创建对象：

以下结果等价
var obj = {} obj.id =1 obj.name=‘sn’	window['obj']={} obj.id =1 obj.name=’sn’	var obj =  new Object() obj.id =1 obj.name=’sn’
var obj = {    id:1,  name:’sn’ }	window[‘obj’]={ id:1,     name:’sn’ }
主要用途：定义全局变量、当做函数参数调用

3.创建实例对象 function fn(){} fn.prototype = {}

以下结果等价
function fn(){} fn.prototype.get=function(){} fn.prototype.set=function(){}	function fn(){} fn.prototype={     get:function(){}     set:function(){} }
主要用途：复杂动能的实现

4.function对象自执行函数(function(){})()

以下结果等价
(function(){ })()	(function(){ }())	(function(){ }).call(this)	!function(){} void function(){}
主要用途：复杂动能的实现

 

5.判断对象类型 typeof(obj) == 'number|string|boolean|object|function|undefined'

typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。

它返回值是一个字符串，该字符串说明运算数的类型。

● "undefined"——如果这个值未定义或未初始化时；

● "boolean"——如果这个值是布尔值；

● "string"——如果这个值是字符串；

● "number"——如果这个值是数值，
1）true和false将分别被替换为1和0
2）如果是null值，返回0
3) 如果是undefined，返回NaN

● "object"——如果这个值是对象或null；

● "function"——如果这个值是函数；

 

6.JSON数据传输

JSON序列化和反序列化

JSON是“名值对”的集合。结构由大括号'{}'，中括号'[]'，逗号'，'，冒号'：'，双引号'“”'组成，包含的数据类型有Object，Number,Boolean,String,Array, NULL等。

 

7.数组与对象并用

 

8.ajax数据交互

//所有 AJAX 请求设置默认

jQuery.ajaxSetup({

    dataType: "json",

    type: "POST"

});

//当 AJAX 请求开始时，显示“加载中”的指示

jQuery(document).ajaxStart(function () {

    jQuery.colorbox({

        html: '<div id="loader"><img src="oading.gif"/><span>

正在提交请求...</span></div>',

        opacity: 0.3,

        overlayClose: false,

        escKey: false,

        close: ""

})

});

 

9.创建common文件

实现公共方法的文件，此部分可以由自己平时的积累得到或是知复制别人的代码；

 

10.类库特效开发

/* 1.键盘提交 */

var form = this.form = $("#stepForm");

this.form.bind("keypress", function(event) {

       var key_code = event.keyCode;

       if(key_code == "13" || key_code == 13) {

              me.submit();

              return false

       }

});

11.运算符与简化写法

 

12.cookie记录

jQuery.cookie.js

13.url参数操作

 

14.正则表达示/expression/

 

15.扩展内置对象

1）使用jQuery库扩展（Math、String、Array、Number）

jQuery.extend(Math, {})

 

2）扩展jQuery对象

jQuery.extend({});

 

3.对象合并

jQuery.extend(true, C, {})

jQuery.extend(C, {})