إنشاء عناوين URL مع معلمات في الركبة وأفضل الممارسات

ذات مرة ، رأيت رمزًا في مشروع فريق مجاور أنشأ سلسلة بمعلمات عنوان URL للإدراج اللاحق في iframeسمة src.

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

هذا هو الكود الأصلي:

const createQueryString = (param1, param2, objectId, timestamp, name) => {
  const encodedTimestamp = encodeURIComponent(timestamp);
  const delimiter = '&';
  const queryString = `${param1}${delimiter}
        param2=${param2}${delimiter}
        objectId=${objectId}${delimiter}
        itemTimestamp=${encodedTimestamp}${delimiter}
        itemName=${name}`;
  return queryString.replace(/ /g, '%20');
};

للإشارة ، param1وفي param2القانون الأصلي لها أسماء ناطقة. ويمكن أن تكون قيمهم أي سلاسل تحتوي على الكثير من الأحرف غير الصالحة لأحرف URL

ما هي المشاكل التي يعاني منها هذا الرمز؟

• أولاً ، هذا هو الغياب encodeURIComponentلكل قيمة ، والتي قد تحتوي على أي أحرف على الإطلاق. (في سياق هذه المهمة ، يتم تعيين هذه الأسماء من قبل المستخدمين ويمكن أن تحتوي على جميع أنواع الأحرف مثل علامات العطف أو المسافات أو أحرف التشكيل) ؛
• ثانيًا ، هذه مسافات إضافية وفواصل أسطر تظهر بسبب عامل سلسلة القالب `؛ يحاول مؤلف هذا الكود إصلاحه باستخدام الطريقة .replace()، لكن هذا الأسلوب لا يحل أي شيء ؛
• ثالثًا ، من الصعب قراءة التعليمات البرمجية غير القابلة للتوسيع بسبب البنية المحددة ، المعرضة للخطأ.

كيفية إصلاحها؟

النهج الأول:

const delimiter = '&'; //      
const createQueryString = (param1, param2, objectId, timestamp, name) => {
  const queryString = [
    `param1=${encodeURIComponent(param1)}`,
    `param2=${encodeURIComponent(param2)}`,
    `objectId=${encodeURIComponent(objectId)}`,
    `itemTimestamp=${encodeURIComponent(timestamp)}`,
    `itemName=${encodeURIComponent(name)}`
  ].join(delimeter);
  return queryString;
};

? . , encodeURIComponent. , . .

? ! :

const createQueryString = (param1, param2, objectId, timestamp, name) => {
  const queryParams = {
     param1,
     param2,
     objectId,
     itemTimestamp: timestamp,
     itemName: name
  };
  const encodeAndJoinPair = pair => pair.map(encodeURIComponent).join('=');
  return Object.entries(queryParams).map(encodeAndJoinPair).join('&');
};

. , — .

, . , .

. , ? , queryParams. . , . , :

const encodeAndJoinPair = pair => pair
  .map(encodeURIComponent)
  .join('=');

const createQueryString = objectParams => Object
  .entries(objectParams)
  .map(encodeAndJoinPair)
  .join('&');
};

utils.js .

URLSearchParams

Web API. URLSearchParams .

:

const createQueryString = objectParams => new URLSearchParams(objectParams).toString();

Internet Explorer, , , https://www.npmjs.com/package/url-search-params-polyfill .

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