javascript框架设计读书笔记之种子模块

《JavaScript框架设计读书笔记》中的“种子模块”是指一个可以独立运行的封装好的模块，可以作为一个基础模块，在不同的应用场景下被复用和拓展。这里提供一个完整的种子模块设计攻略，具体包括以下几步：

1.确定需求与通用性

首先需要明确自己的需求和所要设计模块的通用性。分析模块所需功能，设计出尽可能通用的接口和参数，使得该种子模块可以在多个应用场景下使用。

例如，如果需要设计一个模块来处理表单验证，就需要确定通用的验证规则、表单元素和错误提示方式。

2.根据需求设计模块接口

设计合适的模块接口可以保证代码易于使用和拓展。首先需要根据需求设计模块的方法和属性，并定义好对外暴露的接口。

对于表单验证模块，可以设计以下接口：

var validate = {
    // 表单验证方法
    validateForm: function(formId) { ... },
    // 添加表单验证规则
    addRule: function(ruleName, func) { ... },
    // 修改表单验证规则
    updateRule: function(ruleName, func) { ... },
    // 删除表单验证规则
    removeRule: function(ruleName) { ... },
}

3.实现模块功能

基于接口设计，按照需求实现模块功能。在实现过程中要符合模块设计标准，比如不能使用全局变量、大量使用函数闭包等等。

例如，在表单验证模块实现中，可以在下面这个函数中验证表单的有效性：

// 表单的验证方法
validate.validateForm = function(formId) {
    var form = document.getElementById(formId); // 获取表单元素
    var inputs = form.getElementsByTagName('input');
    var valid = true;
    for (var i = 0; i < inputs.length; i++) {
        // 遍历验证规则
        for (var key in validate.rules) {
            // 获取该输入框规则
            var rule = validate.rules[key];
            // 获取输入框的值
            var value = inputs[i].value;
            // 规则校验
            if (rule.test(value)) {
                // true规则通过
                continue;
            } else {
                // false规则不通过
                var msg = validate.messages[key];
                alert(msg);
                inputs[i].focus();
                valid = false;
                return false;
            }
        }
    }
    return valid;
}

4.测试和调试

完成模块功能后，需要进行必要的测试和调试。测试方法可以根据具体需求编写相应测试用例，来验证模块是否符合设计需求。

例如，在表单验证模块中，可以编写以下测试用例：

// 添加测试用例
validate.addRule('required', function(value) {
    return value != '';
});
validate.addRule('email', function(value) {
    var reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
    return reg.test(value);
});

// 验证表单
var valid = validate.validateForm('form-1');
if (valid) {
    console.log('验证通过');
} else {
    console.log('验证未通过');
}

示例说明一

假设我们需要设计一个异步请求模块，我们首先需要确定需求和通用性，分析模块所需功能，设计出尽可能通用的接口和参数，如下：

var asyncRequest = {
  // 发送GET请求    
  get: function(url, success, fail) { ... },

  // 发送POST请求
  post: function(url, data, success, fail) { ... },

  // 发送PUT请求
  put: function(url, data, success, fail) { ... },

  // 发送DELETE请求
  delete: function(url, success, fail) { ... }
}

然后，我们可以根据需求设计模块的方法和属性，并定义好对外暴露的接口，如上述接口定义。

接着，我们可以根据模块接口实现功能，例如：

asyncRequest.post('http://localhost:8080/user', {username: 'test', password: '123456'}, 
function(data) {
    console.log('请求成功,返回：' + JSON.stringify(data));
}, 
function(error) {
    console.log('请求失败，返回:' + JSON.stringify(error));
});

最后，我们需要进行必要的测试和调试。测试方法可以根据具体需求编写相应测试用例，来验证模块是否符合设计需求。例如：

asyncRequest.get('http://localhost:8080/user', 
function(data) {
    console.log('请求成功,返回：' + JSON.stringify(data));
}, 
function(error) {
    console.log('请求失败，返回:' + JSON.stringify(error));
});

示例说明二

假设我们需要设计一个模块，实现界面滚动时的响应效果（例如导航栏的透明度变化），我们首先需要确定需求和通用性，分析模块所需功能，设计出尽可能通用的接口和参数，如下：

var scrollResponder = {
  // 注册界面滚动事件
  register: function(callback) { ... },

  // 移除界面滚动事件
  remove: function() { ... }    
}