整理書簽

先展示一下之前的書簽

image

• 身為假強迫癥.想把書簽整理成從短到長(真強迫癥會把 title 都改到非常簡潔)

開始吧

• 把 chrome 書簽導出為 html 格式

    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $("a").parent().parent().each(function(){
  
            var newArr = new Array(),
            title = $(this).prev().text(),
            arr = $(this).children('dt').children('a'),
                copy_arr = $.extend(true, {}, arr),  // 深拷貝一份.
                new_arr = arr_sort(copy_arr);
                set(arr,new_arr);
            });
  
        // 重新賦值
        function set(arr,newArr) {
            $(arr).each(function (i) {
                var new_link_html = newArr[i].title,
                new_link_icon = newArr[i].icon,
                new_link_href = newArr[i].href;
                new_link_date = newArr[i].date
                $(this).html(new_link_html).attr('href',new_link_href).attr('icon',new_link_icon).attr('add_date',new_link_date);
            });
        }
  
        // 排序 返回一個目錄下標簽的對象
        function arr_sort(arr) {
            arr.sort(function (a,b) {
                var a_title = $(a).html(),
                b_title = $(b).html();
                if (!a_title) {
                    a_title = 'no';
                }
                if (!b_title) {
                    b_title = 'no';
                }
  
                if (strlen(a_title)< strlen(b_title)) {
                    return -1;
                }else{
                    return 1;
                }   
            });
  
            var new_list = [];
            arr.each(function (i) {
                var newLink = new new_link($(this).html(),$(this).attr('icon'),$(this).attr('href'),$(this).attr('add_date'));
                new_list[i] = newLink;
            })
  
            return new_list;
        }
  
        // 返回字符串的長度
        function strlen(str){
            var len = 0;
            for (var i=0; i<str.length; i++) {
                var c = str.charCodeAt(i); 
                //單字節(jié)加1 
                if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) { 
                    len++; 
                } else { 
                    len+=2; 
                } 
            } 
            return len;
        }
  
        // 返回一個書簽的關(guān)鍵信息
        function new_link(title,icon,href,date) {
            this.title = title;
            this.icon = icon;
            this.href = href;
            this.date = date;
        }
    })
    </script> 
  

• 在 html 中粘入這串代碼

• 放在</body>結(jié)束后就可以

• 在瀏覽器打開就發(fā)現(xiàn)排好序了.保存該網(wǎng)頁,導入瀏覽器就可以

  image

說下思路吧

• 各書簽文件夾目錄不動.

• 只排序各目錄下的書簽.

• 從 a 標簽入手,找該標簽屬于哪個目錄
  

  image
  • 已經(jīng)提出過目錄文件夾不動,所以只是排序藍色<dl>標簽下的順序.
  • 一個目錄下的每個 a 標簽都被 <dt> 標簽包裹,但每個目錄下的標簽長度都是不變的,所以不需要處理 <dt>
  • 將一個目錄下 <dl> 下的 a 標簽都找出, 深拷貝一份,(否則排序會導致原有數(shù)組也排序,之后無法正常賦值)
  • 根據(jù)innerHTML排序(要注意一個英文字符占1,一個中文字符占2),生成包含一個書簽必要的4元素的數(shù)組
  • 將原有書簽數(shù)組和排序后的數(shù)組進行循環(huán)賦值.

坑: 一定要深拷貝一份.否則循環(huán)的時候,原有書簽,在內(nèi)存中已經(jīng)是排序后的,賦值沒有效果

寫了一個 Chrome 插件 webstore

• 從打開瀏覽器每一個小時,會發(fā)出水滴聲.提醒自己休息一下
• 將書簽排序
• 備用地址