使用Rollup打包基于Es 6编写的javascript库的一般配置

前言

近期项目需要给APP编写类似于jweixin-1.0.0.js这样的桥接APP与Webview中H5页面的js-sdk类库,使用gulp、gruntjs或者webpack来搞有点重,因为rollup天生就对Es6语法的支持非常友好,加上其首创的tree shaking技术使得打包出来的js-sdk类库文件体型更小,还有官方也是非常推荐使用rollup进行js类库的开发,于是直接选用Rollup来自动化沟建非常适合。 继续阅读“使用Rollup打包基于Es 6编写的javascript库的一般配置”

在vscode中使用eslint + eslint-config-prettier + eslint-plugin-prettier报错问题

使用vscode编辑器,在前端项目中,使用eslint + eslint-config-prettier + eslint-plugin-prettier有可能会报下面的错误

[eslint] Delete `␍` [prettier/prettier]
原因可能是不同的操作系统下,甚至是不同编辑器,不同工具处理过的文件导致换行符的改变 。

解决方法:

可以修改.eslintrc文件,在rules添加一条

"prettier/prettier": "off"

vue项目中如何配置eslint fix?

修改package.json文件,把script的lint项改成如下:

"lint": "eslint --fix --ext .js,.vue src test/unit"

Vue项目的eslint配置可参考:

https://github.com/PanJiaChen/vue-element-admin/blob/master/.eslintrc.js

vue项目常见eslint配置

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],

    // add your custom rules here
    // base on https://github.com/vuejs/eslint-config-vue
    rules:{
        // 缩进为2个空格
        'vue/html-indent': ['error', 2, {
            'attribute': 1,
            'alignAttributesVertically': true,
            'ignores': []
        }],
        "vue/max-attributes-per-line": [2, {
            "singleline": 10,
            "multiline": {
                "max": 1,
                "allowFirstLine": false
            }
        }],
        'vue/html-self-closing': 'off',
        "vue/name-property-casing": ["error", "PascalCase"],
        // allow async-await
        'generator-star-spacing': 'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        // 关闭检测函数名称和调用它的左括号之间的空格
        // 'func-call-spacing': 'off',
        // 缩进为2个空格
        'indent': ['error', 2],
        // 关闭检测未使用的变量
        'no-unused-vars': 'off',
        // 对象展开时总是要添加逗号,一行时行末不需要逗号
        // 'comma-dangle': ['error', 'always-multiline'],
        // 定义函数时,函数括号之前允许添加空格
        'space-before-function-paren': ['error', 'always'],
        // 关闭禁用无效标签
        'no-tabs': 'off',
        // 关闭空行检测
        'no-multiple-empty-lines': 'off',
        // 关闭模板字符串检测
        'no-template-curly-in-string': 'off',
        'no-console': 'off',
        // 禁止添加分号
        'semi': ['error', 'never']
    }
}

 

作为前端面试官给大家分享一下日常常用试题[原创]

前言

作为前端面试官,几乎每天都要对后选人进行面试。来来去去都是面试那几个问题。但同一个问题,候选人的回答都是多种多样的。

前端面试指南图片

下面就列一些自己日常可能会对候选人问到的一些问题

继续阅读“作为前端面试官给大家分享一下日常常用试题[原创]”

Sass/Scss样式预处理的一些常用技巧

前言

现在,样式预处理语言已经成了前端进行页面布局编写样式的标配辅助工具,当前已经基本没人去手写纯css样式了,在众多样式预处理语言当中,Sass/Scss及Less是最多人使用的样式预处理语言。本文主要是介绍使用Sass预处理的一些常用技巧。

使用Sass的一些常用技巧

一、@at-root的使用可以让你突破所在的作用域

我们在编写sass时,一般是喜欢让css代码形成深度的树结构,但有时如果我们为了不想sass给我们生成的css样式层次太深(原则是不超过3层结构,如:.root .parents .children {color:red;}),想把特定的css样式与根节点脱离开来,此时,我们可以使用Sass的@at-root来实现我们想要的效果,顾名思义,at root 就是让生成的css代码以此节点为根节点,不受外层节点影响,但不影响你按树结构来书写css代码,sass代码如下: 继续阅读“Sass/Scss样式预处理的一些常用技巧”

前端安全之常见问题总结

目录

正文

一、XSS(Cross Site Scripting)跨站JS脚本攻击,如何防范?

  1. 针对接口进行 XSS攻击,即把js脚本或者带恶意js脚本的html标签,作为GET或者POST参数提交到服务器,然后服务器解释并响应,在响应结果里把脚本或者html标签原样返回明显示和执行。这明显是很有问题。防范方式:1)提交数据前前端要做数据校验,对用户输入的信息(js代码及dom节点)进行过滤。2)对重要的cookie设置为httponly(服务器端可设置此字段),客户端就没有操作此cookie的权限。3)服务器端也要数据合法性校验
  2. 针对DOM本身进行 XSS攻击,如果本身页面代码中使用了window.eval来执行代码。eval本身会把一段字符串变成可执行的js代码,这是非常危险的。还有拼接html字符串后直接显示DOM时也会遇到同样的问题。防范方式:尽量避免使用eval,拼接html字符串时应校验字符串的合法性,过滤非法元素节点与属性节点,如iframe,script标签,onerror事件, style, src, href等。

可能产生危害:泄露了个人的cookie信息,身份认证被套取后,被用作非法用途
继续阅读“前端安全之常见问题总结”

javascript函数式编程之 函子(functor)

一个最简单的容器,一个最简单的函子

函子functor 是实现了 map 函数并遵守一些特定规则的容器类型。什么是容器?如下是一个最简单的容器。函子则是Mappable的容器。下面的容器实现了map,所以它也是一个最简单的函子
引入数学概念范畴学中的函子是为了要处理一些比较复杂的情况。诸如:控制流(control flow)、异常处理(error handling)、异步操作(asynchronous actions)和状态(state),还有更棘手的副作用(effects)。
继续阅读“javascript函数式编程之 函子(functor)”

javascript函数式编程之 声明式编程(declarative programing)

定义

在计算机科学中,声明式编程是一种编程范式 – 构建计算机程序的结构和元素的一种风格 – 专注于表达计算逻辑,而不需要描述其控制流程。

应用这种风格的许多语言尝试通过描述程序在问题领域中必须完成的内容来最大限度地减少或消除副作用,而不是描述如何将其作为编程语言原函数的序列直到实现。这与命令式编程相反,命令式编程在显式步骤中实现算法。 继续阅读“javascript函数式编程之 声明式编程(declarative programing)”

javascript函数式编程之 无参风格(point-free style)

定义

无参风格是一种编程范例,其中函数定义不能识别它们所运行的参数(或“点”)。 相反,它只是组合(compose)其他函数,在其子函数中操纵参数的组合器。
因为严格使用组合可以很好地适应等式推理的程序,它也是某些编程语言的自然风格,包括APL和诸如Forth之类的连接语言。
例子如下: 继续阅读“javascript函数式编程之 无参风格(point-free style)”

javascript函数式编程之 柯里化(curry)

定义

柯里化(curry)的概念其实可以简单理解为这样,本来有个已存在的函数需要接收多个参数的,现我想要根据需求由此函数打造成一个只有一个或者指定数量参数的新的函数。这里我们引用lodash库来举例,如下:
<script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script> 继续阅读“javascript函数式编程之 柯里化(curry)”