学习笔记

Posted on Edited on In

17年已经开始，在此立些flag供17年使用：

  1. 关于事业方面：
    * 谁也无法预知明天的事情，今天还在公司兢兢业业，明天公司就可能不存在，经历过这样的事情，所以一定不能再让这种事情发生，因此不管未来公司在哪里，但是对于自己本身而言，要提高技术，学到本事，以后才不会为一口饭而战战兢兢。
    * 走的是前端这条道路，就得在这条路上坚持，不管是从分析问题的角度还是解决问题的能力方面，都得自己下苦功夫去练习。总监和高工以及导师都说得对：别人再怎么想提拔你，但是你自己本身不愿意宁愿做个废柴，这种事情谁也救不了。因此16年没做到的事情，现在都得狠抓。
    * 慕课网的vue教学视频共18个小时—-一个星期内抽时间看完（截止2月11日）
    * fis官方网站资料，这两天完成—下个星期开始抽时间看源码。
    * es6的学习，阮一峰官方网站讲解的已经详细，多多温故而知新。
  2. 关于锻炼身体方面：
    1. 舞蹈：报班在回龙观附近
    2. 健身房：上地附近
    3. 可以二选一 ： 健身房+吉他；舞蹈+仰卧慢跑
  3. 关于爱情方面：舅老爷交代说：要对他好点，其实我也不知道是老人随口这么一说还是真的看出来我的做法并不够那么照顾他，但那么一说，确实也是应该反省下自己，在这方面可能并没有那么照顾他，很是感激他把我照顾的这么好，想要什么就能给我什么，虽然从小不知道父爱是什么，却从他身上得到了从未有过的安稳。
  4. 关于亲情方面：多跟妈妈打电话，多跟弟弟联系，督促学习，补习。跟爷爷奶奶多联系，老人家年纪那么大了身体不好。
  5. 关于游玩方面：新的一年，脱宅，是主要目标，北京这么大，多出去走走，可以每个月去两个景点。
  6. 关于学习做菜：锅碗瓢盆煎锅平底锅电饭煲砧板啥都买了，就等着学习做菜了。自己百度或者请教老妈，半年后能随手做出一桌好菜来。
  7. 关于修身养性方面：毕竟年龄是一道坎，时间流逝，带走的不仅仅是皮肤的光彩，还带来了对生活的浮躁，还没嫁人，修身养性还是需要的，可以多养养花草，收拾房间，学习书画甚至茶艺。
  8. 关于朋友： 多跟她们联系，毕业之后的联系也是越来越少，但她们会是我的支持和鼓舞的来源，所以需要保持和她们的联系。
  9. 奥黛丽-赫本说过优雅的女人是不生气的，我的新晋女神林志玲也说温柔是最强大的力量。所以，当我学会放弃疲于奔命的生活，试着放松自己慢点儿脚步走路，我发现以往汲汲营营追求的东西竟然可以轻易的获得了。这很好理解的，相信无论是谁都无法喜欢那些个目标明确地刻在在脸上，无论什么时间都一身焦虑地和时间赛跑的姑娘吧~修身养性之于年轻人可不是释怀和淡泊，喜爱自己，试图理解而不是认同他人，学会顺应时机。也就是符合了天时地利人和。
    1. 饮食合理 拒绝垃圾食品
    2. 工作的事不拖拉
    3. 培养真正的兴趣爱好，要深刻
    4. 创造大于消费，比如唱歌的时间大于听歌的时间 思考的时间大于阅读的时间

Posted on Edited on In

一、 原理：

现在webapp已经全面升级为单页系统，单页系统因为是局部刷新页面，在切页时仍会保留前一个页面的部分状态，比如声明的变量，在某些元素上绑定的事件，导致相关内存不能自动回收，存在内存泄露。

  1. widget组件中，el指向是切片的单位，也就是说，每个widget组件，只作用于该区域：—可以使用事件代理机制，更小范围的寻找dom元素（不用满document选择元素了）； 分配模块管理，便于重用和维护。
  2. widget通过事件代理机制配置的events，充当了controller的角色，在view里触发各式各样的事件时，触发controller的代理方法，在处理方法中，又可以修改view的HTML。
  3. 由于大规模的拼接HTML会造成各种维护以及效率问题，所以引入了BaiduTemplate。
  4. widget中并没有单独分离出model层，而是将所有的逻辑交给controller，灵活性很高。

二、 解决方案

  1. 规范widget实现：提供一个windows.Widget基类，windows.widget基类有一个静态方法extend，所有widget均由extend方法继承自该基类，extend方法返回的是widget的一个子类构造函数，基类中统一进行事件委托，在widget中提供统一的事件绑定方式。
  2. 在widget中提供对页面加载各个节点的统一接口，都是页面加载的节点。
  3. 切页面时回收内存： 切页时解除各引用关系，解绑各事件处理函数，使内存能自动回收。
  4. 对外提供destroy接口，各人实现自己widget时可以重写destroy接口，实现切页时要做的操作。

三、 API

  1. extend： windows.widget的静态方法，接受一个对象作为参数，返回值是window.Widget的子类，extend接受的参数对象说明：

  2. 参数对象属性以及属性值说明：

    1. el：属性值为字符串，包含该组件的容器，可以是selector—组件所有事情都会委托在该元素上，若不写，会委托在body上，但是建议写，一般是写class或者id值或其他selector带上widget名，避免跟同页面其他widget冲突。如策略监控系统的两个大id为widget-policy-find何widget-policy-alarm，分别对应两个文件夹命名为policyFind和policyAlarm。
    2. init：属性值为函数,初始化操作，会再createWidget()方法内部调用，可接受参数，参数即为createWidget()方法接收的参数。
    3. events： 属性值为对象，浏览器事件统一绑定，对象的每个属性值是匿名函数或者函数名的字符串，注意：函数名外引号不要去掉，格式如下： 
      1
      2
      3
      4
      events： {
          "click[data-node='search'": 'handleForm',
          "submit[data-action=create_account]":'createAccount'
      }

    4 . channels:属性值为对象

1
2
3
4
channels: {
    'common.page pagexxx': function () {},
    'loading show': loadingHandler ---调用方法名
}
 补充说明： loadingHandler是一个方法名，在此处调用

  1. destroy： 属性值为函数，切页时要做的操作可以在destroy总实现，会在切页时由基类window.Widget自动调用，预留Api，提供了一些方法：
    1. _bindCustomerEvent: 绑定广播事件：
      • param {string} eventName–事件触发的频道，如common.page；
      • param {string} selector 自定义事件名称，如get和show等
      • param {funciton} method –事件处理函数
      • _unbindBrowserEvent:解绑浏览器事件
      • _io–封装ajax请求操作，通过Deferred对象的pass和reject两种状态作为处理ajax成功和失败的操作入口。
  2. extend方法返回值说明：
    1. 类型： window.Widget的子类，有静态方法widgetcreateWidget，接受一个任意类型的参数，该参数会作为实参传给extend参数对象的init方法。
    2. 总结：调用window.Widget.extend得到widget构造函数，调该构建函数的createWidget方法实例化widget。
  3. 实例：
    1. 先依赖：
      在fengkong的fe_front_qishan中，依赖入口在page下的antispampalt中：所有页面扩展自layout.tpl。{%require name=“id名： 地址”%}；
    2. 实例中： 
      1
      2
      3
      4
      5
      6
      7
      module.export = Widget.extend （{
            el: "#大的id名";
            events:{ "click[data-node=xxx]: "ssss"} ;
            channels: { } ;
            init: 
            urls: 
       }）
  4. 解析：
    1. 在init中，拿到$el(根据配置中的选择器)；
    2. 解析DOM，将$el下拥有data-node的元素节点保存在me.$dom下，方便以后引用；
    3. 如果配置中存在init函数，立即调用，传入pageName( Widget.extend().createWidget({a:'b',c:'dddd'}) )，pageName实际为tpl配置的数据；
    4. 执行事件绑定：检测是否存在events配置项，用jQuery事件代替进行逐个绑定；
    5. 执行事件总线绑定：检测是否存在channels存在，用listener进行逐个处理；
    6. 最后绑定事件总线common.page，如果执行到，执行销毁，也就说：如果想要将一个组件的所有事件和事件总线进行解绑，就listener.trigger(‘ common.page ‘ , ‘ pagexxxx ‘);

四、 结合当前策略监控平台绑定部分（一）：

 前三条为总结现有代码以及查阅相关资料所整理，本条结合实例：

关于widget_data传递数据的过程：其实就是：tpl是一种后端模板，后端会将其处理转换成对应的前端的html相关。

1
2
3
{%script%}
    window.widgetData = {%json_encode($widget_data)%};
    require('./App.es6');

其实就是等于

1
<!-- require('./App.es6')({%json_encode($widget_data)%}); -->

分解意思，在require引用es6文件时，将其看作一个函数，后边的( )表示函数立即执行，括号内的参数是解析的$widegt_data，后端在解析时（不管$widget_data）在什么地方，只要碰到了，在解析的时候就能转为前端可以处理的函数，使用最多的 data = $widget_data，也是一个意思，后端会解析$widget_data为对应的格式。

在vue中挂载：

1
2
3
4
5
6
7
new Vue({
    data: {
        bus,
        tplData //--  也就是widget_data，可以像平常一样挂载在window上，也可以挂载在vue的初始化实例时。
    },
    router
}).$mount('.page-main');

然后在子组件中调用方法： 可以参考下图的调用方法

说明：尝试后发现此方法不可取，具体原因还会再进一步分析，但发现绑定在window上之后，可以定义为const变量类型，然后在组件中直接访问变量。

Posted on Edited on In 
  •  SSRF （Server-Side Request Forgrey）：
    服务器端请求伪造，是一种由攻击者构造，从而让服务端发起请求的一种安全漏洞，它将一个发起网络请求的服务当做跳板来攻击其他服务,SSRF的攻击目标一般是内网。当服务端提供了从其他服务器获取数据的功能（例如从指定URL获取网页文本内容、加载指定地址的图片、下载等），但是没有对目标地址做过滤与现实时就会出现SSRF。
  • SSRF的危害：
    很多网站提供了从其他服务器上获取数据的能力，该功能被恶意使用，可以利用存在缺陷的web应用作为代理攻击远程和本地的服务器。
  1. 可以扫描内部网络
  2. 可以构造数据攻击内部主机
  • 漏洞挖掘

其实只要能对外发起网络请求就有可能存在SSRF漏洞。

  1. 从WEB功能上寻找
    通过URL分享内容
    文件处理、编码处理、转码等服务
    在线翻译
    通过URL地址加载与下载图片
    图片、文章的收藏
    设置邮件接收服务器
  2. 从URL关键字寻找
    share、wap、url、link、src、source、target、u、3g、
    display、sourceURl、imageURL、domain…
  1. 右键在新窗口打开图片，若浏览器上URL地址为http://www.baidu.com/img/bd_logo1.png，
    说明不存在SSRF漏洞。
  2. firebug看网络连接信息，若没有http://www.baidu.com/img/bd_logo1.png
    这个图片请求，则证明图片是豆瓣服务端发起的请求，则可能存在SSRF漏洞。
  • 绕过过滤
    有时漏洞利用时会遇到IP限制，可用如下方法绕过：
  • 使用@：http://A.com@10.10.10.10 = 10.10.10.10
  • IP地址转换成十进制、八进制：127.0.0.1 = 2130706433
  • 使用短地址：http://10.10.116.11 = http://t.cn/RwbLKDx
  • 端口绕过：ip后面加一个端口
  • xip.io：10.0.0.1.xip.io = 10.0.0.1
    www.10.0.0.1.xip.io = 10.0.0.1
    mysite.10.0.0.1.xip.io = 10.0.0.1
    foo.bar.10.0.0.1.xip.io = 10.0.0.1
  • 通过js跳转
  • 通用的SSRF实例
  • weblogin配置不当，天生ssrf漏洞
  • discuz x2.5/x3.0/x3.1/x3.2 ssrf漏洞
  • CVE-2016-1897/8 - FFMpeg
  • CVE-2016-3718 - ImageMagick
  • 如何防御
    通常有以下5个思路：
  • 过滤返回信息，验证远程服务器对请求的响应是比较容易的方法。如果web应用是去获取某一种类型的文件。那么在把返回结果展示给用户之前先验证返回的信息是否符合标准。
  • 统一错误信息，避免用户可以根据错误信息来判断远端服务器的端口状态。
  • 限制请求的端口为http常用的端口，比如，80,443,8080,8090。
  • 黑名单内网ip。避免应用被用来获取获取内网数据，攻击内网。
  • 禁用不需要的协议。仅仅允许http和https请求。可以防止类似于file:///,gopher://,ftp:// 等引起的问题

Posted on Edited on In

一、静态资源映射表

  1. 记录文件依赖、打包、url等信息的表结构，fis2中称之为map.json，但在fis3中默认不产出，对其做了优化。当某个文件包含字符__RESOURCE_MAP__时，就会用表结构数据替换此字符，就不再固定把表结构写入某一个特定文件，方便定制。
    二、模块化开发
  2. AMD/CMD,以及require.js、sea.js等前端模块化框架，主要给js提供模块化开发的支持，之后也增加了对css、前端模板的支持。这些框架就包含了组件依赖分析、保持加载并保持依赖顺序等功能。
  3. fis中依赖本身在构建过程中就已经分析完成，并记录在静态资源列表中，那么对于线上运行时，模块化框架就可以省掉依赖分析这个步骤了。同事，js还需要有运行时支持，所以对于不同的前端模块化框架，在js代码中编译分析依赖增加了几种依赖函数的解析：define() / require(‘’) / require.aysnc(‘’) /require.aysnc([ ]).
  4. 考虑到不可能一个框架运用多个模块化框架（因为全都占用相同的全局函数，互斥），所以编译支持这块分成三个插件进行支持：
* fis-hook-commonjs
* fis-hook-amd
* fis-hook-cmd
*     在fis-config.js中： fis.hook('commonjs')；
  1. 但这个插件也只是对编译工具的扩展，支持前端模块化框架中的组件与组件之间依赖的函数，以及入口函数来标记生成到静态资源映射表中，另外一个功能时针对某些前端模块化框架的特性自动添加define。但如何把资源加载到页面上，需要额外的fis构建插件或方案支持。
  2. 如纯前端项目，依赖插件fis-postpackager-loader，这是一种基于构建工具的加载组件的方法，构建出的html已经包含了其使用到的组件以及依赖资源的引用：npm install -g fis3-postpackager-loader在配置中添加fis.match（‘::packager’, { postpackager: fis.plugin(‘loader’ , { }) }）.
  3. 为了方便、统一管理组件以及合并时便利，需要把组件统一放到某些文件夹下，并设置此目录下的资源都是组件资源。 fis.match(‘/widget/**.js’ , { isMod : true});
  4. 工具扩展、目录规范，前后端的前段工程项目都需要，其不同之处就在于静态资源管理这部分。
    1. 编译工具扩展–根据笔筒前端模块化框架，扩展声明依赖能力
    2. 静态资源管理–解析静态资源映射表加载页面用到的组件以及组件的依赖
    3. 目录规范： 设置某个文件夹下资源标记为依赖
      三、资源映射表的模块化设计方案
      四、解决方案封装
  5.  解决一系列特定问题的工具、规范、开发、上线支持的方案，被称之为解决方案。前端一般包括： 研发规范+模块化框架+测试套件+辅助开发工具。fis3就是把这些集成到一个工具中，一个解决方案就是继承自fis3并且支持特定模块化开发、特定模板语言、研发规范的构建工具。
  6. 必要性：规范开发方便开发树立品牌
  7. 解决方案封装：

    • 准备方案名、构建工具名字、模板语言、模块化框架选择、特定目录规范

    • 目录规范： static–静态资源、page–页面、widget–组件，fis-config.js–配置文件

    • 部署规范：template–所有的php模板，static–所有的静态资源

    • 开发
      五、基于smarty的解决方案

  8. fis3-smarty集成了fis-plus的目录规范以及处理插件，实现对smarty模板方案的工程构建工具支持。
  9. smarty本身就是php，同时提供了若干插件，当真正和后端分离是不需要有后盾支持就能用插件的方式解决静态资源管理这件事。
  10. 原理： 模板依赖某个组件（js。css。模板）不再直接引入，而是添加依赖，这些依赖在fis本地编译的时候会产出依赖树，我们一直都叫它静态资源映射表。
  11. fis本身是依赖某种js组件化加载规范，
    六、基于PHP的解决方案
  12. 解决问题：安装php-cgi和java，把项目发布到apache等本地安装好的服务器目录下预览调试。支持模块化开发、组件开发、自动分析资源依赖关系、自动把js/css放在底部输出，提升页面渲染能力，收集组件中的内嵌样式或脚本。

  13. 如何做：fis静态资源管理的核心是map表，

Posted on Edited on In

使用hexo搭建github pages

前言：
@(个人博客)[github-pages|hexo|博客]
以前使用印象笔记或者博客园来写一些学习笔记，一直都没能上传到自己的个人仓库里，现在开始慢慢将原来所做所学内容放在个人github博客中，温故而知新。

github pages的注册

一. 首先，你得有一个github的账号，这个注册过程就不详细描述了，有账号，然后建立与自己账号名相同的仓库名： yourname/yourname.github.io。

本地安装环境

二. 本地安装环境（以windows为例）：

  1. git安装： 去官网下载git工具，基本上一路next，也可根据自己需要是否安装其他以及快捷方式等等选择，git常用操作git add * –> git commit -m ‘提交备注’；
  2. node环境： 去node官网 下载node，安装node环境。

    node官网目前显示版本 最好使用稳定版本6.x，最新的不一定稳定哈，注意检查环境变量(一般情况下node安装过程中会自动将安装路径添加到环境变量中)，若因不知名原因无，在环境变量的path的值中手动加入node的安装目录。

  3. npm、cnpm： 现在的node包下载之后，已经集成了npm，所以无需再做别的操作，因npm链接国外不稳定，可以设置淘宝镜像cnpm： $ npm install -g cnpm --registry=https://registry.npm.taobao.org
    —-详细信息可自行查询官网链接。
  4. 使用npm install -g hexo全局安装hexo 或者 npm install hexo –save。
    目前我个人安装环境版本如图：版本

SSH的生成

三. 注意github使用过程中，别忘记生成ssh！

$ git config –global user.name “jellyhui”
$ git config –global user.email xx@example.com
$ssh-keygen -t rsa -C ‘xxx@example.com‘
输入命令回车之后会提示你输入一些东西，不用管。一直回车到底就好了。然后你的c盘下的user中找到 ~/.ssh 文件下就会生成两个文件 id_rsa 和 id_rsa.pub 。然后点击个人头像去个人信息的settings中找到 SSH and GPG keys， title主要是为了方便自己识别是哪台PC，在SSH一栏，复制id_rsa.pub内的内容即可。

deploy到repo

四. 当环境均安装就绪后，就可以尽情使用hexo啦！
主要过程分为三步：
1> . 创建github的repository； new repository -不详细说，注意repository的名字必须与用户名一样即可。
2>. 使用hexo生成pages

1. hexo init  <文件夹名> : hexo生成文件夹并初始化；
2. cd <文件夹> 并且  npm install： 安装所需环境配置；新建完成后，文件夹下的目录如下：
        .
        ├── _config.yml---网站的配置文件，可以在其中配置网站的大部分参数
        ├── package.json ---应用程序的信息
        ├── scaffolds ---资源文件夹，是用来存放用户资源的地方
        ├── source ---资源文件夹，是用来存放用户资源的地方
        |   ├── _drafts
        |   └── _posts
        └── themes ---主题文件夹，Hexo会根据主题来生成不同的静态页面

3. 生成之后，主要配置_config.yml文件，常见配置等说明后续再进一步说明。目前最需要的是 
    title是博客标题，author为作者名
 `deploy:
  type: git 
  repo: git@github.com/yourname:yourname.github.io.git或者https://github.com/yourname/yourname.github.io.git
  branch: master`
4.   在source文件夹下，有_posts文件夹，存放用户自己的md文件，也就是需要上传的文件，需要注意的是，自己的md文件中开头需要用

        ---
            title: md文件的名字
            date: 书写时间
            tags: [mysql,php,redis]---标签的名字s
            categories: [mysql] ---分类的名字
        ---

```来表明这篇文章应该所属的分类以及标签【注意：距离最左边不能有空格】。
5.  >  hexo g ---生成静态页面，生成的内容在public文件夹下
    >  hexo s ---启动本地服务localhos://127.0.0.1:4000，进行文章预览调试；
    >  hexo s --debug 命令可以用来调试
    >  hexo d 推送代码到自己在config.yml中配置的repo上。
3>. 推送代码：

1. hexo deploy ：推送对象是在_config.yml中配置的repo对象（一般是SSH对象）；
2. 推送时若提示git not found之类的错误，注意检查是否安装插件： $`npm install hexo-deployer-git --save`；
3. 打开 yourname.github.io就可以看到在效果啦~~
4. 后续推送代码时，记得先clone仓库到本地，然后再编辑更新哟~~

Posted on Edited on In

alibaba前端面试

前端面试题
1、对json格式中的某一字段进行排序
eg：var stuJson = [{ name: “daming”, age: 21, weight: 66, sex:”boy” },
{ name: “lisa”, age: 19, weight: 45, sex:”girl” },
{ name: “lili”, age: 20, weight: 50, sex:”boy”}];
//eg:按age升序
stuJson.sort(function(a,b){
return a.age - b.age;
});
console.log(stuJson);//[ { name: ‘lisa’, age: 19, weight: 45, sex: ‘girl’ },
//{ name: ‘lili’, age: 20, weight: 50, sex: ‘boy’ },
//{ name: ‘daming’, age: 21, weight: 66, sex: ‘boy’ } ]
2、用一句语句对数组去最小或最大值
eg:var arr = [32,42,12,42,21,23,56,75,3,33,53,23,36];
var aMin = Math.min.apply(null,arr);
console.log(min);//3
var aMax = Math.max.apply(null,arr);//75
console.log(aMax);
3、如何获取冒泡事件的根节点
4、前端mvc，后端mvc
5、body里面有个div，将div宽度设成100%，并设置padding为10px，问浏览器会不会有滚动条
6、页面布局为左边一个200px宽的块，右边有个200px的块，中间的块宽度设成100%，问有哪些实现方法。
7、在服务器端设置缓存，当访问过一次某个数据后，第二次访问的时候不查询数据库，问怎么实现
8、事件委托