1. 定义IIFE: Immediately Invoked Function Expression,意为立即调用的函数表达式,也就是说,声明函数的同时立即调用这个函数.对比一下,这是不采用IIFE时的函数声明和函数调用: function foo(){ var a = 10; console.log(a); } foo(); 下面是IIFE形式的函数调用: (function foo(){ var a = 10; console.log(a); })(); 函数的声明和IIFE的区别在于,在函…

1. 定义 IIFE: Immediately Invoked Function Expression,意为立即调用的函数表达式,也就是说,声明函数的同时立即调用这个函数. 首先我们要了解一般情况下什么是函数声明语句,什么是函数表达式语句,以便于接下来的实验. 辨别方法:以“function”开头的有名称的函数是函数声明语句. function a();    //函数声明语句 var a = function();  //函数表达式语句 下面分析一道面试题: var a = function(…

学习rollup.js模块文件打包 一:rollup 是什么?Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码. webpack 和 Rollup 对比不同点: webpack支持在项目中使用对项目进行打包,webpack的核心功能包括 code-splitting(按需加载js)和 static assets(资源文件处理). rollup 适合使用在独立的js库中进行打包.但是目前还不支持 code-splitting 和 热更新,更趋向专注于构建分…

类与模块 类 es6 之前,通常使用构造函数来创建对象 // 构造函数 User function User(username, email) { this.username = username; this.email = email; } // 为了让实例共享方法,将其添加到原型上 User.prototype.changeEmail = function(newEmail) { this.email = newEmail; } // 使用 let user = new User("zen&…

深入学习rollup来进行打包 阅读目录 一:什么是Rollup? 二:如何使用Rollup来处理并打包JS文件? 三:设置Babel来使旧浏览器也支持ES6的代码 四:添加一个debug包来记录日志 五:添加插件来替代环境变量 六:添加 UglifyJS来压缩我们js的代码 七:监听文件变化的插件 --- rollup-watch 八:开启本地服务的插件 --- rollup-plugin-serve 九:实时刷新页面 --- rollup-plugin-livereload 十. 安装同时运…

缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很感兴趣,嗯~~这一块确实挺枯燥的,不能直接拿来代码跑一下那种,不过还是得说下去,继续加油吧!如果大家对昨天的小demo练习的话,相信现在已经对JS的面向对象写法很熟悉了,如果嵌套字面量定义函数,如何使用this关键字指向.今天呢,主要说一下ES6中的一些特性技巧,然后简单说一下模块化的问题,好啦,开始今天的讲…

备注:    前端构建工具   1. 安装 yarn global add rollup yarn global add rollup 2. 基本使用 touch index.js index.js console.log("this is dalong demo"); // build rollup index.js --o app.js --f [iife| cjs umd]   3. 教程 a. es6 支持 main.js foo.js main.js import foo f…

前 为了可以使用新型的语法,顺便在兼容下老的浏览器,所以需要自己搭建个环境,目前我个人推崇使用 rollup,主要喜欢它的 tree-shake,打包出来的代码真的很简洁. 配置 rollup.config.js 主要实现: import resolve from 'rollup-plugin-node-resolve'; import babel from 'rollup-plugin-babel'; import json from 'rollup-plugin-json'; import…

上一次,我们讲到了如何去搭建一个前端工具库的工程,那么今天我们来聊一聊如何去将其打包输出. 需求 事情是这个样子的.我有一个这样的需求,或者是我发现有这么一个需求.就是有时候吧,我也不想搞的那么复杂,我就想写一个简简单单的demo,引入一个JS脚本,CTRL + S一按,浏览器一打开,啪的一下,我就能看见效果,我就能爽起来,我不想npm init .npm install这种去搞一个规范的工程,我就想回到远古时代,感受最纯真的爱.再比如后端的同学或者测试的同学,我不想知道npm是什么,我也不想去…

初始化 Vite 基于原生 ES 模块提供了丰富的内建功能,开箱即用.同时,插件足够简单,它不需要任何运行时依赖,只需要安装 vite (用于开发与构建)和 sass (用于开发环境编译 .scss 文件). npm i -D vite scss 项目配置 同时用 vite 开发插件和构建插件 demo,所以我创建了两个 vite 配置文件. 在项目根目录创建 config 文件夹,存放 vite 配置文件. 插件配置 config/vite.config.ts 插件配置文件 import {…