Web 之 JavaScript 一些常用的方法或者开发技巧整理(代码整理)

Web 之 JavaScript 一些常用的方法或者开发技巧整理(代码整理)

目录

Web 之 JavaScript 一些常用的方法或者开发技巧整理(代码整理)

一、简单介绍

二、整理内容

1、JavaScript 中，如何保留二位小数

2、度数转弧度

3、JavaScript 对象 转换为 JSON 字符串，可使用 JSON.stringify()

4、Json 字符串解析

5、单例模式

6、发布订阅模式

7、工厂模式

8、repalce 、 replaceAll 替换说明

---

一、简单介绍

Web 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍，Web 开发中， JavaScript 一些较为常用的方法或者开发技巧整理，主要是做代码的整理吧，方便日后遇到方法查找使用，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

二、整理内容

1、JavaScript 中，如何保留二位小数

1）toFixed(2)，使用数字类型自带的方法toFixed(n),其中参数就是需要保留的位数,这个转换的结果是字符类型。

var num =2.446242342;
num = num.toFixed(2);  // 输出结果为 2.45

2）Math.floor，结合Math.floor(),使用先乘后除的办法,比如要保留两位小数,Math.floor(pi*100)/100,如果要保留三位小数,那么就是Math.floor(pi*1000)/1000

Math.floor(15.7784514000 * 100) / 100   // 输出结果为 15.77

3）正则表达式截取，当作字符串，使用正则匹配

Number(15.7784514000.toString().match(/^\d+(?:\.\d{0,2})?/))   // 输出结果为 15.77,不能用于整数如 10 必须写为10.0000

2、度数转弧度

原理：算出一弧度的度数（180度 为 π 弧度，所以一弧度度数为 180/π），然后度数除以一弧度的度数即可

// 一弧度的度数
const ONE_DEGREE_RADIAN = ( 180 / Math.PI )
// 角度转弧度
function degreeToRadian(degree) {

  return degree / ONE_DEGREE_RADIAN ;

}

3、JavaScript 对象 转换为 JSON 字符串，可使用 JSON.stringify()

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'  一个JSON格式的字符串

4、Json 字符串解析

1）JSON.parse()可以解析json数据，但是有兼容性问题，可以下载 json2.js 使用

json2.js 网址：https://github.com/douglascrockford/JSON-js/blob/master/json2.js

JSON.parse('{"name":"xuyan","age":20}', function(k, v) {
            console.log(k); // 输出当前属性，最后一个为 ""
            return v;       // 返回修改的值
        });

2）利用eval解析json数据

注意：eval()方法是极其不安全的，尤其是在解析第三方数据的时候，万一第三方数据给你加点恶意代码什么的，可能对你不友好

方法一：
var jsonData = "{'name':'xuyan','age':20}";
eval("var j="+jsonData);
console.log(j);


方法二：
var jsonData = "({'name':'xuyan','age':20})";
var o = eval(jsonData);
console.log(o);

5、单例模式

定义：保证一个类仅有一个实例，并且提供一个可以访问它的访问点

实现：用一个变量来标识实例是否已经存在，如果存在，则直接返回已经创建好的实例，反之就创建一个对象

场景：模态框、浏览器window对象，等等

简单实现 (ES6)：

class Singleton {
    //构造函数
    constructor(name) {
        this.name = name;
    }
    //实例方法
    getName() {
        console.log(this.name);
    }
    //静态方法获取实例对象
    static getInstance(name) {
        if (!this.instance) {
            this.instance = new Singleton(name);
        }
        return this.instance;
    }
}
//创建静态属性作为唯一标识
Singleton.instance = null;
//验证
var a = Singleton.getInstance('a');
var b = Singleton.getInstance('b');
a.getName(); //a
b.getName(); //a
console.log(a===b);//true

6、发布订阅模式

定义：当一个对象的状态发生变化时，所有依赖于他的对象都将得到通知

实现：指定一个发布者，给发布者添加一个缓存列表，列表用于存放回调函数以便通知订阅者， 发布者发布消息的时候，会遍历这个缓存列表，触发里面存放的订阅者回调函数

//发布者(售楼处)
class SalesOffices{
    constructor(){
        //缓存列表(售楼花名册)
        this.clientList = [];
    }
    //订阅函数(订阅售楼消息)
    listen(fn){
        this.clientList.push(fn);
    }
    //发布函数(发布售楼消息)
    trigger(){
        //遍历花名册，给他们发消息
        for(var i=0;i<this.clientList.length;i++){
            var fn = this.clientList[i];
            fn.apply(this,arguments);
        }
    }
}
//实例化
var salesOffices = new SalesOffices();
//小明订阅售楼消息
salesOffices.listen(function(price){
    console.log("小明" + price);
});
//小红订阅售楼消息
salesOffices.listen(function(price){
    console.log("小红" + price);
});
//售楼处发布售楼消息
salesOffices.trigger("你好，今天的房价为2万一平！");
//打印结果:
小明你好，今天的房价为2万一平！
小红你好，今天的房价为2万一平！

7、工厂模式

定义：不暴露创建对象的具体逻辑，而是将将逻辑封装在一个函数中，这个函数被视为一个工厂

分类：简单工厂，工厂方法，抽象工厂

区别：简单工厂是将创建对象的步骤放在父类进行，工厂方法是延迟到子类中进行，它们两者都可以总结为：“根据传入的字符串来选择对应的类”，而抽象工厂则是：“用第一个字符串选择父类，再用第二个字符串选择子类”

1）实现简单工厂 (ES5)：

var UserFactory = function (role) {
    function Admin() {
        this.name = "管理员",
        this.viewPage = ['首页', '查询', '权限管理']
    }
    function User() {
        this.name = '普通用户',
        this.viewPage = ['首页', '查询']
    }
    switch (role) {
        case 'admin':
            return new Admin();
            break;
        case 'user':
            return new User();
            break;
        default:
            throw new Error('参数错误, 可选参数: admin、user');
    }
}
var admin = UserFactory('admin');
var user = UserFactory('user');

2）实现工厂方法 (ES5)：

//安全模式创建的工厂方法函数
var UserFactory = function (role) {
    if (this instanceof UserFactory) {
        var s = new this[role]();
        return s;
    } else {
        return new UserFactory(role);
    }
}
//工厂方法函数的原型中设置所有对象的构造函数
UserFactory.prototype = {
    Admin: function () {
        this.name = "管理员",
        this.viewPage = ['首页', '查询', '权限管理']
    },
    User: function () {
        this.name = '用户',
        this.viewPage = ['首页', '查询']
    }
   }
//调用
var admin = UserFactory('Admin');
var user = UserFactory('User');

8、repalce 、 replaceAll 替换说明

replace(被替换的，替换)

• replace归属于String对象，用于替换字符串。
• 有两个参数，第一个参数是被替换的，第二个是替换的。将什么什么替换为什么什么。例如：str.replace(‘dog’, ‘cat’) 将dog替换为cat

1）如果有多个重复的字符，只替换第一个

let str = 'hahahaha'
let str1 = str.replace('ha','hi')
console.log(str1)  // 输出：hihahaha

2）如果有多个重复的字符，想替换所有，可用正则全局g替换。或者用replaceAll替换

注意：replace与replaceAll区分大小写，没有匹配上则返回原来字符串

// 正则g替换
let str = 'hahahaha'
let str1 = str.replace(/ha/g,'hi')
console.log(str1)  // 输出：hihihihi

// replaceAll
let str = 'hahahaha'
let str1 = str.replaceAll('ha','hi')
console.log(str1)  // 输出：hihihihi


// 正则g替换
let str = 'hahahaha'
let str1 = str.replace(/hA/g,'hi')
console.log(str1)  // 输出：hahahaha

3）忽略大小写，可以用正则 i 来忽略。但用replaceAll时，正则g也要写上，否则报错，虽然replaceAll已经有全局的属性了，也得写上

let str = 'hahahaha'
let str1 = str.replace(/hA/gi,'hi')
// let str1 = str.replaceAll(/Ha/gi,'hi')
console.log(str1)  // 输出：hihihihi