2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

?前言： javascript 項(xiàng)目中原生態(tài)的語(yǔ)法用得比較少了，都是基于jQuery開發(fā)，但在移動(dòng)項(xiàng)目中還是比較麻煩的。想整理個(gè)簡(jiǎn)單點(diǎn)的框架。這篇文章是基于 javascript dom 高級(jí)程序設(shè)計(jì)這本書來(lái)討論的，這本書在框架開發(fā)方面還是比較好的。javascript 框架能夠便于利用，最好能像C# Java 這類面向?qū)ο笳Z(yǔ)言來(lái)組織代碼和復(fù)用功能模塊，因此這里說(shuō)說(shuō)javascript面向?qū)ο蟮囊恍╅_發(fā)方式。例如命名空間，對(duì)象，對(duì)象的繼承等等。

? ? 1. 命名空間

? ? 一般用到命名空間，主要是為了便于程序的組織，分模塊；同時(shí)可以解決大量javascript代碼帶來(lái)的潛在的javascript對(duì)象沖突。當(dāng)然，這里并不是一種真正的命名空間，其實(shí)質(zhì)還是js對(duì)象。例如： (function () {//命名空間if (!window.TScript) { window['TScript'] = {} }function $() {var elements = new Array();for (var i = 0; i <= arguments.length; i++) {var element = arguments[i];if (typeof element == 'string') {element = document.getElementById(element);}if (arguments.length == 1) {return element;}elements.push(element);}return elements;};window['TScript']['$'] = $; )();

? ?訪問的時(shí)候就可以直接使用 TScript.$('id')。獲取javascript對(duì)象了，這樣TScript實(shí)際上就是一個(gè)命名空間。但是是否會(huì)覺得 TScript.$ 這樣每次都加個(gè)TScript太羅嗦，可以這樣：

(function($){// $("id") })(TScript.$);

這樣通過立即執(zhí)行函數(shù)來(lái)簡(jiǎn)化操作，就像通常開發(fā)jQuery 插件一樣，(function($){ //采用jQuery對(duì)象 })(jQuery);

這里在網(wǎng)上收集到兩種命名空間的方式，實(shí)際上是構(gòu)建一個(gè)函數(shù)，來(lái)注冊(cè)命名空間可以復(fù)用，比較方便。

1. YUI的。

//YUI命名空間的實(shí)現(xiàn)方法 var YAHOO = window.YAHOO || {}; YAHOO.namespace = function(ns) {if (!ns || !ns.length) {return null;}var levels = ns.split(".");var nsobj = YAHOO;//如果申請(qǐng)的命名空間是在YAHOO下的，則必須忽略它，否則就成了YAHOO.YAHOO了for (var i=(levels[0] == "YAHOO") ? 1 : 0; i<levels.length; ++i) {//如果當(dāng)前命名空間下不存在，則新建一個(gè)關(guān)聯(lián)數(shù)組。nsobj[levels[i]] = nsobj[levels[i]] || {};nsobj = nsobj[levels[i]];}//返回所申請(qǐng)命名空間的一個(gè)引用；return nsobj; }; 2. 不知名的。主要是可以做成com.oschina.* 這種java包風(fēng)格的。 Namespace = new Object();Namespace.register = function (namespace) {var nsArray = namespace.split('.');var sEval = "";var sNs = "";for (var i = 0; i < nsArray.length; i++) {if (i != 0) {sNs += ".";}sNs += nsArray[i];sEval += "if(typeof(" + sNs + ")=='undefined')" + sNs + "=new Object();";}if (sEval != "") {eval(sEval);}};

2.對(duì)象及繼承

前面提到j(luò)avascript里的一切都是對(duì)象，其實(shí)這里說(shuō)對(duì)象是構(gòu)建一個(gè)類似java 的構(gòu)造函數(shù)：

function Apple(color) {this.color = color; } var apple = new Apple("red"); 這里總結(jié)一下比較常用的對(duì)象繼承方式，在js里說(shuō)繼承主要是共用一些數(shù)據(jù)，減少內(nèi)存。通常采用原型來(lái)實(shí)現(xiàn)propertype。例如： function Fruit() { }Fruit.prototype.des = "水果";function Apple(area) {this.area = area;}var F = function () { }; //這里采用空對(duì)象做中介，實(shí)現(xiàn)繼承F.prototype = Fruit.prototype;Apple.prototype = new F();Apple.prototype.constructor=Apple

這里為什么用空對(duì)象做中介，因?yàn)槿绻苯覣pple.prototype=Fruit.prototype。這樣它們共用的是同一份數(shù)據(jù)，如果對(duì)Apple.prototype的修改會(huì)反映到Fruit上去。

YUI做了一個(gè)封裝，類似命名空間一樣：

function extend(Child, Parent) {var F = function () { };F.prototype = Parent.prototype;Child.prototype = new F();Child.prototype.constructor = Child;Child.uber = Parent.prototype; //上級(jí)父對(duì)象的引用 } 還有一種jquery的拷貝賦值的方式繼承：

//jquery 拷貝繼承，將父對(duì)象的所有屬性拷貝賦值給子對(duì)象function deepCopy(p, c) {var c = c || {};for (var i in p) {if (typeof p[i] === 'object') {//針對(duì)屬性是對(duì)象的需要遞歸拷貝屬性，深拷貝c[i] = (p[i].constructor === Array) ? [] : {};deepCopy(p[i], c[i]);} else {c[i] = p[i];}}return c;}var Apple = deepCopy(Fruit);

3. 關(guān)于this

可以一句話來(lái)說(shuō)明下：this關(guān)鍵字引用的是包含它的函數(shù)作為某個(gè)對(duì)象的方法被調(diào)用時(shí)的那個(gè)對(duì)象。

我們知道在js腳本里面，所有的成員，包括變量，函數(shù)都是windows是對(duì)象的成員。那么在下面的例子中：

value = "window";function testThis() {this.value = "testThis";}testThis();alert(value);// testThis; 這里函數(shù)直接調(diào)用，那么調(diào)用函數(shù)的對(duì)象是window ，因此函數(shù)內(nèi)的this指的是window。

那么下面：

value = "window";function testThis() {this.value = "testThis";}var obj = new testThis();alert(obj.value);//testThisalert(value);//window 第一次彈出的是testThis，這是由于此時(shí)testThis函數(shù)作為對(duì)象來(lái)訪問，那么函數(shù)內(nèi)的this就表示實(shí)例化的這個(gè)obj對(duì)象，詳相當(dāng)于在函數(shù)內(nèi)部將value覆蓋了。而函數(shù)外部的value沒有影響，仍然作為window的成員，所以第二次彈出window。

轉(zhuǎn)載于:https://my.oschina.net/congqian/blog/135831

總結(jié)

以上是生活随笔為你收集整理的javascript里的面向对象的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。