首页 JavaScriptJS知识点正文

前端开发必备

景先 JS知识点 2018-10-10 517 0

开发环境

老话怎么说来着,工欲善其事,必先利其器,接下来,我们来打造一个狂拽炫酷吊炸天的开发环境。

终端利器 item2

下载

手动下载,官网地址

brew下载,打开终端执行

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 先安装Homebrew

brew cask install iterm2

配置与快捷键

1、配置成默认终端

2、常用快捷键

命令 说明
command + t 新开窗口
command + d 垂直分屏
command + shift + d 水平分屏
command + r 清屏
command + r 查找

shell神器 oh-my-zsh

安装

curl安装
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

wget安装
sh -c "$(wget https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"

配置

zsh配置文件目录为~/.zshrc

1、 设置为默认shell

Mac默认安装了zsh,执行chsh -s /bin/zsh将zsh设置为默认shell

2、主题

修改配置文件的ZSH_THEME字段, 主题一览

3、自定义别名

直接在配置文件里写即可,如

alias ll='ls -l'
alias la='ls -a'

4、更多配置请参考终极 Shell——ZSH

node版本管家 nvm

下载

curl安装
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

wget安装
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

配置和快捷键

打开zsh的配置文件’~/.zshrc’,输入以下内容

    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm 
命令 说明
nvm list 列出本地安装的版本
nvm list-remote 列出所有node版本
nvm install [version] 安装指定版本
nvm use [version] 使用特定版本
nvm alias default v6.10.2 设置默认版本

本地开发

我们的问题,主要是在本地开发上,这里列举下几个常见问题

  • Q1: 前后端分离,跨域怎么破?

    找到代码中config文件夹下的index.js文件,在proxyTable中添加请求转发配置

      proxyTable: {
      '/api': {  // 接口地址
          target: 'http://xxx', // 请求地址
           changeOrigin: true, //开启代理
          pathRewrite: { '^/api': '/api' }  //重写路径
    
        } 
      }
  • Q2: 请求框架用哪个?

    使用了axios,在src文件夹下的config文件夹中的Util.js中封装了ajax,稍加修改即可使用。

    关于axios教程,请猛戳

    哪里不会点哪里

    中文教程

    使用axios,post请求会报错,报错原因是当Content-Typeapplication/x-www-form-urlencoded, 参数会序列化失败,使用qs解决

    qs

    其他解决方案

  • Q3: 混合开发中怎么和Native通信

    关于混合开发,可以单拿出来写了,这里列举几个常见的方式

    • 第三方框架 WebViewJavascriptBridge

    • url scheme 通过在webview的代理中通过拦截的方式与native进行交互,就是拦截url地址

    • 自定义协议 native在window上暴露出对象,里面包含调用的函数,前端直接调用

  • Q4: 适配问题
    虽然H5的页面与PC的Web页面相比简单了不少,但让我们头痛的事情是要想尽办法让页面能适配众多不同的终端设备,关于适配,这里也简单的列举几个

    • 项目采用postcss-pxtorem会将样式文件中的px单位直接转换成rem,可以愉快的在页面里面直接写px

    • 手淘采用的flexible,会将750设计稿分成100份,而每一份被称为一个单位a。同时1rem单位被认定为10a。计算出

      1a   = 7.5px
      1rem = 75px 

      然后根据设计稿的元素尺寸,将原始px值除以rem基准值即可。

      如尺寸是176px * 176px,转换成为2.346667rem * 2.346667rem

      176 / 75 = 2.346667rem

      关于flexible 点我了解更多

    • flexible的进阶版,使用vw单位, 一图胜前言

      说下转换规则, 以750设计稿为例

      100vw = 750px
      
      1vw = 7.5px

      然后根据设计稿的元素尺寸,将原始px值除以vw基准值即可

      如尺寸是176px * 176px,转换成为23.46667vw * 23.46667vw

      176 / 7.5 = 23.466666666666665

      关于vw, 你可以猛戳下面链接,了解更多

      基础版

      进阶版

  • Q5: 状态管理 vuex

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以理解成一个中心化的仓库(store), 主要概念如下

    • state 状态 可以理解成vue里面的data数据,当这里的数据更改的时候,所有用到的组件都会更改

    • Getter 可以理解成过滤器

    • mutation 用来更改状态,vuex里面唯一更改状态的方法,必须是同步函数

    • Action 用来提交mutation, 可以异步操作

    • 什么时候需要使用Vuex呢?

      如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。
      引用 Redux 的作者 Dan Abramov 的话说就是:
      Flux 架构就像眼镜:您自会知道什么时候需要它。

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论