lin-xin / blog Goto Github PK

window.name = 'linxin';
function getName(){
    console.log(this.name);
}
getName();                   // linxin

'use strict';
function fun(){
    console.log(this);
}
fun();                      // undefined

var obj = {
    name : 'linxin',
    getName : function(){
        console.log(this.name);
    }
}

obj.getName();              // linxin

var obj = {
    fun1 : function(){
        console.log(this);
    }
}
var fun2 = obj.fun1;
fun2();                     // window

var fun2 = function(){
    console.log(this);
}

var Person = function(){
    this.name = 'linxin';
}
var obj = new Person();
console.log(obj.name);      // linxin

var Person = function(){
    this.name = 'linxin';
    return {
        name : 'linshuai'
    }
}
var obj = new Person();
console.log(obj.name);      // linshuai

var obj1 = {
    name : 'linxin',
    getName : function(){
        console.log(this.name);
    }
}
var obj2 = {
    name : 'linshuai'
}

obj1.getName();             // linxin
obj1.getName.call(obj2);    // linshuai
obj1.getName.apply(obj2);   // linshuai

var request = indexedDB.open('dbName', 1);  // 打开 dbName 数据库
request.onerror = function(e){              // 监听连接数据库失败时执行
    console.log('连接数据库失败');
}
request.onsuccess = function(e){            // 监听连接数据库成功时执行
    console.log('连接数据库成功');
}

var request = indexedDB.open('dbName', 2);  // 更新版本，打开版本为2的数据库
// ...
request.onupgradeneeded = function(e){
    console.log('新数据库版本号为=' + e.newVersion);
}

var request = indexedDB.open('dbName', 2);
// ...
request.onsuccess = function(e){
    console.log('连接数据库成功');
    var db = e.target.result;
    db.close();
    console.log('数据库已关闭');
}

indexedDB.deleteDatabase('dbName');
console.log('数据库已删除');

var request = indexedDB.open('dbName', 3);
// ...
request.onupgradeneeded = function(e){
    var db = e.target.result;
    var store = db.createObjectStore('Users', {keyPath: 'userId', autoIncrement: false});
    console.log('创建对象仓库成功');
}

var request = indexedDB.open('dbName', 4);
// ...
request.onupgradeneeded = function(e){
    var db = e.target.result;
    var store = db.createObjectStore('newUsers', {keyPath: 'userId', autoIncrement: false});
    var idx = store.createIndex('usernameIndex','userName',{unique: false})
    console.log('创建索引成功');
}

var request = indexedDB.open('dbName', 5);
// ...
request.onupgradeneeded = function(e){
    var db = e.target.result;
    var tx = db.transaction('Users','readonly');
    tx.oncomplete = function(e){
        console.log('事务结束了');
    }
    tx.onabort = function(e){
        console.log('事务被中止了');
    }
}

var request = indexedDB.open('dbName', 5);
// ...
request.onsuccess = function(e){
    var db = e.target.result;
    var tx = db.transaction('Users','readwrite');
    var store = tx.objectStore('Users');
    var value = {
        'userId': 1,
        'userName': 'linxin',
        'age': 24
    }
    var req1 = store.put(value);		// 保存数据
    var req2 = store.get(1);			// 获取索引userId为1的数据
    req2.onsuccess = function(){
        console.log(this.result.userName);	// linxin
    }
    var req3 = store.delete(1);             // 删除索引为1的数据
    req3.onsuccess = function(){
        console.log('删除数据成功');        // 删除数据成功
    }
}

// boundRange 表示主键值从1到10(包含1和10)的集合。
// 如果第三个参数为true，则表示不包含最小键值1，如果第四参数为true，则表示不包含最大键值10，默认都为false
var boundRange = IDBKeyRange.bound(1, 10, false, false);

// onlyRange 表示由一个主键值的集合。only() 参数则为主键值，整数类型。
var onlyRange = IDBKeyRange.only(1);

// lowerRaneg 表示大于等于1的主键值的集合。
// 第二个参数可选，为true则表示不包含最小主键1，false则包含，默认为false
var lowerRange = IDBKeyRange.lowerBound(1, false);

// upperRange 表示小于等于10的主键值的集合。
// 第二个参数可选，为true则表示不包含最大主键10，false则包含，默认为false
var upperRange = IDBKeyRange.upperBound(10, false);

var request = indexedDB.open('dbName', 6);
// ...
request.onsuccess = function(e){
    var db = e.target.result;
    var tx = db.transaction('Users','readwrite');
    var store = tx.objectStore('Users');
    var range = IDBKeyRange.bound(1,10);
    var req = store.openCursor(range, 'next');
    req.onsuccess = function(){
        var cursor = this.result;
        if(cursor){
            console.log(cursor.value.userName);
            cursor.continue();
        }else{
            console.log('检索结束');
        }
    }
}

cursor.updata({
    userId : cursor.key,
    userName : 'Hello',
    age : 18
});

cursor.delete();

cursor.continue();

EXIF.getData(file, function() {  
    var Orientation = EXIF.getTag(this, 'Orientation');
});

ctx.rotate(angle);

var ratio = width / height;
if(imgWidth > imgHeight && imgWidth > xx){
    imgWidth = xx;
    imgHeight = Math.ceil(xx / ratio);
}else if(imgWidth < imgHeight && imgHeight > yy){
    imgWidth = Math.ceil(yy * ratio);
    imgHeight = yy;
}

canvas.toDataURL("image/jpeg", 1);

app.on('ready', () => {
    // 创建窗口、加载页面等操作
})

app.on('window-all-closed', () => {
    if(process.platform !== 'darwin'){
        app.quit();     // 退出应用
    }
})

win = new BrowserWindow({
    width: 390,         // 窗口宽度
    height: 670,        // 窗口高度
    fullscreen: false,  // 不允许全屏
    resizable: false    // 不允许改变窗口size，不然布局就乱了啊
});

const path = require('path');
const url = require('url');

win.loadURL(url.format({    // 加载本地的文件
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file',
    slashes: true
}))

const template = [                              // 创建菜单模板
    {
        label: '查看',
        submenu: [
            {label: '竖屏', type: 'radio', checked: true},      // type 属性让菜单为 radio 可选
            {label: '横屏', type: 'radio', checked: false},
            {label: '重载',role:'reload'},
            {label: '退出',role:'quit'},
        ]
    }
]

const menu = Menu.buildFromTemplate(template);  // 通过模板返回菜单的数组
Menu.setApplicationMenu(menu);                  // 将该数组设置为菜单

const template = [
    {
        label: '查看',
        submenu: [
            {
                label: '横屏'
                click: () => {              // 监听横屏的点击事件
                    win.setSize(670,460);   // 设置窗口的宽高
                }
            }
        ]
    }
]

const {ipcMain} = require('electron')
ipcMain.on('send-message', (event, arg) => {
    event.sender.send('reply-message', 'hello world')
})

const {ipcRenderer} = require('electron')
ipcRenderer.on('reply-message', (event, arg) => {
    console.log(arg);       // hello world
})

ipcRenderer.send('anything', 'hello everyone');

const win = BrowserWindow.fromId(1);        // fromId() 方法找到ID为1的窗口
win.webContents.on('todo', () => {
    win.webContents.send('done', 'well done!')
})

const {remote} = require('electron')
const BrowserWindow = remote.BrowserWindow      // 访问主进程中的BrowserWindow模块

let win = new BrowserWindow();                  // 其他的跟主进程的操作都一样

remote.require(module)          // 返回在主进程中执行 require(module) 所返回的对象
remote.getCurrentWindow()       // 返回该网页所属的 BrowserWindow 对象
remote.getCurrentWebContents()  // 返回该网页的 WebContents 对象
remote.getGlobal(name)          // 返回在主进程中名为 name 的全局变量(即 global[name])
remote.process                  // 返回主进程中的 process 对象，等同于 remote.getGlobal('process') 但是有缓存

const {shell} = require('electron');
shell.openExternal('https://github.com/lin-xin/calculator');

MyPlugin.install = function (Vue, options) {
  Vue.myGlobalMethod = function () {  // 1. 添加全局方法或属性，如: vue-custom-element
    // 逻辑...
  }
  Vue.directive('my-directive', {  // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  Vue.mixin({
    created: function () {  // 3. 通过全局 mixin方法添加一些组件选项，如: vuex
      // 逻辑...
    }
    ...
  })
  Vue.prototype.$myMethod = function (options) {  // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现
    // 逻辑...
  }
}

// toast.js
var Toast = {};
Toast.install = function (Vue, options) {
    Vue.prototype.$msg = 'Hello World';
}
module.exports = Toast;

// main.js
import Vue from 'vue';
import Toast from './toast.js';
Vue.use(Toast);

// App.vue
export default {
    mounted(){
        console.log(this.$msg);         // Hello World
    }
}

// toast.js
var Toast = {};
var showToast = false;  // showToast 用于存储toast的显示状态
Toast.install = function (Vue, options) {
    Vue.prototype.$toast = (tips) => {
        let toastTpl = Vue.extend({     // 1、创建构造器，定义好提示信息的模板
            data(){
                return {
                    show: showToast
                }
            },
            template: '<div v-show="show" class="vue-toast">' + tips + '</div>'
        });
        var vm = new toastTpl();        // 2、创建实例
        var tpl = vm.$mount().$el;      // 3、挂载实例
        
        document.body.appendChild(tpl); // 4、使用原生DOM API把它插入文档中
        vm.show = showToast = true;     // 5、显示该元素
        
        setTimeout(function () {        // 6、延迟2.5秒后隐藏该元素
            vm.show = showToast = false;
        }, 2500)
    }
}
module.exports = Toast;

// toast.js
['bottom', 'center', 'top'].forEach(type => {
    Vue.prototype.$toast[type] = (tips) => {
        return Vue.prototype.$toast(tips,type)
    }
})

Vue.prototype.$toast = (tips,type) => {     // 添加 type 参数
    let toastTpl = Vue.extend({             // 模板添加位置类
        data(){
            return {
                show: showToast
            }
        },
        template: '<div v-show="show" class="vue-toast toast-'+ type +'">' + tips + '</div>'
    });
    ...
}

var Toast = {};
var showToast = false;
Toast.install = function (Vue, options) {
    let opt = {
        defaultType:'bottom',   // 默认显示位置
        duration:'2500'         // 持续时间
    }
    for(let property in options){
        opt[property] = options[property];  // 使用 options 的配置
    }
    Vue.prototype.$toast = (tips,type) => {
        if(type){
            opt.defaultType = type;         // 如果有传type，位置则设为该type
        }
        if(showToast){
            // 如果toast还在，则不再执行
            return;
        }
        let toastTpl = Vue.extend({
            data(){
                return {
                    show: showToast
                }
            },
            template: '<div v-show="show" class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>'
        });
        var vm = new toastTpl()
        var tpl = vm.$mount().$el;
        
        document.body.appendChild(tpl);
        vm.show = showToast = true;
        
        setTimeout(function () {
            vm.show = showToast = false;
        }, opt.duration)
    }
    ['bottom', 'center', 'top'].forEach(type => {
        Vue.prototype.$toast[type] = (tips) => {
            return Vue.prototype.$toast(tips,type)
        }
    })
}
module.exports = Toast;

export default {
    data() {
        return {
            items: [{
                icon: 'el-icon-lx-home',
                index: 'dashboard',
                title: '系统首页'
            },{
                icon: 'el-icon-lx-calendar',
                index: '1',
                title: '表单相关',
                subs: [{
                    index: '1-1',
                    title: '三级菜单',
                    subs: [{
                        index: 'editor',
                        title: '富文本编辑器'
                    }]
                }]
            },{
                icon: 'el-icon-lx-warn',
                index: '2',
                title: '错误处理',
                subs: [{
                    index: '404',
                    title: '404页面'
                }]
            }]
        }
    }
}

const bus = new Vue();

bus.$emit('collapse', true);

bus.$on('collapse', msg => {
    this.collapse = msg;
})

import Schart from 'vue-schart';
export default {
    components: {
        Schart
    },
    mounted(){
        window.addEventListener('resize', ()=>{
            this.$refs.bar.renderChart();
        })
    }
}

bus.$on('collapse', msg => {
    setTimeout(() => {
        this.$refs.bar.renderChart();
    }, 300);
});

export default {
    data() {
        return {
            tagsList: []
        }
    },
    methods: {
        setTags(route){
            const isExist = this.tagsList.some(item => {
                return item.path === route.fullPath;
            })
            if(!isExist){
                this.tagsList.push({
                    title: route.meta.title,
                    path: route.fullPath,
                    name: route.matched[1].components.default.name
                })
            }
        }
    },
    watch:{
        $route(newValue, oldValue){
            this.setTags(newValue);
        }
    }
}

export default {
    data(){
        return {
            tagsList: []
        }
    },
    created(){
        // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
        bus.$on('tags', msg => {
            let arr = [];
            for(let i = 0, len = msg.length; i < len; i ++){
                // 提取组件名存到tagsList中，通过include匹配
                msg[i].name && arr.push(msg[i].name);
            }
            this.tagsList = arr;
        })
    }
}

import bus from './bus';
export default {
    data() {
        return {
            tagsList: []
        }
    },
    created(){
        this.setTags(this.$route);
        // 监听关闭当前页面的标签页
        bus.$on('close_current_tags', () => {
            for (let i = 0, len = this.tagsList.length; i < len; i++) {
                const item = this.tagsList[i];
                if(item.path === this.$route.fullPath){
                    if(i < len - 1){
                        this.$router.push(this.tagsList[i+1].path);
                    }else if(i > 0){
                        this.$router.push(this.tagsList[i-1].path);
                    }else{
                        this.$router.push('/');
                    }
                    this.tagsList.splice(i, 1);
                    break;
                }
            }
        })
    }
}

import bus from './bus';
export default {
    methods: {
        onSubmit() {
            bus.$emit('close_current_tags');
        }
    }
}

const downloadExcel = async () => {
    const res = await axios.post('/api/xxx');
	const list = res.data; // 这里数据需要怎么处理就处理
	const WorkSheet = XLSX.utils.aoa_to_sheet(list);
	const new_workbook = XLSX.utils.book_new();
	XLSX.utils.book_append_sheet(new_workbook, WorkSheet, '第一页');
	XLSX.writeFile(new_workbook, `下载.xlsx`);
};

var obj = {
    name : 'linxin'
}

function func(firstName, lastName){
    console.log(firstName + ' ' + this.name + ' ' + lastName);
}

func.apply(obj, ['A', 'B']);    // A linxin B

var obj = {
    name: 'linxin'
}

function func(firstName, lastName) {
    console.log(firstName + ' ' + this.name + ' ' + lastName);
}

func.call(obj, 'C', 'D');       // C linxin D

var obj = {
    name: 'linxin'
}

function func() {
    console.log(this.name);
}

func.call(obj);       // linxin

function func() {
    console.log(obj.name);
}

var Person1  = function () {
    this.name = 'linxin';
}
var Person2 = function () {
    this.getname = function () {
        console.log(this.name);
    }
    Person1.call(this);
}
var person = new Person2();
person.getname();       // linxin

function func() {
    console.log('linxin');
}
func.call();            // linxin

var obj = {
    name: 'linxin'
}

function func() {
    console.log(this.name);
}

var func1 = func.bind(obj);
func1();                        // linxin

function func(a, b, c) {
    console.log(a, b, c);
}
var func1 = func.bind(null,'linxin');

func('A', 'B', 'C');            // A B C
func1('A', 'B', 'C');           // linxin A B
func1('B', 'C');                // linxin B C
func.call(null, 'linxin');      // linxin undefined undefined

if (!Function.prototype.bind) {
        Function.prototype.bind = function () {
            var self = this,                        // 保存原函数
                context = [].shift.call(arguments), // 保存需要绑定的this上下文
                args = [].slice.call(arguments);    // 剩余的参数转为数组
            return function () {                    // 返回一个新函数
                self.apply(context,[].concat.call(args, [].slice.call(arguments)));
            }
        }
    }

// src/js/index.js

const main1 = require('./main1.js');	// 支持 CommonJS 模块语法
import main2 from './main2.js';			// 支持 ES6 模块语法
import '../css/index.css';				// 支持在 js 中导入 css

main1();
main2();

{
  "presets": ["env","react"]
}

// src/react/index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Hello extends Component {
    render() {
        return <h1>Hello React</h1>;
    }
}

ReactDOM.render(<Hello />, document.getElementById('react-app'));

// src/vue/index.js
import Vue from 'vue';
import App from './app.vue';

new Vue({
    el: '#vue-app',
    render: h => h(App)
})

interface Name {
    value: string;
}
function showName(name: Name){
    document.getElementById('ts-app').innerHTML = 'Hello ' + name.value;
}

showName({value: 'TypeScript'});

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions.js';
Vue.use(Vuex);
const state = {
    event: []  // event,用来存储所有事件
}
const mutations = {
    EVENTDONE(states,obj){  // EVENTDONE，用来修改事件的状态为已完成
        for (let i = 0; i < states.event.length; i++) {
            if (states.event[i].id === obj.id) {
                states.event[i].type = 2;   // type == 2,表示状态为已完成
                break;
            }
        }
    }
}
export default new Vuex.Store({
    state,
    actions,
    mutations
})

// store/actions.js
export const eventdone = ({ commit }, param) =>{
    commit('EVENTDONE',{id: param});
}

// App.vue
<template>
	<div id="app">
        <ul class="event-box">
            <li class="event-list" v-for="value in getToDo">
                <input type="checkbox" @click="moveToDone(value.id,$event)">
                <div>{{value.content}}</div>
            </li>
        </ul>
	</div>
</template>
<script>
	export default {
		computed:{
			getToDo(){    // getToDo，实时获取状态为未完成的事件
                return this.$store.state.event.filter(function(d){
                    if(d.type === 1){   // type == 1，表示状态为未完成
                        return d;
                    }
                });
            }
		},
		methods:{
			moveToDone(id,event){  // moveToDone，选中checkbox将事件移至已完成
                this.$store.dispatch('eventdone',id);
            }
		}
	}
</script>

// store/index.js
const LocalEvent = function(item){     		// 定义一个本地存储的构造函数
    this.get = function () {				// 拿数据
        return JSON.parse(localStorage.getItem(item));
    }
    this.set = function (obj) {				// 存数据
        localStorage.setItem(item,JSON.stringify(obj));
    }
    this.clear = function () {				// 删数据
        localStorage.removeItem(item);
    }
}
const local = new LocalEvent('lx_notepad'); // 创建一个本地存储的事例
const state = local.get() || {
    event: [],
    count: 0
}
const mutations = {
    ADDEVENT(states,obj){					// ADDEVENT，添加新的事件，并存储到localStorage里
		states.count++;
		obj.items.id = states.count;
        states.event.unshift(obj.items);
        local.set(states);
    }
}

<script>
    export default {
        data: function(){
            return {
                screen_type: 0,														// 筛选类型，0 表示不筛选
                screen_title: '',													// 筛选关键词，'' 表示不筛选
            }
        },
        computed:{
            notapad(){
                var self = this;
                return self.$store.state.event.filter(function(d){					// 使用过滤器
                    if(self.screen_type !== 0 && self.screen_title === ''){			// 只筛选类型
                        if( d.type === self.screen_type ){
                            return d;
                        }
                    }else if(self.screen_type !== 0 && self.screen_title !== ''){	// 筛选类型和关键词
                        if( d.type === self.screen_type && d.content.indexOf(self.screen_title) !== -1){
                            return d;
                        }
                    }else if(self.screen_type === 0 && self.screen_title !== ''){	// 只筛选关键词
                        if(d.content.indexOf(self.screen_title) !== -1){
                            return d;
                        }
                    }else{															// 不进行筛选
                        return d;
                    }
                });
            }
        }
	}	
</script>

// gulpfile.js
const { series, parallel, src, dest } = require('gulp');
const uglify = require('gulp-uglify');
const htmlmini = require('gulp-htmlmin');
const useref = require('gulp-useref');
const csso = require('gulp-csso');
const filter = require('gulp-filter');
const babel = require('gulp-babel');
const RevAll = require('gulp-rev-all');
const base64 = require('gulp-base64');
const autoprefixer = require('gulp-autoprefixer');
const del = require('del');

// 压缩html配置
const options = {
    removeComments: true,
    collapseWhitespace: true,
    collapseBooleanAttributes: true,
    removeEmptyAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    minifyJS: true,
    minifyCSS: true
};

const defaultTask = cb => {
    const jsFilter = filter('**/*.js', { restore: true });
    const cssFilter = filter('**/*.css', { restore: true });
    const htmlFilter = filter(['**/*.html'], { restore: true });
    src('*.html')
        .pipe(useref())                     // 解析html中的构建块
        .pipe(jsFilter)                     // 过滤所有js
        .pipe(babel({
            presets: ['@babel/env'],
            sourceType: 'script'
        }))
        .pipe(uglify())                     // 压缩js
        .pipe(jsFilter.restore)
        .pipe(cssFilter)                    // 过滤所有css
        .pipe(autoprefixer())               // 添加css前缀
        .pipe(base64())
        .pipe(csso())                       // 压缩优化css
        .pipe(cssFilter.restore)
        .pipe(RevAll.revision({             // 生成版本号
            dontRenameFile: ['.html'],      // 不给 html 文件添加版本号
            dontUpdateReference: ['.html']  // 不给文件里链接的html加版本号
        }))
        .pipe(htmlFilter)                   // 过滤所有html
        .pipe(htmlmini(options))            // 压缩html
        .pipe(htmlFilter.restore)
        .pipe(dest('./dist'))
        .on('error', function (err) {
            throw new Error(err.toString())
        })
    cb();
}

const delDist = cb => {
    del.sync(['./dist']);
    cb();
}

const copyAssets = cb => {
    src('static/img/**').pipe(dest('./dist/static/img/'));
    cb();
}

exports.default = series(delDist, parallel(defaultTask, copyAssets));

var blob = new Blob(['hello'], {type:"text/plain"});

var newblob = blob.slice(0,5, {type:"text/plain"});

var canvas = document.getElementById('canvas');
canvas.toBlob(function(blob){ console.log(blob); }, "image/jpeg", 0.5);

var canvas = document.getElementById('canvas');
canvas.toBlob(function(blob){
    // 使用 createObjectURL 生成地址，格式为 blob:null/fd95b806-db11-4f98-b2ce-5eb16b38ba36
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.download = 'canvas';
    a.href = url;
    // 模拟a标签点击进行下载
    a.click();
    // 下载后告诉浏览器不再需要保持这个文件的引用了
    URL.revokeObjectURL(url);
});

var reader = new FileReader();

var a = "https://lin-xin.github.io";
var b = btoa(a);
var c = atob(b);

console.log(a);     // https://lin-xin.github.io
console.log(b);     // aHR0cHM6Ly9saW4teGluLmdpdGh1Yi5pbw==
console.log(c);     // https://lin-xin.github.io

var a = "哈喽 世界";
var b = btoa(encodeURIComponent(a));
var c = decodeURIComponent(atob(b));

console.log(b);     // JUU1JTkzJTg4JUU1JTk2JUJEJTIwJUU0JUI4JTk2JUU3JTk1JThD
console.log(c);     // 哈喽 世界