frank
frank
在 web 的世界里，无线和 PC 的响应式适配其实是两个世界…… ## 1. 视口 viewport ### 1.1 viewport 基础 viewport 解释为中文就是‘视口’的意思，也就是浏览器中用于显示网页的区域。在 PC 端，其大小也就是浏览器可视区域的大小，所以我们也不会太关注此概念；而在移动端，绝大多数情况下 viewport 都大于浏览器可视区，保证 PC 页面在移动浏览器上面的可视性。为提升可视性体验，针对移动端有了对 viewport 的深入研究。 ### 1.2 viewport 详解 在移动端有三种类型的 viewport: layoutviewport、visualviewport、idealviewport。具体解释如下：...
### 背景 初识 Vue.js ，了解到组件是 Vue 的主要构成部分，但组件内部的作用域是相对独立的部分，组件之间的关系一般如下图：  组件 A 与组件 B 、C 之间是父子组件，组件 B 、C 之间是兄弟组件，而组件 A 、D 之间是隔代的关系。 那么对于这些不同的关系，本文主要分享了他们之间可以采用的几种数据通信方式，例如 Props 、\$emit / \$on 、Vuex 等，大家可以根据自己的使用场景可以选择适合的使用方式。 ### 一、 Prop...
两种情况：1.页面一开始就已经加载了音频，2.点击的时候为audio动态的更改音频路径，播放不同的音频 现象：第一种时长正常，第二种时长audio.duration为nan 分析：第一种情况，获取时长时，已经加载了音频，点击时可以获取音频时长；第二种，点击的时候，音频没有加载（虽然已经开始播放），获取不到时长。 解决方法： ```js audio.addEventListener("canplay", function(){ duration=parseInt(audio.duration); }); ``` 监听是否准备好音频，将需要的属性放进去（如：时长），此方法会一直监听，不建议进行其他js操作 audio就是页面的audio的dom，但是有的时候我们遍历太多，js遍历取dom节点又不是方便，这种情况下可以自己生成dom，将上面的方法封装一下 ```js getAudioDuration(src) { let audio = document.createElement('audio') //生成一个audio元素 audio.src = src //音乐的路径 audio.addEventListener("canplay", function() { console.log(parseInt(audio.duration)); }); },...
js的自动格式化 ```js getRootCatalogList() .then(response => { that.rootCatalogList = response.data; that.catalogLoading = false; console.log( 66, "查询当前用户有权限的所有根目录列表", response.data ); }) .catch(err => { console.log(err); }); ``` 看的我尴尬癌都犯了，真心受不了，这开发不是哪抽疯了。 查了一下导致原因是：默认对JS使用了prettier. 解决办法是在VScode设置(setting.json)中，配置如下规则 ```js "vetur.format.defaultFormatter": {...
## 阿里前端算法面试题两道 ##### 二维数组的全排列组合。 >如输入[[1,2],[3,4],[5,6]] 输出： [ 1, 3, 5 ] [ 1, 3, 6 ] [ 1, 4, 5 ] [ 1, 4, 6 ] [ 2, 3, 5...
前端是个发展迅速的领域，前端请求自然也发展迅速，从原生的XHR到jquery ajax，再到现在的axios和fetch。 ## jquery ajax ```js $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function() {}, error: function() {} }) ``` 它是对原生XHR的封装，还支持JSONP，非常方便；真的是用过的都说好。但是随着react，vue等前端框架的兴起，jquery早已不复当年之勇。很多情况下我们只需要使用ajax，但是却需要引入整个jquery，这非常的不合理，于是便有了fetch的解决方案。 **优缺点** - 本身是针对MVC的编程,不符合现在前端MVVM的浪潮 - 基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案 -...
## 1、forEach() ```js var arr = [1, 2, 3, 4]; arr.forEach((item, index, arr) = > { console.log(item) //结果为1,2,3,4 }) //forEach遍历数组，无返回值，不改变原数组，仅仅只是遍历、常用于注册组件、指令等等。 ``` ## 2、map() ```js var arr = [1, 2, 3,...
1.跨域允许 解决方法：服务器发送允许客户端发送源的报文头 header('Access-Control-Allow-Origin:'.$_SERVER["HTTP_ORIGIN"]); 2.客户端无法携带跨域cookie 这个时候就可以在extjs中加入withCredentials ```js $.ajax({ url: 'http://120.111.111.123/setcookie.php', method: 'POST', params: { 'text': 'hello world' }, withCredentials: true, success: function(transport){ // do something }, failure: function(transport){ alert("Error: " -...
```html input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ -moz-appearance: textfield; }
>组件是Vue最强大的功能之一，而组件实例的作用域是相互独立的，意味着不同组件之间的数据是无法相互使用。组件间如何传递数据就显得至关重要，这篇文章主要是介绍Vuex。尽量以通俗易懂的实例讲述这其中的差别，希望对小伙伴有些许帮助。 ### 一、Vuex 是什么？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 ### 二、什么是“状态管理模式”？ 一个简单的 Vue 计数应用开始： ```js new Vue({ // state data () { return { count: 0 } }, // view template:...