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) ...
随机推荐
- 微信小程序,预览在开发工具上显示正常,手机预览二维码报request->fail错误,打开手机的调试功能又正常。
这里错误很明显是属于网址错误,开发工具和手机调试都能走request->success: 唯独常规模式下无法显示. 最开始调试过很多方法,没找出原因.最后到小程序开发设置才发现,自己未配置服务器 ...
- VMware Ubuntu18.04 安装及配置笔记
安装Ubuntu 下载虚拟机VMware 下载镜像Ubuntu 过程略, 参考 https://zhuanlan.zhihu.com/p/38797088 Ubuntu配置 特别提示: 在Ubuntu ...
- redis 学习(8)-- redis 客户端 -- Jedis
redis 客户端 -- Jedis 1. Jedis 直连 本质是 TCP 连接. 执行流程 创建Jedis对象 通过Jedis执行命令 返回Jedis执行结果 关闭Jedis连接 demo 要使用 ...
- command----常用命令更新ing
common commands 1:split---拆分文件 [root@localhost split]# split -b 1M split.tar.gz split_ #按1M拆分文件 [roo ...
- 第二章 单表查询 T-SQL语言基础(2)
单表查询(2) 2.2 谓词和运算符 T-SQL有几种不同的语言元素可以指定逻辑表达式,例如,查询过滤器(WHERE和HAVING),CHECK约束,等等. 在逻辑表达式中可以使用各种谓词(取值为TR ...
- [转载]for、foreach、iterator的用法及效率区别
来源:https://www.jianshu.com/p/bbb220824c9a 1.在形式上 for的形式是 for(int i=0;i<arr.size();i++){...} forea ...
- Slimvoice快速而小巧
这可行吗?绝对没问题.完全加载的最大页面只有230 KB.因为所有内容都被缓存和压缩,所以随后查看的每个页面只有大约6 KB,这比我见过的具有相同功能的SPA要小得多. Slimvoice快速而小巧, ...
- 转载:开源许可证GPL、BSD、MIT、Mozilla、Apache和LGPL的区别
转自:https://www.cnblogs.com/findumars/p/6309048.html 首先借用有心人士的一张相当直观清晰的图来划分各种协议:开源许可证GPL.BSD.MIT.Mozi ...
- CentOS 7 安装 gcc 4.1.2
CentOS 7 安装 gcc 4.1.2 0. 参考 在centOS7.2上编译gcc4.1.2 1. 安装了编译所需 yum groupinstall "Development Tool ...
- highcharts的基本使用(转载)
1 概述 Highcharts是一个跨浏览器的JavaScript图表控件,支持柱状图.趋势图.面积图.饼图.环形图.组合图.堆积图.散点图. Highcharts图表的基本功能,只需要引入两个JS类 ...