使用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