يقدم
تسمى بعض الأوضاع التي قدمناها في هذه المقالة وضع التهيئة ووضع الأداء ، والذي يستخدم بشكل أساسي للتهيئة وتحسين الأداء. تم ذكر بعض الأوضاع من قبل ، لذلك هنا مجرد ملخص.
الوظائف التي يتم تنفيذها على الفور
في الفصل الرابع من هذه السلسلة ، "تعبيرات الوظائف التي تسمى الآن" ، وصفنا وظائف مماثلة بالتفصيل. هنا سنقدم فقط مثالين بسيطين لتلخيصهما.
نسخة الكود كما يلي:
// بعد إعلان الوظيفة ، قم بتنفيذ الوظيفة على الفور
(وظيفة () {
console.log ("احترس!") ؛
} ()) ؛
// يمكن إعلان الوظائف التي تم الإعلان عنها بهذه الطريقة على الفور
!وظيفة () {
console.log ("احترس!") ؛
} () ؛
// الطريقة التالية على ما يرام أيضًا
~ function () { / * code * /} () ؛
-function () { / * code * /} () ؛
+function () { / * code * /} () ؛
تهيئة الكائن التي تم تنفيذها على الفور
يعني هذا النمط أنه عند إعلان كائن ما (وليس وظيفة) ، سيتم تنفيذ إحدى الطرق في الكائن على الفور لأداء أعمال التهيئة. عادة ، يمكن استخدام هذا النمط في الكود الذي تم تنفيذه في وقت واحد.
نسخة الكود كما يلي:
({
// هنا يمكنك تحديد الثوابت وتعيين قيم أخرى
MaxWidth: 600 ،
Maxheight: 400 ،
// بالطبع ، يمكنك أيضًا تحديد طرق الأداة المساعدة
gimmemax: function () {
إرجاع this.maxwidth + "x" + this.maxHeight ؛
} ،
// التهيئة
init: function () {
console.log (this.gimmemax ()) ؛
// المزيد من الكود ...
}
}). init () ؛ // يبدأ هذا التهيئة
تهيئة الفرع
يشير تهيئة الفرع إلى تهيئة الرموز المختلفة وفقًا للشروط المختلفة (السيناريوهات) ، والتي هي ما يسمى بتعيين البيان الشرطي. قبل ذلك ، عندما كنا نفعل معالجة الأحداث ، استخدمنا عادة رموز مثل ما يلي:
نسخة الكود كما يلي:
var utils = {
AddListener: Function (EL ، type ، fn) {
if (typeof window.adDeventListener === 'function') {
el.addeventListener (النوع ، fn ، false) ؛
} آخر إذا (typeof document.attachevent! == 'undefined') {
el.attachevent ('on' + type ، fn) ؛
} آخر {
el ['on' + type] = fn ؛
}
} ،
الإزالة: وظيفة (EL ، type ، fn) {
}
} ؛
دعونا نحسنه. أولاً ، نحتاج إلى تحديد واجهتين ، أحدهما لإضافة مقبض الحدث والآخر لإزالة مقبض الحدث. الرمز كما يلي:
نسخة الكود كما يلي:
var utils = {
AddListener: NULL ،
الإزالة: فارغة
} ؛
رمز التنفيذ كما يلي:
نسخة الكود كما يلي:
if (typeof window.adDeventListener === 'function') {
utils.addlistener = function (el ، type ، fn) {
el.addeventListener (النوع ، fn ، false) ؛
} ؛
} آخر إذا (typeof document.attachevent! == 'undefined') {// ie
utils.addlistener = function (el ، type ، fn) {
el.attachevent ('on' + type ، fn) ؛
} ؛
utils.removelistener = function (el ، type ، fn) {
el.detachevent ('on' + type ، fn) ؛
} ؛
} آخر {// متصفحات قديمة أخرى
utils.addlistener = function (el ، type ، fn) {
el ['on' + type] = fn ؛
} ؛
utils.removelistener = function (el ، type ، fn) {
el ['on' + type] = null ؛
} ؛
}
أليس من المريح للغاية الاستخدام؟ الرمز أكثر أناقة بكثير.
وظائف الانتعاش الذاتي
بشكل عام ، يتم إعادة كتابة رمز الوظيفة الذي يحمل نفس الاسم داخل الوظيفة ، مثل:
نسخة الكود كما يلي:
var scareme = function () {
تنبيه ("بوو!") ؛
scarme = function () {
تنبيه ("مزدوج بوو!") ؛
} ؛
} ؛
هذا النوع من الكود مربك للغاية. دعونا أولاً نلقي نظرة على نتائج تنفيذ المثال:
نسخة الكود كما يلي:
// 1. أضف سمات جديدة
scarme.Property = "بشكل صحيح" ؛
// 2. Scareme يعين قيمة جديدة
var prank = scarme ؛
// 3. اتصل كطريقة
var spooky = {
بوو: سكاري
} ؛
// اتصل باسم متغير جديد
مقلب()؛ // "بوو!"
مقلب()؛ // "بوو!"
console.log (Prank.Property) ؛ // "على وجه صحيح"
// اتصل باستخدام الطريقة
spooky.boo () ؛ // "بوو!"
spooky.boo () ؛ // "بوو!"
console.log (spooky.boo.property) ؛ // "على وجه صحيح"
من خلال نتيجة التنفيذ ، يمكن العثور على أن تعيين الوظيفة إلى متغير جديد (أو طريقة داخلية) ، لا يقوم الرمز بتنفيذ رمز Scarme المحمّل ، والمثال التالي هو عكس ذلك تمامًا:
نسخة الكود كما يلي:
// استخدم وظائف الانطلاق الذاتي
Scarme () ؛ // مزدوج بوو!
Scarme () ؛ // مزدوج بوو!
console.log (Scareme.Property) ؛ // غير محدد
عند استخدام هذا النموذج ، يجب أن تكون حذراً للغاية ، وإلا فقد تكون النتيجة الفعلية مختلفة عن النتيجة التي تتوقعها. بالطبع ، يمكنك أيضًا استخدام هذا الخاص للقيام ببعض العمليات الخاصة.
تحسين الذاكرة
يستخدم هذا النمط بشكل أساسي خصائص السمة للدالة لتجنب عدد كبير من الحسابات المتكررة. نموذج الكود المعتاد كما يلي:
نسخة الكود كما يلي:
var myfunc = function (param) {
if (! myfunc.cache [param]) {
var result = {} ؛
// ... عملية معقدة ...
myfunc.cache [param] = النتيجة ؛
}
إرجاع myfunc.cache [param] ؛
} ؛
// تخزين ذاكرة التخزين المؤقت
myfunc.cache = {} ؛
ومع ذلك ، هناك مشكلة في الكود أعلاه. إذا كانت المعلمة التي تم تمريرها هي tostring أو بعض الطرق الشائعة المشابهة للكائن ، فستحدث المشكلة. في هذا الوقت ، تحتاج إلى استخدام طريقة HasOwnproperty الأسطورية ، والرمز كما يلي:
نسخة الكود كما يلي:
var myfunc = function (param) {
if (! myfunc.cache.hasownproperty (param)) {
var result = {} ؛
// ... عملية معقدة ...
myfunc.cache [param] = النتيجة ؛
}
إرجاع myfunc.cache [param] ؛
} ؛
// تخزين ذاكرة التخزين المؤقت
myfunc.cache = {} ؛
أو إذا قمت بالمرور في معلمات متعددة ، فيمكنك استخدام طريقة stishify من JSON لإنتاج قيمة Cachekey للتخزين. الرمز كما يلي:
نسخة الكود كما يلي:
var myfunc = function () {
var cachekey = json.stringify (array.prototype.slice.call (الوسائط)) ،
نتيجة؛
if (! myfunc.cache [cachekey]) {
النتيجة = {} ؛
// ... عملية معقدة ...
myfunc.cache [cachekey] = النتيجة ؛
}
إرجاع myfunc.cache [cachekey] ؛
} ؛
// تخزين ذاكرة التخزين المؤقت
myfunc.cache = {} ؛
أو معلمات متعددة ، يمكنك أيضًا استخدام ميزة الوسائط.
نسخة الكود كما يلي:
var myfunc = function (param) {
var f = وسيطات. callee ،
نتيجة؛
if (! f.cache [param]) {
النتيجة = {} ؛
// ... عملية معقدة ...
f.cache [param] = النتيجة ؛
}
إرجاع f.cache [param] ؛
} ؛
// تخزين ذاكرة التخزين المؤقت
myfunc.cache = {} ؛
لخص
لا حاجة لتلخيص ، فقط انظر إلى الرمز بعناية