네이티브 JavaScript 플러그인 개발 방법(지식 포인트 + 작성 방법)-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

네이티브 JavaScript 플러그인 개발 방법(지식 포인트 + 작성 방법)

高洛峰

Nov 04, 2016 pm 02:47 PM

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(&#39;hello world!&#39;);
    })
</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(&#39;hello&#39;,&#39;hello text&#39;);
    }
    return{
        sayHello:_say_hello
    }
}

由上述代码可见，我们将某些功能，如 “sayHello” 给归到 Helloword （模块）中了。当然我们可以继续在下面添加其他功能，但都归于模块 Helloword 来管理。这就是 Module 的体现。

使用方法（注意这里使用了 new ）

var Hei = new Helloword(&#39;hello&#39;);
Hei.sayHello(&#39;Hello Word&#39;);var Hei2 = new Helloword(&#39;hi&#39;);
Hei2.sayHello(&#39;hi&#39;);

更直观点，我们来看下完整的代码

<!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(&#39;hello&#39;);
            Hei.sayHello(&#39;Hello Word&#39;);
            
            var Hei = new Helloword(&#39;hi&#39;);
            Hei.sayHello(&#39;hi&#39;);        
        </script>
    </body>
    </html>

运行结果如下

네이티브 JavaScript 플러그인 개발 방법(지식 포인트 + 작성 방법)

我们这里需要注意的是，每使用 new 创建出来的新对象都将开辟新的内存空间（新的一份copy），只要引用没有释放，那么该对象的占用的内存空间将不会被回收。那么如何避免过多浪费内存呢？一句话“释放引用”，只需要释放对该对象的所有引用，垃圾回收机制就会将该对象占用的内存空间回收。

var Hei = new Helloword(&#39;hello&#39;);
Hei.sayHello(&#39;Hello Word&#39;);
    
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>

运行结果如下图显示

네이티브 JavaScript 플러그인 개발 방법(지식 포인트 + 작성 방법)

通过这个简单的插件，我们来分析一下里面的代码.

在分析代码之前我们先来了解另一个东西,自调用匿名函数(防止插件用户定义函数与插件冲突)

(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 插件的相关知识今天暂时聊到这了．下篇文章笔者将通过实例来介绍如何开发一款属于自己的省市区三级联动插件．如果有朋友正在学习插件开发．那么下篇文章可能我们有更多可以探讨的话题。

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

Python vs. JavaScript : 커뮤니티, 라이브러리 및 리소스Apr 15, 2025 am 12:16 AM

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

C/C에서 JavaScript까지 : 모든 것이 어떻게 작동하는지Apr 14, 2025 am 12:05 AM

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

JavaScript 엔진 : 구현 비교Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

브라우저 너머 : 실제 세계의 JavaScriptApr 12, 2025 am 12:06 AM

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

See all articles