0.0.1-security • Published 3 years ago

hakunamatata v0.0.1-security

Weekly downloads
-
License
-
Repository
-
Last release
3 years ago

此处为示例文字

每天成长一点点，距离成功不会远。

操作Cookie 和 操作class （2016-03-28）

今天公司要求做一个旧网站提示框，规则是一浏览器12小时谈一次提示框，于是对于超级水的我就开始长途跋涉的‘旅程’

首先分析需求：

1、12小时

1.1 实现这个我首先想到的是Web Storage，但是localStorage我还不知道怎么给他设置时间让它失效。SO ,就默认选择了Cookie。 要操作Cookie的话，首先自己得封装几个方法：

function setCookie(name, value, seconds) { //设置cookie
    seconds = seconds || 0;
    var expires = "";
    if (seconds != 0) {
        var date = new Date();
        date.setTime(date.getTime() + (seconds * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    document.cookie = name + "=" + escape(value) + expires + "; path=/";
}

function getCookie(name) { //取得cookie
   var nameEQ = name + "=";
   var ca = document.cookie.split(';'); 
   for (var i = 0; i < ca.length; i++) {
       var c = ca[i];
       while (c.charAt(0) == ' ') {
           c = c.substring(1, c.length);
       }
       if (c.indexOf(nameEQ) == 0) {
           return unescape(c.substring(nameEQ.length, c.length));
       }
   }
   return false;
}

function clearCookie(name) { //清除cookie 
   setCookie(name, "", -1);
}

1.2 为了方便起见，还是全局封装下class的操作方法吧

   'use strict';

   function classReg(className) {
       return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
   }
   var hasClass, addClass, removeClass;

   if ('classList' in document.documentElement) {
       hasClass = function(elem, c) {
           return elem.classList.contains(c);
       };
       addClass = function(elem, c) {
           elem.classList.add(c);
       };
       removeClass = function(elem, c) {
           elem.classList.remove(c);
       };
   }
   else {
       hasClass = function(elem, c) {
           return classReg(c).test(elem.className);
       };
       addClass = function(elem, c) {
           if (!hasClass(elem, c)) {
               elem.className = elem.className + ' ' + c;
           }
       };
       removeClass = function(elem, c) {
           elem.className = elem.className.replace(classReg(c), ' ');
       };
   }

   function toggleClass(elem, c) {
       var fn = hasClass(elem, c) ? removeClass : addClass;
       fn(elem, c);
   }

   var classie = {
       // full names
       hasClass: hasClass,
       addClass: addClass,
       removeClass: removeClass,
       toggleClass: toggleClass,
       // short names
       has: hasClass,
       add: addClass,
       remove: removeClass,
       toggle: toggleClass
   };

   // transport
   if (typeof define === 'function' && define.amd) {
       // AMD
       define(classie);
   } else {
       // browser global
       window.classie = classie;
   }

2、弹一次

2.1 辅助工作已经做好，现在就开始造起来 首先看一下HTML

    <div class="md-modal md-effect-show" id="modal-popup"> //弹出框
       <div class="md-content">
           <div class="md-topbg">
               <button class="md-close">Close me!</button>
               <!--注意这里有个图片的路径-->
               <img src="images/pop_upbg.png" alt="">
               <p>视觉中国 — 中国领先的创意图片、编辑图片、视频音乐素材及视觉相关服务供应商</p>
           </div>
           <div class="md-conbody">
               <p>尊敬的用户：
                   <br> 视觉中国已经启用全新的版权交易平台&nbsp; <a href="http://www.vcg.com">http://www.vcg.com</a> 
                   <br> 您可以保留原账户信息进行登录和使用，新网站将为您提供更为丰富的内容和更加便捷的使用体验。
                   <br> 旧版网站目前已经停止更新，并将在适当的时间迁移至新网址。
               </p>
           </div>
           <div class="md-congoto">
               <a href="" class="md-gotonew">进入新网站</a>
           </div>
       </div>
   </div>
   <div class="md-overlay"></div> //灰的背景层
主要CSS<br />
.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 780px;
	max-width: 780px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.md-show {
	visibility: visible;
}
.md-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(0,0,0,0.4);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}
//动画
.md-effect-show.md-modal {
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}

.md-effect-show .md-content {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateX(-70deg);
	-moz-transform: rotateX(-70deg);
	-ms-transform: rotateX(-70deg);
	transform: rotateX(-70deg);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0;
}

.md-show.md-effect-show .md-content {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	-ms-transform: rotateX(0deg);
	transform: rotateX(0deg);
	opacity: 1;
}

2.2 JS 逻辑

function init() {

   var overlay = document.querySelector('.md-overlay'); //获取灰色背景层
   
   var modal = document.querySelector('#modal-popup'), //获取弹出框
       close = modal.querySelector('.md-close'); //获取右上角关闭按钮
   //
   function removeModal() {
       classie.remove(modal, 'md-show');
   }
   //
   function removeModalHandler() {
       removeModal(classie.has(modal, 'md-setperspective'));
   }
   //根据Cookie的Popupgotonew的值判断是否显示弹出框
   if ( getCookie("Popup_gotonew") != 1 ) {
       classie.add(modal, 'md-show');
       overlay.removeEventListener('click', removeModalHandler);
       overlay.addEventListener('click', removeModalHandler);
       setCookie("Popup_gotonew","1",43200);
   }
   //关闭按钮的功能
   close.addEventListener('click', function(ev) {
       ev.stopPropagation();
       removeModalHandler();
   });
}
//
init();

浅谈.querySelectorAll() (未完，待续)

返回一个静态的NodeList对象,这个对象将会包含调用querySelectorAll()方法的那个DOM对象的所有后代元素中匹配指定css选择器的元素集.

属性ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基础支持13.5 (1.9.1)8103.2 (525.3)

以前经常使用getElementsByTagName()、getElementsByName()、getElementById()时，感觉querySelectorAll()方便的多。 但是后再仔细查了下它的文档并经过测试，getElementsByTagName('a')在所有浏览器下都比querySelectorAll('a')快很多倍，有一个测试页面

Everyday-example

初学BackBone.js

BackBone.js 是由 Jeremy Ashkenas 2010年创建的一个轻量级的MVC javascript库，可用于创建 MVC 类应用程序。 是一个很灵活的MVC框架，可以与其它框架很好的协作。

BackBone :

  • 强制依赖于Underscore.js, 它是个实用型库。
  • 非强制依赖 jQuery 。
  • 根据模型的变更自动更新应用程序的 HTML ， 有助于代码维护。
  • 促进客户端模板使用，避免了在javascript中嵌入HTML代码。

backbone最适合的场景：需要用 JS 生成大量的HTML页面内容，并且用户跟页面有很多交互行为。

优点

1，前后端分离（前后端可以并行开发） 2，减轻服务器的压力（后端只需要吐数据，不用处理和渲染整个页面） 3，更好的用户体验（用户只是首次登录网站时需要等待多个JS文件，其他页面网络好的话几乎秒出） 4，前端的机会增加（挑战增加的同时价值也会更高，也会变得更重要）

缺点

1，SEO的问题 2，初次加载loading的问题（因为多个js模块在加载）

backbone 对象有5个重要的函数：(帮我们规范了编码以及代码结构,它提供的功能也已经满足我们的基本需求了, 需要更细致, 更复杂的功能, 我们只需要对其进行拓展即可。)

  • Model (模型)包含了”Controller”的逻辑，同时路由帮助我们管理应用的状态，但是它们都不是传统意义上的Controller。
  • Collection (同一 Model 数据的集合)是 Model 的集合, 可以把它俩理解为一个是数组, 一个是数组中的元素。
  • View (视图)渲染、处理。每个 View 对象都是有对应的 DOM 元素的。
  • Router (路由)声明需要监听的URL规则和Action【帮助我们管理应用的状态】。
  • History ()用于监听URL的变化，以及触发Action方法。

Model

Model 通过调用 Backbone.Model.extend 函数来编写我们的 Model 类：

var User = Backbone.Model.extend({
    defaults: {
        staff: false
    },
    initialize: function() {
    // 初始化操作
    }
});

Collection

Collection 类是同一 Model 数据的集合：

var Users = Backbone.Collection.extend({
    model: User
});

View

每个 View 对象都是有对应的 DOM 元素的, 我们在 extend 函数中设置 el 属性来使该 View 的对象 DOM 元素相关联:

var UserView = Backbone.View.extend({
    el: 'body',
    template: _.template('<div class="user-view"></div>'),
    initialize: function() {
        this.render();
    },
    render: function() {
        this.$el.html(this.template());
    }
});

new UserView();

设置 el 属性只是其中的一个方法, 我们还可以通过 setElement 函数来实现：

var UserView = Backbone.View.extend({
    template: _.template(''),
    initialize: function() {
        this.setElement('<div class="user-view">');
        this.render();
    },
    render: function() {
        this.$el.html(this.template && this.template());
    }
});

$('body').html(new UserView().$el);

Router

声明需要监听的URL规则和Action。

var UserRouter = Backbone.Router.extend({
    routes: {
        'help': function() {
        ...
    },
    'search/:query': 'search'
    }
    search: function(query) {
        ...
    }
});

Underscore入门

Underscore 是一个javascript的工具库，它提供了一套函数式编程的实用功能。

  • 包含100多个独立的函数，和jquery相辅相成。
  • Collection、Arrays、Functions、Objects、Utility。

Collection

(回家，待续......)

@infinitebrahmanuniverse/nolb-hak@everything-registry/sub-chunk-1821
0.0.1-security

3 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago