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, {})

javascript编程思想的更多相关文章

  1. 淡扯javascript编程思想

    一.面向对象-OOD   虽然js面向对象的编程思想已经老话常谈了,但了为了文章的完整性,我还是把它加了进来,尽量以不太一样的方式讲述(虽然也没什么卵不一样的). 1.面向对象,首先得有类的概念,没有 ...

  2. 面向对象编程思想(前传)--你必须知道的javascript

    在写面向对象编程思想-设计模式中的js部分的时候发现很多基础知识不了解的话,是很难真正理解和读懂js面向对象的代码.为此,在这里先快速补上.然后继续我们的面向对象编程思想-设计模式. 什么是鸭子类型 ...

  3. 面向对象编程思想(前传)--你必须知道的javascript(转载)

    原文地址:http://www.cnblogs.com/zhaopei/p/6623460.html阅读目录   什么是鸭子类型 javascript的面向对象 封装 继承 多态 原型 this指向 ...

  4. Java编程思想 (1~10)

    [注:此博客旨在从<Java编程思想>这本书的目录结构上来检验自己的Java基础知识,只为笔记之用] 第一章 对象导论 1.万物皆对象2.程序就是对象的集合3.每个对象都是由其它对象所构成 ...

  5. Javascript编程模式(JavaScript Programming Patterns)Part 1.(初级篇)

    JavaScript 为网站添加状态,这些状态可能是校验或者更复杂的行为像拖拽终止功能或者是异步的请求webserver (aka Ajax). 在过去的那些年里, JavaScript librar ...

  6. 浅谈前端JavaScript编程风格

    前言 多家公司和组织已经公开了它们的风格规范,详细可參阅jscs.info,以下的内容主要參考了Airbnb的JavaScript风格规范.当然还有google的编程建议等编程风格 本章探讨怎样使用E ...

  7. JAVA编程思想(第四版)学习笔记----4.8 switch(知识点已更新)

    switch语句和if-else语句不同,switch语句可以有多个可能的执行路径.在第四版java编程思想介绍switch语句的语法格式时写到: switch (integral-selector) ...

  8. 《Java编程思想》学习笔记(二)——类加载及执行顺序

    <Java编程思想>学习笔记(二)--类加载及执行顺序 (这是很久之前写的,保存在印象笔记上,今天写在博客上.) 今天看Java编程思想,看到这样一道代码 //: OrderOfIniti ...

  9. #Java编程思想笔记(一)——static

    Java编程思想笔记(一)--static 看<Java编程思想>已经有一段时间了,一直以来都把笔记做在印象笔记上,今天开始写博客来记录. 第一篇笔记来写static关键字. static ...

随机推荐

  1. QQ去除未读状态的动画

    QQ去除未读状态的动画 by 伍雪颖 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcmFpbmxlc3Zpbw==/font/5a6L5L2T/fonts ...

  2. AngularJS中自定义过滤器

    AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { ...

  3. SpringUtils

    import org.springframework.beans.BeansException; import org.springframework.context.ApplicationConte ...

  4. python测试开发django-22.admin首页和title修改

    前言 django的admin首页默认显示的"Django 管理",title显示的是"Django 站点管理员",这里的文案内容可以修改成自己项目的后台页面内 ...

  5. Linux 内核网络协议栈 ------sk_buff 结构体 以及 完全解释 (2.6.16)

    转自:http://blog.csdn.net/shanshanpt/article/details/21024465 在2.6.24之后这个结构体有了较大的变化,此处先说一说2.6.16版本的sk_ ...

  6. mysql慢查询监控及sql优化

    在my.ini添加如下代码,即可查看那个sql语句执行慢了 log-slow-queries = d:/log/mysql-slow.log long_query_time = 1 打开日志 log ...

  7. [转]最完美解决Nginx部署ThinkPHP项目的办法

    From : http://www.htmltec.com/archives/302 网上通用解决方法的配置如下: server { location / { index index.htm inde ...

  8. javascript中使用new与不使用实例化对象的区别

    我们先来看个实例 function Me(name,age,job){ this.name = name; this.age = age; this.job = job; } 请问这以下两种实例化对象 ...

  9. Hadoop集群WordCount运行详解(转)

    原文链接:Hadoop集群(第6期)_WordCount运行详解 1.MapReduce理论简介 1.1 MapReduce编程模型 MapReduce采用"分而治之"的思想,把对 ...

  10. Go语言之进阶篇http服务器获取客户端的一些信息

    1.http服务器获取客户端的一些信息 示例: package main import ( "fmt" "net/http" ) //w, 给客户端回复数据 / ...