Posts

掌握谷歌搜索高级指令

金钱游戏 - 银行造钱的秘密

1. 角色划分名称角色账户 A 银行家 0 B 建筑商 100万 C 商人 0 2. 建筑商向银行存储100万名称角色账户 A 银行家 100万现金 B 建筑商 100万支票 C 商人 0 2. 商人向银行贷款100万此时银行的账户存款已经是0了，但是B还在银行存了100万。那银行究竟是还有100万呢, 还是一毛都没有了呢。此时建筑商如果要取现金，那么银行马上就要破产。名称角色账户 A 银行家 100现金 B 建筑商 100万支票 C 商人 100万支票 3. 商人需要建筑商来建造房子商人需要建筑商来建筑房子，费用是100万，付给建筑商，建筑商又把100支票存到银行名称角色账户 A 银行家 100万现金 B 建筑商 200万支票 C 商人 0 商人又从银行借钱100万，来付给建筑商建房子，建筑商把钱存到银行名称角色账户 A 银行家 100万现金 B 建筑商 300万支票 C 商人 0 只要这个循环还在继续，你会发现，建筑商的账面上的支票越来越多，但是银行始终都是100万现金存在那里，从来都没动过。...

Express静态文件浏览器缓存设置与缓存清除

1. Express设置缓存 Express设置静态文件的方法很简单，一行代码搞定。app.use(express.static(path.join(__dirname, 'public'), {maxAge: MAX_AGE})), 注意MAX_AGE的单位是毫秒。这句代码的含义是让pulic目录下的所有文件都可以在浏览器中缓存，过期时长为MAX_AGE毫秒。 app.use(express.static(path.join(__dirname, 'public'), {maxAge: config.get('maxAge')})) 2. Express让浏览器清除缓存缓存的好处是可以更快的访问服务，但是缓存也有坏处。例如设置缓存为10天，第二天的时候服务更新了。如果客户端不强制刷新页面的话，浏览器会一致使用更新前的静态文件，这样会导致一些BUG。你总当每次出问题时，客户打电话给你后，你让他强制刷新浏览器吧？所以，最好在服务重启后，重新让浏览器获取最新的静态文件。设置的方式是给每一个静态文件设置一个时间戳。例如：vendor/loadjs/load.js?_=123898923423"></script> 2.1. Express 路由 // /routes/index.js router.get('/home', function (req, res, next) { res.render('home', {config: config, serverStartTimestamp: new Date().getTime()}) }) 2.2. 视图文件 // views/home.html <script src="vendor/loadjs/load.js?_=<%= serverStartTimestamp %>"></script> 设置之后，每次服务更新或者重启，浏览器都会使用最新的时间戳serverStartTimestamp，去获取静态文件。 2.3. 动态加载JS文件有时候js文件并不是直接在HTML中引入，可能是使用了一些js文件加载库，例如requirejs, LABjs等。这些情况下，可以在全局设置环境变量SERVER_START_TIMESTAMP，用来表示服务启动的时间戳，在获取js的时候，将该时间戳拼接在路径上。注意：环境变量SERVER_START_TIMESTAMP，一定要在其他脚本使用前定义。 // views/home.html <script> var SERVER_START_TIMESTAMP = <%= serverStartTimestamp %> </script> // load.js 'vendor/contact-center/skill.js?_=' + SERVER_START_TIMESTAMP

WebSocket断开原因分析

1. 把错误打印出来 WebSocket断开的原因有很多，最好在WebSocket断开时，将错误打印出来。在线demo地址：https://wdd.js.org/websocket-demos/ ws.onerror = function (e) { console.log('WebSocket发生错误: ' + e.code) console.log(e) } 如果你想自己玩玩WebSocket, 但是你又不想自己部署一个WebSocket服务器，你可以使用ws = new WebSocket('wss://echo.websocket.org/'), 你向echo.websocket.org发送消息，它会回复你同样的消息。 2. 重要信息错误状态码 WebSocket断开时，会触发CloseEvent, CloseEvent会在连接关闭时发送给使用 WebSockets 的客户端. 它在 WebSocket 对象的 onclose 事件监听器中使用。CloseEvent的code字段表示了WebSocket断开的原因。可以从该字段中分析断开的原因。 3. 关闭状态码表一般来说1006的错误码出现的情况比较常见，该错误码一般出现在断网时。状态码名称描述 0–999 保留段, 未使用. 1000 CLOSE_NORMAL 正常关闭; 无论为何目的而创建, 该链接都已成功完成任务. 1001 CLOSE_GOING_AWAY 终端离开, 可能因为服务端错误, 也可能因为浏览器正从打开连接的页面跳转离开. 1002 CLOSE_PROTOCOL_ERROR 由于协议错误而中断连接. 1003 CLOSE_UNSUPPORTED 由于接收到不允许的数据类型而断开连接 (如仅接收文本数据的终端接收到了二进制数据). 1004 保留. 其意义可能会在未来定义. 1005 CLOSE_NO_STATUS 保留. 表示没有收到预期的状态码. 1006 CLOSE_ABNORMAL 保留. 用于期望收到状态码时连接非正常关闭 (也就是说, 没有发送关闭帧)....

js中的真值和假值

无论什么语言，都需要逻辑，而逻辑中，能否判断出真假，是最基本也是最重要技能之一。 JS中的假值有6个 false '' undefinded null 0, +0, -0 NaN 有点类似假值的真值有两个 {} [] 空对象和空数组，很多初学者都很用把这两个当做假值。但是实际上他们是真值，你只需要记住，除了null之外的所有对象类型的数据，都是真值。 typeof null // 'object' 据说：typeof null返回对象这是一个js语言中的bug。实际上typeof null应该返回null才比较准确，但是这个bug已经存来好久了。几乎所有的代码里都这样去判断。如果把typeof null给改成返回null, 那么这必定会导致JS世界末日。我们承认JS并不完美，她有很多小缺点，但是这并不妨碍她吸引万千开发者拜倒在她的石榴裙下。就像一首歌唱的：有些人说不清哪里好但就是谁都替代不了

在实践中我遇到stompjs, websocket和nginx的问题与总结

1. AWS EC2 不支持WebSocket 直达解决方案英文版简单说一下思路：WebSocket底层基于TCP协议的，如果你的服务器基于HTTP协议暴露80端口，那WebSocket肯定无法连接。你只要将HTTP协议修改成TCP协议就可以了。然后是安全组的配置：同样如果使用了NGINX作为反向代理，那么NGINX也需要做配置的。 // https://gist.githubusercontent.com/unshift/324be6a8dc9e880d4d670de0dc97a8ce/raw/29507ed6b3c9394ecd7842f9d3228827cffd1c58/elasticbeanstalk_websockets files: "/etc/nginx/conf.d/01_websockets.conf" : mode: "000644" owner: root group: root content : | upstream nodejs { server 127.0.0.1:8081; keepalive 256; } server { listen 8080; location / { proxy_pass http://nodejs; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_http_version 1.1; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } "/opt/elasticbeanstalk/hooks/appdeploy/enact/41_remove_eb_nginx_confg.sh": mode: "000755" owner: root group: root content : | mv /etc/nginx/conf....

状态码为200时 jQuery ajax报错

1. 问题现象 HTTP 状态码为 200 OK 时， jquery ajax报错 2. 问题原因 jquery ajax的dataType字段包含：json, 但是服务端返回的数据不是规范的json格式，导致jquery解析json字符串报错，最终导致ajax报错。 jQuery ajax 官方文档上说明： “json”: Evaluates the response as JSON and returns a JavaScript object. Cross-domain “json” requests are converted to “jsonp” unless the request includes jsonp: false in its request options. The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of null or {} instead....

前端剪贴板复制功能实现原理

1. 兼容情况如果想浏览器支持粘贴功能，那么浏览器必须支持，document.execCommand(‘copy’)方法，也可以根据document.queryCommandEnabled(‘copy’)，返回的true或者false判断浏览器是否支持copy命令。从下表可以看出，主流的浏览器都支持execCommand命令 2. 复制的原理查询元素选中元素执行复制命令 3. 代码展示 // html <input id="username" value="123456"> // 查询元素 var username = document.getElementById(‘username’) // 选中元素 username.select() // 执行复制 document.execCommand('copy') 注意: 以上代码只是简单示意，在实践过程中还有几个要判断的情况首要要去检测浏览器execCommand能力检测选取元素时，有可能选取元素为空，要考虑这种情况的处理 4. 第三方方案 clipboard.js是一个比较方便的剪贴板库，功能蛮多的。  <textarea id="bar">Mussum ipsum cacilds...</textarea>  <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> Cut to clipboard </button> 官方给的代码里有上面的一个示例，如果你用了这个示例，但是不起作用，那你估计是没有初始化ClipboardJS示例的。注意：下面的函数必须要主动调用，这样才能给响应的DOM元素注册事件。 ClipboardJS源代码压缩后大约有3kb，虽然很小了，但是如果你不需要它的这么多功能的话，其实你自己写几行代码就可以搞定复制功能。 new ClipboardJS('.btn');

Chrome本地跨域origin-null-is-not-allowed问题分析与解决方案

1. 问题表现以file:///xxx.html打开某个html文件，发送ajax请求时报错： Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin. Origin 'null' is therefore not allowed access. 2. 问题原因 Origin null是本地文件系统，因此这表明您正在加载通过file：// URL进行加载调用的HTML页面（例如，只需在本地文件浏览器或类似文件中双击它）。不同的浏览器采用不同的方法将相同来源策略应用到本地文件。Chrome要求比较严格，不允许这种形势的跨域请求。而最好使用http:// 访问html. 3. 解决方案以下给出三个解决方案，第一个最快，第三个作为彻底。 3.1. 方案1 给Chrome快捷方式中增加 –allow-file-access-from-files 打开Chrome快捷方式的属性中设置：右击Chrome浏览器快捷方式，选择“属性”，在“目标”中加"–allow-file-access-from-files"，注意前面有个空格，重启Chrome浏览器便可。 3.2. 方案2 启动一个简单的静态文件服务器, 以http协议访问html 参见我的这篇文章: 一行命令搭建简易静态文件http服务器 3.3. 方案3 服务端响应修改Access-Control-Allow-Origin : * response.addHeader("Access-Control-Allow-Origin","*") 4. 参考文章如何解决XMLHttpRequest cannot load file~~~~~~~Origin ’null’ is therefore not allowed access 让chrome支持本地Ajax请求,Ajax请求status cancel Origin null is not allowed by Access-Control-Allow-Origin Origin null is not allowed by Access-Control-Allow-Origin

正则表达式在线工具集合

1. 功能最强：regex101 优点：支持多种语言, prec,php,javascript,python,golang 界面美观大方支持错误提示，实时匹配缺点：有时候加载速度太慢 2. 可视化正则绘图: Regulex 优点：实时根据正则表达式绘图页面加载速度快 3. 可视化正则绘图：regexper 优点：根据正则表达式绘图页面加载速度快缺点：无法实时绘图，需要点击才可以 4. 专注于python正则：pyregex 专注python 页面加载速度快