一起学习下 插件的开发,原生的。 看了这文章

JavaScript插件开发从入门到精通系列---原生JavaScript插件开发

附上

读完小结:

看了下,比较小白的方式就是把一些代码,放到一个单独的js文件中, (刚开始就是这么玩的,还觉得挺美)
直接暴露在全局作用域。
-----------------
然后还有用一个建一个

var person1 = {
name: "peter",
age: 18,
sayHello: function() {
alert("hello! I am " + this.name);
}
};
person1.sayHello();

-----------------

然后还有一点工厂模式 , return 返回

function createPerson(name, age) {
var o = new Object();
o.name = name;
o.age = age;
o.sayHello = function() {
alert("hello! I am " + this.name);
};
return o;
}

var person1 = createPerson("peter", 18);
person1.sayHello();
---------------
然后还有一点 构造函数模式 ,使用时new一下

var Person = function(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
alert("hello! I am " + this.name);
}
};

var person1 = new Person("peter", 18);
person1.sayHello();
var person2 = new Person("william", 19);

-------------
上面这些,写过点代码的,基本都会经常使用。

作者文章的大干货 ,精彩来了

原型模式

var MathUtil = function(version, programmer) {
this.name = name;
this.programmer = programmer;
}; MathUtil.prototye = { // 将构造函数置为MathUtil,这里一定要将constructor重新设置回MathUtil,不然会指向Object的构造函数
constructor: MathUtil, // 加法
add: function(aaa, bbb) {
var result= aaa + bbb;
alert("result == " + result);
}, // 减法
reduce: function(aaa, bbb) {
var result= aaa - bbb;
alert("result == " + result);
}, // 乘法
multiply: function(aaa, bbb) {
var result= aaa * bbb;
alert("result == " + result);
}, // 除法
divide: function(aaa, bbb) {
var result = aaa / bbb;
alert("result == " + result);
}
};

  

// 引用mathUtil.js文件后使用方式:
var m1 = new MathUtil("william",["william"]);
m1.programmer.push("william2"); var m2 = new MathUtil("peter",["peter"]);
m1.programmer.push("peter2");

  

更多的回原文看下,多看几遍。

原生JavaScript插件开发[转]的更多相关文章

  1. 原生Javascript插件开发实践

    前言 之前公司设计的网站比较混乱,很多地方不统一,其中一个就是弹出层,导致这个原因是因为,公司的UI换了好几个人,而他们每个人做出来的都不太一样.最近公司开始整顿这个问题,对于统一的这种东西当然是做成 ...

  2. 原生javascript 实现 animate

    原生javascript 实现 animate //animate function getstyle(obj,name){ if(obj.currentStyle){ return obj.curr ...

  3. 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)

    1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...

  4. 你可能不需要 jQuery!使用原生 JavaScript 进行开发

    很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...

  5. 原生JavaScript技巧大收集(11~20)-(终于又被我找到这篇文章了)

    11.原生JavaScript加入收藏夹 function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sT ...

  6. 原生javascript加载运行

    原生javascript加载运行 (function(){ //TODO sometings }()); 在要运行相应代码的位置加入script标签,创建函数并自执行; 关于window.onload ...

  7. 原生javascript模仿win8等待进度条。

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...

  8. 表单美化-原生javascript和jQuery单选按钮(兼容IE6)

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

  9. javascript学习-原生javascript的小特效(原生javascript实现链式运动)

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

随机推荐

  1. 何在不联网的情况下ping通主机与虚拟机

    选择NAT模式,VM对windows选择ping操作时选择VMnet8的IP地址.

  2. float数据在内存中存储方式

    float类型数字在计算机中用4个字节存储.遵循IEEE-754格式标准: 一个浮点数有3部分组成: 符号部分,0 表示正,1表示负. 底数部分 使用二进制数来表示此浮点数的实际值,底数部分实际是占用 ...

  3. Springboot第五篇:结合myBatis进行SQL操作

    前提:和之前同样的,本篇会从前端和后台一起讲述关于SQL的select操作(其他操作原理大致类似,不多做解释了). 大致流程:前端通过AJAX将数据发送到后台的路由,后台路由会根据发送的数据进行SQL ...

  4. Java NIO学习与记录(二):FileChannel与Buffer用法与说明

    FileChannel与Buffer用法与说明 上一篇简单介绍了NIO,这一篇将介绍FileChannel结合Buffer的用法,主要介绍Buffer FileChannel的简单使用&Buf ...

  5. (转)linux运维必会MySQL企业面试题

    linux运维必会MySQL企业面试题  老男孩教育运维班全体学员MySQL必会企业面试题最实战.最细致.最落地的运维实训基地,老男孩教育连续多年国内平均就业工资最高! 数据库的重要性是所有技术里最核 ...

  6. nodejs(四) --- cluster模块详解

    什么是cluster模块,为什么需要cluster模块?  cluster在英文中有集.群的意思. nodejs默认是单进程的,但是对于多核的cpu来说, 单进程显然没有充分利用cpu,所以,node ...

  7. django notes 四: Writing views

    views 其实没什么可看的, 在  django  中 views 就是 controller, 是处理请求的, 就是一个普通的 python 方法. 一般从 request 中提取请求参数, 然后 ...

  8. switch表达式、case穿透

    记得第一次学switch的时候那是还是学习c语言的时候,整体的写if-else,switch,现在回想起来已经是很多年前的事了,好了今天让我们再来回顾下简单的switch 语法 switch(n) { ...

  9. archlinux安装gnome的一些坑随记

    问题1:网络设置无法查看,提示缺少NetworkManager 解决:安装networkmanager库,因为gnome调用的是networkmanager这个软件来管理网络的.然后要启动它:sudo ...

  10. CI中使用log4php调试程序

    下载log4php.我下载的版本是:apache-log4php-2.3.0-src.zip.借压缩,将压缩文件中的src/main/php/文件夹拷贝到CI的application/thrid_pa ...