- 博客(30)
- 收藏
- 关注
RSS订阅原创 前端如何安全执行字符串js
前言之前有功能需求，需要在前端页面上执行用户自定义的字符串js。直接的操作可以用eval或者new Function来执行字符串脚本。但是这样很不安全，获取cookie、获取隐私、发送请求等等代码块都有可能被恶意者故意注入进去。其实最好的方案，就是让后端去执行这段自定义脚本，返回结果给前端。当然，本次主要想解决的是除了这个方案，还有什么办法？网上找一番，可以较为安全地执行自定义脚本的方法有js解释器with + proxy利用iframe的沙盒模式利用js解释器，就是采用第三方包解释器来执行自
2021-07-06 17:43:25
760
原创 敲一下React-mini版代码
敲一下React-mini版代码最近学习一篇文章关于React原理基础实现，收获良多，想在此写一下个人收获与总结。0、jsxconst element = ( <input value="todo" />)写一个最简单的jsx，我们知道它将会转换成一个object对象，如下面const element = { type: 'input', props: { value: 'todo', children: [], }
2021-03-11 14:09:09
292
原创 用node模拟个简单的XSS攻击例子
let http = require('http')let url = require('url');let app = http.createServer(function (request, response) { let reqUrl = request.url let urlObj = url.parse(reqUrl, true) let queryObj = urlObj.query function getParameter(key) {
2021-01-14 21:03:47
872
2
原创 css布局之瀑布流布局
2021年1月3日，今天又是充满希望的一天。html<body> <div id="main"> <div class="box"> <!-- 模拟图片 --> <div style="height: 400px; background-color: aqua;">1</div> </div> <div class="box"> <div style="height:.
2021-01-03 21:24:15
146
原创 手写代码实现Promise之二
手写代码实现Promise之二在上一篇文章已经实现了基本的Promise，这里将继续实现其他Promise的方法。Promise.prototype.then ✅Promise.prototype.catch✅Promise.prototype.finallyPromise.resolvePromise.rejectPromise.allPromise.racePromise.allSettledPromise.anyfinally方法之前学习了Promise的两个公有方法the
2020-12-18 10:37:11
112
原创 手写代码实现Promise，学习一波
手写代码实现Promise基础例子我们先实现一个基础的Promise。class MyPromise { static PENDING = 'pending' static FULFILLED = 'fulfilled' static REJECTED = 'rejected' constructor(executor) { this.state = MyPromise.PENDING this.result = undefined
2020-12-08 18:09:01
232
1
原创 学习MVC、MVP、MVVM模式
架构型设计模式1、MVC模式前端页面依据MVC思想开发的时候，可将页面分成3层部分，数据层部分、视图层部分、控制层部分。视图层可以调用数据层创建视图，控制器层可以调用数据层数据与视图层内的视图创建页面增添逻辑。MVC代码const MVC = {};// 数据模型层MVC.model = function(){ const M = {}; M.data = { demo1: {}, // ... }; return {
2020-11-04 17:43:11
147
原创 js实现点击按钮复制文本
js点击按钮复制文本// 复制文本function copyText(event) { let range = document.createRange(); window.getSelection().removeAllRanges(); // 清除页面中已有的selection range.selectNode(event.target); // 选中复制节点 window.getSelection().addRange(range); // 执行选中元素
2020-10-23 17:50:55
287
原创 JavaScript设计模式笔记之结构性设计模式
结构性设计模式1、外观模式外观模式：为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。在JavaScript中有时也会用于对底层结构兼容性做统一封装来简化用户使用。function getEvent(event) { // 标准浏览器返回event，IE下window.event return event || window.event;}// 获取元素var getTarget = function(event) { var e
2020-09-21 09:53:09
279
原创 JavaScript设计模式笔记之创建型设计模式
创建型设计模式1、简单工厂模式当类太多，并且这些类有很多相似之处，那么可以用一个工厂函数将这些类整合起来，以后想要创建这些类之一时，可直接调用工厂函数传入参数，来选择你想创建的类。var Benz = function() { this.brand = 'Benz';}Benz.prototype.getBrand = function() {}var BMW = function() { this.brand = 'BMW';}Benz.prototype.getBran
2020-09-06 15:57:34
96
原创 使用antd的Modal.method展示异步请求数据详情，再次封装成函数api直接调用
使用antd写项目多了，经常会有相似的场景——使用Modal弹窗，请求异步数据后显示详情。一般都会写个弹窗详情组件，并且用visible和loading参数去维护，写多了这样的业务需求，总会觉得烦琐。还好antd3以上提供了Modal.update方法，我们可以自己封装一个简单的请求数据查看详情的方法。封装showModal方法import { Modal, Spin } from 'antd';import request from 'UTILS/request';/** 用于简单modal弹
2020-08-27 10:58:50
2148
转载 给父元素绑定事件，触发事件event.target却是子元素
给父元素绑定事件，触发事件event.target却是子元素。若要拿绑定事件的初始元素，可用event.currentTarget转载https://blog.csdn.net/yang1067155909/article/details/97273820
2020-08-17 09:34:24
1952
原创 前端本地build脚本，上传代码，并连上服务器拉取代码
sh脚本# build本地代码npm run buildread -r -p "确认本地push代码，并且服务器拉取代码? [Y/N] " inputcase $input in [yY][eE][sS]|[yY]) echo "Yes" ;; [nN][oO]|[nN]) echo "No" # 退出 exit 1 ;; *) echo "Invalid input..." # 退出
2020-08-10 12:02:40
509
原创 JavaScript设计模式笔记之面向对象编程
面向对象编程1、两种编程风格——面向过程与面向对象面向过程例如，有个输入表单，分别输入手机号、姓名和密码。若要对它们进行输入校验。你可能会创建三个函数checkPhone、checkName、checkPassword分别实现校验功能。这是一个面向过程的实现方式，然而在这种方式中，你会发现无端地在页面中添加了很多全局变量，而且不利于别人重复使用。面向对象面向对象编程就是将你的需求抽象成一个对象，然后针对这个对象分析其特征（属性）与动作（方法）。这个对象我们称之为类。2、面向对象编程思想特点之一—
2020-08-09 23:01:42
123
原创 antd2.x升至antd3.x，记录修改点
当antd4.0出来之际，公司后台管理项目antd还是2.x版本，为了赶上技术迭代的脚步，是时候更新一波antd了。不得不说antd官方维护得很好，让我等antd3升级官方文档一些官方未提到的修改点Col组件span、offset属性必须为Number,否则报错TimePicker组件allowEmpty改为allowClearInput的maxLength属性必须为Number,否则报错Select 组件废弃了 combobox 模式，使用 AutoComplete 组件代替。Input.T
2020-07-03 10:50:48
1507
原创 React从15.6.2升至16.13.1，不要怂就是干
颜值不够，实力来凑。但仔细想想，好像实力也不太行，心中顿生伤感，不说了，学习去。第一步，升至React16.2.0按照计划参考这篇文章将React升至16.2.0就好，一步一步来。React16废弃点1、React.createClass解决方案：npm install create-react-classimport createReactClass from 'create-react-class';const Greeting = createReactClass({ // ....
2020-06-19 09:52:46
706
原创 HTTP状态码常用汇总
状态码的类别类别原因短语1XXInformational（信息性状态码）接受的请求正在处理2XXSuccess（成功状态码）请求正常处理完毕3XXRedirection（重定向状态码）需要进行附加操作以完成请求4XXClient Rrror （客户端错误状态码）服务器无法处理请求5XXServer Error（服务器错误状态码）服...
2020-03-13 09:29:33
215
原创 负margin技巧
图片和文本对齐在img标签上添加margin: 0 3px -3px 0样式，可以使得文本与图片底部对齐<div> <img alt="" src="./hello.jpg" style="margin: 0 3px -3px 0;" /> <span>向你问好</span></div>...
2019-12-17 09:53:14
184
原创 前端生成二维码，并且批量打包下载
前端生成二维码，并且批量打包下载使用到的插件有JQuery、qrcode-jquery、jszip、file-saver, 项目基于react1. html片段<ul> <li> <a className="mg_list"></a> </li> <li> <...
2019-09-16 18:51:02
994
原创 Generator笔记
Generator函数的语法1. 简介Generator 函数是ES6提供的一种异步编程解决方案。形式上， Generator函数是一个普通函数，但有两个特征function关键字与函数名之间有一个星号函数体内部使用yield表达式，定义不同的内部状态（yield翻译为产出）yield表达式 function* foo() { console.log("start"); ...
2019-08-06 20:07:35
123
原创 项目使用`antd-react`组件库。用`Form.create`想要拿到`ref`,即想拿到子组件的数据和方法，可以使用`wrappedComponentRef`
项目使用antd-react组件库。用Form.create想要拿到ref,即想拿到子组件的数据和方法，可以使用wrappedComponentRef以下为官方举例 class CustomizedForm extends React.Component { ... } // use wrappedComponentRef const EnhancedForm = Form.cr...
2019-07-12 20:23:02
2805
原创 js编写关键词统计
之前遇到就一道笔试题的试卷，要求统计一段话的对应关键词出现的次数 function searchKeyWord(sentence, keyWords) { if (!(sentence instanceof String)) return false if (!(keyWords instanceof Array)) return null let...
2019-07-01 22:50:28
283
原创 vue中数据绑定了一个对象/数组，然后改变对象里的属性值，实现不了双向绑定
2019/5/29 17:43:55vue中数据绑定了一个对象/数组，然后改变对象里的属性值，实现不了双向绑定 <template> <div v-for="(item,index) in list" :key="index"> <a-checkbox :checked="item.key" @change="onChange...
2019-05-29 19:01:01
3741
原创 vue路由传参方式的几种区别（个人理解）
路由配置片段 { path:'gameContent', name:'gameContent', meta:{title:'竞赛详情'}, component: () => import('./views/GameContent') , redirect:'gameContent/details', ...
2019-04-14 16:11:45
681
原创 vue源码笔记
2019/4/13 10:26:191. 说明仿vue实现的mvvm库地址https://github.com/DMQ/mvvm2. 准备知识2.1 将伪数组转为真数组 /* 将伪数组转换为真数组 */ const lis = document.getElementsByTagName('li') // lis是伪数组，不能使用真数组的各种方法，如for...
2019-04-13 21:34:48
91
原创 Node学习笔记
2019年1月17日Node.js介绍为什么要学习Node.js企业需求了解整个网站的构建Web后台服务器使用的技术有JavaPHPPythonRuby.Net c#…Node.jsNode.js是什么Node.js不是一门语言Node.js不是库、不是框架Node.js是一个javaScript运行时环境简单点来将就是Node.js可以解析和执行J...
2019-04-07 16:33:22
295
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人