陈材华
今天看到有朋友说touch-action可以解决click 300ms延时； 于是在caniuse上查了下兼容性，看下图：  可以看到，现今的移动端页面兼容已经不是问题了， * ios从9.3开始就支持了， 但只支持auto和manipulation * 安卓从5开始也支持，唯一需要关注的是安卓4.4和4.4.4这2个版本在项目中的占比。 既然兼容问题不大了，那么看下touch-action的语法： touch-action： auto | none | pan-x | pan-y | manipulation * touch-action: auto | 浏览器会根据其支持的触控添加交互。比如x轴滚动、y轴滚动、双指缩放和双击。 * touch-action: none |...
// 问题来由：公司小伙伴制作最近的一个活动页面，通过手机的摇一摇事件，然后调取接口展示结果，同时播放一段MP3； html 页面代码： ``` ``` JavaScript 代码： ``` audio = document.getElementById("Music"), audio.play(); ``` 在chrome模拟器和手机端浏览器及微信中，都可以正常的工作，正常的播放MP3 但页面内嵌app的webview中后，MP3并没有声音出现； ## 解决方案 搜索百度google并没有发现现成解决方案； 但也有所启发，似乎只要给audio标签增加controls属性，让audio控制器显示在页面中，然后可以被手工点击播放。 然后的操作就是给audio绑定click事件，但摇一摇触发后，js通过trigger 触发audio的click
自从ES6正式发布以来的这段时间里，一直以为ES6无非就是在ES5的基础上，增加了一些语法糖，这个深刻的影响，一直保留到我完整通读了《Understanding ECMAScript 6》，才有了颠覆性的改变； 坚持看完ES6是出于现在很多的框架（特别是vue的源码）和插件，都采用了ES6的语法，不再关注，就无法看懂源码了。 对于我来说ES6有以下这些巨大的改变： * es6字符串模板 * 箭头函数：函数不能作为构造函数，没有this指向问题，没有arguments属性 * 函数尾调优化避免堆栈溢出 * 支持Object.assign 代替各类框架库的extend和mixin功能，实现浅拷贝 * 函数参数支持默认值，当然这个更像是语法糖 * 对象支持解构赋值，这个确实比较方便，功能强大 * Set的出现，让数组去重等类似的功能开发，变得更简单了 * Class支持快速创建可继承的类，静态方法和getter setter * 类型化数组可以有效的防止数组中出现不合规类型的信息，使数据有序化 * 代理和反射 看上去可以简写VUE的底层数据绑定方式 * Promise...
参考链接：https://github.com/weui/weui/issues/125 这个问题一直存在，一直没有解决，难道一定要我们前端开发，用hack的方式处理吗？ ## 目前可以解决问题的方案：页面刷新 ``` location.reload(); ```
> 上期 #155 讲了js 深拷贝的简单实现方法，还留了个尾巴，没有解决对象重复引用的问题 ## 重复引用会有什么问题 例子1： ``` var obj={ a:1 } obj.b=obj ``` 例子2： ``` o1={a:1};o2={a:o1};o3={a:o2};o1.a=o3 } ``` 这时去做深拷贝，会陷入无限递归。 ## 怎么解决 对象本身就是树形结构，可以用一个数组来保存当前枝叶链上的所有object，如果下层枝叶又引用上层的obj，那就直接赋值，而不是采用递归，从而打破无限递归的深渊。 [【具体实现代码】](https://github.com/mishe/deepCopy)
> js的数据类型有：Null Undefined Boolean Number Array String Object 之分，es6后又增加了Symbol， 其中分为2大类：基本数据类型和对象类型，同时产生了相应的2个传值方式：赋值和引用; ## 基本数据类型的深拷贝 ### JSON.parse(JSON.stringify(obj)) ### 通过简单函数 ``` function extendCopy(p) { var c = {}; for (var i in p) { ...
* 要分割打包，首先要设置webpack的output，增加chunkFilename: "[name].js"的配置,比如： ``` { entry: { "index": "src/home.js" }, output: { filename: "bundle.js", chunkFilename: "[name].js" } } ``` ## require.ensure([]) 引用模块，其使用方法如下： require.ensure(dependencies: String[], callback: function(require), chunkName: String) * require.ensure()...
前公司同事分享了VUE SSR开发的经验：http://mp.weixin.qq.com/s?__biz=MzI1MTE2NTE1Ng==&mid=2649515977&idx=1&sn=9d07a93b5ded0112923d3c40242b7904&chksm=f1efe742c6986e5498f0190d75acdb14fbd4941cba4f69548a01c5160985804d1ce46699dc19&mpshare=1&scene=1&srcid=0221a3AqQUt5YBr5eHHZrO5p#rd 发现文章评论区有回复可以直接使用[nuxt.JS](https://github.com/nuxt/nuxt.js)来做这个事情，同时通过度娘发现了使用[nuxtjs的范例](https://github.com/k55k32/cms-front) 技术真是日新月异啊
> webpack打包工具现在是超级流行，插件超多；成为目前最主流的打包工具。模块间的引入都是采用require的方式（ES6 用 import）来引入自身的依赖。 一般大家用require的时候都是采用以下几种方式； ## 载入当前目录下的a.js ### 方法1： ``` require('./a.js') ``` ### 方法2 ``` require('./a') ``` ## 如果当前目录下有a,b,c,d....N个模块，当前模块有一个参数配置opt，这个配置是调用该模块的主模块传入的，决定引入那个子模块(a,b,c,d...),那么这个require应该怎么来写？ ### 第一种写法 ``` var a=require('a') var b=require('b') ..... var n=require('n') eval(opt)():...
## 第一种方案 ``` html 修正方案 ``` 简便易行，适用情况： 网页设计仅针对手机屏幕，并且没有需要根据手机屏幕尺寸进行UI调整的内容，既没有媒体查询的CSS 产品层面可以不考虑非主流设备或浏览器的兼容性，例如黑莓的某些设备或搜狗浏览器这类的不支持640定宽渲染的浏览器 当手机横竖切换时，能够容忍部分手机在横屏浏览网页时，可能出现的问题(潜在问题)。 这个方案是强制让手机浏览器按640的比例来呈现网页，让浏览器去做尺寸适配；这个方案我觉得其实非常好，绝大多数的场景都可以支持，而且开发起来简单高效，不需要考虑各种尺寸和样式表的单位换算问题。 这个方案有点类似css zoom，就是浏览器将整个网页进行了缩放，注意一点：PC端的使用浏览器的开发工具进行缩放的时候，譬如使用iphone 5s 模式预览，可能会有问题，比如border:1px的时候可能会不可见，字体会有些模糊等，但是手机端展现的时候不会出现这些问题，因为绝大多数手机目前屏幕分辨率都足够高，而且专门针对viewport做了处理，所以这个问题可以忽略。 ### 这个方案可能会造成文字模糊问题，可以用-webkit-font-smoothing:antialiased来改善这个bug ## 第二种方案 ``` html ``` 上面这个不用解释了，绝大多数知名网站都这么做的，但是为了能够让图片和字体去做自适应，通常的做法是使用rem来作为单位，然后再启用javascript判定屏幕宽度，动态改变html元素的fontsize。 为了方便计算，通常会默认将html的font-size设置为100px，这样方便计算，例如你的网页字体是16px,只需要写成0.16rem就行了，然后假如设计稿是按640宽度设计，切图的时候完全按设计稿来进行单位换算，然后在js中获取屏幕宽度，根据比例：100/x = 640/documentWidth 计算html的字体大小即可，当然要加入一个window.resize事件重新计算，以防横竖屏切换。 第二种方案有几个弊端： 由于背景图片无法做缩放，(background-size:cover|contain)只能针对单张图片，而对于sprite css...