KaiOS APN 编辑页代码逻辑

一、模块设计

代码路径：

• gaia/apps/settings/js/panels/apn_editor
  • panel.js
  • apn_editor.js 编辑页显示逻辑
  • apn_editor_const.js 编辑页显示参数定义
  • apn_editor_session.js 编辑页保存数据逻辑
• gaia/apps/settings/js/modules/apn/
  • apn_const.js
  • apn_item.js
  • apn_list.js
  • apn_selections.js
  • apn_settings.js
  • apn_settings_manager.js
  • apn_utils.js
• gaia/apps/settings/elements/apn_editor.html 界面布局

二、代码分析

apn_editor_const.js

kaios 3.1：跟Android 不同，默认不支持显示mcc、mnc、MVNO value&type、bearer、server

/**
 * The apn editor const
 */
'use strict';
define(() => {
  //没有mccmnc、mvno value&type、bearer、server
  const APN_PROPERTY_DEFAULTS = {
    carrier: '',
    apn: '',
    user: '',
    password: '',
    proxy: '',
    port: '',
    mmsc: '',
    mmsproxy: '',
    mmsport: '',
    authtype: 'notDefined',
    types: ['default'],
    protocol: 'notDefined',
    roaming_protocol: 'notDefined' //eslint-disable-line
  };

  const APN_PROPERTIES = Object.keys(APN_PROPERTY_DEFAULTS);

  //解析
  const VALUE_CONVERTERS = {
    TO_STRING: {
      types(types) {
        if (types && Array.isArray(types) && types.length) {
          return types.join(', ');
        }
        return 'default';
      }
    },
    TO_DATA: {
      types(string) {
        return string.split(',').map(str => str.trim());
      }
    }
  };

  return {
    get APN_PROPERTIES() {
      return APN_PROPERTIES;
    },
    get APN_PROPERTY_DEFAULTS() {
      return APN_PROPERTY_DEFAULTS;
    },
    get VALUE_CONVERTERS() {
      return VALUE_CONVERTERS;
    }
  };
});

参考代码：

https://github.com/mozilla-b2g/gaia/blob/master/apps/settings/js/panels/apn_editor/apn_editor_const.js

/**
 * The apn editor const
 */
define(function(require) {
  'use strict';

  var APN_PROPERTY_DEFAULTS = {
    'apn': '',
    'user': '',
    'password': '',
    'proxy': '',
    'port': '',
    'mmsc': '',
    'mmsproxy': '',
    'mmsport': '',
    'authtype': 'notDefined',
    'types': ['default'],
    'protocol': 'notDefined',
    'roaming_protocol': 'notDefined',
    'mtu' : ''
  };

  var APN_PROPERTIES = Object.keys(APN_PROPERTY_DEFAULTS);

  var VALUE_CONVERTERS = {
    'TO_STRING': {
      'types': function(types) {
        if (types && Array.isArray(types) && types.length) {
          return types.join(', ');
        } else {
          return 'default';
        }
      }
    },
    'TO_DATA': {
      'types': function(string) {
        return string.split(',').map((str) => str.trim());
      }
    }
  };

  return {
    get APN_PROPERTIES() { return APN_PROPERTIES; },
    get APN_PROPERTY_DEFAULTS() { return APN_PROPERTY_DEFAULTS; },
    get VALUE_CONVERTERS() { return VALUE_CONVERTERS; }
  };
});

apn_editor_session.js 

用于保存编辑和新增APN。

apn_editor.js 功能逻辑

/**
 * The apn editor module
 */
'use strict';

define(function(require) {  //eslint-disable-line

  //导包
  const ApnEditorConst = require('panels/apn_editor/apn_editor_const'); 
  const ApnEditorSession = require('panels/apn_editor/apn_editor_session');

  const { APN_PROPERTIES } = ApnEditorConst;
  const { APN_PROPERTY_DEFAULTS } = ApnEditorConst;

  //APN编辑页对象，构造函数
  ApnEditor.prototype = {
    //数据转换
    convertValue(value, converter) {
      if (converter) {
        return converter(value);
      }
      return value;
    },

    //填充APN属性值
    fillInputElements(inputElements, apn) {
      APN_PROPERTIES.forEach(function input(name) {
        const inputElement = inputElements[name];
        if (inputElement) {
          inputElement.removeAttribute('disabled');
          const value = 
              (apn && apn[name.toLowerCase()]) || APN_PROPERTY_DEFAULTS[name];
          inputElement.value = this.convertValue(
            value,
            VALUE_CONVERTERS.TO_STRING[name]
          );
        }  //if
      }, this);
    },

    //新建APN
    createApn(serviceId, apnItem) {
      this.fillInputElements(this.inputElements, apnItem.apn);
      return ApnEditorSession(
        { serviceId, mode: 'new' },
        this.inputElements,
        apnItem
      );
    },

    //编辑APN
    editApn(serviceId, apnItem, editable) {
      this.fillInputElementsNoneEditable(this.inputElements, apnItem, editable);
      return ApnEditorSession(
        { serviceId, mode: 'edit' },
        this.inputElements,
        apnItem
      );
    }
  };  //ApnEditor.prototype END


  return function apnEditor(rootElement) {
    return new ApnEditor(rootElement);
  };

});

对比：(Old Version) gaia/apps/settings/js/panels/apn_editor/apn_editor.js

//十年前 kaios 版本
/**
 * The apn editor module
 */
define(function(require) {
  'use strict';

  var ApnEditorConst = require('panels/apn_editor/apn_editor_const');
  var ApnEditorSession = require('panels/apn_editor/apn_editor_session');

  var APN_PROPERTIES = ApnEditorConst.APN_PROPERTIES;
  var APN_PROPERTY_DEFAULTS = ApnEditorConst.APN_PROPERTY_DEFAULTS;
  var VALUE_CONVERTERS = ApnEditorConst.VALUE_CONVERTERS;

  function ApnEditor(rootElement) {
    this._inputElements = {};
    APN_PROPERTIES.forEach(function(name) {
      this._inputElements[name] = rootElement.querySelector('.' + name);
    }, this);
  }

  ApnEditor.prototype = {
    _convertValue: function ae_convertValue(value, converter) {
      if (converter) {
        return converter(value);
      } else {
        return value;
      }
    },
    _fillInputElements: function ae_fillInputElements(inputElements, apn) {
      APN_PROPERTIES.forEach(function(name) {
        var inputElement = inputElements[name];
        if (inputElement) {
          var value = (apn && apn[name.toLowerCase()]) ||
            APN_PROPERTY_DEFAULTS[name];
          inputElement.value =
            this._convertValue(value, VALUE_CONVERTERS.TO_STRING[name]);
        }
      }, this);
    },
    createApn: function ae_createApn(serviceId, apnItem) {
      this._fillInputElements(this._inputElements, apnItem.apn);
      return ApnEditorSession(serviceId, 'new', this._inputElements, apnItem);
    },
    editApn: function ae_editApn(serviceId, apnItem) {
      this._fillInputElements(this._inputElements, apnItem.apn);
      return ApnEditorSession(serviceId, 'edit', this._inputElements, apnItem);
    }
  };

  return function ctor_apn_editor(rootElement) {
    return new ApnEditor(rootElement);
  };
});

三、编译调试

APN编辑页面在Settings应用（gaia/apps/settings）中，可以进行模块单编，或者本地push对应应用的application.zip快速调试。

详细可参考：KaiOS 系统全编和模块单编-CSDN博客

四、参考资料

模块介绍：KaiOS APN Settings模块代码-CSDN博客

老版本代码：GitHub - mozilla-b2g/gaia: DEPRECATED - Gaia is a HTML5-based Phone UI for the Boot 2 Gecko Project.