蓝狐

蓝狐 查看完整档案

深圳编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

蓝狐 关注了问题 · 2018-05-16

vue-cli 3.0 多页面 怎么配置?

版本: @vue/cli-service": "^3.0.0-beta.6

配置了chaiWebpack,但configureWebpack不知道怎么配置,求指点~~

vue.config.js 如下:

module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    config
      .entry('one')
      .add('./src/pages/one/one.ts')
      .end()
      .entry('two')
      .add('./src/pages/two/two.ts')
      .end()
  },
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // mutate config for production...
    } else {
      // mutate for development...
    }
  }
}

关注 10 回答 6

蓝狐 收藏了文章 · 2018-05-16

laravel5.5 + jwt-auth 1.0.0-rc.2 多表多种用户认证规式

安装

composer create-project --prefer-dist laravel/laravel sample "5.5.*"

安装依赖

composer install

安装jwt-auth

composer require tymon/jwt-auth

or
在composer.json中添加 `"tymon/jwt-auth": "^1.0.0-rc.2",`
终端:composer update

config/app.phpproviders

'providers' => [

    ...

    Tymon\JWTAuth\Providers\LaravelServiceProvider::class,
]

终端运行:php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"会产生config/jwt.php的配置文件

再运行:php artisan jwt:secret生成key

建Model

运行:

php artisan make:model Models/Admin -m
php artisan make:model Models/User -m

database/migrations下
迁移文件中

    **admins:**
Schema::create('admins', function (Blueprint $table) {
    $table->increments('id');
    $table->string('name');
    $table->string('email')->unique();
    $table->string('password');
    $table->string('avatar')->nullable();
    $table->timestamps();
});
    **users:**
Schema::create('users', function (Blueprint $table) {
    $table->increments('id');
    $table->string('name');
    $table->string('email')->unique();
    $table->string('password');
    $table->string('avatar')->nullable();
    $table->timestamps();
});

修改Model(USer和Admin是一样的)

<?php

namespace App;

use Tymon\JWTAuth\Contracts\JWTSubject;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable implements JWTSubject
{
    use Notifiable;

    // Rest omitted for brevity

    /**
     * Get the identifier that will be stored in the subject claim of the JWT.
     *
     * @return mixed
     */
    public function getJWTIdentifier()
    {
        return $this->getKey();
    }

    /**
     * Return a key value array, containing any custom claims to be added to the JWT.
     *
     * @return array
     */
    public function getJWTCustomClaims()
    {
        return [];
    }
}

config/auth.php中配置,找到对应的修改成自己的

'guards' => [

'web' => [
    'driver' => 'session',
    'provider' => 'users',
],

'api' => [
    'driver' => 'jwt',
    'provider' => 'users',
],

'admin' => [
    'driver' => 'jwt',
    'provider' => 'admins',
],

],

'providers' => [

'users' => [
    'driver' => 'eloquent',
    'model' => App\Models\User::class,
    'table' => 'users',
],

'admins' => [
    'driver' => 'eloquent',
    'model' => App\Models\Admin::class,
    'table' => 'admin_users'
],

],

路由

routes/api.php
Route::group([

'middleware' => 'api',
'prefix' => 'auth'

], function ($router) {

Route::post('login', 'AuthController@login');
Route::post('logout', 'AuthController@logout');
Route::post('refresh', 'AuthController@refresh');
Route::post('me', 'AuthController@me');

});

控制器(关键)

运行:php artisan make:controller AdminController创建控制器
注:此处主要是用了guard('admin')来区分要调用的表和Model这里是在auth.php中配置的

<?php

namespace App\Http\Controllers;

use Illuminate\Support\Facades\Auth;
use App\Http\Controllers\Controller;

class AdminController extends Controller
{
    /**
     * Create a new AuthController instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('myauth', ['except' => ['login']]);
    }

    /**
     * Get a JWT via given credentials.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function login()
    {
        $credentials = request(['email', 'password']);

        if (! $token = auth()->guard('admin')->attempt($credentials)) {
            return response()->json(['error' => 'Unauthorized'], 401);
        }

        return $this->respondWithToken($token);
    }

    /**
     * Get the authenticated User.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function me()
    {
        return response()->guard('admin')->json(auth()->user());
    }

    /**
     * Log the user out (Invalidate the token).
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function logout()
    {
        auth()->guard('admin')->logout();

        return response()->json(['message' => 'Successfully logged out']);
    }

    /**
     * Refresh a token.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function refresh()
    {
        return $this->respondWithToken(auth()->guard('admin')->refresh());
    }

    /**
     * Get the token array structure.
     *
     * @param  string $token
     *
     * @return \Illuminate\Http\JsonResponse
     */
    protected function respondWithToken($token)
    {
        return response()->json([
            'access_token' => $token,
            'token_type' => 'bearer',
            'expires_in' => auth()->factory()->getTTL() * 60
        ]);
    }
}

中间键

由于使用了多表认证,所以不能使用jwt自带的中间键auth:api or jwt.auth,我自己建了一个中间键[myauth]来做路由验证。
在app/Http/Middleware下新建

namespace App\Http\Middleware;

use Closure;
use Illuminate\Support\Facades\Auth;

class AuthMiddleware {
    public function handle($request, Closure $next)
    {

        try {
            $user = auth()->guard('admin')->userOrFail();
            if(!$user) {
                return response()->json(['message' => 'jwt 无效'], 401);
            }
        } catch (\Tymon\JWTAuth\Exceptions\UserNotDefinedException $e) {
            return response()->json(['message' => 'jwt 无效'], 401);
        }
        return $next($request);
    }
}

然后在app/Http/Kernel$routeMiddleware下添加
protected $routeMiddleware = [

    ...

    'cors' => \App\Http\Middleware\ClientRequestCors::class, //自定义的跨域中间键
    'myauth' => \App\Http\Middleware\AuthMiddleware::class,

    ...

];

在路由和Controller下的构造函数调用。

免责

由于时间关系,没有在PostMan截图了,参考此文章的小伙伴自行进行测试
下面例子源用了很多jwt-auth文档代码

查看原文

蓝狐 赞了文章 · 2017-11-20

优雅的 ID 混淆扩展包 Laravel Hashid

Laravel Hashid 整合了 [Base62], [Base64], [Hashids], [Optimus] 等高性能编码算法,并提供了统一的、优雅的、简单易用的调用接口,将「敏感数据」混淆(编码)成可还原的、非连续的、URL 安全的标识符 (ID) 。

应用场景示例

  • 不希望对外暴露有规则的数据索引,比如用户 ID 、媒体资源 ID 、商品 ID 、订单号、注册码、优惠码等,防止爬虫侵扰。
  • 重构现有的发码(ID 生成)机制:使用数据库自带的索引主键,但是对外进行混淆。
  • 对加密串进一步混淆,并生成 URL 安全的字符串。
  • 简单、统一的调用方法使用不同的编码算法、同一算法的不同编码参数、或自定义算法。

项目主页

项目主页及详细文档: https://github.com/ElfSundae/...

新包求 Star 求反馈

安装

$ composer require elfsundae/laravel-hashid

对于 Lumen 或 Laravel 低于 5.5 版本,需要手动注册 service provider:

ElfSundae\Laravel\Hashid\HashidServiceProvider::class

发布配置文件:

# For Laravel application:
$ php artisan vendor:publish --tag=hashid

# For Lumen application:
$ cp vendor/elfsundae/laravel-hashid/config/hashid.php config/hashid.php

配置

Hashid 的配置文件和 Laravel 框架的众多管理 (manager) 服务的配置极其类似,例如数据库、缓存、队列等。所以无需花费额外时间来学习如何配置它。

我们来看个例子:

'default' => 'id',

'connections' => [

    'basic' => [
        'driver' => 'base64',
    ],

    'hashids' => [
        'driver' => 'hashids',
        'salt' => 'sweet girl',
    ],

    'id' => [
        'driver' => 'hashids_integer',
        'salt' => 'My Application',
        'min_length' => 6,
        'alphabet' => '1234567890abcdef',
    ],

    'base62' => [
        'driver' => 'base62',
        'characters' => 'f9FkqDbzmn0QRru7PBVeGl5pU28LgIvYwSydK41sCO3htaicjZoWAJNxH6EMTX',
    ],

],

使用

  • 使用 hashid() 全局函数获取 connection 或 driver 实例。
  • 使用 hashid_encode() 全局函数进行编码。
  • 使用 hashid_decode() 全局函数进行解码。

示例:

hashid_encode(123456);  // "xkNDJ"
hashid_decode('xkNDJ'); // 123456

hashid_encode(123456, 'optimus');       // 1101845824
hashid_decode(1101845824, 'optimus');   // 123456

hashid_encode(123456, 'base62');        // "W7E"
hashid_encode('123456', 'base62');      // "FMJUCzH4"
hashid_decode('W7E', 'base62_integer'); // 123456

内置驱动

  • [Base62] : base62 , base62_integer
  • [Base64] : base64 , base64_integer
  • [Hashids] : hashids , hashids_hex , hashids_integer , hashids_string
  • [Hex] : hex , hex_integer
  • [Optimus] : optimus

控制台命令

  • hashid:alphabet :生成随机串 0-9a-zA-Z
  • hashid:optimus :生成 [Optimus] 编码要用到的参数

自定义驱动

要使用自己的编解码算法,只需要创建一个类实现 ElfSundae\Laravel\Hashid\DriverInterface 接口即可,这个接口只有两个方法: encodedecode 。初始化方法可选接收一个名为 $config 的配置参数,同时也支持类型提示式依赖注入。

例如:

<?php

namespace App\Hashid;

use ElfSundae\Laravel\Hashid\DriverInterface;
use Illuminate\Contracts\Encryption\Encrypter;

class CustomDriver implements DriverInterface
{
    protected $encrypter;

    protected $serialize;

    public function __construct(Encrypter $encrypter, array $config = [])
    {
        $this->encrypter = $encrypter;

        $this->serialize = $config['serialize'] ?? false;
    }

    public function encode($data)
    {
        return $this->encrypter->encrypt($data, $this->serialize);
    }

    public function decode($data)
    {
        return $this->encrypter->decrypt($data, $this->serialize);
    }
}

要使用这个自定义驱动,在配置文件中指定它即可:

'connections' => [

    'custom' => [
        'driver' => App\Hashid\CustomDriver::class,
        'serialize' => false,
    ],

    // ...
]

调用示例:

hashid_encode(123456, 'custom');

如果想为自定义驱动使用一个短名字,注册一个容器绑定即可:

$this->app->bind('hashid.driver.custom', CustomDriver::class);

更多使用方法请参考项目主页:https://github.com/ElfSundae/...

查看原文

赞 4 收藏 7 评论 3

蓝狐 赞了文章 · 2017-11-14

打造自己的JavaScript武器库

图片描述

自己打造一把趁手的武器,高效率完成前端业务代码。

前言

作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率。这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化url参数转对象浏览器类型判断节流函数等一类函数,这些工具类函数,基本上在每个项目都会用到,为避免不同项目多次复制粘贴的麻烦,我们可以统一封装,发布到npm,以提高开发效率。

这里,笔者已经封装并发布了自己的武器库 outils,如果你对本项目感兴趣,欢迎 star 本项目。当然你也可以在本项目的基础上封装自己的武器库。

常用函数汇总

这里先分类整理下,之前项目中多次用到的工具函数。

1.Array

1.1 arrayEqual

/**
 * 
 * @desc 判断两个数组是否相等
 * @param {Array} arr1 
 * @param {Array} arr2 
 * @return {Boolean}
 */
function arrayEqual(arr1, arr2) {
    if (arr1 === arr2) return true;
    if (arr1.length != arr2.length) return false;
    for (var i = 0; i < arr1.length; ++i) {
        if (arr1[i] !== arr2[i]) return false;
    }
    return true;
}

2.Class

2.1 addClass

/**
 * 
 * @desc   为元素添加class
 * @param  {HTMLElement} ele 
 * @param  {String} cls 
 */

var hasClass = require('./hasClass');

function addClass(ele, cls) {
    if (!hasClass(ele, cls)) {
        ele.className += ' ' + cls;
    }
}

2.2 hasClass

/**
 * 
 * @desc 判断元素是否有某个class
 * @param {HTMLElement} ele 
 * @param {String} cls 
 * @return {Boolean}
 */
function hasClass(ele, cls) {
    return (new RegExp('(\\s|^)' + cls + '(\\s|$)')).test(ele.className);
}

2.3 removeClass

/**
 * 
 * @desc 为元素移除class
 * @param {HTMLElement} ele 
 * @param {String} cls 
 */

var hasClass = require('./hasClass');

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

3.Cookie

3.1 getCookie

/**
 * 
 * @desc 根据name读取cookie
 * @param  {String} name 
 * @return {String}
 */
function getCookie(name) {
    var arr = document.cookie.replace(/\s/g, "").split(';');
    for (var i = 0; i < arr.length; i++) {
        var tempArr = arr[i].split('=');
        if (tempArr[0] == name) {
            return decodeURIComponent(tempArr[1]);
        }
    }
    return '';
}

3.2 removeCookie

var setCookie = require('./setCookie');
/**
 * 
 * @desc 根据name删除cookie
 * @param  {String} name 
 */
function removeCookie(name) {
    // 设置已过期,系统会立刻删除cookie
    setCookie(name, '1', -1);
}

3.3 setCookie

/**
 * 
 * @desc  设置Cookie
 * @param {String} name 
 * @param {String} value 
 * @param {Number} days 
 */
function setCookie(name, value, days) {
    var date = new Date();
    date.setDate(date.getDate() + days);
    document.cookie = name + '=' + value + ';expires=' + date;
}

4.Device

4.1 getExplore

/**
 * 
 * @desc 获取浏览器类型和版本
 * @return {String} 
 */
function getExplore() {
    var sys = {},
        ua = navigator.userAgent.toLowerCase(),
        s;
    (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? sys.ie = s[1]:
        (s = ua.match(/msie ([\d\.]+)/)) ? sys.ie = s[1] :
        (s = ua.match(/edge\/([\d\.]+)/)) ? sys.edge = s[1] :
        (s = ua.match(/firefox\/([\d\.]+)/)) ? sys.firefox = s[1] :
        (s = ua.match(/(?:opera|opr).([\d\.]+)/)) ? sys.opera = s[1] :
        (s = ua.match(/chrome\/([\d\.]+)/)) ? sys.chrome = s[1] :
        (s = ua.match(/version\/([\d\.]+).*safari/)) ? sys.safari = s[1] : 0;
    // 根据关系进行判断
    if (sys.ie) return ('IE: ' + sys.ie)
    if (sys.edge) return ('EDGE: ' + sys.edge)
    if (sys.firefox) return ('Firefox: ' + sys.firefox)
    if (sys.chrome) return ('Chrome: ' + sys.chrome)
    if (sys.opera) return ('Opera: ' + sys.opera)
    if (sys.safari) return ('Safari: ' + sys.safari)
    return 'Unkonwn'
}

4.2 getOS

/**
 * 
 * @desc 获取操作系统类型
 * @return {String} 
 */
function getOS() {
    var userAgent = 'navigator' in window && 'userAgent' in navigator && navigator.userAgent.toLowerCase() || '';
    var vendor = 'navigator' in window && 'vendor' in navigator && navigator.vendor.toLowerCase() || '';
    var appVersion = 'navigator' in window && 'appVersion' in navigator && navigator.appVersion.toLowerCase() || '';

    if (/mac/i.test(appVersion)) return 'MacOSX'
    if (/win/i.test(appVersion)) return 'windows'
    if (/linux/i.test(appVersion)) return 'linux'
    if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent) || /ipod/i.test(userAgent)) 'ios'
    if (/android/i.test(userAgent)) return 'android'
    if (/win/i.test(appVersion) && /phone/i.test(userAgent)) return 'windowsPhone'
}

5.Dom

5.1 getScrollTop

/**
 * 
 * @desc 获取滚动条距顶部的距离
 */
function getScrollTop() {
    return (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
}

5.2 offset

/**
 * 
 * @desc  获取一个元素的距离文档(document)的位置,类似jQ中的offset()
 * @param {HTMLElement} ele 
 * @returns { {left: number, top: number} }
 */
function offset(ele) {
    var pos = {
        left: 0,
        top: 0
    };
    while (ele) {
        pos.left += ele.offsetLeft;
        pos.top += ele.offsetTop;
        ele = ele.offsetParent;
    };
    return pos;
}

5.3 scrollTo

var getScrollTop = require('./getScrollTop');
var setScrollTop = require('./setScrollTop');
var requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();
/**
 * 
 * @desc  在${duration}时间内,滚动条平滑滚动到${to}指定位置
 * @param {Number} to 
 * @param {Number} duration 
 */
function scrollTo(to, duration) {
    if (duration < 0) {
        setScrollTop(to);
        return
    }
    var diff = to - getScrollTop();
    if (diff === 0) return
    var step = diff / duration * 10;
    requestAnimationFrame(
        function () {
            if (Math.abs(step) > Math.abs(diff)) {
                setScrollTop(getScrollTop() + diff);
                return;
            }
            setScrollTop(getScrollTop() + step);
            if (diff > 0 && getScrollTop() >= to || diff < 0 && getScrollTop() <= to) {
                return;
            }
            scrollTo(to, duration - 16);
        });
}

5.4 setScrollTop

/**
 * 
 * @desc 设置滚动条距顶部的距离
 */
function setScrollTop(value) {
    window.scrollTo(0, value);
    return value;
}

6.Keycode

6.1 getKeyName

var keyCodeMap = {
    8: 'Backspace',
    9: 'Tab',
    13: 'Enter',
    16: 'Shift',
    17: 'Ctrl',
    18: 'Alt',
    19: 'Pause',
    20: 'Caps Lock',
    27: 'Escape',
    32: 'Space',
    33: 'Page Up',
    34: 'Page Down',
    35: 'End',
    36: 'Home',
    37: 'Left',
    38: 'Up',
    39: 'Right',
    40: 'Down',
    42: 'Print Screen',
    45: 'Insert',
    46: 'Delete',

    48: '0',
    49: '1',
    50: '2',
    51: '3',
    52: '4',
    53: '5',
    54: '6',
    55: '7',
    56: '8',
    57: '9',

    65: 'A',
    66: 'B',
    67: 'C',
    68: 'D',
    69: 'E',
    70: 'F',
    71: 'G',
    72: 'H',
    73: 'I',
    74: 'J',
    75: 'K',
    76: 'L',
    77: 'M',
    78: 'N',
    79: 'O',
    80: 'P',
    81: 'Q',
    82: 'R',
    83: 'S',
    84: 'T',
    85: 'U',
    86: 'V',
    87: 'W',
    88: 'X',
    89: 'Y',
    90: 'Z',

    91: 'Windows',
    93: 'Right Click',

    96: 'Numpad 0',
    97: 'Numpad 1',
    98: 'Numpad 2',
    99: 'Numpad 3',
    100: 'Numpad 4',
    101: 'Numpad 5',
    102: 'Numpad 6',
    103: 'Numpad 7',
    104: 'Numpad 8',
    105: 'Numpad 9',
    106: 'Numpad *',
    107: 'Numpad +',
    109: 'Numpad -',
    110: 'Numpad .',
    111: 'Numpad /',

    112: 'F1',
    113: 'F2',
    114: 'F3',
    115: 'F4',
    116: 'F5',
    117: 'F6',
    118: 'F7',
    119: 'F8',
    120: 'F9',
    121: 'F10',
    122: 'F11',
    123: 'F12',

    144: 'Num Lock',
    145: 'Scroll Lock',
    182: 'My Computer',
    183: 'My Calculator',
    186: ';',
    187: '=',
    188: ',',
    189: '-',
    190: '.',
    191: '/',
    192: '`',
    219: '[',
    220: '\\',
    221: ']',
    222: '\''
};
/**
 * @desc 根据keycode获得键名
 * @param  {Number} keycode 
 * @return {String}
 */
function getKeyName(keycode) {
    if (keyCodeMap[keycode]) {
        return keyCodeMap[keycode];
    } else {
        console.log('Unknow Key(Key Code:' + keycode + ')');
        return '';
    }
};

7.Object

7.1 deepClone

/**
 * @desc 深拷贝,支持常见类型
 * @param {Any} values
 */
function deepClone(values) {
    var copy;

    // Handle the 3 simple types, and null or undefined
    if (null == values || "object" != typeof values) return values;

    // Handle Date
    if (values instanceof Date) {
        copy = new Date();
        copy.setTime(values.getTime());
        return copy;
    }

    // Handle Array
    if (values instanceof Array) {
        copy = [];
        for (var i = 0, len = values.length; i < len; i++) {
            copy[i] = deepClone(values[i]);
        }
        return copy;
    }

    // Handle Object
    if (values instanceof Object) {
        copy = {};
        for (var attr in values) {
            if (values.hasOwnProperty(attr)) copy[attr] = deepClone(values[attr]);
        }
        return copy;
    }

    throw new Error("Unable to copy values! Its type isn't supported.");
}

7.2 isEmptyObject

/**
 * 
 * @desc   判断`obj`是否为空
 * @param  {Object} obj
 * @return {Boolean}
 */
function isEmptyObject(obj) {
    if (!obj || typeof obj !== 'object' || Array.isArray(obj))
        return false
    return !Object.keys(obj).length
}

8.Random

8.1 randomColor

/**
 * 
 * @desc 随机生成颜色
 * @return {String} 
 */
function randomColor() {
    return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
}

8.2 randomNum 

/**
 * 
 * @desc 生成指定范围随机数
 * @param  {Number} min 
 * @param  {Number} max 
 * @return {Number} 
 */
function randomNum(min, max) {
    return Math.floor(min + Math.random() * (max - min));
}

9.Regexp

9.1 isEmail

/**
 * 
 * @desc   判断是否为邮箱地址
 * @param  {String}  str
 * @return {Boolean} 
 */
function isEmail(str) {
    return /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(str);
}

9.2 isIdCard

/**
 * 
 * @desc  判断是否为身份证号
 * @param  {String|Number} str 
 * @return {Boolean}
 */
function isIdCard(str) {
    return /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(str)
}

9.3 isPhoneNum

/**
 * 
 * @desc   判断是否为手机号
 * @param  {String|Number} str 
 * @return {Boolean} 
 */
function isPhoneNum(str) {
    return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(str)
}

9.4 isUrl

/**
 * 
 * @desc   判断是否为URL地址
 * @param  {String} str 
 * @return {Boolean}
 */
function isUrl(str) {
    return /[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/i.test(str);
}

10.String

10.1 digitUppercase

/**
 * 
 * @desc   现金额转大写
 * @param  {Number} n 
 * @return {String}
 */
function digitUppercase(n) {
    var fraction = ['角', '分'];
    var digit = [
        '零', '壹', '贰', '叁', '肆',
        '伍', '陆', '柒', '捌', '玖'
    ];
    var unit = [
        ['元', '万', '亿'],
        ['', '拾', '佰', '仟']
    ];
    var head = n < 0 ? '欠' : '';
    n = Math.abs(n);
    var s = '';
    for (var i = 0; i < fraction.length; i++) {
        s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
    }
    s = s || '整';
    n = Math.floor(n);
    for (var i = 0; i < unit[0].length && n > 0; i++) {
        var p = '';
        for (var j = 0; j < unit[1].length && n > 0; j++) {
            p = digit[n % 10] + unit[1][j] + p;
            n = Math.floor(n / 10);
        }
        s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
    }
    return head + s.replace(/(零.)*零元/, '元')
        .replace(/(零.)+/g, '零')
        .replace(/^整$/, '零元整');
};

11.Support

11.1 isSupportWebP

/**
 * 
 * @desc 判断浏览器是否支持webP格式图片
 * @return {Boolean} 
 */
function isSupportWebP() {
    return !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
}

12.Time

12.1 formatPassTime

/**
 * @desc   格式化${startTime}距现在的已过时间
 * @param  {Date} startTime 
 * @return {String}
 */
function formatPassTime(startTime) {
    var currentTime = Date.parse(new Date()),
        time = currentTime - startTime,
        day = parseInt(time / (1000 * 60 * 60 * 24)),
        hour = parseInt(time / (1000 * 60 * 60)),
        min = parseInt(time / (1000 * 60)),
        month = parseInt(day / 30),
        year = parseInt(month / 12);
    if (year) return year + "年前"
    if (month) return month + "个月前"
    if (day) return day + "天前"
    if (hour) return hour + "小时前"
    if (min) return min + "分钟前"
    else return '刚刚'
}

12.2 formatRemainTime

/**
 * 
 * @desc   格式化现在距${endTime}的剩余时间
 * @param  {Date} endTime  
 * @return {String}
 */
function formatRemainTime(endTime) {
    var startDate = new Date(); //开始时间
    var endDate = new Date(endTime); //结束时间
    var t = endDate.getTime() - startDate.getTime(); //时间差
    var d = 0,
        h = 0,
        m = 0,
        s = 0;
    if (t >= 0) {
        d = Math.floor(t / 1000 / 3600 / 24);
        h = Math.floor(t / 1000 / 60 / 60 % 24);
        m = Math.floor(t / 1000 / 60 % 60);
        s = Math.floor(t / 1000 % 60);
    }
    return d + "天 " + h + "小时 " + m + "分钟 " + s + "秒";
}

13.Url

13.1 parseQueryString

/**
 * 
 * @desc   url参数转对象
 * @param  {String} url  default: window.location.href
 * @return {Object} 
 */
function parseQueryString(url) {
    url = url == null ? window.location.href : url
    var search = url.substring(url.lastIndexOf('?') + 1)
    if (!search) {
        return {}
    }
    return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
}

13.2 stringfyQueryString

/**
 * 
 * @desc   对象序列化
 * @param  {Object} obj 
 * @return {String}
 */
function stringfyQueryString(obj) {
    if (!obj) return '';
    var pairs = [];

    for (var key in obj) {
        var value = obj[key];

        if (value instanceof Array) {
            for (var i = 0; i < value.length; ++i) {
                pairs.push(encodeURIComponent(key + '[' + i + ']') + '=' + encodeURIComponent(value[i]));
            }
            continue;
        }

        pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
    }

    return pairs.join('&');
}

14.Function

14.1 throttle

/**
 * @desc   函数节流。
 * 适用于限制`resize`和`scroll`等函数的调用频率
 *
 * @param  {Number}    delay          0 或者更大的毫秒数。 对于事件回调,大约100或250毫秒(或更高)的延迟是最有用的。
 * @param  {Boolean}   noTrailing     可选,默认为false。
 *                                    如果noTrailing为true,当节流函数被调用,每过`delay`毫秒`callback`也将执行一次。
 *                                    如果noTrailing为false或者未传入,`callback`将在最后一次调用节流函数后再执行一次.
 *                                    (延迟`delay`毫秒之后,节流函数没有被调用,内部计数器会复位)
 * @param  {Function}  callback       延迟毫秒后执行的函数。`this`上下文和所有参数都是按原样传递的,
 *                                    执行去节流功能时,调用`callback`。
 * @param  {Boolean}   debounceMode   如果`debounceMode`为true,`clear`在`delay`ms后执行。
 *                                    如果debounceMode是false,`callback`在`delay` ms之后执行。
 *
 * @return {Function}  新的节流函数
 */
function throttle(delay, noTrailing, callback, debounceMode) {

    // After wrapper has stopped being called, this timeout ensures that
    // `callback` is executed at the proper times in `throttle` and `end`
    // debounce modes.
    var timeoutID;

    // Keep track of the last time `callback` was executed.
    var lastExec = 0;

    // `noTrailing` defaults to falsy.
    if (typeof noTrailing !== 'boolean') {
        debounceMode = callback;
        callback = noTrailing;
        noTrailing = undefined;
    }

    // The `wrapper` function encapsulates all of the throttling / debouncing
    // functionality and when executed will limit the rate at which `callback`
    // is executed.
    function wrapper() {

        var self = this;
        var elapsed = Number(new Date()) - lastExec;
        var args = arguments;

        // Execute `callback` and update the `lastExec` timestamp.
        function exec() {
            lastExec = Number(new Date());
            callback.apply(self, args);
        }

        // If `debounceMode` is true (at begin) this is used to clear the flag
        // to allow future `callback` executions.
        function clear() {
            timeoutID = undefined;
        }

        if (debounceMode && !timeoutID) {
            // Since `wrapper` is being called for the first time and
            // `debounceMode` is true (at begin), execute `callback`.
            exec();
        }

        // Clear any existing timeout.
        if (timeoutID) {
            clearTimeout(timeoutID);
        }

        if (debounceMode === undefined && elapsed > delay) {
            // In throttle mode, if `delay` time has been exceeded, execute
            // `callback`.
            exec();

        } else if (noTrailing !== true) {
            // In trailing throttle mode, since `delay` time has not been
            // exceeded, schedule `callback` to execute `delay` ms after most
            // recent execution.
            //
            // If `debounceMode` is true (at begin), schedule `clear` to execute
            // after `delay` ms.
            //
            // If `debounceMode` is false (at end), schedule `callback` to
            // execute after `delay` ms.
            timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
        }

    }

    // Return the wrapper function.
    return wrapper;

};

14.2 debounce

/**
 * @desc 函数防抖 
 * 与throttle不同的是,debounce保证一个函数在多少毫秒内不再被触发,只会执行一次,
 * 要么在第一次调用return的防抖函数时执行,要么在延迟指定毫秒后调用。
 * @example 适用场景:如在线编辑的自动存储防抖。
 * @param  {Number}   delay         0或者更大的毫秒数。 对于事件回调,大约100或250毫秒(或更高)的延迟是最有用的。
 * @param  {Boolean}  atBegin       可选,默认为false。
 *                                  如果`atBegin`为false或未传入,回调函数则在第一次调用return的防抖函数后延迟指定毫秒调用。
                                    如果`atBegin`为true,回调函数则在第一次调用return的防抖函数时直接执行
 * @param  {Function} callback      延迟毫秒后执行的函数。`this`上下文和所有参数都是按原样传递的,
 *                                  执行去抖动功能时,,调用`callback`。
 *
 * @return {Function} 新的防抖函数。
 */
var throttle = require('./throttle');
function debounce(delay, atBegin, callback) {
    return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
};

封装

除了对上面这些常用函数进行封装, 最重要的是支持合理化的引入,这里我们使用webpack统一打包成UMD 通用模块规范,支持webpackRequireJSSeaJS等模块加载器,亦或直接通过<script>标签引入。

但这样,还是不能让人满意。因为完整引入整个库,略显浪费,我们不可能用到所有的函数。那么,就支持按需引入

1.目录结构说明

│  .babelrc
│  .gitignore
│  .travis.yml
│  LICENSE
│  package.json
│  README.md
│  setCookie.js  // 拷贝到根路径的函数模块,方便按需加载
│  setScrollTop.js
│  stringfyQueryString.js
│   ...
│   ...
│  
├─min
│      outils.min.js  // 所有函数统一打包生成的全量压缩包
│      
├─script  // 本项目开发脚本目录
│      build.js  // 打包构建脚本
│      test.js  // 测试脚本
│      webpack.conf.js  // webpack打包配置文件
│      
├─src // 源码目录
│  │  index.js  // webpack入口文件
│  │  
│  ├─array
│  │      
│  ├─class
│  │      
│  ├─cookie
│  │      
│  ├─device
│  │      
│  ├─dom
│  │      
│  ├─keycode
│  │      
│  ├─object
│  │      
│  ├─random
│  │      
│  ├─regexp
│  │      
│  ├─string
│  │      
│  ├─support
│  │      
│  ├─time
│  │      
│  └─url
│          
└─test // 测试用例目录
    │  array.test.js
    │  class.test.js
    │  cookie.test.js
    │  device.test.js
    │  dom.test.js
    │  index.html
    │  keycode.test.js
    │  object.test.js
    │  random.test.js
    │  regexp.test.js
    │  string.test.js
    │  support.test.js
    │  time.test.js
    │  url.test.js
    │  
    └─_lib // 测试所用到的第三方库
            mocha.css
            mocha.js
            power-assert.js 

2.构建脚本

这里主要说明一下项目中 build.js 的构建过程
第一步,构建全量压缩包,先删除min目录中之前的outils.min.js,后通过webpack打包并保存新的压缩包至min目录中:

    ......
    ......
    // 删除旧的全量压缩包
    rm(path.resolve(rootPath, 'min', `${pkg.name}.min.js`), err => {
        if (err) throw (err)
        webpack(config, function (err, stats) {
            if (err) throw (err)
            building.stop()
            process.stdout.write(stats.toString({
                colors: true,
                modules: false,
                children: false,
                chunks: false,
                chunkModules: false
            }) + '\n\n')
            resolve()
            console.log(chalk.cyan('  Build complete.\n'))
        })
    })
    ......
    ......

第二步,拷贝函数模块至根目录,先删除根目录中之前的函数模块,后拷贝src下面一层目录的所有js文件至根目录。这么做的目的是,拷贝到根路径,在引入的时候,直接require('outils/<方法名>')即可,缩短引入的路径,也算是提高点效率。

// 替换模块文件
    ......
    ......
    // 先删除根目录中之前的函数模块
    rm('*.js', err => {
        if (err) throw (err)
        let folderList = fs.readdirSync(path.resolve(rootPath, 'src'))
        folderList.forEach((item, index) => {
            // 拷贝`src`下面一层目录的所有`js`文件至根目录
            copy(`src/${item}/*.js`, rootPath, function (err, files) {
                if (err) throw err;
                if (index === folderList.length - 1) {
                    console.log(chalk.cyan('  Copy complete.\n'))
                    copying.stop()
                }
            })
        })
    })
    ......
    ......

3.书写测试用例

俗话说,不写测试用例的前端不是一个好程序员。那就不能怂,就是干。

但是因为时间关系,本项目暂时通过项目中的 test.js ,启动了一个koa静态服务器,来加载mocha网页端的测试页面,让笔者书写项目时,可以在本地对函数功能进行测试。
但是后续将使用travis-ci配合Github来做持续化构建,自动发布到npm。改用karmamochapower-assert做单元测试,使用Coverage测试覆盖率。这一部分,后续更新。

这里给大家推荐一个好用的断言库 power-assert ,这个库记住assert(value, [message])一个API就基本无敌,从此再也不用担心记不住断言库的API。

本项目的所有测试用例都在test目录下,大家可以作一定参考。

更新:单元测试,已使用karmamochapower-assert,使用Coverage测试覆盖率,并集成 travis-ci 配合Github来做持续化构建,可以参考本项目的travis配置文件 .travis.yml karma的配置文件 karma.conf.js

发布

首先放到Github托管一下,当然你也可以直接fork本项目,然后再加入你自己的函数。
以笔者项目,举个栗子:

1.添加自己的函数

src目录下,新建分类目录或者选择一个分类,在子文件夹中添加函数模块文件(建议一个小功能保存为一个JS文件)。

/**
 * 
 * @desc   判断是否NaN
 * @param  {Any} value 
 * @return {Boolean}
 */
function isNaN(value) {    
    return value !== value;
};

modules.export = isNaN

然后记得在src/index.js文件中暴露isNaN函数

2.单元测试

test文件新建测试用例

describe('#isNaN()', function () {
    it(`outils.isNaN(NaN) should return true`, function () {
        assert(outils.isNaN(NaN))
    })
    it(`outils.isNaN('value') should return false`, function () {
        assert.notEqual(outils.isNaN(NaN))
    })
})

然后记得在test/index.html中引入之前创建的测试用例脚本。

3.测试并打包

执行npm run test,看所有的测试用例是否通过。如果没有问题,执行npm run build构建,之后提交到个人的 github 仓库即可。

4.发布到npm

www.npmjs.com 注册账号,修改本地package.json中的nameversionauthor等信息,最后npm publish就大功告成了。
注意:向npm发包,要把镜像源切到 www.npmjs.com ,使用cnpm等第三方镜像源会报错。

使用

1.浏览器

直接下载min目录下的 outils.min.js ,通过<script>标签引入。

  <script data-original="outils.min.js"></script>
  <script>
      var OS = outils.getOS()
  </script>

注意: 本仓库代码会持续更新,如果你需要不同版本的增量压缩包或源码,请到 github Release 页面下载对应版本号的代码。

2.Webpack、RequireJS、SeaJS等模块加载器

先使用npm安装outils

$ npm install --save-dev outils
// 完整引入
const outils = require('outils')
const OS = outils.getOS()

推荐使用方法

// 按需引入require('outils/<方法名>')
const getOS = require('outils/getOS')
const OS = getOS()

当然,你的开发环境有babel编译ES6语法的话,也可以这样使用:

import getOS from 'outils/getOS'
// 或
import { getOS } from "outils";

总结

这里只是简单封装,发布到npm上,省去下次复制粘贴的功夫,或者直接Goole的时间。如果笔者的库中,没有你常用的函数,或者你有更好的建议,欢迎来本项目的 Github Issues 交流,如果觉得不错,欢迎 star 本项目。

当然,更好的建议是 fork 本项目,或者直接新建自己的项目,添加自己 想要的常用的记不住的 函数,甚至是可以抽象出来的功能,封装成自己顺手、熟悉的库。 这样才能打造出你自己的武器库,瞬间提高你的单兵作战(开发)能力。

工欲善其事必先利其器。有了属于自己的这把利器,希望加班也会变成奢望。O(∩_∩)O哈哈~

查看原文

赞 239 收藏 1232 评论 52

蓝狐 赞了文章 · 2017-10-29

Webpack 最佳实践总结(三)

还未看的,可以点击查看上两篇文章哟:Webpack 最佳实践总结(一)Webpack 最佳实践总结(二)

好了,这篇是第三篇,也是完结篇,我感觉这一篇是最乱的一篇,凑合着看吧,不会让你失望的

整合 CSS 加工流

有时候,前端项目中除了 JavaScript 外,还有一个更重要的 CSS 需要我们花点精力进去。这里主要陈述一下如何将 CSS 加工流整合到 webpack 中,因为 CSS Modules 的情况比较复杂,所有暂还未打算介绍更多关于 CSS Modules 的内容

CSS 工作流指什么?好的工作流可以提供开发效率,节约开发成本。这里要介绍的是 CSS 工作流中的一种很普遍的代码加工流程:正常的 CSS 业务逻辑开发流程需要经过 CSS 预处理器(如 Sass 或 Less),然后再经过后处理器(如 PostCSS)进行深加工。Sass 和 less 让我们吃上'语法糖'去快捷编写 CSS,PostCSS 可以让我们不再关心每条语句是否兼顾不同和不同版本的浏览器

在 webpack 上整合 CSS 加工流实现方式如下:

配置预处理器

这里以 Sass 作为预处理器,如下:

// webpack.config.js
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      // ...
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader', options: { minimize: true } },
            'postcss-loader',
            'sass-loader'
          ]
        })
      }
    ]
  }
}

配置后处理器

这里以 PostCSS 作为后处理器,如下:

// webpack.config.js
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          autoprefixer({
            browsers: [
              'last 3 version',
              'ie >= 10'
            ]
          })
        ],
        context: staticSourcePath
      }
    })
  ]
}

设置外联

// webpack.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 存放静态资源,诸如图片或者是 normalize.css
const staticSourcePath = path.join(__dirname, 'static');

module.exports = {
  // ...
  entry: {
    // 设置入口文件,顺序是静态资源 -> custom.scss -> 项目里其他 scss
    base: path.resolve(staticSourcePath, 'src/public/custom.scss')
  },
  // ...
  plugins: [
    // 创建 <link> 标签,并将 src 指向最终生成的 CSS 文件,需要 html-webpack-plugin
    new ExtractTextPlugin({
      filename: '[name].[contenthash].css',
      allChunks: true
    })
  ]
}

压缩第三方库

以 Moment.js 和 Lodash 为例

Moment.js

Moment.js(v2.18.1) 是一个用于日期的 JavaScript 库,默认情况下,只有你安装它到你的项目中,即使压缩后,也会占据217kb大小。相对于在2017年8月1日的统计,对比与 JavaScript 的 446kb 的平均大小,这是实在是太大了。不过 webpack 可以去掉 Moment.js 其中无用的代码。

其中有 165kb 的大小是用于本地化的语言包,即便你不去用它们,它们在默认的情况下也会被包含进来。如下代码来自 moment 的 gitihub

// moment/src/lib/locale/locales.js
function loadLocale(name) {
    var oldLocale = null;
    // TODO: Find a better way to register and load all the locales in Node
    if (!locales[name] && (typeof module !== 'undefined') &&
            module && module.exports) {
        try {
            oldLocale = globalLocale._abbr;
            require('./locale/' + name);
            // because defineLocale currently also sets the global locale, we
            // want to undo that for lazy loaded locales
            getSetGlobalLocale(oldLocale);
        } catch (e) { }
    }
    return locales[name];
}

上面的代码会使 Moment.js 在运行期间动态地选择相应文件去加载。

要解决它需要用到 ContextReplacementPlugin,一款替换上下文的插件,例子如下:

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ContextReplacementPlugin(
      // 需要被处理的文件目录位置
      /moment[\/\\]locale/,
      // 正则匹配需要被包括进来的文件
      /(en|zh-cn)\.js/
    )
  ]
};

Lodash

Lodash 是一款方便开发 JavaScript 的工具集合,测试版本为4.17.4。

当你项目包含有 Lodash 的时候,你打包出来的文件至少增加 75kb,多出来的大小包含了 316 个 Lodash 的函数。如果你只是使用了其中少数,例如 20 个,那么大概有 65 kb 是多余的。下面将列出两种去掉这些多余的代码的方法:

方法1:

还记得 webpack最佳实践(一) 提及的 Tree-shaking 吗?正因为有它,我们可以利用这个特性非常容易做到按需引用,如下:

import _ from 'lodash';
_.get();

修改为

import get from 'lodash/get';
get();

代码量从 72kb 压缩到 8.27kb

方法2:

方法1只适合刚开始玩一个项目的时候,并不怎么适合玩开了的项目,除非重写一次,这工作量太大了,另外一个原因是 lodash 的方法名会容易跟自定义的函数名冲突,造成隐藏性bug。方法2就是解决这两个问题,那就是使用babel-plugin-lodash

babel-plugin-lodash 是一款通过 babel 去实现将 lodash 的import用法编译为最佳实践的插件,配置如下:

打开.babelrc,添加下面配置

{
  "plugins": ["lodash"]
}

更多的配置方式可以查看文档,这里不再作太多介绍。更具体的优化效果看下面:

import _ from 'lodash';
_.get({ a: { b: 5 } }, 'a.b');

上面的代码是没有使用babel-plugin-lodash,使用之后,会被重新编译为下面:

import _get from 'lodash/get';
_get({ a: { b: 5 } }, 'a.b');

跟方法1一样,代码量从 72kb 压缩到 8.27kb

当然如果你想更进一步压缩代码,可以尝试与lodash-webpack-plugin搭配,它会更深一步地去删除一些lodash的方法里的代码。例如_.get默认支持深路径查询,如果你不需要支持深路径查询,你可以开启这个插件,这个方法就会被去掉这个支持:

只使用babel-plugin-lodash

import _ from 'lodash';
_.get({ a: { b: 5 } }, 'a.b');
// → returns 5

使用babel-plugin-lodashlodash-webpack-plugin 之后

import _get from 'lodash/get';
_get({ a: { b: 5 } }, 'a.b');
// → returns undefined

代码量从72kb 压缩到 772b

启用 scope hoisting

scope hoisting 对于 webpack 来说,就是将以前的模块引用链拍扁为一个但又不会影响到已有的代码。更好理解scope hoisting推荐阅读:here

目前只有 webpack v3 以上版本才支持scope hoisting,开启它是需要手动配置,如下:

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

其他好用的插件

preload-webpack-plugin 让静态资源支持 DNS 预解析和预加载,配置如下:

// webpack.config.js
const PreloadWebpackPlugin = require('preload-webpack-plugin');
module.exports = {
  // ...
  plugins: [
    new PreloadWebpackPlugin({
      rel: 'preload',
      as: 'script',
      include: 'all',
      fileBlacklist: [/\.(css|map)$/, /base?.+/]
    })
  ]
}

script-ext-html-webpack-plugin 让 js 加载方式支持 Async 或 defer,配置如下:

// webpack.config.js
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
module.exports = {
  // ...
  plugins: [
    new ScriptExtHtmlWebpackPlugin({
      defaultAttribute: 'defer'
    })
  ]
}

总结

有点乱,不好总结,大概就是整合 CSS 代码加工流程到 webpack 中、压缩第三方库(Moment.js 和 Lodash )、启用scope hoisting和其他好用的插件

大概就这样,内容较多~

文章首发于:https://www.linpx.com/p/webpa...
欢迎访问我的博客:https://www.linpx.com

查看原文

赞 11 收藏 27 评论 1

蓝狐 赞了文章 · 2017-10-27

如何更有效率和质量地开发Vue项目

前言

自总结完了上篇前端工程化的思想,并在vue全家桶的项目加以实践,趁热给大家总结一篇如何更有效率与质量地开发vue项目,以及其中踩过的一个个坑。。。

基于vue-cli的自定义模板(Custom Templates)

小伙伴们的vue项目应该都是用vue-cli初始化出来的,但是vue-cli只是满足了基础配置和功能,如果你有额外的配置需求或者要迎合团队的业务配置,每新建个项目都得重新安装额外配置,比如说vuex,sass,封装axios,以及相关的文件夹。为了解决上述问题,vue-cli出了一个自定义模板功能,你fork官方的模板下来然后进行修改,然后用 vue-cli 来调用。具体调用的场景有以下两种

  • 直接拉取git源:
    当你修改了模板并上传了repo上,可执行以下命令行来初始化

    vue init username/repo my-project
  • 拉取本地的模板:
    当你clone了官方模板在本地修改,可执行以下命令行来初始化

        vue init ~/fs/path/to-custom-template my-project

还可以编写meta.*(js,json)来选择安装哪些配置~

如果大家懒得去编写vuex,sass的配置,封装axios的话,可以来通过我配置完的脚手架来初始化完项目~

        vue init duosanglee/vuejs-custom-template

这个模板在repo
ps:我的这个模板的代码风格是基于standard的

引入sass全局变量,mixin,function等

首先我们考虑下以下场景:当使用rem开发移动端的时候,你定义了一个方法pxToRem的方法来实现px对rem的转换,然后在工程里为每个.vue文件@import 'public.scss',得import很多很多很多次,万一public.scss路径变了的话。。。哭都来不及。
这时候sass-resources-loader就来拯救我们了,他可以省去重复性的引入,还支持LESS,POSTCSS等
具体用法如下:

  • npm install -D sass-resources-loader

  • 首先得找到项目里的build文件夹,找到util.js
    添加一下代码

    function resolveResouce(name) {
        return path.resolve(__dirname, '../src/style/' + name);
    }
    function generateSassResourceLoader() {
        var loaders = [
     cssLoader, 
     // 'postcss-loader',
     'sass-loader',
     {
         loader: 'sass-resources-loader',
         options: {
           // it need a absolute path
           resources: [resolveResouce('common.scss')]
         }
     }
        ];
        if (options.extract) {
     return ExtractTextPlugin.extract({
       use: loaders,
       fallback: 'vue-style-loader'
     })
        } else {
     return ['vue-style-loader'].concat(loaders)
        }
    }
  • 然后还是在当前文件里找到

    return {
      css: generateLoaders(),
      postcss: generateLoaders(),
      less: generateLoaders('less'),
      sass: generateLoaders('sass', { indentedSyntax: true }),
      scss: generateLoaders('sass'),
      stylus: generateLoaders('stylus'),
      styl: generateLoaders('stylus')
    }

    替换成

    return {
      css: generateLoaders(),
      postcss: generateLoaders(),
      less: generateLoaders('less'),
      sass: generateSassResourceLoader(),
      scss: generateSassResourceLoader(),
      stylus: generateLoaders('stylus'),
      styl: generateLoaders('stylus')
    }

这样就可以在项目里使用sass全局变量,mixin,function了~~

在线 Mock 平台 easy-mock

现在讲都是前后端分离,前后端并行开发来提高开发效率,通过一个api文档来协作,所以一个好的mock工具对于提高效率也至关重要~
这里极力推荐easy-mock工具,支持团队协作编辑,生成模拟数据的在线 mock 服务,还支持导入swagger文档等功能,界面如下
clipboard.png

定义全局变量

在项目会有需要使用全局变量的需求,来处理一些频繁的操作,大家都应该会绑定到window对象上,但是这种方式不适合服务端渲染,因为服务端没有 window 对象, 是 undefined, 当试图去访问属性时会报错.我总结了两个靠谱的方法

  1. 代理到Vue的原型对象
    由于所有的组件都会从 Vue 的原型对象上继承它们的方法, 因此我们只要

    Object.defineProperty(Vue.prototype, '$xxx', { value: xxx });
    

    就可以在所有组件/实例中通过 this.$xxx: 的方式访问插件了~而不需要定义全局变量或者手动的引入了~
    至于为什么要用Object.defineProperty这个方法,是因为通过Object.defineProperty绑定的属性是只读的,以防一起开发项目的协(zhu)作(dui)者(you)去重写或者覆盖该方法的值。

  2. vuex大法
    vuex的出现就是vue为了集中式存储管理应用的所有组件的状态,所以说全局变量和方法都可以放到vuex当中~具体用法就不加阐述了,大家可仔细阅读vuex文档

组件设计

大家都知道组件化的思想就是分治,几乎任意类型的应用程序界面,都可以抽象为一个组件树,那我们该按照什么规则把应用抽象成组件,来应对复杂多变的业务需求呢。
我们从通信、黑箱,继承这几个角度来看看

  • 通信: vue的父子组件通信机制是props down,events up,尽量保持松耦合,一直保持单向数据流的特点,并加以强约束。需要注意的时候,尽可能减少跨组件通信,例如使用$parent,$root。

  • 继承: 当两个组件存在些许的共性,又存在足够的差异性的时候,就可以用到vue的继承---mixin,他允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势正确,他们不会改变函数作用域外部的任何东西。而且mixin还有各种高阶用法,大家可自行查询(我也不会)。

  • 黑箱: 组件的黑箱状态既只暴露易变的接口和方法,渲染给入的数据,组件内部封装不变的逻辑。

  • 设计模式原则: 运用设计模式原则,比如单一职责原则,将组件拆分抽离成更细粒度,保证高内聚性;再如接口隔离原则,采用稳定的服务端接口,将变化模块分离,使得组件得以解耦;里氏替换原则、依赖倒置原则等等。。

目录结构

-- src
    -- assets                      # 私有资源
    -- common                      # 通用组件
    -- components                  # 业务组件
    -- api.js                      # 请求文件      
    -- config                      # 环境变量配置
        -- env.js                  # 环境变量文件
        -- http.js                 # 封装axios文件
    -- pages                       # 页面维度
        -- pageA                   # 页面A
            -- pageA.vue           # 页面A单文件
            -- pageA-components    # 页面A下的一个组件
            -- children            # 子页面
    -- router                      # 路由
        -- index.js                # 路由入口
        -- routes.js               # 路由配置信息
    -- store                       # vuex
        -- modules                 # vuex模块
        -- index.js                # vuex入口
    -- utils                       # js通用方法
    -- app.vue                     # 顶层单文件
    -- main.js                     # 入口

大家可以从目录结构中看出我整个项目分割的思维
首先我把组件分为通用组件业务组件两大类。

  1. 通用组件是与业务耦合低,是有简单状态或者无状态的,数据几乎全部依赖于输入,它只负责渲染给入的数据。比如按钮是一个组件,可能有一个参数决定了它的尺寸,一个参数决定了它是否可以点击,但是点击这个按钮之后会发生什么,就不是按钮这个组件需要知道的事情了。

  2. 业务组件是与业务耦合高,可以由多个通用组件和其他的业务组件组成,会拥有一些方法,用来修改持有的数据,对内来看,它自己持有一些数据和方法,用来决定内容的渲染,对外又是一个简单的props接受数据。可以理解为组件树的非叶子节点,通过自身数据变化,进而操纵子组件的内容。

然后config文件夹放置了环境变量文件env.js和封装http库文件http.js

env.js
clipboard.png

http.js
clipboard.png

然后我把路由里的routes.js和api.js请求文件都单独抽离了出来。

自动生成雪碧图

前端项目中自动生成雪碧图节省了我们很多的时间,我们只要把图片扔到文件夹里,webpack-spritesmith就能按照我们设定的规则自动合成css-sprite,安装配置如下:

var SpritesmithPlugin = require('webpack-spritesmith');
...
module.exports = {
  ...
  plugins: [
    new SpritesmithPlugin({
      src: {
        cwd: './src/assets/sp/',
        glob: '*.png'
      },
      target: {
        image: './src/assets/sprite/sprite.png',
        css: './src/assets/sprite/sprite.css'
      },
      apiOptions: {
        cssImageRef: './sprite.png'
      },
      spritesmithOptions: {
        algorithm: 'top-down',
        padding: 100
      }
    })
  ]
}

自动修复eslint格式错误

这个功能的建立在小伙伴的开发工具是vscode情况下~
首先在vscode扩展里面安装vscode的eslint插件,然后settings.json里添加如下配置

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "html",
        "autoFix": true
    },
    {
        "language": "vue",
        "autoFix": true
    }
],
"eslint.autoFixOnSave": true,

然后会在save文件的时候eslint插件自动根据项目下的.eslintrc来设置代码格式~
sf不支持播放gif..具体效果大家只能自行查看

跨域

在浏览vue-cli的官方文档时候发现了vue-cli自带了API proxy,解决了在项目中后端联调的时候的跨域问题。具体安装配置如下:
首先我们找到config文件下的index.js,再找到dev对象下的proxyTable属性,然后把以下代码添加进去

proxyTable: {
  '/api': {
    target: '网站名',
    pathRewrite: {
      '^/api': ''
    }
  }
}

然后重启本地服务器,这样你发送的/api/a就会代理发送到"网站名/a"了~

开发利器emmet

之所以称emmet为前端开发利器是因为他可以根据我们所输入的缩写来得到相应的内容,大大节省我们的开发html和css的时间,例:

  • 输入ul>li*2>span 按下扩展键

<ul>
    <li><span></span></li>
    <li><span></span></li>
</ul>
  • 输入m0-a-0-0+posa+bgc 按下扩展键

margin: 0 auto 0 0;
position: absolute;
background-color: #fff;

更多方法请看官方文档emmet

这篇文章到此就已经结束了~感谢大家能够关注此文章~如果这篇文章能帮助到大家的话,麻烦请帮我点个赞~~~

大家有啥想法可在下面评论,也可以加我QQ:757592499来讨论~

参考:

http://www.jianshu.com/p/0375...
https://hopkinson.github.io/2...
https://github.com/dwqs/blog/...
http://jeffjade.com/2017/03/1...
http://www.jianshu.com/p/95b2...
https://segmentfault.com/a/11...

查看原文

赞 67 收藏 103 评论 26

蓝狐 赞了文章 · 2017-09-06

ThinkJS 3.0 正式版发布!

ThinkJS 是一款拥抱未来的 Node.js Web 框架,致力于集成项目最佳实践,规范项目让企业级团队开发变得更加简单,更加高效。我们的 Github 地址是:https://github.com/thinkjs/th... 欢迎大家 star~

ThinkJS 2.x 发布的时候,虽然我们带来了很多非常棒的功能,但我们也意识到本身的不足。针对这些问题,开发团队经过几个月的紧张开发,我们很高兴的宣布,ThinkJS 迎来了新的大版本 3.0。目前该版本已经在线上多个项目中使用,简单一个命令就可以让你下载使用它:

npm install -g think-cli 

有哪些更新?

正如之前所说,为了解决之前遗留的不足问题我们开发了新版本,下图为我们新版的架构图。

除了引进了新的架构,对框架进行高度解构外,我们还增加了很多新的功能,优化了老版为人诟病的用法,下面就让我们来具体看看有哪些更新吧。

基于 Koa 重构框架架构

相较于之前使用自身集成架构,3.0 最大的改变就是将底层架构基于 Koa 重构。重构之后的 ThinkJS 3.0 版本能完全兼容 Koa 的中间件。使用 Koa 重构主要有下面几个原因:

  • Koa 现在已经比较稳定,洋葱模型的中间件更能满足多维度的需求,同时中间件生态已经慢慢成熟。这些都是 ThinkJS 之前所不具备的,基于 Koa 后就可以站在巨人的肩膀上,可以做的更好。
  • Koa 2.0 中使用更优雅的 async/await 解决异步问题,这个理念和 ThinkJS 是完全一致的。借助 Babel 在 ThinkJS 2.x 版本中就可以使用这些 ES next 语法功能。随着 Node 8.x LTS 的即将发布, async/await 被原生支持后我们就可以不用借助 Babel 转译直接在生产环境中使用了。

精简核心,支持扩展和适配器

ThinkJS 2.x 版本内置了很多功能,这些功能基本上是很多项目的最佳实践,但并不一是每个项目都需要这些所有的功能,但基于 2.x 的架构要实现这个需求就非常困难。所以 ThinkJS 3.0 版本基于 Koa 重构后在这块做了精简,不再提供丰富的功能,而是提供一个最基本的核心,然后通过扩展满足更多的需求。

多进程模型

ThinkJS 2.x 单进程是可选配置,且框架设计较为简单,很多功能需要开发者手动处理。我们在 3.0 中开发了 think-cluster 模块直接内置了多进程模型,最大限度的利用多核 CPU 提高响应速度。 同时,提供一套进程之间通信的方式,如::通知其他进程执行某个任务,代码在线更新后重启所有的子进程。

智能的错误提示

Node.js 开发中一个比较头疼的问题就是错误处理问题,遇到问题后查错和定位问题后比较麻烦,尤其是使用了 Babel 转译之后,为此我们专门开发了 think-trace 模块用来跟踪错误问题,能够更加友好的捕捉显示错误堆栈信息。

还有!

除了刚才说的一些功能,我们还有一些其它的更新要告诉大家:

感谢

最后感谢所有使用 ThinkJS 框架的用户,感谢你们多年来的支持,是你们的存在让我们有了更进一步的勇气。当然还需要感谢所有为 ThinkJS 项目做过贡献的贡献者,包括代码贡献和文档贡献,你们的努力让 ThinkJS 变的越来越棒!如果没时间帮助贡献代码想用其它方式支持我们也可以通过捐赠的方式支持我们,你们的捐赠会用来帮助 ThinkJS 推广。感谢你们所有人,让我们一起拥抱 ThinkJS,期待更美好的未来吧!

查看原文

赞 11 收藏 3 评论 2

蓝狐 回答了问题 · 2017-08-19

如何提高vue element弹窗的复用性

alert有全局注册的,你看下

关注 6 回答 6

蓝狐 赞了文章 · 2017-08-19

vue-electron制作网易云音乐客户端

前言

就在两个月前公司需求快速开发一款桌面应用软件,嗯,快速。

并且提供了技术方案Nwjs,起初不知道这款框架的存在,网上查找了一波,发现更牛逼的一款快速搭建桌面应用的框架,那么它就是electron

很好,前端er任务又来了,开发过程中踩了不少坑,一个缺点就是体积大。其他方面简直就是帅呆了,酷毙了,简直无法比喻了。自动更新、本地菜单和通知、系统奔溃报告、调试和分析、Windows安装程序,简直为我们节省了不少时间,大赞一个。

这里我们不对electron做过多的介绍,大家自行看官方文档

切入正题,通过对electron的一些了解,业余时间通过vueelectron搭建了一个网易云音乐客户端,因为时间关系只做了客户端的核心部分,有时间更新,这个项目会坚持做下去。

技术栈

  • vue全家桶(vue vue-router vuex)
  • electron(应用框架)
  • request(请求数据)
  • ES6
  • SCSS
  • 更多...

启动运行

npm instal --- 安装依赖
cd api/ npm install && npm start --- 启动api服务
npm run dev --- 运行项目
npm run build --- 打包本地项目

关于打包大家自行在官方查找相关配置,这里就不一一介绍了。

功能

  • 用户手机号登录
  • 用户菜单
  • 条件搜索
  • 播放记录列表
  • 播放详情
  • 音量大小
  • 更多...

功能看起来不多,精品在于细节,主进程与渲染进程的一些方法封装、组件封装、vuex的状态管理应用。

先看一下运行效果视频

...

再来几张张图片
图片描述
图片描述
图片描述
图片描述

是不是很赞,因为我电脑是是MacOs系统,客户端界面只做了Mac系统界面Windows运行起来所看到的是一款MacOs的应用,看起来感觉怪怪的。不过话说回来,现在前端干的事儿真不少,Web、混合App开发、游戏、桌面应用。

嗯,加油前端!!!

源码

源码地址:https://github.com/eugeneCN/v...

喜欢的小伙伴点个star吧。

查看原文

赞 12 收藏 39 评论 4

认证与成就

  • 获得 52 次点赞
  • 获得 6 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 5 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-01-11
个人主页被 945 人浏览