Mornlibrary NPM

基础

var i = 1
for (;i;) {
    i++
    console.log(i)
}
//死循环  两个分号中间哪一个是一个判断类型  i为的时候始终为true
var i = 100
for (;i --;) {
    console.log(i)  //打印所有100以内的数
}

typeof

typeof(typeof(undefined)) //string

undefined是NaN

函数调用

var test = function test1() {
    console.log('函数执行')
}
test1() //报错
var test = function test1() {    
    console.log('函数执行')
    test1()  //在内部可以使用
}
test() //调用无限循环  相当于递归
console.log(test.name) //test1

arguments
arguments数组里面的值和是与实参存在映射关系的然而他们并不是同一个变量
假如没有传入实参又在函数内部修改形参的值就无法一一对应因为本质上他们只存在映射关系而不是同一个值

function test(a,b) {
    console.log(arguments.length)//3打印的是实参个数
}
test(1,2,3)
console.log(test.length) //2打印的是形参个数

参数默认值

不管是形参默认值还是传入的实参只要是参数有一个是undefined而一个不是undefined 那么默认就会取不是undefined的值

function test(a=1,b) {
    console.log(a+b)
}
test(undefined,2) //3

function test(a=undefined,b) {
    console.log(a+b)
}
test(1,2) //3
//传入null
function test(a=null,b) {
    console.log(a)
}
test(undefined) //null

函数预编译的顺序

形参和变量声明
实参赋值给实参
寻找当前函数里的函数声明赋值
执行函数

函数作用域

当函数被定义时作用域暂未形成但是作用域链已经形成在当前作用域链的最顶端是全局作用域GO
当函数开始执行的前一刻作用域形成当前的作用域AO被放在了作用域链的最顶端而全局作用域被挤下了一位

function a() {
    function b() {
        var b = 2
    }
    var a = 1
    b()
}
var c = 3
a()

如上函数执行
首先c变量声明函数a声明 a作用域链形成作用域尚未形成 a作用域链的顶端仍然是GO全局作用域
然后c变量赋值3 a函数执行
这时作用域形成 a变量声明 b函数声明但是b函数还未执行作用域尚未形成作用域链已经形成 b函数的顶端暂时还是a函数的AO AO表示a函数的执行上下文
a函数的作用域形成顶端是就是自己的函数作用域 GO的全局作用域已经从顶端被挤下去
然后a赋值为1
b函数执行声明b变量作用域形成 b函数的AO被提到自己的最顶端 a函数的作用域被挤下来 1赋值给b
b函数执行结束函数作用域和AO被销毁作用域链尚未被销毁作用域链的顶端是a函数的执行上下文
b函数结束之后a函数执行结束
a函数作用域和AO被销毁同时b函数的作用域链被销毁 a的作用域链尚未被销毁 a函数作用域链顶端是GO全局作用域

闭包

function test1() {
    var a = 100
    return function add() {
        a++
        console.log(a)
    }
}
var test2 = test1()
test2() //101
test2() //102

首先在全局作用上变量声明test2 函数声明test1
当函数test2执行时其内的作用域链上最顶端的是自己的AO(执行上下文) 然后是test1的AO 最后面是GO(全局作用域)
当函数执行时a++ 自身AO没有a于是去test1的AO中拿到然后执行a++ 最后打印出来
而这个时候函数销毁但是test2被返回出去的时候在外界使用本来在test1执行完毕之后其内的AO应该被销毁
但是外界需要使用的情况下 test1销毁的只是与自身AO的引用
test2需要test1AO中的数据所以AO在这个时候被保存到内存中不被销毁
当第二次使用test2的时候又再次使用这个test1的里面被保存保存的AO
但是是基于现在test1的AO中保存的数据也就是a=101中的基础上改变

立即执行函数

只有函数表达式可以立即执行函数
立即执行函数在执行接收之后就会立即销毁
立即执行函数会忽略函数名

var test = function() {
    console.log(1)//1
}()
//上面的函数已经执行完毕  假如再次调用会报错因为函数已经销毁
test() //报错
//其他写法 加上运算符已经算作表达式其中包括 * + - / && || ()
//()
(function() {
   	console.log(1) //1
})()
//用数字来乘 或者字符串 其他加减除雷同
5 * function() {
    console.log(1) //1
}()
//用或  前面需要是true才能走到后面 与也雷同
‘anyone’ || function() {
    console.log(1) //1
}

来个题

var a = 10
if (function b() {}){
    a += typeof(b)
}
console.log(a)

首先变量a声明然后赋值为10
此时走到if语句中的判断首先这里面是一个true 所以就进入
这个时候等到要typeof(b)的时候其实由于function被加到if括号里面他已经看作表达式现在已经销毁
此时此刻b是一个字符串类型的undefined 再与a相加
结果：10undefined

逗号运算

当在括号里使用逗号的时候默认会使用最后一个值

console.log((5,6)) //6

来个题

首先一个括号里面有两个函数这两个函数都有返回值
fn就相当于(function test1(){},function test2(){})
而取逗号的最后一位fn 就等于 function test2(){return 2}
外面有个立即执行的括号所以就相当于 function test2(){ return}()
立即执行test2函数后return一个返回值2
结果： 2

var fn = (
	function test1() {
        return 1
    },
    function test2() {
        return 2
    }
)()
console.log(fn) //2

构造函数原理

实际上在new之前函数在执行了
而看到前面有一个new的关键字
此时在构造函数Car的内部会声明一个this的空对象(其实并不准确并不是一个完全的空对象)
然后通过this把那些属性给添加到this对象中
等构造函数执行到最后一步会默认把this对象返回出去
所以实例化对象相当于对这个this复制了一个指针
而每构造出一个对象都是独立的存在

function Car(name,color) {
    this.name = name,
    this.color = color
}
var car1 = new Car('banz','red')
var car2 = new Car('mazid','black')
console.log(car1.name) //banz
console.log(car2.name) //mazid

以上代码其实大致相当于以下代码

function Car(name,color) {
    var my = {}
    my.name = name,
    my.color = color
    return my
}
var car1 = Car('banz','red')
var car2 = Car('mazid','black')
console.log(car1.name) //banz
console.log(car2.name) //mazid

但是要注意一点的是在构造函数内部如果使用了this
而return的如果是基本类型
那么将默认还是返回this对象

function Car(name,color) {
    var str = 'abc'
    this.name = name,
    this.color = color
    return str
}
var car1 = new Car('banz','red')
console.log(car1.name) //banz

如果是其他的引用类型则不是如此

function Car(name,color) {
    this.name = name,
    this.color = color
    return {}
}
var car1 = new Car('banz','red')
console.log(car1.name) //undefined

call apply bind 用法和区别

本质上call和bind是用来做函数调用的
在函数调用时候即便不使用call也会在后面隐式的添加上call
call和apply的区别仅仅是传入调用函数的实参是一个个传递还是用arguments传递

function fn(a,b) {
    console.log(a,b,this);
}
fn.call() //window
var obj = {
    m: 0
}
fn.call(obj,1,2) //打印obj对象  1 2
fn.apply(obj,[1,2])

bind
用于返回一个要调用的函数然而并未执行
主要用于绑定一个特定的函数

function fn(a,b) {
    console.log(a,b,this);
}
var obj = {
    m: 0
}
console.log(fn.bind(obj));//打印fn函数
fn.bind(obj)(1,2) //打印obj对象  1 2

call apply bind方法重写

call 和apply以及bind方法是定义在Function的原型对象上的
在原型上对call进行重写
在Function的原型中this指向调用的函数
调用obj.tempFn方法传入参数
删除obj.tempFn方法
返回返回值
优化先做判断当传入的对象是一个null或者undefined的时候默认调用者为window

Function.prototype.call = function(obj,...args) {
    if(obj === null || obj === undefined) {
      obj = window
    }
    obj.tempFn = this
    var result = obj.tempFn(...args)
    delete obj.tempFn
    return result
}
function fn(a,b) {
    console.log(a,b,this);
    return a + b
}
var obj = {
    m: 0
}
console.log(fn.call(obj,1,2));

bind
当调用这个函数的时候返回一个函数
由于要用到this 所以就使用箭头函数
然后通过return 将函数计算结果返回值返回出去

Function.prototype.bind = function(obj,...args) {
    return (...args2) => {
        return this.call(obj,...args,...args2)
    }
}
function fn(a,b) {
    console.log(a,b,this);
    return a + b
}
var obj = {
    m: 0
}
fn.bind(obj)(1,2)

函数节流和防抖封装

节流

function throttle(callback, delay) {
    var pre = 0 //闭包形成可以缓存这个数据
    return function(event) {
        var current = Date.now()
        //当前时间减去起始时间得到时间间隔大于传入的时间间隔时候才调用时间处理
        if(current - pre > delay) {
            //这里的this是事件源
            callback.call(this,event)
            //将起始时间改为当前时间  保持时间间隔
            pre = current
        }
    }
}
function handleClick(event) {
    console.log('按钮点击成功',event);
}
document.getElementById('throttle').onclick = throttle(handleClick,2000);

防抖

function debounce(callback,delay) {
    return function(event) {
        //判断callback中是否存在这个属性  这里使用hasOwnProperty表示不再往原型链上查找 优化性能
        if(callback.hasOwnProperty('timeoutId')) {
            //当连续点击的时候  时间间隔并没有超过预期值 就会一直进入这个判断 反复的将定时器清除掉
            clearTimeout(callback.timeoutId)
        }
        //直接将定时器返回的id挂载到callback上面
        callback.timeoutId = setTimeout(() => {
            callback.call(this,event)
            //当时间间隔超过一定实现  清除这个属性就不会进入定时器的清除
            delete callback.timeoutId
        },delay)
    }
}
function handleClick(event) {
    console.log('按钮点击成功',event);
}
document.getElementById('debounce').onclick = debounce(handleClick,2000);

自定义库

npm init -y初始化生成package.json文件
然后自定义配置

{
  "name": "mornlibrary",
  "version": "1.0.0",
  "mian": "./src/mian.js",
  "description": "",
  "repository": "https://github.com/mornFloyd/mornlibrary.git",
  "author": "mornfloyd",
   //宽泛的版权授权
  "license": "MIT",
  "scripts": {
     //自定义打包命令
    "build": "webpack"
  },
  "dependencies": {},
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "webpack": "^5.36.1",
    "webpack-cli": "^4.6.0"
  }
}

下载局部webpack

npm install webpack -D
npm install webpack-cli

入口配置

创建webpack.config.js配置文件

var path = require('path')
module.exports = {
  //选择生成是否压缩的模式当前这个是开发模式未压缩
  mode: 'development',
  //mode: 'production',
  //入口是一个叫mian的文件
  entry: './src/mian.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    //文件名
    filename: 'mornlibrary.js',
    //实际代码使用的对象名
    library: 'mornlibrary',
    //umd支持多种引入方式包括esm amd common.js
    libraryTarget: 'umd'
  }
}

打包上传到npm

要将淘宝镜像修改为npm的官网

npm config set registry https://registry.npmjs.org/
//这个是设置淘宝镜像
npm config set registry https://registry.npm.taobao.org/

在npm添加自己的npm账号
- 输入完命令行之后依次输入邮箱密码

npm addUser

在本地库推送上去

npm publish

array object function promise axios

@everything-registry/sub-chunk-2204 @zalastax/nolb-mor

1.0.1

3 years ago

1.0.0

3 years ago