Seas0n


  • 首页

  • 分类

  • 归档

  • 标签

  • 关键词
s

前端知识图谱 转

发表于 2017-05-22 | 分类于 前端

综合类

  • 前端知识体系
  • 前端知识结构
  • Web前端开发大系概览
  • Web前端开发大系概览-中文版
  • Web Front-end Stack v2.2
  • 免费的编程中文书籍索引
  • 前端书籍
  • 前端免费书籍大全
  • 前端知识体系
  • 免费的编程中文书籍索引
  • 智能社 - 精通JavaScript开发
  • 重新介绍 JavaScript(JS 教程)
  • 麻省理工学院公开课:计算机科学及编程导论
  • JavaScript中的this陷阱的最全收集–没有之一
  • JS函数式编程指南
  • JavaScript Promise迷你书(中文版)
  • 腾讯移动Web前端知识库
  • Front-End-Develop-Guide 前端开发指南
  • 前端开发笔记本
  • 大前端工具集 - 聂微东
  • 前端开发者手册
阅读全文 »

前端性能优化 转

发表于 2017-05-22 | 分类于 前端 , 性能优化

移动H5前端性能优化指南

概述

  1. PC优化手段在Mobile侧同样适用
  2. 在Mobile侧我们提出三秒种渲染完成首屏指标
  3. 基于第二点,首屏加载3秒完成或使用Loading
  4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB
  5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点
  6. 基于第五点,要合理处理代码减少渲染损耗
  7. 基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置
  8. 加载完成后用户交互使用时也需注意性能
阅读全文 »

手写webpack的plugin 转

发表于 2017-05-08 | 分类于 前端 , 构建打包 , webpack

经过上一篇博客分析webpack从命令行到打包完成的整体流程,我们知道了webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。社区里很多webpack的plugin,但是具体到我们的项目并不一定适用,这篇博客告诉你如何入手写一个plugin,然后分析源码相关部分告诉你你的plugin是如何工作。知其然且知其所以然。
该系列博客的所有测试代码。

阅读全文 »

vue知识点 转

发表于 2017-04-27

vue是什么?

vue也是一个数据驱动框架,做spa页面的
vue如果不做页面可以当做一个单独使用的js库,做双向数据绑定用
Vue的核心库只关注视图层,但是vue并不只关注视图,和angular一样也有指令,过滤器这些东西
vue有非常强大的单文件组件
就是css+html+js都写在一个.vue文件中,这样定义的组件很简洁,清晰,组件化分的很彻底
而angular中的js文件只能写js
虽然react中可以写css-in-js,但是缺乏选择器功能,即便可以在js中引入css文件,但还是不方便
vue融合了react和angular的优点,并且解决了react和angualr的痛点

阅读全文 »

常用设计素材网站 原

发表于 2017-04-20 | 分类于 设计 , 素材网
  • 花瓣
  • 阿里巴巴矢量图标库
  • pinterest
  • 站酷
  • easyicon
  • 千图网
阅读全文 »

用户体验设计 原

发表于 2017-04-20 | 分类于 设计 , 用户体验设计

用户体验设计

  • 腾讯用户体验设计
  • 网易用户体验设计
  • 网易游戏设计中心
阅读全文 »

gulp构建 原

发表于 2017-04-20 | 分类于 前端 , 构建打包 , gulp

入门指南

1. 全局安装 gulp:
1
$ npm install --global gulp
2. 作为项目的开发依赖(devDependencies)安装:
1
$ npm install --save-dev gulp
3. 在项目根目录下创建一个名为 gulpfile.js 的文件:
1
2
3
4
5
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
4. 运行 gulp:
1
$ gulp
阅读全文 »

前端功能代码块 原

发表于 2017-04-17 | 分类于 前端 , 代码块

设置跨域canvas图片,微信头像直接用base64

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById('myCanvas')
var ctx = canvas.getContext('2d')
canvas.width = 200
canvas.height = 200
var img = new Image()
img.src = "https://wx.qlogo.cn/mmopen/vi_32/lSuIIsPv3gHw7rdoSB04Zwlw24MDnCicRDXgh8cV78dpVTUZy0JX6HjdRCBDhOSqVJIkQcLEvWwtb5oBwMFnKAQ/132"
img.setAttribute("crossOrigin",'Anonymous')
img.onload = function(res){
ctx.drawImage(img,0,0,200,200)
var _img = document.createElement('img')
_img.src = canvas.toDataURL('jpg')
document.body.appendChild(_img)
}
</script>

微信动态修改title

1
2
3
4
5
6
7
8
document.title = "xxxx"
var $body = $('body');
var $iframe = $('<iframe src="/favicon.ico"></iframe>');
$iframe.on('load',function() {
setTimeout(function() {
$iframe.off('load').remove();
}, 0);
}).appendTo($body);

摇一摇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var speed = 15;//摇动速度
var flag=true;
var x = 0,y = 0,z = 0,lastX =0, lastY = 0,lastZ = 0;
$(function(){
if(window.DeviceMotionEvent) {
window.addEventListener('devicemotion', shakeHandler, false);
}
});
function shakeHandler(event){
var acceleration =event.accelerationIncludingGravity;//将传感值赋给acceleration
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed ) {
if(flag==true){
flag=false;
}
}
lastX = x;
lastY = y;
lastZ = z;
}

摇一摇音效播放

1
2
3
4
5
6
var load = document.getElementById('load')
load.play()
load.setAttribute('src','mp3/shakeBg.mp3')
load.load()
load.play()
// 先播放一段空音效,替换,才能播放
阅读全文 »

正则 转

发表于 2017-04-17 | 分类于 前端 , 正则

1 . 校验密码强度

密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间。

^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$

2. 校验中文

字符串仅能是中文。

^[\u4e00-\u9fa5]{0,}$

阅读全文 »

前端疑难杂症 原

发表于 2017-04-17 | 分类于 前端 , 知识点

苹果手机自动播放或者控制播放

苹果手机audio标签单单控制play()没声音,需要通过再次加载音效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
if ($('#auidoSuccess').length) {
$('#auidoSuccess').attr('src', 'themes/audio/weixinyaoyy.mp3')
function audioAutoPlay(id) {
var audio = document.getElementById(id);
audio.load();
document.addEventListener("WeixinJSBridgeReady", function () {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
audio.load();
});
}, false);
document.addEventListener('YixinJSBridgeReady', function () {
audio.load();
}, false);
}
audioAutoPlay('auidoSuccess')
}
}
playMusic()

阅读全文 »
1…3456
Seas0n

Seas0n

59 日志
35 分类
49 标签
GitHub QQ
欢迎来到Seas0n的博客
PS: 本博客用于日常积累,并非全部原创
你是第位旅客 总访问量次