发表于 |
字数统计 486字 | 阅读时长 2分钟
css 作用域是全局的，项目越来越大，人越来越多，命名慢慢成为问题，以下是几种解决命名问题的方案 一. BEM以 .block__element–modifier 形式命名，命名有含义，block 可视为模块，有一定作用域含义 实例.dropdown-menu__item–active 二. scoped css参考：https://vue-loader.vuejs.org/zh/guide/scoped-css.html 目标：当前组件样式不会影响其它组件 给组件的 dom 节点添加惟一属性，并转换 style 标签中的 css 匹配该属性，使得 css 作用域有限 实例123456789<style scoped>.example { color: red;}</style><template> <div c ...
阅读全文 »

发表于 |
字数统计 148字 | 阅读时长 1分钟
之前遇到的坑很多已经忘记了，现在遇到再慢慢记录吧 一些环境上的配置：https://segmentfault.com/a/1190000006927476 android webView injectedJavaScript 不支持注释 android webView uri 引入需放到 file:///android_asset source={html: ‘’} 的写法，字符串会被 decode，导致一些代码如取余 %12 decode 成其它代码，运行失败，可先 encode source={html: ‘’} 的写法，如有正则，/\\/ 会变成 /\/ 导致匹配结果失败，用 String.raw 解决 用 String.raw，字符串 \2 报错，升级 babel 到 7 可解决 内容区域高度：https://juejin.im/post/5c03b0076fb9a049e063 ...
阅读全文 »

发表于 |
字数统计 237字 | 阅读时长 1分钟
万万没想到，魅族有个 Smart bar 以下内容要是不小心搞错了还请好心人士指正 DimensionsDimensions 获取的是设备屏幕分辨率对应的宽高，包含了 status bar 以及其它 bar. iosios 比较简单，就一个 statusBar，iphoneX 是一类，其它的是一类，使用 paddingTop 可抵消 statusBar，项目使用 native-base 的 header，设置如下：12paddingTop: platform === "ios" ? (variables.isIphoneX ? 39 : 15) : 0height: platform === "ios" ? (isIphoneX ? 88 : 64) : 56 androidandroid 有三种 bar：Soft menu, Status bar, Smart bar，其中，Sm ...
阅读全文 »

发表于 |
字数统计 747字 | 阅读时长 4分钟
相关文章网上已经很多了，趁 3.0 没出跟风打个卡 前言本文只做简单介绍，结合代码食用更佳：github/vue-learn-source-code效果预览：github pages Object.definePropertydefineProperty 让我们可以劫持某个属性的 getter 和 setter，举个例子： 1234567891011121314var person = { firstName: 'meimei', lastName: 'han'};Object.defineProperty(person, 'fullName', { get() { return this.lastName + ' ' + this.firstName; }, set(val) { ...
阅读全文 »

发表于 |
字数统计 451字 | 阅读时长 2分钟
结果预览github pages vue 和 d3 的角色画图可分为两步： 元素坐标计算 数据绑定 坐标计算只需要一些 api，本文使用 d3。数据绑定既可以借助 d3，也可以使用 vue。d3 通过操作 dom 实现，有点像 jQuery，d3 针对数据和 dom 的状态提出了三个概念：Update、Enter、Exit，感兴趣的可以看官网。本文使用 vue 做数据绑定 总结：使用 d3 提供的 api 计算元素坐标，使用 vue 进行数据绑定 坐标计算一棵树由节点和连接构成，只需要计算出这两种元素的坐标即可 画一棵树常见的有两种数据结构，一种是嵌套的，一种是扁平的。如下： 12345678910111213141516171819202122232425262728293031// 嵌套的var treeData = { name: '中国', chi ...
阅读全文 »

发表于 |
字数统计 208字 | 阅读时长 1分钟
最新填坑：Vue 源码(一)：响应式原理 ====== 更新线 =====评论区有了相关讨论，贴更详细一点的解释出来====== 更新线 =====循环出现的条件： key="Math.random()" 子组件在 created 中输出计算属性并改变 data 与 Vue watcher 的添加机制有关，初步认为是 Vue 的小 bug，dep 对象的 targetStack 管理不当导致 ================== 分割线 =============== 把下面的代码拷到你的 html 文件，在浏览器打开你会看到控制台报了死循环的错，知道为什么吗？ 1234567891011121314151617181920212223242526272829303132333435<body> <div id="app"> ...
阅读全文 »

发表于 |
字数统计 331字 | 阅读时长 2分钟
jd 的评论是 js 渲染的，几年前尝试爬过，现在用 puppeteer 一试，清爽多了。puppeteer 是 Headless Chrome Node API，官方仓库：https://github.com/GoogleChrome/puppeteer 由于很简单，直接看代码注释 const puppeteer = require('puppeteer'); const autoScroll = require('./autoScroll'); const url = 'https://item.jd.com/4311178.html'; async function crawler() { // 新开一个浏览器，headless false 方便可视化代码的操作 let browser = await ...
阅读全文 »

发表于 |
字数统计 92字 | 阅读时长 1分钟
乱码index.js const shell = require('shelljs'); shell.exec('aaa', function (code, stdout, stderr) { }); 执行 node index 出现乱码 先执行chcp 65001即可 路径在当前目录执行不能加./(powershell下执行需要加)，下面这个会报错 shell.exec('./test', function (code, stdout, stderr) { }); 这个报错似乎很友好，但和乱码同时出现就很懵了。纪念我的半个下午
阅读全文 »

发表于 |
字数统计 1,141字 | 阅读时长 5分钟
系列系列列表：从use strict看JS（一）：this与箭头函数从use strict看JS（二）：函数传参模式与arguments use strict 的 arguments上一篇说到，use strict对arguments做了以下限定 arguments。不允许对arguments赋值。禁止使用arguments.callee。arguments不再追踪参数的变化 这是为什么呢？如果你明白下面两个例子就不用看这篇文章了~ arguments传的是“值”function notChangeName(obj){ obj="change"; } function changeName(obj){ obj.name="change"; } var dog={ name:"dog" }; notCha ...
阅读全文 »

发表于 |
字数统计 930字 | 阅读时长 4分钟
系列一日，见“use strict”，冥想许久…… 系列列表：从use strict看JS（一）：this与箭头函数从use strict看JS（二）：函数传参模式与arguments use strictuse strict指js的严格模式，还没了解的看这里：Javascript 严格模式详解 use strict有3点比较重要 函数调用this为undefined arguments。不允许对arguments赋值。禁止使用arguments.callee。arguments不再追踪参数的变化 不用var声明不会提升成全局变量，而是报错 use strict还有一些常人不易写错的，不纳入写作范围： 对象不能有重名的属性,函数不能有重名的参数 规定保留字。class, implements 回归正题，什么是函数调用？为何严格模式函数调用要将this指向undefined？ thi ...
阅读全文 »