نظرة جديدة على نمط التعليمات البرمجية

كيف يمكن أن تساعد معرفة علم النفس العصبي المبرمج على تصميم الكود؟ قبل أن أبدأ البرمجة ، درست علم النفس العصبي لفترة طويلة جدًا. بعد ذلك ، ساعدتني هذه المعرفة على تحقيق نتائج عالية في التنمية في فترة زمنية قصيرة.

في هذه المقالة ، أود أن أشارك تجربتي ونهجي في تصميم الكود. سننظر في التصميم على جانب البرمجة ، ثم نلمس علم النفس العصبي لفهم أعمق للعملية ودرجة أهميتها للمطور. كنت أعمل في العام الماضي في Secreate ، حيث أقوم بتطوير تطبيقات جوال باستخدام إطار عمل React Native ، لذا فإن أمثلة التعليمات البرمجية في هذه المقالة ستكون في جافا سكريبت. يمكن تطبيق المعرفة المكتسبة من هذه المقالة بسهولة على أي لغة برمجة. في نهاية المقال ستجد أمثلة مفيدة لتصميم الكود. استمتع بالقراءة!

ما هو الأسلوب؟

code style. — , : , , , . , -. .

:

import {SomeClass} from ‘some/file’

:

import { SomeClass } from ‘some/file’

:

import {SomeClass, someFunction, someConst, AnotherClass       } from ‘some/file’

:

import {
  SomeClass,
  somefunction,
  someConst,
  AnotherClass,
       
} from ‘some/file’

:

function foo() {
  some code...
}

:

function foo ()
{
  some code…
}

:

condition ?
some very long long long long long expression :
another expression

:

condition
  ? some very long long long long long expression
  :  another expression

. , , , .

. , . . , . , , , . . , . . . , . — !

? , . . , , . ? , , .

, . . . , , . . , ( ).

. , . . , . . : , , . . , . , .

. , , . , . , ( ). ( ). , , . , , .

. , — , , . - . — . , , . - , , . , . .

, . , , . , , , . , “ ”.

, . , , . - , code style.

, . , , . , , . . , . , . .

, . , .

. , . ( ) .

2 . , .

:

<View>
  <Text>Some text</Text>
  <TouchableOpacity>
    <Text>Title</Text>
  <TouchableOpacity/>
</View>

Animated.timing(
  animatedValue,
  {
    toValue: someValue,
    duration: someDuration,
    anotherOptions,
  },
)

, .

const object = { field: value, anotherField: value }

, , .

const object = {
  field: value,
  anotherField: value,
  moreFields,
}

. .

:

function someFunction() {
  some code
}

افصل بين الكلمات الرئيسية بسطر فارغ.

مثال:

function sum(a, b) {
  const result = a + b

  return result
}

أو:

if (condition) {
  do this

} else {
  do that
}

 

switch (value) {
  case someCase:
    do this

    break

  case anotherCase:
    do that

    break
}

إعلانات ووظائف دالة منفصلة من أنواع مختلفة بسطر فارغ

مثال:

function someFunction() {
  do something
}

function anotherFunction() {
  do another thing
}

أو:

function someFunction() {
  const someConst
  const anotherConst

  let someLet
  let anotherLet

  if (condition) {
    do something
  }

  this.function()
  this.anotherFunction()
}

تسلسل العناصر

اتبع تسلسل صارم للعناصر.

مثال على فئة ملحق React.Component:

1. ثابتة.
2. حقول الصف.
3. البناء
4. حالة.
5. وظائف دورة الحياة.
6. وظائف ثانوية.
7. معالجات الإجراءات.
8. وظائف تقديم المساعدة.
9. يجعل.

افصل علامة الإغلاق الذاتي بمسافة.

مثال:

<View style={styles.underline} />

نقل الدعائم إلى السطر التالي إذا كان هناك أكثر من واحد

مثال:

<TouchableOpacity
  style={styles.button}
  onPress={this.handlePress}
>
  <Text>Title</Text>
</TouchableOpacity>

شروط طويلة

قسّم الشروط الطويلة إلى عدة أسطر ، وابدأ كل سطر بحرف شرطي.

مثال:

if (
  condition
  && anotherCondition
  && (
    value < anotherValue
    || someCondition
  )
) {
  do something
}

أو:

<View>
  {
    this.state.isButtonVisible
      ? (
        <TouchableOpacity>
          <Text>Title</Text>
        </TouchableOpacity>
      )
      : null
  }
</View>

افصل بين الأحرف الشرطية والمسافات

مثال:

const sum = a + b

أو:

return a < b ? a : b

أو:

const object = {
  field: value,
  ...value > 0 ? { value } : {},
}