原文地址：https://github.com/lianxiaozhuang/blog
转载请注明出处
js 写插件教程深入
1.介绍具有安全作用域的构造函数
function Fn(name){
this.a = name;
}
Fn.prototype = {
constructor:Fn,
getF:function(){
console.log(1);
}
}
new Fn();
//new 出来的Fn就是一个构造函数
//倘若有人忘记写new，直接调用Fn();此时var p = Fn();可见实例p没有getF的方法；
//为了解决这种问题；引入了安全作用域的构造函数概念
function Fn(name){
if(!(this instanceof Fn)){
//只要不是new的，用Fn()直接调用的，这里的this绝对不指向Fn；让它从
//新new一下；直到下一次代码走else里的内容，故把this.a 放到了else里
return new Fn(name)
}else{
this.a = name;
}
}
Fn.prototype = {
constructor:Fn,
getF:function(){
console.log(1);
}
}
2.默认参数
//我们用过一些插件，是可以传一些配置参数的，当然如果你不传的话它有默认的值，
function Fn(params){
var defaults = {
width:100,
color:"#000"
};
var params = params||{};
for (var x in defaults) {
if (typeof params[x] === 'undefined') {
params[x] = defaults[x];
//对于使用时，没有设置的参数；用默认参数代替
}
}
this.params= params;//得到的this.params,在方法中调用；
}
Fn.prototype = {
}
3.方法到底写到this里还是prototype 里
//举个例子
//①
function Fn(){
this.getC = function(){
//...
}
}
//or...
//②
function Fn(){}
Fn.prototype.getC = function(){}
//大家可能都会有这样的纠结，getC到底写到this里还是原型里
//这要从内存说起；写到原型上，每执行一个实例，getC不需要开辟新的内存
//故，可以把一些纯计算的方法，写原型上，如果方法和实例本身有关，应该写道this中
4.方法名防止冲突处理
//如果在引入你的插件之前，window下已经有Fn的变量；怎么办,你如果这么搞； 岂不是把别人写的Fn搞掉了
//此时应该把Fn的控制权交出，自己用Fn2输出
(function(){
var Fn=function(){
console.log(000)
}
Fn.prototype = {
}
/**
这里暂时没写好；
*/
if(window.Fn){
// throw Error("Fn已经存在，请使用Fn2")
window.Fn2 = Fn ;
}else{
window.Fn2 = Fn ;
}
}())
5.对外输出的规范化exprot 、amd 完整写法
;(function(global) {
//开启严格模式，规范代码，提高浏览器运行效率
"use strict";
//定义一个类，通常首字母大写
var MyPlugin = function(options) {
this.name = name;
this.init();
};
//覆写原型链，给继承者提供方法
MyPlugin.prototype = {
constructor:MyPlugin,
init: function() {
}
};
//兼容CommonJs规范
if (typeof module !== 'undefined' && module.exports) module.exports = MyPlugin;
//兼容AMD/CMD规范
if (typeof define === 'function') define(function() { return MyPlugin; });
//注册全局变量，兼容直接使用script标签引入该插件
global.MyPlugin = MyPlugin;
//this，在浏览器环境指window，在nodejs环境指global
//使用this而不直接用window/global是为了兼容浏览器端和服务端
//将this传进函数体，使全局变量变为局部变量，可缩短函数访问全局变量的时间
})(this);