前端

  • 本来,做这么个东西也没太大记录的必要,但是通过这个组件(其实就是一段小脚本)的开发,我有了一些别的感悟。考虑到给未来留个回忆,姑且写上一写。

    背景

    最初接到这个东西的需求时,我大概在做门店频道项目中的一个页面,那是我进入苏宁以后第一个参与的项目。8月的某天,老大突然喊了一嗓子,把我叫到他那里去捡肥皂,哦不是,布置任务。任务的需求是这样的,苏宁易购作为一家电商网站,运营部门总是会搞各种各样的促销活动,一天好几个都是有可能的。既然是活动,那么活动页面是免不了的,猛戳如下链接:
    苏宁活动页

    易购有这么多的活动页,网购研发中心的前端就这么多,当然不会去做这些繁琐的工作。生产这些页面的任务一般都是由运营

  • [a5e27b1] naive implementation

    这是第一个实现了最最基本功能的 commit,项目构建使用的是 grunt。
    逻辑集中于 main.js 文件中,此时的构造函数名为 Seed,使用的实例方法为:

    var Seed = require('seed')
    var app = Seed.create({
        id: 'test',
        // template
        scope: {
            msg: 'hello',
            hello: 'WHWHWHW',
            changeMessage: function () {
          

  • 最近在开发组件的过程中,需要随时监控整个组件对象的构建,包括对象上的属性方法的变更,以及原型链的变化。本来,在测试代码中加一个console.log

    var d = new dialog({
        ...
    });
    console.log('final object', d);
    d.show();

    就可以观察最终生成的组件对象是否符合我的预期,也没出过什么问题,也没理由会出现什么问题,直到调试过程中出现了这样的情况:

    组件的配置需要将用户传入的配置属性和默认属性进行合并,然后需要对组件对象中的一个属性布尔值进行判断后改写组件的另一个属性:

    this.maskOpacity = this.mo
  • viewport unit是一系列以视口尺寸为基准的单位,其中包括vwvhvminvmax。它们被几乎所有的现代浏览器所支持,在 IE 系列中的兼容性问题如下:

    • IE8- 不支持
    • IE10、IE11 不支持vmax
    • IE9 中vmin写作vm

    假设视口尺寸为 1000px * 800px。

    • vw:表示视口宽度的 1%,即 10px
    • vh:表示视口高度的 1%,即 8px
    • vmin:表示视口高度和宽度较小者的 1%,即 8px
    • vmax:表示视口高度和宽度较大者的 1%,即 10px

    在响应式设计中,常用的一个相对单位是rem,它是以根节点上的font-size值为标准的,而根节点

  • 问题

    bowl 是一个利用 local storage 进行静态资源缓存和加载的工具库,在开发过程中遇到过一些问题,其中比较典型的是加载多个资源的时候资源之间可能出现相互依赖的情况,假设有一个基于 Angular 的应用,开发者在构建工具,如 webpack,中构建出了两个 JS 文件,一个文件包含了项目所有的依赖模块,比如 Angular, jQuery, lodash 等等,名为 vendor.js,另一个 JS 文件则全部是业务相关的代码,名为 app.js。显然,app.js 的加载依赖 vendor.js 的先行加载。如果先加载并执行 app.js 的话,会由于全局环境中还不存在 A