题设:生成 N 个随机正整数,使他们的和等于某个数。JS 实现了一下,记录之:
1 | // 绑定表单,点击后给出计算结果 |
题设:生成 N 个随机正整数,使他们的和等于某个数。JS 实现了一下,记录之:
1 | // 绑定表单,点击后给出计算结果 |
使用同步方式提交表单时最郁闷的事情就是刷新时表单重复提交了,一次重复提交以后,后续做各种操作(reset 表单、删除表单都不奏效)都很难避免,搜了一下网上的答案,无外乎以下两种:
然而很多时候我们并不能去修改服务端(比如没有权限,或者后端功能已经趋于稳定、修改成本高),那么这样就不能避免重复提交了吗?于是我根据页面中转的思路使用 iframe 做了一次尝试,果然页面就不会重复提交了,方法如下:
为页面添加一个隐藏的 iframe(假设 css 中 .hide 的样式已经设置为了 display:none )
将 form 的 target 绑定到 iframe 上
// 表单内容
编写 JS 绑定相关事件
document.addEventListener(‘DOMContentLoaded’, function(){
var form = document.querySelector(‘#form’),
iframe = document.querySelector(‘#iframe’),
href = window.location.href;
iframe.setAttribute(‘src’, href); // 设置 iframe 加载当前地址栏的页面(因为有一些表单提交时会验证 url)
// 绑定表单提交事件
form.addEventListener(‘submit’, function(event) {
// 当表单提交时,为 iframe 绑定 load 事件,
// 当 iframe 中页面加载完毕(提交成功时,跳转当前页面为当前 url,替代刷新效果)
iframe.addEventListener('load', function(event) {
window.location = window.location.href;
}, false);
}, false);
}, false);
这个逻辑的精髓在于,使用了一个 iframe 充当中间跳转页面的角色,在不需要修改后端代码的情况下既可以避开页面刷新重复提交了。当然,如果页面提交后,会有某些提示信息,也可以在 iframe 的 load 事件中进行监测,获取相应字符串以后再判断接下来做什么。获取 iframe 中的内容方法如下(以 body 为例):
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document,
ibody = iframeDocument.body;
console.log(ibody.textContent); // 打印 iframe 中 body 里所有的文本内容
有几个项目使用了 es6 + babelify(babel) + gulp 的发布工具,一开始用着还挺好,后来手贱 npm outdated 并升级了几个插件以后,就嗝屁了,编译时提示错误:
‘import’ and ‘export’ may appear only with ‘sourceType: module’
如果把 babelify 降级使用倒是可以正常,但是作为一个追新党不能忍,最后通过不懈的搜索终于发现了问题的所在,原来是 babel 升级为 6.0 后,对 es6 的支持从 core 里面分离开来,需要单独安装插件 babel-preset-es2015 和 babel-preset-react,并进行相关配置。安装方法如下:
cd path/to/project
npm i –save-dev babelify babel-preset-es2015 babel-preset-react
gulpfile.js 的 transform 中需要添加如下配置(browserify 为例):
.transform(‘babelify’, {presets: [“es2015”, “react”]})
详细代码及插件结构参见:package.json, gulpfile.js
开发移动应用时会遇到一个 UI 里面既可以点击(touchend)又可以滑动(scroll window)的情况,如果同时绑定两个事件就会同时执行,这是我们所不愿意看到的情况。大致解决思路是通过一个变量标记当前的触摸状态,当手指移动时标记为正在拖拽,而没有移动的时候则标记为没有在拖拽。代码如下:
1 | // jQuery 代码 |
升级了 OS X El Capitan,各种问题纷至沓来,今天使用 compass 的时候就发现提示 - command not found 了,重新安装,也是各种报错,搜了一下有这个问题的人还真不少,解决方案是有的,一说是关闭 rootless 功能,不过这样个人感觉有些激进了,于是继续搜索,找到解决方案如下:
1. 打开终端; 2. 输入命令
sudo chown -R $(whoami):admin /usr/local
3. 输入命令
brew update
4. 输入命令
brew install ruby
5. 输入命令
sudo gem update
问题解决。