JS原型与原型链

JS中,对象分为普通对象和函数对象两种,Object和Function是JS自带的函数对象。凡是通过new Function()的创建的对象都是函数对象,其他的都是普通对象。

每当定义一个对象(函数)时,对象中都会包含一些预定义的属性。其中,函数对象会有一个prototype属性,其值就是我们所说的原型对象(普通对象没有prototype,但有__proto__属性;函数对象同时含有prototype和__proto__属性)。注意__proto__这里proto前后分别都是两个下划线,不是一个。

promise的使用

不像旧回调风格代码,promise可以确保下面这些特性:

回调不会在当前事件循环结束之前被调用;
通过.then追加的回调函数在异步操作结束(成功或失败)之后会被调用,即便这个.then是在异步操作已经被resolved之后追加的;
可以通过多次追加.then来添加多个回调函数,这些回调函数会按照被添加的顺序独立执行。
不过promise的最直接的好处还是可链式使用。

loadScripts方法

使用方法很简单,碰到有js文件依赖的时候,这样使用ready方法:

ready([
  '../assets/js/jquery.validate.js',
], () => {
  // 这时依赖的js脚本文件已经加载完毕了,document ready后要执行的代码放在此处
});

如果没有js文件依赖的话,这样使用ready方法:

ready(() => {
  // document ready后要执行的代码放在此处
});

一种字符串拼接的高效方法

经过在Chrome浏览器多次尝试,总的来说,testByForLoop1方法(用了ES6字符串模板的for循环)耗时最长,testByForLoop2方法(没用ES6字符串模板的for循环)耗时其次,testByArrayJoinMethod方法(利用了数组的join方法)耗时最短,它们的耗时在数组长度越长时越是差异显著。尤其是testByArrayJoinMethod方法简直是效果拔群。

发布静态文件到服务器上的简化操作

Of course, you can use a client tool such as FileZilla to deploy your static files to the server. But you will certainly feel tired in the end if you need to repeat this work almost every day in case your target server is for test purpose. For me, I used webpack for local development, when I want to deploy something to the test server, I need to execute command “npm run build” first and then “npm run deployToTestServer”, it’s already very convenient, but things can be even convenient with only one command needed to type ^_^.

VueJS项目调试(debug)

启动服务后刷新页面(刷新前先把浏览器开发者工具打开),可以看到在程序进入App.vue组件mounted这个组件生命周期钩子里后,指定到debugger处时程序就被debug了。如下图所示,剩下的大家应该都很熟悉了。可以看到,此处显示的代码就是我们组件里的实际代码,并非被我们编译混淆后的那种代码,可读性非常好。

微信跨公众号支付功能开发总结

用户在支付页面点击我们页面里的支付按钮,然后前端使用微信跳转地址跳转到微信pay.example.com开头的一个后端提供的接口上去,这个时候相当于对这个后端接口发起了一个get请求,服务端根据微信在接口后面追加的code查询参数来获取微信号A的用户在微信号B中对应的openid(用户无需关注微信号B),然后服务端在响应前端get请求时进行重定向返回到用户先前访问的支付页面并在新的url后面追加openid参数参数(微信号A的用户在微信号B中的openid),然后前端页面检测url中是否带有openid来判断是否需要通过js自动触发请求到服务端查询一些微信统一支付的参数来在客户端调启微信支付控件。大概就是这么个意思,实际操作中我们会对接口追加一些诸如告诉服务端重定向要定向到的地址,支付页面所在订单的id之类的参数。下面这种吊起维系支付控件的方式是不需要经过微信JSSDK授权的,两个不是一回事,因为用的不是微信JSSDK里的支付API。

微信端上传图片前先压缩图片

我们的场景是前端SPA应用有两个入口,一个是我们自己的微信公众号(可以实现微信授权,调用微信JSSDK),一个是第三方的公众号(需要第三方支持才能实现微信授权),出于统一和方便的考虑,上传照片功能没有使用微信JSSDK里的选择图片和上传图片相关方法,而是用传统页面里上传图片的方式。上传图片常见的有两种方式,一种是上传图片base64数据,一种是上传文件blob对象。这里我们选择的是上传文件blob对象。现在的问题是,服务端尤其是大部分tomcat里配置的post请求允许接收的最大数据量好像是2M,现在手机的像素都很高里,很容易就会拍出来大于2M的照片的,而且就算没有服务端限制,上传2M甚至更大的图片的速度会比较慢,对用户的体验也不好。所以今天趁着有空,自己做了个图片压缩的功能上去。直接上代码吧,下面是封装的压缩图片文件(blob对象)的方法,外部调用这里的compressImage方法(该方法返回的是一个Promise对象)