发表于   |   分类于

当今 React 比较流行，可能会有很多的新手和我一样遇到这个问题：

var MyClass = React.createClass({...}); 和 class MyClass extends React.Component{...}

之间的区别是什么？那么今天带大家一起学习一下。

写法的区别

React 中有两种支持创建组件的方法，你可以通过 React.createClass 和 extends React.Component，他们实现的目的都是一样的。区别就在于你是否是以 ES6 的形式。

当你使用 ES6，你应该在 constructor 中初始化你的参数：

1
2
3
4
5
6
class MyComponent extends React.Component {
    constructor(props) {
    super(props);
    this.state = { /* initial state, this is ES6 syntax (classes) */ };
  }
}

当你使用 React.createClass 你需要使用 getInitialState ：

1
2
3
4
5
var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});
  • 这两种写法的方法名首字母都必须大写
阅读全文 »

发表于   |   分类于

现在来说 es6 并不陌生了，它产生也有一段时间了，由于自身之前的项目繁重，都没有时间静下心去好好学习他的语法。前一段时间利用空余时间，研读了ES6的一些语法，学习过程中的 DEMO,我也放在了 Github 上，以后继续深入，现在也只是个皮毛。

以下对这段时间做个小总结：

基本语法

声明变量

新引入了 let 和 const 来替代 var

常量通过 const 来声明

let 和 const 的优点就是更好的融合 ES6 中新出的块级作用域

模板字符串

用反引号（`）标示

解构

对数组，对象的解构

1
let [a, b] = [11, 22];
未完待续

发表于   |   分类于

原文

Node.js 通过实现 CommonJS 的 Modules/1.0 标准引入了模块（Module）概念，一个模块可以通过 module.exports 或 exports 将函数、变量等导出，以使其它 JavaScript 脚本通过 require() 函数引入并使用。

现在有一个问题：到底应该用 module.exports 还是用 exports 呢？

最好的方法就是查看 Node.js 的 官方文档中关于 module 的介绍：

In particular module.exports is the same as the exports object.

可以看出 module.exports 和 exports 其实是一样的。在代码里比较：

1
2
console.log(module.exports === exports);
//输出结果也是 true。

然而参照 “module.exports vs exports in nodeJS” 中的例子，考虑下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
// a1.js
exports = function () {
  console.log('hi a2!');
}

// a2.js
module.exports = function () {
  console.log('hi a2!');
}

// b.js
console.log(require('./a1'));
console.log(require('./a2'));

执行 node b，输出结果如下：

1
2
{}
[Function]

可见 a1.js 的 function 导出失败了，而 a2 却成功了。原因是什么呢？搜索无果后我直接查看了 Node.js 的源代码：

1
2
3
4
5
6
7
8
9
10
11
// file path: node/lib/module.js

// ...
global.require = require;
global.exports = self.exports;
global.__filename = filename;
global.__dirname = dirname;
global.module = self;

return runInThisContext(content, filename, true);
// ...

这段代码的作用是为 global 赋属性并调用 runInThisContext() 函数运行模块(其内容已经事先读入到 content 变量)。模块中使用的 exports （即 global.exports）其实是对 self.exports 的引用，对 exports 进行修改会影响到 self.exports，但如果对其赋值，exports 则不再是 self.exports 的引用了。而对 module.exports 赋值自然就没有问题。

了解这个，有些 Node.js 模块的源代码中的 exports = module.exports = someObject 也可以理解了：只使用 module.exports = someObject 的话 module.exports 引用的地址变了，而 exports 引用的还是之前的地址，所以下面的代码中再修改 exports 就不会再改变 module.exports 的值了。

总结

  • exports是module.exports的一个引用
  • require引用模块后，返回给调用者的是module.exports而不是exports
  • exports.xxx，相当于在导出对象上挂属性，该属性对调用模块直接可见
  • exports =相当于给exports对象重新赋值，调用模块不能访问exports对象及其属性
  • 如果此模块是一个类，就应该直接赋值module.exports，这样调用者就是一个类构造器，可以直接new实例

发表于   |   分类于

前几天被问到：

“自己对 jQuery 了解吗？”

答：

“还算可以吧。”

问：

“那你讲一下 $.extend() 和 $.fn.extend() 的区别？？？”

*当时就有点蒙了，感觉自己写 jQuery 的时候用过 $.extend() 方法，就是用来包裹jQuery的全局对象，但是它与$.fn.extend()有什么区别？各有什么作用？？？

弱弱的回答：*

“自己不了解。。。”

后来自己在网上搜了搜资料看看他们的区别，自己总结了下分享出来：

  • $.extend():
    此方法是用来扩展 jQuery 类，它所方法是全局性，直接用 jQuery 类即可引用，例如:
    1
    2
    3
    $.extend({minValue:function(a,b){return
     a<b?a:b;}})
    $.minValue(5.6);

一般也可以把这类函数称作为工具函数，它们不直接操作DOM元素，而是操作Javascript的非元素对象，或者执行其他非对象的特定操作。

  • $.fn.extend():
    此方法则是用来扩展 jQuery 的实例方法，也就是说 jQuery 类的实例对象可以调用此函数，代码如下:
    1
    2
    3
    4
    5
    6
    $.fn.extend({
       theAlert:function(){
          alert("自定义的函数");
        }
      })
      $("thediv").theAlert()

以上代码通过 $.fn.extend() 方法为 jQuery 扩展一个实例方法，那么就必须要用对象实例来调用此方法，$(“thediv”)就是一个对象实例，这样它就可以调用添加的方法，当然在实际的开发中，几乎不可能有这么简单的例子，这里只是讲述一下原理。

发表于   |   分类于

今天来介绍一个webpack中的神器级的插件 webpack-glob-entries

为什么要用它

  • 先来看看下面的代码
1
2
3
4
5
6
7
8
9
entry: {
        pageA: "./pageA",
        pageB: "./pageB",
        pageC: "./pageC",
        adminPageA: "./adminPageA",
        adminPageB: "./adminPageB",
        adminPageC: "./adminPageC",
        ……
    },
  • 这样的缺点

当项目很庞大的时候，入口文件 entry 方法中将引入很多的 js 页面就像上面一样，很难管理，而且每次新增一个 js 文件，都要去 webpack 中添加一条入口记录

遇到这种情况，你想想怎么办？是不是就想让 webpack 自动去检测 js 文件，而不是手动的添加

神器就这样诞生了

怎么用

1
var glob_entries = require('webpack-glob-entries');
1
entry: glob_entries('/src/scripts/*.js')

完工

妈妈再也不用担心我使用webpack打包了

发表于   |   分类于

前几天在使用ES6的时候发现箭头函数中,事件无法通过this获取本身，后来查了一些资料是这样的：

一般来说，this 和 event.currentTarget是一致的。
但是，如果使用了某种作用域替换，（比如jquery.Proxy，或者 ES6、CoffeeScript 等里用了 =>），this可能有别的含义了，用 event.currentTarget 就更安全。
一般人们更容易混淆的是 event.target 和 event.currentTarget。

发表于   |   分类于

介绍

rem

1. anima-hd统一采用rem做单位, 想使用物理1px的就用1px, 比如 border: 1px solid red；

原理是根据rem将页面放大dpr倍, 然后 viewport 设置为1/dpr。

比如iphone6 plus的dpr为3, 则页面整体放大3倍, 1px (css单位)在plus下默认为3px(物理像素)
然后viewport 设置为1/3, 这样页面整体缩回原始大小。 从而实现高清。

vw的模式是将 rem跟 width 做关联, 以 6.4rem = 100vw 做基准。

这么做的好处是设计稿的单位是多少, 除以100就可以给rem来使用；
如果是less之类的预编译, 可以 @px: 0.01rem ; 然后 font-size: 24*@px; 来使用！
也可以直接裸写 font-size: .24rem；

vh同理:
这里不实现vmin|vmax, 实际场景中遇到较少(一般都用 flex )。
如果一个页面用到了 flex + vw , 请用flex模式, vw用百分比或者css的vw等其他方式。

2. 由于viswport的设置，强烈建议复制代码内联：

  • Flex模式：https://a.alipayobjects.com/anima-hd/1.0.5/flex.js

    1
    !function(e){function t(n){if(i[n])return i[n].exports;var r=i[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){e.exports=i(1)},function(e,t,i){i(2)()},function(e,t){e.exports=function(e){e=e||window;var t=e.document,i=navigator.userAgent.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),n=navigator.userAgent.match(/U3\/((\d+|\.){5,})/i),r=n&&parseInt(n[1].split(".").join(""),10)>=80,o=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),a=e.devicePixelRatio||1,d=t.documentElement,s="";o||(i&&i[1]>534||r?r||(s+="target-densitydpi=device-dpi,"):a=1);var p=1/a;s+="width=device-width,user-scalable=no,initial-scale="+p+",maximum-scale="+p+",minimum-scale="+p,t.querySelector('meta[name="viewport"]').setAttribute("content",s),d.style.fontSize=50*a+"px"}}]);

  • VW模式：https://a.alipayobjects.com/anima-hd/1.0.5/vw.js

    1
    !function(e){function t(n){if(i[n])return i[n].exports;var r=i[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}({0:function(e,t,i){e.exports=i(8)},5:function(e,t){e.exports=function(e){e=e||window;var t=e.document,i=navigator.userAgent,n=i.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),r=i.match(/U3\/((\d+|\.){5,})/i),o=r&&parseInt(r[1].split(".").join(""),10)>=80,a=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),d=e.devicePixelRatio||1,s=t.documentElement,p="",l=1,c=1/d;if(a);else if(n&&n[1]>534||o){o||(p+="target-densitydpi=device-dpi,"),s.style.fontSize="100px";var u=t.createElement("div");u.setAttribute("style","width: 1rem;display:none"),s.appendChild(u);var m=e.getComputedStyle(u).width;if(s.removeChild(u),"100px"!==m){var v=parseInt(m);l=100/v,c*=l}}else c=1;t.querySelector('meta[name="viewport"]').setAttribute("content",p+"width=device-width,user-scalable=no,initial-scale="+c+",maximum-scale="+c+",minimum-scale="+c),s.style.fontSize=.15625*s.clientWidth*l+"px",e.addEventListener("resize",function(){s.style.fontSize=.15625*s.clientWidth*l+"px"})}},8:function(e,t,i){i(5)()}});

  • VW-750模式（推荐）：https://a.alipayobjects.com/anima-hd/1.0.5/vw-750.js

    1
    !function(e){function t(n){if(i[n])return i[n].exports;var r=i[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){e.exports=i(7)},,,,function(e,t){e.exports=function(e){e=e||window;var t=e.document,i=navigator.userAgent,n=i.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),r=i.match(/U3\/((\d+|\.){5,})/i),o=r&&parseInt(r[1].split(".").join(""),10)>=80,a=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),d=e.devicePixelRatio||1,s=t.documentElement,p="",l=1,c=1/d;if(a);else if(n&&n[1]>534||o){o||(p+="target-densitydpi=device-dpi,"),s.style.fontSize="100px";var u=t.createElement("div");u.setAttribute("style","width: 1rem;display:none"),s.appendChild(u);var m=e.getComputedStyle(u).width;if(s.removeChild(u),"100px"!==m){var v=parseInt(m);l=100/v,c*=l}}else c=1;t.querySelector('meta[name="viewport"]').setAttribute("content",p+"width=device-width,user-scalable=no,initial-scale="+c+",maximum-scale="+c+",minimum-scale="+c),s.style.fontSize=100/750*s.clientWidth*l+"px",e.addEventListener("resize",function(){s.style.fontSize=100/750*s.clientWidth*l+"px"})}},,,function(e,t,i){i(4)()}]);

发表于   |   分类于

本规范是基于JavaScript规范拟定的，只针对ES6相关内容进行约定

如变量命名，是否加分号等约定的请参考JavaScript规范

应注意目前的代码转换工具(如Babel，Traceur)不够完善,有些特性须谨慎使用

ES6 Coding Style English Version

规范内容

  1. 声明 Declarations
  2. 字符串 Strings
  3. 解构 Destructuring
  4. 数组 Arrays
  5. 函数 Functions
  6. 类 Classes
  7. 模块 Modules
  8. 版权 Copyright

声明

  • 1.1 变量

对于只在当前作用域下有效的变量，应使用let来代替var

对于全局变量声明，采用var，但应避免声明过多全局变量污染环境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 不好
const variables;
const globalObj = null; // 不是常量
let globalObj = null;

for (var i = 0; i < 5; i++) {
  console.log(i);
}
console.log(i); // 4


// 好
let variables;
var globalObj = null;

for (let i = 0; i < 5; i++) {
  console.log(i);
}
console.log(i); // ReferenceError: i is not defined
  • 1.2 常量

对于常量应使用const进行声明，命名采用驼峰写法

对于使用 immutable 数据应用const进行声明

注意: const与let只在声明所在的块级作用域内有效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 不好
let someNum = 123;
const AnotherStr = '不变的字符串';
let arr = ['不', '变', '数', '组'];
var ANOTHER_OBJ = {
  '不变对象': true
};


// 好
const someNum = 123;
const anotherStr = '不变的字符串';
const arr = ['不', '变', '数', '组'];
const anotherObj = {
  '不变对象': true
};

字符串

  • 2.1 处理多行字符串,使用模板字符串

以反引号( ` )标示

可读性更强，代码更易编写

注意排版引起空格的问题，使用场景为声明HTML模板字符串

1
2
3
4
5
6
7
8
9
10
11
// 不好
const tmpl = '<div class="content"> \n' +
              '<h1>这是换行了。</h1> \n' +
            '</div>';


// 好
const tmpl = `
<div class="content">
  <h1>这是换行了。</h1>
</div>`;
  • 2.2 处理字符串拼接变量时,使用模板字符串
1
2
3
4
5
6
7
8
9
10
// 不好
function sayHi(name) {
  return 'How are you, ' + name + '?';
}


// 好
function sayHi(name) {
  return `How are you, ${name}?`;
}
阅读全文 »

发表于   |   分类于

一.目录结构

目录结构

  • App—存放需要引入jQuery的项目；
  • spApp—存放不需要引入jQuery的项目；
  • 特殊情况的项目需要单独新建文件夹，类似share项目；
1
2
3
4
5
├── partial                    //脚本
│   └── active-partial         //具体页面          
├── services                   //服务
│   └── services.js     
└── spapp.js                   //路由文件

二.生产环境

H5项目是基于Grunt+bower+AngularJs

Gruntfile.js

1
2
3
4
5
- build-ngapp (在dist中生成ngapp项目压缩的代码)
- build-share (在dist中生成share项目压缩的代码)
- build-spapp (在dist中生成spapp项目压缩的代码)
- run-dev (本地未压缩环境服务启动命令)
- run-dist (本地已压缩环境服务启动命令)

三.命名规则

1.项目名

项目名全部采用小写方式， 以中划线分隔。 比如：kaowo-intro

2.HTML文件命名

采用小写方式,多个单词组成时，采用中划线连接方式，比如说: kaowo-intro.html

3.js文件命名

  • 控制器:小写+Ctrl,比如说:procertiCtrl.js
  • 服务:项目简称+Services,比如说:spService.js
  • 路由:项目名称,比如说:spapp.js

4.css文件命名

  • 采用小写方式,多个单词组成时，采用中划线连接方式，比如说: kaowo-intro.css
阅读全文 »

发表于   |   分类于

通过js来判断项目版本号（version）源码。

直接上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var vvv = function (v1, v2) {
    try {var v1parts = v1.split('.'),
            v2parts = v2.split('.');
        var maxLen = Math.max(v1parts.length, v2parts.length);
        var part1, part2;
        var cmp = 0;
        for (var i = 0; i < maxLen && !cmp; i++) {
            part1 = parseInt(v1parts[i], 10) || 0;
            part2 = parseInt(v2parts[i], 10) || 0;
            if (part1 < part2)
                cmp = 1;
            if (part1 > part2)
                cmp = -1;
        }
        if (cmp >= 0) {
            alert(1);
        }

    } catch (e) {
        return false
    }
}
vvv('2.2.2.0', isVersion);