项目开发中的小tips

最新推荐文章于 2025-08-17 17:24:42 发布

转载最新推荐文章于 2025-08-17 17:24:42 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2248183/blog/719253

文章标签：

#json #数据库 #java

2019独角兽企业重金招聘Python工程师标准>>>

一、泛型通配符：“？”

java泛型中，当某种类型不确定时，可以使用未知类型？来代替，在Java集合框架中，对于参数值是未知类型的容器类，只能读取其中元素，不能向其中添加元素，因为，其类型是未知，所以编译器无法识别添加元素的类型和容器的类型是否兼容，唯一的例外是NULL。

二、setTimeout与clearTimeout

在HTML DOM方法提供了setTimeout与clearTimeout来进行定时任务和取消任务。总所周知，在使用setTimeout(fucntion(){},timeNumber)后，需要调用clearTimeout()时，需要传入setTimeout()对应的返回值。改返回值是一个int数值，用以标示每一次调用是哪个setTimeout()。

function a(){console.log(111)}

pc = setTimeout(a,10000);
31
111
pc = setTimeout(a,10000);
32
pc = setTimeout(a,10000);
33
clearTimeout(32)
undefined
111

如图，在控制台定义了函数a，在clearTimeout()函数中传递对应的int值，便能终止定时任务。在每次刷新界面后，重置返回值，不可否认是一个很low却又快捷、轻便、有效的方法。

三、js函数的默认参数

在网上查了查资料，发现js没有类似于java函数的默认参数设置，但是js提供了一个arguments的变量，用以在函数中储存传进来的参数，因此可以通过判断进行默认参数值设置：

function wireLabelObject(key,display,value){
        var width = arguments[3] ? arguments[3] : '280px';
        var height = arguments[4] ? arguments[4] : '150px';
        var top = arguments[5] ? arguments[5] : 300;
        var left = arguments[6] ? arguments[6] : 100;
        var fontSize = arguments[7] ? arguments[7] : '20px';
        var obj = {
            'key':key,
            'display':display,
            'value':value,
            'width':width,
            'height':height,
            'top':top,
            'left':left,
            'fontSize':fontSize
        }
        return obj;
    }

四、mvvm

mvvm模式，即Model-View-ViewModel，代表一种前端数据绑定式的模式。由view<——>view model<——>model，通过view model实现view与model的数据绑定，从而减少代码量。在项目中使用的mvvm框架是vue.js，下例为依照vue.js文档写的样例:

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <input v-model="info" v-on:keyup.enter="add">
    <ul>
        <li v-for="p in infos">
            <span>{{p.text}}</span>
            <button v-on:click="remove($index)">X</button>
        </li>
    </ul>
</div>

<script>
    var vue = new Vue({
        el: '#app',
        data: {
            info:'',
            message:'输入信息',
            infos:[
                {text:'info 1'}
            ]
        },
        methods:{
            add: function(){
                this.infos.push({text:this.info.trim()});
                this.info = '';
            },
            remove: function(index){
                this.infos.splice(index,1);
            }
        }
    })
</script>
</body>
</html>

view层，即：

<div id="app">
    <p>{{message}}</p>
    <input v-model="info" v-on:keyup.enter="add">
    <ul>
        <li v-for="p in infos">
            <span>{{p.text}}</span>
            <button v-on:click="remove($index)">X</button>
        </li>
    </ul>
</div>

model层，即：

data: {
            info:'',
            message:'输入信息',
            infos:[
                {text:'info 1'}
            ]
        },

Vue对象则充当了view-model的角色。

参见vue.js文档http://cn.vuejs.org/guide/

五、taffy db

在有些网页上，由于频繁用到表里的数据，并且需要进行不同的查询，因此在页面内访问数据库的次数特别多，有个页面初始化居然需要近10次访问，造成加载时间长达5秒。而且在前台通过手写的查询有一定的局限性，因此搜了搜json的查询工具。虽然json查询的工具比较少，但是也有几个能够满足基本需要的。

1.jsonsql

通过类似于sql语言的查询语句来查询json中的数据。下面是两个官网上的示例：

1）jsonsql.query("select * from json.channel.items order by title desc",json);

2）jsonsql.query("select title,url from json.channel.items where (category=='javascript' || category=='vista') order by title,category asc limit 3",json);

由于jsonsql只支持简单的select语句，因此看起来发展状态与使用情况并不是太好，然而已经满足了项目开发的需要。

2.taffy db

比起jsonsql来说，taffy db似乎要高级许多，支持完整的crub操作，可以满足大部分的需要。

主要特点：

很小，只有10K左右
简单，JavaScript的语法
快速
易于集成到任何Web应用
兼容主流的Ajax库，例如：YUI, JQuery, Dojo, Prototype, EXT, etc
CRUD 接口 (Create, Read, Update, Delete)
排序
循环
高级查询

官网上给了一些简单的例子，可以入门。但是个人感觉jsonsql似乎看起来舒服一点，，，毕竟sql。。。。

创建数据库：

// Create DB and fill it with records
var friends = TAFFY([
	{"id":1,"gender":"M","first":"John","last":"Smith","city":"Seattle, WA","status":"Active"},
	{"id":2,"gender":"F","first":"Kelly","last":"Ruth","city":"Dallas, TX","status":"Active"},
	{"id":3,"gender":"M","first":"Jeff","last":"Stevenson","city":"Washington, D.C.","status":"Active"},
	{"id":4,"gender":"F","first":"Jennifer","last":"Gill","city":"Seattle, WA","status":"Active"}	
]);

查询：

// Find all the friends in Seattle
friends({city:"Seattle, WA"});

// Find John Smith, by ID
friends({id:1});

// Find John Smith, by Name
friends({first:"John",last:"Smith"});

修改：

// Move John Smith to Las Vegas
friends({first:"John",last:"Smith"}).update({city:"Las Vegas, NV:"});

// Remove Jennifer Gill as a friend
friends({id:4}).remove();

// insert a new friend
friends.insert({"id":5,"gender":"F","first":"Jennifer","last":"Gill","city":"Seattle, WA","status":"Active"});

ps：就是不知道前端对数据处理起来的速度咋样，数据量太大还是老老实实去数据库吧。

转载于:https://my.oschina.net/u/2248183/blog/719253