纯粹JavaScript的整体概念思考

最近项目里的工作所用到的前端脚本比较多,这其中需要用一些开发好的插件,也需要配置、修改、添加一些脚本来完成特定的功能 。再通过Ajax以及相关表单和服务器交互。写了不少JavaScript代码,期间穿插着一些JQuery调用。亏得互联网的帮助,最终是迷迷糊糊的把特定任务完成了。为了弥补理论知识的不足,在W3C School里把JS部分的系统的学习了下。暂时不做专业的前端开发,所以前端方面的东西不会学的特别深。不过有一个整体概念之后,再需要完成相关的任务时,可以更有针对性,而且对自己的代码也更有信心。

一、JavaScript的特点

这是最重要的一点吧。从B/S应用整体来说,个人目前的认识不外乎是(仅涉及技术方面的):数据库(数据服务)+后台代码+前端页面。其中数据库、后台代码以及前端页面模板整个部署在服务器。而用户则通过WebBrower向服务器请求某个地址,服务器通过一系列的处理,存取数据啊,对数据的加工处理啊,根据前端页面模板对信息进行格式化处理啊,最终把回复给用户的信息以符合某种规则的的形式(对于仅仅用WebBrower默认处理来解析的,最常见的就是html形式了)返回给用户。然后就是浏览器按照html格式去解析这些信息,最终渲染为用户所浏览到的页面。

这个页面不是一张一层不变的图片,页面里的信息随时都有可能发生改变。这其中——

可能有需要服务器端来进行处理的,这就需要与服务器交互,服务器获取当前页面都某些信息,再回复某些信息给浏览器,浏览器重新渲染这些信息,整个页面刷新(或者通过其他方法,只刷新局部),页面发生某些改变。

不过,对于一些根本不需要和服务器发生交互的改变,可能仅仅需要浏览器完成某些功能,但是这些功能又不仅仅是html的渲染就能完成,可能需要改变html元素的值,但也有可能是完成一些html完成不了得功能,比如在浏览器上弹出一个对话框。

至此,JS独一无二的特点就来了:它不会运行在服务器,服务器已经有很成熟的后台语言在运行了。它也不会被渲染为浏览器的某个页面元素:html足够了。它通过在客户端运行,利用浏览器(正如一般的编程语言利用操作系统)来完成一些功能,一些仅仅依靠html无法实现的功能。至于要不要和服务器交互,它都能完成。

二、JavaScript的语法

1、它所处的位置:

最理所当然的,它是可以存在于当前页面的,但它要告诉浏览器它是JS,而不是html。所以js语句要放在<script type="javascript"></script>里。可以在<head>里,也可以在<body>里。

同样,js语句也可以放在单独的文件中。因为已经确定他是js文件了,所以不能在文件里用<script>把语句包裹起来。在需要引用的html页面里,添加对应的引用:<scritp type  src...>

2、JS面向过程部分

这一部分包括基本的变量声明、赋值、作用域、流程控制等。这些是我们用JS编程实现程序逻辑的基础——当然,和其他编程语言一样。

3、JS面向对象部分

这里的面向对象分两种来处理:

①:JS内置的对象,这个是重点,我们要完成的很大一部分功能都由这些内置的对象实现

最基本的,比如Date、string、Array等。

功能更强大的,则是JS专门用来处理DOM相关的对象,这或许是一开始最迷惑人的,因为作为一种面向对象语言,我们貌似没有声明任何实例,却能够无缘无故调用那么多方法。比如我们在js脚本的第一句来一个alert("hello"),这个alert是哪来的?这个方法我们并没有定义啊。从面向对象的角度来看,它必定是属于某个对象的,那么对象在哪?更重要的是,对象的实例在哪?

其实,当页面加载时,浏览器就已经为当前页面生成了一系列JS对象的实例,只不过我们不需要显式的去抓住这个实例。这些对象都是和当前页面相关的,即这些JS对象都是和Html元素相映射的。相映射,这个很重要,Html元素是html元素,JS变量是JS变量,二者明显不是同一种东西。但是通过DOM对象,我们可以把二者建立一种联系。或者说每一种html元素(从整个页面窗口到一个标记)都被JS设计为某种DOM对象,这样通过操作这些DOM对象,就可以实现对Html元素的控制。更确切的说,应该是可以对整个页面进行控制。当然,不仅仅是页面html元素相关,甚至是浏览器的某些操作,JS里的BOM对象(没有专门的区分,一般概括在DOM里)能完成对浏览器的相关操作。

一个简单的例子

<html>
    <head>
        <script type="javascript">
	    function ShowValue()
	    {
		var inputControl=(window).document.getElementbyId("nameTxt");
                (window).alert(inputControl.value);
	    }
        </script>
    </head>
    <body>
        <input type="text" id="nameTxt onclick="ShowValue()" />
    <body>
</html>

其实,要完成这个功能,最简单的语法是在input里,onclick="alert....",或者,稍微明显点的,是在JS的ShowValue方法里,直接alert(doucment....)。这里,就是想按照我们常规的面向对象语言的规则:
这里,最顶层的对象实例是window。它是在页面加载时浏览器自动创建的。通过它里面的document属性(当然同样是个对象),可以获取当前页面的映射模型。然后通过它的getElementById()方法来获取当前页面的html元素的映射(一个inputtext类型的实例)。通过这个实例的value来获取这个html元素的value属性(可读写)。然后通过调用window的alert方法,让浏览器弹出对话框来。
到这里,就会发现JS的语法和普通的面向对象语言没多大区别了。至少模式都是差不多的。只不过不同的是它是专门来应对html和浏览器的。所以,当我们需要用JS来完成一些功能时,思路就很清晰了:需要哪个对象的哪个方法来得到或者做些什么事?再用基本的面向过程部分的语句把整个逻辑串起来。基本上可以应付大多数任务,而对于一些需要自己定义的对象或者模板而言,其实也很简单。


②自定义对象:这个其实和一般编程语言没很大区别,只不过是可以用js里的object来实例化一个自己需要的任意实例,然后给他任意附属性。或者,通过一个创建一个function,里面通过this.定义对应的属性,当需要定义方法时,可以把this.method=someMethod;一个委托来完成。然后再someMethod里通过this即可知道是哪个实例的调用了。
这里引用w3c里的教学内容如下:
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
this.newlastname=newlastname
}
注意:方法只是依附于对象的函数而已。然后,我们需要编写 newlastname() 函数:
function newlastname(new_lastname)
{
this.lastname=new_lastname
}


Newlastname() 函数定义 person 的新的 lastname,并将之分配给 person。通过使用 “this.”,JavaScript 即可得知你指的 person 是谁。因此,现在你可以这样写:myMother.newlastname("Doe")。
三、深层次的内容:
一般来说,有了上面那些理解,再加上查询相关手册,基本上可以应对常见的JS编程任务了。而且个人感觉,对于不专注于做前端开发的人讲,这些作为JS基础,再去学学其他前端插件,应该足够了。不过,这些东西都还是表层引用而已,更深层次的一些东西,我想要涉及到html页面的生存周期,渲染过程,再加上JS的实现原理之类的东西了。这个,以后万一需要了再说吧。目前相对于个人而言,更迫切的是去搞搞css和Jquery之类的学习。毕竟广度还很不够哇。


 
 
 

猜你喜欢

转载自blog.csdn.net/FrancisLaw/article/details/7683169