js几种常见【模块化的编程方式】。。。
一、对象方式:减少对全局变量的污染
简单而常用的方法
var math = {}; math.calculator = {}; math.calculator.add = function(a, b) { return a + b; };
//-------------------- math.convertor = {};
math.convertor .add = function(a, b) { return a + b; };
二、私有空间划分:减少对全局变量的污染
var calculator = (function() { // 这里形成一个单独的私有的空间 // 私有成员的作用,将一个成员私有化, 抽象公共方法(其他成员中都会用到的) // 私有的转换逻辑 function convert(input){ return parseInt(input); } function add(a, b) { return convert(a) + convert(b); } function subtract(a, b) { return convert(a) - convert(b); } function multiply(a, b) { return convert(a) * convert(b); } function divide(a, b) { return convert(a) / convert(b); }
//向外抛出对外接口 return { add: add, subtract: subtract, multiply: multiply, divide: divide } })();
//使用方法:
calculator.add(ta.value, tb.value);
calculator.subtract(ta.value, tb.value);
calculator.multiply(ta.value, tb.value);
calculator.divide(ta.value, tb.value);
三、自执行函数方式:减少对全局变量的污染 方便维护和在外部进行扩展
相对较为流行的做法。
原则:高内聚,低耦合!
(function(calculator) { function convert(input) { return parseInt(input); } calculator.add = function(a, b) { return convert(a) + convert(b); } window.calculator = calculator; })(window.calculator || {}); // 如果想要新增需求的话,可以再函数的外部进行。这样可以有效的避免冲突 // calc_v2016.js (function(calculator) { function convert(input) { return parseInt(input); } // calculator 如果存在的话,我就是扩展,不存在我就是新加 calculator.remain = function(a, b) { return convert(a) % convert(b); } window.calculator = calculator; })(window.calculator || {});
//使用方法:
calculator.add(ta.value, tb.value);
// 开闭原则,对新增开放,对修改关闭;
四、 依赖第三方的方式:减少对全局变量的污染 方便维护和在外部进行扩展,减少对外部文件的依赖。
相对较为流行的做法。
<script src="jquery.js"></script>
如果需要依赖第三方文件的话:
(function(calculator) { // 对全局产生依赖,不能这样用 console.log($); //------------------------------不推荐这种直接依赖外部文件的方式 function convert(input) { return parseInt(input); } calculator.add = function(a, b) { return convert(a) + convert(b); } window.calculator = calculator; })(window.calculator || {}); // 新增需求,可以再函数的外部进行。这样可以有效的避免冲突 // calc_v2016.js (function(calculator, $) { //引用外部的对象进行传参,减少内部直接对外部的依赖 // 依赖函数的参数,是属于模块内部 // console.log($); // $(). function convert(input) { return parseInt(input); } // calculator 如果存在的话,我就是扩展,不存在我就是新加 calculator.remain = function(a, b) { return convert(a) % convert(b); } window.calculator = calculator; })(window.calculator || {}, jQuery); //---------------------推荐使用传参的方式,来实现依赖
给心灵一个纯净空间,让思想,情感,飞扬!