前端 on 月盾的博客

微信小程序页面之间传递数据和通信

Tue, 28 May 2024 15:49:21 +0800

微信小程序页面间通信有标准的方法。有页面A，页面B，按照顺序，A -> B，再从B -> A。两种操作页面之间数据传递。

A页面：

Page({
  jump: function () {
    wx.navigateTo({
      url: './b-page?id=123',
      events: {
        acceptDataFromOpenedPage: function (data) {
          //接收B页面发送的数据
          console.log(data)
        },
      },
      success: function (res) {
        //页面打开后发送数据到B页面
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'send from opener page' })
      }
    })
  },
})

B页面：

Page({
  onLoad: function (option) {
    const id = option.id;// 通过URL参数获取A页面传递的数据
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('acceptDataFromOpenerPage', function (data) {
      //通过事件channel接收A页面传递的数据
      console.log(data)
    })
  },
  setDataToA: function () {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', { data: 'send from opened page' })
  },
})

又一个比Nodejs快的运行时，它叫LLRT

Wed, 28 Feb 2024 16:16:19 +0800

前端圈的发展一向让人感觉学不动，前有Deno，后有Bun，这不，最近又出了个比Nodejs快的Runtime，它叫LLRT。

1. 什么是LLRT

LLRT是Low Latency Runtime的缩写，是一种轻量级JavaScript运行时，旨在满足对快速高效的无服务器应用程序日益增长的需求。与在AWS Lambda上运行的其他JavaScript运行时相比，LLRT的启动速度提高了10倍以上，总体成本降低了2倍。

2. LLRT是如何做到比Nodejs快的

它内置在Rust中，利用QuickJS作为JavaScript引擎，确保高效的内存使用和快速启动。

3. LLRT的发展

它还处于实验阶段，并不稳定，还不推荐用于生产。

next/image组件导致服务器504超时

Wed, 17 May 2023 19:38:34 +0800

谁能想到，一个前端组件也能把服务搞崩溃。这个组件正是next/image，原本是想利用next/image来优化图片，next.js官方也一直推荐这么做。

突然有一天用户反馈网站出现504超时报错，当时优先重启恢复服务。然后把日志打开观察，果不其然，几分钟后就又出现504超时，伴随出现的日志则是：

upstream image response failed for https://example.com/280d59d8-f3b0-11ed-a295-00163e253f9a_00002_VvBbv3zj.jpg?OSSAccessKeyId=LTAI5nodLHeacT1J5SmWh&Expires=317044217325&Signature=Wf5jYWf7vnXOyRoKLVtiTCrt8%3D 404

初步判断是图片404导致服务器超时，深入猜测是使用next.js服务端渲染请求了图片资源，而图片资源不存在导致服务器渲染出错。

但是很不合理，服务端只是把图片资源的地址渲染到html中，并不会在服务端请求图片资源才对，为什么服务器日志会出现上述错误信息呢？于是观察浏览器中图片的请求，发现格式是这样的： http://example.com/_next/image?url=https%3A%2F%2Fexample.com%2Ff6c912da-f0cc0000_0d7GBaLE.jpg%3FOSSAccessKeyId%3DmWh%26Expires%3D317043899846%26Signature%3DYUMro%253D&w=384&q=75

浏览器请求的图片资源并不是图片的真实地址，而是经过了next.js服务处理的，尤其是URL最后两个参数，是图片压缩参数。如果你发现图片变模糊了，也可能是这两个参数捣的鬼。直接拿着这个地址去浏览器请求发现响应很慢，这时再次得出结论：这个图片组件有问题。为了验证把所有使用了next/image组件全部使用原生img标签，发布到线上后就再没出现504超时。

总结：next/image组件包装后的图片资源需要经过node层压缩处理，会消耗CPU资源，对于大量的图片资源会有风险，酌情处理。本次出现的时候伴随着图片资源404，可能是有bug存在，如果加载不到正确的图片就会触发bug。另一种解决方案：根据官方文档说明，如果使用next/image,需要添加sharp包来提高性能，但是可能需要注意内存消耗问题。

next.js项目使用pm2 reload出现502

Mon, 15 May 2023 19:09:41 +0800

为了使next.js项目能够不宕机，使用了pm2守护进程，既能保证node出现异常情况能够自动重启，也能保证服务器整机重启时自动恢复服务。多年使用下来的确能够良好运行，不过最近却出现了与原本期望不符的情况。

在已经启动next.js项目的情况下，如果需要重启，我使用了pm2 reload appname，实际上没有完美的零停机重启，反而是直接出现服务不可用，访问网站就502，并且一直无法恢复。在查阅pm2 issue后发现确实有这样的bug。

无奈，只能使用pm2 restart来重启应用。

Sveltekit1.0后的使用感受

Sat, 31 Dec 2022 11:02:40 +0800

之前提到过关于svelte框架——sapper和sveltekit的发展，已经是1年前的事了，其中提到过svelte的框架sapper和sveltekit，sapper已经明确不再更新了，官方推荐的是sveltekit。然后经过两年的迭代更新，于2022年12月终于推出了1.0版本。可以看看官方博客对1.0的介绍Announcing SvelteKit 1.0。

然后谈谈个人感受。

优点： sveltekit集成的还不错，开发体验可以，使用官方提供的脚手架创建的项目就可以直接使用，不需要做任何配置。热更新，响应速度快，支持typescript等等，该有的都有了。

缺点： 又是一个全新轮子，这也是整个前端的通病，除了js是通用的，其他的都能给你整出花来，sveltekit在1.0版本之内已经有破坏性的更新，一年前创建的新项目，一年后基本不能用了。

至于要不要使用，那就看个人情况了，如果你厌烦了其他框架，倒是可以尝尝鲜，如果你想以此来做长期项目的话，个人就不推荐了，毕竟太新，而且向下兼容又做的不好，隔三差五一个破坏性更新，这种折腾劲恐怕没几个人受得了。而且对自己的技术也不能积累，长此以往并没有好处。

sveltekit官方文档

使用sveltekit开发一个服务端渲染（SSR）项目

Wed, 07 Apr 2021 06:29:00 +0000

上篇简单介绍了sapper和sveltekit的发展，目前sveltekit还只是Beta版本，有很多不确定因素存在，有可能会有大的变更，所以还不推荐在生产环境中使用，不过在个人项目和小项目中可以大胆尝试。

今天我们就正式使用sveltekit开发一个web项目。

第一步：创建项目

mkdir my-app

cd my-app

npm init svelte@next

npm install

npm run dev

这样就可以创建一个简单的项目了，不过和我们真实需求还有些差距，既然是使用sveltekit，那么最重要的原因是其支持服务端渲染了。这就需要从服务端获取数据，接下来就实现这样的需求。

第二步：路由

和sapper一样，sveltekit也是基于文件系统的的路由器，这就需要我们来合理的组织目录结构。路由的核心目录是src/routes，当然，这个也是可配置的，按照自己的需求修改svelte.config.cjs，参考文档：https://kit.svelte.dev/docs#configuration。

我们以一个博客系统为例，在scr/routes下创建blog目录，光有目录还不行，如果想要访问 /blog 路由，还需要创建index.svelte文件，内容如下：

<script context="module">
    /**
	 * @type {import('@sveltejs/kit').Load}
	 */
	export async function load({ page, fetch, session, context }) {
		return fetch(`blog.json`)// index.json.js = blog.json或blog/blog.json
			.then((r) => r.json())
			.then((posts) => {
				console.log(posts);
				return {
					props: {
						posts
					}
				};
			});
	}
</script>

<script>
	export let posts;
</script>

<svelte:head>
	<title>Blog</title>
</svelte:head>

<h1>Recent posts</h1>

<ul>
	{#each posts as post}
		<!-- we're using the non-standard `rel=prefetch` attribute to
				tell Sapper to load the data for the page as soon as
				the user hovers over the link or taps it, instead of
				waiting for the 'click' event -->
		<li><a rel="prefetch" href="blog/{post.slug}">{post.title}</a></li>
	{/each}
</ul>

<style lang="less">
	ul {
		margin: 0 0 1em 0;
		line-height: 1.5;
	}
</style>

index.svelte中load函数是一个关键函数，它接收四个参数：

关于svelte框架——sapper和sveltekit的发展

Tue, 30 Mar 2021 02:33:30 +0000

虽然您可能现在还没有听说过svelte，但是其实svelte的发展速度超过了你的想象。

本文主要讲的是关于sapper和sveltekit这两款框架的发展。

svelte作者里奇·哈里斯（Rich Harris）在2020年10月的svelte峰会上表示：sapper永远不会发布1.0版本。

也就是说sapper不会发布正式版，一直处于非稳定版本。也可能放弃更新。

主要原因是sapper多年来代码库变得凌乱，但更主要的原因是最近网络发生了很大变化。

而作者放弃sapper后的另一种选择是开发SvelteKit。

Sapper和SvelteKit都是svelte的开发框架，类似于vue的nuxt框架。

sveltekit包含的功能有：

服务端渲染（SSR）
路由
typescript支持
less, scss支持
serverless
vite打包

可以看到，sveltekit几乎包含了所有我们想要的功能，既能高效开发，又有高性能。

创建sveltekit的方法：


mkdir my-app

cd my-app

npm init svelte@next

npm install

npm run dev

需要注意，您的nodejs版本需要更新到v12以上，否则可能出现以下错误：


$ npm run dev -- --open


> sveltekit-app@0.0.1 dev D:\workspace\sveltekit-app

> svelte-kit dev "--open"

D:\workspace\sveltekit-app\node_modules\@sveltejs\kit\svelte-kit.js:2

import './dist/cli.js';

	SyntaxError: Unexpected string
	at Module._compile (internal/modules/cjs/loader.js:723:23)
	at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
	at Module.load (internal/modules/cjs/loader.js:653:32)
	at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
	at Function.Module._load (internal/modules/cjs/loader.js:585:3)
	at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
	at startup (internal/bootstrap/node.js:283:19)
	at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
									   
	npm ERR! code ELIFECYCLE
	npm ERR! errno 1
	npm ERR! sveltekit-app@0.0.1 dev: `svelte-kit dev "--open"`
	npm ERR! Exit status 1
	npm ERR!
	npm ERR! Failed at the sveltekit-app@0.0.1 dev script.
	npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

使用sveltekit开发一个服务端渲染（SSR）项目

svelte history路由刷新后404

Fri, 08 Jan 2021 03:55:56 +0000

npms.io上搜索到svelte的route包其实也不算少，使用比较广泛的svelte-spa-router路由包却不支持history模式。有些支持history模式的使用上也不是很方便，试用过五六个支持history的路由后最终@spaceavocado/svelte-router算是满足了要求。

使用简单
功能丰富
支持history和hash 我也是够难伺候的。

在试用了多个支持history的路由过程中，都遇到了一个问题：切换路由后刷新404。这也算是单页应用的通病了。不过像vue这种是在部署到服务器上刷新404，而svelte却在开发过程中也出现了，又想放弃了… 好在我也是试用过五六七八个路由的人了，中间不知道尝试过多少种方法来实现history路由。最后使用@spaceavocado/svelte-router包实现了history路由的时候我还是满心欢喜。

使用方法：

//App.svelte
<script>
	import RouterView from '@spaceavocado/svelte-router/component/view';
	import { routes } from './router.js'
</script>

<RouterView />

//router.js
import createRouter from '@spaceavocado/svelte-router';
import index from './index/index.svelte';
import a from './a/a.svelte';
import b from './b/b.svelte';

export const routes = createRouter({
    mode: "HISTORY",
    routes: [
        {
            path: '/',
            name: 'HOME',
            component: index,
        },
        {
            path: '/a',
            name: 'a',
            component: a,
        },
        {
            path: '/b',
            name: 'b',
            component: b,
        },
        {
            path: '*',
            component: index,
        },
    ],
});

// index.svelte
<script>
	import RouterLink from '@spaceavocado/svelte-router/component/link';
</script>

<main>
	<h1>Hello {name}!</h1>
	<RouterLink to="/a">a页面</RouterLink>
	<RouterLink to="/b">b页面</RouterLink>
</main>

可是一刷新就嗝屁了，依旧出现404.无意中就试了一下之前使用其他路由包使用的一种rollup配置方法。 package.json中的start命令： sirv public -s加了-s参数就好了。

基于sapper开发svelte项目配置本地代理

Tue, 05 Jan 2021 11:09:55 +0000

sapper可能被放弃更新，如果您要继续使用svelte，可以考虑使用sveltekit

最近使用svelte开发一个项目，说实在的，开发过程中遇到不少问题。每次遇到问题的时候都有种想放弃的冲动，这生态也太差了，查个啥啥问题都查不到，找个啥啥插件也没有。不过，到最后，遇到的问题又都解决了。这不，今天又遇到了本地代理的设置问题。在说遇到的问题之前先介绍一些项目架构。该项目是基于sapper框架开发，这是一个使用svelte开发的框架，具备以下特点：

服务端渲染
路由
代码分割
默认支持渐进式web应用（PWA）
预取路由
单独的头标签（meta，link等）
作为静态站点弹出
Cypress测试（免费，简单，端到端的测试）

可以看到，sapper基本是集合了目前前端开发所有需求，双向数据绑定，渐进式开发，SSR，静态化，高性能。

遇到的新问题：对于前端项目，调用接口时容易遇到跨域问题，一般是使用本地代理解决。自然也想这样来做，可是sapper没有vue项目那样的生态，用的打包工具也不是webpack，而是rollup。那么就使用sapper自带的服务端来做代理好了。sapper的服务端用的是polka，而不是express，不过没关系，其实可以相互替换。最关键的是增加了http-proxy-middleware中间件，却对中间件位置很敏感，不是想随便在哪添加一下就行。需要添加在第一个中间件位置，否则就会优先使用静态服务中间件，导致接口找不到。完整代码：

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';
import { createProxyMiddleware } from 'http-proxy-middleware';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

polka()
	// 需要放在最前面，否则接口404，secure参数解决调用https问题
	.use('/api', createProxyMiddleware({ target: 'https://example.com', pathRewrite: { '^/api': '' }, secure: false, changeOrigin: true, }))
	.use(
		compression({ threshold: 0 }),
		sirv('static', { dev }),
		sapper.middleware()
	)
	.listen(PORT, err => {
		if (err) console.log('error', err);
	});

总结： 总体来说，使用svelte开发的确没有vue顺畅，但遇到的问题都有解决方案，对于一些非核心项目还是可以使用的，粗略的对比老项目，在性能上有50%的提升。如果你不想使用回最原始的开发方式来提升性能，那么svelte是个不错的备选方案。

svelte项目rollup配置px2rem

Tue, 05 Jan 2021 03:20:41 +0000

使用svelte开发项目时遇到需要将px转换成rem的需求，有试过postcss-px2rem，postcss-pxtorem，等postcss插件，都没成成功，最后找到了postcss-units插件成功实现。完整rollup配置文件如下： converts px to rem 该配置是sapper项目配置

import path from 'path';
import resolve from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import commonjs from '@rollup/plugin-commonjs';
import url from '@rollup/plugin-url';
import svelte from 'rollup-plugin-svelte';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';
import config from 'sapper/config/rollup.js';
import pkg from './package.json';
import sveltePreprocess from 'svelte-preprocess';
// import { less } from 'svelte-preprocess';
const postcssUnits = require('postcss-units');

const mode = process.env.NODE_ENV;
const dev = mode === 'development';
const legacy = !!process.env.SAPPER_LEGACY_BUILD;

const onwarn = (warning, onwarn) =>
	(warning.code === 'MISSING_EXPORT' && /'preload'/.test(warning.message)) ||
	(warning.code === 'CIRCULAR_DEPENDENCY' && /[/\]@sapper[/\]/.test(warning.message)) ||
	onwarn(warning);

export default {
	client: {
		input: config.client.input(),
		output: config.client.output(),
		plugins: [
			replace({
				'process.browser': true,
				'process.env.NODE_ENV': JSON.stringify(mode)
			}),
			svelte({
				dev,
				hydratable: true,
				emitCss: true,
				// preprocess: [
				// 	less(),
				// ]
				preprocess: sveltePreprocess({
					postcss: {
						plugins: [
							postcssUnits({
								size: 75
							}),
						]
					},
				}),
			}),
			url({
				sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
				publicPath: '/client/'
			}),
			resolve({
				browser: true,
				dedupe: ['svelte']
			}),
			commonjs(),

			legacy && babel({
				extensions: ['.js', '.mjs', '.html', '.svelte'],
				babelHelpers: 'runtime',
				exclude: ['node_modules/@babel/**'],
				presets: [
					['@babel/preset-env', {
						targets: '> 0.25%, not dead'
					}]
				],
				plugins: [
					'@babel/plugin-syntax-dynamic-import',
					['@babel/plugin-transform-runtime', {
						useESModules: true
					}]
				]
			}),

			!dev && terser({
				module: true
			}),
		],

		preserveEntrySignatures: false,
		onwarn,
	},

	server: {
		input: config.server.input(),
		output: config.server.output(),
		plugins: [
			replace({
				'process.browser': false,
				'process.env.NODE_ENV': JSON.stringify(mode)
			}),
			svelte({
				generate: 'ssr',
				hydratable: true,
				dev,
				// preprocess: [
				// 	less(),
				// ]
				preprocess: sveltePreprocess({
					postcss: {
						plugins: [
							postcssUnits({
								size: 75
							}),
						]
					},
				}),
			}),
			url({
				sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
				publicPath: '/client/',
				emitFiles: false // already emitted by client build
			}),
			resolve({
				dedupe: ['svelte']
			}),
			commonjs(),
		],
		external: Object.keys(pkg.dependencies).concat(require('module').builtinModules),

		preserveEntrySignatures: 'strict',
		onwarn,
	},

	serviceworker: {
		input: config.serviceworker.input(),
		output: config.serviceworker.output(),
		plugins: [
			resolve(),
			replace({
				'process.browser': true,
				'process.env.NODE_ENV': JSON.stringify(mode)
			}),
			commonjs(),
			!dev && terser()
		],

		preserveEntrySignatures: false,
		onwarn,
	}
};

配置完成后同时需要将css进行修改：

svelte函数传参

Tue, 29 Dec 2020 02:20:33 +0000

svelte给dom对象绑定事件和vue框架类似。定义函数：

function handler(index){
	alert("hello", index);
}

绑定事件：

<button on:click={handler}>点击</button>

但是带参函数的使用就略有不同了，函数handler的参数index需要传入的时候，不能直接这样使用<button on:click={handler(123)}>点击</button>,这样的写法会在页面打开时直接执行，而不是在点击按钮的时候执行。

这是初学svelte的时候比较郁闷的事，官方文档中也没有明显的文档说明如何传参。正确的传参方式是这样的： <button on:click={() => handler(123)}>点击</button> 将on:click的内容改写为匿名函数，在函数中调用。

Svelte3路由

Sat, 28 Nov 2020 07:16:53 +0000

svelte目前没有提供官网路由组件，不过可以在社区中找到。本文介绍的是svelte-spa-router的使用方法。

npm i svelte-spa-router 参考以下目录结构创建文件（不是必须）

router.js:

import index from './index/index.svelte';
import a from './a/a.svelte';
import b from './b/b.svelte';

export const routes = {
    '/': index,
    '/a': a,
    '/b': b
}

动态导入组件和代码分割：

import { wrap } from 'svelte-spa-router/wrap'
import index from './index/index.svelte';

export const routes = {
    '/': index,
    '/a': wrap({
        asyncComponent: () => import('./a/a.svelte')
    }),
    // '/b': b
	// 动态加载
    '/b': wrap({
        asyncComponent: () => import('./b/b.svelte')
    }),
}

动态导入组件的优点是组件不会一起打包，而是单独的组件文件，在打开对应的页面时才会请求，可以有效减少包文件大小。 App.svelte:

<script>
	import Router from 'svelte-spa-router'
	import { routes } from './router.js'
</script>

<Router {routes} />

a.svelte:

<script>
import { link } from "svelte-spa-router";
</script>

<a href="/a" use:link>a</a>
<a href="/b" use:link>b</a>

注意：svelte-spa-router是基于hash实现，作者认为这是静态单页应用的理想实现方式，history方式的路由需要增加服务端，这增加了复杂性。

vue nuxt组建注册

Wed, 23 Sep 2020 05:50:12 +0000

Nuxt.js 2.13+可以扫描并自动导入您的组件，不再需要在该script部分中手动导入它们！

nuxt.config配置：

export default {
  components: true
}

设置为true或使用对象时，它将包含nuxt / components依赖项，并且~/components在模板中使用它们时会自动导入您的组件。

组件目录：

components/
  ComponentFoo.vue
  ComponentBar.vue

使用

<template>
  <ComponentFoo />
  <component-bar />
</template>

注意：如果使用nuxt 2.10…2.13，则还必须手动安装并添加@nuxt/components到buildModulesinside nuxt.config。

vue子组件修改父组件的数据

Sat, 01 Aug 2020 03:32:54 +0000

vue在子组件中直接修改父组件传递下来的数据会报错： Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "json"

原因是vue子组件不能直接修改父组件的数据，可以使用this.$emit发送通知，让父组件来修改。示例代码：

子组件：

this.$emit("changeData", "要修改的数据");

父组件：

<mycomponent :json="JsonData" @changeData="changeData"></mycomponent>

data(){
    return {
		JsonData:{}
	}
}
methods:{
    changeData(newData){
	    this.JsonData = newData;
	}
}

子组件发送changeData事件，父组件绑定changeData事件并接受数据，赋值给父组件的JsonData属性，子组件的值也会改变。从而实现子组件修改父组件的属性值。

原生js实现图片预览

Wed, 29 Jul 2020 03:45:04 +0000

不依赖jquery也可以实现图片预览功能：

<!--图片放大后的div 开始  这块粘贴在你的html中最后body前 -->
<div id="outerdiv" style="text-align: center;position: fixed;z-index: 9999;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(28,28,28,0.9);">
	<img id="bigimg" style="max-height: 800px;max-width: 100%;border: 0;margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" src="" />
</div>
<!--图片放大后的div 结束 这块粘贴在你的html中最后body前-->

<!--js开始 是放大点击的触发事件 这块粘贴在你的html中最后body前-->
<script type="text/javascript">
	//图片放大
	document.querySelector("#outerdiv").style.display = "none";
	document.querySelectorAll("img").forEach(function (item) {
		item.style.cursor = "pointer";
	});

	document.querySelectorAll("img").forEach(function (item) {
		item.addEventListener("click", function () {
			imgShow("#outerdiv", "#bigimg", this);
		})
	})

	function imgShow(outerdiv, bigimg, _this) {
		var src = _this.src;//获取当前点击的pimg元素中的src属性
		document.querySelector('#outerdiv').style.display = "block";
		document.querySelector(bigimg).src = src;//设置#bigimg元素的src属性
	}
	document.querySelector("#outerdiv").addEventListener("click", function () {
	//再次点击淡出消失弹出层
		document.querySelector('#outerdiv').style.display = "none";
	});
</script>
<!--js开始 是放大点击的触发事件 这块粘贴在你的html中最后body前-->

整体代码量少，实现也简单。效果如下：

js转图片为base64上传

Mon, 25 Jun 2018 07:10:28 +0000

//上传图片
	var imagesBase64 = [];
	$("input[type=file]").on("change", function (e) {
		var image = e.target.files[0];
		var imgFile = new FileReader();
		var imgShow = new Image();
		imgFile.readAsDataURL(image);
		imgFile.onload = function () {
			var imgData = this.result; //base64数据
			imagesBase64.push({
				teaId: teacherInfo.id,
				fileType: "award",//图片
				fileName: image.name,
				file: imgData,
			});
			imgShow.src = imgData;
			imgShow.style.width = "100px";
			imgShow.style.height = "100px";
			imgShow.title = "双击删除";
			$("#imageShow").append(imgShow);
		}
	});
	$("#imageShow").on("dblclick ", "img", function () {
		var index = $("#imageShow > img").index(this);
		console.log(index);
		$(this).remove();
		imagesBase64.splice(index);
		console.log(imagesBase64)
	});

webpack构建vue项目警告

Fri, 16 Feb 2018 13:22:49 +0000

bundle.js:935 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

解决方案：与entry属性平级添加

resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
			//该路径为node_modules下的vue目录
        }
    }

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

出现警告的原因是使用了template属性。文文点到为止，详情请直接访问中文官方文档https://cn.vuejs.org/v2/guide/installation.html#对不同构建版本的解释

js复制文本内容

Thu, 02 Jun 2016 05:36:53 +0000

http://yuedun.github.io/copy.html

点击链接查看:js复制

fullcalendar点击prve或者next按钮翻月触发事件调用

Tue, 22 Mar 2016 13:32:59 +0000

$('#calendar').fullCalendar({
    lang: "zh-cn",
    header: {
        left: 'prev, next, today',
        center: 'title',
        right: 'month'
    },
    height: 500,
    dayClick: function(date, jsEvent, view) {
        //点击空白日期调用
    },
    eventClick: function(calEvent, jsEvent, view) {
    //点击已有数据的日期调用
    },
    defaultDate: moment(),//默认日期
    events:function(start, end, callback){
    //点击prev上一月, next下一月等事件时调用
    }
});

vue.js做的应用中点击搜索功能会改变URI

Thu, 04 Feb 2016 07:59:14 +0000

用vue.js做的后台管理系统，有一个列表搜索功能，正常登陆进去，直接点击搜索功能，页面就会刷新一遍，原因是url地址变化了

原本地址是：
http://www.mydomain/#!/index
点击搜索以后就变成了
http://www.mydomain/?#!/index

在#!前面自动加了?，导致页面刷新一遍，这样第一次搜索就没意义了.

经过初步排查后发现点击其他按钮不会改变URL地址，对比后发现搜索按钮的type=“submit”，可能是提交表单导致跳转了，那么将type改为button或者直接去掉试试，结果还是不行，干脆也改为标签（加了bootstrap按钮样式），结果好了。为什么将button type改为button不行呢，原因是在标签内标签type会被默认当做submit，（IE浏览器默认type=button）

vue.js click点击事件获取当前元素对象

Wed, 27 Jan 2016 14:59:54 +0000

Vue.js可以传递$event对象

<body id="app">
  <ul>
	<li v-on:click="say('hello!', $event)">点击当前行文本</li>
	<li>li2</li>
	<li>li3</li>
  </ul>
  <script>
   new Vue({
	   el: '#app',
	   data: {
		message: 'Hello Vue.js!'
	   },
	   methods: {
		say: function(msg, event) {
		   //获取点击对象
		   var el = event.currentTarget;
		   alert("当前对象的内容："+el.innerHTML);
		}
	}
   })
  </script>
 </body>

函数调用处传递$event

v-on:click="say('hello!', $event)"

函数中获取到的event.currentTarget对象就是当前元素

在线示例

请查看HTML页面示例源码

vue.js对表单值初始化

Thu, 14 Jan 2016 01:57:43 +0000

新建表单有些input输入框需要默认值，比如性别需要一个男或女默认值。再比如一个日期选择框需要默认今天。如果按照HTML的方式设置不会起作用

<input type="radio" name="gender" value="0" checked="checked" v-model="gender">男
<input type="radio" name="gender" value="1" v-model="gender">女
<input type="date" value="2016-01-06" v-model="date">

在vue.js页面中上面这种设置方式是不会起作用的,性别不会选中，日期也不会有值。解决办法是对v-model属性设值，在初始化时给gender=0，那么默认会选中性别男，给date=“2016-01-06"日期控件也有值。

js省市级联动插件

Tue, 12 Jan 2016 04:45:18 +0000

在线示例：/views/address

具体代码看页面源码

vue.js中使用focus，blur事件

Sun, 10 Jan 2016 04:08:19 +0000

在线示例

使用focus，blur可对表单进行验证，除了这两个事件，还有一个watch属性可监听data属性值得变化，具体可打开浏览器控制台看属性值得变化情况，代码可直接在浏览器中查看源码

vue.js开发gulp监听文件变化自动编译

Mon, 04 Jan 2016 05:52:14 +0000

直接看代码：

var gulp = require('gulp')
var webpack = require("gulp-webpack");
var webpackConfig = require("./webpack.config.js");
// gulp.task("webpack", function(callback) {
//   var myConfig = Object.create(webpackConfig);
//   webpack(myConfig, function(err, stats) {
//           console.log(">>>>>err:"+JSON.stringify(err))
//           console.log(">>>>>stats:"+stats)
//         if(err) throw new Error("webpack", err);
//         callback();
//     });
// });

/**
 * 编译时有错误提示
 */
gulp.task("webpack", function(){
    return gulp.src("./app.js")
    .pipe(webpack(Object.create(webpackConfig)))
    .pipe(gulp.dest("./dist/"))
});

gulp.watch('./views/*', ['webpack']);

webpack.config.js配置

var webpack = require("webpack");
module.exports = {
    entry: //"./app.js",
        {
            app:"./app.js"
            // vendor: ["./javascripts/test"]
        },
    output: {
        path: __dirname + "/dist/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass']
            },
            //{ test: /\.css$/, loader: "style!css" },
            { test: /\.vue$/, loader: 'vue-loader'},
            { test: /\.(jpg|png|gif)$/, loader: "file-loader?name=images/[hash].[ext]"}
        ]
    },
    // devtool: '#source-map',
    // plugins:[
    //     new webpack.optimize.CommonsChunkPlugin({
    //         name: "vendor",//和上面配置的入口对应
    //         filename: "common.js"//导出的文件的名称
    //     })
    // ]
};

不得不承认自己还是有很多不知道的配置，刚发表完本文就得知一种更高效的方式：直接用webpack自带的监听参数：>webpack -w即可实现，并且编译速度更快，从几秒降到了毫秒。

vue.js在chrome浏览器下输入汉字会带出拼音

Fri, 01 Jan 2016 10:19:53 +0000

本想写篇vue.js的教程的，但牵扯的知识点比较多，最近又没时间，就记录下过程中遇到问题吧。开发过程中用的360极速浏览器，也没什么问题，但是其他人测试的时候用的是chrome浏览器，输入汉字的时候会连拼音也带进去，比如输入的是“你好”，结果却成了“nihao你好”。

按理说360极速浏览器也用的是chrome内核，不应该出现这两种不同的情况，这个问题先不追究了。还是说说为什么vue.js的输入框会出现拼音的问题。我本以为是浏览器的差异造成这种现象，但是也不是所有输入框都会出现，那一定是程序的问题。

这是一种双向数据绑定常见写法，但是由于我的理解不够透彻，写成了这样：

我的理解是更新的时候要先显示数据，所以就在input里加了value来初始化数据，也是因为加了这个value导致输入汉字出现拼音，也与浏览器有点关系，就是输入的时候chrome浏览器会把输入的汉字拼音拼写也放进输入框，那么数据模型就接收了输入，敲击空格键的时候又输进了汉字，所以就都带进来了。但其实只需要v-model就能实现数据的接收和输出。

js prototype的理解【转】

Wed, 25 Nov 2015 02:28:52 +0000

prototype属性可算是JavaScript与其他面向对象语言的一大不同之处。 prototype就是“一个给类的对象添加方法的方法”，使用prototype属性，可以给类动态地添加方法，以便在JavaScript中实现“ 继承”的效果。

具体来说，prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法，当你用prototype编写一个类后，如果new一个新的对象，浏览器会自动把prototype中的内容替你附加在对象上。这样，通过利用prototype就可以在JavaScript中实现成员函数的定义，甚至是“继承”的效果。

对于javascript本身而言是基于对象的，任何元素都可以看成对象。然而类型和对象是不同的，而我们所讲的prototype属性即是基于类型的一种属性。对于prototype的基本使用就如对象的创建及属性赋值一样的简单。直接通过赋值操作即可完成属性的创建。


/**
 * 
关于prototype,
理解这个很有必要

可以在类型上使用proptotype来为类型添加行为。这些行为只能在类型的实例上体现。

JS中允许的类型有Array,
Boolean,
Date,
Enumerator,
Error,
Function,
Number,
Object,
RegExp,
String

以后这样分，没有实例化的类称为类型，实例化的类称为对象实例简称实例

 */
Object.prototype.name = "zhangsan";

Object.prototype.nihao = function () {

    alert("i can method name is " + this.name);

}

var obj = new Object();

obj.nihao();

alert(obj.name);



// 在实例上不能使用prototype，否则会发生编译错误

obj.prototype.sex = "男"; //error,无法给一个实例prototype
var o = {

    name: "zhangsan"

}

o.prototype.age = 30; //error,无法给一个实例prototype
//可以为类型定义“静态”的属性和方法，直接在类型上调用即可
alert(Object.name);

Object.nihao();

//实例不能调用类型的静态属性或方法，否则发生对象未定义的错误。
Object.class = "三年二班"; //类静态属性
var ob = new Object();

alert(ob.class); //error 实例不能调用类型的静态属性和方法
//可以在外部使用prototype为自定义的类型添加属性和方法。
function Mytest() {

    this.name = "zhangsan";

    this.age = 20;

}

Mytest.prototype.hello = function () {

    alert(this.name);

}

var m = new Mytest();

m.hello();

//在外部不能通过prototype改变自定义类型的属性或方法。
//该例子可以看到：调用的属性和方法仍是最初定义的结果。
Mytest.prototype.name = "lisi";

var mm = new Mytest();

alert(mm.name);

//可以在对象实例上改变或增加属性。（这个是肯定的）
//也可以在对象上改变或增加方法。（和普遍的面向对象的概念不同）
mm.name2 = "lisi";

mm.hello = function () {

    alert(this.name2);

}

//mm.hello();
//继承，这个例子说明了一个类型如何从另一个类型继承。
function Mytest2() { }

Mytest2.prototype = new Mytest;

var m2 = new Mytest2();

alert(m2.name);

//这个例子说明了子类如何重写父类的属性或方法。
Mytest2.prototype.name = "wangwu";

Mytest2.prototype.hello = function () {

    alert('i can mytest2 extend Mytest save method hello');

}

var m3 = new Mytest2();

m3.hello();

//子类中的name属性值不会被父类覆盖
function Mytest3() {

    this.name = "子类中的name属性值不会被父类覆盖";

    this.age = 20;

}

Mytest3.prototype = new Mytest();

var m4 = new Mytest3();

alert(m4.name);

    Object.prototype.name = "zhangsan";

    Object.prototype.nihao = function(){

        alert("i can method name is "+this.name);

    }

    var obj = new Object();

    obj.nihao();

    alert(obj.name);



    / / 在实例上不能使用prototype，否则会发生编译错误

obj.prototype.sex = "男"; //error,无法给一个实例prototype
var o = {

    name: "zhangsan"

}

o.prototype.age = 30; //error,无法给一个实例prototype
//可以为类型定义“静态”的属性和方法，直接在类型上调用即可
alert(Object.name);

Object.nihao();

//实例不能调用类型的静态属性或方法，否则发生对象未定义的错误。
Object.class = "三年二班"; //类静态属性
var ob = new Object();

alert(ob.class); //error 实例不能调用类型的静态属性和方法
//可以在外部使用prototype为自定义的类型添加属性和方法。
function Mytest() {

    this.name = "zhangsan";

    this.age = 20;

}

Mytest.prototype.hello = function() {

    alert(this.name);

}

var m = new Mytest();

m.hello();

//在外部不能通过prototype改变自定义类型的属性或方法。
//该例子可以看到：调用的属性和方法仍是最初定义的结果。
Mytest.prototype.name = "lisi";

var mm = new Mytest();

alert(mm.name);

//可以在对象实例上改变或增加属性。（这个是肯定的）
//也可以在对象上改变或增加方法。（和普遍的面向对象的概念不同）
mm.name2 = "lisi";

mm.hello = function() {

    alert(this.name2);

}

//mm.hello();
//继承，这个例子说明了一个类型如何从另一个类型继承。
function Mytest2() {}

Mytest2.prototype = new Mytest;

var m2 = new Mytest2();

alert(m2.name);

//这个例子说明了子类如何重写父类的属性或方法。
Mytest2.prototype.name = "wangwu";

Mytest2.prototype.hello = function() {

    alert('i can mytest2 extend Mytest save method hello');

}

var m3 = new Mytest2();

m3.hello();

//子类中的name属性值不会被父类覆盖
function Mytest3() {

    this.name = "子类中的name属性值不会被父类覆盖";

    this.age = 20;

}

Mytest3.prototype = new Mytest();

var m4 = new Mytest3();

alert(m4.name);

来源：http://my.oschina.net/tongjh/blog/265209

js控制优酷视频播放暂停

Tue, 17 Nov 2015 07:48:37 +0000

js控制优酷视频播放暂停

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">  
        <title>js控制优酷视频播放</title>  
        <script src="http://player.youku.com/jsapi"></script>  
        <script>  
            player = new YKU.Player("youkuplayer",{  
                styleid: "0",  
                client_id: "d8781b239fdad45b",  
                vid: "XMjg1MTcyNDQ0",  
                autoplay: false,  
                show_related: true,  
                events:{  
                    onPlayEnd: function(){ /*your code*/ },  
                    onPlayStart: function(){ /*your code*/ },  
                    onPlayerReady: function(){ /*your code*/ }  
                }  
            });  
            function playVideo(){  
                try{  
                    player.playVideo();  
                } catch(err){  
                    alert("*"+err);  
                }  
  
            }  
            function pauseVideo(){  
                player.pauseVideo();  
  
            }  
            function seekTo(s){  
                player.seekTo(s);  
            }  
            function currentTime(){  
                return player.currentTime();  
            }  
        </script>  
    </head>  
    <body>  
        <div id="youkuplayer" style="width:100%;height:400px;"></div>  
        <br />  
        <input type="button" onclick="playVideo();" value="播放" style="height:30px;width:50px;">  
        <input type="button" onclick="pauseVideo();" value="暂停" style="height:30px;width:50px;">  
    </body>  
</html>

无插件实现动态瀑布流加载数据

Tue, 03 Nov 2015 03:02:54 +0000

以前在页面中动态加载帖子数据使用了waterfall.js插件，当初折腾了不少时间才搞定，这次又有一个页面需要动态加载数据，自然想到了waterfall插件，但是结果很不理想，waterfall的很多参数不管是什么用处，反正看着很头疼，最麻烦的是它会改变页面样式和布局，实在不想调整了，还是自己实现这个功能吧！

首先看下面代码：

var pageIndex = 2;

(function loadmore() {

    //绑定滚动事件  
    $(window).bind("scroll",  function() {

        if ($(this).scrollTop() + $(window).height() + 40 >= $(document).height() &amp;&amp; $(this).scrollTop() >= 40) {

            $(window).unbind("scroll"); //到底后先移除滚动事件  
            $.get("/portal/getTopic?pageIndex=" + pageIndex + "&amp;pageSize=3",  
            function(data) {

                $("#container").append(data);

                pageIndex++;

                loadmore(); //数据加载成功重新绑定滚动事件  
            },  
            "html");

        };

    });

})();

没错，就这么点，这已经是实现功能的最简单版本了。代码的基本流程是给页面绑定滚动事件，判断是否滚动到最底部，然后加载数据。但实际上并不是这么简单就能行的，有很多意外情况需要解决。

先来说明如何判断页面是否滚动到最底部，$(this).scrollTop()用来计算滚动条顶端距离窗口顶部的距离，整个滚动条高度大约等于整个页面高度。当滚动条滚动到最底部的时候，滚动条顶端距离窗口顶部并不是整个页面的高度，还需要加上当前窗口所占高度才是整个页面正真的高度。所以就是$(this).scrollTop() + $(window).height()=$(document).height()，但是我们为什么还要加40呢？因为一般滚动到底部加载并不是完全要滚动到最低端才加载，而是差不多已经到底的时候就要开始加载，既然是差不多到底那么$(this).scrollTop() + $(window).height()就是还不完全等于整个页面高度，因为还有40没有滚动，所以加上了才是整个页面高度。此时滚动到距离最底部还有40像素的时候，再滚动一点就会大于页面高度，就该加载数据了。代码中还有&& $(this).scrollTop() >= 40是为了监听有滚动发生，总不能在没有滚动事件发生时就加载。

已经能够监听到是否滚动到底部了，但是滚动事件是稍微滚动一点就能触发好多次，就会请求好多次数据，就算数据没有返回稍微滚动就会继续发送同样请求，所以在数据没有返回之前要把监听滚动移除掉，$(window).unbind("scroll");等数据添加到页面以后再重新绑定滚动事件。

一次简单的前端页面优化

Mon, 31 Aug 2015 05:38:08 +0000

公司之前的产品管理对于小编们的使用情况及其糟糕，每次打开一个页面都要等待好久，这也是由于时间紧张，开始做的时候就只管进度没有时间优化。我大概看了下，光是登录页和一个空白首页就有78个请求，1.1M的数据。其他功能页面不少于这个数，这是因为所有页面共用了一个头文件，而这个头文件把所有有用没有的css文件和js文件都加载进来了，所以这次做的新后台管理系统绝不能这么做了。

首先，css按需加载，当然有一些css是每个页面必须的就放到一个公共页面中include进来，对于一些新增的插件就在需要的时候添加到对应的页面。

其次，js的加载方式也进行特别优化，一种方式是把js放在body结束标签之前，可以避免js的加载阻塞页面渲染，还有可以使用异步加载方式 defer是针对IE浏览器的，async是其他非IE内核浏览器异步加载属性。但是，我还是使用了requirejs来加载js，一方面是为了页面加载更快，另一方面是可以做到js模块化。

初步结果显示，所有页面加载速度平均在0.5秒，有些页面几乎看不出来重新加载过程，瞬间完成。优化也算是有一定的效果了。其中要说一下requirejs的一些优缺点，requirejs优点是可以实现js异步加载和模块化开发，不过让我有点不适应的是在HTML页面中不能使用onclick=func这种方式的事件处理，会提示找不到函数，只能在页面加载完成后用jquery进行事件监听，一些动态加载的页面数据也需要在加载以后重新绑定事件。

2015-11-08日更新

自从使用了requirejs后，凡是做页面需要js的时候首先想到的就是requirejs，感觉入坑跳不出来，反而弄巧成拙了。requirejs本意是异步加载多个js文件以防止页面阻塞，在一个网站或项目中也尽量合并多个文件里的内容以减少网络请求，一次加载一个大的文件比多次加载多个小文件来的划算的多，还有，requirejs虽然有好处但是并不是任何时候都有，比如页面很简单，js内容也很少的时候就完全不该用它。最后有一个不得不说的缺点，在上面已经提过，就是事件绑定，因为不能使用onclick=func()这种方式调用函数，只能用$(function(){})这种方式绑定事件，那么在网络不好的情况下，有些文件加载缓慢，导致不能绑定事件，如果一个按钮是这种方式绑定的事件，结果就是非要等到页面加载完才能点击，很让人着急。

前端工具gulp的用途和使用方法

Tue, 07 Jul 2015 13:38:18 +0000

在接触前端开始就听说过grunt和gulp是很叼的前端构建工具，但不知道到底有多叼，只是听说可以自动编译less，sass为css，目前还没有使用less和sass，所以也就没有尝试使用grunt和gulp。但是作为一个技术爱好者还是经不住诱惑，照着网上的教程简单使用了一下，总算是知道有什么用处了，因为都说gulp比grunt更简单好用，就以gulp的使用方法为例来说明一下。

文件合并：关于文件合并很多人存在这样的疑惑，在前端开发中到底该把所有js和css写在一个文件里还是各个页面分开写，我的建议是开发的时候分开写，上线的时候合并为一个，这样的好处是对于浏览器来说，不同页面中相同的文件默认会请求一次缓存下来，其他页面请求相同文件时就直接从缓存中读取，减少文件的网络请求可以提高网页速度，所以文件合并的是很有必要的。

2.文件压缩：既然都合并了，何不再压缩一下呢

3.语法检查：这个功能一般会和下面第4条功能配合使用，当文件修改的时候检查是否有语法错误，并在命令行中输出错误信息。

4.监听文件变化：监听某个目录下文件是否修改，修改的话就执行特定的操作，比如上面几个操作。以上4点是比较常用的功能，更多功能根据自己需要添加

var gulp = require('gulp');
var jshint = require('gulp-jshint');//语法检查
var concat = require('gulp-concat');//合并文件
var uglify = require('gulp-uglify');//压缩代码
var rename = require('gulp-rename');//重命名
 
// 语法检查
gulp.task('jshint', function () {
return gulp.src('public/javascripts/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
 
// 合并文件之后压缩代码
gulp.task('minify', function (){
return gulp.src('public/javascripts/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('public/javascripts/dist'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('public/javascripts/dist'));
});
 
// 监视文件的变化
gulp.task('watch', function () {
gulp.watch('public/javascripts/*.js', ['jshint', 'minify']);
});
 
// 注册缺省任务
gulp.task('default', ['jshint', 'minify', 'watch']);
// gulp.task('default', ['jshint', 'minify']);

目录结构: