phoebecodespace / blog Goto Github PK

View Code? Open in Web Editor NEW

4.0 4.0 3.0 5.06 MB

记录与总结

JavaScript 99.59% CSS 0.41%

blog's People

Contributors

Stargazers

Watchers

Forkers

winer110 andyzhou192 kule2018

blog's Issues

1像素的执着

记录处理兼容问题中遇到的css问题，它可能只是1px的偏差。

Safari 浏览器二次访问 a标签内border颜色变成深蓝色

//处理办法：border改为内置阴影
border-bottom: 1px solid  #E8E8E8;
 =>
box-shadow:inset 0px -1px 0 #E8E8E8;

滚动不流畅问题

overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;

优化transform在过渡效果中出现文字模糊和抖动问题
① 将元素的宽、高度设置为偶数
② 改成transform: translate(-50%, -52%)（如果52%不行则从51%每个百分比尝试）
css改变输入框光标颜色

input,textarea{
   caret-color: red;
}
input,textarea { 
    color: rgb(60, 0, 248); /* 光标的颜色*/ 
    color\0: #333;   /* IE hack*/ 
   -webkit-text-fill-color: #333;  /* 文本颜色 */ 
}

实现半像素边框

① 目标元素相对定位
② 伪元素绝对定位
③ 伪元素1px宽
④ 伪元素宽高设置为2倍
⑤ 伪元素缩小0.5倍
⑥ 把border包进来（否则边框不会一起缩放）

.thinner-border {
    position: relative;
}

.thinner-border:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border: 1px solid #000;
    transform-origin: 0 0;
    transform: scale(0.5, 0.5);
    box-sizing: border-box;
}

vue-cli webpack 分析

文件结构

├─build
│   ├─build.js
│   ├─check-versions.js
│   ├─dev-client.js
│   ├─dev-server.js
│   ├─utils.js
│   ├─vue-loader.conf.js
│   ├─webpack.base.conf.js
│   ├─webpack.dev.conf.js
│   ├─webpack.prod.conf.js
│   └─webpack.test.conf.js
├─config
│   ├─dev.env.js
│   ├─index.js
│   ├─prod.env.js
│   └─test.env.js
├─...
└─package.json

指令分析 package.json

"scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  },

运行”npm run dev”的时候执行的是build/dev-server.js文件

运行”npm run build”的时候执行的是build/build.js文件

配置路径分析

build/dev-server.js 运行”npm run dev”的时候执行的文件
build/build.js 运行”npm run build”的时候执行的文件
webpack配置分析

build/webpack.dev.conf.js dev-server使用的webpack文件
build/webpack.base.conf.js webpack基础配置，build/webpack.dev.conf.js中引用
build/webpack.dev.conf.js 构建时使用的webpack文件

build/check-versions.js 版本检测
config/index.js 描述了开发和构建两种环境下的配置
build/utils.js & build/vue-loader.conf.js webpack配置文件中引用

文件分析

build/dev-server.js

检查node和npm的版本
引入相关插件和配置
创建express服务器和webpack编译器
配置开发中间件（webpack-dev-middleware）和热重载中间件（webpack-hot-middleware）
挂载代理服务和中间件
配置静态资源
启动服务器监听特定端口（8080）
自动打开浏览器并打开特定网址（localhost:8080）

build/build.js

loading动画
删除创建目标文件夹
webpack编译
输出信息

build/webpack.dev.conf.js 开发环境下webpack配置

将hot-reload相关的代码添加到entry chunks
合并基础的webpack配置
使用styleLoaders
配置Source Maps
配置webpack插件

build/webpack.base.conf.js webpack基础配置

配置webpack编译入口
配置webpack输出路径和命名规则
配置模块resolve规则
配置不同类型模块的处理规则

build/webpack.dev.conf.js 生产环境webpack配置

说明： webpack插件里面多了丑化压缩代码以及抽离css文件等插件。

合并基础的webpack配置
使用styleLoaders
配置webpack的输出
配置webpack插件
gzip模式下的webpack插件配置
webpack-bundle分析

config/index.js

// 转发请求配置
proxyTable: {
  '/api': {
    target: 'http://picup.xxxx.net',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

build/utils.js

生成静态资源的路径
生成 ExtractTextPlugin对象或loader字符串
生成 style-loader的配置

build/vue-loader.conf.js

配置了css加载器

参考文档

Array 对象方法整理

数组创建与修改

1. 创建

var arr = [];
var arr = new Array()
Array.of(el1[,el2[...]]) //创建一个新数组实例

Array.from(arrayLike) //将类数组(类似数组的对象和可遍历的对象)转为真正的数组。

// ES5的写法
var arr1 = [].slice.call(arrayLike);
// ES6的写法
let arr2 = Array.from(arrayLike);

2. 合并

Array.prototype.concat(arr1[,arr2..]) //合并两个或多个数组。不更改现有数组，而是返回一个新数组。

3. 转化为字符串

Array.prototype.join(separator) //以separator（默认为逗号）拼接为字符串。
Array.prototype.toString() //把数组转换为字符串,数组中的元素之间用逗号分隔。

字符串转化为数组：s.split(","); //在每个逗号(,)处进行分解。

4. 填充

Array.prototype.fill(value[, start, end]) //用一个固定值填充[start,end)的元素。

判断数组

Array.isArray() //判断传递的值是否是一个 Array。

筛选排序递归

1. 筛选

Array.prototype.filter()
Array.prototype.map()

2. 排序

Array.prototype.reverse() //将数组中元素的位置颠倒。
Array.prototype.sort()

3. 递归

Array.prototype.reduce()

语法：arr.reduce(callback,[initialValue])

callback(accumulator,currentValue,currentIndex,array)

accumulator 上一次调用回调返回的值

currentValue 数组中正在处理的元素

currentIndex 数据中正在处理的元素索引

array 调用 reduce 的数组

initialValue [可选]，用于第一次调用 callback 的第一个参数。

增删改查

1. 查找

Array.prototype.some(callback) //执行一次 callback 函数，直到找到一个使得 callback 返回true。
Array.prototype.every(callback) //数组的所有元素是否都通过callback 函数。
Array.prototype.find(callback) //在数组中返回符合callback第一个元素的值。
Array.prototype.findIndex(callback)//返回数组中满足callback的第一个元素的索引。否则返回-1。
Array.prototype.includes(searchElement) //是否包含一个指定的值

2. 增、删

Array.prototype.pop() //删除数组最后一个元素，并返回该元素的值。
Array.prototype.push() //增加元素到数组末尾。
Array.prototype.shift() //删除数组第一个元素。
Array.prototype.unshift() //增加元素到数组开头。
Array.prototype.slice(start,end) //返回[start,end)**浅拷贝**到一个新数组对象，**原数组不会被修改**。
Array.prototype.splice() //通过删除现有元素和/或添加新元素来更改一个数组的内容，**会直接对数组进行修改**。
- array.splice(start)
- array.splice(start, deleteCount)
- array.splice(start, deleteCount, item1, item2, ...)
start : 如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从1计数）。
deleteCount : 如果 deleteCount 是 0，则不移除元素，这种情况下，至少应添加一个新元素；如果 deleteCount 大于start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）；如果deleteCount被省略，则其相当于(arr.length - start)。
item1, item2, ... ：要添加进数组的元素

循环遍历

Array.prototype.map(callback)
Array.prototype.forEach(callback)
Array.prototype.entries() //返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
Array.prototype.keys() //返回一个新的Array迭代器，它包含数组中每个索引的键。

Array.prototype.values() //返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值。

  for (let index of ['a', 'b'].keys()) {    //遍历键
    console.log(index);
  }
  // 0
  // 1

  for (let elem of ['a', 'b'].values()) {   //遍历值
    console.log(elem);
  }
  // 'a'
  // 'b'

  for (let [index, elem] of ['a', 'b'].entries()) {   //遍历键/值对
    console.log(index, elem);
  }
  // 0 "a"
  // 1 "b"

实用方法：

将参数转化为数组

var _arguments=Array.prototype.slice.apply(arguments)

参考文档

JSLint

Missing radix parameter：
添加parseInt的第二个参数:
parseInt的第二个参数有四种:2、8、10、16，分别对应二进制、八进制、十进制、十六进制；

gulp 最佳实践

工程目录

插件

gulp-debug 调试
gulp-watch 监听文件变化
gulp-connect 启动本地服务器
ejs ejs模板编译
gulp-header
gulp-autoprefixer

vue 相关问题

vue如何设置行内'background-image'属性

<div class="item-right" :style="{backgroundImage: 'url('+item.image_lmobile+')'}">
</div>

prop变化，用 watch监听方法
组件之间传递事件Bus.js

// bus.js
import Vue from 'vue'
export default new Vue()

// child.vue
import Bus from '../common/js/bus.js'
 Bus.$on('on', (msg) => {
         this.message = msg
 })

// parent.vue
import Bus from '../common/js/bus.js'
Bus.$emit('on', '来自兄弟组件')

warning: component lists rendered with v-for should have explicit keys.

v-for配合key使用，使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

JS兼容浏览器

js修补匠 babel-polyfill

//安装
npm install --save-dev babel-polyfill
//入口文件引入
import 'babel-polyfill';

vue 路由动画设置

教程
 实例

vue实现拖拽功能

Vue拖拽

DOM 异步刷新问题

this.$nextTick

        methods: {
            async initData() {
                this.menuList = await foodMenu(this.shopId)   // 获取菜单
                await this.getFoodListHeight()  // 计算菜单高度
            },
            getFoodListHeight(){
                 this.$nextTick(()=>{
                        const menuLeft = this.$refs.menuLeft;
                        const listArr = menuLeft.querySelectorAll('li');
                        listArr.forEach((item,index)=>{
                            this.shopListTop[index] = item.offsetTop
                        })
                })
            }
        }

vue-cli配置多入口程序

vue-cli 生成文件

vue init webpack <project-name>

build/webpack.base.config.js

module.exports = {
  entry: {
    app: './src/main.js',
    admin: './src/main-admin.js'
  },
}

build/webpack.build.config.js

   new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      chunks:['app'],  // 用chunks指定对应entry
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        
      },
      chunksSortMode: 'dependency'
    }),
    new HtmlWebpackPlugin({
      filename: config.build.admin,
      template: 'index.html',
      inject: true,
      chunks: ['admin'],
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
    }),

HtmlWebpackPlugin 配置必须用chunks指定entry对应的入口文件别名
关于minify更多配置: https://github.com/kangax/html-minifier#options-quick-reference

build/dev-server.js

// app.use(require('connect-history-api-fallback')())
const history = require('connect-history-api-fallback');
app.use(history({
  rewrites:[
    {from:/^\/admin\/.*$/,to:'/admin.html'}
  ]
}))

将admin转发给admin.html

JS 性能优化

缓存
减少DOM操作
函数节流

https://segmentfault.com/a/1190000011031658
https://zhuanlan.zhihu.com/p/28910636

React

React 中 setState({key:value})时当key是一个变量时，这个语句要如何写。

this.setState({
    [key]:obj.xxx
})

React-router

historyAPI
window.addEventListener('hashchange', function() { });
https://stackoverflow.com/questions/3522090/event-when-window-location-href-changes

性能：

不要在componentWillUpdate/componentDidUpdate/render中执行setState, 可能异致死循环。尽量不要在生命周期钩子外的方法中使用setState。
不要在JSX中使用bind方法绑定组件实例
不要使用cloneElement，createElement,让JSX与babel帮你创建它们。

// bad
class extends React.Component {
  onClickDiv() {
    // do stuff
  }

  render() {
    return <div onClick={this.onClickDiv.bind(this)} />;
  }
}

// good
class extends React.Component {
  constructor(props) {
    super(props);

    this.onClickDiv = this.onClickDiv.bind(this);
  }

  onClickDiv() {
    // do stuff
  }

  render() {
    return <div onClick={this.onClickDiv} />;
  }
}

datatable 填坑

每次筛选，重新调用分页

var table;
if(table){
      table.fnDestroy();  //每次重绘之前destroy之前的对象
    }
    table = $('#datatable').dataTable({
      "pagingType": "full_numbers",  //含首页、尾页
      "language": {   //国际化配置
             oPaginate: {
                    "sFirst" : "第一页",
                    "sPrevious" : "上一页",
                    "sNext" : "下一页",
                    "sLast" : "最后一页"
                }
          }
    });

vue项目开发规范

目录与文件夹的命名

目录（dir）由小写单词命名，两个以上的单词以下划线“_”分隔（例如node_modules）；
资源文件（assets）由小写单词命名，两个以上的单词以短横杆“-”分隔（例如assets/icon-delete.png）；
Vue文件（.vue）统一由大驼峰命名法命名（例如components/MyComponent.vue）；

语法

prop定义应该尽量详细（以下代码分别提供了 简单语法 和 对象语法 两种示例）；

# 简单语法
Vue.component('props-demo-simple', {
    props: ['size', 'myMessage']
})

# 对象语法，提供校验
Vue.component('props-demo-advanced', {
props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
        type: Number,
        default: 0,
        required: true,
        validator: function (value) {
            return value >= 0
        }
    }
 }
})

声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case（以下代码中，js语法中，命名为 greetingText ,在templete中则使用 greeting-text ）；
```
# js
props: {
        greetingText: String,
        required: true
    },

# templete
<WelcomeMessage greeting-text="hi"/>
```
总是用key为 v-for 设置键值；
统一使用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)；

组件/实例的选项放置顺序

组件/实例的选项应该有统一的顺序：

name,props,components 确定的值;
computed,data 数据;
filters,methods,watch 处理方法;

生命周期。

    export default {
        name:'',     #  组件名
        props: {     #  属性
            status: String,
            required: true
        },
        components: {
            # ..引用组件
        },
        computed: {
            # ..计算属性
        },
        data () {
            return {
                
            }
        },
        filters: {
            # ..过滤器
        },
        methods: {
            # ..公共方法
        },
        watch: {
            # ..监听
        },
        mounted () {  # 生命周期按照他们被调用的顺序

        },
        destroyed () {

        }
    }

工程项目

建议工程目录如下，会根据具体项目稍作调整。

    ├── /dist/           # 项目输出目录
    ├── /static/         # 静态资源(不需要webpack处理)
    ├── /src/            # 项目源码目录
    │ ├── /assets/          # 资源
    │ │ └── /images/            # 图片资源
    │ ├── /theme/           # 样式
    │ │ └── /common/            # 公共样式 如：reset.scss、mixin.scss、vars.scss
    │ ├── /components/      # 组件
    │ ├── /views/           # 页面
    │ ├── /services/
    │ │└── api.js           # 数据接口
    │ ├── /routes/
    │ │ └── index.js            # 路由入口
    │ ├── /utils/        # 工具函数
    │ │ ├── config.js       # 项目常规配置
    │ │ ├── directive.js    # 公共指令
    │ │ ├── filters.js      # 公共过滤器
    │ │ ├── request.js      # 异步请求函数
    │ │ └── common.js       # 公共方法
    │ ├── index.js          # 入口文件
    │ └── index.html
    └── package.json     # 项目信息

缓存

localStorage和sessionStorage

localStorage和sessionStorage都是用来存储客户端临时信息的对象。
localStorage和sessionStorage都只能存储字符串类型的对象
localStorage生命周期是永久，除非用户手动清除localStorage信息，否则这些信息将永远存在。
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么通过sessionStorage中存储的数据也就被清空了。
不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息

sessionStorage

基本使用

sessionStorage.setItem(key,value);
sessionStorage.gettItem(key);
sessionStorage.remove(key);

存数组
把数组转为字符串存入sessionStorage，取出的时候转化为数组。
存Json对象
把Json对象转为字符串存入sessionStorage，取出的时候转化为Json对象。

JSON.stringify(obj)
JSON.parse(str)

参考：

http://blog.csdn.net/u011413061/article/details/49999785

vue中实现自定义音频播放器

实现逻辑

slider组件播放进度条、音量进度条
timeupdate 监听播放，控制播放进度条
play()、pause()实现播放与暂停
duration 属性获取音频时长
currentTime 音频当前播放位置的获取与设置
volume 音量的获取与设置

代码

<template>
  <div class="audio">
      <audio :src="audioSrc" ref="audioRecord" ></audio>
      <!-- controls -->
      <div class="audio_controls" >
        <button :class="play ? 'play':'pause'" @click="togglePlay"></button>
        <Slider v-model="time_progress" class="time_progress" @on-change="sliderTime"  :tip-format="formatTimeSlider"></Slider>
        <div class="time_range">
            {{this.formatTime(currentTime)}} / {{this.formatTime(duration)}}
        </div>
        <div class="voice_progress">
            <button :class="sound ? 'lound':'slient'" @click="toggleSound"></button>
            <Slider v-model="voice_progress" @on-change="sliderSound"></Slider>
        </div>
      </div>
  </div>
</template>
<script>
export default {
    name: "audioRecord",
    props:['audioSrc'],
    data(){
        return{
            play:true,
            currentTime:0,
            duration:0,
            time_progress:0,
            sound:true,
            voice_progress:50
        }
    },
    methods:{
        formatTime(val){
            let second = parseInt(val);
            let HH = Math.floor(second / 3600),MM = Math.floor(second % 3600 / 60),SS = second % 60;
            if(HH<10){HH = `0${HH}`};
            if(MM<10){MM = `0${MM}`};
            if(SS<10){SS = `0${SS}`};
            let min = `${HH}:${MM}:${SS}`;
　　　　　　 return min;
        },
        // 播放
        togglePlay(){   // 开始暂停     
           let method = this.play ? 'play' : 'pause';
           this.play = !this.play;
           this.$refs.audioRecord[method]();
        },
        handleProgress(){
            const audioRecord = this.$refs.audioRecord,
                  _currentTime = audioRecord ? audioRecord.currentTime : 0; 
                  if(_currentTime==this.duration){
                     this.play = true;
                  }          
                  this.currentTime = _currentTime;
                  this.time_progress = _currentTime/this.duration * 100;
        },
        sliderTime(val){        // 切换播放时间点
            this.$refs.audioRecord.currentTime = (val/100) * this.duration;
        },
        formatTimeSlider(val){
            return this.formatTime(val*this.duration/100);
        },
        // 音量
        toggleSound(){         // 静音切换
            this.sound = !this.sound;
            if(this.sound){
                this.$refs.audioRecord.volume = this.voice_progress/100;
            }else{
                this.$refs.audioRecord.volume = 0;
            }
        },
        sliderSound(val){      // 音量调节
            this.$refs.audioRecord.volume = val/100;
            val==0 ? this.sound=false : this.sound=true;
        }
    },
    mounted(){
         const audioRecord = this.$refs.audioRecord;
         audioRecord.oncanplay=()=>{ this.duration = audioRecord.duration};             // 监听oncanplay
         this.$refs.audioRecord.addEventListener('timeupdate', this.handleProgress);    // 监听播放
         audioRecord.volume = this.voice_progress/100;
    }
}
</script>
<style scope>
button{
    border: 0;
    outline: 0;
}

.audio{
    width: 100%;
    height: 48px;
    border-radius: 2px;
    background-color: #fafafa; 
}
.audio_controls{
    height: 100%;
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
    align-items: center;
    align-content:center;
}
/* 开始/暂停按钮 */
.play,.pause{
    width: 26px;
    height: 26px;
    background-color: #03a9f4;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../../assets/images/mp3/play.png);
    border-radius: 50%;
    margin-right: 10px;
}
.play{
    background-image: url(../../assets/images/mp3/play.png);
}
.pause{
    background-image: url(../../assets/images/mp3/pause.png);
}
/* 时间 */
.time_range{
    width: 140px;
    text-align: center;
}
/* 进度条 */
.time_progress{
    width: 300px;
}
.voice_progress .ivu-slider{
    width: 120px;
    display: inline-block;
    vertical-align: middle;
}

/* 音量 */
.voice_progress .ivu-tooltip-rel{
    display:none;
}
.lound,.slient{
    vertical-align: middle;
    width: 26px;
    height: 26px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
}
.lound{
    background-image: url(../../assets/images/mp3/openvoice.png);
}
.slient{
    background-image: url(../../assets/images/mp3/closevoice.png);
    background-position: left center;
}
</style>

填坑：

audio.duration的值为NaN
监听canplay事件
进度条与currentTime不匹配
获取的currentTime不需要parseInt，在format事件格式的时候再parseInt

参考：

HTML DOM Audio 对象

css属性名太长记不住的备忘录

样式篇

-webkit-tap-highlight-color: color | transparent

当用户点击可点击元素，显示的高亮颜色。

-webkit-appearance：none | button | button-bevel ....

改变按钮和其他控件的外观

-webkit-input-placeholder: color

设置placeholder的颜色

布局篇

flex 垂直居中：

.wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

功能篇

超过N行展示...：

.list{
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	-webkit-line-clamp: N;
	word-break: break-all;
}
//强制换行，不同换行依据：
word-break: break-all;      //只对英文起作用，以字母作为换行依据。
word-wrap: break-word;     //只对英文起作用，以单词作为换行依据。
white-space: pre-wrap;    //只对中文起作用，强制换行。

移动端横向滚动：

.nav ul {
     position: absolute;
     left: 0;
     top: 0;
     overflow: hidden;
     overflow-x: scroll;
     overflow-scrolling: touch;
     -webkit-overflow-scrolling: touch;
     white-space: nowrap;
     padding: 0 15px;
     height: 50px;
     font-size: 0;
}

// html
div.scroll-nav>ul.nav-list>li.item-list>a
// css
.scroll-nav {
   overflow: hidden;
   overflow-x: auto;
}
.scroll-nav .nav-list {
   padding-bottom: 2rem;
   white-space: nowrap;
   font-size: 0;
}
.scroll-nav .item-list {
   display: inline-block;
   vertical-align: middle;
}

弹框出现的时候遮罩层下面防止滚动

body.lock-position {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: fixed;
}

偏门篇

text-transform: capitalize; 首字母大写
text-transform: uppercase; 转化为大写
text-transform:lowercase; 转化为小写

touch-action:none;   禁用手势
touch-action: pan-y pinch-zoom; 处理水平平移的图像轮播，但不想干扰网页的垂直滚动或缩放。
touch-action: manipulation; 只允许进行滚动和持续缩放操作。

touch-action

常用正则：

1 用户名正则
①中文、英文、数字、“”，要求2-16个字符"
/^[0-9a-zA-Z\u4e00-\u9fa5]{2,16}$/
②4到16位（字母，数字，下划线，减号）
/^[a-zA-Z0-9_-]{4,16}$/

2 密码强度正则
①最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
/^.(?=.{6,})(?=.\d)(?=.[A-Z])(?=.[a-z])(?=.[!@#$%^&? ]).*$/
②6-10位，数字或字母组成
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/

^ 匹配一行的开头位置
(?![0-9]+$) 预测该位置后面不全是数字
(?![a-zA-Z]+$) 预测该位置后面不全是字母
[0-9A-Za-z] {6,10} 由6-10位数字或这字母组成
$ 匹配行结尾位置

3 整数正则
①正整数正则
var posPattern = /^\d+$/;
②负整数正则
var negPattern = /^-\d+$/;
③整数正则
var intPattern = /^-?\d+$/;

3.手机号
/^1(3|4|5|7|8)\d{9}$/
// 判断是否为手机号
isPoneAvailable: function (pone) {
var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
if (!myreg.test(pone)) {
return false;
} else {
return true;
}
},

// 判断是否为电话号码
isTelAvailable: function (tel) {
var myreg = /^(([0+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/;
if (!myreg.test(tel)) {
return false;
} else {
return true;
}
}

15个常用的javaScript正则表达式

JavaScript DOM操作

JavaScript的DOM操作

什么是 DOM?

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。
为简单起见，在API参考文档中的语法实例通常会使用element(s) 指代节点，使用nodeList（s）或 element(s)来指代节点数组，使用 attribute(s)来指代属性节点。

在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点:

文档是一个文档。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。

DOM 创建

document.createElement 创建元素节点
document.createAttribute 创建一个属性节点
document.createTextNode 创建文本节点

DOM 查询

querySelector //返回匹配的第一个元素
querySelectorAll //返回匹配的元素集合
document.getElementById
document.getElementsByClassName
document.getElementsByTagName
element.parentNode //父节点
element.children //子节点
element.firstChild //第一个子元素节点
element.lastChild //最后一个子元素节点
element.previousSibling //上一个元素节点
element.nextSibling //下一个元素节点

DOM 更改

element.insertBefore() //在指定的已有的子节点之前插入新节点。
element.appendChild() //向元素添加新的子节点，作为最后一个子节点。
element.removeChild() //移除子节点
element.cloneNode(deep)

cloneNode() 方法创建节点的拷贝，并返回该副本。

cloneNode() 方法克隆所有属性以及它们的值。

如果需要克隆所有后代，把 deep 参数设置 true，否则设置为 false。

element.replaceChild(newnode,oldnode) //替换元素中的子节点。

属性操作

element.attributes //返回元素属性的 NamedNodeMap。
element.getAttribute() //返回指定属性值。
element.hasAttribute() //元素是否拥有指定属性。
element.setAttribute() //设置属性值。
element.removeAttribute() //移除属性。
element.textContent //设置或返回文本内容。
element.innerHTML //设置或返回元素的内容。
document.body.classList.add("a","b");
document.body.classList.remove("a");
document.body.classList.contains('myclass');
document.body.classList.toggle('classtest');
element.clientHeight //返回元素的可见高度。
element.clientWidth //返回元素的可见宽度。
element.offsetHeight //返回元素的高度。
element.offsetWidth 返回元素的宽度。

DOM 操作应用

点击切换效果：

//html:
div.panels>div.panel*5


//js
var panels = document.querySelectorAll('.panel');   //获取panel的NodeList

panels.forEach(panel=>{panel.addEventListener('click',toggelClass)});  //监听点击事件

function toggelClass(){
  let siblings = [].filter.call(this.parentNode.children,child=>child!==this);   //获取兄弟元素
  siblings.forEach(item=>item.classList.remove('open'));
  this.classList.add('open');
}

参考文档

HTML DOM 对象

响应式

Media Query（css3媒介查询）

语法结构及用法：
@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

css3媒体查询实现网站响应式布局

响应式图片srcset

<img src="/static/images/[email protected]"  srcset="/static/images/[email protected] 2x, /static/images/[email protected] 3x">

antd 开发心得

upload 反应慢，其实是电脑去本地搜索文件，过滤的时间
解决办法：去掉 accept 属性
'image/*'
改为：
'image/jpg,image/jpeg,image/png'

VSCode插件——工欲善其事，必先利其器

外观配置

配色、字体：

{
    "workbench.colorTheme": "Visual Studio Dark",
    "editor.fontSize": 20,
    "editor.fontFamily": "Consolas, 'Courier New', monospace",
}

主题： atom one dark
VSCode Great Icons 图标
background 背景

工具

Atom Keymap
Import Cost 计算引入文件大小
Bracket Pair Colorizer 用更清晰的彩色展示 ()/[]/{}
View InBrowser在浏览器中打开
beautify美化代码
filesize 计算当前文件大小

html

html-snippets

div --> <div></div>
doc --> <!DOCTYPE html>
a   --> <a href=""></a>

Atuo Rename Tag修改 html 标签，自动帮你完成尾部闭合标签的同步修改

sass

Atom Sass Snippet
Easy Sass 自动编译

vue

Vue VSCode Snippets

快捷键	功能
vbase	生成vue基础模板
vimport	`import New from './components/New.vue';`
vmodel 、 vsrc 、 vclass、 vfor 、von	`<template>` 生成对应语法模板
vdata 、 vmethod 、vcomputed 、vfilter	`<script>` 生成对应语法模板

VueHelper vue代码片段

Typescript

Auto Import 自动引入引用路径

Markdown

markdownlint markdown校验
Markdown-TOC 自动生成markdown目录
Markdown Preview Enhanced 预览

js 小工具

is : 判断数据类型
https://www.npmjs.com/package/is

node-sass 安装

[http://www.cnblogs.com/savokiss/p/6474673.html](node-sass 安装)
使用方法一
npm install node-sass -g -d

fetch从api到最佳实践

fetch

JavaScript 通过XMLHttpRequest(XHR)来执行异步请求，它在设计上不符合职责分离原则，将输入、输出和用事件来跟踪的状态混杂在一个对象里。fetch的出现正是为了解决上面提到的那些缺陷。

兼容性

fetch是相对较新的技术，在使用fetch来进行项目开发时，先了解fetch在浏览器兼容性的问题。

fetch基于Promise来实现，在低版本浏览器中Promise可能也未被原生支持，所以除了fetch本身的polyfill，还需要Promise的polyfill：

polyfill

Pormise: es6-promise
fetch: fetch、isomorphic-fetch
ES5: es5-shim

Fetch API

Fetch引入了3个接口，它们分别是 Headers,Request 以及 Response 。

Headers

Headers接口是一个简单的多映射的名-值表，允许您对HTTP请求和响应头执行各种操作。

Request

Request接口定义了通过HTTP请求资源的request格式。

Request.method 请求使用的方法 (GET, POST, 等)
Request.url 请求使用的 URL
Request.mode 请求的模式 (例如： cors, no-cors, same-origin)
Request.cache 请求的缓存模式 (例如： default, reload, no-cache)
Request.credentials 发送cookies (例如： omit, same-origin, include)

Response

通常在fetch()的回调中获得。

Fetch用法

基本用法

请求一个URL，获取JSON格式的返回结果。

  fetch(url,options).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

最佳实践

最佳实践为工作总结，根据工作中的应用不断更新。

POST请求，请求资源格式为base64编码。

base64url

  //javascript
  import base64url from 'base64url';

  const url = '';           //请求url
  const requset={};         //请求数据

  fetch(url,
      { method: "POST",                    //请求方法:POST
        mode:"cors",                       //请求模式:支持跨域请求
        cache: 'reload',                   //请求cache模式:reload
        body :JSON.stringify(requset)      //请求的 body 信息
      }).then(response =>  { return response.text()})
    .then(response => console.log(JSON.parse(base64url.decode(response))))
    .catch(e => console.log("Oops, error", e))

参考文档

vue插件实践整理

vue-echart

安装

npm install echarts -S

chart.vue

// html
<div id="myChart" :style="{width: '100%', height: '300px'}"></div>

//js
import echarts from 'echarts'
export default{
     data (){
         return (
               chart:null
         )
      },
      mounted() {
        this.chart = echarts.init(document.getElementById('myChart'))   // 初始化
        this.drawLine();
      },
      methods(){
        drawLine(){
        const self = this;
        // 绘制图表
        this.chart.setOption({
            grid: {              // 位置
              left: '3%',
              right: '3%'
            },
            title: {               // 标题
               show:false,
               text: '销量'
            },
            tooltip: {
               trigger: 'axis'
            },     
            toolbox: {        // 工具栏
                feature: {
                    saveAsImage: {}
                }
            },
            legend: {         // 图例
                x:"center",
                y:"bottom",
                data:[{
                  name: '销量',
                  icon:'circle'
                }]
            },
            xAxis: {  
                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
                type: 'category',
                nameGap:10,  //名称与X轴的距离
                boundaryGap : false,//坐标的刻度是否在中间
                axisLine:{//坐标轴线条相关设置(颜色等)
                    lineStyle:{
                        color:'#ccc'
                    }
                },
                axisLabel:{ //坐标轴刻度标签
                    margin:7, //刻度标签与轴线之间的距离
                    textStyle:{
                        color:"#999",  //坐标轴刻度文字的颜色
                        fontSize:'12px' //坐标轴刻度文字的大小
                    }
                },
            },
            color:['#2d8cf0'],
            yAxis: {
                type: 'value',
                nameGap:10,  //名称与Y轴的距离
                name:self.statisticList[self.seletChart].unit,    //坐标轴名称
                nameTextStyle:{     //名称的样式
                    color:'#999',
                    fontSize:'12px'
                },
                axisTick:{ //坐标轴刻度相关设置
                    length:'0' //设置成0了
                },
                axisLine:{//坐标轴线条相关设置(颜色等)
                    lineStyle:{
                        color:'#ccc'
                    }
                },
                axisLabel:{//坐标轴标签相关设置,距离颜色等
                    margin:7,
                    textStyle:{
                        color:"#999",  //坐标轴刻度文字的颜色
                        fontSize:'12px' //坐标轴刻度文字的大小
                    },
                }
            },
            series: [ {
                name:'销量',
                type:'line',
                data:[5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}

根据窗口宽度变化实现自适应

const self = this;
window.addEventListener("resize", function () {
        self .chart.resize();
 });

参考：

atom插件——工欲善其事，必先利其器

atom插件

系统与文件

autocomplete-paths 文件路径自动建议
file-icons 文件图标
platformio-ide-terminal 控制台

快捷键：ctrl+~

common

minimap 代码缩略图
highlight-line 高亮当前行
highlight-selected 高亮所有选择
atom-beautify 美化 HTML, CSS, JavaScript 等代码

快捷键：ctrl+alt+B

HTML

emmet 快速html代码
autoclose-html HTML标签自动闭合
open-in-browser 浏览器中打开
atom-html-preview 在编译器中实时展示页面

快捷键：ctrl-shift-H

CSS

css-snippets css语法提示
pigments颜色显示
color-picker 取色器

右键→Color Picker

autoprefixer 自动添加前缀

setting中 run on save 勾选中

Sass

sass-autocompile sass自动编译css
atom-react-instyle sass自动编译RN

js

atom-ternjs 对js语法支持,提示

vue

language-vue vue语法支持
vue2-autocomplete vue2自动补充

template 、 vscript

markdown

Language Markdown markdown语法支持
markdown-preview-plus markdown预览
tool-bar-markdown-writer markdown工具条

visibility 设置：showToolbarOnMarkdown, 同时安装 tool-bar 和 markdown-writer 两个插件。

iview疑难杂症解决

Modal:

slot:

<a slot="close" @click="cancel"><Icon type="ios-close-empty"></Icon></a>
<div slot="footer">
              <Button type="primary" size="large" @click="addcategroy">确定</Button>
              <Button size="large" @click="cancel">取消</Button>
</div>

Attr

footer-hide : hide footer

Modal 中select下拉框位置问题：

.ivu-select-dropdown {
    position: absolute !important;
}

Table

render this指向问题：

new Vue({
	el: '#app',
	data () {
	        const self = this;
		return {
			...写在这里
		}
	}
})

Upload:

清除已上传文件：

设置：default-file-list="defaultList"
清除方法： this.defaultList = []

Form

阻止form表单默认submit事件

 <Form @submit.native.prevent>

按需引用

// 按钮
import Button from 'iviewui/button';
Vue.component('Button', Button);

// 选择列表
import { Select, Option } from 'iviewui/select';
Vue.component('Select', Select);
Vue.component('Option', Option);

// 菜单栏
import Menu from 'iviewui/menu';
Vue.component('Menu', Menu);
Vue.component('Submenu', Menu.Sub );
Vue.component('MenuItem', Menu.Item  );

// 提示消息
import Message from 'iviewui/message';
Vue.component('Message', Message);
Vue.prototype.$Message = Message;

但是最终还是选择下载源代码，注释不需要的组件，重新打包。。

npm run build

打包生产使用UglifyJs报错

// webpack.base.config.js
module: {
    rules: [
        { test: /iview.src.*?js$/, loader: 'babel' },
        { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
    ]
}

phoebecodespace / blog Goto Github PK

blog's People

Contributors

Stargazers

Watchers

Forkers

blog's Issues

文件结构

指令分析 package.json

配置路径分析

文件分析

build/webpack.dev.conf.js 开发环境下webpack配置

build/webpack.base.conf.js webpack基础配置

build/webpack.dev.conf.js 生产环境webpack配置

参考文档

数组创建与修改

1. 创建

2. 合并

3. 转化为字符串

4. 填充

判断数组

筛选排序递归

1. 筛选

2. 排序

3. 递归

增删改查

1. 查找

2. 增、删

循环遍历

实用方法：

将参数转化为数组

参考文档

gulp 最佳实践

工程目录

插件

vue如何设置行内'background-image'属性

prop变化，用 watch监听方法

组件之间传递事件Bus.js

warning: component lists rendered with v-for should have explicit keys.

JS兼容浏览器

vue 路由动画设置

vue实现拖拽功能

DOM 异步刷新问题

vue-cli 生成文件

build/webpack.base.config.js

build/webpack.build.config.js

build/dev-server.js

vue项目开发规范

目录与文件夹的命名

语法

组件/实例的选项放置顺序

工程项目

localStorage和sessionStorage

sessionStorage

参考：

实现逻辑

代码

填坑：

参考：

样式篇

布局篇

功能篇

偏门篇

JavaScript的DOM操作

什么是 DOM?

DOM 创建

DOM 查询

DOM 更改

属性操作

DOM 操作应用

点击切换效果：

参考文档

Media Query（css3媒介查询）

响应式图片srcset

外观配置

工具

html

sass

vue

Typescript

prop变化，用 `watch`监听方法