holyzfy / frontend_guidelines Goto Github PK
View Code? Open in Web Editor NEW前端约定
前端约定
保存.less
文件时会当前目录下生成同名的css文件,并且自动给css3属性打前缀
菜单Preferences
> Package Control: Install Package
,依次安装
菜单Preferences
> Settings
> Less2Css
> Settings - User
,增加
{
"lesscCommand": "{{lessc_path}}",
"minify": false,
"autoprefix": true
}
在终端里运行which lessc
,把输出的内容替换掉上面的{{lessc_path}}
新建文件test.less
,内容如下:
.test {
margin: 0;
font-size: 14px;
.item {
display: flex;
line-height: 1.5;
}
}
保存less后查看当前目录下生成的demo.css
Since arrow function has a short syntax, it's inviting to use it for a method definition.
You can't use an arrow function when a dynamic context is required: defining methods,
create objects with constructors, get the target from this when handling events.
👍
var calculate = {
array: [1, 2, 3],
sum() {
console.log(this === calculate); // => true
return this.array.reduce((result, item) => result + item);
}
};
calculate.sum(); // => 6
function MyCat(name) {
this.catName = name;
}
MyCat.prototype.sayCatName = function() {
console.log(this === cat); // => true
return this.catName;
};
var cat = new MyCat('Mew');
cat.sayCatName(); // => 'Mew'
var button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log(this === button); // => true
this.innerHTML = 'Clicked button';
});
var Message = function(text) {
this.text = text;
};
var helloMessage = new Message('Hello World!');
console.log(helloMessage.text); // => 'Hello World!'
To make it more readable, it is possible to restore the optional curly braces and
return statement from the arrow function or use a regular function
👉 https://rainsoft.io/when-not-to-use-arrow-functions-in-javascript/
demo.html
<body>
#parse("module/a.html")
#parse("module/b.html")
#parse("module/c.html")
</body>
module/a.html
<div>...</div>
<script>
require(['common'], function() {
// common.js加载完成
require(['demo'], function() {
// demo.js加载完成
require(['module_a'], function(module) {
// 因为demo.js里已经合并了module_a,此时require('module_a')不会产生网络请求
// 回调函数会立即执行
module.start();
});
});
});
</script>
module/b.html、module/c.html内容类似module/a.html
build.js
{
inlineText: true, // 内联js模板
modules: [
// 对于modules里的每一项,js目录下需要有与name属性值同名的js文件,文件内容可以为空
{
name: 'common',
include: [
'lib/jquery.js',
'lib/template.js'
]
}
{
name: 'demo',
include: [ // 合并为一个文件:demo.js
'module_a',
'module_b',
'module_c'
],
exclude: [
'common' // 合并时排除common和common的依赖
]
}
]
}
build.js全部配置项: https://github.com/jrburke/r.js/blob/master/build/example.build.js
如果项目根目录下有reame.md文件,请参照本地构建部分
{
// ...
"scripts": {
"validate_filename": "node validate_filename.js `git diff --staged --name-only --diff-filter=ACMRTU`",
"csslint": "files=`git diff --staged --name-only --diff-filter=ACMRTU | egrep '\\.css$'`; if [ \"${files:=empty}\" != \"empty\" ]; then csslint --quiet $files; fi",
"eslint": "files=`git diff --staged --name-only --diff-filter=ACMRTU | egrep '\\.js$'`; if [ \"${files:=empty}\" != \"empty\" ]; then eslint -c .eslintrc.json $files; fi",
"build": "node ./node_modules/requirejs/bin/r.js -o build.js"
},
"config": {
"ghooks": {
"pre-commit": "npm run validate_filename && npm run csslint && npm run eslint"
}
},
"devDependencies": {
"colors": "^1.1.2",
"ghooks": "^1.0.3"
}
// ...
}
var colors = require('colors');
var arguments = process.argv.slice(2);
var pattern = /^[a-z0-9_./]+$/;
var valid = true;
arguments.forEach(function(filepath) {
if(!pattern.test(filepath)) {
valid = false;
console.error(colors.red(filepath));
}
});
if(!valid) {
console.error(colors.yellow('请检查以上列出的文件(约定文件和目录由小写字母、数字、下划线_组成)'));
process.exit(1);
}
npm install -g eslint
npm install -g csslint
npm install
script
标签里<script id="demo_tmpl" type="text/html">
<div>模板内容...</div>
</script>
demo_tmpl.html放到inc目录下:
<script id="demo_tmpl" type="text/html">
#parse("inc/path/to/demo_tmpl.html")
</script>
demo_tmpl.html放到templates目录下:
var demoTmpl = require('text!templates/path/to/demo_tmpl.html');
// ...
将来构建工具会把模板内容内联进js文件里,如下:
var demoTmpl = 'demo_tmp.html的内容...';
// ...
var demoTmpl = '<div>'+
'<p>' +
'<span>' + item +'</span>' +
'</p>' +
'</div>';
DOM操作很慢,改变DOM结构和布局都会产生重排(reflow),重排又一定会导致重绘(repaint),所以尽量减少重排和重绘。
哪些操作会导致重排或者重绘:https://csstriggers.com/
安装完nodejs后运行以下命令
npm config set registry https://registry.npm.taobao.org/
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}
保存.scss
文件时会当前目录下生成同名的css文件,并且自动给css3属性打前缀
安装sass http://sass-lang.com/install
运行npm install -g postcss-cli autoprefixer
打开Sublime Text 3
菜单Preferences
> Package Control: Install Package
,依次安装
菜单Preferences
> Settings - User
,增加
"show_panel_on_build": false,
菜单Preferences
> Browse Packages
会打开一个文件夹,然后打开User文件夹,新建以下文件并保存
https://gist.github.com/holyzfy/170929ad3928e8d6b8eecef0af0dab69
新建文件demo.scss
并保存,查看当前目录下生成的demo.css
,内容示例 https://gist.github.com/holyzfy/51f21b9a01dc51f300e2b1e1936b559c
请先安装Package Control
常用的配置项往下看 👇
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.