备用

最新推荐文章于 2024-04-01 08:11:12 发布

coralinelee

最新推荐文章于 2024-04-01 08:11:12 发布

阅读量716

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/coralinelee/article/details/51457563

版权

前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

跟蔡童鞋聊天，说了一些面试的心得，这里记下来给自己长个记性

先来一段题外话，发现有些童鞋还在用ie 8的浏览器，感觉也可以在自己的代码上加一点注释，不然兼容性问题又出现坑我一脸

1.css3

画圆

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;       //  moz属性针对mozilla firefox浏览器
    -webkit-border-radius: 50px;    // webkit内核的一些浏览器，例如chrome、safari   保留在这里对ie内核的影响很小啦
    border-radius: 50px;
}

画椭圆

#oval {
    width: 200px;
    height: 100px;
    background: red;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;            //100 代表水平半径，50 代表垂直半径
}

上三角

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;       //透明背景  不然就是个黑块了
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

下三角

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

诸如此类直接用个<div>可以试试看效果

2 .angular js 和 jquery 中的ajax请求

参看过一位仁兄的帖子，地址在这里http://blog.csdn.net/crazyxin1988/article/details/39643173

在jquery中，contenttype类型是application/x-www-form-urlencoded;

在angular中，contenttype类型是application/json;charset=UTF-8

jquery是javascript对象转换了字符串，传给后台。在SpringMVC中，就可以使用@RequestParam注解或者request.getParameter()方法获取参数。但是用angualr，后台需要编写一个接受的类有setter和getter方法，

使用angular的$http方法按照jquery中的方式发送ajax请求：

1.修改Content-Type为application/x-www-form-urlencoded; charset=UTF-8

2.请求参数的格式 key=value的格式，如果，多个，则使用&连接

var data = 'namelisi&id=4'
$http({

            method: 'POST',

            url: 'ajsave',

            data: data,  // pass in data as strings

            headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}  

        }).success(function (data) {
            console.log(data);
         });

我在.net的handler文件下不会有这样的问题，因为在. ashx文件里面可以根据request，解析到对应的参数，给后台的business层去处理。

public class CClass: IHttpHandler        //继承于接口
    {

        public void ProcessRequest(HttpContext context)            
        {
            string funcName = context.Request.Params["fun"];    //根据httpcontext里面的request来解析参数
            string Params = context.Request.Params["param"];
            string Response = string.Empty;
            //Log
            var dicLog = new Dictionary<string, string>();
            try
            {
                
                if (!string.IsNullOrEmpty(funcName))
                {
                    switch (funcName)
                    {
                        case "GetProvinceList":
                            Response = GetProvinceList();
                            break; 
                        case "GetCityListByProvince":
                            Response = GetCityListByProvince(Params);
                            break;
                     }
                }
                
            }
            catch (Exception ex)
            {
                Logger.Error("HotelRoomTypeAjaxRequest", ex, dicLog);
                Response = Newtonsoft.Json.JsonHelper.SerializeObject(new
                {
                    message = ex.ToString(),
                });
            }
            finally
            {
                Logger.Info("HotelRoomTypeAjaxResponse", Response, dicLog);
                context.Response.ContentType = "text/plain";
                context.Response.Write(Response);
            }
        }

3.关于sessionStorage、cookies、localStorage的区别

是否发送给服务器

sessionStorage和localStorage不会自动把数据发给服务器，仅保留在本地

cookie数据始终在同源的http请求中携带，会在浏览器和服务器之间来回传递

作用

cookie是标志用户身份，经过加密保存在本地

存储大小

cookie数据不超过4K

sessionStorage和 localStorage最大可以达到5M或者更大

有效期

cookie在窗口或浏览器关闭之后，在过期时间之前都有效

sessionStorage当前浏览器窗口关闭后自动删除

localStorage浏览器关闭后不丢失除非主动删除数据

function setCookie(name, value)//两个参数，一个是cookie的名字，一个是值 
{
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}

function getCookie(name)//取cookies函数 
{
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) return unescape(arr[2]); return null;
}

4.js继承

js中的继承方法

原型 prototype

function Person(name,age){  
        this.name=name;  
        this.age=age;  
    }  
    Person.prototype.sayHello=function(){  
        alert("使用原型得到Name："+this.name);  
    }

构造函数

function  Parent(name){  
        this.name=name;  
        this.sayParent=function(){  
            alert("Parent:"+this.name);  
        }  
    }  

    function  Child(name,age){  
        this.tempMethod=Parent;   //<span style="font-family: tahoma, arial, 宋体;">this.tempMethod</span>

        this.tempMethod(name);  
        this.age=age;  
        this.sayChild=function(){  
            alert("Child:"+this.name+"age:"+this.age);  
        }  
    }

js中call和apply都可以实现继承，唯一的一点参数不同，func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])。

call

function student(name,age){  
        Person.call(this,name,age);  
    }

apply

 function teacher(name,love){  
        Person.apply(this,[name,love]);  
        //Person.apply(this,arguments); //跟上句一样的效果，arguments  
    }

4.angular

service

angular js中的service就是单例模式的一个别名，这个单例对象会被传来传去，保证每次访问到的都是同一个实例。

把这个service传递给各种controller、directive、filter，就可以访问service中的方法和属性了。

通过scope来维护数据是一种很粗暴的方式，容易变脏或者崩溃，通过一种集中途径，更容易管理、保持代码模块化、

使用service的时候，需要在不同的域中共享数据的时候（angular 依赖注入系统）

controller

前端的MVC和服务器端的MVC有非常不同的controller，在angular中，controller不会处理request，值用来处理route。

controller纯粹地用来把service、依赖关系、其他对象串联到一起，然后通过scope把他们关联到view上，如果view里面要处理的复杂的业务逻辑，可以放到controller里面。

directive

应用中最复杂的部分。

可以当做一个元素属性来使用，下次需要使用的时候，可以直接DOM交互和修改。

May 24th

1.jquery里面on和bind的区别

on比bind多一个元素，selector用来指定元素

$(selector).bind(event,data,function,map)

$(selector).on(event,childSelector,data,function,map)

2.jquery的机制

http://developer.51cto.com/art/201009/228174.htm

jquery 插件的机制

1)jquery插件的种类

对象方法: 通过选择器获取到对象，将对象方法封装起来，在jQuery插在内核上，如parent()、appendTo()

全局函数: 独立加到jQuery命名空间下，如jQuery.ajax()、jQuery.trim()

选择器: 扩充一些自己的选择器

2) jquery插件的机制

利用 jQuery.extend() 主要用于后两种全局函数

jQuery.fn.extend() 主要用于对象对象方法

插件应该返回一个jQuery对象，保证插件的可链式操作

;(function($){ 
/*这里放插件代码，可以将$作为jQuery的别名*/ 
})(jQuery);

具体的例子可以参见http://www.jb51.net/article/29649.htm

3.常用的jquery的版本

4.ajax动态加载的菜单，按钮上的事件为什么会失效

目测答案其实很简单，就是绑定事件，在ajax加载这个动作之前，所以新生成的菜单，需要再绑定一次事件

5.angular js 和 jquery之间的区别

http://www.php100.com/html/dujia/2014/1226/8194.html

http://damoqiongqiu.iteye.com/blog/1926475 // 对比jQuery和AngularJS的不同思维模式

6.promise对象

promise对象是ES 2015中提出的，用来避免函数的多层嵌套，使用之后可以用练市调用方式组织代码，让代码更加直观。

在ng中创建promise对象，可以用内置的$q服务。

如下定义了一个服务：

myAppModule.factory('AjaxService', ['$http', '$q', function($http, $q) {
        var doRequest = function (requestType, sData) {
            var defer = $q.defer();
            $http({
                method: "POST",
                url: ajaxUrl,
                params: {
                    f: requestType,
                    sData: JSON.stringify(sData)
                },
                headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
            }).success(function(response) {
                defer.resolve(response);
            }).error(function(response) {
                defer.resolve(response);
            });

            return defer.promise;
        };

        return {
            Event: function(requestType, sData) {
                return doRequest(requestType, sData);
            }
        };

    }
]);

调用的时候（写在controller里面）：

$scope.btnSearch = function () {
        AjaxService.Event("GetBatchHotelBlackListByPage", searchEntity).then(function (respnose) {

            console.log(JSON.stringify(respnose));
            $scope.blackHotelList = respnose.data;

        });
    }

注意这里的promise是一个对象，是函数最后的返回值或者抛出的异常。

$q是angular js内置的服务，通过defer()创建一个defer对象

通过defer对象的promise属性，将对象转变为一个promise对象

通过defer方法创建的对象，这个对象对应的方法有：

resolve(value) 执行promise

reject(value) 拒绝promise

notify(value) 获取promise的执行状态，并通过函数来传递它

then(successFunc,errorFunc,notifyFunc) 无论promise成功或失败，会立刻异步调用then

catch(errorFunc)

finally(callback)
promise对象是贯穿整个执行链条的，前面的then()方法对后面的then()方法有影响。

具体的参见两篇帖子，https://segmentfault.com/a/1190000000684654 or http://www.cnblogs.com/sword-successful/p/4626797.html