文档章节

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

Skyogo
 Skyogo
发布于 05/15 16:20
字数 911
阅读 771
收藏 6

这篇文章将会讲解如何使用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

Skyogo

粉丝 24
博文 10
码字总数 8204
作品 12
程序员
加载中

评论(7)

赫兹
赫兹
话说这种风格有点类似 flutter:wink::wink:
Skyogo
Skyogo
QQ群号647518988,欢迎加入
Skyogo
Skyogo

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

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

引用来自“Skyogo”的评论

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

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

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

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

有这个可能,但是我们是为了快速开发而做的插件,并且努力把性能提升至顶级!如果您要做大型项目,完全可以不用插件的这些功能,每个插件都会有相对应的影响一些性能,多写点代码就多写点,对吧?
头号大宝贝
头号大宝贝

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

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

引用来自“Skyogo”的评论

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

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

Skyogo
Skyogo

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

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

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

是css不好用?还是$.attr不好使?
快速开发
头号大宝贝
头号大宝贝
是css不好用?还是$.attr不好使?
Safe.js 2.2.0 发布,增加class和name属性!比vue快8倍!

到了520这天,许多单身的程序员都去表白了,而我们的Safe.js 2.2.0版本也发布了!就是为了给众多单身小伙伴们一点鼓舞的信(xia)心(che)! ok,那么我们来看一下这次safejs的更新又更新了...

Skyogo
05/20
0
0
Safe.js 2.3.0 发布,改进部分属性90%性能!就是快!

5月22日到了,昨天和前天有没有小伙伴们去表白啊?那么我们的Safe.js 2.3.0版本也隆重出炉了! 那么我们来看一下这次safejs的更新又更新了哪些内容: 改进了一部分事件代码 增加了事件属性9...

Skyogo
05/22
0
0
响应式 JavaScript 开发框架 - Per.js

Per.js - 快速、简便的响应式JavaScript开发框架 他可以有效的帮助你减少需要编写的代码量 他完全是开源可扩展的 他的执行速度几乎是Vue.js的8~7分之一倍 他对于JavaScript新手及其友好,文档...

Skyogo
08/24
0
0
JavaScript的响应式快速开发框架 - Safe.js

Safe.js - JavaScript的响应式快速开发框架 Safe.js是一款能够有效提升开发效率和减少开发成本的框架! 他极其轻巧,未经gzip压缩之前仅有5kb 他极其快速,1ms的速度让构建大型项目成为可能 ...

Skyogo
05/13
0
0
Safe.js 3.0.0 发布,史上最大更新!增加6项功能!

昨天刚刚发布2.3.0版本,今天又发布了3.0.0版本,这是要和红薯版本帝死磕的节奏啊! 那么我们来看一下这次safejs的更新又更新了哪些内容: 增加safeIn方法 增加safeIn替身_方法 增加onchang...

Skyogo
05/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

shell学习之创建函数

函数是一个脚本代码块,你可以为其命名并在代码中任何位置重用。 在bash shell脚本中创建函数基本使用如下两种方式,第二种格式更接近于其他编程语言中定义函数的方式。 function name {com...

woshixin
33分钟前
1
0
Toolfk.com 程序员工具网上线

#前言 真不容易,用了一个月的业余时间才把这个网站(toolfk.com)做完。里面的内容主要是从github上找的开源码码,在线运行使用的是Docker运行。当然也是现成的。因为我现在对Docker还是不懂。...

hihubs
47分钟前
2
0
svn 常用操作命令及问题处理

1. 常用命令 1.1. 基本使用 检出 checkout ➜ svn co repo_url -m '检出代码'➜ svn co repo_url saved_dir_name -m '检出代码,并指定目录名' 加入版本控制 add # 添加指定文件➜ svn...

whoru
今天
3
0
记一次jquery validate的扩展(第一次失去焦点时触发校验)

最近在用jquery.validate 做前端表单校验,但是发现每次第一次失去焦点时,如果文本框内容为空,且该字段是必填项, 则不会触发校验,直到提交表单后,再次失去焦点时,才会触发,想对此进行...

foreach
今天
1
0
java生成UUID

UUID介绍: UUID(Universally Unique Identifier)全局唯一标识符,是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的。按照开放软件基金会(OSF)制定的标准计算,用到了以...

编程SHA
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部