Notes for a front-end developer, esyou.net

0%

发表于 分类于 Valine：
本文字数： 1.1k 阅读时长 ≈ 1 分钟

在某些功能上可能我们会使用到模拟用户点击，当然在jQuery中的模拟事件已经很强大了，但是我们再使用其他库或者使用原生JavaScript的时候，不可能使用jQuery的美元号去实现这个功能了，因此只能通过原生JavaScript去实现，下面我们就来看看代码该如何写。
原生js中可以通过dispatch方法来模拟用户行为，如点击（click），触屏（touchStart）操作等，我们都可以进行模拟。

自动触发内置事件

自动触发事件有两种方法，目前支持IE内核以及Firefox内核浏览器，但是并不支持chrome

1
//自动触发内置事件
2
function commonTrigger(el, type) {
3
    var evt = document.createEvent("MouseEvents");
4
    evt.initEvent(type, true, true);
5
    el.dispatchEvent(evt);
6
}
7
//自动触发内置事件
8
function trigger(el, type) {
9
    var event = new MouseEvent(type, {
10
        'view': window,
11
        'bubbles': true,
12
        'cancelable': true
13
    });
14
    el.dispatchEvent(event);
15
}
阅读全文 »

发表于 分类于 Valine：
本文字数： 1.9k 阅读时长 ≈ 2 分钟

electron是atom官方的一个跨平台的桌面应用开发框架，具官方介绍说是“ Build cross platform desktop apps with JavaScript, HTML, and CSS”，也就是说可以直接使用，你最喜欢的html+css+js来开发跨平台的桌面应用程序。如果你之前使用过angular以及react之类的JS框架，那么你就可以使用这些框架来制作一个跨平台的桌面应用。下面我们主要是说一下在ionic2中，我们要如何使用electron与ionic2进行通信！
由于electron使用的是chrome的V8引擎，也就是可以理解为一个浏览器，因此我们只需要编写想要的前端代码就可以直接运行在electron中了。建议大家边看electron的doc边做开发。因为我也是刚刚开始接触electron，只不过我只是需要从ionic中传递数据到electron中，让其与其他设备进行交互而已，因此我做的只是一个简单的ionic传递数据到electron，其他的我并不深入。因此大家喜欢研究的朋友可以深入研究下electron。

安装electron

安装过程可能并不复杂，但是一定要记住要使用淘宝的npm镜像进行安装，因为我翻墙了也无法安装成功，因此建议大家使用cnpm，这个特别快！
在nodejs中键入如下命令即可进行安装
npm install electron -g

如果是linux或者mac请使用root或者sudo权限进行全局安装

使用electron

其使用方法很简单，安装完成后直接输入electron就可以看到如下提示：

阅读全文 »

发表于 分类于 Valine：
本文字数： 2.9k 阅读时长 ≈ 3 分钟

我们都知道A4的尺寸是210mm * 297mm,在css中，我们可以直接使用毫米的单位来设置页面的宽高，当然你也可以使用相应的像素进行设置，不过只是通过body或者html来设置宽高的话，可能也会出现问题，而在这里我们需要使用@page来对页面进行定义，@page主要是用于打印的时候定义页面的类型，比如A4，A5，A3等等。下面先来看一下@page的使用方法。

1
@page{
2
  size: A4;
3
  margin: 0;
4
}

另外在设置好@page后，我们可能还会需要设置分页，分页很简单，直接使用page-break-before:always;或者page-break-after:always;就可以设置分页，在网页中是不会显示任何效果的，不过你可以通过浏览器的打印功能进行PDF预览来查看分页是否符合你的要求。
不过分页的使用必须的写在@media print中，使用如下：

1
@media print{
2
  .page-break{
3
    page-break-before:always;
4
  }
5
}

.page-break是需要分页的class的元素。

阅读全文 »

发表于 分类于 Valine：
本文字数： 3.5k 阅读时长 ≈ 3 分钟

在开发中可能现在很多都在使用地图定位，而无需在进行复杂的计算距离的方法，因为计算已经被地图给代替了，我们也就不需要再进行坐标到坐标的距离计算了，但是当你只是想使用距离而不想使用地图的时候，你就得进行坐标计算了，这不我在一个项目中就遇到这样的问题，根据手机获取当前地理位置的坐标，然后再与目的地坐标（已知坐标）进行计算，并且得到距离，当然也可以实时更新手机坐标以获得最准确的距离。
下面我们直接看代码吧！

阅读全文 »

发表于 Valine：
本文字数： 2.4k 阅读时长 ≈ 2 分钟

ES6简介

由于ES6无法直接运行在浏览器中，只能通过babel来进行解析转换（编译）成ES5才可以运行在浏览器中，因此我们就需要给ES6搭建相关的环境，才可以开心的写ES6。
目前很多框架都使用了ES6，比如react、vuejs、angular等这些主流前端框架。ES6简洁了很多ES5的代码，让我们可以少写很多代码，当然如果你还了解typescript以及coffeescrpt，那么就更加方便你进行各种开发了。但是问题来了，这些基于ES6的所有框架以及语法糖都需要搭建相关的环境才能够正常运行ES6

webpack

webpack是一个前端打包工具，简单说webpack是将所有JavaScript组件以及依赖的库整合为一个js文件，将所有CSS整合为一个css文件。使用webpack可以很方便的打包各种JavaScript组件。

准备工作

1)、安装nodeJS（安装方法请到官方查看）
2)、使用npm初始化项目

1
npm init ES6

ES6是我们开发的项目文件夹
运行上面的命令后会让你填写一些有关项目描述等信息，并且在ES6文件夹下会生成一个package.json的文件
3)、全局安装webpack

1
npm install -g webpack
阅读全文 »

发表于 分类于 Valine：
本文字数： 1.1k 阅读时长 ≈ 1 分钟

做过后端的童鞋都知道发送邮件这样的功能并不复杂，使用目前已有的后端技术比如java、.net、php等编写一个发送邮件的功能是很简单的，但是要编写很多代码，比如java中利用jmail发送邮件并不是一件简单的事情。随着nodeJS的发展，如今利用前端技术实现发送邮件，简直是小菜一碟，不仅仅是代码量减少了，也提高了开发效率。
今天主要说的是使用nodeJS的Nodemailer发送邮件
首先我们得准备一个QQ邮箱或者GMAIL邮箱（只要支持smtp服务的就可以），主要用于发送邮件。比如QQ邮箱我们可以做如下设置即可开启POP3/SMTP服务，并且可以发送邮件。
进入QQ邮箱后点击左上角的设置，再选择账户，如图

将其全部设置为开启即可，这样就可以利用QQ邮箱发送邮件了。
使用Nodemailer和QQ邮箱发送邮件

1
const nodemailer  = require('nodemailer');
2
3
export default async () => {
4
    let transporter = nodemailer.createTransport({
5
        host: 'smtp.qq.email',
6
        port: 465,
7
        secure: true,
8
        auth: {
9
            user: 'xxxxx@qq.com',
10
            pass: '**********'
11
        }
12
    })
13
    let mailOptions = {
14
        from: '"小小前端" <admin@admin.com>',
15
        to: '*******@qq.com',
16
        subject: '你好',
17
        text: '你好', //文本
18
        html: '<h2>你好</h2>' //HTML文本
19
    };
20
    transporter.sendMail(mailOptions, (error, info) => {
21
        if (error) {
22
            logger.info(`send email to *******@qq.com failed.`)
23
            return console.log('send email failed:\n'+error);
24
        }
25
        logger.info(`send email to *******@qq.com success\n"Message sent: %s", ${info.messageId}`)
26
        console.log('send email success\nMessage sent: %s', info.messageId);
27
    });
28
}

发表于 分类于 Valine：
本文字数： 1.6k 阅读时长 ≈ 1 分钟

也许你在很多前端面试中都被问及闭包是什么？闭包有什么作用？闭包有什么弊端？但是你真的理解闭包吗？闭包确实对于初学者来说要理解他有些困难，它主要是属于作用域链的问题，下面就由我带领你学习一下或者理解一下JavaScript的闭包。

作用域

我们可以将闭包简单的理解为函数内的函数，首先我们来看一个作用域的示例

1
function Fn(){
2
  var a = 3;
3
}
4
console.log(a); // 此处是报错了，因为我们在函数外部是无法获取函数内部的变量的

那么我们可以将上面的函数修改为如下的函数即可得到a的值

1
var a = 5;
2
function Fn(){
3
  var a = 3;
4
  return a;
5
}
6
consolog.log(a); //返回5
7
Fn(); //返回 3
阅读全文 »

发表于 分类于 Valine：
本文字数： 1.1k 阅读时长 ≈ 1 分钟

今天在mac上开发的app，要打包成apk文件，打包过程中就出现了问题，错误显示如下：
Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK.
Looked here: /Users/tony/Library/Android/sdk/tools/templates/gradle/wrapper
看到这个错误大概的意思是让我升级我的android SDK，但是我看了下我的已经是目前最新版本的androidSDK了，为什么还要我再进行升级？越想越不对劲，最终删除了androidSDK，然后又再次到官网下载安装，但是问题依然存在，始终无法解决问题，最终在google上找到了解决办法，google确实很强大，要什么都能搜索到，因此，希望大家作为一个程序员，最基本的搜索引擎工具使用google，不会翻墙的童鞋，请自行到网上查看各种翻墙工具以及各种翻墙环境的搭建以及hosts文件的修改，可以助你一臂之力。

最终找到原因所在，主要原因是因为目前的androidSDK版本过高，cordova不支持这么高的版本，因此解决的办法并不是将androidSDK进行降级。而是需要在添加platform的时候制定相应的android版本。
我当前使用的androidSDK是官方最新的版本26.0.0，然而在cordova的platform中，目前最高仅支持到android6.2.2，因此下面有两种解决办法，看你方便如何选择哪一个进行解决
1、添加platform的时候指定相应版本

1
cordova platform rm android //删除已有的platform
2
cordova platform add android@6.2.2 //添加6.2.2版本的android

现在你再进行一次build，应该不会再有任何问题了吧！当然我也比较推荐这种方法！
2、androidSDK降级
删除原有的最新androidSDK工具，然后再下载25.3.1版本及以下版本进行搭建环境

当然可能25.3.1并不兼容某些版本的android系统，不过大部分官方应该已经进行了修复，你可以直接使用以下命令进行安装兼容性最好的android版本

1
cordova platform add https://github.com/apache/cordova-android

当然以上错误如果你在windows中也遇到过，那么应该也可以尝试这样的解决办法！

发表于 分类于 Valine：
本文字数： 4.2k 阅读时长 ≈ 4 分钟

setTimeout就是一个定时器，它可以很容易地实现在规定时间内所要执行的函数或方法。但是我再setTimeout的使用过程中就出现了内存溢出的各种问题。下面我将使用一个当前时间与过去的某个时间差的计算方式来进行讲解setTimeout，首先来看逻辑思想部分。
对于任何编程语言，我们刚开始都需要进行需求分析，需求分析就是一个实现功能的想法或者步骤。
比如我在这个例子中将会使用本地当前时间减去我所获得的时间，得到它们之间的时间差。

获得当前时间

获得当前时间可以直接使用new Date()，即可获得当前本地或者说本机时间。
目前已知时间为：2017-05-20 00:29:10

如何对时间进行相减

其实在JavaScript中，时间是可以直接进行减法运算的，不过必须是JavaScript的Date日期格式，如果是其他的则不支持，比如我们直接使用2017-05-20 00:29:10 - 2017-05-20 00:28:10，这样的相减是会报错的。而且也是无法相减的，因为他们两个是字符串，无法进行相减。那该怎么办？
很简单，我们将2017-05-20 00:29:10转换为Date对象即可。而JavaScript的Date对象得到的日期格式应该是这样的“Sat May 20 2017 00:33:26 GMT+0800”，我们可以通过new Date()对我们上面的字符串“2017-05-20 00:29:10”进行转换，但是转换之前必须将此字符串，转换为如下格式“2017/05/20 00:29:10”，这样的格式才能被JavaScript的Date()识别。
如此一来，他们就可以进行相减了。

阅读全文 »

发表于 分类于 Valine：
本文字数： 1.7k 阅读时长 ≈ 2 分钟

在mysql中SQL语句有一个为limit的条件筛选，limit中如果只传递一个值，则表示获取的条数，如果传递两个值则表示从第几条记录到第几条，如下：
limit 10 //这里是需要从数据库读出10条数据
limit 2,10 //这里这是从数据库中第3条数据开始取10条数据

1、使用limit实现分页（此方法不推荐，因为看上去不那么高大上）
不推荐就是因为不高大上，无法显示你是程序猿，因此你可以了解下就可以了！

1
var init_page=1;//默认页码为1
2
var num = 10;//每页要显示的数据量
3
//假如有传递进来的页码，比如2，那么当前的init_page的值则更改为传递进来的值
4
if(req.query.page){
5
 init_page = parseInt(req.query.page);
6
}
7
var start=0;//设置起始数据为第一条
8
if(init_page>1){
9
 start = (init_page-1)*num; //页码减去1，乘以条数就得到分页的起始数了
10
}
11
var sql='select * from user limit'+start+','+num; //这里就获得了第一页的10条数据
阅读全文 »