js
关注
分享
扫一扫
文章平均质量分 66
机智的皮卡丘
武功里面北冥神功应该算是顶级的了，做技术的也要将别人的技术，化为己用
展开
-
BroadcastChannel跨页面通信API
最近在做跨页面的广播通信，相对于前端来说用的比较少，主要使用了broadcast Channel，他可以在同源的浏览器tab中相互通信，类似localstorage，使用的发布订阅模式使用方法如下。const channel= new BroadcastChannel('eventCode');channel.postMessage('')// 需要触发的页面new之后监听channel.onmessage =function(e) { console.log('接收到消息:', e.d.原创 2020-08-13 16:30:29 · 540 阅读 · 0 评论 -
Nodejs做服务端的优缺点
好久没有写博客了，作为一个小前端最近还是有点纠结后端语言用什么的，来分析一波nodejs在后端语言中的优缺点。缺点：1.nodejs单线程，不能做cpu密集型操作，导致时间片不能释放，阻塞后面的任务。2.nodejs可靠性比较低，一个地方报错会导致整个程序崩溃，需要守护进程或者docker重启来解决。3.像使用多核性能的时候需要使用cluster或者部署多个实例，比较麻烦。4.内存默认0.7G和1.4G，设置大了之后垃圾回收会变慢，可能需要多部署几个实例。5.nodejs类型的后端...原创 2020-07-31 23:38:18 · 12694 阅读 · 0 评论 -
dva常用功能及配置
最近用了下create-react-app，后来发现有个dva的脚手架就尝试了一波，感觉资料较少，所以花了些时间，给大家列下常用功能的配置方法。1.端口设置修改package.json中的linx/macos"scripts": { "start": "PORT=3000 roadhog server"}window"scripts": { "start": "set PORT=3000 && roadhog server"}2.proxy代理功能修改.webpac原创 2020-05-27 18:22:29 · 1140 阅读 · 0 评论 -
webpack3最新版本配置研究（二）loader
接上面的loaderurl-loader 现在来我们来试试加载图片，第一件事情肯定是安装对应的loader，可以将小图片转换成base64，减少请求 npm install url-loader file-loader –save-dev//修改index.html加两个div，背景图片设置成两张图片，一个小的，一个大的<!DOCTYPE html><html lang="en"><hea原创 2017-07-10 18:55:51 · 9655 阅读 · 0 评论 -
webpack3最新版本配置研究（一）loader
webpack这货还是挺火的,目前前端不管是react和vue都用这个打包,还是挺好用的，本文使用的时webpack2，使用的新配置，有很多旧的配置可能会出现报错，webpack3刚出希望变化不要太大！什么是WebpackWebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将原创 2017-07-03 00:26:19 · 5683 阅读 · 0 评论 -
Nodejs转发带cookie请求（superagent）
最近稍微研究了下nodejs的路由转发，主要是研究了下cookie的转发，这样可以共享cookie请求（不过服务器同域跨端口共享cookie也可以配），看了下网上的第三方框架，用了下request好像是不太好用，就用了下superagent来研究，talk is cheap，show you the codeexpress中转发cookie简例const express = require('exp原创 2017-06-16 15:27:11 · 13131 阅读 · 2 评论 -
对称加密算法和非对称加密算法
（一）对称加密（Symmetric Cryptography）对称加密是最快速、最简单的一种加密方式，加密（encryption）与解密（decryption）用的是同样的密钥（secret key）,这种方法在密码学中叫做对称加密算法。对称加密有很多种算法，由于它效率很高，所以被广泛使用在很多加密协议的核心当中。 对称加密通常使用的是相对较小的密钥，一般小于256 bit。因为密钥越大，加密越强原创 2017-06-16 18:47:36 · 6813 阅读 · 1 评论 -
ECMAScript 6 入门笔记（二）String，RegExp
ECMAScript 6 入门笔记（一）let，const，解构字符串的扩展String1.字符的 Unicode 表示法 2.codePointAt() 3.String.fromCodePoint() 4.字符串的遍历器接口 5.at() 6.includes(), startsWith(), endsWith() 7.repeat() 8.padStart()，pa原创 2017-03-28 14:21:24 · 725 阅读 · 0 评论 -
ECMAScript 6 入门笔记（三）数值，Array
ECMAScript 6 入门笔记（一）let，const，解构 ECMAScript 6 入门笔记（二）String，RegExp数值二进制和八进制表示法 Number.isFinite(), Number.isNaN() Number.parseInt(), Number.parseFloat() Number.isInteger() Number.EPSILON 安全整数和Numb原创 2017-03-29 17:13:27 · 891 阅读 · 0 评论 -
ECMAScript 6 入门笔记（一）let，const，解构
最近重新看下阮一峰的ecmascript6教程，记性不太好，用的也不多所以记下笔记把自己认为重要的东西记录下来方便回顾，贴代码和调整下结构让查起来更快ECMAscript6 入门LET和CONSTES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。const声明一个只读的常量。一旦声明，常量的值就不能改变，const必须声明时就初始化。le原创 2017-03-27 13:04:17 · 989 阅读 · 0 评论 -
ECMAScript 6 入门笔记（四）函数，对象
ECMAScript 6 入门笔记（三）数值，Array ECMAScript 6 入门笔记（一）let，const，解构 ECMAScript 6 入门笔记（二）String，RegExp函数函数参数的默认值function Point(x = 0, y = 0) { this.x = x; this.y = y;}var p = new Point();p // { x: 0,原创 2017-03-30 17:42:01 · 1047 阅读 · 0 评论 -
ECMAScript 6 入门笔记（五）异步promise，Generator，async
前面弄完了ECMAScript6的基础对象扩展，下来来看下异步编程的三个方法PromisePromise.prototype.then() Promise.prototype.catch() Promise.all() Promise.race() Promise.resolve() Promise.reject() 两个有用的附加方法所谓Promise，简单说就是一个容器，里面保存着某原创 2017-04-01 18:53:44 · 1873 阅读 · 0 评论 -
webpack3最新版本配置研究（四）webpack压缩，clean-webpack-plugin，webpack-manifest-plugin，define-plugin
webpack.optimize.UglifyJsPlugin前端代码优化自然少不了压缩了，在webpack中也可以使用它的插件来进行自动压缩，非常的方便// A:webpack.config.js// B: ...// A: ...// 头部加上webpack的声明const webpack = require('webpack');// plugins里面加上一条配置new webp原创 2017-07-18 00:11:04 · 7244 阅读 · 0 评论 -
前端服务器优化之设置max-age和gzip（express）
最近的话开始了一个新的项目，然后要重新做前端项目的优化，首先当然是优化最容易优化的地方了，就是强制缓存和gzip减少传输中的流量问题了，在express自带协商缓存所以不必去处理，之前项目是用nginx架在最外面的，所以贴代码 安装gzip的相关插件npm install compression//app.js// gzip压缩const compression = require('comp原创 2017-09-30 15:01:38 · 2242 阅读 · 0 评论 -
webpack3最新版本配置研究（五） devtool，webpack-dev-server，CommonsChunkPlugin
devtooldevtool是webpack中config自带的属性只要使用就可以了不用安装 webpack官网的解释如下 当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这原创 2017-08-27 22:33:08 · 5798 阅读 · 0 评论 -
vscode下写vue的setting
{ "workbench.colorTheme": "Solarized Light", "window.zoomLevel": 2, "editor.detectIndentation": false, // 保存时自动fix "eslint.autoFixOnSave": true, // 添加 vue 支持 "eslint.valida.原创 2018-11-29 12:17:10 · 3205 阅读 · 0 评论 -
npm ERR! write after end
尝试以下命令npm install -g npm@latestnpm cache verify原创 2018-10-22 16:04:27 · 2182 阅读 · 0 评论 -
PWA程序相关介绍
官网上对PWA的宣传是这四个关键字：可靠、快速、Engaging、安全；再点进去PWA的主页，会发现还有Instant Loading、添加自主屏、通知推送、响应式，而官方教程就更棒了，一次性给了10个关键字！包括Progressive, App-like, Fresh, Installable……什么是渐进式Web应用程序？ 渐进式Web应用程序是：渐进式 - 适用于所有用户，无论浏览器的选择是原创 2018-03-27 11:10:33 · 602 阅读 · 0 评论 -
webpack4
还好前面写webpack3.x稍微赶上了点热度,最近在准备重构,还在考虑要不要使用parcel,正好发布了webpack4.0.0，就研究了下,修改还是比较大的。包含了大量的特性更新, 以及极大的性能优化(最高可达 98%)Webpack 4 中移除了 CommonsChunkPlugin, 替换以一系列默认的配置以及简单的 optimize.splitChunks 接口同时 Webpack 4 ...原创 2018-02-28 15:30:05 · 9685 阅读 · 0 评论 -
js 设计模式六大基本原则（未完成）
1.单一职责原则定义：一个类只提供一种功能，不要存在多于一个导致类变更的原因。 问题由来：类T负责两个不同的职责：职责P1，职责P2。当由于职责P1需求发生改变而需要修改类T时，有可能会导致原本运行正常的职责P2功能发生故障。解决方案：遵循单一职责原则。分别建立两个类T1、T2，使T1完成职责P1功能，T2完成职责P2功能。这样，当修改类T1时，不会使职责P2发生故障风险；同理，当修改T2时，也不原创 2018-02-27 16:33:48 · 1406 阅读 · 0 评论 -
前端资源收集
视频js https://github.com/Bilibili/flv.js bilibili的FLV视频js https://chimee.org/docs/index.html Chimee — 一套可扩展的H5视频播放器组件化框架原创 2018-01-26 09:51:58 · 308 阅读 · 0 评论 -
JS原型链详解
好久没写博客了，比较忙，最近的话同事正好在研究原型链，我也顺便自己复习了下，顺便总结归纳，尽可能的写的详尽一些。下面这幅图就是一个比较全面的原型链的图，在图中有两个比较容易搞混的单词，一个是 proto （隐式原型） 一个是prototype（显式原型），这两个名词形成了原型链的爱恨情仇。下面我们看下这两个原型出自哪里，比较重要 下面的图片是从知乎上面弄下来的祖传老图，被原创 2018-01-17 20:11:30 · 536 阅读 · 0 评论 -
webpack3最新版本配置研究（三）多入口，html-webpack-plugin, extract-text-webpack-plugin
虽然现在有很多单页应用，不过还是多页面用的比较多一些，先研究了下多入口的配置//随便生成一个js来测试，我在根目录新建了一个entry.js文件console.log('123');之前的webpack.config.js的配置是这样的 entry: __dirname + "/index.js", output:{ // 打包后存放地址 path: _原创 2017-07-16 23:05:22 · 6680 阅读 · 0 评论 -
nodejs的桌面应用（electron）
最近发现nodejs可以做桌面应用，主要是之前的同事在搞，我也要稍微研究下不能落后啊，基于nodejs的桌面应用，常用的就是nw.js和electron，nw出的比较早，资料比较多，bug也很多，它的前身是node-webkit文档可以参考nw.js，微信web开发工具、钉钉都是基于 nw.js 开发的，nw.js支持xp，还有很多人抱着xp过日子呢。而electron比较全比较新，在github的原创 2017-11-22 23:56:40 · 26668 阅读 · 0 评论 -
ECMAScript 6 入门笔记（六）Class
Classclass基本用法class Point{ constructor(x,y){ this.x = x; this.y = y; } toString(){ return "("+this.x+","+this.y+")"; } doStuff() { console.log('stuff'原创 2017-04-18 22:02:40 · 673 阅读 · 0 评论 -
ECMAScript 6 入门笔记（七）Symbol,set和map
SymbolES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，前六种是：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。let s = Symbol();typeof s// "symbol"注意，Symbol函数前不能使用new命令，否则会报错。这是因为生成的原创 2017-04-20 22:42:20 · 1154 阅读 · 0 评论 -
2017前端招聘要求集合
要求熟练玩转前端技术三驾马车，掌握前端开发技术(HTML5、JS、JSON、XHTML、CSS3)，了解各项技术的相关标准，掌握Ajax异步编程； 能够写出高性能、可复用的前端组件 对OO、MVC、MVVM等编程思想有了解，对前端MV*框架有深刻理解，熟练掌握一个前端框架（Vuejs, AngularJS, React ）了解其原理； 熟练掌握React、Redux及相关框架和技术，有单页原创 2017-02-06 23:30:51 · 4192 阅读 · 0 评论 -
HTML5拖拉上传文件
在HTML5的pc上面实现了相当多的功能，工作中也用到了拖拉上传，特地记录下该功能 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖原创 2017-01-11 11:03:42 · 757 阅读 · 0 评论 -
JS和原生交互原理浅析
Java实现原理研究 参照Android：WebView与Javascript交互（相互调用参数、传值）http://itfish.net/article/25514.html 研究了安卓java的功能接口代码,上述地址先在Activity(java源生和js之间类似与桥梁的文件)中先使用了 webView.addJavascriptInterface(new JsInte原创 2017-01-10 15:18:11 · 5015 阅读 · 0 评论 -
Hybird app阶段分析
国内Hybird开发模式 的app 淘宝,天猫,微信,京东,携程,网易 微信 html 我的钱包具体功能，发现购物 淘宝、携程 native：首页，系统列表页 https://www.zhihu.com/question/28469978 淘宝天猫这样的超大型App业务逻辑太复杂，目前天猫是20% native +70% H5，search，detail，范儿，还有作者所在的交易链原创 2017-01-10 15:01:46 · 508 阅读 · 0 评论 -
主流APP浅析
主流的app分为Native，webapp，hybirdapp三种。 Native原生开发，目前较为成熟，各大公司均采用此方式。但是其人工成本较高，同一个项目，至少需要Android端、iOS端、Web端三个开发团队。 Web App是指基于Web的系统和应用，运行在高端手机的网络和浏览器上，用网页技术开发实现特定功能的应用。与WAP的区别：功能层面。WAP的侧重使用网页技术在移动端做展示，包括原创 2017-01-10 14:49:00 · 518 阅读 · 0 评论 -
SVG简单搞一波
SVG 什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体SVG有什么优势？原创 2017-01-10 13:48:58 · 982 阅读 · 0 评论 -
html5标签语义化
HTML5 添加了很多语义元素如下所示： 标签 描述 定义页面独立的内容区域。 定义页面的侧边栏内容。 允许您设置一段文本，使其脱离其父元素的文本方向设置。 定义命令按钮，比如单选按钮、复选框或按钮 用于描述文档或文档某个部分的细节 定义对话框，比如提示框 标签包含 details 元素的标题 规定独立的流内容（图像、图表、照片、代原创 2017-01-10 13:15:46 · 485 阅读 · 0 评论 -
nodejs安装与配置（express生成简单的web服务器）
nodejs简介 简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。 Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。官网下载地址 window下环境安装 https://nodejs原创 2017-01-13 20:10:28 · 701 阅读 · 0 评论 -
web安全常见问题原理及解决方法
Web安全，也可以叫做Web应用安全。 互联网本来是安全的，自从有了研究安全的人之后，互联网就变的不安全了。Web安全的本质是信任问题 由于信任，正常处理用户恶意的输入导致问题的产生 非预期的输入 安全是木桶原理，短的那块板决定的木桶世纪能装多少水，同样的，假设把99%的问题都处理了，那么1%的余留会是造成安全问题的那个短板xss 跨站脚本攻击(Cross Site Scr原创 2017-01-13 14:16:45 · 1199 阅读 · 0 评论 -
chrome开发者工具初探
chrome和ff一直都是web开发者最后青睐的浏览器，作为先进浏览器在兼容性和html5的支持都非常的不错，比IE要好多了，头好痛，今天来研究下chrome开发者工具 在window中按F12就可以调出来了，中间有几个选项卡，Elements、console、sources、network、timeline，profiles，application，Security，audits原创 2017-01-17 16:17:00 · 331 阅读 · 0 评论 -
浅谈web标准、可用性、可访问性
一、web标准 简单的说，就是HTML、CSS、JavaScript这三者分离。WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等转载 2017-01-16 17:14:09 · 653 阅读 · 0 评论 -
call和apply小例子
call和apply可以看作是某个对象的方法，通过调用方法的形式来间接调用函数，call和apply的第一个实参是要调用函数的母对象，它是调用上下文，在函数体内通过this来获得对它的引用，想要以对象o的方法来调用函数f（），可以这样使用call（）和apply（） f.call(o) f.apply(o) 以对象o的方法的形式调用函数f（），并传入两个值，可以：f.call(o,1,2)原创 2017-01-18 11:04:03 · 298 阅读 · 0 评论 -
ECMAScript 6 入门笔记（八）Proxy，Reflect
Proxyproxy用于修改某些操作的默认行为，等同于在语言层面作出修改，属于”元编程”。可以理解成架设一层“拦截”，外界对该对象访问都必须通过这层拦截。var obj = new Proxy({},{ get: function(){target, key, receiver}{ console.log(`getting ${key}`); return R原创 2017-05-03 14:55:51 · 713 阅读 · 0 评论 -
前端模板handlebars.js
最近在维护一些jsp页面的前端部分，之前的老项目很多都是后端写前端的，时间比较长也没有vue和react这种，不过最近要开始改版了（兴奋），里面有一个模板填充数据的库叫handlebars.js，只要简单两步就可以将数据放到模板里面，生成字符串，然后就可以很容易的append到body里面了,下面只是简单的功能，可以稍微感受下，详细功能见handlerbar官网<!DOCTYPE html><ht原创 2017-03-24 10:27:11 · 560 阅读 · 0 评论