前言
在实际的开发工作过程中，积累了一些常用的、超级好用的Javascript技巧和代码片段，包括其他前辈的JS使用方法。 今天我选了9个供大家参考。
1.动态加载JS文件
在一些特殊的场景下，尤其是在一些库和框架的开发中，我们有时会动态加载JS文件并执行。 下面是借助Promise进行简单的封装。
function loadJS(files, done) {
// 获取head标签
const head = document.getElementsByTagName('head')[0];
Promise.all(files.map(file => {
return new Promise(resolve => {
// 创建script标签并添加到head
const s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = file;
// 监听load事件，如果加载完成则resolve
s.addEventListener('load', (e) => resolve(), false);
head.appendChild(s);
});
})).then(done); // 所有均完成，执行用户的回调事件
}
loadJS(["test1.js", "test2.js"], () => {
// 用户的回调逻辑
});
上面的代码有两个核心点。 一种是使用Promise处理异步逻辑，使用script标签加载执行js。
2. 实现模板引擎
以下示例使用很少的代码来实现动态模板渲染引擎。 不仅支持普通动态变量的替换，还支持动态JS语法逻辑包括for循环、if判断等，具体实现逻辑在作者的另一篇文章中。 《面试官问：你能手写一个模板引擎吗？》（）提供了非常详细的解释，感兴趣的朋友可以自行阅读。
// 这是包含了js代码的动态模板
var template =
'My avorite sports:' +
'' +
'' +
'' +
'' +
'' +
'none
' +
'';
// 这是我们要拼接的函数字符串
const code = `with(obj) {
var r=[];
r.push("My avorite sports:");
if(this.showSports) {
for(var index in this.sports) {
r.push("");
r.push(this.sports[index]);
r.push("");
}
} else {
r.push("none");
}
return r.join("");
}`
// 动态渲染的数据
const options = {
sports: ["swimming", "basketball", "football"],
showSports: true
}
// 构建可行的函数并传入参数，改变函数执行时this的指向
result = new Function("obj", code).apply(options, [options]);
console.log(result);
3.使用reduce转换数据结构
有时后端需要对前端发来的数据进行转换以适应后端的业务逻辑，或者转换组件的数据格式然后传递给前端处理，而reduce是一个非常强大的工具。
const arr = [
{ classId: "1", name: "张三", age: 16 },
{ classId: "1", name: "李四", age: 15 },
{ classId: "2", name: "王五", age: 16 },
{ classId: "3", name: "赵六", age: 15 },
{ classId: "2", name: "孔七", age: 16 }
];
groupArrayByKey(arr, "classId");
function groupArrayByKey(arr = [], key) {
return arr.reduce((t, v) => (!t[v[key]] && (t[v[key]] = []), t[v[key]].push(v), t), {})
}
很多非常复杂的逻辑如果用reduce来处理就会变得非常简单。
4.添加默认值
有时，方法需要用户传入参数。 通常我们有两种处理方法。 如果用户不传的话，我们通常会给出一个默认值，或者用户必须传一个参数，如果不传的话就会抛出错误。
function double() {
return value *2
}
// 不传的话给一个默认值0
function double(value = 0) {
return value * 2
}
// 用户必须要传一个参数，不传参数就抛出一个错误
const required = () => {
throw new Error("This function requires one parameter.")
}
function double(value = required()) {
return value * 2
}
double(3) // 6
double() // throw Error
Listen方法用于创建NodeJS原生http服务并监听端口，在服务的回调函数中创建上下文，然后调用用户注册的回调函数并传递生成的上下文。 下面我们看看createContext和handleRequest的实现。
5.该函数只执行一次
在某些情况下，我们有一些特殊的场景，某个函数只允许执行一次，或者某个绑定方法只允许执行一次。
export function once (fn) {
// 利用闭包判断函数是否执行过
let called = false
return function () {
if (!called) {
called = true
fn.apply(this, arguments)
}
}
}
6. 实现电流
JavaScript 中的柯里化是指将接受多个参数的函数转换为一系列仅接受一个参数的函数的过程。 这样可以更灵活地使用函数，减少代码重复javascript 判断函数，降低代码可读性。
function curry(fn) {
return function curried(...args) {
if (args.length >= fn.length) {
return fn.apply(this, args);
} else {
return function(...args2) {
return curried.apply(this, args.concat(args2));
};
}
};
}
function add(x, y) {
return x + y;
}
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)); // 输出 3
console.log(curriedAdd(1, 2)); // 输出 3
通过柯里化，我们可以将一些常用的功能模块化，比如验证、缓存等，这样可以提高代码的可维护性和可读性，减少出错的机会。
7. 实现单例模式
JavaScript 的单例模式是一种常用的设计模式。 它确保一个类只有一个实例，并提供对该实例的全局访问点。 它在JS中有广泛的应用场景，比如购物车、缓存对象、全局状态管理等等。
let cache;
class A {
// ...
}
function getInstance() {
if (cache) return cache;
return cache = new A();
}
const x = getInstance();
const y = getInstance();
console.log(x === y); // true
8. 实施 CommonJs 规范
CommonJS规范的核心思想是将每个文件视为一个模块。 每个模块都有自己的范围。 其中的变量、函数和对象都是私有的，外部无法访问。 要访问模块中的数据javascript 判断函数，必须使用导入（导出）和导出（需要）。
// id：完整的文件名
const path = require('path');
const fs = require('fs');
function Module(id){
// 用来唯一标识模块
this.id = id;
// 用来导出模块的属性和方法
this.exports = {};
}
function myRequire(filePath) {
// 直接调用Module的静态方法进行文件的加载
return Module._load(filePath);
}
Module._cache = {};
Module._load = function(filePath) {
// 首先通过用户传入的filePath寻址文件的绝对路径
// 因为再CommnJS中，模块的唯一标识是文件的绝对路径
const realPath = Module._resoleveFilename(filePath);
// 缓存优先，如果缓存中存在即直接返回模块的exports属性
let cacheModule = Module._cache[realPath];
if(cacheModule) return cacheModule.exports;
// 如果第一次加载，需要new一个模块，参数是文件的绝对路径
let module = new Module(realPath);
// 调用模块的load方法去编译模块
module.load(realPath);
return module.exports;
}
// node文件暂不讨论
Module._extensions = {
// 对js文件处理
".js": handleJS,
// 对json文件处理
".json": handleJSON
}
function handleJSON(module) {
// 如果是json文件，直接用fs.readFileSync进行读取，
// 然后用JSON.parse进行转化，直接返回即可
const json = fs.readFileSync(module.id, 'utf-8')
module.exports = JSON.parse(json)
}
function handleJS(module) {
const js = fs.readFileSync(module.id, 'utf-8')
let fn = new Function('exports', 'myRequire', 'module', '__filename', '__dirname', js)
let exports = module.exports;
// 组装后的函数直接执行即可
fn.call(exports, exports, myRequire, module,module.id,path.dirname(module.id))
}
Module._resolveFilename = function (filePath) {
// 拼接绝对路径，然后去查找，存在即返回
let absPath = path.resolve(__dirname, filePath);
let exists = fs.existsSync(absPath);
if (exists) return absPath;
// 如果不存在，依次拼接.js,.json,.node进行尝试
let keys = Object.keys(Module._extensions);
for (let i = 0; i < keys.length; i++) {
let currentPath = absPath + keys[i];
if (fs.existsSync(currentPath)) return currentPath;
}
};
Module.prototype.load = function(realPath) {
// 获取文件扩展名，交由相对应的方法进行处理
let extname = path.extname(realPath)
Module._extensions[extname](this)
}
以上是CommonJS规范的简单实现。 核心解决了作用域的隔离，并提供了Myrequire方法来加载方法和属性。 对于之前的实现，作者有专门的文章《38行代码帮你实现CommonJS规范》。 》()提供了详细的解释，有兴趣的朋友可以自行阅读。
9. 递归获取对象属性
如果让我选择一种最广泛使用的设计模式，我会选择观察者模式。 如果让我选一个我遇到最多的算法思维，那肯定是递归。 递归将原始问题划分为具有相同结构的部分。 子问题，然后依次解决这些子问题，并结合子问题的结果，最终得到原问题的答案。
const user = {
info: {
name: "张三",
address: { home: "Shaanxi", company: "Xian" },
},
};
// obj是获取属性的对象，path是路径，fallback是默认值
function get(obj, path, fallback) {
const parts = path.split(".");
const key = parts.shift();
if (typeof obj[key] !== "undefined") {
return parts.length > 0 ?
get(obj[key], parts.join("."), fallback) :
obj[key];
}
// 如果没有找到key返回fallback
return fallback;
}
console.log(get(user, "info.name")); // 张三
console.log(get(user, "info.address.home")); // Shaanxi
console.log(get(user, "info.address.company")); // Xian
console.log(get(user, "info.address.abc", "fallback")); // fallback
以上精选了作者认为有用的 9 种 JS 技术。 我希望它们对您有所帮助。
注册是一种礼貌
你曾经用代码实现过炫酷的动画特效吗？
您是否为自己编写了自己的 ToDoList 代码？
Pelican on Code 为您打造了一场量身定制的编程竞赛！
报名即有机会瓜分百万鹈鹕矿石奖池！
发表评论