前言：今天在github上看到了一个定义水印的项目，因为获取的星星还蛮多，就多看了几眼，发现该项目简单有趣，心想以后可能会用的到，并且我下载到本地并亲自测试运行了一波。其实该项目最吸引我的是它定义js方法的方式(其实我看过很多项目都是这样定义js方法的，因为他们的项目太大，分析太过于复杂。这个项目让我有了一个切入点)。下面我就把该项目的分析过程与大家分享一下。
一：源码
因为对js，canvan不是太熟悉，故添加了注释已帮助理解和记忆
!function (root, factory) { // root=window factory=方法（可以理解为工厂方法）
if (typeof module === 'object' && module.exports) { // 其实是做的兼容处理（使用方式的兼容处理即js模块开发）
module.exports = factory(root); // nodejs support
module.exports['default'] = module.exports; // es6 support
}
else
root.alimask = factory(root); // 我们用到的代码
}(typeof window !== 'undefined' ? window : this, function () {
var canvas, ctx;
// merge the default value
function mergeOptions(options) { //合并默认参数和可选参数
return Object.assign({
width: 200,
height: 70,
color: '#ebebeb',
alpha: 0.8,
font: '50px Arial'
}, options);
}
return function(text, options) {
if (!canvas || !ctx) {
// if not exist, then initial
if (typeof document !== 'undefined') {
canvas = document.createElement('canvas');
} else {
var Canvas = module.require('canvas');
canvas = new Canvas();
}
ctx = canvas && canvas.getContext && canvas.getContext('2d');
if (!canvas || !ctx) return ''; // if not exist also, then return blank.
}
options = mergeOptions(options);
var width = options.width,
height = options.height;
canvas.width = width;
canvas.height = height;
ctx.clearRect(0, 0, width, height); // clear the canvas
ctx.globalAlpha = 0; // backgroud is alpha
// ctx.fillStyle = 'white'; // no need because of alipha = 0;
ctx.fillRect(0, 0, width, height);
ctx.globalAlpha= options.alpha; // text alpha 透明度
ctx.fillStyle = options.color;
ctx.font = options.font;
ctx.textAlign = 'left';
ctx.textBaseline = 'bottom';
ctx.translate(width * 0.1, height * 0.9); // margin: 10
ctx.rotate(-Math.PI / 12); // 15 degree 图片倾斜角度
ctx.fillText(text, 0, 0);
return canvas.toDataURL(); //生成图片URl
};
});
二 ：源码结构分析
源码的简化结构
!function (root, factory) { // root=window factory=方法（可以理解为工厂方法）
root.method //暴露的属性或方法（该js暴露是方法） *****通过root对象暴露全局 你可以理解为全局属性******
}(arg1, function () { // 1.arg1=window()因为window是单例对象并暴露全局2.arg2=function() ******隐藏作用域即闭包 全局的子作用域（对对全局隐藏）*******
function f1(options) { //该方法 做到可隐藏 即只读方法 （只能在该作用域或子作用域中访问到 该作用域对全局作用域隐藏）
}
return function(text, options) { // 参数2 ******提供对隐藏域的访问接口*******
//调用方法f1
f1();
var obj = new **();
return obj;
}
});
分析：通过定义立即执行带参数的立即执行函数来隐藏方法（参数2）和方法f1
原理就是js闭包，相关文章可参考https://www.cnblogs.com/jinliang374003909/p/10352464.html
备注： 合并两个对象的属性方法
Object.assign(obj1,obj2) //以obj1为主，当obj2中有相同的属性时，obj1的属性值被覆盖。当obj2中的属性obj1没有时，obj1添加该属性和值
利用该方法实现了，可选参数和默认参数的机制。 参考地址：https://github.com/hustcc/alimask