1. التحليل الافتتاحي
مرحباً جميعاً! هل ما زلت تتذكر المقال السابق ----- بداية هذه السلسلة (تعليمي تطوير المكونات الإضافية JavaScript 1). يروي بشكل أساسي قصة "كيفية تطوير المكونات الإضافية في jQuery" ،
لذلك سنواصل اليوم رحلة تطوير المكونات الإضافية مع أسئلة الأمس. الأسئلة السابقة هي كما يلي:
(1) إذا كان اختيار تكنولوجيا المشروع واستبداله لهذه المكونات الإضافية ، فإنه يعتمد على آلية "jQuery" ، فسيتم استخدام المكونات الإضافية التي كتبناها من قبل (على افتراض أن jQuery غير مستخدم) ، كيفية إعادة تشكيلها؟
(2) إعادة إنشاء المنطق الرئيسي للمكونات الإضافية ، كيف سننظم ذلك؟
حسنًا ، دعنا نتعلم مقالة اليوم مع الأسئلة.
بادئ ذي بدء ، أنا لا أنكر "طريقة المكونات الإضافية jQuery" ، وثانياً ، نحتاج إلى تحليل المشكلة من وجهات نظر مختلفة ، مثل "JQuery Plug-in لها المزايا التالية":
(1) ضع جميع الكود في الإغلاق (وظيفة تنفيذ فورية). في هذا الوقت ، فإن الإغلاق يعادل النطاق الخاص. لا يمكن لـ External الوصول إلى المعلومات الداخلية ، ولن يكون هناك تلوث للمتغيرات العالمية.
(2) ، أ) تجنب التبعيات العالمية ؛ ب) تجنب أضرار الطرف الثالث ؛ ج) متوافقة مع مشغلي jQuery '$' و 'jQuery'.
إذن بأي طريقة سنقوم بتنظيم الكود ، وهي الفكرة الموجهة نحو الكائن (OOP)؟ أم يجب أن ننتقل إلى الفكرة القائمة على العملية؟ أم أنها مزيج من الاثنين؟ هاهاها ، استمر في المشاهدة. . . . . .
2. إعادة بناء مثال الأمس
فيما يلي جزء الكود المصدري من جزء JS الأمس:
نسخة الكود كما يلي:
(وظيفة ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({} ، $. fn.bigbear.defaults ، opts) ؛
إرجاع this.each (function () {
var elem = $ (this) ؛
elem.find ("span"). النص (opts ["title"]) ؛
$ .get (opts ["url"] ، وظيفة (البيانات) {
elem.find ("div"). النص (البيانات ["النص"]) ؛
}) ؛
}) ؛
} ؛
$ .fn.bigbear.defaults = {
العنوان: "هذا اختبار بسيط" ،
عنوان URL: "data.json"
} ؛
}) (jQuery) ؛
دعنا نحللها خطوة بخطوة:
أولاً ، حدد وظائف هذا البرنامج المساعد
(1) ، عرض معلومات نص العنوان التي حددناها.
(2) الحصول على معلومات المحتوى ديناميكيًا من خلال الوسائل غير المتزامنة.
على ما يرام! من السهل مناقشته إذا كانت المتطلبات واضحة. ليس من الصعب رؤية من الكود أعلاه أن المنطق فضفاض والتفكير القائم على العملية واضح ، وبالتالي فإن الخطوة الأولى هي وضع متطلباتنا الوظيفية في
تنظيم بفعالية بطريقة الطبقة. انظر إلى الكود الذي تم إعادة تمهيده على النحو التالي:
نسخة الكود كما يلي:
$ (function () {
$ ("#bb"). BigBear () ؛
}) ؛
(وظيفة ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({} ، $. fn.bigbear.defaults ، opts) ؛
إرجاع this.each (function () {
var elem = $ (this) ؛
var bb = new bigbear (elem ، opts) ؛
BB.GetElem (). الزناد ("البيانات") ؛
}) ؛
} ؛
$ .fn.bigbear.defaults = {
العنوان: "هذا اختبار بسيط" ،
عنوان URL: "data.json"
} ؛
}) (jQuery) ؛
وظيفة BigBear (Elem ، Opts) {
this.Elem = elem ؛
this.Opts = opts ؛
this.init () ؛
} ؛
var bbproto = bigbear.prototype ؛
bbproto.getelem = function () {
إرجاع هذا.
} ؛
bbproto.getopts = function () {
إرجاع هذا.
} ؛
bbproto.init = function () {
var that = هذا ؛
this.getelem (). on ("البيانات" ، الدالة () {
that._settitle (that.getopts () ["title"]) ؛
$ .get (that.getopts () ["url"] ، الدالة (النتيجة) {
that.getElem ().
}) ؛
}) ؛
} ؛
bbproto._settitle = function (text) {
this.getElem (). find ("span"). النص (النص) ؛
} ؛
هاهاها ، هل هناك الكثير من الكود؟ في الواقع ، تتمثل هذه الطريقة في النظر إلى المشكلة من منظور موجه نحو الكائن ، وتحليل المتطلبات الوظيفية أولاً ، ثم تصميم صفنا. على الرغم من أنه من المستحيل علينا تصميمه جيدًا في وقت واحد.
ومع ذلك ، فقد تغير منظور المشكلة ، وأصبح رمزنا أكثر قابلية للقراءة ، ويمكننا الحفاظ عليها بشكل أفضل ، بحيث يمكن تحقيق هدفنا.
ما يلي هو تنفيذ رمز المصدر ذي الصلة المقتطف من قسم "bootstrap" JS ، كما هو موضح أدناه:
ليس من الصعب أن نرى أن هناك أيضًا طرق تنفيذ مماثلة ، والتي تحافظ على المنطق الرئيسي للمكون الإضافي الخاص بنا من خلال الفئات.
(3) ، إضافة وظائف جديدة وتقديم فصول إضافية
الآن زاد الطلب ، ويجب أن يكون هناك بعض التغييرات في الخبرة ، وهناك تأثير "تحميل" عند تحميل البيانات.
يمكن أن تكون فكرة التنفيذ مثل هذا: اضبط النص على كلمة "تحميل بيانات ..." في منطقة المحتوى الأصلية ، ثم تقديم فئة جديدة ، على النحو التالي:
نسخة الكود كما يلي:
وظيفة Overlay () {
} ؛
var olproto = overlay.prototype ؛
olproto.show = function () {} ؛
olproto.hide = function () {} ؛
// لن أكتب التنفيذ المحدد
حسنًا ، طبقة القناع موجودة بالفعل ، كيف يمكننا دمجها الآن؟ نصل إليه في مجموعة ، على النحو التالي:
نسخة الكود كما يلي:
وظيفة BigBear (Elem ، Opts) {
this.Elem = elem ؛
this.Opts = opts ؛
this.overlay = تراكب جديد () ؛
this.init () ؛
} ؛
var bbproto = bigbear.prototype ؛
bbproto.getelem = function () {
إرجاع هذا.
} ؛
bbproto.getopts = function () {
إرجاع هذا.
} ؛
bbproto.init = function () {
var that = هذا ؛
var loadingText = "Data Loading ...." ؛
this.getelem (). on ("البيانات" ، الدالة () {
that._settitle (that.getopts () ["title"]) ؛
that.overlay.show () ؛
that.getElem ().
$ .get (that.getopts () ["url"] ، الدالة (النتيجة) {
that.overlay.hide () ؛
that.getElem ().
}) ؛
}) ؛
} ؛
bbproto._settitle = function (text) {
this.getElem (). find ("span"). النص (النص) ؛
} ؛
هذا فقط لنهاية وظائفنا. أعتقد أن المكون الإضافي المكتوب بهذه الطريقة أفضل بكثير من الإصدار الأول. بطبيعة الحال ، ليس هذا هو التنفيذ الأمثل ويجب أن يتم إعادة تمهيده باستمرار من التفاصيل ، ولكن هذه الطريقة هي طريقة اختيارية لتطوير المكونات الإضافية.
هنا هو الرمز الكامل:
نسخة الكود كما يلي:
$ (function () {
$ ("#bb"). BigBear () ؛
}) ؛
(وظيفة ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({} ، $. fn.bigbear.defaults ، opts) ؛
إرجاع this.each (function () {
var elem = $ (this) ؛
var bb = new bigbear (elem ، opts) ؛
BB.GetElem (). الزناد ("البيانات") ؛
}) ؛
} ؛
$ .fn.bigbear.defaults = {
العنوان: "هذا اختبار بسيط" ،
عنوان URL: "data.json"
} ؛
}) (jQuery) ؛
وظيفة BigBear (Elem ، Opts) {
this.Elem = elem ؛
this.Opts = opts ؛
this.overlay = تراكب جديد () ؛
this.init () ؛
} ؛
var bbproto = bigbear.prototype ؛
bbproto.getelem = function () {
إرجاع هذا.
} ؛
bbproto.getopts = function () {
إرجاع هذا.
} ؛
bbproto.init = function () {
var that = هذا ؛
var loadingText = "Data Loading ...." ؛
this.getelem (). on ("البيانات" ، الدالة () {
that._settitle (that.getopts () ["title"]) ؛
that.overlay.show () ؛
that.getElem ().
$ .get (that.getopts () ["url"] ، الدالة (النتيجة) {
that.overlay.hide () ؛
that.getElem ().
}) ؛
}) ؛
} ؛
bbproto._settitle = function (text) {
this.getElem (). find ("span"). النص (النص) ؛
} ؛
وظيفة Overlay () {
} ؛
var olproto = overlay.prototype ؛
olproto.show = function () {} ؛
olproto.hide = function () {} ؛
// لن أكتب التنفيذ المحدد
هذا المقال قد انتهى الآن. هل لديك فهم جديد لتطوير المكونات في JavaScript؟