返回 导航

其他

hangge.com

Chrome插件 - 前端代码编辑插件Web Maker使用详解（代替CodePen、JSRun）

作者：hangge | 2019-12-04 08:22
    在之前的文章中我介绍了两个在线的前端代码编辑工具：CodePan（点击查看）、JSRun（点击查看）。使用它们我们可以很方便地进行测试页面编写、代码调试，而免去搭建相关环境的麻烦。
    但使用这些工具必须要连网，而连网加载这些应用时就总会有些延迟。下面介绍一款专门为前端开发者而制作的浏览器扩展插件：Web Maker。

一、基本介绍

1，什么是 Web Maker?

    Web Maker 是一款 Chrome 扩展插件，它可以将我们浏览器的选项卡（可选） 转换成 web 编译器，我们可以在其中编写 HTML、CSS 和 JavaScript，同时还可以实时预览页面效果。

2，功能特点

（1）速度极快，可离线工作
  • 作为一款 chrome 扩展插件，Web Maker 完全寄生在浏览器中。它没有涉及到网络需求（除非使用一个第三方的 JavaScript 和 CSS 库）。所以它初始启动迅速。并且对代码所做的每次变动都能在预览中即时自动刷新。
  • 我们还可以选择保存或者加载编辑好的项目以便以后再次编辑，它们会被保存在浏览器的本地存储中。

（2）预处理器支持
  • Web Maker 为我们提供了 HTML、CSS 以及 JavaScript 三种语言中所有最常用的预处理器，包括 Markdown、Jade、SCSS、Less、JSX 以及 TypeScript。
  • 如果需要在项目中使用外部的 JavaScript 或 CSS 库 （如 jQuery 或 Bootstrap），只需简单点击一下“Add Library”按钮，从可用列表中，从中选择使用即可。

（3）预览区域截图捕获功能
  • Chrome 扩展的 API 赋予了 Web Maker 强大的能力去做那些普通的 web 应用难以实现的功能。比如说截图捕获功能，只需单击一下“Take Screenshot”按钮即可随时得到预览区域的截图。

（4）可另存为 HTML 或在 CodePen 中打开
  • 如果想在其他地方使用 Web Maker 编辑的项目，只需点击“Save as HTML file”选项即可将项目中的 HTML、CSS 和 JavaScript 代码嵌入到一个 HTML 文件中。
  • 我们也可以点击“Open on CodePen”按钮在 CodePen 中打开我们的项目。

3，安装配置

直接在 Chrome Web Store 上搜索安装即可（点击跳转）：

二、样例1：JQuery + Font Awesome

1，最终效果

点击按钮可以随机改变右侧文字图标的颜色。

2，实现过程

（1）点击右上角的“Add library”按钮开始添加第三方库。

（2）点击弹出页下拉框，选择添加 jQuery。

（3）接着再次点击下拉框，选择添加 FontAwesome 5：

（4）配置完毕后回到主界面，在 HTML 栏目中添加如下代码： 
<button id="changeColor">随机颜色</button>
<i id="fa1" class="fa fa-camera-retro fa-3x"></i>

（5）在 JS 栏目中添加如下代码，右侧窗口即可实时显示出最终效果： 
$(document).ready(function(){
  // 随机颜色按钮点击
  $("#changeColor").click(function(){
    var r = Math.floor(Math.random()*256);
			var g = Math.floor(Math.random()*256);
			var b = Math.floor(Math.random()*256);
			var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
      $("#fa1").css("color", color);
  });
});

三、样例2：Vue.js + Element U

1，最终效果

通过上方输入框可以实时筛选下方表格的数据。点击重置按钮则清空筛选条件。

2，实现过程

（1）由于 Web Maker 已经内置了 Vue 模版，我们新建时直接选择 Vue 项目即可。

（2）对于其它没有列出来的库，比如 Element UI。我们则通过手动指定 js 和 css 的 url 地址来引入：
https://unpkg.com/element-ui/lib/index.js
https://unpkg.com/element-ui/lib/theme-chalk/index.css

（3）配置完毕后回到主界面，在 HTML 栏目中添加如下代码： 
<div id="app">
  <div class="search-wrapper">
      <el-input id="searchInput" placeholder="根据姓名筛选..."  v-model="filter"></el-input>
      <el-button type="primary" @click="reset">重置</el-button>
  </div> 
  <el-table
      :data="getTableData"
      :border="true"
      :stripe="true"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
  </el-table>
</div>

（4）在 CSS 栏目中添加如下代码： 
.search-wrapper {
  margin-bottom: 10px;
  display: flex;
}

.search-wrapper .el-input {
  flex:1;
  margin-right:10px;
}

（5）在 JS 栏目中添加如下代码，右侧窗口即可实时显示出最终效果： 
new Vue({
    el: '#app',
    data() {
        return {
            filter: '',
            tableData: [{
                date: '2016-05-02',
                name: 'hangge',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '李小龙',
                address: '上海市普陀区金沙江路 1519 弄'
            }]
        }
    },
    computed: {
        getTableData() {
            var tableData = this.tableData.filter((item) => {
                return item.name.toLowerCase().includes(this.filter.toLowerCase());
            });
            return tableData;
        }
    },
    methods: {
        reset() {
            this.filter = "";
        }
    },
    mounted: function () {
    }
})
评论

全部评论（0）

回到顶部