使用Safe.js进行快速开发搜索引擎页面实践

时间 2019-11-13

标签使用 safe.js safe 进行快速开发搜索引擎页面实践栏目 JavaScript 繁體版

原文原文链接

这篇文章将会讲解如何使用safe.js快速开发一个web应用程序。

前言：

在这篇文章里面，我就简单制做一个相似于搜索引擎的页面javascript

【本文不会讲解safe.js每句代码的具体做用，若是想了解请点击此连接：https://gitee.com/skyogo/Safe/wikis/Safe.js】css

开始：

首先咱们先创建一个Demo.html的文件，里面写上基本结构，并用script标签引入safe.js的文件：（Safe.js Gitee连接：https://gitee.com/skyogo/Safe）html

<!DOCTYPE html>
<html>
    <head>
        <title>Safe.js Demo</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <script src="js/Safe.js"></script>
        <script>
            
        </script>
    </body>
</html>

而后咱们在<body>标签里面写上一个img标签，做为咱们搜索引擎的logo图片，这里我先使用百度的logo图片，而后将图片的高度设置为120px，id设置为logo：java

<img height="120px" id="logo" src="http://www.baidu.com/img/bd_logo1.png">

接着咱们要设置body标签的text-align属性，设置为居中。git

此时咱们就能够使用safe.js了，请在<script>里面写上以下代码：web

new safeInit({
    el: "body",
    css: {
        textAlign: "center"
    }
})

这时咱们打开浏览器，就能够看到样式已经出来了。浏览器

此时咱们在img标签下面写上两个<br>（为了美观......）搜索引擎

而后再写上一个input标签，id为text，其它什么值都不用设置。spa

而后咱们再在<script>里写一段safe.js代码：code

new safeInit({
    el: "#text",
    attr: {
        type: "text",
        placeHolder: "请输入内容："
    },
    css: {
        height: "45px",
        width: "580px",
        border: "1px solid gray",
        outline: "none",
        fontSize: "18px",
        padding: "10px",
        boxSizing: "border-box"
    }
})

而后再在input后面写上一对button标签，id为btn，里面写上“搜索”

而后咱们再在<script>里写一段safe.js代码：

new safeInit({
    el: "#btn",
    css: {
        height: "45px",
        width: "90px",
        background: "#38f",
        outline: "none",
        border: "none",
        color: "white",
        fontSize: "18px",
    }
})

而后咱们如今打开浏览器看下样式：

看，搜索框和按钮都出如今屏幕上了！

如今咱们看一下整体的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Safe.js Demo</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <img height="120px" id="logo" src="http://www.baidu.com/img/bd_logo1.png">
        <br>
        <br>
        <input id="text">
        <button id="btn">搜索</button>
        <script src="js/Safe.js"></script>
        <script>
            new safeInit({
                el: "body",
                css: {
                    textAlign: "center"
                }
            })
            new safeInit({
                el: "#text",
                attr: {
                    type: "text",
                    placeHolder: "请输入内容："
                },
                css: {
                    height: "45px",
                    width: "580px",
                    border: "1px solid gray",
                    outline: "none",
                    fontSize: "18px",
                    padding: "10px",
                    boxSizing: "border-box"
                }
            })
            new safeInit({
                el: "#btn",
                css: {
                    height: "45px",
                    width: "90px",
                    background: "#38f",
                    outline: "none",
                    border: "none",
                    color: "white",
                    fontSize: "18px",
                }
            })
        </script>
    </body>
</html>

而后如今咱们在el属性为#btn的safeInit方法里面再加入一个属性：click

如今这个el属性为#btn的safeInit方法是这样的：

new safeInit({
    el: "#btn",
    css: {
        height: "45px",
        width: "90px",
        background: "#38f",
        outline: "none",
        border: "none",
        color: "white",
        fontSize: "18px",
    },
    click: function(){
        alert("你输入的字符为："+document.getElementById("text").value);
    }
})

ok，如今咱们来运行一下Demo.html文件：

当点击btn时，会发现咱们已经成功了：

结尾：

是否是特别便捷？只用了短短50行代码，而且使用safe.js代码可读性会很是高！

最后放出所有代码和safe.js的下载地址：

<!DOCTYPE html>
<html>
    <head>
        <title>Safe.js Demo</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <img height="120px" id="logo" src="http://www.baidu.com/img/bd_logo1.png">
        <br>
        <br>
        <input id="text">
        <button id="btn">搜索</button>
        <script src="js/Safe.js"></script>
        <script>
            new safeInit({
                el: "body",
                css: {
                    textAlign: "center"
                }
            })
            new safeInit({
                el: "#text",
                attr: {
                    type: "text",
                    placeHolder: "请输入内容："
                },
                css: {
                    height: "45px",
                    width: "580px",
                    border: "1px solid gray",
                    outline: "none",
                    fontSize: "18px",
                    padding: "10px",
                    boxSizing: "border-box"
                }
            })
            new safeInit({
                el: "#btn",
                css: {
                    height: "45px",
                    width: "90px",
                    background: "#38f",
                    outline: "none",
                    border: "none",
                    color: "white",
                    fontSize: "18px",
                },
                click: function(){
                    alert("你输入的字符为："+document.getElementById("text").value);
                }
            })
        </script>
    </body>
</html>

Safe.js下载地址：

https://gitee.com/skyogo/Safe