随身笔记

作者： admin

  • 基于jquery自定义日历

    js jquery 日历 日期

    https://pan.baidu.com/s/1o8cGhg2
    https://sdeno.com/wp-content/uploads/2017/11/js_rili.rar

     

    dom遍历完成后开始插入数据：

    //遍历当月每一次
 for(var i=1;i<=new Date(year, mon, 0).getDate();i++){
    
   //标记出当日
   if( datatime.getFullYear()+'-'+(datatime.getMonth()+1)+'-'+datatime.getDate()==year+'-'+mon+'-'+i ) {
      $(dom).append('<div class="day current_day">' + i + '</div>')
   }else{
      $(dom).append('<div class="day">'+i+'</div>')
   }

   
   //等待所有.day的dom加完完成后开始用ajax插入数据
   if(i==new Date(year, mon, 0).getDate()){
         $.ajax({
             type:'GET',
             ...
         })
   }

}

  • Napa.js —— 微软开源的多线程

    node.js 多线程库

    我们都知道node.js是单线程，也就算服务器有多个cpu也只能使用到一个，虽然可以异步执行，可以把相对比较耗时的程序放到后面运行，但始终还是需要排队去执行。这样如果同时执行大量耗时的程序，那就难免不了会堵塞。

    其实问题很简单，我们如何去充分利用服务器的多核cpu，让node.js实现多线程。分别将耗时的程序平均分配到每个cpu上运行，这样就大大提高效果，至少要保住主线程不要挂。

    这里推荐一个微软开发的多线程模块：Napa.js

    本人在mac上运行成功，安装步骤：

     

    1，安装依赖

    npm install -g cmake-js

    更多系统依赖参看：https://github.com/Microsoft/napajs/wiki/build-napa.js

     

    2，安装napajs

    npm install napajs

    https://github.com/Microsoft/napajs

     

    案例：

    var napa = require('napajs');
var zone1 = napa.zone.create('zone1', { workers: 4 });

// Broadcast code to all 4 workers in 'zone1'.
zone1.broadcast('console.log("hello world");');

// Execute an anonymous function in any worker thread in 'zone1'.
zone1.execute(
    (text) => text, 
    ['hello napa'])
    .then((result) => {
        console.log(result.value);
    });

     

    执行的效果是：

  • 前端加密CryptoJS v3.1.2

    之前写过一篇文章是关于node.js加密在：《koa2笔记》里面就有说过使用sha256的加密使用方法。

    这些都是运行在node.js后台中的。

    这里谷歌提供了前端的加密crypto-js，地址为：

    https://code.google.com/archive/p/crypto-js/downloads

    api：https://github.com/sytelus/CryptoJS

    下载：CryptoJS v3.1.2

     

    案例：

    sha256

    <script src="CryptoJS v3.1.2/rollups/sha256.js"></script> 
<script src="CryptoJS v3.1.2/components/enc-base64.js"></script>
<script> 
 var hash = CryptoJS.SHA256("123456"); 
 alert(hash.toString(CryptoJS.enc.Base64));
</script>

     

    md5

    <script src="rollups/md5.js"></script>
<script src="components/enc-base64-min.js"></script>
<script>    
  var hash = CryptoJS.MD5("Message"); 
  alert(hash.toString(CryptoJS.enc.Base64));
</script>

     

    sha3

    <script src="rollups/sha3.js"></script>
<script>
 var hash = CryptoJS.SHA3("Message");
 alert(hash.toString()); //Same as hash.toString(CryptoJS.enc.Hex);
</script>

     

    在这里就有小伙伴问了，这功能有什么用。在这里目前知道有这两点用途：

    1，减轻后台的负担，把加密后的字符串直接发给后台插入到数据库。

    2，是否要记住密码，为前端业务逻辑做判断。

     

  • 让IE678兼容识别css3选择器——selectivizr-min.js

    js ie8 ie7 css3 选择器

     

    html:

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="css.css" />
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <!--[if (gte IE 6)&(lte IE 8)]>
    <script src="selectivizr-min.js"></script>
    <![endif]-->

</head>
<body>

<div id="xx">
    <p haha="tit">第一</p>
    <p haha="tit">第二</p>
    <p><input type="text" placeholder="sdf"></p>

</div>

</body>
</html>

     

    css：

    //css.css

*{margin: 0;padding: 0;}
p:nth-child(2){background: #ccc;color: red;}
p:last-child{background: yellow;color: red;}
p:last-child input:focus{background: green;color: #fff;}
p:first-child{background: pink;color: red;}

    经过测试也并没有像作者说的那样兼容这么多选择器，但是常用的还是兼容的。使用时基本和jquery配合使用不然不起作用。

    优势就是可以把样式写在样式文件中。

    selectivizr-1.0.2

    http://selectivizr.com/

     

  • js模糊搜索插件fuzzysort.js

    自动补全 模糊下拉搜索

    根据输入模糊的关键词 显示搜索结果：

    node安装：

    npm i fuzzysort
node
> require('fuzzysort').single('t', 'test')
{ score: -3, indexes: [0], target: 'test' }

     

    浏览器安装：

    <script src="https://rawgit.com/farzher/fuzzysort/master/fuzzysort.js"></script>
<script> console.log(fuzzysort.single('t', 'test')) </script>

     

    使用方法：

    fuzzysort.single(search, target)

    var result = fuzzysort.single('query', 'some string that contains my query.')
result.score // -59
result.indexes // [29, 30, 31, 32, 33]
result.target // some string that contains my query.
fuzzysort.highlight(result, '<b>', '</b>') // some string that contains my <b>query</b>.

fuzzysort.single('query', 'irrelevant string') // null

// exact match returns a score of 0. lower is worse
fuzzysort.single('query', 'query').score // 0

    fuzzysort.go(search, targets, options=null)

    fuzzysort.go('mr', ['Monitor.cpp', 'MeshRenderer.cpp'])
// [{score: -18, target: "MeshRenderer.cpp"}, {score: -6009, target: "Monitor.cpp"}]

    fuzzysort.goAsync(search, targets, options=null)

    let promise = fuzzysort.goAsync('mr', ['Monitor.cpp', 'MeshRenderer.cpp'])
promise.then(results => console.log(results))
if(invalidated) promise.cancel()
    Options
    fuzzysort.go(search, targets, {
  threshold: -Infinity, // Don't return matches worse than this (faster)
  limit: Infinity, // Don't return more results than this (faster)

  key: null, // For when targets are objects (see its example usage)
  keys: null, // For when targets are objects (see its example usage)
  scoreFn: null, // For use with `keys` (see its example usage)
})

    https://github.com/farzher/fuzzysort

    下载：fuzzysort-master