Js-beautify: نموذج "غير منسق" معطل ، "غير منسق" و "مضمّن" ليسوا متطابقين

تم إنشاؤها على ١٣ يناير ٢٠١٦  ·  6تعليقات  ·  مصدر: beautify-web/js-beautify

النهج الكامل الذي يتبعه js-beautify في تحديد ما يتم لفه مكسور من الناحية المفاهيمية ، إذا فهمته بشكل صحيح.

لنفترض أن لدي HTML التالي:

    <li>Install at least one Git client. <span class="tip">Recommended: <a

         href="https://www.sourcetreeapp.com/">SourceTree</a> (Windows, Mac)</span>all Git commands.</li>

لاحظ كل تلك المساحة الفارغة والأسطر الجديدة داخل سمات علامة <a> . إذا وضعت span كأحد عناصر unformatted ، فلن يغير js-beautify أي شيء! إنه يترك كل تلك المسافة البيضاء القبيحة!

من ناحية أخرى ، إذا قمت بإزالة span من عناصر unformatted ، فإن js-beautify يعطيني هذا:

    <li>Install at least one Git client.
        <span class="tip">Recommended: <a href="https://www.sourcetreeapp.com/">SourceTree</a> (Windows, Mac)</span>all Git commands.</li>

لاحظ أن js-beautify يضيف الآن سطرًا جديدًا قبل <span> ! هذا أيضًا غير صحيح تمامًا --- <span> عنصر صياغة مضمن ، ولا داعي للكسر هنا.

يبدو أن المشكلة هي أن js-beautify يستخدم فكرة "غير منسق" ليكون مكافئًا للعنصر "المضمن". هذا نهج خاطئ ولا يتطابق مع دلالات HTML / CSS !! إن فكرة ما إذا كان block vs inline متعامدة تمامًا مع ما إذا كان يجب تغليف العناصر.

يجب أن تحدد js-beautify ما إذا كان العنصر كتلة أم مضمنة. يجب أن تحتوي عناصر الكتلة على أسطر جديدة قبلها ؛ العناصر المضمنة لا ينبغي.

فكرة "غير منسق" هي مفهوم متميز. يجب أن يخبر js-beautify بتركه بمفرده ، بغض النظر عما إذا كان العنصر كتلة أو مضمنة.

كما هو الحال الآن ، لا توجد طريقة لإخبار js-beautify أن العنصر يجب ألا يكون له سطر جديد ، ومع ذلك يجب تنسيق محتوياته.

التصميم بأكمله معطل. الرجاء إصلاح هذه المشكلة الأساسية. (أو اشرح لي أنني مخطئ ، وأن js-beautify لا يخلط بين مفهومي "block / inline" و "formatted / unformatted".)

html enhancement

التعليق الأكثر فائدة

لست متأكدًا من أنك تحصل على ما أقوله. يجب تنسيق جميع العناصر! إنها فقط بعض العناصر المضمنة ، والبعض الآخر عبارة عن عناصر كتلة. هذا ما كان عليه الحال مع XML / HTML / CSS منذ عقدين من الزمن.

إذا كان عنصر كتلة ، فإنه ينشئ كتلة جديدة بصريًا. هذه الأشياء ، عند تنسيق شفرة مصدر HTML ، يكون لها دائمًا سطر جديد أمامها (سواء في الكود المصدري أو في العرض). لا يحتوي العنصر المضمن على سطر جديد قبله (سواء في التعليمات البرمجية المصدر أو في العرض). لكن هذا لا يعني أنه لا ينبغي تنسيق _contents_. (يعني ذلك أنه لا يجب إضافة أسطر جديدة لمحتوياته ، إلا إذا كنت تقوم بتغليف الأسطر.)

لذلك هذا ليس تعديل. هذا اعتراف بأن استخدامات js-beautify للنموذج بأكمله للتنسيق معطلة. (أنا لا أكون لئيمًا - أنا فقط أكون موضوعية ، وأحاول مساعدتك من خلال التوضيح.) أنت بحاجة للتمييز بين ثلاثة أشياء مختلفة:

  • "منسق" - هل تم تنسيق هذا العنصر؟ (بشكل افتراضي ، يجب تنسيق جميع العناصر ، ما لم يقم أحدهم بإيقافها.)
  • "حظر / عرض" - هل هذا عنصر كتلة أم عرض؟ إذا كان عنصر كتلة ، فيجب أن يحتوي على سطر جديد _prepended_ قبل علامة البداية ، ويجب أن يكون مسافة بادئة إلى مستوى المسافة البادئة الحالي. إذا لم يكن كذلك ، فلا ينبغي أن يكون هناك سطر جديد أمامه.
  • "الحاوية" - هل هذا الشيء يستخدم عادة فقط لاحتواء عناصر كتلة أخرى؟ إذا كان الأمر كذلك ، فيجب إنشاء سطر جديد _ بعد_ علامة البداية ، بعد علامة النهاية ، ويجب وضع مسافة بادئة للمحتويات عند مستوى مسافة بادئة جديدة. هذا هو الأكثر إثارة للجدل ، أي أن هذا سيختلف بشكل كبير حسب أذواق المستخدمين. أحد المرشحين الواضحين هو <ul> ؛ يجب وضع مسافة بادئة لمحتواه (مثل <li> ). سيرغب بعض الأشخاص في إضافة <p> إلى هذه القائمة بحيث تكون علامات <p> في أسطر منفصلة. لن يرغب الآخرون (مثل أنا) في وضعهم في أسطر منفصلة.

أقترح عليك مراجعة نموذج مربع CSS وفهم كيفية عمل block vs inline. ثم أعد كتابة منطق تنسيق HTML js-beautify ، مع الأخذ في الاعتبار نموذج مربع CSS (لأن كود المصدر يجب أن يعكس كيفية إجراء العرض في النهاية).

بشكل افتراضي ، لا يجب أن يكون أي شيء "غير منسق". يجب تنسيق كل شيء --- فقط بالتنسيق المناسب. يجب أن يكون "unformatted" إعداد الملاذ الأخير للمستخدم ليقول ، "مرحبًا ، لا أحب ما يفعله js-beautify ، لذا لا تلمس هذا العنصر ودعني أتعامل معه.

ال 6 كومينتر

اقتراحك لكيفية عملها يبدو معقولاً. يرجى ذكر العناصر التي يجب أن تكون مضمنة مقابل العناصر التي يجب أن تكون غير منسقة. ثم يرجى تنفيذ وتقديم طلب سحب.

لست متأكدًا من أنك تحصل على ما أقوله. يجب تنسيق جميع العناصر! إنها فقط بعض العناصر المضمنة ، والبعض الآخر عبارة عن عناصر كتلة. هذا ما كان عليه الحال مع XML / HTML / CSS منذ عقدين من الزمن.

إذا كان عنصر كتلة ، فإنه ينشئ كتلة جديدة بصريًا. هذه الأشياء ، عند تنسيق شفرة مصدر HTML ، يكون لها دائمًا سطر جديد أمامها (سواء في الكود المصدري أو في العرض). لا يحتوي العنصر المضمن على سطر جديد قبله (سواء في التعليمات البرمجية المصدر أو في العرض). لكن هذا لا يعني أنه لا ينبغي تنسيق _contents_. (يعني ذلك أنه لا يجب إضافة أسطر جديدة لمحتوياته ، إلا إذا كنت تقوم بتغليف الأسطر.)

لذلك هذا ليس تعديل. هذا اعتراف بأن استخدامات js-beautify للنموذج بأكمله للتنسيق معطلة. (أنا لا أكون لئيمًا - أنا فقط أكون موضوعية ، وأحاول مساعدتك من خلال التوضيح.) أنت بحاجة للتمييز بين ثلاثة أشياء مختلفة:

  • "منسق" - هل تم تنسيق هذا العنصر؟ (بشكل افتراضي ، يجب تنسيق جميع العناصر ، ما لم يقم أحدهم بإيقافها.)
  • "حظر / عرض" - هل هذا عنصر كتلة أم عرض؟ إذا كان عنصر كتلة ، فيجب أن يحتوي على سطر جديد _prepended_ قبل علامة البداية ، ويجب أن يكون مسافة بادئة إلى مستوى المسافة البادئة الحالي. إذا لم يكن كذلك ، فلا ينبغي أن يكون هناك سطر جديد أمامه.
  • "الحاوية" - هل هذا الشيء يستخدم عادة فقط لاحتواء عناصر كتلة أخرى؟ إذا كان الأمر كذلك ، فيجب إنشاء سطر جديد _ بعد_ علامة البداية ، بعد علامة النهاية ، ويجب وضع مسافة بادئة للمحتويات عند مستوى مسافة بادئة جديدة. هذا هو الأكثر إثارة للجدل ، أي أن هذا سيختلف بشكل كبير حسب أذواق المستخدمين. أحد المرشحين الواضحين هو <ul> ؛ يجب وضع مسافة بادئة لمحتواه (مثل <li> ). سيرغب بعض الأشخاص في إضافة <p> إلى هذه القائمة بحيث تكون علامات <p> في أسطر منفصلة. لن يرغب الآخرون (مثل أنا) في وضعهم في أسطر منفصلة.

أقترح عليك مراجعة نموذج مربع CSS وفهم كيفية عمل block vs inline. ثم أعد كتابة منطق تنسيق HTML js-beautify ، مع الأخذ في الاعتبار نموذج مربع CSS (لأن كود المصدر يجب أن يعكس كيفية إجراء العرض في النهاية).

بشكل افتراضي ، لا يجب أن يكون أي شيء "غير منسق". يجب تنسيق كل شيء --- فقط بالتنسيق المناسب. يجب أن يكون "unformatted" إعداد الملاذ الأخير للمستخدم ليقول ، "مرحبًا ، لا أحب ما يفعله js-beautify ، لذا لا تلمس هذا العنصر ودعني أتعامل معه.

ملاحظة: لقد أعطيتك بالفعل بداية في # 840 للإشارة إلى ما يشكل عنصرًا مضمنًا في HTML5. ليس لدي الوقت الآن لإعادة كتابة محرك التنسيق بالكامل. إذا حصلت على هذا الوقت ، فسيكون من الأفضل كتابة نفسي. لذا في هذه الأثناء ، أحاول مساعدتك حتى تتمكن من تشغيل جهازك ، وهو الأمر الأفضل لكلينا. حظًا سعيدًا ، واسمحوا لي أن أعرف ما هي المعلومات الإضافية التي يمكنني تقديمها.

أنا أفهم تماما ما قلته في الأصل. تعتقد أن هناك خطأ في مُجمل html. قد ترغب في وصفه بأنه "استخدامات paradigm js-beautify الكاملة للتنسيق [html] معطلة". لم أصمم أو أنفذ وحدة تجميل html ، وقد شهدت أقل تحسن في وقتي كمشرف على هذا المشروع. إنه بالتأكيد يحتاج إلى اهتمام وإعادة صياغة مهمة ، وكذلك الحال مع مُجمل CSS لهذه المسألة.

ومع ذلك ، فإن مُجمل html يقوم ببعض الأشياء بطريقة مقبولة بشكل معقول على الرغم من عيوبها. وأنا أشكك في تقييمك بأن التعامل مع # 840 على وجه الخصوص سيتطلب "إعادة كتابة" أو تغيير في "النموذج". إنه تحسين مثل أي شخص آخر. ربما يكون هناك عدد من الطرق لتنفيذه ، من القرصنة القبيحة إلى إعادة التصميم وإعادة الكتابة بالكامل.

مهما كان النطاق ، أعتقد أن التغيير الذي وصفته يستحق القيام به في النهاية ولكن لدي بالفعل قائمة كبيرة من إصلاحات الأخطاء الملموسة والموضحة جيدًا والمطلوبة بشدة والتي لها أولوية أعلى بشكل عام للمشروع. يجب أن أقضي القليل من الوقت الذي أملكه لهذا المشروع على تلك العناصر. إذا كنت تعتقد حقًا أن هذا يستحق الإصلاح الآن ، فستحتاج إلى قضاء وقتك في القيام بذلك. أرحب بطلبات السحب.

تعتقد أن هناك خطأ في مُجمل html.

لا ، أنا أقول أنه لا توجد طريقة لإخبار js-beautify بعدم وضع فاصل سطر _ قبل_ عنصر دون إخبار js-beautify في نفس الوقت بعدم تنسيق أي شيء _ داخل_ العنصر. هل هذا صحيح أم هذا غير صحيح؟

قد ترغب في وصفه بأنه "استخدامات paradigm js-beautify الكاملة للتنسيق [html] معطلة".

إذا كان js-beautify لا يعرف الفرق بين "الأشياء التي يجب ألا تضاف قبلها فواصل أسطر" و "الأشياء التي يجب أن أتجاهلها تمامًا" ، إذن نعم ، نموذجها غير مناسب حتى لوصف HTML البسيط. بعد كل شيء ، لا أريد فاصل سطر قبل <dfn> (لأن هذا عنصر مضمّن) ، ولكن إذا كان <dfn> يحتوي على <img> ، فلا أريد js-beautify للتخلي عن تنسيق علامة <img> . (هذا مثال مفتعل ؛ ينطبق على أي صورة مضمنة.)

اذن انت تحدثني. هل يمكن لـ js-beautify تنسيق <img> داخل <dfn> بدون وضع سطر تغذية قبل <dfn> ؟

الهدف مما أقوله هو أن "عدم تنسيق محتويات هذا العنصر" يختلف عن "لا تضع سطرًا جديدًا قبل هذا العنصر". لذلك اسمحوا لي أن أسألك مرة أخرى. هل يفهم js-beautify التمييز بين هذين الأمرين ، أم أنه يخلط بين هذين الأمرين؟ إذا لم يفهم الاختلاف ، فإن نموذجه الأساسي ينكسر.

لكن بالتأكيد ، يمكنك أحيانًا التغلب على العيوب الأساسية. لذا أعود وأسألك مرة أخرى: كيف يمكنني التغلب على هذا الخلل؟ كيف يمكنني إخبار js-beautify بعدم وضع تغذية سطر قبل <code> ولكن مع الاستمرار في تنسيق عنصر <img> داخل <code> ؟

garretwilson هذا متوفر في 1.8.0-rc2 .

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات