如何寫一個js/jQuery函式庫（心得總結）-js教程-PHP中文網

首頁

web前端

js教程

如何寫一個js/jQuery函式庫（心得總結）

PHPz

Apr 02, 2017 pm 03:51 PM

寫js/jQuery外掛程式有一些約定俗成的套路，根據這些套路依葫蘆畫瓢，程式碼的結構上就不會出現太大的問題了，特別推薦這個叫javascript-patterns 的專案,一些demo讓我收穫良多。

基本結構

普通的函式庫

#用最基本的匿名函數實作即可

(function(){
    var root = this;
    root.YOURLIB = function(){
        FUNC1 : function(){},
        FUNC2 : function(){}
    }
}())

也可以使用call而不是使用閉包，此時兩種寫法等效，undersocre.js用的是call寫法

(function(){
    var root = this;
    root.YOURLIB = function(){
        FUNC1 : function(){},
        FUNC2 : function(){}
    }
}.call(this))

jQuery 外掛

透過一下方法可以讓的外掛可以跨CMD/AMD/Browser

(function (factory) {
    if (typeof define === &#39;function&#39; && define.amd) {
        // AMD
        define([&#39;jquery&#39;], factory);
    } else if (typeof exports === &#39;object&#39;) {
        // CommonJS
        factory(require(&#39;jquery&#39;));
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    $.fn.render = function() {}
    $.render2 = function() {}
}))

當然,如果不考慮Seajs,RequireJS的話,最方便的還是使用匿名函數，然後把window.jQuery當成參數傳進去

內部組織

我們以bootstrap-select v1.6.3,smooth-scroll這兩個專案來進行分析，

初始化

一般的Library都會提供一套defaults配置文件，然後使用的時候和用戶自定義的settings進行extend, smooth-scroll中的那種

settings = extend(defaults, options ||{})); 写法就相当赞，可以以一种十分简单的方式防止空指针异常。

剩下的就是根據業務劃分業務的funciton了，對於如何劃分，只有多加練習了。

另外，在註解裡像寫上 private 和 public 來區分對外介面和對內介面是個不錯的習慣。

i18n與設定管理

i18n是吧那些國際話的字元全都放到defautls，比較優雅的做法是defaults定義一個對象，這樣國際化檔案

便能和原有的函式庫檔案進行分離，具體參考bootstrap-datapicker

#THE END

以上是如何寫一個js/jQuery函式庫（心得總結）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

PHP教程

1545

276

Related knowledge

高級JavaScript範圍和上下文 Jul 24, 2025 am 12:42 AM

JavaScript的作用域決定變量可訪問範圍，分為全局、函數和塊級作用域；上下文決定this的指向，依賴函數調用方式。 1.作用域包括全局作用域（任何地方可訪問）、函數作用域（僅函數內有效）、塊級作用域（let和const在{}內有效）。 2.執行上下文包含變量對象、作用域鍊和this的值，this在普通函數指向全局或undefined，在方法調用指向調用對象，在構造函數指向新對象，也可用call/apply/bind顯式指定。 3.閉包是指函數訪問並記住外部作用域變量，常用於封裝和緩存，但可能引發

VUE 3組成API與選項API：詳細比較 Jul 25, 2025 am 03:46 AM

Vue3中CompositionAPI更适合复杂逻辑和类型推导，OptionsAPI适合简单场景和初学者；1.OptionsAPI按data、methods等选项组织代码，结构清晰但复杂组件易碎片化；2.CompositionAPI用setup集中相关逻辑，利于维护和复用；3.CompositionAPI通过composable函数实现无冲突、可参数化的逻辑复用，优于mixin；4.CompositionAPI对TypeScript支持更好，类型推导更精准；5.两者性能和打包体积无显著差异；6.

掌握JavaScript並發模式：網絡工人與Java線程 Jul 25, 2025 am 04:31 AM

JavaScript的WebWorkers和JavaThreads在並發處理上有本質區別。 1.JavaScript採用單線程模型，WebWorkers是瀏覽器提供的獨立線程，適合執行不阻塞UI的耗時任務，但不能操作DOM；2.Java從語言層面支持真正的多線程，通過Thread類創建，適用於復雜並發邏輯和服務器端處理；3.WebWorkers使用postMessage()與主線程通信，安全隔離性強；Java線程可共享內存，需注意同步問題；4.WebWorkers更適合前端並行計算，如圖像處理，而

用node.js構建CLI工具 Jul 24, 2025 am 03:39 AM

初始化項目並創建package.json；2.創建帶shebang的入口腳本index.js；3.在package.json中通過bin字段註冊命令；4.使用yargs等庫解析命令行參數；5.用npmlink本地測試；6.添加幫助、版本和選項增強體驗；7.可選地通過npmpublish發布；8.可選地用yargs實現自動補全；最終通過合理結構和用戶體驗設計打造實用的CLI工具，完成自動化任務或分發小工具，以完整句⼦結束。

如何在JS中創建和附加元素？ Jul 25, 2025 am 03:56 AM

使用document.createElement()創建新元素；2.通過textContent、classList、setAttribute等方法自定義元素；3.使用appendChild()或更靈活的append()方法將元素添加到DOM中；4.可選地使用insertBefore()、before()等方法控制插入位置；完整流程為創建→自定義→添加，即可動態更新頁面內容。

在打字稿中的高級條件類型 Aug 04, 2025 am 06:32 AM

TypeScript的高級條件類型通過TextendsU?X:Y語法實現類型間的邏輯判斷，其核心能力體現在分佈式條件類型、infer類型推斷和復雜類型工具的構建。 1.條件類型在裸類型參數上具有分佈性，能自動對聯合類型拆分處理，如ToArray得到string[]|number[]。 2.利用分佈性可構建過濾與提取工具：Exclude通過TextendsU?never:T排除類型，Extract通過TextendsU?T:never提取共性，NonNullable過濾null/undefined。 3

微觀前端體系結構：實施指南 Aug 02, 2025 am 08:01 AM

Microfrontendssolvescalingchallengesinlargeteamsbyenablingindependentdevelopmentanddeployment.1)Chooseanintegrationstrategy:useModuleFederationinWebpack5forruntimeloadingandtrueindependence,build-timeintegrationforsimplesetups,oriframes/webcomponents

JavaScript中的VAR，LET和CONST之間有什麼區別？ Aug 02, 2025 pm 01:30 PM

varisfunction-scoped,canbereassigned,hoistedwithundefined,andattachedtotheglobalwindowobject;2.letandconstareblock-scoped,withletallowingreassignmentandconstnotallowingit,thoughconstobjectscanhavemutableproperties;3.letandconstarehoistedbutnotinitial

See all articles

如何寫一個js/jQuery函式庫（心得總結）

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題