The rainbow sea is mine. Https://blog.flxxyz.com/ Zh-CN The world is not worth it. Tue, 06 Aug 2019 17:42:00 +0800 Tue, 06 Aug 2019 17:42:00 +0800 Coo, a minimalist jQuery implementation. Https://blog.flxxyz.com/technology/2019/simple-jquery.html Https://blog.flxxyz.com/technology/2019/simple-jquery.html Tue, 06 Aug 2019 17:42:00 +0800 Feng Xiao Xian Today, just an old friend chatted up the jQuery source code. He didn't understand the source code. I had a learning and communication attitude and explained the core realization to him. (as if he had been pigeon for a long time).

By the way, which CDN service provider is looking for a jQuery file to open? The 1.2.3 version I use here is for example. The latest version is almost the same, with only two or three changes. Https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.js

Source code analysis

17-20 elements Pass the selector and return the init method of your own new. It is estimated that you haven't used it either. $() The second parameter is omitted here.

 Var jQuery = window.jQuery = function (selector) {
return new jQuery.prototype.init (selector);}

26-27 elements This is why it is always a global variable to mount to a window object because of the beginning of $.

 / / Map the jQuery namespace to the '$' one
window.$= jQuery;

36-547 elements Eliminate the core of retention that we do not need. Init Method, the jQuery instance and the selector are judged internally. Here we ignore and simplify.

 JQuery.fn = jQuery.prototype = {
init: function (selector) {
var nodes = document.querySelectorAll (selector); 
for (VaR, 
for) = =; one hundred thousand;

549 elements In the last paragraph, the jQuery prototype chain is passed to the prototype of the init method under the jQuery prototype. Looking back at the new code, it is clear and clear.

 JQuery.prototype.init.prototype = jQuery.prototype;

Complete implementation

Adding functionality to the jQuery prototype is very close to the first version of jQuery. Here I am a simple implementation. Text () Method

 Var jQuery= function (selector) {
return new jQuery.fn.init (selector); 
}

jQuery.fn = jQuery.prototype = {
init:; (
}

jQuery.fn) = = (()); (0); (},}; (},}, "}", "}," "(") ";"

End

Actually, the core is not complicated. I like it very much. I think most of my functions are implemented by plug-ins. The ingenious design and convenience of the tools themselves.

On the traditional page production, jQuery used a very comfortable shuttle, but the appearance of MVVM changed the way of thinking. We only need to pay attention to business logic, do not need to manually operate DOM, do not need to pay attention to the synchronization of data status, and ease the project management.

If there are simple needs on a single page, jQuery is still useful, MVVM can only be added trouble.

> >
Five Https://blog.flxxyz.com/technology/2019/simple-jquery.html#comments Https://blog.flxxyz.com/feed/technology/2019/simple-jquery.html
Wake up is 2076 Https://blog.flxxyz.com/chat/2019/cyberpunk-2077.html Https://blog.flxxyz.com/chat/2019/cyberpunk-2077.html Thu, 13 Jun 2019 14:45:00 +0800 Feng Xiao Xian  Cyberpunk-2077.jpg

GOG startup, pre order!

> >
Seven Https://blog.flxxyz.com/chat/2019/cyberpunk-2077.html#comments Https://blog.flxxyz.com/feed/chat/2019/cyberpunk-2077.html
The second generation site update plan Https://blog.flxxyz.com/chat/2019/second-generation-site-update-plan.html Https://blog.flxxyz.com/chat/2019/second-generation-site-update-plan.html Tue, 11 Jun 2019 20:47:00 +0800 Feng Xiao Xian I feel so good lately.

TX Hongkong is like a bomb? Since the record is still considered to move into the domestic 8

The old version of the pagoda, which is used before the panel, is still in use. It plans to backup the site and reset the server. A few days ago, it used docker to configure instances in the house virtualization device. The php+nginx site can use the configuration of this instance uniformly. Alpine-nginx-php7

> >
Five Https://blog.flxxyz.com/chat/2019/second-generation-site-update-plan.html#comments Https://blog.flxxyz.com/feed/chat/2019/second-generation-site-update-plan.html
Naked speech for one month Https://blog.flxxyz.com/chat/2019/naked-for-a-month.html Https://blog.flxxyz.com/chat/2019/naked-for-a-month.html Mon, 03 Jun 2019 19:56:00 +0800 Feng Xiao Xian After reading the last article, two months ago, wow, I spent more than a month at home.

What do you want to do at home? Sleep, play games, watch movies, write code, read books, participate in activities, spell models, pick up trash, exercise properly, and organize your room.

The approximate time allocation is as follows
 QQ screenshot 20190603202936.png

Look at millet Bracelet every day almost 10 hours of sleep time, steam collectors game to buy and play? Of course, it's a game of hand travel. The simple and fast way to play in the wilderness is really good. There are four fixed map scenes and a map of activities. The fixed map play can be launched in the time frame. The new activities will fine tune the scene objects and add some specific playing methods. The reward mechanism of the team is also very clever. Unless you are the countdown of 123, there will be rewards. Each match is similar to the qualifying match. The victory will win the trophy (the personal individual cup and the total trophy), the total trophy will only accumulate all the time, failure will only reduce the personal trophy of the hero, and it will be poisonous when playing for a long time.

To write code is to optimize things that have been written before, and to achieve new ideas is actually fishing.

The book is indeed looking. Some time ago, he went to participate in the openresty technology sharing meeting of the cloud organization, and got a commemorative shirt and a book. Do it yourself to achieve Lua. A rough look at the following is the use of golang to achieve Lua virtual machine, syntax tree, compiler, temporarily put down the algorithm, but saw last year's purchase has not yet opened Kaifeng, found that last year seems to have no time to read the book, time management is not qualified.

The other time spent watching movies is the most time spent. I saw the box office dismal of the good movies during the women's Federation, and the selling of the sand sculptures, I couldn't help thinking of Feng Dao.

There are so many garbage movies because there are lots of garbage audiences.

In addition, the art films in April and May are really pretty. (the cry of inner OS), the list of the whole days is coming out.

All of a sudden, I entered the pit to collect garbage and wool, and now I am calm down.

The proper exercise is actually 50 push ups, 50 squats, 20 sit ups.

Two sets of shelves were made, and all the servers, books and hands that were scattered before were put together.
 QQ picture 20190603214043.jpg

Movie list

  • Avenger League 4
  • When prayer ends A very Japanese suspense scenario.
  • "Kill a sheep" Tibetan films, lots of fixed shots, not too many dialogues, thinking through the behavior of characters, what is good and what is evil?
  • Snowstorm There will also be differences in the bad guys, killing each other, the outlaws of all kinds, and the "evil" of ordinary people.
  • "Rome" The black-and-white movie is located in the Rome District of Mexico. The perspective is carried out through the maids. Two of the employers and their wives are cheating. The maid is also suffering from the slag man.
  • Revenge of a mother
  • Penguin Road Actually, it's absurd to see it, but there's a sense of violation in the middle. But what's really more like the animation world? (PS: I want to fly with my big sister).
  • May sky life Co., Ltd. Two brushes
  • Detective Khan Feeling of love
  • Godzilla 2 It's finished.
> >
Eight Https://blog.flxxyz.com/chat/2019/naked-for-a-month.html#comments Https://blog.flxxyz.com/feed/chat/2019/naked-for-a-month.html
Vue implements basic mobile phone number login interface Https://blog.flxxyz.com/technology/2019/vue-login-interface-base.html Https://blog.flxxyz.com/technology/2019/vue-login-interface-base.html Tue, 16 Apr 2019 17:12:00 +0800 Feng Xiao Xian Sort out some of the latest gadgets.

You can see that there are two buttons (get verification code, login) two boxes (enter the phone number, enter the verification code).

So we have the following thing (no concrete function, just look at the structure).

 <template>
<div class= "login-wrapper" >
<div class= "title-bar" > login </div>
<div class= "wrapper phone-wrapper" >
<span >
<span "wrapper" > mobile phone number, "mobile phone", "mobile phone", "mobile phone", "mobile phone", "mobile phone", "phone", "password", "password", "password", "password", "authentication", "authentication code", "password", "password", "password", "password", "password", "password", "password", "password", "login".

At this time, you can start writing logic. It is also a simple analysis. Login needs to click, get the verification code need to click and countdown seconds, that is, dynamically modify the text, experience a good check can limit the number of mobile phone number, the number of verification code.

That's almost like this.

 "Title-bar" > login </div>
<div class= "wrapper phone-wrapper" >
<span, ">
<span", "mobile", "mobile", "mobile", "mobile". <template>
<div class= "login-wrapper" >
<div class= The number of 
code: '/ / input box verification code 
codeText:' get the verification code ', / / countdown display text 
timingBoard: 60, / countdown 
timer: null / / timer, used for countdown verification code}}, 
methods: {
loginCode () {}, / / get the verification code 
login () {} / / login 
changePhone () {} / / check cell phone number 
changeCode () {} / / check the length of the verification code 
}
</script>

With these, it is enough for you to implement a basic mobile phone login interface. If you need full code, please click below. Gist links

Complete code is read: Https://gist.github.com/flxxyz/64ceb06a0754d67a771b3e3e7dc94d48

> >
Four Https://blog.flxxyz.com/technology/2019/vue-login-interface-base.html#comments Https://blog.flxxyz.com/feed/technology/2019/vue-login-interface-base.html
Vue register global instruction parse markdown Https://blog.flxxyz.com/technology/2019/vue-global-register-directive.html Https://blog.flxxyz.com/technology/2019/vue-global-register-directive.html Tue, 26 Mar 2019 15:03:00 +0800 Feng Xiao Xian To tell you the truth, I haven't seen API for such a long time. Vue rediscovered my blog these days. Vue.directive It looks great.

Always see here. Vue.use (ElementUi) Where to use Vue.use (Axios) It has always been at the level of application, and I find that the consumption of markdown parsing examples is a little too large. It may be a lot easier to process directives directly.

Describe the process briefly.

The components that render the article will query whether there is a corresponding article in the local record during the lifecycle of the installation. If there is no request, the request will be searched online, otherwise 404.
The article is for the content of markdown, considering that front-end processing can be directly resolved (after all, the front-end performance is over 233), so as to reduce the burden of logical processing on the back end and consistency.
The markdown parser is used. Marked The completion logic is as follows

 //main.js

import Vue from'vue'
import App from'./App'
import markdown from'./markdown';} / / injection of markdown resolver, (()) = (=).

Integrated marked makes plug-in form exposure

 //markdown.js

import marked from'marked'
import ('highlight.js/styles/atom-one-dark.css') 

marked.setOptions ({
renderer: new marked.Renderer ()), 
pedantic: false, 
pedantic:, false, e, R, D, R, D, R, D, R, D, C, C, R, R, R, R, R, R, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, P, etc.

Use on labels V-markdown instructions

 Interface = function (), {
return new new ({}}) = ({}}) =} {} (}) {}}, {}} {}}, {}}, {}}, {}}, {}}, or finding local articles = {}}, (= {}} (=) > {}; this is an interface for searching for articles; {}); (404); //Test.vue

<template>
<div>
<div v-if= "isNotFound" >404</div>
<div v-else v-markdown= "article" ></div>
</div>
</template>

<script>
const, this is a search article. }

return res; {}}, 
mounted () {/ / ID to find articles 
let a = this.handlerArticle (123); 

if (a = = = 404) {/ / jump to error page}} / / processing loading
this.isNotFound = false; = =}; / / save content directly to variable

Complete code is read: Https://gist.github.com/flxxyz/93e009d32ecd7e0c6785a52571577cd7

> >
Zero Https://blog.flxxyz.com/technology/2019/vue-global-register-directive.html#comments Https://blog.flxxyz.com/feed/technology/2019/vue-global-register-directive.html
Book Samsung S10, really fragrant. Https://blog.flxxyz.com/chat/2019/samsung-s10.html Https://blog.flxxyz.com/chat/2019/samsung-s10.html Fri, 08 Mar 2019 15:54:00 +0800 Feng Xiao Xian U11, you can have a rest.

> >
One Https://blog.flxxyz.com/chat/2019/samsung-s10.html#comments Https://blog.flxxyz.com/feed/chat/2019/samsung-s10.html
Firewall wall riding operation Https://blog.flxxyz.com/technology/2019/firewall-forward-ssr.html Https://blog.flxxyz.com/technology/2019/firewall-forward-ssr.html Fri, 22 Feb 2019 11:06:00 +0800 Feng Xiao Xian Rubbed the student discount, bought a Ali cloud server, 5M bandwidth to foreign lines to reduce the probability of packet loss is not bad, NS online beauty, but it is said that the port service online service is out, I do not know how online quality will be.

Firewall relay chestnut

 Open the IP camouflage 
firewall-cmd --add-masquerade --permanent

# add the port protocol 
firewall-cmd --add-forward-port=port= transfer port: proto=tcp:toport= acid milk port: toaddr= acid yogurt address --permanent
firewall-cmd --add-forward-port=port= transit port: proto=udp:toport= sour milk port: the address of the sour yogurt.
> >
Zero Https://blog.flxxyz.com/technology/2019/firewall-forward-ssr.html#comments Https://blog.flxxyz.com/feed/technology/2019/firewall-forward-ssr.html
Rong Rong opens the box and handles the mountain. Https://blog.flxxyz.com/chat/2019/%E7%8B%90%E5%A6%96%E5%B0%8F%E7%BA%A2%E5%A8%98-%E6%B6%82%E5%B1%B1%E8%93%89%E8%93%89.html Https://blog.flxxyz.com/chat/2019/%E7%8B%90%E5%A6%96%E5%B0%8F%E7%BA%A2%E5%A8%98-%E6%B6%82%E5%B1%B1%E8%93%89%E8%93%89.html Wed, 20 Feb 2019 18:13:00 +0800 Feng Xiao Xian Procrastination is serious. Now it's 2.20. It's been 5 weeks.
Procrastination was committed again. Last Sunday (1.20) was dragged to Thursday (1.24).


Qian: prepaid 89 + tail 478

 8.jpg
I have opened my eyes!!!

 1.jpg
The package is so complete that we can not help opening it.

 2.jpg
No need to read series

 3.jpg
The package is quite strict.

 4.jpg

 5.jpg

 6.jpg
A slight flaw does not affect impressions.

 7.jpg
All accessories display

> >
Six Https://blog.flxxyz.com/chat/2019/%E7%8B%90%E5%A6%96%E5%B0%8F%E7%BA%A2%E5%A8%98-%E6%B6%82%E5%B1%B1%E8%93%89%E8%93%89.html#comments Https://blog.flxxyz.com/feed/chat/2019/%E7%8B%90%E5%A6%96%E5%B0%8F%E7%BA%A2%E5%A8%98-%E6%B6%82%E5%B1%B1%E8%93%89%E8%93%89.html
Record the IMG to VBox disk format. Https://blog.flxxyz.com/chat/2019/img-to-vdi.html Https://blog.flxxyz.com/chat/2019/img-to-vdi.html Tue, 22 Jan 2019 15:58:00 +0800 Feng Xiao Xian Koolshare Everyone seems to use it all. StarWind V2V Converter This software is used to write the tools in PE.

However, goose can not play these windows tools at MacOS, and search finds. Virtual box The set of commands is really sweet.

VBoxManage --help Everything is new, new, modified, deleted, network adapters, DHCP, shared folders...

.img Transformation .vdi Break away from GUI, shell rush!

 $VBoxManage convertdd openwrt-koolshare-mod-v2.22-r8838-af7317c5b6-x86-64-combined-squashfs.img 1.vdi

A virtual machine turntable is completed, seconds to turn.

> >
Zero Https://blog.flxxyz.com/chat/2019/img-to-vdi.html#comments Https://blog.flxxyz.com/feed/chat/2019/img-to-vdi.html
This page loaded in 0.000914 seconds