項目開發中的小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：就是不知道前端對數據處理起來的速度咋樣，數據量太大仍是老老實實去數據庫吧。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。