分类 Web前端 下的文章

查看Chrome已经授权的通知站点

chrome://settings/content/notifications

如何设置通知?

兼容性:IE系列不行,手机浏览器不行,其余都可以

代码:

<button id="notifyButton">Notification</button>

<script>
document.getElementById('notifyButton').onclick = function () {
      if(window.Notification && Notification.permission !== "denied") {
        Notification.requestPermission(function(status) {    // 请求权限
            if(status === 'granted') {
              
                // 弹出一个通知
                var n = new Notification('Title', {
                    body : 'I am a Notification',
                    icon : './images/test1.png'
                });
                // 两秒后关闭通知
                setTimeout(function() {
                    n.close();
                }, 5000);
            }
        });
    }
};
</script>

KnockoutJS 和 vuejs 都是前端JavaScript的MVVM模式的实现框架, 也有很多其他的实现;

很多人知道Angularjs(2),Reactjs,Vue.js,以及直接操作DOM的jQuery库, 但是没听说过 KnockoutJS;

其实部分c_sharp程序员可能看到过KnockoutJS, 且一些PHP程序员在magento商城项目上也用过KnockoutJS (注意: 当年没有vuejs,所以技术选型时用了KnockoutJS,且一路走到黑...现在是2019.11)

介绍magento

2005年,Varian公司的员工Roy Rubin和Yoav Kutner基于osCommerce项目做二次开发,

2007.08.31,定名为Magento,

2008.03.31,去掉osCommerce的底层代码,重构并发布第一个稳定的免费开源版本,

2009年,鲍勃·施瓦茨(Bob Schwartz)加入团队, 成为总裁, 然后努力让Magento在全球范围内取得成功;

2009.03,比osCommerce更受欢迎,几星期后发布第一个稳定的企业版本(付费),

2011.02,eBay收购Magento, 2011.06 eBay成为Magento唯一股东;

2015年,Permira(璞米资本,国际投资公司,以欧洲为基地的大型私募基金公司), 从eBay中收购magento,

2018.05.22,Adobe以16.8亿美元收购Magento,并减持竞争对手Shopify商城项目的股份(Shopify是不开源的很简洁清新的SaaS服务商,Magento是开源的能定制化开发的万金油, 盈利模式都是主题/插件的付费商城);

诞生

微软于2010.07.05发布KnockoutJS 1.0版本,兼容IE6, https://knockoutjs.com/downloads/index.html

而VueJS 0.6.0版本发布于2013.12.03, https://github.com/vuejs/vue/releases/tag/0.6.0

学习顺序

历史缘故, 我先接触VueJS, 因项目需要, 所以需要回首去学习KnockoutJS; 我们能发现KnockoutJS存在很多VueJS的雏形/影子, 学习起来... a piece of cake!

以下就是一些笔记(未完待续...)

MVVM模式

三部分:Model, View, ViewModel, 合并就是 MVVM;

mvvm.png

Model

页面View Html的来源数据,存储为变量data,或者组件component的props属性。常用AJAX/WebSocket向服务端请求得到。

ViewModel

抽象对象,封装了视图层View的:属性,计算属性,方法,事件绑定,html模板来源。

View

可见、互动的UI界面,展现形式是html标签和css样式, 文本内容来自于Model层, 用户操作会触发事件, ViewModel的事件回调函数会让Model发生变化, 同时刷新View的内容。

Knockout三大核心

属性监控与依赖追踪
声明式绑定
模板机制