35-table-cell的应用

发表于 2019-01-27 | 分类于前端-01-切图CSS

我所知道的几种display:table-cell的应用

76-一道运算符优先级面试题

发表于 2019-01-27 | 分类于前端-02-js基础复习

1
2
3

var test={a:1}
test.th=test={b:2}
console.log(test.th) // undefined

正常来说，应该是 test={b:2} 先执行，但是这里访问属性、调用方法运算符”.”的优先级高于赋值运算符
，所以运算顺序是

1 2	test.th=test test={b:2}

75-箭头函数的this

发表于 2019-01-27 | 分类于前端-02-js基础复习

github

箭头函数里不但没有 this，也没有 arguments, super ……

“箭头函数”的this，总是指向定义时所在的对象，而不是运行时所在的对象。

function foo(){
  setTimeout(() => {
    console.log("id:", this.id)
  }, 100);
}

foo.call({id:42});

请问，上面代码的{id: 42}，到底是箭头函数定义时所在的对象，还是运行时所在的对象？

你认为，答案是后者。这是不对的。

因为，这个例子中，箭头函数位于foo函数内部。只有foo函数运行后，它才会按照定义生成，所以foo运行时所在的对象，恰好是箭头函数定义时所在的对象。

19-子组件根据父组件更新状态而变化

发表于 2019-01-02 | 分类于前端-08-vue

知乎

一. 问题

在Topdev的分页组件的开发的时候，当前页数和总页数是父组件传给分页组件的,即代码中的m_totalPage和m_curPage

1	<Paginationer :totalPage="m_totalPage" :curPage="m_curPage" v-on:getLatestList="onPageClick"></Paginationer>

如果在Paginationer.vue中直接使用curPage,会报如下错误:

1	[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value

避免在子组件中直接使用父组件传递过来的值，以免修改之后，出现意外情况。简而言之，需要把这个值赋到子组件中,即在Paginationer.vue做如下操作:

data () {
    return {
      m_curPage: this.curPage
    }
  },

这样就可以解决报错问题，但是会引发另外的问题: 当父组件中m_totalPage和m_curPage发生变化的时候，Paginationer.vue中的值不会跟着变化。

二. 解决办法

在Paginationer.vue中用watch监听curPage这个变量

watch: {
    // 如果 `curPage` 发生改变，这个函数就会运行
    curPage: function (curPage) {
      this.m_curPage = curPage
    }
  },

这样就能使者两个量保持同步。

74-地图坐标体系说明

发表于 2019-01-02 | 分类于前端-02-js基础复习

坐标体系说明

WGS84：为一种大地坐标系，也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。

GCJ02：又称火星坐标系，是由中国国家测绘局制定的地理坐标系统，是由WGS84加密后得到的坐标系。

BD09：为百度坐标系，在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标，bd09mc表示百度墨卡托米制坐标。

12-vux环境搭建

发表于 2018-11-28 | 分类于前端-08-vue

1. 采用 vux2 模板

npm install vue-cli -g # 如果还没安装
vue init airyland/vux2 projectPath

cd projectPath
npm install --registry=https://registry.npm.taobao.org # 或者 cnpm install 或者  yarn
npm run dev #  或者  yarn dev

建议在安装的时候询问是否安装elsint，选择Y，如果想关闭在config/index.js里把 useEslint 改为false。配合vscode的eslint校验很有用。参考链接

2. 安装sass-loader

1 2	cnpm i node-sass -D cnpm i sass-loader -D

3.引入flex.js

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<script>
     !function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=a.navigator.userAgent,q=(!!p.match(/android/gi),!!p.match(/iphone/gi)),r=q&&!!p.match(/OS 9_3/),s=a.devicePixelRatio;i=q&&!r?s>=3&&(!i||i>=3)?3:s>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var t=e.createElement("div");t.appendChild(g),e.write(t.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
</script>

4.配置路由

views文件夹存放页面组件

在router目录下新建两个文件，==_import_development.js== 和 ==_import_production.js==，

//_import_development.js ->

module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

//_import_production.js ->

module.exports = file => () => import('@/views/' + file + '.vue')

// index.js ->

const _import = require('./_import_' + process.env.NODE_ENV)

...
{ path: '/login', component: _import('login/index'), hidden: true },
...

5.配置开发环境和生产环境api

5.1 配置不同环境的请求网址

在config文件夹下 dev.env.js 里添加 BASE_API: '"https://api-prod"'
在config文件夹下 prod.env.js 里添加 BASE_API: '"https://api-prod"'

5.2 在src目录下新建一个api文件夹，写api，方便后期维护

5.3 proxyTable解决跨域

在/config/index.js文件dev.proxyTable里配置index.js,

proxyTable: {
  '/yxAPI': {
      //target: 'http://172.16.1.165:8087', //target里的地址为目标地址
      target: 'http://bq.yonxin.com', //target里的地址为目标地址
      changeOrigin: true,
      pathRewrite: {
        "^/yxAPI":""
      }
  }
},

同时将 config文件夹下 dev.env.js 里 BASE_API:参数设置为'"/yxAPI"'

6.增加styles文件夹，写scss

6.1 公用样式写在src/styles/mixin.scss和src/styles/common.scss

6.2 组件样式写在单文件scoped里，覆盖公用样式请用deep

6.2.1 添加依赖

1	npm install sass-resources-loader --save-dev

6.2.2 修改build/utils.js

scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/your.scss')
        }
      }
    )

6.3 开发前须知:

/**
 * 开发前须知:
 * 
 * 1. rem 字体大小:(字体大小统一请用scss变量,参考https://developers.weixin.qq.com/miniprogram/design/image/8Font.png)
 *  $s: 0.34 rem => 12.75px (接近13px) (页面辅助信息，需弱化的内容，如链接，小按钮)
 *  $xs: 0.37 rem => 13.8px(接近14px) (页面内次要描述信息，服务于首要信息并与之关联，如列表摘要)
 *  $fz: 0.45 rem => 16.8px(接近17px) (目前暂以0.45rem为正文字体)
 *  $sm: 0.48 rem => 18px (页面内大按钮字体,与按钮搭配使用)
 *  $md: 0.53 rem => 19.8px(接近20px) (页面大标题，一般用于结果，空状态等信息单一页面)
 *  $lg: 1.06 rem => 39.75px(接近40px) (只能为阿拉伯数字信息，如金额，时间等)
 *  
 * 2. common.scss主要为公用全局样式(请考虑类名的可读性,避免重复命名)
 *  此项目尝试BEM命名规范,参考文章 https://blog.csdn.net/chenmoquan/article/details/17095465
 *  
 *  .block{} // .block 代表了更高级别的抽象或组件。
 *  .block__element{} // .block__element 代表.block的后代，用于形成一个完整的.block的整体。
 *  .block--modifier{} // .block--modifier代表.block的不同状态或不同版本。
 *
 *  如需覆盖vux的样式，请叠加类名，如 `.yx-header.vux-header`(在组件增加一个class以增加优先级)
 *
 * 3. mixin.scss文件主要为变量文件，已提前全局引入，可在vue单文件里使用里面的变量
 * 
 * 
 */

7.自动加载components组件

视情况看设置不设置

/src/components/componentRegister.js

import Vue from 'vue'

/**
 * 首字母大写
 * @param str 字符串
 * @example heheHaha
 * @return {string} HeheHaha
 */
function capitalizeFirstLetter(str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
}

/**
 * 对符合'xx/xx.vue'组件格式的组件取组件名
 * @param str fileName
 * @example abc/bcd/def/basicTable.vue
 * @return {string} BasicTable
 */
function validateFileName(str) {
  return /^\S+\.vue$/.test(str) &&
    str.replace(/^\S+\/(\w+)\.vue$/, (rs, $1) => capitalizeFirstLetter($1))
}

const requireComponent = require.context('./', true, /\.vue$/)

// 找到组件文件夹下以.vue命名的文件，如果文件名为index，那么取组件中的name作为注册的组件名
requireComponent.keys().forEach(filePath => {
  const componentConfig = requireComponent(filePath)
  const fileName = validateFileName(filePath)
  const componentName = fileName.toLowerCase() === 'index'
    ? capitalizeFirstLetter(componentConfig.default.name)
    : fileName
  Vue.component(componentName, componentConfig.default || componentConfig)
})

文件结构

components
│ componentRegister.js
├─BasicTable
│   BasicTable.vue
├─MultiCondition
│   index.vue

这里对组件名做了判断，如果是index的话就取组件中的name属性处理后作为注册组件名，所以最后注册的组件为：multi-condition、basic-table
最后我们在main.js中==import ‘components/componentRegister.js’==，然后我们就可以随时随地使用这些基础组件，无需手动引入了~

全局注册方式必须在（通过 new Vue 创建的）Vue 根实例创建之前置入组件

注：VUX全局组件也可以创建一个js文件集中引入，在main.js中import引入

8. 写常用util方法

8.1 utils/auth.js –Token设置文件

Web端：(可采用下面一种方案)

import { cookie as Cookies } from 'vux'

const TokenKey = 'Admin-Token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

APP端：(兼容IOS某些机型不支持cookie存储)

import { cookie as Cookies } from 'vux'

const TokenKey = 'Admin-Token'

export function getToken() {
    return Cookies.get(TokenKey) || sessionStorage.getItem(TokenKey)
}

export function setToken(token) {
    Cookies.set(TokenKey, token)
    sessionStorage.setItem(TokenKey, token)
}

export function removeToken() {
    Cookies.remove(TokenKey)
    sessionStorage.removeItem(TokenKey)
}

8.2 utils/request.js –Ajax请求配置文件

8.3 设置 vuex user.js

8.2 8.3见项目代码

8.4 登录状态验证流程说明

9 封装SVG Icon组件

参考链接

安装svg-sprite-loader
1
cnpm i svg-sprite-loader -D
修改 /build/webpack.base.conf.js

/*----------  注释原有loader  ----------*/
// {
//   test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
//   loader: 'url-loader',
//   options: {
//     limit: 10000,
//     name: utils.assetsPath('img/[name].[hash:7].[ext]')
//   }
// },     
/*----------  此处区分svg文件引入  ----------*/
{
  test: /\.svg$/,
  loader: 'svg-sprite-loader',
  include: [resolve('src/icons')],
  options: {
    symbolId: 'icon-[name]'
  }
},
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  loader: 'url-loader',
  exclude: [resolve('src/icons')],
  options: {
    limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
  }
},
/*----------  此处区分svg文件引入 end ----------*/

新建 src/icons 文件夹

icons
│ index.js
├─svg
│   example.svg
│   *.svg

index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件

// register globally
Vue.component('svg-icon', SvgIcon)

const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

10 主题颜色配置

为了配合项目主题颜色，有必要修改vux weui的主题色，方便项目复用，修改文件在build/webpack.base.conf.js,在vux的plugins选项中补充，然后在src/styles/ 下增加 theme.less

请配置vux-loader的less-theme插件，指定用以覆盖的less文件路径：

{
  name: 'less-theme',
  path: 'src/styles/theme.less' // 相对项目根目录路径
}

11 修改build生成项目中css，js引用路径

在/config/index.js里找到 build.assetsPublicPath, 修改为 assetsPublicPath: './',

12 修改host地址让局域网内的其他机器访问

在 package.json 里找到 script.dev ,在后面添加上 --host 0.0.0.0

13 更改eslint规则

参考 vue-element-admin

基本流程如上，后面写业务代码~

15-弹性布局小坑

发表于 2018-11-28 | 分类于前端-01-切图CSS

1

1 2	display: none; display: flex;

二者一齐出现时，display弹性布局要在后面才不会被覆盖掉。

2. 弹性布局针对的是display:block的元素

3. 图文布局: 文章的div，需要设置 min-width:0

.news-item__bd{
    flex: 1;
    min-width: 0;
    word-break: break-all;
}

4. 平均排列

.discount__bd {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.discount__bd .discount__item.empty {
    height: 0;
    border: none;
    padding-top: 0;
    padding-bottom: 0;
    visibility: hidden;
}

如果是2列，则不用加empty元素

.side__bd{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0 8px;
}
.side__item{
  width: calc(50% - 4px); //不用加虚拟empty元素
  height: 1.5rem;
  margin-bottom: 8px;
  display: table;
  padding: 0 10px;
  box-sizing: border-box;
  background: #f0f0f0;
  border-radius: 4px;
}

21-jq事件中的this和event.target

发表于 2018-11-28 | 分类于前端-03-jQuery

codepen

jq中`this`和`event.target`的区别：

　　1.js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远指向触发事件的DOM元素本身；

　　2.this和event.target都是dom对象，使用jQuey中的方法可以将他们转换为jquery对象：$(this)和$(event.target). 　　　　

event.target表示发生点击事件的元素；

this表示的是注册点击事件的元素。

有些时候 event.target 与 this 相等，即$(this) =$(event.target)

1 不代理事件时

不代理事件时，当前谁注册了事件,this就指向谁

$("body").on("click",function(e){
  console.log(e.target)
  console.log($(this))
})

2 代理事件时

代理事件时，e.target == this

$("body").on("click",".a",function(e){
  console.log(e.target)
  console.log($(this))
})

34-IOS中Fixed元素包含输入框时的解决方案

发表于 2018-11-28 | 分类于前端-01-切图CSS

原链接
 掘金

1.fixed问题

使用 position: fixed; 来固定父容器（模态框）在页面中的位置，父容器（模态框）中包含一个或多个 input 输入框的子节点：

在 IOS 上，在键盘被唤起时，由于模态框绝对定位，导致输入框焦点乱跑，输入不正常等问题：

软键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可以理解为变成了 absolute 定位），所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了，因此我们需要使用相对定位进行布局。

在移动端开发中，针对 IOS 及 Android 滚动兼容问题，尽量做局部滚动，不要做全局滚动。

2. 微信页面当打开输入法时，固定底部的按钮被顶上去的解决办法

可以设置当页面高度小于某个数值时底部的按钮自动隐藏

#butt {
    position: fixed;
    left: 0;
    bottom: 0;
}
@media screen and (max-height: 360px) {
    #butt {
        display: none;
    }
}

22-vscode配置终端路径出错解决办法

发表于 2018-11-28 | 分类于前端-00-基础

1.svn插件安装

svn插件地址

Windows

If you use TortoiseSVN, make sure the option Command Line Tools is checked during installation and C:\Program Files\TortoiseSVN\bin is available in PATH.

安装前要检查一下 TortoiseSVN bin目录下是否有 svn.exe，默认安装是没有的，需要重新安装一次，配置Command Line Tools 安装到本地。

2.配置终端路径出错解决办法

由于刚安装svn插件时，终端提示我没有找到svn路径，我随便加了个tortoiseproc.exe,导致终端每次打开默认记住了这个路径。

修改办法：

先修改一下 svn.exe 还有 tortoiseproc.exe 文件名，让终端再次打开的时候找不到路径弹出提示，然后我们再重命名回文件名，在终端搜索正确路径即可。