JS 开发工具库

已于 2022-06-13 10:34:24 修改
阅读量3.8k 收藏 1
点赞数
分类专栏： Web 前端知识 文章标签： webpack javascript
于 2022-04-05 18:34:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49809163/article/details/123970795
版权

JS 开发工具库

前言

  • 日常开发中我们总会需要封装各种各样的函数，有的函数在项目中用到多次，有的甚至在很多项目中都要用到
  • 这就需要我们将封装的函数打包成库，方便下次使用
  • 本文将是使用 JavaScript 开发函数，并上传到 npm

一、开发环境准备

1、安装 Node

  • node.js 安装很简单，网上很多教程

2、创建项目

  • 在自己平常放置项目代码的文件夹下创建一个项目文件夹（建议别使用中文名称）
  • 然后在新创建的项目文件夹下分别创建两个文件，一个用于测试的 html，一个用于开发的 js（就是正常开发项目时的样子）
    在这里插入图片描述
  • 然后就可以正常开发了

二、工具函数的封装

1、Ajax 的封装

/**
 * Ajax 封装
 */
 
function ajax({ method, url, params, data }) {
  // 将 method 转为大写 toUpperCase()
  method = method.toUpperCase()

  return new Promise((resolve, reject) => {
    /** 
     * 1、创建 XMLHttpRequest 对象
     **/
    let xhr = null
    if (window.XMLHttpRequest) {
      // 这种方式是对于使用这几种浏览器的情况
      // IE7+，Firefox，Chrome，Opera，Safari ...
      xhr = new XMLHttpRequest();
    } else {
      // 这种方式是针对低版本浏览器：IE6，IE5
      xhr = new ActiveObject("Microsoft.XMLHTTP");
    }

    /**
     * 2、初始化
     **/
    // 需要将 params: { a: 100, b:200 } 转为 a=100&b=200 的形式
    let str = ""
    for (let k in params) {
      str += `${k}=${params[k]}&`
    }
    // 对最后一个参数后面的 & 截掉
    str = str.slice(0, -1)

    xhr.open(method, url + '?' + str)

    /**
     * 3、发送
     */
    if (method === 'POST' || method === 'PUT' || method === 'DELETE' || method === 'PATCH') {
      // 设置请求头信息
      xhr.setRequestHeader('Content-type', 'application/json')
      // 设置请求体
      xhr.send(JSON.stringify(data))
    } else {
      // method === 'GET'
      xhr.send()
    }

    /**
     * 4、处理响应
     */
    // 设置响应结果的类型为 JSON
    xhr.responseType = 'json'
    // 处理函数
    xhr.onreadystatechange = function () {
      // readyState 这个状态的变化值从 0～4 表示 5 种状态
      // 0：请求还未初始化。尚未调用 open()方法
      // 1：启动（请求已建立）。已经调用 open()方法，但未调用 send() 方法
      // 2：请求已发送。已经调用 send() 方法，但未接收到响应
      // 3：接收。开始接收响应数据
      // 4：接收完成。已经全部接收完响应数据，可以在浏览器中使用了
      // status == 200 表示请求成功
      if (xhr.readyState == 4) {
        // 判断响应的状态码是否是 2xx
        if (xhr.status >= 200 && xhr.status < 300) {
          // 成功
          resolve({
            status: xhr.status,
            message: xhr.statusText,
            data: xhr.response
          })
        } else {
          reject(new Error('请求失败，失败的状态码为：' + xhr.status))
        }
      }
    }
  })
}

ajax.get = function (url, options) {
  // 直接使用 ajax 请求 GET 方法
  let config = Object.assign(options, { method: 'GET', url: url })

  return ajax(config)
}

ajax.post = function (url, options) {
  // 直接使用 ajax 请求 GET 方法
  let config = Object.assign(options, { method: 'POST', url: url })

  return ajax(config)
}

ajax.put = function (url, options) {
  // 直接使用 ajax 请求 GET 方法
  let config = Object.assign(options, { method: 'PUT', url: url })

  return ajax(config)
}

ajax.delete = function (url, options) {
  // 直接使用 ajax 请求 GET 方法
  let config = Object.assign(options, { method: 'DELETE', url: url })

  return ajax(config)
}

ajax.patch = function (url, options) {
  // 直接使用 ajax 请求 GET 方法
  let config = Object.assign(options, { method: 'PATCH', url: url })

  return ajax(config)
}

2、datePicker

  • html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div id="date-picker">
  </div>
  <script src="./index.js"></script>
  <script>
    calender.init({
      el: document.getElementById('date-picker'),
      getDate: function (date) {
        console.log("回调=>", date)
      }
    })
  </script>
</body>

</html>
  • css
.picker-input {
  position: relative;
}
.picker-input input {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  color: #606266;
  padding: 0 30px;
  border: 1px solid #dcdef6;
  border-radius: 4px;
  outline: none;
}
.picker-input .picker-prefix {
  position: absolute;
  left: 5px;
  display: inline-block;
  width: 25px;
  height: 40px;
  background-color: red;
}

.calender {
  width: 322px;
  height: 329px;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 5px;
  user-select: none;
}

.calender .header {
  padding: 15px 0 10px;
  text-align: center;
}

.calender .picker-btn {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  /* background-color: green; */
  cursor: pointer;
}

.calender .picker-btn.picker-prev-year {
  color: #606266;
  font-size: 14px;
}
.calender .picker-btn.picker-prev-month {
  color: #606266;
  font-size: 14px;
}
.calender .picker-btn.picker-next-month {
  color: #606266;
  font-size: 14px;
}
.calender .picker-btn.picker-next-year {
  color: #606266;
  font-size: 14px;
}
.calender .picker-date {
  color: #606266;
  font-size: 15px;
  font-weight: 500;
  margin: 0 50px;
}

.calender .content {
  padding: 0 10px 10px 10px;
  color: #606266;
}

.calender .picker-weeks {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  border-bottom: 1px solid #ebeef5;
}
.calender .picker-weeks div,
.calender .picker-days div {
  float: left;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin: 4px 6px;
}
.calender .picker-days div {
  font-size: 13px;
  cursor: pointer;
}
.calender .picker-days div:hover {
  color: #409eff;
}

.calender .picker-days div.is-today {
  color: #409eff;
  font-weight: 700;
}
.calender .picker-days div.other-month {
  color: #c0c4cc;
}
.calender .picker-days div.is-select {
  color: #fff;
  background: #409eff;
  border-radius: 50%;
}
  • js

var calender = {
  date: new Date(),
  weeks: ['日', '一', '二', '三', '四', '五', '六'],
  showDate: {
    year: 0,
    month: 0,
    day: 0
  },
  showDays: [],
  showCalender: false,
  init: function (options) {
    this.initData(options)
    this.render()
    this.handler()
  },
  initData: function (options) {
    this.el = options.el
    this.getDate = options.getDate
    this.showDate = this.getCalender(this.date)
    this.showDays = this.getDays()
    this.selectDay = this.getSelectDay(this.showDate)
  },
  getCalender: function (date) {
    var year = date.getFullYear()
    var month = date.getMonth()
    var day = date.getDate()
    return {
      year: year,
      month: month,
      day: day
    }
  },
  getDays: function () {
    var arr = []
    // 获取某月的第一天
    var firstDay = new Date(this.showDate.year, this.showDate.month, 1)
    // 获取某年某月的第一天对应星期的位置
    let weekIndex = firstDay.getDay()
    // 计算在 6*7 的面板中的第一天，即上个月的多少号是在当前月对应面板的第一天
    let startDay = firstDay - weekIndex * 24 * 60 * 60 * 1000
    for (let i = 0; i < 42; i++) {
      arr[i] = new Date(startDay + i * 24 * 60 * 60 * 1000)
    }
    return arr
  },
  getSelectDay: function (date) {
    if (date instanceof Date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    }
    return `${date.year}-${date.month + 1}-${date.day}`
  },
  render: function () {
    this.el.innerHTML = this.renderInput() + this.renderCalender()
  },
  renderInput: function () {
    return `<div class="picker-input">
    <span class="picker-prefix"></span>
    <input type="text" value="${this.selectDay}">
  </div>`
  },
  renderCalender: function () {
    return `<div class="calender" style="display: ${this.showCalender ? 'block' : 'none'}">
      ${this.renderHeader()}
      ${this.renderContent()}
    </div>`
  },
  renderHeader: function () {
    return `<div class="header">
    <span class="picker-btn picker-prev-year">&lt;&lt;</span>
    <span class="picker-btn picker-prev-month">&lt;</span>
    <span class="picker-date">${this.showDate.year} 年 ${this.showDate.month + 1} 月</span>
    <span class="picker-btn picker-next-month">&gt;</span>
    <span class="picker-btn picker-next-year">&gt;&gt;</span>
  </div>`
  },
  renderContent: function () {
    return `
    <div class="picker-weeks">${this.renderWeeks()}</div>
    <div class="picker-days">${this.renderDays()}</div>`
  },
  renderWeeks: function () {
    var template = ''
    for (var i = 0; i < this.weeks.length; i++) {
      template += `<div>${this.weeks[i]}</div>`
    }
    return template
  },
  renderDays: function () {
    var template = ''
    for (var i = 0; i < 42; i++) {
      var date = this.showDays[i]
      var isCurMonth = this.isCurrentMonth(date)
      template += `
        <div
          class="
            ${isCurMonth.month ? '' : 'other-month'}
            ${isCurMonth.today ? 'is-today' : ''}
            ${isCurMonth.select ? 'is-select' : ''}"
          data-index=${i}
        >${date.getDate()}</div>`
    }
    return template
  },
  isCurrentMonth: function (date) {
    // date 是不是当前月
    // 如果 date 所属的年月 和 当前 showDate 所属的年月一样
    var year = this.getCalender(date).year
    var month = this.getCalender(date).month
    var day = this.getCalender(date).day

    var showDate = this.showDate
    var curYear = showDate.year
    var curMonth = showDate.month

    var todayDate = this.getCalender(this.date)
    var todayYear = todayDate.year
    var todayMonth = todayDate.month
    var todayDay = todayDate.day

    var selectDate = this.getCalender(new Date(this.selectDay))
    var selectYear = selectDate.year
    var selectMonth = selectDate.month
    var chooseDay = selectDate.day

    return {
      month: year === curYear && month === curMonth,
      today: year === todayYear && month === todayMonth && day === todayDay,
      select: year === selectYear && month === selectMonth && day === chooseDay
    }
  },
  handler: function () {
    var that = this
    document.onclick = function (e) {
      var dom = e.target
      var isElChild = that.el.contains(dom) && dom !== that.el

      if (isElChild && !that.showCalender) {
        that.changeCalender(true)
      } else if (!isElChild && that.showCalender) {
        that.changeCalender(false)
      }

      if (isElChild) {
        var isDay = dom.parentNode.classList.contains('picker-days')
        var isBtn = dom.classList.contains('picker-btn')
        var isYearBtn = isBtn && dom.getAttribute('class').includes('-year')
        var isMonthBtn = isBtn && dom.getAttribute('class').includes('-month')

        if (isDay) {
          that.handleDay(dom)
        } else if (isYearBtn) {
          that.handleYear(dom)
        } else if (isMonthBtn) {
          that.handleMonth(dom)
        }
      }
    }
  },
  changeCalender: function (isShowCalender) {
    this.showCalender = isShowCalender
    var calenderDom = this.el.getElementsByClassName('calender')[0]
    calenderDom.style.display = isShowCalender ? 'block' : 'none'
  },
  handleDay: function (dom) {
    // 获取当前点击日期的索引对应的日期对象
    var index = dom.dataset.index
    var date = this.showDays[index]
    var selectMonth = date.getMonth()
    // 得到选择的日期
    this.selectDay = this.getSelectDay(date)

    if (selectMonth !== this.showDate.month) {
      this.showDate.month = selectMonth
      this.showDays = this.getDays()
    }
    // 重新渲染之前将日历面板关闭
    this.showCalender = false
    this.getDate(this.selectDay)
    // 重新渲染
    this.render()
  },
  handleMonth: function (dom) {
    var isPrev = dom.getAttribute('class').includes('prev')
    var moveMonth = isPrev ? -1 : +1
    var showDate = new Date(this.showDate.year, this.showDate.month, this.showDate.day)
    showDate.setMonth(this.showDate.month + moveMonth)
    this.showDate.month = showDate.getMonth()
    this.showDate.year = showDate.getFullYear()
    this.showDays = this.getDays()
    this.render()
  },
  handleYear: function (dom) {
    var isPrev = dom.getAttribute('class').includes('prev')
    var moveYear = isPrev ? -1 : +1
    this.showDate.year += moveYear
    this.showDays = this.getDays()
    this.render()
  }
}

3、文件导出功能的实现

3-1 导出 Word

import docxtemplater from 'docxtemplater';
import { saveAs } from 'file-saver';
import JSZipUtils from 'jszip-utils';
import PizZip from 'pizzip';

/**
 * 导出 Word.docx
 * @param {Object} templateDocxPath 模板文件路径
 * @param {Object} exportWordData 导出数据
 * @param {Object} outFileName 导出文件名
 */
export const exportWord = (templateDocxPath, exportWordData, outFileName) => {

  // 读取并获得模板文件的二进制内容
  JSZipUtils.getBinaryContent(templateDocxPath, function (error, content) {

    if (error) {
      throw error;
    }

    // 创建一个PizZip实例，内容为模板的内容
    let zip = new PizZip(content);
    // 创建并加载docxtemplater实例对象
    let doc = new docxtemplater();
    doc.loadZip(zip);

    doc.setData(exportWordData);

    try {
      // 用模板变量的值替换所有模板变量
      doc.render();
    } catch (error) {
      // 抛出异常
      let e = {
        message: error.message,
        name: error.name,
        stack: error.stack,
        properties: error.properties
      };
      console.log(JSON.stringify({
        error: e
      }));
      throw error;
    }

    // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
    let out = doc.getZip().generate({
      type: "blob",
      mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
    });
    // 将目标文件对象保存为目标类型的文件，并命名
    saveAs(out, outFileName);
  });
}

三、项目打包

1、打包前准备

1.1 初始化项目

  • 安装 Node 之后，进入项目目录下，初始化项目
// 进入项目
// cd lgk-js-tools
// 初始化项目
npm init -y

1.2 下载依赖

  • 下载 webpack 和 webpack-cli 的依赖
  • 如果你对别的打包工具比较熟的话，也可以换成其他打包工具
npm install webpack webpack-cli

1.3 配置 Webpack

  • 需要在项目目录下创建一个 webpack.config.js 文件
const path = require('path')

module.exports = {
  // 模式：development/production
  mode: 'production',
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    // 打包后存放的目录
    path: path.resolve(__dirname, 'dist'),
    // 打包后输出的文件名称
    filename: 'lgk-js-tools.js',
    // 向外暴露的对象名称，用于通过对象调用的方式调用封装的函数
    library: 'Utils',
    // 可以让打包生成的库可以通过 esmodule/commonjs/requirejs 的语法引入
    libraryTarget: 'umd'
  }
}

1.4 配置打包命令

  • 在 package.json 文件中的 scripts 属性添加 打包命令 “build”: “webpack --watch”
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --watch"
  },

1.5 项目打包

npm run build

1.6 测试

  • 在 src/index.js 中添加如下测试函数
export function test() {
  console.log("这是一个测试方法！！")
}
  • 在 test/index.html 文件中测试使用
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 引入打包后的 JS 文件 -->
  <script src="./../dist/lgk-js-tools.js"></script>
  <script>
    // 使用暴露的对象名称 Utils 调用暴露的测试函数
    console.log(Utils.test())
  </script>
</body>

</html>

在这里插入图片描述

2、暴露工具函数

2.1 在工具函数中使用 export 导出

  • 例如：
/**
 * Ajax 封装
 */

export function ajax({ method, url, params, data }) {
  // 将 method 转为大写 toUpperCase()
  method = method.toUpperCase()

  return new Promise((resolve, reject) => {
    /** 
     * 1、创建 XMLHttpRequest 对象
     **/
    let xhr = null
    if (window.XMLHttpRequest) {
      // 这种方式是对于使用这几种浏览器的情况
      // IE7+，Firefox，Chrome，Opera，Safari ...
      xhr = new XMLHttpRequest();
    } else {
      // 这种方式是针对低版本浏览器：IE6，IE5
      xhr = new ActiveObject("Microsoft.XMLHTTP");
    }

    /**
     * 2、初始化
     **/
    // 需要将 params: { a: 100, b:200 } 转为 a=100&b=200 的形式
    let str = ""
    for (let k in params) {
      str += `${k}=${params[k]}&`
    }
    // 对最后一个参数后面的 & 截掉
    str = str.slice(0, -1)

    xhr.open(method, url + '?' + str)

    /**
     * 3、发送
     */
    if (method === 'POST' || method === 'PUT' || method === 'DELETE' || method === 'PATCH') {
      // 设置请求头信息
      xhr.setRequestHeader('Content-type', 'application/json')
      // 设置请求体
      xhr.send(JSON.stringify(data))
    } else {
      // method === 'GET'
      xhr.send()
    }

    /**
     * 4、处理响应
     */
    // 设置响应结果的类型为 JSON
    xhr.responseType = 'json'
    // 处理函数
    xhr.onreadystatechange = function () {
      // readyState 这个状态的变化值从 0～4 表示 5 种状态
      // 0：请求还未初始化。尚未调用 open()方法
      // 1：启动（请求已建立）。已经调用 open()方法，但未调用 send() 方法
      // 2：请求已发送。已经调用 send() 方法，但未接收到响应
      // 3：接收。开始接收响应数据
      // 4：接收完成。已经全部接收完响应数据，可以在浏览器中使用了
      // status == 200 表示请求成功
      if (xhr.readyState == 4) {
        // 判断响应的状态码是否是 2xx
        if (xhr.status >= 200 && xhr.status < 300) {
          // 成功
          resolve({
            status: xhr.status,
            message: xhr.statusText,
            data: xhr.response
          })
        } else {
          reject(new Error('请求失败，失败的状态码为：' + xhr.status))
        }
      }
    }
  })
}

ajax.get = function (url, options) {
  // 直接使用 ajax 请求 GET 方法
  let config = Object.assign(options, { method: 'GET', url: url })

  return ajax(config)
}

ajax.post = function (url, options) {
  // 直接使用 ajax 请求 GET 方法
  let config = Object.assign(options, { method: 'POST', url: url })

  return ajax(config)
}

ajax.put = function (url, options) {
  // 直接使用 ajax 请求 GET 方法
  let config = Object.assign(options, { method: 'PUT', url: url })

  return ajax(config)
}

ajax.delete = function (url, options) {
  // 直接使用 ajax 请求 GET 方法
  let config = Object.assign(options, { method: 'DELETE', url: url })

  return ajax(config)
}

ajax.patch = function (url, options) {
  // 直接使用 ajax 请求 GET 方法
  let config = Object.assign(options, { method: 'PATCH', url: url })

  return ajax(config)
}

2.2 在入口函数引入

  • 在 src/index.js 中引入
/**
 * 将工具函数文件引入，再通过 src/index.js 暴露
 */

export { ajax } from "./ajax/index.js"

// export function test() {
//   console.log("这是一个测试方法！！")
// }

2.3 测试使用

  • 使用 npm install 的方式安装使用
// 安装
npm install lgk-js-tools
// 引入
import * as Utils from "lgk-js-tools"
  • 在 test/index.html 文件中直接引入测试使用
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 引入 -->
  <script src="./../dist/lgk-js-tools.js"></script>
  <script>
    // console.log(Utils.test())
    // Utils.ajax({
    //   url: '这里填URL',
    //   method: 'post',
    //   // params 里面是请求参数
    //   params: {
    //     a: 100
    //   },
    //   // data 里面的是请求体
    //   data: {
    //     b: 200
    //   }
    // })
    Utils.ajax.get('这里填URL', {
      // params 里面是请求参数
      params: {
        a: 100
      },
    })
      .then(res => {
        console.log("res=>", res)
      }).catch(err => {
        console.log("err=>", err)
      })
  </script>
</body>

</html>

四、项目发布

1、注册 npm 账号

  • 直接注册即可，没有什么特别的要求

2、修改 package.json 配置

  • name 属性值必须唯一，在发布之前将想发布的名称到 npm 仓库搜一下看有没有
  • version 版本号每次发布必须与之前发布的不相同，否则会报错
  • main 属性值必须指定为打包生成的 js 文件
  • author 属性用于指定作者（可以不添加）
  • description 属性用于描述这个工具库的作用（可以不添加）
  • keywords 属性用于填写关键词，方便别人检索（可以不添加）
{
  "name": "lgk-js-tools",
  "version": "1.0.1",
  "main": "./dist/lgk-js-tools.js",
  "description": "",
  "author": {
    "name": "lgk"
  },
  "keywords": [
    "ajax",
    "js",
    "lgk",
    "utils"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --watch"
  },
  "license": "ISC",
  "dependencies": {
    "webpack": "^5.71.0",
    "webpack-cli": "^4.9.2"
  }
}

3、切换 npm 源

  • 查看当前所使用的源
npm get registry
  • 检查现在所使用的 npm 源，如果不是 npm 源，需要切换回来
nrm ls

在这里插入图片描述

  • 切换 npm 源为 https://registry.npmjs.org/
// 切换为 npm 源
npm config set registry https://registry.npmjs.org/
// 切换为 taobao 源
npm config set registry http://registry.npm.taobao.org/

4、登录与发布

  • ⚠️注意：一定要先进入到项目目录下
cd lgk-js-tools
  • 登录
npm login

// 或者
npm addUser
  • 填写登录信息：用户名、密码、邮箱、验证码
    在这里插入图片描述
  • 发布
npm publish
  • 需要等几分钟后就可以在 npm 查看了
    在这里插入图片描述

5、强制删除已发布的库

  • ⚠️注意：必须在 72 小时之内，否则不能再被删除
  • 执行删除命令
npm unpublish --force

项目源码

@lgk_Blog
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web开发工具库.rar
08-20
总的来说，"web开发工具库.rar" 是一个全面的Web开发资源集合，涵盖了前端的JavaScript、CSS、HTML，后端的PHP，以及设计和开发工具，对于任何Web开发者来说都是宝贵的财富。通过深入理解和运用这些工具，开发者能够...
lime-util 前端模块化 JavaScript 工具库
qq575792372的博客
12-01 1101
🔥 lime-util 🔥 是一个 前端模块化 JavaScript 工具库，目前共有 245+ ⚡️ 个 Api 方法，包含了开发中经常用到的一些模块方法集合，如字符串，数组，浏览器缓存，浏览器Cookie，Dom处理，日期工具，数学计算，文件处理，正则校验，微信小程序工具库等等
分享 7 个有用的 JavaScript 库，提升你的开发效率
前端达人
06-27 3132
当涉及到前端开发时，JavaScript是我们最重要的工具之一。它为我们提供了丰富的功能和交互性，使我们能够创造出令人惊叹的Web应用程序。然而，有时候我们可能会遇到一些常见的问题，比如处理日期、实现拖拽功能、管理快捷键等等。好在开发者社区中有一些优秀的JavaScript库可以帮助我们解决这些问题，并为我们的开发工作带来巨大的便利和效率提升。在本文中，我将分享七个值得关注的JavaScript库...
2024年最全了解 JavaScript 模块系统基础知识，搭建自己的库(1)，蚂蚁金服三面通过率
2401_84618023的博客
05-14 805
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】通过import导入，通过export导出静态分析——你可以决定编译时的导入和导出（静态），你只需要看源码，不需要执行它由于 ES6 支持静态分析，因此摇树优化是可行的始终获取实际值，以便。
开发一个自己的 JS 库，都需要哪些知识？
程序员成长指北
01-12 329
考拉???? 又来送福利啦为反馈广大读者粉丝们的大力支持，特地选了5本《现代JavaScript库开发》实体书籍（包邮送）作为礼品。具体参与方式请看文末！文末！文末！最近一年，互联网裁员现象愈演愈烈，很多大厂裁员的消息冲上了微博热搜，这不禁让很多程序员心中焦虑。我也时常在想，什么样的人能够抵御这场互联网寒冬，抑或不怕重走一遍求职路呢？答案其实很简单，就是那些在无意义的“重复造轮子”内卷中依然能够...
教你发布一个按需加载的JS工具包
qq_41831345的博客
02-16 1121
创建项目 新建文件夹airspeed 执行 npm init 会生成一个简单的json文件： { "name": "airspeed", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license":
JavaScript模块化开发
JUSNYA的博客
09-14 597
◼ 我们需要知道CommonJS是一个规范，最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS，后来为了体现它 的广泛性，修改为CommonJS，平时我们也会简称为CJS。 事实上AMD的规范还要早于CommonJS，但是CommonJS目前依然在被使用，而AMD使用的较少了； 注意：这里的 {}里面不是ES6的对象字面量的增强写法，{}也不是表示一个对象的； 在Node中每一个js文件都是一个单独的模块； 它也采用的也是异步加载模块，但是它将CommonJS的优点吸收了过来；
JavaScript开发工具 共享
03-15
JavaScript开发工具是Web开发中的重要组成部分，它极大地提升了前端开发者的工作效率。JavaScript作为一种动态类型的脚本语言，广泛应用于网页交互、浏览器扩展、服务器端开发（Node.js）等多个领域。随着技术的发展...
JavaScript工具库
08-12
另一个值得一提的工具库是Prototype，它专注于提供类和面向对象的功能，使得JavaScript开发更加接近传统的面向对象编程。Prototype也有良好的浏览器兼容性，并且在Ajax和DOM操作方面表现优秀。 再者，Underscore.js...
WebStorm JavaScript开发工具 Mac版
10-08
WebStorm是一款由JetBrains公司开发的专业JavaScript开发工具，尤其针对Web前端开发，它在Mac平台上提供了强大的集成开发环境（IDE）。这款IDE专为JavaScript、HTML、CSS以及其他前端技术设计，支持Node.js、...
JavaScript工具类函数库
最新发布
07-09
无论是进行日期计算、数值格式化，还是字符串比较，这个工具库都能提供高效、简洁的解决方案。适合需要在项目中快速实现常用功能而又不想重复编写相同代码的开发者。资源经过测试，确保了代码的准确性和稳定性。
2024年Node.js精选：50款工具库集锦，项目开发轻松上手（四）
前端达人
04-11 1029
在我们这个信息爆炸的时代，技术更新换代速度之快让人目不暇接。Node.js作为后端开发中的热门技术，它的强大功能离不开一个宝库——NPM。你知道吗，这个宝库里藏着超过150万个NPM包，没有这些宝贝，Node.js就像是缺了一臂的勇士，依然强大，但却不那么无敌了。今天，我们继续我们的探索之旅，在这个系列文章的第4部分，我们将一起探讨编号31至40的NPM包。这些包可能是你日常开发中不可或缺的利器，...
打造自己的 JavaScript方法工具库
風缘的博客
12-27 3547
前言作为战斗在业务一线的前端，要想少加班，就要想办法提高工作效率。这里提一个小点，我们在业务开发过程中，经常会重复用到 日期格式化、 url参数转对象、 浏览器类型判断、 节流函数等一类函数，这些工具类函数，基本上在每个项目都会用到，为避免不同项目多次复制粘贴的麻烦，我们可以统一封装，发布到 npm，以提高开发效率。常用函数汇总这里先分类整理下，之前项目中多次用到的工具函数。1.Array1.1 a
【总结】做一个自己的前端js工具库
雾空
10-22 763
“世界上本没有路，走的人多了，也便成了路” — 鲁迅 我们日常开发中经常会遇到一些可复用的代码，特别是在历经的项目多了，
8102年如何写一个现代的JavaScript库
weixin_33769125的博客
10-08 282
我写过一些开源项目，在开源方面有一些经验，最近开到了阮老师的微博，深有感触，现在一个开源项目涉及的东西确实挺多的，特别是对于新手来说非常不友好 最近我写了一个jslib-base，旨在从多方面快速帮大家搭建一个标准的js库，本文将已jslib-base为例，介绍写一个开源库的知识 jslib-base 最好用的js第三方库脚手架，赋能js第三方库开源，让开发一个js库更简单，更专业 文档 所...
前端高效开发JavaScript库！
咕噜咕噜wy的博客
09-30 458
前端高效开发JavaScript库目录 文章目录前端高效开发JavaScript库目录一、函数库lodash二、请求库axiosflyio三、富文本vue-ueditor-wrap四、动画库Animate.cssMagic.cssmove.js五、滚动库BetterScroll六、存储类store.js[js-cookie ](https://www.npmjs.com/package/js-cookie)七、Mock数据类Mockjs八、数据可视化EChartsD3.js[Three.js ](http:
开发脚手架常用的JS库
zxw的博客
03-29 784
开发脚手架的js库：命令行交互-inquirer、命令行loading-ora、命令行文字样式-chalk、命令行日志-npmlog
JavaScript 开发者的 5 款必备工具
热门推荐
Aa112233aA1的博客
09-17 1万+
工欲善其事，必先利其器，一款优秀的开发工具能够极大提高程序开发效率与体验。在Web前端开发中，常用的开发工具有Visual Studio Code、Sublime Text、HBuilder等，下面我们就来介绍这些开发工具的特点。 1.Visual Studio Code Visual Studio Code(简称VS Code)是一款由微软公司开发的，功能十分强大的轻量级编辑器。该编辑器提供了丰富的快捷键，集成了语法高亮、可定制热键绑定、括号匹配以及代码片段收集的特性,并且支持多种语法和文件格式的编写。M
Visual Studio 2015与ASP.NET 5的JavaScript前端开发工具
"JSWebTools-VS2015：微软发布的一份关于如何在Visual Studio 2015和ASP.NET 5环境下使用JavaScript及前端Web开发工具的白皮书。" 本文档主要介绍了与Visual Studio 2015和ASP.NET 5协同工作的JavaScript和前端Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值