各种稀奇古怪的思路或者高阶用法

功能类

离线网站：应用程序缓存

网站可以离线访问：一般用于内容不经常改，但是需要在没网络的情况下浏览的网站；

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问

在文档声明属性

<!-- 如需启用应用程序缓存，请在文档的 `<html>` 标签中包含 manifest 属性 -->
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

建立manifest文件,在服务器配置

manifest 文件的建议的文件扩展名是：”.appcache”; 正确的 MIME-type，即 “text/cache-manifest”

demo.appcache
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
*

FALLBACK:
/html/ /offline.html

CACHE MANIFEST：被缓存的文件； NETWORK: 永远不被缓存的文件； FALLBACK: 如果没网所使用的替代文件；
**注意：当manifest文件被更改的时候，应用的缓存也会被更改，如需要更新用户的缓存可以更改manifest文件的注释日期 **

控制台防窥：前端反调试

让其他非技术人员无法调试网站及拉取网站代码；通过打开控制台的读取时间和当前的事件不一致然后重复执行的思路

**无限debugger反调试 **

((function() {
    var callbacks = [],
        timeLimit = 50,
        open = false;
    setInterval(loop, 1);
    return {
        addListener: function(fn) {
            callbacks.push(fn);
        },
        cancleListenr: function(fn) {
            callbacks = callbacks.filter(function(v) {
                return v !== fn;
            });
        }
    }
    function loop() {
        var startTime = new Date();
        debugger;
        if (new Date() - startTime > timeLimit) {
            if (!open) {
                callbacks.forEach(function(fn) {
                    fn.call(null);
                });
            }
            open = true;
            window.stop();
            window.location.reload();
        } else {
            open = false;
        }
    }
})()).addListener(function() {
    window.location.reload();
});

为防止 debugger 被替换，可以通过字符串拼接，然后用eval 执行

eval(`((function(){var callbacks=[],timeLimit=50,open=false;setInterval(loop,1);return{addListener:function(fn){callbacks.push(fn);},cancleListenr:function(fn){callbacks=callbacks.filter(function(v){returnv!==fn;})}};function loop(){var startTime=new Date();debugger;if(new Date()-startTime>timeLimit){if(!open){callbacks.forEach(function(fn){fn.call(null);});}open=true;window.stop();window.location.reload()}else{open = false}}})()).addListener(function(){window.location.reload()})`)

控制台输出

控制台输出颜色样式：

%s       占位符
%d 或 %i    整数
%f       浮点数
%o%O     object对象
%c       css样式

var version = `1.3.0`
console.log(
  `%c hello uniapp %c v${version} `,
  'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
  'background:#007aff ;padding: 1px; border-radius: 0 3px 3px 0;  color: #fff; font-weight: bold;'
)

Vue组件封装：组件设置

通过 v-modal 对组件进行控制； v-modal 相当于 v-bind:value 和 @input 的结合；


export default {
  props: ["title", "value"],
  model: {
    prop: "value",
    event: "change"
  },
  ...
}