使用Safe.js进行快速开发搜索引擎页面实践
博客专区 > Skyogo 的博客 > 博客详情
使用Safe.js进行快速开发搜索引擎页面实践
Skyogo 发表于2周前
使用Safe.js进行快速开发搜索引擎页面实践
  • 发表于 2周前
  • 阅读 522
  • 收藏 5
  • 点赞 0
  • 评论 6

移动开发云端新模式探索实践 >>>   

摘要: 这篇文章将会讲解如何使用safe.js快速开发一个web应用程序。在这篇文章里面,我就简单制作一个类似于搜索引擎的页面

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

前言:

在这篇文章里面,我就简单制作一个类似于搜索引擎的页面

【本文不会讲解safe.js每句代码的具体作用,如果想了解请点击此链接:https://gitee.com/skyogo/Safe/wikis/Safe.js

开始:

首先我们先建立一个Demo.html的文件,里面写上基本结构,并用script标签引入safe.js的文件:(Safe.js Gitee链接:https://gitee.com/skyogo/Safe

<!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:

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

接着我们要设置body标签的text-align属性,设置为居中。

此时我们就可以使用safe.js了,请在<script>里面写上如下代码:

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

这时我们打开浏览器,就可以看到样式已经出来了。

此时我们在img标签下面写上两个<br>(为了美观......)

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

然后我们再在<script>里写一段safe.js代码:

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

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
Skyogo
粉丝 7
博文 6
码字总数 3617
作品 9
评论 (6)
头号大宝贝
是css不好用?还是$.attr不好使?
Skyogo

引用来自“头号大宝贝”的评论

是css不好用?还是$.attr不好使?
快速开发
Skyogo

引用来自“头号大宝贝”的评论

是css不好用?还是$.attr不好使?
就像你,原版css不好用吗?原版设置属性不好使吗?那为什么还要用Jquery和vue?:relaxed:
头号大宝贝

引用来自“头号大宝贝”的评论

是css不好用?还是$.attr不好使?

引用来自“Skyogo”的评论

就像你,原版css不好用吗?原版设置属性不好使吗?那为什么还要用Jquery和vue?:relaxed:
好用,所以一直用原版的CSS。用jq涉及样式的也是为了控制样式(如输入框校验等,然而这个也有插件),而不是负责样式。用vue目的是组件化,非常明确的MVVM。

另外有个疑问,浏览器加载JS是线程阻塞的,而css则是和DOM并行的。用JS的方式来加载样式,页面难道不会闪屏?文章中的例子不算,内容太少,找个规模稍微大一点的单页测试一下?

Skyogo

引用来自“头号大宝贝”的评论

是css不好用?还是$.attr不好使?

引用来自“Skyogo”的评论

就像你,原版css不好用吗?原版设置属性不好使吗?那为什么还要用Jquery和vue?:relaxed:

引用来自“头号大宝贝”的评论

好用,所以一直用原版的CSS。用jq涉及样式的也是为了控制样式(如输入框校验等,然而这个也有插件),而不是负责样式。用vue目的是组件化,非常明确的MVVM。

另外有个疑问,浏览器加载JS是线程阻塞的,而css则是和DOM并行的。用JS的方式来加载样式,页面难道不会闪屏?文章中的例子不算,内容太少,找个规模稍微大一点的单页测试一下?

有这个可能,但是我们是为了快速开发而做的插件,并且努力把性能提升至顶级!如果您要做大型项目,完全可以不用插件的这些功能,每个插件都会有相对应的影响一些性能,多写点代码就多写点,对吧?
Skyogo
QQ群号647518988,欢迎加入
×
Skyogo
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: