แนะนำ
บทความนี้ส่วนใหญ่แนะนำเทคนิคบางอย่างที่ใช้ในฟังก์ชั่น (ตอนที่ 1) การใช้คุณสมบัติฟังก์ชั่นคุณสามารถเขียนโค้ดที่น่าสนใจมากมาย บทความนี้ส่วนใหญ่ประกอบด้วย: โหมดการโทรกลับ, วัตถุการกำหนดค่า, ฟังก์ชั่นการส่งคืน, โปรแกรมการแจกจ่ายและการแกงกะหรี่
ฟังก์ชั่นการโทรกลับ
ใน JavaScript เมื่อฟังก์ชัน A เป็นหนึ่งในพารามิเตอร์ของฟังก์ชั่นอื่น B ฟังก์ชัน A เรียกว่าฟังก์ชันการเรียกกลับนั่นคือ A สามารถดำเนินการได้ภายในระยะเวลาของฟังก์ชัน B (ทั้งเริ่มต้นกลางและสิ้นสุด)
ตัวอย่างเช่นมีฟังก์ชั่นที่สร้างโหนด
การคัดลอกรหัสมีดังนี้:
var complexComputation = function () { /* จัดการภายในและส่งคืนโหนด* /};
มีการประกาศฟังก์ชั่น FindNodes สำหรับการค้นหาโหนดทั้งหมดจากนั้นเรียกใช้รหัสผ่านการโทรกลับ
การคัดลอกรหัสมีดังนี้:
var findNodes = function (callback) {
var nodes = [];
var node = complexComputation ();
// หากมีฟังก์ชั่นการโทรกลับให้ดำเนินการ
if (typeof callback === "function") {
การโทรกลับ (โหนด);
-
Nodes.push (โหนด);
โหนดกลับ;
-
เกี่ยวกับคำจำกัดความของการโทรกลับเราสามารถกำหนดล่วงหน้าเพื่อใช้:
การคัดลอกรหัสมีดังนี้:
// กำหนดโทรกลับ
var hide = function (node) {
node.style.display = "ไม่มี";
-
// ค้นหาโหนดและซ่อนโหนดทั้งหมด
var hiddennodes = findNodes (ซ่อน);
นอกจากนี้คุณยังสามารถใช้คำจำกัดความที่ไม่ระบุชื่อได้โดยตรงเมื่อโทรดังนี้:
การคัดลอกรหัสมีดังนี้:
// ใช้ฟังก์ชั่นที่ไม่ระบุชื่อเพื่อกำหนดการโทรกลับ
var blockNodes = findNodes (ฟังก์ชั่น (โหนด) {
node.style.display = 'block';
-
สิ่งที่ใช้กันมากที่สุดคือการเรียกใช้วิธี Ajax ของ JQuery โดยการกำหนดการโทรกลับเมื่อเสร็จแล้วเราสามารถดำเนินการต่อไปได้เมื่อการโทร AJAX สำเร็จหรือล้มเหลว รหัสมีดังนี้ (รหัสนี้ขึ้นอยู่กับ jQuery เวอร์ชัน 1.8):
การคัดลอกรหัสมีดังนี้:
var menuid = $ ("ul.nav"). ก่อน (). attr ("id");
คำขอ var = $ .ajax ({
URL: "script.php"
ประเภท: "โพสต์",
ข้อมูล: {id: menuid}
ประเภทข้อมูล: "html"
-
// การประมวลผลการโทรกลับเมื่อการโทรสำเร็จ
request.done (ฟังก์ชั่น (msg) {
$ ("#log"). html (msg);
-
// การประมวลผลการโทรกลับเมื่อการโทรล้มเหลว
request.fail (ฟังก์ชั่น (jqxhr, textstatus) {
การแจ้งเตือน ("คำขอล้มเหลว:" + textstatus);
-
วัตถุการกำหนดค่า
หากพารามิเตอร์ของฟังก์ชัน (หรือวิธีการ) มีพารามิเตอร์เดียวและพารามิเตอร์เป็นตัวอักษรวัตถุเราเรียกรูปแบบนี้ว่ารูปแบบวัตถุการกำหนดค่า ตัวอย่างเช่นรหัสต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
var conf = {
ชื่อผู้ใช้: "Shichuan"
ครั้งแรก: "Chuan",
สุดท้าย: "Shi"
-
addperson (conf);
ใน Addperson คุณสามารถใช้ค่า CONF ที่ Will ซึ่งโดยทั่วไปใช้สำหรับการเริ่มต้นงาน ตัวอย่างเช่น AjaxSetup ใน jQuery ถูกนำไปใช้ในวิธีนี้:
การคัดลอกรหัสมีดังนี้:
// ตั้งค่าเริ่มต้นล่วงหน้า
$ .ajaxsetup ({
URL: "/xmlhttp/"
ทั่วโลก: เท็จ
ประเภท: "โพสต์"
-
// จากนั้นโทรอีกครั้ง
$ .ajax ({data: myData});
นอกจากนี้ปลั๊กอิน jQuery จำนวนมากยังมีรูปแบบของการส่งพารามิเตอร์นี้ แต่พวกเขายังไม่สามารถส่งได้ เมื่อพวกเขาไม่ผ่านค่าเริ่มต้นจะถูกใช้
ฟังก์ชันส่งคืน
การส่งคืนฟังก์ชั่นหมายถึงฟังก์ชั่นใหม่ที่สร้างขึ้นอย่างยืดหยุ่นตามเงื่อนไขเฉพาะเมื่อค่าส่งคืนของฟังก์ชั่นหนึ่งเป็นฟังก์ชันอื่นหรือฟังก์ชั่นใหม่ถูกสร้างขึ้นอย่างยืดหยุ่นตามเงื่อนไขเฉพาะ รหัสตัวอย่างมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var setup = function () {
console.log (1);
return function () {
console.log (2);
-
-
// เรียกฟังก์ชันการตั้งค่า
var my = setup (); // เอาท์พุท 1
ของฉัน(); // เอาท์พุท 2
// หรือคุณสามารถเรียกได้โดยตรง
การตั้งค่า () () ();
หรือคุณสามารถใช้คุณสมบัติการปิดเพื่อบันทึกหมายเลขตัวนับส่วนตัวในฟังก์ชั่นการตั้งค่าและเพิ่มตัวนับโดยการโทรแต่ละครั้ง รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var setup = function () {
count var = 0;
return function () {
ส่งคืน ++ นับ;
-
-
// การใช้งาน
var next = setup ();
ต่อไป(); // return 1
ต่อไป(); // return 2
ต่อไป(); // return 3
ใช้งานได้
แอปพลิเคชันบางส่วนที่นี่คือการแยกพารามิเตอร์ที่เข้ามา บางครั้งชุดการดำเนินการอาจมีหนึ่งหรือหลายพารามิเตอร์เหมือนกันเสมอ จากนั้นเราสามารถกำหนดฟังก์ชันบางส่วนก่อนจากนั้นเรียกใช้ฟังก์ชันนี้ (พารามิเตอร์ที่แตกต่างกันที่เหลือจะถูกส่งผ่านในระหว่างการดำเนินการ)
ตัวอย่างเช่นรหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
var partialany = (ฟังก์ชั่น (APS) {
// ฟังก์ชั่นนี้เป็นผลมาจากการดำเนินการนิพจน์ฟังก์ชั่นของคุณเองและถูกกำหนดให้กับตัวแปร Partialany
ฟังก์ชั่น func (fn) {
var argsorig = aps.call (อาร์กิวเมนต์, 1);
return function () {
var args = []
argspartial = aps.call (อาร์กิวเมนต์),
i = 0;
// ชุดพารามิเตอร์ดั้งเดิมทั้งหมดของตัวแปร
// ถ้าพารามิเตอร์เป็น partialany._ ตัวยึดตัวยึดให้ใช้ค่าที่สอดคล้องกับพารามิเตอร์ฟังก์ชันถัดไป
// มิฉะนั้นให้ใช้ค่าในพารามิเตอร์ดั้งเดิม
สำหรับ (; i <argsorig.length; i ++) {
args [i] = argsorig [i] === func._
- argspartial.shift ()
: Argsorig [i];
-
// หากมีพารามิเตอร์พิเศษใด ๆ ให้เพิ่มไปที่จุดสิ้นสุด
return fn.apply (นี่, args.concat (argspartial));
-
-
// สำหรับการตั้งค่าตัวยึดตำแหน่ง
func._ = {};
คืน Func;
}) (array.prototype.slice);
วิธีใช้เป็นดังนี้:
การคัดลอกรหัสมีดังนี้:
// กำหนดฟังก์ชั่นการประมวลผล
ฟังก์ชั่น hex (r, g, b) {
ส่งคืน '#' + r + g + b;
-
// กำหนดฟังก์ชันบางส่วนใช้พารามิเตอร์แรกของ hex เป็นค่าพารามิเตอร์ที่ไม่เปลี่ยนแปลง ff
var redmax = partialany (hex, 'ff', partialany._, partialany._);
// วิธีการโทรของฟังก์ชั่นใหม่ Redmax มีดังนี้และจำเป็นต้องมีพารามิเตอร์เพียง 2 ตัวเท่านั้น:
console.log (redmax ('11 ',' 22 ')); // "#ff1122"
หากคุณคิดว่า partialany._ ยาวเกินไปคุณสามารถใช้ __ แทน
การคัดลอกรหัสมีดังนี้:
var __ = partialany._;
var greenmax = partialany (hex, __, 'ff');
console.log (Greenmax ('33 ',' 44 '));
var bluemax = partialany (hex, __, __, 'ff');
console.log (bluemax ('55 ',' 66 '));
var magentamax = partialany (hex, 'ff', __, 'ff');
console.log (Magentamax ('77 '));
ด้วยวิธีนี้มันจะง่ายกว่ามาก
การแกงกะหรี่
Currying เป็นคุณสมบัติของการเขียนโปรแกรมที่ใช้งานได้โดยแปลงการประมวลผลของพารามิเตอร์หลายตัวเป็นการประมวลผลของพารามิเตอร์เดียวคล้ายกับการเรียกโซ่
มายกตัวอย่างฟังก์ชั่นเพิ่มง่ายๆ:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่นเพิ่ม (x, y) {
var oldx = x, oldy = y;
if (typeof oldy === "undefined") {// บางส่วน
ฟังก์ชั่น return (newy) {
กลับ oldx + newy;
-
-
ส่งคืน x + y;
-
วิธีนี้มีหลายวิธีในการโทรเช่น:
การคัดลอกรหัสมีดังนี้:
// ทดสอบ
typeof add (5); // "การทำงาน"
เพิ่ม (3) (4); // 7
// สิ่งนี้เป็นไปได้
var add2000 = เพิ่ม (2000);
Add2000 (10); // 2010
ถัดไปเรามากำหนดฟังก์ชั่นการแกงกะหรี่ทั่วไป:
การคัดลอกรหัสมีดังนี้:
// พารามิเตอร์แรกคือฟังก์ชันที่จะใช้และพารามิเตอร์ที่สองคือจำนวนขั้นต่ำของพารามิเตอร์ที่จะส่งผ่าน
ฟังก์ชั่นแกง (func, minargs) {
if (minargs == undefined) {
minargs = 1;
-
ฟังก์ชั่น funcwithargsfrozen (frozenargs) {
return function () {
// การประมวลผลการเพิ่มประสิทธิภาพหากไม่มีพารามิเตอร์เมื่อโทรกลับฟังก์ชันเอง
var args = array.prototype.slice.call (อาร์กิวเมนต์);
var newargs = frozenargs.cat (args);
if (newargs.length> = minargs) {
Return Func.apply (นี่คือ Newargs);
} อื่น {
ส่งคืน FuncWithArgsfrozen (Newargs);
-
-
-
ส่งคืน funcwithargsfrozen ([]);
-
ด้วยวิธีนี้เราสามารถกำหนดพฤติกรรมทางธุรกิจของเราได้ตามความประสงค์เช่นการกำหนดเพิ่มเติม:
การคัดลอกรหัสมีดังนี้:
var plus = curry (function () {
var result = 0;
สำหรับ (var i = 0; i <arguments.length; ++ i) {
ผลลัพธ์ += อาร์กิวเมนต์ [i];
-
ผลการกลับมา;
}, 2);
วิธีการใช้เป็นของจริงและหลากหลาย
การคัดลอกรหัสมีดังนี้:
บวก (3, 2) // การโทรปกติ
บวก (3) // ใช้ส่งคืนฟังก์ชัน (ค่าส่งคืนคือค่าพารามิเตอร์ 3+)
บวก (3) (2) // แอปพลิเคชันสมบูรณ์ (กลับไปที่ 5)
บวก () (3) () () (2) // return 5
บวก (3, 2, 4, 5) // สามารถรับพารามิเตอร์หลายตัว
บวก (3) (2, 3, 5) // ในทำนองเดียวกัน
ต่อไปนี้เป็นตัวอย่างของการลบ
การคัดลอกรหัสมีดังนี้:
var minus = curry (ฟังก์ชั่น (x) {
var result = x;
สำหรับ (var i = 1; i <arguments.length; ++ i) {
ผลลัพธ์ -= อาร์กิวเมนต์ [i];
-
ผลการกลับมา;
}, 2);
หรือถ้าคุณต้องการสลับลำดับพารามิเตอร์คุณสามารถกำหนดได้เช่นนี้
การคัดลอกรหัสมีดังนี้:
var flip = curry (ฟังก์ชั่น (func) {
กลับแกงกะหรี่ (ฟังก์ชั่น (a, b) {
คืน func (b, a);
}, 2);
-
สรุป
ฟังก์ชั่นใน JavaScript มีฟังก์ชั่นพิเศษมากมายและสามารถใช้คุณสมบัติการปิดและอาร์กิวเมนต์ของพารามิเตอร์เพื่อใช้เทคนิคต่าง ๆ มากมาย ในบทความถัดไปเราจะแนะนำเทคนิคการใช้ฟังก์ชันสำหรับการเริ่มต้นต่อไป