Day12 - 闭包应用4 - 类库封装

全栈然叔
2977

365天打卡记录

🔥 创作不易、大家帮然叔 B栈 一键三连

基本概念

闭包和即时函数的另外一个重要用途就是类库封装

类库封装要求

类库封装最重要的要求就是不能让类库中的变量污染全局。

比如jQuery只暴露 $ 就好了

(function () {
  var jQuery = window.$ = function() {
    // Intialize
  }
})()

直立棉的两次赋值

  • jQuery构造器（匿名函数）赋值给window.$ 作为全局变量
  • 为了保证其他代码改变或删除jQuery变量 , 所以声明一个局部变量jQuery, 保证jQuery代码内都可以使用jQuery这个名字。

能够达到以上目的的另外一种封装

var $ = (function() {
  function jQuery() {
    // Initialize
  }
  
  return jQuery

})()

实战Rollup

实际上Rollup使用即时函数iife只是打包方式之一，其他

其他的包括amd, cjs, es, iife, umd。咱们到了rollup面试题的时候再细说。

npx rollup -f iife -n $ -o ./dist/jquery.js  ./src/jquery.js
  • -f 指定iife方式输出
  • -o 指定输出文件
  • -n 指定输出变量名

输出结果:

var $ = (function (exports) {
    'use strict';

    function jQuery() {
        console.log('I am jQuery');
    }

    exports.jQuery = jQuery;

    Object.defineProperty(exports, '__esModule', { value: true });

    return exports;

})({});

略有不同 主要是为了rollup实现方便。

调用

<script src="./dist/jquery.js"></script>
<script>
    // test
    $()
</script>

👌到这为止就把类库封装简单过了一下。下一期我们讲讲webpack打包与闭包应用。

面试攻略

  • 无

点评

  • 闭包处处都有，但是能说出经典应用又是一个难题。说Helloworld和背题没啥区别。

365天打卡记录

🔥 创作不易、大家帮然叔 B栈 一键三连

友情链接：

avatar
获得点赞
文章被阅读