Skip to content

Latest commit

 

History

History
111 lines (110 loc) · 4.53 KB

1.md

File metadata and controls

111 lines (110 loc) · 4.53 KB
Raw

我的前端套路：

页面部分（前端） 自己的网站（blog）主要由UI框架（vue.js），具体样式自由发挥（vue-router作为前端页面路由）。页面样式部分部都是靠各种各样插件，UI框架来完成项目的要求,vue-awesome中就有相对vue的插件或者UI框架，But插件固然方便，但在万恶的产品dog不该需求？倒不如我们学习它写法，Make In China 它（虽然兼容方面不好，但起码自己学得更多。）

1. 公共状态管理

vuex（类似redux的状态管理插件），前面提到自给自足的小项目，不用动用到它。这里我们采用 $root（vue实例的根节点来满足兄弟组件间的通信或者公共状态的储存）PS:项目使用vue的SFC（单文件组件）。
创建Vue instance
/app.js

new Vue({
  data(){
    reutrn{
      name:'cart'
    }
  }

子组件调用
/child.js

<template>
  <div>{{$root.name}}</div>
  <div>{{getName}}</div>
</template>

<script>
  export defalut{
    computed:{
      getName(){
        return this.$root.name
        }
      }
    }
</script>

2.响应式布局

在移动端盛行的世界里，页面的布局也要做到响应式。判断视窗变化有两种做法:1. 是用css的媒体查询。2. 判断窗口的宽度阈值js监听window.resize（当然这种鬼畜般的触发要加入节流函数）。

let resizeTimer = null
window.addEventListener('resize',function(){
   if (resizeTimer) {   
    clearTimeout(resizeTimer)
    }
    /* 第一次访问，赋值给 resizeTimer，绑定的函数 400ms 后调用 */
    resizeTimer = setTimeout(function(){
        console.log("window resize")
    }, 400)
})

2.引用PostCss

PostCss一框利用js转化演示的工具，功能强大。 //postcss.config.js 配置默认文件

npm i -D precss
npm i -D autoprefixer
module.exports = {
    plugins: [
    require('precss'),
    require('autoprefixer'),
    // require('postcss-circle')
    ]
}

3. 高清方案

项目中试水的加入了阿里团队的高清方案布局代码，就是能高度还原设计稿的比例的样式方案。

4. Markdown注入

怎么在自己的项目里用markdown，首先要装一个markdown解析器markdown-it（把markdown语法解析成html代码，但是不同的markdown解析器解析出来的代码有差异），再结合highlight.js提供语句高亮（具体配置看官方文档，或者项目查看）。

5. Webpack模式

npm run dev（在开发模式中运行，会自带热刷新和Express服务区），在项目打造完成之后通过npm run build会生成一系列打包文件（不启动web服务器）。

6.前缀补全（prefix）

最后提供一个浏览器前缀属性函数，主要是在js动态处理一些属性时候补全前缀：

function prefix() {
  var styles = window.getComputedStyle(document.documentElement, ''),
    pre = (Array.prototype.slice
      .call(styles)
      .join('') 
      .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
    )[1],
    dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1]
  return {
    dom: dom,
    lowercase: pre,
    css: '-' + pre + '-',
    js: pre[0].toUpperCase() + pre.substr(1)
  }
}

比如在动态操作Dom的transition属性

document.getElementById('foo').style.transform = 'translateX(50%)'

这看起来很正常但是一些浏览器的transition是要添加前缀webkit的上面的操作就无效了：

document.getElementById('foo').style.WebkitTransition= 'translateX(50%)'

这样才能触发属性。

6. 跨域保存Cookie

如果你的Api不是在本地运行，那么在登陆请求数据是返回的cookie是保存不了的。前端页面要通过设置withCredentials 为true。

1. 原生写法

var xhr = new XMLHttpRequest();
    xhr.open("post", "http://********/session", true);
    xhr.withCredentials = true;//放在 open 方法后面比较靠谱
    xhr.onload = function(e){}
    xhr.send(userInfo)

2. axios写法

  axios.defaults.withCredentials = true

Web服务器对应修改