zoukankan      html  css  js  c++  java
  • 前端开发四

    7、闭包问题

    闭包:函数能被外部调用到,则该作用连上的所有变量都会被保存下来。

    作用:①可以读取函数内部的变量;②相当于划出了一块私有作用域,避免数据污染;③让变量始终保存在内存中

    使用全局变量被认为是不好的习惯,而且容易造成错误并且维护成本较高,所以js可以采用闭包的方式读取函数的内部变量。但是如果大量使用闭包就会造成过多的变量始终保存在内存中,会造成内存泄漏。

    一个简单的闭包例子:

    function f1(){
      var n=999;
      function f2(){
        alert(n);
      }
      return f2;
    }
    var result=f1();
    result(); // 999

    9、模块化编程

    ①AMD(异步模块定义) requirejs

    defined(id,deps,factory)
    require([dependency],function(){})

    异步加载,浏览器不会失去响应

    它指定的回调函数,只有前面的模块都加载完成后,才会运行,解决了依赖性问题

    ②CMD(通用模块定义) seajs

    模块定义方式和模块加载时机处理不同

    defined(id,deps,factory)
    function(require,exports,module)
    module.exports = ______;

    ③区别:AMD依赖前置,在定义模块的时候就要声明其依赖的模块;CMD就近依赖,只有在用到哪个模块的时候再去require;

    11、少用float?

    ①使用float可能会造成兼容性问题,比如在ie6以下,float元素margin加倍问题;②使用float之后会影响左右元素,有可能造成错位问题(float之后都要clear)

    解决:可用display、position转化

    ①无序链接(ul、li),设定li标签属性:display:inline

    ②div左右结构,比如在右侧要放一个more(更多)来显示更多信息的时候用到了float:right,可以用定位来做。给包裹more的div设定position:relative,然后more这个标签right:0即可。结构更为清晰一点。

    18、什么是MVVM框架?

    MVVM是Model-View-ViewModel的简写。

    MVVM 是 Web 前端一种非常流行的开发模式,利用 MVVM 可以使我们的代码更专注于处理业务逻辑而不是去关心 DOM 操作。目前著名的 MVVM 框架有 vue, avalon, angular 等,这些框架各有千秋,但是实现的思想大致上是相同的:数据绑定 + 视图刷新。跟MVC一样,主要目的是分离视图(View)和模型(Model)。View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。

    在MVVM中,数据是核心,由于VIewModel与View之间的双向绑定,操作了ViewModel中的数据(当然只能是监控属性),就会同步到DOM,我们透过DOM事件监控用户对DOM的改动,也会同步到ViewModel。

    <div id="mobile-list"> 
      <h1 v-text="title"></h1> 
      <ul> 
        <li v-for="item in brands"> 
          <b v-text="item.name"></b> 
          <span v-show="showRank">Rank: {{item.rank}}</span> 
        </li> 
      </ul>
    </div>
    var element = document.querySelector('#mobile-list');
    var vm = new MVVM(element, { 
      'title' : 'Mobile List',
       'showRank': true,
       'brands' : [ 
        {'name': 'Apple', 'rank': 1}, 
        {'name': 'Galaxy', 'rank': 2},
        {'name': 'OPPO', 'rank': 3} 
      ]
    });
    vm.set('title', 'Top 3 Mobile Rank List'); // => <h1>Top 3 Mobile Rank List</h1>

    以上这段如此简洁的代码,就是MVVM框架的一个简单的实现效果。在HTML代码里面,可能会嵌入很多自定义的属性(标记),以此来实现数据的绑定,而且还可以进行一些简单的逻辑处理,比如if和循环等。

    react应该也算是MVVM框架,但是与传统的MVVN框架不同的是,react默认数据绑定方式是单向绑定,而vue及angular都是双向绑定;react使用虚拟DOM配合JSX,而vue及angular直接将数据通过属性绑定在真实DOM上的。

    MVVM框架的优点:

    1、方便测试

    在MVC下,Controller基本是无法测试的,里面混杂了个各种逻辑,而且分散在不同的地方。有了MVVM我们就可以测试里面的viewModel,来验证我们的处理结果对不对。

    2、便于代码的移植

    可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。比如iOS里面有iPhone版本和iPad版本,除了交互展示不一样外,业务逻辑的model是一致的。这样,我们就可以以很小的代价去开发另一个app。

    3、独立开发

    开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码。

    20、使用原生js实现ajax

    创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下:

    var xmlHttpRequest;
    function createXmlHttpRequest(){
      if(window.XMLHttpRequest)//非IE
        xmlHttpRequest = new XMLHttpRequest();
      else if(window.ActiveObject)//IE6+
        xmlHttpRequest = new ActiveObject("Msxml2.XMLHTTP");
      else//IE6-
        xmlHttpRequest = new ActiveObject("Microsoft.XMLHTTP");
    }

    提交请求的方法:

    open(method,url);//分别为提交的方法(GET或者POST)和提交的url
    send(content);
    onreadystatechange(){
      if(xmlHttpRequest.readyState == 4){
        if(xmlHttpRequest.state == 200){
          //请求成功
        }  
      }else{
        //请求失败
      }
    }

    1、前端安全方面有没有了解?XSS和CSRF如何攻防?

    XSS(Cross Site Scripting)是跨站脚本攻击,为了区分CSS,所以缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的。

    在网页的一些公共区域(例如,建议提交表单或消息公共板的输入表单)输入一些文本,这些文本被其它用户看到,但这些文本不仅仅是他们要输入的文本,同时还包括一些可以在客户端执行的脚本。如:

    "/> <script>alert(document.cookie);</script><!--

    在文本框中输入以上代码,然后点击提交,就会把用户的cookie弹出来。

    XSS漏洞修复

    1.将重要的cookies标记为HTTP ONLY。

    2.只允许用户输入我们期望的数据。如年龄框只能输入数字。

    3.对数据进行HTTP Encode处理。

    4.过滤或者移除特殊的HTML标签。

    5.过滤JS事件的标签。

    CSRF(Cross-site request forgery)是跨站请求伪造。XSS利用站点内的信任用户,而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站。其实就是攻击者盗用了你的身份,以你的名义发送恶意请求。

    CSRF攻击的思想

    用户浏览并登陆信任网站A;通过验证,在用户处产生X的cookie;用户在没有登出X的时候,浏览危险网站B;B要求访问第三方网站A,发出一个请求;根据这个请求,浏览器使用刚才产生的cookie直接访问A。

    一个简单的实例

    银行网站A,它以GET请求来完成银行转账的操作,如:http://www.mybank.com/Transfer.php?toBankId=11&money=1000

    危险网站B,它里面有一段HTML的代码如下:

    <img src=http://www.mybank.com/Transfer.php?toBankId=11&money=1000>

    首先,你登录了银行网站A,然后访问危险网站B,噢,这时你会发现你的银行账户少了1000块......

    CSRF的防御

    1.在表单里增加Hash值,以认证这确实是用户发送的请求,然后在服务器端进行Hash值验证。

    2.验证码:每次的用户提交都需要用户在表单中填写一个图片上的随机字符串。

    20、是否了解什么前沿的技术、或者你自己有什么技术特长、在哪方便有优势?

  • 相关阅读:
    java对redis的基本操作(一)
    Android RelativeLayout 属性
    查看jdk的位数
    Java简单文件传输 socket简单文件传输示例
    Java使用socket实现两人聊天对话
    Java观察者设计模式
    Java装饰设计模式的例子
    php邮件发送 phpmailer
    php smarty 缓存和配置文件的基本使用方法
    php smarty insert用法
  • 原文地址:https://www.cnblogs.com/ahu666/p/6686821.html
Copyright © 2011-2022 走看看