项目开发中的小tips

时间 2019-11-11

标签项目开发 tips 繁體版

原文原文链接

1、泛型通配符：“？”

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

2、setTimeout与clearTimeout

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

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却又快捷、轻便、有效的方法。前端

3、js函数的默认参数

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

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;
    }

4、mvvm

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

<!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层，即：node

<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层，即：jquery

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

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

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

5、taffy db

在有些网页上，因为频繁用到表里的数据，而且须要进行不一样的查询，所以在页面内访问数据库的次数特别多，有个页面初始化竟然须要近10次访问，形成加载时间长达5秒。并且在前台经过手写的查询有必定的局限性，所以搜了搜json的查询工具。虽然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：就是不知道前端对数据处理起来的速度咋样，数据量太大仍是老老实实去数据库吧。