new 方法的实现

xiaoshunshi

已于 2022-09-01 13:55:01 修改

阅读量203

点赞数

分类专栏： js的方法文章标签： javascript

于 2022-07-26 10:01:52 首次发布

本文链接：https://blog.csdn.net/xiaoshunshi/article/details/125988817

版权

js的方法专栏收录该内容

8 篇文章 0 订阅

订阅专栏

new 方法的实现

const Parent = function (country, language) {
  this.country = country
  this.language = language
}

Parent.prototype.say = function () {
  console.log(this.language)
}
Parent.prototype.getCountry = function () {
  console.log(`my country is ${this.country}`)
}

function _new (fn, ...args) {
  const obj = Object.create(fn.prototype)
  const ret = fn.apply(obj, args)
  return ret instanceof Object ? ret : obj
}

const usa= _new(Parent, 'usa', 'English')
usa.say()
usa.getCountry()

快速生成1-100的数组
new Array()

new Array(100).join(',').split(',').map((_,index)=>index+1)

Array.from()

Array.from({length:100},(_,index)=> index+1)

取数组索引为负值的方法 arr[-5]

const arr = [1, 2, 3, 4, 5]

function proxy (arr) {
  return new Proxy(arr, {
    get (target, i, receiver) {
      console.log(target, i, receiver)
      while (i < 0) {
        i = (Number(i) + arr.length) % arr.length
      }
      return Reflect.get(target, i, receiver)
    }
  })
}

const arr1 = proxy(arr)
console.log(arr1[-10])

开发 vscode插件

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');
const os = require("os");
const fs = require('fs')
const QRCode = require('qrcode')
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
function getIpAddress() {
	/**os.networkInterfaces() 返回一个对象，该对象包含已分配了网络地址的网络接口 */
	var interfaces = os.networkInterfaces();
	const {
		WLAN
	} = interfaces
	const ipv4 = WLAN.find(item => item.family === 'IPv4')
	return ipv4.address
}

function getParams(form) {
	let url = '';
	const keys = Object.keys(form);
	for (let i = 0; i < keys.length; i++) {
		if (!form[keys[i]]) {
			continue;
		}
		if (url) {
			url += `&${keys[i]}=${form[keys[i]]}`;
		} else {
			url += `?${keys[i]}=${form[keys[i]]}`;
		}
	}
	return url;
}
/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
	console.log('Congratulations, your extension "h5-helper" is now active!');
	let disposable = vscode.commands.registerCommand('h5-helper.h5-helper', function (uri) {
		// 文件路径 
		const filePath = uri.path.substring(1);
		fs.stat(filePath, (err, stats) => {
			if (err) {
				vscode.window.showErrorMessage(`获取文件时遇到错误了${err}!!!`)
			}
			if (stats.isDirectory()) {
				vscode.window.showWarningMessage(`检测的是文件夹，不是文件，请重新选择！！！`);
			}
			const splitFilePath = filePath.split('/')
			const fileName = splitFilePath[splitFilePath.length - 1]
			//  判断是否是需要的文件
			if (fileName !== 'h5-helper.json') {
				vscode.window.showWarningMessage(`请选中h5-helper.json文件，请重新选择！！！`);
				return
			}
			//  读取文件的内容
			const fileData = JSON.parse(fs.readFileSync(filePath).toString())
			const {
				port,
				projectName,
				params
			} = fileData
			// 拼接成url路径
			const qrCodepath = `http://${getIpAddress()}:${port}/${projectName}/${projectName}.html${getParams(params)}`
			// 开启一个新的页面，在页面中生成二维码
			const panel = vscode.window.createWebviewPanel(
				'Test', // 标识webview的类型
				'webview1', // 展示给用户的面板的标题
				vscode.ViewColumn.One, // 显示webview面板以编辑器新列的方式.
				{} // webview其他的选项
			)

			function getWebviewContent(imgPath, url) {
				return `<!DOCTYPE html>
		  <html lang="en">
		  <head>
			  <meta charset="UTF-8">
			  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			  <title>Cat Coding</title>
		  </head>
		  <body>
			  <img src="${imgPath}" width="300" />
			  <p>${url}</p>
		  </body>
		  
		  </html>`;
			}
			// 创建一个二维码
			QRCode.toDataURL(qrCodepath, function (err, url) {
				panel.webview.html = getWebviewContent(url, qrCodepath);
			})
		});
	});
	context.subscriptions.push(disposable);
}

// this method is called when your extension is deactivated
function deactivate() {}

module.exports = {
	activate,
	deactivate
}

package.json

"contributes": {
    "commands": [
      {
        "command": "h5-helper.h5-helper",
        "title": "h5-helper"
      }
    ],
    "menus": {
      "editor/context": [
        {
          "when": "editorFocus",
          "command": "h5-helper.h5-helper",
          "group": "navigation"
        }
      ]
      "explorer/context": [
        {
          "command": "h5-helper.h5-helper",
          "group": "navigation"
        }
      ]
    }
  },