IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 带你开发一个属于自己的包案例 -> 正文阅读

[JavaScript知识库]带你开发一个属于自己的包案例

1.需要实现的功能

(1)格式化日期
(2)转义HTML中的特殊字符
(3)还原HTML中的特殊字符

2.初始化包的基本结构

(1)新建supertool文件夹,作为包的根目录
(2)在supertool文件夹里面,新建如下的三个文件:

package.json 	(包管理配置文件)
index.js		(包的入口文件)
README.md 		(包的说明文档--官网上面也会以网页的形式展现出来的)

3.初始化package.json

名称功能
name在npm服务器上面的包名(这个名字和文件夹的名字是可以不一致的)
main包的入口
descriptionnpm官网上面查找的时候,搜素框下面提示框所显示的简介
keywords查找关键词
license所遵守的开源许可协议
{
	"name" : "supertool",
    "version": "1.0.0",
    "main" : "index.js",
    "description":“提供了格式化时间,HTMLEscape的功能",
   "keywords" :["itheima","dateFormat", "escape"],
   "license" : "ISC"
}

4.在index.js中定义格式化时间的方法

// 1.定义格式化时间的方法
function dataFormat(dtStr) {
    //创建一个时间对象
    const dt = new Date(dtStr);

    const y = dt.getFullYear();
    const m = padZero(dt.getMonth() + 1);
    const d = padZero(dt.getDate())

    const hh = padZero(dt.getHours())
    const mm = padZero(dt.getMinutes())
    const ss = padZero(dt.getSeconds())

    return `${y}-${m}-${d} ${hh}-${mm}-${ss}`

}

// 定义一个补零的函数
function padZero(n) {
    return n > 9 ? n : '0' + n;
}

5.在index.js中定义转义HTML的方法

//定义转义HTML标签的函数
function htmlEscape(htmlStr) {
    //里面需要定义一个全局匹配的匹配相应字符的正则表达式
    return htmlStr.replace(/<|>|"|&/g, (match) => {
        switch (match) {
            case '<':
                return '$lt';
            case '>':
                return '$gt';
            case '"':
                return '$qout';
            case '&':
                return '$amp';
        }
    })
}

6.在index.js中定义还原HTML的方法

//定义还原HTML字符串的函数
function htmlUnEscape(htmlStr) {
    return htmlStr.replace(/$lt;|$gt;|$qout;|$amp;/g, (match) => {
        switch (match) {
            case '$lt;':
                return '<';
            case '$gt;':
                return '>';
            case '$quot;':
                return '"';
            case '$amp;':
                return '&';
        }
    })
}

7.将不同的功能进行模块化拆分

(1)将格式化时间的功能,拆分到src -> dateFormat.js 中
在这里插入图片描述

(2)将处理HTML字符串的功能,拆分到src -> htmlEscape.js 中
在这里插入图片描述

(3)在index.js 中,导入两个模块,得到需要向外共享的方法

const data = require('./src/dataFormat');
const escape = require('./src/htmlEscape');

(4)在index.js 中,使用module.exports把对应的方法共享出去

// 定义的函数默认都是私有的,所以我们下一步是将这些方法给共享出去
module.exports = {
    // ...是ES6中的展开运算符,就是将data对象里面的属性栏都展开,放在这里被该文件共享
    ...data,
    ...escape
}

8.编写包的说明文档

(1)包根目录中的README.md文件,是包的使用说明文档。通过它,我们可以事先把包的使用说明,以 markdown的格式写出来,方便用户参考。
(2)README文件中具体写什么内容,没有强制性的要求;只要能够清晰地把包的作用、用法、注意事项等描述清楚即呵。
(3)我们所创建的这个包的 README.md文档中,会包含以下6项内容:
安装方式、导入方式、格式化时间、转义HTML中的特殊字符、还原HTML中的特殊字符、开源协议

具体代码文件可点击 示例代码文件 进行下载

9. 发布包

9.1.注册npm账号
访问https://www.npmjs.com/网站,点击sign up按钮,进入注册用户界面
填写账号相关的信息:Full Name、Public Email、Username、Password
点击 Create an Account按钮,注册账号
登录邮箱,点击验证链接,进行账号的验证

9.2.登录npm账号
npm账号注册完成后,可以在终端中执行npm login 命令(并不是在网站中执行命令),依次输入用户名、密码、邮箱后,即可登录成功。
注意:在运行npm login命令之前,必须先把下包的服务器地址切换为npm的官方服务器。否则会导致发布包失败!(可以先使用nrm看一下)

9.3.把包发布到npm官方服务器上
将终端切换到包的根目录之后,运行npm publish 命令,即可将包发布到npm上
(注意:包名不能雷同——在咱们发布之前,最好是在npm官网上面查看一下有没有相似的包名)。

9.4.删除已发布的包
运行npm unpublish 包名 --force ,即可从npm删除已发布的包。
注意:
npm unpublish命令只能删除72小时以内发布的包
npm unpublish 删除的包,在24小时内不允许重复发布
发布包的时候要慎重,尽量不要往npm 上发布没有意义的包!

整理不易,给个赞再走呗!当然,也欢迎指正哈~

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-01-16 12:57:45  更:2022-01-16 12:59:39 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 12:51:27-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码