`、ratel-CSDN博客

原创利用nativefier和electron-winstaller实现将前端网站打包成桌面程序exe文件。

1、首先利用nativefier将前端页面包装成客户端桌面程序。下载 nativefiernpm install nativefier -g然后运行nativefier https://www.baidu.com/你就可以得到一个文件夹里边找到exe文件就是打包好的百度客户端。当然我们也可以将配置项放在文件中方便复用和配置多个参数，新建你的.js文件写入以下代码var nat...

2020-01-14 20:15:02 1879

原创 vue中的.sync修饰符用法及原理详解

vue中我们经常会用v-bind(缩写为:)给子组件传入参数。或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态。例如：//父组件给子组件传入一个函数 <MyFooter :age="age" @setAge="(res)=> age = res"> </MyFooter> //子组件通过调用这个函数来实现修改父组件的状态。 mo...

2019-06-16 20:39:34 32406 25

原创 Vue中的v-slot详解，作用域插槽和具名插槽

1、具名插槽有时候我们希望在指定的位置输出我们的子元素，这时候具名插槽就排上了用场。//组件调用时<MyFooter v-red :age.sync="age"> <template v-slot:footer> //这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。 <div>list</div&...

2019-06-15 20:50:48 82926 19

原创正则表达式的预判模式和贪婪模式

1、预判模式1、适用于需要同时判断多个条件的情况下。2、使用方法为(?=表达式)案例当我们需要验证一个字符串，它必须符合8-15位，必须有大写字母，小写字母，数字，特殊字符，这时候如果我们对每个条件都单独做判断，那会使代码非常多而且冗余，这时候我们的预判模式就登场了。let reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&...

2019-06-12 21:30:52 404 1

原创前端路由hash模式和history模式实现原理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

2019-06-11 21:16:54 5272 2

1、XSS（CRoss Site Scripting, 跨站脚本攻击）这是前端最常见的攻击方式，很多大型网站（如Facebook）都被XSS攻击过。举个例子，我在一个博客网站正常发表一篇文章，输入汉字、英文、和图片，完全没有问题。但是如果我写的是恶意的JS脚本，例如获取到document。cookie然后传输到自己的服务器上，那我这篇文章或者评论时，之前注入的这段JS代码就执行了。JS代码一旦...

2019-06-11 08:53:41 3614 1

原创 vue响应式之MVVM的简单实现

1、写一些公用的方法let utils = { getValue (data, key) { if (key.indexOf('.') > -1) { key.split('.').forEach(item => { data = data[item] ...

2019-05-31 20:41:14 188

原创 vue项目mac热更新失效解决方法

dev: { sockHost: 'http://172.16.0.57:8080', //热更新失效时配置这个字断为自己的ip disableHostCheck: true,//禁用主机检查 host: '0.0.0.0', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free o..

2022-01-26 18:20:10 1805

原创 vue项目本地开发构建速度优化 hard-source-webpack-plugin

1、为啥要优化本地构建速度有些项目因为项目需求点多、功能复杂、管理混乱、引入第三方插件/样式库过多、本身项目页面较多、文件较多等等原因，会导致项目体积变大、本地构建速度明显变慢，这时就需要对项目webpack进行一些设置来提高打包效率、加快打包时间。2、怎么做打包优化webpack打包速度优化有多种解决方案，今天说一种通用并且使用成本低、入手极为方便的插件hard-source-webpack-plugin（1）首先下载插件cnpm install hard-source-webpack-pl

2021-09-18 10:57:40 1796 1

转载 css ＞＞＞ /deep/ ::v-deep作用和区别,element-ui自定义样式

1、作用在style经常用scoped属性实现组件的私有化时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如.conBox /deep/ .el-input__inner{ padding:0 10px;}注意，/deep/在vue 3.0会报错如果/deep/报错，可采用::v-deep，效果基本一样，有人说::v-deep能加快编译速度，但是我在网上没有找到相关资料，无从验证。.conBox ::v-dee

2021-08-20 09:50:19 1632

原创 vue项目内存溢出导致项目启动失败解决

1、现象随着项目的拓展会出现vue项目启动内存不足导致启动失败，或者启动成功，开发过程中失败的情况Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory//无效的标记压缩接近堆限制分配失败-JavaScript堆内存不足2、方案increase-memory-limit是用来设置node进程可占用的内存，通过设置一个大内存占用来解决该问题首先全局下载该npm包np

2021-08-06 15:28:02 2616

原创函数柯里化学习笔记

1、什么是函数柯里化在计算机科学中，柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。2、怎么实现简单的函数柯里化// 实现一个简单的加法function add(a,b){return a+b}add(1,2);// 用柯里化实现const currying = (x) => { return (y) => {return x+y}}console.log(cur

2021-04-11 16:10:17 142

原创 mac下生成ssh key

1、查看当前是否含有ssh keycd ~/.ssh查看是否有此文件夹和自文件，如果有说明已经生成过了。2、生成ssh$ ssh-keygen -t rsa -C “xxx.mail@xxx.com”生成ssh key3、设置生成路径Enter file in which to save the key (/var/root/.ssh/id_rsa): /Users/你的用户名称/.ssh/id_rsa如果原来生成过会提示是否覆盖/Users/liushijun/.ssh/id_rs

2021-03-21 15:34:53 1226

原创 js判断两个版本号的大小

function compareVersion(v1, v2) { if (v1 == v2) { return 0; } const vs1 = v1.split(".").map(a => parseInt(a)); const vs2 = v2.split(".").map(a => parseInt(a)); const length = Math.min(vs1.length, vs2.length); for (let i = 0; i <

2021-01-08 17:43:45 4238 3

转载 post请求参数格式

HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据，本文主要讨论 POST 提交数据的几种方式。我们知道，HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行请求行、请求头、消息主体。类似于下面这样：BASH<method> <request-URL> <v

2021-01-05 19:40:09 2177

原创 mac关闭所有node开启的服务和进程

mac下关闭所有node开启的服务和进程。pkill node

2020-12-31 13:49:50 2782

原创 mac设置端口号转发到默认端口80、443

1、需要这种设置的场景我们一些开发的时候需要将一些网站的请求拦截在本地服务下。下文将以 test.com 为例2、设置hostopen /private/etc/hosts添加如下内容127.0.0.1 test.com打开之后需要复制到桌面，改动之后再覆盖掉原来的host文件。通过设置host可以做到将对应域名的请求到你自己的本地服务设置成功我们就可以使用比如 http://test.com:8080/index.html 来访问本地服务3、设置端口转发

2020-12-22 19:39:26 4696

原创 js通过时间戳生成yymmdd形式的时间字符串

function getTimeStr(timeNum){ var y,m,d,h,mm,s; var date = new Date(timeNum); y = date.getFullYear(); m = date.getMonth()+1; d = date.getDate(); h = date.getHours(); mm = date.getMinutes(); s = date.getSeconds(); m = m < 10 ? "0" + m : m; d =

2020-11-06 11:10:49 1400

原创 npm scripts设置环境变量方法

windowsset NODE_ENV=production"scripts": { "release": "set NODE_ENV=production && gulp rtm", "dev": "set NODE_ENV=development && gulp watch",}linux & macexport NODE_ENV=production"scripts": { "release": "NODE_ENV=pr

2020-11-06 10:44:31 1774

原创将图片url转化为base64文件和file类型文件

1、将图片url转化为base64文件和file类型文件 //图转base64 function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); console.log(img,

2020-08-05 17:08:54 1369

原创 css文本英文数字折行

一些文字渲染类的结构中，遇到一些长串的单词和数字不折行会破坏我们的网页布局影响美观，不着急，只需加入以下两行代码搞定。.text { word-break: break-all; word-wrap: break-word;}

2020-06-13 14:03:01 1014

原创 css超出部分显示…

css超出部分显示…单行超出部分显示…overflow: hidden;text-overflow:ellipsis;white-space: nowrap;多行超出部分显示…display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;

2020-06-10 15:30:26 702

原创单选框样式/自定义单选框/改变单选框border颜色/css单选框

1、首先将原先的单选框隐藏掉。2、利用label：before 在label的前面加一个元素来模拟单选框的样式。3、利用：checked css选择器将选中的单选框单独设置样式。4、具体样式自根据项目手动设置比较灵活。代码如下： <ul class="pay_type"> <li v-for="(item,i) i...

2020-04-27 16:20:45 2985

原创 vue react 项目代表/各大框架使用项目目录。

哪些项目是vue写的，哪些项目是react写的。1、React：蚂蚁数据可视化、爱彼迎、飞猪、阿里大于、虾米音乐、口碑开放平台、猫途鹰、喜马拉雅FM、斗鱼、知乎、豆瓣、美团外卖H5、房多多、石墨文档、墨刀、TalkingData、xiaopiu、Teambition、Uber、倍洽、同盾科技、心知天气、拼多多（APP内嵌H5）、滴滴出行、Sentry、途牛、优酷、京东服饰+生鲜+旅行+赚钱H5...

2020-04-16 18:24:50 1533

原创 png转为favicon.ico文件

分享一个比较好用的网站可以直接上传png文件生成favicon.ico文件。实测比较好用。直接上链接。http://www.bitbug.net/

2020-04-08 16:36:22 1447

原创整站加灰色遮罩。

在css表中加入下边的代码，可以使整站加灰色遮罩层。html {-webkit-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}

2020-04-03 17:57:51 1741

原创移动端vue 遮罩层阻止默认滚动事件

移动端vue 遮罩层阻止默认滚动事件<div class="pop" @touchmove.prevent > //遮罩层元素</div>

2020-03-23 19:04:28 699

原创 iframe子父页面交互

1、子页面与父页面通信如子页面调用父页面的a函数 window.praent.a();2、父页面与子页面通信如父页面调用子页面的b函数 document.getElementById('iframeId').contentWindow.b();...

2019-12-06 17:00:35 164

转载 requriejs 怎么添加版本号 requirejs 清除缓存 requirejs 强制不缓存

在head 里添加如下js代码可以为引入的js添加版本号var _funcList = [];var _run = function (aFunc) { _funcList.push(aFunc);};var require = { urlArgs: ‘v=1.0.1′ // 修改这里的版本号};这样可以使requirejs加载的js都得到一个版本号从而强制浏览器重新加载资源，达...

2019-11-21 11:01:26 787

原创 js获取url参数

1、用于获取url中的参数function getQueryVariable(variable){ var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { ...

2019-10-23 21:10:49 169

原创前端seo优化

1、最近公司项目在做seo优化方面的工作趁机梳理一下个人对seo方面的一些理解seo是什么？SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。前端seo的优化方向1、语义化标签，根...

2019-10-22 21:37:51 792

原创 js 与安卓和ios交互

function getSystemInfoFromApp(){ var u = navigator.userAgent, app = navigator.appVersion; var data = null; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //a...

2019-10-22 20:43:54 332

原创 js实现浏览器通知、浏览器推送

js实现浏览器通知##这种一直在轮询等到有通知的时候获取权限是否显示通知在这里插入代码片(function(window) { 'use strict'; function Notify() {}; window.Notify = Notify; //设置参数; var options = { noticeList: [], //通知...

2019-10-11 10:14:47 2469 1

原创实现react路由的配置化管理

react实现路由配置化1、为什么要搞这个配置化我们知道在vue中我们直接可以把路由做成路由表的形式来实现路由的简介配置，但是在react中，我们没有现成的东西直接支持我们做配置化的路由，但是我们要是每次在需要路由的地方都去调用react-router-dom中的Route就会显得很繁琐，并且代码维护起来会很累，于是我们想把它做成类似与vue的配置化路由。2、实现步骤1、首先我们封装一下将...

2019-07-06 22:45:15 1101 1

原创 css盒模型content-box和border-box

1、简述css盒模型分为两种，一种是ie老版本的怪异模式后来被css3接受，另一种是w3c的标准盒模型，我们在使用中可以根据业务需求来选择不同的盒模型。我们可以在css样式中根据box-sizing来设置不同的盒模型。下面来看具体的细节。2、标准模式（content-box）当box-sizing:content-box时，我们使用的是标准盒模型，这时候css定义的width宽度只包含元...

2019-06-16 12:53:56 2747

原创 vue中的自定义指令

vue中的自定义指令相信大家对它并不是很陌生，听过但是没用过是对它的常态，今天就让我们来见识它的魅力。1、出现的原因官网上是这样说的：除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。2、注册自定义指...

2019-06-15 20:27:10 383

原创 webpack基础

1、用处官网上是这么说的本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。我自己的理解是webpack是一个项目打包工具，它可以将我们项目...

2019-06-15 11:37:46 104

原创 redux中bindActionCreators源码分析

既然是源码分析那么首先上源码为了方便分析我们直接在源码上做标注bindActionCreator源码function bindActionCreator(actionCreator, dispatch) { return function () { return dispatch(actionCreator.apply(this, arguments)); };}//bi...

2019-06-10 21:04:59 284 1

原创 js插入排序、快速排序、冒泡排序

快速排序//快排function fastSort(arr){ if(arr.length <= 1 ){ return arr; } let pivotIndex = Math.floor(arr.length/2); let pivot = arr.splice(pivotIndex, 1)[0]; let left = [];...

2019-06-09 10:32:47 437 2

原创青蛙每次跳一阶或两阶，跳到N阶共有几种可能

原来看到过一个有意思的算法题。要求：青蛙每次跳台阶一阶或者两阶，现在共有N阶台阶，要求打印出所有可能性。思路：首先每一次跳跃都是独立的，我们不知道青蛙下一步到底是跳一阶还是两阶，但好在我们知道它没有那么大的本事，只能跳一阶或者两阶。这样我们就能从这两种可能性中下手。let ww = 0;function jump(currentArr){ let aa = currentArr.r...

2019-06-04 17:30:34 1467 1

空空如也

空空如也