macOS 中的 Rootless 机制

一、前因

苹果从 OS X El Capitan 10.11 系统开始使用了Rootless 机制,可以将该机制理解为一个更高等级的系统的内核保护措施,系统默认将会锁定 /system、/sbin、/usr 这三个目录。

二、后果

Rootless 机制虽然在一定程度上增加了系统的安全性,但作为一名开发人员会经常的操作 /usr 这个目录,这个时候你会发现你使用的任何命令都会提示没有操作权限,即使使用 root 权限也不行。

比如咱们在 /usr 目录下新建一个目录 myl,命令及提示如下:

    $ sudo mkdir mydir
    Password:
    mkdir: mydir: Operation not permitted

从上面的代码可以看出,即使我们使用了 sudo 授权,还是没操作权限。下面咱们来介绍怎样关闭和开启 Rootless 机制。

三、开关 Rootless

关闭和开启 Rootless 非常简单,方法如下:

重启 Mac,听到开机启动声后按下 Command+R,进入恢复模式,在上面的菜单实用工具中找到并打开 Terminal(如果顶部没出现菜单,请继续重启^_^)。输入如下命令:

  1. 关闭 Rootless
    $ csrutil disable
  1. 开启 Rootless
    $ csrutil enable
  1. 查看 Rootless 状态
    $ csrutil status

执行完命令后,重启电脑即可生效。为了系统的安全,建议大家平时都开启 Rootless,只有需要时才暂时关闭。

mysql_connect报告"No such file or directory"错误的解决方法

原文地址:http://www.cnblogs.com/AloneSword/p/4137730.html

2小时,就为了解决这个问题:

今天在MacBookPro上安装wordpress时,安装程序一直报错说连不上数据库。mysql客户端可以正常使用,可以确定不是服务器的问题。写了个php脚本单独执行mysql_connect(),发现错误信息居然是“No such file or directory"!这里应该没涉及到文件啊?

在网上搜了一下,找到了这篇文章:mysql_connect and No such file or directory。原来,我的apache/php是mac系统自带的,而mysql是通过MacPorts安装的,它的本地socket设置与默认的不一样,导致php无法找到mysql的socket文件。解决方法上面那篇文章也给了,这里简单翻译一下:

1、确定是mysql_connect()和mysql_pconnect()的问题,故障现象就是函数返回空,而mysql_error()返回"No such file or directory"。
2、写个phpinfo页面,找到mysql.default_socket、mysqli.default_socket、pdo_mysql.default_socket。
3、启动mysql,执行命令 STATUS; 记下UNIX socket的值。
4、如果2和3的值不一样,则打开php.ini(可以从phpinfo页面中找到php.ini的位置,默认是/private/etc/php.ini),将2中提到的三个配置项的值改成3的值。
重启apache。

Web前端面试题目汇总

Web前端面试题目汇总

原文地址

阅读目录

  • HTML/CSS部分
  • JavaScript部分
  • HTTP
  • 算法相关
  • Web安全
  • 前端性能
  • 设计模式
  • 正则表达式
  • 职业规划

以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中有一些未解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢迎指正,水平有限,望各位不吝指教。:)

HTML/CSS部分

  1. 什么是盒子模型?

在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

  1. 行内元素有哪些?块级元素有哪些?空(void)元素有那些?

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

  1. 如何用CSS实现垂直且水平居中?

一道经典的问题,实现方法有很多种,以下是其中一种实现:

HTML结构:


    <div class="wrapper">
        <div class="content"></div>
    </div>

CSS:


    .wrapper {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: #ddd;
    }
    .content{
        background-color:#6699FF;
        width:200px;
        height:200px;
        position: absolute;        //父元素需要相对定位
        top: 50%;
        left: 50%;
        margin-top:-100px ;   //二分之一的height,width
        margin-left: -100px;
    }

  1. 简述一下src与href的区别?

href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。
src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

  1. 什么是CSS Hack?

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
IE浏览器Hack一般又分为三种,条件Hack、属性级Hack、选择符Hack(详细参考CSS文档:css文档)。


    // 1、条件Hack
   <!--[if IE]>
      <style>
            .test{color:red;}
      </style>
   <![endif]-->
   // 2、属性Hack
    .test{
    color:#090\9; /* For IE8+ */
    *color:#f00;  /* For IE7 and earlier */
    _color:#ff0;  /* For IE6 and earlier */
    }
   // 3、选择符Hack
    * html .test{color:#090;}       /* For IE6 and earlier */
    * + html .test{color:#ff0;}     /* For IE7 */

  1. 简述同步和异步的区别?

同步是阻塞模式,异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

  1. px和em的区别?

px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

  1. 什么叫优雅降级和渐进增强?

渐进增强 progressive enhancement:
针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation:
一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
区别:
a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要
c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

  1. 各大主流浏览器的内核分别是什么?

IE: trident内核
Firefox:gecko内核
Safari:webkit内核
Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit,Google与Opera Software共同开发)

JavaScript部分

  1. 怎样添加、移除、移动、复制、创建和查找节点?

1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2)添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性

  1. 实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制?

/**
 * 对象克隆
 * 支持基本数据类型及对象
 * 递归方法
 */
function clone(obj) {
    var o;
    switch (typeof obj) {
        case "undefined":
            break;
        case "string":
            o = obj + "";
            break;
        case "number":
            o = obj - 0;
            break;
        case "boolean":
            o = obj;
            break;
        case "object": // object 分为两种情况 对象(Object)或数组(Array)
            if (obj === null) {
                o = null;
            } else {
                if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
                    o = [];
                    for (var i = 0; i < obj.length; i++) {
                        o.push(clone(obj[i]));
                    }
                } else {
                    o = {};
                    for (var k in obj) {
                        o[k] = clone(obj[k]);
                    }
                }
            }
            break;
        default:
            o = obj;
            break;
    }
    return o;
}

  1. 如何消除一个数组里面重复的元素?

// 方法一:
var arr1 =[1,2,2,2,3,3,3,4,5,6],
    arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
    if(arr2.indexOf(arr1[i]) < 0){
        arr2.push(arr1[i]);
    }
}
document.write(arr2); // 1,2,3,4,5,6

  1. 在Javascript中什么是伪数组?如何将伪数组转化为标准数组?

伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。


function log(){
      var args = Array.prototype.slice.call(arguments);  
//为了使用unshift数组方法,将argument转化为真正的数组
      args.unshift('(app)');
 
      console.log.apply(console, args);
};

  1. Javascript中callee和caller的作用?

caller是返回一个对函数的引用,该函数调用了当前函数;
callee是返回正在被执行的function函数,也就是所指定的function对象的正文。

  1. 请描述一下cookies,sessionStorage和localStorage的区别?

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。

  1. 统计字符串中字母个数或统计最多字母数?

var str = "aaaabbbccccddfgh";
var obj  = {};
for(var i=0;i<str.length;i++){
    var v = str.charAt(i);
    if(obj[v] && obj[v].value == v){
        obj[v].count = ++ obj[v].count;
    }else{
        obj[v] = {};
        obj[v].count = 1;
        obj[v].value = v;
    }
}
for(key in obj){
    document.write(obj[key].value +'='+obj[key].count+'&nbsp;'); // a=4  b=3  c=4  d=2  f=1  g=1  h=1 
}

  1. jQuery的事件委托方法on、live、delegate之间有什么区别?

  2. 如何理解闭包?

  3. 跨域请求资源的方法有哪些?

  4. 谈谈垃圾回收机制方式及内存管理?

  5. 开发过程中遇到的内存泄露情况,如何解决的?

  6. 想实现一个对页面某个节点的拖曳?如何做?(使用原生JS)。

HTTP

  1. 一次完整的HTTP事务是怎样的一个过程?

基本流程:
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求,浏览器得到html代码
e. 浏览器解析html代码,并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户

  1. HTTP的状态码有哪些?

  2. HTTPS是如何实现加密?

算法相关

  1. 手写数组快速排序。

关于快排算法的详细说明,可以参考阮一峰老师的文章快速排序
"快速排序"的思想很简单,整个排序过程只需要三步:
(1)在数据集之中,选择一个元素作为"基准"(pivot)。
(2)所有小于"基准"的元素,都移到"基准"的左边;所有大于"基准"的元素,都移到"基准"的右边。
(3)对"基准"左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止。

参考代码:


 var quickSort = function(arr) {
  if (arr.length <= 1) { return arr; }
  var pivotIndex = Math.floor(arr.length / 2);
  var pivot = arr.splice(pivotIndex, 1)[0];
  var left = [];
  var right = [];
  for (var i = 0; i < arr.length; i++){
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  return quickSort(left).concat([pivot], quickSort(right));
 };

  1. JavaScript实现二分法查找

二分法查找,也称折半查找,是一种在有序数组中查找特定元素的搜索算法。查找过程可以分为以下步骤:
(1)首先,从有序数组的中间的元素开始搜索,如果该元素正好是目标元素(即要查找的元素),则搜索过程结束,否则进行下一步。
(2)如果目标元素大于或者小于中间元素,则在数组大于或小于中间元素的那一半区域查找,然后重复第一步的操作。
(3)如果某一步数组为空,则表示找不到目标元素。

参考代码:


    //非递归算法
    function binary_search(arr, key) {
        var low = 0,
            high = arr.length - 1;
        while(low <= high){
            var mid = parseInt((high + low) / 2);
            if(key == arr[mid]){
                return  mid;
            }else if(key > arr[mid]){
                low = mid + 1;
            }else if(key < arr[mid]){
                high = mid -1;
            }else{
                return -1;
            }
        }
    };
    var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
    var result = binary_search(arr,10);
    alert(result); // 9 返回目标元素的索引值


    //递归算法
    function binary_search(arr,low, high, key) {
        if (low > high){
            return -1;
        }
        var mid = parseInt((high + low) / 2);
        if(arr[mid] == key){
            return mid;
        }else if (arr[mid] > key){
            high = mid - 1;
            return binary_search(arr, low, high, key);
        }else if (arr[mid] < key){
            low = mid + 1;
            return binary_search(arr, low, high, key);
        }
    };
    var arr = [1,2,3,4,5,6,7,8,9,10,11,23,44,86];
    var result = binary_search(arr, 0, 13, 10);
    alert(result); // 9 返回目标元素的索引值

Web安全

  1. 你所了解到的Web攻击技术?

(1)XSS(Cross-Site Scripting,跨站脚本攻击):指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
(2)SQL注入攻击
(3)CSRF(Cross-Site Request Forgeries,跨站点请求伪造):指攻击者通过设置好的陷阱,强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

前端性能

  1. 如何优化图像、图像格式的区别?

  2. 浏览器是如何渲染页面的?

设计模式

  1. 对MVC、MVVM的理解?

正则表达式

  1. 写一个function,清除字符串前后的空格。(兼容所有浏览器)

function trim(str) {
    if (str && typeof str === "string") {
        return str.replace(/(^\s*)|(\s*)$/g,""); //去除前后空白符
    }
}

  1. 使用正则表达式验证邮箱格式

    var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
    var email = "example@qq.com";
    console.log(reg.test(email));  // true

职业规划

  1. 对前端工程师这个职位你是怎么样理解的?

a. 前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好
b. 参与项目,快速高质量完成实现效果图,精确到1px;
c. 与团队成员,UI设计,产品经理的沟通;
d. 做好的页面结构,页面重构和用户体验;
e. 处理hack,兼容、写出优美的代码格式;
f. 针对服务器的优化、拥抱最新前端技术。

JavaScript的三种基本包装类型

  1. Boolean
  2. Number
  3. String
  • 基本包装类型是特殊的引用类型。
  • 普通引用类型与基本包装类型的主要区别就是对象的生存期。
  • 可以显式地调用Boolean、Number、String来创建基本包装类型的对象。
  • 对基本包装类型的实例调用typeof会返回“object”。
  • 所有基本包装类型的对象都会被转换为布尔值true(在布尔表达式求值中)。
  • 基本包装类型提供了操作相应值的便捷方法。

JavaScript中对象的属性

ECMAScript中的对象有两种属性:数据属性和访问属性。

一、属性的类型

  1. 数据属性

数据属性有四个描述其行为的特性:

  • [[Configurable]]

表示能否通过delete删除从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。直接在对象上定义的属性,它们的这个特性默认值为true。

  • [[Enumerable]]

表示能否通过for-in循环返回属性。直接在对象上定义的属性,它们的这个特性默认值为true。

  • [[Writable]]

表示能否修改属性的值。直接在对象上定义的属性,它们的这个特性默认值为true。

  • [[Value]]

包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候,把新值保存在这个位置。这个特性的默认值为undefined。

ECMAScript5提供了Object.defineProperty()方法用来设置对象的属性。这个方法接收三个参数:属性所在的对象、属性的名字和一个描述符对象。其中,描述符对象的属性必须是:configurable、enumerable、writable、value。

在调用Object.defineProperty()方法时,如果不指定,configurable、enumerable、writable特性的默认值都是false。

形如:

    
    Object.defineProperty(object, "attribute", {
        configurable: true,
        enumerable: true,
        writable: true,
        value: "value"
    });
    

二、访问器属性(计算属性)

  • 访问器属性不包含数据值
  • 包含一对儿getter和setter函数(非必需)
  • 访问器属性不能直接定义,必须使用Object.defineProperty()来定义。

访问器属性有如下四个特性:

  • [[Configurable]]

表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为数据属性。对于直接在对象上定义的属性,这个特性的默认值为true。

  • [[Enumerable]]

表示能否通过for-in循环返回属性。对于直接在对象上定义的属性,这个特性的默认值为true。

  • [[Get]]

在读取属性时调用的函数。默认值为undefined。

  • [[Set]]

在写入属性时调用的函数,默认值为undefined。

形如:

    
    Object.defineProperty(object, "attribute", {
        configurable: true,
        enumerable: true,
        get: function(){...;return ...;},
        set: function(){...}
    });
    

另有两个分标准方法:
部分浏览器实现的非标准的遗留方法:

  1. defineGetter()
  2. defineSetter()

隔阂

虽然我们拥有了更加方便和快捷的信息传播手段,然而当人们接受的信息变得越来越碎片化和多元化之后,普通人之间的准确沟通也将变得更加困难。在过去,人们接受信息的方式比较单一,所以意识形态也比较单一,很多事情可能不需要说出来或者用很少的语言,就能够准确的传达意思了,那时候,每个人对事物的认知可能都不相上下,朋友之间还可以“不言而喻”,情侣之间还可以“眉目传情”。可如今,在这个信息爆炸的年代,人与人之间的隔阂不是更浅,而是更深了。因为,每个人都有一套截然不同的认知系统。在这个年代,你若还能找到一个可以称得上是知己的朋友,那就格外值得珍惜,因为这本就是一件比登月球还难的事,除非你们都还保持着“原始”的生活方式…

JavaScript中的数组,Array类型

JavaScript中创建数组的基本方法有两种:

  • 第一种是使用new关键字和Array构造函数(new关键字可以省略)。
  • 第二种是使用数组字面量表示法([a,b,c]的形式)。

判断是一个数组Array对象

数组的length属性

  • 数组的length属性不为只读,可以通过赋值改变其大小
  • 通过设置这个属性可以从数组的末尾移除项或向数组添加新项。

数组Array对象的方法

  1. 转换方法

    • valueOf() //以逗号拼接为字符串
    • toString() //以逗号拼接为字符串
    • toLocaleString() //以逗号拼接为字符串
    • join(StringObject) //以传递的"分割字符串"来拼接
  2. 栈方法

    • push() //从数组末尾入栈,返回栈的深度
    • pop() //从数组末尾出栈,返回弹出栈的对象
  3. 队列方法

    • shift() //从数组开头出列,返回出列的对象
    • unshift() //从数组开头入列,返回队列的长度
  4. 排序方法

    • reverse() //反转数组中项的顺序
    • sort() //默认按升序(按字符串比较)排序,可接收一个比较函数
  5. 操作方法

    • concat() //用于连接两个或更多的数组,并返回结果
    • slice() //截取数组的一个片段子数组,并返回截取的片段子数组
    • splice() //替换数组中的一个片段子数组,返回被替换的片段子数组
  6. 位置方法(ECMAScript 5)

    • indexOf() //传入要查找的项,从前往后查找,返回找到的第一个相等项的索引。
    • lastIndexOf() //传入要查找的项,从后往前查找,返回找到的第一个相等项的索引。
  7. 迭代方法(ECMAScript 5)

    • every() //对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

    • some() //对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

    • filter() //对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。

    • map() //对数组中的每一项运行给定函数,返回每次函数调用的结果组成的函数。

    • forEach() //对数组中的每一项运行给定函数。这个方法没有返回值。

  8. 缩小方法(ECMAScript 5)

    • reduce() //方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。
    • reduceRight() //reduceRight() 方法接受一个函数作为累加器(accumulator),让每个值(从右到左,亦即从尾到头)缩减为一个值。(与 reduce() 的执行方向相反)

参考手册: