لقد كنت أشكو مؤخرًا. يعلم الجميع أن الواجهة الأمامية على شبكة الإنترنت أصبحت ثقيلة جدًا مقارنة ببضع سنوات. سيتم استخراج مختلف أطر عمل JS ، والكائنات المختلفة ، والعديد من المشاريع ، وحدات عامة.
عرض واجهة المستخدم لهذه الوحدات هو نفسه ، والفرق هو منطق الخلفية. على سبيل المثال ، عندما نمارس أعمالًا في سفر الشركات ، عادةً ما يكون لدينا وحدة عامة JS من مركز التكلفة. يملأ العملاء مركز التكلفة هذا عند حجز تذاكر الهواء. يتم توزيع مركز التكلفة هذا على نهايات الحجز مثل الإنترنت والإنترنت والتطبيق ، وهو أيضًا مريح للتسوية الشهرية مع شركة العملاء في المرحلة اللاحقة.
نعلم أيضًا أنه بعد أن يصبح المشروع أكبر ومعقدًا ، و SOA ، تنشأ العديد من المشكلات. تمامًا مثل النظرية في الويب ، فإن جميع البيانات الأمامية غير قابلة للثقة ، وبالتالي فإن بيانات واجهة الفريق الآخر ليست هي نفسها. عندما كان المشروع شابًا ، لم يكن هذا غير واثق ، وسوف يسجل فقط سجلات عند الأخطاء المنطقية. نادراً ما يتم تسجيل العمليات التجارية العادية. بعد كل شيء ، تبدو سجلات المعلومات قبيحة ، وستستهلك عرض النطاق الترددي للخادم وأيضًا سحب أداء الويب.
لكن المشروع كبير. عندما تواجه خطأ غريبًا في المشروع في يوم من الأيام ، فإنك تعتمد على السجلات غير المكتملة وتتبع أخيرًا خط الواجهة سطرًا بالعين المجردة. ومع ذلك ، هناك الكثير من المعلمات ومن المستحيل استعادة بيانات معلمة الواجهة بدقة. ومع ذلك ، فأنت واثق بنسبة 100 ٪ من أنها بالتأكيد مشكلة العودة للواجهة ، ولكن لا يمكنك الحصول على الرسالة الكاملة. في هذا الوقت ، لا يمكنك العثور على مزود الواجهة. كنت عاجزًا في ذلك الوقت. سيكون من الرائع لو كنت تعتقد أنه سيكون من الأفضل الحصول على سجل في كل سطر.
بعد تعلم الدرس ، أصبح اتجاه سجلات التسجيل أكثر شيوعًا ، وفي النهاية حدث حدث كبير في بداية العام. قلت الكثير بطريقة مرتبكة أن الواجهة الخلفية على شبكة الإنترنت مثل هذا ، لذلك ألا نحتاج أيضًا إلى تسجيل سجلات في الواجهة الأمامية الحالية؟ نحن نعلم أنه نظرًا لأنها وحدة JS العامة ، يجب أن تكون هذه الوحدة قد غلفت بعض الطرق من تلقاء نفسها ، ومن المستحيل تمامًا السماح لبرامج الطرف الثالث بتشغيل العقد النصية الخاصة بها ، مثل ما يلي:
نسخة الكود كما يلي:
<!-الوحدة الثالثة->
الشركة: <type type = "text" id = "Company" value = "XXX Co. ، Ltd." />
اسم الموظف: <إدخال type = "text" id = "username" value = "Zhang San" />
<!-->
<script type = "text/javaScript">
// مركز التكلفة
var costcenter = (function () {
var company = (document.getElementById ("Company") || "") && document.getElementById ("Company"). value ؛
var username = (document.getElementById ("username") || "") && document.getElementById ("username"). value ؛
var result = {
getInfo: function () {
إرجاع {الشركة: الشركة ، اسم المستخدم: اسم المستخدم} ؛
} ،
التحقق من الصحة: وظيفة () {
Return Boolean (Company && اسم المستخدم) ؛
}
} ؛
نتيجة العودة
}) () ؛
</script>
من أجل تبسيط العمليات ، يوفر واجهة المستخدم التابعة لجهة خارجية عقد واجهة المستخدم لأسماء الشركات وأسماء الموظفين ، وتغلف فئة CostCenter لتوفير طرق القراءة. يمكن ملاحظة أن برنامجي المجدول يحتاج فقط إلى قراءة costcenter.getInfo ، والذي يلعب أيضًا دورًا في التغليف.
لكن المشكلة تحدث هنا. في المشروع الفعلي ، لا يمكن الحصول على القيمة في CostCenter لأسباب مختلفة. بالطبع ، قد يكون أيضًا خطأ في واجهة المستخدم المشتركة.
ولكن في ذلك الوقت لم تكن متأكدًا مما إذا كانت القيمة قد تم الحصول عليها بالفعل ، ولكن من المنطقي حتى إذا لم يتم الحصول على القيمة ، من حيث المبدأ لا يمكنك منع تقديم الطلب. لذلك من أجل تتبع الخطأ تمامًا ، كتبت فئة LogCenter Singleton لتسجيل السجل. عادة ما يكون هناك هذه الطريقة لاستخدام JS لتسجيل سجلات.
<1> ajax
من السهل التفكير في هذه الطريقة ، ولكن إذا كنت تستخدم XMLHTTPrequest الأصلي ، فأنت بحاجة إلى النظر في توافق المتصفح. ومع ذلك ، إذا كنت لا تحتاج إلى مواطن ، فأنت بحاجة إلى الاعتماد على أطر العمل الثالث ، مثل jQuery. ومع ذلك ، بعد كل شيء ، لا يزال هناك العديد من الشركات التي لا تستخدم jQuery ، لذلك يجب استخدام هذا وفقًا للاحتياجات الفعلية.
نسخة الكود كما يلي:
// مركز السجل
var logcenter = (function () {
var result = {
معلومات: وظيفة (العنوان ، الرسالة) {
// Ajax عملية
$ .get ("http://xxx.com" ، {"title": title ، "message": message} ، function () {
}، "بريد")؛
}
} ؛
نتيجة العودة
}) () ؛
<2> الصورة
يوجد كائن يسمى Image في DOM الخاص بنا ، حتى نتمكن من تعيين SRC ديناميكيًا لغرض طلب عنوان URL للخلفية ، وفي الوقت نفسه ، نحتاج إلى نقل معلومات العنوان والرسائل إلى عنوان URL. لا تحتاج هذه الطريقة الديناميكية إلى Image.SRC إلى النظر في مشكلات توافق المتصفح ، وهو أمر جيد للغاية.
نسخة الكود كما يلي:
// مركز السجل
var logcenter = (function () {
var result = {
معلومات: وظيفة (العنوان ، الرسالة) {
// Ajax عملية
$ .get ("http://xxx.com" ، {"title": title ، "message": message} ، function () {
}، "بريد")؛
} ،
info_image: function (title ، message) {
//صورة
var img = new image () ؛
img.src = "http://www.baidu.com؟title=" + title + "& message =" + message + "& temp =" + (Math.Random () * 100000) ؛
}
} ؛
نتيجة العودة
}) () ؛
ما سبق هو المحتوى الرئيسي لهذه المقالة ، وسنواصل مناقشته بتعمق في المستقبل