前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js写插件教程深入

js写插件教程深入

作者头像
连小壮
发布2019-02-25 14:58:18
13.8K0
发布2019-02-25 14:58:18
举报
文章被收录于专栏:小壮和前端

原文地址:https://github.com/lianxiaozhuang/blog 转载请注明出处

js 写插件教程深入

1.介绍具有安全作用域的构造函数

代码语言:javascript
复制
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.默认参数

代码语言:javascript
复制
 //我们用过一些插件,是可以传一些配置参数的,当然如果你不传的话它有默认的值,
 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 里

代码语言:javascript
复制
//举个例子
//①
function Fn(){
    this.getC = function(){
        //...
    }
}
//or...
//②
function Fn(){}
Fn.prototype.getC = function(){}
//大家可能都会有这样的纠结,getC到底写到this里还是原型里
//这要从内存说起;写到原型上,每执行一个实例,getC不需要开辟新的内存
//故,可以把一些纯计算的方法,写原型上,如果方法和实例本身有关,应该写道this中

4.方法名防止冲突处理

代码语言:javascript
复制
//如果在引入你的插件之前,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 完整写法

代码语言:javascript
复制
;(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);
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-12-06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • js 写插件教程深入
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档