Some insights and sharing about js-HTML Tutorial-php.cn

JavaScript is a scripting language for the Internet!

JavaScript is used by millions of web pages to improve design, validate forms, detect browsers, create cookies, and more.

JavaScript is the most popular scripting language on the Internet.

JavaScript is easy to use! You will love it!

js can now run on

1. Browser side

2. Computer operating system

through the famous node, node is composed of c/ The js running environment written in cpp is probably js that is compiled into c, assembled into machine language. . . Probably

node compilation

operating system executable machine language

Package installation tool

1.npm

2.bower

3.yarn

Now everyone recommends this. . . It is said that it is faster and better

Build packaging tool (to be honest, I still can’t tell the difference now)

Build tool Task executor

Help compress files? sprite? Obfuscation etc. need manual simplification? Manual labor gulp grunt

Packaging tool Module packaging tool

The modular code is finally assembled and packaged for online use. Webpack browserify and seajs require are packaged on the browser side js on site. Now It is no longer recommended

js in the page

Traditional introduction method script src

node dynamic introduction

This is a very magical node The tool webpack dynamically assembles your page. For example, if you use the plug-in in node modules, you don't actually use script to introduce it into the page? When you don't understand it yet, you can't use common sense to think about (vue-cli) dev. It is the dynamic assembly build that packages all the dynamic assemblies into one. . .

es2015==es6 =>true

jquery attribute self-adding

a.css({'property':'+=value' })

My current thoughts on vue

First of all, let’s talk about the advantages. It only operates data without operating dom

Let’s talk about the shortcomings. If you want to do a, you need to do b, if you want to do b, if you want to do c, if you want to do a, you need to do b, if you want to do b, if you want to do c, if you want to do a, you need to do b, if you want to do b, if you want to do c, if you want to do a, you need to do b, if you want to do b, if you want to do c, if you want a Do b, do b, do c, do a, do b, do b, do c, do a, do b, do b, do c, do a, do b, do b, do c, do a, do b, do b, do c, do a, do a. Do b, do b, do c, do a, do b, do b, do c, do a, do b, do b, do c, in the end it’s hard to understand. In order to make it more convenient, it becomes more troublesome to add more things

contenteditable

div simulates textarea rich text editor

<div class="simutextarea">
                    <span class="simut-fastenbegin">#youCantDeleteMe</span><span class="simut-textwrapper">
                        <span class="simut-textplaceholder">Hot or not? Tell it like it is and hashtag!</span>
                        <span class="simut-textplaceinput" contenteditable="true"> </span>
                    </span>
                </div>

Copy after login

But there are some problems that cannot solve the cursor problem (jumping to the first page). The posting box of Baidu Tieba is simulated using this. If you have time, see how they do it

Jump according to the device

Three parties can jump and can get the userAgent sent from the browser

Operation and maintenance jump
Program jump
Front-end jump

At the same time, these three parties plus network operators and even routers can maliciously add things to the page using malicious DNS
As a runtime server, node is the same.

The picture is in the center

background-position center
##position absolute

Multiple lines omitted (modern browsers)

overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;

Copy after login

cdn page true dynamic content

The page is cached by the cdn server After that, the cache needs to be refreshed to really change, then the content that really needs to be changed needs to be obtained by js (such as the currently logged in user information, etc.)

js Regularly finds all matching matches

var regEx=/js_quantity[a-z]+/g;regEx.exec('js_quantityabc js_quantityminus minus disabled');regEx.exec('js_quantityabc js_quantityminus minus disabled');regEx.exec('js_quantityabc js_quantityminus minus disabled')
[0];regEx.exec('js_quantityabc js_quantityminus minus disabled').index;

Copy after login

Continuously execute exec

async/await

demo(Script snippet #1)

//测试 async async async await//先来的 返回一个promise 完成时调用resolvevar sleep=function(){ return new Promise(function(resolve,reject){
     setTimeout(function(){         console.log('Asettimeout has been executed, promiss has been resolved');
         resolve(['sleep1','sleep2']);
     },3000);
 });
};//后到的 async（异步）修饰function await修饰执行先来的var start=async function(){ let sleepreturnarray=await sleep(); console.log('%ceven though i do not have a time out, i still will be executed after 3 sec, after the promiss resolveed'+sleepreturnarray[1],'color:red;');
};
start();

Copy after login

async means that this is an async function, and await can only be used in this inside the function.

await means waiting for the promise to return the result before continuing execution.

await should be followed by a promise object (of course, other return values do not matter, they will just be executed immediately, but that would be meaningless...)

A lot said, Currently this is the ultimate solution to asynchronous callback hell, of course combined with babel. Note that at present, Ultimate

vue component communication

Even if you don’t like it, you have to use it if you are assigned to use it. . .

The scopes between components are independent, and data often needs to be passed between components.
A is the parent component, and there are subcomponents B and C below.
A’s data can be passed to B and C through props.
A can call events of B and C through $broadcast to operate the data of B and C.
B and C can call A's events through $dispatch to manipulate A's data.
When B needs to operate C's data, it will be more troublesome. It needs to $dispatch to A first, and then $broadcast to C.

It’s okay if the project is relatively small. The larger the project, the more and more frequent the components involved will communicate. At this time, management will be very tiring and error-prone. This is what Vuex is all about. It can place data in a separate layer and provide methods for external manipulation of internal data. It’s a bit vulgar, so let’s understand it.

=== === ===Update: Vue 2 has been released, $dispatch and $broadcast have been removed, and the communication event ping-pong will no longer occur.

We need a Vue instance to act as a communication medium. The official Vue documentation calls it event bus. export default new Vue(); When we need event communication between components, we only need to use $emit and $on on this event bus.

import Bus from './bus.js';

export default Vue.extend({
  template: `
  <div>{{msg}}</div>
  `,

  data: () => ({
    msg: 'Hello World!'
  }),

  created() {
    Bus.$on('setMsg', content => {
      this.msg = content;
    });
  }
});

Copy after login

import Bus from './bus.js';

export default Vue.extend({
  template: `
  <div @click="sendEvent">Say Hi</div>
  `,

  methods: {
    sendEvent() {
      Bus.$emit('setMsg', 'Hi Vue!');
    }
  }
});

Copy after login

Event bus is a practice that you can also use in Vue 1.x.

Large is centered in a small container

法一

Large: position absolute; left 50%; margin-left -[half of the width of the large ]; top...Omit the same as left

Small: position relative;

法二

设置为背景图且background-position center

文本框和按钮同高对齐(less)

form{			font-size: 0;position: relative;			.formitem{				height: 30px;line-height: 30px;				font-size: 14px;vertical-align: middle;
			}			input[type=text]{				.formitem();				border: 1px solid #000;				padding: 0 5px 0 35px;				width: 235-40px;
			}			button{				.formitem();				color: #fff;background-color: #000;				width: 135px;height: 32px;line-height: 32px;
			}			&:before{				content: '';display: inline-block;position: absolute;				left: 38px;				top: 1px;				.sprite(@youjiandingyue_07);
			}
		}

Copy after login

正则替换保留原始内容

http://([A-Za-z0-9.-]+).sammydress.com
https://$1.sammydress.com

$1 是代表([A-Za-z0-9.-]+)匹配到的模糊内容
$1-$n分别代表第1个和第n个括号内匹配到的内容。

var regEx=/([A-Za-z0-9.-]+)abc/;'sdjlfjslfabc'.replace(regEx,'$1def')

Copy after login

结果是"sdjlfjslfdef"

关于vue一点新的体会

专注于操作数据，数据和视图分离，通过操作数据的方式操作视图，mvvm
而不是$().html()等等这种形式

webstorm 保存不会触发webpack watch

原来是这样啊啊啊啊啊啊

text align justify

text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用

vue validator

中文文档

关于postcss中用于不转换rem的注释/no//px/在webpack build中不生效的解决办法

sass loader会把注释去掉导致用于告诉postcss不用转换rem的注释也去掉导致边线px变成小数rem 显示不出来的bug
sass?outputStyle=expanded 展开带注释的？

module: {loaders: [
            {test: /\.scss$/,//感謝谷歌loader: 'style!css!postcss-loader!sass?outputStyle=expanded',// include: APP_PATH},
        ]
    },

Copy after login

webpack 可以接受形如!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&includePaths[]=./node_modules 的配置参数后的loader

The above is the detailed content of Some insights and sharing about js. For more information, please follow other related articles on the PHP Chinese website!