如何优雅的写出高质量的JS插件？
时间：2023-03-28 11:07:25
HTML
鍦ㄤ竴涓槼鍏夋槑濯氱殑鏃╂櫒锛屾垜姝ｆ偁闂插湴鍠濈潃鍜栧暋锛岀獊鐒堕瀵煎悜鎴戣蛋鏉ャ€傛垜杩呴€熺啛缁冨湴鍒囧嚭浜哣SCode锛屽钩闈欏湴闂細棰嗗锛屾€庝箞浜嗭紵棰嗗鎷嶄簡鎷嶆垜鐨勮偐鑶€锛氫綘涓婃灏佽鐨勬柟娉曪紝鍚屼簨璺熸垜璇村緢濂界敤锛屼笉濡傚仛鎴怞S鎻掍欢缁欏ぇ瀹剁敤銆傛垜鏀句笅鎵嬩腑鐨勬澂瀛愶紝鐢╀簡鐢╃溂鍓嶄粎鍓╃殑鍑犻鍒樻捣锛氭病闂锛屽皬鍑柉锛佺劧鍚庡氨寮€濮嬫懜楸?...鍘熷瀷閾剧紪鍐欏紑濮嬪啓鎻掍欢锛岄鍏堣浜嗚ВJS妯″潡鍖栥€傛棭鏈熺殑妯″潡鍖栨槸閫氳繃浣跨敤鍑芥暟鑷墽琛屾潵瀹炵幇鐨勩€傚湪鍗曠嫭鐨勫嚱鏁颁綔鐢ㄥ煙涓墽琛屼唬鐮佸彲浠ラ伩鍏嶆彃浠跺畾涔夊彉閲忔薄鏌撳叏灞€鍙橀噺銆備緥濡傦紝涓嬮潰鐨勪唬鐮佸疄鐜颁簡涓€涓畝鍗曠殑闅忔満鏁扮敓鎴愬櫒鎻掍欢锛?(function(global){"usestrict";varMyPlugin=function(name){this.name=name};MyPlugin.prototype={say:function(){console.log('Welcome:',this.name)},random:function(min=0,max=1){if(min<=Number.MAX_SAFE_INTEGER&&max<=Number.MAX_SAFE_INTEGER){returnMath.floor(Math.random()*(max-min+1))+min}}};//鍑芥暟鑷墽琛屼紶鍏his锛堝叏灞€涓婁笅鏂囦腑鐨剋indow锛夛紝骞舵寕杞藉叾涓嬫柟鐨勬柟娉昰lobal.MyPlugin=MyPlugin;//鍏煎CommonJs瑙勮寖exportif(typeofmodule!=='undefined'&&module.exports)module.exports=MyPlugin;})(this);鐩存帴浣跨敤鑴氭湰鏍囩寮曞叆鎻掍欢锛岀劧鍚庡垱寤轰竴涓柊鐨勫疄渚嬫潵浣跨敤鎻掍欢锛歷araFn=newMyPlugin()varnum=aFn.random(10,20)console.log(num)//鎵撳嵃涓€涓殢鏈烘暟10鍜?0濡傛灉涓婇潰鐨勬彃浠跺湪闂寘鏍峰紡涓娇鐢紝濡傛灉璋冪敤浜唖ay鏂规硶锛屽畠浼氭墦鍗版柟娉曚腑鐨勬杩庤瘝锛屽苟鏄剧ず鍒濆鍖栫殑鍚嶇О鍊硷細in鍙橀噺鍙互闅忔剰淇敼锛岃繖鍙兘鏄垜浠笉鎯崇湅鍒扮殑锛歷araFn=newMyPlugin('Yahaha')aFn.name=nullaFn.say()//娆㈣繋锛歯ull鐒跺悗濡傛灉浣犳兂鍒涘缓绉佹湁鍙橀噺锛屽彲浠ュ埄鐢↗S闂寘鍘熺悊锛岀敤浜庣紪鍐欐彃浠躲€傛垜浠娇鐢ㄥ伐鍘傛ā寮忔潵鍒涘缓鍑芥暟銆備妇涓牀瀛愬惂銆備笅闈㈢殑浠ｇ爜瀹炵幇浜嗕竴涓畝鍗曠殑瀹氭椂妫€鏌ユ彃浠讹細(function(global){"usestrict";varMyPlugin=function(value){varval=valuevarreg={phone:/^1[3456789]\d{9}$/,number:/^-?\d*\.?\d+$/};return{getRegs(){returnreg},setRegs(params){reg={...reg,...params}},isPhone(){reg.phone.test}(val)&&console.log('杩欐槸鐢佃瘽鍙风爜')returnthis},isNumber(){reg.number.test(val)&&console.log('Thisisanumber')returnthis}};};//鍑芥暟鑷墽琛屼紶鍏his锛堝叏灞€涓婁笅鏂囦腑鐨剋indow锛夛紝骞跺湪鍏朵笅鏂规寕杞芥柟娉昰lobal.My鎻掍欢=鎴戠殑鎻掍欢锛?/鍏煎CommonJs瑙勮寖exportif(typeofmodule!=='undefined'&&module.exports)module.exports=MyPlugin;})(this);杩欐椂鍊欐垜浠啀娆¤皟鐢ㄦ彃浠讹紝鍏跺唴閮ㄥ彉閲忔槸涓嶅彲璁块棶鐨勶紝鍙兘閫氳繃鎻掍欢鍐呴儴鏂规硶鏌ョ湅/淇敼锛歷araFn=newMyPlugin()console.log(aFn.reg)//undefinedvarreg=aFn.getRegs()console.log(reg)//{"phone":{....},"number":{.....}}鍦ㄤ笂闈㈢殑浠ｇ爜涓紝鎴戜滑杩斿洖杩欎釜鍦╥sPhoneisNumber鏂规硶鐨勬渶鍚庯紝灏辨槸瀹炵幇涓嬮潰鐨勯摼寮忚皟鐢細varaFn=newMyPlugin(13800138000)aFn.isPhone().isNumber()//log:>Thisisthemobilephonenumber>Thisisa鏁板瓧浠縅Query鍐欐硶銆傝繖绉嶅啓娉曟槸涓€绉嶆ā浠縅Q瀹炵幇鐨勫啓娉曪紝鍙互鐪佸幓璋冪敤Steps鏃堕渶瑕佸疄渚嬪寲new锛屽疄鐜扮被浼?(xxx).someFn(....)鐨勮皟鐢ㄦ柟娉曪紝闈炲父閫傚悎鍐欐彃浠秈ns褰撻渶瑕侀绻佺殑DOM鎿嶄綔鏃躲€傜瑪鑰呬互鍓嶅湪灏忛」鐩腑瀹炵幇杩囦竴浜涚被JQ鐨勯€夋嫨鍣紝涓轰簡閬垮厤寮曞叆鏁翠釜JQ锛屽疄鐜版彃浠剁殑鏍稿績鎬濇兂濡備笅锛歷arFn=Function(params){returnnewFn.prototype.init(params)}Fn.prototype={init:function(){}}Fn.prototype.init.prototype=Fn.prototype鍙鍏舵牳蹇冩槸JS鍘熷瀷閾剧殑鏈€缁堜娇鐢ㄣ€傞鍏堬紝瀹冧富鍔ㄥ疄渚嬪寲骞惰繑鍥炲叾鍘熷瀷涓婄殑init鏂规硶銆俰nit鐩稿綋浜庢瀯閫犲嚱鏁扮殑浣滅敤锛屾鏃惰繑鍥炵殑瀹炰緥涓嶅寘鍚獸n鏂规硶銆傛垜浠皟鐢ㄧ殑鏃跺€欙紝JS鑷劧浼氫粠init鐨勫師鍨嬪璞′腑鏌ユ壘锛屾墍浠ユ渶缁坕nit涓嬬殑鍘熷瀷鎸囧悜浜咶n鐨勫師鍨嬨€傞€氳繃杩欎釜鈥滃濞冣€濈殑鏂规硶锛屽彲浠ヨ鎴戜滑鍦ㄤ笉瀹炰緥鍖朏n鐨勬儏鍐典笅锛屾纭殑璁块棶鍒癋n涓嬬殑鍘熷瀷瀵硅薄銆傝浜嗚繖涔堝锛岀粰澶у涓句釜鏍楀瓙馃尠锛屼笅闈㈢殑浠ｇ爜瀹炵幇浜嗕竴涓畝鍗曠殑鏍峰紡鎿嶄綔鎻掍欢锛?(function(global){"usestrict";varMyPlugin=function(el){returnnewMyPlugin.prototype.init(el)};MyPlugin.prototype={init:function(el){this.el=typeofel==="string"?document.querySelector(el):el;},setBg:function(bg){this.elreturnthis},setWidth:function(w){this.el.style.width=w;returnthis},setHeight:function(h){this.el.style.height=h;returnthis}};MyPlugin.prototype.init.prototype=MyPlugin.prototype//script鏍囩瀵煎叆鎻掍欢鍚庯紝鍏ㄥ眬鎸傝浇涓€涓猒$鏂规硶global._$=MyPlugin;})(this||window);婕旂ず锛?!--椤甸潰鍏冪礌-->helloworld
璁剧疆鍏冪礌鐨勮儗鏅細_$('#app').setBg('#ff0')璁剧疆鑳屾櫙涓哄厓绱犲苟鏀瑰彉瀹介珮锛歘$('#app').setBg('#ff0').setHeight('100px').setWidth('200px')宸ョ▼鎻掍欢鍋囪浼氭湁浠ュ悗澶氫汉鍚屾椂寮€鍙戯紝澶у瀷鎻掍欢鍙湁涓€涓狫S缁存姢锛屼竴涓汉鑲畾闅句互鏀拺銆傝繖鏃跺€欏氨闇€瑕佺粍浠跺寲缁嗗寲绮掑害锛屽皢鎻掍欢鎷嗗垎鎴愬涓枃浠讹紝姣忎釜鏂囦欢璐熻矗鍚勮嚜鐨勫姛鑳斤紝鏈€鍚庢墦鍖呮垚涓€涓枃浠跺紩鐢ㄣ€傜幇鍦‥S妯″潡鍖栧彲浠ヨ交鏉惧簲瀵瑰姛鑳芥媶鍒嗭紝鎵€浠ユ垜浠彧闇€瑕佷竴涓猵ackager锛孯ollup.js鏄竴涓笉閿欑殑閫夋嫨锛屾湁浜嗗畠鎴戜滑鍙互鏇翠紭闆呯殑鍐欐彃浠讹紝瀹冧細甯垜浠墦鍖呫€傝澶氬ぇ鍨嬫鏋跺Vue鍜孯eact閮界敤瀹冨皝瑁呫€俁ollup鏄疛avaScript鐨勬ā鍧楁墦鍖呭櫒锛屽彲浠ュ皢灏忓潡浠ｇ爜缂栬瘧鎴愭洿澶ф洿澶嶆潅鐨勪笢瑗匡紝渚嬪搴撴垨搴旂敤绋嬪簭銆傚畼缃戦摼鎺ュ垱寤哄疄渚嬩笅闈㈡垜浠竴姝ユ瀹炵幇杩欎釜宸ョ▼鎻掍欢銆傛病閭ｄ箞澶嶆潅銆傞鍏堝垱寤轰竴涓洰褰曪細mkdir-pmy-project/src鐒跺悗杩愯npminit鍒濆鍖栭」鐩紝涓€璺洖杞︼紝鐒跺悗涓洪」鐩畨瑁匯ollup锛歯pminstall--save-devrollup鍒涘缓涓€涓叆鍙ｆ枃浠秈ndex銆俲s鍦ㄦ牴鐩綍涓嬶紝src涓嬬殑main.js鐢ㄤ簬鎺ヤ笅鏉ョ殑娴嬭瘯锛?/index.jsimportmainfrom'./src/main.js';console.log(main);//src/main.jsexportdefault'浣犲ソ涓栫晫锛?;createrollup.config.jsimportbabelfrom'rollup-plugin-babel'intherootdirectory//babel:compilethefinalcodeintoes5,we寮€鍙戜唬鐮佹棤娉曞鐞嗗吋瀹规€с€俰mportcommonjsfrom'rollup-plugin-commonjs'importresolvefrom'rollup-plugin-node-resolve'//resolve锛宑ommonjs锛氱敤浜庡吋瀹逛緷璧朿ommonjs瑙勮寖鐨勫寘銆傚鍑洪粯璁ゅ€納杈撳叆锛?index.js'锛岃緭鍑猴細[{鏂囦欢锛?dist/main.umd.js'锛屾牸寮忥細'umd'锛屽悕绉帮細'bundle-name'锛寎锛寋鏂囦欢锛?dist/main.es.js',鏍煎紡:'es',},{鏂囦欢:'dist/main.cjs.js',鏍煎紡:'cjs',},],鎻掍欢:[babel({exclude:'node_modules/**',}),resolve({jsnext:true,main:true,browser:true,}),commonjs(),],}瀹夎浠ヤ笂渚濊禆骞惰繍琛岋細npminstall--save-dev@babel/core@babel/preset-envrollup-plugin-babel@latestrollup-plugin-node-resolverollup-plugin-commonjs淇敼package.json锛屾坊鍔犺剼鏈懡浠わ細......."scripts":{......"dev":"rollup-c-w"}锛屾渶鍚庤繍琛宯pmrundev鐪嬫晥鏋滐細绀轰緥缁撴灉鎵撳寘瀹屾垚鏈€缁堟枃浠朵綅缃細杩愯nodedist/main.cjs.js锛氭墦鍖呮枃浠舵牸寮忚鏄?.umd涓€绉嶆暣鍚堜簡CommonJS銆丄MD銆丆MD銆両IFE鐨勬墦鍖呮柟寮忥紝鐪嬬湅涓婇潰鐨刪elloworld浼氳鎵撳寘鎴愪粈涔堬細(function(global,factory){typeofexports==='object'&&typeofmodule!=='undefined'?module.exports=factory()锛氱被鍨嬪畾涔?=='鍑芥暟'&&define.amd锛焏efine(factory):(global=typeofglobalThis!=='undefined'?globalThis:global||self,global["bundle-name"]=factory());})(this,(function(){'浣跨敤strict';.....鐪佺暐浠ｇ爜.....returnxxxxxxxx;}));鍙互鐪嬪嚭锛屽鍑虹殑鏂囦欢灏辨槸鎴戜滑涔嬪墠涓€鐩翠娇鐢ㄧ殑鍑芥暟鑷墽琛屽紑鍙戞柟寮忥紝澧炲姞浜嗗悇绉嶅吋瀹规€у垽鏂唬鐮佷細鍦ㄤ粈涔堢幆澧冧笅瀵煎叆銆?.es鐜颁唬JS鏍囧噯锛屽鍑虹殑鏂囦欢鍙兘浣跨敤ES妯″潡鍖栧鍏ャ€?銆乧js鏄寚CommonJS瑙勮寖瀵煎嚭鐨勬牸寮忥紝鍙兘鍦∟ode鐜涓嬪鍏ャ€傝ˉ鍏咃細鍦ㄦ棭鏈熺殑妯″潡鍖栧紑鍙戜腑锛岄噰鐢ㄥ嚱鏁拌嚜鎵ц鐨勬柟寮忥紝鍦ㄥ崟鐙殑鍑芥暟浣滅敤鍩熶腑鎵ц浠ｇ爜锛堝JQuery锛夈€侫MD锛氬紩鍏equire.js缂栧啓妯″潡鍖栵紝寮曠敤渚濊禆蹇呴』鎻愬墠澹版槑銆侰MD锛氬紩鍏ea.js缂栧啓妯″潡鍖栵紝鐗圭偣鏄彲浠ュ姩鎬佸紩鍏ュCommonJS鐨勪緷璧栵細NodeJs涓殑妯″潡鍖栧彧閫傜敤浜庢湇鍔＄锛屾槸鍚屾鍔犺浇ESModules锛欵S6涓柊鐨勬ā鍧楀寲鏄洰鍓嶇殑涓绘祦銆傛湰鏂囧墠涓夌鎻掍欢鍐欐硶閮芥槸鍒╃敤鍑芥暟鑷墽琛岋紙IIFE锛夊疄鐜扮殑鎻掍欢锛屽叏灞€娉ㄥ叆鎻掍欢鏃跺吋瀹笴ommonJS瑙勮寖锛屼絾涓嶅吋瀹笰MDCMD锛屽洜涓烘湁鍩烘湰涓婃病鏈変娇鐢ㄨ繖涓ょ妯″潡鍖栫殑椤圭洰銆侫utomationAPIDocumentation涓€涓狫S鎻掍欢濡傛灉娌℃湁鏂囨。锛屽氨鍍忔病鏈夎鏄庝功鐨勭簿瀵嗕华鍣ㄣ€傚綋鍒汉浣跨敤浣犵殑鎻掍欢鏃讹紝浠栦笉鍙兘鏌ョ湅婧愮爜灏辩煡閬撹繖涓彃浠舵湁鍝簺鏂规硶锛屽畠鐨勭敤閫旀槸浠€涔堬紝浼犻€掍粈涔堝弬鏁扮瓑绛夈€傛墍浠ヨ繖閲屾垜浠娇鐢↗SDoc鏉ュ垱寤篈PI鏂囨。锛屼娇鐢ㄦ柟渚匡紝鍙渶瑕佸湪浠ｇ爜涓啓涓婃爣鍑嗙殑娉ㄩ噴锛屽嵆鍙牴鎹敞閲婅嚜鍔ㄧ敓鎴愭枃妗ｏ紝涓€涓惧寰楋紝闈炲父浼橀泤锛乶pminstall--save-devjsdocopen淇敼package.json锛屾坊鍔犺剼鏈懡浠わ細......"scripts":{......"doc":"jsdocdist/main.es.js&&nodeserver.js"}锛屽湪鏍圭洰褰曚笅鍒涘缓鏂囦欢server.js锛歷aropen=require('open');open(`out/index.html`);//杩欐槸apidoc榛樿鐢熸垚鐨勮矾寰勶紝杩欓噷鍙槸涓轰簡鑷姩鎵撳紑缃戦〉锛岀幇鍦ㄥ彲浠ヤ娇鐢╪pmrundoc鍛戒护鐢熸垚鏂囨。浜嗭紝杩樻槸涓句釜鏍楀瓙馃尠锛屾垜浠坊鍔犱竴涓枃浠禔rrayDelSome.js鍦╯rc鐩綍涓嬶細/****@desc瀵硅薄鏁扮粍鍘婚噸*@param{Array}arr*@param{String}瀵硅薄涓浉鍚岀殑鍏抽敭瀛楋紙姣斿id锛?@return{Array}杩斿洖涓€涓柊鐨勬暟缁勶紝渚嬪锛欰rrayDelSome([{id:1},{id:2},{id:1}],'id')->return:[{id:1},{id:2}]*/functionArrayDelSome(arr,key){constmap=newMap()returnarr.filter((x)=>!map.has(x[key])&&map.set(x[key],true))}exportdefaultArrayDelSome杩欎釜example鍙槸婕旂ず浜嗘渶鍩烘湰鐨勭敤娉曪紝JSDoc鏈夊绉嶆敞瑙ｏ紝澶у鍙互鑷鎼滅储瀛︿範涓嬶紝涓嶈繃鏈緥涓渶鍩烘湰鐨勬敞瑙ｈ繕鏄鐢ㄧ殑銆傝繍琛宯pmrundoc锛屼細鎵撳紑涓€涓綉椤碉紝鍙互鏌ョ湅鎴戜滑鍒氭墠鍐欑殑宸ュ叿鍔熻兘锛氭敞鎰忥細鐢熸垚鏂囨。鍓嶉渶瑕佸厛鎵撳寘rollup锛屼笉鑳芥墦寮€鎻掍欢璇勮锛屽洜涓轰笂闈㈢殑渚嬪瓙瀹為檯涓婃槸涓篸ist/鐩綍涓嬬殑鏈€缁堟枃浠剁紪璇戠殑Documentation銆傚彂甯冩彃浠惰繕娌℃湁鍙戝竷npm鍖咃紵鍙傝€冭繖绡囨枃绔犮€傜婧愬彂甯冨鏋滀綘鐨勫叕鍙告湁绉佸煙npm绠＄悊婧愶紝鎴栬€呭钩鏃跺枩娆㈢敤娣樺疂婧愶紝寤鸿浣跨敤nrm鍒囨崲锛歯pminrm-g鏌ョ湅婧愶細nrmls娣诲姞婧愶細nrmaddnamehttp//:xxx.xxx.x鈥嬧€媥x.xxx:4873/鍒犻櫎婧愶細nrmdelname浣跨敤鎸囧畾婧愶細nrmusenpm鎬荤粨鍔熻兘姣旇緝绠€鍗曠殑JS鎻掍欢鍙互鐩存帴浣跨敤鍓嶄笁绉嶆柟寮忓紑鍙戙€傚鏋滄秹鍙婂埌鏇村鐨凞OM鎿嶄綔锛屽彲浠ュ啓鍑烘ā浠縅Q鐨勬彃浠朵娇鐢ㄨ捣鏉ユ洿鏂逛究銆傚鏋滄彃浠跺姛鑳芥瘮杈冨锛屽彲鑳戒細褰㈡垚涓€涓ぇ鍨嬫彃浠惰繘琛岄暱鏈熺淮鎶わ紝鍙互閲囩敤宸ョ▼鍖栫殑鏂瑰紡寮€鍙戯紝鏂逛究澶氫汉鍗忎綔锛岄厤濂楃殑鏂囨。涔熸湁鍒╀簬缁存姢銆備互涓婂氨鏄枃绔犵殑鍏ㄩ儴鍐呭锛屽笇鏈涘澶у鏈夋墍甯姪锛佽寰楁枃绔犲啓寰楀ソ锛屽彲浠ョ偣璧炴敹钘忋€備篃娆㈣繋鎮ㄥ叧娉ㄣ€傛垜浼氬湪鍓嶇鎸佺画鏇存柊鏇村鏈夌敤鐨勭煡璇嗗拰瀹炵敤鎶€宸с€備竴鏃ヨ尪鏃犲懗锛屾効涓庝綘鍏卞悓鎴愰暱~
