zepto的ajax方法现学现用及es6编译为es5

最新推荐文章于 2021-10-11 15:08:23 发布

UIEngineer

最新推荐文章于 2021-10-11 15:08:23 发布

阅读量326

点赞数

分类专栏： zepto.js

zepto.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.es6编译为es5
a).初始化项目

npm init -y

-y代表全部默认同意，就不用一次次按回车了。

b).命令执行完成后，会在项目根目录下产生package.json文件

{
  "name": "dreamDemo",
  "version": "1.0.0",
  "description": "",
  "main": "ajax.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

可以根据你自己的需要进行修改
2.全局安装Babel-cli

cnpm install -g babel-cli

3.本地安装babel-preset-es2015和babel-cli

npm install --save-dev babel-preset-es2015 babel-cli

4.安装完成后，package.json文件中多了如下代码

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }

5.在根目录下新建.babelrc文件，并写入如下代码：

{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}

6.在终端输入命令，这次es6成功转化为es5

babel src/index.js -o dist/index.js

*小技巧：简化转化命令
在vue中，可以使用npm run build直接利用webpack进行打包，在这里也希望利用这种方式完成转换。打开package.json文件，修改代码如下：

{
  "name": "dreamDemo",
  "version": "1.0.0",
  "description": "",
  "main": "ajax.js",
  "scripts": {
    "build": "babel src/ajax.js -o dist/ajax.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

在终端输入

npm run build

es6转换es5完成，注意json文件中不能有多余注释！！！
最终文件目录如下：
这里写图片描述

7.demo.html代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <script src="./zepto.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>



    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->



  </head>
  <body>

        <div id="app">  
    <ul>  
        <li v-for="(item,i) in items" v-bind:key="item.id">       
            <span class="index" :title="i + 1">{{(i + 1) > 9999 ? "..." : (i + 1)}}</span>  
            <span class="face">  
                    <img :src="item.author.avatar_url" alt="" :title="item.author.loginname" width="80" height="80" />  
            </span>  
            <span class="name" :title="item.title">{{item.title}}</span>  
       </li>

    </ul>  
</div>








   <script src="./dist/ajax.js"></script>








  </body>
</html>

ajax.js代码如下：

var v = new Vue({  
    el: '#app',  
    data:{  
        items:[],  
        scroller:null,  
        tip:{  
                page: 1,  
                limit: 20,  
                tab: 'all',  
                mdrender: true  
        }  
    },  
    methods:{  
        getData(){  
            let self = this;  
            $.get("https://cnodejs.org/api/v1/topics", this.tip, function (res) {  
                if (res && res.data) {  // 如果查到数据  
                console.log(res);
                self.items = res.data;  
          }  
        })  
        }  
    },  
    created:function() {  
        this.getData();  
        console.log("success");  
    },  
    mounted:function() {  

    }, 
})

UIEngineer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
zepto的ajax方法现学现用及es6编译为es5

1.es6编译为es5 a).初始化项目npm init -y-y代表全部默认同意，就不用一次次按回车了。b).命令执行完成后，会在项目根目录下产生package.json文件{ "name": "dreamDemo", "version": "1.0.0", "description": "", "main": "ajax.js", "scripts": {
复制链接

扫一扫

专栏目录