javascript插件制作学习-制作步骤
原生JavaScript插件开发学习
自己制作的demo大家可以看下https://www.cnblogs.com/zimengxiyu/p/9814889.html
插件制作步骤:
(一)构造函数 使用时new一下生成新的实例
var myUtil=function(name,age){
this.name=name;
this.age=age;
}
(二)使用原型模式 可以让多个实例的使用一个方法
var myUtil=function(name,age){
this.name=name;
this.age=age;
} myUtil.prototype={ // 将构造函数置为MathUtil,这里一定要将constructor重新设置回MathUtil,不然会指向Object的构造函数
constructor:myUtil,
add: function(a, b) {
var result= a + b;
alert("result == " + result);
}
}
(三)用来与外部变量隔绝以防污染全局变量。把以上代码放入其中
(function(window){
var myUtil=function(name,age){
this.name=name;
this.age=age;
} myUtil.prototype={
// 将构造函数置为MathUtil,这里一定要将constructor重新设置回MathUtil,不 然会指向Object的构造函数
constructor: MathUtil,
add: function(a, b) {
var result= a + b;
alert("result == " + result);
}
}
window.myUtil=myUtil;//把代码挂载到window上以便外面调用
})(window)
(四)使用时new一下就可以调用里面的方法了
!(function(window) {
var myUtil = function(name, age) {
this.name = name;
this.age = age;
} myUtil.prototype = {
//将构造函数置为myUtil,这里一定要将constructor重新设置回myUtil,不 然会指向Object的构造函数
//有轻度强迫症的表示最好重定向回来,避免挖坑
constructor: myUtil,
add: function(a, b) {
var result = a + b;
alert("result == " + result);
}
}
window.myUtil = myUtil; //把代码挂载到window上以便外面调用
})(window) var v1 = new myUtil("hellow", 14);
v1.add(3,5);
这样一个JavaScript插件小demo就完成了
我们一般把插件都放到一个闭包这样做的好处是用来与外部变量隔绝以防污染全局变量。
!(function(){ })()
javascript插件制作学习-制作步骤的更多相关文章
- JavaScript插件制作-tab选项卡
JavaScript插件制作练习-鼠标划过选项卡切换图片 <!DOCTYPE html> <html> <head> <meta charset=" ...
- 初学者--bootstrap(五)JavaScript插件(上)----在路上(6)
jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...
- JavaScript插件架构
1.HTML布局规则 默认情况下,所有的插件都可以通过设置特定的HTML代码和相应的属性来实现.也就是说,在网页加载的时候,JavaScript代码会自动检测这些标记,并自动绑定相应的事件,而无需添加 ...
- 开源原生JavaScript插件-CJPCD(省市区联动)
一.前言 上两篇博客笔者对 JavaScript Module 模式,闭包等知识点做了简单介绍之后,我们今天开始正式开发一款属于自己的 JavaScript 插件.由于最近项目刚好用到地区选择这一块的 ...
- JQuery实用技巧--学会你也是大神(1)——插件的制作技巧
前 言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架 ...
- bootstrap 支持的JavaScript插件
一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js). 具体使 ...
- Bootstrap JavaScript插件
在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...
- 推荐13款优秀的Twitter Bootstrap JavaScript插件
Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...
- ASP.NET MVC使用Bootstrap系列(4)——使用JavaScript插件
阅读目录 序言 Data属性 VS 编程API 下拉菜单(dropdown.js) 模态框(modal.js) 标签页(tab.js) 工具提示(tooltip.js) 弹出框(popover.js) ...
随机推荐
- [Nest] 05.nest之数据库
数据库 Nest 与数据库无关,允许您轻松地与任何 SQL 或 NoSQL 数据库集成.根据您的偏好,您有许多可用的选项.一般来说,将 Nest 连接到数据库只需为数据库加载一个适当的 Node.js ...
- SDX Instance Resource Assignment Guide 1 of 2
SDX Instance Resource Assignment Guide 1 of 2 Memory and vCPU Requirements for NetScaler VPX https:/ ...
- 12 Python之函数进阶
1. 动态传参 *, ** : 形参: 聚合 位置参数* -> 元组 def func(*args, a, b, c): print(a, b , c, args) func(1,2,3,4,5 ...
- ccs之经典布局(二)(两栏,三栏布局)
接上篇ccs之经典布局(一)(水平垂直居中) 四.两列布局 单列宽度固定,另一列宽度是自适应. 1.float+overflow:auto; 固定端用float进行浮动,自适应的用overflow:a ...
- python之itertools
Python的内建模块itertools提供了非常有用的用于操作迭代对象的函数. count 创建一个迭代器,生成从n开始的连续整数,如果忽略n,则从0开始计算(注意:此迭代器不支持长整数) 如果超出 ...
- Tomcat配置JNDI
JNDI是什么?使用JNDI有什么好处? JNDI是 Java 命名与目录接口(Java Naming and Directory Interface),在J2EE规范中是重要的规范之一. 我个人对j ...
- paramiko:实现ssh协议,对linux服务器资源的访问
介绍 网络传输是遵循协议的,比如SSH,paramiko则是实现了SSHv2协议的一个python库(底层使用的是cryptography).有了paramiko之后,我们便可以通过python使用s ...
- 移远模组-BC95-工作模式之间关系
三种连接状态下,均可发送上行数据( CoAP/UDP): IDLE 下发送数据, 模块会进入 CONNECT 状态: PSM 下发送是数据会唤醒模块, 进入 CONNECT,或者当 TAU(TAU 的 ...
- Linux :file、which 、whereis、locate、find
1 file 观察文件类型 file 文件 2 which 寻找文件 选项与参数: -a : 将所有由PATH目录中可以知道的指令列出,而不止一个被找到的指令名称 3 whereis 寻找特定文件 ...
- 常见shell用法
分析nginx访问日志 awk '{a[b[$1]++]}END{for(i=length(a);i>0;i--)for(j in b)if(b[j]==i){c++;if(c<=10)p ...