musiq1989

musiq1989 查看完整档案

成都编辑  |  填写毕业院校  |  填写所在公司/组织 github.com/xiaolin3303 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

musiq1989 回答了问题 · 2017-02-21

Vue到底是多大?25k还是80k?

注意下描述min+gzip, 代码本身是min压缩了的,需要你自己再进行gzip压缩处理,具体则是服务器开启对这个文件的gzip压缩

关注 3 回答 2

musiq1989 关注了问题 · 2016-12-28

用div能不能监听内容超出高度 就执行js?

ajax返回的内容不确定。有的是一行 有的是两行展示。但最多是两行展示。超出并给省略号。
图片描述

当里边的内容超出高度的时候 用什么方法执行js呢,我想删除倒数的第一个数据这内容。

关注 5 回答 4

musiq1989 回答了问题 · 2016-12-28

用div能不能监听内容超出高度 就执行js?

可以使用MutationObserver监听DOM结构的变化,在回调里面执行你的判断,比如获取当前DIV的高度,然后比对......

关注 5 回答 4

musiq1989 回答了问题 · 2016-12-28

解决求每输入五个字符自动用‘-’隔开的正则表达式

这个用正则不好实现,可以写一个函数来做这个事情

比如:

function insertSplit(str, split) {
    split = split || '-';
    var strList = str.split('');
    var result = [];
    strList.forEach(function(item, index) {
        result.push(item);
        if ((index + 1) % 5 === 0) {
            result.push('-');
        }
    });

    return result.join('');
}

关注 7 回答 5

musiq1989 关注了问题 · 2016-12-28

解决求每输入五个字符自动用‘-’隔开的正则表达式

input里面可以输入或者粘贴文本,里面的文本只能是[a-zA-Z0-9],每输入5个字符,自动加入'-',正则表达式如何表示呀

关注 7 回答 5

musiq1989 回答了问题 · 2016-12-23

解决请问大家在用ajax的时候,url是用的绝对路径还是相对路径?

本地环境访问线上接口肯定是存在跨域的问题

如果你的线上接口服务器返回了响应头Access-Control-Allow-Origin: *,那么就可以实现跨域调用

如果没有设置这个头,需要你本地起一套同样的服务,比如你可以设置一个全局变量

// 上线时使用
const API_HOST = 'online host';
// 线下调试使用
const API_HOST = '';

AJAX的url可以写成

let url = `${API_HOST}/...`

如果你本地没有对应的接口环境,可以使用fiddler或者charles设置一个代理,把线上的接口返回内容保存为一个文件,然后将这个接口地址映射到你的接口内容文件,请求的url直接设置成线上地址即可

关注 9 回答 8

musiq1989 关注了问题 · 2016-12-23

解决请问大家在用ajax的时候,url是用的绝对路径还是相对路径?

因为一直以来都是模拟数据,所以用的都是相对路径。所以有几点疑惑:
1、使用绝对路径会不会出现跨域的问题呢?
2、使用相对路径怎么访问真实站点的数据呢?

//顺便问一下前后端分离时,本地环境怎么搭建

关注 9 回答 8

musiq1989 关注了问题 · 2016-12-23

jQuery 中很方便的方法是否在性能上造成不必要的浪费~

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

点击显示其他隐藏:

$('li').on('click', function () {
    $(this).show().siblings().hide();
});
var li = $('li');

li.on('click', function () {
    li.hide();
    $(this).show();
});

第二种方法是否比第一种更加优化 第一种的 siblings 方法是不是每次都去重复的获取相邻元素 等同于频繁的操作 dom 了

关注 8 回答 6

musiq1989 回答了问题 · 2016-12-23

jQuery 中很方便的方法是否在性能上造成不必要的浪费~

这个问题不是绝对的说第一种方式好还是第二种方式好

第一种方式程序具有更好的可读性,代码基本就能对应到你的编程思路,这样的代码很明确

第二种方式效率会高一点,但是在浏览器中这点性能基本可以忽略不计

所以说第一种方式是有性能浪费,但是并不是不必要的,有时候还很有必要!

如果在比较复杂的系统中建议使用第一种方式,便于后期可持续开发和维护,对于明显对性能有影响的地方,应该是单独提出来一个方法,比如showCurrentItem,函数里面是你优化的代码,外层一定要保持良好的可读性

关注 8 回答 6

musiq1989 发布了文章 · 2016-12-21

在微信小程序中绘制图表(part3)

本期大纲

1、饼图绘制
2、如何添加动画效果
3、使用rollup构建项目

相关阅读:
在微信小程序中绘制图表(part1)
在微信小程序中绘制图表(part2)

关注我的 github 项目 查看完整代码。

很久没更新了,最近事情比较多,今天来把坑填上!

饼图绘制

先看一下API

clipboard.png

下面开始(使用ES6语法编写,后面我们可以使用rollup编译成ES5的语法)

假设我们有这样的数据

const series = [
    {data: 15, color: '#7cb5ec'},
    {data: 35, color: '#f7a35c'},
    {data: 78, color: '#434348'},
    {data: 63, color: '#90ed7d'}
];

计算出各项所占的比例和开始的弧度

calPieData.js

export function calPieAngle (series) {
    // 计算数据总和
    let count = 0;
    series.forEach((item) => {
        count += item.data;
    });

    // 计算出开始的弧度和所占比例
    let startAngle = 0;
    return series.map((item) => {
        item.proportion = item.data / count;
        item.startAngle = startAngle;
        startAngle += 2 * Math.PI * item.proportion;
        return item;
    });
}

数据已经计算出来了,下面让我开始绘制吧

drawPieChart.js

import { calPieAngle } from 'calPieData'

export default function drawPieChart (series) {
    ...

    let pieSeries = calPieAngle(series);
    pieSeries.forEach((item) => {
        context.beginPath();
        // 设置填充颜色
        context.setFillStyle(item.color);
        // 移动到原点
        context.moveTo(100, 100);    
        // 绘制弧度
        context.arc(100, 100, 80, item.startAngle, item.startAngle + 2 * Math.PI * item.proportion);
        context.closePath();
        context.fill();
    });

    ...

}

调用drawPieChart(series)就可以得到下面的结果:

clipboard.png

很简单是不是,下面我们给各区块加上一个白色的分割线
因为arc实际上是绘制了一条路径,所以我们简单的stroke描边一下就可以了


...

context.setLineWidth(2);
context.setStrokeStyle('#ffffff');
pieSeries.forEach((item) => {
    context.beginPath();
    context.setFillStyle(item.color);
    context.moveTo(100, 100);    
    context.arc(100, 100, 80, item.startAngle, item.startAngle + 2 * Math.PI * item.proportion);
    context.closePath();
    context.fill();
    context.stroke();
})

...

clipboard.png

添加动画效果

首先让我们创建一个动画工具,这个动画工具能够传入一些自定义的参数,比如动画时间,能够有动画每一步的回调以及动画结束的回调

animation.js

export default function Animation (opts) {
    // 处理用户传入的动画时间,默认为1000ms
    // 因为用户有可能传入duration为0,所以不能用opts.duration = opts.duration || 1000 来做默认值处理
    // 否则用户传入0也会处理成默认值1000
    opts.duration = typeof opts.duration === 'undefined' ? 1000 : opts.duration;
    
    let startTimeStamp = null;

    function step (timestamp) {
        if (startTimeStamp === null) {
            startTimeStamp = timestamp;
        } 
        if (timestamp - startTimeStamp < opts.duration) {
            // 计算出动画的进度
            let process = (timestamp - startTimeStamp) / opts.duration;
            // 触发动画每一步的回调,传入进度process
            opts.onProcess && opts.onProcess(process);
            // 动画进行中,执行下一次动画
            requestAnimationFrame(step);
        } else {
            // 动画结束
            opts.onProcess && opts.onProcess(1);
            // 触发动画结束回调
            opts.onAnimationFinish && opts.onAnimationFinish();
        }
    }

    requestAnimationFrame(step);
}

动画使用了requestAnimationFrame,并且已经满足了我们上面定义的需求
在实战中,此处的动画都是线性的,一般我们还会加入缓动选项,比如缓入缓出,还有一点,在微信小程序真机中IOS设备是不支持requestAnimationFrame的,所以要做降级处理,使用setTimeout查看完整的代码

下面我们调用animation来完成动画效果

app.js

import Animation from 'animation'
import drawPieChart from 'drawPieChart'

Animation({
    duration: 1000,
    onProcess: (process) => {
        drawPieDataChart(series, process);
    }
});

修改一下drawPieDataChart function,能够接受process参数


...

export default function drawPieChart (series, process = 1) {
    ...
    // 将process传入给calPieAngle,计算出对应进度下的图表角度数据
    let pieSeries = calPieAngle(series, process);

...

同样,修改一下calPieAngle function,能够接受process参数


export function calPieAngle (series, process = 1) {
    ...

    // 计算出开始的弧度和所占比例
    let startAngle = 0;
    return series.map((item) => {
        // 计算出当前动画进度的比例
        item.proportion = item.data / count * process;
        item.startAngle = startAngle;
        startAngle += 2 * Math.PI * item.proportion;
        return item;
    });
}

好了,现在我们的动画就可以动起来了,类似这样

clipboard.png

使用rollup构建项目

Rollup is a next-generation JavaScript module bundler. Author your app or library using ES2015 modules, then efficiently bundle them up into a single file for use in browsers and Node.js.

也就是说rollup是一个前端构建工具,能够将我们的整个项目合并输出成一个最终的编译结果,上面我们编写代码的时候都是按照不同的功能放到不同的文件中,这样有利于后期的可持续性开发和维护,rollup正好能帮助我们构建出最后的编译结果

先安装rollup

npm install -g rollup

添加对ES6的支持

npm install --save-dev rollup-plugin-babel
npm install --save-dev babel-preset-es2015-rollup

创建.babelrc文件在项目根目录,告诉babel转义时使用哪个presets

{
  "presets": ["es2015-rollup"],
}

好了剩下最后一步,定义我们的rollup.config.js配置文件

import babel from 'rollup-plugin-babel';

export default {
  // 入口文件
  entry: 'app.js',
  // 输出格式,这里使用commonJS
  format: 'cjs',
  // 输出文件
  dest: 'dist/charts.js',
  // 使用babel进行ES6转ES5
  plugins: [
      babel({
          exclude: 'node_modules/**',
      })
  ]
};

rollup会从入口文件开始,查找我们的依赖(import),逐级往下深入,把依赖的文件全部收集起来并合并到一起,最后输出到我们定义的dest文件中

执行

rollup -c

好了,我们就得到了我们最后的项目编译文件charts.js

下期预告

下一期中我一起讨论下有技术含量的内容,关于图表中文案显示的检测碰撞问题,大概效果会是这样的,红框部分文案发生了碰撞,这里完成了避让,能够正常显示

clipboard.png

查看原文

赞 5 收藏 11 评论 5

认证与成就

  • 获得 68 次点赞
  • 获得 3 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 3 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-08-09
个人主页被 1.5k 人浏览