彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 彩世界平台官方网址 2019-11-28 06:06 的文章
当前位置: 彩世界开奖app官网 > 彩世界平台官方网址 > 正文

深入理解JavaScript系列 S.O.L.I.D五大原则之开闭原则

前言 本章大家要上课的是S.O.L.I.D中国共产党第五次全国代表大会原则JavaScript语言实现的第2篇,开闭原则OCP(The Open/Closed Principle 卡塔尔。 开闭原则的陈说是: Software entities (classes, modules, functions, etc.) should be open for extension but closed for modification. 软件实体应当对扩张开放,对改良关闭,即软件实体应当在不改进的前提下扩大。 复制代码 open for extension的情趣是说当新须求应际而生的时候,能够经过扩充现成模型到达指标。而Close for modification的情致是说不允许对该实体做其它改造,说白了,正是那个要求施行多种行为的实体应该设计成无需改良就能够完毕种种的扭转,坚定不移开闭原则有助于用起码的代码实行项目维护。 葡萄牙共和国(República Portuguesa卡塔尔语原稿: 难点代码 为了直观地陈述,大家来例如演示一下,下属代码是动态体现question列表的代码。 复制代码 代码如下: // 难点项目 var AnswerType = { Choice: 0, Input: 1 }; // 问题实体 function question(label, answerType, choices) { return { label: label, answerType: answerType, choices: choices // 这里的choices是可选参数 }; } var view = { // render叁个主题材料 function renderQuestion { var questionWrapper = document.createElement; questionWrapper.className = 'question'; var questionLabel = document.createElement; questionLabel.className = 'question-label'; var label = document.createTextNode; questionLabel.appendChild; var answer = document.createElement; answer.className = 'question-input'; // 依据差异的项目呈现分化的代码:分别是下拉菜单和输入框二种 if (question.answerType === AnswerType.Choice) { var input = document.createElement; var len = question.choices.length; for (var i = 0; i < len; i ) { var option = document.createElement; option.text = question.choices[i]; option.value = question.choices[i]; input.appendChild; } } else if (question.answerType === AnswerType.Input) { var input = document.createElement; input.type = 'text'; } answer.appendChild; questionWrapper.appendChild; questionWrapper.appendChild; target.appendChild; } return { // 遍历全部的主题素材列表举办呈现 render: function { for (var i = 0; i < questions.length; i ) { renderQuestion; }; } }; })(); var questions = [ question('Have you used tobacco products within the last 30 days?', AnswerType.Choice, ['Yes', 'No']), question('What medications are you currently using?', AnswerType.Input) ]; var questionRegion = document.getElementById; view.render(questionRegion, questions); 上边的代码,view对象里带有二个render方法用来彰显question列表,突显的时候依照分化的question类型使用不一致的来得方式,八个question包蕴四个label和叁个主题材料项目以至choices的选项。假诺难题项目是Choice那就依据选项临蓐四个下拉菜单,假使类型是Input,这就大致地出示input输入框。 该代码有叁个限量,正是只要再追加多少个question类型的话,那就须求再一次改正renderQuestion里的基准语句,那明摆着违反了开闭原则。 重构代码 让大家来重构一下这么些代码,以便在产出新question类型的情况下同意扩大view对象的render手艺,而没有必要改过view对象内部的代码。 先来创立二个通用的questionCreator函数: 复制代码 代码如下: function questionCreator { var that = {}; my = my || {}; my.label = spec.label; my.renderInput = function () { throw "not implemented"; // 这里renderInput未有完成,首要指标是让个别难题项指标兑今世码去掩瞒全体艺术 }; that.render = function { var questionWrapper = document.createElement; questionWrapper.className = 'question'; var questionLabel = document.createElement; questionLabel.className = 'question-label'; var label = document.createTextNode; questionLabel.appendChild; var answer = my.renderInput(); // 该render方法是均等的粗合理代码 // 唯生龙活虎的比不上就是地点的一句my.renderInput() // 因为不相同的主题材料项目有差别的完成 questionWrapper.appendChild; questionWrapper.appendChild; return questionWrapper; }; return that; } 该代码的功力组合假设render八个难点,相同的时间提供多少个未达成的renderInput方法以便别的function能够覆盖,以利用不一致的主题材料项目,大家一而再再而三看一下各类标题项目标得以完成代码: 复制代码 代码如下: function choiceQuestionCreator { var my = {}, that = questionCreator; // choice类型的renderInput完毕 my.renderInput = function () { var input = document.createElement; var len = spec.choices.length; for (var i = 0; i < len; i ) { var option = document.createElement; option.text = spec.choices[i]; option.value = spec.choices[i]; input.appendChild; } return input; }; return that; } function inputQuestionCreator { var my = {}, that = questionCreator; // input类型的renderInput达成my.renderInput = function () { var input = document.createElement; input.type = 'text'; return input; }; return that; } choiceQuestionCreator函数和inputQuestionCreator函数分别对应下拉菜单和input输入框的renderInput达成,通过中间调用统生龙活虎的questionCreator然后重返that对象。 view对象的代码就很固定了。 复制代码 代码如下: var view = { render: function { for (var i = 0; i < questions.length; i ) { target.appendChild); } } }; 所以大家注脚难题的时候只必要这么做,就OK了: 复制代码 代码如下: var questions = [ choiceQuestionCreator({ label: 'Have you used tobacco products within the last 30 days?', choices: ['Yes', 'No'] }), inputQuestionCreator({ label: 'What medications are you currently using?' }) ]; 最后的运用代码,我们可以这样来用: 复制代码 代码如下: var questionRegion = document.getElementById; view.render(questionRegion, questions); 重构后的末梢代码 复制代码 代码如下: function questionCreator { var that = {}; my = my || {}; my.label = spec.label; my.renderInput = function() { throw "not implemented"; }; that.render = function { var questionWrapper = document.createElement; questionWrapper.className = 'question'; var questionLabel = document.createElement; questionLabel.className = 'question-label'; var label = document.createTextNode; questionLabel.appendChild; var answer = my.renderInput(); questionWrapper.appendChild; questionWrapper.appendChild; return questionWrapper; }; return that; } function choiceQuestionCreator { var my = {}, that = questionCreator; my.renderInput = function() { var input = document.createElement; var len = spec.choices.length; for (var i = 0; i < len; i ) { var option = document.createElement; option.text = spec.choices[i]; option.value = spec.choices[i]; input.appendChild; } return input; }; return that; } function inputQuestionCreator { var my = {}, that = questionCreator; my.renderInput = function() { var input = document.createElement; input.type = 'text'; return input; }; return that; } var view = { render: function { for (var i = 0; i < questions.length; i ) { target.appendChild); } } }; var questions = [ choiceQuestionCreator({ label: 'Have you used tobacco products within the last 30 days?', choices: ['Yes', 'No'] }), inputQuestionCreator({ label: 'What medications are you currently using?' }) ]; var questionRegion = document.getElementById; view.render(questionRegion, questions); 下面的代码里使用了一些才干点,我们来逐风度翩翩看一下: 首先,questionCreator方法的创造,能够让我们运用模板方法形式将管理难点的效率delegat给针对每个难点项目标恢弘代码renderInput上。 其次,大家用多个民用的spec属性替换掉了日前question方法的构造函数属性,因为我们封装了render行为开展操作,不再须求把那些属性暴露给外界代码了。 第三,大家为各类标题项目创造多少个目的实行个其余代码达成,但每一个达成里都必需含有renderInput方法以便覆盖questionCreator方法里的renderInput代码,那正是大家常说的方针格局。 通过重构,大家得以去除不需要的问题项目标枚举AnswerType,并且能够让choices作为choiceQuestionCreator函数的必选参数。 总计重构今后的本子的view对象能够很清楚地拓宽新的强大了,为不一致的主题素材项目增加新的指标,然后证明questions集结的时候再里面钦命项目就能够了,view对象自己不再改善任何改变,进而到达了开闭原则的渴求。 另:懂C#的话,不清楚看了地点的代码后是还是不是和多态的兑现多少临近?其实上述的代码用原型也是能够兑现的,我们能够自动钻研一下。

本文由彩世界开奖app官网发布于彩世界平台官方网址,转载请注明出处:深入理解JavaScript系列 S.O.L.I.D五大原则之开闭原则

关键词: 脚本 原则 之家 五大