var base64String = /*base64图片串*/;//这里对base64串进行操作，去掉url头，并转换为byte var bytes = window.atob(base64String.split(',')[1]);//处理异常，将ASCII码小于0的转换为大于0，这里有两种写法 第一种：var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for(var i = 0; i bytes.length; i++){
ia[i] = bytes.charCodeAt(i); //这里
window.onload = function () {
//初始化编辑器
var toolbarOptions = [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'color': [] }, { 'background': [] }],
[{ 'align': [] }],
['image'],
['clean'
当浏览器碰到 script 脚本的时候：
script src="script.js" /script
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
script async src="script.js" /script
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
script defer src=&q
2018年7月25日，Mislav Marohnić在推文中宣布GitHub前端已经彻底删除jQuery依赖，并全部依赖原生API。
可见的未来，很多jQuery插件会被ES5+重写，下面介绍一下原生javascript插件的写法：
插件需要满足的条件
一个可复用的插件需要满足以下条件：
插件自身的作用域与用户当前的作用域相互独立，也就是插件内部的私有变量不能影响使用者的环境变量；
插件需具备默认设置参数；
插件除了具备已实现的基本功能外，需提供部分API，使用者可以通过该API修改插件功能的默认参数，从而实现用户自定义插件效果；
插件需提供监听入口，及针对指定元素进行监听，
使用webpack项目打包以后的项目在Chrome、Safari 下运行正常，但是在IE11下运行失败！提示 vuex requires a Promise polyfill in this browser。
一脸迷惑，原来是这样的。babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill。例如，默认情况下babel可以将箭头函数，class等语法转换为ES5兼容的形式，但是却不能转换Map，Set，Promise等新的全局对象，这时候就需要使用polyfill去模拟这些新特性
babel-polyfill
原理是当运行环境中并没
Babel 的官网上在2017年9月宣布 ES2015 / ES2016/ ES2017 等等 ES20xx 时代的 presets 通通被废弃（deprecated），取而代之的是 babel-preset-env，并且承诺它将成为“未来不会过时的（future-proof）”解决方案。
babel-preset-env 是一个新的 preset，可以根据配置的目标运行环境（environment）自动启用需要的 babel 插件。
目前我们写 javascript 代码时，需要使用 N 个 preset，比如：babel-preset-es2015、ba
为什么使用 HtmlWebpackPlugin
使用webpack命令打包，默认是不能生成html文件的，我以前的解决方法，就是在webpack output的目录中，添加一个index.html文件，index.html文件的内容如下：
!DOCTYPE html
html lang="zh-cn"
head
title 首页 /title
meta charset="utf-8"
meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"
前两种方法需要设置路由history模式，后两种方法貌似更合适。
方法一：
1.在router.js里面（即路由文件中），此时模式为 history
const router = new VueRouter({
mode: 'history',
routes,
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
if (from.meta.keepAlive) {
实现难点
如何判断切换路由时是前进还是后退
每次向左向右切换动画如何实现
解决方案
我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画.
router/index.js
import VueRouter from 'vue-router'
import Home from '../components/home/home'
import User from '../components/user/user'
var router = new VueRouter({
routes
Audio对象的属性
属性
描述
audio.volume
(读/写) 音量
audio.src
(读/写) 歌曲地址
audio.currentTime
(读/写) 歌曲当前已播放时长
audio.duration
(读) 歌曲的总长度
audio.paused
(读) 布尔类型 是否处于暂停状态
audio.ended
(读) 布尔类型 歌曲是否已经播放完毕
Audio对象的方法
方法
描述
audio.play()
让歌曲开
在Vue组件中，使用.foo img{max-width:100%}不会生效，解决方法如下：
template
div class="foo"
div v-html="myHtml" /div
/div
/template
style scoped
.foo { height: 300px; }
/style
而如果在组件中使用了v-html，要为myHtml中的标签添加CSS样式，我们需要在写样式的时候添加 ：
.foo img { max-width: 100%; }
这样，编译
大多数情况下，我们都是判断页面滚动到底部，如下：
window.addEventListener('scroll', this.handleScroll);
// 处理滚动到底部的事件
handleScroll(arg) {
var clientHeight = document.documentElement.clientHeight; // 客户区大小
var scrollHeight = document.documentElement.scrollHeight; // 没用滚动条的情况下，元素内容的总高度
var scrollTop
// 时间转换 几分钟 几小时 几天
tools.formatTime = function (timespan) {
var dateTime = new Date(timespan);
var year = dateTime.getFullYear();
var month = dateTime.getMonth() + 1;
var day = dateTime.getDate();
var hour = dateTime.getHours();
var minute = dateTime.getMinutes();
var second
解决方案一，检查Vuex中的数据，没有的话，重新从服务器获取，该方案可以满足存储的简单信息。该方法的好处是比较干净。
mounted: function(){
var that = this;
//如果登录后，刷新了，vuex里的登录数据会清空，这里重新从服务器获取数据
if(tools.getCookie('token') && !this.$store.state.user.user_type){
// 判断不需要重新获取信息的页面
var noNeed = ['/login','/register','/reset'];
在写vue或者react中，有时候目录过深。使用相对路径引入模块，有点容易出错。比如下面这样：
import {tools} from "../../../../../tools";
在webpack.config.js 中，配置如下：
resolve: {
alias: {
'@': require('path').resolve(__dirname, 'src')
}
},
然后就可以在项目中使用绝对路径了。
import {tools} from "@/tools";
物体与观察者的距离远近在静态时通过物体的大小来体现。当物体运动时，通过远近物体不同的运动速度来体现，从而形成层次感。近处的物体运动快，远处的物体运动慢。
手机演示地址：//javascript.net.cn/test/446/#/
代码：
template
div class="viewport"
div class="sence"
div class="sprite sprite-free-right" /div
/div
div class="front-background" /div
只关注了2d方面的，对现在项目有意义的概念。
UI坐标系
UI坐标就是Android和iOS等应用开发的时候使用的二维坐标系。它的原点是在左上角的。
我看pixi.js的坐标原点在左上角，
OpenGL坐标
OpenGL坐标是种三维坐标。由于Cocos2d-x底层采用OpenGL渲染，因此的默认坐标就是OpenGL坐标，只不过只采用两维（x和y轴）。如果不考虑z轴，OpenGL坐标的原点在左下角。
世界坐标系
世界坐标系是系统的绝对坐标系，在没有建立用户坐标系之前画面上所有点的坐标都是以该坐标系的原点来确定各自的位置的。
世界坐标和模型坐标，Cocos2d-JS的坐标也
方法一，提示蒙层提醒用户保持竖屏体验，这种方法体验太差
方法二，强制横屏显示，对屏幕 resize 事件进行监听，当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度即可，代码如下所示。 这种方法可以解决绝大多数问题了。
// 利用 CSS3 旋转 对根容器逆时针旋转 90 度
var detectOrient = function() {
var width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight,
效果：
算法：
代码：
div class="stage"
div class="sence"
div class="sprite" /div
/div
/div
style
.stage{width: 100%; overflow: hidden; position: relative; }
.sence{width: 1024px; height: 350px; background:url(../assets/images/background.jpg); position: relative;}
.s
类似《返校》和《无尽梦魇》的那种。
基本算法：
主要是解决精灵匀速直线运动的问题。
效果：
代码：
div class="stage"
div class="sence"
div class="sprite" /div
/div
/div
style
.stage{width: 100%; overflow: hidden; position: relative; }
.sence{width: 1024px; height: 350px; background:url(../assets/i