2018前端笔记

安卓端微信浏览器下，如果给一张图片添加contextmenu事件，会导致微信无法长按图片呼出菜单对话框，无法执行保存图片的操作。

因为浏览器不开放原因，通过history你无法判断当前页面是否能继续后退，即使是history.length，这个东西只增不减，通过数量判断是无法判断出历史记录是否已经到底历史记录栈的栈顶。所以只能开个定时器，判断执行history.go(-1)/history.back()后，url是否变化来判断:

/**
 * 回退处理
 * @param {History} h - 历史记录对象 
 * @param {String} url - 若无法后退想要替换当前页面的url
 */
function backHandle(h,url){
     let pathname=h.location.pathname
     h.goBack();
     let time=setTimeout(()=>{
         clearTimeout(time)
         if(pathname===h.location.pathname){
             h.replace(url)
         }
     },100)
}

微信下，使用input[type=file]仅调用图库和拍照的代码：

<input type="file" accept="image/*"  />

iOS8 支持 transitionend 事件，当需要知道是哪一个css属性结束过渡，可以通过访问TransitionEvent.propertyName获得属性名字。但是iOS8下，部分css3属性是有加webkit前缀的，因此不能简单地使用如e.propertyName==='filter'进行判断，因为iOS8下，filter属性被写成了-webkit-filter的，建议使用正则去判断。

在React里面想要做读取拖拽文件的需求，要使用onDrop事件进行对事件的监听。但是，如果你没有在同一个dom元素上添加onDragOver事件，onDrop事件将不会被触发，因此你拖一个文件进来可能变成在浏览器打开该文件而不是让js读取这个文件。因此onDrop和onDragOver要一起写，一起添加e.preventDefault()阻止浏览器默认事件。

Webpack里面，如果要在css使用webpack的alias，可以在路径前面添加~符，比如background:url(~@/assets/01.jpg)，注意，前往别把项目根目录的alias设置为~，因为background:url(~~/assets/01.jpg)是拿不到图的。建议将alias别名设置为字母组合如Src|Components|Public...，因为发现在某些情况下，less-loader无法识别特殊字符的alias别名

js计算倒计时：

let time = targetTime-nowTime;
let day = Math.floor(time /1000/60/60/24);
let hour = Math.floor(time /1000/60/60%24);
let minute = Math.floor(time /1000/60%60);
let second = Math.floor(time /1000%60);

IE部分版本有一个bug，当动态往页面插入script标签的时候，只要script标签请求的资源被IE缓存了，那么IE将不会执行script标签里面的代码。如果你的项目需要兼容ie8，且采用了webpack1.x的版本，又想使用require.ensure的拆包功能。可以在webpack的源码/node_module/webpack/lib/JsonpMainTemplatePlugin.js里面找到第61行（大概在这个位置），将
})+";"这个代码替换为}) + "+(window.ActiveXObject?'?v='+new Date().getTime():'');"，代码如下：

mainTemplate.plugin("jsonp-script", function(_, chunk, hash) {
     var filename = this.outputOptions.filename || "bundle.js";
     var chunkFilename = this.outputOptions.chunkFilename || "[id]." + filename;
     var chunkMaps = chunk.getChunkMaps();
     var crossOriginLoading = this.outputOptions.crossOriginLoading;
     return this.asString([
         "var script = document.createElement('script');",
         "script.type = 'text/javascript';",
         "script.charset = 'utf-8';",
         "script.async = true;",
         crossOriginLoading ? "script.crossOrigin = '" + crossOriginLoading + "';" : "",
         "script.src = " + this.requireFn + ".p + " +
         this.applyPluginsWaterfall("asset-path", JSON.stringify(chunkFilename), {
             hash: "\" + " + this.renderCurrentHashCode(hash) + " + \"",
             hashWithLength: function(length) {
                 return "\" + " + this.renderCurrentHashCode(hash, length) + " + \"";
             }.bind(this),
             chunk: {
                 id: "\" + chunkId + \"",
                 hash: "\" + " + JSON.stringify(chunkMaps.hash) + "[chunkId] + \"",
                 hashWithLength: function(length) {
                     var shortChunkHashMap = {};
                     Object.keys(chunkMaps.hash).forEach(function(chunkId) {
                         if(typeof chunkMaps.hash[chunkId] === "string")
                             shortChunkHashMap[chunkId] = chunkMaps.hash[chunkId].substr(0, length);
                     });
                     return "\" + " + JSON.stringify(shortChunkHashMap) + "[chunkId] + \"";
                 },
                 name: "\" + (" + JSON.stringify(chunkMaps.name) + "[chunkId]||chunkId) + \""
             }
         }) + "+(window.ActiveXObject?'?v='+new Date().getTime():'');" //<<----修改成这个
     ]);
 });

通过给请求加上查询字符串的方式，禁止IE读取缓存的JS代码。这个问题在webpack2.x以上的版本貌似已经被修复。

iOS safari下，长按带href的a标签不会触发选择复制的功能。它会从底部弹出一个菜单询问拷贝或者打开。这个拷贝不是对a标签里面的文字进行拷贝，而是对链接进行拷贝。

electron渲染进程可以跑nodejs代码，但是切记，对于一些javascript的全局api，特别是setTimeout 和 setInterval，nodejs在原生js的基础上做了一些扩充，但electron渲染进程调用这些api默认是使用原生js调用，因此跑一些第三方nodejs包会出现问题。可以通过下面代码进行解决

// 渲染进程中
const timers = require('timers');
window.setTimeout = timers.setTimeout;
window.setInterval = timers.setInterval;