네이티브 JavaScript 플러그인 개발 방법(지식 포인트 + 작성 방법)
通过 "WWW" 原则我们来了解 JavaScript 插件这个东西
第一个 W "What" -- 是什么?什么是插件,我就不照搬书本上的抽象概念了,我个人简单理解就是,能方便实现某个功能的扩展工具.(下面我会通过简单的例子来帮助读者理解)
第二个 W "Why" -- 为什么? 为什么要有插件这种东西,首先结合第一个 W 来理解就是,使用插件的目的是方便我们实现某一个功能. 也就是说在编程过程中我们只需要找轮子,或者改轮子而不需要重新造轮子.节省开发时间,并且各司其职会更加专业(做得更好)。其次就是方便维护，因为每个功能模块可以分得更清楚，所谓的松耦合。
第三个 W "How" -- 如何做?我们如何开发 JavaScript 插件?这是我们这片文章要谈论的重点.
在讨论如何做之前我们不妨先通过反向思维来看看插件的特点。我们从如何使用 Javascript 插件开始。
假设我们现在要使用插件 js-plugin.js
第一步：引入插件，注意依赖项，例如有些插件是基于 jquery 编写的，先引入 jquery
第二步：通过插件提供的 API 实现我们所要的业务
以经典的 jquery 使用方法为例
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){
$("#Id").html('hello world!');
})
</script>顺便说一句，能使用CDN的尽量使用CDN,这将使你的资源加载得更快.并节省你主机的带宽开销 传送门: BootCDN
上述两点其实也就是说我们的插件要做到，引入相关文件就可以方便地进行使用。换句话说插件必须满足下面的特点：
首先，我觉得插件最重要的一点 -- 复用性。就是说你这个插件在这个项目中是能用的，搬到另一个项目中它也是能用的（废话），并且原则上依赖项越少越好
其次，我觉得这是插件的宗旨 -- 易用性。开发一个插件，如果使用繁琐，倒不如重新造轮子，那就失去了插件的意义。
除此之外，当然还有高效性，考虑执行的效率还有内存的优化。
三、Module 模式
插件开发不得不提的是 Modlule 模式，Module -- 模块，模块化开发，是在编程中十分通用的模式。说白了就是把业务需求分模块。每一个模块负责一个功能的实现。有点像其他面向对象编程语言中的类。例如 JsonHelper 专门负责 json 解析，FilesUpload,专门用来做文件上传的，等等这些。
插件就是用这样一种模块化思想来进行开发的，下面我们通过代码来简单解释下 Module 模式。
var Helloword = function(objId){
var _get_dom = function(Id){
return document.getElementById(Id);
}
var _aim_obj = _get_dom(objId);
var _say_hello = function(str){
_aim_obj.innerHTML = str; HelloWorld.sayHello('hello','hello text');
}
return{
sayHello:_say_hello
}
}由上述代码可见，我们将某些功能，如 “sayHello” 给归到 Helloword （模块）中了。当然我们可以继续在下面添加其他功能，但都归于模块 Helloword 来管理。这就是 Module 的体现。
使用方法（注意这里使用了 new ）
var Hei = new Helloword('hello'); Hei.sayHello('Hello Word');var Hei2 = new Helloword('hi'); Hei2.sayHello('hi');
更直观点，我们来看下完整的代码
<!DOCTYPE html>
<html>
<head>
<title>Module</title>
</head>
<body>
<div Id="hello"></div>
<div Id="hi"></div>
<script type="text/javascript">
var Helloword = function(objId){
var _get_dom = function(Id){
return document.getElementById(Id);
}
var _aim_obj = _get_dom(objId);
var _say_hello = function(str){
_aim_obj.innerHTML = str;
}
return{
sayHello:_say_hello
}
}
var Hei = new Helloword('hello');
Hei.sayHello('Hello Word');
var Hei = new Helloword('hi');
Hei.sayHello('hi');
</script>
</body>
</html>运行结果如下
我们这里需要注意的是，每使用 new 创建出来的新对象都将开辟新的内存空间（新的一份copy），只要引用没有释放，那么该对象的占用的内存空间将不会被回收。那么如何避免过多浪费内存呢？一句话“释放引用”，只需要释放对该对象的所有引用，垃圾回收机制就会将该对象占用的内存空间回收。
var Hei = new Helloword('hello');
Hei.sayHello('Hello Word');
Hei = null;//解除引用这样还要“手动”内存管理，麻烦。如何让该模块在内存中只保留一份（copy）呢？请看下面一段代码
var HelloWorld = (function(){
var _getDom = function(Id){
return document.getElementById(Id)
}
var _sayHello = function(Id,str){
_getDom(Id).innerHTML = str;
}
return {
getDom:_getDom,
sayHello:_sayHello
}
}())使用方法
HelloWorld.sayHello('hello','hello text');
是的,正如你所见到的,不需要 new 了。使用时不再需要创建新对象，也就是说我们只保持了该对象在内存中的一份引用，也就是HelloWorld 对它的引用。当 HelloWorld 对其引用解除时其所占用的内存将得到释放。上述代码实质上是一个匿名闭包。如果对闭包不是很理解的朋友可以看看我写的上一篇文章《浅析 JavaScript 中的闭包(Closures)》
四、插件基础代码
了解了上面的种种之后我们要开始直切主题了。
首先我们创建一个 js 文件 取名为 first-js-plugin.js(啥名字都行)，键入以下代码
;
var plugin =(function(){
function _firstFunc(str){
console.log(str);
};
return{
firstFunc: _firstFunc,
};
})();再创建一个 HTML页面 取名为 pluginTest.html (啥名字都行)
完整代码如下
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="./first-js-plugin.js"></script>
<script type="text/javascript">
plugin.firstFunc("Hello ! I am firstFunc");
</script>
</head>
<body>
</body>
</html>运行结果如下图显示
通过这个简单的插件，我们来分析一下里面的代码.
在分析代码之前我们先来了解另一个东西,自调用匿名函数(防止插件用户定义函数与插件冲突)
(function(){ //code })();可能有些童鞋会觉得有点陌生,那看下下面的代码
var func = function(){ //code } func();其实这两段代码是等价的,当然有点差别,第一个是匿名函数.作用都是定义一个函数并立即执行.
(function(){ //code })();代码分析:
最后面的小括号 () 表示执行该函数
(匿名函数) 小括号(分组表达式)包起来匿名函数的声明,作用相当是将函数声明转为表达式,这样才能执行,仅此而已
如果采取以下写法
function(){ //code }();
编译器报错,问题是函数声明无法执行,表达式才能执行
搞清楚这些之后我们回头给下面的代码加上分析,如下
;//JavaScript 弱语法的特点,如果前面刚好有个函数没有以";"结尾,那么可能会有语法错误
/*
plugin.api_funcs 给对象设置属性,属性值为 自调用匿名函数
这里涉及到js作用域链以及闭包的知识点
*/
var plugin =(function(){
function _firstFunc(str){
alert(str);
};
//返回API
return{
firstFunc: _firstFunc
};
})();我们将代码抽取一下(只为帮助理解，已经理解的朋友请忽略)
//01.定义变量
var plugin = 某对象;
//02.创建对象并返回
(function(){//code;return ...})();//匿名执行函数 return 某对象
//然后看核心的返回
return{firstFunc: _firstFunc};
//说白了就是,通过某个key将一个函数存储起来.使用时通过key访问到这个函数
var plugin = {key:function(){//code}}
//所以最终的体现如下
var plugin = {firstFunc: “具体的函数引用”}所以我们最后才能通过，插件名.属性 来使用插件，正如：
plugin.firstFunc("Hello ! I am firstFunc");
四、插件的几种写法
这里我就不墨迹了,直接上代码,关键处会给注释
面向对象思想 类方式
//自定义类
function plugin(){}
//提供默认参数
plugin.prototype.str = "default param";
//提供方法(如果不传参,则使用默认参数)
plugin.prototype.firstFunc = function(str = this.str){
alert(str);
}
//创建"对象"
var p = new plugin();
//调用方法
p.firstFunc("Hello ! I am firstFunc");//Hello ! I am firstFunc
p.firstFunc();//default param闭包方式
闭包方式就是我们刚刚一直在介绍
var plugin =(function(){
function _firstFunc(str){
alert(str);
};
return{
firstFunc: _firstFunc,
};
})();第二种方式上的一些变化
(function(){
//定义一些默认参数
var _options={
default_word:"default hello"
}
//定义一些api
var _plugin_api = {
firstFunc:function(str = _options.default_word){
alert(str);
return this;//返回当前方法
},
secondFunc:function(){
alert("secondFunc");
return this;//返回当前方法
}
}
//这里确定了插件的名称
this.CJPlugin = _plugin_api;
})();
CJPlugin.firstFunc("hello");//hello
CJPlugin.firstFunc();//default hello
CJPlugin.secondFunc();//secondFunc结语
JavaScript 插件的相关知识今天暂时聊到这了．下篇文章笔者将通过实例来介绍如何开发一款属于自己的省市区三级联动插件．如果有朋友正在学习插件开发．那么下篇文章可能我们有更多可以探讨的话题。
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7540
15
1381
52
83
11
55
19
21
86
WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법
Dec 17, 2023 pm 02:54 PM
WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.
WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술
Dec 17, 2023 pm 05:30 PM
WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술
JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법
Dec 17, 2023 pm 12:09 PM
JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면
WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법
Dec 17, 2023 am 09:39 AM
WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.
JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축
Dec 17, 2023 pm 05:13 PM
JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리
간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법
Jan 05, 2024 pm 06:08 PM
JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용
자바스크립트에서 insertBefore를 사용하는 방법
Nov 24, 2023 am 11:56 AM
사용법: JavaScript에서 insertBefore() 메서드는 DOM 트리에 새 노드를 삽입하는 데 사용됩니다. 이 방법에는 삽입할 새 노드와 참조 노드(즉, 새 노드가 삽입될 노드)라는 두 가지 매개 변수가 필요합니다.
JavaScript 및 WebSocket: 효율적인 실시간 이미지 처리 시스템 구축
Dec 17, 2023 am 08:41 AM
JavaScript는 웹 개발에 널리 사용되는 프로그래밍 언어인 반면 WebSocket은 실시간 통신에 사용되는 네트워크 프로토콜입니다. 두 가지의 강력한 기능을 결합하면 효율적인 실시간 영상 처리 시스템을 만들 수 있습니다. 이 기사에서는 JavaScript와 WebSocket을 사용하여 이 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 첫째, 실시간 영상처리 시스템의 요구사항과 목표를 명확히 할 필요가 있다. 실시간 이미지 데이터를 수집할 수 있는 카메라 장치가 있다고 가정해 보겠습니다.
