摘要:人手腿嘴大手長腿歐巴櫻桃小嘴我們知道造人是一個整體不可能先造手再造腿最后造嘴,我們現在的需求是一旦實例化人這個對象,該有的都有了。簡單修改以上代碼大手長腿歐巴櫻桃小嘴調用函數我們在每個中添加了將原有對象返回避免無返回值的函數執行完之后是。
高級javascript函數
js中沒有class的概念,我們可以使用function來模擬。
惰性載入函數例如我們通常使用以下的js代碼創建ajax:
function createXHR () { var xhr = null; try{ xhr = new XMLHttpRequest(); // FF、Opera、Safari、IE7 } catch(e) { handlerError(e); try{ xhr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ xhr = ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { xhr = null; } } } return xhr; } function handlerError (err) { var errXHR = err; // ... }
在現代的網絡技術中ajax技術早已是爛大街了,一個網頁通常包含很多的ajax——也就導致了頻繁創建xhr從而導致內存泄露。我們可以采用惰性載入函數來動態生成xhr。
/* 惰性函數(第二次生效) */ function createXHR () { var xhr = null; if (typeof XMLHttpRequest != "undefined") { xhr = new XMLHttpRequest(); createXHR = function () { return new XMLHttpRequest(); } } else { try{ xhr = new ActiveXObject("Msxml2.XMLHTTP"); createXHR = function () { return new ActiveXObject("Msxml2.XMLHTTP"); } } catch (e){ try{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); createXHR = function () { return new ActiveXObject("Microsoft.XMLHTTP"); } } catch (e){ createXHR = function () { return null; } } } } return xhr; }
我們調用以上的方法創建xhr,在運行第二次的時候就不用每次都判斷了,直接返回xhr。
函數柯里化函數的柯里化(curry)把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數,并且返回接受余下的參數而且返回結果的新函數的技術。,簡而言之就是兩個函數的參數的合并。例如:
function curry(fn) { var args = Array.prototype.slice.call(arguments,1); // 取curry的參數并將其變為數組[100] console.log(args); // [100] return function () { var innerArgs = Array.prototype.slice.call(arguments); // 匿名函數的參數列表[1,2] console.log(innerArgs); // [1,2] var finalArgs = args.concat(innerArgs); // 合并數組(參數合并) console.log(finalArgs); // [100,1,2] return fn.apply(null, finalArgs); } } function add(num1,num2,num3) { return num1 + num2 + num3; } var t = curry(add,100)(1,2); console.info(t);級聯函數
級聯就是一個對象將其所有有關的東西連接到了一起。如:以下的對象。
// 人:手、腿、嘴 function classPerson(){ this.hand = ""; this.foot = ""; this.leg = ""; } classPerson.prototype = { setHand:function(){ this.hand = "大手"; }, setLeg:function () { this.leg = "長腿歐巴"; }, setMouse:function () { this.mouse = "櫻桃小嘴"; } } var person = new classPerson(); person.setHand(); person.setMouse(); person.setLeg(); console.log(person);
我們知道造人是一個整體(不可能先造手、再造腿、最后造嘴),我們現在的需求是一旦實例化人這個對象,該有的都有了。
簡單修改以上代碼:
function classPerson(){ this.hand = ""; this.foot = ""; this.leg = ""; } classPerson.prototype = { setHand:function(){ this.hand = "大手"; return this; }, setLeg:function () { this.leg = "長腿歐巴"; return this; }, setMouse:function () { this.mouse = "櫻桃小嘴"; return this; } } var person = new classPerson(); person.setHand().setMouse().setLeg(); // 調用函數 console.log(person);
我們在每個setter中添加了return this將原有對象返回(避免無返回值的函數執行完之后是undefined)。我們可以驚奇的發現常用的JQuery的鏈式調用就是一種級聯調用:
$(‘#id’).show().hide().show().hide().show().hide();
一般來說//在js中表示的是單行注釋,但是一旦我們向斜杠中間加入了內容,例如:/TEST/它就神奇地變成了正則。
模式串的聲明var patt1 = new RegExp("hello"); // 方式一 var patt2 = /word/; // 方式二test方法
我們得到了模式串(模式對象)后可以調用該方法匹配字符串,返回指定值(true or false)。
var patt = /my/; var str = "this is my code..."; console.log(patt.test(str)); // trueexec方法
類似于字符串的match方法,但是當模式串指定為全局的時候兩者表現不同,沒有匹配返回null。
/hello/.exec("oh hello world"); // ["hello"]
以上兩個方法都是字符串對象本身的方法,下面的幾個方法是字符串中的有關正則的方法。
match方法模式匹配。函數原型是str.mattch(pattern),將匹配的結果以數組返回。
console.log("test 123".match(/test/g)); // [test]replace方法
字符串替換,注意:該方法生成一個新的臨時字符串副本。如圖所示:
split方法將字符串拆分成按照模式拆分成數組。
console.log("Hello world,hello everyone".split(/s+/)); // ["Hello", "world,hello", "everyone"] console.log("Hello world,hello everyone".split(" ")); // 等效于上面的方法正則的類型
/pattern/attributes
attributes是可選字符串,常用的屬性是“g”(全局匹配)、“i”(大小寫不敏感)和"m"(多行匹配)
console.log("Hello world,hello everyone".match(/hEllO/gi)); // 全局查找hello并忽略大小寫 ["Hello", "hello"]
在實際的開發中我們可以借助在線正則調試工具來調試我們的正則,其實里面內置了大量常用的正則。如果我們在開發中分析不出別人的正則的含義可以借助正則分析網站,將會以有限自動機圖解的方式顯示。
正則中的元字符正則中的元字符必須進行轉義處理:
( [ { ^ $ | ) ? * + .]}
需要注意的是正則有2種創建形式:字符串字面量和new RegExp()的方式.由于RegExp的構造函數是字符串,所以某些情況下需要進行雙重轉義.
__PROTO____proto__使得繼承變得更加容易:
function Super(){}; function Sub(){}; Sub.prototype.__proto__ = Super.prototype;
這是一個非常有用的特性,可以免去如下的工作:
借助中間構造器
無需引入第三方模塊來進行基于原型繼承的聲明
訪問器可以調用方法來定義屬性,如其名有:__defineGetter__、__defineSetter__。例如為Date對象定義一個ago的屬性,返回以自然語言描述的日期間隔(例如:某件事發生在3秒之前)。例如:
Date.prototype.__defineGetter__("ago",function(){ var diff = ((Date.now() - this.getTime()) / 1000) day_diff = Math.floor(diff / 86400) return day_diff == 0 && (diff < 60 && "just now" ) || diff < 120 && "1 minute ago" || diff < 3600 && Math.floor(diff / 60) + "minutes ago" || diff < 7200 && "1 hour ago" || diff < 86400 && Math.floor(diff / 3600) + "hours ago" || day_diff == 1 && "Yesterday" || diff < 7 && day_diff + " days ago" || Math.ceil(day_diff / 7) + " weeks ago" }) var d = new Date("12/12/1990") console.log(d.ago)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85968.html
摘要:把對象定義為無序屬性的集合,其屬性可以包含基本值對象或函數。接受兩個參數屬性所在的對象和要讀取其特性的屬性名返回的時其特性的對象例如讀高級程序設計這本書的第章面向對象的程序設計,我做了篇筆記。這是第一篇,后面還有兩篇,分別是封裝類和繼承。 ECMA-262把對象定義為:無序屬性的集合,其屬性可以包含基本值、對象或函數。所以,我們可以理解對象就是名值對的集合,名就是對象的每個屬性的名字,...
摘要:缺乏高級編程特性影響同樣深遠,社區發展的預處理器能夠有效緩解,,,殊途同歸,異軍突起,基本實現變量嵌套變量混合擴展和邏輯等。 前言 關注點分離(separation of concerns)原則多年來大行其道,實踐中一般將 HTML、CSS、JavaScript 分開編寫維護,早期框架 angularjs 即是如此,直到 React 爭議中問世,引領關注點混合趨勢,驅使開發者重新審視 ...
摘要:添加節點后,的新增節點父節點及以前的最后一個子節點的關系指針都會相應地得到更新。插入后成為最后一個子節點插入后成為第一個節點插入到最后一個子節點前面接受兩個參數,要插入的節點和要替換的節點只移除而非替換節點。 Node類型 nodeType以下是一些重要的nodeType的取值:1: 元素element2: 屬性attr3: 文本text8: 注釋comments9: 文檔docume...
摘要:前言今天和大家一起聊聊的推薦書籍,每一本都是精選,做前端開發的朋友們如果沒讀過,可以嘗試一下。如果怕麻煩,也可以關注曉舟報告,發送獲取書籍,四個字,就可以得到電子書的提取碼。 前言 今天和大家一起聊聊JavaScript的推薦書籍,每一本都是精選,做前端開發的朋友們如果沒讀過,可以嘗試一下。下面給大家簡單介紹了書的內容,還有讀書的方法,希望可以幫大家提升讀書效率。 一、《JavaScr...
摘要:從學習前端以來,屬性和特性已困惑我很久。注意啦,屬性和特性的一個關系出現了。以下除外屬性表明節點的類型。與之前了解到的特性用來描述屬性的行為并無出入。下面,我們一起來看看屬性和特性是如何訪問的。操作特性的方法主要有三個,分別是和。 從學習前端以來,屬性和特性已困惑我很久。今天使用jQuery時,又踩到了這個坑。于是下定決心,徹底搞懂它。 一、對象、屬性和特性的關系 先來看一下詞典的解釋...
閱讀 2959·2023-04-25 17:46
閱讀 3588·2021-11-25 09:43
閱讀 1092·2021-11-18 10:02
閱讀 3051·2021-10-14 09:43
閱讀 2767·2021-10-13 09:40
閱讀 1524·2021-09-28 09:35
閱讀 2184·2019-08-30 15:52
閱讀 3154·2019-08-30 14:06